Skip to content

Deprecate shadow-floating-legacy and reduce floating-small border alpha#1345

Merged
lukasoppermann merged 3 commits intomainfrom
deprecate-shadow-floating-legacy
Apr 10, 2026
Merged

Deprecate shadow-floating-legacy and reduce floating-small border alpha#1345
lukasoppermann merged 3 commits intomainfrom
deprecate-shadow-floating-legacy

Conversation

@lukasoppermann
Copy link
Copy Markdown
Collaborator

  • Add $deprecated pointing to shadow.floating.small on shadow.floating.legacy
  • Reduce overlay.borderColor alpha from 0.5 to 0.25 on shadow.floating.small (light mode)

Related to https://github.com/github/core-ux/issues/2052

Summary

  • Shadow Opacity Adjustment:

    • Reduced the alpha value from 0.5 to 0.25 for a shadow, making the shadow more subtle.
  • Token Deprecation:

    • Marked the legacy shadow token as deprecated, referencing the {shadow.floating.small} token as its replacement.

- Add $deprecated pointing to shadow.floating.small on shadow.floating.legacy
- Reduce overlay.borderColor alpha from 0.5 to 0.25 on shadow.floating.small (light mode)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@lukasoppermann lukasoppermann requested a review from a team as a code owner April 8, 2026 11:54
@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Apr 8, 2026

🦋 Changeset detected

Latest commit: 63e158f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/primitives Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 8, 2026

Design Token Diff (CSS)

/css/functional/themes/dark-colorblind-high-contrast.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-colorblind-high-contrast.css	2026-04-10 07:02:37.104020246 +0000
@@ -798,7 +798,6 @@
 --reactionButton-selected-fgColor-rest: var(--fgColor-link);
 --selectMenu-borderColor: var(--borderColor-default);
 --selection-bgColor: #194fb1b3; /** Background color for text selection highlights */
-  --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
 --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
 --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
 --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
@@ -1701,7 +1700,6 @@
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);
   --selection-bgColor: #194fb1b3; /** Background color for text selection highlights */
-    --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
   --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
   --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
   --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */

/css/functional/themes/dark-colorblind.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-colorblind.css	2026-04-10 07:02:37.104020246 +0000
@@ -820,7 +820,6 @@
 --reactionButton-selected-fgColor-rest: var(--fgColor-link);
 --selectMenu-borderColor: var(--borderColor-default);
 --selection-bgColor: #1f6febb3; /** Background color for text selection highlights */
-  --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
 --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
 --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
 --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
@@ -1723,7 +1722,6 @@
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);
   --selection-bgColor: #1f6febb3; /** Background color for text selection highlights */
-    --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
   --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
   --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
   --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */

/css/functional/themes/dark-dimmed-high-contrast.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-dimmed-high-contrast.css	2026-04-10 07:02:37.105020234 +0000
@@ -828,7 +828,6 @@
 --progressBar-bgColor-success: var(--bgColor-success-emphasis);
 --selectMenu-borderColor: var(--borderColor-default);
 --selection-bgColor: #1b4b91b3; /** Background color for text selection highlights */
-  --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
 --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
 --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
 --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
@@ -1731,7 +1730,6 @@
   --progressBar-bgColor-success: var(--bgColor-success-emphasis);
   --selectMenu-borderColor: var(--borderColor-default);
   --selection-bgColor: #1b4b91b3; /** Background color for text selection highlights */
-    --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
   --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
   --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
   --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */

/css/functional/themes/dark-dimmed.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-dimmed.css	2026-04-10 07:02:37.105020234 +0000
@@ -846,7 +846,6 @@
 --selectMenu-borderColor: var(--borderColor-default);
 --selection-bgColor: #316dcab3; /** Background color for text selection highlights */
 --shadow-floating-large: 0 0 0 1px #3d444d, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
-  --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
 --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 */
 --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 */
 --shadow-floating-xlarge: 0 0 0 1px #3d444d, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
@@ -1749,7 +1748,6 @@
   --selectMenu-borderColor: var(--borderColor-default);
   --selection-bgColor: #316dcab3; /** Background color for text selection highlights */
   --shadow-floating-large: 0 0 0 1px #3d444d, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
