@primer/primitives 7.15.8-rc.72fdc56 → 7.15.9-rc.f8722fa

package/dist/docs/functional/themes/light.json

@@ -5334,6 +5334,33 @@
     "attributes": {},
     "path": ["overlay", "bgColor"]
   },
+  "overlay-borderColor": {
+    "value": "#ffffff00",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)"
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/patterns-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.color.transparent}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)"
+        }
+      }
+    },
+    "name": "overlay-borderColor",
+    "attributes": {},
+    "path": ["overlay", "borderColor"]
+  },
   "overlay-backdrop-bgColor": {
     "value": "#8c959f33",
     "$type": "color",
@@ -10727,12 +10754,20 @@
     "path": ["shadow", "resting", "medium"]
   },
   "shadow-floating-small": {
-    "value": "0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f",
+    "value": "0px 0px 0px 1px #ffffff, 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f",
     "$type": "shadow",
     "filePath": "src/tokens/functional/shadow/light.json5",
     "isSource": true,
     "original": {
       "value": [
+        {
+          "color": "{overlay.borderColor}",
+          "alpha": 1,
+          "offsetX": "0px",
+          "offsetY": "0px",
+          "blur": "0px",
+          "spread": "1px"
+        },
         {
           "color": "{base.color.gray.7}",
           "alpha": 0.04,
@@ -10757,12 +10792,20 @@
     "path": ["shadow", "floating", "small"]
   },
   "shadow-floating-medium": {
-    "value": "0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314",
+    "value": "0px 0px 0px 1px #ffffff, 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314",
     "$type": "shadow",
     "filePath": "src/tokens/functional/shadow/light.json5",
     "isSource": true,
     "original": {
       "value": [
+        {
+          "color": "{overlay.borderColor}",
+          "alpha": 1,
+          "offsetX": "0px",
+          "offsetY": "0px",
+          "blur": "0px",
+          "spread": "1px"
+        },
         {
           "color": "{base.color.gray.7}",
           "alpha": 0.08,
@@ -10803,12 +10846,20 @@
     "path": ["shadow", "floating", "medium"]
   },
   "shadow-floating-large": {
-    "value": "0px 40px 80px 0px #424a533d",
+    "value": "0px 0px 0px 1px #ffffff, 0px 40px 80px 0px #424a533d",
     "$type": "shadow",
     "filePath": "src/tokens/functional/shadow/light.json5",
     "isSource": true,
     "original": {
       "value": [
+        {
+          "color": "{overlay.borderColor}",
+          "alpha": 1,
+          "offsetX": "0px",
+          "offsetY": "0px",
+          "blur": "0px",
+          "spread": "1px"
+        },
         {
           "color": "{base.color.gray.7}",
           "alpha": 0.24,
@@ -10825,12 +10876,20 @@
     "path": ["shadow", "floating", "large"]
   },
   "shadow-floating-xlarge": {
-    "value": "0px 56px 112px 0px #424a5352",
+    "value": "0px 0px 0px 1px #ffffff, 0px 56px 112px 0px #424a5352",
     "$type": "shadow",
     "filePath": "src/tokens/functional/shadow/light.json5",
     "isSource": true,
     "original": {
       "value": [
+        {
+          "color": "{overlay.borderColor}",
+          "alpha": 1,
+          "offsetX": "0px",
+          "offsetY": "0px",
+          "blur": "0px",
+          "spread": "1px"
+        },
         {
           "color": "{base.color.gray.7}",
           "alpha": 0.32,

package/dist/figma/themes/dark-colorblind.json

@@ -2055,6 +2055,22 @@
     "group": "component (internal)",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "overlay/borderColor",
+    "value": {
+      "r": 0.18823529411764706,
+      "g": 0.21176470588235294,
+      "b": 0.23921568627450981,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/overlay/borderColor",
+    "reference": "base/color/dark/base/color/gray/6",
+    "collection": "mode",
+    "mode": "dark colorblind",
+    "group": "component (internal)",
+    "scopes": ["ALL_SCOPES"]
+  },
   {
     "name": "overlay/bgColor",
     "value": {

package/dist/figma/themes/dark-dimmed.json

@@ -1958,6 +1958,22 @@
     "group": "component (internal)",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "overlay/borderColor",
+    "value": {
+      "r": 0.26666666666666666,
+      "g": 0.2980392156862745,
+      "b": 0.33725490196078434,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/overlay/borderColor",
+    "reference": "base/color/dark-dimmed/base/color/gray/6",
+    "collection": "mode",
+    "mode": "dark dimmed",
+    "group": "component (internal)",
+    "scopes": ["ALL_SCOPES"]
+  },
   {
     "name": "overlay/bgColor",
     "value": {

package/dist/figma/themes/dark-high-contrast.json

@@ -2010,6 +2010,22 @@
     "group": "component (internal)",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "overlay/borderColor",
+    "value": {
+      "r": 0.47843137254901963,
+      "g": 0.5098039215686274,
+      "b": 0.5568627450980392,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/overlay/borderColor",
+    "reference": "base/color/dark-high-contrast/base/color/gray/5",
+    "collection": "mode",
+    "mode": "dark high contrast",
+    "group": "component (internal)",
+    "scopes": ["ALL_SCOPES"]
+  },
   {
     "name": "overlay/bgColor",
     "value": {

package/dist/figma/themes/dark-tritanopia.json

@@ -2055,6 +2055,22 @@
     "group": "component (internal)",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "overlay/borderColor",
+    "value": {
+      "r": 0.18823529411764706,
+      "g": 0.21176470588235294,
+      "b": 0.23921568627450981,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/overlay/borderColor",
+    "reference": "base/color/dark/base/color/gray/6",
+    "collection": "mode",
+    "mode": "dark tritanopia",
+    "group": "component (internal)",
+    "scopes": ["ALL_SCOPES"]
+  },
   {
     "name": "overlay/bgColor",
     "value": {

package/dist/figma/themes/dark.json

@@ -1958,6 +1958,22 @@
     "group": "component (internal)",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "overlay/borderColor",
+    "value": {
+      "r": 0.18823529411764706,
+      "g": 0.21176470588235294,
+      "b": 0.23921568627450981,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/overlay/borderColor",
+    "reference": "base/color/dark/base/color/gray/6",
+    "collection": "mode",
+    "mode": "dark",
+    "group": "component (internal)",
+    "scopes": ["ALL_SCOPES"]
+  },
   {
     "name": "overlay/bgColor",
     "value": {

package/dist/figma/themes/light-colorblind.json

@@ -2064,6 +2064,22 @@
     "group": "component (internal)",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "overlay/borderColor",
+    "value": {
+      "r": 1,
+      "g": 1,
+      "b": 1,
+      "a": 0
+    },
+    "type": "COLOR",
+    "refId": "mode/overlay/borderColor",
+    "reference": "base/color/light/base/color/transparent",
+    "collection": "mode",
+    "mode": "light colorblind",
+    "group": "component (internal)",
+    "scopes": ["ALL_SCOPES"]
+  },
   {
     "name": "overlay/bgColor",
     "value": {

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

@@ -1965,6 +1965,22 @@
     "group": "component (internal)",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "overlay/borderColor",
+    "value": {
+      "r": 0.12549019607843137,
+      "g": 0.1450980392156863,
+      "b": 0.17254901960784313,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/overlay/borderColor",
+    "reference": "base/color/light-high-contrast/base/color/gray/8",
+    "collection": "mode",
+    "mode": "light high contrast",
+    "group": "component (internal)",
+    "scopes": ["ALL_SCOPES"]
+  },
   {
     "name": "overlay/bgColor",
     "value": {

package/dist/figma/themes/light-tritanopia.json

@@ -2062,6 +2062,22 @@
     "group": "component (internal)",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "overlay/borderColor",
+    "value": {
+      "r": 1,
+      "g": 1,
+      "b": 1,
+      "a": 0
+    },
+    "type": "COLOR",
+    "refId": "mode/overlay/borderColor",
+    "reference": "base/color/light/base/color/transparent",
+    "collection": "mode",
+    "mode": "light tritanopia",
+    "group": "component (internal)",
+    "scopes": ["ALL_SCOPES"]
+  },
   {
     "name": "overlay/bgColor",
     "value": {

package/dist/figma/themes/light.json

@@ -1947,6 +1947,22 @@
     "group": "component (internal)",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "overlay/borderColor",
+    "value": {
+      "r": 1,
+      "g": 1,
+      "b": 1,
+      "a": 0
+    },
+    "type": "COLOR",
+    "refId": "mode/overlay/borderColor",
+    "reference": "base/color/light/base/color/transparent",
+    "collection": "mode",
+    "mode": "light",
+    "group": "component (internal)",
+    "scopes": ["ALL_SCOPES"]
+  },
   {
     "name": "overlay/bgColor",
     "value": {

package/dist/scss/functional/themes/dark-colorblind.scss

@@ -177,6 +177,7 @@ $buttonCounter-danger-fgColor-disabled: #db6d2880;
 $focus-outlineColor: #1f6feb;
 $menu-bgColor-active: #161b22;
 $overlay-bgColor: #161b22;
+$overlay-borderColor: #30363d;
 $overlay-backdrop-bgColor: #161b2266;
 $selectMenu-borderColor: #484f58;
 $selectMenu-bgColor-active: #0c2d6b;
@@ -399,8 +400,8 @@ $shadow-inset: inset 0px 1px 0px 0px #0104093d;
 $shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
 $shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
 $shadow-resting-medium: 0px 3px 6px 0px #010409cc;
-$shadow-floating-small: 0px 0px 0px 1px #161b22, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-$shadow-floating-medium: 0px 0px 0px 1px #161b22, 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 #161b22, 0px 24px 48px 0px #010409;
-$shadow-floating-xlarge: 0px 0px 0px 1px #161b22, 0px 32px 64px 0px #010409;
+$shadow-floating-small: 0px 0px 0px 1px #30363d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
+$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;
 $outline-focus: #1f6feb solid 2px;

package/dist/scss/functional/themes/dark-dimmed.scss

@@ -177,6 +177,7 @@ $buttonCounter-danger-fgColor-disabled: #e5534b80;
 $focus-outlineColor: #316dca;
 $menu-bgColor-active: #2d333b;
 $overlay-bgColor: #2d333b;
+$overlay-borderColor: #444c56;
 $overlay-backdrop-bgColor: #2d333b66;
 $selectMenu-borderColor: #545d68;
 $selectMenu-bgColor-active: #143d79;
@@ -399,8 +400,8 @@ $shadow-inset: inset 0px 1px 0px 0px #1c21283d;
 $shadow-resting-xsmall: 0px 1px 0px 0px #1c2128cc;
 $shadow-resting-small: 0px 1px 0px 0px #1c212866, 0px 1px 3px 0px #1c212866;
 $shadow-resting-medium: 0px 3px 6px 0px #1c2128cc;
-$shadow-floating-small: 0px 0px 0px 1px #2d333b, 0px 6px 12px -3px #1c212866, 0px 6px 18px 0px #1c212866;
-$shadow-floating-medium: 0px 0px 0px 1px #2d333b, 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 #2d333b, 0px 24px 48px 0px #1c2128;
-$shadow-floating-xlarge: 0px 0px 0px 1px #2d333b, 0px 32px 64px 0px #1c2128;
+$shadow-floating-small: 0px 0px 0px 1px #444c56, 0px 6px 12px -3px #1c212866, 0px 6px 18px 0px #1c212866;
+$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;
 $outline-focus: #316dca solid 2px;

package/dist/scss/functional/themes/dark-high-contrast.scss

@@ -177,6 +177,7 @@ $buttonCounter-danger-fgColor-disabled: #ff808080;
 $focus-outlineColor: #409eff;
 $menu-bgColor-active: #272b33;
 $overlay-bgColor: #272b33;
+$overlay-borderColor: #7a828e;
 $overlay-backdrop-bgColor: #272b3366;
 $selectMenu-borderColor: #7a828e;
 $selectMenu-bgColor-active: #1e60d5;
@@ -399,8 +400,8 @@ $shadow-inset: inset 0px 1px 0px 0px #0104093d;
 $shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
 $shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
 $shadow-resting-medium: 0px 3px 6px 0px #010409cc;
-$shadow-floating-small: 0px 0px 0px 1px #272b33, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-$shadow-floating-medium: 0px 0px 0px 1px #272b33, 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 #272b33, 0px 24px 48px 0px #010409;
-$shadow-floating-xlarge: 0px 0px 0px 1px #272b33, 0px 32px 64px 0px #010409;
+$shadow-floating-small: 0px 0px 0px 1px #7a828e, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
+$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;
 $outline-focus: #409eff solid 2px;

package/dist/scss/functional/themes/dark-tritanopia.scss

@@ -177,6 +177,7 @@ $buttonCounter-danger-fgColor-disabled: #f8514980;
 $focus-outlineColor: #1f6feb;
 $menu-bgColor-active: #161b22;
 $overlay-bgColor: #161b22;
+$overlay-borderColor: #30363d;
 $overlay-backdrop-bgColor: #161b2266;
 $selectMenu-borderColor: #484f58;
 $selectMenu-bgColor-active: #0c2d6b;
@@ -399,8 +400,8 @@ $shadow-inset: inset 0px 1px 0px 0px #0104093d;
 $shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
 $shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
 $shadow-resting-medium: 0px 3px 6px 0px #010409cc;
-$shadow-floating-small: 0px 0px 0px 1px #161b22, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-$shadow-floating-medium: 0px 0px 0px 1px #161b22, 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 #161b22, 0px 24px 48px 0px #010409;
-$shadow-floating-xlarge: 0px 0px 0px 1px #161b22, 0px 32px 64px 0px #010409;
+$shadow-floating-small: 0px 0px 0px 1px #30363d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
+$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;
 $outline-focus: #1f6feb solid 2px;

package/dist/scss/functional/themes/dark.scss

@@ -177,6 +177,7 @@ $buttonCounter-danger-fgColor-disabled: #f8514980;
 $focus-outlineColor: #1f6feb;
 $menu-bgColor-active: #161b22;
 $overlay-bgColor: #161b22;
+$overlay-borderColor: #30363d;
 $overlay-backdrop-bgColor: #161b2266;
 $selectMenu-borderColor: #484f58;
 $selectMenu-bgColor-active: #0c2d6b;
@@ -399,8 +400,8 @@ $shadow-inset: inset 0px 1px 0px 0px #0104093d;
 $shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
 $shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
 $shadow-resting-medium: 0px 3px 6px 0px #010409cc;
-$shadow-floating-small: 0px 0px 0px 1px #161b22, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-$shadow-floating-medium: 0px 0px 0px 1px #161b22, 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 #161b22, 0px 24px 48px 0px #010409;
-$shadow-floating-xlarge: 0px 0px 0px 1px #161b22, 0px 32px 64px 0px #010409;
+$shadow-floating-small: 0px 0px 0px 1px #30363d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
+$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;
 $outline-focus: #1f6feb solid 2px;

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

@@ -178,6 +178,7 @@ $focus-outlineColor: #0969da;
 $focus-outline: #0969da solid 2px;
 $menu-bgColor-active: #ffffff00;
 $overlay-bgColor: #ffffff;
+$overlay-borderColor: #ffffff00;
 $overlay-backdrop-bgColor: #8c959f33;
 $selectMenu-borderColor: #ffffff00;
 $selectMenu-bgColor-active: #b6e3ff;
@@ -400,7 +401,7 @@ $shadow-inset: inset 0px 1px 0px 0px #1f23280a;
 $shadow-resting-xsmall: 0px 1px 0px 0px #1f23281a;
 $shadow-resting-small: 0px 1px 0px 0px #1f23280f, 0px 1px 3px 0px #1f232814;
 $shadow-resting-medium: 0px 3px 6px 0px #424a531f;
-$shadow-floating-small: 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
-$shadow-floating-medium: 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;
-$shadow-floating-large: 0px 40px 80px 0px #424a533d;
-$shadow-floating-xlarge: 0px 56px 112px 0px #424a5352;
+$shadow-floating-small: 0px 0px 0px 1px #ffffff, 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
+$shadow-floating-medium: 0px 0px 0px 1px #ffffff, 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 #ffffff, 0px 40px 80px 0px #424a533d;
+$shadow-floating-xlarge: 0px 0px 0px 1px #ffffff, 0px 56px 112px 0px #424a5352;

package/dist/scss/functional/themes/light-high-contrast.scss

@@ -178,6 +178,7 @@ $focus-outlineColor: #0349b4;
 $focus-outline: #0349b4 solid 2px;
 $menu-bgColor-active: #ffffff00;
 $overlay-bgColor: #ffffff;
+$overlay-borderColor: #20252c;
 $overlay-backdrop-bgColor: #88929d33;
 $selectMenu-borderColor: #ffffff00;
 $selectMenu-bgColor-active: #9cd7ff;
@@ -400,7 +401,7 @@ $shadow-inset: inset 0px 1px 0px 0px #0104090a;
 $shadow-resting-xsmall: 0px 1px 0px 0px #0104091a;
 $shadow-resting-small: 0px 1px 0px 0px #0104090f, 0px 1px 3px 0px #01040914;
 $shadow-resting-medium: 0px 3px 6px 0px #343b431f;
-$shadow-floating-small: 0px 6px 12px -3px #343b430a, 0px 6px 18px 0px #343b431f;
-$shadow-floating-medium: 0px 8px 16px -4px #343b4314, 0px 4px 32px -4px #343b4314, 0px 24px 48px -12px #343b4314, 0px 48px 96px -24px #343b4314;
-$shadow-floating-large: 0px 40px 80px 0px #343b433d;
-$shadow-floating-xlarge: 0px 56px 112px 0px #343b4352;
+$shadow-floating-small: 0px 0px 0px 1px #20252c, 0px 6px 12px -3px #343b430a, 0px 6px 18px 0px #343b431f;
+$shadow-floating-medium: 0px 0px 0px 1px #20252c, 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 #20252c, 0px 40px 80px 0px #343b433d;
+$shadow-floating-xlarge: 0px 0px 0px 1px #20252c, 0px 56px 112px 0px #343b4352;

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

@@ -178,6 +178,7 @@ $focus-outlineColor: #0969da;
 $focus-outline: #0969da solid 2px;
 $menu-bgColor-active: #ffffff00;
 $overlay-bgColor: #ffffff;
+$overlay-borderColor: #ffffff00;
 $overlay-backdrop-bgColor: #8c959f33;
 $selectMenu-borderColor: #ffffff00;
 $selectMenu-bgColor-active: #b6e3ff;
@@ -400,7 +401,7 @@ $shadow-inset: inset 0px 1px 0px 0px #1f23280a;
 $shadow-resting-xsmall: 0px 1px 0px 0px #1f23281a;
 $shadow-resting-small: 0px 1px 0px 0px #1f23280f, 0px 1px 3px 0px #1f232814;
 $shadow-resting-medium: 0px 3px 6px 0px #424a531f;
-$shadow-floating-small: 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
-$shadow-floating-medium: 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;
-$shadow-floating-large: 0px 40px 80px 0px #424a533d;
-$shadow-floating-xlarge: 0px 56px 112px 0px #424a5352;
+$shadow-floating-small: 0px 0px 0px 1px #ffffff, 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
+$shadow-floating-medium: 0px 0px 0px 1px #ffffff, 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 #ffffff, 0px 40px 80px 0px #424a533d;
+$shadow-floating-xlarge: 0px 0px 0px 1px #ffffff, 0px 56px 112px 0px #424a5352;

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

@@ -178,6 +178,7 @@ $focus-outlineColor: #0969da;
 $focus-outline: #0969da solid 2px;
 $menu-bgColor-active: #ffffff00;
 $overlay-bgColor: #ffffff;
+$overlay-borderColor: #ffffff00;
 $overlay-backdrop-bgColor: #8c959f33;
 $selectMenu-borderColor: #ffffff00;
 $selectMenu-bgColor-active: #b6e3ff;
@@ -400,7 +401,7 @@ $shadow-inset: inset 0px 1px 0px 0px #1f23280a;
 $shadow-resting-xsmall: 0px 1px 0px 0px #1f23281a;
 $shadow-resting-small: 0px 1px 0px 0px #1f23280f, 0px 1px 3px 0px #1f232814;
 $shadow-resting-medium: 0px 3px 6px 0px #424a531f;
-$shadow-floating-small: 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
-$shadow-floating-medium: 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;
-$shadow-floating-large: 0px 40px 80px 0px #424a533d;
-$shadow-floating-xlarge: 0px 56px 112px 0px #424a5352;
+$shadow-floating-small: 0px 0px 0px 1px #ffffff, 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
+$shadow-floating-medium: 0px 0px 0px 1px #ffffff, 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 #ffffff, 0px 40px 80px 0px #424a533d;
+$shadow-floating-xlarge: 0px 0px 0px 1px #ffffff, 0px 56px 112px 0px #424a5352;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "7.15.8-rc.72fdc56",
+  "version": "7.15.9-rc.f8722fa",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "files": [
     "dist",

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

@@ -181,6 +181,7 @@
   --focus-outlineColor: #1f6feb;
   --menu-bgColor-active: #161b22;
   --overlay-bgColor: #161b22;
+  --overlay-borderColor: #30363d;
   --overlay-backdrop-bgColor: #161b2266;
   --selectMenu-borderColor: #484f58;
   --selectMenu-bgColor-active: #0c2d6b;
@@ -403,10 +404,10 @@
   --shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
   --shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
   --shadow-resting-medium: 0px 3px 6px 0px #010409cc;
-  --shadow-floating-small: 0px 0px 0px 1px #161b22, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-  --shadow-floating-medium: 0px 0px 0px 1px #161b22, 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 #161b22, 0px 24px 48px 0px #010409;
-  --shadow-floating-xlarge: 0px 0px 0px 1px #161b22, 0px 32px 64px 0px #010409;
+  --shadow-floating-small: 0px 0px 0px 1px #30363d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
+  --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;
   --outline-focus: #1f6feb solid 2px;
 }
 @media (prefers-color-scheme: dark) {
@@ -591,6 +592,7 @@
     --focus-outlineColor: #1f6feb;
     --menu-bgColor-active: #161b22;
     --overlay-bgColor: #161b22;
+    --overlay-borderColor: #30363d;
     --overlay-backdrop-bgColor: #161b2266;
     --selectMenu-borderColor: #484f58;
     --selectMenu-bgColor-active: #0c2d6b;
@@ -813,10 +815,10 @@
     --shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
     --shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
     --shadow-resting-medium: 0px 3px 6px 0px #010409cc;
-    --shadow-floating-small: 0px 0px 0px 1px #161b22, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-    --shadow-floating-medium: 0px 0px 0px 1px #161b22, 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 #161b22, 0px 24px 48px 0px #010409;
-    --shadow-floating-xlarge: 0px 0px 0px 1px #161b22, 0px 32px 64px 0px #010409;
+    --shadow-floating-small: 0px 0px 0px 1px #30363d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
+    --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;
     --outline-focus: #1f6feb solid 2px;
   }
 }

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

@@ -181,6 +181,7 @@
   --focus-outlineColor: #316dca;
   --menu-bgColor-active: #2d333b;
   --overlay-bgColor: #2d333b;
+  --overlay-borderColor: #444c56;
   --overlay-backdrop-bgColor: #2d333b66;
   --selectMenu-borderColor: #545d68;
   --selectMenu-bgColor-active: #143d79;
@@ -403,10 +404,10 @@
   --shadow-resting-xsmall: 0px 1px 0px 0px #1c2128cc;
   --shadow-resting-small: 0px 1px 0px 0px #1c212866, 0px 1px 3px 0px #1c212866;
   --shadow-resting-medium: 0px 3px 6px 0px #1c2128cc;
-  --shadow-floating-small: 0px 0px 0px 1px #2d333b, 0px 6px 12px -3px #1c212866, 0px 6px 18px 0px #1c212866;
-  --shadow-floating-medium: 0px 0px 0px 1px #2d333b, 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 #2d333b, 0px 24px 48px 0px #1c2128;
-  --shadow-floating-xlarge: 0px 0px 0px 1px #2d333b, 0px 32px 64px 0px #1c2128;
+  --shadow-floating-small: 0px 0px 0px 1px #444c56, 0px 6px 12px -3px #1c212866, 0px 6px 18px 0px #1c212866;
+  --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;
   --outline-focus: #316dca solid 2px;
 }
 @media (prefers-color-scheme: dark) {
@@ -591,6 +592,7 @@
     --focus-outlineColor: #316dca;
     --menu-bgColor-active: #2d333b;
     --overlay-bgColor: #2d333b;
+    --overlay-borderColor: #444c56;
     --overlay-backdrop-bgColor: #2d333b66;
     --selectMenu-borderColor: #545d68;
     --selectMenu-bgColor-active: #143d79;
@@ -813,10 +815,10 @@
     --shadow-resting-xsmall: 0px 1px 0px 0px #1c2128cc;
     --shadow-resting-small: 0px 1px 0px 0px #1c212866, 0px 1px 3px 0px #1c212866;
     --shadow-resting-medium: 0px 3px 6px 0px #1c2128cc;
-    --shadow-floating-small: 0px 0px 0px 1px #2d333b, 0px 6px 12px -3px #1c212866, 0px 6px 18px 0px #1c212866;
-    --shadow-floating-medium: 0px 0px 0px 1px #2d333b, 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 #2d333b, 0px 24px 48px 0px #1c2128;
-    --shadow-floating-xlarge: 0px 0px 0px 1px #2d333b, 0px 32px 64px 0px #1c2128;
+    --shadow-floating-small: 0px 0px 0px 1px #444c56, 0px 6px 12px -3px #1c212866, 0px 6px 18px 0px #1c212866;
+    --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;
     --outline-focus: #316dca solid 2px;
   }
 }