@primer/primitives 7.15.10 → 7.15.11-rc.06eebf07

package/dist/scss/functional/themes/light.scss

@@ -167,8 +167,8 @@ $button-danger-borderColor-rest: #d0d7de;
 $button-danger-borderColor-hover: #1f232826;
 $button-danger-borderColor-active: #1f232826;
 $button-danger-shadow-selected: inset 0px 1px 0px 0px #4c001433;
-$button-inactive-fgColor-rest: #57606a;
-$button-inactive-bgColor-rest: #eaeef2;
+$button-inactive-fgColor: #57606a;
+$button-inactive-bgColor: #eaeef2;
 $buttonCounter-default-bgColor-rest: #afb8c133;
 $buttonCounter-invisible-bgColor-rest: #afb8c133;
 $buttonCounter-primary-bgColor-rest: #002d1133;
@@ -199,10 +199,11 @@ $treeViewItem-leadingVisual-iconColor-rest: #54aeff;
 $underlineNav-borderColor-active: #fd8c73;
 $underlineNav-borderColor-hover: #afb8c133;
 $underlineNav-iconColor-rest: #636c76;
-$selection-bgColor: #0969da1a;
+$selection-bgColor: #0969da33;
 $fgColor-default: #1f2328;
 $fgColor-muted: #636c76;
 $fgColor-onEmphasis: #ffffff;
+$fgColor-white: #ffffff;
 $fgColor-disabled: #8c959f;
 $fgColor-link: #0969da;
 $fgColor-neutral: #6e7781;
@@ -415,3 +416,4 @@ $shadow-floating-small: 0px 0px 0px 1px #d0d7de80, 0px 6px 12px -3px #424a530a,
 $shadow-floating-medium: 0px 0px 0px 1px #d0d7de, 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;
 $shadow-floating-large: 0px 0px 0px 1px #d0d7de, 0px 40px 80px 0px #424a533d;
 $shadow-floating-xlarge: 0px 0px 0px 1px #d0d7de, 0px 56px 112px 0px #424a5352;
+$shadow-floating-legacy: 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "7.15.10",
+  "version": "7.15.11-rc.06eebf07",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "files": [
     "dist",

package/tokens-next-private/css/functional/themes/dark-colorblind.css

@@ -171,8 +171,8 @@
   --button-danger-borderColor-hover: #f0f6fc1a;
   --button-danger-borderColor-active: #f0f6fc1a;
   --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-inactive-fgColor-rest: #8b949e;
-  --button-inactive-bgColor-rest: #21262d;
+  --button-inactive-fgColor: #8b949e;
+  --button-inactive-bgColor: #21262d;
   --buttonCounter-default-bgColor-rest: #30363d;
   --buttonCounter-invisible-bgColor-rest: #30363d;
   --buttonCounter-primary-bgColor-rest: #04260f33;
@@ -202,10 +202,11 @@
   --underlineNav-borderColor-active: #f78166;
   --underlineNav-borderColor-hover: #6e768166;
   --underlineNav-iconColor-rest: #848d97;
-  --selection-bgColor: #4493f833;
+  --selection-bgColor: #1f6febb3;
   --fgColor-default: #e6edf3;
   --fgColor-muted: #848d97;
   --fgColor-onEmphasis: #ffffff;
+  --fgColor-white: #ffffff;
   --fgColor-disabled: #6e7681;
   --fgColor-link: #4493f8;
   --fgColor-neutral: #6e7681;
@@ -418,6 +419,7 @@
   --shadow-floating-medium: 0px 0px 0px 1px #30363d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
   --shadow-floating-large: 0px 0px 0px 1px #30363d, 0px 24px 48px 0px #010409;
   --shadow-floating-xlarge: 0px 0px 0px 1px #30363d, 0px 32px 64px 0px #010409;
+  --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
   --outline-focus: #1f6feb solid 2px;
 }
 @media (prefers-color-scheme: dark) {
@@ -592,8 +594,8 @@
     --button-danger-borderColor-hover: #f0f6fc1a;
     --button-danger-borderColor-active: #f0f6fc1a;
     --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-inactive-fgColor-rest: #8b949e;
-    --button-inactive-bgColor-rest: #21262d;
+    --button-inactive-fgColor: #8b949e;
+    --button-inactive-bgColor: #21262d;
     --buttonCounter-default-bgColor-rest: #30363d;
     --buttonCounter-invisible-bgColor-rest: #30363d;
     --buttonCounter-primary-bgColor-rest: #04260f33;
@@ -623,10 +625,11 @@
     --underlineNav-borderColor-active: #f78166;
     --underlineNav-borderColor-hover: #6e768166;
     --underlineNav-iconColor-rest: #848d97;
-    --selection-bgColor: #4493f833;
+    --selection-bgColor: #1f6febb3;
     --fgColor-default: #e6edf3;
     --fgColor-muted: #848d97;
     --fgColor-onEmphasis: #ffffff;
+    --fgColor-white: #ffffff;
     --fgColor-disabled: #6e7681;
     --fgColor-link: #4493f8;
     --fgColor-neutral: #6e7681;
@@ -839,6 +842,7 @@
     --shadow-floating-medium: 0px 0px 0px 1px #30363d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
     --shadow-floating-large: 0px 0px 0px 1px #30363d, 0px 24px 48px 0px #010409;
     --shadow-floating-xlarge: 0px 0px 0px 1px #30363d, 0px 32px 64px 0px #010409;
+    --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
     --outline-focus: #1f6feb solid 2px;
   }
 }

