Skip to content

Commit 441690c

Browse files
QuintonJasonQuintonJason
committed
fix: add semantic tokens
1 parent c4c0c0c commit 441690c

File tree

3 files changed

+749
-0
lines changed

3 files changed

+749
-0
lines changed

‎packages/styles/_generated/base/_semantic.scss‎

Lines changed: 250 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
*/
44

55
:root {
6+
--pine-border-width: var(--pine-border-width-thin);
7+
--pine-box-shadow: var(--pine-box-shadow-100);
68
--pine-color-accent: var(--pine-color-purple-500);
79
--pine-color-accent-disabled: var(--pine-color-purple-100);
810
--pine-color-accent-hover: var(--pine-color-purple-600);
@@ -75,10 +77,94 @@
7577
--pine-color-warning: var(--pine-color-yellow-500);
7678
--pine-color-warning-disabled: var(--pine-color-yellow-100);
7779
--pine-color-warning-hover: var(--pine-color-yellow-600);
80+
--pine-color-brand: var(--pine-color-black);
81+
--pine-font-family-heading: var(--pine-font-family-greet);
82+
--pine-font-family-body: var(--pine-font-family-inter);
83+
--pine-font-size: var(--pine-font-size-100);
84+
--pine-font-size-body-2xs: var(--pine-font-size-057);
85+
--pine-font-size-body-xs: var(--pine-font-size-071);
86+
--pine-font-size-body-sm: var(--pine-font-size-085);
87+
--pine-font-size-body-md: var(--pine-font-size-100);
88+
--pine-font-size-body-lg: var(--pine-font-size-116);
89+
--pine-font-size-body-xl: var(--pine-font-size-128);
90+
--pine-font-size-body-2xl: var(--pine-font-size-142);
91+
--pine-font-size-heading-1: var(--pine-font-size-200);
92+
--pine-font-size-heading-2: var(--pine-font-size-185);
93+
--pine-font-size-heading-3: var(--pine-font-size-157);
94+
--pine-font-size-heading-4: var(--pine-font-size-142);
95+
--pine-font-size-heading-5: var(--pine-font-size-128);
96+
--pine-font-size-heading-6: var(--pine-font-size-116);
97+
--pine-font-size-heading-caption: var(--pine-font-size-085);
98+
--pine-font-weight-thin: var(--pine-font-weight-100);
99+
--pine-font-weight-extra-light: var(--pine-font-weight-200);
100+
--pine-font-weight-light: var(--pine-font-weight-300);
101+
--pine-font-weight-regular: var(--pine-font-weight-400);
102+
--pine-font-weight-medium: var(--pine-font-weight-500);
103+
--pine-font-weight-semi-bold: var(--pine-font-weight-600);
104+
--pine-font-weight-bold: var(--pine-font-weight-700);
105+
--pine-font-weight-extra-bold: var(--pine-font-weight-800);
106+
--pine-font-weight-heavy: var(--pine-font-weight-900);
107+
--pine-font-weight-text-message: var(--pine-font-weight-400);
108+
--pine-line-height-text-message: var(--pine-line-height-125);
109+
--pine-line-height-heading: var(--pine-line-height-125);
110+
--pine-line-height-body: 1.425;
111+
--pine-dimension-none: var(--pine-dimension-0);
112+
--pine-dimension-2xs: var(--pine-dimension-050);
113+
--pine-dimension-xs: var(--pine-dimension-100);
114+
--pine-dimension-sm: var(--pine-dimension-200);
115+
--pine-dimension-md: var(--pine-dimension-300);
116+
--pine-dimension-lg: var(--pine-dimension-400);
117+
--pine-dimension-xl: var(--pine-dimension-500);
118+
--pine-dimension-2xl: var(--pine-dimension-600);
119+
--pine-letter-spacing: -0.16px;
120+
--pine-letter-spacing-heading-1: var(--pine-letter-spacing-185);
121+
--pine-letter-spacing-heading-2: var(--pine-letter-spacing-171);
122+
--pine-letter-spacing-heading-3: var(--pine-letter-spacing-157);
123+
--pine-letter-spacing-heading-4: var(--pine-letter-spacing-142);
124+
--pine-letter-spacing-heading-5: var(--pine-letter-spacing-128);
125+
--pine-letter-spacing-heading-6: var(--pine-letter-spacing-114);
126+
--pine-z-index: var(--pine-z-index-0);
127+
--pine-z-index-hide: var(--pine-z-index-n1);
128+
--pine-z-index-raised: var(--pine-z-index-1);
129+
--pine-z-index-alert: var(--pine-z-index-2);
130+
--pine-z-index-underlay: var(--pine-z-index-3);
131+
--pine-z-index-navigation: var(--pine-z-index-4);
132+
--pine-z-index-overlay: var(--pine-z-index-5);
133+
--pine-z-index-modal: var(--pine-z-index-6);
134+
--pine-z-index-priority: var(--pine-z-index-8);
135+
--pine-z-index-nuclear: var(--pine-z-index-9);
136+
--pine-border: 1px solid #d2d1d1;
137+
--pine-border-hover: 1px solid #bbbab9;
138+
--pine-border-none: 0px solid #d2d1d1;
139+
--pine-border-radius-full: 9999px;
140+
--pine-typography-heading-1: 600 28px/1.25 'Greet Standard', 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
141+
--pine-typography-heading-2: 600 26px/1.25 'Greet Standard', 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
142+
--pine-typography-heading-3: 600 22px/1.25 'Greet Standard', 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
143+
--pine-typography-heading-4: 600 20px/1.25 'Greet Standard', 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
144+
--pine-typography-heading-5: 500 18px/1.25 'Greet Standard', 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
145+
--pine-typography-heading-6: 500 16px/1.25 'Greet Standard', 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
146+
--pine-typography-heading-caption: 600 12px/1.25 'Greet Standard', 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
147+
--pine-typography-body: 400 14px/1.425 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
148+
--pine-typography-body-medium: 500 14px/1.425 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
149+
--pine-typography-body-mono: 500 14px/1.425 monospace;
150+
--pine-typography-body-semi-bold: 600 14px/1.425 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
151+
--pine-typography-body-bold: 700 14px/1.425 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
152+
--pine-typography-body-brand-label: 500 14px/1.425 'Greet Standard', 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
153+
--pine-typography-body-brand-text: 500 14px/1.425 'FAIRE Sprig';
154+
--pine-typography-body-sm: 400 12px/1.425 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
155+
--pine-typography-body-sm-medium: 500 12px/1.425 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
156+
--pine-typography-body-sm-mono: 500 12px/1.425 monospace;
157+
--pine-typography-body-sm-bold: 700 12px/1.425 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
158+
--pine-typography-body-sm-brand-label: 500 12px/1.425 'Greet Standard', 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
159+
--pine-typography-body-sm-brand-text: 500 12px/1.425 'FAIRE Sprig';
160+
--pine-outline-focus: 2px solid #a4acfd;
161+
--pine-outline-focus-danger: 2px solid #fca5a5;
78162
}
79163

80164
@media (prefers-color-scheme: dark) {
81165
:root {
166+
--pine-border-width: var(--pine-border-width-thin);
167+
--pine-box-shadow: var(--pine-box-shadow-100);
82168
--pine-color-accent: var(--pine-color-purple-500);
83169
--pine-color-accent-disabled: var(--pine-color-purple-100);
84170
--pine-color-accent-hover: var(--pine-color-purple-600);
@@ -151,10 +237,93 @@
151237
--pine-color-warning: var(--pine-color-yellow-500);
152238
--pine-color-warning-disabled: var(--pine-color-yellow-100);
153239
--pine-color-warning-hover: var(--pine-color-yellow-600);
240+
--pine-font-family-heading: var(--pine-font-family-greet);
241+
--pine-font-family-body: var(--pine-font-family-inter);
242+
--pine-font-size: var(--pine-font-size-100);
243+
--pine-font-size-body-2xs: var(--pine-font-size-057);
244+
--pine-font-size-body-xs: var(--pine-font-size-071);
245+
--pine-font-size-body-sm: var(--pine-font-size-085);
246+
--pine-font-size-body-md: var(--pine-font-size-100);
247+
--pine-font-size-body-lg: var(--pine-font-size-116);
248+
--pine-font-size-body-xl: var(--pine-font-size-128);
249+
--pine-font-size-body-2xl: var(--pine-font-size-142);
250+
--pine-font-size-heading-1: var(--pine-font-size-200);
251+
--pine-font-size-heading-2: var(--pine-font-size-185);
252+
--pine-font-size-heading-3: var(--pine-font-size-157);
253+
--pine-font-size-heading-4: var(--pine-font-size-142);
254+
--pine-font-size-heading-5: var(--pine-font-size-128);
255+
--pine-font-size-heading-6: var(--pine-font-size-116);
256+
--pine-font-size-heading-caption: var(--pine-font-size-085);
257+
--pine-font-weight-thin: var(--pine-font-weight-100);
258+
--pine-font-weight-extra-light: var(--pine-font-weight-200);
259+
--pine-font-weight-light: var(--pine-font-weight-300);
260+
--pine-font-weight-regular: var(--pine-font-weight-400);
261+
--pine-font-weight-medium: var(--pine-font-weight-500);
262+
--pine-font-weight-semi-bold: var(--pine-font-weight-600);
263+
--pine-font-weight-bold: var(--pine-font-weight-700);
264+
--pine-font-weight-extra-bold: var(--pine-font-weight-800);
265+
--pine-font-weight-heavy: var(--pine-font-weight-900);
266+
--pine-font-weight-text-message: var(--pine-font-weight-400);
267+
--pine-line-height-text-message: var(--pine-line-height-125);
268+
--pine-line-height-heading: var(--pine-line-height-125);
269+
--pine-line-height-body: 1.425;
270+
--pine-dimension-none: var(--pine-dimension-0);
271+
--pine-dimension-2xs: var(--pine-dimension-050);
272+
--pine-dimension-xs: var(--pine-dimension-100);
273+
--pine-dimension-sm: var(--pine-dimension-200);
274+
--pine-dimension-md: var(--pine-dimension-300);
275+
--pine-dimension-lg: var(--pine-dimension-400);
276+
--pine-dimension-xl: var(--pine-dimension-500);
277+
--pine-dimension-2xl: var(--pine-dimension-600);
278+
--pine-letter-spacing: -0.16px;
279+
--pine-letter-spacing-heading-1: var(--pine-letter-spacing-185);
280+
--pine-letter-spacing-heading-2: var(--pine-letter-spacing-171);
281+
--pine-letter-spacing-heading-3: var(--pine-letter-spacing-157);
282+
--pine-letter-spacing-heading-4: var(--pine-letter-spacing-142);
283+
--pine-letter-spacing-heading-5: var(--pine-letter-spacing-128);
284+
--pine-letter-spacing-heading-6: var(--pine-letter-spacing-114);
285+
--pine-z-index: var(--pine-z-index-0);
286+
--pine-z-index-hide: var(--pine-z-index-n1);
287+
--pine-z-index-raised: var(--pine-z-index-1);
288+
--pine-z-index-alert: var(--pine-z-index-2);
289+
--pine-z-index-underlay: var(--pine-z-index-3);
290+
--pine-z-index-navigation: var(--pine-z-index-4);
291+
--pine-z-index-overlay: var(--pine-z-index-5);
292+
--pine-z-index-modal: var(--pine-z-index-6);
293+
--pine-z-index-priority: var(--pine-z-index-8);
294+
--pine-z-index-nuclear: var(--pine-z-index-9);
295+
--pine-border: 1px solid #d2d1d1;
296+
--pine-border-hover: 1px solid #bbbab9;
297+
--pine-border-none: 0px solid #d2d1d1;
298+
--pine-border-radius-full: 9999px;
299+
--pine-typography-heading-1: 600 28px/1.25 'Greet Standard', 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
300+
--pine-typography-heading-2: 600 26px/1.25 'Greet Standard', 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
301+
--pine-typography-heading-3: 600 22px/1.25 'Greet Standard', 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
302+
--pine-typography-heading-4: 600 20px/1.25 'Greet Standard', 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
303+
--pine-typography-heading-5: 500 18px/1.25 'Greet Standard', 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
304+
--pine-typography-heading-6: 500 16px/1.25 'Greet Standard', 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
305+
--pine-typography-heading-caption: 600 12px/1.25 'Greet Standard', 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
306+
--pine-typography-body: 400 14px/1.425 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
307+
--pine-typography-body-medium: 500 14px/1.425 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
308+
--pine-typography-body-mono: 500 14px/1.425 monospace;
309+
--pine-typography-body-semi-bold: 600 14px/1.425 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
310+
--pine-typography-body-bold: 700 14px/1.425 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
311+
--pine-typography-body-brand-label: 500 14px/1.425 'Greet Standard', 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
312+
--pine-typography-body-brand-text: 500 14px/1.425 'FAIRE Sprig';
313+
--pine-typography-body-sm: 400 12px/1.425 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
314+
--pine-typography-body-sm-medium: 500 12px/1.425 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
315+
--pine-typography-body-sm-mono: 500 12px/1.425 monospace;
316+
--pine-typography-body-sm-bold: 700 12px/1.425 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
317+
--pine-typography-body-sm-brand-label: 500 12px/1.425 'Greet Standard', 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
318+
--pine-typography-body-sm-brand-text: 500 12px/1.425 'FAIRE Sprig';
319+
--pine-outline-focus: 2px solid #a4acfd;
320+
--pine-outline-focus-danger: 2px solid #fca5a5;
154321
}
155322
}
156323

157324
[data-theme="dark"] {
325+
--pine-border-width: var(--pine-border-width-thin);
326+
--pine-box-shadow: var(--pine-box-shadow-100);
158327
--pine-color-accent: var(--pine-color-purple-500);
159328
--pine-color-accent-disabled: var(--pine-color-purple-100);
160329
--pine-color-accent-hover: var(--pine-color-purple-600);
@@ -227,4 +396,85 @@
227396
--pine-color-warning: var(--pine-color-yellow-500);
228397
--pine-color-warning-disabled: var(--pine-color-yellow-100);
229398
--pine-color-warning-hover: var(--pine-color-yellow-600);
399+
--pine-font-family-heading: var(--pine-font-family-greet);
400+
--pine-font-family-body: var(--pine-font-family-inter);
401+
--pine-font-size: var(--pine-font-size-100);
402+
--pine-font-size-body-2xs: var(--pine-font-size-057);
403+
--pine-font-size-body-xs: var(--pine-font-size-071);
404+
--pine-font-size-body-sm: var(--pine-font-size-085);
405+
--pine-font-size-body-md: var(--pine-font-size-100);
406+
--pine-font-size-body-lg: var(--pine-font-size-116);
407+
--pine-font-size-body-xl: var(--pine-font-size-128);
408+
--pine-font-size-body-2xl: var(--pine-font-size-142);
409+
--pine-font-size-heading-1: var(--pine-font-size-200);
410+
--pine-font-size-heading-2: var(--pine-font-size-185);
411+
--pine-font-size-heading-3: var(--pine-font-size-157);
412+
--pine-font-size-heading-4: var(--pine-font-size-142);
413+
--pine-font-size-heading-5: var(--pine-font-size-128);
414+
--pine-font-size-heading-6: var(--pine-font-size-116);
415+
--pine-font-size-heading-caption: var(--pine-font-size-085);
416+
--pine-font-weight-thin: var(--pine-font-weight-100);
417+
--pine-font-weight-extra-light: var(--pine-font-weight-200);
418+
--pine-font-weight-light: var(--pine-font-weight-300);
419+
--pine-font-weight-regular: var(--pine-font-weight-400);
420+
--pine-font-weight-medium: var(--pine-font-weight-500);
421+
--pine-font-weight-semi-bold: var(--pine-font-weight-600);
422+
--pine-font-weight-bold: var(--pine-font-weight-700);
423+
--pine-font-weight-extra-bold: var(--pine-font-weight-800);
424+
--pine-font-weight-heavy: var(--pine-font-weight-900);
425+
--pine-font-weight-text-message: var(--pine-font-weight-400);
426+
--pine-line-height-text-message: var(--pine-line-height-125);
427+
--pine-line-height-heading: var(--pine-line-height-125);
428+
--pine-line-height-body: 1.425;
429+
--pine-dimension-none: var(--pine-dimension-0);
430+
--pine-dimension-2xs: var(--pine-dimension-050);
431+
--pine-dimension-xs: var(--pine-dimension-100);
432+
--pine-dimension-sm: var(--pine-dimension-200);
433+
--pine-dimension-md: var(--pine-dimension-300);
434+
--pine-dimension-lg: var(--pine-dimension-400);
435+
--pine-dimension-xl: var(--pine-dimension-500);
436+
--pine-dimension-2xl: var(--pine-dimension-600);
437+
--pine-letter-spacing: -0.16px;
438+
--pine-letter-spacing-heading-1: var(--pine-letter-spacing-185);
439+
--pine-letter-spacing-heading-2: var(--pine-letter-spacing-171);
440+
--pine-letter-spacing-heading-3: var(--pine-letter-spacing-157);
441+
--pine-letter-spacing-heading-4: var(--pine-letter-spacing-142);
442+
--pine-letter-spacing-heading-5: var(--pine-letter-spacing-128);
443+
--pine-letter-spacing-heading-6: var(--pine-letter-spacing-114);
444+
--pine-z-index: var(--pine-z-index-0);
445+
--pine-z-index-hide: var(--pine-z-index-n1);
446+
--pine-z-index-raised: var(--pine-z-index-1);
447+
--pine-z-index-alert: var(--pine-z-index-2);
448+
--pine-z-index-underlay: var(--pine-z-index-3);
449+
--pine-z-index-navigation: var(--pine-z-index-4);
450+
--pine-z-index-overlay: var(--pine-z-index-5);
451+
--pine-z-index-modal: var(--pine-z-index-6);
452+
--pine-z-index-priority: var(--pine-z-index-8);
453+
--pine-z-index-nuclear: var(--pine-z-index-9);
454+
--pine-border: 1px solid #d2d1d1;
455+
--pine-border-hover: 1px solid #bbbab9;
456+
--pine-border-none: 0px solid #d2d1d1;
457+
--pine-border-radius-full: 9999px;
458+
--pine-typography-heading-1: 600 28px/1.25 'Greet Standard', 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
459+
--pine-typography-heading-2: 600 26px/1.25 'Greet Standard', 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
460+
--pine-typography-heading-3: 600 22px/1.25 'Greet Standard', 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
461+
--pine-typography-heading-4: 600 20px/1.25 'Greet Standard', 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
462+
--pine-typography-heading-5: 500 18px/1.25 'Greet Standard', 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
463+
--pine-typography-heading-6: 500 16px/1.25 'Greet Standard', 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
464+
--pine-typography-heading-caption: 600 12px/1.25 'Greet Standard', 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
465+
--pine-typography-body: 400 14px/1.425 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
466+
--pine-typography-body-medium: 500 14px/1.425 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
467+
--pine-typography-body-mono: 500 14px/1.425 monospace;
468+
--pine-typography-body-semi-bold: 600 14px/1.425 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
469+
--pine-typography-body-bold: 700 14px/1.425 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
470+
--pine-typography-body-brand-label: 500 14px/1.425 'Greet Standard', 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
471+
--pine-typography-body-brand-text: 500 14px/1.425 'FAIRE Sprig';
472+
--pine-typography-body-sm: 400 12px/1.425 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
473+
--pine-typography-body-sm-medium: 500 12px/1.425 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
474+
--pine-typography-body-sm-mono: 500 12px/1.425 monospace;
475+
--pine-typography-body-sm-bold: 700 12px/1.425 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
476+
--pine-typography-body-sm-brand-label: 500 12px/1.425 'Greet Standard', 'Inter', system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
477+
--pine-typography-body-sm-brand-text: 500 12px/1.425 'FAIRE Sprig';
478+
--pine-outline-focus: 2px solid #a4acfd;
479+
--pine-outline-focus-danger: 2px solid #fca5a5;
230480
}

0 commit comments

Comments
 (0)