@work-rjkashyap/unified-ui 0.1.2 → 0.2.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 (34) hide show
  1. package/CHANGELOG.md +93 -0
  2. package/bin/cli.mjs +721 -0
  3. package/dist/{chunk-EO4WROWH.mjs → chunk-3OZJ4JLW.mjs} +116 -2
  4. package/dist/chunk-B3CW2WZS.cjs +20748 -0
  5. package/dist/chunk-CTWNFFLB.mjs +20438 -0
  6. package/dist/{chunk-7ITQSRGX.cjs → chunk-FUWXGHWQ.cjs} +0 -1
  7. package/dist/{chunk-ZPIPKY2J.cjs → chunk-HITTFB2U.cjs} +127 -1
  8. package/dist/{chunk-F5S6NLOT.mjs → chunk-OHEH57BV.mjs} +0 -1
  9. package/dist/{chunk-PQR7C4OH.cjs → chunk-TESKVASH.cjs} +332 -99
  10. package/dist/{chunk-ZDB557B2.mjs → chunk-YFH5JPAA.mjs} +331 -101
  11. package/dist/components.cjs +780 -126
  12. package/dist/components.d.cts +5183 -1464
  13. package/dist/components.d.ts +5183 -1464
  14. package/dist/components.mjs +3 -1
  15. package/dist/index.cjs +926 -214
  16. package/dist/index.d.cts +9 -6
  17. package/dist/index.d.ts +9 -6
  18. package/dist/index.mjs +5 -5
  19. package/dist/motion.cjs +94 -46
  20. package/dist/motion.d.cts +53 -2
  21. package/dist/motion.d.ts +53 -2
  22. package/dist/motion.mjs +1 -1
  23. package/dist/primitives.cjs +13 -13
  24. package/dist/primitives.mjs +1 -1
  25. package/dist/theme.cjs +40 -28
  26. package/dist/theme.d.cts +100 -62
  27. package/dist/theme.d.ts +100 -62
  28. package/dist/theme.mjs +1 -1
  29. package/dist/utils.d.cts +1 -1
  30. package/dist/utils.d.ts +1 -1
  31. package/package.json +190 -183
  32. package/styles.css +636 -473
  33. package/dist/chunk-4NYLE2LT.cjs +0 -10042
  34. package/dist/chunk-A4YYJAAJ.mjs +0 -9897
package/styles.css CHANGED
@@ -30,172 +30,208 @@
30
30
  --------------------------------------------------------------------------- */
31
31
 
