Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix typography token aliases in plugin-css #192

Merged
merged 1 commit into from
Feb 14, 2024
Merged

Fix typography token aliases in plugin-css #192

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/popular-dogs-pull.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@cobalt-ui/plugin-css": patch
---

Fix typography token aliases
10 changes: 10 additions & 0 deletions packages/core/test/w3c.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,16 @@ describe('5. Group', () => {
});

describe('7. Alias', () => {
test('top-level', () => {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was just paranoia, but I wanted to add a test that referencing an alias without any . in it worked. I just realized that’s untested. Fortunately that was unrelated to #191

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: {
Expand Down
8 changes: 6 additions & 2 deletions packages/plugin-css/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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') {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Simple fix: typography tokens get “hoisted” (for lack of a better term) in plugin-css, but in some instances this has already been transformed to a CSS variable (a string).

for (const [k, v] of Object.entries(value)) {
tokenVals[generateName(`${token.id}-${k}`, token)] = v;
}
} else {
tokenVals[ref] = value;
}
break;
}
Expand Down
3 changes: 3 additions & 0 deletions packages/plugin-css/test/border/tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,9 @@
"width": "1px",
"style": "solid"
}
},
"default": {
"$value": "{border.solid}"
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also tested border and gradient tokens to make sure it wasn’t happening with other composite types

}
}
}
2 changes: 2 additions & 0 deletions packages/plugin-css/test/border/want.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -62,3 +63,4 @@
--ds-color-gray: color(display-p3 0.7333333333333333 0.7137254901960784 0.7019607843137254);
}
}

16 changes: 11 additions & 5 deletions packages/plugin-css/test/color/tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}"
}
}
}
6 changes: 4 additions & 2 deletions packages/plugin-css/test/color/want.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -105,3 +106,4 @@
--ds-color-blue: color(display-p3 0.2196078431372549 0.5450980392156862 0.9921568627450981);
}
}

4 changes: 4 additions & 0 deletions packages/plugin-css/test/typography/tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,10 @@
"fontWeight": 400,
"lineHeight": 1.5
}
},
"label": {
"$type": "typography",
"$value": "{typography.body}"
}
}
}
1 change: 1 addition & 0 deletions packages/plugin-css/test/typography/want.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 4 additions & 0 deletions packages/plugin-sass/test/basic/tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,10 @@
"fontWeight": 400,
"lineHeight": 1.5
}
},
"label": {
"$type": "typography",
"$value": "{typography.body}"
}
},
"shadow": {
Expand Down
11 changes: 11 additions & 0 deletions packages/plugin-sass/test/basic/want.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
),
Expand All @@ -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),
Expand Down
11 changes: 11 additions & 0 deletions packages/plugin-sass/test/basic/want.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
),
Expand All @@ -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),
Expand Down
Loading