@primer/primitives 0.0.0-20260408122021 → 0.0.0-20260409045037

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 (80) hide show
  1. package/DESIGN_TOKENS_SPEC.md +10 -6
  2. package/dist/css/functional/size/border.css +2 -0
  3. package/dist/css/functional/themes/dark-colorblind-high-contrast.css +4 -14
  4. package/dist/css/functional/themes/dark-colorblind.css +4 -14
  5. package/dist/css/functional/themes/dark-dimmed-high-contrast.css +4 -14
  6. package/dist/css/functional/themes/dark-dimmed.css +4 -14
  7. package/dist/css/functional/themes/dark-high-contrast.css +4 -14
  8. package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +4 -14
  9. package/dist/css/functional/themes/dark-tritanopia.css +4 -14
  10. package/dist/css/functional/themes/dark.css +4 -14
  11. package/dist/css/functional/themes/light-colorblind-high-contrast.css +4 -14
  12. package/dist/css/functional/themes/light-colorblind.css +4 -14
  13. package/dist/css/functional/themes/light-high-contrast.css +32 -42
  14. package/dist/css/functional/themes/light-tritanopia-high-contrast.css +4 -14
  15. package/dist/css/functional/themes/light-tritanopia.css +4 -14
  16. package/dist/css/functional/themes/light.css +4 -14
  17. package/dist/docs/functional/size/border.json +72 -0
  18. package/dist/docs/functional/themes/dark-colorblind-high-contrast.json +17 -181
  19. package/dist/docs/functional/themes/dark-colorblind.json +17 -181
  20. package/dist/docs/functional/themes/dark-dimmed-high-contrast.json +17 -181
  21. package/dist/docs/functional/themes/dark-dimmed.json +17 -181
  22. package/dist/docs/functional/themes/dark-high-contrast.json +17 -181
  23. package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json +17 -181
  24. package/dist/docs/functional/themes/dark-tritanopia.json +17 -181
  25. package/dist/docs/functional/themes/dark.json +17 -181
  26. package/dist/docs/functional/themes/light-colorblind-high-contrast.json +17 -181
  27. package/dist/docs/functional/themes/light-colorblind.json +17 -181
  28. package/dist/docs/functional/themes/light-high-contrast.json +42 -206
  29. package/dist/docs/functional/themes/light-tritanopia-high-contrast.json +17 -181
  30. package/dist/docs/functional/themes/light-tritanopia.json +17 -181
  31. package/dist/docs/functional/themes/light.json +17 -181
  32. package/dist/fallbacks/color-fallbacks.json +0 -1
  33. package/dist/fallbacks/functional/size/border.json +3 -1
  34. package/dist/figma/dimension/dimension.json +22 -0
  35. package/dist/figma/figma.json +1 -10
  36. package/dist/figma/themes/dark-colorblind.json +17 -80
  37. package/dist/figma/themes/dark-dimmed.json +17 -80
  38. package/dist/figma/themes/dark-high-contrast.json +17 -80
  39. package/dist/figma/themes/dark-tritanopia.json +17 -80
  40. package/dist/figma/themes/dark.json +17 -80
  41. package/dist/figma/themes/light-colorblind.json +17 -80
  42. package/dist/figma/themes/light-high-contrast.json +59 -125
  43. package/dist/figma/themes/light-tritanopia.json +17 -80
  44. package/dist/figma/themes/light.json +17 -80
  45. package/dist/internalCss/dark-colorblind-high-contrast.css +8 -14
  46. package/dist/internalCss/dark-colorblind.css +8 -14
  47. package/dist/internalCss/dark-dimmed-high-contrast.css +8 -14
  48. package/dist/internalCss/dark-dimmed.css +8 -14
  49. package/dist/internalCss/dark-high-contrast.css +8 -14
  50. package/dist/internalCss/dark-tritanopia-high-contrast.css +8 -14
  51. package/dist/internalCss/dark-tritanopia.css +8 -14
  52. package/dist/internalCss/dark.css +8 -14
  53. package/dist/internalCss/light-colorblind-high-contrast.css +8 -14
  54. package/dist/internalCss/light-colorblind.css +8 -14
  55. package/dist/internalCss/light-high-contrast.css +36 -42
  56. package/dist/internalCss/light-tritanopia-high-contrast.css +8 -14
  57. package/dist/internalCss/light-tritanopia.css +8 -14
  58. package/dist/internalCss/light.css +8 -14
  59. package/dist/styleLint/functional/size/border.json +72 -0
  60. package/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json +16 -184
  61. package/dist/styleLint/functional/themes/dark-colorblind.json +16 -184
  62. package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json +16 -184
  63. package/dist/styleLint/functional/themes/dark-dimmed.json +16 -184
  64. package/dist/styleLint/functional/themes/dark-high-contrast.json +16 -184
  65. package/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json +16 -184
  66. package/dist/styleLint/functional/themes/dark-tritanopia.json +16 -184
  67. package/dist/styleLint/functional/themes/dark.json +16 -184
  68. package/dist/styleLint/functional/themes/light-colorblind-high-contrast.json +16 -184
  69. package/dist/styleLint/functional/themes/light-colorblind.json +16 -184
  70. package/dist/styleLint/functional/themes/light-high-contrast.json +41 -209
  71. package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json +16 -184
  72. package/dist/styleLint/functional/themes/light-tritanopia.json +16 -184
  73. package/dist/styleLint/functional/themes/light.json +16 -184
  74. package/package.json +1 -1
  75. package/src/tokens/fallback/color-fallbacks.json +0 -1
  76. package/src/tokens/functional/border/border.json5 +20 -0
  77. package/src/tokens/functional/color/fgColor.json5 +3 -3
  78. package/src/tokens/functional/color/focus.json5 +20 -0
  79. package/src/tokens/functional/size/border.json5 +30 -0
  80. package/src/tokens/component/focus.json5 +0 -104
