@neovici/cosmoz-tokens 4.14.0 → 4.14.2
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/package.json +1 -1
- package/src/button-glass.css +19 -13
- package/src/semantic.css +2 -2
package/package.json
CHANGED
package/src/button-glass.css
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
:root {
|
|
3
3
|
/* Button surfaces stay separate from the glass used by panels and popovers. */
|
|
4
4
|
--cz-color-bg-glass-button: light-dark(
|
|
5
|
-
var(--cz-color-
|
|
5
|
+
var(--cz-color-gray-50),
|
|
6
6
|
var(--cz-color-gray-800)
|
|
7
7
|
);
|
|
8
8
|
--cz-color-border-glass-button: light-dark(
|
|
9
|
-
color-mix(in oklab, var(--cz-color-gray-500)
|
|
9
|
+
color-mix(in oklab, var(--cz-color-gray-500) 46%, transparent),
|
|
10
10
|
color-mix(in oklab, var(--cz-color-gray-300) 12%, transparent)
|
|
11
11
|
);
|
|
12
12
|
--cz-glass-button-sheen: linear-gradient(
|
|
@@ -20,7 +20,10 @@
|
|
|
20
20
|
transparent
|
|
21
21
|
)
|
|
22
22
|
46%,
|
|
23
|
-
|
|
23
|
+
light-dark(
|
|
24
|
+
color-mix(in oklab, var(--cz-color-gray-950) 4%, transparent),
|
|
25
|
+
var(--cz-color-glass-shade)
|
|
26
|
+
)
|
|
24
27
|
);
|
|
25
28
|
--cz-shadow-glass-button:
|
|
26
29
|
inset 0 1px 0
|
|
@@ -30,12 +33,12 @@
|
|
|
30
33
|
),
|
|
31
34
|
0 1px 2px
|
|
32
35
|
light-dark(
|
|
33
|
-
color-mix(in oklab, var(--cz-color-gray-950)
|
|
36
|
+
color-mix(in oklab, var(--cz-color-gray-950) 7%, transparent),
|
|
34
37
|
transparent
|
|
35
38
|
),
|
|
36
39
|
0 3px 8px
|
|
37
40
|
light-dark(
|
|
38
|
-
color-mix(in oklab, var(--cz-color-gray-950)
|
|
41
|
+
color-mix(in oklab, var(--cz-color-gray-950) 3%, transparent),
|
|
39
42
|
transparent
|
|
40
43
|
);
|
|
41
44
|
|
|
@@ -44,7 +47,7 @@
|
|
|
44
47
|
var(--cz-color-gray-700)
|
|
45
48
|
);
|
|
46
49
|
--cz-color-bg-glass-action: light-dark(
|
|
47
|
-
var(--cz-color-
|
|
50
|
+
var(--cz-color-gray-50),
|
|
48
51
|
var(--cz-color-gray-800)
|
|
49
52
|
);
|
|
50
53
|
--cz-color-bg-glass-pressed: light-dark(
|
|
@@ -90,7 +93,10 @@
|
|
|
90
93
|
color-mix(in oklab, var(--cz-color-white) 1%, transparent)
|
|
91
94
|
)
|
|
92
95
|
46%,
|
|
93
|
-
|
|
96
|
+
light-dark(
|
|
97
|
+
color-mix(in oklab, var(--cz-color-gray-950) 4%, transparent),
|
|
98
|
+
var(--cz-color-glass-shade)
|
|
99
|
+
)
|
|
94
100
|
);
|
|
95
101
|
--cz-glass-action-sheen: linear-gradient(
|
|
96
102
|
180deg in oklab,
|
|
@@ -102,12 +108,12 @@
|
|
|
102
108
|
inset 0 1px 0 var(--cz-color-glass-button-action-highlight),
|
|
103
109
|
0 1px 2px
|
|
104
110
|
light-dark(
|
|
105
|
-
color-mix(in oklab, var(--cz-color-gray-950)
|
|
111
|
+
color-mix(in oklab, var(--cz-color-gray-950) 7%, transparent),
|
|
106
112
|
transparent
|
|
107
113
|
),
|
|
108
114
|
0 3px 8px
|
|
109
115
|
light-dark(
|
|
110
|
-
color-mix(in oklab, var(--cz-color-gray-950)
|
|
116
|
+
color-mix(in oklab, var(--cz-color-gray-950) 3%, transparent),
|
|
111
117
|
transparent
|
|
112
118
|
);
|
|
113
119
|
--cz-shadow-glass-action: inset 0 1px 0 var(--cz-color-glass-action-highlight);
|
|
@@ -122,11 +128,11 @@
|
|
|
122
128
|
@supports (backdrop-filter: blur(16px)) {
|
|
123
129
|
:root {
|
|
124
130
|
--cz-color-bg-glass-button: light-dark(
|
|
125
|
-
color-mix(in oklab, var(--cz-color-
|
|
131
|
+
color-mix(in oklab, var(--cz-color-gray-50) 84%, transparent),
|
|
126
132
|
color-mix(in oklab, var(--cz-color-gray-700) 24%, transparent)
|
|
127
133
|
);
|
|
128
134
|
--cz-color-bg-glass-hover: light-dark(
|
|
129
|
-
color-mix(in oklab, var(--cz-color-gray-200)
|
|
135
|
+
color-mix(in oklab, var(--cz-color-gray-200) 80%, transparent),
|
|
130
136
|
color-mix(in oklab, var(--cz-color-gray-600) 30%, transparent)
|
|
131
137
|
);
|
|
132
138
|
--cz-color-bg-glass-pressed: light-dark(
|
|
@@ -138,11 +144,11 @@
|
|
|
138
144
|
color-mix(in oklab, var(--cz-color-gray-600) 94%, transparent)
|
|
139
145
|
);
|
|
140
146
|
--cz-color-bg-glass-action: light-dark(
|
|
141
|
-
color-mix(in oklab, var(--cz-color-
|
|
147
|
+
color-mix(in oklab, var(--cz-color-gray-50) 88%, transparent),
|
|
142
148
|
color-mix(in oklab, var(--cz-color-gray-800) 90%, transparent)
|
|
143
149
|
);
|
|
144
150
|
--cz-color-bg-glass-action-hover: light-dark(
|
|
145
|
-
color-mix(in oklab, var(--cz-color-gray-200)
|
|
151
|
+
color-mix(in oklab, var(--cz-color-gray-200) 86%, transparent),
|
|
146
152
|
color-mix(in oklab, var(--cz-color-gray-700) 92%, transparent)
|
|
147
153
|
);
|
|
148
154
|
}
|
package/src/semantic.css
CHANGED
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
var(--cz-color-gray-950)
|
|
124
124
|
);
|
|
125
125
|
--cz-color-bg-primary-hover: light-dark(
|
|
126
|
-
var(--cz-color-gray-
|
|
126
|
+
var(--cz-color-gray-100),
|
|
127
127
|
var(--cz-color-gray-800)
|
|
128
128
|
);
|
|
129
129
|
--cz-color-bg-primary-solid: light-dark(
|
|
@@ -135,7 +135,7 @@
|
|
|
135
135
|
var(--cz-color-gray-900)
|
|
136
136
|
);
|
|
137
137
|
--cz-color-bg-secondary-hover: light-dark(
|
|
138
|
-
var(--cz-color-gray-
|
|
138
|
+
var(--cz-color-gray-200),
|
|
139
139
|
var(--cz-color-gray-800)
|
|
140
140
|
);
|
|
141
141
|
--cz-color-bg-secondary-subtle: light-dark(
|