@primer/primitives 10.1.0-rc.f1589f93 → 10.1.0

package/dist/css/functional/themes/light.css

@@ -259,10 +259,10 @@
   --button-invisible-bgColor-rest: #ffffff00;
   --button-invisible-bgColor-hover: #818b981a;
   --button-invisible-bgColor-active: #818b9826;
-  --button-invisible-bgColor-disabled: #eff2f5;
+  --button-invisible-bgColor-disabled: #ffffff00;
   --button-invisible-borderColor-rest: #ffffff00;
   --button-invisible-borderColor-hover: #ffffff00;
-  --button-invisible-borderColor-disabled: #818b981a;
+  --button-invisible-borderColor-disabled: #ffffff00;
   --button-outline-fgColor-rest: #0969da;
   --button-outline-fgColor-hover: #ffffff;
   --button-outline-fgColor-active: #ffffff;
@@ -311,7 +311,7 @@
   --reactionButton-selected-fgColor-rest: #0969da;
   --reactionButton-selected-fgColor-hover: #0550ae;
   --focus-outlineColor: #0969da;
-  --focus-outline: #0969da solid 2px;
+  --focus-outline: 2px solid #0969da;
   --menu-bgColor-active: #ffffff00;
   --overlay-bgColor: #ffffff;
   --overlay-borderColor: #d1d9e080;
@@ -577,6 +577,33 @@
   --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d;
   --shadow-floating-xlarge: 0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52;
   --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
+  --border-default: 0.0625rem solid #d1d9e0;
+  --border-muted: 0.0625rem solid #d1d9e0b3;
+  --border-emphasis: 0.0625rem solid #818b98;
+  --border-disabled: 0.0625rem solid #818b981a;
+  --border-transparent: 0.0625rem solid #ffffff00;
+  --border-neutral-emphasis: 0.0625rem solid #59636e;
+  --border-neutral-muted: 0.0625rem solid #d1d9e0b3;
+  --border-accent-emphasis: 0.0625rem solid #0969da;
+  --border-accent-muted: 0.0625rem solid #54aeff66;
+  --border-success-emphasis: 0.0625rem solid #1a7f37;
+  --border-success-muted: 0.0625rem solid #4ac26b66;
+  --border-open-emphasis: 0.0625rem solid #1a7f37;
+  --border-open-muted: 0.0625rem solid #4ac26b66;
+  --border-danger-emphasis: 0.0625rem solid #cf222e;
+  --border-danger-muted: 0.0625rem solid #ff818266;
+  --border-closed-emphasis: 0.0625rem solid #cf222e;
+  --border-closed-muted: 0.0625rem solid #ff818266;
+  --border-attention-emphasis: 0.0625rem solid #9a6700;
+  --border-attention-muted: 0.0625rem solid #d4a72c66;
+  --border-severe-emphasis: 0.0625rem solid #bc4c00;
+  --border-severe-muted: 0.0625rem solid #fb8f4466;
+  --border-done-emphasis: 0.0625rem solid #8250df;
+  --border-done-muted: 0.0625rem solid #c297ff66;
+  --border-upsell-emphasis: 0.0625rem solid #8250df;
+  --border-upsell-muted: 0.0625rem solid #c297ff66;
+  --border-sponsors-emphasis: 0.0625rem solid #bf3989;
+  --border-sponsors-muted: 0.0625rem solid #ff80c866;
 }
 @media (prefers-color-scheme: dark) {
   [data-color-mode="auto"][data-dark-theme="light"],
@@ -838,10 +865,10 @@
     --button-invisible-bgColor-rest: #ffffff00;
     --button-invisible-bgColor-hover: #818b981a;
     --button-invisible-bgColor-active: #818b9826;
-    --button-invisible-bgColor-disabled: #eff2f5;
+    --button-invisible-bgColor-disabled: #ffffff00;
     --button-invisible-borderColor-rest: #ffffff00;
     --button-invisible-borderColor-hover: #ffffff00;
-    --button-invisible-borderColor-disabled: #818b981a;
+    --button-invisible-borderColor-disabled: #ffffff00;
     --button-outline-fgColor-rest: #0969da;
     --button-outline-fgColor-hover: #ffffff;
     --button-outline-fgColor-active: #ffffff;
@@ -890,7 +917,7 @@
     --reactionButton-selected-fgColor-rest: #0969da;
     --reactionButton-selected-fgColor-hover: #0550ae;
     --focus-outlineColor: #0969da;
-    --focus-outline: #0969da solid 2px;
+    --focus-outline: 2px solid #0969da;
     --menu-bgColor-active: #ffffff00;
     --overlay-bgColor: #ffffff;
     --overlay-borderColor: #d1d9e080;
@@ -1156,5 +1183,32 @@
     --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d;
     --shadow-floating-xlarge: 0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52;
     --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
+    --border-default: 0.0625rem solid #d1d9e0;
+    --border-muted: 0.0625rem solid #d1d9e0b3;
+    --border-emphasis: 0.0625rem solid #818b98;
+    --border-disabled: 0.0625rem solid #818b981a;
+    --border-transparent: 0.0625rem solid #ffffff00;
+    --border-neutral-emphasis: 0.0625rem solid #59636e;
+    --border-neutral-muted: 0.0625rem solid #d1d9e0b3;
+    --border-accent-emphasis: 0.0625rem solid #0969da;
+    --border-accent-muted: 0.0625rem solid #54aeff66;
+    --border-success-emphasis: 0.0625rem solid #1a7f37;
+    --border-success-muted: 0.0625rem solid #4ac26b66;
+    --border-open-emphasis: 0.0625rem solid #1a7f37;
+    --border-open-muted: 0.0625rem solid #4ac26b66;
+    --border-danger-emphasis: 0.0625rem solid #cf222e;
+    --border-danger-muted: 0.0625rem solid #ff818266;
+    --border-closed-emphasis: 0.0625rem solid #cf222e;
+    --border-closed-muted: 0.0625rem solid #ff818266;
+    --border-attention-emphasis: 0.0625rem solid #9a6700;
+    --border-attention-muted: 0.0625rem solid #d4a72c66;
+    --border-severe-emphasis: 0.0625rem solid #bc4c00;
+    --border-severe-muted: 0.0625rem solid #fb8f4466;
+    --border-done-emphasis: 0.0625rem solid #8250df;
+    --border-done-muted: 0.0625rem solid #c297ff66;
+    --border-upsell-emphasis: 0.0625rem solid #8250df;
+    --border-upsell-muted: 0.0625rem solid #c297ff66;
+    --border-sponsors-emphasis: 0.0625rem solid #bf3989;
+    --border-sponsors-muted: 0.0625rem solid #ff80c866;
   }
 }

