chore(tokens): Sync to the latest refactored tokens and regenerate css

.github/linters/.prettierignore

@@ -1,5 +1,5 @@
 coverage/
 dist/
 storybook-static/
-tokens/
+../../tokens/
 CHANGELOG.md

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`,
 });

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;
 }

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);

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"

tokens/css/lmsprimitives.css → 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;
 }

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);
 }

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);
+}