@neovici/cosmoz-tokens 4.12.0 → 4.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/fallback.css +2 -2
  3. package/src/primitives.css +28 -28
  4. package/src/semantic.css +8 -9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neovici/cosmoz-tokens",
3
- "version": "4.12.0",
3
+ "version": "4.13.0",
4
4
  "description": "Design tokens for Cosmoz web components based on Untitled UI",
5
5
  "keywords": [
6
6
  "design-tokens",
package/src/fallback.css CHANGED
@@ -55,10 +55,10 @@
55
55
  --cz-color-bg-error-solid-hover: var(--cz-color-error-700);
56
56
  --cz-color-bg-warning: var(--cz-color-warning-50);
57
57
  --cz-color-bg-warning-secondary: var(--cz-color-warning-100);
58
- --cz-color-bg-warning-solid: var(--cz-color-warning-600);
58
+ --cz-color-bg-warning-solid: var(--cz-color-warning-700);
59
59
  --cz-color-bg-success: var(--cz-color-success-50);
60
60
  --cz-color-bg-success-secondary: var(--cz-color-success-100);
61
- --cz-color-bg-success-solid: var(--cz-color-success-600);
61
+ --cz-color-bg-success-solid: var(--cz-color-success-700);
62
62
  --cz-color-bg-processing: var(--cz-color-indigo-50);
63
63
  --cz-color-bg-processing-secondary: var(--cz-color-indigo-100);
64
64
  --cz-color-bg-processing-solid: var(--cz-color-indigo-600);
package/src/primitives.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Cosmoz Design Tokens - Primitives
3
- * Base color palette. Violet is the brand hue; rose, amber, emerald and sky
3
+ * Base color palette. Muted lavender is the brand hue; rose, amber, emerald and sky
4
4
  * carry status signals. Gray provides neutral surfaces and text.
5
5
  * The remaining scales are kept for existing consumers.
6
6
  */
@@ -15,21 +15,21 @@
15
15
  --cz-color-alpha-white: rgb(255 255 255);
16
16
  --cz-color-alpha-black: rgb(0 0 0);
17
17
 
18
- /* Brand colors - Violet. The theme switch: re-point these to re-brand. */
19
- --cz-color-brand-25: var(--cz-color-violet-25);
20
- --cz-color-brand-50: var(--cz-color-violet-50);
21
- --cz-color-brand-100: var(--cz-color-violet-100);
22
- --cz-color-brand-200: var(--cz-color-violet-200);
23
- --cz-color-brand-300: var(--cz-color-violet-300);
24
- --cz-color-brand-400: var(--cz-color-violet-400);
25
- --cz-color-brand-500: var(--cz-color-violet-500);
26
- --cz-color-brand-600: var(--cz-color-violet-600);
27
- --cz-color-brand-700: var(--cz-color-violet-700);
28
- --cz-color-brand-800: var(--cz-color-violet-800);
29
- --cz-color-brand-900: var(--cz-color-violet-900);
30
- --cz-color-brand-950: var(--cz-color-violet-950);
18
+ /* Brand colors - Muted 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);
31
31
 
32
- /* Lavender colors — retained for consumers of the original palette. */
32
+ /* Lavender colors - the muted brand palette. */
33
33
  --cz-color-lavender-25: rgb(250 248 255); /* derived */
34
34
  --cz-color-lavender-50: rgb(245 242 255);
35
35
  --cz-color-lavender-100: rgb(236 230 255); /* derived */
@@ -71,19 +71,19 @@
71
71
  --cz-color-error-900: rgb(136 19 55);
72
72
  --cz-color-error-950: rgb(76 5 25);
73
73
 
74
- /* Warning colors — saturated signals, pale surfaces and deep dark-mode surfaces. */
75
- --cz-color-warning-25: rgb(255 253 245);
76
- --cz-color-warning-50: rgb(255 251 235);
77
- --cz-color-warning-100: rgb(254 243 199);
78
- --cz-color-warning-200: rgb(253 230 138);
79
- --cz-color-warning-300: rgb(252 211 77);
80
- --cz-color-warning-400: rgb(251 191 36);
81
- --cz-color-warning-500: rgb(245 158 11);
82
- --cz-color-warning-600: rgb(217 119 6);
83
- --cz-color-warning-700: rgb(180 83 9);
84
- --cz-color-warning-800: rgb(146 64 14);
85
- --cz-color-warning-900: rgb(120 53 15);
86
- --cz-color-warning-950: rgb(69 26 3);
74
+ /* Warning colors - shared amber palette; semantics select contrast-safe steps. */
75
+ --cz-color-warning-25: var(--cz-color-amber-25);
76
+ --cz-color-warning-50: var(--cz-color-amber-50);
77
+ --cz-color-warning-100: var(--cz-color-amber-100);
78
+ --cz-color-warning-200: var(--cz-color-amber-200);
79
+ --cz-color-warning-300: var(--cz-color-amber-300);
80
+ --cz-color-warning-400: var(--cz-color-amber-400);
81
+ --cz-color-warning-500: var(--cz-color-amber-500);
82
+ --cz-color-warning-600: var(--cz-color-amber-600);
83
+ --cz-color-warning-700: var(--cz-color-amber-700);
84
+ --cz-color-warning-800: var(--cz-color-amber-800);
85
+ --cz-color-warning-900: var(--cz-color-amber-900);
86
+ --cz-color-warning-950: var(--cz-color-amber-950);
87
87
 
88
88
  /* Success colors — saturated signals, pale surfaces and deep dark-mode surfaces. */
89
89
  --cz-color-success-25: rgb(245 255 249);
package/src/semantic.css CHANGED
@@ -162,12 +162,11 @@
162
162
  var(--cz-color-gray-950),
163
163
  var(--cz-color-gray-800)
164
164
  );
165
- /* Exception to the rule above: mid-tone in dark, so it stands out *from* the
166
- * page rather than sitting behind text. This is the selection/highlight/hover
167
- * surface. For a brand chip or callout that carries text, use -subtle. */
165
+ /* Selection surfaces stay subdued in both schemes. Foreground and border
166
+ * tokens provide the stronger brand accent. */
168
167
  --cz-color-bg-brand: light-dark(
169
168
  var(--cz-color-brand-50),
170
- var(--cz-color-brand-500)
169
+ var(--cz-color-brand-900)
171
170
  );
172
171
  /* What bg-<status> is for the other statuses: the surface text sits on. */
173
172
  --cz-color-bg-brand-subtle: light-dark(
@@ -176,7 +175,7 @@
176
175
  );
177
176
  --cz-color-bg-brand-secondary: light-dark(
178
177
  var(--cz-color-brand-100),
179
- var(--cz-color-brand-600)
178
+ var(--cz-color-brand-800)
180
179
  );
181
180
  /* Graphite rather than the usual 600: a mid gray is too weak to read as
182
181
  * the primary action in light mode, and sinks into the page in dark. */
@@ -239,8 +238,8 @@
239
238
  var(--cz-color-warning-600)
240
239
  );
241
240
  --cz-color-bg-warning-solid: light-dark(
242
- var(--cz-color-warning-600),
243
- var(--cz-color-warning-600)
241
+ var(--cz-color-warning-700),
242
+ var(--cz-color-warning-700)
244
243
  );
245
244
  --cz-color-bg-success: light-dark(
246
245
  var(--cz-color-success-50),
@@ -251,8 +250,8 @@
251
250
  var(--cz-color-success-600)
252
251
  );
253
252
  --cz-color-bg-success-solid: light-dark(
254
- var(--cz-color-success-600),
255
- var(--cz-color-success-600)
253
+ var(--cz-color-success-700),
254
+ var(--cz-color-success-700)
256
255
  );
257
256
  --cz-color-bg-processing: light-dark(
258
257
  var(--cz-color-indigo-50),