@primer/primitives 7.13.0 → 7.13.1-rc.4461d84

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

@@ -110,7 +110,6 @@
   --button-default-borderColor-active: #d0d7de;
   --button-default-borderColor-disabled: #f6f8fa;
   --button-default-shadow-resting: 0px 1px 0px 0px #1f23280a;
-  --button-default-shadow-inset: inset 0px 1px 0px 0px #ffffff40;
   --button-primary-fgColor-rest: #ffffff;
   --button-primary-fgColor-disabled: #ffffffcc;
   --button-primary-iconColor-rest: #ffffffcc;
@@ -120,6 +119,7 @@
   --button-primary-bgColor-disabled: #95d8a6;
   --button-primary-borderColor-rest: #1f232826;
   --button-primary-borderColor-hover: #1f232826;
+  --button-primary-borderColor-active: #1f232826;
   --button-primary-borderColor-disabled: #95d8a6;
   --button-primary-shadow-selected: inset 0px 1px 0px 0px #002d114d;
   --button-invisible-fgColor-rest: #0969da;
@@ -140,8 +140,8 @@
   --button-outline-bgColor-hover: #0969da;
   --button-outline-bgColor-active: #0757ba;
   --button-outline-bgColor-disabled: #f6f8fa;
-  --button-outline-borderColor-hover: #d0d7de;
-  --button-outline-borderColor-active: #d0d7de;
+  --button-outline-borderColor-hover: #1f232826;
+  --button-outline-borderColor-active: #1f232826;
   --button-outline-shadow-selected: inset 0px 1px 0px 0px #00215533;
   --button-danger-fgColor-rest: #d1242f;
   --button-danger-fgColor-hover: #ffffff;
@@ -154,8 +154,8 @@
   --button-danger-bgColor-active: #8b0820;
   --button-danger-bgColor-disabled: #f6f8fa;
   --button-danger-borderColor-rest: #d0d7de;
-  --button-danger-borderColor-hover: #d0d7de;
-  --button-danger-borderColor-active: #d0d7de;
+  --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;
@@ -526,7 +526,6 @@
     --button-default-borderColor-active: #d0d7de;
     --button-default-borderColor-disabled: #f6f8fa;
     --button-default-shadow-resting: 0px 1px 0px 0px #1f23280a;
-    --button-default-shadow-inset: inset 0px 1px 0px 0px #ffffff40;
     --button-primary-fgColor-rest: #ffffff;
     --button-primary-fgColor-disabled: #ffffffcc;
     --button-primary-iconColor-rest: #ffffffcc;
@@ -536,6 +535,7 @@
     --button-primary-bgColor-disabled: #95d8a6;
     --button-primary-borderColor-rest: #1f232826;
     --button-primary-borderColor-hover: #1f232826;
+    --button-primary-borderColor-active: #1f232826;
     --button-primary-borderColor-disabled: #95d8a6;
     --button-primary-shadow-selected: inset 0px 1px 0px 0px #002d114d;
     --button-invisible-fgColor-rest: #0969da;
@@ -556,8 +556,8 @@
     --button-outline-bgColor-hover: #0969da;
     --button-outline-bgColor-active: #0757ba;
     --button-outline-bgColor-disabled: #f6f8fa;
-    --button-outline-borderColor-hover: #d0d7de;
-    --button-outline-borderColor-active: #d0d7de;
+    --button-outline-borderColor-hover: #1f232826;
+    --button-outline-borderColor-active: #1f232826;
     --button-outline-shadow-selected: inset 0px 1px 0px 0px #00215533;
     --button-danger-fgColor-rest: #d1242f;
     --button-danger-fgColor-hover: #ffffff;
@@ -570,8 +570,8 @@
     --button-danger-bgColor-active: #8b0820;
     --button-danger-bgColor-disabled: #f6f8fa;
     --button-danger-borderColor-rest: #d0d7de;
-    --button-danger-borderColor-hover: #d0d7de;
-    --button-danger-borderColor-active: #d0d7de;
+    --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;

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

@@ -3184,7 +3184,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{borderColor.default}",
+      "value": "{button.default.borderColor.rest}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -3213,7 +3213,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{borderColor.default}",
+      "value": "{button.default.borderColor.rest}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -3280,27 +3280,6 @@
     "attributes": {},
     "path": ["button", "default", "shadow", "resting"]
   },
-  "button-default-shadow-inset": {
-    "value": "0px 0px 0px 0px #000000",
-    "$type": "shadow",
-    "filePath": "src/tokens/functional/shadow/dark.json5",
-    "isSource": true,
-    "original": {
-      "value": {
-        "color": "{base.color.transparent}",
-        "alpha": 0,
-        "offsetX": "0px",
-        "offsetY": "0px",
-        "blur": "0px",
-        "spread": "0px",
-        "inset": false
-      },
-      "$type": "shadow"
-    },
-    "name": "button-default-shadow-inset",
-    "attributes": {},
-    "path": ["button", "default", "shadow", "inset"]
-  },
   "button-primary-fgColor-rest": {
     "value": "#ffffff",
     "$type": "color",
@@ -3584,6 +3563,35 @@
     "attributes": {},
     "path": ["button", "primary", "borderColor", "hover"]
   },
