ui-foundations 0.1.1 → 0.3.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 (45) hide show
  1. package/README.md +68 -227
  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/assistant-behavior-rules.md +16 -0
  32. package/docs/agentic/skills/README.md +51 -0
  33. package/docs/agentic/skills/design-ops-specialist/SKILL.md +60 -0
  34. package/docs/agentic/skills/design-system-architect/SKILL.md +106 -0
  35. package/docs/agentic/team-ai-playbook.md +226 -0
  36. package/docs/foundations/foundation-010-implementation-and-pipeline-workflow.md +82 -0
  37. package/docs/foundations/foundation-011-branching-and-release-governance.md +42 -0
  38. package/docs/foundations/foundation-012-minimal-markup-and-composition.md +42 -0
  39. package/package.json +24 -12
  40. package/dist/tokens/json/brand-a.tokens.json +0 -192
  41. package/dist/tokens/json/brand-b.tokens.json +0 -192
  42. package/dist/tokens/json/color.dark.tokens.json +0 -364
  43. package/dist/tokens/json/color.light.tokens.json +0 -364
  44. package/dist/tokens/json/component.tokens.json +0 -1101
  45. package/dist/tokens/json/semantic.tokens.json +0 -206
package/dist/tokens/json/semantics-(roles).tokens.json ADDED
@@ -0,0 +1,203 @@
1
+ {
2
+ "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
3
+ "Typography": {
4
+ "Heading": {
5
+ "Font Family": {
6
+ "$type": "fontFamily",
7
+ "$value": {
8
+ "$ref": "Brand/Font/Lead"
9
+ }
10
+ },
11
+ "Font Size": {
12
+ "md": {
13
+ "$type": "number",
14
+ "$value": {
15
+ "$ref": "Font/Size/md"
16
+ }
17
+ },
18
+ "xs": {
19
+ "$type": "number",
20
+ "$value": {
21
+ "$ref": "Font/Size/xs"
22
+ }
23
+ },
24
+ "sm": {
25
+ "$type": "number",
26
+ "$value": {
27
+ "$ref": "Font/Size/sm"
28
+ }
29
+ },
30
+ "lg": {
31
+ "$type": "number",
32
+ "$value": {
33
+ "$ref": "Font/Size/lg"
34
+ }
35
+ },
36
+ "xl": {
37
+ "$type": "number",
38
+ "$value": {
39
+ "$ref": "Font/Size/xl"
40
+ }
41
+ },
42
+ "xxl": {
43
+ "$type": "number",
44
+ "$value": {
45
+ "$ref": "Font/Size/xxl"
46
+ }
47
+ },
48
+ "xxxl": {
49
+ "$type": "number",
50
+ "$value": {
51
+ "$ref": "Font/Size/xxxl"
52
+ }
53
+ }
54
+ },
55
+ "Font Weight": {
56
+ "$type": "fontWeight",
57
+ "$value": {
58
+ "$ref": "Font/Weight/700"
59
+ }
60
+ },
61
+ "Line Height": {
62
+ "md": {
63
+ "$type": "number",
64
+ "$value": {
65
+ "$ref": "Line Height/md"
66
+ }
67
+ },
68
+ "xs": {
69
+ "$type": "number",
70
+ "$value": {
71
+ "$ref": "Line Height/xs"
72
+ }
73
+ },
74
+ "sm": {
75
+ "$type": "number",
76
+ "$value": {
77
+ "$ref": "Line Height/sm"
78
+ }
79
+ },
80
+ "lg": {
81
+ "$type": "number",
82
+ "$value": {
83
+ "$ref": "Line Height/lg"
84
+ }
85
+ },
86
+ "xl": {
87
+ "$type": "number",
88
+ "$value": {
89
+ "$ref": "Line Height/xl"
90
+ }
91
+ },
92
+ "xxl": {
93
+ "$type": "number",
94
+ "$value": {
95
+ "$ref": "Line Height/xxl"
96
+ }
97
+ },
98
+ "xxxl": {
99
+ "$type": "number",
100
+ "$value": {
101
+ "$ref": "Line Height/xxxl"
102
+ }
103
+ }
104
+ }
105
+ },
106
+ "Code": {
107
+ "$type": "fontFamily",
108
+ "$value": {
109
+ "$ref": "Font/Family/Mono"
110
+ }
111
+ },
112
+ "Label": {
113
+ "Font Family": {
114
+ "$type": "fontFamily",
115
+ "$value": {
116
+ "$ref": "Brand/Font/Lead"
117
+ }
118
+ },
119
+ "Font Weight": {
120
+ "$type": "fontWeight",
121
+ "$value": {
122
+ "$ref": "Font/Weight/600"
123
+ }
124
+ },
125
+ "Font Size": {
126
+ "$type": "number",
127
+ "$value": {
128
+ "$ref": "Font/Size/md"
129
+ }
130
+ },
131
+ "Line Height": {
132
+ "$type": "number",
133
+ "$value": {
134
+ "$ref": "Line Height/md"
135
+ }
136
+ },
137
+ "Gap": {
138
+ "$type": "number",
139
+ "$value": {
140
+ "$ref": "Size/Spacing/200"
141
+ }
142
+ }
143
+ },
144
+ "Body": {
145
+ "Font Family": {
146
+ "$type": "fontFamily",
147
+ "$value": {
148
+ "$ref": "Brand/Font/Base"
149
+ }
150
+ },
151
+ "Font Weight": {
152
+ "$type": "fontWeight",
153
+ "$value": {
154
+ "$ref": "Font/Weight/400"
155
+ }
156
+ },
157
+ "Font Size": {
158
+ "$type": "number",
159
+ "$value": {
160
+ "$ref": "Font/Size/md"
161
+ }
162
+ },
163
+ "Line Height": {
164
+ "$type": "number",
165
+ "$value": {
166
+ "$ref": "Line Height/md"
167
+ }
168
+ }
169
+ }
170
+ },
171
+ "Corner": {
172
+ "Button Radius": {
173
+ "$type": "number",
174
+ "$value": {
175
+ "$ref": "Brand/Corner/Button"
176
+ }
177
+ },
178
+ "Card Radius": {
179
+ "$type": "number",
180
+ "$value": {
181
+ "$ref": "Brand/Corner/Card"
182
+ }
183
+ },
184
+ "Modal Radius": {
185
+ "$type": "number",
186
+ "$value": {
187
+ "$ref": "Brand/Corner/Modal"
188
+ }
189
+ },
190
+ "Form Radius": {
191
+ "$type": "number",
192
+ "$value": {
193
+ "$ref": "Brand/Corner/Card"
194
+ }
195
+ },
196
+ "Checkbox Radius": {
197
+ "$type": "number",
198
+ "$value": {
199
+ "$ref": "Brand/Corner/Input"
200
+ }
201
+ }
202
+ }
203
+ }
package/dist/tokens/json/themes-(brands).tokens.brand-a.json ADDED
@@ -0,0 +1,115 @@
1
+ {
2
+ "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
3
+ "Brand": {
4
+ "Color": {
5
+ "Functional": {
6
+ "Success": {
7
+ "$type": "color",
8
+ "$value": {
9
+ "$ref": "Color/Brand A/Green"
10
+ }
11
+ },
12
+ "Danger": {
13
+ "$type": "color",
14
+ "$value": {
15
+ "$ref": "Color/Brand A/Red"
16
+ }
17
+ },
18
+ "Base": {
19
+ "$type": "color",
20
+ "$value": {
21
+ "$ref": "Color/Brand A/Blue/700"
22
+ }
23
+ },
24
+ "Base Dark": {
25
+ "$type": "color",
26
+ "$value": {
27
+ "$ref": "Color/Brand A/Blue/800"
28
+ }
29
+ }
30
+ },
31
+ "Primary": {
32
+ "$type": "color",
33
+ "$value": {
34
+ "$ref": "Color/Brand A/Purple/600"
35
+ }
36
+ },
37
+ "Accent": {
38
+ "$type": "color",
39
+ "$value": {
40
+ "$ref": "Color/Brand A/Blue/500"
41
+ }
42
+ },
43
+ "Primary Dark": {
44
+ "$type": "color",
45
+ "$value": {
46
+ "$ref": "Color/Brand A/Purple/800"
47
+ }
48
+ },
49
+ "Accent Dark": {
50
+ "$type": "color",
51
+ "$value": {
52
+ "$ref": "Color/Brand A/Blue/700"
53
+ }
54
+ },
55
+ "Subtle": {
56
+ "$type": "color",
57
+ "$value": {
58
+ "$ref": "Color/Neutral/500"
59
+ }
60
+ },
61
+ "Subtle Dark": {
62
+ "$type": "color",
63
+ "$value": {
64
+ "$ref": "Color/Neutral/800"
65
+ }
66
+ },
67
+ "Subtle Light": {
68
+ "$type": "color",
69
+ "$value": {
70
+ "$ref": "Color/Neutral/200"
71
+ }
72
+ }
73
+ },
74
+ "Font": {
75
+ "Base": {
76
+ "$type": "string",
77
+ "$value": {
78
+ "$ref": "Font/Family/Sans"
79
+ }
80
+ },
81
+ "Lead": {
82
+ "$type": "string",
83
+ "$value": {
84
+ "$ref": "Font/Family/Serif"
85
+ }
86
+ }
87
+ },
88
+ "Corner": {
89
+ "Button": {
90
+ "$type": "number",
91
+ "$value": {
92
+ "$ref": "Size/Radius/700"
93
+ }
94
+ },
95
+ "Card": {
96
+ "$type": "number",
97
+ "$value": {
98
+ "$ref": "Size/Radius/200"
99
+ }
100
+ },
101
+ "Modal": {
102
+ "$type": "number",
103
+ "$value": {
104
+ "$ref": "Size/Radius/400"
105
+ }
106
+ },
107
+ "Input": {
108
+ "$type": "number",
109
+ "$value": {
110
+ "$ref": "Size/Radius/200"
111
+ }
112
+ }
113
+ }
114
+ }
115
+ }
package/dist/tokens/json/themes-(brands).tokens.brand-b.json ADDED
@@ -0,0 +1,115 @@
1
+ {
2
+ "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
3
+ "Brand": {
4
+ "Color": {
5
+ "Functional": {
6
+ "Success": {
7
+ "$type": "color",
8
+ "$value": {
9
+ "$ref": "Color/Brand A/Green"
10
+ }
11
+ },
12
+ "Danger": {
13
+ "$type": "color",
14
+ "$value": {
15
+ "$ref": "Color/Brand A/Red"
16
+ }
17
+ },
18
+ "Base": {
19
+ "$type": "color",
20
+ "$value": {
21
+ "$ref": "Color/Brand A/Blue/700"
22
+ }
23
+ },
24
+ "Base Dark": {
25
+ "$type": "color",
26
+ "$value": {
27
+ "$ref": "Color/Brand A/Blue/800"
28
+ }
29
+ }
30
+ },
31
+ "Primary": {
32
+ "$type": "color",
33
+ "$value": {
34
+ "$ref": "Color/Brand A/Purple/600"
35
+ }
36
+ },
37
+ "Accent": {
38
+ "$type": "color",
39
+ "$value": {
40
+ "$ref": "Color/Brand A/Blue/500"
41
+ }
42
+ },
43
+ "Primary Dark": {
44
+ "$type": "color",
45
+ "$value": {
46
+ "$ref": "Color/Brand A/Purple/800"
47
+ }
48
+ },
49
+ "Accent Dark": {
50
+ "$type": "color",
51
+ "$value": {
52
+ "$ref": "Color/Brand A/Blue/700"
53
+ }
54
+ },
55
+ "Subtle": {
56
+ "$type": "color",
57
+ "$value": {
58
+ "$ref": "Color/Neutral/500"
59
+ }
60
+ },
61
+ "Subtle Dark": {
62
+ "$type": "color",
63
+ "$value": {
64
+ "$ref": "Color/Neutral/800"
65
+ }
66
+ },
67
+ "Subtle Light": {
68
+ "$type": "color",
69
+ "$value": {
70
+ "$ref": "Color/Neutral/200"
71
+ }
72
+ }
73
+ },
74
+ "Font": {
75
+ "Base": {
76
+ "$type": "string",
77
+ "$value": {
78
+ "$ref": "Font/Family/Sans"
79
+ }
80
+ },
81
+ "Lead": {
82
+ "$type": "string",
83
+ "$value": {
84
+ "$ref": "Font/Family/Serif"
85
+ }
86
+ }
87
+ },
88
+ "Corner": {
89
+ "Button": {
90
+ "$type": "number",
91
+ "$value": {
92
+ "$ref": "Size/Radius/700"
93
+ }
94
+ },
95
+ "Card": {
96
+ "$type": "number",
97
+ "$value": {
98
+ "$ref": "Size/Radius/200"
99
+ }
100
+ },
101
+ "Modal": {
102
+ "$type": "number",
103
+ "$value": {
104
+ "$ref": "Size/Radius/400"
105
+ }
106
+ },
107
+ "Input": {
108
+ "$type": "number",
109
+ "$value": {
110
+ "$ref": "Size/Radius/200"
111
+ }
112
+ }
113
+ }
114
+ }
115
+ }