@primer/primitives 11.8.0 → 11.8.1

package/DESIGN_TOKENS_SPEC.md

@@ -160,22 +160,22 @@ Fully transparent border
 Corner radius tokens for rounded elements.
 
 ### borderRadius-full
-Use this border radius for pill shaped elements
+Shape token for fully rounded or pill-shaped elements.
 **U:** avatar, circular-button, pill-badge
 **R:** Use for avatars and pill-shaped elements. Do NOT use for rectangular containers.
 
 ### borderRadius-large
-Large border radius (12px). Use for larger containers, dialogs, or when more visual softness is desired.
+Scale token: 12px radius for larger surfaces or softer container treatments.
 **U:** card, dialog, modal
 **R:** Recommended for dialogs and modals.
 
 ### borderRadius-medium
-Medium border radius (6px). The default choice for most buttons, cards, and containers
+Scale token: 6px radius in the border-radius scale. Use when selecting a specific radius intentionally.
 **U:** button, input, textarea
 **R:** Default choice for most components. Use for inputs, cards, and general containers.
 
 ### borderRadius-small
-Small border radius (3px). Use for small variants of components or small UI elements like badges, tags, or anything below 16px in height
+Scale token: 3px radius for compact UI elements or small component variants.
 **U:** badge, label, tag
 **R:** Use for small UI elements under 16px height. Do NOT use for buttons or cards.
 
@@ -184,7 +184,7 @@ Small border radius (3px). Use for small variants of components or small UI elem
 Border thickness tokens.
 
 ### borderWidth-thick
-Thick 2px border for emphasis. Use for focus indicators, selected states, or to emphasize important boundaries
+Scale token: 2px border width for emphasis or focus states.
 **U:** emphasis-border, focus-indicator, selected-state
 **R:** MUST use for focus rings on interactive elements. Do NOT use for subtle dividers.
 

package/dist/build/filters/isDeprecated.js

@@ -4,5 +4,7 @@
  * @returns boolean
  */
 export const isDeprecated = (token) => {
-    return token.$deprecated === true || typeof token.$deprecated === 'string';
+    var _a;
+    const deprecated = (_a = token.original.$deprecated) !== null && _a !== void 0 ? _a : token.$deprecated;
+    return deprecated === true || typeof deprecated === 'string';
 };

package/dist/build/transformers/jsonDeprecated.js

@@ -10,5 +10,9 @@ export const jsonDeprecated = {
     type: 'value',
     transitive: true,
     filter: isDeprecated,
-    transform: (token) => typeof token.$deprecated === 'string' ? token.$deprecated.replace(/[{}]/g, '') : null,
+    transform: (token) => {
+        var _a;
+        const deprecated = (_a = token.original.$deprecated) !== null && _a !== void 0 ? _a : token.$deprecated;
+        return typeof deprecated === 'string' ? deprecated.replace(/[{}]/g, '') : null;
+    },
 };

package/dist/css/functional/size/border.css

@@ -1,10 +1,10 @@
 :root {
-  --borderWidth-thick: 0.125rem; /** Thick 2px border for emphasis. Use for focus indicators, selected states, or to emphasize important boundaries */
-  --borderWidth-thicker: 0.25rem; /** Extra thick 4px border for maximum emphasis. Use sparingly for high-contrast focus indicators or critical visual separators */
-  --borderWidth-thin: 0.0625rem; /** Standard 1px border width. Use for most borders, dividers, and outlines throughout the interface */
+  --borderWidth-thick: 0.125rem; /** Scale token: 2px border width for emphasis or focus states. */
+  --borderWidth-thicker: 0.25rem; /** Scale token: 4px border width for strong emphasis. */
+  --borderWidth-thin: 0.0625rem; /** Scale token: 1px border width. Use when selecting an explicit size from the border-width scale. */
   --focus-outline-offset: -0.125rem; /** Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds */
   --focus-outline-width: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
-  --borderWidth-default: var(--borderWidth-thin); /** Default border width for most UI elements. Alias of borderWidth.thin (1px) */
+  --borderWidth-default: var(--borderWidth-thin); /** Semantic token: preferred default border width for standard component borders. Use this in normal component code unless a specific scale value is required. */
   --boxShadow-thick: inset 0 0 0 var(--borderWidth-thick); /** Thick shadow (2px) used instead of a border for emphasis without layout shift */
   --boxShadow-thicker: inset 0 0 0 var(--borderWidth-thicker); /** Thickest shadow (4px) used for high emphasis borders without layout shift. Use sparingly for maximum visual impact */
   --boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /** Thin shadow used instead of a border to prevent layout shift */

package/dist/css/functional/size/radius.css

@@ -1,7 +1,7 @@
 :root {
-  --borderRadius-full: 624.9375rem; /** Use this border radius for pill shaped elements */
-  --borderRadius-large: 0.75rem; /** Large border radius (12px). Use for larger containers, dialogs, or when more visual softness is desired. */
-  --borderRadius-medium: 0.375rem; /** Medium border radius (6px). The default choice for most buttons, cards, and containers */
-  --borderRadius-small: 0.1875rem; /** Small border radius (3px). Use for small variants of components or small UI elements like badges, tags, or anything below 16px in height */
-  --borderRadius-default: var(--borderRadius-medium); /** Default border radius for most UI elements. Alias of borderRadius.medium (6px). Use when in doubt */
+  --borderRadius-full: 624.9375rem; /** Shape token for fully rounded or pill-shaped elements. */
+  --borderRadius-large: 0.75rem; /** Scale token: 12px radius for larger surfaces or softer container treatments. */
+  --borderRadius-medium: 0.375rem; /** Scale token: 6px radius in the border-radius scale. Use when selecting a specific radius intentionally. */
+  --borderRadius-small: 0.1875rem; /** Scale token: 3px radius for compact UI elements or small component variants. */
+  --borderRadius-default: var(--borderRadius-medium); /** Semantic token: preferred default border radius for standard UI components. Use this in normal component code unless a specific radius is intentionally required. */
 }

package/dist/deprecated/theme.json

@@ -0,0 +1,5 @@
+{
+  "focus.outlineColor": "focus.outline-color",
+  "outline.focus.offset": "focus.outline-offset",
+  "outline.focus.width": "focus.outline-width"
+}

package/dist/deprecated.json

@@ -0,0 +1,5 @@
+{
+  "focus.outlineColor": "focus.outline-color",
+  "outline.focus.offset": "focus.outline-offset",
+  "outline.focus.width": "focus.outline-width"
+}

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

@@ -11,7 +11,7 @@
     "isSource": true,
     "original": {
       "$value": "{borderWidth.thin}",
-      "$description": "Default border width for most UI elements. Alias of borderWidth.thin (1px)",
+      "$description": "Semantic token: preferred default border width for standard component borders. Use this in normal component code unless a specific scale value is required.",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -26,7 +26,7 @@
     "path": ["borderWidth", "default"],
     "value": "0.0625rem",
     "type": "dimension",
-    "description": "Default border width for most UI elements. Alias of borderWidth.thin (1px)"
+    "description": "Semantic token: preferred default border width for standard component borders. Use this in normal component code unless a specific scale value is required."
   },
   "borderWidth-thick": {
     "key": "{borderWidth.thick}",
@@ -47,7 +47,7 @@
         "value": 2,
         "unit": "px"
       },
-      "$description": "Thick 2px border for emphasis. Use for focus indicators, selected states, or to emphasize important boundaries",
+      "$description": "Scale token: 2px border width for emphasis or focus states.",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -66,7 +66,7 @@
     "path": ["borderWidth", "thick"],
     "value": "0.125rem",
     "type": "dimension",
-    "description": "Thick 2px border for emphasis. Use for focus indicators, selected states, or to emphasize important boundaries"
+    "description": "Scale token: 2px border width for emphasis or focus states."
   },
   "borderWidth-thicker": {
     "key": "{borderWidth.thicker}",
@@ -83,7 +83,7 @@
         "value": 4,
         "unit": "px"
       },