package/DESIGN_TOKENS_SPEC.md CHANGED
@@ -400,16 +400,11 @@ Focus ring outline for keyboard navigation and accessibility.
400
400
  **U:** accessibility-indicator, focus-ring, keyboard-navigation
401
401
  **R:** Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls.
402
402
 
403
- ### focus-outline-color
403
+ ### focus-outlineColor
404
404
  Outline color for focus states on interactive elements
405
405
  **U:** accessibility-indicator, focus-ring, keyboard-navigation
406
406
  **R:** Use for focus outlines on interactive elements like buttons, links, and form controls. MUST be visible for keyboard navigation accessibility. Do NOT use for decorative borders or non-interactive elements.
407
407
 
408
- ### focus-outline-width
409
- Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements
410
- **U:** accessibility, focus-ring, keyboard-focus
411
- **R:** MUST use for all keyboard focus indicators. Required for WCAG 2.4.7 compliance.
412
-
413
408
  ## Font Stacks
414
409
 
415
410
  Font family tokens.
@@ -429,6 +424,15 @@ Display font stack for headings and titles. Same as sansSerif but semantically d
429
424
  **U:** display-text, heading, title
430
425
  **R:** Use for headings and display text. Prefer over sansSerif for titles.
431
426
 
427
+ ## Outline
428
+
429
+ Outline tokens for focus indicators.
430
+
431
+ ### outline-focus-width
432
+ Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements
433
+ **U:** accessibility, focus-ring, keyboard-focus
434
+ **R:** MUST use for all keyboard focus indicators. Required for WCAG 2.4.7 compliance.
435
+
432
436
  ## Overlay
433
437
 
434
438
  Tokens for modals, dialogs, popovers, and dropdown menus.
package/dist/css/functional/size/border.css CHANGED
@@ -2,6 +2,8 @@
2
2
  --borderWidth-thick: 0.125rem; /** Thick 2px border for emphasis. Use for focus indicators, selected states, or to emphasize important boundaries */
3
3
  --borderWidth-thicker: 0.25rem; /** Extra thick 4px border for maximum emphasis. Use sparingly for high-contrast focus indicators or critical visual separators */
4
4
  --borderWidth-thin: 0.0625rem; /** Standard 1px border width. Use for most borders, dividers, and outlines throughout the interface */
5
+ --outline-focus-offset: -0.125rem; /** Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds */
6
+ --outline-focus-width: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
5
7
  --borderWidth-default: var(--borderWidth-thin); /** Default border width for most UI elements. Alias of borderWidth.thin (1px) */
6
8
  --boxShadow-thick: inset 0 0 0 var(--borderWidth-thick); /** Thick shadow (2px) used instead of a border for emphasis without layout shift */
7
9
  --boxShadow-thicker: inset 0 0 0 var(--borderWidth-thicker); /** Thickest shadow (4px) used for high emphasis borders without layout shift. Use sparingly for maximum visual impact */
package/dist/css/functional/themes/dark-colorblind-high-contrast.css CHANGED
@@ -14,8 +14,6 @@
14
14
  --fgColor-accent: #74b9ff; /** Accent text for links and interactive elements */
15
15
  --fgColor-done: #d3abff; /** Text color for completed/done state indicators */
16
16
  --fgColor-sponsors: #ff90c8; /** Text color for GitHub Sponsors content */
17
- --focus-outline-offset: -0.125rem; /** Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds */
18
- --focus-outline-width: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
19
17
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
20
18
  --avatar-shadow: 0 0 0 2px #0d1117;
21
19
  --avatarStack-fade-bgColor-default: #3d444d;
@@ -633,8 +631,6 @@
633
631
  --label-yellow-fgColor-hover: #df9e11;
634
632
  --label-yellow-fgColor-rest: #d3910d;
635
633
  --menu-bgColor-active: #151b23;
636
- --outline-focus-offset: var(--focus-outline-offset); /** Deprecated. Use focus.outline-offset instead. */
637
- --outline-focus-width: var(--focus-outline-width); /** Deprecated. Use focus.outline-width instead. */
638
634
  --overlay-backdrop-bgColor: #d1d7e066;
639
635
  --progressBar-bgColor-neutral: #656c76;
640
636
  --reactionButton-selected-bgColor-rest: #5cacff33;
@@ -769,7 +765,7 @@
769
765
  --fgColor-onEmphasis: #ffffff; /** Text color for use on emphasis backgrounds */
770
766
  --fgColor-onInverse: #010409; /** Text color for use on inverse backgrounds */
771
767
  --fgColor-white: #ffffff; /** Pure white text */
772
- --focus-outline-color: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
768
+ --focus-outlineColor: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
773
769
  --header-fgColor-default: #ffffffb3;
774
770
  --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
775
771
  --label-blue-borderColor: var(--label-blue-fgColor-rest);
@@ -881,8 +877,7 @@
881
877
  --diffBlob-expander-iconColor: var(--fgColor-default);
882
878
  --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
883
879
  --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
884
- --focus-outline: 0.125rem solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
885
- --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
880
+ --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
886
881
  --page-header-bgColor: var(--bgColor-default);
887
882
  --progressBar-track-bgColor: var(--bgColor-inverse);
888
883
  --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
@@ -922,8 +917,6 @@
922
917
  --fgColor-accent: #74b9ff; /** Accent text for links and interactive elements */
923
918
  --fgColor-done: #d3abff; /** Text color for completed/done state indicators */
924
919
  --fgColor-sponsors: #ff90c8; /** Text color for GitHub Sponsors content */
