@fusion.dev/helix-styles 0.207.2 → 0.208.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/dist/base.css +4 -5
- package/dist/tokens.css +4 -0
- package/dist/tokens.json +6 -1
- package/package.json +1 -1
package/dist/base.css
CHANGED
|
@@ -240,6 +240,7 @@ helix-text[tone="warning"][emphasis="muted"] {
|
|
|
240
240
|
max-inline-size: 100%;
|
|
241
241
|
--_button-fill: var(--_button-tone);
|
|
242
242
|
--_button-fill-hover: var(--_button-tone-hover);
|
|
243
|
+
--_button-ink: color-mix(in oklab, var(--_button-tone) 78%, var(--helix-color-foreground));
|
|
243
244
|
--_button-on-tone: var(--helix-color-background);
|
|
244
245
|
--_button-tone: var(--helix-color-foreground);
|
|
245
246
|
--_button-tone-hover: color-mix(
|
|
@@ -255,7 +256,7 @@ helix-text[tone="warning"][emphasis="muted"] {
|
|
|
255
256
|
block-size: var(--button-size, var(--helix-size-control));
|
|
256
257
|
border: var(--helix-border-thin) solid var(--_button-edge);
|
|
257
258
|
border-radius: var(--button-radius, var(--helix-radii-sm));
|
|
258
|
-
color: var(--button-foreground-color, var(--_button-
|
|
259
|
+
color: var(--button-foreground-color, var(--_button-ink));
|
|
259
260
|
cursor: pointer;
|
|
260
261
|
display: inline-flex;
|
|
261
262
|
font-family: var(--helix-font-sans);
|
|
@@ -329,10 +330,7 @@ helix-text[tone="warning"][emphasis="muted"] {
|
|
|
329
330
|
color-mix(in oklab, var(--_button-tone) 14%, transparent)
|
|
330
331
|
);
|
|
331
332
|
border-color: transparent;
|
|
332
|
-
color: var(
|
|
333
|
-
--button-foreground-color,
|
|
334
|
-
color-mix(in oklab, var(--_button-tone) 78%, var(--helix-color-foreground))
|
|
335
|
-
);
|
|
333
|
+
color: var(--button-foreground-color, var(--_button-ink));
|
|
336
334
|
}
|
|
337
335
|
[data-button="subtle"]:not(:disabled):hover {
|
|
338
336
|
background-color: var(
|
|
@@ -400,6 +398,7 @@ helix-button-group[orientation="vertical"]:not([variant="spaced"]) > button:not(
|
|
|
400
398
|
var(--button-background-color, color-mix(in oklab, var(--_button-tone) 8%, transparent))
|
|
401
399
|
);
|
|
402
400
|
border-color: transparent;
|
|
401
|
+
color: var(--button-foreground-color, var(--_button-ink));
|
|
403
402
|
}
|
|
404
403
|
[data-density="sm"] helix-checkbox::part(label) {
|
|
405
404
|
font-size: var(--helix-text-xs);
|
package/dist/tokens.css
CHANGED
|
@@ -48,6 +48,10 @@
|
|
|
48
48
|
--helix-color-surface-overlay: light-dark(var(--_helix-neutral-0), var(--_helix-neutral-800));
|
|
49
49
|
--helix-color-surface-sunken: light-dark(var(--_helix-neutral-200), var(--_helix-neutral-950));
|
|
50
50
|
--helix-color-well: color-mix(in oklab, var(--helix-color-foreground) 5%, transparent);
|
|
51
|
+
--helix-color-hover: light-dark(
|
|
52
|
+
color-mix(in oklab, var(--helix-color-foreground) 8%, transparent),
|
|
53
|
+
color-mix(in oklab, var(--helix-color-foreground) 12%, transparent)
|
|
54
|
+
);
|
|
51
55
|
--helix-color-overlay: light-dark(
|
|
52
56
|
color-mix(in oklab, var(--_helix-neutral-950) 40%, transparent),
|
|
53
57
|
color-mix(in oklab, var(--_helix-neutral-950) 64%, transparent)
|
package/dist/tokens.json
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"size",
|
|
18
18
|
"layer"
|
|
19
19
|
],
|
|
20
|
-
"count":
|
|
20
|
+
"count": 200,
|
|
21
21
|
"groups": {
|
|
22
22
|
"separation-policy": ["border-surface", "shadow-surface", "border-floating", "shadow-floating"],
|
|
23
23
|
"surface-ladder": [
|
|
@@ -64,6 +64,11 @@
|
|
|
64
64
|
"name": "--helix-color-well",
|
|
65
65
|
"value": "color-mix(in oklab, var(--helix-color-foreground) 5%, transparent)"
|
|
66
66
|
},
|
|
67
|
+
{
|
|
68
|
+
"category": "color",
|
|
69
|
+
"name": "--helix-color-hover",
|
|
70
|
+
"value": "light-dark( color-mix(in oklab, var(--helix-color-foreground) 8%, transparent), color-mix(in oklab, var(--helix-color-foreground) 12%, transparent) )"
|
|
71
|
+
},
|
|
67
72
|
{
|
|
68
73
|
"category": "color",
|
|
69
74
|
"name": "--helix-color-overlay",
|
package/package.json
CHANGED