-    --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
   --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 */
   --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 */
   --shadow-floating-xlarge: 0 0 0 1px #3d444d, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */

/css/functional/themes/dark-high-contrast.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-high-contrast.css	2026-04-10 07:02:37.106020223 +0000
@@ -798,7 +798,6 @@
 --reactionButton-selected-fgColor-rest: var(--fgColor-link);
 --selectMenu-borderColor: var(--borderColor-default);
 --selection-bgColor: #194fb1b3; /** Background color for text selection highlights */
-  --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
 --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
 --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
 --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
@@ -1701,7 +1700,6 @@
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);
   --selection-bgColor: #194fb1b3; /** Background color for text selection highlights */
-    --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
   --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
   --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
   --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */

/css/functional/themes/dark-tritanopia-high-contrast.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-tritanopia-high-contrast.css	2026-04-10 07:02:37.107020211 +0000
@@ -798,7 +798,6 @@
 --reactionButton-selected-fgColor-rest: var(--fgColor-link);
 --selectMenu-borderColor: var(--borderColor-default);
 --selection-bgColor: #194fb1b3; /** Background color for text selection highlights */
-  --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
 --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
 --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
 --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
@@ -1701,7 +1700,6 @@
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);
   --selection-bgColor: #194fb1b3; /** Background color for text selection highlights */
-    --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
   --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
   --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
   --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */

/css/functional/themes/dark-tritanopia.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-tritanopia.css	2026-04-10 07:02:37.107020211 +0000
@@ -822,7 +822,6 @@
 --reactionButton-selected-fgColor-rest: var(--fgColor-link);
 --selectMenu-borderColor: var(--borderColor-default);
 --selection-bgColor: #1f6febb3; /** Background color for text selection highlights */
-  --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
 --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
 --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
 --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
@@ -1725,7 +1724,6 @@
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);
   --selection-bgColor: #1f6febb3; /** Background color for text selection highlights */
-    --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
   --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
   --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
   --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */

/css/functional/themes/dark.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark.css	2026-04-10 07:02:37.108020199 +0000
@@ -820,7 +820,6 @@
 --reactionButton-selected-fgColor-rest: var(--fgColor-link);
 --selectMenu-borderColor: var(--borderColor-default);
 --selection-bgColor: #1f6febb3; /** Background color for text selection highlights */
-  --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
 --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
 --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
 --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
@@ -1723,7 +1722,6 @@
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);
   --selection-bgColor: #1f6febb3; /** Background color for text selection highlights */
-    --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
   --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
   --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
   --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */

/css/functional/themes/light-colorblind-high-contrast.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-colorblind-high-contrast.css	2026-04-10 07:02:37.108020199 +0000
@@ -624,7 +624,6 @@
 --reactionButton-selected-fgColor-hover: #023b95;
 --selectMenu-bgColor-active: #9cd7ff;
 --selectMenu-borderColor: #ffffff00;
-  --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
 --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
 --skeletonLoader-bgColor: #dae0e7;
 --treeViewItem-leadingVisual-iconColor-rest: #368cf9;
@@ -894,7 +893,7 @@
 --reactionButton-selected-fgColor-rest: var(--fgColor-link);
 --shadow-floating-large: 0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
 --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 */
-  --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 */
+  --shadow-floating-small: 0 0 0 1px #454c5440, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
 --shadow-floating-xlarge: 0 0 0 1px #454c54, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
 --tooltip-fgColor: var(--fgColor-onEmphasis);
 --underlineNav-borderColor-hover: var(--borderColor-muted);
@@ -1527,7 +1526,6 @@
   --reactionButton-selected-fgColor-hover: #023b95;
   --selectMenu-bgColor-active: #9cd7ff;
   --selectMenu-borderColor: #ffffff00;
-    --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
   --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
   --skeletonLoader-bgColor: #dae0e7;
   --treeViewItem-leadingVisual-iconColor-rest: #368cf9;
@@ -1797,7 +1795,7 @@
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --shadow-floating-large: 0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
   --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 */
-    --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 */
+    --shadow-floating-small: 0 0 0 1px #454c5440, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
   --shadow-floating-xlarge: 0 0 0 1px #454c54, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
   --tooltip-fgColor: var(--fgColor-onEmphasis);
   --underlineNav-borderColor-hover: var(--borderColor-muted);

