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

package/dist/docs/base/size/size.json

@@ -10,7 +10,10 @@
     "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "112px",
+      "$value": {
+        "value": 112,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -37,7 +40,10 @@
     "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "12px",
+      "$value": {
+        "value": 12,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -64,7 +70,10 @@
     "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "128px",
+      "$value": {
+        "value": 128,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -91,7 +100,10 @@
     "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "16px",
+      "$value": {
+        "value": 16,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -118,7 +130,10 @@
     "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "2px",
+      "$value": {
+        "value": 2,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -145,7 +160,10 @@
     "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "20px",
+      "$value": {
+        "value": 20,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -172,7 +190,10 @@
     "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "24px",
+      "$value": {
+        "value": 24,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -199,7 +220,10 @@
     "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "28px",
+      "$value": {
+        "value": 28,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -226,7 +250,10 @@
     "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "32px",
+      "$value": {
+        "value": 32,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -253,7 +280,10 @@
     "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "36px",
+      "$value": {
+        "value": 36,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -280,7 +310,10 @@
     "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "4px",
+      "$value": {
+        "value": 4,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -307,7 +340,10 @@
     "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "40px",
+      "$value": {
+        "value": 40,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -334,7 +370,10 @@
     "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "44px",
+      "$value": {
+        "value": 44,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -361,7 +400,10 @@
     "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "48px",
+      "$value": {
+        "value": 48,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -388,7 +430,10 @@
     "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "6px",
+      "$value": {
+        "value": 6,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -415,7 +460,10 @@
     "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "64px",
+      "$value": {
+        "value": 64,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -442,7 +490,10 @@
     "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "8px",
+      "$value": {
+        "value": 8,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -469,7 +520,10 @@
     "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "80px",
+      "$value": {
+        "value": 80,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -496,7 +550,10 @@
     "filePath": "src/tokens/base/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "96px",
+      "$value": {
+        "value": 96,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {

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": {
@@ -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}"
     },