package/dist/css/primitives.css

@@ -49,12 +49,13 @@
   --motion-skeletonLoader-shimmer-duration-scale: var(--base-duration-1000); /* The amount of times it takes the "shimmer" effect to go from the start (left) of the skeleton loader to the end (right) */
 }
 :root {
-  --boxShadow-thin: inset 0 0 0 max(1px, 0.0625rem); /* Thin shadow for borders */
-  --boxShadow-thick: inset 0 0 0 max(2px, 0.125rem);
-  --boxShadow-thicker: inset 0 0 0 max(4px, 0.25rem);
-  --borderWidth-thin: max(1px, 0.0625rem);
-  --borderWidth-thick: max(2px, 0.125rem);
-  --borderWidth-thicker: max(4px, 0.25rem);
+  --boxShadow-thin: inset 0 0 0 0.0625rem; /* Thin shadow for borders */
+  --boxShadow-thick: inset 0 0 0 0.125rem;
+  --boxShadow-thicker: inset 0 0 0 0.25rem;
+  --borderWidth-default: 0.0625rem;
+  --borderWidth-thin: 0.0625rem;
+  --borderWidth-thick: 0.125rem;
+  --borderWidth-thicker: 0.25rem;
   --borderRadius-small: 0.1875rem;
   --borderRadius-medium: 0.375rem;
   --borderRadius-large: 0.75rem;

package/dist/docs/base/size/size.json

@@ -6,7 +6,7 @@
         "scopes": ["size"]
       }
     },
-    "filePath": "src/tokens/base/size/size.json",
+    "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
       "$value": "2px",
@@ -31,7 +31,7 @@
         "scopes": ["size"]
       }
     },
-    "filePath": "src/tokens/base/size/size.json",
+    "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
       "$value": "4px",
@@ -56,7 +56,7 @@
         "scopes": ["size"]
       }
     },
-    "filePath": "src/tokens/base/size/size.json",
+    "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
       "$value": "6px",
@@ -81,7 +81,7 @@
         "scopes": ["size"]
       }
     },
-    "filePath": "src/tokens/base/size/size.json",
+    "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
       "$value": "8px",