925
- --focus-outline-offset: -0.125rem; /** Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds */
926
- --focus-outline-width: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
927
920
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
928
921
  --avatar-shadow: 0 0 0 2px #0d1117;
929
922
  --avatarStack-fade-bgColor-default: #3d444d;
@@ -1541,8 +1534,6 @@
1541
1534
  --label-yellow-fgColor-hover: #df9e11;
1542
1535
  --label-yellow-fgColor-rest: #d3910d;
1543
1536
  --menu-bgColor-active: #151b23;
1544
- --outline-focus-offset: var(--focus-outline-offset); /** Deprecated. Use focus.outline-offset instead. */
1545
- --outline-focus-width: var(--focus-outline-width); /** Deprecated. Use focus.outline-width instead. */
1546
1537
  --overlay-backdrop-bgColor: #d1d7e066;
1547
1538
  --progressBar-bgColor-neutral: #656c76;
1548
1539
  --reactionButton-selected-bgColor-rest: #5cacff33;
@@ -1677,7 +1668,7 @@
1677
1668
  --fgColor-onEmphasis: #ffffff; /** Text color for use on emphasis backgrounds */
1678
1669
  --fgColor-onInverse: #010409; /** Text color for use on inverse backgrounds */
1679
1670
  --fgColor-white: #ffffff; /** Pure white text */
1680
- --focus-outline-color: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
1671
+ --focus-outlineColor: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
1681
1672
  --header-fgColor-default: #ffffffb3;
1682
1673
  --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
1683
1674
  --label-blue-borderColor: var(--label-blue-fgColor-rest);
@@ -1789,8 +1780,7 @@
1789
1780
  --diffBlob-expander-iconColor: var(--fgColor-default);
1790
1781
  --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
1791
1782
  --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
1792
- --focus-outline: 0.125rem solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
1793
- --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
1783
+ --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
1794
1784
  --page-header-bgColor: var(--bgColor-default);
1795
1785
  --progressBar-track-bgColor: var(--bgColor-inverse);
1796
1786
  --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
package/dist/css/functional/themes/dark-colorblind.css CHANGED
@@ -12,8 +12,6 @@
12
12
  --control-checked-bgColor-active: #3685f3;
13
13
  --control-checked-bgColor-hover: #2a7aef;
14
14
  --fgColor-accent: #4493f8; /** Accent text for links and interactive elements */
15
- --focus-outline-offset: -0.125rem; /** Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds */
16
- --focus-outline-width: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
17
15
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
18
16
  --avatar-shadow: 0 0 0 2px #0d1117;
19
17
  --avatarStack-fade-bgColor-default: #3d444d;
@@ -652,8 +650,6 @@
652
650
  --label-yellow-fgColor-hover: #df9e11;
653
651
  --label-yellow-fgColor-rest: #d3910d;
654
652
  --menu-bgColor-active: #151b23;
655
- --outline-focus-offset: var(--focus-outline-offset); /** Deprecated. Use focus.outline-offset instead. */
656
- --outline-focus-width: var(--focus-outline-width); /** Deprecated. Use focus.outline-width instead. */
657
653
  --overlay-backdrop-bgColor: #21283066;
658
654
  --progressBar-track-borderColor: #00000000;
659
655
  --reactionButton-selected-bgColor-rest: #388bfd33;
@@ -808,7 +804,7 @@
808
804
  --fgColor-onInverse: #010409; /** Text color for use on inverse backgrounds */
809
805
  --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
810
806
  --fgColor-white: #ffffff; /** Pure white text */
811
- --focus-outline-color: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
807
+ --focus-outlineColor: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
812
808
  --header-fgColor-default: #ffffffb3;
813
809
  --overlay-bgColor: #010409;
814
810
  --page-header-bgColor: var(--bgColor-default);
@@ -887,8 +883,7 @@
887
883
  --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
888
884
  --dashboard-bgColor: var(--bgColor-inset);
889
885
  --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
890
- --focus-outline: 0.125rem solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
891
- --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
886
+ --focus-outline: 2px solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
892
887
  --overlay-borderColor: var(--borderColor-muted);
893
888
  --tooltip-fgColor: var(--fgColor-onEmphasis);
894
889
  --border-draft-emphasis: 0.0625rem solid #656c76;
@@ -920,8 +915,6 @@
920
915
  --control-checked-bgColor-active: #3685f3;
921
916
  --control-checked-bgColor-hover: #2a7aef;
922
917
  --fgColor-accent: #4493f8; /** Accent text for links and interactive elements */
923
- --focus-outline-offset: -0.125rem; /** Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds */
924
- --focus-outline-width: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
925
918
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
926
919
  --avatar-shadow: 0 0 0 2px #0d1117;
927
920
  --avatarStack-fade-bgColor-default: #3d444d;
@@ -1560,8 +1553,6 @@
1560
1553
  --label-yellow-fgColor-hover: #df9e11;
1561
1554
  --label-yellow-fgColor-rest: #d3910d;
1562
1555
  --menu-bgColor-active: #151b23;
1563
- --outline-focus-offset: var(--focus-outline-offset); /** Deprecated. Use focus.outline-offset instead. */
1564
- --outline-focus-width: var(--focus-outline-width); /** Deprecated. Use focus.outline-width instead. */
1565
1556
  --overlay-backdrop-bgColor: #21283066;
1566
1557
  --progressBar-track-borderColor: #00000000;
1567
1558
  --reactionButton-selected-bgColor-rest: #388bfd33;
@@ -1716,7 +1707,7 @@
1716
1707
  --fgColor-onInverse: #010409; /** Text color for use on inverse backgrounds */
1717
1708
  --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
1718
1709
  --fgColor-white: #ffffff; /** Pure white text */
1719
- --focus-outline-color: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
1710
+ --focus-outlineColor: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
1720
1711
  --header-fgColor-default: #ffffffb3;
1721
1712
  --overlay-bgColor: #010409;
1722
1713
  --page-header-bgColor: var(--bgColor-default);
@@ -1795,8 +1786,7 @@
1795
1786
  --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
1796
1787
  --dashboard-bgColor: var(--bgColor-inset);
1797
1788
  --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
1798
- --focus-outline: 0.125rem solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
1799
- --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
1789
+ --focus-outline: 2px solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
1800
1790
  --overlay-borderColor: var(--borderColor-muted);
1801
1791
  --tooltip-fgColor: var(--fgColor-onEmphasis);
1802
1792
  --border-draft-emphasis: 0.0625rem solid #656c76;
package/dist/css/functional/themes/dark-dimmed-high-contrast.css CHANGED
@@ -17,8 +17,6 @@
17
17
  --control-checked-bgColor-hover: #2b64c1;
18
18
  --control-danger-bgColor-active: #c51120;
19
19
  --fgColor-onEmphasis: #ffffff; /** Text color for use on emphasis backgrounds */
20
- --focus-outline-offset: -0.125rem; /** Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds */
21
- --focus-outline-width: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
22
20
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
23
21
  --avatar-shadow: 0 0 0 2px #0d1117;
24
22
  --avatarStack-fade-bgColor-default: #3d444d;
@@ -643,8 +641,6 @@
643
641
  --label-yellow-fgColor-hover: #df9e11;
644
642
  --label-yellow-fgColor-rest: #d3910d;
645
643
  --menu-bgColor-active: #151b23;
646
- --outline-focus-offset: var(--focus-outline-offset); /** Deprecated. Use focus.outline-offset instead. */
647
- --outline-focus-width: var(--focus-outline-width); /** Deprecated. Use focus.outline-width instead. */
648
644
  --overlay-backdrop-bgColor: #9198a166;
649
645
  --overlay-bgColor: #262c36;
650
646
  --progressBar-bgColor-neutral: #656c76;
@@ -800,7 +796,7 @@
800
796
  --fgColor-open: var(--fgColor-success); /** Text color for open state indicators (issues, PRs) */
801
797
  --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
802
798
  --fgColor-white: #cdd9e5; /** Pure white text */
803
- --focus-outline-color: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
799
+ --focus-outlineColor: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
804
800
  --header-fgColor-default: #cdd9e5b3;
805
801
  --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
806
802
  --label-blue-borderColor: var(--label-blue-fgColor-rest);
@@ -883,8 +879,7 @@
883
879
  --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
884
880
  --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
885
881
  --controlTrack-borderColor-rest: var(--borderColor-emphasis);
886
- --focus-outline: 0.125rem solid #6cb6ff; /** Focus ring outline for keyboard navigation and accessibility. */
887
- --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
882
+ --focus-outline: 2px solid #6cb6ff; /** Focus ring outline for keyboard navigation and accessibility. */
888
883
  --progressBar-track-bgColor: var(--bgColor-inverse);
889
884
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
890
885
  --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
@@ -925,8 +920,6 @@
925
920
  --control-checked-bgColor-hover: #2b64c1;
926
921
  --control-danger-bgColor-active: #c51120;
927
922
  --fgColor-onEmphasis: #ffffff; /** Text color for use on emphasis backgrounds */
928
- --focus-outline-offset: -0.125rem; /** Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds */
929
- --focus-outline-width: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
930
923
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
931
924
  --avatar-shadow: 0 0 0 2px #0d1117;
932
925
  --avatarStack-fade-bgColor-default: #3d444d;
@@ -1551,8 +1544,6 @@
1551
1544
  --label-yellow-fgColor-hover: #df9e11;
1552
1545
  --label-yellow-fgColor-rest: #d3910d;
1553
1546
  --menu-bgColor-active: #151b23;
1554
- --outline-focus-offset: var(--focus-outline-offset); /** Deprecated. Use focus.outline-offset instead. */
1555
- --outline-focus-width: var(--focus-outline-width); /** Deprecated. Use focus.outline-width instead. */
1556
1547
  --overlay-backdrop-bgColor: #9198a166;
1557
1548
  --overlay-bgColor: #262c36;
1558
1549
  --progressBar-bgColor-neutral: #656c76;
@@ -1708,7 +1699,7 @@
1708
1699
  --fgColor-open: var(--fgColor-success); /** Text color for open state indicators (issues, PRs) */
1709
1700
  --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
1710
1701
  --fgColor-white: #cdd9e5; /** Pure white text */
1711
- --focus-outline-color: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
1702
+ --focus-outlineColor: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
1712
1703
  --header-fgColor-default: #cdd9e5b3;
1713
1704
  --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
1714
1705
  --label-blue-borderColor: var(--label-blue-fgColor-rest);
@@ -1791,8 +1782,7 @@
1791
1782
  --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
1792
1783
  --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
1793
1784
  --controlTrack-borderColor-rest: var(--borderColor-emphasis);
1794
- --focus-outline: 0.125rem solid #6cb6ff; /** Focus ring outline for keyboard navigation and accessibility. */
1795
- --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
1785
+ --focus-outline: 2px solid #6cb6ff; /** Focus ring outline for keyboard navigation and accessibility. */
1796
1786
  --progressBar-track-bgColor: var(--bgColor-inverse);
1797
1787
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
1798
1788
  --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
package/dist/css/functional/themes/dark-dimmed.css CHANGED
@@ -22,8 +22,6 @@
22
22
  --control-checked-borderColor-active: #3f7fdb;
23
23
  --control-checked-borderColor-hover: #3876d3;
