ui-foundations 0.1.2 → 0.3.1

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 (43) hide show
  1. package/README.md +64 -30
  2. package/dist/core/index.css +7 -7
  3. package/dist/main.css +462 -289
  4. package/dist/react/index.js +1 -0
  5. package/dist/react/switch.js +45 -0
  6. package/dist/tokens/css/{color.dark.tokens.css → appearance-(modes).tokens.mode-dark.css} +2 -2
  7. package/dist/tokens/css/{color.light.tokens.css → appearance-(modes).tokens.mode-light.css} +3 -3
  8. package/dist/tokens/css/{component.tokens.css → components-(ui).tokens.css} +70 -54
  9. package/dist/tokens/css/{primitives.tokens.css → core-(primitives).tokens.css} +21 -21
  10. package/dist/tokens/css/{semantic.tokens.css → semantics-(roles).tokens.css} +7 -6
  11. package/dist/tokens/css/{brand-a.tokens.css → themes-(brands).tokens.brand-a.css} +11 -11
  12. package/dist/tokens/css/{brand-b.tokens.css → themes-(brands).tokens.brand-b.css} +10 -10
  13. package/dist/tokens/json/appearance-(modes).tokens.mode-dark.json +182 -0
  14. package/dist/tokens/json/appearance-(modes).tokens.mode-light.json +182 -0
  15. package/dist/tokens/json/components-(ui).tokens.json +739 -0
  16. package/dist/tokens/json/{primitives.tokens.json → core-(primitives).tokens.json} +766 -772
  17. package/dist/tokens/json/semantics-(roles).tokens.json +203 -0
  18. package/dist/tokens/json/themes-(brands).tokens.brand-a.json +115 -0
  19. package/dist/tokens/json/themes-(brands).tokens.brand-b.json +115 -0
  20. package/dist/tokens/tokens.yaml +1068 -847
  21. package/dist/tokens/ts/{color.dark.tokens.ts → appearance-(modes).tokens.mode-dark.ts} +3 -3
  22. package/dist/tokens/ts/{color.light.tokens.ts → appearance-(modes).tokens.mode-light.ts} +4 -4
  23. package/dist/tokens/ts/{component.tokens.ts → components-(ui).tokens.ts} +71 -55
  24. package/dist/tokens/ts/{primitives.tokens.ts → core-(primitives).tokens.ts} +22 -22
  25. package/dist/tokens/ts/{semantic.tokens.ts → semantics-(roles).tokens.ts} +7 -6
  26. package/dist/tokens/ts/{brand-a.tokens.ts → themes-(brands).tokens.brand-a.ts} +13 -13
  27. package/dist/tokens/ts/{brand-b.tokens.ts → themes-(brands).tokens.brand-b.ts} +12 -12
  28. package/dist/ui/index.css +1 -0
  29. package/dist/ui/patterns/button.css +1 -0
  30. package/dist/ui/patterns/switch.css +155 -0
  31. package/docs/agentic/skills/README.md +51 -0
  32. package/docs/agentic/skills/design-ops-specialist/SKILL.md +28 -14
  33. package/docs/agentic/skills/design-system-architect/SKILL.md +106 -0
  34. package/docs/agentic/team-ai-playbook.md +10 -0
  35. package/docs/foundations/foundation-011-branching-and-release-governance.md +42 -0
  36. package/docs/foundations/foundation-012-minimal-markup-and-composition.md +42 -0
  37. package/package.json +20 -11
  38. package/dist/tokens/json/brand-a.tokens.json +0 -192
  39. package/dist/tokens/json/brand-b.tokens.json +0 -192
  40. package/dist/tokens/json/color.dark.tokens.json +0 -364
  41. package/dist/tokens/json/color.light.tokens.json +0 -364
  42. package/dist/tokens/json/component.tokens.json +0 -1101
  43. package/dist/tokens/json/semantic.tokens.json +0 -206
package/dist/main.css CHANGED
@@ -181,197 +181,26 @@
181
181
  }
182
182
  }
183
183
  /* Auto-generated design tokens from Figma */
184
- /* Generated on 2026-03-04T21:56:02.562Z */
184
+ /* Generated on 2026-03-31T20:27:09.733Z */
185
185
 
