@primer/primitives 7.14.0 → 7.14.1-rc.9f71972

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

@@ -23,7 +23,7 @@
   --codeMirror-lineNumber-fgColor: #636c76;
   --codeMirror-cursor-fgColor: #1f2328;
   --codeMirror-selection-bgColor: #54aeff66;
-  --codeMirror-activeline-bgColor: #eaeef280;
+  --codeMirror-activeline-bgColor: #afb8c133;
   --codeMirror-matchingBracket-fgColor: #1f2328;
   --codeMirror-lines-bgColor: #ffffff;
   --codeMirror-syntax-fgColor-comment: #24292f;
@@ -64,8 +64,8 @@
   --control-transparent-bgColor-rest: #ffffff00;
   --control-transparent-bgColor-hover: #d0d7de33;
   --control-transparent-bgColor-active: #d0d7de66;
-  --control-transparent-bgColor-disabled: #f6f8fa;
-  --control-transparent-bgColor-selected: #f6f8fa;
+  --control-transparent-bgColor-disabled: #ffffff00;
+  --control-transparent-bgColor-selected: #d0d7de33;
   --control-transparent-borderColor-rest: #ffffff00;
   --control-transparent-borderColor-hover: #ffffff00;
   --control-transparent-borderColor-active: #ffffff00;
@@ -130,7 +130,7 @@
   --button-invisible-bgColor-rest: #ffffff00;
   --button-invisible-bgColor-hover: #d0d7de33;
   --button-invisible-bgColor-active: #d0d7de66;
-  --button-invisible-bgColor-disabled: #f6f8fa;
+  --button-invisible-bgColor-disabled: #ffffff00;
   --button-invisible-borderColor-rest: #ffffff00;
   --button-invisible-borderColor-hover: #ffffff00;
   --button-invisible-borderColor-disabled: #f6f8fa;
@@ -159,8 +159,8 @@
   --button-danger-borderColor-hover: #1f232826;
   --button-danger-borderColor-active: #1f232826;
   --button-danger-shadow-selected: inset 0px 1px 0px 0px #4c001433;
-  --buttonCounter-default-bgColor-rest: #eaeef2;
-  --buttonCounter-invisible-bgColor-rest: #eaeef2;
+  --buttonCounter-default-bgColor-rest: #afb8c133;
+  --buttonCounter-invisible-bgColor-rest: #afb8c133;
   --buttonCounter-primary-bgColor-rest: #002d1133;
   --buttonCounter-outline-bgColor-rest: #0969da1a;
   --buttonCounter-outline-bgColor-hover: #ffffff33;
@@ -221,7 +221,7 @@
   --bgColor-inverse: #24292f;
   --bgColor-disabled: #f6f8fa;
   --bgColor-transparent: #ffffff00;
-  --bgColor-neutral-muted: #eaeef280;
+  --bgColor-neutral-muted: #afb8c133;
   --bgColor-neutral-emphasis: #6e7781;
   --bgColor-accent-muted: #ddf4ff;
   --bgColor-accent-emphasis: #0969da;
@@ -440,7 +440,7 @@
     --codeMirror-lineNumber-fgColor: #636c76;
     --codeMirror-cursor-fgColor: #1f2328;
     --codeMirror-selection-bgColor: #54aeff66;
-    --codeMirror-activeline-bgColor: #eaeef280;
+    --codeMirror-activeline-bgColor: #afb8c133;
     --codeMirror-matchingBracket-fgColor: #1f2328;
     --codeMirror-lines-bgColor: #ffffff;
     --codeMirror-syntax-fgColor-comment: #24292f;
@@ -481,8 +481,8 @@
     --control-transparent-bgColor-rest: #ffffff00;
     --control-transparent-bgColor-hover: #d0d7de33;
     --control-transparent-bgColor-active: #d0d7de66;
-    --control-transparent-bgColor-disabled: #f6f8fa;
-    --control-transparent-bgColor-selected: #f6f8fa;
+    --control-transparent-bgColor-disabled: #ffffff00;
+    --control-transparent-bgColor-selected: #d0d7de33;
     --control-transparent-borderColor-rest: #ffffff00;
     --control-transparent-borderColor-hover: #ffffff00;
     --control-transparent-borderColor-active: #ffffff00;
@@ -547,7 +547,7 @@
     --button-invisible-bgColor-rest: #ffffff00;
     --button-invisible-bgColor-hover: #d0d7de33;
     --button-invisible-bgColor-active: #d0d7de66;