package/tokens-next-private/css/functional/themes/dark-dimmed.css

@@ -121,9 +121,9 @@
   --button-default-borderColor-active: #444c56;
   --button-default-borderColor-disabled: #373e47b3;
   --button-default-shadow-resting: 0px 0px 0px 0px #000000;
-  --button-primary-fgColor-rest: #cdd9e5;
+  --button-primary-fgColor-rest: #ffffff;
   --button-primary-fgColor-disabled: #cdd9e5cc;
-  --button-primary-iconColor-rest: #cdd9e5;
+  --button-primary-iconColor-rest: #ffffff;
   --button-primary-bgColor-rest: #347d39;
   --button-primary-bgColor-hover: #3b8640;
   --button-primary-bgColor-active: #428f46;
@@ -171,8 +171,8 @@
   --button-danger-borderColor-hover: #cdd9e51a;
   --button-danger-borderColor-active: #cdd9e51a;
   --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-inactive-fgColor-rest: #768390;
-  --button-inactive-bgColor-rest: #373e47;
+  --button-inactive-fgColor: #768390;
+  --button-inactive-bgColor: #373e47;
   --buttonCounter-default-bgColor-rest: #444c56;
   --buttonCounter-invisible-bgColor-rest: #444c56;
   --buttonCounter-primary-bgColor-rest: #11341733;
@@ -202,10 +202,11 @@
   --underlineNav-borderColor-active: #ec775c;
   --underlineNav-borderColor-hover: #636e7b66;
   --underlineNav-iconColor-rest: #717e8b;
-  --selection-bgColor: #478be633;
+  --selection-bgColor: #316dcab3;
   --fgColor-default: #c5d1de;
   --fgColor-muted: #717e8b;
   --fgColor-onEmphasis: #cdd9e5;
+  --fgColor-white: #ffffff;
   --fgColor-disabled: #636e7b;
   --fgColor-link: #478be6;
   --fgColor-neutral: #636e7b;
@@ -418,6 +419,7 @@
   --shadow-floating-medium: 0px 0px 0px 1px #444c56, 0px 8px 16px -4px #1c212866, 0px 4px 32px -4px #1c212866, 0px 24px 48px -12px #1c212866, 0px 48px 96px -24px #1c212866;
   --shadow-floating-large: 0px 0px 0px 1px #444c56, 0px 24px 48px 0px #1c2128;
   --shadow-floating-xlarge: 0px 0px 0px 1px #444c56, 0px 32px 64px 0px #1c2128;
