diff --git a/packages/ui/build-tokens.js b/packages/ui/build-tokens.js index 9898db76faf..d2d657aace8 100644 --- a/packages/ui/build-tokens.js +++ b/packages/ui/build-tokens.js @@ -25,40 +25,6 @@ const supportedTokenTypeList = [ 'textDecoration', ] -// old one - -// registerTransforms(StyleDictionary) - -// const sd = StyleDictionary.extend({ -// source: 'tokens/%themeTokenSets%', -// platforms: { -// css: { -// transformGroup: 'tokens-studio', -// prefix: 'sd', -// buildPath: 'build/css/', -// files: [ -// { -// destination: '_variables-%theme%.css', -// format: 'css/variables', -// }, -// ], -// }, -// js: { -// transformGroup: 'tokens-studio', -// buildPath: 'build/js/', -// files: [ -// { -// destination: 'variables-%theme%.js', -// format: 'javascript/es6', -// }, -// ], -// }, -// }, -// }) - -// sd.cleanAllPlatforms() -// sd.buildAllPlatforms() - registerTransforms(StyleDictionary) const formatTailwindValue = (tokenType, value) => { @@ -153,6 +119,10 @@ function fileNameCleaner(fileName) { return fileName.split('/').pop().replace('.json', '') } +/** + * BUILD SOURCE FILES + */ + sourceFiles.map(function (filePath) { const fileName = fileNameCleaner(filePath) const SD = StyleDictionary.extend( @@ -161,10 +131,9 @@ sourceFiles.map(function (filePath) { SD.buildAllPlatforms() }) -// semanticFiles.map(function (file) { -// const SD = StyleDictionary.extend(getStyleDictionaryConfig(file, 'semantic', false)) -// SD.buildAllPlatforms() -// }) +/** + * BUILD THEME FILE + */ themeFiles.map(function (filePath, i) { const buildTailwindFiles = filePath.includes('root') // i === 0 @@ -182,3 +151,65 @@ themeFiles.map(function (filePath, i) { ) SD.buildAllPlatforms() }) + +function convertToVariableIfNeeded(value) { + if (value.startsWith('{') && value.endsWith('}')) { + return `var(--${value.slice(1, -1).split('.').join('-')})` + } + return value +} + +/** + * BUILD TYPOGRAPHY FILES + */ + +/** + * Format for css typography classes + * This generates theme-independent css classes so we're fine with just using css variables here + */ +StyleDictionary.registerFormat({ + name: 'css/typographyClasses', + formatter: (dictionary, config) => + dictionary.allProperties + .map((prop) => { + return ` +.${prop.name} { + font: var(--${prop.name}); + letter-spacing: ${convertToVariableIfNeeded(prop.original.value.letterSpacing)}; + text-transform: ${convertToVariableIfNeeded(prop.original.value.textCase)}; + text-decoration: ${convertToVariableIfNeeded(prop.original.value.textDecoration)}; +}` + }) + .join('\n'), +}) + +function getTypographyConfig() { + console.log('Building: typography') + return { + source: [...semanticFiles, ...sourceFiles], + platforms: { + css: { + transforms: [ + // 'resolveMath', + // 'size/px', + // 'type/fontWeight', + // 'size/letterspacing', + 'name/cti/kebab', + ], + transformGroup: 'tokens-studio', + buildPath: 'build/css/', + files: [ + { + destination: `source/typography-classes.css`, + format: 'css/typographyClasses', + selector: ':root', + filter: (token) => token.type === 'typography', + }, + ], + }, + }, + } +} + +const typographyBuild = StyleDictionary.extend(getTypographyConfig()) +typographyBuild.buildAllPlatforms() diff --git a/packages/ui/build/css/source/global-two.css b/packages/ui/build/css/source/global-two.css index fce01f2ce79..aff102c10f7 100644 --- a/packages/ui/build/css/source/global-two.css +++ b/packages/ui/build/css/source/global-two.css @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Sat, 06 May 2023 12:08:53 GMT + * Generated on Mon, 08 May 2023 14:42:44 GMT */ :root { diff --git a/packages/ui/build/css/source/global.css b/packages/ui/build/css/source/global.css index 73d65ff5cdd..e9481573a5c 100644 --- a/packages/ui/build/css/source/global.css +++ b/packages/ui/build/css/source/global.css @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Sat, 06 May 2023 12:08:53 GMT + * Generated on Mon, 08 May 2023 14:42:44 GMT */ :root { diff --git a/packages/ui/build/css/source/typography-classes.css b/packages/ui/build/css/source/typography-classes.css new file mode 100644 index 00000000000..84655cd4978 --- /dev/null +++ b/packages/ui/build/css/source/typography-classes.css @@ -0,0 +1,182 @@ + +.typography-h1-bold { + font: var(--typography-h1-bold); + letter-spacing: var(--letterSpacing-1); + text-transform: var(--textCase-none); + text-decoration: var(--textDecoration-none); +} + +.typography-h1-regular { + font: var(--typography-h1-regular); + letter-spacing: var(--letterSpacing-1); + text-transform: var(--textCase-none); + text-decoration: var(--textDecoration-none); +} + +.typography-h2-bold { + font: var(--typography-h2-bold); + letter-spacing: var(--letterSpacing-1); + text-transform: var(--textCase-none); + text-decoration: var(--textDecoration-none); +} + +.typography-h2-regular { + font: var(--typography-h2-regular); + letter-spacing: var(--letterSpacing-1); + text-transform: var(--textCase-none); + text-decoration: var(--textDecoration-none); +} + +.typography-h3-bold { + font: var(--typography-h3-bold); + letter-spacing: var(--letterSpacing-1); + text-transform: var(--textCase-none); + text-decoration: var(--textDecoration-none); +} + +.typography-h3-regular { + font: var(--typography-h3-regular); + letter-spacing: var(--letterSpacing-1); + text-transform: var(--textCase-none); + text-decoration: var(--textDecoration-none); +} + +.typography-h4-bold { + font: var(--typography-h4-bold); + letter-spacing: var(--letterSpacing-1); + text-transform: var(--textCase-none); + text-decoration: var(--textDecoration-none); +} + +.typography-h4-regular { + font: var(--typography-h4-regular); + letter-spacing: var(--letterSpacing-1); + text-transform: var(--textCase-none); + text-decoration: var(--textDecoration-none); +} + +.typography-h4-mono { + font: var(--typography-h4-mono); + letter-spacing: var(--letterSpacing-1); + text-transform: var(--textCase-uppercase); + text-decoration: var(--textDecoration-none); +} + +.typography-h5-bold { + font: var(--typography-h5-bold); + letter-spacing: var(--letterSpacing-1); + text-transform: var(--textCase-none); + text-decoration: var(--textDecoration-none); +} + +.typography-h5-regular { + font: var(--typography-h5-regular); + letter-spacing: var(--letterSpacing-1); + text-transform: var(--textCase-none); + text-decoration: var(--textDecoration-none); +} + +.typography-body-base-normal { + font: var(--typography-body-base-normal); + letter-spacing: var(--letterSpacing-default); + text-transform: var(--textCase-none); + text-decoration: var(--textDecoration-none); +} + +.typography-body-base-mono { + font: var(--typography-body-base-mono); + letter-spacing: var(--letterSpacing-+8); + text-transform: var(--textCase-uppercase); + text-decoration: var(--textDecoration-none); +} + +.typography-body-lg-normal { + font: var(--typography-body-lg-normal); + letter-spacing: var(--letterSpacing-default); + text-transform: var(--textCase-none); + text-decoration: var(--textDecoration-none); +} + +.typography-body-xs-normal { + font: var(--typography-body-xs-normal); + letter-spacing: var(--letterSpacing-default); + text-transform: var(--textCase-none); + text-decoration: var(--textDecoration-none); +} + +.typography-body-xs-code-header { + font: var(--typography-body-xs-code-header); + letter-spacing: var(--letterSpacing-increased); + text-transform: var(--textCase-none); + text-decoration: var(--textDecoration-none); +} + +.typography-body-xss-code { + font: var(--typography-body-xss-code); + letter-spacing: 0.5%; + text-transform: var(--textCase-uppercase); + text-decoration: var(--textDecoration-none); +} + +.typography-body-sm-normal { + font: var(--typography-body-sm-normal); + letter-spacing: var(--letterSpacing-default); + text-transform: var(--textCase-none); + text-decoration: var(--textDecoration-none); +} + +.typography-body-sm-code-header { + font: var(--typography-body-sm-code-header); + letter-spacing: var(--letterSpacing-increased); + text-transform: var(--textCase-none); + text-decoration: var(--textDecoration-none); +} + +.typography-body-sm-code-normal { + font: var(--typography-body-sm-code-normal); + letter-spacing: var(--letterSpacing-default); + text-transform: var(--textCase-none); + text-decoration: var(--textDecoration-none); +} + +.typography-body-sm-bullet-points { + font: var(--typography-body-sm-bullet-points); + letter-spacing: var(--letterSpacing-default); + text-transform: var(--textCase-none); + text-decoration: var(--textDecoration-none); +} + +.typography-button-xs { + font: var(--typography-button-xs); + letter-spacing: var(--letterSpacing-0); + text-transform: var(--textCase-none); + text-decoration: var(--textDecoration-none); +} + +.typography-button-sm { + font: var(--typography-button-sm); + letter-spacing: var(--letterSpacing-0); + text-transform: var(--textCase-none); + text-decoration: var(--textDecoration-none); +} + +.typography-form-label { + font: var(--typography-form-label); + letter-spacing: var(--letterSpacing-0); + text-transform: var(--textCase-none); + text-decoration: var(--textDecoration-none); +} + +.typography-form-label-secondary { + font: var(--typography-form-label-secondary); + letter-spacing: var(--letterSpacing-0); + text-transform: var(--textCase-none); + text-decoration: var(--textDecoration-none); +} + +.typography-table-header { + font: var(--typography-table-header); + letter-spacing: var(--letterSpacing-0); + text-transform: var(--textCase-none); + text-decoration: var(--textDecoration-none); +} \ No newline at end of file diff --git a/packages/ui/build/css/themes/dark.css b/packages/ui/build/css/themes/dark.css index d337163d199..bd667477c85 100644 --- a/packages/ui/build/css/themes/dark.css +++ b/packages/ui/build/css/themes/dark.css @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Sat, 06 May 2023 12:08:53 GMT + * Generated on Mon, 08 May 2023 14:42:44 GMT */ .dark { diff --git a/packages/ui/build/css/themes/darker-dark.css b/packages/ui/build/css/themes/darker-dark.css index e0f9008813d..723893591a2 100644 --- a/packages/ui/build/css/themes/darker-dark.css +++ b/packages/ui/build/css/themes/darker-dark.css @@ -1,9 +1,9 @@ /** * Do not edit directly - * Generated on Sat, 06 May 2023 12:08:53 GMT + * Generated on Mon, 08 May 2023 14:42:44 GMT */ -.dark { +.darker-dark { --utilityMixNegative: #000; --utilityMixPositive: #fff; --darkenPercentage: 0.2; @@ -20,12 +20,8 @@ --themeVariablesBrand: #d626dc; --textColorBodyDefault: var(--themeVariablesTextBody); --backgroundColorBodyAlt: var(--themeVariablesBackgroundBodyAlt); - --backgroundColorBody: var( - --themeVariablesBackgroundBody - ); /* Background color used for the main page body. */ - --backgroundColorDefault: var( - --themeVariablesBackground - ); /* Default background color for any container. */ + --backgroundColorBody: var(--themeVariablesBackgroundBody); /* Background color used for the main page body. */ + --backgroundColorDefault: var(--themeVariablesBackground); /* Default background color for any container. */ --textColorBodyLightest: lch(32.6 0 0); --textColorBodyLighter: lch(46.5 0 0); --textColorBodyLight: lch(65.1 0 0); diff --git a/packages/ui/build/css/themes/light.css b/packages/ui/build/css/themes/light.css index c555d74476c..2602f06388b 100644 --- a/packages/ui/build/css/themes/light.css +++ b/packages/ui/build/css/themes/light.css @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Sat, 06 May 2023 12:08:53 GMT + * Generated on Mon, 08 May 2023 14:42:44 GMT */ .light { diff --git a/packages/ui/copy-tokens.js b/packages/ui/copy-tokens.js index 2b9e1433fea..7fc177b586f 100644 --- a/packages/ui/copy-tokens.js +++ b/packages/ui/copy-tokens.js @@ -13,13 +13,13 @@ const baseUrl = `https://raw.githubusercontent.com/MildTomato/supabase-design-to * Files that need to be copied over from Tokens repo */ const TOKEN_FILES_METADATA = [ - // figma tokens misc config files + // figma tokens misc config files (comment out for now) { fileName: '$metadata.json', type: 'config' }, { fileName: '$themes.json', type: 'config' }, - // source files + // source files (comment out for now) { fileName: 'global.json', type: 'source' }, { fileName: 'global-two.json', type: 'source' }, - // semantic + // semantic (comment out for now) { fileName: 'typography.json', type: 'semantic' }, // themes { fileName: 'root.json', type: 'theme' }, // root theme diff --git a/packages/ui/package.json b/packages/ui/package.json index d4fc8447303..9f1cedf7c4c 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -6,17 +6,11 @@ "license": "MIT", "scripts": { "build:icons": "node --experimental-modules internals/populate-icons.js", - "build-transform-global": "npx token-transformer tokens.json styles/tokens/01_base/global.json global", - "build-transform-dark": "npx token-transformer tokens.json styles/tokens/02_themes/dark.json exported/root", - "build-transform-light": "npx token-transformer tokens.json styles/tokens/02_themes/light.json exported/root,exported/light", - "build-transform-typography": "npx token-transformer tokens.json styles/tokens/03_semantic/typography.json global,typography global --resolveReferences=false", - "build-transform": "npm run build-transform-dark && npm run build-transform-light", - "build-tailwind": "node style-token.js", + "build-tokens": "node build-tokens.js", "copy-tokens": "node copy-tokens.js", - "build-styles": "npm run copy-tokens && npm run build-transform && node style-token.js", + "generate-styles": "npm run copy-tokens && npm run build-tokens", "build-storybook": "storybook build", - "storybook": "storybook dev -p 6006", - "build-tokens": "node build-tokens.js" + "storybook": "storybook dev -p 6006" }, "dependencies": { "@headlessui/react": "^1.0.0",