@zevaui/tokens 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -0
- package/dist/index.js +15 -15
- package/dist/styles.css +24 -20
- package/dist/tokens.manifest.json +42 -31
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -21,6 +21,24 @@ and are compiled at build time — never at runtime — into:
|
|
|
21
21
|
Components in `@zevaui/components` consume these tokens exclusively through
|
|
22
22
|
`var(--zui-*)` references — no literal color, spacing, or radius values.
|
|
23
23
|
|
|
24
|
+
Importing the custom properties defines them; it paints nothing. Two of them
|
|
25
|
+
are the page's own, and your app has to apply them:
|
|
26
|
+
|
|
27
|
+
```css
|
|
28
|
+
body {
|
|
29
|
+
background-color: var(--zui-color-bg-canvas);
|
|
30
|
+
color: var(--zui-color-text-default);
|
|
31
|
+
}
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
`color-bg-canvas` is the background every theme is designed against — it is
|
|
35
|
+
what the contrast floors below are measured on. Component text that sits on
|
|
36
|
+
the page rather than on a component's own surface is coloured for it, so a
|
|
37
|
+
page that never paints it leaves that text on the browser's white instead.
|
|
38
|
+
In the dark theme that lands at 1.05:1 against a 4.5:1 floor. The contrast
|
|
39
|
+
guarantees are a property of theme values applied as intended, not a promise
|
|
40
|
+
that any background you choose will pass.
|
|
41
|
+
|
|
24
42
|
## Guarantees
|
|
25
43
|
|
|
26
44
|
Every theme in this package is validated against the machine-readable contract
|
package/dist/index.js
CHANGED
|
@@ -12,9 +12,9 @@ export const themeKeyOf = {
|
|
|
12
12
|
|
|
13
13
|
export const tokens = {
|
|
14
14
|
"light": {
|
|
15
|
-
"radius-input": "
|
|
16
|
-
"radius-card": "
|
|
17
|
-
"radius-button": "
|
|
15
|
+
"radius-input": "8px",
|
|
16
|
+
"radius-card": "12px",
|
|
17
|
+
"radius-button": "8px",
|
|
18
18
|
"shadow-card": "0 1px 3px 0 oklch(0.21 0.034 264.665 / 0.1), 0 1px 2px -1px oklch(0.21 0.034 264.665 / 0.1)",
|
|
19
19
|
"shadow-dropdown": "0 10px 15px -3px oklch(0.21 0.034 264.665 / 0.1), 0 4px 6px -4px oklch(0.21 0.034 264.665 / 0.1)",
|
|
20
20
|
"shadow-modal": "0 20px 25px -5px oklch(0.21 0.034 264.665 / 0.1), 0 8px 10px -6px oklch(0.21 0.034 264.665 / 0.1)",
|
|
@@ -26,7 +26,7 @@ export const tokens = {
|
|
|
26
26
|
"space-button-py": "8px",
|
|
27
27
|
"color-text-default": "oklch(0.21 0.034 264.665)",
|
|
28
28
|
"color-text-secondary": "oklch(0.446 0.03 256.802)",
|
|
29
|
-
"color-text-muted": "oklch(0.
|
|
29
|
+
"color-text-muted": "oklch(0.538 0.0274 263.428)",
|
|
30
30
|
"color-text-inverse": "oklch(1 0 0)",
|
|
31
31
|
"color-text-link": "oklch(0.546 0.245 262.881)",
|
|
32
32
|
"color-text-danger": "oklch(0.577 0.245 27.325)",
|
|
@@ -38,15 +38,15 @@ export const tokens = {
|
|
|
38
38
|
"color-bg-inverse": "oklch(0.21 0.034 264.665)",
|
|
39
39
|
"color-border-default": "oklch(0.928 0.006 264.531)",
|
|
40
40
|
"color-border-subtle": "oklch(0.967 0.003 264.542)",
|
|
41
|
-
"color-border-strong": "oklch(0.
|
|
41
|
+
"color-border-strong": "oklch(0.551 0.027 264.364)",
|
|
42
42
|
"color-accent-default": "oklch(0.546 0.245 262.881)",
|
|
43
43
|
"color-accent-subtle": "oklch(0.932 0.032 255.585)",
|
|
44
44
|
"color-accent-strong": "oklch(0.488 0.243 264.376)",
|
|
45
45
|
"color-danger-default": "oklch(0.577 0.245 27.325)",
|
|
46
46
|
"color-danger-subtle": "oklch(0.936 0.032 17.717)",
|
|
47
|
-
"color-success-default": "oklch(0.
|
|
47
|
+
"color-success-default": "oklch(0.527 0.154 150.069)",
|
|
48
48
|
"color-success-subtle": "oklch(0.962 0.044 156.743)",
|
|
49
|
-
"color-warning-default": "oklch(0.
|
|
49
|
+
"color-warning-default": "oklch(0.555 0.163 48.998)",
|
|
50
50
|
"color-warning-subtle": "oklch(0.962 0.059 95.617)",
|
|
51
51
|
"color-focus-ring": "oklch(0.623 0.214 259.815)",
|
|
52
52
|
"font-body-family": "\"Inter\", system-ui, -apple-system, sans-serif",
|
|
@@ -58,9 +58,9 @@ export const tokens = {
|
|
|
58
58
|
"font-mono-family": "\"JetBrains Mono\", ui-monospace, monospace"
|
|
59
59
|
},
|
|
60
60
|
"dark": {
|
|
61
|
-
"radius-input": "
|
|
62
|
-
"radius-card": "
|
|
63
|
-
"radius-button": "
|
|
61
|
+
"radius-input": "8px",
|
|
62
|
+
"radius-card": "12px",
|
|
63
|
+
"radius-button": "8px",
|
|
64
64
|
"shadow-card": "0 1px 3px 0 oklch(0.21 0.034 264.665 / 0.1), 0 1px 2px -1px oklch(0.21 0.034 264.665 / 0.1)",
|
|
65
65
|
"shadow-dropdown": "0 10px 15px -3px oklch(0.21 0.034 264.665 / 0.1), 0 4px 6px -4px oklch(0.21 0.034 264.665 / 0.1)",
|
|
66
66
|
"shadow-modal": "0 20px 25px -5px oklch(0.21 0.034 264.665 / 0.1), 0 8px 10px -6px oklch(0.21 0.034 264.665 / 0.1)",
|
|
@@ -84,11 +84,11 @@ export const tokens = {
|
|
|
84
84
|
"color-bg-inverse": "oklch(0.985 0.002 247.839)",
|
|
85
85
|
"color-border-default": "oklch(0.278 0.033 256.848)",
|
|
86
86
|
"color-border-subtle": "oklch(0.278 0.033 256.848)",
|
|
87
|
-
"color-border-strong": "oklch(0.
|
|
87
|
+
"color-border-strong": "oklch(0.551 0.027 264.364)",
|
|
88
88
|
"color-accent-default": "oklch(0.623 0.214 259.815)",
|
|
89
89
|
"color-accent-subtle": "oklch(0.379 0.146 265.522)",
|
|
90
90
|
"color-accent-strong": "oklch(0.707 0.165 254.624)",
|
|
91
|
-
"color-danger-default": "oklch(0.
|
|
91
|
+
"color-danger-default": "oklch(0.704 0.191 22.216)",
|
|
92
92
|
"color-danger-subtle": "oklch(0.396 0.141 25.723)",
|
|
93
93
|
"color-success-default": "oklch(0.723 0.219 149.579)",
|
|
94
94
|
"color-success-subtle": "oklch(0.393 0.095 152.535)",
|
|
@@ -104,9 +104,9 @@ export const tokens = {
|
|
|
104
104
|
"font-mono-family": "\"JetBrains Mono\", ui-monospace, monospace"
|
|
105
105
|
},
|
|
106
106
|
"highContrast": {
|
|
107
|
-
"radius-input": "
|
|
108
|
-
"radius-card": "
|
|
109
|
-
"radius-button": "
|
|
107
|
+
"radius-input": "8px",
|
|
108
|
+
"radius-card": "12px",
|
|
109
|
+
"radius-button": "8px",
|
|
110
110
|
"shadow-card": "0 1px 3px 0 oklch(0.21 0.034 264.665 / 0.1), 0 1px 2px -1px oklch(0.21 0.034 264.665 / 0.1)",
|
|
111
111
|
"shadow-dropdown": "0 10px 15px -3px oklch(0.21 0.034 264.665 / 0.1), 0 4px 6px -4px oklch(0.21 0.034 264.665 / 0.1)",
|
|
112
112
|
"shadow-modal": "0 20px 25px -5px oklch(0.21 0.034 264.665 / 0.1), 0 8px 10px -6px oklch(0.21 0.034 264.665 / 0.1)",
|
package/dist/styles.css
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
--zui-gray-300: oklch(0.872 0.01 258.338);
|
|
6
6
|
--zui-gray-400: oklch(0.707 0.022 261.325);
|
|
7
7
|
--zui-gray-500: oklch(0.551 0.027 264.364);
|
|
8
|
+
--zui-gray-550: oklch(0.538 0.0274 263.428);
|
|
8
9
|
--zui-gray-600: oklch(0.446 0.03 256.802);
|
|
9
10
|
--zui-gray-700: oklch(0.373 0.034 259.733);
|
|
10
11
|
--zui-gray-800: oklch(0.278 0.033 256.848);
|
|
@@ -112,9 +113,9 @@
|
|
|
112
113
|
--zui-line-height-tight: 1.25;
|
|
113
114
|
--zui-line-height-normal: 1.5;
|
|
114
115
|
--zui-line-height-relaxed: 1.75;
|
|
115
|
-
--zui-radius-input: var(--zui-radius-
|
|
116
|
-
--zui-radius-card: var(--zui-radius-
|
|
117
|
-
--zui-radius-button: var(--zui-radius-
|
|
116
|
+
--zui-radius-input: var(--zui-radius-lg);
|
|
117
|
+
--zui-radius-card: var(--zui-radius-xl);
|
|
118
|
+
--zui-radius-button: var(--zui-radius-lg);
|
|
118
119
|
--zui-shadow-card: var(--zui-shadow-sm);
|
|
119
120
|
--zui-shadow-dropdown: var(--zui-shadow-lg);
|
|
120
121
|
--zui-shadow-modal: var(--zui-shadow-xl);
|
|
@@ -126,7 +127,7 @@
|
|
|
126
127
|
--zui-space-button-py: var(--zui-space-2);
|
|
127
128
|
--zui-color-text-default: var(--zui-gray-900);
|
|
128
129
|
--zui-color-text-secondary: var(--zui-gray-600);
|
|
129
|
-
--zui-color-text-muted: var(--zui-gray-
|
|
130
|
+
--zui-color-text-muted: var(--zui-gray-550);
|
|
130
131
|
--zui-color-text-inverse: var(--zui-white);
|
|
131
132
|
--zui-color-text-link: var(--zui-blue-600);
|
|
132
133
|
--zui-color-text-danger: var(--zui-red-600);
|
|
@@ -138,15 +139,15 @@
|
|
|
138
139
|
--zui-color-bg-inverse: var(--zui-gray-900);
|
|
139
140
|
--zui-color-border-default: var(--zui-gray-200);
|
|
140
141
|
--zui-color-border-subtle: var(--zui-gray-100);
|
|
141
|
-
--zui-color-border-strong: var(--zui-gray-
|
|
142
|
+
--zui-color-border-strong: var(--zui-gray-500);
|
|
142
143
|
--zui-color-accent-default: var(--zui-blue-600);
|
|
143
144
|
--zui-color-accent-subtle: var(--zui-blue-100);
|
|
144
145
|
--zui-color-accent-strong: var(--zui-blue-700);
|
|
145
146
|
--zui-color-danger-default: var(--zui-red-600);
|
|
146
147
|
--zui-color-danger-subtle: var(--zui-red-100);
|
|
147
|
-
--zui-color-success-default: var(--zui-green-
|
|
148
|
+
--zui-color-success-default: var(--zui-green-700);
|
|
148
149
|
--zui-color-success-subtle: var(--zui-green-100);
|
|
149
|
-
--zui-color-warning-default: var(--zui-amber-
|
|
150
|
+
--zui-color-warning-default: var(--zui-amber-700);
|
|
150
151
|
--zui-color-warning-subtle: var(--zui-amber-100);
|
|
151
152
|
--zui-color-focus-ring: var(--zui-blue-500);
|
|
152
153
|
--zui-font-body-family: var(--zui-font-family-sans);
|
|
@@ -167,6 +168,7 @@
|
|
|
167
168
|
--zui-gray-300: oklch(0.872 0.01 258.338);
|
|
168
169
|
--zui-gray-400: oklch(0.707 0.022 261.325);
|
|
169
170
|
--zui-gray-500: oklch(0.551 0.027 264.364);
|
|
171
|
+
--zui-gray-550: oklch(0.538 0.0274 263.428);
|
|
170
172
|
--zui-gray-600: oklch(0.446 0.03 256.802);
|
|
171
173
|
--zui-gray-700: oklch(0.373 0.034 259.733);
|
|
172
174
|
--zui-gray-800: oklch(0.278 0.033 256.848);
|
|
@@ -274,9 +276,9 @@
|
|
|
274
276
|
--zui-line-height-tight: 1.25;
|
|
275
277
|
--zui-line-height-normal: 1.5;
|
|
276
278
|
--zui-line-height-relaxed: 1.75;
|
|
277
|
-
--zui-radius-input: var(--zui-radius-
|
|
278
|
-
--zui-radius-card: var(--zui-radius-
|
|
279
|
-
--zui-radius-button: var(--zui-radius-
|
|
279
|
+
--zui-radius-input: var(--zui-radius-lg);
|
|
280
|
+
--zui-radius-card: var(--zui-radius-xl);
|
|
281
|
+
--zui-radius-button: var(--zui-radius-lg);
|
|
280
282
|
--zui-shadow-card: var(--zui-shadow-sm);
|
|
281
283
|
--zui-shadow-dropdown: var(--zui-shadow-lg);
|
|
282
284
|
--zui-shadow-modal: var(--zui-shadow-xl);
|
|
@@ -300,11 +302,11 @@
|
|
|
300
302
|
--zui-color-bg-inverse: var(--zui-gray-50);
|
|
301
303
|
--zui-color-border-default: var(--zui-gray-800);
|
|
302
304
|
--zui-color-border-subtle: var(--zui-gray-800);
|
|
303
|
-
--zui-color-border-strong: var(--zui-gray-
|
|
305
|
+
--zui-color-border-strong: var(--zui-gray-500);
|
|
304
306
|
--zui-color-accent-default: var(--zui-blue-500);
|
|
305
307
|
--zui-color-accent-subtle: var(--zui-blue-900);
|
|
306
308
|
--zui-color-accent-strong: var(--zui-blue-400);
|
|
307
|
-
--zui-color-danger-default: var(--zui-red-
|
|
309
|
+
--zui-color-danger-default: var(--zui-red-400);
|
|
308
310
|
--zui-color-danger-subtle: var(--zui-red-900);
|
|
309
311
|
--zui-color-success-default: var(--zui-green-500);
|
|
310
312
|
--zui-color-success-subtle: var(--zui-green-900);
|
|
@@ -328,6 +330,7 @@
|
|
|
328
330
|
--zui-gray-300: oklch(0.872 0.01 258.338);
|
|
329
331
|
--zui-gray-400: oklch(0.707 0.022 261.325);
|
|
330
332
|
--zui-gray-500: oklch(0.551 0.027 264.364);
|
|
333
|
+
--zui-gray-550: oklch(0.538 0.0274 263.428);
|
|
331
334
|
--zui-gray-600: oklch(0.446 0.03 256.802);
|
|
332
335
|
--zui-gray-700: oklch(0.373 0.034 259.733);
|
|
333
336
|
--zui-gray-800: oklch(0.278 0.033 256.848);
|
|
@@ -435,9 +438,9 @@
|
|
|
435
438
|
--zui-line-height-tight: 1.25;
|
|
436
439
|
--zui-line-height-normal: 1.5;
|
|
437
440
|
--zui-line-height-relaxed: 1.75;
|
|
438
|
-
--zui-radius-input: var(--zui-radius-
|
|
439
|
-
--zui-radius-card: var(--zui-radius-
|
|
440
|
-
--zui-radius-button: var(--zui-radius-
|
|
441
|
+
--zui-radius-input: var(--zui-radius-lg);
|
|
442
|
+
--zui-radius-card: var(--zui-radius-xl);
|
|
443
|
+
--zui-radius-button: var(--zui-radius-lg);
|
|
441
444
|
--zui-shadow-card: var(--zui-shadow-sm);
|
|
442
445
|
--zui-shadow-dropdown: var(--zui-shadow-lg);
|
|
443
446
|
--zui-shadow-modal: var(--zui-shadow-xl);
|
|
@@ -461,11 +464,11 @@
|
|
|
461
464
|
--zui-color-bg-inverse: var(--zui-gray-50);
|
|
462
465
|
--zui-color-border-default: var(--zui-gray-800);
|
|
463
466
|
--zui-color-border-subtle: var(--zui-gray-800);
|
|
464
|
-
--zui-color-border-strong: var(--zui-gray-
|
|
467
|
+
--zui-color-border-strong: var(--zui-gray-500);
|
|
465
468
|
--zui-color-accent-default: var(--zui-blue-500);
|
|
466
469
|
--zui-color-accent-subtle: var(--zui-blue-900);
|
|
467
470
|
--zui-color-accent-strong: var(--zui-blue-400);
|
|
468
|
-
--zui-color-danger-default: var(--zui-red-
|
|
471
|
+
--zui-color-danger-default: var(--zui-red-400);
|
|
469
472
|
--zui-color-danger-subtle: var(--zui-red-900);
|
|
470
473
|
--zui-color-success-default: var(--zui-green-500);
|
|
471
474
|
--zui-color-success-subtle: var(--zui-green-900);
|
|
@@ -488,6 +491,7 @@
|
|
|
488
491
|
--zui-gray-300: oklch(0.872 0.01 258.338);
|
|
489
492
|
--zui-gray-400: oklch(0.707 0.022 261.325);
|
|
490
493
|
--zui-gray-500: oklch(0.551 0.027 264.364);
|
|
494
|
+
--zui-gray-550: oklch(0.538 0.0274 263.428);
|
|
491
495
|
--zui-gray-600: oklch(0.446 0.03 256.802);
|
|
492
496
|
--zui-gray-700: oklch(0.373 0.034 259.733);
|
|
493
497
|
--zui-gray-800: oklch(0.278 0.033 256.848);
|
|
@@ -595,9 +599,9 @@
|
|
|
595
599
|
--zui-line-height-tight: 1.25;
|
|
596
600
|
--zui-line-height-normal: 1.5;
|
|
597
601
|
--zui-line-height-relaxed: 1.75;
|
|
598
|
-
--zui-radius-input: var(--zui-radius-
|
|
599
|
-
--zui-radius-card: var(--zui-radius-
|
|
600
|
-
--zui-radius-button: var(--zui-radius-
|
|
602
|
+
--zui-radius-input: var(--zui-radius-lg);
|
|
603
|
+
--zui-radius-card: var(--zui-radius-xl);
|
|
604
|
+
--zui-radius-button: var(--zui-radius-lg);
|
|
601
605
|
--zui-shadow-card: var(--zui-shadow-sm);
|
|
602
606
|
--zui-shadow-dropdown: var(--zui-shadow-lg);
|
|
603
607
|
--zui-shadow-modal: var(--zui-shadow-xl);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": "1.0.0",
|
|
3
|
-
"generated": "2026-
|
|
3
|
+
"generated": "2026-10-14T17:47:13.266Z",
|
|
4
4
|
"themes": [
|
|
5
5
|
"light",
|
|
6
6
|
"dark",
|
|
@@ -16,22 +16,22 @@
|
|
|
16
16
|
"type": "dimension",
|
|
17
17
|
"cssVar": "--zui-radius-input",
|
|
18
18
|
"values": {
|
|
19
|
-
"light": "
|
|
20
|
-
"dark": "
|
|
21
|
-
"highContrast": "
|
|
19
|
+
"light": "8px",
|
|
20
|
+
"dark": "8px",
|
|
21
|
+
"highContrast": "8px"
|
|
22
22
|
},
|
|
23
23
|
"references": {
|
|
24
24
|
"light": [
|
|
25
25
|
"radius",
|
|
26
|
-
"
|
|
26
|
+
"lg"
|
|
27
27
|
],
|
|
28
28
|
"dark": [
|
|
29
29
|
"radius",
|
|
30
|
-
"
|
|
30
|
+
"lg"
|
|
31
31
|
],
|
|
32
32
|
"highContrast": [
|
|
33
33
|
"radius",
|
|
34
|
-
"
|
|
34
|
+
"lg"
|
|
35
35
|
]
|
|
36
36
|
},
|
|
37
37
|
"isSemantic": true
|
|
@@ -45,22 +45,22 @@
|
|
|
45
45
|
"type": "dimension",
|
|
46
46
|
"cssVar": "--zui-radius-card",
|
|
47
47
|
"values": {
|
|
48
|
-
"light": "
|
|
49
|
-
"dark": "
|
|
50
|
-
"highContrast": "
|
|
48
|
+
"light": "12px",
|
|
49
|
+
"dark": "12px",
|
|
50
|
+
"highContrast": "12px"
|
|
51
51
|
},
|
|
52
52
|
"references": {
|
|
53
53
|
"light": [
|
|
54
54
|
"radius",
|
|
55
|
-
"
|
|
55
|
+
"xl"
|
|
56
56
|
],
|
|
57
57
|
"dark": [
|
|
58
58
|
"radius",
|
|
59
|
-
"
|
|
59
|
+
"xl"
|
|
60
60
|
],
|
|
61
61
|
"highContrast": [
|
|
62
62
|
"radius",
|
|
63
|
-
"
|
|
63
|
+
"xl"
|
|
64
64
|
]
|
|
65
65
|
},
|
|
66
66
|
"isSemantic": true
|
|
@@ -74,22 +74,22 @@
|
|
|
74
74
|
"type": "dimension",
|
|
75
75
|
"cssVar": "--zui-radius-button",
|
|
76
76
|
"values": {
|
|
77
|
-
"light": "
|
|
78
|
-
"dark": "
|
|
79
|
-
"highContrast": "
|
|
77
|
+
"light": "8px",
|
|
78
|
+
"dark": "8px",
|
|
79
|
+
"highContrast": "8px"
|
|
80
80
|
},
|
|
81
81
|
"references": {
|
|
82
82
|
"light": [
|
|
83
83
|
"radius",
|
|
84
|
-
"
|
|
84
|
+
"lg"
|
|
85
85
|
],
|
|
86
86
|
"dark": [
|
|
87
87
|
"radius",
|
|
88
|
-
"
|
|
88
|
+
"lg"
|
|
89
89
|
],
|
|
90
90
|
"highContrast": [
|
|
91
91
|
"radius",
|
|
92
|
-
"
|
|
92
|
+
"lg"
|
|
93
93
|
]
|
|
94
94
|
},
|
|
95
95
|
"isSemantic": true
|
|
@@ -430,14 +430,14 @@
|
|
|
430
430
|
"type": "color",
|
|
431
431
|
"cssVar": "--zui-color-text-muted",
|
|
432
432
|
"values": {
|
|
433
|
-
"light": "oklch(0.
|
|
433
|
+
"light": "oklch(0.538 0.0274 263.428)",
|
|
434
434
|
"dark": "oklch(0.707 0.022 261.325)",
|
|
435
435
|
"highContrast": "oklch(0.373 0.034 259.733)"
|
|
436
436
|
},
|
|
437
437
|
"references": {
|
|
438
438
|
"light": [
|
|
439
439
|
"gray",
|
|
440
|
-
"
|
|
440
|
+
"550"
|
|
441
441
|
],
|
|
442
442
|
"dark": [
|
|
443
443
|
"gray",
|
|
@@ -782,18 +782,18 @@
|
|
|
782
782
|
"type": "color",
|
|
783
783
|
"cssVar": "--zui-color-border-strong",
|
|
784
784
|
"values": {
|
|
785
|
-
"light": "oklch(0.
|
|
786
|
-
"dark": "oklch(0.
|
|
785
|
+
"light": "oklch(0.551 0.027 264.364)",
|
|
786
|
+
"dark": "oklch(0.551 0.027 264.364)",
|
|
787
787
|
"highContrast": "oklch(0 0 0)"
|
|
788
788
|
},
|
|
789
789
|
"references": {
|
|
790
790
|
"light": [
|
|
791
791
|
"gray",
|
|
792
|
-
"
|
|
792
|
+
"500"
|
|
793
793
|
],
|
|
794
794
|
"dark": [
|
|
795
795
|
"gray",
|
|
796
|
-
"
|
|
796
|
+
"500"
|
|
797
797
|
],
|
|
798
798
|
"highContrast": [
|
|
799
799
|
"black"
|
|
@@ -902,7 +902,7 @@
|
|
|
902
902
|
"cssVar": "--zui-color-danger-default",
|
|
903
903
|
"values": {
|
|
904
904
|
"light": "oklch(0.577 0.245 27.325)",
|
|
905
|
-
"dark": "oklch(0.
|
|
905
|
+
"dark": "oklch(0.704 0.191 22.216)",
|
|
906
906
|
"highContrast": "oklch(0.505 0.213 27.518)"
|
|
907
907
|
},
|
|
908
908
|
"references": {
|
|
@@ -912,7 +912,7 @@
|
|
|
912
912
|
],
|
|
913
913
|
"dark": [
|
|
914
914
|
"red",
|
|
915
|
-
"
|
|
915
|
+
"400"
|
|
916
916
|
],
|
|
917
917
|
"highContrast": [
|
|
918
918
|
"red",
|
|
@@ -961,14 +961,14 @@
|
|
|
961
961
|
"type": "color",
|
|
962
962
|
"cssVar": "--zui-color-success-default",
|
|
963
963
|
"values": {
|
|
964
|
-
"light": "oklch(0.
|
|
964
|
+
"light": "oklch(0.527 0.154 150.069)",
|
|
965
965
|
"dark": "oklch(0.723 0.219 149.579)",
|
|
966
966
|
"highContrast": "oklch(0.527 0.154 150.069)"
|
|
967
967
|
},
|
|
968
968
|
"references": {
|
|
969
969
|
"light": [
|
|
970
970
|
"green",
|
|
971
|
-
"
|
|
971
|
+
"700"
|
|
972
972
|
],
|
|
973
973
|
"dark": [
|
|
974
974
|
"green",
|
|
@@ -1021,14 +1021,14 @@
|
|
|
1021
1021
|
"type": "color",
|
|
1022
1022
|
"cssVar": "--zui-color-warning-default",
|
|
1023
1023
|
"values": {
|
|
1024
|
-
"light": "oklch(0.
|
|
1024
|
+
"light": "oklch(0.555 0.163 48.998)",
|
|
1025
1025
|
"dark": "oklch(0.828 0.189 84.429)",
|
|
1026
1026
|
"highContrast": "oklch(0.473 0.137 46.201)"
|
|
1027
1027
|
},
|
|
1028
1028
|
"references": {
|
|
1029
1029
|
"light": [
|
|
1030
1030
|
"amber",
|
|
1031
|
-
"
|
|
1031
|
+
"700"
|
|
1032
1032
|
],
|
|
1033
1033
|
"dark": [
|
|
1034
1034
|
"amber",
|
|
@@ -1379,6 +1379,17 @@
|
|
|
1379
1379
|
"cssVar": "--zui-gray-500",
|
|
1380
1380
|
"isSemantic": false
|
|
1381
1381
|
},
|
|
1382
|
+
{
|
|
1383
|
+
"path": [
|
|
1384
|
+
"gray",
|
|
1385
|
+
"550"
|
|
1386
|
+
],
|
|
1387
|
+
"name": "gray-550",
|
|
1388
|
+
"type": "color",
|
|
1389
|
+
"value": "oklch(0.538 0.0274 263.428)",
|
|
1390
|
+
"cssVar": "--zui-gray-550",
|
|
1391
|
+
"isSemantic": false
|
|
1392
|
+
},
|
|
1382
1393
|
{
|
|
1383
1394
|
"path": [
|
|
1384
1395
|
"gray",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zevaui/tokens",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "Design tokens for ZevaUI: a single source of truth compiled to CSS custom properties, a typed manifest, and per-theme stylesheets",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|