Fix typography token aliases in plugin-css (#192)

terrazzoapp · Feb 14, 2024 · edd33ef · edd33ef
1 parent 01041d4
commit edd33ef
Show file tree

Hide file tree

Showing 12 changed files with 72 additions and 9 deletions.
diff --git a/.changeset/popular-dogs-pull.md b/.changeset/popular-dogs-pull.md
@@ -0,0 +1,5 @@
+---
+"@cobalt-ui/plugin-css": patch
+---
+
+Fix typography token aliases
diff --git a/packages/core/test/w3c.test.ts b/packages/core/test/w3c.test.ts
@@ -45,6 +45,16 @@ describe('5. Group', () => {
 });
 
 describe('7. Alias', () => {
+  test('top-level', () => {
+    const json = {
+      a: {$type: 'number', $value: 2},
+      b: {$type: 'number', $value: '{a}'},
+    };
+    const tokens = getTokens(json);
+    expect(tokens.find((t) => t.id === 'a')?.$value).toBe(json.a.$value);
+    expect(tokens.find((t) => t.id === 'b')?.$value).toBe(json.a.$value);
+  });
+
   test('mode', () => {
     const json = {
       color: {

diff --git a/packages/plugin-css/src/index.ts b/packages/plugin-css/src/index.ts
@@ -117,8 +117,12 @@ export default function pluginCSS(options?: Options): Plugin {
             break;
           }
           case 'typography': {
-            for (const [k, v] of Object.entries(value)) {
-              tokenVals[generateName(`${token.id}-${k}`, token)] = v;
+            if (value && typeof value === 'object') {
+              for (const [k, v] of Object.entries(value)) {
+                tokenVals[generateName(`${token.id}-${k}`, token)] = v;
+              }
+            } else {
+              tokenVals[ref] = value;
             }
             break;
           }

diff --git a/packages/plugin-css/test/border/tokens.json b/packages/plugin-css/test/border/tokens.json
@@ -69,6 +69,9 @@
         "width": "1px",
         "style": "solid"
       }
+    },
+    "default": {
+      "$value": "{border.solid}"
     }
   }
 }
diff --git a/packages/plugin-css/test/border/want.css b/packages/plugin-css/test/border/want.css
@@ -6,6 +6,7 @@
 
 :root {
   --ds-border-dashed: 1.5px dashed #a6b0b5;
+  --ds-border-default: var(--ds-border-solid);
   --ds-border-gray: 1px solid var(--ds-color-gray);
   --ds-border-solid: 1px solid #a6b0b5;
   --ds-color-gray: #544741;
@@ -62,3 +63,4 @@
     --ds-color-gray: color(display-p3 0.7333333333333333 0.7137254901960784 0.7019607843137254);
   }
 }
+
diff --git a/packages/plugin-css/test/color/tokens.json b/packages/plugin-css/test/color/tokens.json
@@ -31,10 +31,16 @@
     }
   },
   "gradient": {
-    "$type": "gradient",
-    "$value": [
-      {"color": "#218bff", "position": 0},
-      {"color": "#e85aad", "position": 1}
-    ]
+    "blue-pink": {
+      "$type": "gradient",
+      "$value": [
+        {"color": "#218bff", "position": 0},
+        {"color": "#e85aad", "position": 1}
+      ]
+    },
+    "default": {
+      "$type": "gradient",
+      "$value": "{gradient.blue-pink}"
+    }
   }
 }
