@mcp-b/design-tokens 0.14.2 → 0.16.1

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 (12) hide show
  1. package/package.json +3 -5
  2. package/src/borders.css +1 -5
  3. package/src/focus.css +1 -5
  4. package/src/index.css +1 -2
  5. package/src/palettes.css +1 -5
  6. package/src/seeds.css +1 -5
  7. package/src/semantic-colors.css +290 -0
  8. package/src/spacing.css +1 -5
  9. package/src/themes.css +620 -4
  10. package/src/typography.css +1 -5
  11. package/src/semantic-dark.css +0 -132
  12. package/src/semantic-light.css +0 -134
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mcp-b/design-tokens",
3
- "version": "0.14.2",
3
+ "version": "0.16.1",
4
4
  "description": "Shared design tokens for MCP-B React applications.",
5
5
  "homepage": "https://mcp-b-design-system-storybook.alexmnahas.workers.dev",
6
6
  "bugs": {
@@ -32,10 +32,8 @@
32
32
  "./palettes.css": "./src/palettes.css",
33
33
  "./seeds": "./src/seeds.css",
34
34
  "./seeds.css": "./src/seeds.css",
35
- "./semantic-dark": "./src/semantic-dark.css",
36
- "./semantic-dark.css": "./src/semantic-dark.css",
37
- "./semantic-light": "./src/semantic-light.css",
38
- "./semantic-light.css": "./src/semantic-light.css",
35
+ "./semantic-colors": "./src/semantic-colors.css",
36
+ "./semantic-colors.css": "./src/semantic-colors.css",
39
37
  "./spacing": "./src/spacing.css",
40
38
  "./spacing.css": "./src/spacing.css",
41
39
  "./themes": "./src/themes.css",
package/src/borders.css CHANGED
@@ -2,11 +2,7 @@
2
2
  * Border Tokens
3
3
  */
4
4
 
5
- :root,
6
- .sigvelo-light,
7
- .sigvelo-dark,
8
- [data-theme="light"],
9
- [data-theme="dark"] {
5
+ :root {
10
6
  --sigvelo-border-style: solid;
11
7
  --sigvelo-border-width: 1px;
12
8
  --sigvelo-radius-xs: 0.1875rem; /* 3px */
package/src/focus.css CHANGED
@@ -2,11 +2,7 @@
2
2
  * Focus Tokens
3
3
  */
4
4
 
5
- :root,
6
- .sigvelo-light,
7
- .sigvelo-dark,
8
- [data-theme="light"],
9
- [data-theme="dark"] {
5
+ :root {
10
6
  --sigvelo-focus-width: 3px;
11
7
  --sigvelo-focus-offset: 1px;
12
8
  --sigvelo-backdrop-filter: blur(6px);
package/src/index.css CHANGED
@@ -5,6 +5,5 @@
5
5
  @import "./focus.css";
6
6
  @import "./spacing.css";
7
7
  @import "./motion.css";
8
- @import "./semantic-light.css";
9
- @import "./semantic-dark.css";
8
+ @import "./semantic-colors.css";
10
9
  @import "./themes.css";
package/src/palettes.css CHANGED
@@ -8,11 +8,7 @@
8
8
  * building components that support dark mode.
9
9
  */
10
10
 
11
- :root,
12
- .sigvelo-light,
13
- .sigvelo-dark,
14
- [data-theme="light"],
15
- [data-theme="dark"] {
11
+ :root {
16
12
  /* Primary */
17
13
  --sigvelo-color-primary-50: color-mix(in oklab, var(--sigvelo-color-primary-seed), white 95%);
18
14
  --sigvelo-color-primary-100: color-mix(in oklab, var(--sigvelo-color-primary-seed), white 87%);
package/src/seeds.css CHANGED
@@ -7,11 +7,7 @@
7
7
  * Avoid using seed colors directly in stylesheets.
8
8
  */
9
9
 
10
- :root,
11
- .sigvelo-light,
12
- .sigvelo-dark,
13
- [data-theme="light"],
14
- [data-theme="dark"] {
10
+ :root {
15
11
  --sigvelo-color-primary-seed: #007dba;
16
12
  --sigvelo-color-neutral-seed: #8b8c93;
17
13
  --sigvelo-color-success-seed: #5dbb55;
package/src/semantic-colors.css ADDED
@@ -0,0 +1,290 @@
1
+ /*
2
+ * Theme-specific semantic color and shadow values.
3
+ *
4
+ * These paired values are implementation details. Components consume the
5
+ * unsuffixed semantic aliases activated in themes.css.
6
+ */
7
+
8
+ :root {
9
+ --sigvelo-color-canvas-light: white;
10
+ --sigvelo-color-canvas-dark: var(--sigvelo-color-neutral-950);
11
+ --sigvelo-color-surface-light: white;
12
+ --sigvelo-color-surface-dark: color-mix(in oklab, var(--sigvelo-color-neutral-950), white 2.5%);
13
+ --sigvelo-color-text-light: var(--sigvelo-color-neutral-900);
14
+ --sigvelo-color-text-dark: var(--sigvelo-color-neutral-200);
15
+ --sigvelo-color-text-muted-light: var(--sigvelo-color-neutral-700);
16
+ --sigvelo-color-text-muted-dark: var(--sigvelo-color-neutral-500);
17
+ --sigvelo-color-focus-light: var(--sigvelo-color-primary-bg-light);
18
+ --sigvelo-color-focus-dark: var(--sigvelo-color-primary-bg-dark);
19
+ --sigvelo-focus-ring-light: var(--sigvelo-border-style) var(--sigvelo-focus-width)
20
+ var(--sigvelo-color-focus-light);
21
+ --sigvelo-focus-ring-dark: var(--sigvelo-border-style) var(--sigvelo-focus-width)
22
+ var(--sigvelo-color-focus-dark);
23
+ --sigvelo-color-backdrop-light: rgb(0 0 0 / 0.5);
24
+ --sigvelo-color-backdrop-dark: rgb(0 0 0 / 0.5);
25
+ --sigvelo-color-selection-bg-light: var(--sigvelo-color-primary-300);
26
+ --sigvelo-color-selection-bg-dark: var(--sigvelo-color-primary-700);
27
+ --sigvelo-color-selection-text-light: var(--sigvelo-color-text-light);
28
+ --sigvelo-color-selection-text-dark: var(--sigvelo-color-text-dark);
29
+ --sigvelo-color-shadow-light: black;
30
+ --sigvelo-color-shadow-dark: black;
31
+ --sigvelo-shadow-xs-light: 0 0.0625rem 0.0625rem
32
+ color-mix(in oklab, transparent, var(--sigvelo-color-shadow-light) 4%);
33
+ --sigvelo-shadow-xs-dark: 0 1px 2px
34
+ color-mix(in oklab, transparent, var(--sigvelo-color-shadow-dark) 8%);
35
+ --sigvelo-shadow-sm-light: 0 0.125rem 0.1875rem
36
+ color-mix(in oklab, transparent, var(--sigvelo-color-shadow-light) 8%);
37
+ --sigvelo-shadow-sm-dark: 0 2px 4px
38
+ color-mix(in oklab, transparent, var(--sigvelo-color-shadow-dark) 12%);
39
+ --sigvelo-shadow-md-light: 0 0.1875rem 0.375rem
40
+ color-mix(in oklab, transparent, var(--sigvelo-color-shadow-light) 10%);
41
+ --sigvelo-shadow-md-dark: 0 4px 8px
42
+ color-mix(in oklab, transparent, var(--sigvelo-color-shadow-dark) 16%);
43
+ --sigvelo-shadow-lg-light: 0 0.375rem 0.75rem
44
+ color-mix(in oklab, transparent, var(--sigvelo-color-shadow-light) 12%);
45
+ --sigvelo-shadow-lg-dark: 0 8px 16px
46
+ color-mix(in oklab, transparent, var(--sigvelo-color-shadow-dark) 20%);
47
+ --sigvelo-shadow-xl-light: 0 0.5rem 1rem
48
+ color-mix(in oklab, transparent, var(--sigvelo-color-shadow-light) 14%);
49
+ --sigvelo-shadow-xl-dark: 0 12px 20px
50
+ color-mix(in oklab, transparent, var(--sigvelo-color-shadow-dark) 24%);
51
+ --sigvelo-inset-shadow-xs-light: inset 0 0.125rem 0.125rem -0.125rem
52
+ color-mix(in oklab, black, transparent 94%);
53
+ --sigvelo-inset-shadow-xs-dark: var(--sigvelo-inset-shadow-xs-light);
54
+ --sigvelo-inset-shadow-sm-light: inset 0 0.25rem 0.25rem -0.25rem
55
+ color-mix(in oklab, black, transparent 90%);
56
+ --sigvelo-inset-shadow-sm-dark: var(--sigvelo-inset-shadow-sm-light);
57
+ --sigvelo-inset-shadow-md-light: inset 0 0.5rem 0.5rem -0.5rem
58
+ color-mix(in oklab, black, transparent 88%);
59
+ --sigvelo-inset-shadow-md-dark: var(--sigvelo-inset-shadow-md-light);
60
+ --sigvelo-inset-shadow-lg-light: inset 0 1rem 1rem -1rem
61
+ color-mix(in oklab, black, transparent 85%);
62
+ --sigvelo-inset-shadow-lg-dark: var(--sigvelo-inset-shadow-lg-light);
63
+ --sigvelo-inset-shadow-xl-light: inset 0 1.5rem 1.5rem -1.5rem
64
+ color-mix(in oklab, black, transparent 82%);
65
+ --sigvelo-inset-shadow-xl-dark: var(--sigvelo-inset-shadow-xl-light);
66
+ --sigvelo-color-primary-bg-subtle-light: var(--sigvelo-color-primary-100);
67
+ --sigvelo-color-primary-bg-subtle-dark: color-mix(
68
+ in oklab,
69
+ var(--sigvelo-color-primary-900),
70
+ white 1%
71
+ );
72
+ --sigvelo-color-primary-bg-muted-light: var(--sigvelo-color-primary-200);
73
+ --sigvelo-color-primary-bg-muted-dark: var(--sigvelo-color-primary-800);
74
+ --sigvelo-color-primary-bg-light: color-mix(
75
+ in oklab,
76
+ var(--sigvelo-color-primary-600),
77
+ black 2.5%
78
+ );
79
+ --sigvelo-color-primary-bg-dark: color-mix(
80
+ in oklab,
81
+ var(--sigvelo-color-primary-600),
82
+ black 7.5%
83
+ );
84
+ --sigvelo-color-primary-bg-strong-light: var(--sigvelo-color-primary-800);
85
+ --sigvelo-color-primary-bg-strong-dark: var(--sigvelo-color-primary-200);
86
+ --sigvelo-color-primary-bg-stronger-light: var(--sigvelo-color-primary-900);
87
+ --sigvelo-color-primary-bg-stronger-dark: var(--sigvelo-color-primary-100);
88
+ --sigvelo-color-primary-text-on-subtle-light: var(--sigvelo-color-primary-900);
89
+ --sigvelo-color-primary-text-on-subtle-dark: var(--sigvelo-color-primary-100);
90
+ --sigvelo-color-primary-text-on-bg-light: white;
91
+ --sigvelo-color-primary-text-on-bg-dark: white;
92
+ --sigvelo-color-primary-text-on-strong-light: white;
93
+ --sigvelo-color-primary-text-on-strong-dark: black;
94
+ --sigvelo-color-primary-text-light: color-mix(
95
+ in oklab,
96
+ var(--sigvelo-color-primary-600),
97
+ black 12.5%
98
+ );
99
+ --sigvelo-color-primary-text-dark: var(--sigvelo-color-primary-500);
100
+ --sigvelo-color-primary-border-subtle-light: color-mix(
101
+ in oklab,
102
+ var(--sigvelo-color-primary-100),
103
+ black 3%
104
+ );
105
+ --sigvelo-color-primary-border-subtle-dark: color-mix(
106
+ in oklab,
107
+ var(--sigvelo-color-primary-900),
108
+ white 7.5%
109
+ );
110
+ --sigvelo-color-primary-border-muted-light: var(--sigvelo-color-primary-300);
111
+ --sigvelo-color-primary-border-muted-dark: var(--sigvelo-color-primary-800);
112
+ --sigvelo-color-primary-border-light: var(--sigvelo-color-primary-500);
113
+ --sigvelo-color-primary-border-dark: var(--sigvelo-color-primary-600);
114
+ --sigvelo-color-neutral-bg-subtle-light: var(--sigvelo-color-neutral-100);
115
+ --sigvelo-color-neutral-bg-subtle-dark: color-mix(
116
+ in oklab,
117
+ var(--sigvelo-color-neutral-900),
118
+ white 1%
119
+ );
120
+ --sigvelo-color-neutral-bg-muted-light: var(--sigvelo-color-neutral-200);
121
+ --sigvelo-color-neutral-bg-muted-dark: var(--sigvelo-color-neutral-800);
122
+ --sigvelo-color-neutral-bg-light: color-mix(
123
+ in oklab,
124
+ var(--sigvelo-color-neutral-600),
125
+ black 2.5%
126
+ );
127
+ --sigvelo-color-neutral-bg-dark: color-mix(
128
+ in oklab,
129
+ var(--sigvelo-color-neutral-600),
130
+ black 7.5%
131
+ );
132
+ --sigvelo-color-neutral-bg-strong-light: var(--sigvelo-color-neutral-800);
133
+ --sigvelo-color-neutral-bg-strong-dark: var(--sigvelo-color-neutral-200);
134
+ --sigvelo-color-neutral-bg-stronger-light: var(--sigvelo-color-neutral-900);
135
+ --sigvelo-color-neutral-bg-stronger-dark: var(--sigvelo-color-neutral-100);
136
+ --sigvelo-color-neutral-text-on-subtle-light: var(--sigvelo-color-neutral-900);
137
+ --sigvelo-color-neutral-text-on-subtle-dark: var(--sigvelo-color-neutral-100);
138
+ --sigvelo-color-neutral-text-on-bg-light: white;
139
+ --sigvelo-color-neutral-text-on-bg-dark: white;
140
+ --sigvelo-color-neutral-text-on-strong-light: white;
141
+ --sigvelo-color-neutral-text-on-strong-dark: black;
142
+ --sigvelo-color-neutral-text-light: color-mix(
143
+ in oklab,
144
+ var(--sigvelo-color-neutral-600),
145
+ black 12.5%
146
+ );
147
+ --sigvelo-color-neutral-text-dark: var(--sigvelo-color-neutral-500);
148
+ --sigvelo-color-neutral-border-subtle-light: color-mix(
149
+ in oklab,
150
+ var(--sigvelo-color-neutral-200),
151
+ transparent 40%
152
+ );
153
+ --sigvelo-color-neutral-border-subtle-dark: color-mix(
154
+ in oklab,
155
+ var(--sigvelo-color-neutral-900),
156
+ white 4%
157
+ );
158
+ --sigvelo-color-neutral-border-muted-light: var(--sigvelo-color-neutral-300);
159
+ --sigvelo-color-neutral-border-muted-dark: var(--sigvelo-color-neutral-800);
160
+ --sigvelo-color-neutral-border-light: var(--sigvelo-color-neutral-500);
161
+ --sigvelo-color-neutral-border-dark: var(--sigvelo-color-neutral-600);
162
+ --sigvelo-color-success-bg-subtle-light: var(--sigvelo-color-success-100);
163
+ --sigvelo-color-success-bg-subtle-dark: color-mix(
164
+ in oklab,
165
+ var(--sigvelo-color-success-900),
166
+ white 1%
167
+ );
168
+ --sigvelo-color-success-bg-muted-light: var(--sigvelo-color-success-200);
169
+ --sigvelo-color-success-bg-muted-dark: var(--sigvelo-color-success-800);
170
+ --sigvelo-color-success-bg-light: color-mix(
171
+ in oklab,
172
+ var(--sigvelo-color-success-600),
173
+ black 12%
174
+ );
175
+ --sigvelo-color-success-bg-dark: color-mix(in oklab, var(--sigvelo-color-success-600), black 16%);
176
+ --sigvelo-color-success-bg-strong-light: var(--sigvelo-color-success-800);
177
+ --sigvelo-color-success-bg-strong-dark: var(--sigvelo-color-success-200);
178
+ --sigvelo-color-success-bg-stronger-light: var(--sigvelo-color-success-900);
179
+ --sigvelo-color-success-bg-stronger-dark: var(--sigvelo-color-success-100);
180
+ --sigvelo-color-success-text-on-subtle-light: var(--sigvelo-color-success-900);
181
+ --sigvelo-color-success-text-on-subtle-dark: var(--sigvelo-color-success-100);
182
+ --sigvelo-color-success-text-on-bg-light: white;
183
+ --sigvelo-color-success-text-on-bg-dark: white;
184
+ --sigvelo-color-success-text-on-strong-light: white;
185
+ --sigvelo-color-success-text-on-strong-dark: black;
186
+ --sigvelo-color-success-text-light: color-mix(
187
+ in oklab,
188
+ var(--sigvelo-color-success-600),
189
+ black 12.5%
190
+ );
191
+ --sigvelo-color-success-text-dark: var(--sigvelo-color-success-500);
192
+ --sigvelo-color-success-border-subtle-light: color-mix(
193
+ in oklab,
194
+ var(--sigvelo-color-success-100),
195
+ black 3%
196
+ );
197
+ --sigvelo-color-success-border-subtle-dark: color-mix(
198
+ in oklab,
199
+ var(--sigvelo-color-success-900),
200
+ white 7.5%
201
+ );
202
+ --sigvelo-color-success-border-muted-light: var(--sigvelo-color-success-300);
203
+ --sigvelo-color-success-border-muted-dark: var(--sigvelo-color-success-800);
204
+ --sigvelo-color-success-border-light: var(--sigvelo-color-success-500);
205
+ --sigvelo-color-success-border-dark: var(--sigvelo-color-success-600);
206
+ --sigvelo-color-warning-bg-subtle-light: var(--sigvelo-color-warning-100);
207
+ --sigvelo-color-warning-bg-subtle-dark: color-mix(
208
+ in oklab,
209
+ var(--sigvelo-color-warning-900),
210
+ white 1%
211
+ );
212
+ --sigvelo-color-warning-bg-muted-light: var(--sigvelo-color-warning-200);
213
+ --sigvelo-color-warning-bg-muted-dark: var(--sigvelo-color-warning-800);
214
+ --sigvelo-color-warning-bg-light: color-mix(
215
+ in oklab,
216
+ var(--sigvelo-color-warning-600),
217
+ black 15%
218
+ );
219
+ --sigvelo-color-warning-bg-dark: color-mix(in oklab, var(--sigvelo-color-warning-600), black 18%);
220
+ --sigvelo-color-warning-bg-strong-light: var(--sigvelo-color-warning-800);
221
+ --sigvelo-color-warning-bg-strong-dark: var(--sigvelo-color-warning-200);
222
+ --sigvelo-color-warning-bg-stronger-light: var(--sigvelo-color-warning-900);
223
+ --sigvelo-color-warning-bg-stronger-dark: var(--sigvelo-color-warning-100);
224
+ --sigvelo-color-warning-text-on-subtle-light: var(--sigvelo-color-warning-950);
225
+ --sigvelo-color-warning-text-on-subtle-dark: var(--sigvelo-color-warning-100);
226
+ --sigvelo-color-warning-text-on-bg-light: white;
227
+ --sigvelo-color-warning-text-on-bg-dark: white;
228
+ --sigvelo-color-warning-text-on-strong-light: white;
229
+ --sigvelo-color-warning-text-on-strong-dark: black;
230
+ --sigvelo-color-warning-text-light: color-mix(
231
+ in oklab,
232
+ var(--sigvelo-color-warning-600),
233
+ black 12.5%
234
+ );
235
+ --sigvelo-color-warning-text-dark: var(--sigvelo-color-warning-500);
236
+ --sigvelo-color-warning-border-subtle-light: color-mix(
237
+ in oklab,
238
+ var(--sigvelo-color-warning-100),
239
+ black 3%
240
+ );
241
+ --sigvelo-color-warning-border-subtle-dark: color-mix(
242
+ in oklab,
243
+ var(--sigvelo-color-warning-900),
244
+ white 7.5%
245
+ );
246
+ --sigvelo-color-warning-border-muted-light: var(--sigvelo-color-warning-300);
247
+ --sigvelo-color-warning-border-muted-dark: var(--sigvelo-color-warning-800);
248
+ --sigvelo-color-warning-border-light: var(--sigvelo-color-warning-500);
249
+ --sigvelo-color-warning-border-dark: var(--sigvelo-color-warning-600);
250
+ --sigvelo-color-danger-bg-subtle-light: var(--sigvelo-color-danger-100);
251
+ --sigvelo-color-danger-bg-subtle-dark: color-mix(
252
+ in oklab,
253
+ var(--sigvelo-color-danger-900),
254
+ white 1%
255
+ );
256
+ --sigvelo-color-danger-bg-muted-light: var(--sigvelo-color-danger-200);
257
+ --sigvelo-color-danger-bg-muted-dark: var(--sigvelo-color-danger-800);
258
+ --sigvelo-color-danger-bg-light: color-mix(in oklab, var(--sigvelo-color-danger-600), black 2.5%);
259
+ --sigvelo-color-danger-bg-dark: color-mix(in oklab, var(--sigvelo-color-danger-600), black 7.5%);
260
+ --sigvelo-color-danger-bg-strong-light: var(--sigvelo-color-danger-800);
261
+ --sigvelo-color-danger-bg-strong-dark: var(--sigvelo-color-danger-200);
262
+ --sigvelo-color-danger-bg-stronger-light: var(--sigvelo-color-danger-900);
263
+ --sigvelo-color-danger-bg-stronger-dark: var(--sigvelo-color-danger-100);
264
+ --sigvelo-color-danger-text-on-subtle-light: var(--sigvelo-color-danger-900);
265
+ --sigvelo-color-danger-text-on-subtle-dark: var(--sigvelo-color-danger-100);
266
+ --sigvelo-color-danger-text-on-bg-light: white;
267
+ --sigvelo-color-danger-text-on-bg-dark: white;
268
+ --sigvelo-color-danger-text-on-strong-light: white;
269
+ --sigvelo-color-danger-text-on-strong-dark: black;
270
+ --sigvelo-color-danger-text-light: color-mix(
271
+ in oklab,
272
+ var(--sigvelo-color-danger-600),
273
+ black 12.5%
274
+ );
275
+ --sigvelo-color-danger-text-dark: var(--sigvelo-color-danger-500);
276
+ --sigvelo-color-danger-border-subtle-light: color-mix(
277
+ in oklab,
278
+ var(--sigvelo-color-danger-100),
279
+ black 3%
280
+ );
281
+ --sigvelo-color-danger-border-subtle-dark: color-mix(
282
+ in oklab,
283
+ var(--sigvelo-color-danger-900),
284
+ white 7.5%
285
+ );
286
+ --sigvelo-color-danger-border-muted-light: var(--sigvelo-color-danger-300);
287
+ --sigvelo-color-danger-border-muted-dark: var(--sigvelo-color-danger-800);
288
+ --sigvelo-color-danger-border-light: var(--sigvelo-color-danger-500);
289
+ --sigvelo-color-danger-border-dark: var(--sigvelo-color-danger-600);
290
+ }
package/src/spacing.css CHANGED
@@ -2,11 +2,7 @@
2
2
  * Spacing & Form Control Tokens
3
3
  */
4
4
 
5
- :root,
6
- .sigvelo-light,
7
- .sigvelo-dark,
8
- [data-theme="light"],
9
- [data-theme="dark"] {
5
+ :root {
10
6
  /* Spacing scale */
11
7
  --sigvelo-spacing-0-5: 0.125rem;
12
8
  --sigvelo-spacing-1: 0.25rem;
package/src/themes.css CHANGED
@@ -1,15 +1,631 @@
1
1
  /*
2
- * Global theme styles
2
+ * Global theme activation.
3
+ *
4
+ * With no data-theme override, the document follows the operating-system
5
+ * preference. data-theme is reserved for an explicit light or dark choice.
3
6
  */
4
7
 
5
8
  :root {
6
9
  color-scheme: light dark;
10
+ --sigvelo-color-canvas: var(--sigvelo-color-canvas-light);
11
+ --sigvelo-color-surface: var(--sigvelo-color-surface-light);
12
+ --sigvelo-color-text: var(--sigvelo-color-text-light);
13
+ --sigvelo-color-text-muted: var(--sigvelo-color-text-muted-light);
14
+ --sigvelo-color-focus: var(--sigvelo-color-focus-light);
15
+ --sigvelo-focus-ring: var(--sigvelo-focus-ring-light);
16
+ --sigvelo-color-backdrop: var(--sigvelo-color-backdrop-light);
17
+ --sigvelo-color-selection-bg: var(--sigvelo-color-selection-bg-light);
18
+ --sigvelo-color-selection-text: var(--sigvelo-color-selection-text-light);
19
+ --sigvelo-color-shadow: var(--sigvelo-color-shadow-light);
20
+ --sigvelo-shadow-xs: var(--sigvelo-shadow-xs-light);
21
+ --sigvelo-shadow-sm: var(--sigvelo-shadow-sm-light);
22
+ --sigvelo-shadow-md: var(--sigvelo-shadow-md-light);
23
+ --sigvelo-shadow-lg: var(--sigvelo-shadow-lg-light);
24
+ --sigvelo-shadow-xl: var(--sigvelo-shadow-xl-light);
25
+ --sigvelo-inset-shadow-xs: var(--sigvelo-inset-shadow-xs-light);
26
+ --sigvelo-inset-shadow-sm: var(--sigvelo-inset-shadow-sm-light);
27
+ --sigvelo-inset-shadow-md: var(--sigvelo-inset-shadow-md-light);
28
+ --sigvelo-inset-shadow-lg: var(--sigvelo-inset-shadow-lg-light);
29
+ --sigvelo-inset-shadow-xl: var(--sigvelo-inset-shadow-xl-light);
30
+ --sigvelo-color-primary-bg-subtle: var(--sigvelo-color-primary-bg-subtle-light);
31
+ --sigvelo-color-primary-bg-muted: var(--sigvelo-color-primary-bg-muted-light);
32
+ --sigvelo-color-primary-bg: var(--sigvelo-color-primary-bg-light);
33
+ --sigvelo-color-primary-bg-strong: var(--sigvelo-color-primary-bg-strong-light);
34
+ --sigvelo-color-primary-bg-stronger: var(--sigvelo-color-primary-bg-stronger-light);
35
+ --sigvelo-color-primary-text-on-subtle: var(--sigvelo-color-primary-text-on-subtle-light);
36
+ --sigvelo-color-primary-text-on-bg: var(--sigvelo-color-primary-text-on-bg-light);
37
+ --sigvelo-color-primary-text-on-strong: var(--sigvelo-color-primary-text-on-strong-light);
38
+ --sigvelo-color-primary-text: var(--sigvelo-color-primary-text-light);
39
+ --sigvelo-color-primary-border-subtle: var(--sigvelo-color-primary-border-subtle-light);
40
+ --sigvelo-color-primary-border-muted: var(--sigvelo-color-primary-border-muted-light);
41
+ --sigvelo-color-primary-border: var(--sigvelo-color-primary-border-light);
42
+ --sigvelo-color-neutral-bg-subtle: var(--sigvelo-color-neutral-bg-subtle-light);
43
+ --sigvelo-color-neutral-bg-muted: var(--sigvelo-color-neutral-bg-muted-light);
44
+ --sigvelo-color-neutral-bg: var(--sigvelo-color-neutral-bg-light);
45
+ --sigvelo-color-neutral-bg-strong: var(--sigvelo-color-neutral-bg-strong-light);
46
+ --sigvelo-color-neutral-bg-stronger: var(--sigvelo-color-neutral-bg-stronger-light);
47
+ --sigvelo-color-neutral-text-on-subtle: var(--sigvelo-color-neutral-text-on-subtle-light);
48
+ --sigvelo-color-neutral-text-on-bg: var(--sigvelo-color-neutral-text-on-bg-light);
49
+ --sigvelo-color-neutral-text-on-strong: var(--sigvelo-color-neutral-text-on-strong-light);
50
+ --sigvelo-color-neutral-text: var(--sigvelo-color-neutral-text-light);
51
+ --sigvelo-color-neutral-border-subtle: var(--sigvelo-color-neutral-border-subtle-light);
52
+ --sigvelo-color-neutral-border-muted: var(--sigvelo-color-neutral-border-muted-light);
53
+ --sigvelo-color-neutral-border: var(--sigvelo-color-neutral-border-light);
54
+ --sigvelo-color-success-bg-subtle: var(--sigvelo-color-success-bg-subtle-light);
55
+ --sigvelo-color-success-bg-muted: var(--sigvelo-color-success-bg-muted-light);
56
+ --sigvelo-color-success-bg: var(--sigvelo-color-success-bg-light);
57
+ --sigvelo-color-success-bg-strong: var(--sigvelo-color-success-bg-strong-light);
58
+ --sigvelo-color-success-bg-stronger: var(--sigvelo-color-success-bg-stronger-light);
59
+ --sigvelo-color-success-text-on-subtle: var(--sigvelo-color-success-text-on-subtle-light);
60
+ --sigvelo-color-success-text-on-bg: var(--sigvelo-color-success-text-on-bg-light);
61
+ --sigvelo-color-success-text-on-strong: var(--sigvelo-color-success-text-on-strong-light);
62
+ --sigvelo-color-success-text: var(--sigvelo-color-success-text-light);
63
+ --sigvelo-color-success-border-subtle: var(--sigvelo-color-success-border-subtle-light);
64
+ --sigvelo-color-success-border-muted: var(--sigvelo-color-success-border-muted-light);
65
+ --sigvelo-color-success-border: var(--sigvelo-color-success-border-light);
66
+ --sigvelo-color-warning-bg-subtle: var(--sigvelo-color-warning-bg-subtle-light);
67
+ --sigvelo-color-warning-bg-muted: var(--sigvelo-color-warning-bg-muted-light);
68
+ --sigvelo-color-warning-bg: var(--sigvelo-color-warning-bg-light);
69
+ --sigvelo-color-warning-bg-strong: var(--sigvelo-color-warning-bg-strong-light);
70
+ --sigvelo-color-warning-bg-stronger: var(--sigvelo-color-warning-bg-stronger-light);
71
+ --sigvelo-color-warning-text-on-subtle: var(--sigvelo-color-warning-text-on-subtle-light);
72
+ --sigvelo-color-warning-text-on-bg: var(--sigvelo-color-warning-text-on-bg-light);
73
+ --sigvelo-color-warning-text-on-strong: var(--sigvelo-color-warning-text-on-strong-light);
74
+ --sigvelo-color-warning-text: var(--sigvelo-color-warning-text-light);
75
+ --sigvelo-color-warning-border-subtle: var(--sigvelo-color-warning-border-subtle-light);
76
+ --sigvelo-color-warning-border-muted: var(--sigvelo-color-warning-border-muted-light);
77
+ --sigvelo-color-warning-border: var(--sigvelo-color-warning-border-light);
78
+ --sigvelo-color-danger-bg-subtle: var(--sigvelo-color-danger-bg-subtle-light);
79
+ --sigvelo-color-danger-bg-muted: var(--sigvelo-color-danger-bg-muted-light);
80
+ --sigvelo-color-danger-bg: var(--sigvelo-color-danger-bg-light);
81
+ --sigvelo-color-danger-bg-strong: var(--sigvelo-color-danger-bg-strong-light);
82
+ --sigvelo-color-danger-bg-stronger: var(--sigvelo-color-danger-bg-stronger-light);
83
+ --sigvelo-color-danger-text-on-subtle: var(--sigvelo-color-danger-text-on-subtle-light);
84
+ --sigvelo-color-danger-text-on-bg: var(--sigvelo-color-danger-text-on-bg-light);
85
+ --sigvelo-color-danger-text-on-strong: var(--sigvelo-color-danger-text-on-strong-light);
86
+ --sigvelo-color-danger-text: var(--sigvelo-color-danger-text-light);
87
+ --sigvelo-color-danger-border-subtle: var(--sigvelo-color-danger-border-subtle-light);
88
+ --sigvelo-color-danger-border-muted: var(--sigvelo-color-danger-border-muted-light);
89
+ --sigvelo-color-danger-border: var(--sigvelo-color-danger-border-light);
7
90
  accent-color: var(--sigvelo-color-primary-bg);
91
+ color: var(--sigvelo-color-text);
92
+ }
93
+
94
+ @media (prefers-color-scheme: dark) {
95
+ :root {
96
+ --sigvelo-color-canvas: var(--sigvelo-color-canvas-dark);
97
+ --sigvelo-color-surface: var(--sigvelo-color-surface-dark);
98
+ --sigvelo-color-text: var(--sigvelo-color-text-dark);
99
+ --sigvelo-color-text-muted: var(--sigvelo-color-text-muted-dark);
100
+ --sigvelo-color-focus: var(--sigvelo-color-focus-dark);
101
+ --sigvelo-focus-ring: var(--sigvelo-focus-ring-dark);
102
+ --sigvelo-color-backdrop: var(--sigvelo-color-backdrop-dark);
103
+ --sigvelo-color-selection-bg: var(--sigvelo-color-selection-bg-dark);
104
+ --sigvelo-color-selection-text: var(--sigvelo-color-selection-text-dark);
105
+ --sigvelo-color-shadow: var(--sigvelo-color-shadow-dark);
106
+ --sigvelo-shadow-xs: var(--sigvelo-shadow-xs-dark);
107
+ --sigvelo-shadow-sm: var(--sigvelo-shadow-sm-dark);
108
+ --sigvelo-shadow-md: var(--sigvelo-shadow-md-dark);
109
+ --sigvelo-shadow-lg: var(--sigvelo-shadow-lg-dark);
110
+ --sigvelo-shadow-xl: var(--sigvelo-shadow-xl-dark);
111
+ --sigvelo-inset-shadow-xs: var(--sigvelo-inset-shadow-xs-dark);
112
+ --sigvelo-inset-shadow-sm: var(--sigvelo-inset-shadow-sm-dark);
113
+ --sigvelo-inset-shadow-md: var(--sigvelo-inset-shadow-md-dark);
114
+ --sigvelo-inset-shadow-lg: var(--sigvelo-inset-shadow-lg-dark);
115
+ --sigvelo-inset-shadow-xl: var(--sigvelo-inset-shadow-xl-dark);
116
+ --sigvelo-color-primary-bg-subtle: var(--sigvelo-color-primary-bg-subtle-dark);
117
+ --sigvelo-color-primary-bg-muted: var(--sigvelo-color-primary-bg-muted-dark);
118
+ --sigvelo-color-primary-bg: var(--sigvelo-color-primary-bg-dark);
119
+ --sigvelo-color-primary-bg-strong: var(--sigvelo-color-primary-bg-strong-dark);
120
+ --sigvelo-color-primary-bg-stronger: var(--sigvelo-color-primary-bg-stronger-dark);
121
+ --sigvelo-color-primary-text-on-subtle: var(--sigvelo-color-primary-text-on-subtle-dark);
122
+ --sigvelo-color-primary-text-on-bg: var(--sigvelo-color-primary-text-on-bg-dark);
123
+ --sigvelo-color-primary-text-on-strong: var(--sigvelo-color-primary-text-on-strong-dark);
124
+ --sigvelo-color-primary-text: var(--sigvelo-color-primary-text-dark);
125
+ --sigvelo-color-primary-border-subtle: var(--sigvelo-color-primary-border-subtle-dark);
126
+ --sigvelo-color-primary-border-muted: var(--sigvelo-color-primary-border-muted-dark);
127
+ --sigvelo-color-primary-border: var(--sigvelo-color-primary-border-dark);
128
+ --sigvelo-color-neutral-bg-subtle: var(--sigvelo-color-neutral-bg-subtle-dark);
129
+ --sigvelo-color-neutral-bg-muted: var(--sigvelo-color-neutral-bg-muted-dark);
130
+ --sigvelo-color-neutral-bg: var(--sigvelo-color-neutral-bg-dark);
131
+ --sigvelo-color-neutral-bg-strong: var(--sigvelo-color-neutral-bg-strong-dark);
132
+ --sigvelo-color-neutral-bg-stronger: var(--sigvelo-color-neutral-bg-stronger-dark);
133
+ --sigvelo-color-neutral-text-on-subtle: var(--sigvelo-color-neutral-text-on-subtle-dark);
134
+ --sigvelo-color-neutral-text-on-bg: var(--sigvelo-color-neutral-text-on-bg-dark);
135
+ --sigvelo-color-neutral-text-on-strong: var(--sigvelo-color-neutral-text-on-strong-dark);
136
+ --sigvelo-color-neutral-text: var(--sigvelo-color-neutral-text-dark);
137
+ --sigvelo-color-neutral-border-subtle: var(--sigvelo-color-neutral-border-subtle-dark);
138
+ --sigvelo-color-neutral-border-muted: var(--sigvelo-color-neutral-border-muted-dark);
139
+ --sigvelo-color-neutral-border: var(--sigvelo-color-neutral-border-dark);
140
+ --sigvelo-color-success-bg-subtle: var(--sigvelo-color-success-bg-subtle-dark);
141
+ --sigvelo-color-success-bg-muted: var(--sigvelo-color-success-bg-muted-dark);
142
+ --sigvelo-color-success-bg: var(--sigvelo-color-success-bg-dark);
143
+ --sigvelo-color-success-bg-strong: var(--sigvelo-color-success-bg-strong-dark);
144
+ --sigvelo-color-success-bg-stronger: var(--sigvelo-color-success-bg-stronger-dark);
145
+ --sigvelo-color-success-text-on-subtle: var(--sigvelo-color-success-text-on-subtle-dark);
146
+ --sigvelo-color-success-text-on-bg: var(--sigvelo-color-success-text-on-bg-dark);
147
+ --sigvelo-color-success-text-on-strong: var(--sigvelo-color-success-text-on-strong-dark);
148
+ --sigvelo-color-success-text: var(--sigvelo-color-success-text-dark);
149
+ --sigvelo-color-success-border-subtle: var(--sigvelo-color-success-border-subtle-dark);
150
+ --sigvelo-color-success-border-muted: var(--sigvelo-color-success-border-muted-dark);
151
+ --sigvelo-color-success-border: var(--sigvelo-color-success-border-dark);
152
+ --sigvelo-color-warning-bg-subtle: var(--sigvelo-color-warning-bg-subtle-dark);
153
+ --sigvelo-color-warning-bg-muted: var(--sigvelo-color-warning-bg-muted-dark);
154
+ --sigvelo-color-warning-bg: var(--sigvelo-color-warning-bg-dark);
155
+ --sigvelo-color-warning-bg-strong: var(--sigvelo-color-warning-bg-strong-dark);
156
+ --sigvelo-color-warning-bg-stronger: var(--sigvelo-color-warning-bg-stronger-dark);
157
+ --sigvelo-color-warning-text-on-subtle: var(--sigvelo-color-warning-text-on-subtle-dark);
158
+ --sigvelo-color-warning-text-on-bg: var(--sigvelo-color-warning-text-on-bg-dark);
159
+ --sigvelo-color-warning-text-on-strong: var(--sigvelo-color-warning-text-on-strong-dark);
160
+ --sigvelo-color-warning-text: var(--sigvelo-color-warning-text-dark);
161
+ --sigvelo-color-warning-border-subtle: var(--sigvelo-color-warning-border-subtle-dark);
162
+ --sigvelo-color-warning-border-muted: var(--sigvelo-color-warning-border-muted-dark);
163
+ --sigvelo-color-warning-border: var(--sigvelo-color-warning-border-dark);
164
+ --sigvelo-color-danger-bg-subtle: var(--sigvelo-color-danger-bg-subtle-dark);
165
+ --sigvelo-color-danger-bg-muted: var(--sigvelo-color-danger-bg-muted-dark);
166
+ --sigvelo-color-danger-bg: var(--sigvelo-color-danger-bg-dark);
167
+ --sigvelo-color-danger-bg-strong: var(--sigvelo-color-danger-bg-strong-dark);
168
+ --sigvelo-color-danger-bg-stronger: var(--sigvelo-color-danger-bg-stronger-dark);
169
+ --sigvelo-color-danger-text-on-subtle: var(--sigvelo-color-danger-text-on-subtle-dark);
170
+ --sigvelo-color-danger-text-on-bg: var(--sigvelo-color-danger-text-on-bg-dark);
171
+ --sigvelo-color-danger-text-on-strong: var(--sigvelo-color-danger-text-on-strong-dark);
172
+ --sigvelo-color-danger-text: var(--sigvelo-color-danger-text-dark);
173
+ --sigvelo-color-danger-border-subtle: var(--sigvelo-color-danger-border-subtle-dark);
174
+ --sigvelo-color-danger-border-muted: var(--sigvelo-color-danger-border-muted-dark);
175
+ --sigvelo-color-danger-border: var(--sigvelo-color-danger-border-dark);
176
+ }
177
+ }
178
+
179
+ [data-theme="light"] {
180
+ color-scheme: light;
181
+ --sigvelo-color-canvas: var(--sigvelo-color-canvas-light);
182
+ --sigvelo-color-surface: var(--sigvelo-color-surface-light);
183
+ --sigvelo-color-text: var(--sigvelo-color-text-light);
184
+ --sigvelo-color-text-muted: var(--sigvelo-color-text-muted-light);
185
+ --sigvelo-color-focus: var(--sigvelo-color-focus-light);
186
+ --sigvelo-focus-ring: var(--sigvelo-focus-ring-light);
187
+ --sigvelo-color-backdrop: var(--sigvelo-color-backdrop-light);
188
+ --sigvelo-color-selection-bg: var(--sigvelo-color-selection-bg-light);
189
+ --sigvelo-color-selection-text: var(--sigvelo-color-selection-text-light);
190
+ --sigvelo-color-shadow: var(--sigvelo-color-shadow-light);
191
+ --sigvelo-shadow-xs: var(--sigvelo-shadow-xs-light);
192
+ --sigvelo-shadow-sm: var(--sigvelo-shadow-sm-light);
193
+ --sigvelo-shadow-md: var(--sigvelo-shadow-md-light);
194
+ --sigvelo-shadow-lg: var(--sigvelo-shadow-lg-light);
195
+ --sigvelo-shadow-xl: var(--sigvelo-shadow-xl-light);
196
+ --sigvelo-inset-shadow-xs: var(--sigvelo-inset-shadow-xs-light);
197
+ --sigvelo-inset-shadow-sm: var(--sigvelo-inset-shadow-sm-light);
198
+ --sigvelo-inset-shadow-md: var(--sigvelo-inset-shadow-md-light);
199
+ --sigvelo-inset-shadow-lg: var(--sigvelo-inset-shadow-lg-light);
200
+ --sigvelo-inset-shadow-xl: var(--sigvelo-inset-shadow-xl-light);
201
+ --sigvelo-color-primary-bg-subtle: var(--sigvelo-color-primary-bg-subtle-light);
202
+ --sigvelo-color-primary-bg-muted: var(--sigvelo-color-primary-bg-muted-light);
203
+ --sigvelo-color-primary-bg: var(--sigvelo-color-primary-bg-light);
204
+ --sigvelo-color-primary-bg-strong: var(--sigvelo-color-primary-bg-strong-light);
205
+ --sigvelo-color-primary-bg-stronger: var(--sigvelo-color-primary-bg-stronger-light);
206
+ --sigvelo-color-primary-text-on-subtle: var(--sigvelo-color-primary-text-on-subtle-light);
207
+ --sigvelo-color-primary-text-on-bg: var(--sigvelo-color-primary-text-on-bg-light);
208
+ --sigvelo-color-primary-text-on-strong: var(--sigvelo-color-primary-text-on-strong-light);
209
+ --sigvelo-color-primary-text: var(--sigvelo-color-primary-text-light);
210
+ --sigvelo-color-primary-border-subtle: var(--sigvelo-color-primary-border-subtle-light);
211
+ --sigvelo-color-primary-border-muted: var(--sigvelo-color-primary-border-muted-light);
212
+ --sigvelo-color-primary-border: var(--sigvelo-color-primary-border-light);
213
+ --sigvelo-color-neutral-bg-subtle: var(--sigvelo-color-neutral-bg-subtle-light);
214
+ --sigvelo-color-neutral-bg-muted: var(--sigvelo-color-neutral-bg-muted-light);
215
+ --sigvelo-color-neutral-bg: var(--sigvelo-color-neutral-bg-light);
216
+ --sigvelo-color-neutral-bg-strong: var(--sigvelo-color-neutral-bg-strong-light);
217
+ --sigvelo-color-neutral-bg-stronger: var(--sigvelo-color-neutral-bg-stronger-light);
218
+ --sigvelo-color-neutral-text-on-subtle: var(--sigvelo-color-neutral-text-on-subtle-light);
219
+ --sigvelo-color-neutral-text-on-bg: var(--sigvelo-color-neutral-text-on-bg-light);
220
+ --sigvelo-color-neutral-text-on-strong: var(--sigvelo-color-neutral-text-on-strong-light);
221
+ --sigvelo-color-neutral-text: var(--sigvelo-color-neutral-text-light);
222
+ --sigvelo-color-neutral-border-subtle: var(--sigvelo-color-neutral-border-subtle-light);
223
+ --sigvelo-color-neutral-border-muted: var(--sigvelo-color-neutral-border-muted-light);
224
+ --sigvelo-color-neutral-border: var(--sigvelo-color-neutral-border-light);
225
+ --sigvelo-color-success-bg-subtle: var(--sigvelo-color-success-bg-subtle-light);
226
+ --sigvelo-color-success-bg-muted: var(--sigvelo-color-success-bg-muted-light);
227
+ --sigvelo-color-success-bg: var(--sigvelo-color-success-bg-light);
228
+ --sigvelo-color-success-bg-strong: var(--sigvelo-color-success-bg-strong-light);
229
+ --sigvelo-color-success-bg-stronger: var(--sigvelo-color-success-bg-stronger-light);
230
+ --sigvelo-color-success-text-on-subtle: var(--sigvelo-color-success-text-on-subtle-light);
231
+ --sigvelo-color-success-text-on-bg: var(--sigvelo-color-success-text-on-bg-light);
232
+ --sigvelo-color-success-text-on-strong: var(--sigvelo-color-success-text-on-strong-light);
233
+ --sigvelo-color-success-text: var(--sigvelo-color-success-text-light);
234
+ --sigvelo-color-success-border-subtle: var(--sigvelo-color-success-border-subtle-light);
235
+ --sigvelo-color-success-border-muted: var(--sigvelo-color-success-border-muted-light);
236
+ --sigvelo-color-success-border: var(--sigvelo-color-success-border-light);
237
+ --sigvelo-color-warning-bg-subtle: var(--sigvelo-color-warning-bg-subtle-light);
238
+ --sigvelo-color-warning-bg-muted: var(--sigvelo-color-warning-bg-muted-light);
239
+ --sigvelo-color-warning-bg: var(--sigvelo-color-warning-bg-light);
240
+ --sigvelo-color-warning-bg-strong: var(--sigvelo-color-warning-bg-strong-light);
241
+ --sigvelo-color-warning-bg-stronger: var(--sigvelo-color-warning-bg-stronger-light);
242
+ --sigvelo-color-warning-text-on-subtle: var(--sigvelo-color-warning-text-on-subtle-light);
243
+ --sigvelo-color-warning-text-on-bg: var(--sigvelo-color-warning-text-on-bg-light);
244
+ --sigvelo-color-warning-text-on-strong: var(--sigvelo-color-warning-text-on-strong-light);
245
+ --sigvelo-color-warning-text: var(--sigvelo-color-warning-text-light);
246
+ --sigvelo-color-warning-border-subtle: var(--sigvelo-color-warning-border-subtle-light);
247
+ --sigvelo-color-warning-border-muted: var(--sigvelo-color-warning-border-muted-light);
248
+ --sigvelo-color-warning-border: var(--sigvelo-color-warning-border-light);
249
+ --sigvelo-color-danger-bg-subtle: var(--sigvelo-color-danger-bg-subtle-light);
250
+ --sigvelo-color-danger-bg-muted: var(--sigvelo-color-danger-bg-muted-light);
251
+ --sigvelo-color-danger-bg: var(--sigvelo-color-danger-bg-light);
252
+ --sigvelo-color-danger-bg-strong: var(--sigvelo-color-danger-bg-strong-light);
253
+ --sigvelo-color-danger-bg-stronger: var(--sigvelo-color-danger-bg-stronger-light);
254
+ --sigvelo-color-danger-text-on-subtle: var(--sigvelo-color-danger-text-on-subtle-light);
255
+ --sigvelo-color-danger-text-on-bg: var(--sigvelo-color-danger-text-on-bg-light);
256
+ --sigvelo-color-danger-text-on-strong: var(--sigvelo-color-danger-text-on-strong-light);
257
+ --sigvelo-color-danger-text: var(--sigvelo-color-danger-text-light);
258
+ --sigvelo-color-danger-border-subtle: var(--sigvelo-color-danger-border-subtle-light);
259
+ --sigvelo-color-danger-border-muted: var(--sigvelo-color-danger-border-muted-light);
260
+ --sigvelo-color-danger-border: var(--sigvelo-color-danger-border-light);
261
+ color: var(--sigvelo-color-text);
8
262
  }
9
263
 
10
- .sigvelo-light,
11
- .sigvelo-dark,
12
- [data-theme="light"],
13
264
  [data-theme="dark"] {
265
+ color-scheme: dark;
266
+ --sigvelo-color-canvas: var(--sigvelo-color-canvas-dark);
267
+ --sigvelo-color-surface: var(--sigvelo-color-surface-dark);
268
+ --sigvelo-color-text: var(--sigvelo-color-text-dark);
269
+ --sigvelo-color-text-muted: var(--sigvelo-color-text-muted-dark);
270
+ --sigvelo-color-focus: var(--sigvelo-color-focus-dark);
271
+ --sigvelo-focus-ring: var(--sigvelo-focus-ring-dark);
272
+ --sigvelo-color-backdrop: var(--sigvelo-color-backdrop-dark);
273
+ --sigvelo-color-selection-bg: var(--sigvelo-color-selection-bg-dark);
274
+ --sigvelo-color-selection-text: var(--sigvelo-color-selection-text-dark);
275
+ --sigvelo-color-shadow: var(--sigvelo-color-shadow-dark);
276
+ --sigvelo-shadow-xs: var(--sigvelo-shadow-xs-dark);
277
+ --sigvelo-shadow-sm: var(--sigvelo-shadow-sm-dark);
278
+ --sigvelo-shadow-md: var(--sigvelo-shadow-md-dark);
279
+ --sigvelo-shadow-lg: var(--sigvelo-shadow-lg-dark);
280
+ --sigvelo-shadow-xl: var(--sigvelo-shadow-xl-dark);
281
+ --sigvelo-inset-shadow-xs: var(--sigvelo-inset-shadow-xs-dark);
282
+ --sigvelo-inset-shadow-sm: var(--sigvelo-inset-shadow-sm-dark);
283
+ --sigvelo-inset-shadow-md: var(--sigvelo-inset-shadow-md-dark);
284
+ --sigvelo-inset-shadow-lg: var(--sigvelo-inset-shadow-lg-dark);
285
+ --sigvelo-inset-shadow-xl: var(--sigvelo-inset-shadow-xl-dark);
286
+ --sigvelo-color-primary-bg-subtle: var(--sigvelo-color-primary-bg-subtle-dark);
287
+ --sigvelo-color-primary-bg-muted: var(--sigvelo-color-primary-bg-muted-dark);
288
+ --sigvelo-color-primary-bg: var(--sigvelo-color-primary-bg-dark);
289
+ --sigvelo-color-primary-bg-strong: var(--sigvelo-color-primary-bg-strong-dark);
290
+ --sigvelo-color-primary-bg-stronger: var(--sigvelo-color-primary-bg-stronger-dark);
291
+ --sigvelo-color-primary-text-on-subtle: var(--sigvelo-color-primary-text-on-subtle-dark);
292
+ --sigvelo-color-primary-text-on-bg: var(--sigvelo-color-primary-text-on-bg-dark);
293
+ --sigvelo-color-primary-text-on-strong: var(--sigvelo-color-primary-text-on-strong-dark);
294
+ --sigvelo-color-primary-text: var(--sigvelo-color-primary-text-dark);
295
+ --sigvelo-color-primary-border-subtle: var(--sigvelo-color-primary-border-subtle-dark);
296
+ --sigvelo-color-primary-border-muted: var(--sigvelo-color-primary-border-muted-dark);
297
+ --sigvelo-color-primary-border: var(--sigvelo-color-primary-border-dark);
298
+ --sigvelo-color-neutral-bg-subtle: var(--sigvelo-color-neutral-bg-subtle-dark);
299
+ --sigvelo-color-neutral-bg-muted: var(--sigvelo-color-neutral-bg-muted-dark);
300
+ --sigvelo-color-neutral-bg: var(--sigvelo-color-neutral-bg-dark);
301
+ --sigvelo-color-neutral-bg-strong: var(--sigvelo-color-neutral-bg-strong-dark);
302
+ --sigvelo-color-neutral-bg-stronger: var(--sigvelo-color-neutral-bg-stronger-dark);
303
+ --sigvelo-color-neutral-text-on-subtle: var(--sigvelo-color-neutral-text-on-subtle-dark);
304
+ --sigvelo-color-neutral-text-on-bg: var(--sigvelo-color-neutral-text-on-bg-dark);
305
+ --sigvelo-color-neutral-text-on-strong: var(--sigvelo-color-neutral-text-on-strong-dark);
306
+ --sigvelo-color-neutral-text: var(--sigvelo-color-neutral-text-dark);
307
+ --sigvelo-color-neutral-border-subtle: var(--sigvelo-color-neutral-border-subtle-dark);
308
+ --sigvelo-color-neutral-border-muted: var(--sigvelo-color-neutral-border-muted-dark);
309
+ --sigvelo-color-neutral-border: var(--sigvelo-color-neutral-border-dark);
310
+ --sigvelo-color-success-bg-subtle: var(--sigvelo-color-success-bg-subtle-dark);
311
+ --sigvelo-color-success-bg-muted: var(--sigvelo-color-success-bg-muted-dark);
312
+ --sigvelo-color-success-bg: var(--sigvelo-color-success-bg-dark);
313
+ --sigvelo-color-success-bg-strong: var(--sigvelo-color-success-bg-strong-dark);
314
+ --sigvelo-color-success-bg-stronger: var(--sigvelo-color-success-bg-stronger-dark);
315
+ --sigvelo-color-success-text-on-subtle: var(--sigvelo-color-success-text-on-subtle-dark);
316
+ --sigvelo-color-success-text-on-bg: var(--sigvelo-color-success-text-on-bg-dark);
317
+ --sigvelo-color-success-text-on-strong: var(--sigvelo-color-success-text-on-strong-dark);
318
+ --sigvelo-color-success-text: var(--sigvelo-color-success-text-dark);
319
+ --sigvelo-color-success-border-subtle: var(--sigvelo-color-success-border-subtle-dark);
320
+ --sigvelo-color-success-border-muted: var(--sigvelo-color-success-border-muted-dark);
321
+ --sigvelo-color-success-border: var(--sigvelo-color-success-border-dark);
322
+ --sigvelo-color-warning-bg-subtle: var(--sigvelo-color-warning-bg-subtle-dark);
323
+ --sigvelo-color-warning-bg-muted: var(--sigvelo-color-warning-bg-muted-dark);
324
+ --sigvelo-color-warning-bg: var(--sigvelo-color-warning-bg-dark);
325
+ --sigvelo-color-warning-bg-strong: var(--sigvelo-color-warning-bg-strong-dark);
326
+ --sigvelo-color-warning-bg-stronger: var(--sigvelo-color-warning-bg-stronger-dark);
327
+ --sigvelo-color-warning-text-on-subtle: var(--sigvelo-color-warning-text-on-subtle-dark);
328
+ --sigvelo-color-warning-text-on-bg: var(--sigvelo-color-warning-text-on-bg-dark);
329
+ --sigvelo-color-warning-text-on-strong: var(--sigvelo-color-warning-text-on-strong-dark);
330
+ --sigvelo-color-warning-text: var(--sigvelo-color-warning-text-dark);
331
+ --sigvelo-color-warning-border-subtle: var(--sigvelo-color-warning-border-subtle-dark);
332
+ --sigvelo-color-warning-border-muted: var(--sigvelo-color-warning-border-muted-dark);
333
+ --sigvelo-color-warning-border: var(--sigvelo-color-warning-border-dark);
334
+ --sigvelo-color-danger-bg-subtle: var(--sigvelo-color-danger-bg-subtle-dark);
335
+ --sigvelo-color-danger-bg-muted: var(--sigvelo-color-danger-bg-muted-dark);
336
+ --sigvelo-color-danger-bg: var(--sigvelo-color-danger-bg-dark);
337
+ --sigvelo-color-danger-bg-strong: var(--sigvelo-color-danger-bg-strong-dark);
338
+ --sigvelo-color-danger-bg-stronger: var(--sigvelo-color-danger-bg-stronger-dark);
339
+ --sigvelo-color-danger-text-on-subtle: var(--sigvelo-color-danger-text-on-subtle-dark);
340
+ --sigvelo-color-danger-text-on-bg: var(--sigvelo-color-danger-text-on-bg-dark);
341
+ --sigvelo-color-danger-text-on-strong: var(--sigvelo-color-danger-text-on-strong-dark);
342
+ --sigvelo-color-danger-text: var(--sigvelo-color-danger-text-dark);
343
+ --sigvelo-color-danger-border-subtle: var(--sigvelo-color-danger-border-subtle-dark);
344
+ --sigvelo-color-danger-border-muted: var(--sigvelo-color-danger-border-muted-dark);
345
+ --sigvelo-color-danger-border: var(--sigvelo-color-danger-border-dark);
14
346
  color: var(--sigvelo-color-text);
15
347
  }
348
+
349
+ /* light-dark() removes fallback alias duplication in supporting browsers. */
350
+ @supports (color: light-dark(white, black)) {
351
+ :root,
352
+ [data-theme="light"],
353
+ [data-theme="dark"] {
354
+ --sigvelo-color-canvas: light-dark(
355
+ var(--sigvelo-color-canvas-light),
356
+ var(--sigvelo-color-canvas-dark)
357
+ );
358
+ --sigvelo-color-surface: light-dark(
359
+ var(--sigvelo-color-surface-light),
360
+ var(--sigvelo-color-surface-dark)
361
+ );
362
+ --sigvelo-color-text: light-dark(
363
+ var(--sigvelo-color-text-light),
364
+ var(--sigvelo-color-text-dark)
365
+ );
366
+ --sigvelo-color-text-muted: light-dark(
367
+ var(--sigvelo-color-text-muted-light),
368
+ var(--sigvelo-color-text-muted-dark)
369
+ );
370
+ --sigvelo-color-focus: light-dark(
371
+ var(--sigvelo-color-focus-light),
372
+ var(--sigvelo-color-focus-dark)
373
+ );
374
+ --sigvelo-color-backdrop: light-dark(
375
+ var(--sigvelo-color-backdrop-light),
376
+ var(--sigvelo-color-backdrop-dark)
377
+ );
378
+ --sigvelo-color-selection-bg: light-dark(
379
+ var(--sigvelo-color-selection-bg-light),
380
+ var(--sigvelo-color-selection-bg-dark)
381
+ );
382
+ --sigvelo-color-selection-text: light-dark(
383
+ var(--sigvelo-color-selection-text-light),
384
+ var(--sigvelo-color-selection-text-dark)
385
+ );
386
+ --sigvelo-color-shadow: light-dark(
387
+ var(--sigvelo-color-shadow-light),
388
+ var(--sigvelo-color-shadow-dark)
389
+ );
390
+ --sigvelo-color-primary-bg-subtle: light-dark(
391
+ var(--sigvelo-color-primary-bg-subtle-light),
392
+ var(--sigvelo-color-primary-bg-subtle-dark)
393
+ );
394
+ --sigvelo-color-primary-bg-muted: light-dark(
395
+ var(--sigvelo-color-primary-bg-muted-light),
396
+ var(--sigvelo-color-primary-bg-muted-dark)
397
+ );
398
+ --sigvelo-color-primary-bg: light-dark(
399
+ var(--sigvelo-color-primary-bg-light),
400
+ var(--sigvelo-color-primary-bg-dark)
401
+ );
402
+ --sigvelo-color-primary-bg-strong: light-dark(
403
+ var(--sigvelo-color-primary-bg-strong-light),
404
+ var(--sigvelo-color-primary-bg-strong-dark)
405
+ );
406
+ --sigvelo-color-primary-bg-stronger: light-dark(
407
+ var(--sigvelo-color-primary-bg-stronger-light),
408
+ var(--sigvelo-color-primary-bg-stronger-dark)
409
+ );
410
+ --sigvelo-color-primary-text-on-subtle: light-dark(
411
+ var(--sigvelo-color-primary-text-on-subtle-light),
412
+ var(--sigvelo-color-primary-text-on-subtle-dark)
413
+ );
414
+ --sigvelo-color-primary-text-on-bg: light-dark(
415
+ var(--sigvelo-color-primary-text-on-bg-light),
416
+ var(--sigvelo-color-primary-text-on-bg-dark)
417
+ );
418
+ --sigvelo-color-primary-text-on-strong: light-dark(
419
+ var(--sigvelo-color-primary-text-on-strong-light),
420
+ var(--sigvelo-color-primary-text-on-strong-dark)
421
+ );
422
+ --sigvelo-color-primary-text: light-dark(
423
+ var(--sigvelo-color-primary-text-light),
424
+ var(--sigvelo-color-primary-text-dark)
425
+ );
426
+ --sigvelo-color-primary-border-subtle: light-dark(
427
+ var(--sigvelo-color-primary-border-subtle-light),
428
+ var(--sigvelo-color-primary-border-subtle-dark)
429
+ );
430
+ --sigvelo-color-primary-border-muted: light-dark(
431
+ var(--sigvelo-color-primary-border-muted-light),
432
+ var(--sigvelo-color-primary-border-muted-dark)
433
+ );
434
+ --sigvelo-color-primary-border: light-dark(
435
+ var(--sigvelo-color-primary-border-light),
436
+ var(--sigvelo-color-primary-border-dark)
437
+ );
438
+ --sigvelo-color-neutral-bg-subtle: light-dark(
439
+ var(--sigvelo-color-neutral-bg-subtle-light),
440
+ var(--sigvelo-color-neutral-bg-subtle-dark)
441
+ );
442
+ --sigvelo-color-neutral-bg-muted: light-dark(
443
+ var(--sigvelo-color-neutral-bg-muted-light),
444
+ var(--sigvelo-color-neutral-bg-muted-dark)
445
+ );
446
+ --sigvelo-color-neutral-bg: light-dark(
447
+ var(--sigvelo-color-neutral-bg-light),
448
+ var(--sigvelo-color-neutral-bg-dark)
449
+ );
450
+ --sigvelo-color-neutral-bg-strong: light-dark(
451
+ var(--sigvelo-color-neutral-bg-strong-light),
452
+ var(--sigvelo-color-neutral-bg-strong-dark)
453
+ );
454
+ --sigvelo-color-neutral-bg-stronger: light-dark(
455
+ var(--sigvelo-color-neutral-bg-stronger-light),
456
+ var(--sigvelo-color-neutral-bg-stronger-dark)
457
+ );
458
+ --sigvelo-color-neutral-text-on-subtle: light-dark(
459
+ var(--sigvelo-color-neutral-text-on-subtle-light),
460
+ var(--sigvelo-color-neutral-text-on-subtle-dark)
461
+ );
462
+ --sigvelo-color-neutral-text-on-bg: light-dark(
463
+ var(--sigvelo-color-neutral-text-on-bg-light),
464
+ var(--sigvelo-color-neutral-text-on-bg-dark)
465
+ );
466
+ --sigvelo-color-neutral-text-on-strong: light-dark(
467
+ var(--sigvelo-color-neutral-text-on-strong-light),
468
+ var(--sigvelo-color-neutral-text-on-strong-dark)
469
+ );
470
+ --sigvelo-color-neutral-text: light-dark(
471
+ var(--sigvelo-color-neutral-text-light),
472
+ var(--sigvelo-color-neutral-text-dark)
473
+ );
474
+ --sigvelo-color-neutral-border-subtle: light-dark(
475
+ var(--sigvelo-color-neutral-border-subtle-light),
476
+ var(--sigvelo-color-neutral-border-subtle-dark)
477
+ );
478
+ --sigvelo-color-neutral-border-muted: light-dark(
479
+ var(--sigvelo-color-neutral-border-muted-light),
480
+ var(--sigvelo-color-neutral-border-muted-dark)
481
+ );
482
+ --sigvelo-color-neutral-border: light-dark(
483
+ var(--sigvelo-color-neutral-border-light),
484
+ var(--sigvelo-color-neutral-border-dark)
485
+ );
486
+ --sigvelo-color-success-bg-subtle: light-dark(
487
+ var(--sigvelo-color-success-bg-subtle-light),
488
+ var(--sigvelo-color-success-bg-subtle-dark)
489
+ );
490
+ --sigvelo-color-success-bg-muted: light-dark(
491
+ var(--sigvelo-color-success-bg-muted-light),
492
+ var(--sigvelo-color-success-bg-muted-dark)
493
+ );
494
+ --sigvelo-color-success-bg: light-dark(
495
+ var(--sigvelo-color-success-bg-light),
496
+ var(--sigvelo-color-success-bg-dark)
497
+ );
498
+ --sigvelo-color-success-bg-strong: light-dark(
499
+ var(--sigvelo-color-success-bg-strong-light),
500
+ var(--sigvelo-color-success-bg-strong-dark)
501
+ );
502
+ --sigvelo-color-success-bg-stronger: light-dark(
503
+ var(--sigvelo-color-success-bg-stronger-light),
504
+ var(--sigvelo-color-success-bg-stronger-dark)
505
+ );
506
+ --sigvelo-color-success-text-on-subtle: light-dark(
507
+ var(--sigvelo-color-success-text-on-subtle-light),
508
+ var(--sigvelo-color-success-text-on-subtle-dark)
509
+ );
510
+ --sigvelo-color-success-text-on-bg: light-dark(
511
+ var(--sigvelo-color-success-text-on-bg-light),
512
+ var(--sigvelo-color-success-text-on-bg-dark)
513
+ );
514
+ --sigvelo-color-success-text-on-strong: light-dark(
515
+ var(--sigvelo-color-success-text-on-strong-light),
516
+ var(--sigvelo-color-success-text-on-strong-dark)
517
+ );
518
+ --sigvelo-color-success-text: light-dark(
519
+ var(--sigvelo-color-success-text-light),
520
+ var(--sigvelo-color-success-text-dark)
521
+ );
522
+ --sigvelo-color-success-border-subtle: light-dark(
523
+ var(--sigvelo-color-success-border-subtle-light),
524
+ var(--sigvelo-color-success-border-subtle-dark)
525
+ );
526
+ --sigvelo-color-success-border-muted: light-dark(
527
+ var(--sigvelo-color-success-border-muted-light),
528
+ var(--sigvelo-color-success-border-muted-dark)
529
+ );
530
+ --sigvelo-color-success-border: light-dark(
531
+ var(--sigvelo-color-success-border-light),
532
+ var(--sigvelo-color-success-border-dark)
533
+ );
534
+ --sigvelo-color-warning-bg-subtle: light-dark(
535
+ var(--sigvelo-color-warning-bg-subtle-light),
536
+ var(--sigvelo-color-warning-bg-subtle-dark)
537
+ );
538
+ --sigvelo-color-warning-bg-muted: light-dark(
539
+ var(--sigvelo-color-warning-bg-muted-light),
540
+ var(--sigvelo-color-warning-bg-muted-dark)
541
+ );
542
+ --sigvelo-color-warning-bg: light-dark(
543
+ var(--sigvelo-color-warning-bg-light),
544
+ var(--sigvelo-color-warning-bg-dark)
545
+ );
546
+ --sigvelo-color-warning-bg-strong: light-dark(
547
+ var(--sigvelo-color-warning-bg-strong-light),
548
+ var(--sigvelo-color-warning-bg-strong-dark)
549
+ );
550
+ --sigvelo-color-warning-bg-stronger: light-dark(
551
+ var(--sigvelo-color-warning-bg-stronger-light),
552
+ var(--sigvelo-color-warning-bg-stronger-dark)
553
+ );
554
+ --sigvelo-color-warning-text-on-subtle: light-dark(
555
+ var(--sigvelo-color-warning-text-on-subtle-light),
556
+ var(--sigvelo-color-warning-text-on-subtle-dark)
557
+ );
558
+ --sigvelo-color-warning-text-on-bg: light-dark(
559
+ var(--sigvelo-color-warning-text-on-bg-light),
560
+ var(--sigvelo-color-warning-text-on-bg-dark)
561
+ );
562
+ --sigvelo-color-warning-text-on-strong: light-dark(
563
+ var(--sigvelo-color-warning-text-on-strong-light),
564
+ var(--sigvelo-color-warning-text-on-strong-dark)
565
+ );
566
+ --sigvelo-color-warning-text: light-dark(
567
+ var(--sigvelo-color-warning-text-light),
568
+ var(--sigvelo-color-warning-text-dark)
569
+ );
570
+ --sigvelo-color-warning-border-subtle: light-dark(
571
+ var(--sigvelo-color-warning-border-subtle-light),
572
+ var(--sigvelo-color-warning-border-subtle-dark)
573
+ );
574
+ --sigvelo-color-warning-border-muted: light-dark(
575
+ var(--sigvelo-color-warning-border-muted-light),
576
+ var(--sigvelo-color-warning-border-muted-dark)
577
+ );
578
+ --sigvelo-color-warning-border: light-dark(
579
+ var(--sigvelo-color-warning-border-light),
580
+ var(--sigvelo-color-warning-border-dark)
581
+ );
582
+ --sigvelo-color-danger-bg-subtle: light-dark(
583
+ var(--sigvelo-color-danger-bg-subtle-light),
584
+ var(--sigvelo-color-danger-bg-subtle-dark)
585
+ );
586
+ --sigvelo-color-danger-bg-muted: light-dark(
587
+ var(--sigvelo-color-danger-bg-muted-light),
588
+ var(--sigvelo-color-danger-bg-muted-dark)
589
+ );
590
+ --sigvelo-color-danger-bg: light-dark(
591
+ var(--sigvelo-color-danger-bg-light),
592
+ var(--sigvelo-color-danger-bg-dark)
593
+ );
594
+ --sigvelo-color-danger-bg-strong: light-dark(
595
+ var(--sigvelo-color-danger-bg-strong-light),
596
+ var(--sigvelo-color-danger-bg-strong-dark)
597
+ );
598
+ --sigvelo-color-danger-bg-stronger: light-dark(
599
+ var(--sigvelo-color-danger-bg-stronger-light),
600
+ var(--sigvelo-color-danger-bg-stronger-dark)
601
+ );
602
+ --sigvelo-color-danger-text-on-subtle: light-dark(
603
+ var(--sigvelo-color-danger-text-on-subtle-light),
604
+ var(--sigvelo-color-danger-text-on-subtle-dark)
605
+ );
606
+ --sigvelo-color-danger-text-on-bg: light-dark(
607
+ var(--sigvelo-color-danger-text-on-bg-light),
608
+ var(--sigvelo-color-danger-text-on-bg-dark)
609
+ );
610
+ --sigvelo-color-danger-text-on-strong: light-dark(
611
+ var(--sigvelo-color-danger-text-on-strong-light),
612
+ var(--sigvelo-color-danger-text-on-strong-dark)
613
+ );
614
+ --sigvelo-color-danger-text: light-dark(
615
+ var(--sigvelo-color-danger-text-light),
616
+ var(--sigvelo-color-danger-text-dark)
617
+ );
618
+ --sigvelo-color-danger-border-subtle: light-dark(
619
+ var(--sigvelo-color-danger-border-subtle-light),
620
+ var(--sigvelo-color-danger-border-subtle-dark)
621
+ );
622
+ --sigvelo-color-danger-border-muted: light-dark(
623
+ var(--sigvelo-color-danger-border-muted-light),
624
+ var(--sigvelo-color-danger-border-muted-dark)
625
+ );
626
+ --sigvelo-color-danger-border: light-dark(
627
+ var(--sigvelo-color-danger-border-light),
628
+ var(--sigvelo-color-danger-border-dark)
629
+ );
630
+ }
631
+ }
package/src/typography.css CHANGED
@@ -2,11 +2,7 @@
2
2
  * Typography Tokens
3
3
  */
4
4
 
5
- :root,
6
- .sigvelo-light,
7
- .sigvelo-dark,
8
- [data-theme="light"],
9
- [data-theme="dark"] {
5
+ :root {
10
6
  --sigvelo-font-sans: system-ui, sans-serif;
11
7
  --sigvelo-font-heading: var(--sigvelo-font-sans);
12
8
  --sigvelo-font-mono:
package/src/semantic-dark.css DELETED
@@ -1,132 +0,0 @@
1
- /*
2
- * Dark Theme Semantic Colors
3
- */
4
-
5
- .sigvelo-dark,
6
- [data-theme="dark"] {
7
- color-scheme: dark;
8
-
9
- --sigvelo-color-canvas: var(--sigvelo-color-neutral-950);
10
- --sigvelo-color-surface: color-mix(in oklab, var(--sigvelo-color-neutral-950), white 2.5%);
11
- --sigvelo-color-text: var(--sigvelo-color-neutral-200);
12
- --sigvelo-color-text-muted: var(--sigvelo-color-neutral-500);
13
- --sigvelo-color-focus: var(--sigvelo-color-primary-bg);
14
- --sigvelo-focus-ring: var(--sigvelo-border-style) var(--sigvelo-focus-width)
15
- var(--sigvelo-color-focus);
16
- --sigvelo-color-backdrop: rgb(0 0 0 / 0.5);
17
- --sigvelo-color-selection-bg: var(--sigvelo-color-primary-700);
18
- --sigvelo-color-selection-text: var(--sigvelo-color-text);
19
- --sigvelo-color-shadow: black;
20
- --sigvelo-shadow-xs: 0 1px 2px color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 8%);
21
- --sigvelo-shadow-sm: 0 2px 4px color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 12%);
22
- --sigvelo-shadow-md: 0 4px 8px color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 16%);
23
- --sigvelo-shadow-lg: 0 8px 16px color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 20%);
24
- --sigvelo-shadow-xl: 0 12px 20px color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 24%);
25
-
26
- /* Primary */
27
- --sigvelo-color-primary-bg-subtle: color-mix(
28
- in oklab,
29
- var(--sigvelo-color-primary-900),
30
- white 1%
31
- );
32
- --sigvelo-color-primary-bg-muted: var(--sigvelo-color-primary-800);
33
- --sigvelo-color-primary-bg: color-mix(in oklab, var(--sigvelo-color-primary-600), black 7.5%);
34
- --sigvelo-color-primary-bg-strong: var(--sigvelo-color-primary-200);
35
- --sigvelo-color-primary-bg-stronger: var(--sigvelo-color-primary-100);
36
- --sigvelo-color-primary-text-on-subtle: var(--sigvelo-color-primary-100);
37
- --sigvelo-color-primary-text-on-bg: white;
38
- --sigvelo-color-primary-text-on-strong: black;
39
- --sigvelo-color-primary-text: var(--sigvelo-color-primary-500);
40
- --sigvelo-color-primary-border-subtle: color-mix(
41
- in oklab,
42
- var(--sigvelo-color-primary-900),
43
- white 7.5%
44
- );
45
- --sigvelo-color-primary-border-muted: var(--sigvelo-color-primary-800);
46
- --sigvelo-color-primary-border: var(--sigvelo-color-primary-600);
47
-
48
- /* Neutral */
49
- --sigvelo-color-neutral-bg-subtle: color-mix(
50
- in oklab,
51
- var(--sigvelo-color-neutral-900),
52
- white 1%
53
- );
54
- --sigvelo-color-neutral-bg-muted: var(--sigvelo-color-neutral-800);
55
- --sigvelo-color-neutral-bg: color-mix(in oklab, var(--sigvelo-color-neutral-600), black 7.5%);
56
- --sigvelo-color-neutral-bg-strong: var(--sigvelo-color-neutral-200);
57
- --sigvelo-color-neutral-bg-stronger: var(--sigvelo-color-neutral-100);
58
- --sigvelo-color-neutral-text-on-subtle: var(--sigvelo-color-neutral-100);
59
- --sigvelo-color-neutral-text-on-bg: white;
60
- --sigvelo-color-neutral-text-on-strong: black;
61
- --sigvelo-color-neutral-text: var(--sigvelo-color-neutral-500);
62
- /* Hairline: separation comes from fill and whitespace; borders only hint */
63
- --sigvelo-color-neutral-border-subtle: color-mix(
64
- in oklab,
65
- var(--sigvelo-color-neutral-900),
66
- white 4%
67
- );
68
- --sigvelo-color-neutral-border-muted: var(--sigvelo-color-neutral-800);
69
- --sigvelo-color-neutral-border: var(--sigvelo-color-neutral-600);
70
-
71
- /* Constructive */
72
- --sigvelo-color-success-bg-subtle: color-mix(
73
- in oklab,
74
- var(--sigvelo-color-success-900),
75
- white 1%
76
- );
77
- --sigvelo-color-success-bg-muted: var(--sigvelo-color-success-800);
78
- --sigvelo-color-success-bg: color-mix(in oklab, var(--sigvelo-color-success-600), black 16%);
79
- --sigvelo-color-success-bg-strong: var(--sigvelo-color-success-200);
80
- --sigvelo-color-success-bg-stronger: var(--sigvelo-color-success-100);
81
- --sigvelo-color-success-text-on-subtle: var(--sigvelo-color-success-100);
82
- --sigvelo-color-success-text-on-bg: white;
83
- --sigvelo-color-success-text-on-strong: black;
84
- --sigvelo-color-success-text: var(--sigvelo-color-success-500);
85
- --sigvelo-color-success-border-subtle: color-mix(
86
- in oklab,
87
- var(--sigvelo-color-success-900),
88
- white 7.5%
89
- );
90
- --sigvelo-color-success-border-muted: var(--sigvelo-color-success-800);
91
- --sigvelo-color-success-border: var(--sigvelo-color-success-600);
92
-
93
- /* Caution */
94
- --sigvelo-color-warning-bg-subtle: color-mix(
95
- in oklab,
96
- var(--sigvelo-color-warning-900),
97
- white 1%
98
- );
99
- --sigvelo-color-warning-bg-muted: var(--sigvelo-color-warning-800);
100
- --sigvelo-color-warning-bg: color-mix(in oklab, var(--sigvelo-color-warning-600), black 18%);
101
- --sigvelo-color-warning-bg-strong: var(--sigvelo-color-warning-200);
102
- --sigvelo-color-warning-bg-stronger: var(--sigvelo-color-warning-100);
103
- --sigvelo-color-warning-text-on-subtle: var(--sigvelo-color-warning-100);
104
- --sigvelo-color-warning-text-on-bg: white;
105
- --sigvelo-color-warning-text-on-strong: black;
106
- --sigvelo-color-warning-text: var(--sigvelo-color-warning-500);
107
- --sigvelo-color-warning-border-subtle: color-mix(
108
- in oklab,
109
- var(--sigvelo-color-warning-900),
110
- white 7.5%
111
- );
112
- --sigvelo-color-warning-border-muted: var(--sigvelo-color-warning-800);
113
- --sigvelo-color-warning-border: var(--sigvelo-color-warning-600);
114
-
115
- /* Danger */
116
- --sigvelo-color-danger-bg-subtle: color-mix(in oklab, var(--sigvelo-color-danger-900), white 1%);
117
- --sigvelo-color-danger-bg-muted: var(--sigvelo-color-danger-800);
118
- --sigvelo-color-danger-bg: color-mix(in oklab, var(--sigvelo-color-danger-600), black 7.5%);
119
- --sigvelo-color-danger-bg-strong: var(--sigvelo-color-danger-200);
120
- --sigvelo-color-danger-bg-stronger: var(--sigvelo-color-danger-100);
121
- --sigvelo-color-danger-text-on-subtle: var(--sigvelo-color-danger-100);
122
- --sigvelo-color-danger-text-on-bg: white;
123
- --sigvelo-color-danger-text-on-strong: black;
124
- --sigvelo-color-danger-text: var(--sigvelo-color-danger-500);
125
- --sigvelo-color-danger-border-subtle: color-mix(
126
- in oklab,
127
- var(--sigvelo-color-danger-900),
128
- white 7.5%
129
- );
130
- --sigvelo-color-danger-border-muted: var(--sigvelo-color-danger-800);
131
- --sigvelo-color-danger-border: var(--sigvelo-color-danger-600);
132
- }
package/src/semantic-light.css DELETED
@@ -1,134 +0,0 @@
1
- /*
2
- * Light Theme Semantic Colors
3
- *
4
- * Semantic aliases for background, text, and border across all color intents.
5
- * Use these tokens in components instead of raw palette values.
6
- */
7
-
8
- :root,
9
- .sigvelo-light,
10
- [data-theme="light"] {
11
- color-scheme: light;
12
-
13
- --sigvelo-color-canvas: white;
14
- --sigvelo-color-surface: white;
15
- --sigvelo-color-text: var(--sigvelo-color-neutral-900);
16
- --sigvelo-color-text-muted: var(--sigvelo-color-neutral-700);
17
- --sigvelo-color-focus: var(--sigvelo-color-primary-bg);
18
- --sigvelo-focus-ring: var(--sigvelo-border-style) var(--sigvelo-focus-width)
19
- var(--sigvelo-color-focus);
20
- --sigvelo-color-backdrop: rgb(0 0 0 / 0.5);
21
- --sigvelo-color-selection-bg: var(--sigvelo-color-primary-300);
22
- --sigvelo-color-selection-text: var(--sigvelo-color-text);
23
- --sigvelo-color-shadow: black;
24
- --sigvelo-shadow-xs: 0 0.0625rem 0.0625rem
25
- color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 4%);
26
- --sigvelo-shadow-sm: 0 0.125rem 0.1875rem
27
- color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 8%);
28
- --sigvelo-shadow-md: 0 0.1875rem 0.375rem
29
- color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 10%);
30
- --sigvelo-shadow-lg: 0 0.375rem 0.75rem
31
- color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 12%);
32
- --sigvelo-shadow-xl: 0 0.5rem 1rem
33
- color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 14%);
34
- --sigvelo-inset-shadow-xs: inset 0 0.125rem 0.125rem -0.125rem
35
- color-mix(in oklab, black, transparent 94%);
36
- --sigvelo-inset-shadow-sm: inset 0 0.25rem 0.25rem -0.25rem
37
- color-mix(in oklab, black, transparent 90%);
38
- --sigvelo-inset-shadow-md: inset 0 0.5rem 0.5rem -0.5rem
39
- color-mix(in oklab, black, transparent 88%);
40
- --sigvelo-inset-shadow-lg: inset 0 1rem 1rem -1rem color-mix(in oklab, black, transparent 85%);
41
- --sigvelo-inset-shadow-xl: inset 0 1.5rem 1.5rem -1.5rem
42
- color-mix(in oklab, black, transparent 82%);
43
-
44
- /* Primary */
45
- --sigvelo-color-primary-bg-subtle: var(--sigvelo-color-primary-100);
46
- --sigvelo-color-primary-bg-muted: var(--sigvelo-color-primary-200);
47
- --sigvelo-color-primary-bg: color-mix(in oklab, var(--sigvelo-color-primary-600), black 2.5%);
48
- --sigvelo-color-primary-bg-strong: var(--sigvelo-color-primary-800);
49
- --sigvelo-color-primary-bg-stronger: var(--sigvelo-color-primary-900);
50
- --sigvelo-color-primary-text-on-subtle: var(--sigvelo-color-primary-900);
51
- --sigvelo-color-primary-text-on-bg: white;
52
- --sigvelo-color-primary-text-on-strong: white;
53
- --sigvelo-color-primary-text: color-mix(in oklab, var(--sigvelo-color-primary-600), black 12.5%);
54
- --sigvelo-color-primary-border-subtle: color-mix(
55
- in oklab,
56
- var(--sigvelo-color-primary-100),
57
- black 3%
58
- );
59
- --sigvelo-color-primary-border-muted: var(--sigvelo-color-primary-300);
60
- --sigvelo-color-primary-border: var(--sigvelo-color-primary-500);
61
-
62
- /* Neutral */
63
- --sigvelo-color-neutral-bg-subtle: var(--sigvelo-color-neutral-100);
64
- --sigvelo-color-neutral-bg-muted: var(--sigvelo-color-neutral-200);
65
- --sigvelo-color-neutral-bg: color-mix(in oklab, var(--sigvelo-color-neutral-600), black 2.5%);
66
- --sigvelo-color-neutral-bg-strong: var(--sigvelo-color-neutral-800);
67
- --sigvelo-color-neutral-bg-stronger: var(--sigvelo-color-neutral-900);
68
- --sigvelo-color-neutral-text-on-subtle: var(--sigvelo-color-neutral-900);
69
- --sigvelo-color-neutral-text-on-bg: white;
70
- --sigvelo-color-neutral-text-on-strong: white;
71
- --sigvelo-color-neutral-text: color-mix(in oklab, var(--sigvelo-color-neutral-600), black 12.5%);
72
- /* Hairline: separation comes from fill and whitespace; borders only hint */
73
- --sigvelo-color-neutral-border-subtle: color-mix(
74
- in oklab,
75
- var(--sigvelo-color-neutral-200),
76
- transparent 40%
77
- );
78
- --sigvelo-color-neutral-border-muted: var(--sigvelo-color-neutral-300);
79
- --sigvelo-color-neutral-border: var(--sigvelo-color-neutral-500);
80
-
81
- /* Constructive */
82
- --sigvelo-color-success-bg-subtle: var(--sigvelo-color-success-100);
83
- --sigvelo-color-success-bg-muted: var(--sigvelo-color-success-200);
84
- --sigvelo-color-success-bg: color-mix(in oklab, var(--sigvelo-color-success-600), black 12%);
85
- --sigvelo-color-success-bg-strong: var(--sigvelo-color-success-800);
86
- --sigvelo-color-success-bg-stronger: var(--sigvelo-color-success-900);
87
- --sigvelo-color-success-text-on-subtle: var(--sigvelo-color-success-900);
88
- --sigvelo-color-success-text-on-bg: white;
89
- --sigvelo-color-success-text-on-strong: white;
90
- --sigvelo-color-success-text: color-mix(in oklab, var(--sigvelo-color-success-600), black 12.5%);
91
- --sigvelo-color-success-border-subtle: color-mix(
92
- in oklab,
93
- var(--sigvelo-color-success-100),
94
- black 3%
95
- );
96
- --sigvelo-color-success-border-muted: var(--sigvelo-color-success-300);
97
- --sigvelo-color-success-border: var(--sigvelo-color-success-500);
98
-
99
- /* Caution */
100
- --sigvelo-color-warning-bg-subtle: var(--sigvelo-color-warning-100);
101
- --sigvelo-color-warning-bg-muted: var(--sigvelo-color-warning-200);
102
- --sigvelo-color-warning-bg: color-mix(in oklab, var(--sigvelo-color-warning-600), black 15%);
103
- --sigvelo-color-warning-bg-strong: var(--sigvelo-color-warning-800);
104
- --sigvelo-color-warning-bg-stronger: var(--sigvelo-color-warning-900);
105
- --sigvelo-color-warning-text-on-subtle: var(--sigvelo-color-warning-900);
106
- --sigvelo-color-warning-text-on-bg: white;
107
- --sigvelo-color-warning-text-on-strong: white;
108
- --sigvelo-color-warning-text: color-mix(in oklab, var(--sigvelo-color-warning-600), black 12.5%);
109
- --sigvelo-color-warning-border-subtle: color-mix(
110
- in oklab,
111
- var(--sigvelo-color-warning-100),
112
- black 3%
113
- );
114
- --sigvelo-color-warning-border-muted: var(--sigvelo-color-warning-300);
115
- --sigvelo-color-warning-border: var(--sigvelo-color-warning-500);
116
-
117
- /* Danger */
118
- --sigvelo-color-danger-bg-subtle: var(--sigvelo-color-danger-100);
119
- --sigvelo-color-danger-bg-muted: var(--sigvelo-color-danger-200);
120
- --sigvelo-color-danger-bg: color-mix(in oklab, var(--sigvelo-color-danger-600), black 2.5%);
121
- --sigvelo-color-danger-bg-strong: var(--sigvelo-color-danger-800);
122
- --sigvelo-color-danger-bg-stronger: var(--sigvelo-color-danger-900);
123
- --sigvelo-color-danger-text-on-subtle: var(--sigvelo-color-danger-900);
124
- --sigvelo-color-danger-text-on-bg: white;
125
- --sigvelo-color-danger-text-on-strong: white;
126
- --sigvelo-color-danger-text: color-mix(in oklab, var(--sigvelo-color-danger-600), black 12.5%);
127
- --sigvelo-color-danger-border-subtle: color-mix(
128
- in oklab,
129
- var(--sigvelo-color-danger-100),
130
- black 3%
131
- );
132
- --sigvelo-color-danger-border-muted: var(--sigvelo-color-danger-300);
133
- --sigvelo-color-danger-border: var(--sigvelo-color-danger-500);
134
- }