24
24
  --fgColor-accent: #478be6; /** Accent text for links and interactive elements */
25
- --focus-outline-offset: -0.125rem; /** Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds */
26
- --focus-outline-width: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
27
25
  --reactionButton-selected-bgColor-hover: #4285e55c;
28
26
  --avatar-shadow: 0 0 0 2px #0d1117;
29
27
  --avatarStack-fade-bgColor-default: #3d444d;
@@ -663,8 +661,6 @@
663
661
  --label-yellow-fgColor-hover: #df9e11;
664
662
  --label-yellow-fgColor-rest: #d3910d;
665
663
  --menu-bgColor-active: #151b23;
666
- --outline-focus-offset: var(--focus-outline-offset); /** Deprecated. Use focus.outline-offset instead. */
667
- --outline-focus-width: var(--focus-outline-width); /** Deprecated. Use focus.outline-width instead. */
668
664
  --overlay-backdrop-bgColor: #262c3666;
669
665
  --overlay-bgColor: #2a313c;
670
666
  --overlay-borderColor: #3d444db3;
@@ -834,7 +830,7 @@
834
830
  --fgColor-open: var(--fgColor-success); /** Text color for open state indicators (issues, PRs) */
835
831
  --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
836
832
  --fgColor-white: #cdd9e5; /** Pure white text */
837
- --focus-outline-color: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
833
+ --focus-outlineColor: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
838
834
  --header-fgColor-default: #cdd9e5b3;
839
835
  --page-header-bgColor: var(--bgColor-default);
840
836
  --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
@@ -900,8 +896,7 @@
900
896
  --controlKnob-bgColor-disabled: var(--control-bgColor-disabled);
901
897
  --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
902
898
  --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
903
- --focus-outline: 0.125rem solid #316dca; /** Focus ring outline for keyboard navigation and accessibility. */
904
- --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
899
+ --focus-outline: 2px solid #316dca; /** Focus ring outline for keyboard navigation and accessibility. */
905
900
  --border-draft-emphasis: 0.0625rem solid #656c76;
906
901
  --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
907
902
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
@@ -930,8 +925,6 @@
930
925
  --control-checked-borderColor-active: #3f7fdb;
931
926
  --control-checked-borderColor-hover: #3876d3;
932
927
  --fgColor-accent: #478be6; /** Accent text for links and interactive elements */
933
- --focus-outline-offset: -0.125rem; /** Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds */
934
- --focus-outline-width: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
935
928
  --reactionButton-selected-bgColor-hover: #4285e55c;
936
929
  --avatar-shadow: 0 0 0 2px #0d1117;
937
930
  --avatarStack-fade-bgColor-default: #3d444d;
@@ -1571,8 +1564,6 @@
1571
1564
  --label-yellow-fgColor-hover: #df9e11;
1572
1565
  --label-yellow-fgColor-rest: #d3910d;
1573
1566
  --menu-bgColor-active: #151b23;
1574
- --outline-focus-offset: var(--focus-outline-offset); /** Deprecated. Use focus.outline-offset instead. */
1575
- --outline-focus-width: var(--focus-outline-width); /** Deprecated. Use focus.outline-width instead. */
1576
1567
  --overlay-backdrop-bgColor: #262c3666;
1577
1568
  --overlay-bgColor: #2a313c;
1578
1569
  --overlay-borderColor: #3d444db3;
@@ -1742,7 +1733,7 @@
1742
1733
  --fgColor-open: var(--fgColor-success); /** Text color for open state indicators (issues, PRs) */
1743
1734
  --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
1744
1735
  --fgColor-white: #cdd9e5; /** Pure white text */
1745
- --focus-outline-color: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
1736
+ --focus-outlineColor: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
1746
1737
  --header-fgColor-default: #cdd9e5b3;
1747
1738
  --page-header-bgColor: var(--bgColor-default);
1748
1739
  --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
@@ -1808,8 +1799,7 @@
1808
1799
  --controlKnob-bgColor-disabled: var(--control-bgColor-disabled);
1809
1800
  --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
1810
1801
  --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
1811
- --focus-outline: 0.125rem solid #316dca; /** Focus ring outline for keyboard navigation and accessibility. */
1812
- --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
1802
+ --focus-outline: 2px solid #316dca; /** Focus ring outline for keyboard navigation and accessibility. */
1813
1803
  --border-draft-emphasis: 0.0625rem solid #656c76;
1814
1804
  --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
1815
1805
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
package/dist/css/functional/themes/dark-high-contrast.css CHANGED
@@ -16,8 +16,6 @@
16
16
  --fgColor-done: #d3abff; /** Text color for completed/done state indicators */
17
17
  --fgColor-sponsors: #ff90c8; /** Text color for GitHub Sponsors content */
18
18
  --fgColor-success: #2bd853; /** Success text for positive feedback and completed states */
19
- --focus-outline-offset: -0.125rem; /** Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds */
20
- --focus-outline-width: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
21
19
  --reactionButton-selected-bgColor-hover: #5dadff5c;
22
20
  --avatar-shadow: 0 0 0 2px #0d1117;
23
21
  --avatarStack-fade-bgColor-default: #3d444d;
@@ -627,8 +625,6 @@
627
625
  --label-yellow-fgColor-hover: #df9e11;
628
626
  --label-yellow-fgColor-rest: #d3910d;
629
627
  --menu-bgColor-active: #151b23;
630
- --outline-focus-offset: var(--focus-outline-offset); /** Deprecated. Use focus.outline-offset instead. */
631
- --outline-focus-width: var(--focus-outline-width); /** Deprecated. Use focus.outline-width instead. */
632
628
  --overlay-backdrop-bgColor: #d1d7e066;
633
629
  --progressBar-bgColor-neutral: #656c76;
