@primer/primitives 11.4.0 → 11.4.1-rc.14fb4bb1

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

@@ -43,7 +43,10 @@
     "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": {
@@ -76,7 +79,10 @@
     "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": {
@@ -105,7 +111,10 @@
     "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": {
@@ -130,14 +139,14 @@
     "original": {
       "$value": "inset 0 0 0 {borderWidth.thick}",
       "$description": "Thick shadow (2px) used instead of a border for emphasis without layout shift",
-      "$type": "string",
+      "$type": "custom-string",
       "key": "{boxShadow.thick}"
     },
     "name": "boxShadow-thick",
     "attributes": {},
     "path": ["boxShadow", "thick"],
     "value": "inset 0 0 0 0.125rem",
-    "type": "string",
+    "type": "custom-string",
     "description": "Thick shadow (2px) used instead of a border for emphasis without layout shift"
   },
   "boxShadow-thicker": {
@@ -147,14 +156,14 @@
     "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",
+      "$type": "custom-string",
       "key": "{boxShadow.thicker}"
     },
     "name": "boxShadow-thicker",
     "attributes": {},
     "path": ["boxShadow", "thicker"],
     "value": "inset 0 0 0 0.25rem",
-    "type": "string",
+    "type": "custom-string",
     "description": "Thickest shadow (4px) used for high emphasis borders without layout shift. Use sparingly for maximum visual impact"
   },
   "boxShadow-thin": {
@@ -164,14 +173,14 @@
     "original": {
       "$value": "inset 0 0 0 {borderWidth.thin}",
       "$description": "Thin shadow used instead of a border to prevent layout shift",
-      "$type": "string",
+      "$type": "custom-string",
       "key": "{boxShadow.thin}"
     },
     "name": "boxShadow-thin",
     "attributes": {},
     "path": ["boxShadow", "thin"],
     "value": "inset 0 0 0 0.0625rem",
-    "type": "string",
+    "type": "custom-string",
     "description": "Thin shadow used instead of a border to prevent layout shift"
   },
   "outline-focus-offset": {
@@ -185,7 +194,10 @@
     "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": {
@@ -218,7 +230,10 @@
     "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": {

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": {

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

@@ -52,7 +52,10 @@
     "filePath": "src/tokens/functional/size/radius.json5",
     "isSource": true,
     "original": {
-      "$value": "9999px",
+      "$value": {
+        "value": 9999,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$description": "Use this border radius for pill shaped elements",
       "$extensions": {
@@ -95,7 +98,10 @@
     "filePath": "src/tokens/functional/size/radius.json5",
     "isSource": true,
     "original": {
-      "$value": "12px",
+      "$value": {
+        "value": 12,
+        "unit": "px"
+      },
       "$description": "Large border radius (12px). Use for larger containers, dialogs, or when more visual softness is desired. Always use this for buttons.",
       "$type": "dimension",
       "$extensions": {
@@ -138,7 +144,10 @@
     "filePath": "src/tokens/functional/size/radius.json5",
     "isSource": true,
     "original": {
-      "$value": "6px",
+      "$value": {
+        "value": 6,
+        "unit": "px"
+      },
       "$description": "Medium border radius (6px). The default choice for most buttons, cards, and containers",
       "$type": "dimension",
       "$extensions": {
@@ -181,7 +190,10 @@
     "filePath": "src/tokens/functional/size/radius.json5",
     "isSource": true,
     "original": {
-      "$value": "3px",
+      "$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",
       "$type": "dimension",
       "$extensions": {

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

@@ -64,7 +64,10 @@
     "filePath": "src/tokens/functional/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "10px",
+      "$value": {
+        "value": 10,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -226,7 +229,10 @@
     "filePath": "src/tokens/functional/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "6px",
+      "$value": {
+        "value": 6,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -631,7 +637,10 @@
     "filePath": "src/tokens/functional/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "14px",
+      "$value": {
+        "value": 14,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -793,7 +802,10 @@
     "filePath": "src/tokens/functional/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "2px",
+      "$value": {
+        "value": 2,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -1144,7 +1156,10 @@
     "filePath": "src/tokens/functional/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "432px",
+      "$value": {
+        "value": 432,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -1171,7 +1186,10 @@
     "filePath": "src/tokens/functional/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "320px",
+      "$value": {
+        "value": 320,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -1198,7 +1216,10 @@
     "filePath": "src/tokens/functional/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "256px",
+      "$value": {
+        "value": 256,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -1225,7 +1246,10 @@
     "filePath": "src/tokens/functional/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "600px",
+      "$value": {
+        "value": 600,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -1252,7 +1276,10 @@
     "filePath": "src/tokens/functional/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "4px",
+      "$value": {
+        "value": 4,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -1387,7 +1414,10 @@
     "filePath": "src/tokens/functional/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "640px",
+      "$value": {
+        "value": 640,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -1414,7 +1444,10 @@
     "filePath": "src/tokens/functional/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "480px",
+      "$value": {
+        "value": 480,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -1441,7 +1474,10 @@
     "filePath": "src/tokens/functional/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "320px",
+      "$value": {
+        "value": 320,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -1468,7 +1504,10 @@
     "filePath": "src/tokens/functional/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "960px",
+      "$value": {
+        "value": 960,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -1495,7 +1534,10 @@
     "filePath": "src/tokens/functional/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "192px",
+      "$value": {
+        "value": 192,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -1597,7 +1639,10 @@
     "filePath": "src/tokens/functional/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "2px",
+      "$value": {
+        "value": 2,
+        "unit": "px"
+      },
       "$type": "dimension",
       "key": "{spinner.strokeWidth.default}"
     },