@neovici/cosmoz-tokens 4.3.0 → 4.5.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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/fallback.css +2 -0
  3. package/src/semantic.css +31 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neovici/cosmoz-tokens",
3
- "version": "4.3.0",
3
+ "version": "4.5.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
@@ -38,6 +38,7 @@
38
38
  --cz-color-bg-disabled-subtle: var(--cz-color-gray-50);
39
39
  --cz-color-bg-overlay: var(--cz-color-gray-950);
40
40
  --cz-color-bg-brand: var(--cz-color-brand-50);
41
+ --cz-color-bg-brand-subtle: var(--cz-color-brand-50);
41
42
  --cz-color-bg-brand-secondary: var(--cz-color-brand-100);
42
43
  --cz-color-bg-brand-solid: var(--cz-color-brand-600);
43
44
  --cz-color-bg-brand-solid-hover: var(--cz-color-brand-700);
@@ -67,6 +68,7 @@
67
68
  --cz-color-border-error: var(--cz-color-error-500);
68
69
  --cz-color-border-error-subtle: var(--cz-color-error-300);
69
70
  --cz-color-border-brand: var(--cz-color-brand-500);
71
+ --cz-color-border-brand-subtle: var(--cz-color-brand-300);
70
72
  --cz-color-border-brand-alt: var(--cz-color-brand-600);
71
73
  --cz-color-border-info: var(--cz-color-info-500);
72
74
  --cz-color-border-info-subtle: var(--cz-color-info-300);
package/src/semantic.css CHANGED
@@ -11,7 +11,8 @@
11
11
  * the @supports block in fallback.css.
12
12
  */
13
13
  :root {
14
- /* Text colors */
14
+ /* Text colors. <status> is meant to sit on the matching
15
+ * --cz-color-bg-<status>; on a solid fill use --cz-color-text-on-<status>. */
15
16
  --cz-color-text-primary: light-dark(
16
17
  var(--cz-color-gray-900),
17
18
  var(--cz-color-gray-50)
@@ -101,7 +102,12 @@
101
102
  --cz-color-alpha-white: light-dark(rgb(255 255 255), rgb(12 14 18));
102
103
  --cz-color-alpha-black: light-dark(rgb(0 0 0), rgb(255 255 255));
103
104
 
104
- /* Background colors */
105
+ /* Background colors.
106
+ * <status> tinted surface; text of the matching --cz-color-text-<status>
107
+ * sits on it (that pairing is contrast-checked)
108
+ * <status>-secondary the same surface one step stronger, for hover or nesting
109
+ * <status>-solid filled; pair with --cz-color-text-on-<status> or -white
110
+ */
105
111
  --cz-color-bg-primary: light-dark(
106
112
  var(--cz-color-white),
107
113
  var(--cz-color-gray-950)
@@ -146,10 +152,18 @@
146
152
  var(--cz-color-gray-950),
147
153
  var(--cz-color-gray-800)
148
154
  );
155
+ /* Exception to the rule above: mid-tone in dark, so it stands out *from* the
156
+ * page rather than sitting behind text. This is the selection/highlight/hover
157
+ * surface. For a brand chip or callout that carries text, use -subtle. */
149
158
  --cz-color-bg-brand: light-dark(
150
159
  var(--cz-color-brand-50),
151
160
  var(--cz-color-brand-500)
152
161
  );
162
+ /* What bg-<status> is for the other statuses: the surface text sits on. */
163
+ --cz-color-bg-brand-subtle: light-dark(
164
+ var(--cz-color-brand-50),
165
+ var(--cz-color-brand-950)
166
+ );
153
167
  --cz-color-bg-brand-secondary: light-dark(
154
168
  var(--cz-color-brand-100),
155
169
  var(--cz-color-brand-600)
@@ -235,7 +249,12 @@
235
249
  var(--cz-color-info-500)
236
250
  );
237
251
 
238
- /* Border colors */
252
+ /* Border colors.
253
+ * <status> the border is itself the signal -- an outlined input in an
254
+ * error state, a focus ring on an otherwise neutral control
255
+ * <status>-subtle a hairline around a surface that already carries the status;
256
+ * the partner of --cz-color-bg-<status>
257
+ */
239
258
  --cz-color-border-primary: light-dark(
240
259
  var(--cz-color-gray-300),
241
260
  var(--cz-color-gray-700)
@@ -262,12 +281,16 @@
262
281
  );
263
282
  --cz-color-border-error-subtle: light-dark(
264
283
  var(--cz-color-error-300),
265
- var(--cz-color-error-500)
284
+ var(--cz-color-error-800)
266
285
  );
267
286
  --cz-color-border-brand: light-dark(
268
287
  var(--cz-color-brand-500),
269
288
  var(--cz-color-brand-400)
270
289
  );
290
+ --cz-color-border-brand-subtle: light-dark(
291
+ var(--cz-color-brand-300),
292
+ var(--cz-color-brand-800)
293
+ );
271
294
  --cz-color-border-brand-alt: light-dark(
272
295
  var(--cz-color-brand-600),
273
296
  var(--cz-color-gray-700)
@@ -278,7 +301,7 @@
278
301
  );
279
302
  --cz-color-border-info-subtle: light-dark(
280
303
  var(--cz-color-info-300),
281
- var(--cz-color-info-500)
304
+ var(--cz-color-info-800)
282
305
  );
283
306
  --cz-color-border-warning: light-dark(
284
307
  var(--cz-color-warning-500),
@@ -286,7 +309,7 @@
286
309
  );
287
310
  --cz-color-border-warning-subtle: light-dark(
288
311
  var(--cz-color-warning-300),
289
- var(--cz-color-warning-500)
312
+ var(--cz-color-warning-800)
290
313
  );
291
314
  --cz-color-border-success: light-dark(
292
315
  var(--cz-color-success-500),
@@ -294,7 +317,7 @@
294
317
  );
295
318
  --cz-color-border-success-subtle: light-dark(
296
319
  var(--cz-color-success-300),
297
- var(--cz-color-success-500)
320
+ var(--cz-color-success-800)
298
321
  );
299
322
  --cz-color-border-processing: light-dark(
300
323
  var(--cz-color-indigo-500),
@@ -302,7 +325,7 @@
302
325
  );
303
326
  --cz-color-border-processing-subtle: light-dark(
304
327
  var(--cz-color-indigo-300),
305
- var(--cz-color-indigo-500)
328
+ var(--cz-color-indigo-800)
306
329
  );
307
330
 
308
331
  /* Foreground colors (icons, decorative elements) */