@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
|
@@ -60,14 +60,14 @@
|
|
|
60
60
|
--borderColor-success-muted: #ddf4ff; /** Subtle success border for positive feedback elements */
|
|
61
61
|
--borderColor-transparent: #ffffff00; /** Fully transparent border */
|
|
62
62
|
--button-danger-bgColor-active: #953800;
|
|
63
|
-
--button-danger-shadow-selected: inset
|
|
63
|
+
--button-danger-shadow-selected: inset 0 1px 0 0 #47170033;
|
|
64
64
|
--button-inactive-bgColor: #e6eaef;
|
|
65
65
|
--button-inactive-fgColor: #59636e;
|
|
66
66
|
--button-invisible-bgColor-disabled: #ffffff00;
|
|
67
67
|
--button-invisible-borderColor-disabled: #ffffff00;
|
|
68
|
-
--button-outline-shadow-selected: inset
|
|
68
|
+
--button-outline-shadow-selected: inset 0 1px 0 0 #00215533;
|
|
69
69
|
--button-primary-borderColor-disabled: var(--button-primary-bgColor-disabled);
|
|
70
|
-
--button-primary-shadow-selected: inset
|
|
70
|
+
--button-primary-shadow-selected: inset 0 1px 0 0 #0021554d;
|
|
71
71
|
--button-star-iconColor: #eac54f;
|
|
72
72
|
--buttonCounter-danger-fgColor-rest: #953800;
|
|
73
73
|
--buttonCounter-outline-fgColor-rest: #0550ae;
|
|
@@ -637,14 +637,14 @@
|
|
|
637
637
|
--reactionButton-selected-fgColor-hover: #0550ae;
|
|
638
638
|
--selectMenu-bgColor-active: #b6e3ff;
|
|
639
639
|
--selectMenu-borderColor: #ffffff00;
|
|
640
|
-
--shadow-floating-legacy:
|
|
641
|
-
--shadow-resting-medium:
|
|
640
|
+
--shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
|
|
641
|
+
--shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
|
|
642
642
|
--skeletonLoader-bgColor: #818b981a;
|
|
643
643
|
--topicTag-borderColor: #ffffff00;
|
|
644
644
|
--treeViewItem-leadingVisual-iconColor-rest: #54aeff;
|
|
645
645
|
--underlineNav-borderColor-active: #fd8c73;
|
|
646
646
|
--avatar-bgColor: #ffffff;
|
|
647
|
-
--avatar-shadow:
|
|
647
|
+
--avatar-shadow: 0 0 0 2px #ffffffcc;
|
|
648
648
|
--bgColor-black: #1f2328; /** Pure black background */
|
|
649
649
|
--bgColor-closed-emphasis: var(--bgColor-neutral-emphasis); /** Strong background for closed state badges and labels */
|
|
650
650
|
--bgColor-closed-muted: var(--bgColor-neutral-muted); /** Subtle background for closed state indicators (issues, PRs) */
|
|
@@ -679,7 +679,7 @@
|
|
|
679
679
|
--borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
|
|
680
680
|
--borderColor-draft-muted: #d1d9e066; /** Subtle border for draft state indicators */
|
|
681
681
|
--borderColor-muted: #d1d9e0b3; /** Subtle border for secondary elements and light separators */
|
|
682
|
-
--borderColor-translucent: #1f232826; /** Semi-transparent border for overlays and layered elements */
|
|
682
|
+
--borderColor-translucent: #1f232826; /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
|
|
683
683
|
--borderColor-upsell-emphasis: var(--borderColor-done-emphasis); /** Strong border for prominent upsell elements */
|
|
684
684
|
--borderColor-upsell-muted: var(--borderColor-done-muted); /** Subtle border for upsell and promotional content */
|
|
685
685
|
--button-danger-bgColor-hover: var(--bgColor-danger-emphasis);
|
|
@@ -694,7 +694,7 @@
|
|
|
694
694
|
--button-default-bgColor-rest: var(--control-bgColor-rest);
|
|
695
695
|
--button-default-bgColor-selected: var(--control-bgColor-active);
|
|
696
696
|
--button-default-fgColor-rest: var(--control-fgColor-rest);
|
|
697
|
-
--button-default-shadow-resting:
|
|
697
|
+
--button-default-shadow-resting: 0 1px 0 0 #1f23280a;
|
|
698
698
|
--button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
|
|
699
699
|
--button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
|
|
700
700
|
--button-invisible-bgColor-rest: var(--control-transparent-bgColor-rest);
|
|
@@ -806,9 +806,9 @@
|
|
|
806
806
|
--progressBar-bgColor-success: var(--bgColor-success-emphasis);
|
|
807
807
|
--progressBar-track-bgColor: var(--borderColor-default);
|
|
808
808
|
--selection-bgColor: #0969da33; /** Background color for text selection highlights */
|
|
809
|
-
--shadow-inset: inset
|
|
810
|
-
--shadow-resting-small:
|
|
811
|
-
--shadow-resting-xsmall:
|
|
809
|
+
--shadow-inset: inset 0 1px 0 0 #1f23280a; /** Inset shadow for recessed elements */
|
|
810
|
+
--shadow-resting-small: 0 1px 1px 0 #1f23280a, 0 1px 2px 0 #1f232808; /** Small resting shadow for buttons and interactive elements */
|
|
811
|
+
--shadow-resting-xsmall: 0 1px 1px 0 #1f23280d; /** Extra small resting shadow for minimal elevation */
|
|
812
812
|
--sideNav-bgColor-selected: #ffffff;
|
|
813
813
|
--timelineBadge-bgColor: var(--bgColor-muted);
|
|
814
814
|
--tooltip-bgColor: var(--bgColor-emphasis);
|
|
@@ -816,24 +816,30 @@
|
|
|
816
816
|
--avatar-borderColor: var(--borderColor-translucent);
|
|
817
817
|
--border-closed-emphasis: var(--border-danger-emphasis);
|
|
818
818
|
--border-closed-muted: var(--border-danger-muted);
|
|
819
|
+
--border-draft-emphasis: 0.0625rem solid #59636e;
|
|
820
|
+
--border-draft-muted: 0.0625rem solid #d1d9e066;
|
|
819
821
|
--border-muted: 0.0625rem solid #d1d9e0b3;
|
|
820
822
|
--border-open-emphasis: var(--border-success-emphasis);
|
|
821
823
|
--border-open-muted: var(--border-success-muted);
|
|
824
|
+
--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. */
|
|
822
825
|
--border-upsell-emphasis: 0.0625rem solid #8250df;
|
|
823
826
|
--border-upsell-muted: 0.0625rem solid #c297ff66;
|
|
824
827
|
--borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
|
|
825
828
|
--button-danger-bgColor-disabled: var(--control-bgColor-disabled);
|
|
826
829
|
--button-danger-borderColor-rest: var(--control-borderColor-rest);
|
|
830
|
+
--button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
|
|
827
831
|
--button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
|
|
828
832
|
--button-default-bgColor-disabled: var(--control-bgColor-disabled);
|
|
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);
|
|
@@ -957,14 +963,14 @@
|
|
|
957
963
|
--borderColor-success-muted: #ddf4ff; /** Subtle success border for positive feedback elements */
|
|
958
964
|
--borderColor-transparent: #ffffff00; /** Fully transparent border */
|
|
959
965
|
--button-danger-bgColor-active: #953800;
|
|
960
|
-
--button-danger-shadow-selected: inset
|
|
966
|
+
--button-danger-shadow-selected: inset 0 1px 0 0 #47170033;
|
|
961
967
|
--button-inactive-bgColor: #e6eaef;
|
|
962
968
|
--button-inactive-fgColor: #59636e;
|
|
963
969
|
--button-invisible-bgColor-disabled: #ffffff00;
|
|
964
970
|
--button-invisible-borderColor-disabled: #ffffff00;
|
|
965
|
-
--button-outline-shadow-selected: inset
|
|
971
|
+
--button-outline-shadow-selected: inset 0 1px 0 0 #00215533;
|
|
966
972
|
--button-primary-borderColor-disabled: var(--button-primary-bgColor-disabled);
|
|
967
|
-
--button-primary-shadow-selected: inset
|
|
973
|
+
--button-primary-shadow-selected: inset 0 1px 0 0 #0021554d;
|
|
968
974
|
--button-star-iconColor: #eac54f;
|
|
969
975
|
--buttonCounter-danger-fgColor-rest: #953800;
|
|
970
976
|
--buttonCounter-outline-fgColor-rest: #0550ae;
|
|
@@ -1534,14 +1540,14 @@
|
|
|
1534
1540
|
--reactionButton-selected-fgColor-hover: #0550ae;
|
|
1535
1541
|
--selectMenu-bgColor-active: #b6e3ff;
|
|
1536
1542
|
--selectMenu-borderColor: #ffffff00;
|
|
1537
|
-
--shadow-floating-legacy:
|
|
1538
|
-
--shadow-resting-medium:
|
|
1543
|
+
--shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
|
|
1544
|
+
--shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
|
|
1539
1545
|
--skeletonLoader-bgColor: #818b981a;
|
|
1540
1546
|
--topicTag-borderColor: #ffffff00;
|
|
1541
1547
|
--treeViewItem-leadingVisual-iconColor-rest: #54aeff;
|
|
1542
1548
|
--underlineNav-borderColor-active: #fd8c73;
|
|
1543
1549
|
--avatar-bgColor: #ffffff;
|
|
1544
|
-
--avatar-shadow:
|
|
1550
|
+
--avatar-shadow: 0 0 0 2px #ffffffcc;
|
|
1545
1551
|
--bgColor-black: #1f2328; /** Pure black background */
|
|
1546
1552
|
--bgColor-closed-emphasis: var(--bgColor-neutral-emphasis); /** Strong background for closed state badges and labels */
|
|
1547
1553
|
--bgColor-closed-muted: var(--bgColor-neutral-muted); /** Subtle background for closed state indicators (issues, PRs) */
|
|
@@ -1576,7 +1582,7 @@
|
|
|
1576
1582
|
--borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
|
|
1577
1583
|
--borderColor-draft-muted: #d1d9e066; /** Subtle border for draft state indicators */
|
|
1578
1584
|
--borderColor-muted: #d1d9e0b3; /** Subtle border for secondary elements and light separators */
|
|
1579
|
-
--borderColor-translucent: #1f232826; /** Semi-transparent border for overlays and layered elements */
|
|
1585
|
+
--borderColor-translucent: #1f232826; /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
|
|
1580
1586
|
--borderColor-upsell-emphasis: var(--borderColor-done-emphasis); /** Strong border for prominent upsell elements */
|
|
1581
1587
|
--borderColor-upsell-muted: var(--borderColor-done-muted); /** Subtle border for upsell and promotional content */
|
|
1582
1588
|
--button-danger-bgColor-hover: var(--bgColor-danger-emphasis);
|
|
@@ -1591,7 +1597,7 @@
|
|
|
1591
1597
|
--button-default-bgColor-rest: var(--control-bgColor-rest);
|
|
1592
1598
|
--button-default-bgColor-selected: var(--control-bgColor-active);
|
|
1593
1599
|
--button-default-fgColor-rest: var(--control-fgColor-rest);
|
|
1594
|
-
--button-default-shadow-resting:
|
|
1600
|
+
--button-default-shadow-resting: 0 1px 0 0 #1f23280a;
|
|
1595
1601
|
--button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
|
|
1596
1602
|
--button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
|
|
1597
1603
|
--button-invisible-bgColor-rest: var(--control-transparent-bgColor-rest);
|
|
@@ -1703,9 +1709,9 @@
|
|
|
1703
1709
|
--progressBar-bgColor-success: var(--bgColor-success-emphasis);
|
|
1704
1710
|
--progressBar-track-bgColor: var(--borderColor-default);
|
|
1705
1711
|
--selection-bgColor: #0969da33; /** Background color for text selection highlights */
|
|
1706
|
-
--shadow-inset: inset
|
|
1707
|
-
--shadow-resting-small:
|
|
1708
|
-
--shadow-resting-xsmall:
|
|
1712
|
+
--shadow-inset: inset 0 1px 0 0 #1f23280a; /** Inset shadow for recessed elements */
|
|
1713
|
+
--shadow-resting-small: 0 1px 1px 0 #1f23280a, 0 1px 2px 0 #1f232808; /** Small resting shadow for buttons and interactive elements */
|
|
1714
|
+
--shadow-resting-xsmall: 0 1px 1px 0 #1f23280d; /** Extra small resting shadow for minimal elevation */
|
|
1709
1715
|
--sideNav-bgColor-selected: #ffffff;
|
|
1710
1716
|
--timelineBadge-bgColor: var(--bgColor-muted);
|
|
1711
1717
|
--tooltip-bgColor: var(--bgColor-emphasis);
|
|
@@ -1713,24 +1719,30 @@
|
|
|
1713
1719
|
--avatar-borderColor: var(--borderColor-translucent);
|
|
1714
1720
|
--border-closed-emphasis: var(--border-danger-emphasis);
|
|
1715
1721
|
--border-closed-muted: var(--border-danger-muted);
|
|
1722
|
+
--border-draft-emphasis: 0.0625rem solid #59636e;
|
|
1723
|
+
--border-draft-muted: 0.0625rem solid #d1d9e066;
|
|
1716
1724
|
--border-muted: 0.0625rem solid #d1d9e0b3;
|
|
1717
1725
|
--border-open-emphasis: var(--border-success-emphasis);
|
|
1718
1726
|
--border-open-muted: var(--border-success-muted);
|
|
1727
|
+
--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. */
|
|
1719
1728
|
--border-upsell-emphasis: 0.0625rem solid #8250df;
|
|
1720
1729
|
--border-upsell-muted: 0.0625rem solid #c297ff66;
|
|
1721
1730
|
--borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
|
|
1722
1731
|
--button-danger-bgColor-disabled: var(--control-bgColor-disabled);
|
|
1723
1732
|
--button-danger-borderColor-rest: var(--control-borderColor-rest);
|
|
1733
|
+
--button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
|
|
1724
1734
|
--button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
|
|
1725
1735
|
--button-default-bgColor-disabled: var(--control-bgColor-disabled);
|
|
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);
|
|
@@ -58,21 +58,21 @@
|
|
|
58
58
|
--borderColor-sponsors-muted: #ed4baf; /** Subtle border for GitHub Sponsors content */
|
|
59
59
|
--borderColor-success-emphasis: #055d20; /** Strong success border for prominent positive elements */
|
|
60
60
|
--borderColor-success-muted: #26a148; /** Subtle success border for positive feedback elements */
|
|
61
|
-
--borderColor-translucent: #59636e; /** Semi-transparent border for overlays and layered elements */
|
|
61
|
+
--borderColor-translucent: #59636e; /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
|
|
62
62
|
--borderColor-transparent: #ffffff00; /** Fully transparent border */
|
|
63
63
|
--button-danger-bgColor-active: #86061d;
|
|
64
64
|
--button-danger-borderColor-hover: #6e011a;
|
|
65
|
-
--button-danger-shadow-selected: inset
|
|
65
|
+
--button-danger-shadow-selected: inset 0 1px 0 0 #43001133;
|
|
66
66
|
--button-inactive-fgColor: #454c54;
|
|
67
67
|
--button-invisible-bgColor-disabled: #ffffff00;
|
|
68
68
|
--button-invisible-borderColor-disabled: #ffffff00;
|
|
69
69
|
--button-invisible-fgColor-hover: #393f46;
|
|
70
70
|
--button-invisible-iconColor-hover: #393f46;
|
|
71
71
|
--button-outline-borderColor-hover: #022f7a;
|
|
72
|
-
--button-outline-shadow-selected: inset
|
|
72
|
+
--button-outline-shadow-selected: inset 0 1px 0 0 #021a4a33;
|
|
73
73
|
--button-primary-bgColor-rest: #055d20;
|
|
74
74
|
--button-primary-borderColor-rest: #013d14;
|
|
75
|
-
--button-primary-shadow-selected: inset
|
|
75
|
+
--button-primary-shadow-selected: inset 0 1px 0 0 #00230b4d;
|
|
76
76
|
--button-star-iconColor: #d5a824;
|
|
77
77
|
--buttonCounter-default-bgColor-rest: #c8d1da;
|
|
78
78
|
--buttonCounter-outline-fgColor-rest: #023b95;
|
|
@@ -617,13 +617,13 @@
|
|
|
617
617
|
--reactionButton-selected-fgColor-hover: #023b95;
|
|
618
618
|
--selectMenu-bgColor-active: #9cd7ff;
|
|
619
619
|
--selectMenu-borderColor: #ffffff00;
|
|
620
|
-
--shadow-floating-legacy:
|
|
621
|
-
--shadow-resting-medium:
|
|
620
|
+
--shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
|
|
621
|
+
--shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
|
|
622
622
|
--skeletonLoader-bgColor: #dae0e7;
|
|
623
623
|
--treeViewItem-leadingVisual-iconColor-rest: #368cf9;
|
|
624
624
|
--underlineNav-borderColor-active: #cd3425;
|
|
625
625
|
--avatar-bgColor: #ffffff;
|
|
626
|
-
--avatar-shadow:
|
|
626
|
+
--avatar-shadow: 0 0 0 2px #ffffffcc;
|
|
627
627
|
--bgColor-black: #010409; /** Pure black background */
|
|
628
628
|
--bgColor-closed-emphasis: var(--bgColor-danger-emphasis); /** Strong background for closed state badges and labels */
|
|
629
629
|
--bgColor-closed-muted: var(--bgColor-danger-muted); /** Subtle background for closed state indicators (issues, PRs) */
|
|
@@ -652,6 +652,7 @@
|
|
|
652
652
|
--border-sponsors-muted: 0.0625rem solid #ed4baf;
|
|
653
653
|
--border-success-emphasis: 0.0625rem solid #055d20;
|
|
654
654
|
--border-success-muted: 0.0625rem solid #26a148;
|
|
655
|
+
--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. */
|
|
655
656
|
--border-transparent: 0.0625rem solid #ffffff00;
|
|
656
657
|
--borderColor-closed-emphasis: var(--borderColor-danger-emphasis); /** Strong border for closed state badges */
|
|
657
658
|
--borderColor-closed-muted: var(--borderColor-danger-muted); /** Subtle border for closed state indicators */
|
|
@@ -675,7 +676,7 @@
|
|
|
675
676
|
--button-default-bgColor-rest: var(--control-bgColor-rest);
|
|
676
677
|
--button-default-bgColor-selected: var(--control-bgColor-active);
|
|
677
678
|
--button-default-fgColor-rest: var(--control-fgColor-rest);
|
|
678
|
-
--button-default-shadow-resting:
|
|
679
|
+
--button-default-shadow-resting: 0 1px 0 0 #0104090a;
|
|
679
680
|
--button-inactive-bgColor: var(--control-bgColor-rest);
|
|
680
681
|
--button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
|
|
681
682
|
--button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
|
|
@@ -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,7 @@
|
|
|
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;
|
|
821
823
|
--border-emphasis: 0.0625rem solid #454c54;
|
|
822
824
|
--border-muted: 0.0625rem solid #454c54;
|
|
823
825
|
--border-open-emphasis: var(--border-success-emphasis);
|
|
@@ -827,16 +829,19 @@
|
|
|
827
829
|
--borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
|
|
828
830
|
--button-danger-bgColor-disabled: var(--control-bgColor-disabled);
|
|
829
831
|
--button-danger-borderColor-rest: var(--control-borderColor-rest);
|
|
832
|
+
--button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
|
|
830
833
|
--button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
|
|
831
834
|
--button-default-bgColor-disabled: var(--control-bgColor-disabled);
|
|
832
835
|
--button-default-borderColor-active: var(--control-borderColor-rest);
|
|
833
836
|
--button-default-borderColor-disabled: var(--control-borderColor-disabled);
|
|
834
837
|
--button-default-borderColor-rest: var(--control-borderColor-rest);
|
|
838
|
+
--button-default-fgColor-disabled: var(--control-fgColor-disabled);
|
|
835
839
|
--button-invisible-borderColor-hover: var(--control-transparent-borderColor-hover);
|
|
836
840
|
--button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
|
|
837
841
|
--button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
|
|
838
842
|
--button-outline-bgColor-disabled: var(--control-bgColor-disabled);
|
|
839
843
|
--button-primary-fgColor-rest: var(--fgColor-white);
|
|
844
|
+
--button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
|
|
840
845
|
--button-primary-iconColor-rest: #ffffffcc;
|
|
841
846
|
--buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
|
|
842
847
|
--buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
|
|
@@ -885,10 +890,10 @@
|
|
|
885
890
|
--focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
|
|
886
891
|
--progressBar-track-bgColor: var(--bgColor-default);
|
|
887
892
|
--reactionButton-selected-fgColor-rest: var(--fgColor-link);
|
|
888
|
-
--shadow-floating-large:
|
|
889
|
-
--shadow-floating-medium:
|
|
890
|
-
--shadow-floating-small:
|
|
891
|
-
--shadow-floating-xlarge:
|
|
893
|
+
--shadow-floating-large: 0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
|
|
894
|
+
--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 */
|
|
895
|
+
--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 */
|
|
896
|
+
--shadow-floating-xlarge: 0 0 0 1px #454c54, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
|
|
892
897
|
--tooltip-fgColor: var(--fgColor-onEmphasis);
|
|
893
898
|
--underlineNav-borderColor-hover: var(--borderColor-muted);
|
|
894
899
|
--border-neutral-muted: 0.0625rem solid #454c54;
|
|
@@ -898,6 +903,7 @@
|
|
|
898
903
|
--buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
|
|
899
904
|
--buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
|
|
900
905
|
--controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
|
|
906
|
+
--border-draft-muted: 0.0625rem solid #454c54;
|
|
901
907
|
}
|
|
902
908
|
@media (prefers-color-scheme: dark) {
|
|
903
909
|
[data-color-mode][data-color-mode="auto"][data-dark-theme="light_high_contrast"] {
|
|
@@ -955,21 +961,21 @@
|
|
|
955
961
|
--borderColor-sponsors-muted: #ed4baf; /** Subtle border for GitHub Sponsors content */
|
|
956
962
|
--borderColor-success-emphasis: #055d20; /** Strong success border for prominent positive elements */
|
|
957
963
|
--borderColor-success-muted: #26a148; /** Subtle success border for positive feedback elements */
|
|
958
|
-
--borderColor-translucent: #59636e; /** Semi-transparent border for overlays and layered elements */
|
|
964
|
+
--borderColor-translucent: #59636e; /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
|
|
959
965
|
--borderColor-transparent: #ffffff00; /** Fully transparent border */
|
|
960
966
|
--button-danger-bgColor-active: #86061d;
|
|
961
967
|
--button-danger-borderColor-hover: #6e011a;
|
|
962
|
-
--button-danger-shadow-selected: inset
|
|
968
|
+
--button-danger-shadow-selected: inset 0 1px 0 0 #43001133;
|
|
963
969
|
--button-inactive-fgColor: #454c54;
|
|
964
970
|
--button-invisible-bgColor-disabled: #ffffff00;
|
|
965
971
|
--button-invisible-borderColor-disabled: #ffffff00;
|
|
966
972
|
--button-invisible-fgColor-hover: #393f46;
|
|
967
973
|
--button-invisible-iconColor-hover: #393f46;
|
|
968
974
|
--button-outline-borderColor-hover: #022f7a;
|
|
969
|
-
--button-outline-shadow-selected: inset
|
|
975
|
+
--button-outline-shadow-selected: inset 0 1px 0 0 #021a4a33;
|
|
970
976
|
--button-primary-bgColor-rest: #055d20;
|
|
971
977
|
--button-primary-borderColor-rest: #013d14;
|
|
972
|
-
--button-primary-shadow-selected: inset
|
|
978
|
+
--button-primary-shadow-selected: inset 0 1px 0 0 #00230b4d;
|
|
973
979
|
--button-star-iconColor: #d5a824;
|
|
974
980
|
--buttonCounter-default-bgColor-rest: #c8d1da;
|
|
975
981
|
--buttonCounter-outline-fgColor-rest: #023b95;
|
|
@@ -1514,13 +1520,13 @@
|
|
|
1514
1520
|
--reactionButton-selected-fgColor-hover: #023b95;
|
|
1515
1521
|
--selectMenu-bgColor-active: #9cd7ff;
|
|
1516
1522
|
--selectMenu-borderColor: #ffffff00;
|
|
1517
|
-
--shadow-floating-legacy:
|
|
1518
|
-
--shadow-resting-medium:
|
|
1523
|
+
--shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
|
|
1524
|
+
--shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
|
|
1519
1525
|
--skeletonLoader-bgColor: #dae0e7;
|
|
1520
1526
|
--treeViewItem-leadingVisual-iconColor-rest: #368cf9;
|
|
1521
1527
|
--underlineNav-borderColor-active: #cd3425;
|
|
1522
1528
|
--avatar-bgColor: #ffffff;
|
|
1523
|
-
--avatar-shadow:
|
|
1529
|
+
--avatar-shadow: 0 0 0 2px #ffffffcc;
|
|
1524
1530
|
--bgColor-black: #010409; /** Pure black background */
|
|
1525
1531
|
--bgColor-closed-emphasis: var(--bgColor-danger-emphasis); /** Strong background for closed state badges and labels */
|
|
1526
1532
|
--bgColor-closed-muted: var(--bgColor-danger-muted); /** Subtle background for closed state indicators (issues, PRs) */
|
|
@@ -1549,6 +1555,7 @@
|
|
|
1549
1555
|
--border-sponsors-muted: 0.0625rem solid #ed4baf;
|
|
1550
1556
|
--border-success-emphasis: 0.0625rem solid #055d20;
|
|
1551
1557
|
--border-success-muted: 0.0625rem solid #26a148;
|
|
1558
|
+
--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. */
|
|
1552
1559
|
--border-transparent: 0.0625rem solid #ffffff00;
|
|
1553
1560
|
--borderColor-closed-emphasis: var(--borderColor-danger-emphasis); /** Strong border for closed state badges */
|
|
1554
1561
|
--borderColor-closed-muted: var(--borderColor-danger-muted); /** Subtle border for closed state indicators */
|
|
@@ -1572,7 +1579,7 @@
|
|
|
1572
1579
|
--button-default-bgColor-rest: var(--control-bgColor-rest);
|
|
1573
1580
|
--button-default-bgColor-selected: var(--control-bgColor-active);
|
|
1574
1581
|
--button-default-fgColor-rest: var(--control-fgColor-rest);
|
|
1575
|
-
--button-default-shadow-resting:
|
|
1582
|
+
--button-default-shadow-resting: 0 1px 0 0 #0104090a;
|
|
1576
1583
|
--button-inactive-bgColor: var(--control-bgColor-rest);
|
|
1577
1584
|
--button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
|
|
1578
1585
|
--button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
|
|
@@ -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,7 @@
|
|
|
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;
|
|
1718
1726
|
--border-emphasis: 0.0625rem solid #454c54;
|
|
1719
1727
|
--border-muted: 0.0625rem solid #454c54;
|
|
1720
1728
|
--border-open-emphasis: var(--border-success-emphasis);
|
|
@@ -1724,16 +1732,19 @@
|
|
|
1724
1732
|
--borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
|
|
1725
1733
|
--button-danger-bgColor-disabled: var(--control-bgColor-disabled);
|
|
1726
1734
|
--button-danger-borderColor-rest: var(--control-borderColor-rest);
|
|
1735
|
+
--button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
|
|
1727
1736
|
--button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
|
|
1728
1737
|
--button-default-bgColor-disabled: var(--control-bgColor-disabled);
|
|
1729
1738
|
--button-default-borderColor-active: var(--control-borderColor-rest);
|
|
1730
1739
|
--button-default-borderColor-disabled: var(--control-borderColor-disabled);
|
|
1731
1740
|
--button-default-borderColor-rest: var(--control-borderColor-rest);
|
|
1741
|
+
--button-default-fgColor-disabled: var(--control-fgColor-disabled);
|
|
1732
1742
|
--button-invisible-borderColor-hover: var(--control-transparent-borderColor-hover);
|
|
1733
1743
|
--button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
|
|
1734
1744
|
--button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
|
|
1735
1745
|
--button-outline-bgColor-disabled: var(--control-bgColor-disabled);
|
|
1736
1746
|
--button-primary-fgColor-rest: var(--fgColor-white);
|
|
1747
|
+
--button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
|
|
1737
1748
|
--button-primary-iconColor-rest: #ffffffcc;
|
|
1738
1749
|
--buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
|
|
1739
1750
|
--buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
|
|
@@ -1782,10 +1793,10 @@
|
|
|
1782
1793
|
--focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
|
|
1783
1794
|
--progressBar-track-bgColor: var(--bgColor-default);
|
|
1784
1795
|
--reactionButton-selected-fgColor-rest: var(--fgColor-link);
|
|
1785
|
-
--shadow-floating-large:
|
|
1786
|
-
--shadow-floating-medium:
|
|
1787
|
-
--shadow-floating-small:
|
|
1788
|
-
--shadow-floating-xlarge:
|
|
1796
|
+
--shadow-floating-large: 0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
|
|
1797
|
+
--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 */
|
|
1798
|
+
--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 */
|
|
1799
|
+
--shadow-floating-xlarge: 0 0 0 1px #454c54, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
|
|
1789
1800
|
--tooltip-fgColor: var(--fgColor-onEmphasis);
|
|
1790
1801
|
--underlineNav-borderColor-hover: var(--borderColor-muted);
|
|
1791
1802
|
--border-neutral-muted: 0.0625rem solid #454c54;
|
|
@@ -1795,5 +1806,6 @@
|
|
|
1795
1806
|
--buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
|
|
1796
1807
|
--buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
|
|
1797
1808
|
--controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
|
|
1809
|
+
--border-draft-muted: 0.0625rem solid #454c54;
|
|
1798
1810
|
}
|
|
1799
1811
|
}
|