@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
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
--control-checked-bgColor-hover: #2a7aef;
|
|
14
14
|
--fgColor-accent: #4493f8; /** Accent text for links and interactive elements */
|
|
15
15
|
--reactionButton-selected-bgColor-hover: #3a8cfd5c;
|
|
16
|
-
--avatar-shadow:
|
|
16
|
+
--avatar-shadow: 0 0 0 2px #0d1117;
|
|
17
17
|
--avatarStack-fade-bgColor-default: #3d444d;
|
|
18
18
|
--avatarStack-fade-bgColor-muted: #2a313c;
|
|
19
19
|
--bgColor-accent-emphasis: #1f6feb; /** Strong accent background for active states and focused states */
|
|
@@ -60,8 +60,8 @@
|
|
|
60
60
|
--borderColor-success-muted: #388bfd66; /** Subtle success border for positive feedback elements */
|
|
61
61
|
--borderColor-transparent: #00000000; /** Fully transparent border */
|
|
62
62
|
--button-danger-bgColor-hover: #9b4215;
|
|
63
|
-
--button-danger-shadow-selected:
|
|
64
|
-
--button-default-shadow-resting:
|
|
63
|
+
--button-danger-shadow-selected: 0 0 0 0 #00000000;
|
|
64
|
+
--button-default-shadow-resting: 0 0 0 0 #00000000;
|
|
65
65
|
--button-inactive-bgColor: #262c36;
|
|
66
66
|
--button-inactive-fgColor: #9198a1;
|
|
67
67
|
--button-invisible-bgColor-disabled: #00000000;
|
|
@@ -71,9 +71,9 @@
|
|
|
71
71
|
--button-outline-fgColor-disabled: #4493f880;
|
|
72
72
|
--button-outline-fgColor-hover: #58a6ff;
|
|
73
73
|
--button-outline-fgColor-rest: #388bfd;
|
|
74
|
-
--button-outline-shadow-selected:
|
|
74
|
+
--button-outline-shadow-selected: 0 0 0 0 #00000000;
|
|
75
75
|
--button-primary-bgColor-disabled: #1158c7;
|
|
76
|
-
--button-primary-shadow-selected:
|
|
76
|
+
--button-primary-shadow-selected: 0 0 0 0 #00000000;
|
|
77
77
|
--button-star-iconColor: #e3b341;
|
|
78
78
|
--buttonCounter-danger-bgColor-rest: #49020233;
|
|
79
79
|
--buttonCounter-default-bgColor-rest: #2f3742;
|
|
@@ -694,7 +694,7 @@
|
|
|
694
694
|
--borderColor-draft-muted: #3d444d66; /** Subtle border for draft state indicators */
|
|
695
695
|
--borderColor-muted: #3d444db3; /** Subtle border for secondary elements and light separators */
|
|
696
696
|
--borderColor-neutral-emphasis: var(--borderColor-emphasis); /** Strong neutral semantic border */
|
|
697
|
-
--borderColor-translucent: #ffffff26; /** Semi-transparent border for overlays and layered elements */
|
|
697
|
+
--borderColor-translucent: #ffffff26; /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
|
|
698
698
|
--borderColor-upsell-emphasis: var(--borderColor-done-emphasis); /** Strong border for prominent upsell elements */
|
|
699
699
|
--borderColor-upsell-muted: var(--borderColor-done-muted); /** Subtle border for upsell and promotional content */
|
|
700
700
|
--button-danger-bgColor-active: var(--bgColor-danger-emphasis);
|
|
@@ -819,31 +819,35 @@
|
|
|
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);
|
|
830
830
|
--avatar-borderColor: var(--borderColor-translucent);
|
|
831
831
|
--border-closed-emphasis: var(--border-danger-emphasis);
|
|
832
832
|
--border-closed-muted: var(--border-danger-muted);
|
|
833
|
+
--border-draft-muted: 0.0625rem solid #3d444d66;
|
|
833
834
|
--border-muted: 0.0625rem solid #3d444db3;
|
|
834
835
|
--border-neutral-emphasis: 0.0625rem solid #656c76;
|
|
835
836
|
--border-open-emphasis: var(--border-success-emphasis);
|
|
836
837
|
--border-open-muted: var(--border-success-muted);
|
|
838
|
+
--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
839
|
--border-upsell-emphasis: 0.0625rem solid #8957e5;
|
|
838
840
|
--border-upsell-muted: 0.0625rem solid #ab7df866;
|
|
839
841
|
--borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
|
|
840
842
|
--borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
|
|
841
843
|
--button-danger-bgColor-disabled: var(--control-bgColor-disabled);
|
|
842
844
|
--button-danger-borderColor-rest: var(--control-borderColor-rest);
|
|
845
|
+
--button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
|
|
843
846
|
--button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
|
|
844
847
|
--button-default-bgColor-disabled: var(--control-bgColor-disabled);
|
|
845
848
|
--button-default-borderColor-disabled: var(--control-borderColor-disabled);
|
|
846
849
|
--button-default-borderColor-rest: var(--control-borderColor-rest);
|
|
850
|
+
--button-default-fgColor-disabled: var(--control-fgColor-disabled);
|
|
847
851
|
--button-default-fgColor-rest: var(--control-fgColor-rest);
|
|
848
852
|
--button-invisible-fgColor-active: var(--control-fgColor-rest);
|
|
849
853
|
--button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
|
|
@@ -853,6 +857,7 @@
|
|
|
853
857
|
--button-outline-bgColor-disabled: var(--control-bgColor-disabled);
|
|
854
858
|
--button-primary-borderColor-rest: var(--borderColor-translucent);
|
|
855
859
|
--button-primary-fgColor-rest: var(--fgColor-white);
|
|
860
|
+
--button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
|
|
856
861
|
--button-primary-iconColor-rest: var(--fgColor-white);
|
|
857
862
|
--buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
|
|
858
863
|
--buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
|
|
@@ -881,6 +886,7 @@
|
|
|
881
886
|
--focus-outline: 2px solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
|
|
882
887
|
--overlay-borderColor: var(--borderColor-muted);
|
|
883
888
|
--tooltip-fgColor: var(--fgColor-onEmphasis);
|
|
889
|
+
--border-draft-emphasis: 0.0625rem solid #656c76;
|
|
884
890
|
--border-neutral-muted: 0.0625rem solid #3d444db3;
|
|
885
891
|
--button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
|
|
886
892
|
--button-default-borderColor-active: var(--button-default-borderColor-rest);
|
|
@@ -890,10 +896,10 @@
|
|
|
890
896
|
--buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
|
|
891
897
|
--buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
|
|
892
898
|
--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:
|
|
899
|
+
--shadow-floating-large: 0 0 0 1px #3d444d, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
|
|
900
|
+
--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 */
|
|
901
|
+
--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 */
|
|
902
|
+
--shadow-floating-xlarge: 0 0 0 1px #3d444d, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
|
|
897
903
|
--underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
|
|
898
904
|
--button-danger-borderColor-active: var(--button-danger-borderColor-hover);
|
|
899
905
|
--button-outline-borderColor-hover: var(--button-default-borderColor-hover);
|
|
@@ -910,7 +916,7 @@
|
|
|
910
916
|
--control-checked-bgColor-hover: #2a7aef;
|
|
911
917
|
--fgColor-accent: #4493f8; /** Accent text for links and interactive elements */
|
|
912
918
|
--reactionButton-selected-bgColor-hover: #3a8cfd5c;
|
|
913
|
-
--avatar-shadow:
|
|
919
|
+
--avatar-shadow: 0 0 0 2px #0d1117;
|
|
914
920
|
--avatarStack-fade-bgColor-default: #3d444d;
|
|
915
921
|
--avatarStack-fade-bgColor-muted: #2a313c;
|
|
916
922
|
--bgColor-accent-emphasis: #1f6feb; /** Strong accent background for active states and focused states */
|
|
@@ -957,8 +963,8 @@
|
|
|
957
963
|
--borderColor-success-muted: #388bfd66; /** Subtle success border for positive feedback elements */
|
|
958
964
|
--borderColor-transparent: #00000000; /** Fully transparent border */
|
|
959
965
|
--button-danger-bgColor-hover: #9b4215;
|
|
960
|
-
--button-danger-shadow-selected:
|
|
961
|
-
--button-default-shadow-resting:
|
|
966
|
+
--button-danger-shadow-selected: 0 0 0 0 #00000000;
|
|
967
|
+
--button-default-shadow-resting: 0 0 0 0 #00000000;
|
|
962
968
|
--button-inactive-bgColor: #262c36;
|
|
963
969
|
--button-inactive-fgColor: #9198a1;
|
|
964
970
|
--button-invisible-bgColor-disabled: #00000000;
|
|
@@ -968,9 +974,9 @@
|
|
|
968
974
|
--button-outline-fgColor-disabled: #4493f880;
|
|
969
975
|
--button-outline-fgColor-hover: #58a6ff;
|
|
970
976
|
--button-outline-fgColor-rest: #388bfd;
|
|
971
|
-
--button-outline-shadow-selected:
|
|
977
|
+
--button-outline-shadow-selected: 0 0 0 0 #00000000;
|
|
972
978
|
--button-primary-bgColor-disabled: #1158c7;
|
|
973
|
-
--button-primary-shadow-selected:
|
|
979
|
+
--button-primary-shadow-selected: 0 0 0 0 #00000000;
|
|
974
980
|
--button-star-iconColor: #e3b341;
|
|
975
981
|
--buttonCounter-danger-bgColor-rest: #49020233;
|
|
976
982
|
--buttonCounter-default-bgColor-rest: #2f3742;
|
|
@@ -1591,7 +1597,7 @@
|
|
|
1591
1597
|
--borderColor-draft-muted: #3d444d66; /** Subtle border for draft state indicators */
|
|
1592
1598
|
--borderColor-muted: #3d444db3; /** Subtle border for secondary elements and light separators */
|
|
1593
1599
|
--borderColor-neutral-emphasis: var(--borderColor-emphasis); /** Strong neutral semantic border */
|
|
1594
|
-
--borderColor-translucent: #ffffff26; /** Semi-transparent border for overlays and layered elements */
|
|
1600
|
+
--borderColor-translucent: #ffffff26; /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
|
|
1595
1601
|
--borderColor-upsell-emphasis: var(--borderColor-done-emphasis); /** Strong border for prominent upsell elements */
|
|
1596
1602
|
--borderColor-upsell-muted: var(--borderColor-done-muted); /** Subtle border for upsell and promotional content */
|
|
1597
1603
|
--button-danger-bgColor-active: var(--bgColor-danger-emphasis);
|
|
@@ -1716,31 +1722,35 @@
|
|
|
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);
|
|
1727
1733
|
--avatar-borderColor: var(--borderColor-translucent);
|
|
1728
1734
|
--border-closed-emphasis: var(--border-danger-emphasis);
|
|
1729
1735
|
--border-closed-muted: var(--border-danger-muted);
|
|
1736
|
+
--border-draft-muted: 0.0625rem solid #3d444d66;
|
|
1730
1737
|
--border-muted: 0.0625rem solid #3d444db3;
|
|
1731
1738
|
--border-neutral-emphasis: 0.0625rem solid #656c76;
|
|
1732
1739
|
--border-open-emphasis: var(--border-success-emphasis);
|
|
1733
1740
|
--border-open-muted: var(--border-success-muted);
|
|
1741
|
+
--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
1742
|
--border-upsell-emphasis: 0.0625rem solid #8957e5;
|
|
1735
1743
|
--border-upsell-muted: 0.0625rem solid #ab7df866;
|
|
1736
1744
|
--borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
|
|
1737
1745
|
--borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
|
|
1738
1746
|
--button-danger-bgColor-disabled: var(--control-bgColor-disabled);
|
|
1739
1747
|
--button-danger-borderColor-rest: var(--control-borderColor-rest);
|
|
1748
|
+
--button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
|
|
1740
1749
|
--button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
|
|
1741
1750
|
--button-default-bgColor-disabled: var(--control-bgColor-disabled);
|
|
1742
1751
|
--button-default-borderColor-disabled: var(--control-borderColor-disabled);
|
|
1743
1752
|
--button-default-borderColor-rest: var(--control-borderColor-rest);
|
|
1753
|
+
--button-default-fgColor-disabled: var(--control-fgColor-disabled);
|
|
1744
1754
|
--button-default-fgColor-rest: var(--control-fgColor-rest);
|
|
1745
1755
|
--button-invisible-fgColor-active: var(--control-fgColor-rest);
|
|
1746
1756
|
--button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
|
|
@@ -1750,6 +1760,7 @@
|
|
|
1750
1760
|
--button-outline-bgColor-disabled: var(--control-bgColor-disabled);
|
|
1751
1761
|
--button-primary-borderColor-rest: var(--borderColor-translucent);
|
|
1752
1762
|
--button-primary-fgColor-rest: var(--fgColor-white);
|
|
1763
|
+
--button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
|
|
1753
1764
|
--button-primary-iconColor-rest: var(--fgColor-white);
|
|
1754
1765
|
--buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
|
|
1755
1766
|
--buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
|
|
@@ -1778,6 +1789,7 @@
|
|
|
1778
1789
|
--focus-outline: 2px solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
|
|
1779
1790
|
--overlay-borderColor: var(--borderColor-muted);
|
|
1780
1791
|
--tooltip-fgColor: var(--fgColor-onEmphasis);
|
|
1792
|
+
--border-draft-emphasis: 0.0625rem solid #656c76;
|
|
1781
1793
|
--border-neutral-muted: 0.0625rem solid #3d444db3;
|
|
1782
1794
|
--button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
|
|
1783
1795
|
--button-default-borderColor-active: var(--button-default-borderColor-rest);
|
|
@@ -1787,10 +1799,10 @@
|
|
|
1787
1799
|
--buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
|
|
1788
1800
|
--buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
|
|
1789
1801
|
--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:
|
|
1802
|
+
--shadow-floating-large: 0 0 0 1px #3d444d, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
|
|
1803
|
+
--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 */
|
|
1804
|
+
--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 */
|
|
1805
|
+
--shadow-floating-xlarge: 0 0 0 1px #3d444d, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
|
|
1794
1806
|
--underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
|
|
1795
1807
|
--button-danger-borderColor-active: var(--button-danger-borderColor-hover);
|
|
1796
1808
|
--button-outline-borderColor-hover: var(--button-default-borderColor-hover);
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
--control-danger-bgColor-active: #c51120;
|
|
19
19
|
--fgColor-onEmphasis: #ffffff; /** Text color for use on emphasis backgrounds */
|
|
20
20
|
--reactionButton-selected-bgColor-hover: #3a8cfd5c;
|
|
21
|
-
--avatar-shadow:
|
|
21
|
+
--avatar-shadow: 0 0 0 2px #0d1117;
|
|
22
22
|
--avatarStack-fade-bgColor-default: #3d444d;
|
|
23
23
|
--avatarStack-fade-bgColor-muted: #2a313c;
|
|
24
24
|
--bgColor-accent-emphasis: #1b4b91; /** Strong accent background for active states and focused states */
|
|
@@ -59,13 +59,13 @@
|
|
|
59
59
|
--borderColor-sponsors-muted: #fc8dc7; /** Subtle border for GitHub Sponsors content */
|
|
60
60
|
--borderColor-success-emphasis: #6bc46d; /** Strong success border for prominent positive elements */
|
|
61
61
|
--borderColor-success-muted: #6bc46d; /** Subtle success border for positive feedback elements */
|
|
62
|
-
--borderColor-translucent: #9198a1; /** Semi-transparent border for overlays and layered elements */
|
|
62
|
+
--borderColor-translucent: #9198a1; /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
|
|
63
63
|
--borderColor-transparent: #00000000; /** Fully transparent border */
|
|
64
64
|
--button-danger-bgColor-hover: #922323;
|
|
65
65
|
--button-danger-borderColor-hover: #ffb8b0;
|
|
66
66
|
--button-danger-fgColor-rest: #ffb8b0;
|
|
67
|
-
--button-danger-shadow-selected:
|
|
68
|
-
--button-default-shadow-resting:
|
|
67
|
+
--button-danger-shadow-selected: 0 0 0 0 #00000000;
|
|
68
|
+
--button-default-shadow-resting: 0 0 0 0 #00000000;
|
|
69
69
|
--button-inactive-bgColor: #262c36;
|
|
70
70
|
--button-inactive-fgColor: #9198a1;
|
|
71
71
|
--button-invisible-bgColor-disabled: #00000000;
|
|
@@ -76,11 +76,11 @@
|
|
|
76
76
|
--button-outline-bgColor-rest: #f0f6fc;
|
|
77
77
|
--button-outline-fgColor-hover: #539bf5;
|
|
78
78
|
--button-outline-fgColor-rest: #4184e4;
|
|
79
|
-
--button-outline-shadow-selected:
|
|
79
|
+
--button-outline-shadow-selected: 0 0 0 0 #00000000;
|
|
80
80
|
--button-primary-bgColor-active: #347d39;
|
|
81
81
|
--button-primary-bgColor-hover: #2b6a30;
|
|
82
82
|
--button-primary-borderColor-rest: #6bc46d;
|
|
83
|
-
--button-primary-shadow-selected:
|
|
83
|
+
--button-primary-shadow-selected: 0 0 0 0 #00000000;
|
|
84
84
|
--button-star-iconColor: #daaa3f;
|
|
85
85
|
--buttonCounter-danger-bgColor-rest: #5d0f1233;
|
|
86
86
|
--buttonCounter-default-bgColor-rest: #2f3742;
|
|
@@ -678,6 +678,7 @@
|
|
|
678
678
|
--border-sponsors-muted: 0.0625rem solid #fc8dc7;
|
|
679
679
|
--border-success-emphasis: 0.0625rem solid #6bc46d;
|
|
680
680
|
--border-success-muted: 0.0625rem solid #6bc46d;
|
|
681
|
+
--border-translucent: 0.0625rem solid #9198a1; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
|
|
681
682
|
--border-transparent: 0.0625rem solid #00000000;
|
|
682
683
|
--borderColor-closed-emphasis: var(--borderColor-danger-emphasis); /** Strong border for closed state badges */
|
|
683
684
|
--borderColor-closed-muted: var(--borderColor-danger-muted); /** Subtle border for closed state indicators */
|
|
@@ -827,11 +828,11 @@
|
|
|
827
828
|
--progressBar-bgColor-success: var(--bgColor-success-emphasis);
|
|
828
829
|
--selectMenu-borderColor: var(--borderColor-default);
|
|
829
830
|
--selection-bgColor: #1b4b91b3; /** Background color for text selection highlights */
|
|
830
|
-
--shadow-floating-legacy:
|
|
831
|
-
--shadow-inset: inset
|
|
832
|
-
--shadow-resting-medium:
|
|
833
|
-
--shadow-resting-small:
|
|
834
|
-
--shadow-resting-xsmall:
|
|
831
|
+
--shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
|
|
832
|
+
--shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
|
|
833
|
+
--shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
|
|
834
|
+
--shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
|
|
835
|
+
--shadow-resting-xsmall: 0 1px 1px 0 #010409cc; /** Extra small resting shadow for minimal elevation */
|
|
835
836
|
--topicTag-borderColor: var(--borderColor-accent-emphasis);
|
|
836
837
|
--treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
|
|
837
838
|
--underlineNav-iconColor-rest: var(--fgColor-muted);
|
|
@@ -848,9 +849,11 @@
|
|
|
848
849
|
--borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
|
|
849
850
|
--button-danger-bgColor-disabled: var(--control-bgColor-disabled);
|
|
850
851
|
--button-danger-borderColor-rest: var(--control-borderColor-rest);
|
|
852
|
+
--button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
|
|
851
853
|
--button-default-bgColor-disabled: var(--control-bgColor-disabled);
|
|
852
854
|
--button-default-borderColor-disabled: var(--control-borderColor-disabled);
|
|
853
855
|
--button-default-borderColor-rest: var(--control-borderColor-rest);
|
|
856
|
+
--button-default-fgColor-disabled: var(--control-fgColor-disabled);
|
|
854
857
|
--button-default-fgColor-rest: var(--control-fgColor-rest);
|
|
855
858
|
--button-invisible-borderColor-hover: var(--control-transparent-borderColor-hover);
|
|
856
859
|
--button-invisible-fgColor-active: var(--control-fgColor-rest);
|
|
@@ -859,6 +862,7 @@
|
|
|
859
862
|
--button-invisible-fgColor-rest: var(--control-fgColor-rest);
|
|
860
863
|
--button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
|
|
861
864
|
--button-outline-bgColor-disabled: var(--control-bgColor-disabled);
|
|
865
|
+
--button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
|
|
862
866
|
--buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
|
|
863
867
|
--buttonKeybindingHint-danger-fgColor-rest: var(--buttonKeybindingHint-default-fgColor-rest);
|
|
864
868
|
--buttonKeybindingHint-default-borderColor-disabled: var(--control-borderColor-disabled);
|
|
@@ -878,10 +882,10 @@
|
|
|
878
882
|
--focus-outline: 2px solid #6cb6ff; /** Focus ring outline for keyboard navigation and accessibility. */
|
|
879
883
|
--progressBar-track-bgColor: var(--bgColor-inverse);
|
|
880
884
|
--reactionButton-selected-fgColor-rest: var(--fgColor-link);
|
|
881
|
-
--shadow-floating-large:
|
|
882
|
-
--shadow-floating-medium:
|
|
883
|
-
--shadow-floating-small:
|
|
884
|
-
--shadow-floating-xlarge:
|
|
885
|
+
--shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
|
|
886
|
+
--shadow-floating-medium: 0 0 0 1px #b7bdc8, 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 */
|
|
887
|
+
--shadow-floating-small: 0 0 0 1px #b7bdc8, 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Small floating shadow for dropdowns, tooltips, and small overlays */
|
|
888
|
+
--shadow-floating-xlarge: 0 0 0 1px #b7bdc8, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
|
|
885
889
|
--tooltip-bgColor: var(--bgColor-inverse);
|
|
886
890
|
--tooltip-fgColor: var(--fgColor-onInverse);
|
|
887
891
|
--border-neutral-emphasis: 0.0625rem solid #b7bdc8;
|
|
@@ -896,6 +900,8 @@
|
|
|
896
900
|
--controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
|
|
897
901
|
--progressBar-track-borderColor: var(--progressBar-track-bgColor);
|
|
898
902
|
--underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
|
|
903
|
+
--border-draft-emphasis: 0.0625rem solid #b7bdc8;
|
|
904
|
+
--border-draft-muted: 0.0625rem solid #b7bdc8;
|
|
899
905
|
--button-outline-borderColor-hover: var(--button-default-borderColor-hover);
|
|
900
906
|
--button-outline-borderColor-active: var(--button-outline-borderColor-hover);
|
|
901
907
|
}
|
|
@@ -915,7 +921,7 @@
|
|
|
915
921
|
--control-danger-bgColor-active: #c51120;
|
|
916
922
|
--fgColor-onEmphasis: #ffffff; /** Text color for use on emphasis backgrounds */
|
|
917
923
|
--reactionButton-selected-bgColor-hover: #3a8cfd5c;
|
|
918
|
-
--avatar-shadow:
|
|
924
|
+
--avatar-shadow: 0 0 0 2px #0d1117;
|
|
919
925
|
--avatarStack-fade-bgColor-default: #3d444d;
|
|
920
926
|
--avatarStack-fade-bgColor-muted: #2a313c;
|
|
921
927
|
--bgColor-accent-emphasis: #1b4b91; /** Strong accent background for active states and focused states */
|
|
@@ -956,13 +962,13 @@
|
|
|
956
962
|
--borderColor-sponsors-muted: #fc8dc7; /** Subtle border for GitHub Sponsors content */
|
|
957
963
|
--borderColor-success-emphasis: #6bc46d; /** Strong success border for prominent positive elements */
|
|
958
964
|
--borderColor-success-muted: #6bc46d; /** Subtle success border for positive feedback elements */
|
|
959
|
-
--borderColor-translucent: #9198a1; /** Semi-transparent border for overlays and layered elements */
|
|
965
|
+
--borderColor-translucent: #9198a1; /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
|
|
960
966
|
--borderColor-transparent: #00000000; /** Fully transparent border */
|
|
961
967
|
--button-danger-bgColor-hover: #922323;
|
|
962
968
|
--button-danger-borderColor-hover: #ffb8b0;
|
|
963
969
|
--button-danger-fgColor-rest: #ffb8b0;
|
|
964
|
-
--button-danger-shadow-selected:
|
|
965
|
-
--button-default-shadow-resting:
|
|
970
|
+
--button-danger-shadow-selected: 0 0 0 0 #00000000;
|
|
971
|
+
--button-default-shadow-resting: 0 0 0 0 #00000000;
|
|
966
972
|
--button-inactive-bgColor: #262c36;
|
|
967
973
|
--button-inactive-fgColor: #9198a1;
|
|
968
974
|
--button-invisible-bgColor-disabled: #00000000;
|
|
@@ -973,11 +979,11 @@
|
|
|
973
979
|
--button-outline-bgColor-rest: #f0f6fc;
|
|
974
980
|
--button-outline-fgColor-hover: #539bf5;
|
|
975
981
|
--button-outline-fgColor-rest: #4184e4;
|
|
976
|
-
--button-outline-shadow-selected:
|
|
982
|
+
--button-outline-shadow-selected: 0 0 0 0 #00000000;
|
|
977
983
|
--button-primary-bgColor-active: #347d39;
|
|
978
984
|
--button-primary-bgColor-hover: #2b6a30;
|
|
979
985
|
--button-primary-borderColor-rest: #6bc46d;
|
|
980
|
-
--button-primary-shadow-selected:
|
|
986
|
+
--button-primary-shadow-selected: 0 0 0 0 #00000000;
|
|
981
987
|
--button-star-iconColor: #daaa3f;
|
|
982
988
|
--buttonCounter-danger-bgColor-rest: #5d0f1233;
|
|
983
989
|
--buttonCounter-default-bgColor-rest: #2f3742;
|
|
@@ -1575,6 +1581,7 @@
|
|
|
1575
1581
|
--border-sponsors-muted: 0.0625rem solid #fc8dc7;
|
|
1576
1582
|
--border-success-emphasis: 0.0625rem solid #6bc46d;
|
|
1577
1583
|
--border-success-muted: 0.0625rem solid #6bc46d;
|
|
1584
|
+
--border-translucent: 0.0625rem solid #9198a1; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
|
|
1578
1585
|
--border-transparent: 0.0625rem solid #00000000;
|
|
1579
1586
|
--borderColor-closed-emphasis: var(--borderColor-danger-emphasis); /** Strong border for closed state badges */
|
|
1580
1587
|
--borderColor-closed-muted: var(--borderColor-danger-muted); /** Subtle border for closed state indicators */
|
|
@@ -1724,11 +1731,11 @@
|
|
|
1724
1731
|
--progressBar-bgColor-success: var(--bgColor-success-emphasis);
|
|
1725
1732
|
--selectMenu-borderColor: var(--borderColor-default);
|
|
1726
1733
|
--selection-bgColor: #1b4b91b3; /** Background color for text selection highlights */
|
|
1727
|
-
--shadow-floating-legacy:
|
|
1728
|
-
--shadow-inset: inset
|
|
1729
|
-
--shadow-resting-medium:
|
|
1730
|
-
--shadow-resting-small:
|
|
1731
|
-
--shadow-resting-xsmall:
|
|
1734
|
+
--shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
|
|
1735
|
+
--shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
|
|
1736
|
+
--shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
|
|
1737
|
+
--shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
|
|
1738
|
+
--shadow-resting-xsmall: 0 1px 1px 0 #010409cc; /** Extra small resting shadow for minimal elevation */
|
|
1732
1739
|
--topicTag-borderColor: var(--borderColor-accent-emphasis);
|
|
1733
1740
|
--treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
|
|
1734
1741
|
--underlineNav-iconColor-rest: var(--fgColor-muted);
|
|
@@ -1745,9 +1752,11 @@
|
|
|
1745
1752
|
--borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
|
|
1746
1753
|
--button-danger-bgColor-disabled: var(--control-bgColor-disabled);
|
|
1747
1754
|
--button-danger-borderColor-rest: var(--control-borderColor-rest);
|
|
1755
|
+
--button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
|
|
1748
1756
|
--button-default-bgColor-disabled: var(--control-bgColor-disabled);
|
|
1749
1757
|
--button-default-borderColor-disabled: var(--control-borderColor-disabled);
|
|
1750
1758
|
--button-default-borderColor-rest: var(--control-borderColor-rest);
|
|
1759
|
+
--button-default-fgColor-disabled: var(--control-fgColor-disabled);
|
|
1751
1760
|
--button-default-fgColor-rest: var(--control-fgColor-rest);
|
|
1752
1761
|
--button-invisible-borderColor-hover: var(--control-transparent-borderColor-hover);
|
|
1753
1762
|
--button-invisible-fgColor-active: var(--control-fgColor-rest);
|
|
@@ -1756,6 +1765,7 @@
|
|
|
1756
1765
|
--button-invisible-fgColor-rest: var(--control-fgColor-rest);
|
|
1757
1766
|
--button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
|
|
1758
1767
|
--button-outline-bgColor-disabled: var(--control-bgColor-disabled);
|
|
1768
|
+
--button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
|
|
1759
1769
|
--buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
|
|
1760
1770
|
--buttonKeybindingHint-danger-fgColor-rest: var(--buttonKeybindingHint-default-fgColor-rest);
|
|
1761
1771
|
--buttonKeybindingHint-default-borderColor-disabled: var(--control-borderColor-disabled);
|
|
@@ -1775,10 +1785,10 @@
|
|
|
1775
1785
|
--focus-outline: 2px solid #6cb6ff; /** Focus ring outline for keyboard navigation and accessibility. */
|
|
1776
1786
|
--progressBar-track-bgColor: var(--bgColor-inverse);
|
|
1777
1787
|
--reactionButton-selected-fgColor-rest: var(--fgColor-link);
|
|
1778
|
-
--shadow-floating-large:
|
|
1779
|
-
--shadow-floating-medium:
|
|
1780
|
-
--shadow-floating-small:
|
|
1781
|
-
--shadow-floating-xlarge:
|
|
1788
|
+
--shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
|
|
1789
|
+
--shadow-floating-medium: 0 0 0 1px #b7bdc8, 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 */
|
|
1790
|
+
--shadow-floating-small: 0 0 0 1px #b7bdc8, 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Small floating shadow for dropdowns, tooltips, and small overlays */
|
|
1791
|
+
--shadow-floating-xlarge: 0 0 0 1px #b7bdc8, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
|
|
1782
1792
|
--tooltip-bgColor: var(--bgColor-inverse);
|
|
1783
1793
|
--tooltip-fgColor: var(--fgColor-onInverse);
|
|
1784
1794
|
--border-neutral-emphasis: 0.0625rem solid #b7bdc8;
|
|
@@ -1793,6 +1803,8 @@
|
|
|
1793
1803
|
--controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
|
|
1794
1804
|
--progressBar-track-borderColor: var(--progressBar-track-bgColor);
|
|
1795
1805
|
--underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
|
|
1806
|
+
--border-draft-emphasis: 0.0625rem solid #b7bdc8;
|
|
1807
|
+
--border-draft-muted: 0.0625rem solid #b7bdc8;
|
|
1796
1808
|
--button-outline-borderColor-hover: var(--button-default-borderColor-hover);
|
|
1797
1809
|
--button-outline-borderColor-active: var(--button-outline-borderColor-hover);
|
|
1798
1810
|
}
|