@primer/primitives 7.15.9 → 7.15.10-rc.d7a91629

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

@@ -50,14 +50,14 @@
   --control-bgColor-rest: #f6f8fa;
   --control-bgColor-hover: #eef1f4;
   --control-bgColor-active: #e7ebef;
-  --control-bgColor-disabled: #f6f8fa;
+  --control-bgColor-disabled: #eaeef2b3;
   --control-bgColor-selected: #f6f8fa;
   --control-fgColor-rest: #24292f;
   --control-fgColor-placeholder: #6e7781;
   --control-fgColor-disabled: #8c959f;
   --control-borderColor-rest: #d0d7de;
   --control-borderColor-emphasis: #868f99;
-  --control-borderColor-disabled: #f6f8fa;
+  --control-borderColor-disabled: #eaeef2b3;
   --control-borderColor-selected: #f6f8fa;
   --control-borderColor-success: #1a7f37;
   --control-borderColor-danger: #cf222e;
@@ -66,7 +66,7 @@
   --control-transparent-bgColor-rest: #ffffff00;
   --control-transparent-bgColor-hover: #d0d7de33;
   --control-transparent-bgColor-active: #d0d7de66;
-  --control-transparent-bgColor-disabled: #ffffff00;
+  --control-transparent-bgColor-disabled: #eaeef2b3;
   --control-transparent-bgColor-selected: #d0d7de33;
   --control-transparent-borderColor-rest: #ffffff00;
   --control-transparent-borderColor-hover: #ffffff00;
@@ -94,10 +94,10 @@
   --controlTrack-borderColor-rest: #ffffff00;
   --controlTrack-borderColor-disabled: #8c959f;
   --controlKnob-bgColor-rest: #ffffff;
-  --controlKnob-bgColor-disabled: #f6f8fa;
+  --controlKnob-bgColor-disabled: #eaeef2b3;
   --controlKnob-bgColor-checked: #ffffff;
   --controlKnob-borderColor-rest: #868f99;
-  --controlKnob-borderColor-disabled: #f6f8fa;
+  --controlKnob-borderColor-disabled: #eaeef2b3;
   --controlKnob-borderColor-checked: #0969da;
   --counter-borderColor: #ffffff00;
   --button-default-fgColor-rest: #24292f;
@@ -105,11 +105,11 @@
   --button-default-bgColor-hover: #eef1f4;
   --button-default-bgColor-active: #e7ebef;
   --button-default-bgColor-selected: #e7ebef;
-  --button-default-bgColor-disabled: #f6f8fa;
+  --button-default-bgColor-disabled: #eaeef2b3;
   --button-default-borderColor-rest: #d0d7de;
   --button-default-borderColor-hover: #d0d7de;
   --button-default-borderColor-active: #d0d7de;
-  --button-default-borderColor-disabled: #f6f8fa;
+  --button-default-borderColor-disabled: #eaeef2b3;
   --button-default-shadow-resting: 0px 1px 0px 0px #1f23280a;
   --button-primary-fgColor-rest: #ffffff;
   --button-primary-fgColor-disabled: #ffffffcc;
@@ -132,10 +132,10 @@
   --button-invisible-bgColor-rest: #ffffff00;
   --button-invisible-bgColor-hover: #d0d7de33;
   --button-invisible-bgColor-active: #d0d7de66;
-  --button-invisible-bgColor-disabled: #ffffff00;
+  --button-invisible-bgColor-disabled: #eaeef2b3;
   --button-invisible-borderColor-rest: #ffffff00;
   --button-invisible-borderColor-hover: #ffffff00;
-  --button-invisible-borderColor-disabled: #f6f8fa;
+  --button-invisible-borderColor-disabled: #eaeef2b3;
   --button-outline-fgColor-rest: #0969da;
   --button-outline-fgColor-hover: #ffffff;
   --button-outline-fgColor-active: #ffffff;
@@ -156,7 +156,7 @@
   --button-danger-bgColor-rest: #f6f8fa;
   --button-danger-bgColor-hover: #a40e26;
   --button-danger-bgColor-active: #8b0820;
-  --button-danger-bgColor-disabled: #f6f8fa;
+  --button-danger-bgColor-disabled: #eaeef2b3;
   --button-danger-borderColor-rest: #d0d7de;
   --button-danger-borderColor-hover: #1f232826;
   --button-danger-borderColor-active: #1f232826;
@@ -182,7 +182,7 @@
   --focus-outline: #0969da solid 2px;
   --menu-bgColor-active: #ffffff00;
   --overlay-bgColor: #ffffff;
-  --overlay-borderColor: #ffffff00;
+  --overlay-borderColor: #d0d7de80;
   --overlay-backdrop-bgColor: #8c959f33;
   --selectMenu-borderColor: #ffffff00;
   --selectMenu-bgColor-active: #b6e3ff;
@@ -214,7 +214,7 @@
   --bgColor-inset: #f6f8fa;
   --bgColor-emphasis: #24292f;
   --bgColor-inverse: #24292f;
-  --bgColor-disabled: #f6f8fa;
+  --bgColor-disabled: #eaeef2b3;
   --bgColor-transparent: #ffffff00;
   --bgColor-neutral-muted: #afb8c133;
   --bgColor-neutral-emphasis: #6e7781;
@@ -239,7 +239,7 @@
   --borderColor-default: #d0d7de;
   --borderColor-muted: #d0d7deb3;
   --borderColor-emphasis: #6e7781;
-  --borderColor-disabled: #f6f8fa;
+  --borderColor-disabled: #eaeef2b3;
   --borderColor-transparent: #ffffff00;
   --borderColor-neutral-muted: #afb8c133;
   --borderColor-neutral-emphasis: #6e7781;
@@ -405,10 +405,10 @@
   --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 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;
+  --shadow-floating-small: 0px 0px 0px 1px #d0d7de80, 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
+  --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;
 }
 @media (prefers-color-scheme: dark) {
   [data-color-mode="auto"][data-dark-theme="light"],
@@ -461,14 +461,14 @@
     --control-bgColor-rest: #f6f8fa;
     --control-bgColor-hover: #eef1f4;
     --control-bgColor-active: #e7ebef;
-    --control-bgColor-disabled: #f6f8fa;
+    --control-bgColor-disabled: #eaeef2b3;
     --control-bgColor-selected: #f6f8fa;
     --control-fgColor-rest: #24292f;
     --control-fgColor-placeholder: #6e7781;
     --control-fgColor-disabled: #8c959f;
     --control-borderColor-rest: #d0d7de;
     --control-borderColor-emphasis: #868f99;
-    --control-borderColor-disabled: #f6f8fa;
+    --control-borderColor-disabled: #eaeef2b3;
     --control-borderColor-selected: #f6f8fa;
     --control-borderColor-success: #1a7f37;
     --control-borderColor-danger: #cf222e;
@@ -477,7 +477,7 @@
     --control-transparent-bgColor-rest: #ffffff00;
     --control-transparent-bgColor-hover: #d0d7de33;
     --control-transparent-bgColor-active: #d0d7de66;
-    --control-transparent-bgColor-disabled: #ffffff00;
+    --control-transparent-bgColor-disabled: #eaeef2b3;
     --control-transparent-bgColor-selected: #d0d7de33;
     --control-transparent-borderColor-rest: #ffffff00;
     --control-transparent-borderColor-hover: #ffffff00;
@@ -505,10 +505,10 @@
     --controlTrack-borderColor-rest: #ffffff00;
     --controlTrack-borderColor-disabled: #8c959f;
     --controlKnob-bgColor-rest: #ffffff;
-    --controlKnob-bgColor-disabled: #f6f8fa;
+    --controlKnob-bgColor-disabled: #eaeef2b3;
     --controlKnob-bgColor-checked: #ffffff;
     --controlKnob-borderColor-rest: #868f99;
-    --controlKnob-borderColor-disabled: #f6f8fa;
+    --controlKnob-borderColor-disabled: #eaeef2b3;
     --controlKnob-borderColor-checked: #0969da;
     --counter-borderColor: #ffffff00;
     --button-default-fgColor-rest: #24292f;
@@ -516,11 +516,11 @@
     --button-default-bgColor-hover: #eef1f4;
     --button-default-bgColor-active: #e7ebef;
     --button-default-bgColor-selected: #e7ebef;
-    --button-default-bgColor-disabled: #f6f8fa;
+    --button-default-bgColor-disabled: #eaeef2b3;
     --button-default-borderColor-rest: #d0d7de;
     --button-default-borderColor-hover: #d0d7de;
     --button-default-borderColor-active: #d0d7de;
-    --button-default-borderColor-disabled: #f6f8fa;
+    --button-default-borderColor-disabled: #eaeef2b3;
     --button-default-shadow-resting: 0px 1px 0px 0px #1f23280a;
     --button-primary-fgColor-rest: #ffffff;
     --button-primary-fgColor-disabled: #ffffffcc;
@@ -543,10 +543,10 @@
     --button-invisible-bgColor-rest: #ffffff00;
     --button-invisible-bgColor-hover: #d0d7de33;
     --button-invisible-bgColor-active: #d0d7de66;
-    --button-invisible-bgColor-disabled: #ffffff00;
+    --button-invisible-bgColor-disabled: #eaeef2b3;
     --button-invisible-borderColor-rest: #ffffff00;
     --button-invisible-borderColor-hover: #ffffff00;
-    --button-invisible-borderColor-disabled: #f6f8fa;
+    --button-invisible-borderColor-disabled: #eaeef2b3;
     --button-outline-fgColor-rest: #0969da;
     --button-outline-fgColor-hover: #ffffff;
     --button-outline-fgColor-active: #ffffff;
@@ -567,7 +567,7 @@
     --button-danger-bgColor-rest: #f6f8fa;
     --button-danger-bgColor-hover: #a40e26;
     --button-danger-bgColor-active: #8b0820;
-    --button-danger-bgColor-disabled: #f6f8fa;
+    --button-danger-bgColor-disabled: #eaeef2b3;
     --button-danger-borderColor-rest: #d0d7de;
     --button-danger-borderColor-hover: #1f232826;
     --button-danger-borderColor-active: #1f232826;
@@ -593,7 +593,7 @@
     --focus-outline: #0969da solid 2px;
     --menu-bgColor-active: #ffffff00;
     --overlay-bgColor: #ffffff;
-    --overlay-borderColor: #ffffff00;
+    --overlay-borderColor: #d0d7de80;
     --overlay-backdrop-bgColor: #8c959f33;
     --selectMenu-borderColor: #ffffff00;
     --selectMenu-bgColor-active: #b6e3ff;
@@ -625,7 +625,7 @@
     --bgColor-inset: #f6f8fa;
     --bgColor-emphasis: #24292f;
     --bgColor-inverse: #24292f;
-    --bgColor-disabled: #f6f8fa;
+    --bgColor-disabled: #eaeef2b3;
     --bgColor-transparent: #ffffff00;
     --bgColor-neutral-muted: #afb8c133;
     --bgColor-neutral-emphasis: #6e7781;
@@ -650,7 +650,7 @@
     --borderColor-default: #d0d7de;
     --borderColor-muted: #d0d7deb3;
     --borderColor-emphasis: #6e7781;
-    --borderColor-disabled: #f6f8fa;
+    --borderColor-disabled: #eaeef2b3;
     --borderColor-transparent: #ffffff00;
     --borderColor-neutral-muted: #afb8c133;
     --borderColor-neutral-emphasis: #6e7781;
@@ -816,9 +816,9 @@
     --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 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;
+    --shadow-floating-small: 0px 0px 0px 1px #d0d7de80, 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
+    --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;
   }
 }

package/tokens-next-private/docs/functional/themes/dark-colorblind.json

@@ -1439,7 +1439,7 @@
     "path": ["control", "bgColor", "active"]
   },
   "control-bgColor-disabled": {
-    "value": "#161b22",
+    "value": "#21262db3",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -1555,7 +1555,7 @@
     "path": ["control", "fgColor", "placeholder"]
   },
   "control-fgColor-disabled": {
-    "value": "#8b949e",
+    "value": "#6e7681",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -1650,7 +1650,7 @@
     "path": ["control", "borderColor", "emphasis"]
   },
   "control-borderColor-disabled": {
-    "value": "#161b22",
+    "value": "#21262db3",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -1915,7 +1915,7 @@
     "path": ["control", "transparent", "bgColor", "active"]
   },
   "control-transparent-bgColor-disabled": {
-    "value": "#00000000",
+    "value": "#21262db3",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -1928,7 +1928,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{base.color.transparent}",
+      "value": "{bgColor.disabled}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -2283,7 +2283,7 @@
     "path": ["control", "checked", "bgColor", "active"]
   },
   "control-checked-bgColor-disabled": {
-    "value": "#8b949e",
+    "value": "#6e7681",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -2473,7 +2473,7 @@
     "path": ["control", "checked", "borderColor", "active"]
   },
   "control-checked-borderColor-disabled": {
-    "value": "#8b949e",
+    "value": "#6e7681",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -2605,7 +2605,7 @@
     "path": ["controlTrack", "bgColor", "active"]
   },
   "controlTrack-bgColor-disabled": {
-    "value": "#8b949e",
+    "value": "#6e7681",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -2721,7 +2721,7 @@
     "path": ["controlTrack", "borderColor", "rest"]
   },
   "controlTrack-borderColor-disabled": {
-    "value": "#8b949e",
+    "value": "#6e7681",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -2779,7 +2779,7 @@
     "path": ["controlKnob", "bgColor", "rest"]
   },
   "controlKnob-bgColor-disabled": {
-    "value": "#161b22",
+    "value": "#21262db3",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -2866,7 +2866,7 @@
     "path": ["controlKnob", "borderColor", "rest"]
   },
   "controlKnob-borderColor-disabled": {
-    "value": "#161b22",
+    "value": "#21262db3",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -3098,7 +3098,7 @@
     "path": ["button", "default", "bgColor", "selected"]
   },
   "button-default-bgColor-disabled": {
-    "value": "#161b22",
+    "value": "#21262db3",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -3214,7 +3214,7 @@
     "path": ["button", "default", "borderColor", "active"]
   },
   "button-default-borderColor-disabled": {
-    "value": "#161b22",
+    "value": "#21262db3",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -3309,7 +3309,7 @@
     "path": ["button", "primary", "fgColor", "rest"]
   },
   "button-primary-fgColor-disabled": {
-    "value": "#ffffff80",
+    "value": "#ffffffcc",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -3319,7 +3319,7 @@
         "scopes": ["fgColor"]
       }
     },
-    "alpha": 0.5,
+    "alpha": 0.8,
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
@@ -3333,7 +3333,7 @@
           "scopes": ["fgColor"]
         }
       },
-      "alpha": 0.5
+      "alpha": 0.8
     },
     "name": "button-primary-fgColor-disabled",
     "attributes": {},
@@ -3716,7 +3716,7 @@
     "path": ["button", "invisible", "fgColor", "hover"]
   },
   "button-invisible-fgColor-disabled": {
-    "value": "#8b949e",
+    "value": "#6e7681",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -3803,7 +3803,7 @@
     "path": ["button", "invisible", "iconColor", "hover"]
   },
   "button-invisible-iconColor-disabled": {
-    "value": "#8b949e",
+    "value": "#6e7681",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -3919,7 +3919,7 @@
     "path": ["button", "invisible", "bgColor", "active"]
   },
   "button-invisible-bgColor-disabled": {
-    "value": "#00000000",
+    "value": "#21262db3",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -4006,7 +4006,7 @@
     "path": ["button", "invisible", "borderColor", "hover"]
   },
   "button-invisible-borderColor-disabled": {
-    "value": "#161b22",
+    "value": "#21262db3",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -4637,7 +4637,7 @@
     "path": ["button", "danger", "bgColor", "active"]
   },
   "button-danger-bgColor-disabled": {
-    "value": "#161b22",
+    "value": "#21262db3",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -5392,7 +5392,7 @@
     "path": ["overlay", "bgColor"]
   },
   "overlay-borderColor": {
-    "value": "#30363d",
+    "value": "#30363db3",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -5404,7 +5404,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{base.color.gray.6}",
+      "value": "{borderColor.muted}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -5847,7 +5847,7 @@
     "path": ["fgColor", "onEmphasis"]
   },
   "fgColor-disabled": {
-    "value": "#8b949e",
+    "value": "#6e7681",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -5860,7 +5860,7 @@
     "filePath": "src/tokens/functional/color/dark/primitives-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{base.color.gray.3}",
+      "value": "{base.color.gray.4}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -6432,7 +6432,7 @@
     "path": ["bgColor", "inverse"]
   },
   "bgColor-disabled": {
-    "value": "#161b22",
+    "value": "#21262db3",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -6442,10 +6442,11 @@
         "scopes": ["bgColor"]
       }
     },
+    "alpha": 0.7,
     "filePath": "src/tokens/functional/color/dark/primitives-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{base.color.gray.8}",
+      "value": "{base.color.gray.7}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -6454,7 +6455,8 @@
           "group": "semantic",
           "scopes": ["bgColor"]
         }
-      }
+      },
+      "alpha": 0.7
     },
     "name": "bgColor-disabled",
     "attributes": {},
@@ -7305,7 +7307,7 @@
     "path": ["borderColor", "emphasis"]
   },
   "borderColor-disabled": {
-    "value": "#161b22",
+    "value": "#21262db3",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {