@primer/primitives 10.0.0 → 10.1.0-rc.3e576ad9

package/dist/docs/functional/typography/typography.json

@@ -6,7 +6,7 @@
         "scopes": ["fontFamily"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
@@ -31,7 +31,7 @@
         "scopes": ["fontFamily"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
@@ -56,7 +56,7 @@
         "scopes": ["fontFamily"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
@@ -81,7 +81,7 @@
         "scopes": ["fontFamily"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
@@ -110,7 +110,7 @@
         "fontSizeInPx": 40
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": 1.4,
@@ -139,7 +139,7 @@
         "scopes": ["fontSize"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": "40px",
@@ -167,7 +167,7 @@
         "scopes": ["lineHeight"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": 1.4,
@@ -195,7 +195,7 @@
         "scopes": ["fontWeight"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": "{base.text.weight.medium}",
@@ -214,7 +214,7 @@
     "type": "fontWeight"
   },
   "text-display-shorthand": {
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": {
@@ -240,7 +240,7 @@
         "scopes": ["fontSize"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": "32px",
@@ -265,7 +265,7 @@
         "scopes": ["fontSize"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": "20px",
@@ -290,7 +290,7 @@
         "scopes": ["fontSize"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": "16px",
@@ -318,7 +318,7 @@
         "scopes": ["lineHeight"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": 1.5,
@@ -349,7 +349,7 @@
         "scopes": ["lineHeight"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": 1.6,
@@ -380,7 +380,7 @@
         "scopes": ["lineHeight"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": 1.5,
@@ -408,7 +408,7 @@
         "scopes": ["fontWeight"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": "{base.text.weight.semibold}",
@@ -433,7 +433,7 @@
         "scopes": ["fontWeight"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": "{base.text.weight.semibold}",
@@ -458,7 +458,7 @@
         "scopes": ["fontWeight"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": "{base.text.weight.semibold}",
@@ -477,7 +477,7 @@
     "type": "fontWeight"
   },
   "text-title-shorthand-large": {
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": {
@@ -497,7 +497,7 @@
     "description": "Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports."
   },
   "text-title-shorthand-medium": {
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": {
@@ -517,7 +517,7 @@
     "description": "Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition."
   },
   "text-title-shorthand-small": {
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": {
@@ -543,7 +543,7 @@
         "scopes": ["fontSize"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": "20px",
@@ -571,7 +571,7 @@
         "scopes": ["lineHeight"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": 1.6,
@@ -599,7 +599,7 @@
         "scopes": ["fontWeight"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": "{base.text.weight.normal}",
@@ -618,7 +618,7 @@
     "type": "fontWeight"
   },
   "text-subtitle-shorthand": {
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": {
@@ -644,7 +644,7 @@
         "scopes": ["fontSize"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": "16px",
@@ -669,7 +669,7 @@
         "scopes": ["fontSize"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": "14px",
@@ -694,7 +694,7 @@
         "scopes": ["fontSize"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": "12px",
@@ -722,7 +722,7 @@
         "scopes": ["lineHeight"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": 1.5,
@@ -753,7 +753,7 @@
         "scopes": ["lineHeight"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": 1.4285,
@@ -784,7 +784,7 @@
         "scopes": ["lineHeight"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": 1.6666,
@@ -812,7 +812,7 @@
         "scopes": ["fontWeight"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": "{base.text.weight.normal}",
@@ -831,7 +831,7 @@
     "type": "fontWeight"
   },
   "text-body-shorthand-large": {
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": {
@@ -851,7 +851,7 @@
     "description": "User-generated content, markdown rendering."
   },
   "text-body-shorthand-medium": {
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": {
@@ -871,7 +871,7 @@
     "description": "Default UI font. Most commonly used for body text."
   },
   "text-body-shorthand-small": {
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": {
@@ -897,7 +897,7 @@
         "scopes": ["fontSize"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": "12px",
@@ -925,7 +925,7 @@
         "scopes": ["lineHeight"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": 1.3333,
@@ -953,7 +953,7 @@
         "scopes": ["fontWeight"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": "{base.text.weight.normal}",
@@ -972,7 +972,7 @@
     "type": "fontWeight"
   },
   "text-caption-shorthand": {
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": {
@@ -998,7 +998,7 @@
         "scopes": ["fontSize"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": "13px",
@@ -1026,7 +1026,7 @@
         "scopes": ["lineHeight"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": 1.5385,
@@ -1054,7 +1054,7 @@
         "scopes": ["fontWeight"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": "{base.text.weight.normal}",
@@ -1073,7 +1073,7 @@
     "type": "fontWeight"
   },
   "text-codeBlock-shorthand": {
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": {
@@ -1099,7 +1099,7 @@
         "scopes": ["fontSize"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": "0.9285em",
@@ -1124,7 +1124,7 @@
         "scopes": ["fontWeight"]
       }
     },
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": "{base.text.weight.normal}",
@@ -1143,7 +1143,7 @@
     "type": "fontWeight"
   },
   "text-codeInline-shorthand": {
-    "filePath": "src/tokens/functional/typography/typography.json",
+    "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
       "$value": {

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

@@ -1,10 +1,11 @@
 {
-  "--boxShadow-thin": "inset 0 0 0 max(1px, 0.0625rem)",
-  "--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",
+  "--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/figma/figma.json

@@ -101,14 +101,6 @@
       "groups": [
         "typography"
       ]
-    },
-    "undefined": {
-      "modes": [
-        null
-      ],
-      "groups": [
-        null
-      ]
     }
   },
   "files": [

package/dist/internalCss/dark-colorblind.css

@@ -2,6 +2,20 @@
 [data-color-mode="dark"][data-dark-theme="dark_colorblind"] ::backdrop,
 [data-color-mode="auto"][data-light-theme="dark_colorblind"],
 [data-color-mode="auto"][data-light-theme="dark_colorblind"] ::backdrop {
+  --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;
+  --borderRadius-full: 624.9375rem; /* Use this border radius for pill shaped elements */
+  --borderRadius-default: 0.375rem;
+  --outline-focus-offset: -0.125rem;
+  --outline-focus-width: 0.125rem;
   --base-color-black: #010409;
   --base-color-inset: #010409;
   --base-color-white: #ffffff;
@@ -601,6 +615,7 @@
   --reactionButton-selected-fgColor-rest: #4493f8;
   --reactionButton-selected-fgColor-hover: #79c0ff;
   --focus-outlineColor: #1f6feb;
+  --focus-outline: 2px solid #1f6feb;
   --menu-bgColor-active: #151b23;
   --overlay-bgColor: #151b23;
   --overlay-borderColor: #3d444db3;
@@ -866,11 +881,51 @@
   --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409;
   --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
   --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-  --outline-focus: #1f6feb solid 2px;
+  --border-default: 0.0625rem solid #3d444d;
+  --border-muted: 0.0625rem solid #3d444db3;
+  --border-emphasis: 0.0625rem solid #656c76;
+  --border-disabled: 0.0625rem solid #656c761a;
+  --border-transparent: 0.0625rem solid #00000000;
+  --border-neutral-emphasis: 0.0625rem solid #656c76;
+  --border-neutral-muted: 0.0625rem solid #3d444db3;
+  --border-accent-emphasis: 0.0625rem solid #1f6feb;
+  --border-accent-muted: 0.0625rem solid #388bfd66;
+  --border-success-emphasis: 0.0625rem solid #1f6feb;
+  --border-success-muted: 0.0625rem solid #388bfd66;
+  --border-open-emphasis: 0.0625rem solid #1f6feb;
+  --border-open-muted: 0.0625rem solid #388bfd66;
+  --border-danger-emphasis: 0.0625rem solid #bd561d;
+  --border-danger-muted: 0.0625rem solid #db6d2866;
+  --border-closed-emphasis: 0.0625rem solid #bd561d;
+  --border-closed-muted: 0.0625rem solid #db6d2866;
+  --border-attention-emphasis: 0.0625rem solid #9e6a03;
+  --border-attention-muted: 0.0625rem solid #bb800966;
+  --border-severe-emphasis: 0.0625rem solid #bd561d;
+  --border-severe-muted: 0.0625rem solid #db6d2866;
+  --border-done-emphasis: 0.0625rem solid #8957e5;
+  --border-done-muted: 0.0625rem solid #ab7df866;
+  --border-upsell-emphasis: 0.0625rem solid #8957e5;
+  --border-upsell-muted: 0.0625rem solid #ab7df866;
+  --border-sponsors-emphasis: 0.0625rem solid #bf4b8a;
+  --border-sponsors-muted: 0.0625rem solid #db61a266;
 }
 @media (prefers-color-scheme: dark) {
   [data-color-mode="auto"][data-dark-theme="dark_colorblind"],
   [data-color-mode="auto"][data-dark-theme="dark_colorblind"] ::backdrop {
+    --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;
+    --borderRadius-full: 624.9375rem; /* Use this border radius for pill shaped elements */
+    --borderRadius-default: 0.375rem;
+    --outline-focus-offset: -0.125rem;
+    --outline-focus-width: 0.125rem;
     --base-color-black: #010409;
     --base-color-inset: #010409;
     --base-color-white: #ffffff;
@@ -1470,6 +1525,7 @@
     --reactionButton-selected-fgColor-rest: #4493f8;
     --reactionButton-selected-fgColor-hover: #79c0ff;
     --focus-outlineColor: #1f6feb;
+    --focus-outline: 2px solid #1f6feb;
     --menu-bgColor-active: #151b23;
     --overlay-bgColor: #151b23;
     --overlay-borderColor: #3d444db3;
@@ -1735,6 +1791,32 @@
     --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409;
     --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
     --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-    --outline-focus: #1f6feb solid 2px;
+    --border-default: 0.0625rem solid #3d444d;
+    --border-muted: 0.0625rem solid #3d444db3;
+    --border-emphasis: 0.0625rem solid #656c76;
+    --border-disabled: 0.0625rem solid #656c761a;
+    --border-transparent: 0.0625rem solid #00000000;
+    --border-neutral-emphasis: 0.0625rem solid #656c76;
+    --border-neutral-muted: 0.0625rem solid #3d444db3;
+    --border-accent-emphasis: 0.0625rem solid #1f6feb;
+    --border-accent-muted: 0.0625rem solid #388bfd66;
+    --border-success-emphasis: 0.0625rem solid #1f6feb;
+    --border-success-muted: 0.0625rem solid #388bfd66;
+    --border-open-emphasis: 0.0625rem solid #1f6feb;
+    --border-open-muted: 0.0625rem solid #388bfd66;
+    --border-danger-emphasis: 0.0625rem solid #bd561d;
+    --border-danger-muted: 0.0625rem solid #db6d2866;
+    --border-closed-emphasis: 0.0625rem solid #bd561d;
+    --border-closed-muted: 0.0625rem solid #db6d2866;
+    --border-attention-emphasis: 0.0625rem solid #9e6a03;
+    --border-attention-muted: 0.0625rem solid #bb800966;
+    --border-severe-emphasis: 0.0625rem solid #bd561d;
+    --border-severe-muted: 0.0625rem solid #db6d2866;
+    --border-done-emphasis: 0.0625rem solid #8957e5;
+    --border-done-muted: 0.0625rem solid #ab7df866;
+    --border-upsell-emphasis: 0.0625rem solid #8957e5;
+    --border-upsell-muted: 0.0625rem solid #ab7df866;
+    --border-sponsors-emphasis: 0.0625rem solid #bf4b8a;
+    --border-sponsors-muted: 0.0625rem solid #db61a266;
   }
 }