@@ -106,7 +106,7 @@
         "scopes": ["size"]
       }
     },
-    "filePath": "src/tokens/base/size/size.json",
+    "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
       "$value": "12px",
@@ -131,7 +131,7 @@
         "scopes": ["size"]
       }
     },
-    "filePath": "src/tokens/base/size/size.json",
+    "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
       "$value": "16px",
@@ -156,7 +156,7 @@
         "scopes": ["size"]
       }
     },
-    "filePath": "src/tokens/base/size/size.json",
+    "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
       "$value": "20px",
@@ -181,7 +181,7 @@
         "scopes": ["size"]
       }
     },
-    "filePath": "src/tokens/base/size/size.json",
+    "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
       "$value": "24px",
@@ -206,7 +206,7 @@
         "scopes": ["size"]
       }
     },
-    "filePath": "src/tokens/base/size/size.json",
+    "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
       "$value": "28px",
@@ -231,7 +231,7 @@
         "scopes": ["size"]
       }
     },
-    "filePath": "src/tokens/base/size/size.json",
+    "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
       "$value": "32px",
@@ -256,7 +256,7 @@
         "scopes": ["size"]
       }
     },
-    "filePath": "src/tokens/base/size/size.json",
+    "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
       "$value": "36px",
@@ -281,7 +281,7 @@
         "scopes": ["size"]
       }
     },
-    "filePath": "src/tokens/base/size/size.json",
+    "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
       "$value": "40px",
@@ -306,7 +306,7 @@
         "scopes": ["size"]
       }
     },
-    "filePath": "src/tokens/base/size/size.json",
+    "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
       "$value": "44px",
@@ -331,7 +331,7 @@
         "scopes": ["size"]
       }
     },
-    "filePath": "src/tokens/base/size/size.json",
+    "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
       "$value": "48px",
@@ -356,7 +356,7 @@
         "scopes": ["size"]
       }
     },
-    "filePath": "src/tokens/base/size/size.json",
+    "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
       "$value": "64px",
@@ -381,7 +381,7 @@
         "scopes": ["size"]
       }
     },
-    "filePath": "src/tokens/base/size/size.json",
+    "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
       "$value": "80px",
@@ -406,7 +406,7 @@
         "scopes": ["size"]
       }
     },
-    "filePath": "src/tokens/base/size/size.json",
+    "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
       "$value": "96px",
@@ -431,7 +431,7 @@
         "scopes": ["size"]
       }
     },
-    "filePath": "src/tokens/base/size/size.json",
+    "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
       "$value": "112px",
@@ -456,7 +456,7 @@
         "scopes": ["size"]
       }
     },
-    "filePath": "src/tokens/base/size/size.json",
+    "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
       "$value": "128px",

package/dist/docs/base/typography/typography.json

@@ -6,7 +6,7 @@
         "scopes": ["fontWeight"]
       }
     },
-    "filePath": "src/tokens/base/typography/typography.json",
+    "filePath": "src/tokens/base/typography/typography.json5",
     "isSource": true,
     "original": {
       "$type": "fontWeight",
@@ -31,7 +31,7 @@
         "scopes": ["fontWeight"]
       }
     },
-    "filePath": "src/tokens/base/typography/typography.json",
+    "filePath": "src/tokens/base/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": 400,
@@ -56,7 +56,7 @@
         "scopes": ["fontWeight"]
       }
     },
-    "filePath": "src/tokens/base/typography/typography.json",
+    "filePath": "src/tokens/base/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": 500,
@@ -81,7 +81,7 @@
         "scopes": ["fontWeight"]
       }
     },
-    "filePath": "src/tokens/base/typography/typography.json",
+    "filePath": "src/tokens/base/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": 600,

package/dist/docs/functional/size/border.json