32
32
  :root {
33
- /* --- Core Backgrounds --- */
34
- --background: oklch(1 0 0);
35
- --foreground: oklch(0.145 0 0);
36
-
37
- /* --- Surfaces --- */
38
- --surface: oklch(0.985 0 0);
39
- --surface-raised: oklch(1 0 0);
40
- --surface-overlay: oklch(0.97 0 0);
41
-
42
- /* --- Card --- */
43
- --card: oklch(1 0 0);
44
- --card-foreground: oklch(0.145 0 0);
45
-
46
- /* --- Popover --- */
47
- --popover: oklch(1 0 0);
48
- --popover-foreground: oklch(0.145 0 0);
49
-
50
- /* --- Muted --- */
51
- --muted: oklch(0.97 0 0);
52
- --muted-foreground: oklch(0.556 0 0);
53
-
54
- /* --- Primary (Brand) --- */
55
- --primary: oklch(0.205 0 0);
56
- --primary-foreground: oklch(0.985 0 0);
57
-
58
- --primary-hover: oklch(0.295 0 0);
59
- --primary-active: oklch(0.371 0 0);
60
- --primary-muted: oklch(0.97 0 0);
61
- --primary-muted-foreground: oklch(0.205 0 0);
62
-
63
- /* --- Secondary --- */
64
- --secondary: oklch(0.97 0 0);
65
- --secondary-foreground: oklch(0.205 0 0);
66
- --secondary-hover: oklch(0.922 0 0);
67
- --secondary-active: oklch(0.87 0 0);
68
-
69
- /* --- Accent --- */
70
- --accent: oklch(0.97 0 0);
71
- --accent-foreground: oklch(0.205 0 0);
72
-
73
- /* --- Success --- */
74
- --success: oklch(0.72 0.22 150.6);
75
- --success-foreground: oklch(0.18 0.04 150);
76
- --success-muted: oklch(0.96 0.06 150.6);
77
- --success-muted-foreground: oklch(0.42 0.18 148.3);
78
-
79
- /* --- Warning --- */
80
- --warning: oklch(0.85 0.2 75.8);
81
- --warning-foreground: oklch(0.26 0.06 55);
82
- --warning-muted: oklch(0.97 0.05 80.2);
83
- --warning-muted-foreground: oklch(0.5 0.16 60.8);
84
-
85
- /* --- Danger / Destructive --- */
86
- --danger: oklch(0.7 0.22 25.8);
87
- --danger-foreground: oklch(0.18 0.04 25);
88
- --danger-hover: oklch(0.64 0.2 25.8);
89
- --danger-active: oklch(0.58 0.18 25.8);
90
- --danger-muted: oklch(0.97 0.04 17.4);
91
- --danger-muted-foreground: oklch(0.52 0.2 25.8);
92
- --destructive: oklch(0.7 0.22 25.8);
93
- --destructive-foreground: oklch(0.18 0.04 25);
94
-
95
- /* --- Info --- */
96
- --info: oklch(0.7 0.2 258.3);
97
- --info-foreground: oklch(0.18 0.04 260);
98
- --info-muted: oklch(0.96 0.05 258.3);
99
- --info-muted-foreground: oklch(0.44 0.2 264.4);
100
-
101
- /* --- Borders --- */
102
- --border: oklch(0.922 0 0);
103
- --border-muted: oklch(0.97 0 0);
104
- --border-strong: oklch(0.708 0 0);
105
-
106
- /* --- Focus / Ring --- */
107
- --focus-ring: oklch(0.708 0 0);
108
- --ring: oklch(0.708 0 0);
109
-
110
- /* --- Input --- */
111
- --input: oklch(0.922 0 0);
112
- --input-foreground: oklch(0.205 0 0);
113
- --input-placeholder: oklch(0.556 0 0);
114
-
115
- /* --- Disabled --- */
116
- --disabled: oklch(0.97 0 0);
117
- --disabled-foreground: oklch(0.556 0 0);
118
-
119
- /* --- Chart --- */
120
- --chart-1: oklch(0.646 0.222 41.116);
121
- --chart-2: oklch(0.6 0.118 184.704);
122
- --chart-3: oklch(0.398 0.07 227.392);
123
- --chart-4: oklch(0.828 0.189 84.429);
124
- --chart-5: oklch(0.769 0.188 70.08);
125
-
126
- /* --- Sidebar --- */
127
- --sidebar: oklch(0.985 0 0);
128
- --sidebar-foreground: oklch(0.145 0 0);
129
- --sidebar-primary: oklch(0.205 0 0);
130
- --sidebar-primary-foreground: oklch(0.985 0 0);
131
- --sidebar-accent: oklch(0.97 0 0);
132
- --sidebar-accent-foreground: oklch(0.205 0 0);
133
- --sidebar-border: oklch(0.922 0 0);
134
- --sidebar-ring: oklch(0.708 0 0);
135
-
136
- /* --- Radius --- */
137
- --radius: 0.625rem;
138
- --radius-none: 0px;
139
- --radius-sm: 4px;
140
- --radius-md: 6px;
141
- --radius-lg: 8px;
142
- --radius-xl: 12px;
143
- --radius-full: 9999px;
144
-
145
- /* --- Shadows --- */
146
- --shadow-none: none;
147
- --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.05);
148
- --shadow-sm:
149
- 0 1px 3px 0 oklch(0 0 0 / 0.1), 0 1px 2px -1px oklch(0 0 0 / 0.1);
150
- --shadow-md:
151
- 0 4px 6px -1px oklch(0 0 0 / 0.1), 0 2px 4px -2px oklch(0 0 0 / 0.1);
152
- --shadow-lg:
153
- 0 10px 15px -3px oklch(0 0 0 / 0.1), 0 4px 6px -4px oklch(0 0 0 / 0.1);
154
- --shadow-xl:
155
- 0 20px 25px -5px oklch(0 0 0 / 0.1), 0 8px 10px -6px oklch(0 0 0 / 0.1);
156
- --shadow-2xl: 0 25px 50px -12px oklch(0 0 0 / 0.25);
157
- --shadow-focus-ring: 0 0 0 2px oklch(0.708 0 0 / 40%);
158
-
159
- /* --- Z-Index --- */
160
- --z-base: 0;
161
- --z-dropdown: 10;
162
- --z-sticky: 20;
163
- --z-overlay: 30;
164
- --z-modal: 40;
165
- --z-popover: 50;
166
- --z-toast: 60;
167
- --z-tooltip: 70;
168
- --z-max: 9999;
169
-
170
- /* --- Motion Durations --- */
171
- --duration-instant: 0ms;
172
- --duration-fast: 100ms;
173
- --duration-moderate: 150ms;
174
- --duration-normal: 200ms;
175
- --duration-slow: 300ms;
176
- --duration-slower: 400ms;
177
- --duration-slowest: 500ms;
178
-
179
- /* --- Motion Easing --- */
180
- --easing-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
181
- --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
182
- --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
183
- --easing-emphasize: cubic-bezier(0, 0, 0.15, 1);
184
- --easing-linear: cubic-bezier(0, 0, 1, 1);
185
- --easing-snap: cubic-bezier(0.2, 0, 0, 1);
186
-
187
- /* --- Font Families --- */
188
- --font-display:
189
- var(--font-inter), system-ui, -apple-system, BlinkMacSystemFont,
190
- "Segoe UI", Roboto, sans-serif;
191
- --font-sans:
192
- var(--font-outfit), system-ui, -apple-system, BlinkMacSystemFont,
193
- "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
194
- --font-serif: var(--font-lora), Georgia, "Times New Roman", serif;
195
- --font-mono:
196
- var(--font-jetbrains), "Fira Code", "SF Mono", "Cascadia Code",
197
- Consolas, "Liberation Mono", Menlo, monospace;
198
- --font-inherit: inherit;
33
+ /* --- Core Backgrounds --- */
34
+ --background: oklch(1 0 0);
35
+ --foreground: oklch(0.145 0 0);
36
+
37
+ /* --- Surfaces --- */
38
+ --surface: oklch(0.985 0 0);
39
+ --surface-raised: oklch(1 0 0);
40
+ --surface-overlay: oklch(0.97 0 0);
41
+
42
+ /* --- Card --- */
43
+ --card: oklch(1 0 0);
44
+ --card-foreground: oklch(0.145 0 0);
45
+
46
+ /* --- Popover --- */
47
+ --popover: oklch(1 0 0);
48
+ --popover-foreground: oklch(0.145 0 0);
49
+
50
+ /* --- Muted --- */
51
+ --muted: oklch(0.97 0 0);
52
+ --muted-foreground: oklch(0.556 0 0);
53
+
54
+ /* --- Primary (Brand) --- */
55
+ --primary: oklch(0.205 0 0);
56
+ --primary-foreground: oklch(0.985 0 0);
57
+
58
+ --primary-hover: oklch(0.295 0 0);
59
+ --primary-active: oklch(0.371 0 0);
60
+ --primary-muted: oklch(0.97 0 0);
61
+ --primary-muted-foreground: oklch(0.205 0 0);
62
+
63
+ /* --- Secondary --- */
64
+ --secondary: oklch(0.97 0 0);
65
+ --secondary-foreground: oklch(0.205 0 0);
66
+ --secondary-hover: oklch(0.922 0 0);
67
+ --secondary-active: oklch(0.87 0 0);
68
+
69
+ /* --- Accent --- */
70
+ --accent: oklch(0.97 0 0);
71
+ --accent-foreground: oklch(0.205 0 0);
72
+
73
+ /* --- Success --- */
74
+ --success: oklch(0.72 0.22 150.6);
75
+ --success-foreground: oklch(0.18 0.04 150);
76
+ --success-muted: oklch(0.96 0.06 150.6);
77
+ --success-muted-foreground: oklch(0.42 0.18 148.3);
78
+
79
+ /* --- Warning --- */
80
+ --warning: oklch(0.85 0.2 75.8);
81
+ --warning-foreground: oklch(0.26 0.06 55);
82
+ --warning-muted: oklch(0.97 0.05 80.2);
83
+ --warning-muted-foreground: oklch(0.5 0.16 60.8);
84
+
85
+ /* --- Danger / Destructive --- */
86
+ --danger: oklch(0.7 0.22 25.8);
87
+ --danger-foreground: oklch(0.18 0.04 25);
88
+ --danger-hover: oklch(0.64 0.2 25.8);
89
+ --danger-active: oklch(0.58 0.18 25.8);
90
+ --danger-muted: oklch(0.97 0.04 17.4);
91
+ --danger-muted-foreground: oklch(0.52 0.2 25.8);
92
+ --destructive: oklch(0.7 0.22 25.8);
93
+ --destructive-foreground: oklch(0.18 0.04 25);
94
+
95
+ /* --- Info --- */
96
+ --info: oklch(0.7 0.2 258.3);
97
+ --info-foreground: oklch(0.18 0.04 260);
98
+ --info-muted: oklch(0.96 0.05 258.3);
99
+ --info-muted-foreground: oklch(0.44 0.2 264.4);
100
+
101
+ /* --- Borders --- */
102
+ --border: oklch(0.922 0 0);
103
+ --border-muted: oklch(0.97 0 0);
104
+ --border-strong: oklch(0.708 0 0);
105
+
106
+ /* --- Focus / Ring --- */
107
+ --focus-ring: oklch(0.708 0 0);
108
+ --ring: oklch(0.708 0 0);
109
+
110
+ /* --- Input --- */
111
+ --input: oklch(0.922 0 0);
112
+ --input-foreground: oklch(0.205 0 0);
113
+ --input-placeholder: oklch(0.556 0 0);
114
+
115
+ /* --- Disabled --- */
116
+ --disabled: oklch(0.97 0 0);
117
+ --disabled-foreground: oklch(0.556 0 0);
118
+
119
+ /* --- Chart --- */
120
+ --chart-1: oklch(0.646 0.222 41.116);
121
+ --chart-2: oklch(0.6 0.118 184.704);
122
+ --chart-3: oklch(0.398 0.07 227.392);
123
+ --chart-4: oklch(0.828 0.189 84.429);
124
+ --chart-5: oklch(0.769 0.188 70.08);
125
+
126
+ /* --- Sidebar --- */
127
+ --sidebar: oklch(0.985 0 0);
128
+ --sidebar-foreground: oklch(0.145 0 0);
129
+ --sidebar-primary: oklch(0.205 0 0);
130
+ --sidebar-primary-foreground: oklch(0.985 0 0);
131
+ --sidebar-accent: oklch(0.97 0 0);
132
+ --sidebar-accent-foreground: oklch(0.205 0 0);
133
+ --sidebar-border: oklch(0.922 0 0);
134
+ --sidebar-ring: oklch(0.708 0 0);
135
+
136
+ /* --- Component Spacing (Style Preset Tokens) --- */
137
+ --ds-spacing-unit: 1;
138
+ --ds-padding-card: 1.5rem;
139
+ --ds-padding-button-x: 1rem;
140
+ --ds-padding-button-y: 0.5rem;
141
+ --ds-gap-default: 0.75rem;
142
+ --ds-border-width: 1px;
143
+ --ds-control-height: 2.25rem;
144
+
145
+ /* --- Code Block --- */
146
+ --code-bg: oklch(0.97 0 0);
147
+ --code-foreground: oklch(0.205 0 0);
148
+ --code-border: oklch(0.922 0 0);
149
+ --code-header-bg: oklch(0.955 0 0);
150
+ --code-header-border: oklch(0.922 0 0);
151
+ --code-header-foreground: oklch(0.556 0 0);
152
+ --code-badge-bg: oklch(0.935 0 0);
153
+ --code-badge-foreground: oklch(0.556 0 0);
154
+ --code-badge-border: oklch(0.9 0 0);
155
+ --code-copy-foreground: oklch(0.556 0 0);
156
+ --code-copy-hover-foreground: oklch(0.371 0 0);
157
+ --code-copy-hover-bg: oklch(0.935 0 0);
158
+ --code-success: oklch(0.52 0.18 150);
159
+ --code-line-number: oklch(0.78 0 0);
160
+ --code-keyword: oklch(0.45 0.15 280);
161
+ --code-string: oklch(0.50 0.14 25);
162
+ --code-comment: oklch(0.60 0.02 160);
163
+ --code-number: oklch(0.48 0.14 140);
164
+ --code-operator: oklch(0.371 0 0);
165
+ --code-punctuation: oklch(0.556 0 0);
166
+ --code-function: oklch(0.45 0.14 260);
167
+ --code-type: oklch(0.45 0.12 200);
168
+ --code-tag: oklch(0.50 0.16 20);
169
+ --code-attr-name: oklch(0.50 0.12 260);
170
+ --code-component: oklch(0.45 0.12 200);
171
+
172
+ /* --- Radius --- */
173
+ --radius: 0.625rem;
174
+ --radius-none: 0px;
175
+ --radius-sm: 4px;
176
+ --radius-md: 6px;
177
+ --radius-lg: 8px;
178
+ --radius-xl: 12px;
179
+ --radius-full: 9999px;
180
+
181
+ /* --- Shadows --- */
182
+ --shadow-none: none;
183
+ --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.05);
184
+ --shadow-sm:
185
+ 0 1px 3px 0 oklch(0 0 0 / 0.1), 0 1px 2px -1px oklch(0 0 0 / 0.1);
186
+ --shadow-md:
187
+ 0 4px 6px -1px oklch(0 0 0 / 0.1), 0 2px 4px -2px oklch(0 0 0 / 0.1);
188
+ --shadow-lg:
189
+ 0 10px 15px -3px oklch(0 0 0 / 0.1), 0 4px 6px -4px oklch(0 0 0 / 0.1);
190
+ --shadow-xl:
191
+ 0 20px 25px -5px oklch(0 0 0 / 0.1), 0 8px 10px -6px oklch(0 0 0 / 0.1);
192
+ --shadow-2xl: 0 25px 50px -12px oklch(0 0 0 / 0.25);
193
+ --shadow-focus-ring: 0 0 0 2px oklch(0.708 0 0 / 40%);
194
+
195
+ /* --- Z-Index --- */
196
+ --z-base: 0;
197
+ --z-dropdown: 10;
198
+ --z-sticky: 20;
199
+ --z-overlay: 30;
200
+ --z-modal: 40;
201
+ --z-popover: 50;
202
+ --z-toast: 60;
203
+ --z-tooltip: 70;
204
+ --z-max: 9999;
205
+
206
+ /* --- Motion Durations --- */
207
+ --duration-instant: 0ms;
208
+ --duration-fast: 100ms;
209
+ --duration-moderate: 150ms;
210
+ --duration-normal: 200ms;
211
+ --duration-slow: 300ms;
212
+ --duration-slower: 400ms;
213
+ --duration-slowest: 500ms;
214
+
215
+ /* --- Motion Easing --- */
216
+ --easing-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
217
+ --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
218
+ --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
219
+ --easing-emphasize: cubic-bezier(0, 0, 0.15, 1);
220
+ --easing-linear: cubic-bezier(0, 0, 1, 1);
221
+ --easing-snap: cubic-bezier(0.2, 0, 0, 1);
222
+
223
+ /* --- Font Families --- */
224
+ --font-display:
225
+ var(--font-inter), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
226
+ Roboto, sans-serif;
227
+ --font-sans:
228
+ var(--font-outfit), system-ui, -apple-system, BlinkMacSystemFont,
229
+ "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
230
+ --font-serif: var(--font-lora), Georgia, "Times New Roman", serif;
231
+ --font-mono:
232
+ var(--font-jetbrains), "Fira Code", "SF Mono", "Cascadia Code", Consolas,
233
+ "Liberation Mono", Menlo, monospace;
234
+ --font-inherit: inherit;
199
235
  }
200
236
 
201
237
  /* ---------------------------------------------------------------------------
@@ -203,120 +239,147 @@
203
239
  --------------------------------------------------------------------------- */
204
240
 
205
241
  .dark {
206
- /* --- Core Backgrounds --- */
207
- --background: oklch(0.145 0 0);
208
- --foreground: oklch(0.985 0 0);
209
-
210
- /* --- Surfaces --- */
211
- --surface: oklch(0.205 0 0);
212
- --surface-raised: oklch(0.269 0 0);
213
- --surface-overlay: oklch(0.269 0 0);
214
-
215
- /* --- Card --- */
216
- --card: oklch(0.205 0 0);
217
- --card-foreground: oklch(0.985 0 0);
218
-
219
- /* --- Popover --- */
220
- --popover: oklch(0.269 0 0);
221
- --popover-foreground: oklch(0.985 0 0);
222
-
223
- /* --- Muted --- */
224
- --muted: oklch(0.269 0 0);
225
- --muted-foreground: oklch(0.708 0 0);
226
-
227
- /* --- Primary (Brand) --- */
228
- --primary: oklch(0.922 0 0);
229
- --primary-foreground: oklch(0.205 0 0);
230
- --primary-hover: oklch(0.845 0 0);
231
- --primary-active: oklch(0.768 0 0);
232
- --primary-muted: oklch(0.269 0 0);
233
- --primary-muted-foreground: oklch(0.922 0 0);
234
-
235
- /* --- Secondary --- */
236
- --secondary: oklch(0.269 0 0);
237
- --secondary-foreground: oklch(0.985 0 0);
238
- --secondary-hover: oklch(0.371 0 0);
239
- --secondary-active: oklch(0.439 0 0);
240
-
241
- /* --- Accent --- */
242
- --accent: oklch(0.371 0 0);
243
- --accent-foreground: oklch(0.985 0 0);
244
-
245
- /* --- Success --- */
246
- --success: oklch(0.76 0.22 150.6);
247
- --success-foreground: oklch(0.18 0.04 150);
248
- --success-muted: oklch(0.28 0.1 150.6);
249
- --success-muted-foreground: oklch(0.82 0.18 148.3);
250
-
251
- /* --- Warning --- */
252
- --warning: oklch(0.88 0.2 80.5);
253
- --warning-foreground: oklch(0.18 0.04 55);
254
- --warning-muted: oklch(0.3 0.1 60.8);
255
- --warning-muted-foreground: oklch(0.88 0.17 80.5);
256
-
257
- /* --- Danger / Destructive --- */
258
- --danger: oklch(0.76 0.2 22.2);
259
- --danger-foreground: oklch(0.985 0 0);
260
- --danger-hover: oklch(0.82 0.17 22.2);
261
- --danger-active: oklch(0.86 0.14 22.2);
262
- --danger-muted: oklch(0.28 0.1 22.2);
263
- --danger-muted-foreground: oklch(0.84 0.17 22.2);
264
- --destructive: oklch(0.76 0.2 22.2);
265
- --destructive-foreground: oklch(0.985 0 0);
266
-
267
- /* --- Info --- */
268
- --info: oklch(0.76 0.18 258.3);
269
- --info-foreground: oklch(0.18 0.04 260);
270
- --info-muted: oklch(0.28 0.12 264.4);
271
- --info-muted-foreground: oklch(0.84 0.15 258.3);
272
-
273
- /* --- Borders --- */
274
- --border: oklch(1 0 0 / 10%);
275
- --border-muted: oklch(0.269 0 0);
276
- --border-strong: oklch(0.556 0 0);
277
-
278
- /* --- Focus / Ring --- */
279
- --focus-ring: oklch(0.556 0 0);
280
- --ring: oklch(0.556 0 0);
281
-
282
- /* --- Input --- */
283
- --input: oklch(1 0 0 / 15%);
284
- --input-foreground: oklch(0.985 0 0);
285
- --input-placeholder: oklch(0.556 0 0);
286
-
287
- /* --- Disabled --- */
288
- --disabled: oklch(0.269 0 0);
289
- --disabled-foreground: oklch(0.439 0 0);
290
-
291
- /* --- Chart --- */
292
- --chart-1: oklch(0.488 0.243 264.376);
293
- --chart-2: oklch(0.696 0.17 162.48);
294
- --chart-3: oklch(0.769 0.188 70.08);
295
- --chart-4: oklch(0.627 0.265 303.9);
296
- --chart-5: oklch(0.645 0.246 16.439);
297
-
298
- /* --- Sidebar --- */
299
- --sidebar: oklch(0.205 0 0);
300
- --sidebar-foreground: oklch(0.985 0 0);
301
- --sidebar-primary: oklch(0.488 0.243 264.376);
302
- --sidebar-primary-foreground: oklch(0.985 0 0);
303
- --sidebar-accent: oklch(0.269 0 0);
304
- --sidebar-accent-foreground: oklch(0.985 0 0);
305
- --sidebar-border: oklch(1 0 0 / 10%);
306
- --sidebar-ring: oklch(0.439 0 0);
307
-
308
- /* --- Dark Shadows (more opaque for dark backgrounds) --- */
309
- --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.2);
310
- --shadow-sm:
311
- 0 1px 3px 0 oklch(0 0 0 / 0.3), 0 1px 2px -1px oklch(0 0 0 / 0.3);
312
- --shadow-md:
313
- 0 4px 6px -1px oklch(0 0 0 / 0.35), 0 2px 4px -2px oklch(0 0 0 / 0.3);
314
- --shadow-lg:
315
- 0 10px 15px -3px oklch(0 0 0 / 0.35), 0 4px 6px -4px oklch(0 0 0 / 0.3);
316
- --shadow-xl:
317
- 0 20px 25px -5px oklch(0 0 0 / 0.4), 0 8px 10px -6px oklch(0 0 0 / 0.35);
318
- --shadow-2xl: 0 25px 50px -12px oklch(0 0 0 / 0.5);
319
- --shadow-focus-ring: 0 0 0 2px oklch(0.556 0 0 / 50%);
242
+ /* --- Core Backgrounds --- */
243
+ --background: oklch(0.145 0 0);
244
+ --foreground: oklch(0.985 0 0);
245
+
246
+ /* --- Surfaces --- */
247
+ --surface: oklch(0.205 0 0);
248
+ --surface-raised: oklch(0.269 0 0);
249
+ --surface-overlay: oklch(0.269 0 0);
250
+
251
+ /* --- Card --- */
252
+ --card: oklch(0.205 0 0);
253
+ --card-foreground: oklch(0.985 0 0);
254
+
255
+ /* --- Popover --- */
256
+ --popover: oklch(0.269 0 0);
257
+ --popover-foreground: oklch(0.985 0 0);
258
+
259
+ /* --- Muted --- */
260
+ --muted: oklch(0.269 0 0);
261
+ --muted-foreground: oklch(0.708 0 0);
262
+
263
+ /* --- Primary (Brand) --- */
264
+ --primary: oklch(0.922 0 0);
265
+ --primary-foreground: oklch(0.205 0 0);
266
+ --primary-hover: oklch(0.845 0 0);
267
+ --primary-active: oklch(0.768 0 0);
268
+ --primary-muted: oklch(0.269 0 0);
269
+ --primary-muted-foreground: oklch(0.922 0 0);
270
+
271
+ /* --- Secondary --- */
272
+ --secondary: oklch(0.269 0 0);
273
+ --secondary-foreground: oklch(0.985 0 0);
274
+ --secondary-hover: oklch(0.371 0 0);
275
+ --secondary-active: oklch(0.439 0 0);
276
+
277
+ /* --- Accent --- */
278
+ --accent: oklch(0.371 0 0);
279
+ --accent-foreground: oklch(0.985 0 0);
280
+
281
+ /* --- Success --- */
282
+ --success: oklch(0.76 0.22 150.6);
283
+ --success-foreground: oklch(0.18 0.04 150);
284
+ --success-muted: oklch(0.28 0.1 150.6);
285
+ --success-muted-foreground: oklch(0.82 0.18 148.3);
286
+
287
+ /* --- Warning --- */
288
+ --warning: oklch(0.88 0.2 80.5);
289
+ --warning-foreground: oklch(0.18 0.04 55);
290
+ --warning-muted: oklch(0.3 0.1 60.8);
291
+ --warning-muted-foreground: oklch(0.88 0.17 80.5);
292
+
293
+ /* --- Danger / Destructive --- */
294
+ --danger: oklch(0.76 0.2 22.2);
295
+ --danger-foreground: oklch(0.985 0 0);
296
+ --danger-hover: oklch(0.82 0.17 22.2);
297
+ --danger-active: oklch(0.86 0.14 22.2);
298
+ --danger-muted: oklch(0.28 0.1 22.2);
299
+ --danger-muted-foreground: oklch(0.84 0.17 22.2);
300
+ --destructive: oklch(0.76 0.2 22.2);
301
+ --destructive-foreground: oklch(0.985 0 0);
302
+
303
+ /* --- Info --- */
304
+ --info: oklch(0.76 0.18 258.3);
305
+ --info-foreground: oklch(0.18 0.04 260);
306
+ --info-muted: oklch(0.28 0.12 264.4);
307
+ --info-muted-foreground: oklch(0.84 0.15 258.3);
308
+
309
+ /* --- Borders --- */
310
+ --border: oklch(1 0 0 / 10%);
311
+ --border-muted: oklch(0.269 0 0);
312
+ --border-strong: oklch(0.556 0 0);
313
+
314
+ /* --- Focus / Ring --- */
315
+ --focus-ring: oklch(0.556 0 0);
316
+ --ring: oklch(0.556 0 0);
317
+
318
+ /* --- Input --- */
319
+ --input: oklch(1 0 0 / 15%);
320
+ --input-foreground: oklch(0.985 0 0);
321
+ --input-placeholder: oklch(0.556 0 0);
322
+
323
+ /* --- Disabled --- */
324
+ --disabled: oklch(0.269 0 0);
325
+ --disabled-foreground: oklch(0.439 0 0);
326
+
327
+ /* --- Chart --- */
328
+ --chart-1: oklch(0.488 0.243 264.376);
329
+ --chart-2: oklch(0.696 0.17 162.48);
330
+ --chart-3: oklch(0.769 0.188 70.08);
331
+ --chart-4: oklch(0.627 0.265 303.9);
332
+ --chart-5: oklch(0.645 0.246 16.439);
333
+
334
+ /* --- Sidebar --- */
335
+ --sidebar: oklch(0.205 0 0);
336
+ --sidebar-foreground: oklch(0.985 0 0);
337
+ --sidebar-primary: oklch(0.488 0.243 264.376);
338
+ --sidebar-primary-foreground: oklch(0.985 0 0);
339
+ --sidebar-accent: oklch(0.269 0 0);
340
+ --sidebar-accent-foreground: oklch(0.985 0 0);
341
+ --sidebar-border: oklch(1 0 0 / 10%);
342
+ --sidebar-ring: oklch(0.439 0 0);
343
+
344
+ /* --- Code Block --- */
345
+ --code-bg: oklch(0.145 0 0);
346
+ --code-foreground: oklch(0.85 0 0);
347
+ --code-border: oklch(0.24 0 0);
348
+ --code-header-bg: oklch(0.12 0 0);
349
+ --code-header-border: oklch(0.22 0 0);
350
+ --code-header-foreground: oklch(0.65 0 0);
351
+ --code-badge-bg: oklch(0.20 0 0);
352
+ --code-badge-foreground: oklch(0.55 0 0);
353
+ --code-badge-border: oklch(0.25 0 0);
354
+ --code-copy-foreground: oklch(0.55 0 0);
355
+ --code-copy-hover-foreground: oklch(0.78 0 0);
356
+ --code-copy-hover-bg: oklch(0.20 0 0);
357
+ --code-success: oklch(0.72 0.17 155);
358
+ --code-line-number: oklch(0.38 0 0);
359
+ --code-keyword: oklch(0.72 0.15 280);
360
+ --code-string: oklch(0.75 0.14 70);
361
+ --code-comment: oklch(0.52 0.02 160);
362
+ --code-number: oklch(0.78 0.14 140);
363
+ --code-operator: oklch(0.85 0 0);
364
+ --code-punctuation: oklch(0.65 0 0);
365
+ --code-function: oklch(0.80 0.14 210);
366
+ --code-type: oklch(0.75 0.12 170);
367
+ --code-tag: oklch(0.72 0.16 20);
368
+ --code-attr-name: oklch(0.78 0.12 200);
369
+ --code-component: oklch(0.75 0.12 170);
370
+
371
+ /* --- Dark Shadows (more opaque for dark backgrounds) --- */
372
+ --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.2);
373
+ --shadow-sm:
374
+ 0 1px 3px 0 oklch(0 0 0 / 0.3), 0 1px 2px -1px oklch(0 0 0 / 0.3);
375
+ --shadow-md:
376
+ 0 4px 6px -1px oklch(0 0 0 / 0.35), 0 2px 4px -2px oklch(0 0 0 / 0.3);
377
+ --shadow-lg:
378
+ 0 10px 15px -3px oklch(0 0 0 / 0.35), 0 4px 6px -4px oklch(0 0 0 / 0.3);
379
+ --shadow-xl:
380
+ 0 20px 25px -5px oklch(0 0 0 / 0.4), 0 8px 10px -6px oklch(0 0 0 / 0.35);
381
+ --shadow-2xl: 0 25px 50px -12px oklch(0 0 0 / 0.5);
382
+ --shadow-focus-ring: 0 0 0 2px oklch(0.556 0 0 / 50%);
320
383
  }
