@neovici/cosmoz-tokens 4.9.0 → 4.10.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.
- package/README.md +68 -0
- package/package.json +3 -2
- package/src/button-glass.css +122 -0
- package/src/glass.css +60 -0
- package/src/index.css +2 -0
- package/src/primitives.css +7 -7
- package/src/semantic.css +4 -4
package/README.md
CHANGED
|
@@ -24,6 +24,7 @@ This imports all token files:
|
|
|
24
24
|
- Spacing (border radius, control heights)
|
|
25
25
|
- Shadows
|
|
26
26
|
- Semantic tokens (with dark mode support)
|
|
27
|
+
- Glass material and button recipes
|
|
27
28
|
|
|
28
29
|
### Import specific token files
|
|
29
30
|
|
|
@@ -183,3 +184,70 @@ npm run storybook:build
|
|
|
183
184
|
## License
|
|
184
185
|
|
|
185
186
|
Apache-2.0
|
|
187
|
+
|
|
188
|
+
## Glass material
|
|
189
|
+
|
|
190
|
+
The main stylesheet includes a shared glass material and separate button
|
|
191
|
+
recipes. Other components can reuse the material without adopting button
|
|
192
|
+
states, action colors, sizing or border radii. No element receives the effect
|
|
193
|
+
until its own styles use these tokens.
|
|
194
|
+
|
|
195
|
+
| Material token | Purpose |
|
|
196
|
+
| ---------------------------- | ----------------------------------------------------- |
|
|
197
|
+
| `--cz-color-bg-glass` | Translucent fill, opaque when transparency is reduced |
|
|
198
|
+
| `--cz-color-border-glass` | Fine surface edge |
|
|
199
|
+
| `--cz-color-glass-highlight` | Top highlight color |
|
|
200
|
+
| `--cz-color-glass-shade` | Bottom shade color |
|
|
201
|
+
| `--cz-glass-sheen` | Surface highlight gradient |
|
|
202
|
+
| `--cz-shadow-glass` | Inset top edge |
|
|
203
|
+
| `--cz-backdrop-filter-glass` | Backdrop blur and saturation |
|
|
204
|
+
|
|
205
|
+
Components choose their own text color, geometry and interaction states:
|
|
206
|
+
|
|
207
|
+
```css
|
|
208
|
+
.surface {
|
|
209
|
+
background: var(--cz-glass-sheen), var(--cz-color-bg-glass);
|
|
210
|
+
border: 1px solid var(--cz-color-border-glass);
|
|
211
|
+
box-shadow: var(--cz-shadow-glass);
|
|
212
|
+
backdrop-filter: var(--cz-backdrop-filter-glass);
|
|
213
|
+
color: var(--cz-color-text-primary);
|
|
214
|
+
border-radius: var(--cz-radius-lg);
|
|
215
|
+
}
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
To load only the material, import `@neovici/cosmoz-tokens/glass` alongside the
|
|
219
|
+
primitives. The example above also needs the semantic and spacing tokens, all
|
|
220
|
+
included by the main stylesheet. The material does not define hover, pressed,
|
|
221
|
+
destructive or disabled states. Those remain in `src/button-glass.css`.
|
|
222
|
+
|
|
223
|
+
The shared material uses `Canvas` and `CanvasText` in forced colors, with no
|
|
224
|
+
sheen, shadow or blur. Components remain responsible for readable text,
|
|
225
|
+
appropriate system colors and visible focus. Check contrast against the actual
|
|
226
|
+
backdrop when applying glass to a new component; the button contrast guarantees
|
|
227
|
+
do not cover arbitrary surfaces or content.
|
|
228
|
+
|
|
229
|
+
## Glass buttons
|
|
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`.
|
|
239
|
+
|
|
240
|
+
Held buttons use `--cz-color-bg-glass-pressed`,
|
|
241
|
+
`--cz-color-bg-glass-action-pressed`, or
|
|
242
|
+
`--cz-color-bg-glass-destructive-pressed` with `--cz-shadow-glass-pressed`.
|
|
243
|
+
Remove the sheen while pressed so the surface reads as inset.
|
|
244
|
+
|
|
245
|
+
Primary buttons use `--cz-color-border-glass-action` and
|
|
246
|
+
`--cz-shadow-glass-action`. Action fills retain AA label contrast over white
|
|
247
|
+
and black backdrops.
|
|
248
|
+
|
|
249
|
+
Apply `--cz-backdrop-filter-glass` to glass surfaces. It resolves to `none`
|
|
250
|
+
without backdrop-filter support and for reduced transparency. Reduced
|
|
251
|
+
transparency also restores opaque fills. Forced colors remove the material
|
|
252
|
+
effects; components must retain a system-colored border and visible focus
|
|
253
|
+
outline.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neovici/cosmoz-tokens",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.10.0",
|
|
4
4
|
"description": "Design tokens for Cosmoz web components based on Untitled UI",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design-tokens",
|
|
@@ -38,7 +38,8 @@
|
|
|
38
38
|
"./truncate": {
|
|
39
39
|
"types": "./src/truncate.css.d.ts",
|
|
40
40
|
"default": "./src/truncate.css.js"
|
|
41
|
-
}
|
|
41
|
+
},
|
|
42
|
+
"./glass": "./src/glass.css"
|
|
42
43
|
},
|
|
43
44
|
"files": [
|
|
44
45
|
"src/"
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
/** Button recipes built on glass.css. Keep interaction and action semantics here. */
|
|
2
|
+
:root {
|
|
3
|
+
--cz-color-bg-glass-hover: light-dark(
|
|
4
|
+
var(--cz-color-gray-200),
|
|
5
|
+
var(--cz-color-gray-700)
|
|
6
|
+
);
|
|
7
|
+
--cz-color-bg-glass-action: light-dark(
|
|
8
|
+
var(--cz-color-gray-100),
|
|
9
|
+
var(--cz-color-gray-800)
|
|
10
|
+
);
|
|
11
|
+
--cz-color-bg-glass-pressed: light-dark(
|
|
12
|
+
var(--cz-color-gray-300),
|
|
13
|
+
var(--cz-color-gray-600)
|
|
14
|
+
);
|
|
15
|
+
--cz-color-bg-glass-action-pressed: light-dark(
|
|
16
|
+
var(--cz-color-gray-300),
|
|
17
|
+
var(--cz-color-gray-600)
|
|
18
|
+
);
|
|
19
|
+
--cz-color-bg-glass-action-hover: light-dark(
|
|
20
|
+
var(--cz-color-gray-200),
|
|
21
|
+
var(--cz-color-gray-700)
|
|
22
|
+
);
|
|
23
|
+
--cz-color-text-on-glass-action: light-dark(
|
|
24
|
+
var(--cz-color-gray-800),
|
|
25
|
+
var(--cz-color-gray-50)
|
|
26
|
+
);
|
|
27
|
+
--cz-color-bg-glass-destructive: light-dark(
|
|
28
|
+
var(--cz-color-error-700),
|
|
29
|
+
var(--cz-color-error-700)
|
|
30
|
+
);
|
|
31
|
+
--cz-color-bg-glass-destructive-hover: light-dark(
|
|
32
|
+
var(--cz-color-error-800),
|
|
33
|
+
var(--cz-color-error-800)
|
|
34
|
+
);
|
|
35
|
+
--cz-color-bg-glass-destructive-pressed: var(--cz-color-error-900);
|
|
36
|
+
--cz-color-glass-action-highlight: light-dark(
|
|
37
|
+
color-mix(in oklab, var(--cz-color-white) 3%, transparent),
|
|
38
|
+
color-mix(in oklab, var(--cz-color-white) 2%, transparent)
|
|
39
|
+
);
|
|
40
|
+
--cz-color-border-glass-action: var(--cz-color-border-glass);
|
|
41
|
+
--cz-glass-action-sheen: linear-gradient(
|
|
42
|
+
180deg in oklab,
|
|
43
|
+
var(--cz-color-glass-action-highlight),
|
|
44
|
+
color-mix(in oklab, var(--cz-color-white) 1%, transparent) 46%,
|
|
45
|
+
var(--cz-color-glass-shade)
|
|
46
|
+
);
|
|
47
|
+
--cz-shadow-glass-action: inset 0 1px 0 var(--cz-color-glass-action-highlight);
|
|
48
|
+
--cz-shadow-glass-pressed: inset 0 1px 2px
|
|
49
|
+
light-dark(
|
|
50
|
+
color-mix(in oklab, var(--cz-color-gray-950) 8%, transparent),
|
|
51
|
+
color-mix(in oklab, var(--cz-color-black) 20%, transparent)
|
|
52
|
+
);
|
|
53
|
+
--cz-opacity-disabled: 0.45;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
@supports (backdrop-filter: blur(16px)) {
|
|
57
|
+
:root {
|
|
58
|
+
--cz-color-bg-glass-hover: light-dark(
|
|
59
|
+
color-mix(in oklab, var(--cz-color-gray-200) 82%, transparent),
|
|
60
|
+
color-mix(in oklab, var(--cz-color-gray-600) 30%, transparent)
|
|
61
|
+
);
|
|
62
|
+
--cz-color-bg-glass-pressed: light-dark(
|
|
63
|
+
color-mix(in oklab, var(--cz-color-gray-300) 90%, transparent),
|
|
64
|
+
color-mix(in oklab, var(--cz-color-gray-500) 38%, transparent)
|
|
65
|
+
);
|
|
66
|
+
--cz-color-bg-glass-action-pressed: light-dark(
|
|
67
|
+
color-mix(in oklab, var(--cz-color-gray-300) 96%, transparent),
|
|
68
|
+
color-mix(in oklab, var(--cz-color-gray-600) 94%, transparent)
|
|
69
|
+
);
|
|
70
|
+
--cz-color-bg-glass-action: light-dark(
|
|
71
|
+
color-mix(in oklab, var(--cz-color-gray-100) 92%, transparent),
|
|
72
|
+
color-mix(in oklab, var(--cz-color-gray-800) 90%, transparent)
|
|
73
|
+
);
|
|
74
|
+
--cz-color-bg-glass-action-hover: light-dark(
|
|
75
|
+
color-mix(in oklab, var(--cz-color-gray-200) 94%, transparent),
|
|
76
|
+
color-mix(in oklab, var(--cz-color-gray-700) 92%, transparent)
|
|
77
|
+
);
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
@media (prefers-reduced-transparency: reduce) {
|
|
82
|
+
:root {
|
|
83
|
+
--cz-color-bg-glass-pressed: light-dark(
|
|
84
|
+
var(--cz-color-gray-300),
|
|
85
|
+
var(--cz-color-gray-600)
|
|
86
|
+
);
|
|
87
|
+
--cz-color-bg-glass-action-pressed: light-dark(
|
|
88
|
+
var(--cz-color-gray-300),
|
|
89
|
+
var(--cz-color-gray-600)
|
|
90
|
+
);
|
|
91
|
+
--cz-color-bg-glass-hover: light-dark(
|
|
92
|
+
var(--cz-color-gray-200),
|
|
93
|
+
var(--cz-color-gray-700)
|
|
94
|
+
);
|
|
95
|
+
--cz-color-bg-glass-action: light-dark(
|
|
96
|
+
var(--cz-color-gray-100),
|
|
97
|
+
var(--cz-color-gray-800)
|
|
98
|
+
);
|
|
99
|
+
--cz-color-bg-glass-action-hover: light-dark(
|
|
100
|
+
var(--cz-color-gray-200),
|
|
101
|
+
var(--cz-color-gray-700)
|
|
102
|
+
);
|
|
103
|
+
--cz-glass-action-sheen: none;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
@media (forced-colors: active) {
|
|
108
|
+
:root {
|
|
109
|
+
--cz-color-bg-glass-pressed: ButtonFace;
|
|
110
|
+
--cz-color-bg-glass-action-pressed: ButtonFace;
|
|
111
|
+
--cz-color-bg-glass-destructive-pressed: ButtonFace;
|
|
112
|
+
--cz-color-bg-glass-hover: ButtonFace;
|
|
113
|
+
--cz-color-border-glass-action: ButtonText;
|
|
114
|
+
--cz-color-text-on-glass-action: ButtonText;
|
|
115
|
+
--cz-color-bg-glass-action: ButtonFace;
|
|
116
|
+
--cz-color-bg-glass-action-hover: ButtonFace;
|
|
117
|
+
--cz-color-glass-action-highlight: transparent;
|
|
118
|
+
--cz-glass-action-sheen: none;
|
|
119
|
+
--cz-shadow-glass-action: none;
|
|
120
|
+
--cz-shadow-glass-pressed: none;
|
|
121
|
+
}
|
|
122
|
+
}
|
package/src/glass.css
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
/** Shared glass material. Components choose geometry, content colors and interactions. */
|
|
2
|
+
:root {
|
|
3
|
+
--cz-color-bg-glass: light-dark(
|
|
4
|
+
var(--cz-color-gray-100),
|
|
5
|
+
var(--cz-color-gray-800)
|
|
6
|
+
);
|
|
7
|
+
--cz-color-border-glass: light-dark(
|
|
8
|
+
color-mix(in oklab, var(--cz-color-gray-500) 28%, transparent),
|
|
9
|
+
color-mix(in oklab, var(--cz-color-gray-300) 12%, transparent)
|
|
10
|
+
);
|
|
11
|
+
--cz-color-glass-highlight: light-dark(
|
|
12
|
+
color-mix(in oklab, var(--cz-color-white) 14%, transparent),
|
|
13
|
+
color-mix(in oklab, var(--cz-color-white) 3%, transparent)
|
|
14
|
+
);
|
|
15
|
+
--cz-color-glass-shade: light-dark(
|
|
16
|
+
color-mix(in oklab, var(--cz-color-gray-950) 1%, transparent),
|
|
17
|
+
color-mix(in oklab, var(--cz-color-black) 2%, transparent)
|
|
18
|
+
);
|
|
19
|
+
--cz-glass-sheen: linear-gradient(
|
|
20
|
+
180deg in oklab,
|
|
21
|
+
var(--cz-color-glass-highlight),
|
|
22
|
+
transparent 46%,
|
|
23
|
+
var(--cz-color-glass-shade)
|
|
24
|
+
);
|
|
25
|
+
--cz-shadow-glass: inset 0 1px 0 var(--cz-color-glass-highlight);
|
|
26
|
+
--cz-backdrop-filter-glass: none;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@supports (backdrop-filter: blur(16px)) {
|
|
30
|
+
:root {
|
|
31
|
+
--cz-color-bg-glass: light-dark(
|
|
32
|
+
color-mix(in oklab, var(--cz-color-gray-100) 78%, transparent),
|
|
33
|
+
color-mix(in oklab, var(--cz-color-gray-700) 24%, transparent)
|
|
34
|
+
);
|
|
35
|
+
--cz-backdrop-filter-glass: blur(12px) saturate(1.1);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
@media (prefers-reduced-transparency: reduce) {
|
|
40
|
+
:root {
|
|
41
|
+
--cz-color-bg-glass: light-dark(
|
|
42
|
+
var(--cz-color-gray-100),
|
|
43
|
+
var(--cz-color-gray-800)
|
|
44
|
+
);
|
|
45
|
+
--cz-glass-sheen: none;
|
|
46
|
+
--cz-backdrop-filter-glass: none;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
@media (forced-colors: active) {
|
|
51
|
+
:root {
|
|
52
|
+
--cz-color-bg-glass: Canvas;
|
|
53
|
+
--cz-color-border-glass: CanvasText;
|
|
54
|
+
--cz-color-glass-highlight: transparent;
|
|
55
|
+
--cz-color-glass-shade: transparent;
|
|
56
|
+
--cz-glass-sheen: none;
|
|
57
|
+
--cz-shadow-glass: none;
|
|
58
|
+
--cz-backdrop-filter-glass: none;
|
|
59
|
+
}
|
|
60
|
+
}
|
package/src/index.css
CHANGED
package/src/primitives.css
CHANGED
|
@@ -43,19 +43,19 @@
|
|
|
43
43
|
--cz-color-lavender-900: rgb(54 46 80); /* derived */
|
|
44
44
|
--cz-color-lavender-950: rgb(36 32 52); /* derived */
|
|
45
45
|
|
|
46
|
-
/* Gray colors — graphite, tinted toward lavender. Core: all but 25, 100, 800 */
|
|
46
|
+
/* Gray colors — graphite, tinted toward lavender; 500–950 lean cool. Core: all but 25, 100, 800 */
|
|
47
47
|
--cz-color-gray-25: rgb(251 250 251); /* derived */
|
|
48
48
|
--cz-color-gray-50: rgb(247 246 248);
|
|
49
49
|
--cz-color-gray-100: rgb(240 239 242); /* derived */
|
|
50
50
|
--cz-color-gray-200: rgb(227 226 231);
|
|
51
51
|
--cz-color-gray-300: rgb(209 208 215);
|
|
52
52
|
--cz-color-gray-400: rgb(161 160 168);
|
|
53
|
-
--cz-color-gray-500: rgb(116
|
|
54
|
-
--cz-color-gray-600: rgb(88
|
|
55
|
-
--cz-color-gray-700: rgb(
|
|
56
|
-
--cz-color-gray-800: rgb(
|
|
57
|
-
--cz-color-gray-900: rgb(
|
|
58
|
-
--cz-color-gray-950: rgb(
|
|
53
|
+
--cz-color-gray-500: rgb(113 116 126);
|
|
54
|
+
--cz-color-gray-600: rgb(85 88 97);
|
|
55
|
+
--cz-color-gray-700: rgb(60 62 71);
|
|
56
|
+
--cz-color-gray-800: rgb(38 40 47); /* derived */
|
|
57
|
+
--cz-color-gray-900: rgb(20 21 26);
|
|
58
|
+
--cz-color-gray-950: rgb(10 11 14);
|
|
59
59
|
|
|
60
60
|
/* Error colors. Core: 50, 300, 500, 700 */
|
|
61
61
|
--cz-color-error-25: rgb(255 248 247); /* derived */
|
package/src/semantic.css
CHANGED
|
@@ -120,7 +120,7 @@
|
|
|
120
120
|
*/
|
|
121
121
|
--cz-color-bg-primary: light-dark(
|
|
122
122
|
var(--cz-color-white),
|
|
123
|
-
var(--cz-color-gray-
|
|
123
|
+
var(--cz-color-gray-950)
|
|
124
124
|
);
|
|
125
125
|
--cz-color-bg-primary-hover: light-dark(
|
|
126
126
|
var(--cz-color-gray-50),
|
|
@@ -132,15 +132,15 @@
|
|
|
132
132
|
);
|
|
133
133
|
--cz-color-bg-secondary: light-dark(
|
|
134
134
|
var(--cz-color-gray-50),
|
|
135
|
-
var(--cz-color-gray-
|
|
135
|
+
var(--cz-color-gray-900)
|
|
136
136
|
);
|
|
137
137
|
--cz-color-bg-secondary-hover: light-dark(
|
|
138
138
|
var(--cz-color-gray-100),
|
|
139
|
-
var(--cz-color-gray-
|
|
139
|
+
var(--cz-color-gray-800)
|
|
140
140
|
);
|
|
141
141
|
--cz-color-bg-secondary-subtle: light-dark(
|
|
142
142
|
var(--cz-color-gray-25),
|
|
143
|
-
var(--cz-color-gray-
|
|
143
|
+
var(--cz-color-gray-900)
|
|
144
144
|
);
|
|
145
145
|
--cz-color-bg-tertiary: light-dark(
|
|
146
146
|
var(--cz-color-gray-100),
|