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/brand-a.tokens.json DELETED
@@ -1,192 +0,0 @@
1
- {
2
- "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
3
- "Brand": {
4
- "Color": {
5
- "Primary": {
6
- "$type": "color",
7
- "$value": {
8
- "colorSpace": "srgb",
9
- "components": [
10
- 0.5921568870544434,
11
- 0.27843138575553894,
12
- 1
13
- ],
14
- "alpha": 1,
15
- "hex": "#9747FF"
16
- }
17
- },
18
- "Primary Dark": {
19
- "$type": "color",
20
- "$value": {
21
- "colorSpace": "srgb",
22
- "components": [
23
- 0.3333333432674408,
24
- 0.10196078568696976,
25
- 0.545098066329956
26
- ],
27
- "alpha": 1,
28
- "hex": "#551A8B"
29
- }
30
- },
31
- "Accent": {
32
- "$type": "color",
33
- "$value": {
34
- "colorSpace": "srgb",
35
- "components": [
36
- 0.43921568989753723,
37
- 0.7960784435272217,
38
- 0.95686274766922
39
- ],
40
- "alpha": 1,
41
- "hex": "#70CBF4"
42
- }
43
- },
44
- "Subtle": {
45
- "$type": "color",
46
- "$value": {
47
- "colorSpace": "srgb",
48
- "components": [
49
- 0.501960813999176,
50
- 0.501960813999176,
51
- 0.501960813999176
52
- ],
53
- "alpha": 1,
54
- "hex": "#808080"
55
- }
56
- },
57
- "Subtle Light": {
58
- "$type": "color",
59
- "$value": {
60
- "colorSpace": "srgb",
61
- "components": [
62
- 0.800000011920929,
63
- 0.800000011920929,
64
- 0.800000011920929
65
- ],
66
- "alpha": 1,
67
- "hex": "#CCCCCC"
68
- }
69
- },
70
- "Subtle Dark": {
71
- "$type": "color",
72
- "$value": {
73
- "colorSpace": "srgb",
74
- "components": [
75
- 0.20000000298023224,
76
- 0.20000000298023224,
77
- 0.20000000298023224
78
- ],
79
- "alpha": 1,
80
- "hex": "#333333"
81
- }
82
- },
83
- "Accent Dark": {
84
- "$type": "color",
85
- "$value": {
86
- "colorSpace": "srgb",
87
- "components": [
88
- 0.0470588244497776,
89
- 0.29411765933036804,
90
- 0.9529411792755127
91
- ],
92
- "alpha": 1,
93
- "hex": "#0C4BF3"
94
- }
95
- },
96
- "Functional": {
97
- "Base": {
98
- "$type": "color",
99
- "$value": {
100
- "colorSpace": "srgb",
101
- "components": [
102
- 0.0470588244497776,
103
- 0.29411765933036804,
104
- 0.9529411792755127
105
- ],
106
- "alpha": 1,
107
- "hex": "#0C4BF3"
108
- }
109
- },
110
- "Base Dark": {
111
- "$type": "color",
112
- "$value": {
113
- "colorSpace": "srgb",
114
- "components": [
115
- 0.10588235408067703,
116
- 0.06666667014360428,
117
- 0.3607843220233917
118
- ],
119
- "alpha": 1,
120
- "hex": "#1B115C"
121
- }
122
- },
123
- "Success": {
124
- "$type": "color",
125
- "$value": {
126
- "colorSpace": "srgb",
127
- "components": [
128
- 0.07450980693101883,
129
- 0.6823529601097107,
130
- 0.3607843220233917
131
- ],
132
- "alpha": 1,
133
- "hex": "#13AE5C"
134
- }
135
- },
136
- "Danger": {
137
- "$type": "color",
138
- "$value": {
139
- "colorSpace": "srgb",
140
- "components": [
141
- 1,
142
- 0,
143
- 0
144
- ],
145
- "alpha": 1,
146
- "hex": "#FF0000"
147
- }
148
- }
149
- }
150
- },
151
- "Font": {
152
- "Lead": {
153
- "$type": "string",
154
- "$value": "Rokkitt"
155
- },
156
- "Base": {
157
- "$type": "string",
158
- "$value": "Inter"
159
- }
160
- },
161
- "Corner": {
162
- "Button": {
163
- "$type": "dimension",
164
- "$value": {
165
- "value": 10000,
166
- "unit": "px"
167
- }
168
- },
169
- "Input": {
170
- "$type": "dimension",
171
- "$value": {
172
- "value": 4,
173
- "unit": "px"
174
- }
175
- },
176
- "Card": {
177
- "$type": "dimension",
178
- "$value": {
179
- "value": 4,
180
- "unit": "px"
181
- }
182
- },
183
- "Modal": {
184
- "$type": "dimension",
185
- "$value": {
186
- "value": 8,
187
- "unit": "px"
188
- }
189
- }
190
- }
191
- }
192
- }
package/dist/tokens/json/brand-b.tokens.json DELETED
@@ -1,192 +0,0 @@
1
- {
2
- "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
3
- "Brand": {
4
- "Color": {
5
- "Primary": {
6
- "$type": "color",
7
- "$value": {
8
- "colorSpace": "srgb",
9
- "components": [
10
- 0.2571428418159485,
11
- 0.7298701405525208,
12
- 0.9428571462631226
13
- ],
14
- "alpha": 1,
15
- "hex": "#42BAF0"
16
- }
17
- },
18
- "Primary Dark": {
19
- "$type": "color",
20
- "$value": {
21
- "colorSpace": "srgb",
22
- "components": [
23
- 0.0376470573246479,
24
- 0.23529411852359772,
25
- 0.7623529434204102
26
- ],
27
- "alpha": 1,
28
- "hex": "#0A3CC2"
29
- }
30
- },
31
- "Accent": {
32
- "$type": "color",
33
- "$value": {
34
- "colorSpace": "srgb",
35
- "components": [
36
- 0.48000001907348633,
37
- 0.07999999821186066,
38
- 1
39
- ],
40
- "alpha": 1,
41
- "hex": "#7A14FF"
42
- }
43
- },
44
- "Subtle": {
45
- "$type": "color",
46
- "$value": {
47
- "colorSpace": "srgb",
48
- "components": [
49
- 0.501960813999176,
50
- 0.501960813999176,
51
- 0.501960813999176
52
- ],
53
- "alpha": 1,
54
- "hex": "#808080"
55
- }
56
- },
57
- "Subtle Light": {
58
- "$type": "color",
59
- "$value": {
60
- "colorSpace": "srgb",
61
- "components": [
62
- 0.800000011920929,
63
- 0.800000011920929,
64
- 0.800000011920929
65
- ],
66
- "alpha": 1,
67
- "hex": "#CCCCCC"
68
- }
69
- },
70
- "Subtle Dark": {
71
- "$type": "color",
72
- "$value": {
73
- "colorSpace": "srgb",
74
- "components": [
75
- 0.20000000298023224,
76
- 0.20000000298023224,
77
- 0.20000000298023224
78
- ],
79
- "alpha": 1,
80
- "hex": "#333333"
81
- }
82
- },
83
- "Accent Dark": {
84
- "$type": "color",
85
- "$value": {
86
- "colorSpace": "srgb",
87
- "components": [
88
- 0.226666659116745,
89
- 0.06933332979679108,
90
- 0.3706666827201843
91
- ],
92
- "alpha": 1,
93
- "hex": "#3A125F"
94
- }
95
- },
96
- "Functional": {
97
- "Base": {
98
- "$type": "color",
99
- "$value": {
100
- "colorSpace": "srgb",
101
- "components": [
102
- 0.48000001907348633,
103
- 0.07999999821186066,
104
- 1
105
- ],
106
- "alpha": 1,
107
- "hex": "#7A14FF"
108
- }
109
- },
110
- "Base Dark": {
111
- "$type": "color",
112
- "$value": {
113
- "colorSpace": "srgb",
114
- "components": [
115
- 0.226666659116745,
116
- 0.06933332979679108,
117
- 0.3706666827201843
118
- ],
119
- "alpha": 1,
120
- "hex": "#3A125F"
121
- }
122
- },
123
- "Success": {
124
- "$type": "color",
125
- "$value": {
126
- "colorSpace": "srgb",
127
- "components": [
128
- 0.055129535496234894,
129
- 0.5048704743385315,
130
- 0.2669430077075958
131
- ],
132
- "alpha": 1,
133
- "hex": "#0E8144"
134
- }
135
- },
136
- "Danger": {
137
- "$type": "color",
138
- "$value": {
139
- "colorSpace": "srgb",
140
- "components": [
141
- 0.800000011920929,
142
- 0,
143
- 0
144
- ],
145
- "alpha": 1,
146
- "hex": "#CC0000"
147
- }
148
- }
149
- }
150
- },
151
- "Font": {
152
- "Lead": {
153
- "$type": "string",
154
- "$value": "Rokkitt"
155
- },
156
- "Base": {
157
- "$type": "string",
158
- "$value": "Inter"
159
- }
160
- },
161
- "Corner": {
162
- "Button": {
163
- "$type": "dimension",
164
- "$value": {
165
- "value": 0,
166
- "unit": "px"
167
- }
168
- },
169
- "Input": {
170
- "$type": "dimension",
171
- "$value": {
172
- "value": 0,
173
- "unit": "px"
174
- }
175
- },
176
- "Card": {
177
- "$type": "dimension",
178
- "$value": {
179
- "value": 2,
180
- "unit": "px"
181
- }
182
- },
183
- "Modal": {
184
- "$type": "dimension",
185
- "$value": {
186
- "value": 4,
187
- "unit": "px"
188
- }
189
- }
190
- }
191
- }
192
- }