+  "button-primary-borderColor-active": {
+    "value": "#f0f6fc1a",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component",
+        "scopes": ["borderColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{button.primary.borderColor.rest}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "component",
+          "scopes": ["borderColor"]
+        }
+      }
+    },
+    "name": "button-primary-borderColor-active",
+    "attributes": {},
+    "path": ["button", "primary", "borderColor", "active"]
+  },
   "button-primary-borderColor-disabled": {
     "value": "#1158c7",
     "$type": "color",
@@ -4161,7 +4169,7 @@
     "path": ["button", "outline", "bgColor", "disabled"]
   },
   "button-outline-borderColor-hover": {
-    "value": "#30363d66",
+    "value": "#f0f6fc1a",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -4171,10 +4179,11 @@
         "scopes": ["borderColor"]
       }
     },
+    "alpha": 0.1,
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{borderColor.muted}",
+      "value": "{base.color.gray.0}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -4183,14 +4192,15 @@
           "group": "component",
           "scopes": ["borderColor"]
         }
-      }
+      },
+      "alpha": 0.1
     },
     "name": "button-outline-borderColor-hover",
     "attributes": {},
     "path": ["button", "outline", "borderColor", "hover"]
   },
   "button-outline-borderColor-selected": {
-    "value": "#30363d66",
+    "value": "#f0f6fc1a",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -4203,7 +4213,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{borderColor.muted}",
+      "value": "{button.outline.borderColor.hover}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -4571,7 +4581,7 @@
     "path": ["button", "danger", "borderColor", "rest"]
   },
   "button-danger-borderColor-hover": {
-    "value": "#9b4215",
+    "value": "#f0f6fc1a",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -4581,10 +4591,11 @@
         "scopes": ["borderColor"]
       }
     },
-    "filePath": "src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5",
+    "alpha": 0.1,
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{base.color.orange.6}",
+      "value": "{base.color.gray.0}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -4593,14 +4604,15 @@
           "group": "component",
           "scopes": ["borderColor"]
         }
-      }
+      },
+      "alpha": 0.1
     },
     "name": "button-danger-borderColor-hover",
     "attributes": {},
     "path": ["button", "danger", "borderColor", "hover"]
   },
   "button-danger-borderColor-active": {
-    "value": "#b5531d",
+    "value": "#f0f6fc1a",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -4613,7 +4625,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{button.danger.bgColor.active}",
+      "value": "{button.danger.borderColor.hover}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {

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

@@ -3184,7 +3184,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{borderColor.default}",
+      "value": "{button.default.borderColor.rest}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -3213,7 +3213,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{borderColor.default}",
+      "value": "{button.default.borderColor.rest}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -3280,27 +3280,6 @@
     "attributes": {},
     "path": ["button", "default", "shadow", "resting"]
   },
-  "button-default-shadow-inset": {
-    "value": "0px 0px 0px 0px #000000",
-    "$type": "shadow",
-    "filePath": "src/tokens/functional/shadow/dark.json5",
-    "isSource": true,
-    "original": {
-      "value": {
-        "color": "{base.color.transparent}",
-        "alpha": 0,
-        "offsetX": "0px",
-        "offsetY": "0px",
-        "blur": "0px",
-        "spread": "0px",
-        "inset": false
-      },
-      "$type": "shadow"
-    },
-    "name": "button-default-shadow-inset",
-    "attributes": {},
-    "path": ["button", "default", "shadow", "inset"]
-  },
   "button-primary-fgColor-rest": {
     "value": "#cdd9e5",
     "$type": "color",
@@ -3590,6 +3569,35 @@
     "attributes": {},
     "path": ["button", "primary", "borderColor", "hover"]
   },
+  "button-primary-borderColor-active": {
+    "value": "#cdd9e51a",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component",
+        "scopes": ["borderColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{button.primary.borderColor.rest}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "component",
+          "scopes": ["borderColor"]
+        }
+      }
+    },
+    "name": "button-primary-borderColor-active",
+    "attributes": {},
+    "path": ["button", "primary", "borderColor", "active"]
+  },
   "button-primary-borderColor-disabled": {
     "value": "#50a254",
     "$type": "color",
@@ -4167,7 +4175,7 @@
     "path": ["button", "outline", "bgColor", "disabled"]
   },
   "button-outline-borderColor-hover": {
-    "value": "#444c5666",
+    "value": "#cdd9e51a",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -4177,10 +4185,11 @@
         "scopes": ["borderColor"]
       }
     },
+    "alpha": 0.1,
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{borderColor.muted}",
+      "value": "{base.color.gray.0}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -4189,14 +4198,15 @@
           "group": "component",
           "scopes": ["borderColor"]
         }
-      }
+      },
+      "alpha": 0.1
     },
     "name": "button-outline-borderColor-hover",
     "attributes": {},
     "path": ["button", "outline", "borderColor", "hover"]
   },
   "button-outline-borderColor-selected": {
-    "value": "#444c5666",
+    "value": "#cdd9e51a",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -4209,7 +4219,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{borderColor.muted}",
+      "value": "{button.outline.borderColor.hover}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -4577,7 +4587,7 @@
     "path": ["button", "danger", "borderColor", "rest"]
   },
   "button-danger-borderColor-hover": {
-    "value": "#ad2e2c",
+    "value": "#cdd9e51a",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -4587,10 +4597,11 @@
         "scopes": ["borderColor"]
       }
     },
+    "alpha": 0.1,
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{base.color.red.6}",
+      "value": "{base.color.gray.0}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -4599,14 +4610,15 @@
           "group": "component",
           "scopes": ["borderColor"]
         }
-      }
+      },
+      "alpha": 0.1
     },
     "name": "button-danger-borderColor-hover",
     "attributes": {},
     "path": ["button", "danger", "borderColor", "hover"]
   },
   "button-danger-borderColor-active": {
-    "value": "#c33d38",
+    "value": "#cdd9e51a",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -4619,7 +4631,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{button.danger.bgColor.active}",
+      "value": "{button.danger.borderColor.hover}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {

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

@@ -3192,7 +3192,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{borderColor.default}",
+      "value": "{button.default.borderColor.rest}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -3221,7 +3221,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{borderColor.default}",
+      "value": "{button.default.borderColor.rest}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -3288,27 +3288,6 @@
     "attributes": {},
     "path": ["button", "default", "shadow", "resting"]
   },
-  "button-default-shadow-inset": {
-    "value": "0px 0px 0px 0px #000000",
-    "$type": "shadow",
-    "filePath": "src/tokens/functional/shadow/dark.json5",
-    "isSource": true,
-    "original": {
-      "value": {
-        "color": "{base.color.transparent}",
-        "alpha": 0,
-        "offsetX": "0px",
-        "offsetY": "0px",
-        "blur": "0px",
-        "spread": "0px",
-        "inset": false
-      },
-      "$type": "shadow"
-    },
-    "name": "button-default-shadow-inset",
-    "attributes": {},
-    "path": ["button", "default", "shadow", "inset"]
-  },
   "button-primary-fgColor-rest": {
     "value": "#0a0c10",
     "$type": "color",
@@ -3600,6 +3579,37 @@
     "attributes": {},
     "path": ["button", "primary", "borderColor", "hover"]
   },
+  "button-primary-borderColor-active": {
+    "value": "#4ae168",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component",
+        "scopes": ["borderColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/dark/overrides/dark.high-contrast.json5",
+    "isSource": true,
+    "alpha": 1,
+    "original": {
+      "value": "{base.color.green.2}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "component",
+          "scopes": ["borderColor"]
+        }
+      },
+      "alpha": 1
+    },
+    "name": "button-primary-borderColor-active",
+    "attributes": {},
+    "path": ["button", "primary", "borderColor", "active"]
+  },
   "button-primary-borderColor-disabled": {
     "value": "#4ae16866",
     "$type": "color",
@@ -4187,7 +4197,7 @@
     "path": ["button", "outline", "bgColor", "disabled"]
   },
   "button-outline-borderColor-hover": {
-    "value": "#7a828e",
+    "value": "#ffffff1a",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -4197,10 +4207,11 @@
         "scopes": ["borderColor"]
       }
     },
+    "alpha": 0.1,
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{borderColor.muted}",
+      "value": "{base.color.gray.0}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -4209,14 +4220,15 @@
           "group": "component",
           "scopes": ["borderColor"]
         }
-      }
+      },
+      "alpha": 0.1
     },
     "name": "button-outline-borderColor-hover",
     "attributes": {},
     "path": ["button", "outline", "borderColor", "hover"]
   },
   "button-outline-borderColor-selected": {
-    "value": "#7a828e",
+    "value": "#ffffff1a",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -4229,7 +4241,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{borderColor.muted}",
+      "value": "{button.outline.borderColor.hover}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -4597,7 +4609,7 @@
     "path": ["button", "danger", "borderColor", "rest"]
   },
   "button-danger-borderColor-hover": {
-    "value": "#ff4445",
+    "value": "#ffffff1a",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -4607,10 +4619,11 @@
         "scopes": ["borderColor"]
       }
     },
+    "alpha": 0.1,
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{base.color.red.6}",
+      "value": "{base.color.gray.0}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -4619,14 +4632,15 @@
           "group": "component",
           "scopes": ["borderColor"]
         }
-      }
+      },
+      "alpha": 0.1
     },
     "name": "button-danger-borderColor-hover",
     "attributes": {},
     "path": ["button", "danger", "borderColor", "hover"]
   },
   "button-danger-borderColor-active": {
-    "value": "#ff5353",
+    "value": "#ffffff1a",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -4639,7 +4653,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{button.danger.bgColor.active}",
+      "value": "{button.danger.borderColor.hover}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {