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/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "omnidesign",
3
- "version": "1.0.1",
4
- "description": "Universal design system skill for AI coding assistants - Works with Claude Code, Cursor, OpenCode, VS Code, and more",
3
+ "version": "1.1.0",
4
+ "description": "Universal design system with Tailwind CSS integration - 25 themes, 176 colors, 39 Nerd Fonts, and AI-ready component recipes for Claude Code, Cursor, OpenCode, and more",
5
5
  "type": "module",
6
6
  "main": "index.js",
7
7
  "bin": {
@@ -9,19 +9,25 @@
9
9
  "omnidesign-install": "bin/install.js"
10
10
  },
11
11
  "scripts": {
12
- "build": "bun run scripts/build-tokens.js",
12
+ "build": "bun run scripts/build-tokens.js && bun run build:tailwind",
13
+ "build:tailwind": "cd packages/tokens-tailwind && node scripts/build-tailwind.js",
14
+ "build:fonts": "node scripts/generate-nerd-fonts-catalog.js",
13
15
  "validate": "bun run scripts/validate-tokens.js",
14
16
  "lint": "biome lint .",
15
17
  "format": "biome format . --write",
16
18
  "format:check": "biome format .",
17
19
  "check": "bun run format:check && bun run lint && bun run validate",
18
20
  "themes:list": "bun run -e \"const fs=require('fs');const themes=fs.readdirSync('tokens/themes').filter(f=>f.endsWith('.json')).map(f=>f.replace('.json','')).sort();console.log('\\n🎨 Available Themes ('+themes.length+'):\\n');themes.forEach(t=>console.log(' •',t));console.log();\"",
19
- "fonts:list": "bun run -e \"const data=require('./tokens/typography/font-collection.json');console.log('\\n🔤 Font Families:\\n');Object.entries(data.families).forEach(([cat,families])=>{console.log(cat+':');Object.keys(families).forEach(f=>console.log(' •',f));console.log();});\"",
20
- "postinstall": "node bin/detect-ide.js"
21
+ "fonts:list": "bun run -e \"const data=require('./tokens/typography/nerd-fonts-complete.json');console.log('\\n🔤 Nerd Fonts ('+Object.keys(data.fonts).length+'):\\n');Object.entries(data.fonts).forEach(([id,font])=>{console.log(' • '+font.name);});console.log();\"",
22
+ "colors:list": "bun run -e \"const data=require('./tokens/primitives/colors-extended.json');console.log('\\n🎨 Color Families ('+Object.keys(data.families).length+'):\\n');Object.entries(data.families).forEach(([name,family])=>{console.log(' • '+name+' - '+family.description);});console.log();\"",
23
+ "postinstall": "node bin/detect-ide.js",
24
+ "prepublishOnly": "bun run build"
21
25
  },
22
26
  "keywords": [
23
27
  "design-system",
24
28
  "design-tokens",
29
+ "tailwind",
30
+ "tailwindcss",
25
31
  "themes",
26
32
  "components",
27
33
  "ui-library",
@@ -34,7 +40,9 @@
34
40
  "opencode",
35
41
  "vscode",
36
42
  "skill",
37
- "plugin"
43
+ "plugin",
44
+ "color-palette",
45
+ "component-library"
38
46
  ],
39
47
  "author": "OmniDesign Team",
40
48
  "license": "MIT",
@@ -53,14 +61,21 @@
53
61
  "packages/",
54
62
  "bin/",
55
63
  "skills/",
64
+ "docs/",
56
65
  "README.md",
57
66
  "QUICKREF.md",
58
- "logo.jpg"
67
+ "logo.jpg",
68
+ "AGENTS.md"
59
69
  ],