634
630
  --reactionButton-selected-bgColor-rest: #5cacff33;
@@ -769,7 +765,7 @@
769
765
  --fgColor-onEmphasis: #ffffff; /** Text color for use on emphasis backgrounds */
770
766
  --fgColor-onInverse: #010409; /** Text color for use on inverse backgrounds */
771
767
  --fgColor-white: #ffffff; /** Pure white text */
772
- --focus-outline-color: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
768
+ --focus-outlineColor: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
773
769
  --header-fgColor-default: #ffffffb3;
774
770
  --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
775
771
  --label-blue-borderColor: var(--label-blue-fgColor-rest);
@@ -879,8 +875,7 @@
879
875
  --diffBlob-expander-iconColor: var(--fgColor-default);
880
876
  --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
881
877
  --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
882
- --focus-outline: 0.125rem solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
883
- --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
878
+ --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
884
879
  --page-header-bgColor: var(--bgColor-default);
885
880
  --progressBar-track-bgColor: var(--bgColor-inverse);
886
881
  --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
@@ -924,8 +919,6 @@
924
919
  --fgColor-done: #d3abff; /** Text color for completed/done state indicators */
925
920
  --fgColor-sponsors: #ff90c8; /** Text color for GitHub Sponsors content */
926
921
  --fgColor-success: #2bd853; /** Success text for positive feedback and completed states */
927
- --focus-outline-offset: -0.125rem; /** Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds */
928
- --focus-outline-width: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
929
922
  --reactionButton-selected-bgColor-hover: #5dadff5c;
930
923
  --avatar-shadow: 0 0 0 2px #0d1117;
931
924
  --avatarStack-fade-bgColor-default: #3d444d;
@@ -1535,8 +1528,6 @@
1535
1528
  --label-yellow-fgColor-hover: #df9e11;
1536
1529
  --label-yellow-fgColor-rest: #d3910d;
1537
1530
  --menu-bgColor-active: #151b23;
1538
- --outline-focus-offset: var(--focus-outline-offset); /** Deprecated. Use focus.outline-offset instead. */
1539
- --outline-focus-width: var(--focus-outline-width); /** Deprecated. Use focus.outline-width instead. */
1540
1531
  --overlay-backdrop-bgColor: #d1d7e066;
1541
1532
  --progressBar-bgColor-neutral: #656c76;
1542
1533
  --reactionButton-selected-bgColor-rest: #5cacff33;
@@ -1677,7 +1668,7 @@
1677
1668
  --fgColor-onEmphasis: #ffffff; /** Text color for use on emphasis backgrounds */
1678
1669
  --fgColor-onInverse: #010409; /** Text color for use on inverse backgrounds */
1679
1670
  --fgColor-white: #ffffff; /** Pure white text */
1680
- --focus-outline-color: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
1671
+ --focus-outlineColor: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
1681
1672
  --header-fgColor-default: #ffffffb3;
1682
1673
  --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
1683
1674
  --label-blue-borderColor: var(--label-blue-fgColor-rest);
@@ -1787,8 +1778,7 @@
1787
1778
  --diffBlob-expander-iconColor: var(--fgColor-default);
1788
1779
  --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
1789
1780
  --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
1790
- --focus-outline: 0.125rem solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
1791
- --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
1781
+ --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
1792
1782
  --page-header-bgColor: var(--bgColor-default);
1793
1783
  --progressBar-track-bgColor: var(--bgColor-inverse);
1794
1784
  --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
package/dist/css/functional/themes/dark-tritanopia-high-contrast.css CHANGED
@@ -17,8 +17,6 @@
17
17
  --fgColor-accent: #74b9ff; /** Accent text for links and interactive elements */
18
18
  --fgColor-done: #d3abff; /** Text color for completed/done state indicators */
19
19
  --fgColor-sponsors: #ff90c8; /** Text color for GitHub Sponsors content */
20
- --focus-outline-offset: -0.125rem; /** Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds */
21
- --focus-outline-width: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
22
20
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
23
21
  --avatar-shadow: 0 0 0 2px #0d1117;
24
22
  --avatarStack-fade-bgColor-default: #3d444d;
@@ -633,8 +631,6 @@
633
631
  --label-yellow-fgColor-hover: #df9e11;
634
632
  --label-yellow-fgColor-rest: #d3910d;
635
633
  --menu-bgColor-active: #151b23;
636
- --outline-focus-offset: var(--focus-outline-offset); /** Deprecated. Use focus.outline-offset instead. */
637
- --outline-focus-width: var(--focus-outline-width); /** Deprecated. Use focus.outline-width instead. */
638
634
  --overlay-backdrop-bgColor: #d1d7e066;
639
635
  --progressBar-bgColor-neutral: #656c76;
640
636
  --reactionButton-selected-bgColor-rest: #5cacff33;
@@ -769,7 +765,7 @@
769
765
  --fgColor-onEmphasis: #ffffff; /** Text color for use on emphasis backgrounds */
770
766
  --fgColor-onInverse: #010409; /** Text color for use on inverse backgrounds */
771
767
  --fgColor-white: #ffffff; /** Pure white text */
772
- --focus-outline-color: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
768
+ --focus-outlineColor: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
773
769
  --header-fgColor-default: #ffffffb3;
774
770
  --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
775
771
  --label-blue-borderColor: var(--label-blue-fgColor-rest);
@@ -881,8 +877,7 @@
881
877
  --diffBlob-expander-iconColor: var(--fgColor-default);
882
878
  --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
883
879
  --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
884
- --focus-outline: 0.125rem solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
885
- --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
880
+ --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
886
881
  --page-header-bgColor: var(--bgColor-default);
887
882
  --progressBar-track-bgColor: var(--bgColor-inverse);
888
883
  --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
@@ -925,8 +920,6 @@
925
920
  --fgColor-accent: #74b9ff; /** Accent text for links and interactive elements */
926
921
  --fgColor-done: #d3abff; /** Text color for completed/done state indicators */
927
922
  --fgColor-sponsors: #ff90c8; /** Text color for GitHub Sponsors content */
928
- --focus-outline-offset: -0.125rem; /** Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds */
929
- --focus-outline-width: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
930
923
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
931
924
  --avatar-shadow: 0 0 0 2px #0d1117;
932
925
  --avatarStack-fade-bgColor-default: #3d444d;
@@ -1541,8 +1534,6 @@
1541
1534
  --label-yellow-fgColor-hover: #df9e11;
1542
1535
  --label-yellow-fgColor-rest: #d3910d;
1543
1536
  --menu-bgColor-active: #151b23;
1544
- --outline-focus-offset: var(--focus-outline-offset); /** Deprecated. Use focus.outline-offset instead. */
1545
- --outline-focus-width: var(--focus-outline-width); /** Deprecated. Use focus.outline-width instead. */
1546
1537
  --overlay-backdrop-bgColor: #d1d7e066;
1547
1538
  --progressBar-bgColor-neutral: #656c76;
1548
1539
  --reactionButton-selected-bgColor-rest: #5cacff33;
@@ -1677,7 +1668,7 @@
1677
1668
  --fgColor-onEmphasis: #ffffff; /** Text color for use on emphasis backgrounds */
1678
1669
  --fgColor-onInverse: #010409; /** Text color for use on inverse backgrounds */
1679
1670
  --fgColor-white: #ffffff; /** Pure white text */
1680
- --focus-outline-color: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
1671
+ --focus-outlineColor: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
1681
1672
  --header-fgColor-default: #ffffffb3;
1682
1673
  --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
1683
1674
  --label-blue-borderColor: var(--label-blue-fgColor-rest);
@@ -1789,8 +1780,7 @@
1789
1780
  --diffBlob-expander-iconColor: var(--fgColor-default);
1790
1781
  --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
1791
1782
  --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
1792
- --focus-outline: 0.125rem solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
1793
- --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
1783
+ --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
1794
1784
  --page-header-bgColor: var(--bgColor-default);
1795
1785
  --progressBar-track-bgColor: var(--bgColor-inverse);
1796
1786
  --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
package/dist/css/functional/themes/dark-tritanopia.css CHANGED
@@ -18,8 +18,6 @@
18
18
  --control-checked-bgColor-active: #3685f3;
19
19
  --control-checked-bgColor-hover: #2a7aef;
20
20
  --fgColor-accent: #4493f8; /** Accent text for links and interactive elements */
21
- --focus-outline-offset: -0.125rem; /** Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds */
22
- --focus-outline-width: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
23
21
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
24
22
  --avatar-shadow: 0 0 0 2px #0d1117;
25
23
  --avatarStack-fade-bgColor-default: #3d444d;
@@ -655,8 +653,6 @@
655
653
  --label-yellow-fgColor-hover: #df9e11;
656
654
  --label-yellow-fgColor-rest: #d3910d;
657
655
  --menu-bgColor-active: #151b23;
658
- --outline-focus-offset: var(--focus-outline-offset); /** Deprecated. Use focus.outline-offset instead. */
659
- --outline-focus-width: var(--focus-outline-width); /** Deprecated. Use focus.outline-width instead. */
660
656
  --overlay-backdrop-bgColor: #21283066;
661
657
  --progressBar-track-borderColor: #00000000;
662
658
  --reactionButton-selected-bgColor-rest: #388bfd33;
@@ -810,7 +806,7 @@
810
806
  --fgColor-onInverse: #010409; /** Text color for use on inverse backgrounds */
811
807
  --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
812
808
  --fgColor-white: #ffffff; /** Pure white text */
813
- --focus-outline-color: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
809
+ --focus-outlineColor: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
814
810
  --header-fgColor-default: #ffffffb3;
815
811
  --overlay-bgColor: #010409;
816
812
  --page-header-bgColor: var(--bgColor-default);
@@ -887,8 +883,7 @@
887
883
  --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
888
884
  --dashboard-bgColor: var(--bgColor-inset);
889
885
  --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
890
- --focus-outline: 0.125rem solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
891
- --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
886
+ --focus-outline: 2px solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
892
887
  --overlay-borderColor: var(--borderColor-muted);
893
888
  --tooltip-fgColor: var(--fgColor-onEmphasis);
894
889
  --border-draft-emphasis: 0.0625rem solid #656c76;
@@ -926,8 +921,6 @@
926
921
  --control-checked-bgColor-active: #3685f3;
927
922
  --control-checked-bgColor-hover: #2a7aef;
928
923
  --fgColor-accent: #4493f8; /** Accent text for links and interactive elements */
929
- --focus-outline-offset: -0.125rem; /** Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds */
930
- --focus-outline-width: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
931
924
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
932
925
  --avatar-shadow: 0 0 0 2px #0d1117;
933
926
  --avatarStack-fade-bgColor-default: #3d444d;
@@ -1563,8 +1556,6 @@
1563
1556
  --label-yellow-fgColor-hover: #df9e11;
1564
1557
  --label-yellow-fgColor-rest: #d3910d;
1565
1558
  --menu-bgColor-active: #151b23;
1566
- --outline-focus-offset: var(--focus-outline-offset); /** Deprecated. Use focus.outline-offset instead. */
1567
- --outline-focus-width: var(--focus-outline-width); /** Deprecated. Use focus.outline-width instead. */
1568
1559
  --overlay-backdrop-bgColor: #21283066;
