@neovici/cosmoz-tokens 4.0.0 → 4.2.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 (6) hide show
  1. package/README.md +1 -1
  2. package/package.json +1 -1
  3. package/src/fallback.css +8 -0
  4. package/src/semantic.css +24 -0
  5. package/src/shadows.css +20 -11
  6. package/src/typography.css +2 -2
package/README.md CHANGED
@@ -124,7 +124,7 @@ document.documentElement.dataset.theme = 'dark';
124
124
 
125
125
  | Token | Description |
126
126
  | --------------------------------- | ------------------------------- |
127
- | `--cz-font-body` | Body font (Inter) |
127
+ | `--cz-font-body` | Body font (Geist) |
128
128
  | `--cz-font-display` | Display font (DM Sans) |
129
129
  | `--cz-font-mono` | Monospace font |
130
130
  | `--cz-text-{xs-xl}` | Text sizes with line heights |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neovici/cosmoz-tokens",
3
- "version": "4.0.0",
3
+ "version": "4.2.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
@@ -18,6 +18,7 @@
18
18
  --cz-color-text-error-hover: var(--cz-color-error-800);
19
19
  --cz-color-text-warning: var(--cz-color-warning-700);
20
20
  --cz-color-text-success: var(--cz-color-success-700);
21
+ --cz-color-text-processing: var(--cz-color-indigo-700);
21
22
  --cz-color-text-brand: var(--cz-color-brand-600);
22
23
  --cz-color-text-brand-hover: var(--cz-color-brand-700);
23
24
  --cz-color-text-on-brand: var(--cz-color-white);
@@ -51,6 +52,9 @@
51
52
  --cz-color-bg-success: var(--cz-color-success-50);
52
53
  --cz-color-bg-success-secondary: var(--cz-color-success-100);
53
54
  --cz-color-bg-success-solid: var(--cz-color-success-600);
55
+ --cz-color-bg-processing: var(--cz-color-indigo-50);
56
+ --cz-color-bg-processing-secondary: var(--cz-color-indigo-100);
57
+ --cz-color-bg-processing-solid: var(--cz-color-indigo-600);
54
58
  --cz-color-bg-info: var(--cz-color-info-50);
55
59
  --cz-color-bg-info-secondary: var(--cz-color-info-100);
56
60
  --cz-color-bg-info-solid: var(--cz-color-info-600);
@@ -84,6 +88,8 @@
84
88
  --cz-color-fg-warning-secondary: var(--cz-color-warning-500);
85
89
  --cz-color-fg-success: var(--cz-color-success-600);
86
90
  --cz-color-fg-success-secondary: var(--cz-color-success-500);
91
+ --cz-color-fg-processing: var(--cz-color-indigo-600);
92
+ --cz-color-fg-processing-secondary: var(--cz-color-indigo-500);
87
93
  --cz-color-fg-info: var(--cz-color-info-600);
88
94
  --cz-color-fg-info-secondary: var(--cz-color-info-500);
89
95
  --cz-focus-ring: inset 0 0 0 2px var(--cz-color-brand-100);
@@ -95,5 +101,7 @@
95
101
  --cz-shadow-xs-skeumorphic:
96
102
  var(--cz-shadow-skeumorphic), var(--cz-shadow-xs);
97
103
  --skeumorphic-color: rgba(255, 255, 255, 0.12);
104
+ --cz-shadow-pressed-3d: 0px 2px 3px 0px rgba(10, 13, 18, 0.12) inset;
105
+ --cz-shadow-pressed-3d-solid: 0px 2px 3px 0px rgba(10, 13, 18, 0.2) inset;
98
106
  }
99
107
  }
package/src/semantic.css CHANGED
@@ -64,6 +64,10 @@
64
64
  var(--cz-color-success-700),
65
65
  var(--cz-color-success-400)
66
66
  );
67
+ --cz-color-text-processing: light-dark(
68
+ var(--cz-color-indigo-700),
69
+ var(--cz-color-indigo-400)
70
+ );
67
71
  --cz-color-text-brand: light-dark(
68
72
  var(--cz-color-brand-600),
69
73
  var(--cz-color-brand-400)
@@ -202,6 +206,18 @@
202
206
  var(--cz-color-success-600),
203
207
  var(--cz-color-success-600)
204
208
  );