60
70
  "exports": {
61
71
  "./tokens": "./packages/tokens-css/dist/tokens.css",
62
72
  "./tokens-ts": "./packages/tokens-ts/dist/tokens.ts",
73
+ "./tailwind": "./packages/tokens-tailwind/dist/tailwind.config.js",
74
+ "./tailwind-config": "./packages/tokens-tailwind/dist/tailwind.config.json",
75
+ "./tailwind-mapping": "./packages/tokens-tailwind/dist/utility-mapping.json",
63
76
  "./react": "./packages/react/dist/index.js",
77
+ "./colors": "./tokens/primitives/colors-extended.json",
78
+ "./fonts": "./tokens/typography/nerd-fonts-complete.json",
64
79
  "./skill/claude": "./skills/claude/",
65
80
  "./skill/cursor": "./skills/cursor/",
66
81
  "./skill/opencode": "./skills/opencode/",
package/packages/tokens-css/dist/tokens.css ADDED
@@ -0,0 +1,162 @@
1
+ /* Auto-generated CSS tokens - DO NOT EDIT */
2
+ /* Generated by build-tokens.js */
3
+
4
+ :root {
5
+ --color-neutral-50: #FAFAFA;
6
+ --color-neutral-100: #F5F5F5;
7
+ --color-neutral-200: #E5E5E5;
8
+ --color-neutral-300: #D4D4D4;
9
+ --color-neutral-400: #A3A3A3;
10
+ --color-neutral-500: #737373;
11
+ --color-neutral-600: #525252;
12
+ --color-neutral-700: #404040;
13
+ --color-neutral-800: #262626;
14
+ --color-neutral-900: #171717;
15
+ --color-neutral-950: #0A0A0A;
16
+ --color-blue-50: #EFF6FF;
17
+ --color-blue-100: #DBEAFE;
18
+ --color-blue-200: #BFDBFE;
19
+ --color-blue-300: #93C5FD;
20
+ --color-blue-400: #60A5FA;
21
+ --color-blue-500: #2563EB;
22
+ --color-blue-600: #1D4ED8;
23
+ --color-blue-700: #1E40AF;
24
+ --color-blue-800: #1E3A8A;
25
+ --color-blue-900: #172554;
26
+ --color-blue-950: #0F172A;
27
+ --color-purple-50: #F5F3FF;
28
+ --color-purple-100: #EDE9FE;
29
+ --color-purple-200: #DDD6FE;
30
+ --color-purple-300: #C4B5FD;
31
+ --color-purple-400: #A78BFA;
32
+ --color-purple-500: #6D28D9;
33
+ --color-purple-600: #5B21B6;
34
+ --color-purple-700: #4C1D95;
35
+ --color-purple-800: #3730A3;
36
+ --color-purple-900: #312E81;
37
+ --color-purple-950: #1E1B4B;
38
+ --color-green-500: #22C55E;
39
+ --color-green-600: #16A34A;
40
+ --color-amber-500: #F59E0B;
41
+ --color-amber-600: #D97706;
42
+ --color-red-500: #EF4444;
43
+ --color-red-600: #DC2626;
44
+ --color-white: #FFFFFF;
45
+ --color-black: #000000;
46
+ --color-text-default: #171717;
47
+ --color-text-muted: #737373;
48
+ --color-text-inverted: #FFFFFF;
49
+ --color-text-link: #2563EB;
50
+ --color-text-link.hover: #1D4ED8;
51
+ --color-surface-default: #FFFFFF;
52
+ --color-surface-raised: #FFFFFF;
53
+ --color-surface-sunken: #FAFAFA;
54
+ --color-surface-overlay: #0A0A0A;
55
+ --color-border-default: #E5E5E5;
56
+ --color-border-subtle: #F5F5F5;
57
+ --color-border-strong: #D4D4D4;
58
+ --color-interactive-primary: #2563EB;
59
+ --color-interactive-primary.hover: #1D4ED8;
60
+ --color-interactive-secondary: #F5F5F5;
61
+ --color-status-success: #22C55E;
62
+ --color-status-warning: #F59E0B;
63
+ --color-status-error: #EF4444;
64
+ --color-status-info: #2563EB;
65
+ --color-focus-ring: #2563EB;
66
+ --spacing-0: 0px;
67
+ --spacing-1: 4px;
68
+ --spacing-2: 8px;
69
+ --spacing-3: 12px;
70
+ --spacing-4: 16px;
71
+ --spacing-5: 20px;
72
+ --spacing-6: 24px;
73
+ --spacing-8: 32px;
74
+ --spacing-10: 40px;
75
+ --spacing-12: 48px;
76
+ --spacing-16: 64px;
77
+ --spacing-20: 80px;
78
+ --spacing-24: 96px;
79
+ --spacing-space-sectionY: 64px;
80
+ --spacing-space-sectionX: 24px;
81
+ --spacing-space-cardPadding: 24px;
82
+ --spacing-space-cardGap: 16px;
83
+ --spacing-space-stackSm: 8px;
84
+ --spacing-space-stackMd: 16px;
85
+ --spacing-space-stackLg: 24px;
86
+ --spacing-space-inlineSm: 8px;
87
+ --spacing-space-inlineMd: 16px;
88
+ --spacing-space-inlineLg: 24px;
89
+ --spacing-space-formGap: 16px;
90
+ --spacing-space-inputPadding: 12px;
91
+ --spacing-space-containerMax: 96px;
92
+ --radii-none: 0px;
93
+ --radii-sm: 4px;
94
+ --radii-md: 8px;
95
+ --radii-lg: 12px;
96
+ --radii-xl: 16px;
97
+ --radii-2xl: 24px;
98
+ --radii-full: 9999px;
99
+ --radii-radius-button: 8px;
100
+ --radii-radius-input: 8px;
101
+ --radii-radius-card: 12px;
102
+ --radii-radius-modal: 16px;
103
+ --radii-radius-badge: 9999px;
104
+ --typography-fontFamily-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
105
+ --typography-fontFamily-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
106
+ --typography-fontSize-xs: 12px;
107
+ --typography-fontSize-sm: 14px;
108
+ --typography-fontSize-base: 16px;
109
+ --typography-fontSize-lg: 18px;
110
+ --typography-fontSize-xl: 20px;
111
+ --typography-fontSize-2xl: 24px;
112
+ --typography-fontSize-3xl: 30px;
113
+ --typography-fontSize-4xl: 36px;
114
+ --typography-fontSize-5xl: 48px;
115
+ --typography-fontSize-6xl: 60px;
116
+ --typography-fontWeight-normal: 400;
117
+ --typography-fontWeight-medium: 500;
118
+ --typography-fontWeight-semibold: 600;
119
+ --typography-fontWeight-bold: 700;
120
+ --typography-lineHeight-tight: 1.25;
121
+ --typography-lineHeight-snug: 1.375;
122
+ --typography-lineHeight-normal: 1.5;
123
+ --typography-lineHeight-relaxed: 1.625;
124
+ --typography-letterSpacing-tight: -0.025em;
125
+ --typography-letterSpacing-normal: 0em;
126
+ --typography-letterSpacing-wide: 0.025em;
127
+ /* Skipping composite token: typography-heading-hero (TS-only) */
128
+ /* Skipping composite token: typography-heading-page (TS-only) */
129
+ /* Skipping composite token: typography-heading-section (TS-only) */
130
+ /* Skipping composite token: typography-heading-card (TS-only) */
131
+ /* Skipping composite token: typography-body-default (TS-only) */
132
+ /* Skipping composite token: typography-body-small (TS-only) */
133
+ /* Skipping composite token: typography-body-large (TS-only) */
134
+ /* Skipping composite token: typography-ui-label (TS-only) */
135
+ /* Skipping composite token: typography-ui-button (TS-only) */
136
+ /* Skipping composite token: typography-ui-caption (TS-only) */
137
+ --shadows-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
138
+ --shadows-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
139
+ --shadows-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
140
+ --shadows-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
141
+ --shadows-glow-blue: 0 0 0 3px rgba(37, 99, 235, 0.4);
142
+ --shadows-glow-purple: 0 0 0 3px rgba(109, 40, 217, 0.4);
143
+ --shadows-shadow-card: {shadow.md};
144
+ --shadows-shadow-dropdown: {shadow.lg};
145
+ --shadows-shadow-modal: {shadow.xl};
146
+ --shadows-shadow-focus: {shadow.glow.blue};
147
+ --motion-duration-instant: 0ms;
148
+ --motion-duration-fast: 150ms;
149
+ --motion-duration-normal: 300ms;
150
+ --motion-duration-slow: 500ms;
151
+ --motion-duration-slower: 700ms;
152
+ /* Skipping composite token: motion-easing-linear (TS-only) */
153
+ /* Skipping composite token: motion-easing-easeIn (TS-only) */
154
+ /* Skipping composite token: motion-easing-easeOut (TS-only) */
155
+ /* Skipping composite token: motion-easing-easeInOut (TS-only) */
156
+ /* Skipping composite token: motion-easing-spring (TS-only) */
157
+ /* Skipping composite token: motion-motion-hover (TS-only) */
158
+ /* Skipping composite token: motion-motion-enter (TS-only) */
159
+ /* Skipping composite token: motion-motion-exit (TS-only) */
160
+ /* Skipping composite token: motion-motion-page (TS-only) */
161
+ /* Skipping composite token: motion-motion-spring (TS-only) */
162
+ }
package/packages/tokens-tailwind/dist/index.js ADDED
@@ -0,0 +1,315 @@
1
+ export { default as tailwindConfig } from './tailwind.config.json' assert { type: 'json' };
2
+ export { default as utilityMapping } from './utility-mapping.json' assert { type: 'json' };
3
+ export const cssVariables = `/* OmniDesign CSS Variables - Tailwind Compatible */
4
+ /* Auto-generated - Do not edit manually */
5
+
6
+ :root {
7
+ /* Neutral */
8
+ --color-neutral-50: var(--color-neutral-50, inherit);
9
+ --color-neutral-100: var(--color-neutral-100, inherit);
10
+ --color-neutral-200: var(--color-neutral-200, inherit);
11
+ --color-neutral-300: var(--color-neutral-300, inherit);
12
+ --color-neutral-400: var(--color-neutral-400, inherit);
13
+ --color-neutral-500: var(--color-neutral-500, inherit);
14
+ --color-neutral-600: var(--color-neutral-600, inherit);
15
+ --color-neutral-700: var(--color-neutral-700, inherit);
16
+ --color-neutral-800: var(--color-neutral-800, inherit);
17
+ --color-neutral-900: var(--color-neutral-900, inherit);
18
+ --color-neutral-950: var(--color-neutral-950, inherit);
19
+
20
+ /* Slate */
21
+ --color-slate-50: var(--color-slate-50, inherit);
22
+ --color-slate-100: var(--color-slate-100, inherit);
23
+ --color-slate-200: var(--color-slate-200, inherit);
24
+ --color-slate-300: var(--color-slate-300, inherit);
25
+ --color-slate-400: var(--color-slate-400, inherit);
26
+ --color-slate-500: var(--color-slate-500, inherit);
27
+ --color-slate-600: var(--color-slate-600, inherit);
28
+ --color-slate-700: var(--color-slate-700, inherit);
29
+ --color-slate-800: var(--color-slate-800, inherit);
30
+ --color-slate-900: var(--color-slate-900, inherit);
31
+ --color-slate-950: var(--color-slate-950, inherit);
32
+
33
+ /* Zinc */
34
+ --color-zinc-50: var(--color-zinc-50, inherit);
35
+ --color-zinc-100: var(--color-zinc-100, inherit);
36
+ --color-zinc-200: var(--color-zinc-200, inherit);
37
+ --color-zinc-300: var(--color-zinc-300, inherit);
38
+ --color-zinc-400: var(--color-zinc-400, inherit);
39
+ --color-zinc-500: var(--color-zinc-500, inherit);
40
+ --color-zinc-600: var(--color-zinc-600, inherit);
41
+ --color-zinc-700: var(--color-zinc-700, inherit);
42
+ --color-zinc-800: var(--color-zinc-800, inherit);
43
+ --color-zinc-900: var(--color-zinc-900, inherit);
44
+ --color-zinc-950: var(--color-zinc-950, inherit);
45
+
46
+ /* Stone */
47
+ --color-stone-50: var(--color-stone-50, inherit);
48
+ --color-stone-100: var(--color-stone-100, inherit);
49
+ --color-stone-200: var(--color-stone-200, inherit);
50
+ --color-stone-300: var(--color-stone-300, inherit);
51
+ --color-stone-400: var(--color-stone-400, inherit);
52
+ --color-stone-500: var(--color-stone-500, inherit);
53
+ --color-stone-600: var(--color-stone-600, inherit);
54
+ --color-stone-700: var(--color-stone-700, inherit);
55
+ --color-stone-800: var(--color-stone-800, inherit);
56
+ --color-stone-900: var(--color-stone-900, inherit);
57
+ --color-stone-950: var(--color-stone-950, inherit);
58
+
59
+ /* Red */
60
+ --color-red-50: var(--color-red-50, inherit);
61
+ --color-red-100: var(--color-red-100, inherit);
62
+ --color-red-200: var(--color-red-200, inherit);
63
+ --color-red-300: var(--color-red-300, inherit);
64
+ --color-red-400: var(--color-red-400, inherit);
65
+ --color-red-500: var(--color-red-500, inherit);
66
+ --color-red-600: var(--color-red-600, inherit);
67
+ --color-red-700: var(--color-red-700, inherit);
68
+ --color-red-800: var(--color-red-800, inherit);
69
+ --color-red-900: var(--color-red-900, inherit);
70
+ --color-red-950: var(--color-red-950, inherit);
71
+
72
+ /* Orange */
73
+ --color-orange-50: var(--color-orange-50, inherit);
74
+ --color-orange-100: var(--color-orange-100, inherit);
75
+ --color-orange-200: var(--color-orange-200, inherit);
76
+ --color-orange-300: var(--color-orange-300, inherit);
77
+ --color-orange-400: var(--color-orange-400, inherit);
78
+ --color-orange-500: var(--color-orange-500, inherit);
79
+ --color-orange-600: var(--color-orange-600, inherit);
80
+ --color-orange-700: var(--color-orange-700, inherit);
81
+ --color-orange-800: var(--color-orange-800, inherit);
82
+ --color-orange-900: var(--color-orange-900, inherit);
83
+ --color-orange-950: var(--color-orange-950, inherit);
84
+
85
+ /* Amber */
86
+ --color-amber-50: var(--color-amber-50, inherit);
87
+ --color-amber-100: var(--color-amber-100, inherit);
88
+ --color-amber-200: var(--color-amber-200, inherit);
89
+ --color-amber-300: var(--color-amber-300, inherit);
90
+ --color-amber-400: var(--color-amber-400, inherit);
91
+ --color-amber-500: var(--color-amber-500, inherit);
92
+ --color-amber-600: var(--color-amber-600, inherit);
93
+ --color-amber-700: var(--color-amber-700, inherit);
94
+ --color-amber-800: var(--color-amber-800, inherit);
95
+ --color-amber-900: var(--color-amber-900, inherit);
96
+ --color-amber-950: var(--color-amber-950, inherit);
97
+
98
+ /* Yellow */
99
+ --color-yellow-50: var(--color-yellow-50, inherit);
100
+ --color-yellow-100: var(--color-yellow-100, inherit);
101
+ --color-yellow-200: var(--color-yellow-200, inherit);
102
+ --color-yellow-300: var(--color-yellow-300, inherit);
103
+ --color-yellow-400: var(--color-yellow-400, inherit);
104
+ --color-yellow-500: var(--color-yellow-500, inherit);
105
+ --color-yellow-600: var(--color-yellow-600, inherit);
106
+ --color-yellow-700: var(--color-yellow-700, inherit);
107
+ --color-yellow-800: var(--color-yellow-800, inherit);
108
+ --color-yellow-900: var(--color-yellow-900, inherit);
109
+ --color-yellow-950: var(--color-yellow-950, inherit);
110
+
111
+ /* Lime */
112
+ --color-lime-50: var(--color-lime-50, inherit);
113
+ --color-lime-100: var(--color-lime-100, inherit);
114
+ --color-lime-200: var(--color-lime-200, inherit);
115
+ --color-lime-300: var(--color-lime-300, inherit);
116
+ --color-lime-400: var(--color-lime-400, inherit);
117
+ --color-lime-500: var(--color-lime-500, inherit);
118
+ --color-lime-600: var(--color-lime-600, inherit);
119
+ --color-lime-700: var(--color-lime-700, inherit);
120
+ --color-lime-800: var(--color-lime-800, inherit);
121
+ --color-lime-900: var(--color-lime-900, inherit);
122
+ --color-lime-950: var(--color-lime-950, inherit);
123
+
124
+ /* Green */
125
+ --color-green-50: var(--color-green-50, inherit);
126
+ --color-green-100: var(--color-green-100, inherit);
127
+ --color-green-200: var(--color-green-200, inherit);
128
+ --color-green-300: var(--color-green-300, inherit);
129
+ --color-green-400: var(--color-green-400, inherit);
130
+ --color-green-500: var(--color-green-500, inherit);
131
+ --color-green-600: var(--color-green-600, inherit);
132
+ --color-green-700: var(--color-green-700, inherit);
133
+ --color-green-800: var(--color-green-800, inherit);
134
+ --color-green-900: var(--color-green-900, inherit);
135
+ --color-green-950: var(--color-green-950, inherit);
136
+
137
+ /* Emerald */
138
+ --color-emerald-50: var(--color-emerald-50, inherit);
139
+ --color-emerald-100: var(--color-emerald-100, inherit);
140
+ --color-emerald-200: var(--color-emerald-200, inherit);
141
+ --color-emerald-300: var(--color-emerald-300, inherit);
142
+ --color-emerald-400: var(--color-emerald-400, inherit);
143
+ --color-emerald-500: var(--color-emerald-500, inherit);
144
+ --color-emerald-600: var(--color-emerald-600, inherit);
145
+ --color-emerald-700: var(--color-emerald-700, inherit);
146
+ --color-emerald-800: var(--color-emerald-800, inherit);
147
+ --color-emerald-900: var(--color-emerald-900, inherit);
148
+ --color-emerald-950: var(--color-emerald-950, inherit);
149
+
150
+ /* Teal */
151
+ --color-teal-50: var(--color-teal-50, inherit);
152
+ --color-teal-100: var(--color-teal-100, inherit);
153
+ --color-teal-200: var(--color-teal-200, inherit);
154
+ --color-teal-300: var(--color-teal-300, inherit);
155
+ --color-teal-400: var(--color-teal-400, inherit);
156
+ --color-teal-500: var(--color-teal-500, inherit);
157
+ --color-teal-600: var(--color-teal-600, inherit);
158
+ --color-teal-700: var(--color-teal-700, inherit);
159
+ --color-teal-800: var(--color-teal-800, inherit);
160
+ --color-teal-900: var(--color-teal-900, inherit);
161
+ --color-teal-950: var(--color-teal-950, inherit);
162
+
163
+ /* Cyan */
164
+ --color-cyan-50: var(--color-cyan-50, inherit);
165
+ --color-cyan-100: var(--color-cyan-100, inherit);
166
+ --color-cyan-200: var(--color-cyan-200, inherit);
167
+ --color-cyan-300: var(--color-cyan-300, inherit);
168
+ --color-cyan-400: var(--color-cyan-400, inherit);
169
+ --color-cyan-500: var(--color-cyan-500, inherit);
170
+ --color-cyan-600: var(--color-cyan-600, inherit);
171
+ --color-cyan-700: var(--color-cyan-700, inherit);
172
+ --color-cyan-800: var(--color-cyan-800, inherit);
173
+ --color-cyan-900: var(--color-cyan-900, inherit);
174
+ --color-cyan-950: var(--color-cyan-950, inherit);
175
+
176
+ /* Sky */
177
+ --color-sky-50: var(--color-sky-50, inherit);
178
+ --color-sky-100: var(--color-sky-100, inherit);
179
+ --color-sky-200: var(--color-sky-200, inherit);
180
+ --color-sky-300: var(--color-sky-300, inherit);
181
+ --color-sky-400: var(--color-sky-400, inherit);
182
+ --color-sky-500: var(--color-sky-500, inherit);
183
+ --color-sky-600: var(--color-sky-600, inherit);
184
+ --color-sky-700: var(--color-sky-700, inherit);
185
+ --color-sky-800: var(--color-sky-800, inherit);
186
+ --color-sky-900: var(--color-sky-900, inherit);
187
+ --color-sky-950: var(--color-sky-950, inherit);
188
+
189
+ /* Blue */
190
+ --color-blue-50: var(--color-blue-50, inherit);
191
+ --color-blue-100: var(--color-blue-100, inherit);
192
+ --color-blue-200: var(--color-blue-200, inherit);
193
+ --color-blue-300: var(--color-blue-300, inherit);
194
+ --color-blue-400: var(--color-blue-400, inherit);
195
+ --color-blue-500: var(--color-blue-500, inherit);
196
+ --color-blue-600: var(--color-blue-600, inherit);
197
+ --color-blue-700: var(--color-blue-700, inherit);
198
+ --color-blue-800: var(--color-blue-800, inherit);
199
+ --color-blue-900: var(--color-blue-900, inherit);
200
+ --color-blue-950: var(--color-blue-950, inherit);
201
+
202
+ /* Indigo */
203
+ --color-indigo-50: var(--color-indigo-50, inherit);
204
+ --color-indigo-100: var(--color-indigo-100, inherit);
205
+ --color-indigo-200: var(--color-indigo-200, inherit);
206
+ --color-indigo-300: var(--color-indigo-300, inherit);
207
+ --color-indigo-400: var(--color-indigo-400, inherit);
208
+ --color-indigo-500: var(--color-indigo-500, inherit);
209
+ --color-indigo-600: var(--color-indigo-600, inherit);
210
+ --color-indigo-700: var(--color-indigo-700, inherit);
211
+ --color-indigo-800: var(--color-indigo-800, inherit);
212
+ --color-indigo-900: var(--color-indigo-900, inherit);
213
+ --color-indigo-950: var(--color-indigo-950, inherit);
214
+
215
+ /* Violet */
216
+ --color-violet-50: var(--color-violet-50, inherit);
217
+ --color-violet-100: var(--color-violet-100, inherit);
218
+ --color-violet-200: var(--color-violet-200, inherit);
219
+ --color-violet-300: var(--color-violet-300, inherit);
220
+ --color-violet-400: var(--color-violet-400, inherit);
221
+ --color-violet-500: var(--color-violet-500, inherit);
222
+ --color-violet-600: var(--color-violet-600, inherit);
223
+ --color-violet-700: var(--color-violet-700, inherit);
224
+ --color-violet-800: var(--color-violet-800, inherit);
225
+ --color-violet-900: var(--color-violet-900, inherit);
226
+ --color-violet-950: var(--color-violet-950, inherit);
227
+
228
+ /* Purple */
229
+ --color-purple-50: var(--color-purple-50, inherit);
230
+ --color-purple-100: var(--color-purple-100, inherit);
231
+ --color-purple-200: var(--color-purple-200, inherit);
232
+ --color-purple-300: var(--color-purple-300, inherit);
233
+ --color-purple-400: var(--color-purple-400, inherit);
234
+ --color-purple-500: var(--color-purple-500, inherit);
235
+ --color-purple-600: var(--color-purple-600, inherit);
236
+ --color-purple-700: var(--color-purple-700, inherit);
237
+ --color-purple-800: var(--color-purple-800, inherit);
238
+ --color-purple-900: var(--color-purple-900, inherit);
239
+ --color-purple-950: var(--color-purple-950, inherit);
240
+
241
+ /* Fuchsia */
242
+ --color-fuchsia-50: var(--color-fuchsia-50, inherit);
243
+ --color-fuchsia-100: var(--color-fuchsia-100, inherit);
244
+ --color-fuchsia-200: var(--color-fuchsia-200, inherit);
245
+ --color-fuchsia-300: var(--color-fuchsia-300, inherit);
246
+ --color-fuchsia-400: var(--color-fuchsia-400, inherit);
247
+ --color-fuchsia-500: var(--color-fuchsia-500, inherit);
248
+ --color-fuchsia-600: var(--color-fuchsia-600, inherit);
249
+ --color-fuchsia-700: var(--color-fuchsia-700, inherit);
250
+ --color-fuchsia-800: var(--color-fuchsia-800, inherit);
251
+ --color-fuchsia-900: var(--color-fuchsia-900, inherit);
252
+ --color-fuchsia-950: var(--color-fuchsia-950, inherit);
253
+
254
+ /* Pink */
255
+ --color-pink-50: var(--color-pink-50, inherit);
256
+ --color-pink-100: var(--color-pink-100, inherit);
257
+ --color-pink-200: var(--color-pink-200, inherit);
258
+ --color-pink-300: var(--color-pink-300, inherit);
259
+ --color-pink-400: var(--color-pink-400, inherit);
260
+ --color-pink-500: var(--color-pink-500, inherit);
261
+ --color-pink-600: var(--color-pink-600, inherit);
262
+ --color-pink-700: var(--color-pink-700, inherit);
263
+ --color-pink-800: var(--color-pink-800, inherit);
264
+ --color-pink-900: var(--color-pink-900, inherit);
265
+ --color-pink-950: var(--color-pink-950, inherit);
266
+
267
+ /* Rose */
268
+ --color-rose-50: var(--color-rose-50, inherit);
269
+ --color-rose-100: var(--color-rose-100, inherit);
270
+ --color-rose-200: var(--color-rose-200, inherit);
271
+ --color-rose-300: var(--color-rose-300, inherit);
272
+ --color-rose-400: var(--color-rose-400, inherit);
273
+ --color-rose-500: var(--color-rose-500, inherit);
274
+ --color-rose-600: var(--color-rose-600, inherit);
275
+ --color-rose-700: var(--color-rose-700, inherit);
276
+ --color-rose-800: var(--color-rose-800, inherit);
277
+ --color-rose-900: var(--color-rose-900, inherit);
278
+ --color-rose-950: var(--color-rose-950, inherit);
279
+
280
+ /* Semantic Tokens - Light Mode */
281
+ --color-text-default: var(--color-slate-900);
282
+ --color-text-muted: var(--color-slate-500);
283
+ --color-text-inverted: var(--color-white-undefined);
284
+ --color-surface-default: var(--color-white-undefined);
285
+ --color-surface-raised: var(--color-slate-50);
286
+ --color-surface-sunken: var(--color-slate-100);
287
+ --color-border-default: var(--color-slate-200);
288
+ --color-border-subtle: var(--color-slate-100);
289
+ --color-interactive-primary: var(--color-blue-600);
290
+ --color-interactive-primary-hover: var(--color-blue-700);
291
+ --color-interactive-secondary: var(--color-slate-600);
292
+ --color-status-success: var(--color-green-600);
293
+ --color-status-warning: var(--color-amber-500);
294
+ --color-status-error: var(--color-red-600);
295
+ --color-status-info: var(--color-blue-500);
296
+ }
297
+
298
+ .dark {
299
+ /* Semantic Tokens - Dark Mode */
300
+ --color-text-default: var(--color-slate-50);
301
+ --color-text-muted: var(--color-slate-400);
302
+ --color-text-inverted: var(--color-slate-950);
303
+ --color-surface-default: var(--color-slate-950);
304
+ --color-surface-raised: var(--color-slate-900);
305
+ --color-surface-sunken: var(--color-slate-950);
306
+ --color-border-default: var(--color-slate-800);
307
+ --color-border-subtle: var(--color-slate-900);
308
+ --color-interactive-primary: var(--color-blue-500);
309
+ --color-interactive-primary-hover: var(--color-blue-400);
310
+ --color-interactive-secondary: var(--color-slate-500);
311
+ --color-status-success: var(--color-green-500);
312
+ --color-status-warning: var(--color-amber-400);
313
+ --color-status-error: var(--color-red-500);
314
+ --color-status-info: var(--color-blue-400);
315
+ }`;