@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
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
--control-checked-bgColor-hover: #2a7aef;
|
|
16
16
|
--fgColor-accent: #4493f8; /** Accent text for links and interactive elements */
|
|
17
17
|
--reactionButton-selected-bgColor-hover: #3a8cfd5c;
|
|
18
|
-
--avatar-shadow:
|
|
18
|
+
--avatar-shadow: 0 0 0 2px #0d1117;
|
|
19
19
|
--avatarStack-fade-bgColor-default: #3d444d;
|
|
20
20
|
--avatarStack-fade-bgColor-muted: #2a313c;
|
|
21
21
|
--bgColor-accent-emphasis: #1f6feb; /** Strong accent background for active states and focused states */
|
|
@@ -59,8 +59,8 @@
|
|
|
59
59
|
--borderColor-transparent: #00000000; /** Fully transparent border */
|
|
60
60
|
--button-danger-bgColor-hover: #b62324;
|
|
61
61
|
--button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
|
|
62
|
-
--button-danger-shadow-selected:
|
|
63
|
-
--button-default-shadow-resting:
|
|
62
|
+
--button-danger-shadow-selected: 0 0 0 0 #00000000;
|
|
63
|
+
--button-default-shadow-resting: 0 0 0 0 #00000000;
|
|
64
64
|
--button-inactive-bgColor: #262c36;
|
|
65
65
|
--button-inactive-fgColor: #9198a1;
|
|
66
66
|
--button-invisible-bgColor-disabled: #00000000;
|
|
@@ -70,8 +70,8 @@
|
|
|
70
70
|
--button-outline-fgColor-disabled: #4493f880;
|
|
71
71
|
--button-outline-fgColor-hover: #58a6ff;
|
|
72
72
|
--button-outline-fgColor-rest: #388bfd;
|
|
73
|
-
--button-outline-shadow-selected:
|
|
74
|
-
--button-primary-shadow-selected:
|
|
73
|
+
--button-outline-shadow-selected: 0 0 0 0 #00000000;
|
|
74
|
+
--button-primary-shadow-selected: 0 0 0 0 #00000000;
|
|
75
75
|
--button-star-iconColor: #e3b341;
|
|
76
76
|
--buttonCounter-danger-bgColor-rest: #49020233;
|
|
77
77
|
--buttonCounter-default-bgColor-rest: #2f3742;
|
|
@@ -691,7 +691,7 @@
|
|
|
691
691
|
--borderColor-neutral-emphasis: var(--borderColor-emphasis); /** Strong neutral semantic border */
|
|
692
692
|
--borderColor-open-emphasis: var(--borderColor-success-emphasis); /** Strong border for open state badges */
|
|
693
693
|
--borderColor-open-muted: var(--borderColor-success-muted); /** Subtle border for open state indicators */
|
|
694
|
-
--borderColor-translucent: #ffffff26; /** Semi-transparent border for overlays and layered elements */
|
|
694
|
+
--borderColor-translucent: #ffffff26; /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
|
|
695
695
|
--borderColor-upsell-emphasis: var(--borderColor-done-emphasis); /** Strong border for prominent upsell elements */
|
|
696
696
|
--borderColor-upsell-muted: var(--borderColor-done-muted); /** Subtle border for upsell and promotional content */
|
|
697
697
|
--button-danger-bgColor-active: var(--bgColor-danger-emphasis);
|
|
@@ -819,11 +819,11 @@
|
|
|
819
819
|
--reactionButton-selected-fgColor-rest: var(--fgColor-link);
|
|
820
820
|
--selectMenu-borderColor: var(--borderColor-default);
|
|
821
821
|
--selection-bgColor: #1f6febb3; /** Background color for text selection highlights */
|
|
822
|
-
--shadow-floating-legacy:
|
|
823
|
-
--shadow-inset: inset
|
|
824
|
-
--shadow-resting-medium:
|
|
825
|
-
--shadow-resting-small:
|
|
826
|
-
--shadow-resting-xsmall:
|
|
822
|
+
--shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
|
|
823
|
+
--shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
|
|
824
|
+
--shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
|
|
825
|
+
--shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
|
|
826
|
+
--shadow-resting-xsmall: 0 1px 1px 0 #010409cc; /** Extra small resting shadow for minimal elevation */
|
|
827
827
|
--tooltip-bgColor: var(--bgColor-emphasis);
|
|
828
828
|
--treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
|
|
829
829
|
--underlineNav-iconColor-rest: var(--fgColor-muted);
|
|
@@ -834,15 +834,18 @@
|
|
|
834
834
|
--border-neutral-emphasis: 0.0625rem solid #656c76;
|
|
835
835
|
--border-open-emphasis: var(--border-success-emphasis);
|
|
836
836
|
--border-open-muted: var(--border-success-muted);
|
|
837
|
+
--border-translucent: 0.0625rem solid #ffffff26; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
|
|
837
838
|
--border-upsell-emphasis: 0.0625rem solid #8957e5;
|
|
838
839
|
--border-upsell-muted: 0.0625rem solid #ab7df866;
|
|
839
840
|
--borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
|
|
840
841
|
--borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
|
|
841
842
|
--button-danger-bgColor-disabled: var(--control-bgColor-disabled);
|
|
842
843
|
--button-danger-borderColor-rest: var(--control-borderColor-rest);
|
|
844
|
+
--button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
|
|
843
845
|
--button-default-bgColor-disabled: var(--control-bgColor-disabled);
|
|
844
846
|
--button-default-borderColor-disabled: var(--control-borderColor-disabled);
|
|
845
847
|
--button-default-borderColor-rest: var(--control-borderColor-rest);
|
|
848
|
+
--button-default-fgColor-disabled: var(--control-fgColor-disabled);
|
|
846
849
|
--button-default-fgColor-rest: var(--control-fgColor-rest);
|
|
847
850
|
--button-invisible-fgColor-active: var(--control-fgColor-rest);
|
|
848
851
|
--button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
|
|
@@ -852,6 +855,7 @@
|
|
|
852
855
|
--button-outline-bgColor-disabled: var(--control-bgColor-disabled);
|
|
853
856
|
--button-primary-borderColor-rest: var(--borderColor-translucent);
|
|
854
857
|
--button-primary-fgColor-rest: var(--fgColor-white);
|
|
858
|
+
--button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
|
|
855
859
|
--button-primary-iconColor-rest: var(--fgColor-white);
|
|
856
860
|
--buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
|
|
857
861
|
--buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
|
|
@@ -880,6 +884,7 @@
|
|
|
880
884
|
--focus-outline: 2px solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
|
|
881
885
|
--overlay-borderColor: var(--borderColor-muted);
|
|
882
886
|
--tooltip-fgColor: var(--fgColor-onEmphasis);
|
|
887
|
+
--border-draft-emphasis: 0.0625rem solid #656c76;
|
|
883
888
|
--border-neutral-muted: 0.0625rem solid #3d444db3;
|
|
884
889
|
--borderColor-draft-muted: var(--borderColor-neutral-muted); /** Subtle border for draft state indicators */
|
|
885
890
|
--button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
|
|
@@ -890,11 +895,12 @@
|
|
|
890
895
|
--buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
|
|
891
896
|
--buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
|
|
892
897
|
--buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
|
|
893
|
-
--shadow-floating-large:
|
|
894
|
-
--shadow-floating-medium:
|
|
895
|
-
--shadow-floating-small:
|
|
896
|
-
--shadow-floating-xlarge:
|
|
898
|
+
--shadow-floating-large: 0 0 0 1px #3d444d, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
|
|
899
|
+
--shadow-floating-medium: 0 0 0 1px #3d444d, 0 8px 16px -4px #01040966, 0 4px 32px -4px #01040966, 0 24px 48px -12px #01040966, 0 48px 96px -24px #01040966; /** Medium floating shadow for popovers and action menus */
|
|
900
|
+
--shadow-floating-small: 0 0 0 1px #3d444d, 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Small floating shadow for dropdowns, tooltips, and small overlays */
|
|
901
|
+
--shadow-floating-xlarge: 0 0 0 1px #3d444d, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
|
|
897
902
|
--underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
|
|
903
|
+
--border-draft-muted: 0.0625rem solid #3d444db3;
|
|
898
904
|
--button-danger-borderColor-active: var(--button-danger-borderColor-hover);
|
|
899
905
|
--button-outline-borderColor-hover: var(--button-default-borderColor-hover);
|
|
900
906
|
--button-outline-borderColor-active: var(--button-outline-borderColor-hover);
|
|
@@ -912,7 +918,7 @@
|
|
|
912
918
|
--control-checked-bgColor-hover: #2a7aef;
|
|
913
919
|
--fgColor-accent: #4493f8; /** Accent text for links and interactive elements */
|
|
914
920
|
--reactionButton-selected-bgColor-hover: #3a8cfd5c;
|
|
915
|
-
--avatar-shadow:
|
|
921
|
+
--avatar-shadow: 0 0 0 2px #0d1117;
|
|
916
922
|
--avatarStack-fade-bgColor-default: #3d444d;
|
|
917
923
|
--avatarStack-fade-bgColor-muted: #2a313c;
|
|
918
924
|
--bgColor-accent-emphasis: #1f6feb; /** Strong accent background for active states and focused states */
|
|
@@ -956,8 +962,8 @@
|
|
|
956
962
|
--borderColor-transparent: #00000000; /** Fully transparent border */
|
|
957
963
|
--button-danger-bgColor-hover: #b62324;
|
|
958
964
|
--button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
|
|
959
|
-
--button-danger-shadow-selected:
|
|
960
|
-
--button-default-shadow-resting:
|
|
965
|
+
--button-danger-shadow-selected: 0 0 0 0 #00000000;
|
|
966
|
+
--button-default-shadow-resting: 0 0 0 0 #00000000;
|
|
961
967
|
--button-inactive-bgColor: #262c36;
|
|
962
968
|
--button-inactive-fgColor: #9198a1;
|
|
963
969
|
--button-invisible-bgColor-disabled: #00000000;
|
|
@@ -967,8 +973,8 @@
|
|
|
967
973
|
--button-outline-fgColor-disabled: #4493f880;
|
|
968
974
|
--button-outline-fgColor-hover: #58a6ff;
|
|
969
975
|
--button-outline-fgColor-rest: #388bfd;
|
|
970
|
-
--button-outline-shadow-selected:
|
|
971
|
-
--button-primary-shadow-selected:
|
|
976
|
+
--button-outline-shadow-selected: 0 0 0 0 #00000000;
|
|
977
|
+
--button-primary-shadow-selected: 0 0 0 0 #00000000;
|
|
972
978
|
--button-star-iconColor: #e3b341;
|
|
973
979
|
--buttonCounter-danger-bgColor-rest: #49020233;
|
|
974
980
|
--buttonCounter-default-bgColor-rest: #2f3742;
|
|
@@ -1588,7 +1594,7 @@
|
|
|
1588
1594
|
--borderColor-neutral-emphasis: var(--borderColor-emphasis); /** Strong neutral semantic border */
|
|
1589
1595
|
--borderColor-open-emphasis: var(--borderColor-success-emphasis); /** Strong border for open state badges */
|
|
1590
1596
|
--borderColor-open-muted: var(--borderColor-success-muted); /** Subtle border for open state indicators */
|
|
1591
|
-
--borderColor-translucent: #ffffff26; /** Semi-transparent border for overlays and layered elements */
|
|
1597
|
+
--borderColor-translucent: #ffffff26; /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
|
|
1592
1598
|
--borderColor-upsell-emphasis: var(--borderColor-done-emphasis); /** Strong border for prominent upsell elements */
|
|
1593
1599
|
--borderColor-upsell-muted: var(--borderColor-done-muted); /** Subtle border for upsell and promotional content */
|
|
1594
1600
|
--button-danger-bgColor-active: var(--bgColor-danger-emphasis);
|
|
@@ -1716,11 +1722,11 @@
|
|
|
1716
1722
|
--reactionButton-selected-fgColor-rest: var(--fgColor-link);
|
|
1717
1723
|
--selectMenu-borderColor: var(--borderColor-default);
|
|
1718
1724
|
--selection-bgColor: #1f6febb3; /** Background color for text selection highlights */
|
|
1719
|
-
--shadow-floating-legacy:
|
|
1720
|
-
--shadow-inset: inset
|
|
1721
|
-
--shadow-resting-medium:
|
|
1722
|
-
--shadow-resting-small:
|
|
1723
|
-
--shadow-resting-xsmall:
|
|
1725
|
+
--shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
|
|
1726
|
+
--shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
|
|
1727
|
+
--shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
|
|
1728
|
+
--shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
|
|
1729
|
+
--shadow-resting-xsmall: 0 1px 1px 0 #010409cc; /** Extra small resting shadow for minimal elevation */
|
|
1724
1730
|
--tooltip-bgColor: var(--bgColor-emphasis);
|
|
1725
1731
|
--treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
|
|
1726
1732
|
--underlineNav-iconColor-rest: var(--fgColor-muted);
|
|
@@ -1731,15 +1737,18 @@
|
|
|
1731
1737
|
--border-neutral-emphasis: 0.0625rem solid #656c76;
|
|
1732
1738
|
--border-open-emphasis: var(--border-success-emphasis);
|
|
1733
1739
|
--border-open-muted: var(--border-success-muted);
|
|
1740
|
+
--border-translucent: 0.0625rem solid #ffffff26; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
|
|
1734
1741
|
--border-upsell-emphasis: 0.0625rem solid #8957e5;
|
|
1735
1742
|
--border-upsell-muted: 0.0625rem solid #ab7df866;
|
|
1736
1743
|
--borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
|
|
1737
1744
|
--borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
|
|
1738
1745
|
--button-danger-bgColor-disabled: var(--control-bgColor-disabled);
|
|
1739
1746
|
--button-danger-borderColor-rest: var(--control-borderColor-rest);
|
|
1747
|
+
--button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
|
|
1740
1748
|
--button-default-bgColor-disabled: var(--control-bgColor-disabled);
|
|
1741
1749
|
--button-default-borderColor-disabled: var(--control-borderColor-disabled);
|
|
1742
1750
|
--button-default-borderColor-rest: var(--control-borderColor-rest);
|
|
1751
|
+
--button-default-fgColor-disabled: var(--control-fgColor-disabled);
|
|
1743
1752
|
--button-default-fgColor-rest: var(--control-fgColor-rest);
|
|
1744
1753
|
--button-invisible-fgColor-active: var(--control-fgColor-rest);
|
|
1745
1754
|
--button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
|
|
@@ -1749,6 +1758,7 @@
|
|
|
1749
1758
|
--button-outline-bgColor-disabled: var(--control-bgColor-disabled);
|
|
1750
1759
|
--button-primary-borderColor-rest: var(--borderColor-translucent);
|
|
1751
1760
|
--button-primary-fgColor-rest: var(--fgColor-white);
|
|
1761
|
+
--button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
|
|
1752
1762
|
--button-primary-iconColor-rest: var(--fgColor-white);
|
|
1753
1763
|
--buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
|
|
1754
1764
|
--buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
|
|
@@ -1777,6 +1787,7 @@
|
|
|
1777
1787
|
--focus-outline: 2px solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
|
|
1778
1788
|
--overlay-borderColor: var(--borderColor-muted);
|
|
1779
1789
|
--tooltip-fgColor: var(--fgColor-onEmphasis);
|
|
1790
|
+
--border-draft-emphasis: 0.0625rem solid #656c76;
|
|
1780
1791
|
--border-neutral-muted: 0.0625rem solid #3d444db3;
|
|
1781
1792
|
--borderColor-draft-muted: var(--borderColor-neutral-muted); /** Subtle border for draft state indicators */
|
|
1782
1793
|
--button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
|
|
@@ -1787,11 +1798,12 @@
|
|
|
1787
1798
|
--buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
|
|
1788
1799
|
--buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
|
|
1789
1800
|
--buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
|
|
1790
|
-
--shadow-floating-large:
|
|
1791
|
-
--shadow-floating-medium:
|
|
1792
|
-
--shadow-floating-small:
|
|
1793
|
-
--shadow-floating-xlarge:
|
|
1801
|
+
--shadow-floating-large: 0 0 0 1px #3d444d, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
|
|
1802
|
+
--shadow-floating-medium: 0 0 0 1px #3d444d, 0 8px 16px -4px #01040966, 0 4px 32px -4px #01040966, 0 24px 48px -12px #01040966, 0 48px 96px -24px #01040966; /** Medium floating shadow for popovers and action menus */
|
|
1803
|
+
--shadow-floating-small: 0 0 0 1px #3d444d, 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Small floating shadow for dropdowns, tooltips, and small overlays */
|
|
1804
|
+
--shadow-floating-xlarge: 0 0 0 1px #3d444d, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
|
|
1794
1805
|
--underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
|
|
1806
|
+
--border-draft-muted: 0.0625rem solid #3d444db3;
|
|
1795
1807
|
--button-danger-borderColor-active: var(--button-danger-borderColor-hover);
|
|
1796
1808
|
--button-outline-borderColor-hover: var(--button-default-borderColor-hover);
|
|
1797
1809
|
--button-outline-borderColor-active: var(--button-outline-borderColor-hover);
|
|
@@ -60,11 +60,11 @@
|
|
|
60
60
|
--borderColor-sponsors-muted: #ed4baf; /** Subtle border for GitHub Sponsors content */
|
|
61
61
|
--borderColor-success-emphasis: #0349b4; /** Strong success border for prominent positive elements */
|
|
62
62
|
--borderColor-success-muted: #368cf9; /** Subtle success border for positive feedback elements */
|
|
63
|
-
--borderColor-translucent: #59636e; /** Semi-transparent border for overlays and layered elements */
|
|
63
|
+
--borderColor-translucent: #59636e; /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
|
|
64
64
|
--borderColor-transparent: #ffffff00; /** Fully transparent border */
|
|
65
65
|
--button-danger-bgColor-active: #702c00;
|
|
66
66
|
--button-danger-borderColor-hover: #5b2300;
|
|
67
|
-
--button-danger-shadow-selected: inset
|
|
67
|
+
--button-danger-shadow-selected: inset 0 1px 0 0 #43001133;
|
|
68
68
|
--button-inactive-bgColor: #e6eaef;
|
|
69
69
|
--button-inactive-fgColor: #454c54;
|
|
70
70
|
--button-invisible-bgColor-disabled: #ffffff00;
|
|
@@ -72,10 +72,10 @@
|
|
|
72
72
|
--button-invisible-fgColor-hover: #393f46;
|
|
73
73
|
--button-invisible-iconColor-hover: #393f46;
|
|
74
74
|
--button-outline-borderColor-hover: #022f7a;
|
|
75
|
-
--button-outline-shadow-selected: inset
|
|
75
|
+
--button-outline-shadow-selected: inset 0 1px 0 0 #021a4a33;
|
|
76
76
|
--button-primary-borderColor-disabled: var(--button-primary-bgColor-disabled);
|
|
77
77
|
--button-primary-borderColor-rest: #022f7a;
|
|
78
|
-
--button-primary-shadow-selected: inset
|
|
78
|
+
--button-primary-shadow-selected: inset 0 1px 0 0 #00230b4d;
|
|
79
79
|
--button-star-iconColor: #d5a824;
|
|
80
80
|
--buttonCounter-default-bgColor-rest: #c8d1da;
|
|
81
81
|
--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;
|
|
@@ -957,11 +963,11 @@
|
|
|
957
963
|
--borderColor-sponsors-muted: #ed4baf; /** Subtle border for GitHub Sponsors content */
|
|
958
964
|
--borderColor-success-emphasis: #0349b4; /** Strong success border for prominent positive elements */
|
|
959
965
|
--borderColor-success-muted: #368cf9; /** Subtle success border for positive feedback elements */
|
|
960
|
-
--borderColor-translucent: #59636e; /** Semi-transparent border for overlays and layered elements */
|
|
966
|
+
--borderColor-translucent: #59636e; /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
|
|
961
967
|
--borderColor-transparent: #ffffff00; /** Fully transparent border */
|
|
962
968
|
--button-danger-bgColor-active: #702c00;
|
|
963
969
|
--button-danger-borderColor-hover: #5b2300;
|
|
964
|
-
--button-danger-shadow-selected: inset
|
|
970
|
+
--button-danger-shadow-selected: inset 0 1px 0 0 #43001133;
|
|
965
971
|
--button-inactive-bgColor: #e6eaef;
|
|
966
972
|
--button-inactive-fgColor: #454c54;
|
|
967
973
|
--button-invisible-bgColor-disabled: #ffffff00;
|
|
@@ -969,10 +975,10 @@
|
|
|
969
975
|
--button-invisible-fgColor-hover: #393f46;
|
|
970
976
|
--button-invisible-iconColor-hover: #393f46;
|
|
971
977
|
--button-outline-borderColor-hover: #022f7a;
|
|
972
|
-
--button-outline-shadow-selected: inset
|
|
978
|
+
--button-outline-shadow-selected: inset 0 1px 0 0 #021a4a33;
|
|
973
979
|
--button-primary-borderColor-disabled: var(--button-primary-bgColor-disabled);
|
|
974
980
|
--button-primary-borderColor-rest: #022f7a;
|
|
975
|
-
--button-primary-shadow-selected: inset
|
|
981
|
+
--button-primary-shadow-selected: inset 0 1px 0 0 #00230b4d;
|
|
976
982
|
--button-star-iconColor: #d5a824;
|
|
977
983
|
--buttonCounter-default-bgColor-rest: #c8d1da;
|
|
978
984
|
--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;
|