omnidesign 1.0.1 → 1.1.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 (17) hide show
  1. package/AGENTS.md +383 -0
  2. package/README.md +275 -433
  3. package/bin/cli.js +353 -152
  4. package/package.json +22 -7
  5. package/packages/tokens-css/dist/tokens.css +162 -0
  6. package/packages/tokens-tailwind/dist/index.js +315 -0
  7. package/packages/tokens-tailwind/dist/tailwind.config.js +339 -0
  8. package/packages/tokens-tailwind/dist/tailwind.config.json +339 -0
  9. package/packages/tokens-tailwind/dist/tokens.css +313 -0
  10. package/packages/tokens-tailwind/dist/utility-mapping.json +145 -0
  11. package/packages/tokens-tailwind/package.json +47 -0
  12. package/packages/tokens-tailwind/scripts/build-tailwind.js +285 -0
  13. package/packages/tokens-ts/dist/tokens.ts +1307 -0
  14. package/skills/opencode/omnidesign-tailwind.md +450 -0
  15. package/tokens/primitives/colors-extended.json +455 -0
  16. package/tokens/typography/nerd-fonts-catalog.json +511 -0
  17. package/tokens/typography/nerd-fonts-complete.json +1858 -0
package/packages/tokens-tailwind/dist/tokens.css ADDED
@@ -0,0 +1,313 @@
1
+ /* OmniDesign CSS Variables - Tailwind Compatible */
2
+ /* Auto-generated - Do not edit manually */
3
+
4
+ :root {
5
+ /* Neutral */
6
+ --color-neutral-50: var(--color-neutral-50, inherit);
7
+ --color-neutral-100: var(--color-neutral-100, inherit);
8
+ --color-neutral-200: var(--color-neutral-200, inherit);
9
+ --color-neutral-300: var(--color-neutral-300, inherit);
10
+ --color-neutral-400: var(--color-neutral-400, inherit);
11
+ --color-neutral-500: var(--color-neutral-500, inherit);
12
+ --color-neutral-600: var(--color-neutral-600, inherit);
13
+ --color-neutral-700: var(--color-neutral-700, inherit);
14
+ --color-neutral-800: var(--color-neutral-800, inherit);
15
+ --color-neutral-900: var(--color-neutral-900, inherit);
16
+ --color-neutral-950: var(--color-neutral-950, inherit);
17
+
18
+ /* Slate */
19
+ --color-slate-50: var(--color-slate-50, inherit);
20
+ --color-slate-100: var(--color-slate-100, inherit);
21
+ --color-slate-200: var(--color-slate-200, inherit);
22
+ --color-slate-300: var(--color-slate-300, inherit);
23
+ --color-slate-400: var(--color-slate-400, inherit);
24
+ --color-slate-500: var(--color-slate-500, inherit);
25
+ --color-slate-600: var(--color-slate-600, inherit);
26
+ --color-slate-700: var(--color-slate-700, inherit);
27
+ --color-slate-800: var(--color-slate-800, inherit);
28
+ --color-slate-900: var(--color-slate-900, inherit);
29
+ --color-slate-950: var(--color-slate-950, inherit);
30
+
31
+ /* Zinc */
32
+ --color-zinc-50: var(--color-zinc-50, inherit);
33
+ --color-zinc-100: var(--color-zinc-100, inherit);
34
+ --color-zinc-200: var(--color-zinc-200, inherit);
35
+ --color-zinc-300: var(--color-zinc-300, inherit);
36
+ --color-zinc-400: var(--color-zinc-400, inherit);
37
+ --color-zinc-500: var(--color-zinc-500, inherit);
38
+ --color-zinc-600: var(--color-zinc-600, inherit);
39
+ --color-zinc-700: var(--color-zinc-700, inherit);
40
+ --color-zinc-800: var(--color-zinc-800, inherit);
41
+ --color-zinc-900: var(--color-zinc-900, inherit);
42
+ --color-zinc-950: var(--color-zinc-950, inherit);
43
+
44
+ /* Stone */
45
+ --color-stone-50: var(--color-stone-50, inherit);
46
+ --color-stone-100: var(--color-stone-100, inherit);
47
+ --color-stone-200: var(--color-stone-200, inherit);
48
+ --color-stone-300: var(--color-stone-300, inherit);
49
+ --color-stone-400: var(--color-stone-400, inherit);
50
+ --color-stone-500: var(--color-stone-500, inherit);
51
+ --color-stone-600: var(--color-stone-600, inherit);
52
+ --color-stone-700: var(--color-stone-700, inherit);
53
+ --color-stone-800: var(--color-stone-800, inherit);
54
+ --color-stone-900: var(--color-stone-900, inherit);
55
+ --color-stone-950: var(--color-stone-950, inherit);
56
+
57
+ /* Red */
58
+ --color-red-50: var(--color-red-50, inherit);
59
+ --color-red-100: var(--color-red-100, inherit);
60
+ --color-red-200: var(--color-red-200, inherit);
61
+ --color-red-300: var(--color-red-300, inherit);
62
+ --color-red-400: var(--color-red-400, inherit);
63
+ --color-red-500: var(--color-red-500, inherit);
64
+ --color-red-600: var(--color-red-600, inherit);
65
+ --color-red-700: var(--color-red-700, inherit);
66
+ --color-red-800: var(--color-red-800, inherit);
67
+ --color-red-900: var(--color-red-900, inherit);
68
+ --color-red-950: var(--color-red-950, inherit);
69
+
70
+ /* Orange */
71
+ --color-orange-50: var(--color-orange-50, inherit);
72
+ --color-orange-100: var(--color-orange-100, inherit);
73
+ --color-orange-200: var(--color-orange-200, inherit);
74
+ --color-orange-300: var(--color-orange-300, inherit);
75
+ --color-orange-400: var(--color-orange-400, inherit);
76
+ --color-orange-500: var(--color-orange-500, inherit);
77
+ --color-orange-600: var(--color-orange-600, inherit);
78
+ --color-orange-700: var(--color-orange-700, inherit);
79
+ --color-orange-800: var(--color-orange-800, inherit);
80
+ --color-orange-900: var(--color-orange-900, inherit);
81
+ --color-orange-950: var(--color-orange-950, inherit);
82
+
83
+ /* Amber */
84
+ --color-amber-50: var(--color-amber-50, inherit);
85
+ --color-amber-100: var(--color-amber-100, inherit);
86
+ --color-amber-200: var(--color-amber-200, inherit);
87
+ --color-amber-300: var(--color-amber-300, inherit);
88
+ --color-amber-400: var(--color-amber-400, inherit);
89
+ --color-amber-500: var(--color-amber-500, inherit);
90
+ --color-amber-600: var(--color-amber-600, inherit);
91
+ --color-amber-700: var(--color-amber-700, inherit);
92
+ --color-amber-800: var(--color-amber-800, inherit);
93
+ --color-amber-900: var(--color-amber-900, inherit);
94
+ --color-amber-950: var(--color-amber-950, inherit);
95
+
96
+ /* Yellow */
97
+ --color-yellow-50: var(--color-yellow-50, inherit);
98
+ --color-yellow-100: var(--color-yellow-100, inherit);
99
+ --color-yellow-200: var(--color-yellow-200, inherit);
100
+ --color-yellow-300: var(--color-yellow-300, inherit);
101
+ --color-yellow-400: var(--color-yellow-400, inherit);
102
+ --color-yellow-500: var(--color-yellow-500, inherit);
103
+ --color-yellow-600: var(--color-yellow-600, inherit);
104
+ --color-yellow-700: var(--color-yellow-700, inherit);
105
+ --color-yellow-800: var(--color-yellow-800, inherit);
106
+ --color-yellow-900: var(--color-yellow-900, inherit);
107
+ --color-yellow-950: var(--color-yellow-950, inherit);
108
+
109
+ /* Lime */
110
+ --color-lime-50: var(--color-lime-50, inherit);
111
+ --color-lime-100: var(--color-lime-100, inherit);
112
+ --color-lime-200: var(--color-lime-200, inherit);
113
+ --color-lime-300: var(--color-lime-300, inherit);
114
+ --color-lime-400: var(--color-lime-400, inherit);
115
+ --color-lime-500: var(--color-lime-500, inherit);
116
+ --color-lime-600: var(--color-lime-600, inherit);
117
+ --color-lime-700: var(--color-lime-700, inherit);
118
+ --color-lime-800: var(--color-lime-800, inherit);
119
+ --color-lime-900: var(--color-lime-900, inherit);
120
+ --color-lime-950: var(--color-lime-950, inherit);
121
+
122
+ /* Green */
123
+ --color-green-50: var(--color-green-50, inherit);
124
+ --color-green-100: var(--color-green-100, inherit);
125
+ --color-green-200: var(--color-green-200, inherit);
126
+ --color-green-300: var(--color-green-300, inherit);
127
+ --color-green-400: var(--color-green-400, inherit);
128
+ --color-green-500: var(--color-green-500, inherit);
129
+ --color-green-600: var(--color-green-600, inherit);
130
+ --color-green-700: var(--color-green-700, inherit);
131
+ --color-green-800: var(--color-green-800, inherit);
132
+ --color-green-900: var(--color-green-900, inherit);
133
+ --color-green-950: var(--color-green-950, inherit);
134
+
135
+ /* Emerald */
136
+ --color-emerald-50: var(--color-emerald-50, inherit);
137
+ --color-emerald-100: var(--color-emerald-100, inherit);
138
+ --color-emerald-200: var(--color-emerald-200, inherit);
139
+ --color-emerald-300: var(--color-emerald-300, inherit);
140
+ --color-emerald-400: var(--color-emerald-400, inherit);
141
+ --color-emerald-500: var(--color-emerald-500, inherit);
142
+ --color-emerald-600: var(--color-emerald-600, inherit);
143
+ --color-emerald-700: var(--color-emerald-700, inherit);
144
+ --color-emerald-800: var(--color-emerald-800, inherit);
145
+ --color-emerald-900: var(--color-emerald-900, inherit);
146
+ --color-emerald-950: var(--color-emerald-950, inherit);
147
+
148
+ /* Teal */
149
+ --color-teal-50: var(--color-teal-50, inherit);
150
+ --color-teal-100: var(--color-teal-100, inherit);
151
+ --color-teal-200: var(--color-teal-200, inherit);
152
+ --color-teal-300: var(--color-teal-300, inherit);
153
+ --color-teal-400: var(--color-teal-400, inherit);
154
+ --color-teal-500: var(--color-teal-500, inherit);
155
+ --color-teal-600: var(--color-teal-600, inherit);
156
+ --color-teal-700: var(--color-teal-700, inherit);
157
+ --color-teal-800: var(--color-teal-800, inherit);
158
+ --color-teal-900: var(--color-teal-900, inherit);
159
+ --color-teal-950: var(--color-teal-950, inherit);
160
+
161
+ /* Cyan */
162
+ --color-cyan-50: var(--color-cyan-50, inherit);
163
+ --color-cyan-100: var(--color-cyan-100, inherit);
164
+ --color-cyan-200: var(--color-cyan-200, inherit);
165
+ --color-cyan-300: var(--color-cyan-300, inherit);
166
+ --color-cyan-400: var(--color-cyan-400, inherit);
167
+ --color-cyan-500: var(--color-cyan-500, inherit);
168
+ --color-cyan-600: var(--color-cyan-600, inherit);
169
+ --color-cyan-700: var(--color-cyan-700, inherit);
170
+ --color-cyan-800: var(--color-cyan-800, inherit);
171
+ --color-cyan-900: var(--color-cyan-900, inherit);
172
+ --color-cyan-950: var(--color-cyan-950, inherit);
173
+
174
+ /* Sky */
175
+ --color-sky-50: var(--color-sky-50, inherit);
176
+ --color-sky-100: var(--color-sky-100, inherit);
177
+ --color-sky-200: var(--color-sky-200, inherit);
178
+ --color-sky-300: var(--color-sky-300, inherit);
179
+ --color-sky-400: var(--color-sky-400, inherit);
180
+ --color-sky-500: var(--color-sky-500, inherit);
181
+ --color-sky-600: var(--color-sky-600, inherit);
182
+ --color-sky-700: var(--color-sky-700, inherit);
183
+ --color-sky-800: var(--color-sky-800, inherit);
184
+ --color-sky-900: var(--color-sky-900, inherit);
185
+ --color-sky-950: var(--color-sky-950, inherit);
186
+
187
+ /* Blue */
188
+ --color-blue-50: var(--color-blue-50, inherit);
189
+ --color-blue-100: var(--color-blue-100, inherit);
190
+ --color-blue-200: var(--color-blue-200, inherit);
191
+ --color-blue-300: var(--color-blue-300, inherit);
192
+ --color-blue-400: var(--color-blue-400, inherit);
193
+ --color-blue-500: var(--color-blue-500, inherit);
194
+ --color-blue-600: var(--color-blue-600, inherit);
195
+ --color-blue-700: var(--color-blue-700, inherit);
196
+ --color-blue-800: var(--color-blue-800, inherit);
197
+ --color-blue-900: var(--color-blue-900, inherit);
198
+ --color-blue-950: var(--color-blue-950, inherit);
199
+
200
+ /* Indigo */
201
+ --color-indigo-50: var(--color-indigo-50, inherit);
202
+ --color-indigo-100: var(--color-indigo-100, inherit);
203
+ --color-indigo-200: var(--color-indigo-200, inherit);
204
+ --color-indigo-300: var(--color-indigo-300, inherit);
205
+ --color-indigo-400: var(--color-indigo-400, inherit);
206
+ --color-indigo-500: var(--color-indigo-500, inherit);
207
+ --color-indigo-600: var(--color-indigo-600, inherit);
208
+ --color-indigo-700: var(--color-indigo-700, inherit);
209
+ --color-indigo-800: var(--color-indigo-800, inherit);
210
+ --color-indigo-900: var(--color-indigo-900, inherit);
211
+ --color-indigo-950: var(--color-indigo-950, inherit);
212
+
213
+ /* Violet */
214
+ --color-violet-50: var(--color-violet-50, inherit);
215
+ --color-violet-100: var(--color-violet-100, inherit);
216
+ --color-violet-200: var(--color-violet-200, inherit);
217
+ --color-violet-300: var(--color-violet-300, inherit);
218
+ --color-violet-400: var(--color-violet-400, inherit);
219
+ --color-violet-500: var(--color-violet-500, inherit);
220
+ --color-violet-600: var(--color-violet-600, inherit);
221
+ --color-violet-700: var(--color-violet-700, inherit);
222
+ --color-violet-800: var(--color-violet-800, inherit);
223
+ --color-violet-900: var(--color-violet-900, inherit);
224
+ --color-violet-950: var(--color-violet-950, inherit);
225
+
226
+ /* Purple */
227
+ --color-purple-50: var(--color-purple-50, inherit);
228
+ --color-purple-100: var(--color-purple-100, inherit);
229
+ --color-purple-200: var(--color-purple-200, inherit);
230
+ --color-purple-300: var(--color-purple-300, inherit);
231
+ --color-purple-400: var(--color-purple-400, inherit);
232
+ --color-purple-500: var(--color-purple-500, inherit);
233
+ --color-purple-600: var(--color-purple-600, inherit);
234
+ --color-purple-700: var(--color-purple-700, inherit);
235
+ --color-purple-800: var(--color-purple-800, inherit);
236
+ --color-purple-900: var(--color-purple-900, inherit);
237
+ --color-purple-950: var(--color-purple-950, inherit);
238
+
239
+ /* Fuchsia */
240
+ --color-fuchsia-50: var(--color-fuchsia-50, inherit);
241
+ --color-fuchsia-100: var(--color-fuchsia-100, inherit);
242
+ --color-fuchsia-200: var(--color-fuchsia-200, inherit);
243
+ --color-fuchsia-300: var(--color-fuchsia-300, inherit);
244
+ --color-fuchsia-400: var(--color-fuchsia-400, inherit);
245
+ --color-fuchsia-500: var(--color-fuchsia-500, inherit);
246
+ --color-fuchsia-600: var(--color-fuchsia-600, inherit);
247
+ --color-fuchsia-700: var(--color-fuchsia-700, inherit);
248
+ --color-fuchsia-800: var(--color-fuchsia-800, inherit);
249
+ --color-fuchsia-900: var(--color-fuchsia-900, inherit);
250
+ --color-fuchsia-950: var(--color-fuchsia-950, inherit);
251
+
252
+ /* Pink */
253
+ --color-pink-50: var(--color-pink-50, inherit);
254
+ --color-pink-100: var(--color-pink-100, inherit);
255
+ --color-pink-200: var(--color-pink-200, inherit);
256
+ --color-pink-300: var(--color-pink-300, inherit);
257
+ --color-pink-400: var(--color-pink-400, inherit);
258
+ --color-pink-500: var(--color-pink-500, inherit);
259
+ --color-pink-600: var(--color-pink-600, inherit);
260
+ --color-pink-700: var(--color-pink-700, inherit);
261
+ --color-pink-800: var(--color-pink-800, inherit);
262
+ --color-pink-900: var(--color-pink-900, inherit);
263
+ --color-pink-950: var(--color-pink-950, inherit);
264
+
265
+ /* Rose */
266
+ --color-rose-50: var(--color-rose-50, inherit);
267
+ --color-rose-100: var(--color-rose-100, inherit);
268
+ --color-rose-200: var(--color-rose-200, inherit);
269
+ --color-rose-300: var(--color-rose-300, inherit);
270
+ --color-rose-400: var(--color-rose-400, inherit);
271
+ --color-rose-500: var(--color-rose-500, inherit);
272
+ --color-rose-600: var(--color-rose-600, inherit);
273
+ --color-rose-700: var(--color-rose-700, inherit);
274
+ --color-rose-800: var(--color-rose-800, inherit);
275
+ --color-rose-900: var(--color-rose-900, inherit);
276
+ --color-rose-950: var(--color-rose-950, inherit);
277
+
278
+ /* Semantic Tokens - Light Mode */
279
+ --color-text-default: var(--color-slate-900);
280
+ --color-text-muted: var(--color-slate-500);
281
+ --color-text-inverted: var(--color-white-undefined);
282
+ --color-surface-default: var(--color-white-undefined);
283
+ --color-surface-raised: var(--color-slate-50);
284
+ --color-surface-sunken: var(--color-slate-100);
285
+ --color-border-default: var(--color-slate-200);
286
+ --color-border-subtle: var(--color-slate-100);
287
+ --color-interactive-primary: var(--color-blue-600);
288
+ --color-interactive-primary-hover: var(--color-blue-700);
289
+ --color-interactive-secondary: var(--color-slate-600);
290
+ --color-status-success: var(--color-green-600);
291
+ --color-status-warning: var(--color-amber-500);
292
+ --color-status-error: var(--color-red-600);
293
+ --color-status-info: var(--color-blue-500);
294
+ }
295
+
296
+ .dark {
297
+ /* Semantic Tokens - Dark Mode */
298
+ --color-text-default: var(--color-slate-50);
299
+ --color-text-muted: var(--color-slate-400);
300
+ --color-text-inverted: var(--color-slate-950);
301
+ --color-surface-default: var(--color-slate-950);
302
+ --color-surface-raised: var(--color-slate-900);
303
+ --color-surface-sunken: var(--color-slate-950);
304
+ --color-border-default: var(--color-slate-800);
305
+ --color-border-subtle: var(--color-slate-900);
306
+ --color-interactive-primary: var(--color-blue-500);
307
+ --color-interactive-primary-hover: var(--color-blue-400);
308
+ --color-interactive-secondary: var(--color-slate-500);
309
+ --color-status-success: var(--color-green-500);
310
+ --color-status-warning: var(--color-amber-400);
311
+ --color-status-error: var(--color-red-500);
312
+ --color-status-info: var(--color-blue-400);
313
+ }
package/packages/tokens-tailwind/dist/utility-mapping.json ADDED
@@ -0,0 +1,145 @@
1
+ {
2
+ "_meta": {
3
+ "version": "1.0.0",
4
+ "description": "Token to Tailwind utility class mapping",
5
+ "generated": "2026-01-31T20:08:20.439Z"
6
+ },
7
+ "colors": {
8
+ "text-default": {
9
+ "token": "color.text-default",
10
+ "tailwindUtility": "bg-text-default text-text-default border-text-default",
11
+ "cssVariable": "var(--color-text-default)",
12
+ "hexReference": "{slate.900}",
13
+ "usage": "Primary body text on light surfaces",
14
+ "example": "<p class=\"text-text\">Primary text content</p>"
15
+ },
16
+ "text-muted": {
17
+ "token": "color.text-muted",
18
+ "tailwindUtility": "bg-text-muted text-text-muted border-text-muted",
19
+ "cssVariable": "var(--color-text-muted)",
20
+ "hexReference": "{slate.500}",
21
+ "usage": "Secondary text, captions, helper text",
22
+ "example": "<p class=\"text-text-muted\">Secondary helper text</p>"
23
+ },
24
+ "text-inverted": {
25
+ "token": "color.text-inverted",
26
+ "tailwindUtility": "bg-text-inverted text-text-inverted border-text-inverted",
27
+ "cssVariable": "var(--color-text-inverted)",
28
+ "hexReference": "{white}",
29
+ "usage": "Text on dark or colored backgrounds",
30
+ "example": "<div class=\"bg-blue-600 text-text-inverted p-4\">Text on dark background</div>"
31
+ },
32
+ "surface-default": {
33
+ "token": "color.surface-default",
34
+ "tailwindUtility": "bg-surface-default text-surface-default border-surface-default",
35
+ "cssVariable": "var(--color-surface-default)",
36
+ "hexReference": "{white}",
37
+ "usage": "Default page/app background",
38
+ "example": "<div class=\"bg-surface-default min-h-screen\">Page content</div>"
39
+ },
40
+ "surface-raised": {
41
+ "token": "color.surface-raised",
42
+ "tailwindUtility": "bg-surface-raised text-surface-raised border-surface-raised",
43
+ "cssVariable": "var(--color-surface-raised)",
44
+ "hexReference": "{slate.50}",
45
+ "usage": "Cards, elevated surfaces, modals",
46
+ "example": "<div class=\"bg-surface-raised rounded-lg shadow p-6\">Card content</div>"
47
+ },
48
+ "surface-sunken": {
49
+ "token": "color.surface-sunken",
50
+ "tailwindUtility": "bg-surface-sunken text-surface-sunken border-surface-sunken",
51
+ "cssVariable": "var(--color-surface-sunken)",
52
+ "hexReference": "{slate.100}",
53
+ "usage": "Input fields, depressed areas, wells",
54
+ "example": "<div class=\"bg-surface-sunken p-4 rounded-md\">Input container</div>"
55
+ },
56
+ "border-default": {
57
+ "token": "color.border-default",
58
+ "tailwindUtility": "bg-border-default text-border-default border-border-default",
59
+ "cssVariable": "var(--color-border-default)",
60
+ "hexReference": "{slate.200}",
61
+ "usage": "Default border color for inputs and dividers",
62
+ "example": "<div class=\"border border-border rounded-md\">Bordered element</div>"
63
+ },
64
+ "border-subtle": {
65
+ "token": "color.border-subtle",
66
+ "tailwindUtility": "bg-border-subtle text-border-subtle border-border-subtle",
67
+ "cssVariable": "var(--color-border-subtle)",
68
+ "hexReference": "{slate.100}",
69
+ "usage": "Very light borders for subtle separation",
70
+ "example": "<hr class=\"border-border-subtle\" />"
71
+ },
72
+ "interactive-primary": {
73
+ "token": "color.interactive-primary",
74
+ "tailwindUtility": "bg-interactive-primary text-interactive-primary border-interactive-primary",
75
+ "cssVariable": "var(--color-interactive-primary)",
76
+ "hexReference": "{blue.600}",
77
+ "usage": "Primary buttons, links, CTAs",
78
+ "example": "<button class=\"bg-interactive-primary text-text-inverted px-4 py-2 rounded\">Click me</button>"
79
+ },
80
+ "interactive-primary-hover": {
81
+ "token": "color.interactive-primary-hover",
82
+ "tailwindUtility": "bg-interactive-primary-hover text-interactive-primary-hover border-interactive-primary-hover",
83
+ "cssVariable": "var(--color-interactive-primary-hover)",
84
+ "hexReference": "{blue.700}",
85
+ "usage": "Hover state for primary interactive elements",
86
+ "example": "<button class=\"bg-interactive-primary hover:bg-interactive-primary-hover transition-colors\">Hover me</button>"
87
+ },
88
+ "interactive-secondary": {
89
+ "token": "color.interactive-secondary",
90
+ "tailwindUtility": "bg-interactive-secondary text-interactive-secondary border-interactive-secondary",
91
+ "cssVariable": "var(--color-interactive-secondary)",
92
+ "hexReference": "{slate.600}",
93
+ "usage": "Secondary buttons, less prominent actions",
94
+ "example": "<button class=\"bg-interactive-secondary text-text-inverted px-4 py-2 rounded\">Secondary</button>"
95
+ },
96
+ "status-success": {
97
+ "token": "color.status-success",
98
+ "tailwindUtility": "bg-status-success text-status-success border-status-success",
99
+ "cssVariable": "var(--color-status-success)",
100
+ "hexReference": "{green.600}",
101
+ "usage": "Success messages, confirmations, positive indicators",
102
+ "example": "<span class=\"text-status-success font-medium\">✓ Success</span>"
103
+ },
104
+ "status-warning": {
105
+ "token": "color.status-warning",
106
+ "tailwindUtility": "bg-status-warning text-status-warning border-status-warning",
107
+ "cssVariable": "var(--color-status-warning)",
108
+ "hexReference": "{amber.500}",
109
+ "usage": "Warning messages, caution indicators",
110
+ "example": "<span class=\"text-status-warning font-medium\">⚠ Warning</span>"
111
+ },
112
+ "status-error": {
113
+ "token": "color.status-error",
114
+ "tailwindUtility": "bg-status-error text-status-error border-status-error",
115
+ "cssVariable": "var(--color-status-error)",
116
+ "hexReference": "{red.600}",
117
+ "usage": "Error messages, destructive actions, validation errors",
118
+ "example": "<span class=\"text-status-error font-medium\">✕ Error</span>"
119
+ },
120
+ "status-info": {
121
+ "token": "color.status-info",
122
+ "tailwindUtility": "bg-status-info text-status-info border-status-info",
123
+ "cssVariable": "var(--color-status-info)",
124
+ "hexReference": "{blue.500}",
125
+ "usage": "Informational messages, tips, neutral alerts",
126
+ "example": "<span class=\"text-status-info font-medium\">ℹ Info</span>"
127
+ }
128
+ },
129
+ "spacing": {},
130
+ "typography": {},
131
+ "examples": {
132
+ "button": {
133
+ "primary": "<button class=\"bg-interactive-primary hover:bg-interactive-primary-hover text-text-inverted px-4 py-2 rounded-md font-medium shadow-card transition-colors focus:outline-none focus:ring-2 focus:ring-focus-ring\">Primary</button>",
134
+ "secondary": "<button class=\"bg-surface-raised hover:bg-surface text-text border border-border px-4 py-2 rounded-md font-medium transition-colors\">Secondary</button>",
135
+ "destructive": "<button class=\"bg-status-error hover:bg-red-700 text-text-inverted px-4 py-2 rounded-md font-medium transition-colors\">Delete</button>"
136
+ },
137
+ "card": "<div class=\"bg-surface-raised rounded-lg shadow-card p-6 border border-border-subtle\"><h3 class=\"text-xl font-semibold text-text mb-2\">Card Title</h3><p class=\"text-text-muted\">Card content with semantic colors.</p></div>",
138
+ "input": "<input class=\"bg-surface-sunken text-text border border-border rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-interactive-primary focus:border-transparent placeholder-text-muted\" placeholder=\"Enter text...\" />",
139
+ "alert": {
140
+ "success": "<div class=\"bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-md\"><p class=\"font-medium\">Success!</p><p class=\"text-sm\">Operation completed successfully.</p></div>",
141
+ "warning": "<div class=\"bg-amber-50 border border-amber-200 text-amber-800 px-4 py-3 rounded-md\"><p class=\"font-medium\">Warning!</p><p class=\"text-sm\">Please review your input.</p></div>",
142
+ "error": "<div class=\"bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-md\"><p class=\"font-medium\">Error!</p><p class=\"text-sm\">Something went wrong.</p></div>"
143
+ }
144
+ }
145
+ }
package/packages/tokens-tailwind/package.json ADDED
@@ -0,0 +1,47 @@
1
+ {
2
+ "name": "@omnidesign/tokens-tailwind",
3
+ "version": "1.0.0",
4
+ "description": "Tailwind CSS integration for OmniDesign tokens - generates tailwind.config.js and utility class mappings",
5
+ "type": "module",
6
+ "main": "./dist/index.js",
7
+ "exports": {
8
+ ".": {
9
+ "import": "./dist/index.js",
10
+ "types": "./dist/index.d.ts"
11
+ },
12
+ "./config": {
13
+ "import": "./dist/generate-config.js",
14
+ "types": "./dist/generate-config.d.ts"
15
+ },
16
+ "./mapping": {
17
+ "import": "./dist/utility-mapping.json",
18
+ "types": "./dist/utility-mapping.d.ts"
19
+ },
20
+ "./recipes": {
21
+ "import": "./dist/component-recipes.js",
22
+ "types": "./dist/component-recipes.d.ts"
23
+ }
24
+ },
25
+ "scripts": {
26
+ "build": "node scripts/build-tailwind.js",
27
+ "generate": "npm run build",
28
+ "test": "node --test"
29
+ },
30
+ "keywords": [
31
+ "tailwind",
32
+ "tailwindcss",
33
+ "design-tokens",
34
+ "omnidesign",
35
+ "css",
36
+ "theme",
37
+ "configuration"
38
+ ],
39
+ "author": "OmniDesign Team",
40
+ "license": "MIT",
41
+ "peerDependencies": {
42
+ "tailwindcss": ">=3.0.0"
43
+ },
44
+ "devDependencies": {
45
+ "tailwindcss": "^3.4.0"
46
+ }
47
+ }