@primer/primitives 11.4.1-rc.eb8ee149 → 11.5.0-rc.14eaeb12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/DESIGN_TOKENS_GUIDE.md +185 -0
- package/DESIGN_TOKENS_SPEC.md +136 -8
- package/dist/build/formats/jsonFigma.js +8 -1
- package/dist/build/formats/markdownLlmGuidelines.js +349 -0
- package/dist/build/schemas/borderToken.d.ts +61 -5
- package/dist/build/schemas/borderToken.js +2 -1
- package/dist/build/schemas/colorToken.d.ts +639 -30
- package/dist/build/schemas/colorToken.js +3 -2
- package/dist/build/schemas/colorW3cValue.d.ts +28 -0
- package/dist/build/schemas/colorW3cValue.js +42 -0
- package/dist/build/schemas/cubicBezierToken.d.ts +1 -1
- package/dist/build/schemas/dimensionToken.d.ts +9 -2
- package/dist/build/schemas/dimensionValue.d.ts +12 -1
- package/dist/build/schemas/dimensionValue.js +10 -13
- package/dist/build/schemas/durationToken.d.ts +8 -2
- package/dist/build/schemas/durationValue.d.ts +11 -1
- package/dist/build/schemas/durationValue.js +13 -3
- package/dist/build/schemas/fontFamilyToken.d.ts +1 -1
- package/dist/build/schemas/fontWeightToken.d.ts +1 -1
- package/dist/build/schemas/gradientToken.d.ts +23 -2
- package/dist/build/schemas/gradientToken.js +2 -1
- package/dist/build/schemas/numberToken.d.ts +1 -1
- package/dist/build/schemas/shadowToken.d.ts +1751 -127
- package/dist/build/schemas/shadowToken.js +8 -2
- package/dist/build/schemas/stringToken.d.ts +1 -1
- package/dist/build/schemas/stringToken.js +1 -1
- package/dist/build/schemas/tokenType.d.ts +1 -1
- package/dist/build/schemas/transitionToken.d.ts +15 -3
- package/dist/build/schemas/typographyToken.d.ts +19 -5
- package/dist/build/schemas/typographyToken.js +1 -1
- package/dist/build/schemas/validTokenType.d.ts +1 -1
- package/dist/build/schemas/validTokenType.js +1 -1
- package/dist/build/schemas/viewportRangeToken.d.ts +1 -1
- package/dist/build/transformers/borderToCss.js +19 -1
- package/dist/build/transformers/colorAlphaToCss.js +6 -3
- package/dist/build/transformers/colorToHex.js +5 -2
- package/dist/build/transformers/colorToRgbAlpha.js +5 -2
- package/dist/build/transformers/colorToRgbaFloat.js +5 -0
- package/dist/build/transformers/dimensionToPixelUnitless.d.ts +3 -2
- package/dist/build/transformers/dimensionToPixelUnitless.js +22 -26
- package/dist/build/transformers/dimensionToRem.d.ts +2 -1
- package/dist/build/transformers/dimensionToRem.js +21 -22
- package/dist/build/transformers/dimensionToRemPxArray.d.ts +2 -1
- package/dist/build/transformers/dimensionToRemPxArray.js +21 -22
- package/dist/build/transformers/durationToCss.d.ts +2 -1
- package/dist/build/transformers/durationToCss.js +19 -12
- package/dist/build/transformers/gradientToCss.js +2 -1
- package/dist/build/transformers/shadowToCss.js +15 -1
- package/dist/build/transformers/utilities/normalizeColorValue.d.ts +23 -0
- package/dist/build/transformers/utilities/normalizeColorValue.js +74 -0
- package/dist/build/transformers/utilities/parseDimension.d.ts +12 -0
- package/dist/build/transformers/utilities/parseDimension.js +31 -0
- package/dist/build/types/borderTokenValue.d.ts +5 -2
- package/dist/build/types/dimensionTokenValue.d.ts +9 -0
- package/dist/build/types/shadowTokenValue.d.ts +8 -5
- package/dist/css/base/motion/motion.css +1 -1
- package/dist/css/functional/size/radius.css +1 -1
- package/dist/css/functional/size/size-coarse.css +1 -0
- package/dist/css/functional/size/size-fine.css +1 -0
- package/dist/css/functional/size/size.css +5 -0
- package/dist/css/functional/themes/dark-colorblind-high-contrast.css +42 -30
- package/dist/css/functional/themes/dark-colorblind.css +42 -30
- package/dist/css/functional/themes/dark-dimmed-high-contrast.css +42 -30
- package/dist/css/functional/themes/dark-dimmed.css +42 -30
- package/dist/css/functional/themes/dark-high-contrast.css +42 -30
- package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +42 -30
- package/dist/css/functional/themes/dark-tritanopia.css +42 -30
- package/dist/css/functional/themes/dark.css +42 -30
- package/dist/css/functional/themes/light-colorblind-high-contrast.css +42 -30
- package/dist/css/functional/themes/light-colorblind.css +42 -30
- package/dist/css/functional/themes/light-high-contrast.css +42 -30
- package/dist/css/functional/themes/light-tritanopia-high-contrast.css +42 -30
- package/dist/css/functional/themes/light-tritanopia.css +42 -30
- package/dist/css/functional/themes/light.css +42 -30
- package/dist/docs/base/motion/motion.json +96 -24
- package/dist/docs/base/size/size.json +76 -19
- package/dist/docs/base/typography/typography.json +24 -6
- package/dist/docs/functional/size/border.json +26 -11
- package/dist/docs/functional/size/breakpoints.json +24 -6
- package/dist/docs/functional/size/radius.json +18 -6
- package/dist/docs/functional/size/size-coarse.json +55 -2
- package/dist/docs/functional/size/size-fine.json +55 -2
- package/dist/docs/functional/size/size.json +195 -15
- package/dist/docs/functional/themes/dark-colorblind-high-contrast.json +3921 -714
- package/dist/docs/functional/themes/dark-colorblind.json +3911 -712
- package/dist/docs/functional/themes/dark-dimmed-high-contrast.json +3774 -547
- package/dist/docs/functional/themes/dark-dimmed.json +3801 -554
- package/dist/docs/functional/themes/dark-high-contrast.json +3926 -715
- package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json +3936 -717
- package/dist/docs/functional/themes/dark-tritanopia.json +3769 -546
- package/dist/docs/functional/themes/dark.json +3920 -713
- package/dist/docs/functional/themes/light-colorblind-high-contrast.json +3780 -553
- package/dist/docs/functional/themes/light-colorblind.json +3767 -548
- package/dist/docs/functional/themes/light-high-contrast.json +3785 -554
- package/dist/docs/functional/themes/light-tritanopia-high-contrast.json +3785 -554
- package/dist/docs/functional/themes/light-tritanopia.json +3777 -550
- package/dist/docs/functional/themes/light.json +3782 -551
- package/dist/docs/functional/typography/typography.json +8 -2
- package/dist/fallbacks/base/motion/motion.json +48 -12
- package/dist/fallbacks/functional/size/size-coarse.json +2 -1
- package/dist/fallbacks/functional/size/size-fine.json +2 -1
- package/dist/fallbacks/functional/size/size.json +5 -0
- package/dist/figma/dimension/dimension.json +56 -1
- package/dist/figma/themes/dark-colorblind.json +49 -1
- package/dist/figma/themes/dark-dimmed.json +51 -3
- package/dist/figma/themes/dark-high-contrast.json +49 -1
- package/dist/figma/themes/dark-tritanopia.json +49 -1
- package/dist/figma/themes/dark.json +49 -1
- package/dist/figma/themes/light-colorblind.json +53 -5
- package/dist/figma/themes/light-high-contrast.json +53 -5
- package/dist/figma/themes/light-tritanopia.json +53 -5
- package/dist/figma/themes/light.json +53 -5
- package/dist/internalCss/dark-colorblind-high-contrast.css +42 -30
- package/dist/internalCss/dark-colorblind.css +42 -30
- package/dist/internalCss/dark-dimmed-high-contrast.css +42 -30
- package/dist/internalCss/dark-dimmed.css +42 -30
- package/dist/internalCss/dark-high-contrast.css +42 -30
- package/dist/internalCss/dark-tritanopia-high-contrast.css +42 -30
- package/dist/internalCss/dark-tritanopia.css +42 -30
- package/dist/internalCss/dark.css +42 -30
- package/dist/internalCss/light-colorblind-high-contrast.css +42 -30
- package/dist/internalCss/light-colorblind.css +42 -30
- package/dist/internalCss/light-high-contrast.css +42 -30
- package/dist/internalCss/light-tritanopia-high-contrast.css +42 -30
- package/dist/internalCss/light-tritanopia.css +42 -30
- package/dist/internalCss/light.css +42 -30
- package/dist/styleLint/base/motion/motion.json +96 -24
- package/dist/styleLint/base/size/size.json +76 -19
- package/dist/styleLint/base/typography/typography.json +30 -12
- package/dist/styleLint/functional/size/border.json +27 -12
- package/dist/styleLint/functional/size/breakpoints.json +24 -6
- package/dist/styleLint/functional/size/radius.json +19 -7
- package/dist/styleLint/functional/size/size-coarse.json +60 -7
- package/dist/styleLint/functional/size/size-fine.json +60 -7
- package/dist/styleLint/functional/size/size.json +246 -66
- package/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json +4060 -733
- package/dist/styleLint/functional/themes/dark-colorblind.json +4050 -731
- package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json +3914 -567
- package/dist/styleLint/functional/themes/dark-dimmed.json +3941 -574
- package/dist/styleLint/functional/themes/dark-high-contrast.json +4065 -734
- package/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json +4075 -736
- package/dist/styleLint/functional/themes/dark-tritanopia.json +4079 -736
- package/dist/styleLint/functional/themes/dark.json +4059 -732
- package/dist/styleLint/functional/themes/light-colorblind-high-contrast.json +4091 -744
- package/dist/styleLint/functional/themes/light-colorblind.json +4078 -739
- package/dist/styleLint/functional/themes/light-high-contrast.json +4096 -745
- package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json +4096 -745
- package/dist/styleLint/functional/themes/light-tritanopia.json +4088 -741
- package/dist/styleLint/functional/themes/light.json +4093 -742
- package/dist/styleLint/functional/typography/typography.json +28 -22
- package/package.json +5 -4
- package/src/tokens/base/color/dark/dark.dimmed.json5 +405 -81
- package/src/tokens/base/color/dark/dark.high-contrast.json5 +405 -81
- package/src/tokens/base/color/dark/dark.json5 +475 -95
- package/src/tokens/base/color/dark/display-dark.json5 +960 -192
- package/src/tokens/base/color/light/display-light.json5 +960 -192
- package/src/tokens/base/color/light/light.high-contrast.json5 +405 -81
- package/src/tokens/base/color/light/light.json5 +475 -95
- package/src/tokens/base/motion/timing.json5 +12 -12
- package/src/tokens/base/size/size.json5 +194 -194
- package/src/tokens/base/typography/typography.json5 +6 -6
- package/src/tokens/component/avatar.json5 +72 -44
- package/src/tokens/component/button.json5 +1846 -1191
- package/src/tokens/component/reactionButton.json5 +20 -4
- package/src/tokens/functional/border/border.json5 +33 -2
- package/src/tokens/functional/color/bgColor.json5 +18 -2
- package/src/tokens/functional/color/borderColor.json5 +8 -1
- package/src/tokens/functional/color/control.json5 +160 -32
- package/src/tokens/functional/color/display.json5 +7 -0
- package/src/tokens/functional/color/fgColor.json5 +13 -1
- package/src/tokens/functional/color/syntax.json5 +24 -2
- package/src/tokens/functional/shadow/shadow.json5 +1254 -163
- package/src/tokens/functional/size/border.json5 +8 -8
- package/src/tokens/functional/size/breakpoints.json5 +6 -6
- package/src/tokens/functional/size/radius.json5 +5 -5
- package/src/tokens/functional/size/size-coarse.json5 +15 -0
- package/src/tokens/functional/size/size-fine.json5 +15 -0
- package/src/tokens/functional/size/size.json5 +65 -15
- package/src/tokens/functional/typography/typography.json5 +8 -4
- package/dist/build/parsers/index.d.ts +0 -1
- package/dist/build/parsers/index.js +0 -1
- package/dist/build/parsers/w3cJsonParser.d.ts +0 -6
- package/dist/build/parsers/w3cJsonParser.js +0 -25
- package/dist/removed/testing.json5 +0 -4
- package/guidelines/color.llm.md +0 -16
- package/guidelines/guidelines.llm.md +0 -34
- package/guidelines/motion.llm.md +0 -41
- package/guidelines/spacing.llm.md +0 -20
- package/guidelines/typography.llm.md +0 -14
- package/src/tokens/removed/testing.json5 +0 -4
|
@@ -61,11 +61,11 @@
|
|
|
61
61
|
--borderColor-sponsors-muted: #ed4baf; /** Subtle border for GitHub Sponsors content */
|
|
62
62
|
--borderColor-success-emphasis: #0349b4; /** Strong success border for prominent positive elements */
|
|
63
63
|
--borderColor-success-muted: #368cf9; /** Subtle success border for positive feedback elements */
|
|
64
|
-
--borderColor-translucent: #59636e; /** Semi-transparent border for overlays and layered elements */
|
|
64
|
+
--borderColor-translucent: #59636e; /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
|
|
65
65
|
--borderColor-transparent: #ffffff00; /** Fully transparent border */
|
|
66
66
|
--button-danger-bgColor-active: #86061d;
|
|
67
67
|
--button-danger-borderColor-hover: #6e011a;
|
|
68
|
-
--button-danger-shadow-selected: inset
|
|
68
|
+
--button-danger-shadow-selected: inset 0 1px 0 0 #43001133;
|
|
69
69
|
--button-inactive-bgColor: #e6eaef;
|
|
70
70
|
--button-inactive-fgColor: #454c54;
|
|
71
71
|
--button-invisible-bgColor-disabled: #ffffff00;
|
|
@@ -73,10 +73,10 @@
|
|
|
73
73
|
--button-invisible-fgColor-hover: #393f46;
|
|
74
74
|
--button-invisible-iconColor-hover: #393f46;
|
|
75
75
|
--button-outline-borderColor-hover: #022f7a;
|
|
76
|
-
--button-outline-shadow-selected: inset
|
|
76
|
+
--button-outline-shadow-selected: inset 0 1px 0 0 #021a4a33;
|
|
77
77
|
--button-primary-borderColor-disabled: var(--button-primary-bgColor-disabled);
|
|
78
78
|
--button-primary-borderColor-rest: #022f7a;
|
|
79
|
-
--button-primary-shadow-selected: inset
|
|
79
|
+
--button-primary-shadow-selected: inset 0 1px 0 0 #00230b4d;
|
|
80
80
|
--button-star-iconColor: #d5a824;
|
|
81
81
|
--buttonCounter-default-bgColor-rest: #c8d1da;
|
|
82
82
|
--buttonCounter-outline-fgColor-rest: #023b95;
|
|
@@ -624,13 +624,13 @@
|
|
|
624
624
|
--reactionButton-selected-fgColor-hover: #023b95;
|
|
625
625
|
--selectMenu-bgColor-active: #9cd7ff;
|
|
626
626
|
--selectMenu-borderColor: #ffffff00;
|
|
627
|
-
--shadow-floating-legacy:
|
|
628
|
-
--shadow-resting-medium:
|
|
627
|
+
--shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
|
|
628
|
+
--shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
|
|
629
629
|
--skeletonLoader-bgColor: #dae0e7;
|
|
630
630
|
--treeViewItem-leadingVisual-iconColor-rest: #368cf9;
|
|
631
631
|
--underlineNav-borderColor-active: #cd3425;
|
|
632
632
|
--avatar-bgColor: #ffffff;
|
|
633
|
-
--avatar-shadow:
|
|
633
|
+
--avatar-shadow: 0 0 0 2px #ffffffcc;
|
|
634
634
|
--bgColor-black: #010409; /** Pure black background */
|
|
635
635
|
--bgColor-closed-emphasis: var(--bgColor-neutral-emphasis); /** Strong background for closed state badges and labels */
|
|
636
636
|
--bgColor-closed-muted: var(--bgColor-neutral-muted); /** Subtle background for closed state indicators (issues, PRs) */
|
|
@@ -657,6 +657,7 @@
|
|
|
657
657
|
--border-sponsors-muted: 0.0625rem solid #ed4baf;
|
|
658
658
|
--border-success-emphasis: 0.0625rem solid #0349b4;
|
|
659
659
|
--border-success-muted: 0.0625rem solid #368cf9;
|
|
660
|
+
--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
661
|
--border-transparent: 0.0625rem solid #ffffff00;
|
|
661
662
|
--borderColor-closed-muted: var(--borderColor-default); /** Subtle border for closed state indicators */
|
|
662
663
|
--borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
|
|
@@ -678,7 +679,7 @@
|
|
|
678
679
|
--button-default-bgColor-rest: var(--control-bgColor-rest);
|
|
679
680
|
--button-default-bgColor-selected: var(--control-bgColor-active);
|
|
680
681
|
--button-default-fgColor-rest: var(--control-fgColor-rest);
|
|
681
|
-
--button-default-shadow-resting:
|
|
682
|
+
--button-default-shadow-resting: 0 1px 0 0 #0104090a;
|
|
682
683
|
--button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
|
|
683
684
|
--button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
|
|
684
685
|
--button-invisible-bgColor-rest: var(--control-transparent-bgColor-rest);
|
|
@@ -807,9 +808,9 @@
|
|
|
807
808
|
--progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
|
|
808
809
|
--progressBar-bgColor-success: var(--bgColor-success-emphasis);
|
|
809
810
|
--selection-bgColor: #0349b433; /** Background color for text selection highlights */
|
|
810
|
-
--shadow-inset: inset
|
|
811
|
-
--shadow-resting-small:
|
|
812
|
-
--shadow-resting-xsmall:
|
|
811
|
+
--shadow-inset: inset 0 1px 0 0 #0104090a; /** Inset shadow for recessed elements */
|
|
812
|
+
--shadow-resting-small: 0 1px 1px 0 #0104090a, 0 1px 2px 0 #01040908; /** Small resting shadow for buttons and interactive elements */
|
|
813
|
+
--shadow-resting-xsmall: 0 1px 1px 0 #0104090d; /** Extra small resting shadow for minimal elevation */
|
|
813
814
|
--sideNav-bgColor-selected: #ffffff;
|
|
814
815
|
--timelineBadge-bgColor: var(--bgColor-muted);
|
|
815
816
|
--tooltip-bgColor: var(--bgColor-emphasis);
|
|
@@ -818,6 +819,8 @@
|
|
|
818
819
|
--avatar-borderColor: var(--borderColor-emphasis);
|
|
819
820
|
--border-closed-emphasis: var(--border-danger-emphasis);
|
|
820
821
|
--border-closed-muted: var(--border-danger-muted);
|
|
822
|
+
--border-draft-emphasis: 0.0625rem solid #59636e;
|
|
823
|
+
--border-draft-muted: 0.0625rem solid #454c54;
|
|
821
824
|
--border-emphasis: 0.0625rem solid #454c54;
|
|
822
825
|
--border-muted: 0.0625rem solid #454c54;
|
|
823
826
|
--border-open-emphasis: var(--border-success-emphasis);
|
|
@@ -828,16 +831,19 @@
|
|
|
828
831
|
--borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
|
|
829
832
|
--button-danger-bgColor-disabled: var(--control-bgColor-disabled);
|
|
830
833
|
--button-danger-borderColor-rest: var(--control-borderColor-rest);
|
|
834
|
+
--button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
|
|
831
835
|
--button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
|
|
832
836
|
--button-default-bgColor-disabled: var(--control-bgColor-disabled);
|
|
833
837
|
--button-default-borderColor-active: var(--control-borderColor-rest);
|
|
834
838
|
--button-default-borderColor-disabled: var(--control-borderColor-disabled);
|
|
835
839
|
--button-default-borderColor-rest: var(--control-borderColor-rest);
|
|
840
|
+
--button-default-fgColor-disabled: var(--control-fgColor-disabled);
|
|
836
841
|
--button-invisible-borderColor-hover: var(--control-transparent-borderColor-hover);
|
|
837
842
|
--button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
|
|
838
843
|
--button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
|
|
839
844
|
--button-outline-bgColor-disabled: var(--control-bgColor-disabled);
|
|
840
845
|
--button-primary-fgColor-rest: var(--fgColor-white);
|
|
846
|
+
--button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
|
|
841
847
|
--button-primary-iconColor-rest: #ffffffcc;
|
|
842
848
|
--buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
|
|
843
849
|
--buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
|
|
@@ -886,10 +892,10 @@
|
|
|
886
892
|
--focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
|
|
887
893
|
--progressBar-track-bgColor: var(--bgColor-default);
|
|
888
894
|
--reactionButton-selected-fgColor-rest: var(--fgColor-link);
|
|
889
|
-
--shadow-floating-large:
|
|
890
|
-
--shadow-floating-medium:
|
|
891
|
-
--shadow-floating-small:
|
|
892
|
-
--shadow-floating-xlarge:
|
|
895
|
+
--shadow-floating-large: 0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
|
|
896
|
+
--shadow-floating-medium: 0 0 0 1px #454c54, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14; /** Medium floating shadow for popovers and action menus */
|
|
897
|
+
--shadow-floating-small: 0 0 0 1px #454c5480, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
|
|
898
|
+
--shadow-floating-xlarge: 0 0 0 1px #454c54, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
|
|
893
899
|
--tooltip-fgColor: var(--fgColor-onEmphasis);
|
|
894
900
|
--underlineNav-borderColor-hover: var(--borderColor-muted);
|
|
895
901
|
--border-neutral-muted: 0.0625rem solid #454c54;
|
|
@@ -958,11 +964,11 @@
|
|
|
958
964
|
--borderColor-sponsors-muted: #ed4baf; /** Subtle border for GitHub Sponsors content */
|
|
959
965
|
--borderColor-success-emphasis: #0349b4; /** Strong success border for prominent positive elements */
|
|
960
966
|
--borderColor-success-muted: #368cf9; /** Subtle success border for positive feedback elements */
|
|
961
|
-
--borderColor-translucent: #59636e; /** Semi-transparent border for overlays and layered elements */
|
|
967
|
+
--borderColor-translucent: #59636e; /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
|
|
962
968
|
--borderColor-transparent: #ffffff00; /** Fully transparent border */
|
|
963
969
|
--button-danger-bgColor-active: #86061d;
|
|
964
970
|
--button-danger-borderColor-hover: #6e011a;
|
|
965
|
-
--button-danger-shadow-selected: inset
|
|
971
|
+
--button-danger-shadow-selected: inset 0 1px 0 0 #43001133;
|
|
966
972
|
--button-inactive-bgColor: #e6eaef;
|
|
967
973
|
--button-inactive-fgColor: #454c54;
|
|
968
974
|
--button-invisible-bgColor-disabled: #ffffff00;
|
|
@@ -970,10 +976,10 @@
|
|
|
970
976
|
--button-invisible-fgColor-hover: #393f46;
|
|
971
977
|
--button-invisible-iconColor-hover: #393f46;
|
|
972
978
|
--button-outline-borderColor-hover: #022f7a;
|
|
973
|
-
--button-outline-shadow-selected: inset
|
|
979
|
+
--button-outline-shadow-selected: inset 0 1px 0 0 #021a4a33;
|
|
974
980
|
--button-primary-borderColor-disabled: var(--button-primary-bgColor-disabled);
|
|
975
981
|
--button-primary-borderColor-rest: #022f7a;
|
|
976
|
-
--button-primary-shadow-selected: inset
|
|
982
|
+
--button-primary-shadow-selected: inset 0 1px 0 0 #00230b4d;
|
|
977
983
|
--button-star-iconColor: #d5a824;
|
|
978
984
|
--buttonCounter-default-bgColor-rest: #c8d1da;
|
|
979
985
|
--buttonCounter-outline-fgColor-rest: #023b95;
|
|
@@ -1521,13 +1527,13 @@
|
|
|
1521
1527
|
--reactionButton-selected-fgColor-hover: #023b95;
|
|
1522
1528
|
--selectMenu-bgColor-active: #9cd7ff;
|
|
1523
1529
|
--selectMenu-borderColor: #ffffff00;
|
|
1524
|
-
--shadow-floating-legacy:
|
|
1525
|
-
--shadow-resting-medium:
|
|
1530
|
+
--shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
|
|
1531
|
+
--shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
|
|
1526
1532
|
--skeletonLoader-bgColor: #dae0e7;
|
|
1527
1533
|
--treeViewItem-leadingVisual-iconColor-rest: #368cf9;
|
|
1528
1534
|
--underlineNav-borderColor-active: #cd3425;
|
|
1529
1535
|
--avatar-bgColor: #ffffff;
|
|
1530
|
-
--avatar-shadow:
|
|
1536
|
+
--avatar-shadow: 0 0 0 2px #ffffffcc;
|
|
1531
1537
|
--bgColor-black: #010409; /** Pure black background */
|
|
1532
1538
|
--bgColor-closed-emphasis: var(--bgColor-neutral-emphasis); /** Strong background for closed state badges and labels */
|
|
1533
1539
|
--bgColor-closed-muted: var(--bgColor-neutral-muted); /** Subtle background for closed state indicators (issues, PRs) */
|
|
@@ -1554,6 +1560,7 @@
|
|
|
1554
1560
|
--border-sponsors-muted: 0.0625rem solid #ed4baf;
|
|
1555
1561
|
--border-success-emphasis: 0.0625rem solid #0349b4;
|
|
1556
1562
|
--border-success-muted: 0.0625rem solid #368cf9;
|
|
1563
|
+
--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. */
|
|
1557
1564
|
--border-transparent: 0.0625rem solid #ffffff00;
|
|
1558
1565
|
--borderColor-closed-muted: var(--borderColor-default); /** Subtle border for closed state indicators */
|
|
1559
1566
|
--borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
|
|
@@ -1575,7 +1582,7 @@
|
|
|
1575
1582
|
--button-default-bgColor-rest: var(--control-bgColor-rest);
|
|
1576
1583
|
--button-default-bgColor-selected: var(--control-bgColor-active);
|
|
1577
1584
|
--button-default-fgColor-rest: var(--control-fgColor-rest);
|
|
1578
|
-
--button-default-shadow-resting:
|
|
1585
|
+
--button-default-shadow-resting: 0 1px 0 0 #0104090a;
|
|
1579
1586
|
--button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
|
|
1580
1587
|
--button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
|
|
1581
1588
|
--button-invisible-bgColor-rest: var(--control-transparent-bgColor-rest);
|
|
@@ -1704,9 +1711,9 @@
|
|
|
1704
1711
|
--progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
|
|
1705
1712
|
--progressBar-bgColor-success: var(--bgColor-success-emphasis);
|
|
1706
1713
|
--selection-bgColor: #0349b433; /** Background color for text selection highlights */
|
|
1707
|
-
--shadow-inset: inset
|
|
1708
|
-
--shadow-resting-small:
|
|
1709
|
-
--shadow-resting-xsmall:
|
|
1714
|
+
--shadow-inset: inset 0 1px 0 0 #0104090a; /** Inset shadow for recessed elements */
|
|
1715
|
+
--shadow-resting-small: 0 1px 1px 0 #0104090a, 0 1px 2px 0 #01040908; /** Small resting shadow for buttons and interactive elements */
|
|
1716
|
+
--shadow-resting-xsmall: 0 1px 1px 0 #0104090d; /** Extra small resting shadow for minimal elevation */
|
|
1710
1717
|
--sideNav-bgColor-selected: #ffffff;
|
|
1711
1718
|
--timelineBadge-bgColor: var(--bgColor-muted);
|
|
1712
1719
|
--tooltip-bgColor: var(--bgColor-emphasis);
|
|
@@ -1715,6 +1722,8 @@
|
|
|
1715
1722
|
--avatar-borderColor: var(--borderColor-emphasis);
|
|
1716
1723
|
--border-closed-emphasis: var(--border-danger-emphasis);
|
|
1717
1724
|
--border-closed-muted: var(--border-danger-muted);
|
|
1725
|
+
--border-draft-emphasis: 0.0625rem solid #59636e;
|
|
1726
|
+
--border-draft-muted: 0.0625rem solid #454c54;
|
|
1718
1727
|
--border-emphasis: 0.0625rem solid #454c54;
|
|
1719
1728
|
--border-muted: 0.0625rem solid #454c54;
|
|
1720
1729
|
--border-open-emphasis: var(--border-success-emphasis);
|
|
@@ -1725,16 +1734,19 @@
|
|
|
1725
1734
|
--borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
|
|
1726
1735
|
--button-danger-bgColor-disabled: var(--control-bgColor-disabled);
|
|
1727
1736
|
--button-danger-borderColor-rest: var(--control-borderColor-rest);
|
|
1737
|
+
--button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
|
|
1728
1738
|
--button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
|
|
1729
1739
|
--button-default-bgColor-disabled: var(--control-bgColor-disabled);
|
|
1730
1740
|
--button-default-borderColor-active: var(--control-borderColor-rest);
|
|
1731
1741
|
--button-default-borderColor-disabled: var(--control-borderColor-disabled);
|
|
1732
1742
|
--button-default-borderColor-rest: var(--control-borderColor-rest);
|
|
1743
|
+
--button-default-fgColor-disabled: var(--control-fgColor-disabled);
|
|
1733
1744
|
--button-invisible-borderColor-hover: var(--control-transparent-borderColor-hover);
|
|
1734
1745
|
--button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
|
|
1735
1746
|
--button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
|
|
1736
1747
|
--button-outline-bgColor-disabled: var(--control-bgColor-disabled);
|
|
1737
1748
|
--button-primary-fgColor-rest: var(--fgColor-white);
|
|
1749
|
+
--button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
|
|
1738
1750
|
--button-primary-iconColor-rest: #ffffffcc;
|
|
1739
1751
|
--buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
|
|
1740
1752
|
--buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
|
|
@@ -1783,10 +1795,10 @@
|
|
|
1783
1795
|
--focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
|
|
1784
1796
|
--progressBar-track-bgColor: var(--bgColor-default);
|
|
1785
1797
|
--reactionButton-selected-fgColor-rest: var(--fgColor-link);
|
|
1786
|
-
--shadow-floating-large:
|
|
1787
|
-
--shadow-floating-medium:
|
|
1788
|
-
--shadow-floating-small:
|
|
1789
|
-
--shadow-floating-xlarge:
|
|
1798
|
+
--shadow-floating-large: 0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
|
|
1799
|
+
--shadow-floating-medium: 0 0 0 1px #454c54, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14; /** Medium floating shadow for popovers and action menus */
|
|
1800
|
+
--shadow-floating-small: 0 0 0 1px #454c5480, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
|
|
1801
|
+
--shadow-floating-xlarge: 0 0 0 1px #454c54, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
|
|
1790
1802
|
--tooltip-fgColor: var(--fgColor-onEmphasis);
|
|
1791
1803
|
--underlineNav-borderColor-hover: var(--borderColor-muted);
|
|
1792
1804
|
--border-neutral-muted: 0.0625rem solid #454c54;
|
|
@@ -64,14 +64,14 @@
|
|
|
64
64
|
--button-danger-bgColor-active: #a40e26;
|
|
65
65
|
--button-danger-fgColor-disabled: #d1242f80;
|
|
66
66
|
--button-danger-fgColor-rest: var(--fgColor-danger);
|
|
67
|
-
--button-danger-shadow-selected: inset
|
|
67
|
+
--button-danger-shadow-selected: inset 0 1px 0 0 #4c001433;
|
|
68
68
|
--button-inactive-bgColor: #e6eaef;
|
|
69
69
|
--button-inactive-fgColor: #59636e;
|
|
70
70
|
--button-invisible-bgColor-disabled: #ffffff00;
|
|
71
71
|
--button-invisible-borderColor-disabled: #ffffff00;
|
|
72
|
-
--button-outline-shadow-selected: inset
|
|
72
|
+
--button-outline-shadow-selected: inset 0 1px 0 0 #00215533;
|
|
73
73
|
--button-primary-borderColor-disabled: var(--button-primary-bgColor-disabled);
|
|
74
|
-
--button-primary-shadow-selected: inset
|
|
74
|
+
--button-primary-shadow-selected: inset 0 1px 0 0 #0021554d;
|
|
75
75
|
--button-star-iconColor: #eac54f;
|
|
76
76
|
--buttonCounter-danger-fgColor-disabled: #d1242f80;
|
|
77
77
|
--buttonCounter-outline-fgColor-rest: #0550ae;
|
|
@@ -643,14 +643,14 @@
|
|
|
643
643
|
--reactionButton-selected-fgColor-hover: #0550ae;
|
|
644
644
|
--selectMenu-bgColor-active: #b6e3ff;
|
|
645
645
|
--selectMenu-borderColor: #ffffff00;
|
|
646
|
-
--shadow-floating-legacy:
|
|
647
|
-
--shadow-resting-medium:
|
|
646
|
+
--shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
|
|
647
|
+
--shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
|
|
648
648
|
--skeletonLoader-bgColor: #818b981a;
|
|
649
649
|
--topicTag-borderColor: #ffffff00;
|
|
650
650
|
--treeViewItem-leadingVisual-iconColor-rest: #54aeff;
|
|
651
651
|
--underlineNav-borderColor-active: #fd8c73;
|
|
652
652
|
--avatar-bgColor: #ffffff;
|
|
653
|
-
--avatar-shadow:
|
|
653
|
+
--avatar-shadow: 0 0 0 2px #ffffffcc;
|
|
654
654
|
--bgColor-black: #1f2328; /** Pure black background */
|
|
655
655
|
--bgColor-closed-emphasis: var(--bgColor-neutral-emphasis); /** Strong background for closed state badges and labels */
|
|
656
656
|
--bgColor-closed-muted: var(--bgColor-neutral-muted); /** Subtle background for closed state indicators (issues, PRs) */
|
|
@@ -685,13 +685,14 @@
|
|
|
685
685
|
--borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
|
|
686
686
|
--borderColor-draft-muted: #d1d9e066; /** Subtle border for draft state indicators */
|
|
687
687
|
--borderColor-muted: #d1d9e0b3; /** Subtle border for secondary elements and light separators */
|
|
688
|
-
--borderColor-translucent: #1f232826; /** Semi-transparent border for overlays and layered elements */
|
|
688
|
+
--borderColor-translucent: #1f232826; /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
|
|
689
689
|
--borderColor-upsell-emphasis: var(--borderColor-done-emphasis); /** Strong border for prominent upsell elements */
|
|
690
690
|
--borderColor-upsell-muted: var(--borderColor-done-muted); /** Subtle border for upsell and promotional content */
|
|
691
691
|
--button-danger-bgColor-hover: var(--bgColor-danger-emphasis);
|
|
692
692
|
--button-danger-bgColor-rest: var(--control-bgColor-rest);
|
|
693
693
|
--button-danger-fgColor-active: #ffffff;
|
|
694
694
|
--button-danger-fgColor-hover: #ffffff;
|
|
695
|
+
--button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
|
|
695
696
|
--button-danger-iconColor-hover: #ffffff;
|
|
696
697
|
--button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
|
|
697
698
|
--button-default-bgColor-active: var(--control-bgColor-active);
|
|
@@ -699,7 +700,7 @@
|
|
|
699
700
|
--button-default-bgColor-rest: var(--control-bgColor-rest);
|
|
700
701
|
--button-default-bgColor-selected: var(--control-bgColor-active);
|
|
701
702
|
--button-default-fgColor-rest: var(--control-fgColor-rest);
|
|
702
|
-
--button-default-shadow-resting:
|
|
703
|
+
--button-default-shadow-resting: 0 1px 0 0 #1f23280a;
|
|
703
704
|
--button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
|
|
704
705
|
--button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
|
|
705
706
|
--button-invisible-bgColor-rest: var(--control-transparent-bgColor-rest);
|
|
@@ -807,9 +808,9 @@
|
|
|
807
808
|
--progressBar-bgColor-success: var(--bgColor-success-emphasis);
|
|
808
809
|
--progressBar-track-bgColor: var(--borderColor-default);
|
|
809
810
|
--selection-bgColor: #0969da33; /** Background color for text selection highlights */
|
|
810
|
-
--shadow-inset: inset
|
|
811
|
-
--shadow-resting-small:
|
|
812
|
-
--shadow-resting-xsmall:
|
|
811
|
+
--shadow-inset: inset 0 1px 0 0 #1f23280a; /** Inset shadow for recessed elements */
|
|
812
|
+
--shadow-resting-small: 0 1px 1px 0 #1f23280a, 0 1px 2px 0 #1f232808; /** Small resting shadow for buttons and interactive elements */
|
|
813
|
+
--shadow-resting-xsmall: 0 1px 1px 0 #1f23280d; /** Extra small resting shadow for minimal elevation */
|
|
813
814
|
--sideNav-bgColor-selected: #ffffff;
|
|
814
815
|
--timelineBadge-bgColor: var(--bgColor-muted);
|
|
815
816
|
--tooltip-bgColor: var(--bgColor-emphasis);
|
|
@@ -817,9 +818,12 @@
|
|
|
817
818
|
--avatar-borderColor: var(--borderColor-translucent);
|
|
818
819
|
--border-closed-emphasis: var(--border-danger-emphasis);
|
|
819
820
|
--border-closed-muted: var(--border-danger-muted);
|
|
821
|
+
--border-draft-emphasis: 0.0625rem solid #59636e;
|
|
822
|
+
--border-draft-muted: 0.0625rem solid #d1d9e066;
|
|
820
823
|
--border-muted: 0.0625rem solid #d1d9e0b3;
|
|
821
824
|
--border-open-emphasis: var(--border-success-emphasis);
|
|
822
825
|
--border-open-muted: var(--border-success-muted);
|
|
826
|
+
--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. */
|
|
823
827
|
--border-upsell-emphasis: 0.0625rem solid #8250df;
|
|
824
828
|
--border-upsell-muted: 0.0625rem solid #c297ff66;
|
|
825
829
|
--borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
|
|
@@ -829,11 +833,13 @@
|
|
|
829
833
|
--button-default-borderColor-active: var(--control-borderColor-rest);
|
|
830
834
|
--button-default-borderColor-disabled: var(--control-borderColor-disabled);
|
|
831
835
|
--button-default-borderColor-rest: var(--control-borderColor-rest);
|
|
836
|
+
--button-default-fgColor-disabled: var(--control-fgColor-disabled);
|
|
832
837
|
--button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
|
|
833
838
|
--button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
|
|
834
839
|
--button-outline-bgColor-disabled: var(--control-bgColor-disabled);
|
|
835
840
|
--button-primary-borderColor-rest: var(--borderColor-translucent);
|
|
836
841
|
--button-primary-fgColor-rest: var(--fgColor-white);
|
|
842
|
+
--button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
|
|
837
843
|
--button-primary-iconColor-rest: #ffffffcc;
|
|
838
844
|
--buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
|
|
839
845
|
--buttonKeybindingHint-danger-borderColor-hover: var(--borderColor-translucent);
|
|
@@ -891,10 +897,10 @@
|
|
|
891
897
|
--buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
|
|
892
898
|
--buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
|
|
893
899
|
--buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
|
|
894
|
-
--shadow-floating-large:
|
|
895
|
-
--shadow-floating-medium:
|
|
896
|
-
--shadow-floating-small:
|
|
897
|
-
--shadow-floating-xlarge:
|
|
900
|
+
--shadow-floating-large: 0 0 0 1px #d1d9e000, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
|
|
901
|
+
--shadow-floating-medium: 0 0 0 1px #d1d9e000, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14; /** Medium floating shadow for popovers and action menus */
|
|
902
|
+
--shadow-floating-small: 0 0 0 1px #d1d9e080, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
|
|
903
|
+
--shadow-floating-xlarge: 0 0 0 1px #d1d9e000, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
|
|
898
904
|
--button-danger-borderColor-active: var(--button-danger-borderColor-hover);
|
|
899
905
|
--button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
|
|
900
906
|
--button-outline-borderColor-active: var(--button-outline-borderColor-hover);
|
|
@@ -961,14 +967,14 @@
|
|
|
961
967
|
--button-danger-bgColor-active: #a40e26;
|
|
962
968
|
--button-danger-fgColor-disabled: #d1242f80;
|
|
963
969
|
--button-danger-fgColor-rest: var(--fgColor-danger);
|
|
964
|
-
--button-danger-shadow-selected: inset
|
|
970
|
+
--button-danger-shadow-selected: inset 0 1px 0 0 #4c001433;
|
|
965
971
|
--button-inactive-bgColor: #e6eaef;
|
|
966
972
|
--button-inactive-fgColor: #59636e;
|
|
967
973
|
--button-invisible-bgColor-disabled: #ffffff00;
|
|
968
974
|
--button-invisible-borderColor-disabled: #ffffff00;
|
|
969
|
-
--button-outline-shadow-selected: inset
|
|
975
|
+
--button-outline-shadow-selected: inset 0 1px 0 0 #00215533;
|
|
970
976
|
--button-primary-borderColor-disabled: var(--button-primary-bgColor-disabled);
|
|
971
|
-
--button-primary-shadow-selected: inset
|
|
977
|
+
--button-primary-shadow-selected: inset 0 1px 0 0 #0021554d;
|
|
972
978
|
--button-star-iconColor: #eac54f;
|
|
973
979
|
--buttonCounter-danger-fgColor-disabled: #d1242f80;
|
|
974
980
|
--buttonCounter-outline-fgColor-rest: #0550ae;
|
|
@@ -1540,14 +1546,14 @@
|
|
|
1540
1546
|
--reactionButton-selected-fgColor-hover: #0550ae;
|
|
1541
1547
|
--selectMenu-bgColor-active: #b6e3ff;
|
|
1542
1548
|
--selectMenu-borderColor: #ffffff00;
|
|
1543
|
-
--shadow-floating-legacy:
|
|
1544
|
-
--shadow-resting-medium:
|
|
1549
|
+
--shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
|
|
1550
|
+
--shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
|
|
1545
1551
|
--skeletonLoader-bgColor: #818b981a;
|
|
1546
1552
|
--topicTag-borderColor: #ffffff00;
|
|
1547
1553
|
--treeViewItem-leadingVisual-iconColor-rest: #54aeff;
|
|
1548
1554
|
--underlineNav-borderColor-active: #fd8c73;
|
|
1549
1555
|
--avatar-bgColor: #ffffff;
|
|
1550
|
-
--avatar-shadow:
|
|
1556
|
+
--avatar-shadow: 0 0 0 2px #ffffffcc;
|
|
1551
1557
|
--bgColor-black: #1f2328; /** Pure black background */
|
|
1552
1558
|
--bgColor-closed-emphasis: var(--bgColor-neutral-emphasis); /** Strong background for closed state badges and labels */
|
|
1553
1559
|
--bgColor-closed-muted: var(--bgColor-neutral-muted); /** Subtle background for closed state indicators (issues, PRs) */
|
|
@@ -1582,13 +1588,14 @@
|
|
|
1582
1588
|
--borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
|
|
1583
1589
|
--borderColor-draft-muted: #d1d9e066; /** Subtle border for draft state indicators */
|
|
1584
1590
|
--borderColor-muted: #d1d9e0b3; /** Subtle border for secondary elements and light separators */
|
|
1585
|
-
--borderColor-translucent: #1f232826; /** Semi-transparent border for overlays and layered elements */
|
|
1591
|
+
--borderColor-translucent: #1f232826; /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
|
|
1586
1592
|
--borderColor-upsell-emphasis: var(--borderColor-done-emphasis); /** Strong border for prominent upsell elements */
|
|
1587
1593
|
--borderColor-upsell-muted: var(--borderColor-done-muted); /** Subtle border for upsell and promotional content */
|
|
1588
1594
|
--button-danger-bgColor-hover: var(--bgColor-danger-emphasis);
|
|
1589
1595
|
--button-danger-bgColor-rest: var(--control-bgColor-rest);
|
|
1590
1596
|
--button-danger-fgColor-active: #ffffff;
|
|
1591
1597
|
--button-danger-fgColor-hover: #ffffff;
|
|
1598
|
+
--button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
|
|
1592
1599
|
--button-danger-iconColor-hover: #ffffff;
|
|
1593
1600
|
--button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
|
|
1594
1601
|
--button-default-bgColor-active: var(--control-bgColor-active);
|
|
@@ -1596,7 +1603,7 @@
|
|
|
1596
1603
|
--button-default-bgColor-rest: var(--control-bgColor-rest);
|
|
1597
1604
|
--button-default-bgColor-selected: var(--control-bgColor-active);
|
|
1598
1605
|
--button-default-fgColor-rest: var(--control-fgColor-rest);
|
|
1599
|
-
--button-default-shadow-resting:
|
|
1606
|
+
--button-default-shadow-resting: 0 1px 0 0 #1f23280a;
|
|
1600
1607
|
--button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
|
|
1601
1608
|
--button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
|
|
1602
1609
|
--button-invisible-bgColor-rest: var(--control-transparent-bgColor-rest);
|
|
@@ -1704,9 +1711,9 @@
|
|
|
1704
1711
|
--progressBar-bgColor-success: var(--bgColor-success-emphasis);
|
|
1705
1712
|
--progressBar-track-bgColor: var(--borderColor-default);
|
|
1706
1713
|
--selection-bgColor: #0969da33; /** Background color for text selection highlights */
|
|
1707
|
-
--shadow-inset: inset
|
|
1708
|
-
--shadow-resting-small:
|
|
1709
|
-
--shadow-resting-xsmall:
|
|
1714
|
+
--shadow-inset: inset 0 1px 0 0 #1f23280a; /** Inset shadow for recessed elements */
|
|
1715
|
+
--shadow-resting-small: 0 1px 1px 0 #1f23280a, 0 1px 2px 0 #1f232808; /** Small resting shadow for buttons and interactive elements */
|
|
1716
|
+
--shadow-resting-xsmall: 0 1px 1px 0 #1f23280d; /** Extra small resting shadow for minimal elevation */
|
|
1710
1717
|
--sideNav-bgColor-selected: #ffffff;
|
|
1711
1718
|
--timelineBadge-bgColor: var(--bgColor-muted);
|
|
1712
1719
|
--tooltip-bgColor: var(--bgColor-emphasis);
|
|
@@ -1714,9 +1721,12 @@
|
|
|
1714
1721
|
--avatar-borderColor: var(--borderColor-translucent);
|
|
1715
1722
|
--border-closed-emphasis: var(--border-danger-emphasis);
|
|
1716
1723
|
--border-closed-muted: var(--border-danger-muted);
|
|
1724
|
+
--border-draft-emphasis: 0.0625rem solid #59636e;
|
|
1725
|
+
--border-draft-muted: 0.0625rem solid #d1d9e066;
|
|
1717
1726
|
--border-muted: 0.0625rem solid #d1d9e0b3;
|
|
1718
1727
|
--border-open-emphasis: var(--border-success-emphasis);
|
|
1719
1728
|
--border-open-muted: var(--border-success-muted);
|
|
1729
|
+
--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. */
|
|
1720
1730
|
--border-upsell-emphasis: 0.0625rem solid #8250df;
|
|
1721
1731
|
--border-upsell-muted: 0.0625rem solid #c297ff66;
|
|
1722
1732
|
--borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
|
|
@@ -1726,11 +1736,13 @@
|
|
|
1726
1736
|
--button-default-borderColor-active: var(--control-borderColor-rest);
|
|
1727
1737
|
--button-default-borderColor-disabled: var(--control-borderColor-disabled);
|
|
1728
1738
|
--button-default-borderColor-rest: var(--control-borderColor-rest);
|
|
1739
|
+
--button-default-fgColor-disabled: var(--control-fgColor-disabled);
|
|
1729
1740
|
--button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
|
|
1730
1741
|
--button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
|
|
1731
1742
|
--button-outline-bgColor-disabled: var(--control-bgColor-disabled);
|
|
1732
1743
|
--button-primary-borderColor-rest: var(--borderColor-translucent);
|
|
1733
1744
|
--button-primary-fgColor-rest: var(--fgColor-white);
|
|
1745
|
+
--button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
|
|
1734
1746
|
--button-primary-iconColor-rest: #ffffffcc;
|
|
1735
1747
|
--buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
|
|
1736
1748
|
--buttonKeybindingHint-danger-borderColor-hover: var(--borderColor-translucent);
|
|
@@ -1788,10 +1800,10 @@
|
|
|
1788
1800
|
--buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
|
|
1789
1801
|
--buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
|
|
1790
1802
|
--buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
|
|
1791
|
-
--shadow-floating-large:
|
|
1792
|
-
--shadow-floating-medium:
|
|
1793
|
-
--shadow-floating-small:
|
|
1794
|
-
--shadow-floating-xlarge:
|
|
1803
|
+
--shadow-floating-large: 0 0 0 1px #d1d9e000, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
|
|
1804
|
+
--shadow-floating-medium: 0 0 0 1px #d1d9e000, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14; /** Medium floating shadow for popovers and action menus */
|
|
1805
|
+
--shadow-floating-small: 0 0 0 1px #d1d9e080, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
|
|
1806
|
+
--shadow-floating-xlarge: 0 0 0 1px #d1d9e000, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
|
|
1795
1807
|
--button-danger-borderColor-active: var(--button-danger-borderColor-hover);
|
|
1796
1808
|
--button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
|
|
1797
1809
|
--button-outline-borderColor-active: var(--button-outline-borderColor-hover);
|