@primer/primitives 11.4.0 → 11.4.1-rc.0499d5a6

package/dist/css/functional/themes/light.css

@@ -1,3 +1,7 @@
+/**
+ * @spec See /DESIGN_TOKENS_SPEC.md for naming logic and semantic pairings.
+ * @rule Never use raw values (hex/px). Use semantic tokens ONLY.
+ */
 [data-color-mode="light"][data-light-theme="light"],
 [data-color-mode="auto"][data-light-theme="light"] {
   --bgColor-success-emphasis: #1f883d; /** Strong success background for prominent positive actions */
@@ -57,15 +61,15 @@
   --button-danger-bgColor-active: #a40e26;
   --button-danger-fgColor-disabled: #d1242f80;
   --button-danger-fgColor-rest: var(--fgColor-danger);
-  --button-danger-shadow-selected: inset 0px 1px 0px 0px #4c001433;
+  --button-danger-shadow-selected: inset 0 1px 0 0 #4c001433;
   --button-inactive-bgColor: #e6eaef;
   --button-inactive-fgColor: #59636e;
   --button-invisible-bgColor-disabled: #ffffff00;
   --button-invisible-borderColor-disabled: #ffffff00;
-  --button-outline-shadow-selected: inset 0px 1px 0px 0px #00215533;
+  --button-outline-shadow-selected: inset 0 1px 0 0 #00215533;
   --button-primary-bgColor-rest: var(--bgColor-success-emphasis);
   --button-primary-borderColor-disabled: var(--button-primary-bgColor-disabled);
-  --button-primary-shadow-selected: inset 0px 1px 0px 0px #002d114d;
+  --button-primary-shadow-selected: inset 0 1px 0 0 #002d114d;
   --button-star-iconColor: #eac54f;
   --buttonCounter-danger-fgColor-disabled: #d1242f80;
   --buttonCounter-outline-fgColor-rest: #0550ae;
@@ -636,14 +640,14 @@
   --reactionButton-selected-fgColor-hover: #0550ae;
   --selectMenu-bgColor-active: #b6e3ff;
   --selectMenu-borderColor: #ffffff00;
-  --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
-  --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f;
+  --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
+  --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
   --skeletonLoader-bgColor: #818b981a;
   --topicTag-borderColor: #ffffff00;
   --treeViewItem-leadingVisual-iconColor-rest: #54aeff;
   --underlineNav-borderColor-active: #fd8c73;
   --avatar-bgColor: #ffffff;
-  --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
+  --avatar-shadow: 0 0 0 2px #ffffffcc;
   --bgColor-black: #1f2328; /** Pure black background */
   --bgColor-closed-emphasis: var(--bgColor-danger-emphasis); /** Strong background for closed state badges and labels */
   --bgColor-closed-muted: var(--bgColor-danger-muted); /** Subtle background for closed state indicators (issues, PRs) */
@@ -694,7 +698,7 @@
   --button-default-bgColor-rest: var(--control-bgColor-rest);
   --button-default-bgColor-selected: var(--control-bgColor-active);
   --button-default-fgColor-rest: var(--control-fgColor-rest);
-  --button-default-shadow-resting: 0px 1px 0px 0px #1f23280a;
+  --button-default-shadow-resting: 0 1px 0 0 #1f23280a;
   --button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
   --button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
   --button-invisible-bgColor-rest: var(--control-transparent-bgColor-rest);
@@ -802,9 +806,9 @@
   --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
   --progressBar-track-bgColor: var(--borderColor-default);
   --selection-bgColor: #0969da33; /** Background color for text selection highlights */
-  --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
-  --shadow-resting-small: 0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f;
-  --shadow-resting-xsmall: 0px 1px 1px 0px #1f23280f;
+  --shadow-inset: inset 0 1px 0 0 #1f23280a; /** Inset shadow for recessed elements */
+  --shadow-resting-small: 0 1px 1px 0 #1f23280a, 0 1px 2px 0 #1f232808; /** Small resting shadow for buttons and interactive elements */
+  --shadow-resting-xsmall: 0 1px 1px 0 #1f23280d; /** Extra small resting shadow for minimal elevation */
   --sideNav-bgColor-selected: #ffffff;
   --timelineBadge-bgColor: var(--bgColor-muted);
   --tooltip-bgColor: var(--bgColor-emphasis);
@@ -887,10 +891,10 @@
   --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
   --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
   --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
-  --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
-  --shadow-floating-medium: 0px 0px 0px 1px #d1d9e0, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;
-  --shadow-floating-small: 0px 0px 0px 1px #d1d9e080, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
-  --shadow-floating-xlarge: 0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52;
+  --shadow-floating-large: 0 0 0 1px #d1d9e000, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
+  --shadow-floating-medium: 0 0 0 1px #d1d9e000, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14; /** Medium floating shadow for popovers and action menus */
+  --shadow-floating-small: 0 0 0 1px #d1d9e080, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
+  --shadow-floating-xlarge: 0 0 0 1px #d1d9e000, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
   --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
   --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
@@ -954,15 +958,15 @@
     --button-danger-bgColor-active: #a40e26;
     --button-danger-fgColor-disabled: #d1242f80;
     --button-danger-fgColor-rest: var(--fgColor-danger);
-    --button-danger-shadow-selected: inset 0px 1px 0px 0px #4c001433;
+    --button-danger-shadow-selected: inset 0 1px 0 0 #4c001433;
     --button-inactive-bgColor: #e6eaef;
     --button-inactive-fgColor: #59636e;
     --button-invisible-bgColor-disabled: #ffffff00;
     --button-invisible-borderColor-disabled: #ffffff00;
-    --button-outline-shadow-selected: inset 0px 1px 0px 0px #00215533;
+    --button-outline-shadow-selected: inset 0 1px 0 0 #00215533;
     --button-primary-bgColor-rest: var(--bgColor-success-emphasis);
     --button-primary-borderColor-disabled: var(--button-primary-bgColor-disabled);
-    --button-primary-shadow-selected: inset 0px 1px 0px 0px #002d114d;
+    --button-primary-shadow-selected: inset 0 1px 0 0 #002d114d;
     --button-star-iconColor: #eac54f;
     --buttonCounter-danger-fgColor-disabled: #d1242f80;
     --buttonCounter-outline-fgColor-rest: #0550ae;
@@ -1533,14 +1537,14 @@
     --reactionButton-selected-fgColor-hover: #0550ae;
     --selectMenu-bgColor-active: #b6e3ff;
     --selectMenu-borderColor: #ffffff00;
-    --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
-    --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f;
+    --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
+    --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
     --skeletonLoader-bgColor: #818b981a;
     --topicTag-borderColor: #ffffff00;
     --treeViewItem-leadingVisual-iconColor-rest: #54aeff;
     --underlineNav-borderColor-active: #fd8c73;
     --avatar-bgColor: #ffffff;
-    --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
+    --avatar-shadow: 0 0 0 2px #ffffffcc;
     --bgColor-black: #1f2328; /** Pure black background */
     --bgColor-closed-emphasis: var(--bgColor-danger-emphasis); /** Strong background for closed state badges and labels */
     --bgColor-closed-muted: var(--bgColor-danger-muted); /** Subtle background for closed state indicators (issues, PRs) */
@@ -1591,7 +1595,7 @@
     --button-default-bgColor-rest: var(--control-bgColor-rest);
     --button-default-bgColor-selected: var(--control-bgColor-active);
     --button-default-fgColor-rest: var(--control-fgColor-rest);
-    --button-default-shadow-resting: 0px 1px 0px 0px #1f23280a;
+    --button-default-shadow-resting: 0 1px 0 0 #1f23280a;
     --button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
     --button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
     --button-invisible-bgColor-rest: var(--control-transparent-bgColor-rest);
@@ -1699,9 +1703,9 @@
     --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
     --progressBar-track-bgColor: var(--borderColor-default);
     --selection-bgColor: #0969da33; /** Background color for text selection highlights */
-    --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
-    --shadow-resting-small: 0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f;
-    --shadow-resting-xsmall: 0px 1px 1px 0px #1f23280f;
+    --shadow-inset: inset 0 1px 0 0 #1f23280a; /** Inset shadow for recessed elements */
+    --shadow-resting-small: 0 1px 1px 0 #1f23280a, 0 1px 2px 0 #1f232808; /** Small resting shadow for buttons and interactive elements */
+    --shadow-resting-xsmall: 0 1px 1px 0 #1f23280d; /** Extra small resting shadow for minimal elevation */
     --sideNav-bgColor-selected: #ffffff;
     --timelineBadge-bgColor: var(--bgColor-muted);
     --tooltip-bgColor: var(--bgColor-emphasis);
@@ -1784,10 +1788,10 @@
     --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
     --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
     --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
-    --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
-    --shadow-floating-medium: 0px 0px 0px 1px #d1d9e0, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;
-    --shadow-floating-small: 0px 0px 0px 1px #d1d9e080, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
-    --shadow-floating-xlarge: 0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52;
+    --shadow-floating-large: 0 0 0 1px #d1d9e000, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
+    --shadow-floating-medium: 0 0 0 1px #d1d9e000, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14; /** Medium floating shadow for popovers and action menus */
+    --shadow-floating-small: 0 0 0 1px #d1d9e080, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
+    --shadow-floating-xlarge: 0 0 0 1px #d1d9e000, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
     --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
     --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
     --button-outline-borderColor-active: var(--button-outline-borderColor-hover);

package/dist/css/primitives.css

@@ -1,3 +1,7 @@
+/**
+ * @spec See /DESIGN_TOKENS_SPEC.md for naming logic and semantic pairings.
+ * @rule Never use raw values (hex/px). Use semantic tokens ONLY.
+ */
 @import './base/motion/motion.css';
 @import './base/size/size.css';
 @import './base/typography/typography.css';

package/dist/docs/base/motion/motion.json

@@ -4,14 +4,20 @@
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "0ms",
+      "$value": {
+        "value": 0,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.0}"
     },
     "name": "base-duration-0",
     "attributes": {},
     "path": ["base", "duration", "0"],
-    "value": "0ms",
+    "value": {
+      "value": 0,
+      "unit": "ms"
+    },
     "type": "duration"
   },
   "base-duration-100": {
@@ -19,14 +25,20 @@
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "100ms",
+      "$value": {
+        "value": 100,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.100}"
     },
     "name": "base-duration-100",
     "attributes": {},
     "path": ["base", "duration", "100"],
-    "value": "100ms",
+    "value": {
+      "value": 100,
+      "unit": "ms"
+    },
     "type": "duration"
   },
   "base-duration-1000": {
@@ -34,14 +46,20 @@
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "1000ms",
+      "$value": {
+        "value": 1000,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.1000}"
     },
     "name": "base-duration-1000",
     "attributes": {},
     "path": ["base", "duration", "1000"],
-    "value": "1000ms",
+    "value": {
+      "value": 1000,
+      "unit": "ms"
+    },
     "type": "duration"
   },
   "base-duration-200": {
@@ -49,14 +67,20 @@
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "200ms",
+      "$value": {
+        "value": 200,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.200}"
     },
     "name": "base-duration-200",
     "attributes": {},
     "path": ["base", "duration", "200"],
-    "value": "200ms",
+    "value": {
+      "value": 200,
+      "unit": "ms"
+    },
     "type": "duration"
   },
   "base-duration-300": {
@@ -64,14 +88,20 @@
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "300ms",
+      "$value": {
+        "value": 300,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.300}"
     },
     "name": "base-duration-300",
     "attributes": {},
     "path": ["base", "duration", "300"],
-    "value": "300ms",
+    "value": {
+      "value": 300,
+      "unit": "ms"
+    },
     "type": "duration"
   },
   "base-duration-400": {
@@ -79,14 +109,20 @@
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "400ms",
+      "$value": {
+        "value": 400,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.400}"
     },
     "name": "base-duration-400",
     "attributes": {},
     "path": ["base", "duration", "400"],
-    "value": "400ms",
+    "value": {
+      "value": 400,
+      "unit": "ms"
+    },
     "type": "duration"
   },
   "base-duration-50": {
@@ -94,14 +130,20 @@
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "50ms",
+      "$value": {
+        "value": 50,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.50}"
     },
     "name": "base-duration-50",
     "attributes": {},
     "path": ["base", "duration", "50"],
-    "value": "50ms",
+    "value": {
+      "value": 50,
+      "unit": "ms"
+    },
     "type": "duration"
   },
   "base-duration-500": {
@@ -109,14 +151,20 @@
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "500ms",
+      "$value": {
+        "value": 500,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.500}"
     },
     "name": "base-duration-500",
     "attributes": {},
     "path": ["base", "duration", "500"],
-    "value": "500ms",
+    "value": {
+      "value": 500,
+      "unit": "ms"
+    },
     "type": "duration"
   },
   "base-duration-600": {
@@ -124,14 +172,20 @@
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "600ms",
+      "$value": {
+        "value": 600,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.600}"
     },
     "name": "base-duration-600",
     "attributes": {},
     "path": ["base", "duration", "600"],
-    "value": "600ms",
+    "value": {
+      "value": 600,
+      "unit": "ms"
+    },
     "type": "duration"
   },
   "base-duration-700": {
@@ -139,14 +193,20 @@
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "700ms",
+      "$value": {
+        "value": 700,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.700}"
     },
     "name": "base-duration-700",
     "attributes": {},
     "path": ["base", "duration", "700"],
-    "value": "700ms",
+    "value": {
+      "value": 700,
+      "unit": "ms"
+    },
     "type": "duration"
   },
   "base-duration-800": {
@@ -154,14 +214,20 @@
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "800ms",
+      "$value": {
+        "value": 800,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.800}"
     },
     "name": "base-duration-800",
     "attributes": {},
     "path": ["base", "duration", "800"],
-    "value": "800ms",
+    "value": {
+      "value": 800,
+      "unit": "ms"
+    },
     "type": "duration"
   },
   "base-duration-900": {
@@ -169,14 +235,20 @@
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "900ms",
+      "$value": {
+        "value": 900,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.900}"
     },
     "name": "base-duration-900",
     "attributes": {},
     "path": ["base", "duration", "900"],
-    "value": "900ms",
+    "value": {
+      "value": 900,
+      "unit": "ms"
+    },
     "type": "duration"
   },
   "base-easing-ease": {

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