@primer/primitives 11.7.0 → 11.7.1-rc.ef267e0e

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.
Files changed (35) hide show
  1. package/dist/build/platforms/css.js +22 -4
  2. package/dist/build/transformers/figmaAttributes.js +6 -4
  3. package/dist/css/functional/themes/dark-colorblind-high-contrast.css +54 -54
  4. package/dist/css/functional/themes/dark-colorblind.css +54 -54
  5. package/dist/css/functional/themes/dark-dimmed-high-contrast.css +54 -54
  6. package/dist/css/functional/themes/dark-dimmed.css +54 -54
  7. package/dist/css/functional/themes/dark-high-contrast.css +54 -54
  8. package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +54 -54
  9. package/dist/css/functional/themes/dark-tritanopia.css +54 -54
  10. package/dist/css/functional/themes/dark.css +54 -54
  11. package/dist/css/functional/themes/light-colorblind-high-contrast.css +54 -54
  12. package/dist/css/functional/themes/light-colorblind.css +54 -54
  13. package/dist/css/functional/themes/light-high-contrast.css +54 -54
  14. package/dist/css/functional/themes/light-tritanopia-high-contrast.css +54 -54
  15. package/dist/css/functional/themes/light-tritanopia.css +54 -54
  16. package/dist/css/functional/themes/light.css +54 -54
  17. package/dist/figma/figma.json +6 -6
  18. package/dist/figma/scales/dark-dimmed.json +629 -629
  19. package/dist/figma/scales/dark-high-constrast.json +628 -628
  20. package/dist/figma/scales/light-high-constrast.json +626 -626
  21. package/dist/internalCss/dark-colorblind-high-contrast.css +54 -54
  22. package/dist/internalCss/dark-colorblind.css +54 -54
  23. package/dist/internalCss/dark-dimmed-high-contrast.css +54 -54
  24. package/dist/internalCss/dark-dimmed.css +54 -54
  25. package/dist/internalCss/dark-high-contrast.css +54 -54
  26. package/dist/internalCss/dark-tritanopia-high-contrast.css +54 -54
  27. package/dist/internalCss/dark-tritanopia.css +54 -54
  28. package/dist/internalCss/dark.css +54 -54
  29. package/dist/internalCss/light-colorblind-high-contrast.css +54 -54
  30. package/dist/internalCss/light-colorblind.css +54 -54
  31. package/dist/internalCss/light-high-contrast.css +54 -54
  32. package/dist/internalCss/light-tritanopia-high-contrast.css +54 -54
  33. package/dist/internalCss/light-tritanopia.css +54 -54
  34. package/dist/internalCss/light.css +54 -54
  35. package/package.json +15 -14
package/dist/css/functional/themes/light-colorblind.css CHANGED
@@ -654,25 +654,25 @@
654
654
  --bgColor-upsell-emphasis: var(--bgColor-done-emphasis); /** Strong background for prominent upsell elements */
655
655
  --bgColor-upsell-muted: var(--bgColor-done-muted); /** Subtle background for upsell and promotional content */
656
656
  --bgColor-white: #ffffff; /** Pure white background */
657
- --border-accent-emphasis: 0.0625rem solid #0969da;
658
- --border-accent-muted: 0.0625rem solid #54aeff66;
659
- --border-attention-emphasis: 0.0625rem solid #9a6700;
660
- --border-attention-muted: 0.0625rem solid #d4a72c66;
661
- --border-danger-emphasis: 0.0625rem solid #bc4c00;
662
- --border-danger-muted: 0.0625rem solid #fff1e5;
663
- --border-default: 0.0625rem solid #d1d9e0;
664
- --border-disabled: 0.0625rem solid #818b981a;
665
- --border-done-emphasis: 0.0625rem solid #8250df;
666
- --border-done-muted: 0.0625rem solid #c297ff66;
667
- --border-emphasis: 0.0625rem solid #818b98;
668
- --border-neutral-emphasis: 0.0625rem solid #59636e;
669
- --border-severe-emphasis: 0.0625rem solid #bc4c00;
670
- --border-severe-muted: 0.0625rem solid #fb8f4466;
671
- --border-sponsors-emphasis: 0.0625rem solid #bf3989;
672
- --border-sponsors-muted: 0.0625rem solid #ff80c866;
673
- --border-success-emphasis: 0.0625rem solid #0969da;
674
- --border-success-muted: 0.0625rem solid #ddf4ff;
675
- --border-transparent: 0.0625rem solid #ffffff00;
657
+ --border-accent-emphasis: var(--borderWidth-default) solid var(--borderColor-accent-emphasis);
658
+ --border-accent-muted: var(--borderWidth-default) solid var(--borderColor-accent-muted);
659
+ --border-attention-emphasis: var(--borderWidth-default) solid var(--borderColor-attention-emphasis);
660
+ --border-attention-muted: var(--borderWidth-default) solid var(--borderColor-attention-muted);
661
+ --border-danger-emphasis: var(--borderWidth-default) solid var(--borderColor-danger-emphasis);
662
+ --border-danger-muted: var(--borderWidth-default) solid var(--borderColor-danger-muted);
663
+ --border-default: var(--borderWidth-default) solid var(--borderColor-default);
664
+ --border-disabled: var(--borderWidth-default) solid var(--borderColor-disabled);
665
+ --border-done-emphasis: var(--borderWidth-default) solid var(--borderColor-done-emphasis);
666
+ --border-done-muted: var(--borderWidth-default) solid var(--borderColor-done-muted);
667
+ --border-emphasis: var(--borderWidth-default) solid var(--borderColor-emphasis);
668
+ --border-neutral-emphasis: var(--borderWidth-default) solid var(--borderColor-neutral-emphasis);
669
+ --border-severe-emphasis: var(--borderWidth-default) solid var(--borderColor-severe-emphasis);
670
+ --border-severe-muted: var(--borderWidth-default) solid var(--borderColor-severe-muted);
671
+ --border-sponsors-emphasis: var(--borderWidth-default) solid var(--borderColor-sponsors-emphasis);
672
+ --border-sponsors-muted: var(--borderWidth-default) solid var(--borderColor-sponsors-muted);
673
+ --border-success-emphasis: var(--borderWidth-default) solid var(--borderColor-success-emphasis);
674
+ --border-success-muted: var(--borderWidth-default) solid var(--borderColor-success-muted);
675
+ --border-transparent: var(--borderWidth-default) solid var(--borderColor-transparent);
676
676
  --borderColor-closed-emphasis: var(--borderColor-emphasis); /** Strong border for closed state badges */