+  --shadow-floating-legacy: 0px 6px 12px -3px #1c212866, 0px 6px 18px 0px #1c212866;
   --outline-focus: #316dca solid 2px;
 }
 @media (prefers-color-scheme: dark) {
@@ -542,9 +544,9 @@
     --button-default-borderColor-active: #444c56;
     --button-default-borderColor-disabled: #373e47b3;
     --button-default-shadow-resting: 0px 0px 0px 0px #000000;
-    --button-primary-fgColor-rest: #cdd9e5;
+    --button-primary-fgColor-rest: #ffffff;
     --button-primary-fgColor-disabled: #cdd9e5cc;
-    --button-primary-iconColor-rest: #cdd9e5;
+    --button-primary-iconColor-rest: #ffffff;
     --button-primary-bgColor-rest: #347d39;
     --button-primary-bgColor-hover: #3b8640;
     --button-primary-bgColor-active: #428f46;
@@ -592,8 +594,8 @@
     --button-danger-borderColor-hover: #cdd9e51a;
     --button-danger-borderColor-active: #cdd9e51a;
     --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-inactive-fgColor-rest: #768390;
-    --button-inactive-bgColor-rest: #373e47;
+    --button-inactive-fgColor: #768390;
+    --button-inactive-bgColor: #373e47;
     --buttonCounter-default-bgColor-rest: #444c56;
     --buttonCounter-invisible-bgColor-rest: #444c56;
     --buttonCounter-primary-bgColor-rest: #11341733;
@@ -623,10 +625,11 @@
     --underlineNav-borderColor-active: #ec775c;
     --underlineNav-borderColor-hover: #636e7b66;
     --underlineNav-iconColor-rest: #717e8b;
-    --selection-bgColor: #478be633;
+    --selection-bgColor: #316dcab3;
     --fgColor-default: #c5d1de;
     --fgColor-muted: #717e8b;
     --fgColor-onEmphasis: #cdd9e5;
+    --fgColor-white: #ffffff;
     --fgColor-disabled: #636e7b;
     --fgColor-link: #478be6;
     --fgColor-neutral: #636e7b;
@@ -839,6 +842,7 @@
     --shadow-floating-medium: 0px 0px 0px 1px #444c56, 0px 8px 16px -4px #1c212866, 0px 4px 32px -4px #1c212866, 0px 24px 48px -12px #1c212866, 0px 48px 96px -24px #1c212866;
     --shadow-floating-large: 0px 0px 0px 1px #444c56, 0px 24px 48px 0px #1c2128;
     --shadow-floating-xlarge: 0px 0px 0px 1px #444c56, 0px 32px 64px 0px #1c2128;
+    --shadow-floating-legacy: 0px 6px 12px -3px #1c212866, 0px 6px 18px 0px #1c212866;
     --outline-focus: #316dca solid 2px;
   }
 }

package/tokens-next-private/css/functional/themes/dark-high-contrast.css

@@ -171,8 +171,8 @@
   --button-danger-borderColor-hover: #ffffff1a;
   --button-danger-borderColor-active: #ffffff1a;
   --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-inactive-fgColor-rest: #bdc4cc;
-  --button-inactive-bgColor-rest: #3d424d;
+  --button-inactive-fgColor: #bdc4cc;
+  --button-inactive-bgColor: #3d424d;
   --buttonCounter-default-bgColor-rest: #525964;
   --buttonCounter-invisible-bgColor-rest: #525964;
   --buttonCounter-primary-bgColor-rest: #01040926;
@@ -202,10 +202,11 @@
   --underlineNav-borderColor-active: #ff967d;
   --underlineNav-borderColor-hover: #bdc4cc;
   --underlineNav-iconColor-rest: #f0f3f6;
-  --selection-bgColor: #60aeff33;
+  --selection-bgColor: #409effb3;
   --fgColor-default: #fbfcfd;
   --fgColor-muted: #f0f3f6;
   --fgColor-onEmphasis: #0a0c10;
+  --fgColor-white: #ffffff;
   --fgColor-disabled: #9ea7b3;
   --fgColor-link: #60aeff;
   --fgColor-neutral: #9ea7b3;
@@ -418,6 +419,7 @@
   --shadow-floating-medium: 0px 0px 0px 1px #7a828e, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
   --shadow-floating-large: 0px 0px 0px 1px #7a828e, 0px 24px 48px 0px #010409;
   --shadow-floating-xlarge: 0px 0px 0px 1px #7a828e, 0px 32px 64px 0px #010409;
+  --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
   --outline-focus: #409eff solid 2px;
 }
 @media (prefers-color-scheme: dark) {
@@ -592,8 +594,8 @@
     --button-danger-borderColor-hover: #ffffff1a;
     --button-danger-borderColor-active: #ffffff1a;
     --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-inactive-fgColor-rest: #bdc4cc;
-    --button-inactive-bgColor-rest: #3d424d;
+    --button-inactive-fgColor: #bdc4cc;
+    --button-inactive-bgColor: #3d424d;
     --buttonCounter-default-bgColor-rest: #525964;
     --buttonCounter-invisible-bgColor-rest: #525964;
     --buttonCounter-primary-bgColor-rest: #01040926;
@@ -623,10 +625,11 @@
     --underlineNav-borderColor-active: #ff967d;
     --underlineNav-borderColor-hover: #bdc4cc;
     --underlineNav-iconColor-rest: #f0f3f6;
-    --selection-bgColor: #60aeff33;
+    --selection-bgColor: #409effb3;
     --fgColor-default: #fbfcfd;
     --fgColor-muted: #f0f3f6;
     --fgColor-onEmphasis: #0a0c10;
+    --fgColor-white: #ffffff;
     --fgColor-disabled: #9ea7b3;
     --fgColor-link: #60aeff;
     --fgColor-neutral: #9ea7b3;
@@ -839,6 +842,7 @@
     --shadow-floating-medium: 0px 0px 0px 1px #7a828e, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
     --shadow-floating-large: 0px 0px 0px 1px #7a828e, 0px 24px 48px 0px #010409;
     --shadow-floating-xlarge: 0px 0px 0px 1px #7a828e, 0px 32px 64px 0px #010409;
+    --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
     --outline-focus: #409eff solid 2px;
   }
 }