diff --git a/packages/plugin-css/test/color/want.css b/packages/plugin-css/test/color/want.css
@@ -7,7 +7,8 @@
 :root {
   --ds-color-action: var(--ds-color-blue);
   --ds-color-blue: #218bff;
-  --ds-gradient: #218bff 0%, #e85aad 100%;
+  --ds-gradient-blue-pink: #218bff 0%, #e85aad 100%;
+  --ds-gradient-default: var(--ds-gradient-blue-pink);
 }
 
 @media (prefers-color-scheme: light) {
@@ -62,7 +63,7 @@
 @supports (color: color(display-p3 1 1 1)) {
   :root {
     --ds-color-blue: color(display-p3 0.12941176470588237 0.5450980392156862 1);
-    --ds-gradient: color(display-p3 0.12941176470588237 0.5450980392156862 1) 0%, color(display-p3 0.9098039215686274 0.35294117647058826 0.6784313725490196) 100%;
+    --ds-gradient-blue-pink: color(display-p3 0.12941176470588237 0.5450980392156862 1) 0%, color(display-p3 0.9098039215686274 0.35294117647058826 0.6784313725490196) 100%;
   }
 
   @media (prefers-color-scheme: light) {
@@ -105,3 +106,4 @@
     --ds-color-blue: color(display-p3 0.2196078431372549 0.5450980392156862 0.9921568627450981);
   }
 }
+
diff --git a/packages/plugin-css/test/typography/tokens.json b/packages/plugin-css/test/typography/tokens.json
@@ -44,6 +44,10 @@
         "fontWeight": 400,
         "lineHeight": 1.5
       }
+    },
+    "label": {
+      "$type": "typography",
+      "$value": "{typography.body}"
     }
   }
 }
diff --git a/packages/plugin-css/test/typography/want.css b/packages/plugin-css/test/typography/want.css
@@ -17,6 +17,7 @@
   --ds-typography-family-body: "IBM Plex Sans", -system-ui, sans-serif;
   --ds-typography-family-footnote: var(--ds-typography-family-body);
   --ds-typography-family-heading: Helvetica;
+  --ds-typography-label: var(--ds-typography-body);
   --ds-typography-page-title-font-family: var(--ds-typography-family-heading);
   --ds-typography-page-title-font-size: 48px;
   --ds-typography-page-title-font-weight: 600;

diff --git a/packages/plugin-sass/test/basic/tokens.json b/packages/plugin-sass/test/basic/tokens.json
@@ -108,6 +108,10 @@
         "fontWeight": 400,
         "lineHeight": 1.5
       }
+    },
+    "label": {
+      "$type": "typography",
+      "$value": "{typography.body}"
     }
   },
   "shadow": {

diff --git a/packages/plugin-sass/test/basic/want.sass b/packages/plugin-sass/test/basic/want.sass
@@ -186,6 +186,9 @@ $__token-values: (
   "typography.family.heading": (
     default: (Helvetica),
   ),
+  "typography.label": (
+    "__cobalt-error": "This is a typography mixin. Use `@include typography(\"typography.label\")` instead.",
+  ),
   "typography.page-title": (
     "__cobalt-error": "This is a typography mixin. Use `@include typography(\"typography.page-title\")` instead.",
   ),
@@ -212,6 +215,14 @@ $__token-typography-mixins: (
       "line-height": (1.5),
     ),
   ),
+  "typography.label": (
+    default: (
+      "font-family": ("IBM Plex Sans", -system-ui, sans-serif),
+      "font-size": (16px),
+      "font-weight": (400),
+      "line-height": (1.5),
+    ),
+  ),
   "typography.page-title": (
     default: (
       "font-family": (Helvetica),

diff --git a/packages/plugin-sass/test/basic/want.scss b/packages/plugin-sass/test/basic/want.scss
@@ -186,6 +186,9 @@ $__token-values: (
   "typography.family.heading": (
     default: (Helvetica),
   ),
+  "typography.label": (
+    "__cobalt-error": "This is a typography mixin. Use `@include typography(\"typography.label\")` instead.",
+  ),
   "typography.page-title": (
     "__cobalt-error": "This is a typography mixin. Use `@include typography(\"typography.page-title\")` instead.",
   ),
@@ -212,6 +215,14 @@ $__token-typography-mixins: (
       "line-height": (1.5),
     ),
   ),
+  "typography.label": (
+    default: (
+      "font-family": ("IBM Plex Sans", -system-ui, sans-serif),
+      "font-size": (16px),
+      "font-weight": (400),
+      "line-height": (1.5),
+    ),
+  ),
   "typography.page-title": (
     default: (
       "font-family": (Helvetica),