677
677
  --borderColor-closed-muted: #d1d9e066; /** Subtle border for closed state indicators */
678
678
  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
@@ -815,14 +815,14 @@
815
815
  --avatar-borderColor: var(--borderColor-translucent);
816
816
  --border-closed-emphasis: var(--border-danger-emphasis);
817
817
  --border-closed-muted: var(--border-danger-muted);
818
- --border-draft-emphasis: 0.0625rem solid #59636e;
819
- --border-draft-muted: 0.0625rem solid #d1d9e066;
820
- --border-muted: 0.0625rem solid #d1d9e0b3;
818
+ --border-draft-emphasis: var(--borderWidth-default) solid var(--borderColor-draft-emphasis);
819
+ --border-draft-muted: var(--borderWidth-default) solid var(--borderColor-draft-muted);
820
+ --border-muted: var(--borderWidth-default) solid var(--borderColor-muted);
821
821
  --border-open-emphasis: var(--border-success-emphasis);
822
822
  --border-open-muted: var(--border-success-muted);
823
- --border-translucent: 0.0625rem solid #1f232826; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
824
- --border-upsell-emphasis: 0.0625rem solid #8250df;
825
- --border-upsell-muted: 0.0625rem solid #c297ff66;
823
+ --border-translucent: var(--borderWidth-default) solid var(--borderColor-translucent); /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
824
+ --border-upsell-emphasis: var(--borderWidth-default) solid var(--borderColor-upsell-emphasis);
825
+ --border-upsell-muted: var(--borderWidth-default) solid var(--borderColor-upsell-muted);
826
826
  --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
827
827
  --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
828
828
  --button-danger-borderColor-rest: var(--control-borderColor-rest);
@@ -882,13 +882,13 @@
882
882
  --diffBlob-deletionWord-fgColor: var(--fgColor-default);
883
883
  --diffBlob-hunkNum-fgColor-hover: var(--fgColor-default);
884
884
  --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
885
- --focus-outline: 0.125rem solid #0969da; /** Focus ring outline for keyboard navigation and accessibility. */
885
+ --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color); /** Focus ring outline for keyboard navigation and accessibility. */
886
886
  --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
887
887
  --overlay-borderColor: #d1d9e080;
888
888
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
889
889
  --tooltip-fgColor: var(--fgColor-onEmphasis);
890
890
  --underlineNav-borderColor-hover: var(--borderColor-muted);
891
- --border-neutral-muted: 0.0625rem solid #d1d9e0b3;
891
+ --border-neutral-muted: var(--borderWidth-default) solid var(--borderColor-neutral-muted);
892
892
  --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
893
893
  --button-default-borderColor-hover: var(--button-default-borderColor-rest);
894
894
  --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
@@ -1557,25 +1557,25 @@
1557
1557
  --bgColor-upsell-emphasis: var(--bgColor-done-emphasis); /** Strong background for prominent upsell elements */
1558
1558
  --bgColor-upsell-muted: var(--bgColor-done-muted); /** Subtle background for upsell and promotional content */
1559
1559
  --bgColor-white: #ffffff; /** Pure white background */