321
384
 
322
385
  /* ---------------------------------------------------------------------------
@@ -335,171 +398,206 @@
335
398
  --------------------------------------------------------------------------- */
336
399
 
337
400
  @theme {
338
- /* --- Colors (oklch direct references — no prefix) --- */
339
-
340
- /* Core Backgrounds */
341
- --color-background: var(--background);
342
- --color-foreground: var(--foreground);
343
-
344
- /* Surfaces */
345
- --color-surface: var(--surface);
346
- --color-surface-raised: var(--surface-raised);
347
- --color-surface-overlay: var(--surface-overlay);
348
-
349
- /* Card */
350
- --color-card: var(--card);
351
- --color-card-foreground: var(--card-foreground);
352
-
353
- /* Popover */
354
- --color-popover: var(--popover);
355
- --color-popover-foreground: var(--popover-foreground);
356
-
357
- /* Muted */
358
- --color-muted: var(--muted);
359
- --color-muted-foreground: var(--muted-foreground);
360
-
361
- /* Primary */
362
- --color-primary: var(--primary);
363
- --color-primary-foreground: var(--primary-foreground);
364
- --color-primary-hover: var(--primary-hover);
365
- --color-primary-active: var(--primary-active);
366
- --color-primary-muted: var(--primary-muted);
367
- --color-primary-muted-foreground: var(--primary-muted-foreground);
368
-
369
- /* Secondary */
370
- --color-secondary: var(--secondary);
371
- --color-secondary-foreground: var(--secondary-foreground);
372
- --color-secondary-hover: var(--secondary-hover);
373
- --color-secondary-active: var(--secondary-active);
374
-
375
- /* Accent */
376
- --color-accent: var(--accent);
377
- --color-accent-foreground: var(--accent-foreground);
378
-
379
- /* Success */
380
- --color-success: var(--success);
381
- --color-success-foreground: var(--success-foreground);
382
- --color-success-muted: var(--success-muted);
383
- --color-success-muted-foreground: var(--success-muted-foreground);
384
-
385
- /* Warning */
386
- --color-warning: var(--warning);
387
- --color-warning-foreground: var(--warning-foreground);
388
- --color-warning-muted: var(--warning-muted);
389
- --color-warning-muted-foreground: var(--warning-muted-foreground);
390
-
391
- /* Danger */
392
- --color-danger: var(--danger);
393
- --color-danger-foreground: var(--danger-foreground);
394
- --color-danger-hover: var(--danger-hover);
395
- --color-danger-active: var(--danger-active);
396
- --color-danger-muted: var(--danger-muted);
397
- --color-danger-muted-foreground: var(--danger-muted-foreground);
398
-
399
- /* Destructive (alias for danger — matches shadcn/ui naming) */
400
- --color-destructive: var(--destructive);
401
- --color-destructive-foreground: var(--destructive-foreground);
402
-
403
- /* Info */
404
- --color-info: var(--info);
405
- --color-info-foreground: var(--info-foreground);
406
- --color-info-muted: var(--info-muted);
407
- --color-info-muted-foreground: var(--info-muted-foreground);
408
-
409
- /* Borders */
410
- --color-border: var(--border);
411
- --color-border-muted: var(--border-muted);
412
- --color-border-strong: var(--border-strong);
413
-
414
- /* Focus / Ring */
415
- --color-focus-ring: var(--focus-ring);
416
- --color-ring: var(--ring);
417
-
418
- /* Input */
419
- --color-input: var(--input);
420
- --color-input-foreground: var(--input-foreground);
421
- --color-input-placeholder: var(--input-placeholder);
422
-
423
- /* Disabled */
424
- --color-disabled: var(--disabled);
425
- --color-disabled-foreground: var(--disabled-foreground);
426
-
427
- /* Chart */
428
- --color-chart-1: var(--chart-1);
429
- --color-chart-2: var(--chart-2);
430
- --color-chart-3: var(--chart-3);
431
- --color-chart-4: var(--chart-4);
432
- --color-chart-5: var(--chart-5);
433
-
434
- /* Sidebar */
435
- --color-sidebar: var(--sidebar);
436
- --color-sidebar-foreground: var(--sidebar-foreground);
437
- --color-sidebar-primary: var(--sidebar-primary);
438
- --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
439
- --color-sidebar-accent: var(--sidebar-accent);
440
- --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
441
- --color-sidebar-border: var(--sidebar-border);
442
- --color-sidebar-ring: var(--sidebar-ring);
443
-
444
- /* --- Border Radius --- */
445
- --radius: 0.625rem;
446
- --radius-none: 0px;
447
- --radius-sm: 4px;
448
- --radius-md: 6px;
449
- --radius-lg: 8px;
450
- --radius-xl: 12px;
451
- --radius-full: 9999px;
452
-
453
- /* --- Shadows (light-mode defaults; .dark overrides at runtime) --- */
454
- --shadow-none: none;
455
- --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.05);
456
- --shadow-sm:
457
- 0 1px 3px 0 oklch(0 0 0 / 0.1), 0 1px 2px -1px oklch(0 0 0 / 0.1);
458
- --shadow-md:
459
- 0 4px 6px -1px oklch(0 0 0 / 0.1), 0 2px 4px -2px oklch(0 0 0 / 0.1);
460
- --shadow-lg:
461
- 0 10px 15px -3px oklch(0 0 0 / 0.1), 0 4px 6px -4px oklch(0 0 0 / 0.1);
462
- --shadow-xl:
463
- 0 20px 25px -5px oklch(0 0 0 / 0.1), 0 8px 10px -6px oklch(0 0 0 / 0.1);
464
- --shadow-2xl: 0 25px 50px -12px oklch(0 0 0 / 0.25);
465
- --shadow-focus-ring: 0 0 0 2px oklch(0.708 0 0 / 40%);
466
-
467
- /* --- Z-Index --- */
468
- --z-index-base: 0;
469
- --z-index-dropdown: 10;
470
- --z-index-sticky: 20;
471
- --z-index-overlay: 30;
472
- --z-index-modal: 40;
473
- --z-index-popover: 50;
474
- --z-index-toast: 60;
475
- --z-index-tooltip: 70;
476
- --z-index-max: 9999;
477
-
478
- /* --- Transition Durations --- */
479
- --transition-duration-instant: 0ms;
480
- --transition-duration-fast: 100ms;
481
- --transition-duration-moderate: 150ms;
482
- --transition-duration-normal: 200ms;
483
- --transition-duration-slow: 300ms;
484
- --transition-duration-slower: 400ms;
485
- --transition-duration-slowest: 500ms;
486
-
487
- /* --- Transition Easing --- */
488
- --transition-timing-function-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
489
- --transition-timing-function-decelerate: cubic-bezier(0, 0, 0.2, 1);
490
- --transition-timing-function-accelerate: cubic-bezier(0.4, 0, 1, 1);
491
- --transition-timing-function-emphasize: cubic-bezier(0, 0, 0.15, 1);
492
- --transition-timing-function-linear: cubic-bezier(0, 0, 1, 1);
493
- --transition-timing-function-snap: cubic-bezier(0.2, 0, 0, 1);
494
-
495
- /* --- Font Families --- */
496
- --font-display: var(--font-inter), system-ui, -apple-system, BlinkMacSystemFont,
497
- "Segoe UI", Roboto, sans-serif;
498
- --font-sans: var(--font-outfit), system-ui, -apple-system, BlinkMacSystemFont,
499
- "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
500
- --font-serif: var(--font-lora), Georgia, "Times New Roman", serif;
501
- --font-mono: var(--font-jetbrains), "Fira Code", "SF Mono", "Cascadia Code",
502
- Consolas, "Liberation Mono", Menlo, monospace;
401
+ /* --- Colors (oklch direct references — no prefix) --- */
402
+
403
+ /* Core Backgrounds */
404
+ --color-background: var(--background);
405
+ --color-foreground: var(--foreground);
406
+
407
+ /* Surfaces */
408
+ --color-surface: var(--surface);
409
+ --color-surface-raised: var(--surface-raised);
410
+ --color-surface-overlay: var(--surface-overlay);
411
+
412
+ /* Card */
413
+ --color-card: var(--card);
414
+ --color-card-foreground: var(--card-foreground);
415
+
416
+ /* Popover */
417
+ --color-popover: var(--popover);
418
+ --color-popover-foreground: var(--popover-foreground);
419
+
420
+ /* Muted */
421
+ --color-muted: var(--muted);
422
+ --color-muted-foreground: var(--muted-foreground);
423
+
424
+ /* Primary */
425
+ --color-primary: var(--primary);
426
+ --color-primary-foreground: var(--primary-foreground);
427
+ --color-primary-hover: var(--primary-hover);
428
+ --color-primary-active: var(--primary-active);
429
+ --color-primary-muted: var(--primary-muted);
430
+ --color-primary-muted-foreground: var(--primary-muted-foreground);
431
+
432
+ /* Secondary */
433
+ --color-secondary: var(--secondary);
434
+ --color-secondary-foreground: var(--secondary-foreground);
435
+ --color-secondary-hover: var(--secondary-hover);
436
+ --color-secondary-active: var(--secondary-active);
437
+
438
+ /* Accent */
439
+ --color-accent: var(--accent);
440
+ --color-accent-foreground: var(--accent-foreground);
441
+
442
+ /* Success */
443
+ --color-success: var(--success);
444
+ --color-success-foreground: var(--success-foreground);
445
+ --color-success-muted: var(--success-muted);
446
+ --color-success-muted-foreground: var(--success-muted-foreground);
447
+
448
+ /* Warning */
449
+ --color-warning: var(--warning);
450
+ --color-warning-foreground: var(--warning-foreground);
451
+ --color-warning-muted: var(--warning-muted);
452
+ --color-warning-muted-foreground: var(--warning-muted-foreground);
453
+
454
+ /* Danger */
455
+ --color-danger: var(--danger);
456
+ --color-danger-foreground: var(--danger-foreground);
457
+ --color-danger-hover: var(--danger-hover);
458
+ --color-danger-active: var(--danger-active);
459
+ --color-danger-muted: var(--danger-muted);
460
+ --color-danger-muted-foreground: var(--danger-muted-foreground);
461
+
462
+ /* Destructive (alias for danger — matches shadcn/ui naming) */
463
+ --color-destructive: var(--destructive);
464
+ --color-destructive-foreground: var(--destructive-foreground);
465
+
466
+ /* Info */
467
+ --color-info: var(--info);
468
+ --color-info-foreground: var(--info-foreground);
469
+ --color-info-muted: var(--info-muted);
470
+ --color-info-muted-foreground: var(--info-muted-foreground);
471
+
472
+ /* Borders */
473
+ --color-border: var(--border);
474
+ --color-border-muted: var(--border-muted);
475
+ --color-border-strong: var(--border-strong);
476
+
477
+ /* Focus / Ring */
478
+ --color-focus-ring: var(--focus-ring);
479
+ --color-ring: var(--ring);
480
+
481
+ /* Input */
482
+ --color-input: var(--input);
483
+ --color-input-foreground: var(--input-foreground);
484
+ --color-input-placeholder: var(--input-placeholder);
485
+
486
+ /* Disabled */
487
+ --color-disabled: var(--disabled);
488
+ --color-disabled-foreground: var(--disabled-foreground);
489
+
490
+ /* Chart */
491
+ --color-chart-1: var(--chart-1);
492
+ --color-chart-2: var(--chart-2);
493
+ --color-chart-3: var(--chart-3);
494
+ --color-chart-4: var(--chart-4);
495
+ --color-chart-5: var(--chart-5);
496
+
497
+ /* Code Block */
498
+ --color-code-bg: var(--code-bg);
499
+ --color-code-foreground: var(--code-foreground);
500
+ --color-code-border: var(--code-border);
501
+ --color-code-header-bg: var(--code-header-bg);
502
+ --color-code-header-border: var(--code-header-border);
503
+ --color-code-header-foreground: var(--code-header-foreground);
504
+ --color-code-badge-bg: var(--code-badge-bg);
505
+ --color-code-badge-foreground: var(--code-badge-foreground);
506
+ --color-code-badge-border: var(--code-badge-border);
507
+ --color-code-copy-foreground: var(--code-copy-foreground);
508
+ --color-code-copy-hover-foreground: var(--code-copy-hover-foreground);
509
+ --color-code-copy-hover-bg: var(--code-copy-hover-bg);
510
+ --color-code-success: var(--code-success);
511
+ --color-code-line-number: var(--code-line-number);
512
+
513
+ /* Sidebar */
514
+ --color-sidebar: var(--sidebar);
515
+ --color-sidebar-foreground: var(--sidebar-foreground);
516
+ --color-sidebar-primary: var(--sidebar-primary);
517
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
518
+ --color-sidebar-accent: var(--sidebar-accent);
519
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
520
+ --color-sidebar-border: var(--sidebar-border);
521
+ --color-sidebar-ring: var(--sidebar-ring);
522
+
523
+ /* --- Z-Index --- */
524
+ --z-index-base: 0;
525
+ --z-index-dropdown: 10;
526
+ --z-index-sticky: 20;
527
+ --z-index-overlay: 30;
528
+ --z-index-modal: 40;
529
+ --z-index-popover: 50;
530
+ --z-index-toast: 60;
531
+ --z-index-tooltip: 70;
532
+ --z-index-max: 9999;
533
+
534
+ /* --- Transition Durations --- */
535
+ --transition-duration-instant: 0ms;
536
+ --transition-duration-fast: 100ms;
537
+ --transition-duration-moderate: 150ms;
538
+ --transition-duration-normal: 200ms;
539
+ --transition-duration-slow: 300ms;
540
+ --transition-duration-slower: 400ms;
541
+ --transition-duration-slowest: 500ms;
542
+
543
+ /* --- Transition Easing --- */
544
+ --transition-timing-function-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
545
+ --transition-timing-function-decelerate: cubic-bezier(0, 0, 0.2, 1);
546
+ --transition-timing-function-accelerate: cubic-bezier(0.4, 0, 1, 1);
547
+ --transition-timing-function-emphasize: cubic-bezier(0, 0, 0.15, 1);
548
+ --transition-timing-function-linear: cubic-bezier(0, 0, 1, 1);
549
+ --transition-timing-function-snap: cubic-bezier(0.2, 0, 0, 1);
550
+
551
+ /* --- Font Families (static — not overridden at runtime) --- */
552
+ --font-display:
553
+ var(--font-inter), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
554
+ Roboto, sans-serif;
555
+ --font-serif: var(--font-lora), Georgia, "Times New Roman", serif;
556
+ --font-mono:
557
+ var(--font-jetbrains), "Fira Code", "SF Mono", "Cascadia Code", Consolas,
558
+ "Liberation Mono", Menlo, monospace;
559
+ }
560
+
561
+ /* ---------------------------------------------------------------------------
562
+ Layer 3b: Dynamic Theme Variables (runtime-overridable)
563
+ ---------------------------------------------------------------------------
564
+ These use @theme inline so Tailwind emits var() references instead of
565
+ resolving the values at build time. This allows the theme customizer to
566
+ override --radius-*, --shadow-*, and --font-sans at runtime via an
567
+ injected <style> element.
568
+ --------------------------------------------------------------------------- */
569
+
570
+ @theme inline {
571
+ /* --- Border Radius (references :root custom properties) --- */
572
+ --radius: var(--radius);
573
+ --radius-none: var(--radius-none);
574
+ --radius-sm: var(--radius-sm);
575
+ --radius-md: var(--radius-md);
576
+ --radius-lg: var(--radius-lg);
577
+ --radius-xl: var(--radius-xl);
578
+ --radius-full: var(--radius-full);
579
+
580
+ /* --- Shadows (references :root custom properties) --- */
581
+ --shadow-none: var(--shadow-none);
582
+ --shadow-xs: var(--shadow-xs);
583
+ --shadow-sm: var(--shadow-sm);
584
+ --shadow-md: var(--shadow-md);
585
+ --shadow-lg: var(--shadow-lg);
586
+ --shadow-xl: var(--shadow-xl);
587
+ --shadow-2xl: var(--shadow-2xl);
588
+ --shadow-focus-ring: var(--shadow-focus-ring);
589
+
590
+ /* --- Font Sans (overridden by theme customizer) --- */
591
+ --font-sans: var(--font-sans);
592
+
593
+ /* --- Component Spacing (Style Preset Tokens) --- */
594
+ --ds-spacing-unit: var(--ds-spacing-unit);
595
+ --ds-padding-card: var(--ds-padding-card);
596
+ --ds-padding-button-x: var(--ds-padding-button-x);
597
+ --ds-padding-button-y: var(--ds-padding-button-y);
598
+ --ds-gap-default: var(--ds-gap-default);
599
+ --ds-border-width: var(--ds-border-width);
600
+ --ds-control-height: var(--ds-control-height);
503
601
  }
504
602
 
505
603
  /* ---------------------------------------------------------------------------
@@ -511,13 +609,13 @@
511
609
  --------------------------------------------------------------------------- */
512
610
 
513
611
  .ds-focus-ring {
514
- border-color: var(--border-strong);
612
+ border-color: var(--border-strong);
515
613
  }
516
614
 
517
615
  /* Focus indicator as a box-shadow variant (kept for backwards compat,
518
616
  now uses a very faint 1px shadow instead of a 2px ring) */
519
617
  .ds-focus-ring-shadow {
520
- box-shadow: 0 0 0 1px var(--border-strong);
618
+ box-shadow: 0 0 0 1px var(--border-strong);
521
619
  }
522
620
 
523
621
  /* ---------------------------------------------------------------------------
@@ -529,21 +627,86 @@
529
627
  --------------------------------------------------------------------------- */
530
628
 
531
629
  [data-ds] {
532
- font-family: var(--font-sans);
533
- -webkit-font-smoothing: antialiased;
534
- -moz-osx-font-smoothing: grayscale;
630
+ font-family: var(--font-sans);
631
+ -webkit-font-smoothing: antialiased;
632
+ -moz-osx-font-smoothing: grayscale;
633
+ }
634
+
635
+ /* ---------------------------------------------------------------------------
636
+ Layer 5b: CodeBlock Dark Variant Override
637
+ ---------------------------------------------------------------------------
638
+ When variant="dark" is set on CodeBlock, the component renders
639
+ data-ds-variant="dark". This forces an even deeper black background
640
+ regardless of the current light/dark theme — useful for hero sections
641
+ or marketing pages where a high-contrast code block is desired.
642
+ --------------------------------------------------------------------------- */
643
+
644
+ [data-ds-component="code-block"][data-ds-variant="dark"] {
645
+ --code-bg: oklch(0.105 0 0);
646
+ --code-foreground: oklch(0.85 0 0);
647
+ --code-border: oklch(0.19 0 0);
648
+ --code-header-bg: oklch(0.085 0 0);
649
+ --code-header-border: oklch(0.16 0 0);
650
+ --code-header-foreground: oklch(0.60 0 0);
651
+ --code-badge-bg: oklch(0.16 0 0);
652
+ --code-badge-foreground: oklch(0.50 0 0);
653
+ --code-badge-border: oklch(0.20 0 0);
654
+ --code-copy-foreground: oklch(0.50 0 0);
655
+ --code-copy-hover-foreground: oklch(0.75 0 0);
656
+ --code-copy-hover-bg: oklch(0.16 0 0);
657
+ --code-success: oklch(0.72 0.17 155);
658
+ --code-line-number: oklch(0.33 0 0);
659
+ --code-keyword: oklch(0.72 0.15 280);
660
+ --code-string: oklch(0.75 0.14 70);
661
+ --code-comment: oklch(0.52 0.02 160);
662
+ --code-number: oklch(0.78 0.14 140);
663
+ --code-operator: oklch(0.85 0 0);
664
+ --code-punctuation: oklch(0.65 0 0);
665
+ --code-function: oklch(0.80 0.14 210);
666
+ --code-type: oklch(0.75 0.12 170);
667
+ --code-tag: oklch(0.72 0.16 20);
668
+ --code-attr-name: oklch(0.78 0.12 200);
669
+ --code-component: oklch(0.75 0.12 170);
670
+ }
671
+
672
+ /* ---------------------------------------------------------------------------
673
+ Layer 5c: CodeBlock Inner Element Resets
674
+ ---------------------------------------------------------------------------
675
+ Strip inherited prose/typography styles (e.g. from Fumadocs) from the
676
+ <pre> and <code> elements inside CodeBlock. Without this, the Fumadocs
677
+ typography plugin applies background, border, padding, and border-radius
678
+ to bare <code> elements — creating visible artifacts (shadow-like edges)
679
+ inside the code block.
680
+ --------------------------------------------------------------------------- */
681
+
682
+ [data-ds-component="code-block"] pre {
683
+ background: transparent;
684
+ border: 0;
685
+ box-shadow: none;
686
+ border-radius: 0;
687
+ margin: 0;
688
+ }
689
+
690
+ [data-ds-component="code-block"] code {
691
+ background: transparent;
692
+ border: 0;
693
+ padding: 0;
694
+ border-radius: 0;
695
+ box-shadow: none;
696
+ color: inherit;
697
+ font-size: inherit;
535
698
  }
536
699
 
537
700
  /* Consistent focus behavior for all interactive DS elements —
538
701
  subtle border-color shift only, no ring or outline */
539
702
  [data-ds] :focus-visible {
540
- outline: none;
541
- border-color: var(--border-strong);
703
+ outline: none;
704
+ border-color: var(--border-strong);
542
705
  }
543
706
 
544
707
  /* Remove default focus styles for mouse users (keep for keyboard) */
545
708
  [data-ds] :focus:not(:focus-visible) {
546
- outline: none;
709
+ outline: none;
547
710
  }
548
711
 
549
712
  /* ---------------------------------------------------------------------------
@@ -554,24 +717,24 @@
554
717
  --------------------------------------------------------------------------- */
555
718
 
556
719
  .ds-transition {
557
- transition-property:
558
- color, background-color, border-color, box-shadow, opacity, transform;
559
- transition-duration: var(--duration-normal);
560
- transition-timing-function: var(--easing-standard);
720
+ transition-property:
721
+ color, background-color, border-color, box-shadow, opacity, transform;
722
+ transition-duration: var(--duration-normal);
723
+ transition-timing-function: var(--easing-standard);
561
724
  }
562
725
 
563
726
  .ds-transition-fast {
564
- transition-property:
565
- color, background-color, border-color, box-shadow, opacity, transform;
566
- transition-duration: var(--duration-fast);
567
- transition-timing-function: var(--easing-standard);
727
+ transition-property:
728
+ color, background-color, border-color, box-shadow, opacity, transform;
729
+ transition-duration: var(--duration-fast);
730
+ transition-timing-function: var(--easing-standard);
568
731
  }
569
732
 
570
733
  .ds-transition-slow {
571
- transition-property:
572
- color, background-color, border-color, box-shadow, opacity, transform;
573
- transition-duration: var(--duration-slow);
574
- transition-timing-function: var(--easing-decelerate);
734
+ transition-property:
735
+ color, background-color, border-color, box-shadow, opacity, transform;
736
+ transition-duration: var(--duration-slow);
737
+ transition-timing-function: var(--easing-decelerate);
575
738
  }
576
739
 
577
740
  /* ---------------------------------------------------------------------------
@@ -582,12 +745,12 @@
582
745
  --------------------------------------------------------------------------- */
583
746
 
584
747
  @media (prefers-reduced-motion: reduce) {
585
- [data-ds] *,
586
- [data-ds] *::before,
587
- [data-ds] *::after {
588
- animation-duration: 0.01ms !important;
589
- animation-iteration-count: 1 !important;
590
- transition-duration: 0.01ms !important;
591
- scroll-behavior: auto !important;
592
- }
748
+ [data-ds] *,
749
+ [data-ds] *::before,
750
+ [data-ds] *::after {
751
+ animation-duration: 0.01ms;
752
+ animation-iteration-count: 1;
753
+ transition-duration: 0.01ms;
754
+ scroll-behavior: auto;
755
+ }
593
756
  }