/css/functional/themes/light-colorblind.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-colorblind.css	2026-04-10 07:02:37.109020188 +0000
@@ -637,7 +637,6 @@
 --reactionButton-selected-fgColor-hover: #0550ae;
 --selectMenu-bgColor-active: #b6e3ff;
 --selectMenu-borderColor: #ffffff00;
-  --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
 --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
 --skeletonLoader-bgColor: #818b981a;
 --topicTag-borderColor: #ffffff00;
@@ -899,7 +898,7 @@
 --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
 --shadow-floating-large: 0 0 0 1px #d1d9e000, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
 --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 */
-  --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 */
+  --shadow-floating-small: 0 0 0 1px #d1d9e040, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
 --shadow-floating-xlarge: 0 0 0 1px #d1d9e000, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
 --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
 --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
@@ -1540,7 +1539,6 @@
   --reactionButton-selected-fgColor-hover: #0550ae;
   --selectMenu-bgColor-active: #b6e3ff;
   --selectMenu-borderColor: #ffffff00;
-    --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
   --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
   --skeletonLoader-bgColor: #818b981a;
   --topicTag-borderColor: #ffffff00;
@@ -1802,7 +1800,7 @@
   --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
   --shadow-floating-large: 0 0 0 1px #d1d9e000, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
   --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 */
-    --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 */
+    --shadow-floating-small: 0 0 0 1px #d1d9e040, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
   --shadow-floating-xlarge: 0 0 0 1px #d1d9e000, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
   --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
   --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);

/css/functional/themes/light-high-contrast.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-high-contrast.css	2026-04-10 07:02:37.109020188 +0000
@@ -617,7 +617,6 @@
 --reactionButton-selected-fgColor-hover: #023b95;
 --selectMenu-bgColor-active: #9cd7ff;
 --selectMenu-borderColor: #ffffff00;
-  --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
 --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
 --skeletonLoader-bgColor: #dae0e7;
 --treeViewItem-leadingVisual-iconColor-rest: #368cf9;
@@ -892,7 +891,7 @@
 --reactionButton-selected-fgColor-rest: var(--fgColor-link);
 --shadow-floating-large: 0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
 --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 */
-  --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 */
+  --shadow-floating-small: 0 0 0 1px #454c5440, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
 --shadow-floating-xlarge: 0 0 0 1px #454c54, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
 --tooltip-fgColor: var(--fgColor-onEmphasis);
 --underlineNav-borderColor-hover: var(--borderColor-muted);
@@ -1520,7 +1519,6 @@
   --reactionButton-selected-fgColor-hover: #023b95;
   --selectMenu-bgColor-active: #9cd7ff;
   --selectMenu-borderColor: #ffffff00;
-    --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
   --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
   --skeletonLoader-bgColor: #dae0e7;
   --treeViewItem-leadingVisual-iconColor-rest: #368cf9;
@@ -1795,7 +1793,7 @@
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --shadow-floating-large: 0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
   --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 */
-    --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 */
+    --shadow-floating-small: 0 0 0 1px #454c5440, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
   --shadow-floating-xlarge: 0 0 0 1px #454c54, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
   --tooltip-fgColor: var(--fgColor-onEmphasis);
   --underlineNav-borderColor-hover: var(--borderColor-muted);

/css/functional/themes/light-tritanopia-high-contrast.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-tritanopia-high-contrast.css	2026-04-10 07:02:37.110020176 +0000
@@ -624,7 +624,6 @@
 --reactionButton-selected-fgColor-hover: #023b95;
 --selectMenu-bgColor-active: #9cd7ff;
 --selectMenu-borderColor: #ffffff00;
-  --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
 --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
 --skeletonLoader-bgColor: #dae0e7;
 --treeViewItem-leadingVisual-iconColor-rest: #368cf9;
@@ -894,7 +893,7 @@
 --reactionButton-selected-fgColor-rest: var(--fgColor-link);
 --shadow-floating-large: 0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
 --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 */