1560
- --border-accent-emphasis: 0.0625rem solid #0969da;
1561
- --border-accent-muted: 0.0625rem solid #54aeff66;
1562
- --border-attention-emphasis: 0.0625rem solid #9a6700;
1563
- --border-attention-muted: 0.0625rem solid #d4a72c66;
1564
- --border-danger-emphasis: 0.0625rem solid #bc4c00;
1565
- --border-danger-muted: 0.0625rem solid #fff1e5;
1566
- --border-default: 0.0625rem solid #d1d9e0;
1567
- --border-disabled: 0.0625rem solid #818b981a;
1568
- --border-done-emphasis: 0.0625rem solid #8250df;
1569
- --border-done-muted: 0.0625rem solid #c297ff66;
1570
- --border-emphasis: 0.0625rem solid #818b98;
1571
- --border-neutral-emphasis: 0.0625rem solid #59636e;
1572
- --border-severe-emphasis: 0.0625rem solid #bc4c00;
1573
- --border-severe-muted: 0.0625rem solid #fb8f4466;
1574
- --border-sponsors-emphasis: 0.0625rem solid #bf3989;
1575
- --border-sponsors-muted: 0.0625rem solid #ff80c866;
1576
- --border-success-emphasis: 0.0625rem solid #0969da;
1577
- --border-success-muted: 0.0625rem solid #ddf4ff;
1578
- --border-transparent: 0.0625rem solid #ffffff00;
1560
+ --border-accent-emphasis: var(--borderWidth-default) solid var(--borderColor-accent-emphasis);
1561
+ --border-accent-muted: var(--borderWidth-default) solid var(--borderColor-accent-muted);
1562
+ --border-attention-emphasis: var(--borderWidth-default) solid var(--borderColor-attention-emphasis);
1563
+ --border-attention-muted: var(--borderWidth-default) solid var(--borderColor-attention-muted);
1564
+ --border-danger-emphasis: var(--borderWidth-default) solid var(--borderColor-danger-emphasis);
1565
+ --border-danger-muted: var(--borderWidth-default) solid var(--borderColor-danger-muted);
1566
+ --border-default: var(--borderWidth-default) solid var(--borderColor-default);
1567
+ --border-disabled: var(--borderWidth-default) solid var(--borderColor-disabled);
1568
+ --border-done-emphasis: var(--borderWidth-default) solid var(--borderColor-done-emphasis);
1569
+ --border-done-muted: var(--borderWidth-default) solid var(--borderColor-done-muted);
1570
+ --border-emphasis: var(--borderWidth-default) solid var(--borderColor-emphasis);
1571
+ --border-neutral-emphasis: var(--borderWidth-default) solid var(--borderColor-neutral-emphasis);
1572
+ --border-severe-emphasis: var(--borderWidth-default) solid var(--borderColor-severe-emphasis);
1573
+ --border-severe-muted: var(--borderWidth-default) solid var(--borderColor-severe-muted);
1574
+ --border-sponsors-emphasis: var(--borderWidth-default) solid var(--borderColor-sponsors-emphasis);
1575
+ --border-sponsors-muted: var(--borderWidth-default) solid var(--borderColor-sponsors-muted);
1576
+ --border-success-emphasis: var(--borderWidth-default) solid var(--borderColor-success-emphasis);
1577
+ --border-success-muted: var(--borderWidth-default) solid var(--borderColor-success-muted);
1578
+ --border-transparent: var(--borderWidth-default) solid var(--borderColor-transparent);
1579
1579
  --borderColor-closed-emphasis: var(--borderColor-emphasis); /** Strong border for closed state badges */
1580
1580
  --borderColor-closed-muted: #d1d9e066; /** Subtle border for closed state indicators */
1581
1581
  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
@@ -1718,14 +1718,14 @@
1718
1718
  --avatar-borderColor: var(--borderColor-translucent);
1719
1719
  --border-closed-emphasis: var(--border-danger-emphasis);
1720
1720
  --border-closed-muted: var(--border-danger-muted);
1721
- --border-draft-emphasis: 0.0625rem solid #59636e;
1722
- --border-draft-muted: 0.0625rem solid #d1d9e066;
1723
- --border-muted: 0.0625rem solid #d1d9e0b3;
1721
+ --border-draft-emphasis: var(--borderWidth-default) solid var(--borderColor-draft-emphasis);
1722
+ --border-draft-muted: var(--borderWidth-default) solid var(--borderColor-draft-muted);
1723
+ --border-muted: var(--borderWidth-default) solid var(--borderColor-muted);
1724
1724
  --border-open-emphasis: var(--border-success-emphasis);
1725
1725
  --border-open-muted: var(--border-success-muted);
1726
- --border-translucent: 0.0625rem solid #1f232826; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
1727
- --border-upsell-emphasis: 0.0625rem solid #8250df;
1728
- --border-upsell-muted: 0.0625rem solid #c297ff66;
1726
+ --border-translucent: var(--borderWidth-default) solid var(--borderColor-translucent); /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
1727
+ --border-upsell-emphasis: var(--borderWidth-default) solid var(--borderColor-upsell-emphasis);
1728
+ --border-upsell-muted: var(--borderWidth-default) solid var(--borderColor-upsell-muted);
1729
1729
  --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
1730
1730
  --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
1731
1731
  --button-danger-borderColor-rest: var(--control-borderColor-rest);
@@ -1785,13 +1785,13 @@
1785
1785
  --diffBlob-deletionWord-fgColor: var(--fgColor-default);
1786
1786
  --diffBlob-hunkNum-fgColor-hover: var(--fgColor-default);
1787
1787
  --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
1788
- --focus-outline: 0.125rem solid #0969da; /** Focus ring outline for keyboard navigation and accessibility. */
1788
+ --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color); /** Focus ring outline for keyboard navigation and accessibility. */
1789
1789
  --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
1790
1790
  --overlay-borderColor: #d1d9e080;
1791
1791
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
1792
1792
  --tooltip-fgColor: var(--fgColor-onEmphasis);
1793
1793
  --underlineNav-borderColor-hover: var(--borderColor-muted);
1794
- --border-neutral-muted: 0.0625rem solid #d1d9e0b3;
1794
+ --border-neutral-muted: var(--borderWidth-default) solid var(--borderColor-neutral-muted);
1795
1795
  --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
1796
1796
  --button-default-borderColor-hover: var(--button-default-borderColor-rest);
1797
1797
  --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
package/dist/css/functional/themes/light-high-contrast.css CHANGED
@@ -643,25 +643,25 @@
643
643
  --bgColor-upsell-emphasis: var(--bgColor-done-emphasis); /** Strong background for prominent upsell elements */
644
644
  --bgColor-upsell-muted: var(--bgColor-done-muted); /** Subtle background for upsell and promotional content */
645
645
  --bgColor-white: #ffffff; /** Pure white background */
646
- --border-accent-emphasis: 0.0625rem solid #0349b4;
647
- --border-accent-muted: 0.0625rem solid #368cf9;
648
- --border-attention-emphasis: 0.0625rem solid #744500;
649
- --border-attention-muted: 0.0625rem solid #b58407;
650
- --border-danger-emphasis: 0.0625rem solid #a0111f;
651
- --border-danger-muted: 0.0625rem solid #ee5a5d;
652
- --border-default: 0.0625rem solid #454c54;
653
- --border-disabled: 0.0625rem solid #59636e1f;
654
- --border-done-emphasis: 0.0625rem solid #622cbc;
655
- --border-done-muted: 0.0625rem solid #a371f7;
656
- --border-neutral-emphasis: 0.0625rem solid #59636e;
657
- --border-severe-emphasis: 0.0625rem solid #873800;
658
- --border-severe-muted: 0.0625rem solid #dc6d1a;
659
- --border-sponsors-emphasis: 0.0625rem solid #971368;
660
- --border-sponsors-muted: 0.0625rem solid #ed4baf;
661
- --border-success-emphasis: 0.0625rem solid #055d20;
662
- --border-success-muted: 0.0625rem solid #26a148;
663
- --border-translucent: 0.0625rem solid #59636e; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
664
- --border-transparent: 0.0625rem solid #ffffff00;
646
+ --border-accent-emphasis: var(--borderWidth-default) solid var(--borderColor-accent-emphasis);
647
+ --border-accent-muted: var(--borderWidth-default) solid var(--borderColor-accent-muted);
648
+ --border-attention-emphasis: var(--borderWidth-default) solid var(--borderColor-attention-emphasis);
649
+ --border-attention-muted: var(--borderWidth-default) solid var(--borderColor-attention-muted);
650
+ --border-danger-emphasis: var(--borderWidth-default) solid var(--borderColor-danger-emphasis);
651
+ --border-danger-muted: var(--borderWidth-default) solid var(--borderColor-danger-muted);
652
+ --border-default: var(--borderWidth-default) solid var(--borderColor-default);
653
+ --border-disabled: var(--borderWidth-default) solid var(--borderColor-disabled);
654
+ --border-done-emphasis: var(--borderWidth-default) solid var(--borderColor-done-emphasis);
655
+ --border-done-muted: var(--borderWidth-default) solid var(--borderColor-done-muted);
656
+ --border-neutral-emphasis: var(--borderWidth-default) solid var(--borderColor-neutral-emphasis);
657
+ --border-severe-emphasis: var(--borderWidth-default) solid var(--borderColor-severe-emphasis);
658
+ --border-severe-muted: var(--borderWidth-default) solid var(--borderColor-severe-muted);
659
+ --border-sponsors-emphasis: var(--borderWidth-default) solid var(--borderColor-sponsors-emphasis);
660
+ --border-sponsors-muted: var(--borderWidth-default) solid var(--borderColor-sponsors-muted);
661
+ --border-success-emphasis: var(--borderWidth-default) solid var(--borderColor-success-emphasis);
662
+ --border-success-muted: var(--borderWidth-default) solid var(--borderColor-success-muted);
663
+ --border-translucent: var(--borderWidth-default) solid var(--borderColor-translucent); /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
664
+ --border-transparent: var(--borderWidth-default) solid var(--borderColor-transparent);
665
665
  --borderColor-closed-emphasis: var(--borderColor-danger-emphasis); /** Strong border for closed state badges */
666
666
  --borderColor-closed-muted: var(--borderColor-danger-muted); /** Subtle border for closed state indicators */
667
667
  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
@@ -820,13 +820,13 @@
820
820
  --avatar-borderColor: var(--borderColor-emphasis);
821
821
  --border-closed-emphasis: var(--border-danger-emphasis);
822
822
  --border-closed-muted: var(--border-danger-muted);
823
- --border-draft-emphasis: 0.0625rem solid #59636e;
824
- --border-emphasis: 0.0625rem solid #454c54;
825
- --border-muted: 0.0625rem solid #454c54;
823
+ --border-draft-emphasis: var(--borderWidth-default) solid var(--borderColor-draft-emphasis);
824
+ --border-emphasis: var(--borderWidth-default) solid var(--borderColor-emphasis);
825
+ --border-muted: var(--borderWidth-default) solid var(--borderColor-muted);
826
826
  --border-open-emphasis: var(--border-success-emphasis);
827
827
  --border-open-muted: var(--border-success-muted);
828
- --border-upsell-emphasis: 0.0625rem solid #622cbc;
829
- --border-upsell-muted: 0.0625rem solid #a371f7;
828
+ --border-upsell-emphasis: var(--borderWidth-default) solid var(--borderColor-upsell-emphasis);
829
+ --border-upsell-muted: var(--borderWidth-default) solid var(--borderColor-upsell-muted);
830
830
  --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
831
831
  --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
832
832
  --button-danger-borderColor-rest: var(--control-borderColor-rest);
@@ -886,7 +886,7 @@
886
886
  --diffBlob-expander-iconColor: var(--fgColor-default);
887
887
  --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
888
888
  --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
889
- --focus-outline: 0.125rem solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
889
+ --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color); /** Focus ring outline for keyboard navigation and accessibility. */
890
890
  --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