-    --button-invisible-bgColor-disabled: #f6f8fa;
+    --button-invisible-bgColor-disabled: #ffffff00;
     --button-invisible-borderColor-rest: #ffffff00;
     --button-invisible-borderColor-hover: #ffffff00;
     --button-invisible-borderColor-disabled: #f6f8fa;
@@ -576,8 +576,8 @@
     --button-danger-borderColor-hover: #1f232826;
     --button-danger-borderColor-active: #1f232826;
     --button-danger-shadow-selected: inset 0px 1px 0px 0px #4c001433;
-    --buttonCounter-default-bgColor-rest: #eaeef2;
-    --buttonCounter-invisible-bgColor-rest: #eaeef2;
+    --buttonCounter-default-bgColor-rest: #afb8c133;
+    --buttonCounter-invisible-bgColor-rest: #afb8c133;
     --buttonCounter-primary-bgColor-rest: #002d1133;
     --buttonCounter-outline-bgColor-rest: #0969da1a;
     --buttonCounter-outline-bgColor-hover: #ffffff33;
@@ -638,7 +638,7 @@
     --bgColor-inverse: #24292f;
     --bgColor-disabled: #f6f8fa;
     --bgColor-transparent: #ffffff00;
-    --bgColor-neutral-muted: #eaeef280;
+    --bgColor-neutral-muted: #afb8c133;
     --bgColor-neutral-emphasis: #6e7781;
     --bgColor-accent-muted: #ddf4ff;
     --bgColor-accent-emphasis: #0969da;

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

@@ -685,7 +685,7 @@
     "path": ["codeMirror", "selection", "bgColor"]
   },
   "codeMirror-activeline-bgColor": {
-    "value": "#6e768126",
+    "value": "#6e768166",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -2649,7 +2649,7 @@
     "path": ["controlTrack", "fgColor", "rest"]
   },
   "controlTrack-fgColor-disabled": {
-    "value": "#7d8590",
+    "value": "#ffffff",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -2662,7 +2662,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{fgColor.muted}",
+      "value": "{fgColor.onEmphasis}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -3877,7 +3877,7 @@
     "path": ["button", "invisible", "bgColor", "active"]
   },
   "button-invisible-bgColor-disabled": {
-    "value": "#161b22",
+    "value": "#00000000",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -3890,7 +3890,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{control.bgColor.disabled}",
+      "value": "{control.transparent.bgColor.disabled}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -6545,7 +6545,7 @@
     "path": ["bgColor", "transparent"]
   },
   "bgColor-neutral-muted": {
-    "value": "#6e768126",
+    "value": "#6e768166",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -6555,7 +6555,7 @@
         "scopes": ["bgColor"]
       }
     },
-    "alpha": 0.15,
+    "alpha": 0.4,
     "filePath": "src/tokens/functional/color/dark/primitives-dark.json5",
     "isSource": true,
     "original": {
@@ -6569,7 +6569,7 @@
           "scopes": ["bgColor"]
         }
       },
-      "alpha": 0.15
+      "alpha": 0.4
     },
     "name": "bgColor-neutral-muted",
     "attributes": {},

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

@@ -685,7 +685,7 @@
     "path": ["codeMirror", "selection", "bgColor"]
   },
   "codeMirror-activeline-bgColor": {
-    "value": "#636e7b26",
+    "value": "#636e7b66",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -2649,7 +2649,7 @@
     "path": ["controlTrack", "fgColor", "rest"]
   },
   "controlTrack-fgColor-disabled": {
-    "value": "#6d7986",
+    "value": "#cdd9e5",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -2662,7 +2662,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{fgColor.muted}",
+      "value": "{fgColor.onEmphasis}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -3883,7 +3883,7 @@
     "path": ["button", "invisible", "bgColor", "active"]
   },
   "button-invisible-bgColor-disabled": {
-    "value": "#2d333b",
+    "value": "#00000000",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -3896,7 +3896,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{control.bgColor.disabled}",
+      "value": "{control.transparent.bgColor.disabled}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -6551,7 +6551,7 @@
     "path": ["bgColor", "transparent"]
   },
   "bgColor-neutral-muted": {
-    "value": "#636e7b26",
+    "value": "#636e7b66",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -6561,7 +6561,7 @@
         "scopes": ["bgColor"]
       }
     },
-    "alpha": 0.15,
+    "alpha": 0.4,
     "filePath": "src/tokens/functional/color/dark/primitives-dark.json5",
     "isSource": true,
     "original": {
@@ -6575,7 +6575,7 @@
           "scopes": ["bgColor"]
         }
       },
-      "alpha": 0.15
+      "alpha": 0.4
     },
     "name": "bgColor-neutral-muted",
     "attributes": {},

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

@@ -689,7 +689,7 @@
     "path": ["codeMirror", "selection", "bgColor"]
   },
   "codeMirror-activeline-bgColor": {
-    "value": "#9ea7b326",
+    "value": "#9ea7b366",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -2657,7 +2657,7 @@
     "path": ["controlTrack", "fgColor", "rest"]
   },
   "controlTrack-fgColor-disabled": {
-    "value": "#f0f3f6",
+    "value": "#0a0c10",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -2670,7 +2670,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{fgColor.muted}",
+      "value": "{fgColor.onEmphasis}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -3905,7 +3905,7 @@
     "path": ["button", "invisible", "bgColor", "active"]
   },
   "button-invisible-bgColor-disabled": {
-    "value": "#272b33",
+    "value": "#00000000",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -3918,7 +3918,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{control.bgColor.disabled}",
+      "value": "{control.transparent.bgColor.disabled}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -6569,7 +6569,7 @@
     "path": ["bgColor", "transparent"]
   },
   "bgColor-neutral-muted": {
-    "value": "#9ea7b326",
+    "value": "#9ea7b366",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -6579,7 +6579,7 @@
         "scopes": ["bgColor"]
       }
     },
-    "alpha": 0.15,
+    "alpha": 0.4,
     "filePath": "src/tokens/functional/color/dark/primitives-dark.json5",
     "isSource": true,
     "original": {
@@ -6593,7 +6593,7 @@
           "scopes": ["bgColor"]
         }
       },
-      "alpha": 0.15
+      "alpha": 0.4
     },
     "name": "bgColor-neutral-muted",
     "attributes": {},

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

@@ -685,7 +685,7 @@
     "path": ["codeMirror", "selection", "bgColor"]
   },
   "codeMirror-activeline-bgColor": {
-    "value": "#6e768126",
+    "value": "#6e768166",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -2649,7 +2649,7 @@
     "path": ["controlTrack", "fgColor", "rest"]
   },
   "controlTrack-fgColor-disabled": {
-    "value": "#7d8590",
+    "value": "#ffffff",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -2662,7 +2662,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{fgColor.muted}",
+      "value": "{fgColor.onEmphasis}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -3883,7 +3883,7 @@
     "path": ["button", "invisible", "bgColor", "active"]
   },
   "button-invisible-bgColor-disabled": {
-    "value": "#161b22",
+    "value": "#00000000",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -3896,7 +3896,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{control.bgColor.disabled}",
+      "value": "{control.transparent.bgColor.disabled}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -6551,7 +6551,7 @@
     "path": ["bgColor", "transparent"]
   },
   "bgColor-neutral-muted": {
-    "value": "#6e768126",
+    "value": "#6e768166",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -6561,7 +6561,7 @@
         "scopes": ["bgColor"]
       }
     },
-    "alpha": 0.15,
+    "alpha": 0.4,
     "filePath": "src/tokens/functional/color/dark/primitives-dark.json5",
     "isSource": true,
     "original": {
@@ -6575,7 +6575,7 @@
           "scopes": ["bgColor"]
         }
       },
-      "alpha": 0.15
+      "alpha": 0.4
     },
     "name": "bgColor-neutral-muted",
     "attributes": {},

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

@@ -685,7 +685,7 @@
     "path": ["codeMirror", "selection", "bgColor"]
   },
   "codeMirror-activeline-bgColor": {
-    "value": "#6e768126",
+    "value": "#6e768166",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -2649,7 +2649,7 @@
     "path": ["controlTrack", "fgColor", "rest"]
   },
   "controlTrack-fgColor-disabled": {
-    "value": "#7d8590",
+    "value": "#ffffff",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -2662,7 +2662,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{fgColor.muted}",
+      "value": "{fgColor.onEmphasis}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -3883,7 +3883,7 @@
     "path": ["button", "invisible", "bgColor", "active"]
   },
   "button-invisible-bgColor-disabled": {
-    "value": "#161b22",
+    "value": "#00000000",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -3896,7 +3896,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{control.bgColor.disabled}",
+      "value": "{control.transparent.bgColor.disabled}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -6551,7 +6551,7 @@
     "path": ["bgColor", "transparent"]
   },
   "bgColor-neutral-muted": {
-    "value": "#6e768126",
+    "value": "#6e768166",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -6561,7 +6561,7 @@
         "scopes": ["bgColor"]
       }
     },
-    "alpha": 0.15,
+    "alpha": 0.4,
     "filePath": "src/tokens/functional/color/dark/primitives-dark.json5",
     "isSource": true,
     "original": {
@@ -6575,7 +6575,7 @@
           "scopes": ["bgColor"]
         }
       },
-      "alpha": 0.15
+      "alpha": 0.4
     },
     "name": "bgColor-neutral-muted",
     "attributes": {},

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

@@ -683,7 +683,7 @@
     "path": ["codeMirror", "selection", "bgColor"]
   },
   "codeMirror-activeline-bgColor": {
-    "value": "#eaeef280",
+    "value": "#afb8c133",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -1895,7 +1895,7 @@
     "path": ["control", "transparent", "bgColor", "active"]
   },
   "control-transparent-bgColor-disabled": {
-    "value": "#f6f8fa",
+    "value": "#ffffff00",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -1908,7 +1908,7 @@
     "filePath": "src/tokens/functional/color/light/patterns-light.json5",
     "isSource": true,
     "original": {
-      "value": "{control.bgColor.disabled}",
+      "value": "{base.color.transparent}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -1924,7 +1924,7 @@
     "path": ["control", "transparent", "bgColor", "disabled"]
   },
   "control-transparent-bgColor-selected": {
-    "value": "#f6f8fa",
+    "value": "#d0d7de33",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -1934,10 +1934,11 @@
         "scopes": ["bgColor"]
       }
     },
+    "alpha": 0.2,
     "filePath": "src/tokens/functional/color/light/patterns-light.json5",
     "isSource": true,
     "original": {
-      "value": "{base.color.gray.0}",
+      "value": "{base.color.gray.2}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -1946,7 +1947,8 @@
           "group": "component",
           "scopes": ["bgColor"]
         }
-      }
+      },
+      "alpha": 0.2
     },
     "name": "control-transparent-bgColor-selected",
     "attributes": {},
@@ -3861,7 +3863,7 @@
     "path": ["button", "invisible", "bgColor", "active"]
   },
   "button-invisible-bgColor-disabled": {
-    "value": "#f6f8fa",
+    "value": "#ffffff00",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -3874,7 +3876,7 @@
     "filePath": "src/tokens/functional/color/light/patterns-light.json5",
     "isSource": true,
     "original": {
-      "value": "{control.bgColor.disabled}",
+      "value": "{control.transparent.bgColor.disabled}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -4714,7 +4716,7 @@
     "path": ["button", "danger", "shadow", "selected"]
   },
   "buttonCounter-default-bgColor-rest": {
-    "value": "#eaeef2",
+    "value": "#afb8c133",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -4724,7 +4726,6 @@
         "scopes": ["bgColor"]
       }
     },
-    "alpha": 1,
     "filePath": "src/tokens/functional/color/light/patterns-light.json5",
     "isSource": true,
     "original": {
@@ -4737,15 +4738,14 @@
           "group": "component",
           "scopes": ["bgColor"]
         }
-      },
-      "alpha": 1
+      }
     },
     "name": "buttonCounter-default-bgColor-rest",
     "attributes": {},
     "path": ["buttonCounter", "default", "bgColor", "rest"]
   },
   "buttonCounter-invisible-bgColor-rest": {
-    "value": "#eaeef2",
+    "value": "#afb8c133",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -4755,7 +4755,6 @@
         "scopes": ["bgColor"]
       }
     },
-    "alpha": 1,
     "filePath": "src/tokens/functional/color/light/patterns-light.json5",
     "isSource": true,
     "original": {
@@ -4768,8 +4767,7 @@
           "group": "component",
           "scopes": ["bgColor"]
         }
-      },
-      "alpha": 1
+      }
     },
     "name": "buttonCounter-invisible-bgColor-rest",
     "attributes": {},
@@ -6554,7 +6552,7 @@
     "path": ["bgColor", "transparent"]
   },
   "bgColor-neutral-muted": {
-    "value": "#eaeef280",
+    "value": "#afb8c133",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -6564,11 +6562,11 @@
         "scopes": ["bgColor"]
       }
     },
-    "alpha": 0.5,
+    "alpha": 0.2,
     "filePath": "src/tokens/functional/color/light/primitives-light.json5",
     "isSource": true,
     "original": {
-      "value": "{base.color.gray.1}",
+      "value": "{base.color.gray.3}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -6578,7 +6576,7 @@
           "scopes": ["bgColor"]
         }
       },
-      "alpha": 0.5
+      "alpha": 0.2
     },
     "name": "bgColor-neutral-muted",
     "attributes": {},