-  --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 */
+  --shadow-floating-small: 0 0 0 1px #454c5440, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
 --shadow-floating-xlarge: 0 0 0 1px #454c54, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
 --tooltip-fgColor: var(--fgColor-onEmphasis);
 --underlineNav-borderColor-hover: var(--borderColor-muted);
@@ -1527,7 +1526,6 @@
   --reactionButton-selected-fgColor-hover: #023b95;
   --selectMenu-bgColor-active: #9cd7ff;
   --selectMenu-borderColor: #ffffff00;
-    --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
   --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
   --skeletonLoader-bgColor: #dae0e7;
   --treeViewItem-leadingVisual-iconColor-rest: #368cf9;
@@ -1797,7 +1795,7 @@
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --shadow-floating-large: 0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
   --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 */
-    --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 */
+    --shadow-floating-small: 0 0 0 1px #454c5440, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
   --shadow-floating-xlarge: 0 0 0 1px #454c54, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
   --tooltip-fgColor: var(--fgColor-onEmphasis);
   --underlineNav-borderColor-hover: var(--borderColor-muted);

/css/functional/themes/light-tritanopia.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-tritanopia.css	2026-04-10 07:02:37.111020165 +0000
@@ -643,7 +643,6 @@
 --reactionButton-selected-fgColor-hover: #0550ae;
 --selectMenu-bgColor-active: #b6e3ff;
 --selectMenu-borderColor: #ffffff00;
-  --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
 --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
 --skeletonLoader-bgColor: #818b981a;
 --topicTag-borderColor: #ffffff00;
@@ -899,7 +898,7 @@
 --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
 --shadow-floating-large: 0 0 0 1px #d1d9e000, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
 --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 */
-  --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 */
+  --shadow-floating-small: 0 0 0 1px #d1d9e040, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
 --shadow-floating-xlarge: 0 0 0 1px #d1d9e000, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
 --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
 --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
@@ -1546,7 +1545,6 @@
   --reactionButton-selected-fgColor-hover: #0550ae;
   --selectMenu-bgColor-active: #b6e3ff;
   --selectMenu-borderColor: #ffffff00;
-    --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
   --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
   --skeletonLoader-bgColor: #818b981a;
   --topicTag-borderColor: #ffffff00;
@@ -1802,7 +1800,7 @@
   --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
   --shadow-floating-large: 0 0 0 1px #d1d9e000, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
   --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 */
-    --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 */
+    --shadow-floating-small: 0 0 0 1px #d1d9e040, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
   --shadow-floating-xlarge: 0 0 0 1px #d1d9e000, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
   --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
   --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);

/css/functional/themes/light.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light.css	2026-04-10 07:02:37.111020165 +0000
@@ -640,7 +640,6 @@
 --reactionButton-selected-fgColor-hover: #0550ae;
 --selectMenu-bgColor-active: #b6e3ff;
 --selectMenu-borderColor: #ffffff00;
-  --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
 --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
 --skeletonLoader-bgColor: #818b981a;
 --topicTag-borderColor: #ffffff00;
@@ -898,7 +897,7 @@
 --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
 --shadow-floating-large: 0 0 0 1px #d1d9e000, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
 --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 */
-  --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 */
+  --shadow-floating-small: 0 0 0 1px #d1d9e040, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
 --shadow-floating-xlarge: 0 0 0 1px #d1d9e000, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
 --border-draft-muted: 0.0625rem solid #d1d9e0b3;
 --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
@@ -1543,7 +1542,6 @@
   --reactionButton-selected-fgColor-hover: #0550ae;
   --selectMenu-bgColor-active: #b6e3ff;
   --selectMenu-borderColor: #ffffff00;
-    --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
   --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
   --skeletonLoader-bgColor: #818b981a;
   --topicTag-borderColor: #ffffff00;
@@ -1801,7 +1799,7 @@
   --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
   --shadow-floating-large: 0 0 0 1px #d1d9e000, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
   --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 */
-    --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 */
+    --shadow-floating-small: 0 0 0 1px #d1d9e040, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
   --shadow-floating-xlarge: 0 0 0 1px #d1d9e000, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
   --border-draft-muted: 0.0625rem solid #d1d9e0b3;
   --button-danger-borderColor-active: var(--button-danger-borderColor-hover);

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 8, 2026

