@neovici/cosmoz-tokens 4.4.0 → 4.6.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.
Files changed (5) hide show
  1. package/README.md +9 -9
  2. package/package.json +1 -1
  3. package/src/fallback.css +1 -0
  4. package/src/primitives.css +27 -13
  5. package/src/semantic.css +22 -3
package/README.md CHANGED
@@ -110,15 +110,15 @@ document.documentElement.dataset.theme = 'dark';
110
110
 
111
111
  ### Colors (Primitives)
112
112
 
113
- | Token | Description |
114
- | ----------------------------- | -------------------------------- |
115
- | `--cz-color-brand-{25-950}` | Brand color scale (indigo-based) |
116
- | `--cz-color-gray-{25-950}` | Gray scale |
117
- | `--cz-color-error-{25-950}` | Error/danger colors |
118
- | `--cz-color-warning-{25-950}` | Warning colors |
119
- | `--cz-color-success-{25-950}` | Success colors |
120
- | `--cz-color-white` | Pure white |
121
- | `--cz-color-black` | Pure black |
113
+ | Token | Description |
114
+ | ----------------------------- | ------------------------- |
115
+ | `--cz-color-brand-{25-950}` | Brand color scale (slate) |
116
+ | `--cz-color-gray-{25-950}` | Gray scale |
117
+ | `--cz-color-error-{25-950}` | Error/danger colors |
118
+ | `--cz-color-warning-{25-950}` | Warning colors |
119
+ | `--cz-color-success-{25-950}` | Success colors |
120
+ | `--cz-color-white` | Pure white |
121
+ | `--cz-color-black` | Pure black |
122
122
 
123
123
  ### Typography
124
124
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neovici/cosmoz-tokens",
3
- "version": "4.4.0",
3
+ "version": "4.6.0",
4
4
  "description": "Design tokens for Cosmoz web components based on Untitled UI",
5
5
  "keywords": [
6
6
  "design-tokens",
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/primitives.css CHANGED
@@ -27,19 +27,33 @@
27
27
  --cz-danube-900: rgb(43 59 89);
28
28
  --cz-danube-950: rgb(31 42 62);
29
29
 
30
- /* Brand colors - Danube */
31
- --cz-color-brand-25: var(--cz-danube-25);
32
- --cz-color-brand-50: var(--cz-danube-50);
33
- --cz-color-brand-100: var(--cz-danube-100);
34
- --cz-color-brand-200: var(--cz-danube-200);
35
- --cz-color-brand-300: var(--cz-danube-300);
36
- --cz-color-brand-400: var(--cz-danube-400);
37
- --cz-color-brand-500: var(--cz-danube-500);
38
- --cz-color-brand-600: var(--cz-danube-600);
39
- --cz-color-brand-700: var(--cz-danube-700);
40
- --cz-color-brand-800: var(--cz-danube-800);
41
- --cz-color-brand-900: var(--cz-danube-900);
42
- --cz-color-brand-950: var(--cz-danube-950);
30
+ /* Slate colors */
31
+ --cz-slate-25: rgb(252 253 254);
32
+ --cz-slate-50: rgb(248 250 252);
33
+ --cz-slate-100: rgb(241 245 249);
34
+ --cz-slate-200: rgb(226 232 240);
35
+ --cz-slate-300: rgb(203 213 225);
36
+ --cz-slate-400: rgb(148 163 184);
37
+ --cz-slate-500: rgb(100 116 139);
38
+ --cz-slate-600: rgb(71 85 105);
39
+ --cz-slate-700: rgb(51 65 85);
40
+ --cz-slate-800: rgb(30 41 59);
41
+ --cz-slate-900: rgb(15 23 42);
42
+ --cz-slate-950: rgb(2 6 23);
43
+
44
+ /* Brand colors - Slate */
45
+ --cz-color-brand-25: var(--cz-slate-25);
46
+ --cz-color-brand-50: var(--cz-slate-50);
47
+ --cz-color-brand-100: var(--cz-slate-100);
48
+ --cz-color-brand-200: var(--cz-slate-200);
49
+ --cz-color-brand-300: var(--cz-slate-300);
50
+ --cz-color-brand-400: var(--cz-slate-400);
51
+ --cz-color-brand-500: var(--cz-slate-500);
52
+ --cz-color-brand-600: var(--cz-slate-600);
53
+ --cz-color-brand-700: var(--cz-slate-700);
54
+ --cz-color-brand-800: var(--cz-slate-800);
55
+ --cz-color-brand-900: var(--cz-slate-900);
56
+ --cz-color-brand-950: var(--cz-slate-950);
43
57
 
44
58
  /* Gray colors */
45
59
  --cz-color-gray-25: rgb(253 253 253);
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)