@helixui/library 3.2.0-next.76 → 3.2.0-next.78
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/custom-elements.json +364 -364
- package/dist/components/hx-button/hx-button.d.ts.map +1 -1
- package/dist/components/hx-button/hx-button.styles.d.ts.map +1 -1
- package/dist/components/hx-button/index.js +1 -1
- package/dist/components/hx-side-nav/hx-nav-item.d.ts.map +1 -1
- package/dist/components/hx-side-nav/hx-nav-item.styles.d.ts.map +1 -1
- package/dist/components/hx-side-nav/hx-side-nav.d.ts.map +1 -1
- package/dist/components/hx-side-nav/hx-side-nav.styles.d.ts.map +1 -1
- package/dist/components/hx-side-nav/index.js +1 -1
- package/dist/components/hx-text-input/hx-text-input.d.ts +5 -5
- package/dist/components/hx-text-input/hx-text-input.d.ts.map +1 -1
- package/dist/components/hx-text-input/index.js +1 -1
- package/dist/components/hx-toast/hx-toast.styles.d.ts.map +1 -1
- package/dist/components/hx-toast/index.js +1 -1
- package/dist/css/helix-all.css +85 -63
- package/dist/css/helix-core.css +54 -34
- package/dist/css/helix-feedback.css +18 -13
- package/dist/css/helix-forms.css +4 -4
- package/dist/css/helix-navigation.css +9 -12
- package/dist/css/helix-tokens.css +43 -0
- package/dist/css/hx-button.css +54 -34
- package/dist/css/hx-side-nav.css +9 -12
- package/dist/css/hx-text-input.css +4 -4
- package/dist/css/hx-toast.css +18 -13
- package/dist/css/index.css +1 -1
- package/dist/css/manifest.json +25 -16
- package/dist/index.js +4 -4
- package/dist/shared/{hx-button-modUSOpY.js → hx-button-YeUzCe6e.js} +77 -58
- package/dist/shared/hx-button-YeUzCe6e.js.map +1 -0
- package/dist/shared/{hx-nav-item-D8xHLVOs.js → hx-nav-item-BqML5BAh.js} +45 -42
- package/dist/shared/hx-nav-item-BqML5BAh.js.map +1 -0
- package/dist/shared/{hx-text-input-B-caO5fI.js → hx-text-input-ClrrmoE1.js} +20 -21
- package/dist/shared/hx-text-input-ClrrmoE1.js.map +1 -0
- package/dist/shared/{toast-factory-DvDRAh0l.js → toast-factory-CIiZDZGZ.js} +59 -54
- package/dist/shared/toast-factory-CIiZDZGZ.js.map +1 -0
- package/figma-inventory.json +16 -16
- package/package.json +2 -2
- package/dist/shared/hx-button-modUSOpY.js.map +0 -1
- package/dist/shared/hx-nav-item-D8xHLVOs.js.map +0 -1
- package/dist/shared/hx-text-input-B-caO5fI.js.map +0 -1
- package/dist/shared/toast-factory-DvDRAh0l.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hx-button.d.ts","sourceRoot":"","sources":["../../../src/components/hx-button/hx-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAC9E,OAAO,4CAA4C,CAAC;AAIpD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"hx-button.d.ts","sourceRoot":"","sources":["../../../src/components/hx-button/hx-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAC9E,OAAO,4CAA4C,CAAC;AAIpD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAKnD,6DAA6D;AAC7D,MAAM,WAAW,mBAAmB;IAClC,aAAa,EAAE,UAAU,CAAC;CAC3B;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AACH,qBACa,WAAY,SAAQ,gBAAgC;IAM/D,OAAgB,MAAM,4BAAuB;IAI7C,gBAAgB;IAChB,OAAgB,cAAc,UAAQ;IAItC;;;OAGG;IAEH,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAa;IAE3F;;;OAGG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,OAAO,UAAS;IAEhB;;;OAGG;IAEH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE/C;;;OAGG;IAEH,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAErC;;;OAGG;IAEH,MAAM,EAAE,MAAM,GAAG,SAAS,CAAa;IAEvC;;;OAGG;IAEH,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAErC;;;OAGG;IAEH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAa;IAEtC;;;;OAIG;IAEH,IAAI,UAAS;IAEb;;;;OAIG;IAEH,QAAQ,UAAS;IAEjB;;;;;;;;OAQG;IAEH,eAAe,EAAE,MAAM,CAAM;IAE7B;;;;OAIG;IACH,OAAO,KAAK,eAAe,GAE1B;cAIkB,eAAe,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAM3D,gBAAgB;IAChB,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAO5B;IAGX,OAAO,CAAC,qBAAqB,CAAS;IAE7B,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAe3D,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAgB/D,gBAAgB;IAChB,OAAO,CAAC,wBAAwB;IAoBhC;;;OAGG;IACH,OAAO,CAAC,YAAY;IAgCpB;;;OAGG;IACH,OAAO,CAAC,cAAc;IA6BtB;;;OAGG;IACH,OAAO,CAAC,YAAY;IAiBX,MAAM;CAyChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,WAAW,CAAC;KAC1B;IACD,UAAU,mBAAmB;QAC3B,UAAU,EAAE,WAAW,CAAC;YAAE,aAAa,EAAE,UAAU,CAAA;SAAE,CAAC,CAAC;KACxD;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hx-button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/hx-button/hx-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,
|
|
1
|
+
{"version":3,"file":"hx-button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/hx-button/hx-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,yBAgV7B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hx-nav-item.d.ts","sourceRoot":"","sources":["../../../src/components/hx-side-nav/hx-nav-item.ts"],"names":[],"mappings":"AACA,OAAO,4CAA4C,CAAC;AAEpD,OAAO,EAAE,YAAY,EAAmB,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"hx-nav-item.d.ts","sourceRoot":"","sources":["../../../src/components/hx-side-nav/hx-nav-item.ts"],"names":[],"mappings":"AACA,OAAO,4CAA4C,CAAC;AAEpD,OAAO,EAAE,YAAY,EAAmB,MAAM,qBAAqB,CAAC;AAKpE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBACa,YAAa,SAAQ,YAAY;IAK5C,OAAgB,MAAM,4BAAwB;IAE9C,0CAA0C;IAC1C,OAAO,CAAC,UAAU,CAAiC;IAInD;;;OAGG;IAEH,IAAI,SAAM;IAEV;;;OAGG;IAEH,MAAM,UAAS;IAEf;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,QAAQ,UAAS;IAIjB,4EAA4E;IAC5E,gBAAgB;IACP,OAAO,CAAC,YAAY,CAAS;IAEtC,0GAA0G;IAC1G,gBAAgB;IACP,OAAO,CAAC,YAAY,CAAS;IAItC,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAEQ,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAS/F;;;;;OAKG;IACM,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAW5C,gBAAgB;IAChB,OAAO,CAAC,qBAAqB;IAO7B,gBAAgB;IAChB,OAAO,CAAC,cAAc;IAQtB,gBAAgB;IAChB,OAAO,CAAC,aAAa;IAMrB,gBAAgB;IAChB,OAAO,CAAC,kBAAkB;IAYjB,MAAM;CAwDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,YAAY,CAAC;KAC7B;CACF;AAED,YAAY,EAAE,YAAY,IAAI,SAAS,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hx-nav-item.styles.d.ts","sourceRoot":"","sources":["../../../src/components/hx-side-nav/hx-nav-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,
|
|
1
|
+
{"version":3,"file":"hx-nav-item.styles.d.ts","sourceRoot":"","sources":["../../../src/components/hx-side-nav/hx-nav-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,yBA+Q9B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hx-side-nav.d.ts","sourceRoot":"","sources":["../../../src/components/hx-side-nav/hx-side-nav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,4CAA4C,CAAC;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"hx-side-nav.d.ts","sourceRoot":"","sources":["../../../src/components/hx-side-nav/hx-side-nav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,4CAA4C,CAAC;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,qBACa,YAAa,SAAQ,YAAY;IAI5C,OAAgB,MAAM,4BAAwB;IAI9C;;;OAGG;IAEH,SAAS,UAAS;IAElB;;;OAGG;IAEH,KAAK,SAAqB;IAIjB,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAS/D;;;;OAIG;IACH,gBAAgB;IAChB,OAAO,CAAC,6BAA6B;IAkBrC;;;OAGG;IACH,gBAAgB;IAChB,OAAO,CAAC,oBAAoB;IAM5B;;;;;OAKG;IACH,gBAAgB;IAChB,OAAO,CAAC,cAAc;IAgItB,gBAAgB;IAChB,OAAO,CAAC,aAAa;IAgCrB,gBAAgB;IAChB,OAAO,CAAC,iBAAiB;IAQhB,MAAM;CA0BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,YAAY,CAAC;KAC7B;CACF;AAED,YAAY,EAAE,YAAY,IAAI,SAAS,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hx-side-nav.styles.d.ts","sourceRoot":"","sources":["../../../src/components/hx-side-nav/hx-side-nav.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,
|
|
1
|
+
{"version":3,"file":"hx-side-nav.styles.d.ts","sourceRoot":"","sources":["../../../src/components/hx-side-nav/hx-side-nav.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,yBA+K9B,CAAC"}
|
|
@@ -31,14 +31,14 @@ declare const HelixTextInput_base: typeof HelixElement & (new (...args: any[]) =
|
|
|
31
31
|
* @csspart help-text - The help text container.
|
|
32
32
|
* @csspart error - The error message container.
|
|
33
33
|
*
|
|
34
|
-
* @cssprop [--hx-input-bg=var(--hx-color-
|
|
35
|
-
* @cssprop [--hx-input-color=var(--hx-color-
|
|
36
|
-
* @cssprop [--hx-input-border-color=var(--hx-color-
|
|
34
|
+
* @cssprop [--hx-input-bg=var(--hx-color-surface-default)] - Input background color.
|
|
35
|
+
* @cssprop [--hx-input-color=var(--hx-color-text-strong)] - Input text color.
|
|
36
|
+
* @cssprop [--hx-input-border-color=var(--hx-color-border-strong)] - Input border color.
|
|
37
37
|
* @cssprop [--hx-input-border-radius=var(--hx-border-radius-md)] - Input border radius.
|
|
38
38
|
* @cssprop [--hx-input-font-family=var(--hx-font-family-sans)] - Input font family.
|
|
39
39
|
* @cssprop [--hx-input-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.
|
|
40
|
-
* @cssprop [--hx-input-error-color=var(--hx-color-error-
|
|
41
|
-
* @cssprop [--hx-input-label-color=var(--hx-color-
|
|
40
|
+
* @cssprop [--hx-input-error-color=var(--hx-color-error-text)] - Error state color.
|
|
41
|
+
* @cssprop [--hx-input-label-color=var(--hx-color-text-strong)] - Label text color.
|
|
42
42
|
* @cssprop [--hx-input-sm-font-size=0.875rem] - Font size for the sm size variant.
|
|
43
43
|
* @cssprop [--hx-input-lg-font-size=1.125rem] - Font size for the lg size variant.
|
|
44
44
|
* @cssprop [--hx-opacity-disabled] - Opacity.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hx-text-input.d.ts","sourceRoot":"","sources":["../../../src/components/hx-text-input/hx-text-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACzD,OAAO,4CAA4C,CAAC;AAKpD,OAAO,EAAE,YAAY,EAAmB,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"hx-text-input.d.ts","sourceRoot":"","sources":["../../../src/components/hx-text-input/hx-text-input.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hx-toast.styles.d.ts","sourceRoot":"","sources":["../../../src/components/hx-toast/hx-toast.styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,
|
|
1
|
+
{"version":3,"file":"hx-toast.styles.d.ts","sourceRoot":"","sources":["../../../src/components/hx-toast/hx-toast.styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,yBA2L5B,CAAC;AAEF,eAAO,MAAM,qBAAqB,yBAyEjC,CAAC"}
|
package/dist/css/helix-all.css
CHANGED
|
@@ -1072,10 +1072,7 @@
|
|
|
1072
1072
|
|
|
1073
1073
|
.button:focus-visible {
|
|
1074
1074
|
outline: var(--hx-focus-ring-width, 2px) solid
|
|
1075
|
-
var(
|
|
1076
|
-
--hx-button-focus-ring-color,
|
|
1077
|
-
var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
|
|
1078
|
-
);
|
|
1075
|
+
var(--hx-button-focus-ring-color, var(--hx-focus-ring-color, #6ab1b1));
|
|
1079
1076
|
outline-offset: var(--hx-focus-ring-offset, 2px);
|
|
1080
1077
|
}
|
|
1081
1078
|
|
|
@@ -1113,8 +1110,11 @@
|
|
|
1113
1110
|
/* ─── Style Variants ─── */
|
|
1114
1111
|
|
|
1115
1112
|
.button--primary {
|
|
1116
|
-
--hx-button-bg: var(--hx-color-primary-
|
|
1117
|
-
|
|
1113
|
+
--hx-button-bg: var(--hx-color-action-primary-bg, #429797);
|
|
1114
|
+
/* Inline #0d1825 matches text.on-primary's resolved primitive (neutral-900);
|
|
1115
|
+
cold-start without the semantic still paints AA-tuned dark-on-primary
|
|
1116
|
+
rather than white-on-primary (3.43:1 fail). */
|
|
1117
|
+
--hx-button-color: var(--hx-color-text-on-primary, #0d1825);
|
|
1118
1118
|
--hx-button-border-color: transparent;
|
|
1119
1119
|
}
|
|
1120
1120
|
|
|
@@ -1122,8 +1122,8 @@
|
|
|
1122
1122
|
--hx-button-bg: transparent;
|
|
1123
1123
|
/* primary-500 (#429797) text on white surface = 3.43:1 — fails AA.
|
|
1124
1124
|
primary-600 (#0F7078) on white = 6.06:1 — AA pass. */
|
|
1125
|
-
--hx-button-color: var(--hx-color-
|
|
1126
|
-
--hx-button-border-color: var(--hx-color-
|
|
1125
|
+
--hx-button-color: var(--hx-color-action-secondary-fg, #0f7078);
|
|
1126
|
+
--hx-button-border-color: var(--hx-color-action-secondary-border, #0f7078);
|
|
1127
1127
|
}
|
|
1128
1128
|
|
|
1129
1129
|
.button--secondary:hover {
|
|
@@ -1141,25 +1141,29 @@
|
|
|
1141
1141
|
}
|
|
1142
1142
|
|
|
1143
1143
|
.button--danger {
|
|
1144
|
-
--hx-button-bg: var(--hx-color-
|
|
1145
|
-
|
|
1144
|
+
--hx-button-bg: var(--hx-color-action-danger-bg, #e5493e);
|
|
1145
|
+
/* Inline #0d1825 matches text.on-error's resolved primitive (neutral-900);
|
|
1146
|
+
cold-start without the semantic still paints AA-tuned dark-on-error
|
|
1147
|
+
rather than white-on-error (3.92:1 fail). */
|
|
1148
|
+
--hx-button-color: var(--hx-color-text-on-error, #0d1825);
|
|
1146
1149
|
--hx-button-border-color: transparent;
|
|
1147
1150
|
}
|
|
1148
1151
|
|
|
1149
1152
|
/* on-error tokens are tuned for error-500 (neutral-900 on #E5493E ≈ 4.59:1).
|
|
1150
|
-
error-600 (#C92A2A) drops that to 2.25:1 — AA fail.
|
|
1151
|
-
|
|
1152
|
-
(commit 300e21ab0)
|
|
1153
|
+
error-600 (#C92A2A) drops that to 2.25:1 — AA fail. text.on-error-strong
|
|
1154
|
+
resolves to neutral-0 across modes (no dark flip) so the darker hover fill
|
|
1155
|
+
stays legible. Mirrors hx-toast precedent (commit 300e21ab0); routed
|
|
1156
|
+
through the semantic tier in 3.2.1 token-cascade remediation. */
|
|
1153
1157
|
.button--danger:hover {
|
|
1154
|
-
--hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-
|
|
1155
|
-
--hx-button-color: var(--hx-color-
|
|
1158
|
+
--hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-action-danger-bg-hover, #c92a2a));
|
|
1159
|
+
--hx-button-color: var(--hx-color-text-on-error-strong, #ffffff);
|
|
1156
1160
|
}
|
|
1157
1161
|
|
|
1158
1162
|
.button--ghost {
|
|
1159
1163
|
--hx-button-bg: transparent;
|
|
1160
1164
|
/* primary-500 (#429797) text on white surface = 3.43:1 — fails AA.
|
|
1161
1165
|
primary-600 (#0F7078) on white = 6.06:1 — AA pass. */
|
|
1162
|
-
--hx-button-color: var(--hx-color-
|
|
1166
|
+
--hx-button-color: var(--hx-color-action-ghost-fg, #0f7078);
|
|
1163
1167
|
--hx-button-border-color: transparent;
|
|
1164
1168
|
}
|
|
1165
1169
|
|
|
@@ -1178,12 +1182,13 @@
|
|
|
1178
1182
|
}
|
|
1179
1183
|
|
|
1180
1184
|
/* on-primary token resolves to neutral-900 (#0D1825) — tuned for primary-500.
|
|
1181
|
-
primary-600 (#0F7078) drops the pair to 3.07:1 — AA fail.
|
|
1182
|
-
neutral-0 for the darker hover fill.
|
|
1183
|
-
(commit 300e21ab0)
|
|
1185
|
+
primary-600 (#0F7078) drops the pair to 3.07:1 — AA fail. text.on-primary-strong
|
|
1186
|
+
resolves to neutral-0 across modes (no dark flip) for the darker hover fill.
|
|
1187
|
+
Mirrors hx-toast precedent (commit 300e21ab0); routed through the semantic
|
|
1188
|
+
tier in 3.2.1 token-cascade remediation. */
|
|
1184
1189
|
.button--primary:hover {
|
|
1185
|
-
--hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-primary-
|
|
1186
|
-
--hx-button-color: var(--hx-color-
|
|
1190
|
+
--hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-action-primary-bg-hover, #0f7078));
|
|
1191
|
+
--hx-button-color: var(--hx-color-text-on-primary-strong, #ffffff);
|
|
1187
1192
|
}
|
|
1188
1193
|
|
|
1189
1194
|
/* ─── Disabled ─── */
|
|
@@ -1229,7 +1234,7 @@
|
|
|
1229
1234
|
|
|
1230
1235
|
/* Override text color and filter-based hover/active for all variants */
|
|
1231
1236
|
:host([inverted]) .button {
|
|
1232
|
-
color: var(--hx-button-inverted-color, var(--hx-color-
|
|
1237
|
+
color: var(--hx-button-inverted-color, var(--hx-color-text-inverse, #ffffff));
|
|
1233
1238
|
filter: none;
|
|
1234
1239
|
}
|
|
1235
1240
|
|
|
@@ -1242,37 +1247,42 @@
|
|
|
1242
1247
|
}
|
|
1243
1248
|
|
|
1244
1249
|
:host([inverted]) .button:focus-visible {
|
|
1250
|
+
/* WCAG 1.4.11: focus indicator needs ≥3:1 against adjacent colors.
|
|
1251
|
+
border-on-dark-default (overlay-white-30) ≈ 2.7:1 on neutral-900 — fails.
|
|
1252
|
+
border-on-dark-strong (overlay-white-70) ≈ 5:1 — passes. */
|
|
1245
1253
|
outline-color: var(
|
|
1246
1254
|
--hx-button-inverted-focus-ring-color,
|
|
1247
|
-
var(--hx-
|
|
1255
|
+
var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7))
|
|
1248
1256
|
);
|
|
1249
1257
|
}
|
|
1250
1258
|
|
|
1251
1259
|
/* Primary inverted — slight transparent white overlay on hover */
|
|
1252
1260
|
:host([inverted]) .button--primary:hover {
|
|
1253
|
-
--hx-button-bg: var(--hx-color-primary-
|
|
1261
|
+
--hx-button-bg: var(--hx-color-action-primary-bg-inverted-hover, #6ab1b1);
|
|
1254
1262
|
}
|
|
1255
1263
|
|
|
1256
|
-
/* Secondary inverted — white border and
|
|
1264
|
+
/* Secondary inverted — white border and translucent hover fill */
|
|
1257
1265
|
:host([inverted]) .button--secondary {
|
|
1258
|
-
--hx-button-border-color: var(--hx-
|
|
1266
|
+
--hx-button-border-color: var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7));
|
|
1259
1267
|
}
|
|
1260
1268
|
|
|
1261
1269
|
:host([inverted]) .button--secondary:hover {
|
|
1262
|
-
--hx-button-bg: var(--hx-
|
|
1270
|
+
--hx-button-bg: var(--hx-color-border-on-dark-default, rgba(255, 255, 255, 0.15));
|
|
1263
1271
|
}
|
|
1264
1272
|
|
|
1265
|
-
/* Tertiary inverted
|
|
1273
|
+
/* Tertiary inverted — resting at subtle (10%) lifts to default (30%) on hover
|
|
1274
|
+
so the runtime hover delta is visually distinct, not collapsed onto a
|
|
1275
|
+
single token. */
|
|
1266
1276
|
:host([inverted]) .button--tertiary {
|
|
1267
|
-
--hx-button-bg: var(--hx-
|
|
1277
|
+
--hx-button-bg: var(--hx-color-border-on-dark-subtle, rgba(255, 255, 255, 0.1));
|
|
1268
1278
|
--hx-button-border-color: transparent;
|
|
1269
1279
|
}
|
|
1270
1280
|
|
|
1271
1281
|
:host([inverted]) .button--tertiary:hover {
|
|
1272
|
-
--hx-button-bg: var(--hx-
|
|
1282
|
+
--hx-button-bg: var(--hx-color-border-on-dark-default, rgba(255, 255, 255, 0.3));
|
|
1273
1283
|
}
|
|
1274
1284
|
|
|
1275
|
-
/* Ghost inverted — transparent base,
|
|
1285
|
+
/* Ghost inverted — transparent base, translucent hover bg */
|
|
1276
1286
|
:host([inverted]) .button--ghost {
|
|
1277
1287
|
--hx-button-bg: transparent;
|
|
1278
1288
|
--hx-button-border-color: transparent;
|
|
@@ -1281,17 +1291,17 @@
|
|
|
1281
1291
|
:host([inverted]) .button--ghost:hover {
|
|
1282
1292
|
--hx-button-bg: var(
|
|
1283
1293
|
--hx-button-inverted-ghost-hover-bg,
|
|
1284
|
-
var(--hx-
|
|
1294
|
+
var(--hx-color-border-on-dark-default, rgba(255, 255, 255, 0.2))
|
|
1285
1295
|
);
|
|
1286
1296
|
}
|
|
1287
1297
|
|
|
1288
1298
|
/* Outline inverted — white border */
|
|
1289
1299
|
:host([inverted]) .button--outline {
|
|
1290
|
-
--hx-button-border-color: var(--hx-
|
|
1300
|
+
--hx-button-border-color: var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7));
|
|
1291
1301
|
}
|
|
1292
1302
|
|
|
1293
1303
|
:host([inverted]) .button--outline:hover {
|
|
1294
|
-
--hx-button-bg: var(--hx-
|
|
1304
|
+
--hx-button-bg: var(--hx-color-border-on-dark-default, rgba(255, 255, 255, 0.15));
|
|
1295
1305
|
}
|
|
1296
1306
|
|
|
1297
1307
|
/* ─── Prefix / Suffix / Label ─── */
|
|
@@ -1319,6 +1329,16 @@
|
|
|
1319
1329
|
border: 2px solid ButtonText;
|
|
1320
1330
|
}
|
|
1321
1331
|
|
|
1332
|
+
.button:hover {
|
|
1333
|
+
/* Hover affordance must survive in HC. Highlight/HighlightText is the
|
|
1334
|
+
OS-level "selected" pair, mirroring the forcedColorsInteractive mixin's
|
|
1335
|
+
hover contract — kept inline since this component owns its bespoke HC
|
|
1336
|
+
block (XOR rule). */
|
|
1337
|
+
background-color: Highlight;
|
|
1338
|
+
color: HighlightText;
|
|
1339
|
+
border-color: Highlight;
|
|
1340
|
+
}
|
|
1341
|
+
|
|
1322
1342
|
.button:focus-visible {
|
|
1323
1343
|
outline: 3px solid Highlight;
|
|
1324
1344
|
outline-offset: 2px;
|
|
@@ -8637,7 +8657,7 @@ export const helixGridItemStyles = css`
|
|
|
8637
8657
|
and evaluates their text against the page white background, producing
|
|
8638
8658
|
false-positive color-contrast violations (WCAG 2.1 AA). */
|
|
8639
8659
|
background-color: var(--hx-side-nav-bg, var(--hx-color-surface-inverse, #0d1825));
|
|
8640
|
-
color: var(--hx-side-nav-color, var(--hx-color-text-inverse, #
|
|
8660
|
+
color: var(--hx-side-nav-color, var(--hx-color-text-inverse, #ffffff));
|
|
8641
8661
|
}
|
|
8642
8662
|
|
|
8643
8663
|
* {
|
|
@@ -8652,11 +8672,11 @@ export const helixGridItemStyles = css`
|
|
|
8652
8672
|
height: 100%;
|
|
8653
8673
|
width: var(--hx-side-nav-width, 16rem);
|
|
8654
8674
|
background-color: var(--hx-side-nav-bg, var(--hx-color-surface-inverse, #0d1825));
|
|
8655
|
-
color: var(--hx-side-nav-color, var(--hx-color-text-inverse, #
|
|
8675
|
+
color: var(--hx-side-nav-color, var(--hx-color-text-inverse, #ffffff));
|
|
8656
8676
|
transition: width var(--hx-transition-normal, 300ms) ease;
|
|
8657
8677
|
overflow: hidden;
|
|
8658
8678
|
border-inline-end: var(--hx-border-width-thin, 1px) solid
|
|
8659
|
-
var(--hx-side-nav-border-color, var(--hx-color-border-strong, #
|
|
8679
|
+
var(--hx-side-nav-border-color, var(--hx-color-border-strong, #8e9c98));
|
|
8660
8680
|
}
|
|
8661
8681
|
|
|
8662
8682
|
/* ─── Collapsed State ─── */
|
|
@@ -8674,7 +8694,7 @@ export const helixGridItemStyles = css`
|
|
|
8674
8694
|
flex-shrink: 0;
|
|
8675
8695
|
min-height: var(--hx-space-14, 3.5rem);
|
|
8676
8696
|
border-bottom: var(--hx-border-width-thin, 1px) solid
|
|
8677
|
-
var(--hx-side-nav-border-color, var(--hx-color-border-strong, #
|
|
8697
|
+
var(--hx-side-nav-border-color, var(--hx-color-border-strong, #8e9c98));
|
|
8678
8698
|
overflow: hidden;
|
|
8679
8699
|
}
|
|
8680
8700
|
|
|
@@ -8701,7 +8721,7 @@ export const helixGridItemStyles = css`
|
|
|
8701
8721
|
flex-shrink: 0;
|
|
8702
8722
|
min-height: var(--hx-space-14, 3.5rem);
|
|
8703
8723
|
border-top: var(--hx-border-width-thin, 1px) solid
|
|
8704
|
-
var(--hx-side-nav-border-color, var(--hx-color-border-strong, #
|
|
8724
|
+
var(--hx-side-nav-border-color, var(--hx-color-border-strong, #8e9c98));
|
|
8705
8725
|
overflow: hidden;
|
|
8706
8726
|
}
|
|
8707
8727
|
|
|
@@ -8724,7 +8744,7 @@ export const helixGridItemStyles = css`
|
|
|
8724
8744
|
border: none;
|
|
8725
8745
|
border-radius: var(--hx-border-radius-sm, 0.25rem);
|
|
8726
8746
|
background: transparent;
|
|
8727
|
-
color: var(--hx-side-nav-toggle-color, var(--hx-color-text-inverse, #
|
|
8747
|
+
color: var(--hx-side-nav-toggle-color, var(--hx-color-text-inverse, #ffffff));
|
|
8728
8748
|
cursor: pointer;
|
|
8729
8749
|
transition:
|
|
8730
8750
|
background-color var(--hx-transition-fast, 150ms) ease,
|
|
@@ -8733,10 +8753,10 @@ export const helixGridItemStyles = css`
|
|
|
8733
8753
|
|
|
8734
8754
|
.side-nav__toggle:hover {
|
|
8735
8755
|
background-color: var(
|
|
8736
|
-
--hx-
|
|
8756
|
+
--hx-color-border-on-dark-subtle,
|
|
8737
8757
|
rgba(255, 255, 255, 0.1)
|
|
8738
8758
|
); /* fallback for browsers without color-mix() */
|
|
8739
|
-
color: var(--hx-color-text-inverse, #
|
|
8759
|
+
color: var(--hx-side-nav-toggle-hover-color, var(--hx-color-text-inverse, #ffffff));
|
|
8740
8760
|
}
|
|
8741
8761
|
|
|
8742
8762
|
@supports (color: color-mix(in srgb, red 50%, blue)) {
|
|
@@ -8747,10 +8767,7 @@ export const helixGridItemStyles = css`
|
|
|
8747
8767
|
|
|
8748
8768
|
.side-nav__toggle:focus-visible {
|
|
8749
8769
|
outline: var(--hx-focus-ring-width, 2px) solid
|
|
8750
|
-
var(
|
|
8751
|
-
--hx-side-nav-focus-ring-color,
|
|
8752
|
-
var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
|
|
8753
|
-
);
|
|
8770
|
+
var(--hx-side-nav-focus-ring-color, var(--hx-focus-ring-color, #6ab1b1));
|
|
8754
8771
|
outline-offset: var(--hx-focus-ring-offset, 2px);
|
|
8755
8772
|
}
|
|
8756
8773
|
|
|
@@ -11539,10 +11556,10 @@ export const helixTableSectionBaseStyles = css`
|
|
|
11539
11556
|
|
|
11540
11557
|
/* ─── High Contrast Mode (forced-colors) ───
|
|
11541
11558
|
*
|
|
11542
|
-
*
|
|
11543
|
-
*
|
|
11544
|
-
*
|
|
11545
|
-
*
|
|
11559
|
+
* Bespoke block — sole owner of forced-colors deference for hx-text-input.
|
|
11560
|
+
* Covers wrapper/input/placeholder/focus/disabled/error/label/help-text;
|
|
11561
|
+
* strictly more than forcedColorsField. The mixin is intentionally NOT
|
|
11562
|
+
* composed (XOR rule — see styles/forced-colors.ts COMPOSITION RULES).
|
|
11546
11563
|
*/
|
|
11547
11564
|
|
|
11548
11565
|
@media (forced-colors: active) {
|
|
@@ -12191,33 +12208,38 @@ export const helixTableSectionBaseStyles = css`
|
|
|
12191
12208
|
* error-600) because the lighter -500 fills can't pass AA against white
|
|
12192
12209
|
* text in the precision-cool palette. The neutral-900 on-{role} tokens
|
|
12193
12210
|
* are tuned for the lighter -500 surfaces and would fail here (e.g.
|
|
12194
|
-
* neutral-900 on primary-600 = 3.07:1), so
|
|
12195
|
-
*
|
|
12196
|
-
* -
|
|
12197
|
-
* -
|
|
12211
|
+
* neutral-900 on primary-600 = 3.07:1), so the on-{role}-strong tokens
|
|
12212
|
+
* (neutral-0, no dark-mode flip) keep fg legible on the darker fills.
|
|
12213
|
+
* - text.on-primary-strong on info.bg-strong (primary-600, #0F7078) = 5.39:1
|
|
12214
|
+
* - text.on-success-strong on success.bg-strong (success-700, #146831) = 6.88:1
|
|
12198
12215
|
* (success-600 #0E8A4A on white = 4.41:1 — drifts under AA at 14px)
|
|
12199
|
-
* -
|
|
12200
|
-
* -
|
|
12216
|
+
* - text.on-error-strong on danger.bg-strong (error-600, #C92A2A) = 5.92:1
|
|
12217
|
+
* - text.on-warning on warning.bg-strong (warning-500, #C2711C) = 4.83:1
|
|
12201
12218
|
* (warning stays on the lighter -500 surface so on-warning works)
|
|
12219
|
+
*
|
|
12220
|
+
* 3.2.1 token-cascade: bg variants now route through surface.{role}-strong
|
|
12221
|
+
* semantics; fg variants route through text.on-{role}-strong (or on-warning
|
|
12222
|
+
* for the warning variant). Component-tier tokens are NOT bypassed — the
|
|
12223
|
+
* --hx-toast-bg / --hx-toast-color slots remain the single override point.
|
|
12202
12224
|
*/
|
|
12203
12225
|
.toast--success {
|
|
12204
|
-
--hx-toast-bg: var(--hx-color-success-
|
|
12205
|
-
--hx-toast-color: var(--hx-color-
|
|
12226
|
+
--hx-toast-bg: var(--hx-color-surface-success-strong, #146831);
|
|
12227
|
+
--hx-toast-color: var(--hx-color-text-on-success-strong, #ffffff);
|
|
12206
12228
|
}
|
|
12207
12229
|
|
|
12208
12230
|
.toast--warning {
|
|
12209
|
-
--hx-toast-bg: var(--hx-color-warning-
|
|
12231
|
+
--hx-toast-bg: var(--hx-color-surface-warning-strong, #c2711c);
|
|
12210
12232
|
--hx-toast-color: var(--hx-color-text-on-warning, #0d1825);
|
|
12211
12233
|
}
|
|
12212
12234
|
|
|
12213
12235
|
.toast--danger {
|
|
12214
|
-
--hx-toast-bg: var(--hx-color-
|
|
12215
|
-
--hx-toast-color: var(--hx-color-
|
|
12236
|
+
--hx-toast-bg: var(--hx-color-surface-danger-strong, #c92a2a);
|
|
12237
|
+
--hx-toast-color: var(--hx-color-text-on-error-strong, #ffffff);
|
|
12216
12238
|
}
|
|
12217
12239
|
|
|
12218
12240
|
.toast--info {
|
|
12219
|
-
--hx-toast-bg: var(--hx-color-
|
|
12220
|
-
--hx-toast-color: var(--hx-color-
|
|
12241
|
+
--hx-toast-bg: var(--hx-color-surface-info-strong, #0f7078);
|
|
12242
|
+
--hx-toast-color: var(--hx-color-text-on-primary-strong, #ffffff);
|
|
12221
12243
|
}
|
|
12222
12244
|
|
|
12223
12245
|
/* ─── Severity Label (WCAG 1.4.1) ─── */
|
package/dist/css/helix-core.css
CHANGED
|
@@ -395,10 +395,7 @@
|
|
|
395
395
|
|
|
396
396
|
.button:focus-visible {
|
|
397
397
|
outline: var(--hx-focus-ring-width, 2px) solid
|
|
398
|
-
var(
|
|
399
|
-
--hx-button-focus-ring-color,
|
|
400
|
-
var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
|
|
401
|
-
);
|
|
398
|
+
var(--hx-button-focus-ring-color, var(--hx-focus-ring-color, #6ab1b1));
|
|
402
399
|
outline-offset: var(--hx-focus-ring-offset, 2px);
|
|
403
400
|
}
|
|
404
401
|
|
|
@@ -436,8 +433,11 @@
|
|
|
436
433
|
/* ─── Style Variants ─── */
|
|
437
434
|
|
|
438
435
|
.button--primary {
|
|
439
|
-
--hx-button-bg: var(--hx-color-primary-
|
|
440
|
-
|
|
436
|
+
--hx-button-bg: var(--hx-color-action-primary-bg, #429797);
|
|
437
|
+
/* Inline #0d1825 matches text.on-primary's resolved primitive (neutral-900);
|
|
438
|
+
cold-start without the semantic still paints AA-tuned dark-on-primary
|
|
439
|
+
rather than white-on-primary (3.43:1 fail). */
|
|
440
|
+
--hx-button-color: var(--hx-color-text-on-primary, #0d1825);
|
|
441
441
|
--hx-button-border-color: transparent;
|
|
442
442
|
}
|
|
443
443
|
|
|
@@ -445,8 +445,8 @@
|
|
|
445
445
|
--hx-button-bg: transparent;
|
|
446
446
|
/* primary-500 (#429797) text on white surface = 3.43:1 — fails AA.
|
|
447
447
|
primary-600 (#0F7078) on white = 6.06:1 — AA pass. */
|
|
448
|
-
--hx-button-color: var(--hx-color-
|
|
449
|
-
--hx-button-border-color: var(--hx-color-
|
|
448
|
+
--hx-button-color: var(--hx-color-action-secondary-fg, #0f7078);
|
|
449
|
+
--hx-button-border-color: var(--hx-color-action-secondary-border, #0f7078);
|
|
450
450
|
}
|
|
451
451
|
|
|
452
452
|
.button--secondary:hover {
|
|
@@ -464,25 +464,29 @@
|
|
|
464
464
|
}
|
|
465
465
|
|
|
466
466
|
.button--danger {
|
|
467
|
-
--hx-button-bg: var(--hx-color-
|
|
468
|
-
|
|
467
|
+
--hx-button-bg: var(--hx-color-action-danger-bg, #e5493e);
|
|
468
|
+
/* Inline #0d1825 matches text.on-error's resolved primitive (neutral-900);
|
|
469
|
+
cold-start without the semantic still paints AA-tuned dark-on-error
|
|
470
|
+
rather than white-on-error (3.92:1 fail). */
|
|
471
|
+
--hx-button-color: var(--hx-color-text-on-error, #0d1825);
|
|
469
472
|
--hx-button-border-color: transparent;
|
|
470
473
|
}
|
|
471
474
|
|
|
472
475
|
/* on-error tokens are tuned for error-500 (neutral-900 on #E5493E ≈ 4.59:1).
|
|
473
|
-
error-600 (#C92A2A) drops that to 2.25:1 — AA fail.
|
|
474
|
-
|
|
475
|
-
(commit 300e21ab0)
|
|
476
|
+
error-600 (#C92A2A) drops that to 2.25:1 — AA fail. text.on-error-strong
|
|
477
|
+
resolves to neutral-0 across modes (no dark flip) so the darker hover fill
|
|
478
|
+
stays legible. Mirrors hx-toast precedent (commit 300e21ab0); routed
|
|
479
|
+
through the semantic tier in 3.2.1 token-cascade remediation. */
|
|
476
480
|
.button--danger:hover {
|
|
477
|
-
--hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-
|
|
478
|
-
--hx-button-color: var(--hx-color-
|
|
481
|
+
--hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-action-danger-bg-hover, #c92a2a));
|
|
482
|
+
--hx-button-color: var(--hx-color-text-on-error-strong, #ffffff);
|
|
479
483
|
}
|
|
480
484
|
|
|
481
485
|
.button--ghost {
|
|
482
486
|
--hx-button-bg: transparent;
|
|
483
487
|
/* primary-500 (#429797) text on white surface = 3.43:1 — fails AA.
|
|
484
488
|
primary-600 (#0F7078) on white = 6.06:1 — AA pass. */
|
|
485
|
-
--hx-button-color: var(--hx-color-
|
|
489
|
+
--hx-button-color: var(--hx-color-action-ghost-fg, #0f7078);
|
|
486
490
|
--hx-button-border-color: transparent;
|
|
487
491
|
}
|
|
488
492
|
|
|
@@ -501,12 +505,13 @@
|
|
|
501
505
|
}
|
|
502
506
|
|
|
503
507
|
/* on-primary token resolves to neutral-900 (#0D1825) — tuned for primary-500.
|
|
504
|
-
primary-600 (#0F7078) drops the pair to 3.07:1 — AA fail.
|
|
505
|
-
neutral-0 for the darker hover fill.
|
|
506
|
-
(commit 300e21ab0)
|
|
508
|
+
primary-600 (#0F7078) drops the pair to 3.07:1 — AA fail. text.on-primary-strong
|
|
509
|
+
resolves to neutral-0 across modes (no dark flip) for the darker hover fill.
|
|
510
|
+
Mirrors hx-toast precedent (commit 300e21ab0); routed through the semantic
|
|
511
|
+
tier in 3.2.1 token-cascade remediation. */
|
|
507
512
|
.button--primary:hover {
|
|
508
|
-
--hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-primary-
|
|
509
|
-
--hx-button-color: var(--hx-color-
|
|
513
|
+
--hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-action-primary-bg-hover, #0f7078));
|
|
514
|
+
--hx-button-color: var(--hx-color-text-on-primary-strong, #ffffff);
|
|
510
515
|
}
|
|
511
516
|
|
|
512
517
|
/* ─── Disabled ─── */
|
|
@@ -552,7 +557,7 @@
|
|
|
552
557
|
|
|
553
558
|
/* Override text color and filter-based hover/active for all variants */
|
|
554
559
|
:host([inverted]) .button {
|
|
555
|
-
color: var(--hx-button-inverted-color, var(--hx-color-
|
|
560
|
+
color: var(--hx-button-inverted-color, var(--hx-color-text-inverse, #ffffff));
|
|
556
561
|
filter: none;
|
|
557
562
|
}
|
|
558
563
|
|
|
@@ -565,37 +570,42 @@
|
|
|
565
570
|
}
|
|
566
571
|
|
|
567
572
|
:host([inverted]) .button:focus-visible {
|
|
573
|
+
/* WCAG 1.4.11: focus indicator needs ≥3:1 against adjacent colors.
|
|
574
|
+
border-on-dark-default (overlay-white-30) ≈ 2.7:1 on neutral-900 — fails.
|
|
575
|
+
border-on-dark-strong (overlay-white-70) ≈ 5:1 — passes. */
|
|
568
576
|
outline-color: var(
|
|
569
577
|
--hx-button-inverted-focus-ring-color,
|
|
570
|
-
var(--hx-
|
|
578
|
+
var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7))
|
|
571
579
|
);
|
|
572
580
|
}
|
|
573
581
|
|
|
574
582
|
/* Primary inverted — slight transparent white overlay on hover */
|
|
575
583
|
:host([inverted]) .button--primary:hover {
|
|
576
|
-
--hx-button-bg: var(--hx-color-primary-
|
|
584
|
+
--hx-button-bg: var(--hx-color-action-primary-bg-inverted-hover, #6ab1b1);
|
|
577
585
|
}
|
|
578
586
|
|
|
579
|
-
/* Secondary inverted — white border and
|
|
587
|
+
/* Secondary inverted — white border and translucent hover fill */
|
|
580
588
|
:host([inverted]) .button--secondary {
|
|
581
|
-
--hx-button-border-color: var(--hx-
|
|
589
|
+
--hx-button-border-color: var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7));
|
|
582
590
|
}
|
|
583
591
|
|
|
584
592
|
:host([inverted]) .button--secondary:hover {
|
|
585
|
-
--hx-button-bg: var(--hx-
|
|
593
|
+
--hx-button-bg: var(--hx-color-border-on-dark-default, rgba(255, 255, 255, 0.15));
|
|
586
594
|
}
|
|
587
595
|
|
|
588
|
-
/* Tertiary inverted
|
|
596
|
+
/* Tertiary inverted — resting at subtle (10%) lifts to default (30%) on hover
|
|
597
|
+
so the runtime hover delta is visually distinct, not collapsed onto a
|
|
598
|
+
single token. */
|
|
589
599
|
:host([inverted]) .button--tertiary {
|
|
590
|
-
--hx-button-bg: var(--hx-
|
|
600
|
+
--hx-button-bg: var(--hx-color-border-on-dark-subtle, rgba(255, 255, 255, 0.1));
|
|
591
601
|
--hx-button-border-color: transparent;
|
|
592
602
|
}
|
|
593
603
|
|
|
594
604
|
:host([inverted]) .button--tertiary:hover {
|
|
595
|
-
--hx-button-bg: var(--hx-
|
|
605
|
+
--hx-button-bg: var(--hx-color-border-on-dark-default, rgba(255, 255, 255, 0.3));
|
|
596
606
|
}
|
|
597
607
|
|
|
598
|
-
/* Ghost inverted — transparent base,
|
|
608
|
+
/* Ghost inverted — transparent base, translucent hover bg */
|
|
599
609
|
:host([inverted]) .button--ghost {
|
|
600
610
|
--hx-button-bg: transparent;
|
|
601
611
|
--hx-button-border-color: transparent;
|
|
@@ -604,17 +614,17 @@
|
|
|
604
614
|
:host([inverted]) .button--ghost:hover {
|
|
605
615
|
--hx-button-bg: var(
|
|
606
616
|
--hx-button-inverted-ghost-hover-bg,
|
|
607
|
-
var(--hx-
|
|
617
|
+
var(--hx-color-border-on-dark-default, rgba(255, 255, 255, 0.2))
|
|
608
618
|
);
|
|
609
619
|
}
|
|
610
620
|
|
|
611
621
|
/* Outline inverted — white border */
|
|
612
622
|
:host([inverted]) .button--outline {
|
|
613
|
-
--hx-button-border-color: var(--hx-
|
|
623
|
+
--hx-button-border-color: var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7));
|
|
614
624
|
}
|
|
615
625
|
|
|
616
626
|
:host([inverted]) .button--outline:hover {
|
|
617
|
-
--hx-button-bg: var(--hx-
|
|
627
|
+
--hx-button-bg: var(--hx-color-border-on-dark-default, rgba(255, 255, 255, 0.15));
|
|
618
628
|
}
|
|
619
629
|
|
|
620
630
|
/* ─── Prefix / Suffix / Label ─── */
|
|
@@ -642,6 +652,16 @@
|
|
|
642
652
|
border: 2px solid ButtonText;
|
|
643
653
|
}
|
|
644
654
|
|
|
655
|
+
.button:hover {
|
|
656
|
+
/* Hover affordance must survive in HC. Highlight/HighlightText is the
|
|
657
|
+
OS-level "selected" pair, mirroring the forcedColorsInteractive mixin's
|
|
658
|
+
hover contract — kept inline since this component owns its bespoke HC
|
|
659
|
+
block (XOR rule). */
|
|
660
|
+
background-color: Highlight;
|
|
661
|
+
color: HighlightText;
|
|
662
|
+
border-color: Highlight;
|
|
663
|
+
}
|
|
664
|
+
|
|
645
665
|
.button:focus-visible {
|
|
646
666
|
outline: 3px solid Highlight;
|
|
647
667
|
outline-offset: 2px;
|