1569
1560
  --progressBar-track-borderColor: #00000000;
1570
1561
  --reactionButton-selected-bgColor-rest: #388bfd33;
@@ -1718,7 +1709,7 @@
1718
1709
  --fgColor-onInverse: #010409; /** Text color for use on inverse backgrounds */
1719
1710
  --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
1720
1711
  --fgColor-white: #ffffff; /** Pure white text */
1721
- --focus-outline-color: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
1712
+ --focus-outlineColor: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
1722
1713
  --header-fgColor-default: #ffffffb3;
1723
1714
  --overlay-bgColor: #010409;
1724
1715
  --page-header-bgColor: var(--bgColor-default);
@@ -1795,8 +1786,7 @@
1795
1786
  --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
1796
1787
  --dashboard-bgColor: var(--bgColor-inset);
1797
1788
  --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
1798
- --focus-outline: 0.125rem solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
1799
- --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
1789
+ --focus-outline: 2px solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
1800
1790
  --overlay-borderColor: var(--borderColor-muted);
1801
1791
  --tooltip-fgColor: var(--fgColor-onEmphasis);
1802
1792
  --border-draft-emphasis: 0.0625rem solid #656c76;
package/dist/css/functional/themes/dark.css CHANGED
@@ -14,8 +14,6 @@
14
14
  --control-checked-bgColor-active: #3685f3;
15
15
  --control-checked-bgColor-hover: #2a7aef;
16
16
  --fgColor-accent: #4493f8; /** Accent text for links and interactive elements */
17
- --focus-outline-offset: -0.125rem; /** Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds */
18
- --focus-outline-width: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
19
17
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
20
18
  --avatar-shadow: 0 0 0 2px #0d1117;
21
19
  --avatarStack-fade-bgColor-default: #3d444d;
@@ -646,8 +644,6 @@
646
644
  --label-yellow-fgColor-hover: #df9e11;
647
645
  --label-yellow-fgColor-rest: #d3910d;
648
646
  --menu-bgColor-active: #151b23;
649
- --outline-focus-offset: var(--focus-outline-offset); /** Deprecated. Use focus.outline-offset instead. */
650
- --outline-focus-width: var(--focus-outline-width); /** Deprecated. Use focus.outline-width instead. */
651
647
  --overlay-backdrop-bgColor: #21283066;
652
648
  --progressBar-track-borderColor: #00000000;
653
649
  --reactionButton-selected-bgColor-rest: #388bfd33;
@@ -808,7 +804,7 @@
808
804
  --fgColor-open: var(--fgColor-success); /** Text color for open state indicators (issues, PRs) */
809
805
  --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
810
806
  --fgColor-white: #ffffff; /** Pure white text */
811
- --focus-outline-color: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
807
+ --focus-outlineColor: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
812
808
  --header-fgColor-default: #ffffffb3;
813
809
  --overlay-bgColor: #010409;
814
810
  --page-header-bgColor: var(--bgColor-default);
@@ -885,8 +881,7 @@
885
881
  --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
886
882
  --dashboard-bgColor: var(--bgColor-inset);
887
883
  --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
888
- --focus-outline: 0.125rem solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
889
- --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
884
+ --focus-outline: 2px solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
890
885
  --overlay-borderColor: var(--borderColor-muted);
891
886
  --tooltip-fgColor: var(--fgColor-onEmphasis);
892
887
  --border-draft-emphasis: 0.0625rem solid #656c76;
@@ -922,8 +917,6 @@
922
917
  --control-checked-bgColor-active: #3685f3;
923
918
  --control-checked-bgColor-hover: #2a7aef;
924
919
  --fgColor-accent: #4493f8; /** Accent text for links and interactive elements */
925
- --focus-outline-offset: -0.125rem; /** Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds */
926
- --focus-outline-width: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
927
920
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
928
921
  --avatar-shadow: 0 0 0 2px #0d1117;
929
922
  --avatarStack-fade-bgColor-default: #3d444d;
@@ -1554,8 +1547,6 @@
1554
1547
  --label-yellow-fgColor-hover: #df9e11;
1555
1548
  --label-yellow-fgColor-rest: #d3910d;
1556
1549
  --menu-bgColor-active: #151b23;
1557
- --outline-focus-offset: var(--focus-outline-offset); /** Deprecated. Use focus.outline-offset instead. */
1558
- --outline-focus-width: var(--focus-outline-width); /** Deprecated. Use focus.outline-width instead. */
1559
1550
  --overlay-backdrop-bgColor: #21283066;
1560
1551
  --progressBar-track-borderColor: #00000000;
1561
1552
  --reactionButton-selected-bgColor-rest: #388bfd33;
@@ -1716,7 +1707,7 @@
1716
1707
  --fgColor-open: var(--fgColor-success); /** Text color for open state indicators (issues, PRs) */
1717
1708
  --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
1718
1709
  --fgColor-white: #ffffff; /** Pure white text */
1719
- --focus-outline-color: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
1710
+ --focus-outlineColor: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
1720
1711
  --header-fgColor-default: #ffffffb3;
1721
1712
  --overlay-bgColor: #010409;
1722
1713
  --page-header-bgColor: var(--bgColor-default);
@@ -1793,8 +1784,7 @@
1793
1784
  --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
1794
1785
  --dashboard-bgColor: var(--bgColor-inset);
1795
1786
  --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
1796
- --focus-outline: 0.125rem solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
1797
- --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
1787
+ --focus-outline: 2px solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
1798
1788
  --overlay-borderColor: var(--borderColor-muted);
1799
1789
  --tooltip-fgColor: var(--fgColor-onEmphasis);
1800
1790
  --border-draft-emphasis: 0.0625rem solid #656c76;