From 9ee834eb3af537c91b9519a364a56b176e2475a2 Mon Sep 17 00:00:00 2001 From: Drew Powers <drew@pow.rs> Date: Tue, 13 Feb 2024 21:52:39 -0700 Subject: [PATCH] Fix typography token aliases in plugin-css --- .changeset/popular-dogs-pull.md | 5 +++++ packages/core/test/w3c.test.ts | 10 ++++++++++ packages/plugin-css/src/index.ts | 8 ++++++-- packages/plugin-css/test/border/tokens.json | 3 +++ packages/plugin-css/test/border/want.css | 2 ++ packages/plugin-css/test/color/tokens.json | 16 +++++++++++----- packages/plugin-css/test/color/want.css | 6 ++++-- packages/plugin-css/test/typography/tokens.json | 4 ++++ packages/plugin-css/test/typography/want.css | 1 + packages/plugin-sass/test/basic/tokens.json | 4 ++++ packages/plugin-sass/test/basic/want.sass | 11 +++++++++++ packages/plugin-sass/test/basic/want.scss | 11 +++++++++++ 12 files changed, 72 insertions(+), 9 deletions(-) create mode 100644 .changeset/popular-dogs-pull.md diff --git a/.changeset/popular-dogs-pull.md b/.changeset/popular-dogs-pull.md new file mode 100644 index 00000000..28933d54 --- /dev/null +++ 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 index 0cda7f6d..8c68c514 100644 --- 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 index f3c20598..1a2a4c1b 100644 --- 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 index a2f6c1b4..fca5d482 100644 --- 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 index 36acf23a..d278dbe5 100644 --- 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 index 0724b5dc..e1d4f148 100644 --- 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 index f9e585c5..379afd4d 100644 --- 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 index 977ec5fe..19dd4e67 100644 --- 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 index a55c18a2..0be22e40 100644 --- 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 index 25a325c2..7a9714d4 100644 --- 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 index cb5e90ca..cc618010 100644 --- 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 index 9fdd7a3d..217fd040 100644 --- 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),