@helixui/library 3.2.0-next.76 → 3.2.0-next.81
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 +390 -375
- 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 +7 -5
- 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 +5 -4
- 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 +95 -65
- package/dist/css/helix-core.css +56 -36
- package/dist/css/helix-feedback.css +18 -13
- package/dist/css/helix-forms.css +4 -4
- package/dist/css/helix-navigation.css +17 -12
- package/dist/css/helix-tokens.css +43 -0
- package/dist/css/hx-button.css +56 -36
- package/dist/css/hx-side-nav.css +17 -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 +27 -16
- package/dist/index.js +4 -4
- package/dist/shared/{hx-button-modUSOpY.js → hx-button-kWxjKqo-.js} +79 -60
- package/dist/shared/hx-button-kWxjKqo-.js.map +1 -0
- package/dist/shared/{hx-nav-item-D8xHLVOs.js → hx-nav-item-CMyMv5Gv.js} +129 -88
- package/dist/shared/hx-nav-item-CMyMv5Gv.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 +80 -44
- 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"}
|
|
@@ -18,13 +18,15 @@ import { HelixElement } from '../../base/index.js';
|
|
|
18
18
|
* @csspart badge - The badge container.
|
|
19
19
|
* @csspart children - The children container.
|
|
20
20
|
*
|
|
21
|
-
* @cssprop [--hx-nav-item-color=var(--hx-color-
|
|
21
|
+
* @cssprop [--hx-nav-item-color=var(--hx-color-text-inverse)] - Item text color.
|
|
22
22
|
* @cssprop [--hx-nav-item-hover-bg] - Item hover background.
|
|
23
|
-
* @cssprop [--hx-nav-item-hover-color=var(--hx-color-
|
|
24
|
-
* @cssprop [--hx-nav-item-active-bg=var(--hx-color-primary-
|
|
25
|
-
* @cssprop [--hx-nav-item-active-color=var(--hx-color-
|
|
23
|
+
* @cssprop [--hx-nav-item-hover-color=var(--hx-color-text-inverse)] - Item hover text color.
|
|
24
|
+
* @cssprop [--hx-nav-item-active-bg=var(--hx-color-action-primary-bg-hover)] - Active item background.
|
|
25
|
+
* @cssprop [--hx-nav-item-active-color=var(--hx-color-text-on-primary-strong)] - Active item text color.
|
|
26
26
|
* @cssprop [--hx-nav-item-padding] - Item padding.
|
|
27
|
-
* @cssprop [--hx-nav-item-host-bg=var(--hx-color-
|
|
27
|
+
* @cssprop [--hx-nav-item-host-bg=var(--hx-color-surface-inverse)] - Component host background color.
|
|
28
|
+
* @cssprop [--hx-nav-item-tooltip-bg=var(--hx-color-surface-inverse)] - Tooltip background color (collapsed-rail tooltip).
|
|
29
|
+
* @cssprop [--hx-nav-item-tooltip-color=var(--hx-color-text-inverse)] - Tooltip text color (collapsed-rail tooltip).
|
|
28
30
|
*/
|
|
29
31
|
export declare class HelixNavItem extends HelixElement {
|
|
30
32
|
static styles: import('lit').CSSResult[];
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;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,yBA6S9B,CAAC"}
|
|
@@ -23,12 +23,13 @@ import { HelixElement } from '../../base/index.js';
|
|
|
23
23
|
*
|
|
24
24
|
* @cssprop [--hx-side-nav-width=16rem] - Full expanded width.
|
|
25
25
|
* @cssprop [--hx-side-nav-collapsed-width=3.5rem] - Collapsed icon-only width.
|
|
26
|
-
* @cssprop [--hx-side-nav-bg=var(--hx-color-
|
|
27
|
-
* @cssprop [--hx-side-nav-color=var(--hx-color-
|
|
28
|
-
* @cssprop [--hx-side-nav-border-color=var(--hx-color-
|
|
26
|
+
* @cssprop [--hx-side-nav-bg=var(--hx-color-surface-inverse)] - Background color.
|
|
27
|
+
* @cssprop [--hx-side-nav-color=var(--hx-color-text-inverse)] - Text color.
|
|
28
|
+
* @cssprop [--hx-side-nav-border-color=var(--hx-color-border-strong)] - Border color.
|
|
29
29
|
* @cssprop [--hx-side-nav-header-padding=var(--hx-space-4)] - Header padding.
|
|
30
30
|
* @cssprop [--hx-side-nav-footer-padding=var(--hx-space-4)] - Footer padding.
|
|
31
|
-
* @cssprop [--hx-side-nav-toggle-color=var(--hx-color-
|
|
31
|
+
* @cssprop [--hx-side-nav-toggle-color=var(--hx-color-text-inverse)] - Toggle button icon color (resting).
|
|
32
|
+
* @cssprop [--hx-side-nav-toggle-hover-color=var(--hx-color-text-inverse)] - Toggle button icon color on hover.
|
|
32
33
|
* @cssprop [--hx-color-neutral-900] - Color.
|
|
33
34
|
* @cssprop [--hx-color-neutral-100] - Color.
|
|
34
35
|
* @cssprop [--hx-transition-normal] - Transition timing.
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;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,yBAuL9B,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,12 +1122,12 @@
|
|
|
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 {
|
|
1130
|
-
--hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-
|
|
1130
|
+
--hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-action-secondary-bg-hover, #ebf8f8));
|
|
1131
1131
|
}
|
|
1132
1132
|
|
|
1133
1133
|
.button--tertiary {
|
|
@@ -1141,30 +1141,34 @@
|
|
|
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
|
|
|
1166
1170
|
.button--ghost:hover {
|
|
1167
|
-
--hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-
|
|
1171
|
+
--hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-action-ghost-bg-hover, #ebf8f8));
|
|
1168
1172
|
}
|
|
1169
1173
|
|
|
1170
1174
|
.button--outline {
|
|
@@ -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.3));
|
|
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.3))
|
|
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.3));
|
|
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
|
|
|
@@ -8796,10 +8813,18 @@ export const helixGridItemStyles = css`
|
|
|
8796
8813
|
}
|
|
8797
8814
|
|
|
8798
8815
|
.side-nav__toggle {
|
|
8816
|
+
forced-color-adjust: none;
|
|
8817
|
+
background-color: ButtonFace;
|
|
8799
8818
|
color: ButtonText;
|
|
8800
8819
|
border: 1px solid ButtonText;
|
|
8801
8820
|
}
|
|
8802
8821
|
|
|
8822
|
+
.side-nav__toggle:hover {
|
|
8823
|
+
background-color: Highlight;
|
|
8824
|
+
color: HighlightText;
|
|
8825
|
+
border-color: Highlight;
|
|
8826
|
+
}
|
|
8827
|
+
|
|
8803
8828
|
.side-nav__toggle:focus-visible {
|
|
8804
8829
|
outline: 3px solid Highlight;
|
|
8805
8830
|
outline-offset: 2px;
|
|
@@ -11539,10 +11564,10 @@ export const helixTableSectionBaseStyles = css`
|
|
|
11539
11564
|
|
|
11540
11565
|
/* ─── High Contrast Mode (forced-colors) ───
|
|
11541
11566
|
*
|
|
11542
|
-
*
|
|
11543
|
-
*
|
|
11544
|
-
*
|
|
11545
|
-
*
|
|
11567
|
+
* Bespoke block — sole owner of forced-colors deference for hx-text-input.
|
|
11568
|
+
* Covers wrapper/input/placeholder/focus/disabled/error/label/help-text;
|
|
11569
|
+
* strictly more than forcedColorsField. The mixin is intentionally NOT
|
|
11570
|
+
* composed (XOR rule — see styles/forced-colors.ts COMPOSITION RULES).
|
|
11546
11571
|
*/
|
|
11547
11572
|
|
|
11548
11573
|
@media (forced-colors: active) {
|
|
@@ -12191,33 +12216,38 @@ export const helixTableSectionBaseStyles = css`
|
|
|
12191
12216
|
* error-600) because the lighter -500 fills can't pass AA against white
|
|
12192
12217
|
* text in the precision-cool palette. The neutral-900 on-{role} tokens
|
|
12193
12218
|
* 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
|
-
* -
|
|
12219
|
+
* neutral-900 on primary-600 = 3.07:1), so the on-{role}-strong tokens
|
|
12220
|
+
* (neutral-0, no dark-mode flip) keep fg legible on the darker fills.
|
|
12221
|
+
* - text.on-primary-strong on info.bg-strong (primary-600, #0F7078) = 5.39:1
|
|
12222
|
+
* - text.on-success-strong on success.bg-strong (success-700, #146831) = 6.88:1
|
|
12198
12223
|
* (success-600 #0E8A4A on white = 4.41:1 — drifts under AA at 14px)
|
|
12199
|
-
* -
|
|
12200
|
-
* -
|
|
12224
|
+
* - text.on-error-strong on danger.bg-strong (error-600, #C92A2A) = 5.92:1
|
|
12225
|
+
* - text.on-warning on warning.bg-strong (warning-500, #C2711C) = 4.83:1
|
|
12201
12226
|
* (warning stays on the lighter -500 surface so on-warning works)
|
|
12227
|
+
*
|
|
12228
|
+
* 3.2.1 token-cascade: bg variants now route through surface.{role}-strong
|
|
12229
|
+
* semantics; fg variants route through text.on-{role}-strong (or on-warning
|
|
12230
|
+
* for the warning variant). Component-tier tokens are NOT bypassed — the
|
|
12231
|
+
* --hx-toast-bg / --hx-toast-color slots remain the single override point.
|
|
12202
12232
|
*/
|
|
12203
12233
|
.toast--success {
|
|
12204
|
-
--hx-toast-bg: var(--hx-color-success-
|
|
12205
|
-
--hx-toast-color: var(--hx-color-
|
|
12234
|
+
--hx-toast-bg: var(--hx-color-surface-success-strong, #146831);
|
|
12235
|
+
--hx-toast-color: var(--hx-color-text-on-success-strong, #ffffff);
|
|
12206
12236
|
}
|
|
12207
12237
|
|
|
12208
12238
|
.toast--warning {
|
|
12209
|
-
--hx-toast-bg: var(--hx-color-warning-
|
|
12239
|
+
--hx-toast-bg: var(--hx-color-surface-warning-strong, #c2711c);
|
|
12210
12240
|
--hx-toast-color: var(--hx-color-text-on-warning, #0d1825);
|
|
12211
12241
|
}
|
|
12212
12242
|
|
|
12213
12243
|
.toast--danger {
|
|
12214
|
-
--hx-toast-bg: var(--hx-color-
|
|
12215
|
-
--hx-toast-color: var(--hx-color-
|
|
12244
|
+
--hx-toast-bg: var(--hx-color-surface-danger-strong, #c92a2a);
|
|
12245
|
+
--hx-toast-color: var(--hx-color-text-on-error-strong, #ffffff);
|
|
12216
12246
|
}
|
|
12217
12247
|
|
|
12218
12248
|
.toast--info {
|
|
12219
|
-
--hx-toast-bg: var(--hx-color-
|
|
12220
|
-
--hx-toast-color: var(--hx-color-
|
|
12249
|
+
--hx-toast-bg: var(--hx-color-surface-info-strong, #0f7078);
|
|
12250
|
+
--hx-toast-color: var(--hx-color-text-on-primary-strong, #ffffff);
|
|
12221
12251
|
}
|
|
12222
12252
|
|
|
12223
12253
|
/* ─── Severity Label (WCAG 1.4.1) ─── */
|