ui-foundations 0.3.2 → 0.6.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 (87) hide show
  1. package/README.md +181 -37
  2. package/dist/assets/icons/checkmark.svg +1 -0
  3. package/dist/core/index.css +8 -7
  4. package/dist/macros/ui.njk +203 -0
  5. package/dist/main.css +941 -210
  6. package/dist/react/accordion.js +36 -0
  7. package/dist/react/avatar.js +34 -0
  8. package/dist/react/badge.js +41 -0
  9. package/dist/react/button.js +4 -6
  10. package/dist/react/checkbox.js +21 -8
  11. package/dist/react/divider.js +31 -0
  12. package/dist/react/icon.js +8 -1
  13. package/dist/react/index.js +8 -0
  14. package/dist/react/label.js +1 -1
  15. package/dist/react/radio.js +45 -0
  16. package/dist/react/switch.js +9 -8
  17. package/dist/react/tabs.js +72 -0
  18. package/dist/react/textarea.js +38 -0
  19. package/dist/react/tooltip.js +25 -0
  20. package/dist/react/warn-dev.js +15 -0
  21. package/dist/tokens/css/{appearance-(modes).tokens.mode-dark.css → appearance-modes.tokens.mode-dark.css} +6 -6
  22. package/dist/tokens/css/{appearance-(modes).tokens.mode-light.css → appearance-modes.tokens.mode-light.css} +1 -1
  23. package/dist/tokens/css/{components-(ui).tokens.css → components-ui.tokens.css} +73 -32
  24. package/dist/tokens/css/core-primitives.tokens.css +240 -0
  25. package/dist/tokens/css/{semantics-(roles).tokens.css → semantics-roles.tokens.css} +1 -1
  26. package/dist/tokens/css/themes-brands.tokens.brand-a.css +22 -0
  27. package/dist/tokens/css/{themes-(brands).tokens.brand-b.css → themes-brands.tokens.brand-b.css} +9 -9
  28. package/dist/tokens/css/themes-brands.tokens.brand-c.css +22 -0
  29. package/dist/tokens/json/appearance-modes.tokens.mode-dark.json +121 -0
  30. package/dist/tokens/json/appearance-modes.tokens.mode-light.json +121 -0
  31. package/dist/tokens/json/components-ui.tokens.json +713 -0
  32. package/dist/tokens/json/{core-(primitives).tokens.json → core-primitives.tokens.json} +526 -410
  33. package/dist/tokens/json/semantics-roles.tokens.json +141 -0
  34. package/dist/tokens/json/themes-brands.tokens.brand-a.json +81 -0
  35. package/dist/tokens/json/themes-brands.tokens.brand-b.json +81 -0
  36. package/dist/tokens/json/themes-brands.tokens.brand-c.json +81 -0
  37. package/dist/tokens/tokens.yaml +2722 -499
  38. package/dist/tokens/ts/{appearance-(modes).tokens.mode-dark.ts → appearance-modes.tokens.mode-dark.ts} +6 -6
  39. package/dist/tokens/ts/{appearance-(modes).tokens.mode-light.ts → appearance-modes.tokens.mode-light.ts} +1 -1
  40. package/dist/tokens/ts/{components-(ui).tokens.ts → components-ui.tokens.ts} +74 -33
  41. package/dist/tokens/ts/core-primitives.tokens.ts +265 -0
  42. package/dist/tokens/ts/{semantics-(roles).tokens.ts → semantics-roles.tokens.ts} +1 -1
  43. package/dist/tokens/ts/themes-brands.tokens.brand-a.ts +32 -0
  44. package/dist/tokens/ts/{themes-(brands).tokens.brand-b.ts → themes-brands.tokens.brand-b.ts} +9 -9
  45. package/dist/tokens/ts/{themes-(brands).tokens.brand-a.ts → themes-brands.tokens.brand-c.ts} +9 -9
  46. package/dist/ui/index.css +8 -0
  47. package/dist/ui/patterns/accordion.css +81 -0
  48. package/dist/ui/patterns/avatar.css +57 -0
  49. package/dist/ui/patterns/badge.css +49 -0
  50. package/dist/ui/patterns/checkbox.css +71 -22
  51. package/dist/ui/patterns/divider.css +25 -0
  52. package/dist/ui/patterns/radio.css +109 -0
  53. package/dist/ui/patterns/tabs.css +71 -0
  54. package/dist/ui/patterns/textarea.css +50 -0
  55. package/dist/ui/patterns/tooltip.css +64 -0
  56. package/docs/README.md +38 -0
  57. package/docs/agentic/README.md +35 -0
  58. package/docs/agentic/assistant-behavior-rules.md +48 -0
  59. package/docs/agentic/skills/component-accessibility-audit.md +132 -0
  60. package/docs/agentic/skills/ux-writing-coach.md +116 -0
  61. package/docs/foundations/README.md +31 -0
  62. package/docs/foundations/foundation-001-token-layering.md +6 -0
  63. package/docs/foundations/foundation-002-naming-and-grouping.md +6 -0
  64. package/docs/foundations/foundation-003-color-semantics-and-status.md +6 -0
  65. package/docs/foundations/foundation-004-typography-scale-and-line-height.md +6 -0
  66. package/docs/foundations/foundation-005-responsive-breakpoints-and-containers.md +6 -0
  67. package/docs/foundations/foundation-006-z-index-layering.md +6 -0
  68. package/docs/foundations/foundation-007-typography-selectors-and-specificity.md +7 -1
  69. package/docs/foundations/foundation-008-mode-activation-and-consumer-control.md +6 -0
  70. package/docs/foundations/foundation-009-component-boundaries-and-utility.md +6 -0
  71. package/docs/foundations/foundation-010-implementation-and-pipeline-workflow.md +6 -0
  72. package/docs/foundations/foundation-011-branching-and-release-governance.md +6 -0
  73. package/docs/foundations/foundation-012-minimal-markup-and-composition.md +6 -0
  74. package/package.json +16 -11
  75. package/dist/tokens/css/core-(primitives).tokens.css +0 -127
  76. package/dist/tokens/css/themes-(brands).tokens.brand-a.css +0 -22
  77. package/dist/tokens/json/appearance-(modes).tokens.mode-dark.json +0 -182
  78. package/dist/tokens/json/appearance-(modes).tokens.mode-light.json +0 -182
  79. package/dist/tokens/json/components-(ui).tokens.json +0 -739
  80. package/dist/tokens/json/semantics-(roles).tokens.json +0 -203
  81. package/dist/tokens/json/themes-(brands).tokens.brand-a.json +0 -115
  82. package/dist/tokens/json/themes-(brands).tokens.brand-b.json +0 -115
  83. package/dist/tokens/ts/core-(primitives).tokens.ts +0 -152
  84. package/docs/agentic/skills/README.md +0 -51
  85. package/docs/agentic/skills/design-ops-specialist/SKILL.md +0 -60
  86. package/docs/agentic/skills/design-system-architect/SKILL.md +0 -106
  87. package/docs/agentic/team-ai-playbook.md +0 -226
package/dist/tokens/css/themes-(brands).tokens.brand-a.css DELETED
@@ -1,22 +0,0 @@
1
- /* Auto-generated design tokens from Figma */
2
- /* Generated on 2026-03-31T20:27:09.734Z */
3
-
4
- :root[data-brand="a"] {
5
- --brand-color-functional-success: var(--color-brand-a-green);
6
- --brand-color-functional-danger: var(--color-brand-a-red);
7
- --brand-color-functional-base: var(--color-brand-a-blue-700);
8
- --brand-color-functional-base-dark: var(--color-brand-a-blue-800);
9
- --brand-color-primary: var(--color-brand-a-purple-600);
10
- --brand-color-accent: var(--color-brand-a-blue-500);
11
- --brand-color-primary-dark: var(--color-brand-a-purple-800);
12
- --brand-color-accent-dark: var(--color-brand-a-blue-700);
13
- --brand-color-subtle: var(--color-neutral-500);
14
- --brand-color-subtle-dark: var(--color-neutral-800);
15
- --brand-color-subtle-light: var(--color-neutral-200);
16
- --brand-font-base: var(--font-family-sans);
17
- --brand-font-lead: var(--font-family-serif);
18
- --brand-corner-button: var(--size-radius-700);
19
- --brand-corner-card: var(--size-radius-200);
20
- --brand-corner-modal: var(--size-radius-400);
21
- --brand-corner-input: var(--size-radius-200);
22
- }
package/dist/tokens/json/appearance-(modes).tokens.mode-dark.json DELETED
@@ -1,182 +0,0 @@
1
- {
2
- "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
3
- "Color": {
4
- "Text": {
5
- "Default": {
6
- "$type": "color",
7
- "$value": {
8
- "$ref": "Color/Neutral/800"
9
- }
10
- },
11
- "Inverse": {
12
- "$type": "color",
13
- "$value": {
14
- "$ref": "Color/Neutral/000"
15
- }
16
- },
17
- "Disabled": {
18
- "$type": "color",
19
- "$value": {
20
- "$ref": "Color/Neutral/600"
21
- }
22
- },
23
- "Brand": {
24
- "$type": "color",
25
- "$value": {
26
- "$ref": "Brand/Color/Primary"
27
- }
28
- },
29
- "Subtle": {
30
- "$type": "color",
31
- "$value": {
32
- "$ref": "Brand/Color/Subtle"
33
- }
34
- },
35
- "Strong": {
36
- "$type": "color",
37
- "$value": {
38
- "$ref": "Color/Neutral/1000"
39
- }
40
- },
41
- "Danger": {
42
- "$type": "color",
43
- "$value": {
44
- "$ref": "Brand/Color/Functional/Danger"
45
- }
46
- },
47
- "Success": {
48
- "$type": "color",
49
- "$value": {
50
- "$ref": "Brand/Color/Functional/Success"
51
- }
52
- }
53
- },
54
- "Fill": {
55
- "Surface": {
56
- "$type": "color",
57
- "$value": {
58
- "$ref": "Color/Neutral/000"
59
- }
60
- },
61
- "Disabled": {
62
- "$type": "color",
63
- "$value": {
64
- "$ref": "Color/Neutral/300"
65
- }
66
- },
67
- "Hover": {
68
- "$type": "color",
69
- "$value": {
70
- "$ref": "Color/Neutral/Alpha/500"
71
- }
72
- },
73
- "Brand": {
74
- "$type": "color",
75
- "$value": {
76
- "$ref": "Brand/Color/Primary"
77
- }
78
- },
79
- "Subtle": {
80
- "$type": "color",
81
- "$value": {
82
- "$ref": "Brand/Color/Subtle Light"
83
- }
84
- },
85
- "Active": {
86
- "$type": "color",
87
- "$value": {
88
- "$ref": "Brand/Color/Accent"
89
- }
90
- },
91
- "Danger": {
92
- "$type": "color",
93
- "$value": {
94
- "$ref": "Brand/Color/Functional/Danger"
95
- }
96
- },
97
- "Success": {
98
- "$type": "color",
99
- "$value": {
100
- "$ref": "Brand/Color/Functional/Success"
101
- }
102
- }
103
- },
104
- "Border": {
105
- "Default": {
106
- "$type": "color",
107
- "$value": {
108
- "$ref": "Color/Neutral/800"
109
- }
110
- },
111
- "Subtle": {
112
- "$type": "color",
113
- "$value": {
114
- "$ref": "Brand/Color/Subtle"
115
- }
116
- },
117
- "Strong": {
118
- "$type": "color",
119
- "$value": {
120
- "$ref": "Color/Neutral/1000"
121
- }
122
- },
123
- "Brand": {
124
- "$type": "color",
125
- "$value": {
126
- "$ref": "Brand/Color/Primary"
127
- }
128
- },
129
- "Disabled": {
130
- "$type": "color",
131
- "$value": {
132
- "$ref": "Color/Neutral/500"
133
- }
134
- },
135
- "Danger": {
136
- "$type": "color",
137
- "$value": {
138
- "colorSpace": "srgb",
139
- "components": [
140
- 1,
141
- 0,
142
- 0
143
- ],
144
- "alpha": 1,
145
- "hex": "#FF0000"
146
- }
147
- }
148
- },
149
- "Overlay": {
150
- "Backdrop": {
151
- "$type": "color",
152
- "$value": {
153
- "$ref": "Color/Neutral/Alpha/400"
154
- }
155
- },
156
- "Hover": {
157
- "$type": "color",
158
- "$value": {
159
- "$ref": "Color/Neutral/Alpha/200"
160
- }
161
- },
162
- "Active": {
163
- "$type": "color",
164
- "$value": {
165
- "$ref": "Color/Neutral/Alpha/400"
166
- }
167
- },
168
- "Selected": {
169
- "$type": "color",
170
- "$value": {
171
- "$ref": "Color/Neutral/Alpha/600"
172
- }
173
- }
174
- },
175
- "Focus": {
176
- "$type": "color",
177
- "$value": {
178
- "$ref": "Brand/Color/Primary"
179
- }
180
- }
181
- }
182
- }
package/dist/tokens/json/appearance-(modes).tokens.mode-light.json DELETED
@@ -1,182 +0,0 @@
1
- {
2
- "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
3
- "Color": {
4
- "Text": {
5
- "Default": {
6
- "$type": "color",
7
- "$value": {
8
- "$ref": "Color/Neutral/800"
9
- }
10
- },
11
- "Inverse": {
12
- "$type": "color",
13
- "$value": {
14
- "$ref": "Color/Neutral/000"
15
- }
16
- },
17
- "Disabled": {
18
- "$type": "color",
19
- "$value": {
20
- "$ref": "Color/Neutral/600"
21
- }
22
- },
23
- "Brand": {
24
- "$type": "color",
25
- "$value": {
26
- "$ref": "Brand/Color/Primary"
27
- }
28
- },
29
- "Subtle": {
30
- "$type": "color",
31
- "$value": {
32
- "$ref": "Brand/Color/Subtle"
33
- }
34
- },
35
- "Strong": {
36
- "$type": "color",
37
- "$value": {
38
- "$ref": "Color/Neutral/1000"
39
- }
40
- },
41
- "Danger": {
42
- "$type": "color",
43
- "$value": {
44
- "$ref": "Brand/Color/Functional/Danger"
45
- }
46
- },
47
- "Success": {
48
- "$type": "color",
49
- "$value": {
50
- "$ref": "Brand/Color/Functional/Success"
51
- }
52
- }
53
- },
54
- "Fill": {
55
- "Surface": {
56
- "$type": "color",
57
- "$value": {
58
- "$ref": "Color/Neutral/000"
59
- }
60
- },
61
- "Disabled": {
62
- "$type": "color",
63
- "$value": {
64
- "$ref": "Color/Neutral/300"
65
- }
66
- },
67
- "Hover": {
68
- "$type": "color",
69
- "$value": {
70
- "$ref": "Color/Neutral/Alpha/500"
71
- }
72
- },
73
- "Brand": {
74
- "$type": "color",
75
- "$value": {
76
- "$ref": "Brand/Color/Primary"
77
- }
78
- },
79
- "Subtle": {
80
- "$type": "color",
81
- "$value": {
82
- "$ref": "Brand/Color/Subtle Light"
83
- }
84
- },
85
- "Active": {
86
- "$type": "color",
87
- "$value": {
88
- "$ref": "Brand/Color/Accent"
89
- }
90
- },
91
- "Danger": {
92
- "$type": "color",
93
- "$value": {
94
- "$ref": "Brand/Color/Functional/Danger"
95
- }
96
- },
97
- "Success": {
98
- "$type": "color",
99
- "$value": {
100
- "$ref": "Brand/Color/Functional/Success"
101
- }
102
- }
103
- },
104
- "Border": {
105
- "Default": {
106
- "$type": "color",
107
- "$value": {
108
- "$ref": "Color/Neutral/800"
109
- }
110
- },
111
- "Subtle": {
112
- "$type": "color",
113
- "$value": {
114
- "$ref": "Brand/Color/Subtle"
115
- }
116
- },
117
- "Strong": {
118
- "$type": "color",
119
- "$value": {
120
- "$ref": "Color/Neutral/1000"
121
- }
122
- },
123
- "Brand": {
124
- "$type": "color",
125
- "$value": {
126
- "$ref": "Brand/Color/Primary"
127
- }
128
- },
129
- "Disabled": {
130
- "$type": "color",
131
- "$value": {
132
- "$ref": "Color/Neutral/500"
133
- }
134
- },
135
- "Danger": {
136
- "$type": "color",
137
- "$value": {
138
- "colorSpace": "srgb",
139
- "components": [
140
- 1,
141
- 0,
142
- 0
143
- ],
144
- "alpha": 1,
145
- "hex": "#FF0000"
146
- }
147
- }
148
- },
149
- "Overlay": {
150
- "Backdrop": {
151
- "$type": "color",
152
- "$value": {
153
- "$ref": "Color/Neutral/Alpha/400"
154
- }
155
- },
156
- "Hover": {
157
- "$type": "color",
158
- "$value": {
159
- "$ref": "Color/Neutral/Alpha/200"
160
- }
161
- },
162
- "Active": {
163
- "$type": "color",
164
- "$value": {
165
- "$ref": "Color/Neutral/Alpha/400"
166
- }
167
- },
168
- "Selected": {
169
- "$type": "color",
170
- "$value": {
171
- "$ref": "Color/Neutral/Alpha/600"
172
- }
173
- }
174
- },
175
- "Focus": {
176
- "$type": "color",
177
- "$value": {
178
- "$ref": "Brand/Color/Primary"
179
- }
180
- }
181
- }
182
- }