@neovici/cosmoz-tokens 4.4.0 → 4.5.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/package.json +1 -1
- package/src/fallback.css +1 -0
- package/src/semantic.css +22 -3
package/package.json
CHANGED
package/src/fallback.css
CHANGED
|
@@ -38,6 +38,7 @@
|
|
|
38
38
|
--cz-color-bg-disabled-subtle: var(--cz-color-gray-50);
|
|
39
39
|
--cz-color-bg-overlay: var(--cz-color-gray-950);
|
|
40
40
|
--cz-color-bg-brand: var(--cz-color-brand-50);
|
|
41
|
+
--cz-color-bg-brand-subtle: var(--cz-color-brand-50);
|
|
41
42
|
--cz-color-bg-brand-secondary: var(--cz-color-brand-100);
|
|
42
43
|
--cz-color-bg-brand-solid: var(--cz-color-brand-600);
|
|
43
44
|
--cz-color-bg-brand-solid-hover: var(--cz-color-brand-700);
|
package/src/semantic.css
CHANGED
|
@@ -11,7 +11,8 @@
|
|
|
11
11
|
* the @supports block in fallback.css.
|
|
12
12
|
*/
|
|
13
13
|
:root {
|
|
14
|
-
/* Text colors
|
|
14
|
+
/* Text colors. <status> is meant to sit on the matching
|
|
15
|
+
* --cz-color-bg-<status>; on a solid fill use --cz-color-text-on-<status>. */
|
|
15
16
|
--cz-color-text-primary: light-dark(
|
|
16
17
|
var(--cz-color-gray-900),
|
|
17
18
|
var(--cz-color-gray-50)
|
|
@@ -101,7 +102,12 @@
|
|
|
101
102
|
--cz-color-alpha-white: light-dark(rgb(255 255 255), rgb(12 14 18));
|
|
102
103
|
--cz-color-alpha-black: light-dark(rgb(0 0 0), rgb(255 255 255));
|
|
103
104
|
|
|
104
|
-
/* Background colors
|
|
105
|
+
/* Background colors.
|
|
106
|
+
* <status> tinted surface; text of the matching --cz-color-text-<status>
|
|
107
|
+
* sits on it (that pairing is contrast-checked)
|
|
108
|
+
* <status>-secondary the same surface one step stronger, for hover or nesting
|
|
109
|
+
* <status>-solid filled; pair with --cz-color-text-on-<status> or -white
|
|
110
|
+
*/
|
|
105
111
|
--cz-color-bg-primary: light-dark(
|
|
106
112
|
var(--cz-color-white),
|
|
107
113
|
var(--cz-color-gray-950)
|
|
@@ -146,10 +152,18 @@
|
|
|
146
152
|
var(--cz-color-gray-950),
|
|
147
153
|
var(--cz-color-gray-800)
|
|
148
154
|
);
|
|
155
|
+
/* Exception to the rule above: mid-tone in dark, so it stands out *from* the
|
|
156
|
+
* page rather than sitting behind text. This is the selection/highlight/hover
|
|
157
|
+
* surface. For a brand chip or callout that carries text, use -subtle. */
|
|
149
158
|
--cz-color-bg-brand: light-dark(
|
|
150
159
|
var(--cz-color-brand-50),
|
|
151
160
|
var(--cz-color-brand-500)
|
|
152
161
|
);
|
|
162
|
+
/* What bg-<status> is for the other statuses: the surface text sits on. */
|
|
163
|
+
--cz-color-bg-brand-subtle: light-dark(
|
|
164
|
+
var(--cz-color-brand-50),
|
|
165
|
+
var(--cz-color-brand-950)
|
|
166
|
+
);
|
|
153
167
|
--cz-color-bg-brand-secondary: light-dark(
|
|
154
168
|
var(--cz-color-brand-100),
|
|
155
169
|
var(--cz-color-brand-600)
|
|
@@ -235,7 +249,12 @@
|
|
|
235
249
|
var(--cz-color-info-500)
|
|
236
250
|
);
|
|
237
251
|
|
|
238
|
-
/* Border colors
|
|
252
|
+
/* Border colors.
|
|
253
|
+
* <status> the border is itself the signal -- an outlined input in an
|
|
254
|
+
* error state, a focus ring on an otherwise neutral control
|
|
255
|
+
* <status>-subtle a hairline around a surface that already carries the status;
|
|
256
|
+
* the partner of --cz-color-bg-<status>
|
|
257
|
+
*/
|
|
239
258
|
--cz-color-border-primary: light-dark(
|
|
240
259
|
var(--cz-color-gray-300),
|
|
241
260
|
var(--cz-color-gray-700)
|