@zevaui/tokens 0.2.1 → 0.3.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 (5) hide show
  1. package/NOTICE +24 -0
  2. package/dist/index.js +10 -10
  3. package/dist/styles.css +17 -13
  4. package/dist/tokens.manifest.json +32 -21
  5. package/package.json +2 -1
package/NOTICE ADDED
@@ -0,0 +1,24 @@
1
+ ZevaUI
2
+ Copyright the ZevaUI contributors
3
+
4
+ This product is licensed under the Apache License, Version 2.0 (see LICENSE).
5
+
6
+ This NOTICE file is provided per Apache License, Version 2.0, Section 4(d),
7
+ and must be reproduced in any derivative distribution that includes a
8
+ NOTICE file.
9
+
10
+ ================================================================================
11
+
12
+ Third-party attribution: shadcn/ui
13
+
14
+ https://github.com/shadcn-ui/ui
15
+ Copyright (c) 2023 shadcn
16
+ Licensed under the MIT License.
17
+
18
+ ZevaUI's token primitives and component recipes port numeric geometry
19
+ values (corner radii) and the resulting contrast ratios derived from
20
+ shadcn/ui's public component registry. No source code from shadcn/ui is
21
+ copied, vendored, or redistributed; only measured numeric values and the
22
+ design decisions they informed are referenced. See
23
+ `docs/adrs/0022-shadcn-visual-language-port.md` for the full record of what
24
+ was measured and why.
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": "4px",
16
- "radius-card": "8px",
17
- "radius-button": "4px",
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.551 0.027 264.364)",
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)",
@@ -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": "4px",
62
- "radius-card": "8px",
63
- "radius-button": "4px",
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)",
@@ -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": "4px",
108
- "radius-card": "8px",
109
- "radius-button": "4px",
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-md);
116
- --zui-radius-card: var(--zui-radius-lg);
117
- --zui-radius-button: var(--zui-radius-md);
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-500);
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);
@@ -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-md);
278
- --zui-radius-card: var(--zui-radius-lg);
279
- --zui-radius-button: var(--zui-radius-md);
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);
@@ -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-md);
439
- --zui-radius-card: var(--zui-radius-lg);
440
- --zui-radius-button: var(--zui-radius-md);
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);
@@ -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-md);
599
- --zui-radius-card: var(--zui-radius-lg);
600
- --zui-radius-button: var(--zui-radius-md);
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);
package/dist/tokens.manifest.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": "1.0.0",
3
- "generated": "2026-09-06T06:49:34.306Z",
3
+ "generated": "2026-10-29T03:06:36.399Z",
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": "4px",
20
- "dark": "4px",
21
- "highContrast": "4px"
19
+ "light": "8px",
20
+ "dark": "8px",
21
+ "highContrast": "8px"
22
22
  },
23
23
  "references": {
24
24
  "light": [
25
25
  "radius",
26
- "md"
26
+ "lg"
27
27
  ],
28
28
  "dark": [
29
29
  "radius",
30
- "md"
30
+ "lg"
31
31
  ],
32
32
  "highContrast": [
33
33
  "radius",
34
- "md"
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": "8px",
49
- "dark": "8px",
50
- "highContrast": "8px"
48
+ "light": "12px",
49
+ "dark": "12px",
50
+ "highContrast": "12px"
51
51
  },
52
52
  "references": {
53
53
  "light": [
54
54
  "radius",
55
- "lg"
55
+ "xl"
56
56
  ],
57
57
  "dark": [
58
58
  "radius",
59
- "lg"
59
+ "xl"
60
60
  ],
61
61
  "highContrast": [
62
62
  "radius",
63
- "lg"
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": "4px",
78
- "dark": "4px",
79
- "highContrast": "4px"
77
+ "light": "8px",
78
+ "dark": "8px",
79
+ "highContrast": "8px"
80
80
  },
81
81
  "references": {
82
82
  "light": [
83
83
  "radius",
84
- "md"
84
+ "lg"
85
85
  ],
86
86
  "dark": [
87
87
  "radius",
88
- "md"
88
+ "lg"
89
89
  ],
90
90
  "highContrast": [
91
91
  "radius",
92
- "md"
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.551 0.027 264.364)",
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
- "500"
440
+ "550"
441
441
  ],
442
442
  "dark": [
443
443
  "gray",
@@ -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.2.1",
3
+ "version": "0.3.1",
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": {
@@ -18,6 +18,7 @@
18
18
  }
19
19
  },
20
20
  "files": [
21
+ "NOTICE",
21
22
  "dist"
22
23
  ],
23
24
  "sideEffects": [