-      "$description": "Extra thick 4px border for maximum emphasis. Use sparingly for high-contrast focus indicators or critical visual separators",
+      "$description": "Scale token: 4px border width for strong emphasis.",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -98,7 +98,7 @@
     "path": ["borderWidth", "thicker"],
     "value": "0.25rem",
     "type": "dimension",
-    "description": "Extra thick 4px border for maximum emphasis. Use sparingly for high-contrast focus indicators or critical visual separators"
+    "description": "Scale token: 4px border width for strong emphasis."
   },
   "borderWidth-thin": {
     "key": "{borderWidth.thin}",
@@ -115,7 +115,7 @@
         "value": 1,
         "unit": "px"
       },
-      "$description": "Standard 1px border width. Use for most borders, dividers, and outlines throughout the interface",
+      "$description": "Scale token: 1px border width. Use when selecting an explicit size from the border-width scale.",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -130,7 +130,7 @@
     "path": ["borderWidth", "thin"],
     "value": "0.0625rem",
     "type": "dimension",
-    "description": "Standard 1px border width. Use for most borders, dividers, and outlines throughout the interface"
+    "description": "Scale token: 1px border width. Use when selecting an explicit size from the border-width scale."
   },
   "boxShadow-thick": {
     "key": "{boxShadow.thick}",

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

@@ -14,7 +14,7 @@
     "isSource": true,
     "original": {
       "$value": "{borderRadius.medium}",
-      "$description": "Default border radius for most UI elements. Alias of borderRadius.medium (6px). Use when in doubt",
+      "$description": "Semantic token: preferred default border radius for standard UI components. Use this in normal component code unless a specific radius is intentionally required.",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -32,7 +32,7 @@
     "path": ["borderRadius", "default"],
     "value": "0.375rem",
     "type": "dimension",
-    "description": "Default border radius for most UI elements. Alias of borderRadius.medium (6px). Use when in doubt"
+    "description": "Semantic token: preferred default border radius for standard UI components. Use this in normal component code unless a specific radius is intentionally required."
   },
   "borderRadius-full": {
     "key": "{borderRadius.full}",
@@ -57,7 +57,7 @@
         "unit": "px"
       },
       "$type": "dimension",
-      "$description": "Use this border radius for pill shaped elements",
+      "$description": "Shape token for fully rounded or pill-shaped elements.",
       "$extensions": {
         "org.primer.figma": {
           "collection": "functional/size",
@@ -78,7 +78,7 @@
     "path": ["borderRadius", "full"],
     "value": "624.9375rem",
     "type": "dimension",
-    "description": "Use this border radius for pill shaped elements"
+    "description": "Shape token for fully rounded or pill-shaped elements."
   },
   "borderRadius-large": {
     "key": "{borderRadius.large}",
@@ -102,7 +102,7 @@
         "value": 12,
         "unit": "px"
       },
-      "$description": "Large border radius (12px). Use for larger containers, dialogs, or when more visual softness is desired.",
+      "$description": "Scale token: 12px radius for larger surfaces or softer container treatments.",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -124,7 +124,7 @@
     "path": ["borderRadius", "large"],
     "value": "0.75rem",
     "type": "dimension",
-    "description": "Large border radius (12px). Use for larger containers, dialogs, or when more visual softness is desired."
+    "description": "Scale token: 12px radius for larger surfaces or softer container treatments."
   },
   "borderRadius-medium": {
     "key": "{borderRadius.medium}",
@@ -148,7 +148,7 @@
         "value": 6,
         "unit": "px"
       },
-      "$description": "Medium border radius (6px). The default choice for most buttons, cards, and containers",
+      "$description": "Scale token: 6px radius in the border-radius scale. Use when selecting a specific radius intentionally.",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -170,7 +170,7 @@
     "path": ["borderRadius", "medium"],
     "value": "0.375rem",
     "type": "dimension",
-    "description": "Medium border radius (6px). The default choice for most buttons, cards, and containers"
+    "description": "Scale token: 6px radius in the border-radius scale. Use when selecting a specific radius intentionally."
   },
   "borderRadius-small": {
     "key": "{borderRadius.small}",
@@ -194,7 +194,7 @@
         "value": 3,
         "unit": "px"
       },
-      "$description": "Small border radius (3px). Use for small variants of components or small UI elements like badges, tags, or anything below 16px in height",
+      "$description": "Scale token: 3px radius for compact UI elements or small component variants.",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -216,6 +216,6 @@
     "path": ["borderRadius", "small"],
     "value": "0.1875rem",
     "type": "dimension",
-    "description": "Small border radius (3px). Use for small variants of components or small UI elements like badges, tags, or anything below 16px in height"
+    "description": "Scale token: 3px radius for compact UI elements or small component variants."
   }
 }

package/dist/figma/dimension/dimension.json

@@ -972,7 +972,7 @@
     "name": "borderWidth/default",
     "value": 1,
     "type": "FLOAT",
-    "description": "Default border width for most UI elements. Alias of borderWidth.thin (1px)",
+    "description": "Semantic token: preferred default border width for standard component borders. Use this in normal component code unless a specific scale value is required.",
     "refId": "functional/size/borderWidth/default",
     "reference": "functional/size/borderWidth/thin",
     "collection": "functional/size",
@@ -984,7 +984,7 @@
     "name": "borderWidth/thin",
     "value": 1,
     "type": "FLOAT",
-    "description": "Standard 1px border width. Use for most borders, dividers, and outlines throughout the interface",
+    "description": "Scale token: 1px border width. Use when selecting an explicit size from the border-width scale.",
     "refId": "functional/size/borderWidth/thin",
     "collection": "functional/size",
     "mode": "default",
@@ -995,7 +995,7 @@
     "name": "borderWidth/thick",
     "value": 2,
     "type": "FLOAT",
-    "description": "Thick 2px border for emphasis. Use for focus indicators, selected states, or to emphasize important boundaries",
+    "description": "Scale token: 2px border width for emphasis or focus states.",
     "refId": "functional/size/borderWidth/thick",
     "collection": "functional/size",
     "mode": "default",
@@ -1006,7 +1006,7 @@
     "name": "borderWidth/thicker",
     "value": 4,
     "type": "FLOAT",
-    "description": "Extra thick 4px border for maximum emphasis. Use sparingly for high-contrast focus indicators or critical visual separators",
+    "description": "Scale token: 4px border width for strong emphasis.",
     "refId": "functional/size/borderWidth/thicker",
     "collection": "functional/size",
     "mode": "default",
@@ -1017,7 +1017,7 @@
     "name": "borderRadius/small",
     "value": 3,
     "type": "FLOAT",
-    "description": "Small border radius (3px). Use for small variants of components or small UI elements like badges, tags, or anything below 16px in height",
+    "description": "Scale token: 3px radius for compact UI elements or small component variants.",
     "refId": "functional/size/borderRadius/small",
     "collection": "functional/size",
     "mode": "default",
@@ -1031,7 +1031,7 @@
     "name": "borderRadius/medium",
     "value": 6,
     "type": "FLOAT",
-    "description": "Medium border radius (6px). The default choice for most buttons, cards, and containers",
+    "description": "Scale token: 6px radius in the border-radius scale. Use when selecting a specific radius intentionally.",
     "refId": "functional/size/borderRadius/medium",
     "collection": "functional/size",
     "mode": "default",
@@ -1045,7 +1045,7 @@
     "name": "borderRadius/large",
     "value": 12,
     "type": "FLOAT",
-    "description": "Large border radius (12px). Use for larger containers, dialogs, or when more visual softness is desired.",
+    "description": "Scale token: 12px radius for larger surfaces or softer container treatments.",
     "refId": "functional/size/borderRadius/large",
     "collection": "functional/size",
     "mode": "default",
@@ -1059,7 +1059,7 @@
     "name": "borderRadius/full",
     "value": 9999,
     "type": "FLOAT",
-    "description": "Use this border radius for pill shaped elements",
+    "description": "Shape token for fully rounded or pill-shaped elements.",
     "refId": "functional/size/borderRadius/full",
     "collection": "functional/size",
     "mode": "default",
@@ -1073,7 +1073,7 @@
     "name": "borderRadius/default",
     "value": 6,
     "type": "FLOAT",