@@ -1,6 +1,6 @@
 {
   "boxShadow-thin": {
-    "filePath": "src/tokens/functional/size/border.json",
+    "filePath": "src/tokens/functional/size/border.json5",
     "isSource": true,
     "original": {
       "$value": "inset 0 0 0 {borderWidth.thin}",
@@ -10,12 +10,12 @@
     "name": "boxShadow-thin",
     "attributes": {},
     "path": ["boxShadow", "thin"],
-    "value": "inset 0 0 0 max(1px, 0.0625rem)",
+    "value": "inset 0 0 0 0.0625rem",
     "type": "string",
     "description": "Thin shadow for borders"
   },
   "boxShadow-thick": {
-    "filePath": "src/tokens/functional/size/border.json",
+    "filePath": "src/tokens/functional/size/border.json5",
     "isSource": true,
     "original": {
       "$value": "inset 0 0 0 {borderWidth.thick}",
@@ -24,11 +24,11 @@
     "name": "boxShadow-thick",
     "attributes": {},
     "path": ["boxShadow", "thick"],
-    "value": "inset 0 0 0 max(2px, 0.125rem)",
+    "value": "inset 0 0 0 0.125rem",
     "type": "string"
   },
   "boxShadow-thicker": {
-    "filePath": "src/tokens/functional/size/border.json",
+    "filePath": "src/tokens/functional/size/border.json5",
     "isSource": true,
     "original": {
       "$value": "inset 0 0 0 {borderWidth.thicker}",
@@ -37,47 +37,60 @@
     "name": "boxShadow-thicker",
     "attributes": {},
     "path": ["boxShadow", "thicker"],
-    "value": "inset 0 0 0 max(4px, 0.25rem)",
+    "value": "inset 0 0 0 0.25rem",
     "type": "string"
   },
+  "borderWidth-default": {
+    "filePath": "src/tokens/functional/size/border.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{borderWidth.thin}",
+      "$type": "dimension"
+    },
+    "name": "borderWidth-default",
+    "attributes": {},
+    "path": ["borderWidth", "default"],
+    "value": "0.0625rem",
+    "type": "dimension"
+  },
   "borderWidth-thin": {
-    "filePath": "src/tokens/functional/size/border.json",
+    "filePath": "src/tokens/functional/size/border.json5",
     "isSource": true,
     "original": {
-      "$value": "max(1px, 0.0625rem)",
-      "$type": "string"
+      "$value": "1px",
+      "$type": "dimension"
     },
     "name": "borderWidth-thin",
     "attributes": {},
     "path": ["borderWidth", "thin"],
-    "value": "max(1px, 0.0625rem)",
-    "type": "string"
+    "value": "0.0625rem",
+    "type": "dimension"
   },
   "borderWidth-thick": {
-    "filePath": "src/tokens/functional/size/border.json",
+    "filePath": "src/tokens/functional/size/border.json5",
     "isSource": true,
     "original": {
-      "$value": "max(2px, 0.125rem)",
-      "$type": "string"
+      "$value": "2px",
+      "$type": "dimension"
     },
     "name": "borderWidth-thick",
     "attributes": {},
     "path": ["borderWidth", "thick"],
-    "value": "max(2px, 0.125rem)",
-    "type": "string"
+    "value": "0.125rem",
+    "type": "dimension"
   },
   "borderWidth-thicker": {
-    "filePath": "src/tokens/functional/size/border.json",
+    "filePath": "src/tokens/functional/size/border.json5",
     "isSource": true,
     "original": {
-      "$value": "max(4px, 0.25rem)",
-      "$type": "string"
+      "$value": "4px",
+      "$type": "dimension"
     },
     "name": "borderWidth-thicker",
     "attributes": {},
     "path": ["borderWidth", "thicker"],
-    "value": "max(4px, 0.25rem)",
-    "type": "string"
+    "value": "0.25rem",
+    "type": "dimension"
   },
   "borderRadius-small": {
     "$extensions": {
@@ -89,7 +102,7 @@
         }
       }
     },
-    "filePath": "src/tokens/functional/size/border.json",
+    "filePath": "src/tokens/functional/size/border.json5",
     "isSource": true,
     "original": {
       "$value": "3px",
@@ -120,7 +133,7 @@
         }
       }
     },
-    "filePath": "src/tokens/functional/size/border.json",
+    "filePath": "src/tokens/functional/size/border.json5",
     "isSource": true,
     "original": {
       "$value": "6px",
@@ -151,7 +164,7 @@
         }
       }
     },
-    "filePath": "src/tokens/functional/size/border.json",
+    "filePath": "src/tokens/functional/size/border.json5",
     "isSource": true,
     "original": {
       "$value": "12px",
@@ -182,7 +195,7 @@
         }
       }
     },
-    "filePath": "src/tokens/functional/size/border.json",
+    "filePath": "src/tokens/functional/size/border.json5",
     "isSource": true,
     "original": {
       "$value": "9999px",
@@ -215,7 +228,7 @@
         }
       }
     },
-    "filePath": "src/tokens/functional/size/border.json",
+    "filePath": "src/tokens/functional/size/border.json5",
     "isSource": true,
     "original": {
       "$value": "{borderRadius.medium}",
@@ -237,7 +250,7 @@
     "type": "dimension"
   },
   "outline-focus-offset": {
-    "filePath": "src/tokens/functional/size/border.json",
+    "filePath": "src/tokens/functional/size/border.json5",
     "isSource": true,
     "original": {
       "$value": "-2px",
@@ -250,7 +263,7 @@
     "type": "dimension"
   },
   "outline-focus-width": {
-    "filePath": "src/tokens/functional/size/border.json",
+    "filePath": "src/tokens/functional/size/border.json5",
     "isSource": true,
     "original": {
       "$value": "2px",

package/dist/docs/functional/size/breakpoints.json

@@ -6,7 +6,7 @@
         "scopes": ["size"]
       }
     },
-    "filePath": "src/tokens/functional/size/breakpoints.json",
+    "filePath": "src/tokens/functional/size/breakpoints.json5",
     "isSource": true,
     "original": {
       "$value": "320px",
@@ -31,7 +31,7 @@
         "scopes": ["size"]
       }
     },
-    "filePath": "src/tokens/functional/size/breakpoints.json",
+    "filePath": "src/tokens/functional/size/breakpoints.json5",
     "isSource": true,
     "original": {
       "$value": "544px",
@@ -56,7 +56,7 @@
         "scopes": ["size"]
       }
     },
-    "filePath": "src/tokens/functional/size/breakpoints.json",
+    "filePath": "src/tokens/functional/size/breakpoints.json5",
     "isSource": true,
     "original": {
       "$value": "768px",
@@ -81,7 +81,7 @@
         "scopes": ["size"]
       }
     },
-    "filePath": "src/tokens/functional/size/breakpoints.json",
+    "filePath": "src/tokens/functional/size/breakpoints.json5",
     "isSource": true,
     "original": {
       "$value": "1012px",
@@ -106,7 +106,7 @@
         "scopes": ["size"]
       }
     },
-    "filePath": "src/tokens/functional/size/breakpoints.json",
+    "filePath": "src/tokens/functional/size/breakpoints.json5",
     "isSource": true,
     "original": {
       "$value": "1280px",
@@ -131,7 +131,7 @@
         "scopes": ["size"]
       }
     },
-    "filePath": "src/tokens/functional/size/breakpoints.json",
+    "filePath": "src/tokens/functional/size/breakpoints.json5",
     "isSource": true,
     "original": {
       "$value": "1400px",

package/dist/docs/functional/size/size-coarse.json

@@ -1,6 +1,6 @@
 {
   "control-minTarget-auto": {
-    "filePath": "src/tokens/functional/size/size-coarse.json",
+    "filePath": "src/tokens/functional/size/size-coarse.json5",
     "isSource": true,
     "original": {
       "$value": "{base.size.44}",
@@ -13,7 +13,7 @@
     "type": "dimension"
   },
   "controlStack-small-gap-auto": {
-    "filePath": "src/tokens/functional/size/size-coarse.json",
+    "filePath": "src/tokens/functional/size/size-coarse.json5",
     "isSource": true,
     "original": {
       "$value": "{base.size.16}",
@@ -26,7 +26,7 @@
     "type": "dimension"
   },
   "controlStack-medium-gap-auto": {
-    "filePath": "src/tokens/functional/size/size-coarse.json",
+    "filePath": "src/tokens/functional/size/size-coarse.json5",
     "isSource": true,
     "original": {
       "$value": "{base.size.12}",

package/dist/docs/functional/size/size-fine.json

@@ -1,6 +1,6 @@
 {
   "control-minTarget-auto": {
-    "filePath": "src/tokens/functional/size/size-fine.json",
+    "filePath": "src/tokens/functional/size/size-fine.json5",
     "isSource": true,
     "original": {
       "$value": "{base.size.16}",
@@ -13,7 +13,7 @@
     "type": "dimension"
   },
   "controlStack-small-gap-auto": {
-    "filePath": "src/tokens/functional/size/size-fine.json",
+    "filePath": "src/tokens/functional/size/size-fine.json5",
     "isSource": true,
     "original": {
       "$value": "{base.size.8}",
@@ -26,7 +26,7 @@
     "type": "dimension"
   },
   "controlStack-medium-gap-auto": {
-    "filePath": "src/tokens/functional/size/size-fine.json",
+    "filePath": "src/tokens/functional/size/size-fine.json5",
     "isSource": true,
     "original": {
       "$value": "{base.size.8}",