Design Token Diff (StyleLint)

The message is too long to be displayed here. For more details, please check the job summary.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 8, 2026

Design Token Diff (Figma)

/figma/themes/light-colorblind.json

+++ /home/runner/work/primitives/primitives/dist/figma/themes/light-colorblind.json	2026-04-10 07:02:40.644979251 +0000
@@ -341,7 +341,7 @@
     "r": 0.8196078431372549,
     "g": 0.8509803921568627,
     "b": 0.8784313725490196,
-      "a": 0.5
+      "a": 0.25
   },
   "type": "COLOR",
   "scopes": ["EFFECT_COLOR"],

/figma/themes/light-high-contrast.json

+++ /home/runner/work/primitives/primitives/dist/figma/themes/light-high-contrast.json	2026-04-10 07:02:41.063974400 +0000
@@ -341,7 +341,7 @@
     "r": 0.27058823529411763,
     "g": 0.2980392156862745,
     "b": 0.32941176470588235,
-      "a": 0.5
+      "a": 0.25
   },
   "type": "COLOR",
   "scopes": ["EFFECT_COLOR"],

/figma/themes/light-tritanopia.json

+++ /home/runner/work/primitives/primitives/dist/figma/themes/light-tritanopia.json	2026-04-10 07:02:40.244983882 +0000
@@ -341,7 +341,7 @@
     "r": 0.8196078431372549,
     "g": 0.8509803921568627,
     "b": 0.8784313725490196,
-      "a": 0.5
+      "a": 0.25
   },
   "type": "COLOR",
   "scopes": ["EFFECT_COLOR"],

/figma/themes/light.json

+++ /home/runner/work/primitives/primitives/dist/figma/themes/light.json	2026-04-10 07:02:39.740989717 +0000
@@ -341,7 +341,7 @@
     "r": 0.8196078431372549,
     "g": 0.8509803921568627,
     "b": 0.8784313725490196,
-      "a": 0.5
+      "a": 0.25
   },
   "type": "COLOR",
   "scopes": ["EFFECT_COLOR"],

@github-actions github-actions bot temporarily deployed to Preview (Storybook) April 8, 2026 11:57 Inactive
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates Primer shadow tokens to (1) soften the light-mode border component of shadow.floating.small, and (2) mark shadow.floating.legacy as deprecated with shadow.floating.small as the suggested replacement.

Changes:

  • Reduced the {overlay.borderColor} alpha used in shadow.floating.small from 0.5 to 0.25 (base/light value).
  • Added $deprecated: '{shadow.floating.small}' to shadow.floating.legacy.
Show a summary per file
File Description
src/tokens/functional/shadow/shadow.json5 Adjusts light-mode floating-small border alpha and adds a deprecation pointer for the legacy floating shadow token.

Copilot's findings

Tip

Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

  • Files reviewed: 1/1 changed files
  • Comments generated: 0

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@lukasoppermann
Copy link
Copy Markdown
Collaborator Author

lukasoppermann commented Apr 10, 2026

@copilot remove the legacy shadow all together and update the changeset, as all usage has been removed with those 4 PRs:

Agent-Logs-Url: https://github.com/primer/primitives/sessions/f6959d55-7fc2-4676-a992-e460b9399d9a

Co-authored-by: lukasoppermann <813754+lukasoppermann@users.noreply.github.com>
Copy link
Copy Markdown
Contributor

Copilot AI commented Apr 10, 2026

@copilot remove the legacy shadow all together and update the changeset, as all usage has been removed with those 4 PRs:

Done in 63e158fshadow.floating.legacy was removed entirely from src/tokens/functional/shadow/shadow.json5, and the changeset was updated to reflect removal instead of deprecation. No UI screenshot is applicable since this change only updates token source definitions.

@github-actions github-actions bot temporarily deployed to Preview (Storybook) April 10, 2026 07:03 Inactive
@lukasoppermann lukasoppermann merged commit 35d9a90 into main Apr 10, 2026
31 checks passed
@lukasoppermann lukasoppermann deleted the deprecate-shadow-floating-legacy branch April 10, 2026 07:35
@primer primer bot mentioned this pull request Apr 10, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants