@neovici/cosmoz-tokens 4.8.0 → 4.9.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 (7) hide show
  1. package/README.md +18 -9
  2. package/package.json +7 -2
  3. package/src/fallback.css +20 -2
  4. package/src/primitives.css +95 -107
  5. package/src/semantic.css +75 -6
  6. package/src/shadows.css +27 -2
  7. package/src/typography.css +5 -4
package/README.md CHANGED
@@ -106,19 +106,28 @@ document.documentElement.classList.add('dark-mode');
106
106
  document.documentElement.dataset.theme = 'dark';
107
107
  ```
108
108
 
109
+ ## Design principles
110
+
111
+ The tokens have two layers — primitives (the palette) and semantics (the
112
+ intent) — and the brand ramp doubles as the theme knob. The reasoning and
113
+ the rules for changing tokens are documented in
114
+ [docs/tokens-guidelines.md](docs/tokens-guidelines.md); read it before
115
+ re-pointing or re-theming anything.
116
+
109
117
  ## Token Reference
110
118
 
111
119
  ### Colors (Primitives)
112
120
 
113
- | Token | Description |
114
- | ----------------------------- | ------------------------- |
115
- | `--cz-color-brand-{25-950}` | Brand color scale (slate) |
116
- | `--cz-color-gray-{25-950}` | Gray scale |
117
- | `--cz-color-error-{25-950}` | Error/danger colors |
118
- | `--cz-color-warning-{25-950}` | Warning colors |
119
- | `--cz-color-success-{25-950}` | Success colors |
120
- | `--cz-color-white` | Pure white |
121
- | `--cz-color-black` | Pure black |
121
+ | Token | Description |
122
+ | ----------------------------- | ------------------------ |
123
+ | `--cz-color-brand-{25-950}` | Brand color scale (gray) |
124
+ | `--cz-color-gray-{25-950}` | Gray scale |
125
+ | `--cz-color-slate-{25-950}` | Slate scale |
126
+ | `--cz-color-error-{25-950}` | Error/danger colors |
127
+ | `--cz-color-warning-{25-950}` | Warning colors |
128
+ | `--cz-color-success-{25-950}` | Success colors |
129
+ | `--cz-color-white` | Pure white |
130
+ | `--cz-color-black` | Pure black |
122
131
 
123
132
  ### Typography
124
133
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neovici/cosmoz-tokens",
3
- "version": "4.8.0",
3
+ "version": "4.9.1",
4
4
  "description": "Design tokens for Cosmoz web components based on Untitled UI",
5
5
  "keywords": [
6
6
  "design-tokens",
@@ -51,7 +51,8 @@
51
51
  "storybook:deploy": "storybook-to-ghpages",
52
52
  "storybook:preview": "npm run storybook:build && http-server ./storybook-static/ --silent",
53
53
  "prepare": "husky",
54
- "changeset": "changeset"
54
+ "changeset": "changeset",
55
+ "test": "wtr"
55
56
  },
56
57
  "publishConfig": {
57
58
  "access": "public"
@@ -66,7 +67,11 @@
66
67
  "@neovici/cfg": "^2.8.0",
67
68
  "@storybook/addon-a11y": "^10.3.4",
68
69
  "@storybook/web-components-vite": "^10.0.0",
70
+ "@types/mocha": "^10.0.10",
69
71
  "@web/dev-server": "^0.4.0",
72
+ "@web/test-runner": "^0.20.2",
73
+ "@web/test-runner-playwright": "^0.11.1",
74
+ "chai": "^5.3.3",
70
75
  "eslint": "^9.0.0",
71
76
  "http-server": "^14.1.1",
72
77
  "husky": "^9.0.0",
package/src/fallback.css CHANGED
@@ -21,6 +21,8 @@
21
21
  --cz-color-text-processing: var(--cz-color-indigo-700);
22
22
  --cz-color-text-brand: var(--cz-color-brand-600);
23
23
  --cz-color-text-brand-hover: var(--cz-color-brand-700);
24
+ --cz-color-text-link: var(--cz-color-slate-600);
25
+ --cz-color-text-link-hover: var(--cz-color-slate-700);
24
26
  --cz-color-text-on-brand: var(--cz-color-white);
25
27
  --cz-color-text-on-brand-secondary: var(--cz-color-brand-200);
26
28
  --cz-color-text-info: var(--cz-color-info-700);
@@ -40,9 +42,13 @@
40
42
  --cz-color-bg-brand: var(--cz-color-brand-50);
41
43
  --cz-color-bg-brand-subtle: var(--cz-color-brand-50);
42
44
  --cz-color-bg-brand-secondary: var(--cz-color-brand-100);
43
- --cz-color-bg-brand-solid: var(--cz-color-brand-600);
45
+ --cz-color-bg-brand-solid: var(--cz-color-brand-800);
44
46
  --cz-color-bg-brand-solid-hover: var(--cz-color-brand-700);
45
47
  --cz-color-bg-brand-section: var(--cz-color-brand-800);
48
+ --cz-color-bg-action-solid: var(--cz-color-gray-700);
49
+ --cz-color-bg-action-solid-hover: var(--cz-color-gray-600);
50
+ --cz-color-text-on-action: var(--cz-color-white);
51
+ --cz-color-bg-highlight: var(--cz-color-yellow-200);
46
52
  --cz-color-bg-error: var(--cz-color-error-50);
47
53
  --cz-color-bg-error-secondary: var(--cz-color-error-100);
48
54
  --cz-color-bg-error-solid: var(--cz-color-error-600);
@@ -101,7 +107,7 @@
101
107
  --cz-color-fg-info: var(--cz-color-info-600);
102
108
  --cz-color-fg-info-secondary: var(--cz-color-info-500);
103
109
  --cz-focus-ring:
104
- inset 0 0 0 1px var(--cz-color-brand-500),
110
+ inset 0 0 0 1px var(--cz-color-slate-500),
105
111
  inset 0 0 0 2px var(--cz-color-bg-primary);
106
112
  --cz-focus-ring-error:
107
113
  inset 0 0 0 1px var(--cz-color-error-500),
@@ -117,5 +123,17 @@
117
123
  --skeumorphic-color: rgba(255, 255, 255, 0.12);
118
124
  --cz-shadow-pressed-3d: 0px 2px 3px 0px rgba(10, 13, 18, 0.12) inset;
119
125
  --cz-shadow-pressed-3d-solid: 0px 2px 3px 0px rgba(10, 13, 18, 0.2) inset;
126
+ --cz-shadow-action:
127
+ inset 0 0 0 1px rgba(10, 13, 18, 0.45),
128
+ inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(10, 13, 18, 0.12),
129
+ 0 2px 5px -1px rgba(10, 13, 18, 0.12);
130
+ --cz-color-chart-1: var(--cz-color-brand-400);
131
+ --cz-color-chart-2: var(--cz-color-orange-400);
132
+ --cz-color-chart-3: var(--cz-color-info-300);
133
+ --cz-color-chart-4: var(--cz-color-success-700);
134
+ --cz-color-chart-5: var(--cz-color-warning-300);
135
+ --cz-color-chart-6: var(--cz-color-error-500);
136
+ --cz-color-chart-7: var(--cz-color-brand-600);
137
+ --cz-color-chart-8: var(--cz-color-gray-400);
120
138
  }
121
139
  }
package/src/primitives.css CHANGED
@@ -1,6 +1,8 @@
1
1
  /**
2
2
  * Cosmoz Design Tokens - Primitives
3
- * Base color palette extracted from Untitled UI
3
+ * Base color palette. Gray, lavender, error, warning, success and sky are the
4
+ * Cosmoz palette (core steps are listed per scale; the rest are derived in OKLCH).
5
+ * The remaining scales are kept for existing consumers.
4
6
  */
5
7
 
6
8
  :root {
@@ -13,103 +15,89 @@
13
15
  --cz-color-alpha-white: rgb(255 255 255);
14
16
  --cz-color-alpha-black: rgb(0 0 0);
15
17
 
16
- /* Danube colors */
17
- --cz-danube-25: rgb(251 252 254);
18
- --cz-danube-50: rgb(222 230 246);
19
- --cz-danube-100: rgb(195 209 237);
20
- --cz-danube-200: rgb(169 189 226);
21
- --cz-danube-300: rgb(144 169 215);
22
- --cz-danube-400: rgb(120 150 202);
23
- --cz-danube-500: rgb(95 129 189);
24
- --cz-danube-600: rgb(73 109 172);
25
- --cz-danube-700: rgb(64 93 144);
26
- --cz-danube-800: rgb(54 76 116);
27
- --cz-danube-900: rgb(43 59 89);
28
- --cz-danube-950: rgb(31 42 62);
18
+ /* Brand colors - Lavender. The theme switch: re-point these to re-brand. */
19
+ --cz-color-brand-25: var(--cz-color-lavender-25);
20
+ --cz-color-brand-50: var(--cz-color-lavender-50);
21
+ --cz-color-brand-100: var(--cz-color-lavender-100);
22
+ --cz-color-brand-200: var(--cz-color-lavender-200);
23
+ --cz-color-brand-300: var(--cz-color-lavender-300);
24
+ --cz-color-brand-400: var(--cz-color-lavender-400);
25
+ --cz-color-brand-500: var(--cz-color-lavender-500);
26
+ --cz-color-brand-600: var(--cz-color-lavender-600);
27
+ --cz-color-brand-700: var(--cz-color-lavender-700);
28
+ --cz-color-brand-800: var(--cz-color-lavender-800);
29
+ --cz-color-brand-900: var(--cz-color-lavender-900);
30
+ --cz-color-brand-950: var(--cz-color-lavender-950);
29
31
 
30
- /* Slate colors */
31
- --cz-slate-25: rgb(252 253 254);
32
- --cz-slate-50: rgb(248 250 252);
33
- --cz-slate-100: rgb(241 245 249);
34
- --cz-slate-200: rgb(226 232 240);
35
- --cz-slate-300: rgb(203 213 225);
36
- --cz-slate-400: rgb(148 163 184);
37
- --cz-slate-500: rgb(100 116 139);
38
- --cz-slate-600: rgb(71 85 105);
39
- --cz-slate-700: rgb(51 65 85);
40
- --cz-slate-800: rgb(30 41 59);
41
- --cz-slate-900: rgb(15 23 42);
42
- --cz-slate-950: rgb(2 6 23);
32
+ /* Lavender colors — the brand hue. Core: 50, 200, 400, 600 */
33
+ --cz-color-lavender-25: rgb(250 248 255); /* derived */
34
+ --cz-color-lavender-50: rgb(245 242 255);
35
+ --cz-color-lavender-100: rgb(236 230 255); /* derived */
36
+ --cz-color-lavender-200: rgb(219 207 255);
37
+ --cz-color-lavender-300: rgb(197 181 250); /* derived */
38
+ --cz-color-lavender-400: rgb(175 155 244);
39
+ --cz-color-lavender-500: rgb(144 124 210); /* derived */
40
+ --cz-color-lavender-600: rgb(115 94 177);
41
+ --cz-color-lavender-700: rgb(94 78 143); /* derived */
42
+ --cz-color-lavender-800: rgb(73 62 111); /* derived */
43
+ --cz-color-lavender-900: rgb(54 46 80); /* derived */
44
+ --cz-color-lavender-950: rgb(36 32 52); /* derived */
43
45
 
44
- /* Brand colors - Slate */
45
- --cz-color-brand-25: var(--cz-slate-25);
46
- --cz-color-brand-50: var(--cz-slate-50);
47
- --cz-color-brand-100: var(--cz-slate-100);
48
- --cz-color-brand-200: var(--cz-slate-200);
49
- --cz-color-brand-300: var(--cz-slate-300);
50
- --cz-color-brand-400: var(--cz-slate-400);
51
- --cz-color-brand-500: var(--cz-slate-500);
52
- --cz-color-brand-600: var(--cz-slate-600);
53
- --cz-color-brand-700: var(--cz-slate-700);
54
- --cz-color-brand-800: var(--cz-slate-800);
55
- --cz-color-brand-900: var(--cz-slate-900);
56
- --cz-color-brand-950: var(--cz-slate-950);
46
+ /* Gray colors — graphite, tinted toward lavender; 500–950 lean cool. Core: all but 25, 100, 800 */
47
+ --cz-color-gray-25: rgb(251 250 251); /* derived */
48
+ --cz-color-gray-50: rgb(247 246 248);
49
+ --cz-color-gray-100: rgb(240 239 242); /* derived */
50
+ --cz-color-gray-200: rgb(227 226 231);
51
+ --cz-color-gray-300: rgb(209 208 215);
52
+ --cz-color-gray-400: rgb(161 160 168);
53
+ --cz-color-gray-500: rgb(113 116 126);
54
+ --cz-color-gray-600: rgb(85 88 97);
55
+ --cz-color-gray-700: rgb(60 62 71);
56
+ --cz-color-gray-800: rgb(38 40 47); /* derived */
57
+ --cz-color-gray-900: rgb(20 21 26);
58
+ --cz-color-gray-950: rgb(10 11 14);
57
59
 
58
- /* Gray colors */
59
- --cz-color-gray-25: rgb(253 253 253);
60
- --cz-color-gray-50: rgb(250 250 250);
61
- --cz-color-gray-100: rgb(245 245 245);
62
- --cz-color-gray-200: rgb(233 234 235);
63
- --cz-color-gray-300: rgb(213 215 218);
64
- --cz-color-gray-400: rgb(164 167 174);
65
- --cz-color-gray-500: rgb(113 118 128);
66
- --cz-color-gray-600: rgb(83 88 98);
67
- --cz-color-gray-700: rgb(65 70 81);
68
- --cz-color-gray-800: rgb(37 43 55);
69
- --cz-color-gray-900: rgb(24 29 39);
70
- --cz-color-gray-950: rgb(10 13 18);
60
+ /* Error colors. Core: 50, 300, 500, 700 */
61
+ --cz-color-error-25: rgb(255 248 247); /* derived */
62
+ --cz-color-error-50: rgb(255 241 240);
63
+ --cz-color-error-100: rgb(255 225 223); /* derived */
64
+ --cz-color-error-200: rgb(255 193 189); /* derived */
65
+ --cz-color-error-300: rgb(255 160 156);
66
+ --cz-color-error-400: rgb(254 124 122); /* derived */
67
+ --cz-color-error-500: rgb(251 82 88);
68
+ --cz-color-error-600: rgb(211 49 61); /* derived */
69
+ --cz-color-error-700: rgb(172 0 34);
70
+ --cz-color-error-800: rgb(139 18 33); /* derived */
71
+ --cz-color-error-900: rgb(108 24 30); /* derived */
72
+ --cz-color-error-950: rgb(78 24 27); /* derived */
71
73
 
72
- /* Error colors */
73
- --cz-color-error-25: rgb(255 251 250);
74
- --cz-color-error-50: rgb(254 243 242);
75
- --cz-color-error-100: rgb(254 228 226);
76
- --cz-color-error-200: rgb(254 205 202);
77
- --cz-color-error-300: rgb(253 162 155);
78
- --cz-color-error-400: rgb(249 112 102);
79
- --cz-color-error-500: rgb(240 68 56);
80
- --cz-color-error-600: rgb(217 45 32);
81
- --cz-color-error-700: rgb(180 35 24);
82
- --cz-color-error-800: rgb(145 32 24);
83
- --cz-color-error-900: rgb(122 39 26);
84
- --cz-color-error-950: rgb(85 22 12);
74
+ /* Warning colors. Core: 50, 300, 500, 700 */
75
+ --cz-color-warning-25: rgb(255 251 243); /* derived */
76
+ --cz-color-warning-50: rgb(254 246 230);
77
+ --cz-color-warning-100: rgb(254 238 206); /* derived */
78
+ --cz-color-warning-200: rgb(255 221 155); /* derived */
79
+ --cz-color-warning-300: rgb(255 204 95);
80
+ --cz-color-warning-400: rgb(225 175 62); /* derived */
81
+ --cz-color-warning-500: rgb(195 147 18);
82
+ --cz-color-warning-600: rgb(153 114 7); /* derived */
83
+ --cz-color-warning-700: rgb(113 82 0);
84
+ --cz-color-warning-800: rgb(92 68 14); /* derived */
85
+ --cz-color-warning-900: rgb(72 55 20); /* derived */
86
+ --cz-color-warning-950: rgb(53 42 21); /* derived */
85
87
 
86
- /* Warning colors */
87
- --cz-color-warning-25: rgb(255 252 245);
88
- --cz-color-warning-50: rgb(255 250 235);
89
- --cz-color-warning-100: rgb(254 240 199);
90
- --cz-color-warning-200: rgb(254 223 137);
91
- --cz-color-warning-300: rgb(254 200 75);
92
- --cz-color-warning-400: rgb(253 176 34);
93
- --cz-color-warning-500: rgb(247 144 9);
94
- --cz-color-warning-600: rgb(220 104 3);
95
- --cz-color-warning-700: rgb(181 71 8);
96
- --cz-color-warning-800: rgb(147 55 13);
97
- --cz-color-warning-900: rgb(122 46 14);
98
- --cz-color-warning-950: rgb(78 29 9);
99
-
100
- /* Success colors */
101
- --cz-color-success-25: rgb(246 254 249);
102
- --cz-color-success-50: rgb(236 253 243);
103
- --cz-color-success-100: rgb(220 250 230);
104
- --cz-color-success-200: rgb(171 239 198);
105
- --cz-color-success-300: rgb(117 224 167);
106
- --cz-color-success-400: rgb(71 205 137);
107
- --cz-color-success-500: rgb(23 178 106);
108
- --cz-color-success-600: rgb(7 148 85);
109
- --cz-color-success-700: rgb(6 118 71);
110
- --cz-color-success-800: rgb(8 93 58);
111
- --cz-color-success-900: rgb(7 77 49);
112
- --cz-color-success-950: rgb(5 51 33);
88
+ /* Success colors. Core: 50, 300, 500, 700 */
89
+ --cz-color-success-25: rgb(245 252 248); /* derived */
90
+ --cz-color-success-50: rgb(235 248 242);
91
+ --cz-color-success-100: rgb(217 240 229); /* derived */
92
+ --cz-color-success-200: rgb(181 223 203); /* derived */
93
+ --cz-color-success-300: rgb(143 206 178);
94
+ --cz-color-success-400: rgb(105 178 147); /* derived */
95
+ --cz-color-success-500: rgb(64 151 118);
96
+ --cz-color-success-600: rgb(40 131 99); /* derived */
97
+ --cz-color-success-700: rgb(5 111 80);
98
+ --cz-color-success-800: rgb(18 91 67); /* derived */
99
+ --cz-color-success-900: rgb(22 71 55); /* derived */
100
+ --cz-color-success-950: rgb(22 53 43); /* derived */
113
101
 
114
102
  /* Info colors - Sky */
115
103
  --cz-color-info-25: var(--cz-color-sky-25);
@@ -126,7 +114,7 @@
126
114
  --cz-color-info-950: var(--cz-color-sky-950);
127
115
 
128
116
  /* Slate colors (blue-gray neutral) */
129
- --cz-color-slate-25: rgb(248 250 252);
117
+ --cz-color-slate-25: rgb(252 253 254);
130
118
  --cz-color-slate-50: rgb(248 250 252);
131
119
  --cz-color-slate-100: rgb(241 245 249);
132
120
  --cz-color-slate-200: rgb(226 232 240);
@@ -251,19 +239,19 @@
251
239
  --cz-color-cyan-900: rgb(22 78 99);
252
240
  --cz-color-cyan-950: rgb(8 51 68);
253
241
 
254
- /* Sky colors */
255
- --cz-color-sky-25: rgb(240 249 255);
256
- --cz-color-sky-50: rgb(240 249 255);
257
- --cz-color-sky-100: rgb(224 242 254);
258
- --cz-color-sky-200: rgb(186 230 253);
259
- --cz-color-sky-300: rgb(125 211 252);
260
- --cz-color-sky-400: rgb(56 189 248);
261
- --cz-color-sky-500: rgb(14 165 233);
262
- --cz-color-sky-600: rgb(2 132 199);
263
- --cz-color-sky-700: rgb(3 105 161);
264
- --cz-color-sky-800: rgb(7 89 133);
265
- --cz-color-sky-900: rgb(12 74 110);
266
- --cz-color-sky-950: rgb(8 47 73);
242
+ /* Sky colors — the info hue. Core: 50, 300, 500, 700 */
243
+ --cz-color-sky-25: rgb(245 251 255); /* derived */
244
+ --cz-color-sky-50: rgb(235 246 255);
245
+ --cz-color-sky-100: rgb(213 237 255); /* derived */
246
+ --cz-color-sky-200: rgb(169 218 255); /* derived */
247
+ --cz-color-sky-300: rgb(121 198 255);
248
+ --cz-color-sky-400: rgb(92 169 224); /* derived */
249
+ --cz-color-sky-500: rgb(62 140 194);
250
+ --cz-color-sky-600: rgb(41 118 169); /* derived */
251
+ --cz-color-sky-700: rgb(18 96 144);
252
+ --cz-color-sky-800: rgb(23 79 117); /* derived */
253
+ --cz-color-sky-900: rgb(24 63 92); /* derived */
254
+ --cz-color-sky-950: rgb(23 47 67); /* derived */
267
255
 
268
256
  /* Blue colors */
269
257
  --cz-color-blue-25: rgb(239 246 255);
package/src/semantic.css CHANGED
@@ -51,7 +51,7 @@
51
51
  );
52
52
  --cz-color-text-error: light-dark(
53
53
  var(--cz-color-error-700),
54
- var(--cz-color-error-400)
54
+ var(--cz-color-error-300)
55
55
  );
56
56
  --cz-color-text-error-hover: light-dark(
57
57
  var(--cz-color-error-800),
@@ -59,11 +59,11 @@
59
59
  );
60
60
  --cz-color-text-warning: light-dark(
61
61
  var(--cz-color-warning-700),
62
- var(--cz-color-warning-400)
62
+ var(--cz-color-warning-300)
63
63
  );
64
64
  --cz-color-text-success: light-dark(
65
65
  var(--cz-color-success-700),
66
- var(--cz-color-success-400)
66
+ var(--cz-color-success-300)
67
67
  );
68
68
  --cz-color-text-processing: light-dark(
69
69
  var(--cz-color-indigo-700),
@@ -77,6 +77,16 @@
77
77
  var(--cz-color-brand-700),
78
78
  var(--cz-color-brand-300)
79
79
  );
80
+ /* Pinned to slate, not brand: links must stay distinct from body text
81
+ * even when the brand ramp is neutral. */
82
+ --cz-color-text-link: light-dark(
83
+ var(--cz-color-slate-600),
84
+ var(--cz-color-slate-400)
85
+ );
86
+ --cz-color-text-link-hover: light-dark(
87
+ var(--cz-color-slate-700),
88
+ var(--cz-color-slate-300)
89
+ );
80
90
  --cz-color-text-on-brand: light-dark(
81
91
  var(--cz-color-white),
82
92
  var(--cz-color-gray-50)
@@ -87,7 +97,7 @@
87
97
  );
88
98
  --cz-color-text-info: light-dark(
89
99
  var(--cz-color-info-700),
90
- var(--cz-color-info-400)
100
+ var(--cz-color-info-300)
91
101
  );
92
102
  --cz-color-text-info-hover: light-dark(
93
103
  var(--cz-color-info-800),
@@ -168,18 +178,42 @@
168
178
  var(--cz-color-brand-100),
169
179
  var(--cz-color-brand-600)
170
180
  );
181
+ /* Graphite rather than the usual 600: a mid gray is too weak to read as
182
+ * the primary action in light mode, and sinks into the page in dark. */
171
183
  --cz-color-bg-brand-solid: light-dark(
172
- var(--cz-color-brand-600),
184
+ var(--cz-color-brand-800),
173
185
  var(--cz-color-brand-600)
174
186
  );
187
+ /* 500 would fail AA with text-on-brand in dark mode. */
175
188
  --cz-color-bg-brand-solid-hover: light-dark(
176
189
  var(--cz-color-brand-700),
177
- var(--cz-color-brand-500)
190
+ var(--cz-color-brand-700)
178
191
  );
179
192
  --cz-color-bg-brand-section: light-dark(
180
193
  var(--cz-color-brand-800),
181
194
  var(--cz-color-gray-900)
182
195
  );
196
+ /* Primary action fill (primary buttons). Pinned to gray, not brand: the
197
+ * brand hue marks selection and accents, so a filled lavender button would
198
+ * compete with selected rows and tabs. Dark mode stays on the gray scale too,
199
+ * lighter than the surfaces so the button still reads as the primary action. */
200
+ --cz-color-bg-action-solid: light-dark(
201
+ var(--cz-color-gray-700),
202
+ var(--cz-color-gray-600)
203
+ );
204
+ --cz-color-bg-action-solid-hover: light-dark(
205
+ var(--cz-color-gray-600),
206
+ var(--cz-color-gray-500)
207
+ );
208
+ --cz-color-text-on-action: light-dark(
209
+ var(--cz-color-white),
210
+ var(--cz-color-white)
211
+ );
212
+ /* Marker highlight for search hits and OCR field focus. Not a status. */
213
+ --cz-color-bg-highlight: light-dark(
214
+ var(--cz-color-yellow-200),
215
+ var(--cz-color-yellow-900)
216
+ );
183
217
  --cz-color-bg-error: light-dark(
184
218
  var(--cz-color-error-50),
185
219
  var(--cz-color-error-950)
@@ -414,4 +448,39 @@
414
448
  var(--cz-color-info-500),
415
449
  var(--cz-color-info-400)
416
450
  );
451
+
452
+ /* Categorical data colours, used in this order (charts, OCR fields, groups).
453
+ * Not statuses: use the status tokens when a colour means ok/warning/error. */
454
+ --cz-color-chart-1: light-dark(
455
+ var(--cz-color-brand-400),
456
+ var(--cz-color-brand-400)
457
+ );
458
+ --cz-color-chart-2: light-dark(
459
+ var(--cz-color-orange-400),
460
+ var(--cz-color-orange-400)
461
+ );
462
+ --cz-color-chart-3: light-dark(
463
+ var(--cz-color-info-300),
464
+ var(--cz-color-info-300)
465
+ );
466
+ --cz-color-chart-4: light-dark(
467
+ var(--cz-color-success-700),
468
+ var(--cz-color-success-500)
469
+ );
470
+ --cz-color-chart-5: light-dark(
471
+ var(--cz-color-warning-300),
472
+ var(--cz-color-warning-300)
473
+ );
474
+ --cz-color-chart-6: light-dark(
475
+ var(--cz-color-error-500),
476
+ var(--cz-color-error-500)
477
+ );
478
+ --cz-color-chart-7: light-dark(
479
+ var(--cz-color-brand-600),
480
+ var(--cz-color-brand-200)
481
+ );
482
+ --cz-color-chart-8: light-dark(
483
+ var(--cz-color-gray-400),
484
+ var(--cz-color-gray-600)
485
+ );
417
486
  }
package/src/shadows.css CHANGED
@@ -57,6 +57,29 @@
57
57
  --cz-shadow-pressed-3d-solid: 0px 2px 3px 0px
58
58
  var(--cz-color-pressed-shade-strong) inset;
59
59
 
60
+ /*
61
+ * Primary (action) buttons: an outline, a light top edge and a soft drop,
62
+ * so the graphite fill reads as raised instead of flat. Pair with
63
+ * --cz-action-sheen as the background-image.
64
+ */
65
+ --cz-color-action-ring: light-dark(
66
+ rgba(10, 13, 18, 0.45),
67
+ rgba(255, 255, 255, 0.12)
68
+ );
69
+ --cz-color-action-drop: light-dark(
70
+ rgba(10, 13, 18, 0.12),
71
+ rgba(0, 0, 0, 0.45)
72
+ );
73
+ --cz-shadow-action:
74
+ inset 0 0 0 1px var(--cz-color-action-ring),
75
+ inset 0 1px 0 rgba(255, 255, 255, 0.16),
76
+ 0 1px 2px var(--cz-color-action-drop),
77
+ 0 2px 5px -1px var(--cz-color-action-drop);
78
+ --cz-action-sheen: linear-gradient(
79
+ rgba(255, 255, 255, 0.12),
80
+ rgba(255, 255, 255, 0)
81
+ );
82
+
60
83
  /*
61
84
  * Border color for the ::before highlight; light in light mode, off in
62
85
  * dark mode where it would double up the ring.
@@ -66,10 +89,12 @@
66
89
  /*
67
90
  * Focus ring shadows. Inset so overflow can't clip them (#29); the inner
68
91
  * surface band keeps the ring visible on solid fills of the same hue.
92
+ * Pinned to slate, not brand, so focus stays distinct from neutral
93
+ * borders even while the brand ramp is neutral gray.
69
94
  */
70
95
  --cz-color-focus-ring: light-dark(
71
- var(--cz-color-brand-500),
72
- var(--cz-color-brand-400)
96
+ var(--cz-color-slate-500),
97
+ var(--cz-color-slate-400)
73
98
  );
74
99
  --cz-color-focus-ring-error: light-dark(
75
100
  var(--cz-color-error-500),
package/src/typography.css CHANGED
@@ -8,11 +8,12 @@
8
8
  --cz-font-body:
9
9
  var(--font-geist, 'Geist Variable'), 'Geist', -apple-system, 'Segoe UI',
10
10
  Roboto, Arial, sans-serif;
11
- --cz-font-display:
12
- 'DM Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
11
+ /* One family for display and UI; headings get their character from weight and tracking. */
12
+ --cz-font-display: var(--cz-font-body);
13
+ /* Machine data only: IDs, amounts in columns, keyboard shortcuts. */
13
14
  --cz-font-mono:
14
- ui-monospace, 'Roboto Mono', SFMono-Regular, Menlo, Monaco, Consolas,
15
- 'Liberation Mono', 'Courier New', monospace;
15
+ var(--font-jetbrains-mono, 'JetBrains Mono Variable'), 'JetBrains Mono',
16
+ ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
16
17
 
17
18
  /* Text sizes */
18
19
  --cz-text-xs: 0.75rem;