diff --git a/.github/linters/.prettierignore b/.github/linters/.prettierignore index c27d2b5..ed859e0 100644 --- a/.github/linters/.prettierignore +++ b/.github/linters/.prettierignore @@ -1,5 +1,5 @@ coverage/ dist/ storybook-static/ -tokens/ +../../tokens/ CHANGELOG.md diff --git a/scripts/tokens.ts b/scripts/tokens.ts index 25ee9e8..491d713 100644 --- a/scripts/tokens.ts +++ b/scripts/tokens.ts @@ -18,6 +18,7 @@ import StyleDictionary, { Dictionary, TransformedToken, } from 'style-dictionary'; +import { getReferences, usesReferences } from 'style-dictionary/utils'; const tokenFiles = fs .readdirSync('tokens/dtcg') @@ -29,17 +30,21 @@ const tokenFiles = fs * and semantic tokens referencing the primitives (or referencing another semantic token). * * Why custom formatter? - * - Built-in formatter couldn't handle multi-layer semantic uppercased first letter condition. - * - Built-in formatter couldn't handle variables referencing to prefixed mds- primitives * - Built-in formatter couldn't handle names with brackets i.e. (default) and (base) + * - Built-in formatter couldn't handle descriptions with multi-line block comments (/* ... *\/) + * - Built-in formatter couldn’t apply the 'mds-' prefix selectively to primitive tokens only. */ StyleDictionary.registerFormat({ name: 'css/mds-variables', format: ({ dictionary }: { dictionary: Dictionary }) => { - const getTokenName = (token: TransformedToken): string => { - const prefix = token.filePath.includes('Primitives') ? 'mds-' : ''; - return `${prefix}${token.name}`; - }; + const isPrimitive = (token: TransformedToken) => + token.filePath.includes('primitives'); + + const getPrefix = (token: TransformedToken) => + isPrimitive(token) ? 'mds-' : ''; + + const getTokenName = (token: TransformedToken) => + `${getPrefix(token)}${token.name}`; const getTokenValue = (token: TransformedToken): string => { /* @@ -48,24 +53,17 @@ StyleDictionary.registerFormat({ - semantic token -> the variable reference (not the resolved/transformed value) */ const originalValue = String(token.original.$value); + if (!usesReferences(originalValue)) { + return token.$value; // if primitive, return the transformed value + } - // curly brackets -> it is a reference to another token - const varMatch = originalValue.match(/^\{(.+)\}$/); - if (!varMatch) return token.$value; // if primitive, return the transformed value instead of the original - const varReference = varMatch[1]; + // if semantic, use the target token being referenced + const [targetToken] = getReferences( + originalValue, + dictionary.unfilteredTokens ?? dictionary.tokens, + ); - /* - first letter: - - uppercase -> reference to semantic token (no prefix) - - lowercase -> reference to primitive token (mds- prefix). - */ - const prefix = /^[A-Z]/.test(varReference) ? '' : 'mds-'; - const cssVar = varReference - .toLowerCase() - .replace(/[.,\s(]+/g, '-') - .replace(/\)+$/, ''); - - return `var(--${prefix}${cssVar})`; + return `var(--${getTokenName(targetToken)})`; }; const tokenVariables = dictionary.allTokens.map((token) => { @@ -98,15 +96,15 @@ StyleDictionary.registerFormat({ * Why custom transform? * - Built-in transform needs the type to be 'dimension', but our tokens solely use 'number' type. * - The exported values in DTCG JSON from ZeroHeight would not have the units (ie. 1rem) for dimension-related tokens + * + * Rules & Assumptions: + * - Any flat numerical tokens with $type 'number' are considered dimension-related tokens and will be transformed from px to rem. */ StyleDictionary.registerTransform({ name: 'css/dimension-px-to-rem', type: 'value', filter: (token) => { - return ( - token.$type === 'number' && - /rem|font-size|line-height|border-width/i.test(token.name) - ); + return token.$type === 'number'; }, transform: (token) => `${token.$value / 16}rem`, }); diff --git a/tokens/css/borders.css b/tokens/css/borders.css index 0ba4c62..96b597c 100644 --- a/tokens/css/borders.css +++ b/tokens/css/borders.css @@ -1,17 +1,16 @@ /** THIS FILE IS AUTO-GENERATED — DO NOT EDIT DIRECTLY. **/ :root { - --border-radius-lg: var(--mds-utilities-rem-0-5); - --border-radius-md-default: var(--mds-utilities-rem-0-375); - --border-radius-none: var(--mds-utilities-rem-0); - --border-radius-pill: var(--mds-utilities-rem-50); - --border-radius-sm: var(--mds-utilities-rem-0-25); - --border-radius-xl: var(--mds-utilities-rem-1); - --border-radius-xxl: var(--mds-utilities-rem-2); - --border-width-0: 0rem; - --border-width-2: 0.125rem; - --border-width-3: 0.1875rem; - --border-width-4: 0.25rem; - --border-width-5: 0.3125rem; - --border-width-1-default: 0.0625rem; + --border-radius-lg: var(--mds-scale-300); + --border-radius-md-default: var(--mds-scale-200); + --border-radius-none: var(--mds-scale-0); + --border-radius-pill: var(--mds-scale-1800); + --border-radius-sm: var(--mds-scale-100); + --border-radius-xl: var(--mds-scale-600); + --border-radius-xxl: var(--mds-scale-1000); + --stroke-weight-lg: 0.1875rem; + --stroke-weight-md: 0.125rem; + --stroke-weight-sm-default: 0.0625rem; + --stroke-weight-xl: 0.25rem; + --stroke-weight-xxl: 0.3125rem; } diff --git a/tokens/css/colors.css b/tokens/css/colors.css index f210589..ed581de 100644 --- a/tokens/css/colors.css +++ b/tokens/css/colors.css @@ -1,32 +1,22 @@ /** THIS FILE IS AUTO-GENERATED — DO NOT EDIT DIRECTLY. **/ :root { - --body-background-default: var(--mds-color-gray-white); - --body-background-secondary: var(--mds-color-gray-200); - --body-background-tertiary: var(--mds-color-gray-100); - --body-text-default: var(--mds-color-gray-900); - --body-text-emphasis: var(--mds-color-gray-black); - --body-text-secondary: rgba(29, 33, 37, 0.75); - --body-text-tertiary: rgba(29, 33, 37, 0.5); + --background-default: var(--mds-color-gray-white); + --background-secondary: var(--mds-color-gray-200); + --background-tertiary: var(--mds-color-gray-100); --border-default: var(--mds-color-gray-300); --border-translucent: rgba(0, 0, 0, 0); - --brand-primary-moodle-black: var(--mds-brand-grey-300); - --brand-primary-moodle-blue: var(--mds-brand-blue-300); - --brand-primary-moodle-orange: var(--mds-brand-orange-400); - --brand-secondary-bright-blue: var(--mds-brand-blue-100); - --brand-secondary-dark-grey: var(--mds-brand-grey-200); - --brand-secondary-light-blue: var(--mds-brand-blue-200); - --brand-secondary-light-grey: var(--mds-brand-grey-100); - --brand-secondary-light-peach: var(--mds-brand-orange-100); - --brand-secondary-medium-peach: var(--mds-brand-orange-200); - --brand-secondary-peach: var(--mds-brand-orange-300); - --contrast-contrast-dark: var(--mds-color-gray-black); - --contrast-contrast-light: var(--mds-color-gray-white); + --brand-primary-moodle-black: var(--mds-color-brand-gray-300); + --brand-primary-moodle-blue: var(--mds-color-brand-blue-300); + --brand-primary-moodle-orange: var(--mds-color-brand-orange-400); + --brand-secondary-bright-blue: var(--mds-color-brand-blue-100); + --brand-secondary-dark-grey: var(--mds-color-brand-gray-200); + --brand-secondary-light-blue: var(--mds-color-brand-blue-200); + --brand-secondary-light-grey: var(--mds-color-brand-gray-100); + --brand-secondary-light-peach: var(--mds-color-brand-orange-100); + --brand-secondary-medium-peach: var(--mds-color-brand-orange-200); + --brand-secondary-peach: var(--mds-color-brand-orange-300); --focus-ring-default: var(--theme-primary); - --icon-fa-border-color: #eeeeee; - --icon-fa-inverse: var(--mds-color-gray-white); - --link-default: var(--theme-primary); - --link-hover: var(--mds-color-blue-600); --state-outline-danger: var(--theme-danger); --state-outline-danger-active: var(--mds-color-red-600); --state-outline-danger-disabled: var(--mds-color-red-300); @@ -51,6 +41,13 @@ --state-secondary-active: var(--theme-secondary); --state-secondary-disabled: var(--mds-color-gray-200); --state-secondary-hover: var(--mds-color-gray-300); + --text-body-light: var(--theme-light); + --text-body-default: var(--mds-color-gray-900); + --text-body-emphasis: var(--mds-color-gray-black); + --text-body-secondary: var(--mds-color-gray-700); + --text-body-tertiary: var(--mds-color-gray-600); + --text-link-default: var(--theme-primary); + --text-link-hover: var(--mds-color-blue-600); --theme-background-subtle-danger: var(--mds-color-red-100); --theme-background-subtle-dark: var(--mds-color-gray-400); --theme-background-subtle-info: var(--mds-color-cyan-100); diff --git a/tokens/css/focusring.css b/tokens/css/focusring.css deleted file mode 100644 index 130faed..0000000 --- a/tokens/css/focusring.css +++ /dev/null @@ -1,7 +0,0 @@ -/** THIS FILE IS AUTO-GENERATED — DO NOT EDIT DIRECTLY. **/ - -:root { - --blur: 0; - --opacity: 0.75; - --width: var(--mds-utilities-rem-0-25); -} diff --git a/tokens/css/index.css b/tokens/css/index.css index 70b0f88..a202bc5 100644 --- a/tokens/css/index.css +++ b/tokens/css/index.css @@ -1,11 +1,9 @@ /** THIS FILE IS AUTO-GENERATED — DO NOT EDIT DIRECTLY. **/ @import "./borders.css"; -@import "./colors.css"; -@import "./focusring.css"; -@import "./lmsprimitives.css"; @import "./shadows.css"; -@import "./spacers.css"; -@import "./styletokens.css"; +@import "./spacing.css"; @import "./typography.css"; +@import "./colors.css"; +@import "./primitives.css"; @import "./fonts.css" diff --git a/tokens/css/lmsprimitives.css b/tokens/css/primitives.css similarity index 75% rename from tokens/css/lmsprimitives.css rename to tokens/css/primitives.css index 0f9e041..712198b 100644 --- a/tokens/css/lmsprimitives.css +++ b/tokens/css/primitives.css @@ -1,16 +1,6 @@ /** THIS FILE IS AUTO-GENERATED — DO NOT EDIT DIRECTLY. **/ :root { - --mds-brand-blue-100: #69e0ff; - --mds-brand-blue-200: #65a1b3; - --mds-brand-blue-300: #194866; - --mds-brand-grey-100: #8a8a8e; - --mds-brand-grey-200: #545454; - --mds-brand-grey-300: #282828; - --mds-brand-orange-100: #fff8f1; - --mds-brand-orange-200: #ffecdb; - --mds-brand-orange-300: #fedec3; - --mds-brand-orange-400: #f98012; --mds-color-blue-100: #cfe2f2; --mds-color-blue-200: #9fc4e5; --mds-color-blue-300: #6fa7d9; @@ -20,6 +10,16 @@ --mds-color-blue-700: #094173; --mds-color-blue-800: #062b4c; --mds-color-blue-900: #031626; + --mds-color-brand-blue-100: #69e0ff; + --mds-color-brand-blue-200: #65a1b3; + --mds-color-brand-blue-300: #194866; + --mds-color-brand-gray-100: #8a8a8e; + --mds-color-brand-gray-200: #545454; + --mds-color-brand-gray-300: #282828; + --mds-color-brand-orange-100: #fff8f1; + --mds-color-brand-orange-200: #ffecdb; + --mds-color-brand-orange-300: #fedec3; + --mds-color-brand-orange-400: #f98012; --mds-color-cyan-100: #cce6ea; --mds-color-cyan-200: #99cdd5; --mds-color-cyan-300: #66b3c0; @@ -112,9 +112,26 @@ --mds-color-yellow-700: #90682f; --mds-color-yellow-800: #60451f; --mds-color-yellow-900: #302310; - --mds-shadows-lg: rgba(0, 0, 0, 0.18); - --mds-shadows-md: rgba(0, 0, 0, 0.15); - --mds-shadows-sm: rgba(0, 0, 0, 0.07); + --mds-scale-0: 0rem; + --mds-scale-50: 0.125rem; + --mds-scale-100: 0.25rem; + --mds-scale-200: 0.375rem; + --mds-scale-300: 0.5rem; + --mds-scale-400: 0.75rem; + --mds-scale-500: 0.875rem; + --mds-scale-600: 1rem; + --mds-scale-700: 1.25rem; + --mds-scale-800: 1.5rem; + --mds-scale-900: 1.75rem; + --mds-scale-1000: 2rem; + --mds-scale-1100: 2.5rem; + --mds-scale-1200: 3rem; + --mds-scale-1300: 3.5rem; + --mds-scale-1400: 4rem; + --mds-scale-1500: 4.5rem; + --mds-scale-1600: 5rem; + --mds-scale-1700: 6rem; + --mds-scale-1800: 50rem; --mds-typography-font-family-monospace: Menlo; --mds-typography-font-family-sans-serif: Roboto; --mds-typography-font-size-base-0: 0rem; @@ -134,16 +151,16 @@ --mds-typography-font-weight-italic-regular-400: Italic; --mds-typography-font-weight-italic-semibold-600: Semi Bold Italic; --mds-typography-font-weight-italic-thin-100: Thin Italic; - --mds-typography-font-weight-normal-black-900: 900; - --mds-typography-font-weight-normal-bold-700: 700; - --mds-typography-font-weight-normal-extrabold-800: 800; - --mds-typography-font-weight-normal-extralight-200: 200; - --mds-typography-font-weight-normal-light-300: 300; - --mds-typography-font-weight-normal-medium-500: 500; - --mds-typography-font-weight-normal-regular-400: 400; - --mds-typography-font-weight-normal-semibold-600: 600; - --mds-typography-font-weight-normal-thin-100: 100; - --mds-typography-letter-spacing-none: 0; + --mds-typography-font-weight-normal-black-900: Black; + --mds-typography-font-weight-normal-bold-700: Bold; + --mds-typography-font-weight-normal-extrabold-800: Extrabold; + --mds-typography-font-weight-normal-extralight-200: Extra light; + --mds-typography-font-weight-normal-light-300: Light; + --mds-typography-font-weight-normal-medium-500: Medium; + --mds-typography-font-weight-normal-regular-400: Regular; + --mds-typography-font-weight-normal-semibold-600: Semibold; + --mds-typography-font-weight-normal-thin-100: Thin; + --mds-typography-letter-spacing-none: 0rem; --mds-typography-line-height-displays-d1: 6rem; --mds-typography-line-height-displays-d2: 5.4rem; --mds-typography-line-height-displays-d3: 4.8rem; @@ -159,24 +176,4 @@ --mds-typography-line-height-paragraph-base: 1.5rem; --mds-typography-line-height-paragraph-lg: 2.5rem; --mds-typography-line-height-paragraph-sm: 1.0875rem; - --mds-utilities-rem-0: 0rem; - --mds-utilities-rem-1: 1rem; - --mds-utilities-rem-2: 2rem; - --mds-utilities-rem-3: 3rem; - --mds-utilities-rem-4: 4rem; - --mds-utilities-rem-5: 5rem; - --mds-utilities-rem-6: 6rem; - --mds-utilities-rem-50: 50rem; - --mds-utilities-rem-0-125: 0.125rem; - --mds-utilities-rem-0-25: 0.25rem; - --mds-utilities-rem-0-375: 0.375rem; - --mds-utilities-rem-0-5: 0.5rem; - --mds-utilities-rem-0-75: 0.75rem; - --mds-utilities-rem-0-875: 0.875rem; - --mds-utilities-rem-1-25: 1.25rem; - --mds-utilities-rem-1-5: 1.5rem; - --mds-utilities-rem-1-75: 1.75rem; - --mds-utilities-rem-2-5: 2.5rem; - --mds-utilities-rem-3-5: 3.5rem; - --mds-utilities-rem-4-5: 4.5rem; } diff --git a/tokens/css/shadows.css b/tokens/css/shadows.css index 9c09007..ba9bfe4 100644 --- a/tokens/css/shadows.css +++ b/tokens/css/shadows.css @@ -1,13 +1,13 @@ /** THIS FILE IS AUTO-GENERATED — DO NOT EDIT DIRECTLY. **/ :root { - --blur-lg: var(--mds-utilities-rem-3); - --blur-md-base: var(--mds-utilities-rem-1); - --blur-sm: var(--mds-utilities-rem-0-25); - --color-lg: var(--mds-shadows-lg); - --color-md-base: var(--mds-shadows-md); - --color-sm: var(--mds-shadows-sm); - --offset-lg: var(--mds-utilities-rem-1); - --offset-md-base: var(--mds-utilities-rem-0-5); - --offset-sm: var(--mds-utilities-rem-0-125); + --blur-lg: var(--mds-scale-1200); + --blur-md-base: var(--mds-scale-600); + --blur-sm: var(--mds-scale-100); + --color-lg: rgba(0, 0, 0, 0.18); + --color-md-base: rgba(0, 0, 0, 0.15); + --color-sm: rgba(0, 0, 0, 0.07); + --offset-lg: var(--mds-scale-600); + --offset-md-base: var(--mds-scale-300); + --offset-sm: var(--mds-scale-50); } diff --git a/tokens/css/spacers.css b/tokens/css/spacers.css deleted file mode 100644 index 922c38b..0000000 --- a/tokens/css/spacers.css +++ /dev/null @@ -1,12 +0,0 @@ -/** THIS FILE IS AUTO-GENERATED — DO NOT EDIT DIRECTLY. **/ - -:root { - --spacers-0: var(--mds-utilities-rem-0); - --spacers-1: var(--mds-utilities-rem-0-25); - --spacers-2: var(--mds-utilities-rem-0-5); - --spacers-3: var(--mds-utilities-rem-0-75); - --spacers-5: var(--mds-utilities-rem-1-25); - --spacers-6: var(--mds-utilities-rem-2); - --spacers-7: var(--mds-utilities-rem-3); - --spacers-4-base: var(--mds-utilities-rem-1); -} diff --git a/tokens/css/spacing.css b/tokens/css/spacing.css new file mode 100644 index 0000000..34d34bd --- /dev/null +++ b/tokens/css/spacing.css @@ -0,0 +1,12 @@ +/** THIS FILE IS AUTO-GENERATED — DO NOT EDIT DIRECTLY. **/ + +:root { + --spacing-lg: var(--mds-scale-700); + --spacing-md-base: var(--mds-scale-600); + --spacing-none: var(--mds-scale-0); + --spacing-sm: var(--mds-scale-400); + --spacing-xl: var(--mds-scale-1000); + --spacing-xs: var(--mds-scale-300); + --spacing-xxl: var(--mds-scale-1200); + --spacing-xxs: var(--mds-scale-100); +} diff --git a/tokens/css/styletokens.css b/tokens/css/styletokens.css deleted file mode 100644 index 6bb1d5d..0000000 --- a/tokens/css/styletokens.css +++ /dev/null @@ -1,32 +0,0 @@ -/** THIS FILE IS AUTO-GENERATED — DO NOT EDIT DIRECTLY. **/ - -:root { - --background-colors-primary: var(--body-background-default); - --background-colors-secondary: var(--body-background-secondary); - --background-colors-tertiary: var(--body-background-tertiary); - --corner-radius-lg: var(--border-radius-lg); - --corner-radius-md-default: var(--border-radius-md-default); - --corner-radius-pill: var(--border-radius-pill); - --corner-radius-sm: var(--border-radius-sm); - --corner-radius-xl: var(--border-radius-xl); - --corner-radius-xxl: var(--border-radius-xxl); - --paddings-and-gap-lg: var(--spacers-5); - --paddings-and-gap-md-base: var(--spacers-4-base); - --paddings-and-gap-sm: var(--spacers-3); - --paddings-and-gap-xl: var(--spacers-6); - --paddings-and-gap-xs: var(--spacers-2); - --paddings-and-gap-xxl: var(--spacers-7); - --paddings-and-gap-xxs: var(--spacers-1); - --stroke-weight-lg: var(--border-width-3); - --stroke-weight-md: var(--border-width-2); - --stroke-weight-sm-default: var(--border-width-1-default); - --stroke-weight-xl: var(--border-width-4); - --stroke-weight-xxl: var(--border-width-5); - --text-colors-emphasis: var(--body-text-emphasis); - --text-colors-light: var(--theme-light); - --text-colors-link: var(--link-default); - --text-colors-link-hover: var(--link-hover); - --text-colors-primary: var(--body-text-default); - --text-colors-secondary: var(--body-text-secondary); - --text-colors-tertiary: var(--body-text-tertiary); -} diff --git a/tokens/css/typography.css b/tokens/css/typography.css index 9369dd5..a227d08 100644 --- a/tokens/css/typography.css +++ b/tokens/css/typography.css @@ -3,12 +3,12 @@ :root { --font-family-base: var(--mds-typography-font-family-sans-serif); --font-family-code: var(--mds-typography-font-family-monospace); - --font-size-displays-1: var(--mds-utilities-rem-5); - --font-size-displays-2: var(--mds-utilities-rem-4-5); - --font-size-displays-3: var(--mds-utilities-rem-4); - --font-size-displays-4: var(--mds-utilities-rem-3-5); - --font-size-displays-5: var(--mds-utilities-rem-3); - --font-size-displays-6: var(--mds-utilities-rem-2-5); + --font-size-displays-1: var(--mds-scale-1600); + --font-size-displays-2: var(--mds-scale-1500); + --font-size-displays-3: var(--mds-scale-1400); + --font-size-displays-4: var(--mds-scale-1300); + --font-size-displays-5: var(--mds-scale-1200); + --font-size-displays-6: var(--mds-scale-1100); --font-size-headings-1: var(--mds-typography-font-size-base-2-5); --font-size-headings-2: var(--mds-typography-font-size-base-2); --font-size-headings-3: var(--mds-typography-font-size-base-1-75); @@ -44,7 +44,7 @@ --line-height-paragraph-base-text: var(--mds-typography-line-height-paragraph-base); --line-height-paragraph-lead: var(--mds-typography-line-height-paragraph-lg); --line-height-paragraph-small: var(--mds-typography-line-height-paragraph-sm); - --margin-bottom-display: var(--spacers-0); - --margin-bottom-heading: var(--spacers-2); - --margin-bottom-paragraph: var(--spacers-4-base); + --margin-bottom-display: var(--spacing-none); + --margin-bottom-heading: var(--spacing-xs); + --margin-bottom-paragraph: var(--spacing-md-base); } diff --git a/tokens/dtcg/token_Borders_Defaultmode.json b/tokens/dtcg/token_Borders_Defaultmode.json index 2950e46..2929985 100644 --- a/tokens/dtcg/token_Borders_Defaultmode.json +++ b/tokens/dtcg/token_Borders_Defaultmode.json @@ -2,55 +2,51 @@ "Border radius": { "lg": { "$type": "number", - "$value": "{utilities.rem.0,5}" + "$value": "{scale.300}" }, "md (default)": { "$type": "number", - "$value": "{utilities.rem.0,375}" + "$value": "{scale.200}" }, "none": { "$type": "number", - "$value": "{utilities.rem.0}" + "$value": "{scale.0}" }, "pill": { "$type": "number", - "$value": "{utilities.rem.50}" + "$value": "{scale.1800}" }, "sm": { "$type": "number", - "$value": "{utilities.rem.0,25}" + "$value": "{scale.100}" }, "xl": { "$type": "number", - "$value": "{utilities.rem.1}" + "$value": "{scale.600}" }, "xxl": { "$type": "number", - "$value": "{utilities.rem.2}" + "$value": "{scale.1000}" } }, - "Border width": { - "0": { - "$type": "number", - "$value": 0 - }, - "1 (default)": { + "Stroke weight": { + "lg": { "$type": "number", - "$value": 1 + "$value": 3 }, - "2": { + "md": { "$type": "number", "$value": 2 }, - "3": { + "sm (default)": { "$type": "number", - "$value": 3 + "$value": 1 }, - "4": { + "xl": { "$type": "number", "$value": 4 }, - "5": { + "xxl": { "$type": "number", "$value": 5 } diff --git a/tokens/dtcg/token_Colors_Light.json b/tokens/dtcg/token_Colors_Light.json index feb03f3..f093fc2 100644 --- a/tokens/dtcg/token_Colors_Light.json +++ b/tokens/dtcg/token_Colors_Light.json @@ -1,36 +1,16 @@ { - "Body": { - "Background": { - "default": { - "$type": "color", - "$value": "{color.gray.white}" - }, - "secondary": { - "$type": "color", - "$value": "{color.gray.200}" - }, - "tertiary": { - "$type": "color", - "$value": "{color.gray.100}" - } + "Background": { + "default": { + "$type": "color", + "$value": "{color.gray.white}" }, - "Text": { - "default": { - "$type": "color", - "$value": "{color.gray.900}" - }, - "emphasis": { - "$type": "color", - "$value": "{color.gray.black}" - }, - "secondary": { - "$type": "color", - "$value": "#1d2125bf" - }, - "tertiary": { - "$type": "color", - "$value": "#1d212580" - } + "secondary": { + "$type": "color", + "$value": "{color.gray.200}" + }, + "tertiary": { + "$type": "color", + "$value": "{color.gray.100}" } }, "Border": { @@ -47,84 +27,54 @@ "Primary": { "moodle black": { "$type": "color", - "$value": "{brand.grey.300}" + "$value": "{color.brand.gray.300}" }, "moodle blue": { "$type": "color", - "$value": "{brand.blue.300}" + "$value": "{color.brand.blue.300}" }, "moodle orange": { "$type": "color", - "$value": "{brand.orange.400}" + "$value": "{color.brand.orange.400}" } }, "Secondary": { "bright blue": { "$type": "color", - "$value": "{brand.blue.100}" + "$value": "{color.brand.blue.100}" }, "dark grey": { "$type": "color", - "$value": "{brand.grey.200}" + "$value": "{color.brand.gray.200}" }, "light blue": { "$type": "color", - "$value": "{brand.blue.200}" + "$value": "{color.brand.blue.200}" }, "light grey": { "$type": "color", - "$value": "{brand.grey.100}" + "$value": "{color.brand.gray.100}" }, "light peach": { "$type": "color", - "$value": "{brand.orange.100}" + "$value": "{color.brand.orange.100}" }, "medium peach": { "$type": "color", - "$value": "{brand.orange.200}" + "$value": "{color.brand.orange.200}" }, "peach": { "$type": "color", - "$value": "{brand.orange.300}" + "$value": "{color.brand.orange.300}" } } }, - "Contrast": { - "contrast dark": { - "$type": "color", - "$value": "{color.gray.black}" - }, - "contrast light": { - "$type": "color", - "$value": "{color.gray.white}" - } - }, "Focus ring": { "default": { "$type": "color", "$value": "{Theme.primary}" } }, - "Icon": { - "fa border color": { - "$type": "color", - "$value": "#eeeeee" - }, - "fa inverse": { - "$type": "color", - "$value": "{color.gray.white}" - } - }, - "Link": { - "default": { - "$type": "color", - "$value": "{Theme.primary}" - }, - "hover": { - "$type": "color", - "$value": "{color.blue.600}" - } - }, "State": { "Outline": { "danger": { @@ -225,6 +175,40 @@ "$value": "{color.gray.300}" } }, + "Text": { + "Body": { + "Light": { + "$type": "color", + "$value": "{Theme.light}" + }, + "default": { + "$type": "color", + "$value": "{color.gray.900}" + }, + "emphasis": { + "$type": "color", + "$value": "{color.gray.black}" + }, + "secondary": { + "$type": "color", + "$value": "{color.gray.700}" + }, + "tertiary": { + "$type": "color", + "$value": "{color.gray.600}" + } + }, + "Link": { + "default": { + "$type": "color", + "$value": "{Theme.primary}" + }, + "hover": { + "$type": "color", + "$value": "{color.blue.600}" + } + } + }, "Theme": { "Background subtle": { "danger": { diff --git a/tokens/dtcg/token_Focusring_Defaultmode.json b/tokens/dtcg/token_Focusring_Defaultmode.json deleted file mode 100644 index f237c57..0000000 --- a/tokens/dtcg/token_Focusring_Defaultmode.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "blur": { - "$type": "number", - "$value": 0 - }, - "opacity": { - "$type": "number", - "$value": 0.75 - }, - "width": { - "$type": "number", - "$value": "{utilities.rem.0,25}" - } -} \ No newline at end of file diff --git a/tokens/dtcg/token_Shadows_Defaultmode.json b/tokens/dtcg/token_Shadows_Defaultmode.json index 2d4a655..93ec7b5 100644 --- a/tokens/dtcg/token_Shadows_Defaultmode.json +++ b/tokens/dtcg/token_Shadows_Defaultmode.json @@ -2,43 +2,43 @@ "Blur": { "lg": { "$type": "number", - "$value": "{utilities.rem.3}" + "$value": "{scale.1200}" }, "md (base)": { "$type": "number", - "$value": "{utilities.rem.1}" + "$value": "{scale.600}" }, "sm": { "$type": "number", - "$value": "{utilities.rem.0,25}" + "$value": "{scale.100}" } }, "Color": { "lg": { "$type": "color", - "$value": "{shadows.lg}" + "$value": "#0000002d" }, "md (base)": { "$type": "color", - "$value": "{shadows.md}" + "$value": "#00000026" }, "sm": { "$type": "color", - "$value": "{shadows.sm}" + "$value": "#00000013" } }, "Offset": { "lg": { "$type": "number", - "$value": "{utilities.rem.1}" + "$value": "{scale.600}" }, "md (base)": { "$type": "number", - "$value": "{utilities.rem.0,5}" + "$value": "{scale.300}" }, "sm": { "$type": "number", - "$value": "{utilities.rem.0,125}" + "$value": "{scale.50}" } } } \ No newline at end of file diff --git a/tokens/dtcg/token_Spacers_Defaultmode.json b/tokens/dtcg/token_Spacers_Defaultmode.json deleted file mode 100644 index 617d7d0..0000000 --- a/tokens/dtcg/token_Spacers_Defaultmode.json +++ /dev/null @@ -1,36 +0,0 @@ -{ - "Spacers": { - "0": { - "$type": "number", - "$value": "{utilities.rem.0}" - }, - "1": { - "$type": "number", - "$value": "{utilities.rem.0,25}" - }, - "2": { - "$type": "number", - "$value": "{utilities.rem.0,5}" - }, - "3": { - "$type": "number", - "$value": "{utilities.rem.0,75}" - }, - "4 (base)": { - "$type": "number", - "$value": "{utilities.rem.1}" - }, - "5": { - "$type": "number", - "$value": "{utilities.rem.1,25}" - }, - "6": { - "$type": "number", - "$value": "{utilities.rem.2}" - }, - "7": { - "$type": "number", - "$value": "{utilities.rem.3}" - } - } -} \ No newline at end of file diff --git a/tokens/dtcg/token_Spacing_Defaultmode.json b/tokens/dtcg/token_Spacing_Defaultmode.json new file mode 100644 index 0000000..0ad2e2e --- /dev/null +++ b/tokens/dtcg/token_Spacing_Defaultmode.json @@ -0,0 +1,36 @@ +{ + "spacing": { + "lg": { + "$type": "number", + "$value": "{scale.700}" + }, + "md (base)": { + "$type": "number", + "$value": "{scale.600}" + }, + "none": { + "$type": "number", + "$value": "{scale.0}" + }, + "sm": { + "$type": "number", + "$value": "{scale.400}" + }, + "xl": { + "$type": "number", + "$value": "{scale.1000}" + }, + "xs": { + "$type": "number", + "$value": "{scale.300}" + }, + "xxl": { + "$type": "number", + "$value": "{scale.1200}" + }, + "xxs": { + "$type": "number", + "$value": "{scale.100}" + } + } +} \ No newline at end of file diff --git a/tokens/dtcg/token_Styletokens_Defaultmode.json b/tokens/dtcg/token_Styletokens_Defaultmode.json deleted file mode 100644 index 9dbca32..0000000 --- a/tokens/dtcg/token_Styletokens_Defaultmode.json +++ /dev/null @@ -1,124 +0,0 @@ -{ - "Background colors": { - "Primary": { - "$type": "color", - "$value": "{Body.Background.default}" - }, - "Secondary": { - "$type": "color", - "$value": "{Body.Background.secondary}" - }, - "Tertiary": { - "$type": "color", - "$value": "{Body.Background.tertiary}" - } - }, - "Corner radius": { - "lg": { - "$type": "number", - "$value": "{Border radius.lg}" - }, - "md (default)": { - "$type": "number", - "$value": "{Border radius.md (default)}" - }, - "pill": { - "$type": "number", - "$value": "{Border radius.pill}" - }, - "sm": { - "$type": "number", - "$value": "{Border radius.sm}" - }, - "xl": { - "$type": "number", - "$value": "{Border radius.xl}" - }, - "xxl": { - "$type": "number", - "$value": "{Border radius.xxl}" - } - }, - "Paddings and gap": { - "lg": { - "$type": "number", - "$value": "{Spacers.5}" - }, - "md (base)": { - "$type": "number", - "$value": "{Spacers.4 (base)}" - }, - "sm": { - "$type": "number", - "$value": "{Spacers.3}" - }, - "xl": { - "$type": "number", - "$value": "{Spacers.6}" - }, - "xs": { - "$type": "number", - "$value": "{Spacers.2}" - }, - "xxl": { - "$type": "number", - "$value": "{Spacers.7}" - }, - "xxs": { - "$type": "number", - "$value": "{Spacers.1}" - } - }, - "Stroke Weight": { - "lg": { - "$type": "number", - "$value": "{Border width.3}" - }, - "md": { - "$type": "number", - "$value": "{Border width.2}" - }, - "sm (default)": { - "$type": "number", - "$value": "{Border width.1 (default)}" - }, - "xl": { - "$type": "number", - "$value": "{Border width.4}" - }, - "xxl": { - "$type": "number", - "$value": "{Border width.5}" - } - }, - "Text colors": { - "Emphasis": { - "$type": "color", - "$value": "{Body.Text.emphasis}" - }, - "Light": { - "$type": "color", - "$value": "{Theme.light}" - }, - "Link": { - "$type": "color", - "$value": "{Link.default}" - }, - "Link hover": { - "$type": "color", - "$value": "{Link.hover}" - }, - "Primary": { - "$type": "color", - "$value": "{Body.Text.default}" - }, - "Secondary": { - "$type": "color", - "$value": "{Body.Text.secondary}" - }, - "Tertiary": { - "$type": "color", - "$value": "{Body.Text.tertiary}" - } - } -} \ No newline at end of file diff --git a/tokens/dtcg/token_Typography_Defaultmode.json b/tokens/dtcg/token_Typography_Defaultmode.json index c414cbd..90933ad 100644 --- a/tokens/dtcg/token_Typography_Defaultmode.json +++ b/tokens/dtcg/token_Typography_Defaultmode.json @@ -15,32 +15,32 @@ "Displays": { "1": { "$type": "number", - "$value": "{utilities.rem.5}", + "$value": "{scale.1600}", "$description": "Display style, largest." }, "2": { "$type": "number", - "$value": "{utilities.rem.4,5}", + "$value": "{scale.1500}", "$description": "Display style, extra-large." }, "3": { "$type": "number", - "$value": "{utilities.rem.4}", + "$value": "{scale.1400}", "$description": "Display style, large." }, "4": { "$type": "number", - "$value": "{utilities.rem.3,5}", + "$value": "{scale.1300}", "$description": "Display style, medium-large." }, "5": { "$type": "number", - "$value": "{utilities.rem.3}", + "$value": "{scale.1200}", "$description": "Display style, medium." }, "6": { "$type": "number", - "$value": "{utilities.rem.2,5}", + "$value": "{scale.1100}", "$description": "Display style, smaller display." } }, @@ -119,29 +119,24 @@ }, "Normal": { "bold": { - "$type": "number", - "$value": "{typography.font-weight.normal.bold-700}", - "$description": "High emphasis, primary headings or highlights." + "$type": "string", + "$value": "{typography.font-weight.normal.bold-700}" }, "light": { - "$type": "number", - "$value": "{typography.font-weight.normal.light-300}", - "$description": "Light weight for headings or emphasis." + "$type": "string", + "$value": "{typography.font-weight.normal.light-300}" }, "medium": { - "$type": "number", - "$value": "{typography.font-weight.normal.medium-500}", - "$description": "Slightly heavier than normal, often for subheadings." + "$type": "string", + "$value": "{typography.font-weight.normal.medium-500}" }, "normal (base)": { - "$type": "number", - "$value": "{typography.font-weight.normal.regular-400}", - "$description": "Standard weight for body text." + "$type": "string", + "$value": "{typography.font-weight.normal.regular-400}" }, "semibold": { - "$type": "number", - "$value": "{typography.font-weight.normal.semibold-600}", - "$description": "Stronger emphasis, used for UI labels." + "$type": "string", + "$value": "{typography.font-weight.normal.semibold-600}" } } }, @@ -232,17 +227,17 @@ "Margin bottom": { "display": { "$type": "number", - "$value": "{Spacers.0}", + "$value": "{spacing.none}", "$description": "Default margin below a Displays." }, "heading": { "$type": "number", - "$value": "{Spacers.2}", + "$value": "{spacing.xs}", "$description": "Default margin below a Headings." }, "paragraph": { "$type": "number", - "$value": "{Spacers.4 (base)}", + "$value": "{spacing.md (base)}", "$description": "Default margin below a paragraph." } } diff --git a/tokens/dtcg/token_LMSPrimitives_Defaultmode.json b/tokens/dtcg/token_primitives_Defaultmode.json similarity index 79% rename from tokens/dtcg/token_LMSPrimitives_Defaultmode.json rename to tokens/dtcg/token_primitives_Defaultmode.json index 82498e9..7d0bf84 100644 --- a/tokens/dtcg/token_LMSPrimitives_Defaultmode.json +++ b/tokens/dtcg/token_primitives_Defaultmode.json @@ -1,52 +1,4 @@ { - "brand": { - "blue": { - "100": { - "$type": "color", - "$value": "#69e0ff" - }, - "200": { - "$type": "color", - "$value": "#65a1b3" - }, - "300": { - "$type": "color", - "$value": "#194866" - } - }, - "grey": { - "100": { - "$type": "color", - "$value": "#8a8a8e" - }, - "200": { - "$type": "color", - "$value": "#545454" - }, - "300": { - "$type": "color", - "$value": "#282828" - } - }, - "orange": { - "100": { - "$type": "color", - "$value": "#fff8f1" - }, - "200": { - "$type": "color", - "$value": "#ffecdb" - }, - "300": { - "$type": "color", - "$value": "#fedec3" - }, - "400": { - "$type": "color", - "$value": "#f98012" - } - } - }, "color": { "blue": { "100": { @@ -86,6 +38,54 @@ "$value": "#031626" } }, + "brand": { + "blue": { + "100": { + "$type": "color", + "$value": "#69e0ff" + }, + "200": { + "$type": "color", + "$value": "#65a1b3" + }, + "300": { + "$type": "color", + "$value": "#194866" + } + }, + "gray": { + "100": { + "$type": "color", + "$value": "#8a8a8e" + }, + "200": { + "$type": "color", + "$value": "#545454" + }, + "300": { + "$type": "color", + "$value": "#282828" + } + }, + "orange": { + "100": { + "$type": "color", + "$value": "#fff8f1" + }, + "200": { + "$type": "color", + "$value": "#ffecdb" + }, + "300": { + "$type": "color", + "$value": "#fedec3" + }, + "400": { + "$type": "color", + "$value": "#f98012" + } + } + }, "cyan": { "100": { "$type": "color", @@ -475,40 +475,86 @@ } } }, - "opacity": { + "scale": { "0": { "$type": "number", "$value": 0 }, - "20": { + "100": { "$type": "number", - "$value": 20 + "$value": 4 }, - "40": { + "1000": { + "$type": "number", + "$value": 32 + }, + "1100": { "$type": "number", "$value": 40 }, - "60": { + "1200": { + "$type": "number", + "$value": 48 + }, + "1300": { "$type": "number", - "$value": 60 + "$value": 56 }, - "80": { + "1400": { + "$type": "number", + "$value": 64 + }, + "1500": { + "$type": "number", + "$value": 72 + }, + "1600": { "$type": "number", "$value": 80 - } - }, - "shadows": { - "lg": { - "$type": "color", - "$value": "#0000002d" - }, - "md": { - "$type": "color", - "$value": "#00000026" - }, - "sm": { - "$type": "color", - "$value": "#00000013" + }, + "1700": { + "$type": "number", + "$value": 96 + }, + "1800": { + "$type": "number", + "$value": 800 + }, + "200": { + "$type": "number", + "$value": 6 + }, + "300": { + "$type": "number", + "$value": 8 + }, + "400": { + "$type": "number", + "$value": 12 + }, + "50": { + "$type": "number", + "$value": 2 + }, + "500": { + "$type": "number", + "$value": 14 + }, + "600": { + "$type": "number", + "$value": 16 + }, + "700": { + "$type": "number", + "$value": 20 + }, + "800": { + "$type": "number", + "$value": 24 + }, + "900": { + "$type": "number", + "$value": 28 } }, "typography": { @@ -599,42 +645,40 @@ }, "normal": { "black-900": { - "$type": "number", - "$value": 900 + "$type": "string", + "$value": "Black" }, "bold-700": { - "$type": "number", - "$value": 700, - "$description": "/* bold */" + "$type": "string", + "$value": "Bold" }, "extrabold-800": { - "$type": "number", - "$value": 800 + "$type": "string", + "$value": "Extrabold" }, "extralight-200": { - "$type": "number", - "$value": 200 + "$type": "string", + "$value": "Extra light" }, "light-300": { - "$type": "number", - "$value": 300 + "$type": "string", + "$value": "Light" }, "medium-500": { - "$type": "number", - "$value": 500 + "$type": "string", + "$value": "Medium" }, "regular-400": { - "$type": "number", - "$value": 400, - "$description": "/* normal */" + "$type": "string", + "$value": "Regular" }, "semibold-600": { - "$type": "number", - "$value": 600 + "$type": "string", + "$value": "Semibold" }, "thin-100": { - "$type": "number", - "$value": 100 + "$type": "string", + "$value": "Thin" } } }, @@ -713,89 +757,5 @@ } } } - }, - "utilities": { - "rem": { - "0": { - "$type": "number", - "$value": 0 - }, - "0,125": { - "$type": "number", - "$value": 2 - }, - "0,25": { - "$type": "number", - "$value": 4 - }, - "0,375": { - "$type": "number", - "$value": 6 - }, - "0,5": { - "$type": "number", - "$value": 8 - }, - "0,75": { - "$type": "number", - "$value": 12 - }, - "0,875": { - "$type": "number", - "$value": 14 - }, - "1": { - "$type": "number", - "$value": 16 - }, - "1,25": { - "$type": "number", - "$value": 20 - }, - "1,5": { - "$type": "number", - "$value": 24 - }, - "1,75": { - "$type": "number", - "$value": 28 - }, - "2": { - "$type": "number", - "$value": 32 - }, - "2,5": { - "$type": "number", - "$value": 40 - }, - "3": { - "$type": "number", - "$value": 48 - }, - "3,5": { - "$type": "number", - "$value": 56 - }, - "4": { - "$type": "number", - "$value": 64 - }, - "4,5": { - "$type": "number", - "$value": 72 - }, - "5": { - "$type": "number", - "$value": 80 - }, - "50": { - "$type": "number", - "$value": 800 - }, - "6": { - "$type": "number", - "$value": 96 - } - } } } \ No newline at end of file