186
186
  :root {
187
- --color-transparent: rgba(0 0 0 / 0);
188
- --color-neutral-100: rgb(230 230 230);
189
- --color-neutral-200: rgb(204 204 204);
190
- --color-neutral-300: rgb(179 179 179);
191
- --color-neutral-400: rgb(128 128 128);
192
- --color-neutral-500: rgb(128 128 128);
193
- --color-neutral-600: rgb(102 102 102);
194
- --color-neutral-700: rgb(77 77 77);
195
- --color-neutral-800: rgb(51 51 51);
196
- --color-neutral-900: rgb(26 26 26);
197
- --color-neutral-1000: rgb(0 0 0);
198
- --color-neutral-000: rgb(255 255 255);
199
- --color-neutral-alpha-100: rgba(0 0 0 / 0.1);
200
- --color-neutral-alpha-200: rgba(0 0 0 / 0.2);
201
- --color-neutral-alpha-300: rgba(0 0 0 / 0.3);
202
- --color-neutral-alpha-400: rgba(0 0 0 / 0.4);
203
- --color-neutral-alpha-500: rgba(0 0 0 / 0.5);
204
- --color-neutral-alpha-600: rgba(0 0 0 / 0.6);
205
- --color-neutral-alpha-700: rgba(0 0 0 / 0.7);
206
- --color-neutral-alpha-800: rgba(0 0 0 / 0.8);
207
- --color-neutral-alpha-900: rgba(0 0 0 / 0.9);
208
- --color-neutral-alpha-000: rgba(0 0 0 / 0);
209
- --color-brand-a-red: rgb(255 0 0);
210
- --color-brand-a-green: rgb(19 174 92);
211
- --color-brand-a-purple-200: rgb(222 192 255);
212
- --color-brand-a-purple-600: rgb(151 71 255);
213
- --color-brand-a-purple-800: rgb(85 26 139);
214
- --color-brand-a-blue-200: rgb(226 244 253);
215
- --color-brand-a-blue-500: rgb(112 203 244);
216
- --color-brand-a-blue-700: rgb(12 75 243);
217
- --color-brand-a-blue-800: rgb(27 17 92);
218
- --color-brand-b-red: rgb(204 0 0);
219
- --color-brand-b-green: rgb(14 129 68);
220
- --color-brand-b-purple-200: rgb(196 143 255);
221
- --color-brand-b-purple-600: rgb(122 20 255);
222
- --color-brand-b-purple-800: rgb(58 18 95);
223
- --color-brand-b-blue-200: rgb(179 226 250);
224
- --color-brand-b-blue-500: rgb(66 186 240);
225
- --color-brand-b-blue-700: rgb(10 60 194);
226
- --color-brand-b-blue-800: rgb(14 9 47);
227
- --font-size-xs: .75rem;
228
- --font-size-sm: .875rem;
229
- --font-size-md: 1rem;
230
- --font-size-lg: 1.25rem;
231
- --font-size-xl: 1.5rem;
232
- --font-size-xxl: 2rem;
233
- --font-size-xxxl: 2.5rem;
234
- --font-weight-100: 100;
235
- --font-weight-200: 200;
236
- --font-weight-300: 300;
237
- --font-weight-400: 400;
238
- --font-weight-500: 500;
239
- --font-weight-600: 600;
240
- --font-weight-700: 700;
241
- --font-weight-800: 800;
242
- --font-weight-900: 900;
243
- --font-family-sans: Inter;
244
- --font-family-serif: Rokkitt;
245
- --font-family-mono: SFMono-Regular;
246
- --line-height-xs: 1rem;
247
- --line-height-sm: 1.25rem;
248
- --line-height-md: 1.5rem;
249
- --line-height-lg: 1.75rem;
250
- --line-height-xl: 2rem;
251
- --line-height-xxl: 2.75rem;
252
- --line-height-xxxl: 3.5rem;
253
- --size-spacing-100: .25rem;
254
- --size-spacing-200: .5rem;
255
- --size-spacing-300: .75rem;
256
- --size-spacing-400: 1rem;
257
- --size-spacing-500: 1.25rem;
258
- --size-spacing-600: 1.5rem;
259
- --size-spacing-700: 2rem;
260
- --size-spacing-800: 2.5rem;
261
- --size-spacing-900: 3rem;
262
- --size-spacing-1000: 4rem;
263
- --size-spacing-000: 0;
264
- --size-radius-100: .125rem;
265
- --size-radius-200: .25rem;
266
- --size-radius-300: .375rem;
267
- --size-radius-400: .5rem;
268
- --size-radius-500: .75rem;
269
- --size-radius-600: 1rem;
270
- --size-radius-700: 1.25rem;
271
- --size-radius-800: 1.5rem;
272
- --size-radius-900: 2rem;
273
- --size-radius-000: 0;
274
- --size-radius-full: 625rem;
275
- --shadow-focus: .5rem;
276
- --breakpoint-100: 580px;
277
- --breakpoint-200: 760px;
278
- --breakpoint-300: 960px;
279
- --breakpoint-400: 1200px;
280
- --breakpoint-500: 1440px;
281
- --breakpoint-600: 1920px;
282
- --container-100: 192px;
283
- --container-200: 384px;
284
- --container-300: 576px;
285
- --container-400: 768px;
286
- --container-500: 960px;
287
- --container-600: 1152px;
288
- --layout-base-grid: .25rem;
289
- --layout-columns: 12;
290
- --layout-gutter: 1rem;
291
- --layout-max-width: 1236px;
292
- --layout-column-max-width: 412px;
293
- --layout-float-breakpoint: 1220px;
294
- --size-border-100: .0625rem;
295
- --size-border-200: .125rem;
296
- --size-border-300: .1875rem;
297
- --size-border-000: 0;
298
- --zindex-hidden: -1;
299
- --zindex-base: 0;
300
- --zindex-raised: 1;
301
- --zindex-dropdown-base: 900;
302
- --zindex-dropdown: 1000;
303
- --zindex-sticky: 1020;
304
- --zindex-fixed: 1030;
305
- --zindex-modal-overlay: 1040;
306
- --zindex-modal: 1050;
307
- --zindex-popover: 1060;
308
- --zindex-tooltip: 1070;
309
- }
310
- /* Auto-generated design tokens from Figma */
311
- /* Generated on 2026-03-04T21:56:02.552Z */
312
-
313
- :root[data-brand="a"] {
314
- --brand-color-primary: var(--color-brand-a-purple-600);
315
- --brand-color-primary-dark: var(--color-brand-a-purple-800);
316
- --brand-color-accent: var(--color-brand-a-blue-500);
317
- --brand-color-subtle: var(--color-neutral-500);
318
- --brand-color-subtle-light: var(--color-neutral-200);
319
- --brand-color-subtle-dark: var(--color-neutral-800);
320
- --brand-color-accent-dark: var(--color-brand-a-blue-700);
321
- --brand-color-functional-base: var(--color-brand-a-blue-700);
322
- --brand-color-functional-base-dark: var(--color-brand-a-blue-800);
323
- --brand-color-functional-success: var(--color-brand-a-green);
324
- --brand-color-functional-danger: var(--color-brand-a-red);
325
- --brand-font-lead: var(--font-family-serif);
326
- --brand-font-base: var(--font-family-sans);
327
- --brand-corner-button: var(--size-radius-full);
328
- --brand-corner-input: var(--size-radius-200);
329
- --brand-corner-card: var(--size-radius-200);
330
- --brand-corner-modal: var(--size-radius-400);
331
- }
332
- /* Auto-generated design tokens from Figma */
333
- /* Generated on 2026-03-04T21:56:02.554Z */
334
-
335
- :root[data-brand="b"] {
336
- --brand-color-primary: var(--color-brand-b-blue-500);
337
- --brand-color-primary-dark: var(--color-brand-b-blue-700);
338
- --brand-color-accent: var(--color-brand-b-purple-600);
339
- --brand-color-subtle: var(--color-neutral-500);
340
- --brand-color-subtle-light: var(--color-neutral-200);
341
- --brand-color-subtle-dark: var(--color-neutral-800);
342
- --brand-color-accent-dark: var(--color-brand-b-purple-800);
343
- --brand-color-functional-base: var(--color-brand-b-purple-600);
344
- --brand-color-functional-base-dark: var(--color-brand-b-purple-800);
345
- --brand-color-functional-success: var(--color-brand-b-green);
346
- --brand-color-functional-danger: var(--color-brand-b-red);
347
- --brand-font-lead: var(--font-family-serif);
348
- --brand-font-base: var(--font-family-sans);
349
- --brand-corner-button: var(--size-radius-000);
350
- --brand-corner-input: var(--size-radius-000);
351
- --brand-corner-card: var(--size-radius-100);
352
- --brand-corner-modal: var(--size-radius-200);
353
- }
354
- /* Auto-generated design tokens from Figma */
355
- /* Generated on 2026-03-04T21:56:02.563Z */
356
-
357
- :root {
358
- --typography-code: var(--font-family-mono);
359
187
  --typography-heading-font-family: var(--brand-font-lead);
360
- --typography-heading-font-weight: var(--font-weight-700);
188
+ --typography-heading-font-size-md: var(--font-size-md);
361
189
  --typography-heading-font-size-xs: var(--font-size-xs);
362
190
  --typography-heading-font-size-sm: var(--font-size-sm);
363
- --typography-heading-font-size-md: var(--font-size-md);
364
191
  --typography-heading-font-size-lg: var(--font-size-lg);
365
192
  --typography-heading-font-size-xl: var(--font-size-xl);
366
193
  --typography-heading-font-size-xxl: var(--font-size-xxl);
367
194
  --typography-heading-font-size-xxxl: var(--font-size-xxxl);
195
+ --typography-heading-font-weight: var(--font-weight-700);
196
+ --typography-heading-line-height-md: var(--line-height-md);
368
197
  --typography-heading-line-height-xs: var(--line-height-xs);
369
198
  --typography-heading-line-height-sm: var(--line-height-sm);
370
- --typography-heading-line-height-md: var(--line-height-md);
371
199
  --typography-heading-line-height-lg: var(--line-height-lg);
372
200
  --typography-heading-line-height-xl: var(--line-height-xl);
373
201
  --typography-heading-line-height-xxl: var(--line-height-xxl);
374
202
  --typography-heading-line-height-xxxl: var(--line-height-xxxl);
203
+ --typography-code: var(--font-family-mono);
375
204
  --typography-label-font-family: var(--brand-font-lead);
376
205
  --typography-label-font-weight: var(--font-weight-600);
377
206
  --typography-label-font-size: var(--font-size-md);
@@ -383,67 +212,85 @@
383
212
  --typography-body-line-height: var(--line-height-md);
384
213
  --corner-button-radius: var(--brand-corner-button);
385
214
  --corner-card-radius: var(--brand-corner-card);
386
- --corner-form-radius: var(--brand-corner-card);
387
215
  --corner-modal-radius: var(--brand-corner-modal);
216
+ --corner-form-radius: var(--brand-corner-card);
217
+ --corner-checkbox-radius: var(--brand-corner-input);
388
218
  }
389
219
  /* Auto-generated design tokens from Figma */
390
- /* Generated on 2026-03-04T21:56:02.558Z */
220
+ /* Generated on 2026-03-31T20:27:09.724Z */
391
221
 
392
222
  :root {
393
- --button-font-family: var(--brand-font-lead);
394
- --button-font-weight: var(--typography-label-font-weight);
395
- --button-font-size: var(--typography-label-font-size);
396
- --button-line-height: var(--typography-label-line-height);
397
- --button-border-size-default: var(--size-border-000);
398
223
  --button-border-size-hover: var(--size-border-100);
399
- --button-border-size-active: var(--size-border-200);
400
- --button-border-radius: var(--brand-corner-button);
401
- --button-padding-inline: var(--size-spacing-400);
402
- --button-padding-inline-icon-only: var(--size-spacing-200);
403
- --button-padding-block: var(--size-spacing-200);
404
- --button-gap: var(--size-spacing-200);
405
- --button-text-color-disabled: var(--color-text-disabled);
406
- --button-border-color-disabled: var(--color-border-disabled);
407
- --button-container-background-disabled: var(--color-fill-disabled);
408
- --button-overlay-hover: var(--color-overlay-hover);
409
- --button-overlay-active: var(--color-overlay-active);
410
- --button-height: 2.5rem;
411
- --button-solid-text-color-default: var(--color-text-inverse);
412
- --button-solid-text-color-hover: var(--color-text-inverse);
413
- --button-solid-text-color-active: var(--color-text-inverse);
414
224
  --button-solid-border-color-default: var(--color-border-brand);
415
225
  --button-solid-border-color-hover: var(--color-border-brand);
416
- --button-solid-border-color-focus: var(--color-border-brand);
417
226
  --button-solid-border-color-active: var(--color-border-brand);
227
+ --button-solid-border-color-focus: var(--color-border-brand);
228
+ --button-solid-text-color-default: var(--color-text-inverse);
418
229
  --button-solid-container-background-default: var(--color-fill-brand);
419
230
  --button-solid-container-background-hover: var(--color-fill-brand);
420
- --button-solid-container-background-focus: var(--color-fill-brand);
421
231
  --button-solid-container-background-active: var(--color-fill-brand);
422
- --button-outline-text-color-default: var(--color-text-brand);
423
- --button-outline-text-color-hover: var(--color-text-brand);
424
- --button-outline-text-color-active: var(--color-text-brand);
232
+ --button-solid-container-background-focus: var(--color-fill-brand);
233
+ --button-solid-text-color-hover: var(--color-text-inverse);
234
+ --button-solid-text-color-active: var(--color-text-inverse);
425
235
  --button-outline-border-color-default: var(--color-border-brand);
426
236
  --button-outline-border-color-hover: var(--color-border-brand);
427
237
  --button-outline-border-color-active: var(--color-border-brand);
428
238
  --button-outline-border-color-focus: var(--color-border-brand);
239
+ --button-outline-text-color-default: var(--color-text-brand);
429
240
  --button-outline-container-background-default: var(--color-fill-surface);
241
+ --button-outline-container-background-active: var(--color-fill-surface);
430
242
  --button-outline-container-background-hover: var(--color-fill-surface);
431
243
  --button-outline-container-background-focus: var(--color-fill-surface);
432
- --button-outline-container-background-active: var(--color-fill-surface);
433
- --button-ghost-text-color-default: var(--color-text-brand);
434
- --button-ghost-text-color-hover: var(--color-text-brand);
435
- --button-ghost-text-color-active: var(--color-text-brand);
436
- --button-ghost-border-color-default: var(--color-transparent);
437
- --button-ghost-border-color-hover: var(--color-transparent);
438
- --button-ghost-border-color-focus: var(--color-transparent);
439
- --button-ghost-border-color-active: var(--color-transparent);
244
+ --button-outline-text-color-hover: var(--color-text-brand);
245
+ --button-outline-text-color-active: var(--color-text-brand);
440
246
  --button-ghost-container-background-default: var(--color-fill-surface);
441
247
  --button-ghost-container-background-hover: var(--color-fill-surface);
442
248
  --button-ghost-container-background-focus: var(--color-fill-surface);
443
249
  --button-ghost-container-background-active: var(--color-fill-surface);
250
+ --button-ghost-border-color-default: var(--color-transparent);
251
+ --button-ghost-border-color-hover: var(--color-transparent);
252
+ --button-ghost-border-color-focus: var(--color-transparent);
253
+ --button-ghost-border-color-active: var(--color-transparent);
254
+ --button-ghost-text-color-default: var(--color-text-brand);
255
+ --button-ghost-text-color-hover: var(--color-text-brand);
256
+ --button-ghost-text-color-active: var(--color-text-brand);
257
+ --button-border-size-default: var(--size-border-100);
258
+ --button-font-family: var(--brand-font-lead);
259
+ --button-line-height: var(--typography-label-line-height);
260
+ --button-border-radius: var(--brand-corner-button);
261
+ --button-font-weight: var(--typography-label-font-weight);
262
+ --button-font-size: var(--typography-label-font-size);
263
+ --button-padding-inline: var(--size-spacing-400);
264
+ --button-gap: var(--size-spacing-200);
265
+ --button-padding-block: var(--size-spacing-200);
266
+ --button-container-background-disabled: var(--color-fill-disabled);
267
+ --button-border-color-disabled: var(--color-border-disabled);
268
+ --button-text-color-disabled: var(--color-text-disabled);
269
+ --button-border-size-active: var(--size-border-200);
270
+ --button-overlay-hover: var(--color-overlay-hover);
271
+ --button-overlay-active: var(--color-overlay-active);
272
+ --button-padding-inline-icon-only: var(--size-spacing-200);
273
+ --button-height-min: 2.5rem;
274
+ --button-group-gap: var(--size-spacing-200);
275
+ --button-width-min: 2.5rem;
444
276
  --modal-backdrop-color: var(--color-overlay-backdrop);
445
277
  --modal-surface-color: var(--color-fill-surface);
446
278
  --modal-surface-border-radius: var(--brand-corner-modal);
279
+ --input-text-text-color-default: var(--color-text-default);
280
+ --input-text-text-color-hover: var(--color-text-default);
281
+ --input-text-text-color-active: var(--color-text-default);
282
+ --input-text-border-color-default: var(--color-border-default);
283
+ --input-text-border-color-hover: var(--color-border-brand);
284
+ --input-text-border-color-active: var(--color-border-brand);
285
+ --input-text-border-color-focus: var(--color-border-brand);
286
+ --input-text-border-color-invalid: var(--color-border-danger);
287
+ --input-text-border-color-valid: var(--color-border-strong);
288
+ --input-text-container-background-default: var(--color-fill-surface);
289
+ --input-text-container-background-hover: var(--color-fill-surface);
290
+ --input-text-container-background-focus: var(--color-fill-surface);
291
+ --input-text-container-background-active: var(--color-fill-surface);
292
+ --input-text-text-color-placeholder: var(--color-text-subtle);
293
+ --input-text-height-min: 2.5rem;
447
294
  --input-font-family: var(--brand-font-base);
448
295
  --input-font-weight: var(--typography-body-font-weight);
449
296
  --input-font-size: var(--typography-label-font-size);
@@ -462,96 +309,266 @@
462
309
  --input-overlay-hover: var(--color-transparent);
463
310
  --input-overlay-active: var(--color-transparent);
464
311
  --input-height: 2.5rem;
465
- --input-text-text-color-placeholder: var(--color-text-subtle);
466
- --input-text-text-color-default: var(--color-text-default);
467
- --input-text-text-color-hover: var(--color-text-default);
468
- --input-text-text-color-active: var(--color-text-default);
469
- --input-text-border-color-default: var(--color-border-default);
470
- --input-text-border-color-hover: var(--color-border-brand);
471
- --input-text-border-color-active: var(--color-border-brand);
472
- --input-text-border-color-focus: var(--color-border-brand);
473
- --input-text-border-color-invalid: var(--color-border-danger);
474
- --input-text-border-color-valid: var(--color-border-strong);
475
- --input-text-container-background-default: var(--color-fill-surface);
476
- --input-text-container-background-hover: var(--color-fill-surface);
477
- --input-text-container-background-focus: var(--color-fill-surface);
478
- --input-text-container-background-active: var(--color-fill-surface);
479
- --form-gap: var(--size-spacing-400);
312
+ --input-checkbox-text-color-default: var(--color-text-default);
313
+ --input-checkbox-text-color-hover: var(--color-text-default);
314
+ --input-checkbox-text-color-active: var(--color-text-inverse);
315
+ --input-checkbox-border-color-default: var(--color-border-subtle);
316
+ --input-checkbox-border-color-hover: var(--color-border-brand);
317
+ --input-checkbox-border-color-active: var(--color-border-brand);
318
+ --input-checkbox-border-color-focus: var(--color-border-brand);
319
+ --input-checkbox-border-color-invalid: var(--color-border-danger);
320
+ --input-checkbox-border-color-valid: var(--color-border-strong);
321
+ --input-checkbox-container-background-default: var(--color-fill-surface);
322
+ --input-checkbox-container-background-hover: var(--color-fill-surface);
323
+ --input-checkbox-container-background-focus: var(--color-fill-surface);
324
+ --input-checkbox-container-background-active: var(--color-fill-brand);
325
+ --form-group-gap: var(--size-spacing-400);
326
+ --form-group-title-color: var(--color-text-default);
480
327
  --form-padding-inline: var(--size-spacing-400);
481
328
  --form-padding-block: var(--size-spacing-400);
482
329
  --form-border-radius: var(--brand-corner-card);
483
- --form-border-size: var(--size-border-100);
484
- --form-container-background: var(--color-fill-surface);
485
- --form-container-border-color: var(--color-border-subtle);
486
- --form-group-gap: var(--size-spacing-400);
487
- --form-group-title-color: var(--color-text-default);
330
+ --form-gap: var(--size-spacing-400);
488
331
  --form-field-gap: var(--size-spacing-200);
489
332
  --form-field-helper-text-color-default: var(--color-text-subtle);
490
333
  --form-field-helper-text-color-invalid: var(--color-text-danger);
334
+ --form-container-background: var(--color-fill-surface);
335
+ --form-container-border-color: var(--color-border-subtle);
336
+ --form-border-size: var(--size-border-100);
337
+ }
338
+ /* Auto-generated design tokens from Figma */
339
+ /* Generated on 2026-03-31T20:27:09.721Z */
340
+
341
+ :root[data-mode="dark"] {
342
+ --color-text-default: var(--color-neutral-800);
343
+ --color-text-inverse: var(--color-neutral-1000);
344
+ --color-text-disabled: var(--color-neutral-600);
345
+ --color-text-brand: var(--brand-color-primary-dark);
346
+ --color-text-subtle: var(--brand-color-subtle-dark);
347
+ --color-text-strong: var(--color-neutral-1000);
348
+ --color-text-danger: var(--brand-color-functional-danger);
349
+ --color-text-success: var(--brand-color-functional-success);
350
+ --color-fill-surface: var(--color-neutral-1000);
351
+ --color-fill-disabled: var(--color-neutral-300);
352
+ --color-fill-hover: var(--color-neutral-alpha-500);
353
+ --color-fill-brand: var(--brand-color-primary);
354
+ --color-fill-subtle: var(--brand-color-subtle);
355
+ --color-fill-active: var(--brand-color-accent);
356
+ --color-fill-danger: var(--brand-color-functional-danger);
357
+ --color-fill-success: var(--brand-color-functional-success);
358
+ --color-border-default: var(--color-neutral-800);
359
+ --color-border-subtle: var(--brand-color-subtle-dark);
360
+ --color-border-strong: var(--color-neutral-1000);
361
+ --color-border-brand: var(--brand-color-primary);
362
+ --color-border-disabled: var(--color-neutral-500);
363
+ --color-border-danger: var(--brand-color-functional-danger);
364
+ --color-overlay-backdrop: var(--color-neutral-alpha-400);
365
+ --color-overlay-hover: var(--color-neutral-alpha-200);
366
+ --color-overlay-active: var(--color-neutral-alpha-400);
367
+ --color-overlay-selected: var(--color-neutral-alpha-600);
368
+ --color-focus: var(--brand-color-primary-dark);
369
+ }
370
+ /* Auto-generated design tokens from Figma */
371
+ /* Generated on 2026-03-31T20:27:09.718Z */
372
+
373
+ :root {
374
+ --color-text-default: var(--color-neutral-800);
375
+ --color-text-inverse: var(--color-neutral-000);
376
+ --color-text-disabled: var(--color-neutral-600);
377
+ --color-text-brand: var(--brand-color-primary);
378
+ --color-text-subtle: var(--brand-color-subtle);
379
+ --color-text-strong: var(--color-neutral-1000);
380
+ --color-text-danger: var(--brand-color-functional-danger);
381
+ --color-text-success: var(--brand-color-functional-success);
382
+ --color-fill-surface: var(--color-neutral-000);
383
+ --color-fill-disabled: var(--color-neutral-300);
384
+ --color-fill-hover: var(--color-neutral-alpha-500);
385
+ --color-fill-brand: var(--brand-color-primary);
386
+ --color-fill-subtle: var(--brand-color-subtle-light);
387
+ --color-fill-active: var(--brand-color-accent);
388
+ --color-fill-danger: var(--brand-color-functional-danger);
389
+ --color-fill-success: var(--brand-color-functional-success);
390
+ --color-border-default: var(--color-neutral-800);
391
+ --color-border-subtle: var(--brand-color-subtle);
392
+ --color-border-strong: var(--color-neutral-1000);
393
+ --color-border-brand: var(--brand-color-primary);
394
+ --color-border-disabled: var(--color-neutral-500);
395
+ --color-border-danger: rgb(255 0 0);
396
+ --color-overlay-backdrop: var(--color-neutral-alpha-400);
397
+ --color-overlay-hover: var(--color-neutral-alpha-200);
398
+ --color-overlay-active: var(--color-neutral-alpha-400);
399
+ --color-overlay-selected: var(--color-neutral-alpha-600);
400
+ --color-focus: var(--brand-color-primary);
401
+ }
402
+ /* Auto-generated design tokens from Figma */
403
+ /* Generated on 2026-03-31T20:27:09.731Z */
404
+
405
+ :root {
406
+ --color-neutral-100: rgb(230 230 230);
407
+ --color-neutral-200: rgb(204 204 204);
408
+ --color-neutral-300: rgb(179 179 179);
409
+ --color-neutral-400: rgb(128 128 128);
410
+ --color-neutral-500: rgb(128 128 128);
411
+ --color-neutral-600: rgb(102 102 102);
412
+ --color-neutral-700: rgb(77 77 77);
413
+ --color-neutral-800: rgb(51 51 51);
414
+ --color-neutral-900: rgb(26 26 26);
415
+ --color-neutral-1000: rgb(0 0 0);
416
+ --color-neutral-alpha-100: rgba(0 0 0 / 0.1);
417
+ --color-neutral-alpha-200: rgba(0 0 0 / 0.2);
418
+ --color-neutral-alpha-300: rgba(0 0 0 / 0.3);
419
+ --color-neutral-alpha-400: rgba(0 0 0 / 0.4);
420
+ --color-neutral-alpha-500: rgba(0 0 0 / 0.5);
421
+ --color-neutral-alpha-600: rgba(0 0 0 / 0.6);
422
+ --color-neutral-alpha-700: rgba(0 0 0 / 0.7);
423
+ --color-neutral-alpha-800: rgba(0 0 0 / 0.8);
424
+ --color-neutral-alpha-900: rgba(0 0 0 / 0.9);
425
+ --color-neutral-alpha-000: rgba(0 0 0 / 0);
426
+ --color-neutral-000: rgb(255 255 255);
427
+ --color-brand-a-purple-200: rgb(222 192 255);
428
+ --color-brand-a-purple-600: rgb(151 71 255);
429
+ --color-brand-a-purple-800: rgb(85 26 139);
430
+ --color-brand-a-blue-200: rgb(226 244 253);
431
+ --color-brand-a-blue-500: rgb(112 203 244);
432
+ --color-brand-a-blue-700: rgb(12 75 243);
433
+ --color-brand-a-blue-800: rgb(27 17 92);
434
+ --color-brand-a-green: rgb(19 174 92);
435
+ --color-brand-a-red: rgb(255 0 0);
436
+ --color-brand-b-purple-200: rgb(196 143 255);
437
+ --color-brand-b-purple-600: rgb(122 20 255);
438
+ --color-brand-b-purple-800: rgb(58 18 95);
439
+ --color-brand-b-blue-200: rgb(179 226 250);
440
+ --color-brand-b-blue-500: rgb(66 186 240);
441
+ --color-brand-b-blue-700: rgb(10 60 194);
442
+ --color-brand-b-blue-800: rgb(14 9 47);
443
+ --color-brand-b-red: rgb(204 0 0);
444
+ --color-brand-b-green: rgb(14 129 68);
445
+ --color-transparent: rgba(0 0 0 / 0);
446
+ --font-size-md: 1rem;
447
+ --font-size-xs: .75rem;
448
+ --font-size-sm: .875rem;
449
+ --font-size-lg: 1.25rem;
450
+ --font-size-xl: 1.5rem;
451
+ --font-size-xxl: 2rem;
452
+ --font-size-xxxl: 2.5rem;
453
+ --font-weight-100: 100;
454
+ --font-weight-200: 200;
455
+ --font-weight-300: 300;
456
+ --font-weight-400: 400;
457
+ --font-weight-500: 500;
458
+ --font-weight-600: 600;
459
+ --font-weight-700: 700;
460
+ --font-weight-800: 800;
461
+ --font-weight-900: 900;
462
+ --font-family-sans: Inter;
463
+ --font-family-serif: Rokkitt;
464
+ --font-family-mono: SFMono-Regular;
465
+ --line-height-xs: 1rem;
466
+ --line-height-sm: 1.25rem;
467
+ --line-height-md: 1.5rem;
468
+ --line-height-lg: 1.75rem;
469
+ --line-height-xl: 2rem;
470
+ --line-height-xxl: 2.75rem;
471
+ --line-height-xxxl: 3.5rem;
472
+ --size-spacing-100: .25rem;
473
+ --size-spacing-200: .5rem;
474
+ --size-spacing-300: .75rem;
475
+ --size-spacing-400: 1rem;
476
+ --size-spacing-500: 1.25rem;
477
+ --size-spacing-600: 1.5rem;
478
+ --size-spacing-700: 2rem;
479
+ --size-spacing-800: 2.5rem;
480
+ --size-spacing-900: 3rem;
481
+ --size-spacing-1000: 4rem;
482
+ --size-spacing-000: 0;
483
+ --size-radius-100: .125rem;
484
+ --size-radius-200: .25rem;
485
+ --size-radius-300: .375rem;
486
+ --size-radius-400: .5rem;
487
+ --size-radius-500: .75rem;
488
+ --size-radius-600: 1rem;
489
+ --size-radius-700: 1.25rem;
490
+ --size-radius-800: 1.5rem;
491
+ --size-radius-900: 2rem;
492
+ --size-radius-000: 0;
493
+ --size-radius-full: 625rem;
494
+ --shadow-focus: .5rem;
495
+ --breakpoint-100: 580px;
496
+ --breakpoint-200: 760px;
497
+ --breakpoint-300: 960px;
498
+ --breakpoint-400: 1200px;
499
+ --breakpoint-500: 1440px;
500
+ --breakpoint-600: 1920px;
501
+ --container-100: 192px;
502
+ --container-200: 384px;
503
+ --container-300: 576px;
504
+ --container-400: 768px;
505
+ --container-500: 960px;
506
+ --container-600: 1152px;
507
+ --size-border-100: .0625rem;
508
+ --size-border-200: .125rem;
509
+ --size-border-300: .1875rem;
510
+ --size-border-000: 0;
511
+ --layout-columns: 12;
512
+ --layout-gutter: 1rem;
513
+ --layout-max-width: 1236px;
514
+ --layout-column-max-width: 412px;
515
+ --layout-float-breakpoint: 1220px;
516
+ --layout-base-grid: .25rem;
517
+ --zindex-fixed: 1030;
518
+ --zindex-sticky: 1020;
519
+ --zindex-dropdown: 1000;
520
+ --zindex-dropdown-base: 900;
521
+ --zindex-modal: 1050;
522
+ --zindex-base: 0;
523
+ --zindex-tooltip: 1070;
524
+ --zindex-raised: 1;
525
+ --zindex-popover: 1060;
526
+ --zindex-modal-overlay: 1040;
527
+ --zindex-hidden: -1;
491
528
  }
492
529
  /* Auto-generated design tokens from Figma */
493
- /* Generated on 2026-03-04T21:56:02.560Z */
530
+ /* Generated on 2026-03-31T20:27:09.734Z */
494
531
 
495
- :root {
496
- --color-focus: var(--brand-color-primary);
497
- --color-text-default: var(--color-neutral-800);
498
- --color-text-inverse: var(--color-neutral-000);
499
- --color-text-disabled: var(--color-neutral-600);
500
- --color-text-brand: var(--brand-color-primary);
501
- --color-text-subtle: var(--brand-color-subtle);
502
- --color-text-strong: var(--color-neutral-1000);
503
- --color-text-danger: var(--brand-color-functional-danger);
504
- --color-text-success: var(--brand-color-functional-success);
505
- --color-fill-surface: var(--color-neutral-000);
506
- --color-fill-disabled: var(--color-neutral-300);
507
- --color-fill-hover: var(--color-neutral-alpha-500);
508
- --color-fill-brand: var(--brand-color-primary);
509
- --color-fill-subtle: var(--brand-color-subtle-light);
510
- --color-fill-active: var(--brand-color-accent);
511
- --color-fill-danger: var(--brand-color-functional-danger);
512
- --color-fill-success: var(--brand-color-functional-success);
513
- --color-border-default: var(--color-neutral-800);
514
- --color-border-subtle: var(--brand-color-subtle);
515
- --color-border-strong: var(--color-neutral-1000);
516
- --color-border-brand: var(--brand-color-primary);
517
- --color-border-disabled: var(--color-neutral-500);
518
- --color-border-danger: var(--brand-color-functional-danger);
519
- --color-overlay-backdrop: var(--color-neutral-alpha-400);
520
- --color-overlay-hover: var(--color-neutral-alpha-200);
521
- --color-overlay-active: var(--color-neutral-alpha-400);
522
- --color-overlay-selected: var(--color-neutral-alpha-600);
532
+ :root[data-brand="a"] {
533
+ --brand-color-functional-success: var(--color-brand-a-green);
534
+ --brand-color-functional-danger: var(--color-brand-a-red);
535
+ --brand-color-functional-base: var(--color-brand-a-blue-700);
536
+ --brand-color-functional-base-dark: var(--color-brand-a-blue-800);
537
+ --brand-color-primary: var(--color-brand-a-purple-600);
538
+ --brand-color-accent: var(--color-brand-a-blue-500);
539
+ --brand-color-primary-dark: var(--color-brand-a-purple-800);
540
+ --brand-color-accent-dark: var(--color-brand-a-blue-700);
541
+ --brand-color-subtle: var(--color-neutral-500);
542
+ --brand-color-subtle-dark: var(--color-neutral-800);
543
+ --brand-color-subtle-light: var(--color-neutral-200);
544
+ --brand-font-base: var(--font-family-sans);
545
+ --brand-font-lead: var(--font-family-serif);
546
+ --brand-corner-button: var(--size-radius-700);
547
+ --brand-corner-card: var(--size-radius-200);
548
+ --brand-corner-modal: var(--size-radius-400);
549
+ --brand-corner-input: var(--size-radius-200);
523
550
  }
524
551
  /* Auto-generated design tokens from Figma */
525
- /* Generated on 2026-03-04T21:56:02.559Z */
552
+ /* Generated on 2026-03-31T20:27:09.734Z */
526
553
 
527
- :root[data-mode="dark"] {
528
- --color-focus: var(--brand-color-primary-dark);
529
- --color-text-default: var(--color-neutral-800);
530
- --color-text-inverse: var(--color-neutral-1000);
531
- --color-text-disabled: var(--color-neutral-600);
532
- --color-text-brand: var(--brand-color-primary-dark);
533
- --color-text-subtle: var(--brand-color-subtle-dark);
534
- --color-text-strong: var(--color-neutral-1000);
535
- --color-text-danger: var(--brand-color-functional-danger);
536
- --color-text-success: var(--brand-color-functional-success);
537
- --color-fill-surface: var(--color-neutral-1000);
538
- --color-fill-disabled: var(--color-neutral-300);
539
- --color-fill-hover: var(--color-neutral-alpha-500);
540
- --color-fill-brand: var(--brand-color-primary);
541
- --color-fill-subtle: var(--brand-color-subtle);
542
- --color-fill-active: var(--brand-color-accent);
543
- --color-fill-danger: var(--brand-color-functional-danger);
544
- --color-fill-success: var(--brand-color-functional-success);
545
- --color-border-default: var(--color-neutral-800);
546
- --color-border-subtle: var(--brand-color-subtle-dark);
547
- --color-border-strong: var(--color-neutral-1000);
548
- --color-border-brand: var(--brand-color-primary);
549
- --color-border-disabled: var(--color-neutral-500);
550
- --color-border-danger: var(--brand-color-functional-danger);
551
- --color-overlay-backdrop: var(--color-neutral-alpha-400);
552
- --color-overlay-hover: var(--color-neutral-alpha-200);
553
- --color-overlay-active: var(--color-neutral-alpha-400);
554
- --color-overlay-selected: var(--color-neutral-alpha-600);
554
+ :root[data-brand="b"] {
555
+ --brand-color-functional-success: var(--color-brand-b-green);
556
+ --brand-color-functional-danger: var(--color-brand-b-red);
557
+ --brand-color-functional-base: var(--color-brand-b-purple-600);
558
+ --brand-color-functional-base-dark: var(--color-brand-b-purple-800);
559
+ --brand-color-primary: var(--color-brand-b-blue-500);
560
+ --brand-color-accent: var(--color-brand-b-purple-600);
561
+ --brand-color-primary-dark: var(--color-brand-b-blue-700);
562
+ --brand-color-accent-dark: var(--color-brand-b-purple-800);
563
+ --brand-color-subtle: var(--color-neutral-500);
564
+ --brand-color-subtle-dark: var(--color-neutral-800);
565
+ --brand-color-subtle-light: var(--color-neutral-200);
566
+ --brand-font-base: var(--font-family-sans);
567
+ --brand-font-lead: var(--font-family-serif);
568
+ --brand-corner-button: var(--size-radius-000);
569
+ --brand-corner-card: var(--size-radius-100);
570
+ --brand-corner-modal: var(--size-radius-200);
571
+ --brand-corner-input: var(--size-radius-000);
555
572
  }
556
573
  @layer themes {
557
574
  :root {
@@ -616,6 +633,7 @@
616
633
  align-items: center;
617
634
  justify-content: center;
618
635
  white-space: nowrap;
636
+ min-height: var(--button-height-min);
619
637
  background: var(--button-solid-container-background-default);
620
638
  border-color: var(--button-solid-border-color-default);
621
639
  border-width: var(--button-solid-border-size);
@@ -1042,3 +1060,158 @@
1042
1060
  cursor: not-allowed;
1043
1061
  }
1044
1062
  }
1063
+ @layer components {
1064
+ .switch-field {
1065
+ display: inline-flex;
1066
+ align-items: center;
1067
+ gap: var(--typography-label-gap);
1068
+ font-family: var(--typography-label-font-family);
1069
+ font-weight: var(--typography-label-font-weight);
1070
+ font-size: var(--typography-label-font-size);
1071
+ line-height: var(--typography-label-line-height);
1072
+ color: var(--color-text-default);
1073
+ cursor: pointer;
1074
+ }
1075
+
1076
+ .switch-field.is-disabled {
1077
+ color: var(--color-text-disabled);
1078
+ cursor: not-allowed;
1079
+ }
1080
+
1081
+ .switch {
1082
+ --_switch-inline-size: var(--size-spacing-1000);
1083
+ --_switch-block-size: var(--size-spacing-600);
1084
+ --_switch-padding: var(--size-spacing-100);
1085
+ --_switch-thumb-size: calc(
1086
+ var(--_switch-block-size) - (var(--_switch-padding) * 2)
1087
+ );
1088
+ inline-size: var(--_switch-inline-size);
1089
+ block-size: var(--_switch-block-size);
1090
+ box-sizing: border-box;
1091
+ margin: 0;
1092
+ appearance: none;
1093
+ position: relative;
1094
+ flex: 0 0 auto;
1095
+ border-style: solid;
1096
+ border-width: var(--size-border-100);
1097
+ border-color: var(--color-border-default);
1098
+ border-radius: var(--size-radius-full);
1099
+ background: var(--color-fill-surface);
1100
+ cursor: pointer;
1101
+ transition:
1102
+ background-color 160ms ease,
1103
+ border-color 160ms ease,
1104
+ opacity 160ms ease;
1105
+ }
1106
+
1107
+ .switch::after {
1108
+ content: "";
1109
+ position: absolute;
1110
+ inset-block-start: 50%;
1111
+ inset-inline-start: var(--_switch-padding);
1112
+ inline-size: var(--_switch-thumb-size);
1113
+ block-size: var(--_switch-thumb-size);
1114
+ box-sizing: border-box;
1115
+ border-radius: var(--size-radius-full);
1116
+ background: var(--color-border-default);
1117
+ transform: translate(0, -50%);
1118
+ transition:
1119
+ transform 160ms ease,
1120
+ background-color 160ms ease;
1121
+ }
1122
+
1123
+ .switch:checked,
1124
+ .switch.is-checked {
1125
+ border-color: var(--color-border-brand);
1126
+ background: var(--color-fill-brand);
1127
+ }
1128
+
1129
+ .switch:checked::after,
1130
+ .switch.is-checked::after {
1131
+ background: var(--color-fill-surface);
1132
+ transform: translate(
1133
+ calc(var(--_switch-inline-size) - var(--_switch-block-size)),
1134
+ -50%
1135
+ );
1136
+ }
1137
+
1138
+ .switch:hover,
1139
+ .switch.is-hover {
1140
+ background:
1141
+ linear-gradient(0deg, var(--color-overlay-hover), var(--color-overlay-hover)),
1142
+ var(--color-fill-surface);
1143
+ border-color: var(--color-border-brand);
1144
+ }
1145
+
1146
+ .switch:hover::after,
1147
+ .switch.is-hover::after {
1148
+ background: var(--color-border-brand);
1149
+ }
1150
+
1151
+ .switch:checked:hover,
1152
+ .switch.is-checked.is-hover {
1153
+ background:
1154
+ linear-gradient(0deg, var(--color-overlay-hover), var(--color-overlay-hover)),
1155
+ var(--color-fill-brand);
1156
+ }
1157
+
1158
+ .switch:checked:hover::after,
1159
+ .switch.is-checked.is-hover::after {
1160
+ background: var(--color-fill-surface);
1161
+ }
1162
+
1163
+ .switch:active,
1164
+ .switch.is-active {
1165
+ background:
1166
+ linear-gradient(0deg, var(--color-overlay-active), var(--color-overlay-active)),
1167
+ var(--color-fill-surface);
1168
+ border-color: var(--color-border-brand);
1169
+ }
1170
+
1171
+ .switch:active::after,
1172
+ .switch.is-active::after {
1173
+ background: var(--color-border-brand);
1174
+ }
1175
+
1176
+ .switch:checked:active,
1177
+ .switch.is-checked.is-active {
1178
+ background:
1179
+ linear-gradient(0deg, var(--color-overlay-active), var(--color-overlay-active)),
1180
+ var(--color-fill-brand);
1181
+ }
1182
+
1183
+ .switch:checked:active::after,
1184
+ .switch.is-checked.is-active::after {
1185
+ background: var(--color-fill-surface);
1186
+ }
1187
+
1188
+ .switch:focus-visible,
1189
+ .switch.is-focus-visible {
1190
+ border-color: var(--color-border-brand);
1191
+ outline: none;
1192
+ box-shadow: 0 0 0 var(--shadow-focus, 0) var(--color-focus, transparent);
1193
+ }
1194
+
1195
+ .switch:disabled,
1196
+ .switch.is-disabled {
1197
+ cursor: not-allowed;
1198
+ opacity: 0.6;
1199
+ }
1200
+
1201
+ .switch:disabled:not(:checked),
1202
+ .switch.is-disabled:not(.is-checked) {
1203
+ border-color: var(--color-border-disabled);
1204
+ background: var(--color-fill-disabled);
1205
+ }
1206
+
1207
+ .switch:disabled::after,
1208
+ .switch.is-disabled::after {
1209
+ background: var(--color-fill-surface);
1210
+ }
1211
+
1212
+ .switch:checked:disabled,
1213
+ .switch.is-checked.is-disabled {
1214
+ border-color: var(--color-border-disabled);
1215
+ background: var(--color-fill-brand);
1216
+ }
1217
+ }