891
891
  --progressBar-track-bgColor: var(--bgColor-default);
892
892
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
@@ -896,14 +896,14 @@
896
896
  --shadow-floating-xlarge: 0 0 0 1px #454c54, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
897
897
  --tooltip-fgColor: var(--fgColor-onEmphasis);
898
898
  --underlineNav-borderColor-hover: var(--borderColor-muted);
899
- --border-neutral-muted: 0.0625rem solid #454c54;
899
+ --border-neutral-muted: var(--borderWidth-default) solid var(--borderColor-neutral-muted);
900
900
  --borderColor-draft-muted: var(--borderColor-neutral-muted); /** Subtle border for draft state indicators */
901
901
  --button-default-borderColor-hover: var(--button-default-borderColor-rest);
902
902
  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
903
903
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
904
904
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
905
905
  --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
906
- --border-draft-muted: 0.0625rem solid #454c54;
906
+ --border-draft-muted: var(--borderWidth-default) solid var(--borderColor-draft-muted);
907
907
  }
908
908
  @media (prefers-color-scheme: dark) {
909
909
  [data-color-mode][data-color-mode="auto"][data-dark-theme="light_high_contrast"] {
@@ -1546,25 +1546,25 @@
1546
1546
  --bgColor-upsell-emphasis: var(--bgColor-done-emphasis); /** Strong background for prominent upsell elements */
1547
1547
  --bgColor-upsell-muted: var(--bgColor-done-muted); /** Subtle background for upsell and promotional content */
1548
1548
  --bgColor-white: #ffffff; /** Pure white background */
1549
- --border-accent-emphasis: 0.0625rem solid #0349b4;
1550
- --border-accent-muted: 0.0625rem solid #368cf9;
1551
- --border-attention-emphasis: 0.0625rem solid #744500;
1552
- --border-attention-muted: 0.0625rem solid #b58407;
1553
- --border-danger-emphasis: 0.0625rem solid #a0111f;
1554
- --border-danger-muted: 0.0625rem solid #ee5a5d;
1555
- --border-default: 0.0625rem solid #454c54;
1556
- --border-disabled: 0.0625rem solid #59636e1f;
1557
- --border-done-emphasis: 0.0625rem solid #622cbc;
1558
- --border-done-muted: 0.0625rem solid #a371f7;
1559
- --border-neutral-emphasis: 0.0625rem solid #59636e;
1560
- --border-severe-emphasis: 0.0625rem solid #873800;
1561
- --border-severe-muted: 0.0625rem solid #dc6d1a;
1562
- --border-sponsors-emphasis: 0.0625rem solid #971368;
1563
- --border-sponsors-muted: 0.0625rem solid #ed4baf;
1564
- --border-success-emphasis: 0.0625rem solid #055d20;
1565
- --border-success-muted: 0.0625rem solid #26a148;
1566
- --border-translucent: 0.0625rem solid #59636e; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
1567
- --border-transparent: 0.0625rem solid #ffffff00;
1549
+ --border-accent-emphasis: var(--borderWidth-default) solid var(--borderColor-accent-emphasis);
1550
+ --border-accent-muted: var(--borderWidth-default) solid var(--borderColor-accent-muted);
1551
+ --border-attention-emphasis: var(--borderWidth-default) solid var(--borderColor-attention-emphasis);
1552
+ --border-attention-muted: var(--borderWidth-default) solid var(--borderColor-attention-muted);
1553
+ --border-danger-emphasis: var(--borderWidth-default) solid var(--borderColor-danger-emphasis);
1554
+ --border-danger-muted: var(--borderWidth-default) solid var(--borderColor-danger-muted);
1555
+ --border-default: var(--borderWidth-default) solid var(--borderColor-default);
1556
+ --border-disabled: var(--borderWidth-default) solid var(--borderColor-disabled);
1557
+ --border-done-emphasis: var(--borderWidth-default) solid var(--borderColor-done-emphasis);
1558
+ --border-done-muted: var(--borderWidth-default) solid var(--borderColor-done-muted);
1559
+ --border-neutral-emphasis: var(--borderWidth-default) solid var(--borderColor-neutral-emphasis);
1560
+ --border-severe-emphasis: var(--borderWidth-default) solid var(--borderColor-severe-emphasis);
1561
+ --border-severe-muted: var(--borderWidth-default) solid var(--borderColor-severe-muted);
1562
+ --border-sponsors-emphasis: var(--borderWidth-default) solid var(--borderColor-sponsors-emphasis);
1563
+ --border-sponsors-muted: var(--borderWidth-default) solid var(--borderColor-sponsors-muted);
1564
+ --border-success-emphasis: var(--borderWidth-default) solid var(--borderColor-success-emphasis);
1565
+ --border-success-muted: var(--borderWidth-default) solid var(--borderColor-success-muted);
1566
+ --border-translucent: var(--borderWidth-default) solid var(--borderColor-translucent); /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
1567
+ --border-transparent: var(--borderWidth-default) solid var(--borderColor-transparent);
1568
1568
  --borderColor-closed-emphasis: var(--borderColor-danger-emphasis); /** Strong border for closed state badges */
1569
1569
  --borderColor-closed-muted: var(--borderColor-danger-muted); /** Subtle border for closed state indicators */
1570
1570
  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
@@ -1723,13 +1723,13 @@
1723
1723
  --avatar-borderColor: var(--borderColor-emphasis);
1724
1724
  --border-closed-emphasis: var(--border-danger-emphasis);
1725
1725
  --border-closed-muted: var(--border-danger-muted);
1726
- --border-draft-emphasis: 0.0625rem solid #59636e;
1727
- --border-emphasis: 0.0625rem solid #454c54;
1728
- --border-muted: 0.0625rem solid #454c54;
1726
+ --border-draft-emphasis: var(--borderWidth-default) solid var(--borderColor-draft-emphasis);
1727
+ --border-emphasis: var(--borderWidth-default) solid var(--borderColor-emphasis);
1728
+ --border-muted: var(--borderWidth-default) solid var(--borderColor-muted);
1729
1729
  --border-open-emphasis: var(--border-success-emphasis);
1730
1730
  --border-open-muted: var(--border-success-muted);
1731
- --border-upsell-emphasis: 0.0625rem solid #622cbc;
1732
- --border-upsell-muted: 0.0625rem solid #a371f7;
1731
+ --border-upsell-emphasis: var(--borderWidth-default) solid var(--borderColor-upsell-emphasis);
1732
+ --border-upsell-muted: var(--borderWidth-default) solid var(--borderColor-upsell-muted);
1733
1733
  --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
1734
1734
  --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
1735
1735
  --button-danger-borderColor-rest: var(--control-borderColor-rest);
@@ -1789,7 +1789,7 @@
1789
1789
  --diffBlob-expander-iconColor: var(--fgColor-default);
1790
1790
  --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
1791
1791
  --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
1792
- --focus-outline: 0.125rem solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
1792
+ --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color); /** Focus ring outline for keyboard navigation and accessibility. */
1793
1793
  --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
1794
1794
  --progressBar-track-bgColor: var(--bgColor-default);
1795
1795
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
@@ -1799,13 +1799,13 @@
1799
1799
  --shadow-floating-xlarge: 0 0 0 1px #454c54, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
1800
1800
  --tooltip-fgColor: var(--fgColor-onEmphasis);
1801
1801
  --underlineNav-borderColor-hover: var(--borderColor-muted);
1802
- --border-neutral-muted: 0.0625rem solid #454c54;
1802
+ --border-neutral-muted: var(--borderWidth-default) solid var(--borderColor-neutral-muted);
1803
1803
  --borderColor-draft-muted: var(--borderColor-neutral-muted); /** Subtle border for draft state indicators */
1804
1804
  --button-default-borderColor-hover: var(--button-default-borderColor-rest);
1805
1805
  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
1806
1806
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
1807
1807
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
1808
1808
  --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
1809
- --border-draft-muted: 0.0625rem solid #454c54;
1809
+ --border-draft-muted: var(--borderWidth-default) solid var(--borderColor-draft-muted);
1810
1810
  }
1811
1811
  }
package/dist/css/functional/themes/light-tritanopia-high-contrast.css CHANGED
@@ -639,25 +639,25 @@
639
639
  --bgColor-upsell-emphasis: var(--bgColor-done-emphasis); /** Strong background for prominent upsell elements */
640
640
  --bgColor-upsell-muted: var(--bgColor-done-muted); /** Subtle background for upsell and promotional content */
641
641
  --bgColor-white: #ffffff; /** Pure white background */
642
- --border-accent-emphasis: 0.0625rem solid #0349b4;
643
- --border-accent-muted: 0.0625rem solid #368cf9;
644
- --border-attention-emphasis: 0.0625rem solid #744500;
645
- --border-attention-muted: 0.0625rem solid #b58407;
646
- --border-danger-emphasis: 0.0625rem solid #a0111f;
647
- --border-danger-muted: 0.0625rem solid #ee5a5d;
648
- --border-default: 0.0625rem solid #454c54;
649
- --border-disabled: 0.0625rem solid #59636e1f;
650
- --border-done-emphasis: 0.0625rem solid #622cbc;
651
- --border-done-muted: 0.0625rem solid #a371f7;
652
- --border-neutral-emphasis: 0.0625rem solid #59636e;
653
- --border-severe-emphasis: 0.0625rem solid #a0111f;
654
- --border-severe-muted: 0.0625rem solid #ee5a5d;
655
- --border-sponsors-emphasis: 0.0625rem solid #971368;
656
- --border-sponsors-muted: 0.0625rem solid #ed4baf;
657
- --border-success-emphasis: 0.0625rem solid #0349b4;
658
- --border-success-muted: 0.0625rem solid #368cf9;
659
- --border-translucent: 0.0625rem solid #59636e; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
660
- --border-transparent: 0.0625rem solid #ffffff00;
642
+ --border-accent-emphasis: var(--borderWidth-default) solid var(--borderColor-accent-emphasis);
643
+ --border-accent-muted: var(--borderWidth-default) solid var(--borderColor-accent-muted);
644
+ --border-attention-emphasis: var(--borderWidth-default) solid var(--borderColor-attention-emphasis);
645
+ --border-attention-muted: var(--borderWidth-default) solid var(--borderColor-attention-muted);
646
+ --border-danger-emphasis: var(--borderWidth-default) solid var(--borderColor-danger-emphasis);
647
+ --border-danger-muted: var(--borderWidth-default) solid var(--borderColor-danger-muted);
648
+ --border-default: var(--borderWidth-default) solid var(--borderColor-default);
649
+ --border-disabled: var(--borderWidth-default) solid var(--borderColor-disabled);
650
+ --border-done-emphasis: var(--borderWidth-default) solid var(--borderColor-done-emphasis);
651
+ --border-done-muted: var(--borderWidth-default) solid var(--borderColor-done-muted);
652
+ --border-neutral-emphasis: var(--borderWidth-default) solid var(--borderColor-neutral-emphasis);
653
+ --border-severe-emphasis: var(--borderWidth-default) solid var(--borderColor-severe-emphasis);
654
+ --border-severe-muted: var(--borderWidth-default) solid var(--borderColor-severe-muted);
655
+ --border-sponsors-emphasis: var(--borderWidth-default) solid var(--borderColor-sponsors-emphasis);
656
+ --border-sponsors-muted: var(--borderWidth-default) solid var(--borderColor-sponsors-muted);
657
+ --border-success-emphasis: var(--borderWidth-default) solid var(--borderColor-success-emphasis);
658
+ --border-success-muted: var(--borderWidth-default) solid var(--borderColor-success-muted);
659
+ --border-translucent: var(--borderWidth-default) solid var(--borderColor-translucent); /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
660
+ --border-transparent: var(--borderWidth-default) solid var(--borderColor-transparent);
661
661
  --borderColor-closed-muted: var(--borderColor-default); /** Subtle border for closed state indicators */
