@neovici/cosmoz-tokens 4.11.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 (6) hide show
  1. package/README.md +12 -8
  2. package/package.json +1 -1
  3. package/src/button-glass.css +89 -5
  4. package/src/fallback.css +2 -2
  5. package/src/primitives.css +28 -28
  6. package/src/semantic.css +8 -9
package/README.md CHANGED
@@ -228,14 +228,18 @@ do not cover arbitrary surfaces or content.
228
228
 
229
229
  ## Glass buttons
230
230
 
231
- The button recipes preserve the existing token names. Use `--cz-glass-sheen`
232
- with `--cz-color-bg-glass` for secondary buttons, and `--cz-glass-action-sheen`
233
- with `--cz-color-bg-glass-action` for primary buttons. Primary buttons use a
234
- pale fill with dark labels in light mode and a deeper smoked fill with light
235
- labels in dark mode. Pair them with `--cz-color-text-on-glass-action`.
236
- Destructive fills use white text. Each fill has a matching `-hover` token.
237
-
238
- Secondary buttons use `--cz-color-border-glass` and `--cz-shadow-glass`.
231
+ The button recipes keep neutral glass separate from panel and popover material.
232
+ Secondary buttons use `--cz-glass-button-sheen`, `--cz-color-bg-glass-button`,
233
+ `--cz-color-border-glass-button` and `--cz-shadow-glass-button`. Light mode has
234
+ a translucent white fill, a fine grey edge and a soft outer shadow. Dark mode
235
+ keeps the smoked fill and inset highlight.
236
+
237
+ Primary buttons use `--cz-glass-button-action-sheen` and
238
+ `--cz-shadow-glass-button-action` with
239
+ `--cz-color-bg-glass-action` and `--cz-color-text-on-glass-action`.
240
+ Destructive buttons retain `--cz-glass-action-sheen` with their saturated
241
+ fills and white text. The destructive highlight stays low-opacity for contrast.
242
+ Each fill has a matching `-hover` token.
239
243
 
240
244
  Held buttons use `--cz-color-bg-glass-pressed`,
241
245
  `--cz-color-bg-glass-action-pressed`, or
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neovici/cosmoz-tokens",
3
- "version": "4.11.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/button-glass.css CHANGED
@@ -1,11 +1,50 @@
1
1
  /** Button recipes built on glass.css. Keep interaction and action semantics here. */
2
2
  :root {
3
+ /* Button surfaces stay separate from the glass used by panels and popovers. */
4
+ --cz-color-bg-glass-button: light-dark(
5
+ var(--cz-color-white),
6
+ var(--cz-color-gray-800)
7
+ );
8
+ --cz-color-border-glass-button: light-dark(
9
+ color-mix(in oklab, var(--cz-color-gray-500) 34%, transparent),
10
+ color-mix(in oklab, var(--cz-color-gray-300) 12%, transparent)
11
+ );
12
+ --cz-glass-button-sheen: linear-gradient(
13
+ 180deg in oklab,
14
+ light-dark(
15
+ color-mix(in oklab, var(--cz-color-white) 88%, transparent),
16
+ color-mix(in oklab, var(--cz-color-white) 3%, transparent)
17
+ ),
18
+ light-dark(
19
+ color-mix(in oklab, var(--cz-color-white) 20%, transparent),
20
+ transparent
21
+ )
22
+ 46%,
23
+ var(--cz-color-glass-shade)
24
+ );
25
+ --cz-shadow-glass-button:
26
+ inset 0 1px 0
27
+ light-dark(
28
+ color-mix(in oklab, var(--cz-color-white) 88%, transparent),
29
+ color-mix(in oklab, var(--cz-color-white) 3%, transparent)
30
+ ),
31
+ 0 1px 2px
32
+ light-dark(
33
+ color-mix(in oklab, var(--cz-color-gray-950) 4%, transparent),
34
+ transparent
35
+ ),
36
+ 0 3px 8px
37
+ light-dark(
38
+ color-mix(in oklab, var(--cz-color-gray-950) 2%, transparent),
39
+ transparent
40
+ );
41
+
3
42
  --cz-color-bg-glass-hover: light-dark(
4
43
  var(--cz-color-gray-200),
5
44
  var(--cz-color-gray-700)
6
45
  );
7
46
  --cz-color-bg-glass-action: light-dark(
8
- var(--cz-color-gray-100),
47
+ var(--cz-color-white),
9
48
  var(--cz-color-gray-800)
10
49
  );
11
50
  --cz-color-bg-glass-pressed: light-dark(
@@ -33,17 +72,44 @@
33
72
  var(--cz-color-error-800)
34
73
  );
35
74
  --cz-color-bg-glass-destructive-pressed: var(--cz-color-error-900);
75
+ --cz-color-glass-button-action-highlight: light-dark(
76
+ color-mix(in oklab, var(--cz-color-white) 88%, transparent),
77
+ color-mix(in oklab, var(--cz-color-white) 2%, transparent)
78
+ );
36
79
  --cz-color-glass-action-highlight: light-dark(
37
80
  color-mix(in oklab, var(--cz-color-white) 3%, transparent),
38
81
  color-mix(in oklab, var(--cz-color-white) 2%, transparent)
39
82
  );
40
- --cz-color-border-glass-action: var(--cz-color-border-glass);
83
+ --cz-color-border-glass-action: var(--cz-color-border-glass-button);
84
+
85
+ --cz-glass-button-action-sheen: linear-gradient(
86
+ 180deg in oklab,
87
+ var(--cz-color-glass-button-action-highlight),
88
+ light-dark(
89
+ color-mix(in oklab, var(--cz-color-white) 20%, transparent),
90
+ color-mix(in oklab, var(--cz-color-white) 1%, transparent)
91
+ )
92
+ 46%,
93
+ var(--cz-color-glass-shade)
94
+ );
41
95
  --cz-glass-action-sheen: linear-gradient(
42
96
  180deg in oklab,
43
97
  var(--cz-color-glass-action-highlight),
44
98
  color-mix(in oklab, var(--cz-color-white) 1%, transparent) 46%,
45
99
  var(--cz-color-glass-shade)
46
100
  );
101
+ --cz-shadow-glass-button-action:
102
+ inset 0 1px 0 var(--cz-color-glass-button-action-highlight),
103
+ 0 1px 2px
104
+ light-dark(
105
+ color-mix(in oklab, var(--cz-color-gray-950) 4%, transparent),
106
+ transparent
107
+ ),
108
+ 0 3px 8px
109
+ light-dark(
110
+ color-mix(in oklab, var(--cz-color-gray-950) 2%, transparent),
111
+ transparent
112
+ );
47
113
  --cz-shadow-glass-action: inset 0 1px 0 var(--cz-color-glass-action-highlight);
48
114
  --cz-shadow-glass-pressed: inset 0 1px 2px
49
115
  light-dark(
@@ -55,8 +121,12 @@
55
121
 
56
122
  @supports (backdrop-filter: blur(16px)) {
57
123
  :root {
124
+ --cz-color-bg-glass-button: light-dark(
125
+ color-mix(in oklab, var(--cz-color-white) 68%, transparent),
126
+ color-mix(in oklab, var(--cz-color-gray-700) 24%, transparent)
127
+ );
58
128
  --cz-color-bg-glass-hover: light-dark(
59
- color-mix(in oklab, var(--cz-color-gray-200) 82%, transparent),
129
+ color-mix(in oklab, var(--cz-color-gray-200) 64%, transparent),
60
130
  color-mix(in oklab, var(--cz-color-gray-600) 30%, transparent)
61
131
  );
62
132
  --cz-color-bg-glass-pressed: light-dark(
@@ -68,11 +138,11 @@
68
138
  color-mix(in oklab, var(--cz-color-gray-600) 94%, transparent)
69
139
  );
70
140
  --cz-color-bg-glass-action: light-dark(
71
- color-mix(in oklab, var(--cz-color-gray-100) 92%, transparent),
141
+ color-mix(in oklab, var(--cz-color-white) 74%, transparent),
72
142
  color-mix(in oklab, var(--cz-color-gray-800) 90%, transparent)
73
143
  );
74
144
  --cz-color-bg-glass-action-hover: light-dark(
75
- color-mix(in oklab, var(--cz-color-gray-200) 94%, transparent),
145
+ color-mix(in oklab, var(--cz-color-gray-200) 74%, transparent),
76
146
  color-mix(in oklab, var(--cz-color-gray-700) 92%, transparent)
77
147
  );
78
148
  }
@@ -80,6 +150,12 @@
80
150
 
81
151
  @media (prefers-reduced-transparency: reduce) {
82
152
  :root {
153
+ --cz-color-bg-glass-button: light-dark(
154
+ var(--cz-color-white),
155
+ var(--cz-color-gray-800)
156
+ );
157
+ --cz-glass-button-sheen: none;
158
+ --cz-shadow-glass-button: var(--cz-shadow-glass);
83
159
  --cz-color-bg-glass-pressed: light-dark(
84
160
  var(--cz-color-gray-300),
85
161
  var(--cz-color-gray-600)
@@ -101,11 +177,17 @@
101
177
  var(--cz-color-gray-700)
102
178
  );
103
179
  --cz-glass-action-sheen: none;
180
+ --cz-glass-button-action-sheen: none;
181
+ --cz-shadow-glass-button-action: var(--cz-shadow-glass-action);
104
182
  }
105
183
  }
106
184
 
107
185
  @media (forced-colors: active) {
108
186
  :root {
187
+ --cz-color-bg-glass-button: ButtonFace;
188
+ --cz-color-border-glass-button: ButtonText;
189
+ --cz-glass-button-sheen: none;
190
+ --cz-shadow-glass-button: none;
109
191
  --cz-color-bg-glass-pressed: ButtonFace;
110
192
  --cz-color-bg-glass-action-pressed: ButtonFace;
111
193
  --cz-color-bg-glass-destructive-pressed: ButtonFace;
@@ -116,6 +198,8 @@
116
198
  --cz-color-bg-glass-action-hover: ButtonFace;
117
199
  --cz-color-glass-action-highlight: transparent;
118
200
  --cz-glass-action-sheen: none;
201
+ --cz-glass-button-action-sheen: none;
202
+ --cz-shadow-glass-button-action: none;
119
203
  --cz-shadow-glass-action: none;
120
204
  --cz-shadow-glass-pressed: none;
121
205
  }
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),