@neovici/cosmoz-tokens 4.10.0 → 4.11.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 +7 -7
  3. package/src/primitives.css +68 -68
  4. package/src/semantic.css +12 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neovici/cosmoz-tokens",
3
- "version": "4.10.0",
3
+ "version": "4.11.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
@@ -127,13 +127,13 @@
127
127
  inset 0 0 0 1px rgba(10, 13, 18, 0.45),
128
128
  inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(10, 13, 18, 0.12),
129
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);
130
+ --cz-color-chart-1: var(--cz-color-brand-500);
131
+ --cz-color-chart-2: var(--cz-color-orange-600);
132
+ --cz-color-chart-3: var(--cz-color-info-600);
133
+ --cz-color-chart-4: var(--cz-color-success-600);
134
+ --cz-color-chart-5: var(--cz-color-warning-600);
135
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);
136
+ --cz-color-chart-7: var(--cz-color-brand-800);
137
+ --cz-color-chart-8: var(--cz-color-gray-500);
138
138
  }
139
139
  }
package/src/primitives.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Cosmoz Design Tokens - Primitives
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).
3
+ * Base color palette. Violet is the brand hue; rose, amber, emerald and sky
4
+ * carry status signals. Gray provides neutral surfaces and text.
5
5
  * The remaining scales are kept for existing consumers.
6
6
  */
7
7
 
@@ -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 - 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);
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);
31
31
 
32
- /* Lavender colors — the brand hue. Core: 50, 200, 400, 600 */
32
+ /* Lavender colors — retained for consumers of the original 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 */
@@ -57,47 +57,47 @@
57
57
  --cz-color-gray-900: rgb(20 21 26);
58
58
  --cz-color-gray-950: rgb(10 11 14);
59
59
 
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 */
60
+ /* Error colors — saturated signals, pale surfaces and deep dark-mode surfaces. */
61
+ --cz-color-error-25: rgb(255 247 248);
62
+ --cz-color-error-50: rgb(255 241 242);
63
+ --cz-color-error-100: rgb(255 228 230);
64
+ --cz-color-error-200: rgb(254 205 211);
65
+ --cz-color-error-300: rgb(253 164 175);
66
+ --cz-color-error-400: rgb(251 113 133);
67
+ --cz-color-error-500: rgb(244 63 94);
68
+ --cz-color-error-600: rgb(225 29 72);
69
+ --cz-color-error-700: rgb(209 23 60);
70
+ --cz-color-error-800: rgb(166 16 54);
71
+ --cz-color-error-900: rgb(136 19 55);
72
+ --cz-color-error-950: rgb(76 5 25);
73
73
 
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 */
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);
87
87
 
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 */
88
+ /* Success colors — saturated signals, pale surfaces and deep dark-mode surfaces. */
89
+ --cz-color-success-25: rgb(245 255 249);
90
+ --cz-color-success-50: rgb(236 253 245);
91
+ --cz-color-success-100: rgb(209 250 229);
92
+ --cz-color-success-200: rgb(167 243 208);
93
+ --cz-color-success-300: rgb(110 231 183);
94
+ --cz-color-success-400: rgb(52 211 153);
95
+ --cz-color-success-500: rgb(16 185 129);
96
+ --cz-color-success-600: rgb(5 150 105);
97
+ --cz-color-success-700: rgb(4 120 87);
98
+ --cz-color-success-800: rgb(6 95 70);
99
+ --cz-color-success-900: rgb(6 78 59);
100
+ --cz-color-success-950: rgb(2 44 34);
101
101
 
102
102
  /* Info colors - Sky */
103
103
  --cz-color-info-25: var(--cz-color-sky-25);
@@ -239,19 +239,19 @@
239
239
  --cz-color-cyan-900: rgb(22 78 99);
240
240
  --cz-color-cyan-950: rgb(8 51 68);
241
241
 
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 */
242
+ /* Sky colors — saturated signals, pale surfaces and deep dark-mode surfaces. */
243
+ --cz-color-sky-25: rgb(245 252 255);
244
+ --cz-color-sky-50: rgb(240 249 255);
245
+ --cz-color-sky-100: rgb(224 242 254);
246
+ --cz-color-sky-200: rgb(186 230 253);
247
+ --cz-color-sky-300: rgb(125 211 252);
248
+ --cz-color-sky-400: rgb(56 189 248);
249
+ --cz-color-sky-500: rgb(14 165 233);
250
+ --cz-color-sky-600: rgb(2 132 199);
251
+ --cz-color-sky-700: rgb(3 105 161);
252
+ --cz-color-sky-800: rgb(7 89 133);
253
+ --cz-color-sky-900: rgb(12 74 110);
254
+ --cz-color-sky-950: rgb(8 47 73);
255
255
 
256
256
  /* Blue colors */
257
257
  --cz-color-blue-25: rgb(239 246 255);
package/src/semantic.css CHANGED
@@ -452,35 +452,35 @@
452
452
  /* Categorical data colours, used in this order (charts, OCR fields, groups).
453
453
  * Not statuses: use the status tokens when a colour means ok/warning/error. */
454
454
  --cz-color-chart-1: light-dark(
455
- var(--cz-color-brand-400),
455
+ var(--cz-color-brand-500),
456
456
  var(--cz-color-brand-400)
457
457
  );
458
458
  --cz-color-chart-2: light-dark(
459
- var(--cz-color-orange-400),
459
+ var(--cz-color-orange-600),
460
460
  var(--cz-color-orange-400)
461
461
  );
462
462
  --cz-color-chart-3: light-dark(
463
- var(--cz-color-info-300),
464
- var(--cz-color-info-300)
463
+ var(--cz-color-info-600),
464
+ var(--cz-color-info-400)
465
465
  );
466
466
  --cz-color-chart-4: light-dark(
467
- var(--cz-color-success-700),
468
- var(--cz-color-success-500)
467
+ var(--cz-color-success-600),
468
+ var(--cz-color-success-400)
469
469
  );
470
470
  --cz-color-chart-5: light-dark(
471
- var(--cz-color-warning-300),
472
- var(--cz-color-warning-300)
471
+ var(--cz-color-warning-600),
472
+ var(--cz-color-warning-400)
473
473
  );
474
474
  --cz-color-chart-6: light-dark(
475
475
  var(--cz-color-error-500),
476
- var(--cz-color-error-500)
476
+ var(--cz-color-error-400)
477
477
  );
478
478
  --cz-color-chart-7: light-dark(
479
- var(--cz-color-brand-600),
479
+ var(--cz-color-brand-800),
480
480
  var(--cz-color-brand-200)
481
481
  );
482
482
  --cz-color-chart-8: light-dark(
483
- var(--cz-color-gray-400),
484
- var(--cz-color-gray-600)
483
+ var(--cz-color-gray-500),
484
+ var(--cz-color-gray-500)
485
485
  );
486
486
  }