mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 01:15:03 +03:00
trying sd-transforms
This commit is contained in:
Jonathan Summers-Muir committed
1 parent
599620f1f5
commit
ace3d9481b
16 files changed
+1777
-8
No files matched your search
@@ -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
|
||||
|
||||
Generated
+94
@@ -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",
|
||||
|
||||
@@ -17,6 +17,8 @@ function generateTwColorClasses(globalKey, twAttributes) {
|
||||
return classes
|
||||
}
|
||||
|
||||
console.log(generateTwColorClasses('borderColor', color))
|
||||
|
||||
const uiConfig = ui({
|
||||
mode: 'JIT',
|
||||
darkMode: 'class',
|
||||
|
||||
@@ -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()
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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";
|
||||
@@ -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()
|
||||
@@ -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",
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"tokenSetOrder": [
|
||||
"global",
|
||||
"typography",
|
||||
"global-two",
|
||||
"root",
|
||||
"light",
|
||||
"darker-dark"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
[
|
||||
{
|
||||
"id": "f5feb0d8ddfeace66dc28424a46bbc4e4fe21d6d",
|
||||
"name": "dark",
|
||||
"selectedTokenSets": {
|
||||
"root": "source"
|
||||
},
|
||||
"$figmaStyleReferences": {}
|
||||
},
|
||||
{
|
||||
"id": "8a2a94cc2d091998736de922735f7c19ca6cc25e",
|
||||
"name": "light",
|
||||
"selectedTokenSets": {
|
||||
"root": "source",
|
||||
"light": "enabled"
|
||||
},
|
||||
"$figmaStyleReferences": {}
|
||||
}
|
||||
]
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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}"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user