From ace3d9481b60d7e80656ff20042b17d476dd9dd2 Mon Sep 17 00:00:00 2001 From: Jonathan Summers-Muir Date: Sat, 6 May 2023 15:50:37 +0800 Subject: [PATCH] trying sd-transforms --- .gitignore | 1 + package-lock.json | 94 ++++ packages/config/tailwind.config.js | 2 + packages/ui/build-tokens.js | 34 ++ packages/ui/build/css/_variables-%theme%.css | 170 ++++++ packages/ui/build/js/variables-%theme%.js | 168 ++++++ packages/ui/copy-tokens.js | 68 ++- packages/ui/package.json | 6 +- packages/ui/tokens/$metadata.json | 10 + packages/ui/tokens/$themes.json | 19 + packages/ui/tokens/darker-dark.json | 30 ++ packages/ui/tokens/global-two.json | 23 + packages/ui/tokens/global.json | 518 +++++++++++++++++++ packages/ui/tokens/light.json | 61 +++ packages/ui/tokens/root.json | 207 ++++++++ packages/ui/tokens/typography.json | 374 +++++++++++++ 16 files changed, 1777 insertions(+), 8 deletions(-) create mode 100644 packages/ui/build-tokens.js create mode 100644 packages/ui/build/css/_variables-%theme%.css create mode 100644 packages/ui/build/js/variables-%theme%.js create mode 100644 packages/ui/tokens/$metadata.json create mode 100644 packages/ui/tokens/$themes.json create mode 100644 packages/ui/tokens/darker-dark.json create mode 100644 packages/ui/tokens/global-two.json create mode 100644 packages/ui/tokens/global.json create mode 100644 packages/ui/tokens/light.json create mode 100644 packages/ui/tokens/root.json create mode 100644 packages/ui/tokens/typography.json diff --git a/.gitignore b/.gitignore index f83319ba5b4..049d0747321 100644 --- a/.gitignore +++ b/.gitignore @@ -124,6 +124,7 @@ apps/new-docs/* # UI tokens packages/ui/styles/tokens +# packages/ui/tokens/**/*.json packages/ui/tokens.json # For self-hosted logs: https://github.com/supabase/supabase/blob/86e3ab20abfdb9c3e666334d3d2f8efeef9ccf2c/docker/docker-compose-logging.yml#L101 diff --git a/package-lock.json b/package-lock.json index b82d8b0f17d..f563e731bda 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14518,6 +14518,29 @@ "@testing-library/dom": ">=7.21.4" } }, + "node_modules/@tokens-studio/sd-transforms": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@tokens-studio/sd-transforms/-/sd-transforms-0.8.5.tgz", + "integrity": "sha512-fqojhdPuELoNBFlo3LsUmEVnvGAiczyF8R94OIKhjcRRoNGvFKEAFETxb61Nn4SFT+nRXLQ0D339xlD4BVjhEQ==", + "dev": true, + "dependencies": { + "@tokens-studio/types": "^0.2.1", + "color2k": "^2.0.1", + "colorjs.io": "^0.4.3", + "expr-eval": "^2.0.2", + "postcss-calc-ast-parser": "^0.1.4", + "style-dictionary": "^3.7.2" + }, + "engines": { + "node": ">=15.14.0" + } + }, + "node_modules/@tokens-studio/types": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@tokens-studio/types/-/types-0.2.1.tgz", + "integrity": "sha512-yuSgYbKM7yU/r3Dx5UqG2s/L31ZNA/o232Gk7ayQpcSDHAIrVAoR4rYV3XMKNbuLv9xHjrFa7OnqEjAghFgqWQ==", + "dev": true + }, "node_modules/@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", @@ -19017,6 +19040,11 @@ "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==", "dev": true }, + "node_modules/colorjs.io": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.4.3.tgz", + "integrity": "sha512-Jr6NiWFZCuSECl23Bhe4jvDldQsE0ErnWrdl3xIUFy+Bkp0l8r5qt/iZlNH47/xxGP5izcyC8InjoUoI4Po+Pg==" + }, "node_modules/combined-stream": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", @@ -34643,6 +34671,24 @@ "node": ">=0.10.0" } }, + "node_modules/postcss-calc-ast-parser": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/postcss-calc-ast-parser/-/postcss-calc-ast-parser-0.1.4.tgz", + "integrity": "sha512-CebpbHc96zgFjGgdQ6BqBy6XIUgRx1xXWCAAk6oke02RZ5nxwo9KQejTg8y7uYEeI9kv8jKQPYjoe6REsY23vw==", + "dev": true, + "dependencies": { + "postcss-value-parser": "^3.3.1" + }, + "engines": { + "node": ">=6.5" + } + }, + "node_modules/postcss-calc-ast-parser/node_modules/postcss-value-parser": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", + "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", + "dev": true + }, "node_modules/postcss-color-functional-notation": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-2.0.1.tgz", @@ -45076,8 +45122,10 @@ "autoprefixer": "^10.4.14", "clsx": "^1.2.1", "cmdk-supabase": "^0.2.2", + "colorjs.io": "^0.4.3", "common-tags": "^1.8.2", "config": "*", + "d": "^1.0.1", "formik": "^2.2.9", "lodash": "^4.17.20", "lucide-react": "^0.124.0", @@ -45104,6 +45152,7 @@ "@storybook/addon-styling": "^1.0.1", "@storybook/react": "^7.0.5", "@storybook/react-webpack5": "^7.0.5", + "@tokens-studio/sd-transforms": "^0.8.5", "@types/common-tags": "^1.8.1", "@types/react": "^17.0.37", "@types/react-dom": "^17.0.11", @@ -56708,6 +56757,26 @@ "@babel/runtime": "^7.12.5" } }, + "@tokens-studio/sd-transforms": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@tokens-studio/sd-transforms/-/sd-transforms-0.8.5.tgz", + "integrity": "sha512-fqojhdPuELoNBFlo3LsUmEVnvGAiczyF8R94OIKhjcRRoNGvFKEAFETxb61Nn4SFT+nRXLQ0D339xlD4BVjhEQ==", + "dev": true, + "requires": { + "@tokens-studio/types": "^0.2.1", + "color2k": "^2.0.1", + "colorjs.io": "^0.4.3", + "expr-eval": "^2.0.2", + "postcss-calc-ast-parser": "^0.1.4", + "style-dictionary": "^3.7.2" + } + }, + "@tokens-studio/types": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@tokens-studio/types/-/types-0.2.1.tgz", + "integrity": "sha512-yuSgYbKM7yU/r3Dx5UqG2s/L31ZNA/o232Gk7ayQpcSDHAIrVAoR4rYV3XMKNbuLv9xHjrFa7OnqEjAghFgqWQ==", + "dev": true + }, "@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", @@ -60326,6 +60395,11 @@ "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==", "dev": true }, + "colorjs.io": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.4.3.tgz", + "integrity": "sha512-Jr6NiWFZCuSECl23Bhe4jvDldQsE0ErnWrdl3xIUFy+Bkp0l8r5qt/iZlNH47/xxGP5izcyC8InjoUoI4Po+Pg==" + }, "combined-stream": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", @@ -72776,6 +72850,23 @@ } } }, + "postcss-calc-ast-parser": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/postcss-calc-ast-parser/-/postcss-calc-ast-parser-0.1.4.tgz", + "integrity": "sha512-CebpbHc96zgFjGgdQ6BqBy6XIUgRx1xXWCAAk6oke02RZ5nxwo9KQejTg8y7uYEeI9kv8jKQPYjoe6REsY23vw==", + "dev": true, + "requires": { + "postcss-value-parser": "^3.3.1" + }, + "dependencies": { + "postcss-value-parser": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", + "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", + "dev": true + } + } + }, "postcss-color-functional-notation": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-2.0.1.tgz", @@ -79299,6 +79390,7 @@ "@supabase/auth-helpers-react": "^0.3.1", "@tailwindcss/forms": "^0.4.0", "@tailwindcss/typography": "^0.5.0", + "@tokens-studio/sd-transforms": "^0.8.5", "@types/common-tags": "^1.8.1", "@types/react": "^17.0.37", "@types/react-dom": "^17.0.11", @@ -79306,9 +79398,11 @@ "clsx": "^1.2.1", "cmdk-supabase": "^0.2.2", "color2k": "^2.0.1", + "colorjs.io": "^0.4.3", "common-tags": "^1.8.2", "config": "*", "copyfiles": "^2.4.1", + "d": "^1.0.1", "expr-eval": "^2.0.2", "formik": "^2.2.9", "glob": "^8.1.0", diff --git a/packages/config/tailwind.config.js b/packages/config/tailwind.config.js index 1e892af1781..bfd82dbb6f1 100644 --- a/packages/config/tailwind.config.js +++ b/packages/config/tailwind.config.js @@ -17,6 +17,8 @@ function generateTwColorClasses(globalKey, twAttributes) { return classes } +console.log(generateTwColorClasses('borderColor', color)) + const uiConfig = ui({ mode: 'JIT', darkMode: 'class', diff --git a/packages/ui/build-tokens.js b/packages/ui/build-tokens.js new file mode 100644 index 00000000000..6f48e807e37 --- /dev/null +++ b/packages/ui/build-tokens.js @@ -0,0 +1,34 @@ +const { registerTransforms } = require('@tokens-studio/sd-transforms') +const StyleDictionary = require('style-dictionary') + +registerTransforms(StyleDictionary) + +const sd = StyleDictionary.extend({ + source: ['tokens/*.json'], + 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() diff --git a/packages/ui/build/css/_variables-%theme%.css b/packages/ui/build/css/_variables-%theme%.css new file mode 100644 index 00000000000..bc2d662094a --- /dev/null +++ b/packages/ui/build/css/_variables-%theme%.css @@ -0,0 +1,170 @@ +/** + * Do not edit directly + * Generated on Sat, 06 May 2023 07:45:48 GMT + */ + +:root { + --sdThemeVariablesBrand: #2b825b; + --sdThemeVariablesBackground: #232323; /* og color is colors.Gray.Dark.3 */ + --sdThemeVariablesBackgroundBody: #1c1c1c; /* og color is colors.Gray.Dark.2 */ + --sdThemeVariablesBackgroundBodyAlt: #161616; /* og color is colors.Gray.Dark.1 */ + --sdThemeVariablesTextBody: #ededed; /* og color is colors.Gray.Dark.12 */ + --sdMenuItemSection: 5px; + --sdContextMenu: 6px; + --sdDropShadowContextMenu: 0 2px 5px 3px rgba(0,0,0,0.1); + --sdSpacingScale: 2px; + --sdSpacingXs: 4px; + --sdSpacingSm: 8px; + --sdSpacingMd: 16px; + --sdSpacingLg: 32px; + --sdSpacingXl: 64px; + --sdSizingScale: 1.5px; + --sdSizingXs: 4px; + --sdSizingSm: 6px; + --sdSizingMd: 9px; + --sdSizingLg: 13.5px; + --sdSizingXl: 20.25px; + --sdBorderRadiusSm: 4px; + --sdBorderRadiusLg: 8px; + --sdBorderRadiusXl: 16px; + --sdBorderRadiusXs: 2px; + --sdBorderRadiusTableHeader: 4px; + --sdBorderWidthNone: 0; + --sdBorderWidthXs: 1px; + --sdBorderWidthSm: 2px; + --sdBorderWidthMd: 4px; + --sdBorderWidthLg: 8px; + --sdOpacityLow: 0.1; + --sdOpacityMd: 0.5; + --sdOpacityHigh: 0.9; + --sdFontFamiliesHeading: Inter; + --sdFontFamiliesBody: Circular Std; + --sdFontFamiliesRoboto: Roboto; + --sdFontFamiliesBody2: Circular Std; + --sdFontFamiliesMono: Office Code Pro; + --sdLineHeights0: 1.1; + --sdLineHeightsHeading: 1.1; + --sdLineHeightsBase: 24; + --sdLineHeightsXs: 16; + --sdLineHeightsSm: 20; + --sdLineHeightsLg: 28; + --sdLineHeightsXl: 28; + --sdLineHeights2xl: 32; + --sdLineHeights3xl: 16 *2.25; + --sdLineHeights4xl: 40; + --sdLineHeights5xl: 48; + --sdLineHeights6xl: 60; + --sdLineHeights7xl: 72; + --sdLineHeights8xl: 96; + --sdLineHeights9xl: 128; + --sdLetterSpacing0: 0em; + --sdLetterSpacing1: -0.02em; + --sdLetterSpacingDefault: 0; + --sdLetterSpacingIncreased: 0.1em; + --sdLetterSpacingDecreased: -0.05em; + --sdLetterSpacing8: 0.08em; + --sdParagraphSpacing0: 26; + --sdParagraphSpacing1: 32; + --sdParagraphSpacingH1: 32; + --sdParagraphSpacingH2: 26; + --sdFontWeightsHeadingRegular: 400; + --sdFontWeightsHeadingBold: 700; + --sdFontWeightsBodyRegular: 400; + --sdFontWeightsBodyBold: 700; + --sdFontWeightsRoboto0: 400; + --sdFontWeightsInter1: 500; + --sdFontWeightsInter2: Book; + --sdFontWeightsHeadingMono: 500; + --sdFontSizes5xl: 48; + --sdFontSizes4xl: 36; + --sdFontSizes3xl: 30; + --sdFontSizes2xl: 24; + --sdFontSizesXl: 20; + --sdFontSizesLg: 18; + --sdFontSizesBase: 16; + --sdFontSizesSm: 14; + --sdFontSizesXs: 12; + --sdFontSizes6xl: 60; + --sdFontSizes7xl: 72; + --sdFontSizes8xl: 96; + --sdFontSizes9xl: 128; + --sdInnerShadowLabelCopy: inset 0 1px 1px 0 #858585; + --sdInnerShadowTextNew: inset 0 0.5px 0.5px 0 #00000026; + --sdFontSize0: 14px; + --sdFontSize1: 39.063px; + --sdFontSize2: 48.829px; + --sdTextCaseNone: none; + --sdTextCaseUppercase: uppercase; + --sdTextDecorationNone: none; + --sdIconXs: 12px; + --sdIconSm: 16px; + --sdIconMd: 18px; + --sdIconBg: 0.15; /* Transuclent bg of icons */ + --sdIconWidthDefault: 1px; + --sdFormInputDisabled: 0.33; + --sdModalDropShadow: 1px 4px 4px 4px rgba(0,0,0,0.15); + --sdPanel: 2px; + --sdDatatableHeadericon: 16px; + --sdDatatableRowheight: 28px; /* Height of datatable rows */ + --sdOptionsIcon: 18px; /* Size of product/dropdown icons icons */ + --sdInputSmHeight: 28px; + --sdPanel2: 4px; + --sdBase: 16; + --sdXxl: 128px; + --sdActionBarVertical: 21px; + --sdActionBarHorizontal: 32px; + --sdTableHeaderHorizontal: 32px; + --sdTabsHorizontal: 16px; + --sdContentVertical: 32px; + --sdContentHorizontal: 32px; + --sdContentWidthScreenXl: 1128px; + --sdControllerVertical: 16px; + --sdLightenDefault: 0.1; + --sdLightenSoft: 0.05; + --sdLightenHard: 0.3; + --sdLightenHarder: 0.5; + --sdLightenHardest: 0.65; + --sdDarkenPercentage: 0.2; + --sdUtilityMixPositive: #fff; + --sdUtilityMixNegative: #000; + --sdUtilityGithubBackground: #ffffff; + --sdTextOverrideLightenStrength: 0; + --sdTextDefault: #ededed; + --sdTextBodyLight: lch(65.6 0 0); + --sdTextBodyLighter: lch(46.9 0 0); + --sdTextBodyLightest: lch(32.8 0 0); + --sdBackgroundColorDefault: #232323; /* Default background color for any container. */ + --sdBackgroundColorBody: #1c1c1c; /* Background color used for the main page body. */ + --sdBackgroundColorBodyAlt: #161616; + --sdBackgroundColorSelection: lch(18 0 0); + --sdBackgroundColorControl: lch(9.6 0 0); + --sdBorderColorDefault: lch(18 0 0); /* Default border color */ + --sdBorderColorBody: lch(14.8 0 0); + --sdBorderColorControl: lch(22.1 0 0); + --sdTypographyH1Bold: 500 48px/48 Circular Std; + --sdTypographyH1Regular: Book 48px/48 Circular Std; + --sdTypographyH2Bold: 500 36px/40 Circular Std; + --sdTypographyH2Regular: Book 36px/40 Circular Std; + --sdTypographyH3Bold: 500 30px/16 *2.25 Circular Std; + --sdTypographyH3Regular: Book 30px/16 *2.25 Circular Std; + --sdTypographyH4Bold: 500 24px/32 Circular Std; + --sdTypographyH4Regular: Book 24px/32 Circular Std; + --sdTypographyH4Mono: 500 24px/32 Office Code Pro; + --sdTypographyH5Bold: 500 20px/28 Circular Std; + --sdTypographyH5Regular: Book 20px/28 Circular Std; + --sdTypographyBodyBaseNormal: Book 16px/24 Circular Std; + --sdTypographyBodyBaseMono: 500 14px/32 Office Code Pro; + --sdTypographyBodyLgNormal: Book 18px/28 Circular Std; + --sdTypographyBodyXsNormal: Book 12px/16 Circular Std; + --sdTypographyBodyXsCodeHeader: 500 12px/20 Office Code Pro; + --sdTypographyBodyXssCode: 500 9px/9 Circular Std; + --sdTypographyBodySmNormal: Book 14px/20 Circular Std; + --sdTypographyBodySmCodeHeader: 400 14px/20 Office Code Pro; + --sdTypographyBodySmCodeNormal: 400 14px/20 Office Code Pro; + --sdTypographyBodySmBulletPoints: Book 14px/20 Circular Std; + --sdTypographyButtonXs: Book 12px/16 Circular Std; + --sdTypographyButtonSm: Book 14px/20 Circular Std; + --sdTypographyFormLabel: Book 14px/20 Circular Std; + --sdTypographyFormLabelSecondary: Book 14px/20 Circular Std; + --sdTypographyTableHeader: Book 12px/20 Circular Std; +} diff --git a/packages/ui/build/js/variables-%theme%.js b/packages/ui/build/js/variables-%theme%.js new file mode 100644 index 00000000000..9a40f2e5d03 --- /dev/null +++ b/packages/ui/build/js/variables-%theme%.js @@ -0,0 +1,168 @@ +/** + * Do not edit directly + * Generated on Sat, 06 May 2023 07:45:48 GMT + */ + +export const themeVariablesBrand = "#2b825b"; +export const themeVariablesBackground = "#232323"; // og color is colors.Gray.Dark.3 +export const themeVariablesBackgroundBody = "#1c1c1c"; // og color is colors.Gray.Dark.2 +export const themeVariablesBackgroundBodyAlt = "#161616"; // og color is colors.Gray.Dark.1 +export const themeVariablesTextBody = "#ededed"; // og color is colors.Gray.Dark.12 +export const menuItemSection = "5px"; +export const contextMenu = "6px"; +export const dropShadowContextMenu = "0 2px 5px 3px rgba(0,0,0,0.1)"; +export const spacingScale = "2px"; +export const spacingXs = "4px"; +export const spacingSm = "8px"; +export const spacingMd = "16px"; +export const spacingLg = "32px"; +export const spacingXl = "64px"; +export const sizingScale = "1.5px"; +export const sizingXs = "4px"; +export const sizingSm = "6px"; +export const sizingMd = "9px"; +export const sizingLg = "13.5px"; +export const sizingXl = "20.25px"; +export const borderRadiusSm = "4px"; +export const borderRadiusLg = "8px"; +export const borderRadiusXl = "16px"; +export const borderRadiusXs = "2px"; +export const borderRadiusTableHeader = "4px"; +export const borderWidthNone = "0"; +export const borderWidthXs = "1px"; +export const borderWidthSm = "2px"; +export const borderWidthMd = "4px"; +export const borderWidthLg = "8px"; +export const opacityLow = "0.1"; +export const opacityMd = "0.5"; +export const opacityHigh = "0.9"; +export const fontFamiliesHeading = "Inter"; +export const fontFamiliesBody = "Circular Std"; +export const fontFamiliesRoboto = "Roboto"; +export const fontFamiliesBody2 = "Circular Std"; +export const fontFamiliesMono = "Office Code Pro"; +export const lineHeights0 = "1.1"; +export const lineHeightsHeading = "1.1"; +export const lineHeightsBase = "24"; +export const lineHeightsXs = "16"; +export const lineHeightsSm = "20"; +export const lineHeightsLg = "28"; +export const lineHeightsXl = "28"; +export const lineHeights2xl = "32"; +export const lineHeights3xl = "16 *2.25"; +export const lineHeights4xl = "40"; +export const lineHeights5xl = "48"; +export const lineHeights6xl = "60"; +export const lineHeights7xl = "72"; +export const lineHeights8xl = "96"; +export const lineHeights9xl = "128"; +export const letterSpacing0 = "0em"; +export const letterSpacing1 = "-0.02em"; +export const letterSpacingDefault = "0"; +export const letterSpacingIncreased = "0.1em"; +export const letterSpacingDecreased = "-0.05em"; +export const letterSpacing8 = "0.08em"; +export const paragraphSpacing0 = "26"; +export const paragraphSpacing1 = "32"; +export const paragraphSpacingH1 = "32"; +export const paragraphSpacingH2 = "26"; +export const fontWeightsHeadingRegular = "400"; +export const fontWeightsHeadingBold = "700"; +export const fontWeightsBodyRegular = "400"; +export const fontWeightsBodyBold = "700"; +export const fontWeightsRoboto0 = "400"; +export const fontWeightsInter1 = "500"; +export const fontWeightsInter2 = "Book"; +export const fontWeightsHeadingMono = "500"; +export const fontSizes5xl = "48"; +export const fontSizes4xl = "36"; +export const fontSizes3xl = "30"; +export const fontSizes2xl = "24"; +export const fontSizesXl = "20"; +export const fontSizesLg = "18"; +export const fontSizesBase = "16"; +export const fontSizesSm = "14"; +export const fontSizesXs = "12"; +export const fontSizes6xl = "60"; +export const fontSizes7xl = "72"; +export const fontSizes8xl = "96"; +export const fontSizes9xl = "128"; +export const innerShadowLabelCopy = "inset 0 1px 1px 0 #858585"; +export const innerShadowTextNew = "inset 0 0.5px 0.5px 0 #00000026"; +export const fontSize0 = "14px"; +export const fontSize1 = "39.063px"; +export const fontSize2 = "48.829px"; +export const textCaseNone = "none"; +export const textCaseUppercase = "uppercase"; +export const textDecorationNone = "none"; +export const iconXs = "12px"; +export const iconSm = "16px"; +export const iconMd = "18px"; +export const iconBg = "0.15"; // Transuclent bg of icons +export const iconWidthDefault = "1px"; +export const formInputDisabled = "0.33"; +export const modalDropShadow = "1px 4px 4px 4px rgba(0,0,0,0.15)"; +export const panel = "2px"; +export const datatableHeadericon = "16px"; +export const datatableRowheight = "28px"; // Height of datatable rows +export const optionsIcon = "18px"; // Size of product/dropdown icons icons +export const inputSmHeight = "28px"; +export const panel2 = "4px"; +export const base = "16"; +export const xxl = "128px"; +export const actionBarVertical = "21px"; +export const actionBarHorizontal = "32px"; +export const tableHeaderHorizontal = "32px"; +export const tabsHorizontal = "16px"; +export const contentVertical = "32px"; +export const contentHorizontal = "32px"; +export const contentWidthScreenXl = "1128px"; +export const controllerVertical = "16px"; +export const lightenDefault = "0.1"; +export const lightenSoft = "0.05"; +export const lightenHard = "0.3"; +export const lightenHarder = "0.5"; +export const lightenHardest = "0.65"; +export const darkenPercentage = "0.2"; +export const utilityMixPositive = "#fff"; +export const utilityMixNegative = "#000"; +export const utilityGithubBackground = "#ffffff"; +export const textOverrideLightenStrength = "0"; +export const textDefault = "#ededed"; +export const textBodyLight = "lch(65.6 0 0)"; +export const textBodyLighter = "lch(46.9 0 0)"; +export const textBodyLightest = "lch(32.8 0 0)"; +export const backgroundColorDefault = "#232323"; // Default background color for any container. +export const backgroundColorBody = "#1c1c1c"; // Background color used for the main page body. +export const backgroundColorBodyAlt = "#161616"; +export const backgroundColorSelection = "lch(18 0 0)"; +export const backgroundColorControl = "lch(9.6 0 0)"; +export const borderColorDefault = "lch(18 0 0)"; // Default border color +export const borderColorBody = "lch(14.8 0 0)"; +export const borderColorControl = "lch(22.1 0 0)"; +export const typographyH1Bold = "500 48px/48 Circular Std"; +export const typographyH1Regular = "Book 48px/48 Circular Std"; +export const typographyH2Bold = "500 36px/40 Circular Std"; +export const typographyH2Regular = "Book 36px/40 Circular Std"; +export const typographyH3Bold = "500 30px/16 *2.25 Circular Std"; +export const typographyH3Regular = "Book 30px/16 *2.25 Circular Std"; +export const typographyH4Bold = "500 24px/32 Circular Std"; +export const typographyH4Regular = "Book 24px/32 Circular Std"; +export const typographyH4Mono = "500 24px/32 Office Code Pro"; +export const typographyH5Bold = "500 20px/28 Circular Std"; +export const typographyH5Regular = "Book 20px/28 Circular Std"; +export const typographyBodyBaseNormal = "Book 16px/24 Circular Std"; +export const typographyBodyBaseMono = "500 14px/32 Office Code Pro"; +export const typographyBodyLgNormal = "Book 18px/28 Circular Std"; +export const typographyBodyXsNormal = "Book 12px/16 Circular Std"; +export const typographyBodyXsCodeHeader = "500 12px/20 Office Code Pro"; +export const typographyBodyXssCode = "500 9px/9 Circular Std"; +export const typographyBodySmNormal = "Book 14px/20 Circular Std"; +export const typographyBodySmCodeHeader = "400 14px/20 Office Code Pro"; +export const typographyBodySmCodeNormal = "400 14px/20 Office Code Pro"; +export const typographyBodySmBulletPoints = "Book 14px/20 Circular Std"; +export const typographyButtonXs = "Book 12px/16 Circular Std"; +export const typographyButtonSm = "Book 14px/20 Circular Std"; +export const typographyFormLabel = "Book 14px/20 Circular Std"; +export const typographyFormLabelSecondary = "Book 14px/20 Circular Std"; +export const typographyTableHeader = "Book 12px/20 Circular Std"; \ No newline at end of file diff --git a/packages/ui/copy-tokens.js b/packages/ui/copy-tokens.js index 97e755305bf..482f762dec4 100644 --- a/packages/ui/copy-tokens.js +++ b/packages/ui/copy-tokens.js @@ -1,10 +1,64 @@ -const branch = 'feat/new-components' -// using Math.random() in a param as GitHub caches raw content -const url = `https://raw.githubusercontent.com/MildTomato/supabase-design-tokens/${branch}/tokens.json?v=${Math.random()}` - -console.log('branch to pull is:', branch) - const https = require('https') const fs = require('fs') -https.get(url, (resp) => resp.pipe(fs.createWriteStream(`./tokens.json`))) +// using Math.random() in a param as GitHub caches raw content +// const url = `https://raw.githubusercontent.com/MildTomato/supabase-design-tokens/${branch}/tokens.json?e=${Math.random()}` +const baseUrl = `https://raw.githubusercontent.com/MildTomato/supabase-design-tokens/${branch}/tokens/` + +/* + * Branch to target in GitHub repo + */ +const branch = 'feat/new-components' + +/* + * Files that need to be copied over from Tokens repo + */ +const urls = [ + // figma tokens misc config files + baseUrl + '$metadata.json', + baseUrl + '$themes.json', + // source files + baseUrl + 'global.json', + baseUrl + 'global-two.json', + baseUrl + 'typography.json', + // root theme + baseUrl + 'root.json', + // themes + baseUrl + 'light.json', + baseUrl + 'darker-dark.json', +] + +async function getTokensFile() { + const promises = urls.map((url, i) => { + return new Promise((resolve, reject) => { + https + .get(url, (res) => { + let data = '' + res.on('data', (chunk) => { + data += chunk + }) + res.on('end', () => { + fs.writeFile(`./tokens/${url.replace(baseUrl, '')}`, data, 'utf8', () => {}) + resolve(data) + }) + }) + .on('error', (err) => { + reject(err) + }) + }) + }) + + await Promise.all(promises) +} + +async function copyFiles() { + console.log('Copying token files... \n') + console.log('branch to pull is:', branch) + try { + await getTokensFile() + } catch (error) { + console.error(error) + } +} + +copyFiles() diff --git a/packages/ui/package.json b/packages/ui/package.json index 9d2e5345b4a..5ccce249261 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -15,7 +15,8 @@ "copy-tokens": "node copy-tokens.js", "build-styles": "npm run copy-tokens && npm run build-transform && node style-token.js", "build-storybook": "storybook build", - "storybook": "storybook dev -p 6006" + "storybook": "storybook dev -p 6006", + "build-tokens": "node build-tokens.js" }, "dependencies": { "@headlessui/react": "^1.0.0", @@ -34,8 +35,10 @@ "autoprefixer": "^10.4.14", "clsx": "^1.2.1", "cmdk-supabase": "^0.2.2", + "colorjs.io": "^0.4.3", "common-tags": "^1.8.2", "config": "*", + "d": "^1.0.1", "formik": "^2.2.9", "lodash": "^4.17.20", "lucide-react": "^0.124.0", @@ -62,6 +65,7 @@ "@storybook/addon-styling": "^1.0.1", "@storybook/react": "^7.0.5", "@storybook/react-webpack5": "^7.0.5", + "@tokens-studio/sd-transforms": "^0.8.5", "@types/common-tags": "^1.8.1", "@types/react": "^17.0.37", "@types/react-dom": "^17.0.11", diff --git a/packages/ui/tokens/$metadata.json b/packages/ui/tokens/$metadata.json new file mode 100644 index 00000000000..6a11157c8fa --- /dev/null +++ b/packages/ui/tokens/$metadata.json @@ -0,0 +1,10 @@ +{ + "tokenSetOrder": [ + "global", + "typography", + "global-two", + "root", + "light", + "darker-dark" + ] +} \ No newline at end of file diff --git a/packages/ui/tokens/$themes.json b/packages/ui/tokens/$themes.json new file mode 100644 index 00000000000..2224faff98a --- /dev/null +++ b/packages/ui/tokens/$themes.json @@ -0,0 +1,19 @@ +[ + { + "id": "f5feb0d8ddfeace66dc28424a46bbc4e4fe21d6d", + "name": "dark", + "selectedTokenSets": { + "root": "source" + }, + "$figmaStyleReferences": {} + }, + { + "id": "8a2a94cc2d091998736de922735f7c19ca6cc25e", + "name": "light", + "selectedTokenSets": { + "root": "source", + "light": "enabled" + }, + "$figmaStyleReferences": {} + } +] \ No newline at end of file diff --git a/packages/ui/tokens/darker-dark.json b/packages/ui/tokens/darker-dark.json new file mode 100644 index 00000000000..731a37ec69d --- /dev/null +++ b/packages/ui/tokens/darker-dark.json @@ -0,0 +1,30 @@ +{ + "theme-variables": { + "brand": { + "value": "#d626dc", + "type": "color" + }, + "background": { + "value": "#141414", + "type": "color", + "description": "$colors.Gray.Dark.3" + }, + "background-body": { + "value": "#000", + "type": "color", + "description": "$colors.Gray.Dark.2" + }, + "background-body-alt": { + "value": "#161616", + "type": "color", + "description": "$colors.Gray.Dark.1" + }, + "text": { + "body": { + "value": "#ebebeb", + "type": "color", + "description": "$colors.Gray.Dark.12" + } + } + } +} \ No newline at end of file diff --git a/packages/ui/tokens/global-two.json b/packages/ui/tokens/global-two.json new file mode 100644 index 00000000000..25cf4bdf92d --- /dev/null +++ b/packages/ui/tokens/global-two.json @@ -0,0 +1,23 @@ +{ + "menu-item-section": { + "value": "5px", + "type": "spacing" + }, + "context-menu": { + "value": "6px", + "type": "borderRadius" + }, + "dropShadow": { + "context-menu": { + "value": { + "x": "0", + "y": "2", + "blur": "5", + "spread": "3", + "color": "rgba(0,0,0,0.1)", + "type": "dropShadow" + }, + "type": "boxShadow" + } + } +} \ No newline at end of file diff --git a/packages/ui/tokens/global.json b/packages/ui/tokens/global.json new file mode 100644 index 00000000000..302d054f1fc --- /dev/null +++ b/packages/ui/tokens/global.json @@ -0,0 +1,518 @@ +{ + "spacing": { + "scale": { + "value": "2", + "type": "spacing" + }, + "xs": { + "value": "4", + "type": "spacing" + }, + "sm": { + "value": "{spacing.xs} * {spacing.scale}", + "type": "spacing" + }, + "md": { + "value": "{spacing.sm} * {spacing.scale}", + "type": "spacing" + }, + "lg": { + "value": "{spacing.md} * {spacing.scale}", + "type": "spacing" + }, + "xl": { + "value": "{spacing.lg} * {spacing.scale}", + "type": "spacing" + } + }, + "sizing": { + "scale": { + "value": "1.5", + "type": "sizing" + }, + "xs": { + "value": "4", + "type": "sizing" + }, + "sm": { + "value": "{sizing.xs} * {sizing.scale}", + "type": "sizing" + }, + "md": { + "value": "{sizing.sm} * {sizing.scale}", + "type": "sizing" + }, + "lg": { + "value": "{sizing.md} * {sizing.scale}", + "type": "sizing" + }, + "xl": { + "value": "{sizing.lg} * {sizing.scale}", + "type": "sizing" + } + }, + "borderRadius": { + "sm": { + "value": "4", + "type": "borderRadius" + }, + "lg": { + "value": "8", + "type": "borderRadius" + }, + "xl": { + "value": "16", + "type": "borderRadius" + }, + "xs": { + "value": "2", + "type": "borderRadius" + }, + "tableHeader": { + "value": "{borderRadius.sm}", + "type": "borderRadius" + } + }, + "borderWidth": { + "none": { + "value": "0", + "type": "borderWidth" + }, + "xs": { + "value": "1", + "type": "borderWidth" + }, + "sm": { + "value": "2", + "type": "borderWidth" + }, + "md": { + "value": "4", + "type": "borderWidth" + }, + "lg": { + "value": "8", + "type": "borderWidth" + } + }, + "opacity": { + "low": { + "value": "10%", + "type": "opacity" + }, + "md": { + "value": "50%", + "type": "opacity" + }, + "high": { + "value": "90%", + "type": "opacity" + } + }, + "fontFamilies": { + "heading": { + "value": "Inter", + "type": "fontFamilies" + }, + "body": { + "value": "Circular Std", + "type": "fontFamilies" + }, + "roboto": { + "value": "Roboto", + "type": "fontFamilies" + }, + "body2": { + "value": "Circular Std", + "type": "fontFamilies" + }, + "mono": { + "value": "Office Code Pro", + "type": "fontFamilies" + } + }, + "lineHeights": { + "0": { + "value": "110%", + "type": "lineHeights" + }, + "heading": { + "value": "110%", + "type": "lineHeights" + }, + "base": { + "value": "{base} * 1.5", + "type": "lineHeights" + }, + "xs": { + "value": "{base} * 1", + "type": "lineHeights" + }, + "sm": { + "value": "{base} * 1.25", + "type": "lineHeights" + }, + "lg": { + "value": "{base} * 1.75", + "type": "lineHeights" + }, + "xl": { + "value": "{base} * 1.75", + "type": "lineHeights" + }, + "2xl": { + "value": "{base} * 2", + "type": "lineHeights" + }, + "3xl": { + "value": "{base} *2.25", + "type": "lineHeights" + }, + "4xl": { + "value": "{base} * 2.5", + "type": "lineHeights" + }, + "5xl": { + "value": "{base} * 3", + "type": "lineHeights" + }, + "6xl": { + "value": "{base} * 3.75", + "type": "lineHeights" + }, + "7xl": { + "value": "{base} * 4.5", + "type": "lineHeights" + }, + "8xl": { + "value": "{base} * 6", + "type": "lineHeights" + }, + "9xl": { + "value": "{base} * 8", + "type": "lineHeights" + } + }, + "letterSpacing": { + "0": { + "value": "0%", + "type": "letterSpacing" + }, + "1": { + "value": "-2%", + "type": "letterSpacing" + }, + "default": { + "value": "0", + "type": "letterSpacing" + }, + "increased": { + "value": "10%", + "type": "letterSpacing" + }, + "decreased": { + "value": "-5%", + "type": "letterSpacing" + }, + "+8": { + "value": "+8%", + "type": "letterSpacing" + } + }, + "paragraphSpacing": { + "0": { + "value": "26", + "type": "paragraphSpacing" + }, + "1": { + "value": "32", + "type": "paragraphSpacing" + }, + "h1": { + "value": "32", + "type": "paragraphSpacing" + }, + "h2": { + "value": "26", + "type": "paragraphSpacing" + } + }, + "fontWeights": { + "headingRegular": { + "value": "Regular", + "type": "fontWeights" + }, + "headingBold": { + "value": "Bold", + "type": "fontWeights" + }, + "bodyRegular": { + "value": "Regular", + "type": "fontWeights" + }, + "bodyBold": { + "value": "Bold", + "type": "fontWeights" + }, + "roboto-0": { + "value": "Regular", + "type": "fontWeights" + }, + "inter-1": { + "value": "Medium", + "type": "fontWeights" + }, + "inter-2": { + "value": "Book", + "type": "fontWeights" + }, + "heading-mono": { + "value": "Medium", + "type": "fontWeights" + } + }, + "fontSizes": { + "5xl": { + "value": "{base} * 3", + "type": "fontSizes" + }, + "4xl": { + "value": "{base} * 2.25", + "type": "fontSizes" + }, + "3xl": { + "value": "{base} * 1.875", + "type": "fontSizes" + }, + "2xl": { + "value": "{base} * 1.5", + "type": "fontSizes" + }, + "xl": { + "value": "{base} * 1.25", + "type": "fontSizes" + }, + "lg": { + "value": "{base} * 1.125", + "type": "fontSizes" + }, + "base": { + "value": "{base} * 1", + "type": "fontSizes" + }, + "sm": { + "value": "{base} * 0.875", + "type": "fontSizes" + }, + "xs": { + "value": "{base} * 0.75", + "type": "fontSizes" + }, + "6xl": { + "value": "{base} * 3.75", + "type": "fontSizes" + }, + "7xl": { + "value": "{base} * 4.5", + "type": "fontSizes" + }, + "8xl": { + "value": "{base} * 6", + "type": "fontSizes" + }, + "9xl": { + "value": "{base} * 8", + "type": "fontSizes" + } + }, + "inner shadow label-copy": { + "value": { + "color": "#858585", + "type": "innerShadow", + "x": "0", + "y": "1", + "blur": "1", + "spread": "0" + }, + "type": "boxShadow" + }, + "inner-shadow-text-new": { + "value": { + "color": "#00000026", + "type": "innerShadow", + "x": "0", + "y": "0.5", + "blur": "0.5", + "spread": "0" + }, + "type": "boxShadow" + }, + "fontSize": { + "0": { + "value": "14", + "type": "fontSizes" + }, + "1": { + "value": "39.0629997253418", + "type": "fontSizes" + }, + "2": { + "value": "48.82899856567383", + "type": "fontSizes" + } + }, + "textCase": { + "none": { + "value": "none", + "type": "textCase" + }, + "uppercase": { + "value": "uppercase", + "type": "textCase" + } + }, + "textDecoration": { + "none": { + "value": "none", + "type": "textDecoration" + } + }, + "icon": { + "xs": { + "value": "12", + "type": "sizing" + }, + "sm": { + "value": "16", + "type": "sizing" + }, + "md": { + "value": "18", + "type": "sizing" + }, + "bg": { + "value": "0.15", + "type": "opacity", + "description": "Transuclent bg of icons" + } + }, + "iconWidth": { + "default": { + "value": "1", + "type": "borderWidth" + } + }, + "form": { + "input-disabled": { + "value": "33%", + "type": "opacity" + } + }, + "Modal Drop Shadow": { + "value": { + "x": "1", + "y": "4", + "blur": "4", + "spread": "4", + "color": "rgba(0,0,0,0.15)", + "type": "dropShadow" + }, + "type": "boxShadow" + }, + "panel": { + "value": "{borderRadius.xs}", + "type": "borderRadius", + "horizontal": { + "value": "{spacing.lg}", + "type": "spacing" + }, + "vertical": { + "value": "{spacing.lg}", + "type": "spacing" + } + }, + "datatable": { + "headericon": { + "value": "{icon.sm}", + "type": "sizing" + }, + "rowheight": { + "value": "28", + "type": "sizing", + "description": "Height of datatable rows" + } + }, + "options": { + "icon": { + "value": "{icon.md}", + "type": "sizing", + "description": "Size of product/dropdown icons icons" + } + }, + "input": { + "sm": { + "height": { + "value": "28", + "type": "sizing" + } + } + }, + "panel2": { + "value": "{borderRadius.sm}", + "type": "borderRadius" + }, + "base": { + "value": "16", + "type": "other" + }, + "xxl": { + "value": "{spacing.xl}*2", + "type": "spacing" + }, + "actionBar": { + "vertical": { + "value": "21", + "type": "spacing" + }, + "horizontal": { + "value": "32", + "type": "spacing" + } + }, + "table": { + "header": { + "horizontal": { + "value": "32", + "type": "spacing" + } + } + }, + "tabs": { + "horizontal": { + "value": "{spacing.md}", + "type": "spacing" + } + }, + "content": { + "vertical": { + "value": "{spacing.lg}", + "type": "spacing" + }, + "horizontal": { + "value": "{spacing.lg}", + "type": "spacing" + }, + "width": { + "screen-xl": { + "value": "1128", + "type": "sizing" + } + } + }, + "controller": { + "vertical": { + "value": "{spacing.md}", + "type": "spacing" + } + } +} \ No newline at end of file diff --git a/packages/ui/tokens/light.json b/packages/ui/tokens/light.json new file mode 100644 index 00000000000..5f6030e1766 --- /dev/null +++ b/packages/ui/tokens/light.json @@ -0,0 +1,61 @@ +{ + "theme-variables": { + "background": { + "value": "#fbfcfd", + "type": "color", + "description": "og color is colors.Slate.Light.1" + }, + "background-body": { + "value": "#f8f9fa", + "type": "color", + "description": "og color is colors.Slate.Light.2" + }, + "background-body-alt": { + "value": "#fff", + "type": "color" + }, + "text": { + "body": { + "value": "#1a1d1e", + "type": "color", + "description": "og color is colors.Slate.Dark.2" + } + } + }, + "lighten": { + "DEFAULT": { + "value": "0.1", + "type": "other" + }, + "soft": { + "value": "0.035", + "type": "other" + } + }, + "darken-percentage": { + "value": "0.2", + "type": "other" + }, + "utility": { + "mix-positive": { + "value": "#000", + "type": "color" + }, + "mix-negative": { + "value": "#fff", + "type": "color" + }, + "github": { + "background": { + "value": "#ffffff", + "type": "color" + } + } + }, + "text": { + "override-lighten-strength": { + "value": "5", + "type": "other" + } + } +} \ No newline at end of file diff --git a/packages/ui/tokens/root.json b/packages/ui/tokens/root.json new file mode 100644 index 00000000000..64cf141f868 --- /dev/null +++ b/packages/ui/tokens/root.json @@ -0,0 +1,207 @@ +{ + "theme-variables": { + "brand": { + "value": "#2b825b", + "type": "color" + }, + "background": { + "value": "#232323", + "type": "color", + "description": "og color is colors.Gray.Dark.3" + }, + "background-body": { + "value": "#1c1c1c", + "type": "color", + "description": "og color is colors.Gray.Dark.2" + }, + "background-body-alt": { + "value": "#161616", + "type": "color", + "description": " og color is colors.Gray.Dark.1" + }, + "text": { + "body": { + "value": "#ededed", + "type": "color", + "description": "og color is colors.Gray.Dark.12" + } + } + }, + "backgroundColor": { + "DEFAULT": { + "value": "{theme-variables.background}", + "type": "color", + "description": "Default background color for any container." + }, + "body": { + "value": "{theme-variables.background-body}", + "type": "color", + "description": "Background color used for the main page body." + }, + "body-alt": { + "value": "{theme-variables.background-body-alt}", + "type": "color" + }, + "selection": { + "value": "{backgroundColor.DEFAULT}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{lighten.soft}", + "space": "lch", + "color": "{utility.mix-positive}" + } + } + } + }, + "control": { + "value": "{backgroundColor.DEFAULT}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{lighten.hard}", + "space": "lch", + "color": "{utility.mix-negative}" + } + } + } + } + }, + "borderColor": { + "DEFAULT": { + "value": "{backgroundColor.DEFAULT}", + "type": "color", + "description": "Default border color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{lighten.soft}", + "space": "lch", + "color": "{utility.mix-positive}" + } + } + } + }, + "body": { + "value": "{backgroundColor.body}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{lighten.soft}", + "space": "lch", + "color": "{utility.mix-positive}" + } + } + } + }, + "control": { + "value": "{borderColor.DEFAULT}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{lighten.soft}", + "space": "lch", + "color": "{utility.mix-positive}" + } + } + } + } + }, + "text": { + "DEFAULT": { + "value": "{theme-variables.text.body}", + "type": "color" + }, + "body-light": { + "value": "{text.DEFAULT}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{lighten.hard}", + "space": "lch", + "color": "{utility.mix-negative}" + } + } + } + }, + "body-lighter": { + "value": "{text.DEFAULT}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{lighten.harder}", + "space": "lch", + "color": "{utility.mix-negative}" + } + } + } + }, + "body-lightest": { + "value": "{text.DEFAULT}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{lighten.hardest}", + "space": "lch", + "color": "{utility.mix-negative}" + } + } + } + }, + "override-lighten-strength": { + "value": "0", + "type": "other" + } + }, + "lighten": { + "DEFAULT": { + "value": "0.1", + "type": "other" + }, + "soft": { + "value": "0.05", + "type": "other" + }, + "hard": { + "value": "0.3", + "type": "other" + }, + "harder": { + "value": "0.5", + "type": "other" + }, + "hardest": { + "value": "0.65", + "type": "other" + } + }, + "darken-percentage": { + "value": "0.2", + "type": "other" + }, + "utility": { + "mix-positive": { + "value": "#fff", + "type": "color" + }, + "mix-negative": { + "value": "#000", + "type": "color" + } + } +} \ No newline at end of file diff --git a/packages/ui/tokens/typography.json b/packages/ui/tokens/typography.json new file mode 100644 index 00000000000..18ed42ca08f --- /dev/null +++ b/packages/ui/tokens/typography.json @@ -0,0 +1,374 @@ +{ + "typography": { + "H1": { + "Bold": { + "type": "typography", + "value": { + "fontFamily": "{fontFamilies.body2}", + "fontWeight": "{fontWeights.inter-1}", + "lineHeight": "{lineHeights.5xl}", + "fontSize": "{fontSizes.5xl}", + "letterSpacing": "{letterSpacing.1}", + "paragraphSpacing": "{paragraphSpacing.1}", + "textCase": "{textCase.none}", + "textDecoration": "{textDecoration.none}" + } + }, + "Regular": { + "type": "typography", + "value": { + "fontFamily": "{fontFamilies.body2}", + "fontWeight": "{fontWeights.inter-2}", + "lineHeight": "{lineHeights.5xl}", + "fontSize": "{fontSizes.5xl}", + "letterSpacing": "{letterSpacing.1}", + "paragraphSpacing": "{paragraphSpacing.1}", + "textCase": "{textCase.none}", + "textDecoration": "{textDecoration.none}" + } + } + }, + "H2": { + "Bold": { + "type": "typography", + "value": { + "fontFamily": "{fontFamilies.body2}", + "fontWeight": "{fontWeights.inter-1}", + "lineHeight": "{lineHeights.4xl}", + "fontSize": "{fontSizes.4xl}", + "letterSpacing": "{letterSpacing.1}", + "paragraphSpacing": "{paragraphSpacing.0}", + "textCase": "{textCase.none}", + "textDecoration": "{textDecoration.none}" + } + }, + "Regular": { + "type": "typography", + "value": { + "fontFamily": "{fontFamilies.body2}", + "fontWeight": "{fontWeights.inter-2}", + "lineHeight": "{lineHeights.4xl}", + "fontSize": "{fontSizes.4xl}", + "letterSpacing": "{letterSpacing.1}", + "paragraphSpacing": "{paragraphSpacing.0}", + "textCase": "{textCase.none}", + "textDecoration": "{textDecoration.none}" + } + } + }, + "H3": { + "Bold": { + "type": "typography", + "value": { + "fontFamily": "{fontFamilies.body2}", + "fontWeight": "{fontWeights.inter-1}", + "lineHeight": "{lineHeights.3xl}", + "fontSize": "{fontSizes.3xl}", + "letterSpacing": "{letterSpacing.1}", + "paragraphSpacing": "{paragraphSpacing.0}", + "textCase": "{textCase.none}", + "textDecoration": "{textDecoration.none}" + } + }, + "Regular": { + "type": "typography", + "value": { + "fontFamily": "{fontFamilies.body2}", + "fontWeight": "{fontWeights.inter-2}", + "lineHeight": "{lineHeights.3xl}", + "fontSize": "{fontSizes.3xl}", + "letterSpacing": "{letterSpacing.1}", + "paragraphSpacing": "{paragraphSpacing.0}", + "textCase": "{textCase.none}", + "textDecoration": "{textDecoration.none}" + } + } + }, + "H4": { + "Bold": { + "type": "typography", + "value": { + "fontFamily": "{fontFamilies.body2}", + "fontWeight": "{fontWeights.inter-1}", + "lineHeight": "{lineHeights.2xl}", + "fontSize": "{fontSizes.2xl}", + "letterSpacing": "{letterSpacing.1}", + "paragraphSpacing": "{paragraphSpacing.0}", + "textCase": "{textCase.none}", + "textDecoration": "{textDecoration.none}" + } + }, + "Regular": { + "type": "typography", + "value": { + "fontFamily": "{fontFamilies.body2}", + "fontWeight": "{fontWeights.inter-2}", + "lineHeight": "{lineHeights.2xl}", + "fontSize": "{fontSizes.2xl}", + "letterSpacing": "{letterSpacing.1}", + "paragraphSpacing": "{paragraphSpacing.0}", + "textCase": "{textCase.none}", + "textDecoration": "{textDecoration.none}" + } + }, + "mono": { + "value": { + "fontFamily": "{fontFamilies.mono}", + "fontWeight": "{fontWeights.heading-mono}", + "textCase": "{textCase.uppercase}", + "lineHeight": "{lineHeights.2xl}", + "fontSize": "{fontSizes.2xl}", + "letterSpacing": "{letterSpacing.1}", + "textDecoration": "{textDecoration.none}", + "paragraphSpacing": "{paragraphSpacing.0}" + }, + "type": "typography" + } + }, + "H5": { + "Bold": { + "type": "typography", + "value": { + "fontFamily": "{fontFamilies.body2}", + "fontWeight": "{fontWeights.inter-1}", + "lineHeight": "{lineHeights.xl}", + "fontSize": "{fontSizes.xl}", + "letterSpacing": "{letterSpacing.1}", + "paragraphSpacing": "{paragraphSpacing.0}", + "textCase": "{textCase.none}", + "textDecoration": "{textDecoration.none}" + } + }, + "Regular": { + "type": "typography", + "value": { + "fontFamily": "{fontFamilies.body2}", + "fontWeight": "{fontWeights.inter-2}", + "lineHeight": "{lineHeights.xl}", + "fontSize": "{fontSizes.xl}", + "letterSpacing": "{letterSpacing.1}", + "paragraphSpacing": "{paragraphSpacing.0}", + "textCase": "{textCase.none}", + "textDecoration": "{textDecoration.none}" + } + } + }, + "body": { + "base": { + "normal": { + "value": { + "fontFamily": "{fontFamilies.body2}", + "fontWeight": "{fontWeights.inter-2}", + "lineHeight": "{lineHeights.base}", + "fontSize": "{fontSizes.base}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.0}", + "textDecoration": "{textDecoration.none}", + "textCase": "{textCase.none}" + }, + "type": "typography" + }, + "mono": { + "value": { + "fontFamily": "{fontFamilies.mono}", + "fontWeight": "{fontWeights.heading-mono}", + "lineHeight": "{lineHeights.2xl}", + "fontSize": "{fontSize.0}", + "letterSpacing": "{letterSpacing.+8}", + "textCase": "{textCase.uppercase}", + "textDecoration": "{textDecoration.none}", + "paragraphSpacing": "{paragraphSpacing.0}" + }, + "type": "typography" + } + }, + "lg": { + "normal": { + "value": { + "fontFamily": "{fontFamilies.body2}", + "fontWeight": "{fontWeights.inter-2}", + "lineHeight": "{lineHeights.lg}", + "fontSize": "{fontSizes.lg}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.0}", + "textDecoration": "{textDecoration.none}", + "textCase": "{textCase.none}" + }, + "type": "typography" + } + }, + "xs": { + "normal": { + "value": { + "fontFamily": "{fontFamilies.body2}", + "fontWeight": "{fontWeights.inter-2}", + "lineHeight": "{lineHeights.xs}", + "fontSize": "{fontSizes.xs}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.0}", + "textDecoration": "{textDecoration.none}", + "textCase": "{textCase.none}" + }, + "type": "typography" + }, + "code": { + "header": { + "value": { + "fontFamily": "{fontFamilies.mono}", + "fontWeight": "{fontWeights.inter-1}", + "lineHeight": "{lineHeights.sm}", + "fontSize": "{fontSizes.xs}", + "letterSpacing": "{letterSpacing.increased}", + "paragraphSpacing": "{paragraphSpacing.0}", + "textDecoration": "{textDecoration.none}", + "textCase": "{textCase.none}" + }, + "type": "typography" + } + } + }, + "xss": { + "code": { + "value": { + "fontFamily": "{fontFamilies.body2}", + "fontWeight": "{fontWeights.heading-mono}", + "lineHeight": "9", + "fontSize": "9", + "letterSpacing": "0.5%", + "paragraphSpacing": "{paragraphSpacing.0}", + "textDecoration": "{textDecoration.none}", + "textCase": "{textCase.uppercase}" + }, + "type": "typography" + } + }, + "sm": { + "normal": { + "value": { + "fontFamily": "{fontFamilies.body2}", + "fontWeight": "{fontWeights.inter-2}", + "lineHeight": "{lineHeights.sm}", + "fontSize": "{fontSizes.sm}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.0}", + "textDecoration": "{textDecoration.none}", + "textCase": "{textCase.none}" + }, + "type": "typography" + }, + "code": { + "header": { + "value": { + "fontFamily": "{fontFamilies.mono}", + "fontWeight": "{fontWeights.bodyRegular}", + "lineHeight": "{lineHeights.sm}", + "fontSize": "{fontSizes.sm}", + "letterSpacing": "{letterSpacing.increased}", + "paragraphSpacing": "{paragraphSpacing.0}", + "textDecoration": "{textDecoration.none}", + "textCase": "{textCase.none}" + }, + "type": "typography" + }, + "normal": { + "value": { + "fontFamily": "{fontFamilies.mono}", + "fontWeight": "{fontWeights.bodyRegular}", + "lineHeight": "{lineHeights.sm}", + "fontSize": "{fontSizes.sm}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.0}", + "textDecoration": "{textDecoration.none}", + "textCase": "{textCase.none}" + }, + "type": "typography" + } + }, + "bullet-points": { + "value": { + "fontFamily": "{fontFamilies.body2}", + "fontWeight": "{fontWeights.inter-2}", + "lineHeight": "{lineHeights.sm}", + "fontSize": "{fontSizes.sm}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.0}", + "textDecoration": "{textDecoration.none}", + "textCase": "{textCase.none}" + }, + "type": "typography" + } + } + }, + "button": { + "xs": { + "type": "typography", + "value": { + "fontFamily": "{fontFamilies.body2}", + "fontWeight": "{fontWeights.inter-2}", + "lineHeight": "{lineHeights.xs}", + "fontSize": "{fontSizes.xs}", + "letterSpacing": "{letterSpacing.0}", + "paragraphSpacing": "{paragraphSpacing.0}", + "textCase": "{textCase.none}", + "textDecoration": "{textDecoration.none}" + } + }, + "sm": { + "type": "typography", + "value": { + "fontFamily": "{fontFamilies.body2}", + "fontWeight": "{fontWeights.inter-2}", + "lineHeight": "{lineHeights.sm}", + "fontSize": "{fontSizes.sm}", + "letterSpacing": "{letterSpacing.0}", + "paragraphSpacing": "{paragraphSpacing.0}", + "textCase": "{textCase.none}", + "textDecoration": "{textDecoration.none}" + } + } + }, + "form": { + "label": { + "type": "typography", + "value": { + "fontFamily": "{fontFamilies.body2}", + "fontWeight": "{fontWeights.inter-2}", + "lineHeight": "{lineHeights.sm}", + "fontSize": "{fontSizes.sm}", + "letterSpacing": "{letterSpacing.0}", + "paragraphSpacing": "{paragraphSpacing.0}", + "textCase": "{textCase.none}", + "textDecoration": "{textDecoration.none}" + } + }, + "label-secondary": { + "type": "typography", + "value": { + "fontFamily": "{fontFamilies.body2}", + "fontWeight": "{fontWeights.inter-2}", + "lineHeight": "{lineHeights.sm}", + "fontSize": "{fontSizes.sm}", + "letterSpacing": "{letterSpacing.0}", + "paragraphSpacing": "{paragraphSpacing.0}", + "textCase": "{textCase.none}", + "textDecoration": "{textDecoration.none}" + } + } + }, + "table": { + "header": { + "type": "typography", + "value": { + "fontFamily": "{fontFamilies.body2}", + "fontWeight": "{fontWeights.inter-2}", + "lineHeight": "{lineHeights.sm}", + "fontSize": "{fontSizes.xs}", + "letterSpacing": "{letterSpacing.0}", + "paragraphSpacing": "{paragraphSpacing.0}", + "textCase": "{textCase.none}", + "textDecoration": "{textDecoration.none}" + } + } + } + } +} \ No newline at end of file