package/tokens-next-private/css/functional/themes/dark-tritanopia.css

@@ -171,8 +171,8 @@
   --button-danger-borderColor-hover: #f0f6fc1a;
   --button-danger-borderColor-active: #f0f6fc1a;
   --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-inactive-fgColor-rest: #8b949e;
-  --button-inactive-bgColor-rest: #21262d;
+  --button-inactive-fgColor: #8b949e;
+  --button-inactive-bgColor: #21262d;
   --buttonCounter-default-bgColor-rest: #30363d;
   --buttonCounter-invisible-bgColor-rest: #30363d;
   --buttonCounter-primary-bgColor-rest: #04260f33;
@@ -202,10 +202,11 @@
   --underlineNav-borderColor-active: #f78166;
   --underlineNav-borderColor-hover: #6e768166;
   --underlineNav-iconColor-rest: #848d97;
-  --selection-bgColor: #4493f833;
+  --selection-bgColor: #1f6febb3;
   --fgColor-default: #e6edf3;
   --fgColor-muted: #848d97;
   --fgColor-onEmphasis: #ffffff;
+  --fgColor-white: #ffffff;
   --fgColor-disabled: #6e7681;
   --fgColor-link: #4493f8;
   --fgColor-neutral: #6e7681;
@@ -418,6 +419,7 @@
   --shadow-floating-medium: 0px 0px 0px 1px #30363d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
   --shadow-floating-large: 0px 0px 0px 1px #30363d, 0px 24px 48px 0px #010409;
   --shadow-floating-xlarge: 0px 0px 0px 1px #30363d, 0px 32px 64px 0px #010409;
+  --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
   --outline-focus: #1f6feb solid 2px;
 }
 @media (prefers-color-scheme: dark) {
@@ -592,8 +594,8 @@
     --button-danger-borderColor-hover: #f0f6fc1a;
     --button-danger-borderColor-active: #f0f6fc1a;
     --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-inactive-fgColor-rest: #8b949e;
-    --button-inactive-bgColor-rest: #21262d;
+    --button-inactive-fgColor: #8b949e;
+    --button-inactive-bgColor: #21262d;
     --buttonCounter-default-bgColor-rest: #30363d;
     --buttonCounter-invisible-bgColor-rest: #30363d;
     --buttonCounter-primary-bgColor-rest: #04260f33;
@@ -623,10 +625,11 @@
     --underlineNav-borderColor-active: #f78166;
     --underlineNav-borderColor-hover: #6e768166;
     --underlineNav-iconColor-rest: #848d97;
-    --selection-bgColor: #4493f833;
+    --selection-bgColor: #1f6febb3;
     --fgColor-default: #e6edf3;
     --fgColor-muted: #848d97;
     --fgColor-onEmphasis: #ffffff;
+    --fgColor-white: #ffffff;
     --fgColor-disabled: #6e7681;
     --fgColor-link: #4493f8;
     --fgColor-neutral: #6e7681;
@@ -839,6 +842,7 @@
     --shadow-floating-medium: 0px 0px 0px 1px #30363d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
     --shadow-floating-large: 0px 0px 0px 1px #30363d, 0px 24px 48px 0px #010409;
     --shadow-floating-xlarge: 0px 0px 0px 1px #30363d, 0px 32px 64px 0px #010409;
+    --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
     --outline-focus: #1f6feb solid 2px;
   }
 }

package/tokens-next-private/css/functional/themes/dark.css

@@ -171,8 +171,8 @@
   --button-danger-borderColor-hover: #f0f6fc1a;
   --button-danger-borderColor-active: #f0f6fc1a;
   --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-inactive-fgColor-rest: #8b949e;
-  --button-inactive-bgColor-rest: #21262d;
+  --button-inactive-fgColor: #8b949e;
+  --button-inactive-bgColor: #21262d;
   --buttonCounter-default-bgColor-rest: #30363d;
   --buttonCounter-invisible-bgColor-rest: #30363d;
   --buttonCounter-primary-bgColor-rest: #04260f33;
@@ -202,10 +202,11 @@
   --underlineNav-borderColor-active: #f78166;
   --underlineNav-borderColor-hover: #6e768166;
   --underlineNav-iconColor-rest: #848d97;
-  --selection-bgColor: #4493f833;
+  --selection-bgColor: #1f6febb3;
   --fgColor-default: #e6edf3;
   --fgColor-muted: #848d97;
   --fgColor-onEmphasis: #ffffff;
+  --fgColor-white: #ffffff;
   --fgColor-disabled: #6e7681;
   --fgColor-link: #4493f8;
   --fgColor-neutral: #6e7681;
@@ -418,6 +419,7 @@
   --shadow-floating-medium: 0px 0px 0px 1px #30363d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
   --shadow-floating-large: 0px 0px 0px 1px #30363d, 0px 24px 48px 0px #010409;
   --shadow-floating-xlarge: 0px 0px 0px 1px #30363d, 0px 32px 64px 0px #010409;
+  --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
   --outline-focus: #1f6feb solid 2px;
 }
 @media (prefers-color-scheme: dark) {
@@ -592,8 +594,8 @@
     --button-danger-borderColor-hover: #f0f6fc1a;
     --button-danger-borderColor-active: #f0f6fc1a;
     --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-inactive-fgColor-rest: #8b949e;
-    --button-inactive-bgColor-rest: #21262d;
+    --button-inactive-fgColor: #8b949e;
+    --button-inactive-bgColor: #21262d;
     --buttonCounter-default-bgColor-rest: #30363d;
     --buttonCounter-invisible-bgColor-rest: #30363d;
     --buttonCounter-primary-bgColor-rest: #04260f33;
@@ -623,10 +625,11 @@
     --underlineNav-borderColor-active: #f78166;
     --underlineNav-borderColor-hover: #6e768166;
     --underlineNav-iconColor-rest: #848d97;
-    --selection-bgColor: #4493f833;
+    --selection-bgColor: #1f6febb3;
     --fgColor-default: #e6edf3;
     --fgColor-muted: #848d97;
     --fgColor-onEmphasis: #ffffff;
+    --fgColor-white: #ffffff;
     --fgColor-disabled: #6e7681;
     --fgColor-link: #4493f8;
     --fgColor-neutral: #6e7681;
@@ -839,6 +842,7 @@
     --shadow-floating-medium: 0px 0px 0px 1px #30363d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
     --shadow-floating-large: 0px 0px 0px 1px #30363d, 0px 24px 48px 0px #010409;
     --shadow-floating-xlarge: 0px 0px 0px 1px #30363d, 0px 32px 64px 0px #010409;
+    --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
     --outline-focus: #1f6feb solid 2px;
   }
 }

package/tokens-next-private/css/functional/themes/light-colorblind.css

@@ -171,8 +171,8 @@
   --button-danger-borderColor-hover: #1f232826;
   --button-danger-borderColor-active: #1f232826;
   --button-danger-shadow-selected: inset 0px 1px 0px 0px #47170033;
-  --button-inactive-fgColor-rest: #57606a;
-  --button-inactive-bgColor-rest: #eaeef2;
+  --button-inactive-fgColor: #57606a;
+  --button-inactive-bgColor: #eaeef2;
   --buttonCounter-default-bgColor-rest: #afb8c133;
   --buttonCounter-invisible-bgColor-rest: #afb8c133;
   --buttonCounter-primary-bgColor-rest: #002d1133;
@@ -203,10 +203,11 @@
   --underlineNav-borderColor-active: #fd8c73;
   --underlineNav-borderColor-hover: #afb8c133;
   --underlineNav-iconColor-rest: #636c76;
-  --selection-bgColor: #0969da1a;
+  --selection-bgColor: #0969da33;
   --fgColor-default: #1f2328;
   --fgColor-muted: #636c76;
   --fgColor-onEmphasis: #ffffff;
+  --fgColor-white: #ffffff;
   --fgColor-disabled: #8c959f;
   --fgColor-link: #0969da;
   --fgColor-neutral: #6e7781;
@@ -419,6 +420,7 @@
   --shadow-floating-medium: 0px 0px 0px 1px #d0d7de, 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;
   --shadow-floating-large: 0px 0px 0px 1px #d0d7de, 0px 40px 80px 0px #424a533d;
   --shadow-floating-xlarge: 0px 0px 0px 1px #d0d7de, 0px 56px 112px 0px #424a5352;
+  --shadow-floating-legacy: 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
 }
 @media (prefers-color-scheme: dark) {
   [data-color-mode="auto"][data-dark-theme="light_colorblind"],
@@ -592,8 +594,8 @@
     --button-danger-borderColor-hover: #1f232826;
     --button-danger-borderColor-active: #1f232826;
     --button-danger-shadow-selected: inset 0px 1px 0px 0px #47170033;
-    --button-inactive-fgColor-rest: #57606a;
-    --button-inactive-bgColor-rest: #eaeef2;
+    --button-inactive-fgColor: #57606a;
+    --button-inactive-bgColor: #eaeef2;
     --buttonCounter-default-bgColor-rest: #afb8c133;
     --buttonCounter-invisible-bgColor-rest: #afb8c133;
     --buttonCounter-primary-bgColor-rest: #002d1133;
@@ -624,10 +626,11 @@
     --underlineNav-borderColor-active: #fd8c73;
     --underlineNav-borderColor-hover: #afb8c133;
     --underlineNav-iconColor-rest: #636c76;
-    --selection-bgColor: #0969da1a;
+    --selection-bgColor: #0969da33;
     --fgColor-default: #1f2328;
     --fgColor-muted: #636c76;
     --fgColor-onEmphasis: #ffffff;
+    --fgColor-white: #ffffff;
     --fgColor-disabled: #8c959f;
     --fgColor-link: #0969da;
     --fgColor-neutral: #6e7781;
@@ -840,5 +843,6 @@
     --shadow-floating-medium: 0px 0px 0px 1px #d0d7de, 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;
     --shadow-floating-large: 0px 0px 0px 1px #d0d7de, 0px 40px 80px 0px #424a533d;
     --shadow-floating-xlarge: 0px 0px 0px 1px #d0d7de, 0px 56px 112px 0px #424a5352;
+    --shadow-floating-legacy: 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
   }
 }

package/tokens-next-private/css/functional/themes/light-high-contrast.css

@@ -171,8 +171,8 @@
   --button-danger-borderColor-hover: #01040926;
   --button-danger-borderColor-active: #01040926;
   --button-danger-shadow-selected: inset 0px 1px 0px 0px #43001133;
-  --button-inactive-fgColor-rest: #4b535d;
-  --button-inactive-bgColor-rest: #e7ecf0;
+  --button-inactive-fgColor: #4b535d;
+  --button-inactive-bgColor: #e7ecf0;
   --buttonCounter-default-bgColor-rest: #66707b33;
   --buttonCounter-invisible-bgColor-rest: #66707b33;
   --buttonCounter-primary-bgColor-rest: #00230b33;
@@ -192,7 +192,7 @@
   --focus-outline: #0349b4 solid 2px;
   --menu-bgColor-active: #ffffff00;
   --overlay-bgColor: #ffffff;
-  --overlay-borderColor: #88929d80;
+  --overlay-borderColor: #88929d;
   --overlay-backdrop-bgColor: #88929d33;
   --selectMenu-borderColor: #ffffff00;
   --selectMenu-bgColor-active: #9cd7ff;
@@ -203,10 +203,11 @@
   --underlineNav-borderColor-active: #cd3425;
   --underlineNav-borderColor-hover: #88929d;
   --underlineNav-iconColor-rest: #0e1116;
-  --selection-bgColor: #023b951a;
+  --selection-bgColor: #0349b433;
   --fgColor-default: #010409;
   --fgColor-muted: #0e1116;
   --fgColor-onEmphasis: #ffffff;
+  --fgColor-white: #ffffff;
   --fgColor-disabled: #66707b;
   --fgColor-link: #023b95;
   --fgColor-neutral: #66707b;
@@ -419,6 +420,7 @@
   --shadow-floating-medium: 0px 0px 0px 1px #88929d, 0px 8px 16px -4px #343b4314, 0px 4px 32px -4px #343b4314, 0px 24px 48px -12px #343b4314, 0px 48px 96px -24px #343b4314;
   --shadow-floating-large: 0px 0px 0px 1px #88929d, 0px 40px 80px 0px #343b433d;
   --shadow-floating-xlarge: 0px 0px 0px 1px #88929d, 0px 56px 112px 0px #343b4352;
+  --shadow-floating-legacy: 0px 6px 12px -3px #343b430a, 0px 6px 18px 0px #343b431f;
 }
 @media (prefers-color-scheme: dark) {
   [data-color-mode="auto"][data-dark-theme="light_high_contrast"],
@@ -592,8 +594,8 @@
     --button-danger-borderColor-hover: #01040926;
     --button-danger-borderColor-active: #01040926;
     --button-danger-shadow-selected: inset 0px 1px 0px 0px #43001133;
-    --button-inactive-fgColor-rest: #4b535d;
-    --button-inactive-bgColor-rest: #e7ecf0;
+    --button-inactive-fgColor: #4b535d;
+    --button-inactive-bgColor: #e7ecf0;
     --buttonCounter-default-bgColor-rest: #66707b33;
     --buttonCounter-invisible-bgColor-rest: #66707b33;
     --buttonCounter-primary-bgColor-rest: #00230b33;
@@ -613,7 +615,7 @@
     --focus-outline: #0349b4 solid 2px;
     --menu-bgColor-active: #ffffff00;
     --overlay-bgColor: #ffffff;
-    --overlay-borderColor: #88929d80;
+    --overlay-borderColor: #88929d;
     --overlay-backdrop-bgColor: #88929d33;
     --selectMenu-borderColor: #ffffff00;
     --selectMenu-bgColor-active: #9cd7ff;
@@ -624,10 +626,11 @@
     --underlineNav-borderColor-active: #cd3425;
     --underlineNav-borderColor-hover: #88929d;
     --underlineNav-iconColor-rest: #0e1116;
-    --selection-bgColor: #023b951a;
+    --selection-bgColor: #0349b433;
     --fgColor-default: #010409;
     --fgColor-muted: #0e1116;
     --fgColor-onEmphasis: #ffffff;
+    --fgColor-white: #ffffff;
     --fgColor-disabled: #66707b;
     --fgColor-link: #023b95;
     --fgColor-neutral: #66707b;
@@ -840,5 +843,6 @@
     --shadow-floating-medium: 0px 0px 0px 1px #88929d, 0px 8px 16px -4px #343b4314, 0px 4px 32px -4px #343b4314, 0px 24px 48px -12px #343b4314, 0px 48px 96px -24px #343b4314;
     --shadow-floating-large: 0px 0px 0px 1px #88929d, 0px 40px 80px 0px #343b433d;
     --shadow-floating-xlarge: 0px 0px 0px 1px #88929d, 0px 56px 112px 0px #343b4352;
+    --shadow-floating-legacy: 0px 6px 12px -3px #343b430a, 0px 6px 18px 0px #343b431f;
   }
 }

package/tokens-next-private/css/functional/themes/light-tritanopia.css

@@ -171,8 +171,8 @@
   --button-danger-borderColor-hover: #1f232826;
   --button-danger-borderColor-active: #1f232826;
   --button-danger-shadow-selected: inset 0px 1px 0px 0px #4c001433;
-  --button-inactive-fgColor-rest: #57606a;
-  --button-inactive-bgColor-rest: #eaeef2;
+  --button-inactive-fgColor: #57606a;
+  --button-inactive-bgColor: #eaeef2;
   --buttonCounter-default-bgColor-rest: #afb8c133;
   --buttonCounter-invisible-bgColor-rest: #afb8c133;
   --buttonCounter-primary-bgColor-rest: #002d1133;
@@ -203,10 +203,11 @@
   --underlineNav-borderColor-active: #fd8c73;
   --underlineNav-borderColor-hover: #afb8c133;
   --underlineNav-iconColor-rest: #636c76;
-  --selection-bgColor: #0969da1a;
+  --selection-bgColor: #0969da33;
   --fgColor-default: #1f2328;
   --fgColor-muted: #636c76;
   --fgColor-onEmphasis: #ffffff;
+  --fgColor-white: #ffffff;
   --fgColor-disabled: #8c959f;
   --fgColor-link: #0969da;
   --fgColor-neutral: #6e7781;
@@ -419,6 +420,7 @@
   --shadow-floating-medium: 0px 0px 0px 1px #d0d7de, 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;
   --shadow-floating-large: 0px 0px 0px 1px #d0d7de, 0px 40px 80px 0px #424a533d;
   --shadow-floating-xlarge: 0px 0px 0px 1px #d0d7de, 0px 56px 112px 0px #424a5352;
+  --shadow-floating-legacy: 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
 }
 @media (prefers-color-scheme: dark) {
   [data-color-mode="auto"][data-dark-theme="light_tritanopia"],
@@ -592,8 +594,8 @@
     --button-danger-borderColor-hover: #1f232826;
     --button-danger-borderColor-active: #1f232826;
     --button-danger-shadow-selected: inset 0px 1px 0px 0px #4c001433;
-    --button-inactive-fgColor-rest: #57606a;
-    --button-inactive-bgColor-rest: #eaeef2;
+    --button-inactive-fgColor: #57606a;
+    --button-inactive-bgColor: #eaeef2;
     --buttonCounter-default-bgColor-rest: #afb8c133;
     --buttonCounter-invisible-bgColor-rest: #afb8c133;
     --buttonCounter-primary-bgColor-rest: #002d1133;
@@ -624,10 +626,11 @@
     --underlineNav-borderColor-active: #fd8c73;
     --underlineNav-borderColor-hover: #afb8c133;
     --underlineNav-iconColor-rest: #636c76;
-    --selection-bgColor: #0969da1a;
+    --selection-bgColor: #0969da33;
     --fgColor-default: #1f2328;
     --fgColor-muted: #636c76;
     --fgColor-onEmphasis: #ffffff;
+    --fgColor-white: #ffffff;
     --fgColor-disabled: #8c959f;
     --fgColor-link: #0969da;
     --fgColor-neutral: #6e7781;
@@ -840,5 +843,6 @@
     --shadow-floating-medium: 0px 0px 0px 1px #d0d7de, 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;
     --shadow-floating-large: 0px 0px 0px 1px #d0d7de, 0px 40px 80px 0px #424a533d;
     --shadow-floating-xlarge: 0px 0px 0px 1px #d0d7de, 0px 56px 112px 0px #424a5352;
+    --shadow-floating-legacy: 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
   }
 }

package/tokens-next-private/css/functional/themes/light.css

@@ -171,8 +171,8 @@
   --button-danger-borderColor-hover: #1f232826;
   --button-danger-borderColor-active: #1f232826;
   --button-danger-shadow-selected: inset 0px 1px 0px 0px #4c001433;
-  --button-inactive-fgColor-rest: #57606a;
-  --button-inactive-bgColor-rest: #eaeef2;
+  --button-inactive-fgColor: #57606a;
+  --button-inactive-bgColor: #eaeef2;
   --buttonCounter-default-bgColor-rest: #afb8c133;
   --buttonCounter-invisible-bgColor-rest: #afb8c133;
   --buttonCounter-primary-bgColor-rest: #002d1133;
@@ -203,10 +203,11 @@
   --underlineNav-borderColor-active: #fd8c73;
   --underlineNav-borderColor-hover: #afb8c133;
   --underlineNav-iconColor-rest: #636c76;
-  --selection-bgColor: #0969da1a;
+  --selection-bgColor: #0969da33;
   --fgColor-default: #1f2328;
   --fgColor-muted: #636c76;
   --fgColor-onEmphasis: #ffffff;
+  --fgColor-white: #ffffff;
   --fgColor-disabled: #8c959f;
   --fgColor-link: #0969da;
   --fgColor-neutral: #6e7781;
@@ -419,6 +420,7 @@
   --shadow-floating-medium: 0px 0px 0px 1px #d0d7de, 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;
   --shadow-floating-large: 0px 0px 0px 1px #d0d7de, 0px 40px 80px 0px #424a533d;
   --shadow-floating-xlarge: 0px 0px 0px 1px #d0d7de, 0px 56px 112px 0px #424a5352;
+  --shadow-floating-legacy: 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
 }
 @media (prefers-color-scheme: dark) {
   [data-color-mode="auto"][data-dark-theme="light"],
@@ -592,8 +594,8 @@
     --button-danger-borderColor-hover: #1f232826;
     --button-danger-borderColor-active: #1f232826;
     --button-danger-shadow-selected: inset 0px 1px 0px 0px #4c001433;
-    --button-inactive-fgColor-rest: #57606a;
-    --button-inactive-bgColor-rest: #eaeef2;
+    --button-inactive-fgColor: #57606a;
+    --button-inactive-bgColor: #eaeef2;
     --buttonCounter-default-bgColor-rest: #afb8c133;
     --buttonCounter-invisible-bgColor-rest: #afb8c133;
     --buttonCounter-primary-bgColor-rest: #002d1133;
@@ -624,10 +626,11 @@
     --underlineNav-borderColor-active: #fd8c73;
     --underlineNav-borderColor-hover: #afb8c133;
     --underlineNav-iconColor-rest: #636c76;
-    --selection-bgColor: #0969da1a;
+    --selection-bgColor: #0969da33;
     --fgColor-default: #1f2328;
     --fgColor-muted: #636c76;
     --fgColor-onEmphasis: #ffffff;
+    --fgColor-white: #ffffff;
     --fgColor-disabled: #8c959f;
     --fgColor-link: #0969da;
     --fgColor-neutral: #6e7781;
@@ -840,5 +843,6 @@
     --shadow-floating-medium: 0px 0px 0px 1px #d0d7de, 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;
     --shadow-floating-large: 0px 0px 0px 1px #d0d7de, 0px 40px 80px 0px #424a533d;
     --shadow-floating-xlarge: 0px 0px 0px 1px #d0d7de, 0px 56px 112px 0px #424a5352;
+    --shadow-floating-legacy: 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
   }
 }