Skip to content

Commit 08c140d

Browse files
andrewgosandrewgos
committed
chore(tokens): Pulled refactored tokens and regenerate css
1 parent d132e3c commit 08c140d

22 files changed

+397
-656
lines changed

‎.github/linters/.prettierignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
coverage/
22
dist/
33
storybook-static/
4-
tokens/
4+
../../tokens/
55
CHANGELOG.md

‎scripts/tokens.ts‎

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import StyleDictionary, {
1818
Dictionary,
1919
TransformedToken,
2020
} from 'style-dictionary';
21+
import { getReferences, usesReferences } from 'style-dictionary/utils';
2122

2223
const tokenFiles = fs
2324
.readdirSync('tokens/dtcg')
@@ -29,17 +30,21 @@ const tokenFiles = fs
2930
* and semantic tokens referencing the primitives (or referencing another semantic token).
3031
*
3132
* Why custom formatter?
32-
* - Built-in formatter couldn't handle multi-layer semantic uppercased first letter condition.
33-
* - Built-in formatter couldn't handle variables referencing to prefixed mds- primitives
3433
* - Built-in formatter couldn't handle names with brackets i.e. (default) and (base)
34+
* - Built-in formatter couldn't handle descriptions with multi-line block comments (/* ... *\/)
35+
* - Built-in formatter couldn’t apply the 'mds-' prefix selectively to primitive tokens only.
3536
*/
3637
StyleDictionary.registerFormat({
3738
name: 'css/mds-variables',
3839
format: ({ dictionary }: { dictionary: Dictionary }) => {
39-
const getTokenName = (token: TransformedToken): string => {
40-
const prefix = token.filePath.includes('Primitives') ? 'mds-' : '';
41-
return `${prefix}${token.name}`;
42-
};
40+
const isPrimitive = (token: TransformedToken) =>
41+
token.filePath.includes('primitives');
42+
43+
const getPrefix = (token: TransformedToken) =>
44+
isPrimitive(token) ? 'mds-' : '';
45+
46+
const getTokenName = (token: TransformedToken) =>
47+
`${getPrefix(token)}${token.name}`;
4348

4449
const getTokenValue = (token: TransformedToken): string => {
4550
/*
@@ -48,24 +53,17 @@ StyleDictionary.registerFormat({
4853
- semantic token -> the variable reference (not the resolved/transformed value)
4954
*/
5055
const originalValue = String(token.original.$value);
56+
if (!usesReferences(originalValue)) {
57+
return token.$value; // if primitive, return the transformed value
58+
}
5159

52-
// curly brackets -> it is a reference to another token
53-
const varMatch = originalValue.match(/^\{(.+)\}$/);
54-
if (!varMatch) return token.$value; // if primitive, return the transformed value instead of the original
55-
const varReference = varMatch[1];
60+
// if semantic, use the target token being referenced
61+
const [targetToken] = getReferences(
62+
originalValue,
63+
dictionary.unfilteredTokens ?? dictionary.tokens,
64+
);
5665

57-
/*
58-
first letter:
59-
- uppercase -> reference to semantic token (no prefix)
60-
- lowercase -> reference to primitive token (mds- prefix).
61-
*/
62-
const prefix = /^[A-Z]/.test(varReference) ? '' : 'mds-';
63-
const cssVar = varReference
64-
.toLowerCase()
65-
.replace(/[.,\s(]+/g, '-')
66-
.replace(/\)+$/, '');
67-
68-
return `var(--${prefix}${cssVar})`;
66+
return `var(--${getTokenName(targetToken)})`;
6967
};
7068

7169
const tokenVariables = dictionary.allTokens.map((token) => {
@@ -98,15 +96,15 @@ StyleDictionary.registerFormat({
9896
* Why custom transform?
9997
* - Built-in transform needs the type to be 'dimension', but our tokens solely use 'number' type.
10098
* - The exported values in DTCG JSON from ZeroHeight would not have the units (ie. 1rem) for dimension-related tokens
99+
*
100+
* Rules & Assumptions:
101+
* - Any flat numerical tokens with $type 'number' are considered dimension-related tokens and will be transformed from px to rem.
101102
*/
102103
StyleDictionary.registerTransform({
103104
name: 'css/dimension-px-to-rem',
104105
type: 'value',
105106
filter: (token) => {
106-
return (
107-
token.$type === 'number' &&
108-
/rem|font-size|line-height|border-width/i.test(token.name)
109-
);
107+
return token.$type === 'number';
110108
},
111109
transform: (token) => `${token.$value / 16}rem`,
112110
});

‎tokens/css/borders.css‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
/** THIS FILE IS AUTO-GENERATED — DO NOT EDIT DIRECTLY. **/
22

33
:root {
4-
--border-radius-lg: var(--mds-utilities-rem-0-5);
5-
--border-radius-md-default: var(--mds-utilities-rem-0-375);
6-
--border-radius-none: var(--mds-utilities-rem-0);
7-
--border-radius-pill: var(--mds-utilities-rem-50);
8-
--border-radius-sm: var(--mds-utilities-rem-0-25);
9-
--border-radius-xl: var(--mds-utilities-rem-1);
10-
--border-radius-xxl: var(--mds-utilities-rem-2);
11-
--border-width-0: 0rem;
12-
--border-width-2: 0.125rem;
13-
--border-width-3: 0.1875rem;
14-
--border-width-4: 0.25rem;
15-
--border-width-5: 0.3125rem;
16-
--border-width-1-default: 0.0625rem;
4+
--border-radius-lg: var(--mds-scale-300);
5+
--border-radius-md-default: var(--mds-scale-200);
6+
--border-radius-none: var(--mds-scale-0);
7+
--border-radius-pill: var(--mds-scale-1800);
8+
--border-radius-sm: var(--mds-scale-100);
9+
--border-radius-xl: var(--mds-scale-600);
10+
--border-radius-xxl: var(--mds-scale-1000);
11+
--stroke-weight-lg: 0.1875rem;
12+
--stroke-weight-md: 0.125rem;
13+
--stroke-weight-sm-default: 0.0625rem;
14+
--stroke-weight-xl: 0.25rem;
15+
--stroke-weight-xxl: 0.3125rem;
1716
}

‎tokens/css/colors.css‎

Lines changed: 20 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,22 @@
11
/** THIS FILE IS AUTO-GENERATED — DO NOT EDIT DIRECTLY. **/
22

33
:root {
4-
--body-background-default: var(--mds-color-gray-white);
5-
--body-background-secondary: var(--mds-color-gray-200);
6-
--body-background-tertiary: var(--mds-color-gray-100);
7-
--body-text-default: var(--mds-color-gray-900);
8-
--body-text-emphasis: var(--mds-color-gray-black);
9-
--body-text-secondary: rgba(29, 33, 37, 0.75);
10-
--body-text-tertiary: rgba(29, 33, 37, 0.5);
4+
--background-default: var(--mds-color-gray-white);
5+
--background-secondary: var(--mds-color-gray-200);
6+
--background-tertiary: var(--mds-color-gray-100);
117
--border-default: var(--mds-color-gray-300);
128
--border-translucent: rgba(0, 0, 0, 0);
13-
--brand-primary-moodle-black: var(--mds-brand-grey-300);
14-
--brand-primary-moodle-blue: var(--mds-brand-blue-300);
15-
--brand-primary-moodle-orange: var(--mds-brand-orange-400);
16-
--brand-secondary-bright-blue: var(--mds-brand-blue-100);
17-
--brand-secondary-dark-grey: var(--mds-brand-grey-200);
18-
--brand-secondary-light-blue: var(--mds-brand-blue-200);
19-
--brand-secondary-light-grey: var(--mds-brand-grey-100);
20-
--brand-secondary-light-peach: var(--mds-brand-orange-100);
21-
--brand-secondary-medium-peach: var(--mds-brand-orange-200);
22-
--brand-secondary-peach: var(--mds-brand-orange-300);
23-
--contrast-contrast-dark: var(--mds-color-gray-black);
24-
--contrast-contrast-light: var(--mds-color-gray-white);
9+
--brand-primary-moodle-black: var(--mds-color-brand-gray-300);
10+
--brand-primary-moodle-blue: var(--mds-color-brand-blue-300);
11+
--brand-primary-moodle-orange: var(--mds-color-brand-orange-400);
12+
--brand-secondary-bright-blue: var(--mds-color-brand-blue-100);
13+
--brand-secondary-dark-grey: var(--mds-color-brand-gray-200);
14+
--brand-secondary-light-blue: var(--mds-color-brand-blue-200);
15+
--brand-secondary-light-grey: var(--mds-color-brand-gray-100);
16+
--brand-secondary-light-peach: var(--mds-color-brand-orange-100);
17+
--brand-secondary-medium-peach: var(--mds-color-brand-orange-200);
18+
--brand-secondary-peach: var(--mds-color-brand-orange-300);
2519
--focus-ring-default: var(--theme-primary);
26-
--icon-fa-border-color: #eeeeee;
27-
--icon-fa-inverse: var(--mds-color-gray-white);
28-
--link-default: var(--theme-primary);
29-
--link-hover: var(--mds-color-blue-600);
3020
--state-outline-danger: var(--theme-danger);
3121
--state-outline-danger-active: var(--mds-color-red-600);
3222
--state-outline-danger-disabled: var(--mds-color-red-300);
@@ -51,6 +41,13 @@
5141
--state-secondary-active: var(--theme-secondary);
5242
--state-secondary-disabled: var(--mds-color-gray-200);
5343
--state-secondary-hover: var(--mds-color-gray-300);
44+
--text-body-light: var(--theme-light);
45+
--text-body-default: var(--mds-color-gray-900);
46+
--text-body-emphasis: var(--mds-color-gray-black);
47+
--text-body-secondary: var(--mds-color-gray-700);
48+
--text-body-tertiary: var(--mds-color-gray-600);
49+
--text-link-default: var(--theme-primary);
50+
--text-link-hover: var(--mds-color-blue-600);
5451
--theme-background-subtle-danger: var(--mds-color-red-100);
5552
--theme-background-subtle-dark: var(--mds-color-gray-400);
5653
--theme-background-subtle-info: var(--mds-color-cyan-100);

‎tokens/css/focusring.css‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎tokens/css/fonts.css‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎tokens/css/index.css‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
/** THIS FILE IS AUTO-GENERATED — DO NOT EDIT DIRECTLY. **/
22

33
@import "./borders.css";
4-
@import "./colors.css";
5-
@import "./focusring.css";
6-
@import "./lmsprimitives.css";
74
@import "./shadows.css";
8-
@import "./spacers.css";
9-
@import "./styletokens.css";
5+
@import "./spacing.css";
106
@import "./typography.css";
7+
@import "./colors.css";
8+
@import "./primitives.css";
119
@import "./fonts.css"

tokens/css/lmsprimitives.css renamed to tokens/css/primitives.css

Lines changed: 40 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,6 @@
11
/** THIS FILE IS AUTO-GENERATED — DO NOT EDIT DIRECTLY. **/
22

33
:root {
4-
--mds-brand-blue-100: #69e0ff;
5-
--mds-brand-blue-200: #65a1b3;
6-
--mds-brand-blue-300: #194866;
7-
--mds-brand-grey-100: #8a8a8e;
8-
--mds-brand-grey-200: #545454;
9-
--mds-brand-grey-300: #282828;
10-
--mds-brand-orange-100: #fff8f1;
11-
--mds-brand-orange-200: #ffecdb;
12-
--mds-brand-orange-300: #fedec3;
13-
--mds-brand-orange-400: #f98012;
144
--mds-color-blue-100: #cfe2f2;
155
--mds-color-blue-200: #9fc4e5;
166
--mds-color-blue-300: #6fa7d9;
@@ -20,6 +10,16 @@
2010
--mds-color-blue-700: #094173;
2111
--mds-color-blue-800: #062b4c;
2212
--mds-color-blue-900: #031626;
13+
--mds-color-brand-blue-100: #69e0ff;
14+
--mds-color-brand-blue-200: #65a1b3;
15+
--mds-color-brand-blue-300: #194866;
16+
--mds-color-brand-gray-100: #8a8a8e;
17+
--mds-color-brand-gray-200: #545454;
18+
--mds-color-brand-gray-300: #282828;
19+
--mds-color-brand-orange-100: #fff8f1;
20+
--mds-color-brand-orange-200: #ffecdb;
21+
--mds-color-brand-orange-300: #fedec3;
22+
--mds-color-brand-orange-400: #f98012;
2323
--mds-color-cyan-100: #cce6ea;
2424
--mds-color-cyan-200: #99cdd5;
2525
--mds-color-cyan-300: #66b3c0;
@@ -112,9 +112,26 @@
112112
--mds-color-yellow-700: #90682f;
113113
--mds-color-yellow-800: #60451f;
114114
--mds-color-yellow-900: #302310;
115-
--mds-shadows-lg: rgba(0, 0, 0, 0.18);
116-
--mds-shadows-md: rgba(0, 0, 0, 0.15);
117-
--mds-shadows-sm: rgba(0, 0, 0, 0.07);
115+
--mds-scale-0: 0rem;
116+
--mds-scale-50: 0.125rem;
117+
--mds-scale-100: 0.25rem;
118+
--mds-scale-200: 0.375rem;
119+
--mds-scale-300: 0.5rem;
120+
--mds-scale-400: 0.75rem;
121+
--mds-scale-500: 0.875rem;
122+
--mds-scale-600: 1rem;
123+
--mds-scale-700: 1.25rem;
124+
--mds-scale-800: 1.5rem;
125+
--mds-scale-900: 1.75rem;
126+
--mds-scale-1000: 2rem;
127+
--mds-scale-1100: 2.5rem;
128+
--mds-scale-1200: 3rem;
129+
--mds-scale-1300: 3.5rem;
130+
--mds-scale-1400: 4rem;
131+
--mds-scale-1500: 4.5rem;
132+
--mds-scale-1600: 5rem;
133+
--mds-scale-1700: 6rem;
134+
--mds-scale-1800: 50rem;
118135
--mds-typography-font-family-monospace: Menlo;
119136
--mds-typography-font-family-sans-serif: Roboto;
120137
--mds-typography-font-size-base-0: 0rem;
@@ -134,16 +151,16 @@
134151
--mds-typography-font-weight-italic-regular-400: Italic;
135152
--mds-typography-font-weight-italic-semibold-600: Semi Bold Italic;
136153
--mds-typography-font-weight-italic-thin-100: Thin Italic;
137-
--mds-typography-font-weight-normal-black-900: 900;
138-
--mds-typography-font-weight-normal-bold-700: 700;
139-
--mds-typography-font-weight-normal-extrabold-800: 800;
140-
--mds-typography-font-weight-normal-extralight-200: 200;
141-
--mds-typography-font-weight-normal-light-300: 300;
142-
--mds-typography-font-weight-normal-medium-500: 500;
143-
--mds-typography-font-weight-normal-regular-400: 400;
144-
--mds-typography-font-weight-normal-semibold-600: 600;
145-
--mds-typography-font-weight-normal-thin-100: 100;
146-
--mds-typography-letter-spacing-none: 0;
154+
--mds-typography-font-weight-normal-black-900: Black;
155+
--mds-typography-font-weight-normal-bold-700: Bold;
156+
--mds-typography-font-weight-normal-extrabold-800: Extrabold;
157+
--mds-typography-font-weight-normal-extralight-200: Extra light;
158+
--mds-typography-font-weight-normal-light-300: Light;
159+
--mds-typography-font-weight-normal-medium-500: Medium;
160+
--mds-typography-font-weight-normal-regular-400: Regular;
161+
--mds-typography-font-weight-normal-semibold-600: Semibold;
162+
--mds-typography-font-weight-normal-thin-100: Thin;
163+
--mds-typography-letter-spacing-none: 0rem;
147164
--mds-typography-line-height-displays-d1: 6rem;
148165
--mds-typography-line-height-displays-d2: 5.4rem;
149166
--mds-typography-line-height-displays-d3: 4.8rem;
@@ -159,24 +176,4 @@
159176
--mds-typography-line-height-paragraph-base: 1.5rem;
160177
--mds-typography-line-height-paragraph-lg: 2.5rem;
161178
--mds-typography-line-height-paragraph-sm: 1.0875rem;
162-
--mds-utilities-rem-0: 0rem;
163-
--mds-utilities-rem-1: 1rem;
164-
--mds-utilities-rem-2: 2rem;
165-
--mds-utilities-rem-3: 3rem;
166-
--mds-utilities-rem-4: 4rem;
167-
--mds-utilities-rem-5: 5rem;
168-
--mds-utilities-rem-6: 6rem;
169-
--mds-utilities-rem-50: 50rem;
170-
--mds-utilities-rem-0-125: 0.125rem;
171-
--mds-utilities-rem-0-25: 0.25rem;
172-
--mds-utilities-rem-0-375: 0.375rem;
173-
--mds-utilities-rem-0-5: 0.5rem;
174-
--mds-utilities-rem-0-75: 0.75rem;
175-
--mds-utilities-rem-0-875: 0.875rem;
176-
--mds-utilities-rem-1-25: 1.25rem;
177-
--mds-utilities-rem-1-5: 1.5rem;
178-
--mds-utilities-rem-1-75: 1.75rem;
179-
--mds-utilities-rem-2-5: 2.5rem;
180-
--mds-utilities-rem-3-5: 3.5rem;
181-
--mds-utilities-rem-4-5: 4.5rem;
182179
}

‎tokens/css/shadows.css‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
/** THIS FILE IS AUTO-GENERATED — DO NOT EDIT DIRECTLY. **/
22

33
:root {
4-
--blur-lg: var(--mds-utilities-rem-3);
5-
--blur-md-base: var(--mds-utilities-rem-1);
6-
--blur-sm: var(--mds-utilities-rem-0-25);
7-
--color-lg: var(--mds-shadows-lg);
8-
--color-md-base: var(--mds-shadows-md);
9-
--color-sm: var(--mds-shadows-sm);
10-
--offset-lg: var(--mds-utilities-rem-1);
11-
--offset-md-base: var(--mds-utilities-rem-0-5);
12-
--offset-sm: var(--mds-utilities-rem-0-125);
4+
--blur-lg: var(--mds-scale-1200);
5+
--blur-md-base: var(--mds-scale-600);
6+
--blur-sm: var(--mds-scale-100);
7+
--color-lg: rgba(0, 0, 0, 0.18);
8+
--color-md-base: rgba(0, 0, 0, 0.15);
9+
--color-sm: rgba(0, 0, 0, 0.07);
10+
--offset-lg: var(--mds-scale-600);
11+
--offset-md-base: var(--mds-scale-300);
12+
--offset-sm: var(--mds-scale-50);
1313
}

‎tokens/css/spacers.css‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

0 commit comments

Comments
 (0)