209
+ --cz-color-bg-processing: light-dark(
210
+ var(--cz-color-indigo-50),
211
+ var(--cz-color-indigo-950)
212
+ );
213
+ --cz-color-bg-processing-secondary: light-dark(
214
+ var(--cz-color-indigo-100),
215
+ var(--cz-color-indigo-600)
216
+ );
217
+ --cz-color-bg-processing-solid: light-dark(
218
+ var(--cz-color-indigo-600),
219
+ var(--cz-color-indigo-600)
220
+ );
205
221
  --cz-color-bg-info: light-dark(
206
222
  var(--cz-color-info-50),
207
223
  var(--cz-color-info-950)
@@ -335,6 +351,14 @@
335
351
  var(--cz-color-success-500),
336
352
  var(--cz-color-success-400)
337
353
  );
354
+ --cz-color-fg-processing: light-dark(
355
+ var(--cz-color-indigo-600),
356
+ var(--cz-color-indigo-500)
357
+ );
358
+ --cz-color-fg-processing-secondary: light-dark(
359
+ var(--cz-color-indigo-500),
360
+ var(--cz-color-indigo-400)
361
+ );
338
362
  --cz-color-fg-info: light-dark(
339
363
  var(--cz-color-info-600),
340
364
  var(--cz-color-info-500)
package/src/shadows.css CHANGED
@@ -2,9 +2,9 @@
2
2
  * Cosmoz Design Tokens - Shadows
3
3
  * Shadow tokens from Untitled UI
4
4
  *
5
- * Non-color shadow/focus-ring values cannot use light-dark() directly
6
- * (it only accepts colors), so the theme-varying parts are split into
7
- * color tokens which are assembled into static shadow values.
5
+ * Shadow and focus-ring values can't hold light-dark() directly (it only
6
+ * accepts colors), so theme-varying parts are split into color tokens
7
+ * and assembled into the static values below.
8
8
  */
9
9
 
10
10
  :root {
@@ -30,9 +30,7 @@
30
30
  0px 32px 64px -12px rgba(10, 13, 18, 0.14),
31
31
  0px 5px 5px -2.5px rgba(10, 13, 18, 0.04);
32
32
 
33
- /* Skeumorphic shadows (for buttons) — ring and highlight colors flip
34
- with color-scheme via the light-dark() color tokens above the
35
- assembled shadow values. */
33
+ /* Skeumorphic shadows (for buttons) */
36
34
  --cz-color-skeumorphic-ring: light-dark(
37
35
  rgba(10, 13, 18, 0.18),
38
36
  rgba(255, 255, 255, 0.12)
@@ -46,15 +44,26 @@
46
44
  0px -2px 0px 0px var(--cz-color-skeumorphic-highlight) inset;
47
45
  --cz-shadow-xs-skeumorphic: var(--cz-shadow-skeumorphic), var(--cz-shadow-xs);
48
46
 
47
+ /* Pressed / selected 3D sink (for buttons) */
48
+ --cz-color-pressed-shade: light-dark(
49
+ rgba(10, 13, 18, 0.12),
50
+ rgba(0, 0, 0, 0.4)
51
+ );
52
+ --cz-color-pressed-shade-strong: light-dark(
53
+ rgba(10, 13, 18, 0.2),
54
+ rgba(0, 0, 0, 0.55)
55
+ );
56
+ --cz-shadow-pressed-3d: 0px 2px 3px 0px var(--cz-color-pressed-shade) inset;
57
+ --cz-shadow-pressed-3d-solid: 0px 2px 3px 0px
58
+ var(--cz-color-pressed-shade-strong) inset;
59
+
49
60
  /*
50
- * The light-theme skeumorphic ring is near-black, so on a dark surface it
51
- * disappears and the ::before highlight is left acting as the border. Flip
52
- * the highlight border color to light and drop it in dark mode, where it
53
- * would otherwise draw a second border just inside the ring.
61
+ * Border color for the ::before highlight; light in light mode, off in
62
+ * dark mode where it would double up the ring.
54
63
  */
55
64
  --skeumorphic-color: light-dark(rgba(255, 255, 255, 0.12), transparent);
56
65
 
57
- /* Focus ring shadows — colors are theme-varying, shapes are static */
66
+ /* Focus ring shadows */
58
67
  --cz-color-focus-ring: light-dark(
59
68
  var(--cz-color-brand-100),
60
69
  var(--cz-color-brand-800)
package/src/typography.css CHANGED
@@ -6,8 +6,8 @@
6
6
  :root {
7
7
  /* Font families */
8
8
  --cz-font-body:
9
- var(--font-inter, 'Inter'), -apple-system, 'Segoe UI', Roboto, Arial,
10
- sans-serif;
9
+ var(--font-geist, 'Geist Variable'), 'Geist', -apple-system, 'Segoe UI',
10
+ Roboto, Arial, sans-serif;
11
11
  --cz-font-display:
12
12
  'DM Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
13
13
  --cz-font-mono: