@helixui/tokens 3.2.0-next.81 → 3.2.0-next.83
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/tokens.json +23 -23
- package/package.json +1 -1
- package/src/tokens.json +23 -23
package/dist/tokens.json
CHANGED
|
@@ -139,7 +139,7 @@
|
|
|
139
139
|
},
|
|
140
140
|
"on-success": {
|
|
141
141
|
"value": "var(--hx-color-neutral-900)",
|
|
142
|
-
"description": "Dark text on success surface. neutral-0 (white) on success-500 (#
|
|
142
|
+
"description": "Dark text on success surface. neutral-0 (white) on the precision-cool success-500 (#3B9E58) is 3.38:1 — WCAG AA fail for body text. neutral-900 on success-500 = 5.29:1 (AA pass). Matches the on-warning pattern."
|
|
143
143
|
},
|
|
144
144
|
"on-warning": { "value": "var(--hx-color-neutral-900)" },
|
|
145
145
|
"on-info": {
|
|
@@ -152,7 +152,7 @@
|
|
|
152
152
|
},
|
|
153
153
|
"on-success-strong": {
|
|
154
154
|
"value": "var(--hx-color-neutral-0)",
|
|
155
|
-
"description": "White text override for success surfaces darker than success-500 (i.e. the success-700 #146831 fill that hx-toast--success and other emphasis-success surfaces paint). The AA-tuned text.on-success (neutral-900) only meets AA against success-500 (#3B9E58 =
|
|
155
|
+
"description": "White text override for success surfaces darker than success-500 (i.e. the success-700 #146831 fill that hx-toast--success and other emphasis-success surfaces paint). The AA-tuned text.on-success (neutral-900) only meets AA against success-500 (#3B9E58 = 5.29:1); on success-700 it drops to 2.60:1 — AA fail. neutral-0 on success-700 = 6.88:1 AA pass. Sister token to text.on-primary-strong / text.on-error-strong; same 3.2.1 token-cascade rationale (route the white-on-darker-success pin through the semantic tier instead of letting components consume neutral-0 directly)."
|
|
156
156
|
},
|
|
157
157
|
"on-error-strong": {
|
|
158
158
|
"value": "var(--hx-color-neutral-0)",
|
|
@@ -670,40 +670,40 @@
|
|
|
670
670
|
"high-contrast": {
|
|
671
671
|
"color": {
|
|
672
672
|
"primary": {
|
|
673
|
-
"500": { "value": "#3B82F6", "description": "High-contrast primary —
|
|
674
|
-
"600": { "value": "#60A5FA", "description": "High-contrast primary-600 —
|
|
675
|
-
"700": { "value": "#93C5FD", "description": "High-contrast primary-700 —
|
|
673
|
+
"500": { "value": "#3B82F6", "description": "High-contrast primary — 5.71:1 on #000" },
|
|
674
|
+
"600": { "value": "#60A5FA", "description": "High-contrast primary-600 — 8.26:1 on #000" },
|
|
675
|
+
"700": { "value": "#93C5FD", "description": "High-contrast primary-700 — 11.65:1 on #000" }
|
|
676
676
|
},
|
|
677
677
|
"secondary": {
|
|
678
|
-
"500": { "value": "#22D3EE", "description": "High-contrast secondary —
|
|
678
|
+
"500": { "value": "#22D3EE", "description": "High-contrast secondary — 11.62:1 on #000" },
|
|
679
679
|
"600": {
|
|
680
680
|
"value": "#67E8F9",
|
|
681
|
-
"description": "High-contrast secondary-600 —
|
|
681
|
+
"description": "High-contrast secondary-600 — 14.49:1 on #000"
|
|
682
682
|
}
|
|
683
683
|
},
|
|
684
684
|
"error": {
|
|
685
|
-
"500": { "value": "#F87171", "description": "High-contrast error —
|
|
686
|
-
"600": { "value": "#FCA5A5", "description": "High-contrast error-600 —
|
|
685
|
+
"500": { "value": "#F87171", "description": "High-contrast error — 7.59:1 on #000" },
|
|
686
|
+
"600": { "value": "#FCA5A5", "description": "High-contrast error-600 — 11.06:1 on #000" }
|
|
687
687
|
},
|
|
688
688
|
"error-text": {
|
|
689
689
|
"value": "#FCA5A5",
|
|
690
|
-
"description": "WCAG AAA compliant error text on #000 surface —
|
|
690
|
+
"description": "WCAG AAA compliant error text on #000 surface — 11.06:1 contrast"
|
|
691
691
|
},
|
|
692
692
|
"warning": {
|
|
693
|
-
"500": { "value": "#FBBF24", "description": "High-contrast warning —
|
|
694
|
-
"600": { "value": "#FCD34D", "description": "High-contrast warning-600 —
|
|
693
|
+
"500": { "value": "#FBBF24", "description": "High-contrast warning — 12.58:1 on #000" },
|
|
694
|
+
"600": { "value": "#FCD34D", "description": "High-contrast warning-600 — 14.56:1 on #000" }
|
|
695
695
|
},
|
|
696
696
|
"success": {
|
|
697
|
-
"500": { "value": "#4ADE80", "description": "High-contrast success —
|
|
698
|
-
"600": { "value": "#86EFAC", "description": "High-contrast success-600 — 14.
|
|
697
|
+
"500": { "value": "#4ADE80", "description": "High-contrast success — 12.05:1 on #000" },
|
|
698
|
+
"600": { "value": "#86EFAC", "description": "High-contrast success-600 — 14.96:1 on #000" }
|
|
699
699
|
},
|
|
700
700
|
"success-text": {
|
|
701
701
|
"value": "#86EFAC",
|
|
702
|
-
"description": "WCAG AAA compliant success text on #000 surface — 14.
|
|
702
|
+
"description": "WCAG AAA compliant success text on #000 surface — 14.96:1 contrast"
|
|
703
703
|
},
|
|
704
704
|
"info": {
|
|
705
|
-
"500": { "value": "#38BDF8", "description": "High-contrast info —
|
|
706
|
-
"600": { "value": "#7DD3FC", "description": "High-contrast info-600 —
|
|
705
|
+
"500": { "value": "#38BDF8", "description": "High-contrast info — 9.80:1 on #000" },
|
|
706
|
+
"600": { "value": "#7DD3FC", "description": "High-contrast info-600 — 12.60:1 on #000" }
|
|
707
707
|
},
|
|
708
708
|
"text": {
|
|
709
709
|
"primary": { "value": "#FFFFFF", "description": "21:1 contrast on #000 — WCAG AAA" },
|
|
@@ -727,15 +727,15 @@
|
|
|
727
727
|
"on-info": { "value": "#000000", "description": "Black text on bright HC info" },
|
|
728
728
|
"on-primary-strong": {
|
|
729
729
|
"value": "#000000",
|
|
730
|
-
"description": "HC override for text.on-primary-strong. The light/dark value (neutral-0 / white) is unreadable on HC primary-600 (#60A5FA) and primary-700 (#93C5FD), which are bright fills. Black on HC primary-600 =
|
|
730
|
+
"description": "HC override for text.on-primary-strong. The light/dark value (neutral-0 / white) is unreadable on HC primary-600 (#60A5FA) and primary-700 (#93C5FD), which are bright fills. Black on HC primary-600 = 8.26:1, on HC primary-700 = 11.65:1 — both AAA. Mirrors the existing on-primary HC override pattern."
|
|
731
731
|
},
|
|
732
732
|
"on-error-strong": {
|
|
733
733
|
"value": "#000000",
|
|
734
|
-
"description": "HC override for text.on-error-strong. White is unreadable on HC error-600 (#FCA5A5 — light red). Black on HC error-600 =
|
|
734
|
+
"description": "HC override for text.on-error-strong. White is unreadable on HC error-600 (#FCA5A5 — light red). Black on HC error-600 = 11.06:1, AAA. action.danger.bg-active also has its own HC override (flips to HC error-500) so the base error-700 stop is never paired with this token at runtime; both pairings are asserted in the regression matrix."
|
|
735
735
|
},
|
|
736
736
|
"on-success-strong": {
|
|
737
737
|
"value": "#000000",
|
|
738
|
-
"description": "HC override for text.on-success-strong. The light/dark value (neutral-0 / white) is unreadable on the HC bright-fill success surfaces. Black on HC success-500 (#4ADE80) =
|
|
738
|
+
"description": "HC override for text.on-success-strong. The light/dark value (neutral-0 / white) is unreadable on the HC bright-fill success surfaces. Black on HC success-500 (#4ADE80) = 12.05:1 AAA. Sister token to on-primary-strong / on-error-strong HC overrides."
|
|
739
739
|
},
|
|
740
740
|
"link": { "value": "#FFFF00", "description": "19.56:1 contrast on #000 — high visibility" },
|
|
741
741
|
"link-hover": { "value": "#FFFF99", "description": "High-contrast hover link" },
|
|
@@ -753,11 +753,11 @@
|
|
|
753
753
|
"overlay": { "value": "rgba(0, 0, 0, 0.95)" },
|
|
754
754
|
"success-strong": {
|
|
755
755
|
"value": "var(--hx-color-success-500)",
|
|
756
|
-
"description": "HC override for surface.success-strong. Light/dark resolves to success-700 (#146831) which is too dark to read against the HC #000 canvas as a fill. Flip to HC success-500 (#4ADE80,
|
|
756
|
+
"description": "HC override for surface.success-strong. Light/dark resolves to success-700 (#146831) which is too dark to read against the HC #000 canvas as a fill. Flip to HC success-500 (#4ADE80, 12.05:1 on #000) so emphasis success surfaces remain visible. Pairs with text.inverse (HC = #000000) for 12.05:1 AAA."
|
|
757
757
|
},
|
|
758
758
|
"warning-strong": {
|
|
759
759
|
"value": "var(--hx-color-warning-500)",
|
|
760
|
-
"description": "HC override for surface.warning-strong. Resolves to HC warning-500 (#FBBF24) — bright yellow visible against the HC canvas. Pairs with text.on-warning (HC = #000000) for
|
|
760
|
+
"description": "HC override for surface.warning-strong. Resolves to HC warning-500 (#FBBF24) — bright yellow visible against the HC canvas. Pairs with text.on-warning (HC = #000000) for 12.58:1 AAA."
|
|
761
761
|
},
|
|
762
762
|
"danger-strong": {
|
|
763
763
|
"value": "var(--hx-color-error-500)",
|
|
@@ -765,7 +765,7 @@
|
|
|
765
765
|
},
|
|
766
766
|
"info-strong": {
|
|
767
767
|
"value": "var(--hx-color-primary-500)",
|
|
768
|
-
"description": "HC override for surface.info-strong. Light/dark resolves to primary-600
|
|
768
|
+
"description": "HC override for surface.info-strong. Light/dark resolves to primary-600. HC primary-600 (#60A5FA) is defined but pinning to HC primary-500 (#3B82F6, 5.71:1 on #000) keeps the info-strong surface visually distinct from the primary-strong action layer. Pairs with text.inverse (HC = #000000) for 5.71:1 AA pass."
|
|
769
769
|
}
|
|
770
770
|
},
|
|
771
771
|
"border": {
|
package/package.json
CHANGED
package/src/tokens.json
CHANGED
|
@@ -139,7 +139,7 @@
|
|
|
139
139
|
},
|
|
140
140
|
"on-success": {
|
|
141
141
|
"value": "var(--hx-color-neutral-900)",
|
|
142
|
-
"description": "Dark text on success surface. neutral-0 (white) on success-500 (#
|
|
142
|
+
"description": "Dark text on success surface. neutral-0 (white) on the precision-cool success-500 (#3B9E58) is 3.38:1 — WCAG AA fail for body text. neutral-900 on success-500 = 5.29:1 (AA pass). Matches the on-warning pattern."
|
|
143
143
|
},
|
|
144
144
|
"on-warning": { "value": "var(--hx-color-neutral-900)" },
|
|
145
145
|
"on-info": {
|
|
@@ -152,7 +152,7 @@
|
|
|
152
152
|
},
|
|
153
153
|
"on-success-strong": {
|
|
154
154
|
"value": "var(--hx-color-neutral-0)",
|
|
155
|
-
"description": "White text override for success surfaces darker than success-500 (i.e. the success-700 #146831 fill that hx-toast--success and other emphasis-success surfaces paint). The AA-tuned text.on-success (neutral-900) only meets AA against success-500 (#3B9E58 =
|
|
155
|
+
"description": "White text override for success surfaces darker than success-500 (i.e. the success-700 #146831 fill that hx-toast--success and other emphasis-success surfaces paint). The AA-tuned text.on-success (neutral-900) only meets AA against success-500 (#3B9E58 = 5.29:1); on success-700 it drops to 2.60:1 — AA fail. neutral-0 on success-700 = 6.88:1 AA pass. Sister token to text.on-primary-strong / text.on-error-strong; same 3.2.1 token-cascade rationale (route the white-on-darker-success pin through the semantic tier instead of letting components consume neutral-0 directly)."
|
|
156
156
|
},
|
|
157
157
|
"on-error-strong": {
|
|
158
158
|
"value": "var(--hx-color-neutral-0)",
|
|
@@ -670,40 +670,40 @@
|
|
|
670
670
|
"high-contrast": {
|
|
671
671
|
"color": {
|
|
672
672
|
"primary": {
|
|
673
|
-
"500": { "value": "#3B82F6", "description": "High-contrast primary —
|
|
674
|
-
"600": { "value": "#60A5FA", "description": "High-contrast primary-600 —
|
|
675
|
-
"700": { "value": "#93C5FD", "description": "High-contrast primary-700 —
|
|
673
|
+
"500": { "value": "#3B82F6", "description": "High-contrast primary — 5.71:1 on #000" },
|
|
674
|
+
"600": { "value": "#60A5FA", "description": "High-contrast primary-600 — 8.26:1 on #000" },
|
|
675
|
+
"700": { "value": "#93C5FD", "description": "High-contrast primary-700 — 11.65:1 on #000" }
|
|
676
676
|
},
|
|
677
677
|
"secondary": {
|
|
678
|
-
"500": { "value": "#22D3EE", "description": "High-contrast secondary —
|
|
678
|
+
"500": { "value": "#22D3EE", "description": "High-contrast secondary — 11.62:1 on #000" },
|
|
679
679
|
"600": {
|
|
680
680
|
"value": "#67E8F9",
|
|
681
|
-
"description": "High-contrast secondary-600 —
|
|
681
|
+
"description": "High-contrast secondary-600 — 14.49:1 on #000"
|
|
682
682
|
}
|
|
683
683
|
},
|
|
684
684
|
"error": {
|
|
685
|
-
"500": { "value": "#F87171", "description": "High-contrast error —
|
|
686
|
-
"600": { "value": "#FCA5A5", "description": "High-contrast error-600 —
|
|
685
|
+
"500": { "value": "#F87171", "description": "High-contrast error — 7.59:1 on #000" },
|
|
686
|
+
"600": { "value": "#FCA5A5", "description": "High-contrast error-600 — 11.06:1 on #000" }
|
|
687
687
|
},
|
|
688
688
|
"error-text": {
|
|
689
689
|
"value": "#FCA5A5",
|
|
690
|
-
"description": "WCAG AAA compliant error text on #000 surface —
|
|
690
|
+
"description": "WCAG AAA compliant error text on #000 surface — 11.06:1 contrast"
|
|
691
691
|
},
|
|
692
692
|
"warning": {
|
|
693
|
-
"500": { "value": "#FBBF24", "description": "High-contrast warning —
|
|
694
|
-
"600": { "value": "#FCD34D", "description": "High-contrast warning-600 —
|
|
693
|
+
"500": { "value": "#FBBF24", "description": "High-contrast warning — 12.58:1 on #000" },
|
|
694
|
+
"600": { "value": "#FCD34D", "description": "High-contrast warning-600 — 14.56:1 on #000" }
|
|
695
695
|
},
|
|
696
696
|
"success": {
|
|
697
|
-
"500": { "value": "#4ADE80", "description": "High-contrast success —
|
|
698
|
-
"600": { "value": "#86EFAC", "description": "High-contrast success-600 — 14.
|
|
697
|
+
"500": { "value": "#4ADE80", "description": "High-contrast success — 12.05:1 on #000" },
|
|
698
|
+
"600": { "value": "#86EFAC", "description": "High-contrast success-600 — 14.96:1 on #000" }
|
|
699
699
|
},
|
|
700
700
|
"success-text": {
|
|
701
701
|
"value": "#86EFAC",
|
|
702
|
-
"description": "WCAG AAA compliant success text on #000 surface — 14.
|
|
702
|
+
"description": "WCAG AAA compliant success text on #000 surface — 14.96:1 contrast"
|
|
703
703
|
},
|
|
704
704
|
"info": {
|
|
705
|
-
"500": { "value": "#38BDF8", "description": "High-contrast info —
|
|
706
|
-
"600": { "value": "#7DD3FC", "description": "High-contrast info-600 —
|
|
705
|
+
"500": { "value": "#38BDF8", "description": "High-contrast info — 9.80:1 on #000" },
|
|
706
|
+
"600": { "value": "#7DD3FC", "description": "High-contrast info-600 — 12.60:1 on #000" }
|
|
707
707
|
},
|
|
708
708
|
"text": {
|
|
709
709
|
"primary": { "value": "#FFFFFF", "description": "21:1 contrast on #000 — WCAG AAA" },
|
|
@@ -727,15 +727,15 @@
|
|
|
727
727
|
"on-info": { "value": "#000000", "description": "Black text on bright HC info" },
|
|
728
728
|
"on-primary-strong": {
|
|
729
729
|
"value": "#000000",
|
|
730
|
-
"description": "HC override for text.on-primary-strong. The light/dark value (neutral-0 / white) is unreadable on HC primary-600 (#60A5FA) and primary-700 (#93C5FD), which are bright fills. Black on HC primary-600 =
|
|
730
|
+
"description": "HC override for text.on-primary-strong. The light/dark value (neutral-0 / white) is unreadable on HC primary-600 (#60A5FA) and primary-700 (#93C5FD), which are bright fills. Black on HC primary-600 = 8.26:1, on HC primary-700 = 11.65:1 — both AAA. Mirrors the existing on-primary HC override pattern."
|
|
731
731
|
},
|
|
732
732
|
"on-error-strong": {
|
|
733
733
|
"value": "#000000",
|
|
734
|
-
"description": "HC override for text.on-error-strong. White is unreadable on HC error-600 (#FCA5A5 — light red). Black on HC error-600 =
|
|
734
|
+
"description": "HC override for text.on-error-strong. White is unreadable on HC error-600 (#FCA5A5 — light red). Black on HC error-600 = 11.06:1, AAA. action.danger.bg-active also has its own HC override (flips to HC error-500) so the base error-700 stop is never paired with this token at runtime; both pairings are asserted in the regression matrix."
|
|
735
735
|
},
|
|
736
736
|
"on-success-strong": {
|
|
737
737
|
"value": "#000000",
|
|
738
|
-
"description": "HC override for text.on-success-strong. The light/dark value (neutral-0 / white) is unreadable on the HC bright-fill success surfaces. Black on HC success-500 (#4ADE80) =
|
|
738
|
+
"description": "HC override for text.on-success-strong. The light/dark value (neutral-0 / white) is unreadable on the HC bright-fill success surfaces. Black on HC success-500 (#4ADE80) = 12.05:1 AAA. Sister token to on-primary-strong / on-error-strong HC overrides."
|
|
739
739
|
},
|
|
740
740
|
"link": { "value": "#FFFF00", "description": "19.56:1 contrast on #000 — high visibility" },
|
|
741
741
|
"link-hover": { "value": "#FFFF99", "description": "High-contrast hover link" },
|
|
@@ -753,11 +753,11 @@
|
|
|
753
753
|
"overlay": { "value": "rgba(0, 0, 0, 0.95)" },
|
|
754
754
|
"success-strong": {
|
|
755
755
|
"value": "var(--hx-color-success-500)",
|
|
756
|
-
"description": "HC override for surface.success-strong. Light/dark resolves to success-700 (#146831) which is too dark to read against the HC #000 canvas as a fill. Flip to HC success-500 (#4ADE80,
|
|
756
|
+
"description": "HC override for surface.success-strong. Light/dark resolves to success-700 (#146831) which is too dark to read against the HC #000 canvas as a fill. Flip to HC success-500 (#4ADE80, 12.05:1 on #000) so emphasis success surfaces remain visible. Pairs with text.inverse (HC = #000000) for 12.05:1 AAA."
|
|
757
757
|
},
|
|
758
758
|
"warning-strong": {
|
|
759
759
|
"value": "var(--hx-color-warning-500)",
|
|
760
|
-
"description": "HC override for surface.warning-strong. Resolves to HC warning-500 (#FBBF24) — bright yellow visible against the HC canvas. Pairs with text.on-warning (HC = #000000) for
|
|
760
|
+
"description": "HC override for surface.warning-strong. Resolves to HC warning-500 (#FBBF24) — bright yellow visible against the HC canvas. Pairs with text.on-warning (HC = #000000) for 12.58:1 AAA."
|
|
761
761
|
},
|
|
762
762
|
"danger-strong": {
|
|
763
763
|
"value": "var(--hx-color-error-500)",
|
|
@@ -765,7 +765,7 @@
|
|
|
765
765
|
},
|
|
766
766
|
"info-strong": {
|
|
767
767
|
"value": "var(--hx-color-primary-500)",
|
|
768
|
-
"description": "HC override for surface.info-strong. Light/dark resolves to primary-600
|
|
768
|
+
"description": "HC override for surface.info-strong. Light/dark resolves to primary-600. HC primary-600 (#60A5FA) is defined but pinning to HC primary-500 (#3B82F6, 5.71:1 on #000) keeps the info-strong surface visually distinct from the primary-strong action layer. Pairs with text.inverse (HC = #000000) for 5.71:1 AA pass."
|
|
769
769
|
}
|
|
770
770
|
},
|
|
771
771
|
"border": {
|