mirror of
https://github.com/supabase/supabase.git
synced 2026-05-08 01:40:13 -04:00
Ivan Vasilov
9fbe5152d9
# Changes ## Removed unused themes - Deleted `concept-two.css` (unused) and `dark-combined.css` which was identical to `dark.css` - Removed the alias `deep-dark` to `dark` theme since it was unused ## Removed Figma token transform scripts - Deleted the entire `internals/transform/` directory (~700 lines of JS) — these scripts transformed Figma tokens into Tailwind variables but are no longer needed - Deleted `internals/tokens/cleanse-css-for-tailwind.js` and `extract-design-tokens.js` - Removed related dependencies from `package.json` ## Removed other unused files - Deleted `shadcn.css` (unused) - Deleted `tailwind-theming.md` (outdated doc), https://supabase.com/design-system/docs/color-usage is a better resource ## Refactoring - Extracted the `motion-safe-transition` Tailwind plugin into its own file (`packages/config/tailwind-plugins/motion-safe-transition.js`) - Renamed the tailwind class generation script for clarity - Added stub `tailwind.config.js` files in packages that were missing them, so VSCode IntelliSense works in those workspaces - Updated `packages/ui/README.md` to reflect current usage patterns (imports, styling conventions) instead of outdated Figma tokens workflow # Testing - Check all apps whether they have the correct themes with the correct colors [Linear task](https://linear.app/supabase/issue/FE-3059/clean-up-unused-ui-build-artifacts-themes-and-figma-token-scripts)
86 lines
2.1 KiB
TypeScript
86 lines
2.1 KiB
TypeScript
const fs = require('fs')
|
|
|
|
const color = require('./../../build/css/tw-extend/color')
|
|
|
|
/**
|
|
*
|
|
* Generates a JS file with all the custom tailwind color classes
|
|
*
|
|
* @param {string} file
|
|
* Name of file to be created
|
|
*/
|
|
function writeJsFile(file: string) {
|
|
const backgrounds = Object.keys(color).filter((x) => x.includes('background-'))
|
|
const borders = Object.keys(color).filter((x) => x.includes('border-'))
|
|
const texts = Object.keys(color).filter((x) => x.includes('foreground-'))
|
|
const colors = Object.keys(color).filter(
|
|
(x) =>
|
|
!x.includes('foreground-') &&
|
|
!x.includes('background-') &&
|
|
!x.includes('border-') &&
|
|
!x.includes('colors-') &&
|
|
!x.includes('variables-')
|
|
)
|
|
const palletes = Object.keys(color).filter((x) => x.includes('colors-'))
|
|
|
|
// console.log('Example tailwind classes: ')
|
|
|
|
function santizieDefaults(x: string) {
|
|
// console.log(x)
|
|
let value = x
|
|
value = value.replace('-DEFAULT', '')
|
|
value = value.replace('background', 'bg')
|
|
value = value.replace('foreground', 'text')
|
|
value = value.replace('colors-', 'bg-')
|
|
value = value.toLowerCase()
|
|
return value
|
|
}
|
|
|
|
const result = {
|
|
background: [...backgrounds.map((x) => santizieDefaults(x))],
|
|
border: [...borders.map((x) => santizieDefaults(x))],
|
|
text: [...texts.map((x) => santizieDefaults(x))],
|
|
colors: [...colors.map((x) => `bg-${santizieDefaults(x)}`)],
|
|
palletes: [...palletes.map((x) => santizieDefaults(x))],
|
|
}
|
|
|
|
const fileContent = `export default ${JSON.stringify(result, null, 2)};\n`
|
|
|
|
fs.writeFileSync(file, fileContent)
|
|
|
|
console.log('saved example color classes to : ', file)
|
|
}
|
|
|
|
writeJsFile('./src/lib/tailwind-demo-classes.ts')
|
|
|
|
// example output
|
|
// ./src/lib/tailwind-demo-classes.js
|
|
|
|
// module.exports = {
|
|
// "background": [
|
|
// "bg",
|
|
// "bg-selection",
|
|
// //..
|
|
// ],
|
|
// "border": [
|
|
// "border",
|
|
// "border-muted",
|
|
// //..
|
|
// ],
|
|
// "text": [
|
|
// "text",
|
|
// "text-strong",
|
|
// //..
|
|
// ],
|
|
// "colors": [
|
|
// "bg-destructive-200",
|
|
// "bg-destructive-300",
|
|
// //..
|
|
// ],
|
|
// "palletes": [
|
|
// "bg-black",
|
|
// "bg-white",
|
|
// //..
|
|
// ]
|
|
// }
|