@mcp-b/design-tokens 0.49.0 → 0.50.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/color-presets.css +19 -7
- package/src/semantic-colors.css +1 -1
package/package.json
CHANGED
package/src/color-presets.css
CHANGED
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
* consumers who never set it.
|
|
8
8
|
*
|
|
9
9
|
* data-preset re-points the primary semantic pairs at the seeded primary
|
|
10
|
-
* palette
|
|
11
|
-
* preset
|
|
10
|
+
* palette with contrast headroom for hover and pressed states; each named
|
|
11
|
+
* preset supplies its seed. Focus rings, selection, and
|
|
12
12
|
* accent-color already resolve through these pairs and follow along.
|
|
13
13
|
*
|
|
14
14
|
* Deliberately not part of index.css: import
|
|
@@ -24,12 +24,14 @@
|
|
|
24
24
|
);
|
|
25
25
|
--sigvelo-color-primary-bg-muted-light: var(--sigvelo-color-primary-200);
|
|
26
26
|
--sigvelo-color-primary-bg-muted-dark: var(--sigvelo-color-primary-800);
|
|
27
|
+
/* Leave contrast headroom for hover and pressed fills, including the
|
|
28
|
+
brightest seed (yellow), which mix toward the white on-fill text. */
|
|
27
29
|
--sigvelo-color-primary-bg-light: color-mix(
|
|
28
30
|
in oklab,
|
|
29
31
|
var(--sigvelo-color-primary-600),
|
|
30
|
-
black
|
|
32
|
+
black 27%
|
|
31
33
|
);
|
|
32
|
-
--sigvelo-color-primary-bg-dark: color-mix(in oklab, var(--sigvelo-color-primary-600), black
|
|
34
|
+
--sigvelo-color-primary-bg-dark: color-mix(in oklab, var(--sigvelo-color-primary-600), black 31%);
|
|
33
35
|
--sigvelo-color-primary-bg-strong-light: var(--sigvelo-color-primary-800);
|
|
34
36
|
--sigvelo-color-primary-bg-strong-dark: var(--sigvelo-color-primary-200);
|
|
35
37
|
--sigvelo-color-primary-bg-stronger-light: var(--sigvelo-color-primary-900);
|
|
@@ -43,7 +45,7 @@
|
|
|
43
45
|
--sigvelo-color-primary-text-light: color-mix(
|
|
44
46
|
in oklab,
|
|
45
47
|
var(--sigvelo-color-primary-600),
|
|
46
|
-
black
|
|
48
|
+
black 16%
|
|
47
49
|
);
|
|
48
50
|
--sigvelo-color-primary-text-dark: var(--sigvelo-color-primary-500);
|
|
49
51
|
--sigvelo-color-primary-border-subtle-light: color-mix(
|
|
@@ -63,9 +65,20 @@
|
|
|
63
65
|
}
|
|
64
66
|
|
|
65
67
|
/* Red and rose collide with the danger seed, so both shift danger to amber. */
|
|
68
|
+
:root[data-preset="red"],
|
|
69
|
+
:root[data-preset="rose"] {
|
|
70
|
+
--sigvelo-color-danger-seed: #e89a26;
|
|
71
|
+
--sigvelo-color-danger-bg-light: color-mix(in oklab, var(--sigvelo-color-danger-600), black 27%);
|
|
72
|
+
--sigvelo-color-danger-bg-dark: color-mix(in oklab, var(--sigvelo-color-danger-600), black 31%);
|
|
73
|
+
--sigvelo-color-danger-text-light: color-mix(
|
|
74
|
+
in oklab,
|
|
75
|
+
var(--sigvelo-color-danger-600),
|
|
76
|
+
black 16%
|
|
77
|
+
);
|
|
78
|
+
}
|
|
79
|
+
|
|
66
80
|
:root[data-preset="red"] {
|
|
67
81
|
--sigvelo-color-primary-seed: #ef5655;
|
|
68
|
-
--sigvelo-color-danger-seed: #e89a26;
|
|
69
82
|
}
|
|
70
83
|
|
|
71
84
|
:root[data-preset="orange"] {
|
|
@@ -130,7 +143,6 @@
|
|
|
130
143
|
|
|
131
144
|
:root[data-preset="rose"] {
|
|
132
145
|
--sigvelo-color-primary-seed: #ee6383;
|
|
133
|
-
--sigvelo-color-danger-seed: #e89a26;
|
|
134
146
|
}
|
|
135
147
|
|
|
136
148
|
:root[data-preset="slate"] {
|
package/src/semantic-colors.css
CHANGED
|
@@ -263,7 +263,7 @@
|
|
|
263
263
|
);
|
|
264
264
|
--sigvelo-color-danger-bg-muted-light: var(--sigvelo-color-danger-200);
|
|
265
265
|
--sigvelo-color-danger-bg-muted-dark: var(--sigvelo-color-danger-800);
|
|
266
|
-
--sigvelo-color-danger-bg-light: color-mix(in oklab, var(--sigvelo-color-danger-600), black
|
|
266
|
+
--sigvelo-color-danger-bg-light: color-mix(in oklab, var(--sigvelo-color-danger-600), black 3.5%);
|
|
267
267
|
--sigvelo-color-danger-bg-dark: color-mix(in oklab, var(--sigvelo-color-danger-600), black 7.5%);
|
|
268
268
|
--sigvelo-color-danger-bg-strong-light: var(--sigvelo-color-danger-800);
|
|
269
269
|
--sigvelo-color-danger-bg-strong-dark: var(--sigvelo-color-danger-200);
|