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

package/dist/styleLint/base/typography/typography.json

@@ -146,7 +146,7 @@
   },
   "base-text-size-2xl": {
     "key": "{base.text.size.2xl}",
-    "$value": [null, "40px"],
+    "$value": ["2.5rem", "40px"],
     "$type": "dimension",
     "$description": "40px - Display text for hero sections.",
     "$extensions": {
@@ -158,7 +158,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": {
@@ -175,7 +178,7 @@
   },
   "base-text-size-lg": {
     "key": "{base.text.size.lg}",
-    "$value": [null, "20px"],
+    "$value": ["1.25rem", "20px"],
     "$type": "dimension",
     "$description": "20px - Medium titles and subtitles.",
     "$extensions": {
@@ -187,7 +190,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": {
@@ -204,7 +210,7 @@
   },
   "base-text-size-md": {
     "key": "{base.text.size.md}",
-    "$value": [null, "16px"],
+    "$value": ["1rem", "16px"],
     "$type": "dimension",
     "$description": "16px - Large body text and small titles.",
     "$extensions": {
@@ -216,7 +222,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": {
@@ -233,7 +242,7 @@
   },
   "base-text-size-sm": {
     "key": "{base.text.size.sm}",
-    "$value": [null, "14px"],
+    "$value": ["0.875rem", "14px"],
     "$type": "dimension",
     "$description": "14px - Default body text size for UI.",
     "$extensions": {
@@ -245,7 +254,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": {
@@ -262,7 +274,7 @@
   },
   "base-text-size-xl": {
     "key": "{base.text.size.xl}",
-    "$value": [null, "32px"],
+    "$value": ["2rem", "32px"],
     "$type": "dimension",
     "$description": "32px - Large titles and page headings.",
     "$extensions": {
@@ -274,7 +286,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": {
@@ -291,7 +306,7 @@
   },
   "base-text-size-xs": {
     "key": "{base.text.size.xs}",
-    "$value": [null, "12px"],
+    "$value": ["0.75rem", "12px"],
     "$type": "dimension",
     "$description": "12px - Smallest text size for captions and compact UI elements.",
     "$extensions": {
@@ -303,7 +318,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/styleLint/functional/size/border.json

@@ -1,174 +1,8 @@
 {
-  "borderRadius-default": {
-    "key": "{borderRadius.default}",
-    "$value": ["0.0234375rem", "0.375px"],
-    "$type": "dimension",
-    "$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"]
-  },
-  "borderRadius-full": {
-    "key": "{borderRadius.full}",
-    "$value": ["624.9375rem", "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 */"
-        }
-      }
-    },
-    "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"]
-  },
-  "borderRadius-large": {
-    "key": "{borderRadius.large}",
-    "$value": ["0.75rem", "12px"],
-    "$type": "dimension",
-    "$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"]
-  },
-  "borderRadius-medium": {
-    "key": "{borderRadius.medium}",
-    "$value": ["0.375rem", "6px"],
-    "$type": "dimension",
-    "$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"]
-  },
-  "borderRadius-small": {
-    "key": "{borderRadius.small}",
-    "$value": ["0.1875rem", "3px"],
-    "$type": "dimension",
-    "$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"]
-  },
   "borderWidth-default": {
     "key": "{borderWidth.default}",
-    "$value": ["0.00390625rem", "0.0625px"],
+    "$value": ["0.0625rem", "1px"],
+    "$description": "Default border width for most UI elements. Alias of borderWidth.thin (1px)",
     "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
@@ -180,6 +14,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": {
@@ -196,22 +31,35 @@
   "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",
     "$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."
       }
     },
     "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}"
@@ -223,6 +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",
     "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
@@ -233,7 +82,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": {
@@ -250,6 +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",
     "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
@@ -260,7 +114,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": {
@@ -277,11 +135,13 @@
   "boxShadow-thick": {
     "key": "{boxShadow.thick}",
     "$value": "inset 0 0 0 0.125rem,2px",
+    "$description": "Thick shadow (2px) used instead of a border for emphasis without layout shift",
     "$type": "string",
     "filePath": "src/tokens/functional/size/border.json5",
     "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}"
     },
@@ -292,11 +152,13 @@
   "boxShadow-thicker": {
     "key": "{boxShadow.thicker}",
     "$value": "inset 0 0 0 0.25rem,4px",
+    "$description": "Thickest shadow (4px) used for high emphasis borders without layout shift. Use sparingly for maximum visual impact",
     "$type": "string",
     "filePath": "src/tokens/functional/size/border.json5",
     "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}"
     },
@@ -307,13 +169,13 @@
   "boxShadow-thin": {
     "key": "{boxShadow.thin}",
     "$value": "inset 0 0 0 0.0625rem,1px",
-    "$description": "Thin shadow for borders",
+    "$description": "Thin shadow used instead of a border to prevent layout shift",
     "$type": "string",
     "filePath": "src/tokens/functional/size/border.json5",
     "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}"
     },
@@ -324,6 +186,7 @@
   "outline-focus-offset": {
     "key": "{outline.focus.offset}",
     "$value": ["-0.125rem", "-2px"],
+    "$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": {
@@ -334,7 +197,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": {
@@ -351,22 +218,35 @@
   "outline-focus-width": {
     "key": "{outline.focus.width}",
     "$value": ["0.125rem", "2px"],
+    "$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."
       }
     },
     "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}"

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

@@ -12,7 +12,10 @@
     "filePath": "src/tokens/functional/size/breakpoints.json5",
     "isSource": true,
     "original": {
-      "$value": "1012px",
+      "$value": {
+        "value": 1012,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -39,7 +42,10 @@
     "filePath": "src/tokens/functional/size/breakpoints.json5",
     "isSource": true,
     "original": {
-      "$value": "768px",
+      "$value": {
+        "value": 768,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -66,7 +72,10 @@
     "filePath": "src/tokens/functional/size/breakpoints.json5",
     "isSource": true,
     "original": {
-      "$value": "544px",
+      "$value": {
+        "value": 544,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -93,7 +102,10 @@
     "filePath": "src/tokens/functional/size/breakpoints.json5",
     "isSource": true,
     "original": {
-      "$value": "1280px",
+      "$value": {
+        "value": 1280,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -120,7 +132,10 @@
     "filePath": "src/tokens/functional/size/breakpoints.json5",
     "isSource": true,
     "original": {
-      "$value": "320px",
+      "$value": {
+        "value": 320,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -147,7 +162,10 @@
     "filePath": "src/tokens/functional/size/breakpoints.json5",
     "isSource": true,
     "original": {
-      "$value": "1400px",
+      "$value": {
+        "value": 1400,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {