@neovici/cosmoz-tokens 4.11.0 → 4.12.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 +12 -8
- package/package.json +1 -1
- package/src/button-glass.css +89 -5
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
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
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
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-
|
|
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)
|
|
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-
|
|
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)
|
|
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
|
}
|