@neovici/cosmoz-tokens 4.9.1 → 4.11.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/fallback.css +7 -7
- package/src/glass.css +60 -0
- package/src/index.css +2 -0
- package/src/primitives.css +68 -68
- package/src/semantic.css +12 -12
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.11.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/fallback.css
CHANGED
|
@@ -127,13 +127,13 @@
|
|
|
127
127
|
inset 0 0 0 1px rgba(10, 13, 18, 0.45),
|
|
128
128
|
inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(10, 13, 18, 0.12),
|
|
129
129
|
0 2px 5px -1px rgba(10, 13, 18, 0.12);
|
|
130
|
-
--cz-color-chart-1: var(--cz-color-brand-
|
|
131
|
-
--cz-color-chart-2: var(--cz-color-orange-
|
|
132
|
-
--cz-color-chart-3: var(--cz-color-info-
|
|
133
|
-
--cz-color-chart-4: var(--cz-color-success-
|
|
134
|
-
--cz-color-chart-5: var(--cz-color-warning-
|
|
130
|
+
--cz-color-chart-1: var(--cz-color-brand-500);
|
|
131
|
+
--cz-color-chart-2: var(--cz-color-orange-600);
|
|
132
|
+
--cz-color-chart-3: var(--cz-color-info-600);
|
|
133
|
+
--cz-color-chart-4: var(--cz-color-success-600);
|
|
134
|
+
--cz-color-chart-5: var(--cz-color-warning-600);
|
|
135
135
|
--cz-color-chart-6: var(--cz-color-error-500);
|
|
136
|
-
--cz-color-chart-7: var(--cz-color-brand-
|
|
137
|
-
--cz-color-chart-8: var(--cz-color-gray-
|
|
136
|
+
--cz-color-chart-7: var(--cz-color-brand-800);
|
|
137
|
+
--cz-color-chart-8: var(--cz-color-gray-500);
|
|
138
138
|
}
|
|
139
139
|
}
|
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
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Cosmoz Design Tokens - Primitives
|
|
3
|
-
* Base color palette.
|
|
4
|
-
*
|
|
3
|
+
* Base color palette. Violet is the brand hue; rose, amber, emerald and sky
|
|
4
|
+
* carry status signals. Gray provides neutral surfaces and text.
|
|
5
5
|
* The remaining scales are kept for existing consumers.
|
|
6
6
|
*/
|
|
7
7
|
|
|
@@ -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 -
|
|
19
|
-
--cz-color-brand-25: var(--cz-color-
|
|
20
|
-
--cz-color-brand-50: var(--cz-color-
|
|
21
|
-
--cz-color-brand-100: var(--cz-color-
|
|
22
|
-
--cz-color-brand-200: var(--cz-color-
|
|
23
|
-
--cz-color-brand-300: var(--cz-color-
|
|
24
|
-
--cz-color-brand-400: var(--cz-color-
|
|
25
|
-
--cz-color-brand-500: var(--cz-color-
|
|
26
|
-
--cz-color-brand-600: var(--cz-color-
|
|
27
|
-
--cz-color-brand-700: var(--cz-color-
|
|
28
|
-
--cz-color-brand-800: var(--cz-color-
|
|
29
|
-
--cz-color-brand-900: var(--cz-color-
|
|
30
|
-
--cz-color-brand-950: var(--cz-color-
|
|
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);
|
|
31
31
|
|
|
32
|
-
/* Lavender colors —
|
|
32
|
+
/* Lavender colors — retained for consumers of the original 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 */
|
|
@@ -57,47 +57,47 @@
|
|
|
57
57
|
--cz-color-gray-900: rgb(20 21 26);
|
|
58
58
|
--cz-color-gray-950: rgb(10 11 14);
|
|
59
59
|
|
|
60
|
-
/* Error colors
|
|
61
|
-
--cz-color-error-25: rgb(255 248
|
|
62
|
-
--cz-color-error-50: rgb(255 241
|
|
63
|
-
--cz-color-error-100: rgb(255
|
|
64
|
-
--cz-color-error-200: rgb(
|
|
65
|
-
--cz-color-error-300: rgb(
|
|
66
|
-
--cz-color-error-400: rgb(
|
|
67
|
-
--cz-color-error-500: rgb(
|
|
68
|
-
--cz-color-error-600: rgb(
|
|
69
|
-
--cz-color-error-700: rgb(
|
|
70
|
-
--cz-color-error-800: rgb(
|
|
71
|
-
--cz-color-error-900: rgb(
|
|
72
|
-
--cz-color-error-950: rgb(
|
|
60
|
+
/* Error colors — saturated signals, pale surfaces and deep dark-mode surfaces. */
|
|
61
|
+
--cz-color-error-25: rgb(255 247 248);
|
|
62
|
+
--cz-color-error-50: rgb(255 241 242);
|
|
63
|
+
--cz-color-error-100: rgb(255 228 230);
|
|
64
|
+
--cz-color-error-200: rgb(254 205 211);
|
|
65
|
+
--cz-color-error-300: rgb(253 164 175);
|
|
66
|
+
--cz-color-error-400: rgb(251 113 133);
|
|
67
|
+
--cz-color-error-500: rgb(244 63 94);
|
|
68
|
+
--cz-color-error-600: rgb(225 29 72);
|
|
69
|
+
--cz-color-error-700: rgb(209 23 60);
|
|
70
|
+
--cz-color-error-800: rgb(166 16 54);
|
|
71
|
+
--cz-color-error-900: rgb(136 19 55);
|
|
72
|
+
--cz-color-error-950: rgb(76 5 25);
|
|
73
73
|
|
|
74
|
-
/* Warning colors
|
|
75
|
-
--cz-color-warning-25: rgb(255
|
|
76
|
-
--cz-color-warning-50: rgb(
|
|
77
|
-
--cz-color-warning-100: rgb(254
|
|
78
|
-
--cz-color-warning-200: rgb(
|
|
79
|
-
--cz-color-warning-300: rgb(
|
|
80
|
-
--cz-color-warning-400: rgb(
|
|
81
|
-
--cz-color-warning-500: rgb(
|
|
82
|
-
--cz-color-warning-600: rgb(
|
|
83
|
-
--cz-color-warning-700: rgb(
|
|
84
|
-
--cz-color-warning-800: rgb(
|
|
85
|
-
--cz-color-warning-900: rgb(
|
|
86
|
-
--cz-color-warning-950: rgb(
|
|
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);
|
|
87
87
|
|
|
88
|
-
/* Success colors
|
|
89
|
-
--cz-color-success-25: rgb(245
|
|
90
|
-
--cz-color-success-50: rgb(
|
|
91
|
-
--cz-color-success-100: rgb(
|
|
92
|
-
--cz-color-success-200: rgb(
|
|
93
|
-
--cz-color-success-300: rgb(
|
|
94
|
-
--cz-color-success-400: rgb(
|
|
95
|
-
--cz-color-success-500: rgb(
|
|
96
|
-
--cz-color-success-600: rgb(
|
|
97
|
-
--cz-color-success-700: rgb(
|
|
98
|
-
--cz-color-success-800: rgb(
|
|
99
|
-
--cz-color-success-900: rgb(
|
|
100
|
-
--cz-color-success-950: rgb(
|
|
88
|
+
/* Success colors — saturated signals, pale surfaces and deep dark-mode surfaces. */
|
|
89
|
+
--cz-color-success-25: rgb(245 255 249);
|
|
90
|
+
--cz-color-success-50: rgb(236 253 245);
|
|
91
|
+
--cz-color-success-100: rgb(209 250 229);
|
|
92
|
+
--cz-color-success-200: rgb(167 243 208);
|
|
93
|
+
--cz-color-success-300: rgb(110 231 183);
|
|
94
|
+
--cz-color-success-400: rgb(52 211 153);
|
|
95
|
+
--cz-color-success-500: rgb(16 185 129);
|
|
96
|
+
--cz-color-success-600: rgb(5 150 105);
|
|
97
|
+
--cz-color-success-700: rgb(4 120 87);
|
|
98
|
+
--cz-color-success-800: rgb(6 95 70);
|
|
99
|
+
--cz-color-success-900: rgb(6 78 59);
|
|
100
|
+
--cz-color-success-950: rgb(2 44 34);
|
|
101
101
|
|
|
102
102
|
/* Info colors - Sky */
|
|
103
103
|
--cz-color-info-25: var(--cz-color-sky-25);
|
|
@@ -239,19 +239,19 @@
|
|
|
239
239
|
--cz-color-cyan-900: rgb(22 78 99);
|
|
240
240
|
--cz-color-cyan-950: rgb(8 51 68);
|
|
241
241
|
|
|
242
|
-
/* Sky colors —
|
|
243
|
-
--cz-color-sky-25: rgb(245
|
|
244
|
-
--cz-color-sky-50: rgb(
|
|
245
|
-
--cz-color-sky-100: rgb(
|
|
246
|
-
--cz-color-sky-200: rgb(
|
|
247
|
-
--cz-color-sky-300: rgb(
|
|
248
|
-
--cz-color-sky-400: rgb(
|
|
249
|
-
--cz-color-sky-500: rgb(
|
|
250
|
-
--cz-color-sky-600: rgb(
|
|
251
|
-
--cz-color-sky-700: rgb(
|
|
252
|
-
--cz-color-sky-800: rgb(
|
|
253
|
-
--cz-color-sky-900: rgb(
|
|
254
|
-
--cz-color-sky-950: rgb(
|
|
242
|
+
/* Sky colors — saturated signals, pale surfaces and deep dark-mode surfaces. */
|
|
243
|
+
--cz-color-sky-25: rgb(245 252 255);
|
|
244
|
+
--cz-color-sky-50: rgb(240 249 255);
|
|
245
|
+
--cz-color-sky-100: rgb(224 242 254);
|
|
246
|
+
--cz-color-sky-200: rgb(186 230 253);
|
|
247
|
+
--cz-color-sky-300: rgb(125 211 252);
|
|
248
|
+
--cz-color-sky-400: rgb(56 189 248);
|
|
249
|
+
--cz-color-sky-500: rgb(14 165 233);
|
|
250
|
+
--cz-color-sky-600: rgb(2 132 199);
|
|
251
|
+
--cz-color-sky-700: rgb(3 105 161);
|
|
252
|
+
--cz-color-sky-800: rgb(7 89 133);
|
|
253
|
+
--cz-color-sky-900: rgb(12 74 110);
|
|
254
|
+
--cz-color-sky-950: rgb(8 47 73);
|
|
255
255
|
|
|
256
256
|
/* Blue colors */
|
|
257
257
|
--cz-color-blue-25: rgb(239 246 255);
|
package/src/semantic.css
CHANGED
|
@@ -452,35 +452,35 @@
|
|
|
452
452
|
/* Categorical data colours, used in this order (charts, OCR fields, groups).
|
|
453
453
|
* Not statuses: use the status tokens when a colour means ok/warning/error. */
|
|
454
454
|
--cz-color-chart-1: light-dark(
|
|
455
|
-
var(--cz-color-brand-
|
|
455
|
+
var(--cz-color-brand-500),
|
|
456
456
|
var(--cz-color-brand-400)
|
|
457
457
|
);
|
|
458
458
|
--cz-color-chart-2: light-dark(
|
|
459
|
-
var(--cz-color-orange-
|
|
459
|
+
var(--cz-color-orange-600),
|
|
460
460
|
var(--cz-color-orange-400)
|
|
461
461
|
);
|
|
462
462
|
--cz-color-chart-3: light-dark(
|
|
463
|
-
var(--cz-color-info-
|
|
464
|
-
var(--cz-color-info-
|
|
463
|
+
var(--cz-color-info-600),
|
|
464
|
+
var(--cz-color-info-400)
|
|
465
465
|
);
|
|
466
466
|
--cz-color-chart-4: light-dark(
|
|
467
|
-
var(--cz-color-success-
|
|
468
|
-
var(--cz-color-success-
|
|
467
|
+
var(--cz-color-success-600),
|
|
468
|
+
var(--cz-color-success-400)
|
|
469
469
|
);
|
|
470
470
|
--cz-color-chart-5: light-dark(
|
|
471
|
-
var(--cz-color-warning-
|
|
472
|
-
var(--cz-color-warning-
|
|
471
|
+
var(--cz-color-warning-600),
|
|
472
|
+
var(--cz-color-warning-400)
|
|
473
473
|
);
|
|
474
474
|
--cz-color-chart-6: light-dark(
|
|
475
475
|
var(--cz-color-error-500),
|
|
476
|
-
var(--cz-color-error-
|
|
476
|
+
var(--cz-color-error-400)
|
|
477
477
|
);
|
|
478
478
|
--cz-color-chart-7: light-dark(
|
|
479
|
-
var(--cz-color-brand-
|
|
479
|
+
var(--cz-color-brand-800),
|
|
480
480
|
var(--cz-color-brand-200)
|
|
481
481
|
);
|
|
482
482
|
--cz-color-chart-8: light-dark(
|
|
483
|
-
var(--cz-color-gray-
|
|
484
|
-
var(--cz-color-gray-
|
|
483
|
+
var(--cz-color-gray-500),
|
|
484
|
+
var(--cz-color-gray-500)
|
|
485
485
|
);
|
|
486
486
|
}
|