-    "description": "Default border radius for most UI elements. Alias of borderRadius.medium (6px). Use when in doubt",
+    "description": "Semantic token: preferred default border radius for standard UI components. Use this in normal component code unless a specific radius is intentionally required.",
     "refId": "functional/size/borderRadius/default",
     "reference": "functional/size/borderRadius/medium",
     "collection": "functional/size",

package/dist/{removed/color.json → removed.json}

@@ -417,5 +417,12 @@
   "mktg.btn.dark.hover.text": null,
   "mktg.btn.dark.hover.border": null,
   "mktg.btn.dark.focus.border": null,
-  "mktg.btn.dark.focus.borderInset": null
+  "mktg.btn.dark.focus.borderInset": null,
+  "control.xsmall.lineBoxHeight": null,
+  "control.small.lineBoxHeight": null,
+  "control.medium.lineBoxHeight": null,
+  "control.large.lineBoxHeight": null,
+  "control.xlarge.lineBoxHeight": null,
+  "text.display.lineBoxHeight": "text.display.lineHeight",
+  "shadow.floating.legacy": "shadow.floating.small"
 }

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

@@ -2,7 +2,7 @@
   "borderWidth-default": {
     "key": "{borderWidth.default}",
     "$value": ["0.0625rem", "1px"],
-    "$description": "Default border width for most UI elements. Alias of borderWidth.thin (1px)",
+    "$description": "Semantic token: preferred default border width for standard component borders. Use this in normal component code unless a specific scale value is required.",
     "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
@@ -14,7 +14,7 @@
     "isSource": true,
     "original": {
       "$value": "{borderWidth.thin}",
-      "$description": "Default border width for most UI elements. Alias of borderWidth.thin (1px)",
+      "$description": "Semantic token: preferred default border width for standard component borders. Use this in normal component code unless a specific scale value is required.",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -31,7 +31,7 @@
   "borderWidth-thick": {
     "key": "{borderWidth.thick}",
     "$value": ["0.125rem", "2px"],
-    "$description": "Thick 2px border for emphasis. Use for focus indicators, selected states, or to emphasize important boundaries",
+    "$description": "Scale token: 2px border width for emphasis or focus states.",
     "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
@@ -50,7 +50,7 @@
         "value": 2,
         "unit": "px"
       },
-      "$description": "Thick 2px border for emphasis. Use for focus indicators, selected states, or to emphasize important boundaries",
+      "$description": "Scale token: 2px border width for emphasis or focus states.",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -71,7 +71,7 @@
   "borderWidth-thicker": {
     "key": "{borderWidth.thicker}",
     "$value": ["0.25rem", "4px"],
-    "$description": "Extra thick 4px border for maximum emphasis. Use sparingly for high-contrast focus indicators or critical visual separators",
+    "$description": "Scale token: 4px border width for strong emphasis.",
     "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
@@ -86,7 +86,7 @@
         "value": 4,
         "unit": "px"
       },
-      "$description": "Extra thick 4px border for maximum emphasis. Use sparingly for high-contrast focus indicators or critical visual separators",
+      "$description": "Scale token: 4px border width for strong emphasis.",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -103,7 +103,7 @@
   "borderWidth-thin": {
     "key": "{borderWidth.thin}",
     "$value": ["0.0625rem", "1px"],
-    "$description": "Standard 1px border width. Use for most borders, dividers, and outlines throughout the interface",
+    "$description": "Scale token: 1px border width. Use when selecting an explicit size from the border-width scale.",
     "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
@@ -118,7 +118,7 @@
         "value": 1,
         "unit": "px"
       },
-      "$description": "Standard 1px border width. Use for most borders, dividers, and outlines throughout the interface",
+      "$description": "Scale token: 1px border width. Use when selecting an explicit size from the border-width scale.",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {

package/dist/styleLint/functional/size/radius.json

@@ -2,7 +2,7 @@
   "borderRadius-default": {
     "key": "{borderRadius.default}",
     "$value": ["0.375rem", "6px"],
-    "$description": "Default border radius for most UI elements. Alias of borderRadius.medium (6px). Use when in doubt",
+    "$description": "Semantic token: preferred default border radius for standard UI components. Use this in normal component code unless a specific radius is intentionally required.",
     "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
@@ -17,7 +17,7 @@
     "isSource": true,
     "original": {
       "$value": "{borderRadius.medium}",
-      "$description": "Default border radius for most UI elements. Alias of borderRadius.medium (6px). Use when in doubt",
+      "$description": "Semantic token: preferred default border radius for standard UI components. Use this in normal component code unless a specific radius is intentionally required.",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -38,7 +38,7 @@
     "key": "{borderRadius.full}",
     "$value": ["624.9375rem", "9999px"],
     "$type": "dimension",
-    "$description": "Use this border radius for pill shaped elements",
+    "$description": "Shape token for fully rounded or pill-shaped elements.",
     "$extensions": {
       "org.primer.figma": {
         "collection": "functional/size",
@@ -60,7 +60,7 @@
         "unit": "px"
       },
       "$type": "dimension",
-      "$description": "Use this border radius for pill shaped elements",
+      "$description": "Shape token for fully rounded or pill-shaped elements.",
       "$extensions": {
         "org.primer.figma": {
           "collection": "functional/size",
@@ -83,7 +83,7 @@
   "borderRadius-large": {
     "key": "{borderRadius.large}",
     "$value": ["0.75rem", "12px"],
-    "$description": "Large border radius (12px). Use for larger containers, dialogs, or when more visual softness is desired.",
+    "$description": "Scale token: 12px radius for larger surfaces or softer container treatments.",
     "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
@@ -105,7 +105,7 @@
         "value": 12,
         "unit": "px"
       },
-      "$description": "Large border radius (12px). Use for larger containers, dialogs, or when more visual softness is desired.",
+      "$description": "Scale token: 12px radius for larger surfaces or softer container treatments.",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -129,7 +129,7 @@
   "borderRadius-medium": {
     "key": "{borderRadius.medium}",
     "$value": ["0.375rem", "6px"],
-    "$description": "Medium border radius (6px). The default choice for most buttons, cards, and containers",
+    "$description": "Scale token: 6px radius in the border-radius scale. Use when selecting a specific radius intentionally.",
     "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
@@ -151,7 +151,7 @@
         "value": 6,
         "unit": "px"
       },
-      "$description": "Medium border radius (6px). The default choice for most buttons, cards, and containers",
+      "$description": "Scale token: 6px radius in the border-radius scale. Use when selecting a specific radius intentionally.",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -175,7 +175,7 @@
   "borderRadius-small": {
     "key": "{borderRadius.small}",
     "$value": ["0.1875rem", "3px"],
-    "$description": "Small border radius (3px). Use for small variants of components or small UI elements like badges, tags, or anything below 16px in height",
+    "$description": "Scale token: 3px radius for compact UI elements or small component variants.",
     "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
@@ -197,7 +197,7 @@
         "value": 3,
         "unit": "px"
       },
-      "$description": "Small border radius (3px). Use for small variants of components or small UI elements like badges, tags, or anything below 16px in height",
+      "$description": "Scale token: 3px radius for compact UI elements or small component variants.",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "11.8.0",
+  "version": "11.8.1",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "type": "module",
   "files": [
@@ -47,8 +47,7 @@
     "prepack": "npm run build",
     "release": "changeset publish",
     "storybook": "npm run build:tokens && cd docs/storybook && npm run storybook",
-    "storybook:install": "cd docs/storybook && npm ci --no-audit --no-fund",
-    "postinstall": "npm run storybook:install"
+    "storybook:install": "cd docs/storybook && npm ci --no-audit --no-fund"
   },
   "prettier": "@github/prettier-config",
   "devDependencies": {
@@ -84,4 +83,4 @@
     "zod-validation-error": "^4.0.1",
     "colorjs.io": "^0.6.1"
   }
-}
+}

package/src/tokens/functional/size/border.json5

@@ -19,7 +19,7 @@
   borderWidth: {
     default: {
       $value: '{borderWidth.thin}',
-      $description: 'Default border width for most UI elements. Alias of borderWidth.thin (1px)',
+      $description: 'Semantic token: preferred default border width for standard component borders. Use this in normal component code unless a specific scale value is required.',
       $type: 'dimension',
       $extensions: {
         'org.primer.figma': {
@@ -30,7 +30,7 @@
     },
     thin: {
       $value: {value: 1, unit: 'px'},
-      $description: 'Standard 1px border width. Use for most borders, dividers, and outlines throughout the interface',
+      $description: 'Scale token: 1px border width. Use when selecting an explicit size from the border-width scale.',
       $type: 'dimension',
       $extensions: {
         'org.primer.figma': {
@@ -41,7 +41,7 @@
     },
     thick: {
       $value: {value: 2, unit: 'px'},
-      $description: 'Thick 2px border for emphasis. Use for focus indicators, selected states, or to emphasize important boundaries',
+      $description: 'Scale token: 2px border width for emphasis or focus states.',
       $type: 'dimension',
       $extensions: {
         'org.primer.figma': {
@@ -56,7 +56,7 @@
     },
     thicker: {
       $value: {value: 4, unit: 'px'},
-      $description: 'Extra thick 4px border for maximum emphasis. Use sparingly for high-contrast focus indicators or critical visual separators',
+      $description: 'Scale token: 4px border width for strong emphasis.',
       $type: 'dimension',
       $extensions: {
         'org.primer.figma': {

package/src/tokens/functional/size/radius.json5

@@ -2,7 +2,7 @@
   borderRadius: {
     small: {
       $value: {value: 3, unit: 'px'},
-      $description: 'Small border radius (3px). Use for small variants of components or small UI elements like badges, tags, or anything below 16px in height',
+      $description: 'Scale token: 3px radius for compact UI elements or small component variants.',
       $type: 'dimension',
       $extensions: {
         'org.primer.figma': {
@@ -20,7 +20,7 @@
     },
     medium: {
       $value: {value: 6, unit: 'px'},
-      $description: 'Medium border radius (6px). The default choice for most buttons, cards, and containers',
+      $description: 'Scale token: 6px radius in the border-radius scale. Use when selecting a specific radius intentionally.',
       $type: 'dimension',
       $extensions: {
         'org.primer.figma': {
@@ -38,7 +38,7 @@
     },
     large: {
       $value: {value: 12, unit: 'px'},
-      $description: 'Large border radius (12px). Use for larger containers, dialogs, or when more visual softness is desired.',
+      $description: 'Scale token: 12px radius for larger surfaces or softer container treatments.',
       $type: 'dimension',
       $extensions: {
         'org.primer.figma': {
@@ -57,7 +57,7 @@
     full: {
       $value: {value: 9999, unit: 'px'},
       $type: 'dimension',
-      $description: 'Use this border radius for pill shaped elements',
+      $description: 'Shape token for fully rounded or pill-shaped elements.',
       $extensions: {
         'org.primer.figma': {
           collection: 'functional/size',
@@ -74,7 +74,7 @@
     },
     default: {
       $value: '{borderRadius.medium}',
-      $description: 'Default border radius for most UI elements. Alias of borderRadius.medium (6px). Use when in doubt',
+      $description: 'Semantic token: preferred default border radius for standard UI components. Use this in normal component code unless a specific radius is intentionally required.',
       $type: 'dimension',
       $extensions: {
         'org.primer.figma': {

package/src/tokens/{removed/color.json → removed.json}

@@ -417,5 +417,12 @@
   "mktg.btn.dark.hover.text": null,
   "mktg.btn.dark.hover.border": null,
   "mktg.btn.dark.focus.border": null,
-  "mktg.btn.dark.focus.borderInset": null
+  "mktg.btn.dark.focus.borderInset": null,
+  "control.xsmall.lineBoxHeight": null,
+  "control.small.lineBoxHeight": null,
+  "control.medium.lineBoxHeight": null,
+  "control.large.lineBoxHeight": null,
+  "control.xlarge.lineBoxHeight": null,
+  "text.display.lineBoxHeight": "text.display.lineHeight",
+  "shadow.floating.legacy": "shadow.floating.small"
 }