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/tokens/ts/{color.dark.tokens.ts → appearance-(modes).tokens.mode-dark.ts} RENAMED
@@ -1,9 +1,8 @@
1
1
  // Auto-generated design tokens from Figma
2
- // Generated on 2026-03-04T21:56:02.559Z
2
+ // Generated on 2026-03-31T20:27:09.721Z
3
3
 
4
4
  export const tokens = {
5
5
  "colors": {
6
- "--color-focus": "var(--brand-color-primary-dark)",
7
6
  "--color-text-default": "var(--color-neutral-800)",
8
7
  "--color-text-inverse": "var(--color-neutral-1000)",
9
8
  "--color-text-disabled": "var(--color-neutral-600)",
@@ -29,7 +28,8 @@ export const tokens = {
29
28
  "--color-overlay-backdrop": "var(--color-neutral-alpha-400)",
30
29
  "--color-overlay-hover": "var(--color-neutral-alpha-200)",
31
30
  "--color-overlay-active": "var(--color-neutral-alpha-400)",
32
- "--color-overlay-selected": "var(--color-neutral-alpha-600)"
31
+ "--color-overlay-selected": "var(--color-neutral-alpha-600)",
32
+ "--color-focus": "var(--brand-color-primary-dark)"
33
33
  }
34
34
  } as const;
35
35
 
package/dist/tokens/ts/{color.light.tokens.ts → appearance-(modes).tokens.mode-light.ts} RENAMED
@@ -1,9 +1,8 @@
1
1
  // Auto-generated design tokens from Figma
2
- // Generated on 2026-03-04T21:56:02.560Z
2
+ // Generated on 2026-03-31T20:27:09.719Z
3
3
 
4
4
  export const tokens = {
5
5
  "colors": {
6
- "--color-focus": "var(--brand-color-primary)",
7
6
  "--color-text-default": "var(--color-neutral-800)",
8
7
  "--color-text-inverse": "var(--color-neutral-000)",
9
8
  "--color-text-disabled": "var(--color-neutral-600)",
@@ -25,11 +24,12 @@ export const tokens = {
25
24
  "--color-border-strong": "var(--color-neutral-1000)",
26
25
  "--color-border-brand": "var(--brand-color-primary)",
27
26
  "--color-border-disabled": "var(--color-neutral-500)",
28
- "--color-border-danger": "var(--brand-color-functional-danger)",
27
+ "--color-border-danger": "rgb(255 0 0)",
29
28
  "--color-overlay-backdrop": "var(--color-neutral-alpha-400)",
30
29
  "--color-overlay-hover": "var(--color-neutral-alpha-200)",
31
30
  "--color-overlay-active": "var(--color-neutral-alpha-400)",
32
- "--color-overlay-selected": "var(--color-neutral-alpha-600)"
31
+ "--color-overlay-selected": "var(--color-neutral-alpha-600)",
32
+ "--color-focus": "var(--brand-color-primary)"
33
33
  }
34
34
  } as const;
35
35
 
package/dist/tokens/ts/{component.tokens.ts → components-(ui).tokens.ts} RENAMED
@@ -1,62 +1,79 @@
1
1
  // Auto-generated design tokens from Figma
2
- // Generated on 2026-03-04T21:56:02.558Z
2
+ // Generated on 2026-03-31T20:27:09.724Z
3
3
 
4
4
  export const tokens = {
5
5
  "components": {
6
- "--button-font-family": "var(--brand-font-lead)",
7
- "--button-font-weight": "var(--typography-label-font-weight)",
8
- "--button-font-size": "var(--typography-label-font-size)",
9
- "--button-line-height": "var(--typography-label-line-height)",
10
- "--button-border-size-default": "var(--size-border-000)",
11
6
  "--button-border-size-hover": "var(--size-border-100)",
12
- "--button-border-size-active": "var(--size-border-200)",
13
- "--button-border-radius": "var(--brand-corner-button)",
14
- "--button-padding-inline": "var(--size-spacing-400)",
15
- "--button-padding-inline-icon-only": "var(--size-spacing-200)",
16
- "--button-padding-block": "var(--size-spacing-200)",
17
- "--button-gap": "var(--size-spacing-200)",
18
- "--button-text-color-disabled": "var(--color-text-disabled)",
19
- "--button-border-color-disabled": "var(--color-border-disabled)",
20
- "--button-container-background-disabled": "var(--color-fill-disabled)",
21
- "--button-overlay-hover": "var(--color-overlay-hover)",
22
- "--button-overlay-active": "var(--color-overlay-active)",
23
- "--button-height": "2.5rem",
24
- "--button-solid-text-color-default": "var(--color-text-inverse)",
25
- "--button-solid-text-color-hover": "var(--color-text-inverse)",
26
- "--button-solid-text-color-active": "var(--color-text-inverse)",
27
7
  "--button-solid-border-color-default": "var(--color-border-brand)",
28
8
  "--button-solid-border-color-hover": "var(--color-border-brand)",
29
- "--button-solid-border-color-focus": "var(--color-border-brand)",
30
9
  "--button-solid-border-color-active": "var(--color-border-brand)",
10
+ "--button-solid-border-color-focus": "var(--color-border-brand)",
11
+ "--button-solid-text-color-default": "var(--color-text-inverse)",
31
12
  "--button-solid-container-background-default": "var(--color-fill-brand)",
32
13
  "--button-solid-container-background-hover": "var(--color-fill-brand)",
33
- "--button-solid-container-background-focus": "var(--color-fill-brand)",
34
14
  "--button-solid-container-background-active": "var(--color-fill-brand)",
35
- "--button-outline-text-color-default": "var(--color-text-brand)",
36
- "--button-outline-text-color-hover": "var(--color-text-brand)",
37
- "--button-outline-text-color-active": "var(--color-text-brand)",
15
+ "--button-solid-container-background-focus": "var(--color-fill-brand)",
16
+ "--button-solid-text-color-hover": "var(--color-text-inverse)",
17
+ "--button-solid-text-color-active": "var(--color-text-inverse)",
38
18
  "--button-outline-border-color-default": "var(--color-border-brand)",
39
19
  "--button-outline-border-color-hover": "var(--color-border-brand)",
40
20
  "--button-outline-border-color-active": "var(--color-border-brand)",
41
21
  "--button-outline-border-color-focus": "var(--color-border-brand)",
22
+ "--button-outline-text-color-default": "var(--color-text-brand)",
42
23
  "--button-outline-container-background-default": "var(--color-fill-surface)",
24
+ "--button-outline-container-background-active": "var(--color-fill-surface)",
43
25
  "--button-outline-container-background-hover": "var(--color-fill-surface)",
44
26
  "--button-outline-container-background-focus": "var(--color-fill-surface)",
45
- "--button-outline-container-background-active": "var(--color-fill-surface)",
46
- "--button-ghost-text-color-default": "var(--color-text-brand)",
47
- "--button-ghost-text-color-hover": "var(--color-text-brand)",
48
- "--button-ghost-text-color-active": "var(--color-text-brand)",
49
- "--button-ghost-border-color-default": "var(--color-transparent)",
50
- "--button-ghost-border-color-hover": "var(--color-transparent)",
51
- "--button-ghost-border-color-focus": "var(--color-transparent)",
52
- "--button-ghost-border-color-active": "var(--color-transparent)",
27
+ "--button-outline-text-color-hover": "var(--color-text-brand)",
28
+ "--button-outline-text-color-active": "var(--color-text-brand)",
53
29
  "--button-ghost-container-background-default": "var(--color-fill-surface)",
54
30
  "--button-ghost-container-background-hover": "var(--color-fill-surface)",
55
31
  "--button-ghost-container-background-focus": "var(--color-fill-surface)",
56
32
  "--button-ghost-container-background-active": "var(--color-fill-surface)",
33
+ "--button-ghost-border-color-default": "var(--color-transparent)",
34
+ "--button-ghost-border-color-hover": "var(--color-transparent)",
35
+ "--button-ghost-border-color-focus": "var(--color-transparent)",
36
+ "--button-ghost-border-color-active": "var(--color-transparent)",
37
+ "--button-ghost-text-color-default": "var(--color-text-brand)",
38
+ "--button-ghost-text-color-hover": "var(--color-text-brand)",
39
+ "--button-ghost-text-color-active": "var(--color-text-brand)",
40
+ "--button-border-size-default": "var(--size-border-100)",
41
+ "--button-font-family": "var(--brand-font-lead)",
42
+ "--button-line-height": "var(--typography-label-line-height)",
43
+ "--button-border-radius": "var(--brand-corner-button)",
44
+ "--button-font-weight": "var(--typography-label-font-weight)",
45
+ "--button-font-size": "var(--typography-label-font-size)",
46
+ "--button-padding-inline": "var(--size-spacing-400)",
47
+ "--button-gap": "var(--size-spacing-200)",
48
+ "--button-padding-block": "var(--size-spacing-200)",
49
+ "--button-container-background-disabled": "var(--color-fill-disabled)",
50
+ "--button-border-color-disabled": "var(--color-border-disabled)",
51
+ "--button-text-color-disabled": "var(--color-text-disabled)",
52
+ "--button-border-size-active": "var(--size-border-200)",
53
+ "--button-overlay-hover": "var(--color-overlay-hover)",
54
+ "--button-overlay-active": "var(--color-overlay-active)",
55
+ "--button-padding-inline-icon-only": "var(--size-spacing-200)",
56
+ "--button-height-min": "2.5rem",
57
+ "--button-group-gap": "var(--size-spacing-200)",
58
+ "--button-width-min": "2.5rem",
57
59
  "--modal-backdrop-color": "var(--color-overlay-backdrop)",
58
60
  "--modal-surface-color": "var(--color-fill-surface)",
59
61
  "--modal-surface-border-radius": "var(--brand-corner-modal)",
62
+ "--input-text-text-color-default": "var(--color-text-default)",
63
+ "--input-text-text-color-hover": "var(--color-text-default)",
64
+ "--input-text-text-color-active": "var(--color-text-default)",
65
+ "--input-text-border-color-default": "var(--color-border-default)",
66
+ "--input-text-border-color-hover": "var(--color-border-brand)",
67
+ "--input-text-border-color-active": "var(--color-border-brand)",
68
+ "--input-text-border-color-focus": "var(--color-border-brand)",
69
+ "--input-text-border-color-invalid": "var(--color-border-danger)",
70
+ "--input-text-border-color-valid": "var(--color-border-strong)",
71
+ "--input-text-container-background-default": "var(--color-fill-surface)",
72
+ "--input-text-container-background-hover": "var(--color-fill-surface)",
73
+ "--input-text-container-background-focus": "var(--color-fill-surface)",
74
+ "--input-text-container-background-active": "var(--color-fill-surface)",
75
+ "--input-text-text-color-placeholder": "var(--color-text-subtle)",
76
+ "--input-text-height-min": "2.5rem",
60
77
  "--input-font-family": "var(--brand-font-base)",
61
78
  "--input-font-weight": "var(--typography-body-font-weight)",
62
79
  "--input-font-size": "var(--typography-label-font-size)",
@@ -75,32 +92,31 @@ export const tokens = {
75
92
  "--input-overlay-hover": "var(--color-transparent)",
76
93
  "--input-overlay-active": "var(--color-transparent)",
77
94
  "--input-height": "2.5rem",
78
- "--input-text-text-color-placeholder": "var(--color-text-subtle)",
79
- "--input-text-text-color-default": "var(--color-text-default)",
80
- "--input-text-text-color-hover": "var(--color-text-default)",
81
- "--input-text-text-color-active": "var(--color-text-default)",
82
- "--input-text-border-color-default": "var(--color-border-default)",
83
- "--input-text-border-color-hover": "var(--color-border-brand)",
84
- "--input-text-border-color-active": "var(--color-border-brand)",
85
- "--input-text-border-color-focus": "var(--color-border-brand)",
86
- "--input-text-border-color-invalid": "var(--color-border-danger)",
87
- "--input-text-border-color-valid": "var(--color-border-strong)",
88
- "--input-text-container-background-default": "var(--color-fill-surface)",
89
- "--input-text-container-background-hover": "var(--color-fill-surface)",
90
- "--input-text-container-background-focus": "var(--color-fill-surface)",
91
- "--input-text-container-background-active": "var(--color-fill-surface)",
92
- "--form-gap": "var(--size-spacing-400)",
95
+ "--input-checkbox-text-color-default": "var(--color-text-default)",
96
+ "--input-checkbox-text-color-hover": "var(--color-text-default)",
97
+ "--input-checkbox-text-color-active": "var(--color-text-inverse)",
98
+ "--input-checkbox-border-color-default": "var(--color-border-subtle)",
99
+ "--input-checkbox-border-color-hover": "var(--color-border-brand)",
100
+ "--input-checkbox-border-color-active": "var(--color-border-brand)",
101
+ "--input-checkbox-border-color-focus": "var(--color-border-brand)",
102
+ "--input-checkbox-border-color-invalid": "var(--color-border-danger)",
103
+ "--input-checkbox-border-color-valid": "var(--color-border-strong)",
104
+ "--input-checkbox-container-background-default": "var(--color-fill-surface)",
105
+ "--input-checkbox-container-background-hover": "var(--color-fill-surface)",
106
+ "--input-checkbox-container-background-focus": "var(--color-fill-surface)",
107
+ "--input-checkbox-container-background-active": "var(--color-fill-brand)",
108
+ "--form-group-gap": "var(--size-spacing-400)",
109
+ "--form-group-title-color": "var(--color-text-default)",
93
110
  "--form-padding-inline": "var(--size-spacing-400)",
94
111
  "--form-padding-block": "var(--size-spacing-400)",
95
112
  "--form-border-radius": "var(--brand-corner-card)",
96
- "--form-border-size": "var(--size-border-100)",
97
- "--form-container-background": "var(--color-fill-surface)",
98
- "--form-container-border-color": "var(--color-border-subtle)",
99
- "--form-group-gap": "var(--size-spacing-400)",
100
- "--form-group-title-color": "var(--color-text-default)",
113
+ "--form-gap": "var(--size-spacing-400)",
101
114
  "--form-field-gap": "var(--size-spacing-200)",
102
115
  "--form-field-helper-text-color-default": "var(--color-text-subtle)",
103
- "--form-field-helper-text-color-invalid": "var(--color-text-danger)"
116
+ "--form-field-helper-text-color-invalid": "var(--color-text-danger)",
117
+ "--form-container-background": "var(--color-fill-surface)",
118
+ "--form-container-border-color": "var(--color-border-subtle)",
119
+ "--form-border-size": "var(--size-border-100)"
104
120
  }
105
121
  } as const;
106
122
 
package/dist/tokens/ts/{primitives.tokens.ts → core-(primitives).tokens.ts} RENAMED
@@ -1,9 +1,8 @@
1
1
  // Auto-generated design tokens from Figma
2
- // Generated on 2026-03-04T21:56:02.562Z
2
+ // Generated on 2026-03-31T20:27:09.731Z
3
3
 
4
4
  export const tokens = {
5
5
  "colors": {
6
- "--color-transparent": "rgba(0 0 0 / 0)",
7
6
  "--color-neutral-100": "rgb(230 230 230)",
8
7
  "--color-neutral-200": "rgb(204 204 204)",
9
8
  "--color-neutral-300": "rgb(179 179 179)",
@@ -14,7 +13,6 @@ export const tokens = {
14
13
  "--color-neutral-800": "rgb(51 51 51)",
15
14
  "--color-neutral-900": "rgb(26 26 26)",
16
15
  "--color-neutral-1000": "rgb(0 0 0)",
17
- "--color-neutral-000": "rgb(255 255 255)",
18
16
  "--color-neutral-alpha-100": "rgba(0 0 0 / 0.1)",
19
17
  "--color-neutral-alpha-200": "rgba(0 0 0 / 0.2)",
20
18
  "--color-neutral-alpha-300": "rgba(0 0 0 / 0.3)",
@@ -25,8 +23,7 @@ export const tokens = {
25
23
  "--color-neutral-alpha-800": "rgba(0 0 0 / 0.8)",
26
24
  "--color-neutral-alpha-900": "rgba(0 0 0 / 0.9)",
27
25
  "--color-neutral-alpha-000": "rgba(0 0 0 / 0)",
28
- "--color-brand-a-red": "rgb(255 0 0)",
29
- "--color-brand-a-green": "rgb(19 174 92)",
26
+ "--color-neutral-000": "rgb(255 255 255)",
30
27
  "--color-brand-a-purple-200": "rgb(222 192 255)",
31
28
  "--color-brand-a-purple-600": "rgb(151 71 255)",
32
29
  "--color-brand-a-purple-800": "rgb(85 26 139)",
@@ -34,20 +31,23 @@ export const tokens = {
34
31
  "--color-brand-a-blue-500": "rgb(112 203 244)",
35
32
  "--color-brand-a-blue-700": "rgb(12 75 243)",
36
33
  "--color-brand-a-blue-800": "rgb(27 17 92)",
37
- "--color-brand-b-red": "rgb(204 0 0)",
38
- "--color-brand-b-green": "rgb(14 129 68)",
34
+ "--color-brand-a-green": "rgb(19 174 92)",
35
+ "--color-brand-a-red": "rgb(255 0 0)",
39
36
  "--color-brand-b-purple-200": "rgb(196 143 255)",
40
37
  "--color-brand-b-purple-600": "rgb(122 20 255)",
41
38
  "--color-brand-b-purple-800": "rgb(58 18 95)",
42
39
  "--color-brand-b-blue-200": "rgb(179 226 250)",
43
40
  "--color-brand-b-blue-500": "rgb(66 186 240)",
44
41
  "--color-brand-b-blue-700": "rgb(10 60 194)",
45
- "--color-brand-b-blue-800": "rgb(14 9 47)"
42
+ "--color-brand-b-blue-800": "rgb(14 9 47)",
43
+ "--color-brand-b-red": "rgb(204 0 0)",
44
+ "--color-brand-b-green": "rgb(14 129 68)",
45
+ "--color-transparent": "rgba(0 0 0 / 0)"
46
46
  },
47
47
  "typography": {
48
+ "--font-size-md": "1rem",
48
49
  "--font-size-xs": ".75rem",
49
50
  "--font-size-sm": ".875rem",
50
- "--font-size-md": "1rem",
51
51
  "--font-size-lg": "1.25rem",
52
52
  "--font-size-xl": "1.5rem",
53
53
  "--font-size-xxl": "2rem",
@@ -102,27 +102,27 @@ export const tokens = {
102
102
  "--shadow-focus": ".5rem"
103
103
  },
104
104
  "components": {
105
- "--layout-base-grid": ".25rem",
105
+ "--size-border-100": ".0625rem",
106
+ "--size-border-200": ".125rem",
107
+ "--size-border-300": ".1875rem",
108
+ "--size-border-000": "0",
106
109
  "--layout-columns": 12,
107
110
  "--layout-gutter": "1rem",
108
111
  "--layout-max-width": "1236px",
109
112
  "--layout-column-max-width": "412px",
110
113
  "--layout-float-breakpoint": "1220px",
111
- "--size-border-100": ".0625rem",
112
- "--size-border-200": ".125rem",
113
- "--size-border-300": ".1875rem",
114
- "--size-border-000": "0",
115
- "--zindex-hidden": -1,
116
- "--zindex-base": 0,
117
- "--zindex-raised": 1,
118
- "--zindex-dropdown-base": 900,
119
- "--zindex-dropdown": 1000,
120
- "--zindex-sticky": 1020,
114
+ "--layout-base-grid": ".25rem",
121
115
  "--zindex-fixed": 1030,
122
- "--zindex-modal-overlay": 1040,
116
+ "--zindex-sticky": 1020,
117
+ "--zindex-dropdown": 1000,
118
+ "--zindex-dropdown-base": 900,
123
119
  "--zindex-modal": 1050,
120
+ "--zindex-base": 0,
121
+ "--zindex-tooltip": 1070,
122
+ "--zindex-raised": 1,
124
123
  "--zindex-popover": 1060,
125
- "--zindex-tooltip": 1070
124
+ "--zindex-modal-overlay": 1040,
125
+ "--zindex-hidden": -1
126
126
  },
127
127
  "breakpoints": {
128
128
  "--breakpoint-100": "580px",
package/dist/tokens/ts/{semantic.tokens.ts → semantics-(roles).tokens.ts} RENAMED
@@ -1,25 +1,25 @@
1
1
  // Auto-generated design tokens from Figma
2
- // Generated on 2026-03-04T21:56:02.563Z
2
+ // Generated on 2026-03-31T20:27:09.733Z
3
3
 
4
4
  export const tokens = {
5
5
  "typography": {
6
- "--typography-code": "var(--font-family-mono)",
7
6
  "--typography-heading-font-family": "var(--brand-font-lead)",
8
- "--typography-heading-font-weight": "var(--font-weight-700)",
7
+ "--typography-heading-font-size-md": "var(--font-size-md)",
9
8
  "--typography-heading-font-size-xs": "var(--font-size-xs)",
10
9
  "--typography-heading-font-size-sm": "var(--font-size-sm)",
11
- "--typography-heading-font-size-md": "var(--font-size-md)",
12
10
  "--typography-heading-font-size-lg": "var(--font-size-lg)",
13
11
  "--typography-heading-font-size-xl": "var(--font-size-xl)",
14
12
  "--typography-heading-font-size-xxl": "var(--font-size-xxl)",
15
13
  "--typography-heading-font-size-xxxl": "var(--font-size-xxxl)",
14
+ "--typography-heading-font-weight": "var(--font-weight-700)",
15
+ "--typography-heading-line-height-md": "var(--line-height-md)",
16
16
  "--typography-heading-line-height-xs": "var(--line-height-xs)",
17
17
  "--typography-heading-line-height-sm": "var(--line-height-sm)",
18
- "--typography-heading-line-height-md": "var(--line-height-md)",
19
18
  "--typography-heading-line-height-lg": "var(--line-height-lg)",
20
19
  "--typography-heading-line-height-xl": "var(--line-height-xl)",
21
20
  "--typography-heading-line-height-xxl": "var(--line-height-xxl)",
22
21
  "--typography-heading-line-height-xxxl": "var(--line-height-xxxl)",
22
+ "--typography-code": "var(--font-family-mono)",
23
23
  "--typography-label-font-family": "var(--brand-font-lead)",
24
24
  "--typography-label-font-weight": "var(--font-weight-600)",
25
25
  "--typography-label-font-size": "var(--font-size-md)",
@@ -33,8 +33,9 @@ export const tokens = {
33
33
  "radii": {
34
34
  "--corner-button-radius": "var(--brand-corner-button)",
35
35
  "--corner-card-radius": "var(--brand-corner-card)",
36
+ "--corner-modal-radius": "var(--brand-corner-modal)",
36
37
  "--corner-form-radius": "var(--brand-corner-card)",
37
- "--corner-modal-radius": "var(--brand-corner-modal)"
38
+ "--corner-checkbox-radius": "var(--brand-corner-input)"
38
39
  }
39
40
  } as const;
40
41
 
package/dist/tokens/ts/{brand-a.tokens.ts → themes-(brands).tokens.brand-a.ts} RENAMED
@@ -1,29 +1,29 @@
1
1
  // Auto-generated design tokens from Figma
2
- // Generated on 2026-03-04T21:56:02.553Z
2
+ // Generated on 2026-03-31T20:27:09.734Z
3
3
 
4
4
  export const tokens = {
5
5
  "colors": {
6
+ "--brand-color-functional-success": "var(--color-brand-a-green)",
7
+ "--brand-color-functional-danger": "var(--color-brand-a-red)",
8
+ "--brand-color-functional-base": "var(--color-brand-a-blue-700)",
9
+ "--brand-color-functional-base-dark": "var(--color-brand-a-blue-800)",
6
10
  "--brand-color-primary": "var(--color-brand-a-purple-600)",
7
- "--brand-color-primary-dark": "var(--color-brand-a-purple-800)",
8
11
  "--brand-color-accent": "var(--color-brand-a-blue-500)",
12
+ "--brand-color-primary-dark": "var(--color-brand-a-purple-800)",
13
+ "--brand-color-accent-dark": "var(--color-brand-a-blue-700)",
9
14
  "--brand-color-subtle": "var(--color-neutral-500)",
10
- "--brand-color-subtle-light": "var(--color-neutral-200)",
11
15
  "--brand-color-subtle-dark": "var(--color-neutral-800)",
12
- "--brand-color-accent-dark": "var(--color-brand-a-blue-700)",
13
- "--brand-color-functional-base": "var(--color-brand-a-blue-700)",
14
- "--brand-color-functional-base-dark": "var(--color-brand-a-blue-800)",
15
- "--brand-color-functional-success": "var(--color-brand-a-green)",
16
- "--brand-color-functional-danger": "var(--color-brand-a-red)"
16
+ "--brand-color-subtle-light": "var(--color-neutral-200)"
17
17
  },
18
18
  "typography": {
19
- "--brand-font-lead": "var(--font-family-serif)",
20
- "--brand-font-base": "var(--font-family-sans)"
19
+ "--brand-font-base": "var(--font-family-sans)",
20
+ "--brand-font-lead": "var(--font-family-serif)"
21
21
  },
22
22
  "radii": {
23
- "--brand-corner-button": "var(--size-radius-full)",
24
- "--brand-corner-input": "var(--size-radius-200)",
23
+ "--brand-corner-button": "var(--size-radius-700)",
25
24
  "--brand-corner-card": "var(--size-radius-200)",
26
- "--brand-corner-modal": "var(--size-radius-400)"
25
+ "--brand-corner-modal": "var(--size-radius-400)",
26
+ "--brand-corner-input": "var(--size-radius-200)"
27
27
  }
28
28
  } as const;
29
29
 
package/dist/tokens/ts/{brand-b.tokens.ts → themes-(brands).tokens.brand-b.ts} RENAMED
@@ -1,29 +1,29 @@
1
1
  // Auto-generated design tokens from Figma
2
- // Generated on 2026-03-04T21:56:02.554Z
2
+ // Generated on 2026-03-31T20:27:09.734Z
3
3
 
4
4
  export const tokens = {
5
5
  "colors": {
6
+ "--brand-color-functional-success": "var(--color-brand-b-green)",
7
+ "--brand-color-functional-danger": "var(--color-brand-b-red)",
8
+ "--brand-color-functional-base": "var(--color-brand-b-purple-600)",
9
+ "--brand-color-functional-base-dark": "var(--color-brand-b-purple-800)",
6
10
  "--brand-color-primary": "var(--color-brand-b-blue-500)",
7
- "--brand-color-primary-dark": "var(--color-brand-b-blue-700)",
8
11
  "--brand-color-accent": "var(--color-brand-b-purple-600)",
12
+ "--brand-color-primary-dark": "var(--color-brand-b-blue-700)",
13
+ "--brand-color-accent-dark": "var(--color-brand-b-purple-800)",
9
14
  "--brand-color-subtle": "var(--color-neutral-500)",
10
- "--brand-color-subtle-light": "var(--color-neutral-200)",
11
15
  "--brand-color-subtle-dark": "var(--color-neutral-800)",
12
- "--brand-color-accent-dark": "var(--color-brand-b-purple-800)",
13
- "--brand-color-functional-base": "var(--color-brand-b-purple-600)",
14
- "--brand-color-functional-base-dark": "var(--color-brand-b-purple-800)",
15
- "--brand-color-functional-success": "var(--color-brand-b-green)",
16
- "--brand-color-functional-danger": "var(--color-brand-b-red)"
16
+ "--brand-color-subtle-light": "var(--color-neutral-200)"
17
17
  },
18
18
  "typography": {
19
- "--brand-font-lead": "var(--font-family-serif)",
20
- "--brand-font-base": "var(--font-family-sans)"
19
+ "--brand-font-base": "var(--font-family-sans)",
20
+ "--brand-font-lead": "var(--font-family-serif)"
21
21
  },
22
22
  "radii": {
23
23
  "--brand-corner-button": "var(--size-radius-000)",
24
- "--brand-corner-input": "var(--size-radius-000)",
25
24
  "--brand-corner-card": "var(--size-radius-100)",
26
- "--brand-corner-modal": "var(--size-radius-200)"
25
+ "--brand-corner-modal": "var(--size-radius-200)",
26
+ "--brand-corner-input": "var(--size-radius-000)"
27
27
  }
28
28
  } as const;
29
29
 
package/dist/ui/index.css CHANGED
@@ -3,3 +3,4 @@
3
3
  @import url("./patterns/input.css") layer(components);
4
4
  @import url("./patterns/icon.css") layer(components);
5
5
  @import url("./patterns/checkbox.css") layer(components);
6
+ @import url("./patterns/switch.css") layer(components);
package/dist/ui/patterns/button.css CHANGED
@@ -6,6 +6,7 @@
6
6
  align-items: center;
7
7
  justify-content: center;
8
8
  white-space: nowrap;
9
+ min-height: var(--button-height-min);
9
10
  background: var(--button-solid-container-background-default);
10
11
  border-color: var(--button-solid-border-color-default);
11
12
  border-width: var(--button-solid-border-size);
package/dist/ui/patterns/switch.css ADDED
@@ -0,0 +1,155 @@
1
+ @layer components {
2
+ .switch-field {
3
+ display: inline-flex;
4
+ align-items: center;
5
+ gap: var(--typography-label-gap);
6
+ font-family: var(--typography-label-font-family);
7
+ font-weight: var(--typography-label-font-weight);
8
+ font-size: var(--typography-label-font-size);
9
+ line-height: var(--typography-label-line-height);
10
+ color: var(--color-text-default);
11
+ cursor: pointer;
12
+ }
13
+
14
+ .switch-field.is-disabled {
15
+ color: var(--color-text-disabled);
16
+ cursor: not-allowed;
17
+ }
18
+
19
+ .switch {
20
+ --_switch-inline-size: var(--size-spacing-1000);
21
+ --_switch-block-size: var(--size-spacing-600);
22
+ --_switch-padding: var(--size-spacing-100);
23
+ --_switch-thumb-size: calc(
24
+ var(--_switch-block-size) - (var(--_switch-padding) * 2)
25
+ );
26
+ inline-size: var(--_switch-inline-size);
27
+ block-size: var(--_switch-block-size);
28
+ box-sizing: border-box;
29
+ margin: 0;
30
+ appearance: none;
31
+ position: relative;
32
+ flex: 0 0 auto;
33
+ border-style: solid;
34
+ border-width: var(--size-border-100);
35
+ border-color: var(--color-border-default);
36
+ border-radius: var(--size-radius-full);
37
+ background: var(--color-fill-surface);
38
+ cursor: pointer;
39
+ transition:
40
+ background-color 160ms ease,
41
+ border-color 160ms ease,
42
+ opacity 160ms ease;
43
+ }
44
+
45
+ .switch::after {
46
+ content: "";
47
+ position: absolute;
48
+ inset-block-start: 50%;
49
+ inset-inline-start: var(--_switch-padding);
50
+ inline-size: var(--_switch-thumb-size);
51
+ block-size: var(--_switch-thumb-size);
52
+ box-sizing: border-box;
53
+ border-radius: var(--size-radius-full);
54
+ background: var(--color-border-default);
55
+ transform: translate(0, -50%);
56
+ transition:
57
+ transform 160ms ease,
58
+ background-color 160ms ease;
59
+ }
60
+
61
+ .switch:checked,
62
+ .switch.is-checked {
63
+ border-color: var(--color-border-brand);
64
+ background: var(--color-fill-brand);
65
+ }
66
+
67
+ .switch:checked::after,
68
+ .switch.is-checked::after {
69
+ background: var(--color-fill-surface);
70
+ transform: translate(
71
+ calc(var(--_switch-inline-size) - var(--_switch-block-size)),
72
+ -50%
73
+ );
74
+ }
75
+
76
+ .switch:hover,
77
+ .switch.is-hover {
78
+ background:
79
+ linear-gradient(0deg, var(--color-overlay-hover), var(--color-overlay-hover)),
80
+ var(--color-fill-surface);
81
+ border-color: var(--color-border-brand);
82
+ }
83
+
84
+ .switch:hover::after,
85
+ .switch.is-hover::after {
86
+ background: var(--color-border-brand);
87
+ }
88
+
89
+ .switch:checked:hover,
90
+ .switch.is-checked.is-hover {
91
+ background:
92
+ linear-gradient(0deg, var(--color-overlay-hover), var(--color-overlay-hover)),
93
+ var(--color-fill-brand);
94
+ }
95
+
96
+ .switch:checked:hover::after,
97
+ .switch.is-checked.is-hover::after {
98
+ background: var(--color-fill-surface);
99
+ }
100
+
101
+ .switch:active,
102
+ .switch.is-active {
103
+ background:
104
+ linear-gradient(0deg, var(--color-overlay-active), var(--color-overlay-active)),
105
+ var(--color-fill-surface);
106
+ border-color: var(--color-border-brand);
107
+ }
108
+
109
+ .switch:active::after,
110
+ .switch.is-active::after {
111
+ background: var(--color-border-brand);
112
+ }
113
+
114
+ .switch:checked:active,
115
+ .switch.is-checked.is-active {
116
+ background:
117
+ linear-gradient(0deg, var(--color-overlay-active), var(--color-overlay-active)),
118
+ var(--color-fill-brand);
119
+ }
120
+
121
+ .switch:checked:active::after,
122
+ .switch.is-checked.is-active::after {
123
+ background: var(--color-fill-surface);
124
+ }
125
+
126
+ .switch:focus-visible,
127
+ .switch.is-focus-visible {
128
+ border-color: var(--color-border-brand);
129
+ outline: none;
130
+ box-shadow: 0 0 0 var(--shadow-focus, 0) var(--color-focus, transparent);
131
+ }
132
+
133
+ .switch:disabled,
134
+ .switch.is-disabled {
135
+ cursor: not-allowed;
136
+ opacity: 0.6;
137
+ }
138
+
139
+ .switch:disabled:not(:checked),
140
+ .switch.is-disabled:not(.is-checked) {
141
+ border-color: var(--color-border-disabled);
142
+ background: var(--color-fill-disabled);
143
+ }
144
+
145
+ .switch:disabled::after,
146
+ .switch.is-disabled::after {
147
+ background: var(--color-fill-surface);
148
+ }
149
+
150
+ .switch:checked:disabled,
151
+ .switch.is-checked.is-disabled {
152
+ border-color: var(--color-border-disabled);
153
+ background: var(--color-fill-brand);
154
+ }
155
+ }