@primer/primitives 11.4.0-rc.f798df25 → 11.4.1-rc.4e2d1de5

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

@@ -155,7 +155,10 @@
     "filePath": "src/tokens/base/typography/typography.json5",
     "isSource": true,
     "original": {
-      "$value": "2.5rem",
+      "$value": {
+        "value": 2.5,
+        "unit": "rem"
+      },
       "$type": "dimension",
       "$description": "40px - Display text for hero sections.",
       "$extensions": {
@@ -184,7 +187,10 @@
     "filePath": "src/tokens/base/typography/typography.json5",
     "isSource": true,
     "original": {
-      "$value": "1.25rem",
+      "$value": {
+        "value": 1.25,
+        "unit": "rem"
+      },
       "$type": "dimension",
       "$description": "20px - Medium titles and subtitles.",
       "$extensions": {
@@ -213,7 +219,10 @@
     "filePath": "src/tokens/base/typography/typography.json5",
     "isSource": true,
     "original": {
-      "$value": "1rem",
+      "$value": {
+        "value": 1,
+        "unit": "rem"
+      },
       "$type": "dimension",
       "$description": "16px - Large body text and small titles.",
       "$extensions": {
@@ -242,7 +251,10 @@
     "filePath": "src/tokens/base/typography/typography.json5",
     "isSource": true,
     "original": {
-      "$value": "0.875rem",
+      "$value": {
+        "value": 0.875,
+        "unit": "rem"
+      },
       "$type": "dimension",
       "$description": "14px - Default body text size for UI.",
       "$extensions": {
@@ -271,7 +283,10 @@
     "filePath": "src/tokens/base/typography/typography.json5",
     "isSource": true,
     "original": {
-      "$value": "2rem",
+      "$value": {
+        "value": 2,
+        "unit": "rem"
+      },
       "$type": "dimension",
       "$description": "32px - Large titles and page headings.",
       "$extensions": {
@@ -300,7 +315,10 @@
     "filePath": "src/tokens/base/typography/typography.json5",
     "isSource": true,
     "original": {
-      "$value": "0.75rem",
+      "$value": {
+        "value": 0.75,
+        "unit": "rem"
+      },
       "$type": "dimension",
       "$description": "12px - Smallest text size for captions and compact UI elements.",
       "$extensions": {

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

@@ -1,171 +1,4 @@
 {
-  "borderRadius-default": {
-    "key": "{borderRadius.default}",
-    "$extensions": {
-      "org.primer.figma": {
-        "collection": "functional/size",
-        "scopes": ["radius"],
-        "codeSyntax": {
-          "web": "var(--borderRadius-default) /* utility class: .rounded-2 */"
-        }
-      }
-    },
-    "filePath": "src/tokens/functional/size/border.json5",
-    "isSource": true,
-    "original": {
-      "$value": "{borderRadius.medium}",
-      "$type": "dimension",
-      "$extensions": {
-        "org.primer.figma": {
-          "collection": "functional/size",
-          "scopes": ["radius"],
-          "codeSyntax": {
-            "web": "var(--borderRadius-default) /* utility class: .rounded-2 */"
-          }
-        }
-      },
-      "key": "{borderRadius.default}"
-    },
-    "name": "borderRadius-default",
-    "attributes": {},
-    "path": ["borderRadius", "default"],
-    "value": "0.375rem",
-    "type": "dimension"
-  },
-  "borderRadius-full": {
-    "key": "{borderRadius.full}",
-    "$extensions": {
-      "org.primer.figma": {
-        "collection": "functional/size",
-        "scopes": ["radius"],
-        "codeSyntax": {
-          "web": "var(--borderRadius-full) /* utility class: .circle */"
-        }
-      }
-    },
-    "filePath": "src/tokens/functional/size/border.json5",
-    "isSource": true,
-    "original": {
-      "$value": "9999px",
-      "$type": "dimension",
-      "$description": "Use this border radius for pill shaped elements",
-      "$extensions": {
-        "org.primer.figma": {
-          "collection": "functional/size",
-          "scopes": ["radius"],
-          "codeSyntax": {
-            "web": "var(--borderRadius-full) /* utility class: .circle */"
-          }
-        }
-      },
-      "key": "{borderRadius.full}"
-    },
-    "name": "borderRadius-full",
-    "attributes": {},
-    "path": ["borderRadius", "full"],
-    "value": "624.9375rem",
-    "type": "dimension",
-    "description": "Use this border radius for pill shaped elements"
-  },
-  "borderRadius-large": {
-    "key": "{borderRadius.large}",
-    "$extensions": {
-      "org.primer.figma": {
-        "collection": "functional/size",
-        "scopes": ["radius"],
-        "codeSyntax": {
-          "web": "var(--borderRadius-large) /* utility class: .rounded-3 */"
-        }
-      }
-    },
-    "filePath": "src/tokens/functional/size/border.json5",
-    "isSource": true,
-    "original": {
-      "$value": "12px",
-      "$type": "dimension",
-      "$extensions": {
-        "org.primer.figma": {
-          "collection": "functional/size",
-          "scopes": ["radius"],
-          "codeSyntax": {
-            "web": "var(--borderRadius-large) /* utility class: .rounded-3 */"
-          }
-        }
-      },
-      "key": "{borderRadius.large}"
-    },
-    "name": "borderRadius-large",
-    "attributes": {},
-    "path": ["borderRadius", "large"],
-    "value": "0.75rem",
-    "type": "dimension"
-  },
-  "borderRadius-medium": {
-    "key": "{borderRadius.medium}",
-    "$extensions": {
-      "org.primer.figma": {
-        "collection": "functional/size",
-        "scopes": ["radius"],
-        "codeSyntax": {
-          "web": "var(--borderRadius-medium) /* utility class: .rounded-2 */"
-        }
-      }
-    },
-    "filePath": "src/tokens/functional/size/border.json5",
-    "isSource": true,
-    "original": {
-      "$value": "6px",
-      "$type": "dimension",
-      "$extensions": {
-        "org.primer.figma": {
-          "collection": "functional/size",
-          "scopes": ["radius"],
-          "codeSyntax": {
-            "web": "var(--borderRadius-medium) /* utility class: .rounded-2 */"
-          }
-        }
-      },
-      "key": "{borderRadius.medium}"
-    },
-    "name": "borderRadius-medium",
-    "attributes": {},
-    "path": ["borderRadius", "medium"],
-    "value": "0.375rem",
-    "type": "dimension"
-  },
-  "borderRadius-small": {
-    "key": "{borderRadius.small}",
-    "$extensions": {
-      "org.primer.figma": {
-        "collection": "functional/size",
-        "scopes": ["radius"],
-        "codeSyntax": {
-          "web": "var(--borderRadius-small) /* utility class: .rounded-1 */"
-        }
-      }
-    },
-    "filePath": "src/tokens/functional/size/border.json5",
-    "isSource": true,
-    "original": {
-      "$value": "3px",
-      "$type": "dimension",
-      "$extensions": {
-        "org.primer.figma": {
-          "collection": "functional/size",
-          "scopes": ["radius"],
-          "codeSyntax": {
-            "web": "var(--borderRadius-small) /* utility class: .rounded-1 */"
-          }
-        }
-      },
-      "key": "{borderRadius.small}"
-    },
-    "name": "borderRadius-small",
-    "attributes": {},
-    "path": ["borderRadius", "small"],
-    "value": "0.1875rem",
-    "type": "dimension"
-  },
   "borderWidth-default": {
     "key": "{borderWidth.default}",
     "$extensions": {
@@ -178,6 +11,7 @@
     "isSource": true,
     "original": {
       "$value": "{borderWidth.thin}",
+      "$description": "Default border width for most UI elements. Alias of borderWidth.thin (1px)",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -191,7 +25,8 @@
     "attributes": {},
     "path": ["borderWidth", "default"],
     "value": "0.0625rem",
-    "type": "dimension"
+    "type": "dimension",
+    "description": "Default border width for most UI elements. Alias of borderWidth.thin (1px)"
   },
   "borderWidth-thick": {
     "key": "{borderWidth.thick}",
@@ -199,17 +34,29 @@
       "org.primer.figma": {
         "collection": "functional/size",
         "scopes": ["borderWidth", "effectFloat"]
+      },
+      "org.primer.llm": {
+        "usage": ["focus-indicator", "selected-state", "emphasis-border"],
+        "rules": "MUST use for focus rings on interactive elements. Do NOT use for subtle dividers."
       }
     },
     "filePath": "src/tokens/functional/size/border.json5",
     "isSource": true,
     "original": {
-      "$value": "2px",
+      "$value": {
+        "value": 2,
+        "unit": "px"
+      },
+      "$description": "Thick 2px border for emphasis. Use for focus indicators, selected states, or to emphasize important boundaries",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
           "collection": "functional/size",
           "scopes": ["borderWidth", "effectFloat"]
+        },
+        "org.primer.llm": {
+          "usage": ["focus-indicator", "selected-state", "emphasis-border"],
+          "rules": "MUST use for focus rings on interactive elements. Do NOT use for subtle dividers."
         }
       },
       "key": "{borderWidth.thick}"
@@ -218,7 +65,8 @@
     "attributes": {},
     "path": ["borderWidth", "thick"],
     "value": "0.125rem",
-    "type": "dimension"
+    "type": "dimension",
+    "description": "Thick 2px border for emphasis. Use for focus indicators, selected states, or to emphasize important boundaries"
   },
   "borderWidth-thicker": {
     "key": "{borderWidth.thicker}",
@@ -231,7 +79,11 @@
     "filePath": "src/tokens/functional/size/border.json5",
     "isSource": true,
     "original": {
-      "$value": "4px",
+      "$value": {
+        "value": 4,
+        "unit": "px"
+      },
+      "$description": "Extra thick 4px border for maximum emphasis. Use sparingly for high-contrast focus indicators or critical visual separators",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -245,7 +97,8 @@
     "attributes": {},
     "path": ["borderWidth", "thicker"],
     "value": "0.25rem",
-    "type": "dimension"
+    "type": "dimension",
+    "description": "Extra thick 4px border for maximum emphasis. Use sparingly for high-contrast focus indicators or critical visual separators"
   },
   "borderWidth-thin": {
     "key": "{borderWidth.thin}",
@@ -258,7 +111,11 @@
     "filePath": "src/tokens/functional/size/border.json5",
     "isSource": true,
     "original": {
-      "$value": "1px",
+      "$value": {
+        "value": 1,
+        "unit": "px"
+      },
+      "$description": "Standard 1px border width. Use for most borders, dividers, and outlines throughout the interface",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -272,7 +129,8 @@
     "attributes": {},
     "path": ["borderWidth", "thin"],
     "value": "0.0625rem",
-    "type": "dimension"
+    "type": "dimension",
+    "description": "Standard 1px border width. Use for most borders, dividers, and outlines throughout the interface"
   },
   "boxShadow-thick": {
     "key": "{boxShadow.thick}",
@@ -280,6 +138,7 @@
     "isSource": true,
     "original": {
       "$value": "inset 0 0 0 {borderWidth.thick}",
+      "$description": "Thick shadow (2px) used instead of a border for emphasis without layout shift",
       "$type": "string",
       "key": "{boxShadow.thick}"
     },
@@ -287,7 +146,8 @@
     "attributes": {},
     "path": ["boxShadow", "thick"],
     "value": "inset 0 0 0 0.125rem",
-    "type": "string"
+    "type": "string",
+    "description": "Thick shadow (2px) used instead of a border for emphasis without layout shift"
   },
   "boxShadow-thicker": {
     "key": "{boxShadow.thicker}",
@@ -295,6 +155,7 @@
     "isSource": true,
     "original": {
       "$value": "inset 0 0 0 {borderWidth.thicker}",
+      "$description": "Thickest shadow (4px) used for high emphasis borders without layout shift. Use sparingly for maximum visual impact",
       "$type": "string",
       "key": "{boxShadow.thicker}"
     },
@@ -302,7 +163,8 @@
     "attributes": {},
     "path": ["boxShadow", "thicker"],
     "value": "inset 0 0 0 0.25rem",
-    "type": "string"
+    "type": "string",
+    "description": "Thickest shadow (4px) used for high emphasis borders without layout shift. Use sparingly for maximum visual impact"
   },
   "boxShadow-thin": {
     "key": "{boxShadow.thin}",
@@ -310,7 +172,7 @@
     "isSource": true,
     "original": {
       "$value": "inset 0 0 0 {borderWidth.thin}",
-      "$description": "Thin shadow for borders",
+      "$description": "Thin shadow used instead of a border to prevent layout shift",
       "$type": "string",
       "key": "{boxShadow.thin}"
     },
@@ -319,7 +181,7 @@
     "path": ["boxShadow", "thin"],
     "value": "inset 0 0 0 0.0625rem",
     "type": "string",
-    "description": "Thin shadow for borders"
+    "description": "Thin shadow used instead of a border to prevent layout shift"
   },
   "outline-focus-offset": {
     "key": "{outline.focus.offset}",
@@ -332,7 +194,11 @@
     "filePath": "src/tokens/functional/size/border.json5",
     "isSource": true,
     "original": {
-      "$value": "-2px",
+      "$value": {
+        "value": -2,
+        "unit": "px"
+      },
+      "$description": "Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -346,7 +212,8 @@
     "attributes": {},
     "path": ["outline", "focus", "offset"],
     "value": "-0.125rem",
-    "type": "dimension"
+    "type": "dimension",
+    "description": "Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds"
   },
   "outline-focus-width": {
     "key": "{outline.focus.width}",
@@ -354,17 +221,29 @@
       "org.primer.figma": {
         "collection": "functional/size",
         "scopes": ["borderWidth", "effectFloat"]
+      },
+      "org.primer.llm": {
+        "usage": ["focus-ring", "keyboard-focus", "accessibility"],
+        "rules": "MUST use for all keyboard focus indicators. Required for WCAG 2.4.7 compliance."
       }
     },
     "filePath": "src/tokens/functional/size/border.json5",
     "isSource": true,
     "original": {
-      "$value": "2px",
+      "$value": {
+        "value": 2,
+        "unit": "px"
+      },
+      "$description": "Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
           "collection": "functional/size",
           "scopes": ["borderWidth", "effectFloat"]
+        },
+        "org.primer.llm": {
+          "usage": ["focus-ring", "keyboard-focus", "accessibility"],
+          "rules": "MUST use for all keyboard focus indicators. Required for WCAG 2.4.7 compliance."
         }
       },
       "key": "{outline.focus.width}"
@@ -373,6 +252,7 @@
     "attributes": {},
     "path": ["outline", "focus", "width"],
     "value": "0.125rem",
-    "type": "dimension"
+    "type": "dimension",
+    "description": "Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements"
   }
 }

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

@@ -10,7 +10,10 @@
     "filePath": "src/tokens/functional/size/breakpoints.json5",
     "isSource": true,
     "original": {
-      "$value": "1012px",
+      "$value": {
+        "value": 1012,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -37,7 +40,10 @@
     "filePath": "src/tokens/functional/size/breakpoints.json5",
     "isSource": true,
     "original": {
-      "$value": "768px",
+      "$value": {
+        "value": 768,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -64,7 +70,10 @@
     "filePath": "src/tokens/functional/size/breakpoints.json5",
     "isSource": true,
     "original": {
-      "$value": "544px",
+      "$value": {
+        "value": 544,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -91,7 +100,10 @@
     "filePath": "src/tokens/functional/size/breakpoints.json5",
     "isSource": true,
     "original": {
-      "$value": "1280px",
+      "$value": {
+        "value": 1280,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -118,7 +130,10 @@
     "filePath": "src/tokens/functional/size/breakpoints.json5",
     "isSource": true,
     "original": {
-      "$value": "320px",
+      "$value": {
+        "value": 320,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -145,7 +160,10 @@
     "filePath": "src/tokens/functional/size/breakpoints.json5",
     "isSource": true,
     "original": {
-      "$value": "1400px",
+      "$value": {
+        "value": 1400,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {