@discuss-ds/ui 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/dist/index.cjs +3497 -0
  3. package/dist/index.cjs.map +1 -0
  4. package/dist/index.d.cts +876 -0
  5. package/dist/index.d.ts +876 -0
  6. package/dist/index.js +3351 -0
  7. package/dist/index.js.map +1 -0
  8. package/package.json +71 -0
  9. package/src/styles/globals.css +434 -0
package/package.json ADDED
@@ -0,0 +1,71 @@
1
+ {
2
+ "name": "@discuss-ds/ui",
3
+ "version": "0.1.0",
4
+ "type": "module",
5
+ "main": "./dist/index.cjs",
6
+ "types": "./dist/index.d.ts",
7
+ "exports": {
8
+ ".": {
9
+ "types": "./dist/index.d.ts",
10
+ "import": "./dist/index.js",
11
+ "require": "./dist/index.cjs"
12
+ },
13
+ "./styles.css": "./src/styles/globals.css",
14
+ "./package.json": "./package.json"
15
+ },
16
+ "dependencies": {
17
+ "@phosphor-icons/react": "^2.1.10",
18
+ "class-variance-authority": "^0.7.1",
19
+ "clsx": "^2.1.1",
20
+ "radix-ui": "^1.1.1",
21
+ "react-day-picker": "^10.0.2",
22
+ "react-hook-form": "^7.88.0",
23
+ "tailwind-merge": "^2.6.0",
24
+ "@discuss-ds/tokens": "0.1.0"
25
+ },
26
+ "peerDependencies": {
27
+ "react": "^19.0.0",
28
+ "react-dom": "^19.0.0"
29
+ },
30
+ "devDependencies": {
31
+ "@storybook/addon-docs": "^10.6.0",
32
+ "@testing-library/jest-dom": "^7.0.1",
33
+ "@testing-library/react": "^16.3.3",
34
+ "@testing-library/user-event": "^14.6.7",
35
+ "@types/react": "^19.2.18",
36
+ "@types/react-dom": "^19.2.7",
37
+ "@vitejs/plugin-react": "^6.1.1",
38
+ "jest-axe": "^11.0.0",
39
+ "jsdom": "^30.0.1",
40
+ "react": "^19.2.8",
41
+ "react-dom": "^19.2.8",
42
+ "tailwindcss": "^4.1.0",
43
+ "tsup": "^8.3.5",
44
+ "typescript": "~6.0.2",
45
+ "vitest": "^5.0.0"
46
+ },
47
+ "description": "Discuss design system React component library",
48
+ "license": "UNLICENSED",
49
+ "repository": {
50
+ "type": "git",
51
+ "url": "git+https://github.com/TamyresLucas/Discuss-UI-Storybook.git",
52
+ "directory": "packages/ui"
53
+ },
54
+ "files": [
55
+ "dist",
56
+ "src/styles",
57
+ "CHANGELOG.md"
58
+ ],
59
+ "sideEffects": [
60
+ "*.css"
61
+ ],
62
+ "publishConfig": {
63
+ "access": "public"
64
+ },
65
+ "scripts": {
66
+ "build": "tsup",
67
+ "lint": "oxlint src",
68
+ "test": "vitest run"
69
+ },
70
+ "module": "./dist/index.js"
71
+ }
package/src/styles/globals.css ADDED
@@ -0,0 +1,434 @@
1
+ @import 'tailwindcss';
2
+ @import '@discuss-ds/tokens/css';
3
+
4
+ /*
5
+ * Tailwind v4 automatic content detection walks the Vite project root
6
+ * (apps/storybook, apps/playground) — it never reaches into a sibling
7
+ * workspace package like packages/ui, since that lives outside that root
8
+ * entirely. Without this, every Tailwind utility class used inside
9
+ * packages/ui/src/components/** silently fails to generate any CSS.
10
+ */
11
+ @source '../components';
12
+ /* Published package: the compiled components live in dist (src/components is not shipped). */
13
+ @source '../../dist';
14
+
15
+ /*
16
+ * Tailwind v4 theme layer — every entry here MUST alias an existing sys- or
17
+ * comp- token from @discuss-ds/tokens (packages/tokens/src/tokens.css). Never
18
+ * hardcode a raw value in this block; add the sys/comp token first, then
19
+ * alias it here. See ../../../../.context/DESIGN_TOKENS.md.
20
+ */
21
+ @theme inline {
22
+ /*
23
+ * `inline` is required for dark mode: a plain `@theme { --color-x: var(--sys-…) }`
24
+ * is resolved once at :root, so a [data-theme='dark'] ancestor's overrides
25
+ * never reach the utilities. `inline` emits the var(--sys-…) reference straight
26
+ * into each utility so it resolves at the element.
27
+ *
28
+ * Reset every namespace the "no arbitrary values" rule in CLAUDE.md governs
29
+ * (color, spacing, radius, font-size, font-weight, line-height, shadow,
30
+ * font-family) before re-declaring only the token-backed entries below.
31
+ * Without this, built-in Tailwind scales stay available underneath ours —
32
+ * e.g. bg-red-500, rounded-xl, p-7, font-extrabold all silently still
33
+ * generate CSS from Tailwind defaults, a complete bypass around
34
+ * @discuss-ds/tokens that no lint rule catches. `transparent`/`currentColor`
35
+ * are special-cased by the Tailwind engine, not sourced from --color-*, so
36
+ * resetting it does not affect them.
37
+ */
38
+ --color-*: initial;
39
+ --spacing-*: initial;
40
+ --radius-*: initial;
41
+ --text-*: initial;
42
+ --font-weight-*: initial;
43
+ --leading-*: initial;
44
+ --tracking-*: initial;
45
+ --shadow-*: initial;
46
+ --font-family-*: initial;
47
+
48
+ /* Core surfaces */
49
+ --color-background: var(--sys-color-background);
50
+ --color-foreground: var(--sys-color-foreground);
51
+ --color-card: var(--sys-color-card);
52
+ --color-card-foreground: var(--sys-color-card-foreground);
53
+ --color-popover: var(--sys-color-popover);
54
+ --color-popover-foreground: var(--sys-color-popover-foreground);
55
+
56
+ /* Interactive */
57
+ --color-primary: var(--sys-color-primary);
58
+ --color-primary-foreground: var(--sys-color-primary-foreground);
59
+ --color-secondary: var(--sys-color-secondary);
60
+ --color-secondary-foreground: var(--sys-color-secondary-foreground);
61
+ --color-accent: var(--sys-color-accent);
62
+ --color-accent-foreground: var(--sys-color-accent-foreground);
63
+ --color-destructive: var(--sys-color-destructive);
64
+ --color-destructive-foreground: var(--sys-color-destructive-foreground);
65
+ --color-muted: var(--sys-color-muted);
66
+ --color-muted-foreground: var(--sys-color-muted-foreground);
67
+
68
+ /* Structural */
69
+ --color-border: var(--sys-color-border);
70
+ --color-input: var(--sys-color-input);
71
+ /* Brand override: selected controls + focus rings use `ring`, not `primary`. */
72
+ --color-ring: var(--sys-color-ring);
73
+
74
+ /* Status (shadcn extensions) */
75
+ --color-success: var(--sys-color-success);
76
+ --color-success-foreground: var(--sys-color-success-foreground);
77
+ --color-warning: var(--sys-color-warning);
78
+ --color-warning-foreground: var(--sys-color-warning-foreground);
79
+ --color-info: var(--sys-color-info);
80
+ --color-info-foreground: var(--sys-color-info-foreground);
81
+ --color-info-border: var(--sys-color-info-border);
82
+
83
+ /* Figma-only semantic additions */
84
+ --color-surface: var(--sys-color-surface-background);
85
+ --color-label: var(--sys-color-label);
86
+ --color-primary-hover: var(--sys-color-primary-hover);
87
+ --color-destructive-hover: var(--sys-color-destructive-hover);
88
+ --color-destructive-soft-hover: var(--sys-color-destructive-soft-hover);
89
+ --color-overlay-dark-3: var(--sys-color-overlay-dark-3);
90
+ --color-overlay-dark-5: var(--sys-color-overlay-dark-5);
91
+ --color-overlay-dark-10: var(--sys-color-overlay-dark-10);
92
+ --color-surface-foreground: var(--sys-color-surface-foreground);
93
+ --color-accent-muted: var(--sys-color-accent-muted);
94
+ --color-input-accent: var(--sys-color-input-accent);
95
+ --color-secondary-muted-foreground: var(--sys-color-secondary-muted-foreground);
96
+
97
+ /* Soft variants (brand extension) — tags, badges, alerts, banners, toasts */
98
+ --color-destructive-soft: var(--sys-color-destructive-soft);
99
+ --color-destructive-soft-foreground: var(--sys-color-destructive-soft-foreground);
100
+ --color-destructive-soft-border: var(--sys-color-destructive-soft-border);
101
+ --color-warning-soft: var(--sys-color-warning-soft);
102
+ --color-warning-soft-foreground: var(--sys-color-warning-soft-foreground);
103
+ --color-warning-soft-border: var(--sys-color-warning-soft-border);
104
+ --color-success-soft: var(--sys-color-success-soft);
105
+ --color-success-soft-foreground: var(--sys-color-success-soft-foreground);
106
+ --color-success-soft-border: var(--sys-color-success-soft-border);
107
+ --color-accent-soft: var(--sys-color-accent-soft);
108
+ --color-accent-soft-foreground: var(--sys-color-accent-soft-foreground);
109
+ --color-accent-soft-border: var(--sys-color-accent-soft-border);
110
+ --color-primary-soft: var(--sys-color-primary-soft);
111
+ --color-primary-soft-foreground: var(--sys-color-primary-soft-foreground);
112
+ --color-primary-soft-border: var(--sys-color-primary-soft-border);
113
+
114
+ /* Charts */
115
+ --color-chart-1: var(--sys-color-chart-1);
116
+ --color-chart-2: var(--sys-color-chart-2);
117
+ --color-chart-3: var(--sys-color-chart-3);
118
+ --color-chart-4: var(--sys-color-chart-4);
119
+ --color-chart-5: var(--sys-color-chart-5);
120
+
121
+ /* Sidebar */
122
+ --color-sidebar-background: var(--sys-color-sidebar-background);
123
+ --color-sidebar-foreground: var(--sys-color-sidebar-foreground);
124
+ --color-sidebar-primary: var(--sys-color-sidebar-primary);
125
+ --color-sidebar-primary-foreground: var(--sys-color-sidebar-primary-foreground);
126
+ --color-sidebar-accent: var(--sys-color-sidebar-accent);
127
+ --color-sidebar-accent-foreground: var(--sys-color-sidebar-accent-foreground);
128
+ --color-sidebar-muted: var(--sys-color-sidebar-muted);
129
+ --color-sidebar-muted-foreground: var(--sys-color-sidebar-muted-foreground);
130
+ --color-sidebar-border: var(--sys-color-sidebar-border);
131
+ --color-sidebar-ring: var(--sys-color-sidebar-ring);
132
+
133
+ /* Primitive scales — exposed for the rare case a component legitimately
134
+ needs a raw step (e.g. a chart needing more than 5 series colors), not
135
+ for general component styling (components use the semantic tokens above). */
136
+ --color-plum-50: var(--sys-color-plum-50);
137
+ --color-plum-100: var(--sys-color-plum-100);
138
+ --color-plum-200: var(--sys-color-plum-200);
139
+ --color-plum-300: var(--sys-color-plum-300);
140
+ --color-plum-400: var(--sys-color-plum-400);
141
+ --color-plum-500: var(--sys-color-plum-500);
142
+ --color-plum-600: var(--sys-color-plum-600);
143
+ --color-plum-700: var(--sys-color-plum-700);
144
+ --color-plum-800: var(--sys-color-plum-800);
145
+ --color-plum-900: var(--sys-color-plum-900);
146
+ --color-plum-950: var(--sys-color-plum-950);
147
+ --color-orchid-50: var(--sys-color-orchid-50);
148
+ --color-orchid-100: var(--sys-color-orchid-100);
149
+ --color-orchid-200: var(--sys-color-orchid-200);
150
+ --color-orchid-300: var(--sys-color-orchid-300);
151
+ --color-orchid-400: var(--sys-color-orchid-400);
152
+ --color-orchid-500: var(--sys-color-orchid-500);
153
+ --color-orchid-600: var(--sys-color-orchid-600);
154
+ --color-orchid-700: var(--sys-color-orchid-700);
155
+ --color-orchid-800: var(--sys-color-orchid-800);
156
+ --color-orchid-900: var(--sys-color-orchid-900);
157
+ --color-orchid-950: var(--sys-color-orchid-950);
158
+ --color-oat-50: var(--sys-color-oat-50);
159
+ --color-oat-100: var(--sys-color-oat-100);
160
+ --color-oat-200: var(--sys-color-oat-200);
161
+ --color-oat-300: var(--sys-color-oat-300);
162
+ --color-oat-400: var(--sys-color-oat-400);
163
+ --color-oat-500: var(--sys-color-oat-500);
164
+ --color-oat-600: var(--sys-color-oat-600);
165
+ --color-oat-700: var(--sys-color-oat-700);
166
+ --color-oat-800: var(--sys-color-oat-800);
167
+ --color-oat-900: var(--sys-color-oat-900);
168
+ --color-oat-950: var(--sys-color-oat-950);
169
+ --color-plum-muted-50: var(--sys-color-plum-muted-50);
170
+ --color-plum-muted-100: var(--sys-color-plum-muted-100);
171
+ --color-plum-muted-200: var(--sys-color-plum-muted-200);
172
+ --color-plum-muted-300: var(--sys-color-plum-muted-300);
173
+ --color-plum-muted-400: var(--sys-color-plum-muted-400);
174
+ --color-plum-muted-500: var(--sys-color-plum-muted-500);
175
+ --color-plum-muted-600: var(--sys-color-plum-muted-600);
176
+ --color-plum-muted-700: var(--sys-color-plum-muted-700);
177
+ --color-plum-muted-800: var(--sys-color-plum-muted-800);
178
+ --color-plum-muted-900: var(--sys-color-plum-muted-900);
179
+ --color-plum-muted-950: var(--sys-color-plum-muted-950);
180
+ --color-black-50: var(--sys-color-black-50);
181
+ --color-black-100: var(--sys-color-black-100);
182
+ --color-black-200: var(--sys-color-black-200);
183
+ --color-black-300: var(--sys-color-black-300);
184
+ --color-black-400: var(--sys-color-black-400);
185
+ --color-black-500: var(--sys-color-black-500);
186
+ --color-black-600: var(--sys-color-black-600);
187
+ --color-black-700: var(--sys-color-black-700);
188
+ --color-black-800: var(--sys-color-black-800);
189
+ --color-black-900: var(--sys-color-black-900);
190
+ --color-black-950: var(--sys-color-black-950);
191
+ --color-dandelion-50: var(--sys-color-dandelion-50);
192
+ --color-dandelion-100: var(--sys-color-dandelion-100);
193
+ --color-dandelion-200: var(--sys-color-dandelion-200);
194
+ --color-dandelion-300: var(--sys-color-dandelion-300);
195
+ --color-dandelion-400: var(--sys-color-dandelion-400);
196
+ --color-dandelion-500: var(--sys-color-dandelion-500);
197
+ --color-dandelion-600: var(--sys-color-dandelion-600);
198
+ --color-dandelion-700: var(--sys-color-dandelion-700);
199
+ --color-dandelion-800: var(--sys-color-dandelion-800);
200
+ --color-dandelion-900: var(--sys-color-dandelion-900);
201
+ --color-dandelion-950: var(--sys-color-dandelion-950);
202
+ --color-coral-50: var(--sys-color-coral-50);
203
+ --color-coral-100: var(--sys-color-coral-100);
204
+ --color-coral-200: var(--sys-color-coral-200);
205
+ --color-coral-300: var(--sys-color-coral-300);
206
+ --color-coral-400: var(--sys-color-coral-400);
207
+ --color-coral-500: var(--sys-color-coral-500);
208
+ --color-coral-600: var(--sys-color-coral-600);
209
+ --color-coral-700: var(--sys-color-coral-700);
210
+ --color-coral-800: var(--sys-color-coral-800);
211
+ --color-coral-900: var(--sys-color-coral-900);
212
+ --color-coral-950: var(--sys-color-coral-950);
213
+ --color-success-50: var(--sys-color-success-50);
214
+ --color-success-100: var(--sys-color-success-100);
215
+ --color-success-200: var(--sys-color-success-200);
216
+ --color-success-300: var(--sys-color-success-300);
217
+ --color-success-400: var(--sys-color-success-400);
218
+ --color-success-500: var(--sys-color-success-500);
219
+ --color-success-600: var(--sys-color-success-600);
220
+ --color-success-700: var(--sys-color-success-700);
221
+ --color-success-800: var(--sys-color-success-800);
222
+ --color-success-900: var(--sys-color-success-900);
223
+ --color-success-950: var(--sys-color-success-950);
224
+
225
+ /* Border radius */
226
+ --radius-none: var(--sys-radius-none);
227
+ --radius-xxs: var(--sys-radius-xxs);
228
+ --radius-xs: var(--sys-radius-xs);
229
+ --radius-sm: var(--sys-radius-sm);
230
+ --radius: var(--sys-radius);
231
+ --radius-md: var(--sys-radius-md);
232
+ --radius-lg: var(--sys-radius-lg);
233
+ --radius-xl: var(--sys-radius-xl);
234
+ --radius-2xl: var(--sys-radius-2xl);
235
+ --radius-full: var(--sys-radius-full);
236
+
237
+ /* Spacing — CSS custom property names cannot contain a literal ".", so the
238
+ fractional steps (0.5/1.5/2.5) cannot exist as named --spacing-N.5
239
+ overrides. Instead, set Tailwind own --spacing multiplier to our 4px-grid
240
+ unit: every p-, gap-, etc. utility Tailwind computes from it is still a
241
+ 4px-grid multiple, matching design.md section 2 exactly, so this is not
242
+ reopening the arbitrary-value gap the reset above closes for color/
243
+ radius/font-size/etc — the spacing rule is any multiple of 4px, not only
244
+ these named steps. */
245
+ --spacing: var(--sys-space-unit);
246
+
247
+ /* Typography */
248
+ --font-family-sans: var(--sys-font-family-sans);
249
+ --font-family-display: var(--sys-font-family-display);
250
+ --font-family-mono: var(--sys-font-family-mono);
251
+
252
+ --text-xs: var(--sys-font-size-xs);
253
+ --text-sm: var(--sys-font-size-sm);
254
+ --text-base: var(--sys-font-size-base);
255
+ --text-lg: var(--sys-font-size-lg);
256
+ --text-xl: var(--sys-font-size-xl);
257
+ --text-2xl: var(--sys-font-size-2xl);
258
+ --text-3xl: var(--sys-font-size-3xl);
259
+ --text-4xl: var(--sys-font-size-4xl);
260
+ --text-5xl: var(--sys-font-size-5xl);
261
+
262
+ --font-weight-thin: var(--sys-font-weight-thin);
263
+ --font-weight-extralight: var(--sys-font-weight-extralight);
264
+ --font-weight-light: var(--sys-font-weight-light);
265
+ --font-weight-normal: var(--sys-font-weight-normal);
266
+ --font-weight-medium: var(--sys-font-weight-medium);
267
+ --font-weight-semibold: var(--sys-font-weight-semibold);
268
+ --font-weight-bold: var(--sys-font-weight-bold);
269
+ --font-weight-extrabold: var(--sys-font-weight-extrabold);
270
+ --font-weight-black: var(--sys-font-weight-black);
271
+
272
+ --leading-none: var(--sys-line-height-none);
273
+ --leading-tight: var(--sys-line-height-tight);
274
+ --leading-snug: var(--sys-line-height-snug);
275
+ --leading-normal: var(--sys-line-height-normal);
276
+ --leading-relaxed: var(--sys-line-height-relaxed);
277
+ --leading-loose: var(--sys-line-height-loose);
278
+
279
+ --tracking-tighter: var(--sys-tracking-tighter);
280
+ --tracking-tight: var(--sys-tracking-tight);
281
+ --tracking-normal: var(--sys-tracking-normal);
282
+ --tracking-wide: var(--sys-tracking-wide);
283
+ --tracking-wider: var(--sys-tracking-wider);
284
+ --tracking-widest: var(--sys-tracking-widest);
285
+
286
+ /* Shadow — Figma effect styles shadow/xs…2xl. */
287
+ --shadow-xs: var(--sys-shadow-xs);
288
+ --shadow-sm: var(--sys-shadow-sm);
289
+ --shadow-md: var(--sys-shadow-md);
290
+ --shadow-lg: var(--sys-shadow-lg);
291
+ --shadow-xl: var(--sys-shadow-xl);
292
+ --shadow-2xl: var(--sys-shadow-2xl);
293
+ --shadow-none: var(--sys-shadow-none);
294
+ }
295
+
296
+ /* Composite type styles — one class per Figma text style. Built only from
297
+ --sys-text-* tokens (packages/tokens/src/tokens.css). */
298
+ @utility text-heading-h1 {
299
+ font-family: var(--sys-text-heading-h1-font-family);
300
+ font-weight: var(--sys-text-heading-h1-font-weight);
301
+ font-size: var(--sys-text-heading-h1-font-size);
302
+ line-height: var(--sys-text-heading-h1-line-height);
303
+ letter-spacing: var(--sys-text-heading-h1-letter-spacing);
304
+ }
305
+ @utility text-heading-h2 {
306
+ font-family: var(--sys-text-heading-h2-font-family);
307
+ font-weight: var(--sys-text-heading-h2-font-weight);
308
+ font-size: var(--sys-text-heading-h2-font-size);
309
+ line-height: var(--sys-text-heading-h2-line-height);
310
+ letter-spacing: var(--sys-text-heading-h2-letter-spacing);
311
+ }
312
+ @utility text-heading-h3 {
313
+ font-family: var(--sys-text-heading-h3-font-family);
314
+ font-weight: var(--sys-text-heading-h3-font-weight);
315
+ font-size: var(--sys-text-heading-h3-font-size);
316
+ line-height: var(--sys-text-heading-h3-line-height);
317
+ letter-spacing: var(--sys-text-heading-h3-letter-spacing);
318
+ }
319
+ @utility text-heading-h4 {
320
+ font-family: var(--sys-text-heading-h4-font-family);
321
+ font-weight: var(--sys-text-heading-h4-font-weight);
322
+ font-size: var(--sys-text-heading-h4-font-size);
323
+ line-height: var(--sys-text-heading-h4-line-height);
324
+ letter-spacing: var(--sys-text-heading-h4-letter-spacing);
325
+ }
326
+ @utility text-body-section {
327
+ font-family: var(--sys-text-body-section-font-family);
328
+ font-weight: var(--sys-text-body-section-font-weight);
329
+ font-size: var(--sys-text-body-section-font-size);
330
+ line-height: var(--sys-text-body-section-line-height);
331
+ letter-spacing: var(--sys-text-body-section-letter-spacing);
332
+ }
333
+ @utility text-body-base {
334
+ font-family: var(--sys-text-body-base-font-family);
335
+ font-weight: var(--sys-text-body-base-font-weight);
336
+ font-size: var(--sys-text-body-base-font-size);
337
+ line-height: var(--sys-text-body-base-line-height);
338
+ letter-spacing: var(--sys-text-body-base-letter-spacing);
339
+ }
340
+ @utility text-body-small {
341
+ font-family: var(--sys-text-body-small-font-family);
342
+ font-weight: var(--sys-text-body-small-font-weight);
343
+ font-size: var(--sys-text-body-small-font-size);
344
+ line-height: var(--sys-text-body-small-line-height);
345
+ letter-spacing: var(--sys-text-body-small-letter-spacing);
346
+ }
347
+ @utility text-body-xs {
348
+ font-family: var(--sys-text-body-xs-font-family);
349
+ font-weight: var(--sys-text-body-xs-font-weight);
350
+ font-size: var(--sys-text-body-xs-font-size);
351
+ line-height: var(--sys-text-body-xs-line-height);
352
+ letter-spacing: var(--sys-text-body-xs-letter-spacing);
353
+ }
354
+ @utility text-body-xxs {
355
+ font-family: var(--sys-text-body-xxs-font-family);
356
+ font-weight: var(--sys-text-body-xxs-font-weight);
357
+ font-size: var(--sys-text-body-xxs-font-size);
358
+ line-height: var(--sys-text-body-xxs-line-height);
359
+ letter-spacing: var(--sys-text-body-xxs-letter-spacing);
360
+ }
361
+ @utility text-ui-label {
362
+ font-family: var(--sys-text-ui-label-font-family);
363
+ font-weight: var(--sys-text-ui-label-font-weight);
364
+ font-size: var(--sys-text-ui-label-font-size);
365
+ line-height: var(--sys-text-ui-label-line-height);
366
+ letter-spacing: var(--sys-text-ui-label-letter-spacing);
367
+ }
368
+ @utility text-ui-label-large {
369
+ font-family: var(--sys-text-ui-label-large-font-family);
370
+ font-weight: var(--sys-text-ui-label-large-font-weight);
371
+ font-size: var(--sys-text-ui-label-large-font-size);
372
+ line-height: var(--sys-text-ui-label-large-line-height);
373
+ letter-spacing: var(--sys-text-ui-label-large-letter-spacing);
374
+ }
375
+ @utility text-ui-badge {
376
+ font-family: var(--sys-text-ui-badge-font-family);
377
+ font-weight: var(--sys-text-ui-badge-font-weight);
378
+ font-size: var(--sys-text-ui-badge-font-size);
379
+ line-height: var(--sys-text-ui-badge-line-height);
380
+ letter-spacing: var(--sys-text-ui-badge-letter-spacing);
381
+ }
382
+ @utility text-ui-caption {
383
+ font-family: var(--sys-text-ui-caption-font-family);
384
+ font-weight: var(--sys-text-ui-caption-font-weight);
385
+ font-size: var(--sys-text-ui-caption-font-size);
386
+ line-height: var(--sys-text-ui-caption-line-height);
387
+ letter-spacing: var(--sys-text-ui-caption-letter-spacing);
388
+ }
389
+ @utility text-ui-overline {
390
+ font-family: var(--sys-text-ui-overline-font-family);
391
+ font-weight: var(--sys-text-ui-overline-font-weight);
392
+ font-size: var(--sys-text-ui-overline-font-size);
393
+ line-height: var(--sys-text-ui-overline-line-height);
394
+ letter-spacing: var(--sys-text-ui-overline-letter-spacing);
395
+ }
396
+ @utility text-ui-code {
397
+ font-family: var(--sys-text-ui-code-font-family);
398
+ font-weight: var(--sys-text-ui-code-font-weight);
399
+ font-size: var(--sys-text-ui-code-font-size);
400
+ line-height: var(--sys-text-ui-code-line-height);
401
+ letter-spacing: var(--sys-text-ui-code-letter-spacing);
402
+ }
403
+ @utility text-ui-placeholder {
404
+ font-family: var(--sys-text-ui-placeholder-font-family);
405
+ font-weight: var(--sys-text-ui-placeholder-font-weight);
406
+ font-size: var(--sys-text-ui-placeholder-font-size);
407
+ line-height: var(--sys-text-ui-placeholder-line-height);
408
+ letter-spacing: var(--sys-text-ui-placeholder-letter-spacing);
409
+ }
410
+ @utility text-ui-input-value {
411
+ font-family: var(--sys-text-ui-input-value-font-family);
412
+ font-weight: var(--sys-text-ui-input-value-font-weight);
413
+ font-size: var(--sys-text-ui-input-value-font-size);
414
+ line-height: var(--sys-text-ui-input-value-line-height);
415
+ letter-spacing: var(--sys-text-ui-input-value-letter-spacing);
416
+ }
417
+
418
+ body {
419
+ background-color: var(--color-surface);
420
+ color: var(--color-foreground);
421
+ font-family: var(--font-family-sans);
422
+ }
423
+
424
+ /* Visible focus ring on every interactive element — never suppressed. See
425
+ ../../../../.context/ACCESSIBILITY_GUIDELINES.md. */
426
+ /* Kept in the base layer so a component can still deliberately replace the
427
+ ring with its own (e.g. a wrapper that shows it via :focus-within) — an
428
+ unlayered rule would beat every Tailwind `outline-*` utility. */
429
+ @layer base {
430
+ :focus-visible {
431
+ outline: var(--sys-focus-ring-width) solid var(--sys-focus-ring-color);
432
+ outline-offset: var(--sys-focus-ring-offset);
433
+ }
434
+ }