662
662
  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
663
663
  --borderColor-draft-muted: var(--borderColor-default); /** Subtle border for draft state indicators */
@@ -818,14 +818,14 @@
818
818
  --avatar-borderColor: var(--borderColor-emphasis);
819
819
  --border-closed-emphasis: var(--border-danger-emphasis);
820
820
  --border-closed-muted: var(--border-danger-muted);
821
- --border-draft-emphasis: 0.0625rem solid #59636e;
822
- --border-draft-muted: 0.0625rem solid #454c54;
823
- --border-emphasis: 0.0625rem solid #454c54;
824
- --border-muted: 0.0625rem solid #454c54;
821
+ --border-draft-emphasis: var(--borderWidth-default) solid var(--borderColor-draft-emphasis);
822
+ --border-draft-muted: var(--borderWidth-default) solid var(--borderColor-draft-muted);
823
+ --border-emphasis: var(--borderWidth-default) solid var(--borderColor-emphasis);
824
+ --border-muted: var(--borderWidth-default) solid var(--borderColor-muted);
825
825
  --border-open-emphasis: var(--border-success-emphasis);
826
826
  --border-open-muted: var(--border-success-muted);
827
- --border-upsell-emphasis: 0.0625rem solid #622cbc;
828
- --border-upsell-muted: 0.0625rem solid #a371f7;
827
+ --border-upsell-emphasis: var(--borderWidth-default) solid var(--borderColor-upsell-emphasis);
828
+ --border-upsell-muted: var(--borderWidth-default) solid var(--borderColor-upsell-muted);
829
829
  --borderColor-closed-emphasis: var(--borderColor-emphasis); /** Strong border for closed state badges */
830
830
  --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
831
831
  --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
@@ -888,7 +888,7 @@
888
888
  --diffBlob-expander-iconColor: var(--fgColor-default);
889
889
  --diffBlob-hunkNum-fgColor-hover: var(--fgColor-default);
890
890
  --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
891
- --focus-outline: 0.125rem solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
891
+ --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color); /** Focus ring outline for keyboard navigation and accessibility. */
892
892
  --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
893
893
  --progressBar-track-bgColor: var(--bgColor-default);
894
894
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
@@ -898,7 +898,7 @@
898
898
  --shadow-floating-xlarge: 0 0 0 1px #454c54, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
899
899
  --tooltip-fgColor: var(--fgColor-onEmphasis);
900
900
  --underlineNav-borderColor-hover: var(--borderColor-muted);
901
- --border-neutral-muted: 0.0625rem solid #454c54;
901
+ --border-neutral-muted: var(--borderWidth-default) solid var(--borderColor-neutral-muted);
902
902
  --button-default-borderColor-hover: var(--button-default-borderColor-rest);
903
903
  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
904
904
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
@@ -1542,25 +1542,25 @@
1542
1542
  --bgColor-upsell-emphasis: var(--bgColor-done-emphasis); /** Strong background for prominent upsell elements */
1543
1543
  --bgColor-upsell-muted: var(--bgColor-done-muted); /** Subtle background for upsell and promotional content */
1544
1544
  --bgColor-white: #ffffff; /** Pure white background */
1545
- --border-accent-emphasis: 0.0625rem solid #0349b4;
1546
- --border-accent-muted: 0.0625rem solid #368cf9;
1547
- --border-attention-emphasis: 0.0625rem solid #744500;
1548
- --border-attention-muted: 0.0625rem solid #b58407;
1549
- --border-danger-emphasis: 0.0625rem solid #a0111f;
1550
- --border-danger-muted: 0.0625rem solid #ee5a5d;
1551
- --border-default: 0.0625rem solid #454c54;
1552
- --border-disabled: 0.0625rem solid #59636e1f;
1553
- --border-done-emphasis: 0.0625rem solid #622cbc;
1554
- --border-done-muted: 0.0625rem solid #a371f7;
1555
- --border-neutral-emphasis: 0.0625rem solid #59636e;
1556
- --border-severe-emphasis: 0.0625rem solid #a0111f;
1557
- --border-severe-muted: 0.0625rem solid #ee5a5d;
1558
- --border-sponsors-emphasis: 0.0625rem solid #971368;
1559
- --border-sponsors-muted: 0.0625rem solid #ed4baf;
1560
- --border-success-emphasis: 0.0625rem solid #0349b4;
1561
- --border-success-muted: 0.0625rem solid #368cf9;
1562
- --border-translucent: 0.0625rem solid #59636e; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
1563
- --border-transparent: 0.0625rem solid #ffffff00;
1545
+ --border-accent-emphasis: var(--borderWidth-default) solid var(--borderColor-accent-emphasis);
1546
+ --border-accent-muted: var(--borderWidth-default) solid var(--borderColor-accent-muted);
1547
+ --border-attention-emphasis: var(--borderWidth-default) solid var(--borderColor-attention-emphasis);
1548
+ --border-attention-muted: var(--borderWidth-default) solid var(--borderColor-attention-muted);
1549
+ --border-danger-emphasis: var(--borderWidth-default) solid var(--borderColor-danger-emphasis);
1550
+ --border-danger-muted: var(--borderWidth-default) solid var(--borderColor-danger-muted);
1551
+ --border-default: var(--borderWidth-default) solid var(--borderColor-default);
1552
+ --border-disabled: var(--borderWidth-default) solid var(--borderColor-disabled);
1553
+ --border-done-emphasis: var(--borderWidth-default) solid var(--borderColor-done-emphasis);
1554
+ --border-done-muted: var(--borderWidth-default) solid var(--borderColor-done-muted);
1555
+ --border-neutral-emphasis: var(--borderWidth-default) solid var(--borderColor-neutral-emphasis);
1556
+ --border-severe-emphasis: var(--borderWidth-default) solid var(--borderColor-severe-emphasis);
1557
+ --border-severe-muted: var(--borderWidth-default) solid var(--borderColor-severe-muted);
1558
+ --border-sponsors-emphasis: var(--borderWidth-default) solid var(--borderColor-sponsors-emphasis);
1559
+ --border-sponsors-muted: var(--borderWidth-default) solid var(--borderColor-sponsors-muted);
1560
+ --border-success-emphasis: var(--borderWidth-default) solid var(--borderColor-success-emphasis);
1561
+ --border-success-muted: var(--borderWidth-default) solid var(--borderColor-success-muted);
1562
+ --border-translucent: var(--borderWidth-default) solid var(--borderColor-translucent); /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
1563
+ --border-transparent: var(--borderWidth-default) solid var(--borderColor-transparent);
1564
1564
  --borderColor-closed-muted: var(--borderColor-default); /** Subtle border for closed state indicators */
1565
1565
  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
1566
1566
  --borderColor-draft-muted: var(--borderColor-default); /** Subtle border for draft state indicators */
@@ -1721,14 +1721,14 @@
1721
1721
  --avatar-borderColor: var(--borderColor-emphasis);
1722
1722
  --border-closed-emphasis: var(--border-danger-emphasis);
1723
1723
  --border-closed-muted: var(--border-danger-muted);
1724
- --border-draft-emphasis: 0.0625rem solid #59636e;
1725
- --border-draft-muted: 0.0625rem solid #454c54;
1726
- --border-emphasis: 0.0625rem solid #454c54;
1727
- --border-muted: 0.0625rem solid #454c54;
1724
+ --border-draft-emphasis: var(--borderWidth-default) solid var(--borderColor-draft-emphasis);
1725
+ --border-draft-muted: var(--borderWidth-default) solid var(--borderColor-draft-muted);
1726
+ --border-emphasis: var(--borderWidth-default) solid var(--borderColor-emphasis);
1727
+ --border-muted: var(--borderWidth-default) solid var(--borderColor-muted);
1728
1728
  --border-open-emphasis: var(--border-success-emphasis);
1729
1729
  --border-open-muted: var(--border-success-muted);
1730
- --border-upsell-emphasis: 0.0625rem solid #622cbc;
1731
- --border-upsell-muted: 0.0625rem solid #a371f7;
1730
+ --border-upsell-emphasis: var(--borderWidth-default) solid var(--borderColor-upsell-emphasis);
1731
+ --border-upsell-muted: var(--borderWidth-default) solid var(--borderColor-upsell-muted);
1732
1732
  --borderColor-closed-emphasis: var(--borderColor-emphasis); /** Strong border for closed state badges */
1733
1733
  --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
1734
1734
  --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
@@ -1791,7 +1791,7 @@
1791
1791
  --diffBlob-expander-iconColor: var(--fgColor-default);
1792
1792
  --diffBlob-hunkNum-fgColor-hover: var(--fgColor-default);
1793
1793
  --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
1794
- --focus-outline: 0.125rem solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
1794
+ --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color); /** Focus ring outline for keyboard navigation and accessibility. */
1795
1795
  --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
1796
1796
  --progressBar-track-bgColor: var(--bgColor-default);
1797
1797
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
@@ -1801,7 +1801,7 @@
1801
1801
  --shadow-floating-xlarge: 0 0 0 1px #454c54, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
1802
1802
  --tooltip-fgColor: var(--fgColor-onEmphasis);
1803
1803
  --underlineNav-borderColor-hover: var(--borderColor-muted);
1804
- --border-neutral-muted: 0.0625rem solid #454c54;
1804
+ --border-neutral-muted: var(--borderWidth-default) solid var(--borderColor-neutral-muted);
1805
1805
  --button-default-borderColor-hover: var(--button-default-borderColor-rest);
1806
1806
  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
1807
1807
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);