@primer/primitives 11.8.0-rc.fe40f878 → 11.8.1-rc.42f5a787

package/DESIGN_TOKENS_SPEC.md

@@ -160,22 +160,22 @@ Fully transparent border
 Corner radius tokens for rounded elements.
 
 ### borderRadius-full
-Use this border radius for pill shaped elements
+Shape token for fully rounded or pill-shaped elements.
 **U:** avatar, circular-button, pill-badge
 **R:** Use for avatars and pill-shaped elements. Do NOT use for rectangular containers.
 
 ### borderRadius-large
-Large border radius (12px). Use for larger containers, dialogs, or when more visual softness is desired.
+Scale token: 12px radius for larger surfaces or softer container treatments.
 **U:** card, dialog, modal
 **R:** Recommended for dialogs and modals.
 
 ### borderRadius-medium
-Medium border radius (6px). The default choice for most buttons, cards, and containers
+Scale token: 6px radius in the border-radius scale. Use when selecting a specific radius intentionally.
 **U:** button, input, textarea
 **R:** Default choice for most components. Use for inputs, cards, and general containers.
 
 ### borderRadius-small
-Small border radius (3px). Use for small variants of components or small UI elements like badges, tags, or anything below 16px in height
+Scale token: 3px radius for compact UI elements or small component variants.
 **U:** badge, label, tag
 **R:** Use for small UI elements under 16px height. Do NOT use for buttons or cards.
 
@@ -184,7 +184,7 @@ Small border radius (3px). Use for small variants of components or small UI elem
 Border thickness tokens.
 
 ### borderWidth-thick
-Thick 2px border for emphasis. Use for focus indicators, selected states, or to emphasize important boundaries
+Scale token: 2px border width for emphasis or focus states.
 **U:** emphasis-border, focus-indicator, selected-state
 **R:** MUST use for focus rings on interactive elements. Do NOT use for subtle dividers.
 
@@ -568,6 +568,38 @@ Extra small resting shadow for minimal elevation
 **U:** badge, chip, small-card
 **R:** Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance.
 
+## Space
+
+### space-lg
+Spacious spacing for major layout divisions and visual separation between content blocks.
+**U:** gap, margin, padding
+**R:** Spacious (16px). Use for major layout divisions, visual separation between content blocks, and primary container margins.
+
+### space-md
+Relaxed spacing for breathing room and comfortable internal container space.
+**U:** gap, margin, padding
+**R:** Relaxed (12px). Use for comfortable container padding, relaxed layouts, section separators, and breathing room in dense layouts.
+
+### space-sm
+Default spacing for most UI elements. Comfortable visual density for standard component layouts.
+**U:** gap, margin, padding
+**R:** Default (8px). Use for standard component spacing, flex/grid item separation, container padding, and most element margins.
+
+### space-xl
+Expansive spacing for large sections and top-level structure separation.
+**U:** gap, margin, padding
+**R:** Expansive (24px). Use for large section separation, top-level layout structure, major page divisions, and expansive breathing room.
+
+### space-xs
+Compact spacing for small badges, tight internal spacing, and minimal breathing room.
+**U:** gap, margin, padding
+**R:** Compact (4px). Use for small component spacing, tight list separations, badge padding, and minimal internal margins.
+
+### space-xxs
+Ultra-compact spacing for form field separators and tight visual divisions.
+**U:** gap, margin, padding
+**R:** Ultra-compact (2px). Use for form field separators, tight dividers, and minimal breathing room between small elements.
+
 ## Spinner
 
 Loading spinner size and stroke tokens.

package/README.md

@@ -40,6 +40,9 @@ All available imports:
 /* motion */
 @import '@primer/primitives/dist/css/base/motion/motion.css';
 
+/* spacing */
+@import '@primer/primitives/dist/css/functional/spacing/space.css';
+
 /* color */
 @import '@primer/primitives/dist/css/functional/themes/light.css';
 @import '@primer/primitives/dist/css/functional/themes/light-tritanopia.css';
@@ -53,6 +56,8 @@ All available imports:
 ```
 
 > **Note:** Motion CSS imports are required for components with animations, such as `Spinner` from `@primer/react`. If you're experiencing issues with animated components appearing static, ensure you've imported the motion CSS files.
+>
+> **Note:** Spacing tokens provide a unified semantic scale for `gap`, `padding`, and `margin`. Import `functional/spacing/space.css` to use `--space-*` tokens in your components.
 
 ## Design token data
 

package/dist/build/filters/isDeprecated.js

@@ -4,5 +4,7 @@
  * @returns boolean
  */
 export const isDeprecated = (token) => {
-    return token.$deprecated === true || typeof token.$deprecated === 'string';
+    var _a;
+    const deprecated = (_a = token.original.$deprecated) !== null && _a !== void 0 ? _a : token.$deprecated;
+    return deprecated === true || typeof deprecated === 'string';
 };

package/dist/build/transformers/jsonDeprecated.js

@@ -10,5 +10,9 @@ export const jsonDeprecated = {
     type: 'value',
     transitive: true,
     filter: isDeprecated,
-    transform: (token) => typeof token.$deprecated === 'string' ? token.$deprecated.replace(/[{}]/g, '') : null,
+    transform: (token) => {
+        var _a;
+        const deprecated = (_a = token.original.$deprecated) !== null && _a !== void 0 ? _a : token.$deprecated;
+        return typeof deprecated === 'string' ? deprecated.replace(/[{}]/g, '') : null;
+    },
 };

package/dist/css/functional/size/border.css

@@ -1,10 +1,10 @@
 :root {
-  --borderWidth-thick: 0.125rem; /** Thick 2px border for emphasis. Use for focus indicators, selected states, or to emphasize important boundaries */
-  --borderWidth-thicker: 0.25rem; /** Extra thick 4px border for maximum emphasis. Use sparingly for high-contrast focus indicators or critical visual separators */
-  --borderWidth-thin: 0.0625rem; /** Standard 1px border width. Use for most borders, dividers, and outlines throughout the interface */
+  --borderWidth-thick: 0.125rem; /** Scale token: 2px border width for emphasis or focus states. */
+  --borderWidth-thicker: 0.25rem; /** Scale token: 4px border width for strong emphasis. */
+  --borderWidth-thin: 0.0625rem; /** Scale token: 1px border width. Use when selecting an explicit size from the border-width scale. */
   --focus-outline-offset: -0.125rem; /** Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds */
   --focus-outline-width: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
-  --borderWidth-default: var(--borderWidth-thin); /** Default border width for most UI elements. Alias of borderWidth.thin (1px) */
+  --borderWidth-default: var(--borderWidth-thin); /** Semantic token: preferred default border width for standard component borders. Use this in normal component code unless a specific scale value is required. */
   --boxShadow-thick: inset 0 0 0 var(--borderWidth-thick); /** Thick shadow (2px) used instead of a border for emphasis without layout shift */
   --boxShadow-thicker: inset 0 0 0 var(--borderWidth-thicker); /** Thickest shadow (4px) used for high emphasis borders without layout shift. Use sparingly for maximum visual impact */
   --boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /** Thin shadow used instead of a border to prevent layout shift */

package/dist/css/functional/size/radius.css

@@ -1,7 +1,7 @@
 :root {
-  --borderRadius-full: 624.9375rem; /** Use this border radius for pill shaped elements */
-  --borderRadius-large: 0.75rem; /** Large border radius (12px). Use for larger containers, dialogs, or when more visual softness is desired. */
-  --borderRadius-medium: 0.375rem; /** Medium border radius (6px). The default choice for most buttons, cards, and containers */
-  --borderRadius-small: 0.1875rem; /** Small border radius (3px). Use for small variants of components or small UI elements like badges, tags, or anything below 16px in height */
-  --borderRadius-default: var(--borderRadius-medium); /** Default border radius for most UI elements. Alias of borderRadius.medium (6px). Use when in doubt */
+  --borderRadius-full: 624.9375rem; /** Shape token for fully rounded or pill-shaped elements. */
+  --borderRadius-large: 0.75rem; /** Scale token: 12px radius for larger surfaces or softer container treatments. */
+  --borderRadius-medium: 0.375rem; /** Scale token: 6px radius in the border-radius scale. Use when selecting a specific radius intentionally. */
+  --borderRadius-small: 0.1875rem; /** Scale token: 3px radius for compact UI elements or small component variants. */
+  --borderRadius-default: var(--borderRadius-medium); /** Semantic token: preferred default border radius for standard UI components. Use this in normal component code unless a specific radius is intentionally required. */
 }

package/dist/css/functional/spacing/space.css

@@ -0,0 +1,8 @@
+:root {
+  --space-lg: 1rem; /** Spacious spacing for major layout divisions and visual separation between content blocks. */
+  --space-md: 0.75rem; /** Relaxed spacing for breathing room and comfortable internal container space. */
+  --space-sm: 0.5rem; /** Default spacing for most UI elements. Comfortable visual density for standard component layouts. */
+  --space-xl: 1.5rem; /** Expansive spacing for large sections and top-level structure separation. */
+  --space-xs: 0.25rem; /** Compact spacing for small badges, tight internal spacing, and minimal breathing room. */
+  --space-xxs: 0.125rem; /** Ultra-compact spacing for form field separators and tight visual divisions. */
+}

package/dist/css/primitives.css

@@ -14,4 +14,5 @@
 @import './functional/size/size-fine.css';
 @import './functional/size/size.css';
 @import './functional/size/z-index.css';
+@import './functional/spacing/space.css';
 @import './functional/typography/typography.css';

package/dist/deprecated/theme.json

@@ -0,0 +1,5 @@
+{
+  "focus.outlineColor": "focus.outline-color",
+  "outline.focus.offset": "focus.outline-offset",
+  "outline.focus.width": "focus.outline-width"
+}

package/dist/deprecated.json

@@ -0,0 +1,5 @@
+{
+  "focus.outlineColor": "focus.outline-color",
+  "outline.focus.offset": "focus.outline-offset",
+  "outline.focus.width": "focus.outline-width"
+}

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

@@ -11,7 +11,7 @@
     "isSource": true,
     "original": {
       "$value": "{borderWidth.thin}",
-      "$description": "Default border width for most UI elements. Alias of borderWidth.thin (1px)",
+      "$description": "Semantic token: preferred default border width for standard component borders. Use this in normal component code unless a specific scale value is required.",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -26,7 +26,7 @@
     "path": ["borderWidth", "default"],
     "value": "0.0625rem",
     "type": "dimension",
-    "description": "Default border width for most UI elements. Alias of borderWidth.thin (1px)"
+    "description": "Semantic token: preferred default border width for standard component borders. Use this in normal component code unless a specific scale value is required."
   },
   "borderWidth-thick": {
     "key": "{borderWidth.thick}",
@@ -47,7 +47,7 @@
         "value": 2,
         "unit": "px"
       },
-      "$description": "Thick 2px border for emphasis. Use for focus indicators, selected states, or to emphasize important boundaries",
+      "$description": "Scale token: 2px border width for emphasis or focus states.",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -66,7 +66,7 @@
     "path": ["borderWidth", "thick"],
     "value": "0.125rem",
     "type": "dimension",
-    "description": "Thick 2px border for emphasis. Use for focus indicators, selected states, or to emphasize important boundaries"
+    "description": "Scale token: 2px border width for emphasis or focus states."
   },
   "borderWidth-thicker": {
     "key": "{borderWidth.thicker}",
@@ -83,7 +83,7 @@
         "value": 4,
         "unit": "px"
       },
-      "$description": "Extra thick 4px border for maximum emphasis. Use sparingly for high-contrast focus indicators or critical visual separators",
+      "$description": "Scale token: 4px border width for strong emphasis.",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -98,7 +98,7 @@
     "path": ["borderWidth", "thicker"],
     "value": "0.25rem",
     "type": "dimension",
-    "description": "Extra thick 4px border for maximum emphasis. Use sparingly for high-contrast focus indicators or critical visual separators"
+    "description": "Scale token: 4px border width for strong emphasis."
   },
   "borderWidth-thin": {
     "key": "{borderWidth.thin}",
@@ -115,7 +115,7 @@
         "value": 1,
         "unit": "px"
       },
-      "$description": "Standard 1px border width. Use for most borders, dividers, and outlines throughout the interface",
+      "$description": "Scale token: 1px border width. Use when selecting an explicit size from the border-width scale.",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -130,7 +130,7 @@
     "path": ["borderWidth", "thin"],
     "value": "0.0625rem",
     "type": "dimension",
-    "description": "Standard 1px border width. Use for most borders, dividers, and outlines throughout the interface"
+    "description": "Scale token: 1px border width. Use when selecting an explicit size from the border-width scale."
   },
   "boxShadow-thick": {
     "key": "{boxShadow.thick}",

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

@@ -14,7 +14,7 @@
     "isSource": true,
     "original": {
       "$value": "{borderRadius.medium}",
-      "$description": "Default border radius for most UI elements. Alias of borderRadius.medium (6px). Use when in doubt",
+      "$description": "Semantic token: preferred default border radius for standard UI components. Use this in normal component code unless a specific radius is intentionally required.",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -32,7 +32,7 @@
     "path": ["borderRadius", "default"],
     "value": "0.375rem",
     "type": "dimension",
-    "description": "Default border radius for most UI elements. Alias of borderRadius.medium (6px). Use when in doubt"
+    "description": "Semantic token: preferred default border radius for standard UI components. Use this in normal component code unless a specific radius is intentionally required."
   },
   "borderRadius-full": {
     "key": "{borderRadius.full}",
@@ -57,7 +57,7 @@
         "unit": "px"
       },
       "$type": "dimension",
-      "$description": "Use this border radius for pill shaped elements",
+      "$description": "Shape token for fully rounded or pill-shaped elements.",
       "$extensions": {
         "org.primer.figma": {
           "collection": "functional/size",
@@ -78,7 +78,7 @@
     "path": ["borderRadius", "full"],
     "value": "624.9375rem",
     "type": "dimension",
-    "description": "Use this border radius for pill shaped elements"
+    "description": "Shape token for fully rounded or pill-shaped elements."
   },
   "borderRadius-large": {
     "key": "{borderRadius.large}",
@@ -102,7 +102,7 @@
         "value": 12,
         "unit": "px"
       },
-      "$description": "Large border radius (12px). Use for larger containers, dialogs, or when more visual softness is desired.",
+      "$description": "Scale token: 12px radius for larger surfaces or softer container treatments.",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -124,7 +124,7 @@
     "path": ["borderRadius", "large"],
     "value": "0.75rem",
     "type": "dimension",
-    "description": "Large border radius (12px). Use for larger containers, dialogs, or when more visual softness is desired."
+    "description": "Scale token: 12px radius for larger surfaces or softer container treatments."
   },
   "borderRadius-medium": {
     "key": "{borderRadius.medium}",
@@ -148,7 +148,7 @@
         "value": 6,
         "unit": "px"
       },
-      "$description": "Medium border radius (6px). The default choice for most buttons, cards, and containers",
+      "$description": "Scale token: 6px radius in the border-radius scale. Use when selecting a specific radius intentionally.",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -170,7 +170,7 @@
     "path": ["borderRadius", "medium"],
     "value": "0.375rem",
     "type": "dimension",
-    "description": "Medium border radius (6px). The default choice for most buttons, cards, and containers"
+    "description": "Scale token: 6px radius in the border-radius scale. Use when selecting a specific radius intentionally."
   },
   "borderRadius-small": {
     "key": "{borderRadius.small}",
@@ -194,7 +194,7 @@
         "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",
+      "$description": "Scale token: 3px radius for compact UI elements or small component variants.",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -216,6 +216,6 @@
     "path": ["borderRadius", "small"],
     "value": "0.1875rem",
     "type": "dimension",
-    "description": "Small border radius (3px). Use for small variants of components or small UI elements like badges, tags, or anything below 16px in height"
+    "description": "Scale token: 3px radius for compact UI elements or small component variants."
   }
 }

package/dist/docs/functional/spacing/space.json

@@ -0,0 +1,224 @@
+{
+  "space-lg": {
+    "key": "{space.lg}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["gap", "padding", "margin", "section-gap", "container-margin"],
+        "rules": "Spacious (16px). Use for major layout divisions, visual separation between content blocks, and primary container margins."
+      },
+      "org.primer.figma": {
+        "collection": "functional/size",
+        "scopes": ["gap"]
+      }
+    },
+    "filePath": "src/tokens/functional/spacing/space.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.size.16}",
+      "$type": "dimension",
+      "$description": "Spacious spacing for major layout divisions and visual separation between content blocks.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["gap", "padding", "margin", "section-gap", "container-margin"],
+          "rules": "Spacious (16px). Use for major layout divisions, visual separation between content blocks, and primary container margins."
+        },
+        "org.primer.figma": {
+          "collection": "functional/size",
+          "scopes": ["gap"]
+        }
+      },
+      "key": "{space.lg}"
+    },
+    "name": "space-lg",
+    "attributes": {},
+    "path": ["space", "lg"],
+    "value": "1rem",
+    "type": "dimension",
+    "description": "Spacious spacing for major layout divisions and visual separation between content blocks."
+  },
+  "space-md": {
+    "key": "{space.md}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["gap", "padding", "margin", "panel-padding", "section-separation"],
+        "rules": "Relaxed (12px). Use for comfortable container padding, relaxed layouts, section separators, and breathing room in dense layouts."
+      },
+      "org.primer.figma": {
+        "collection": "functional/size",
+        "scopes": ["gap"]
+      }
+    },
+    "filePath": "src/tokens/functional/spacing/space.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.size.12}",
+      "$type": "dimension",
+      "$description": "Relaxed spacing for breathing room and comfortable internal container space.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["gap", "padding", "margin", "panel-padding", "section-separation"],
+          "rules": "Relaxed (12px). Use for comfortable container padding, relaxed layouts, section separators, and breathing room in dense layouts."
+        },
+        "org.primer.figma": {
+          "collection": "functional/size",
+          "scopes": ["gap"]
+        }
+      },
+      "key": "{space.md}"
+    },
+    "name": "space-md",
+    "attributes": {},
+    "path": ["space", "md"],
+    "value": "0.75rem",
+    "type": "dimension",
+    "description": "Relaxed spacing for breathing room and comfortable internal container space."
+  },
+  "space-sm": {
+    "key": "{space.sm}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["gap", "padding", "margin", "flex-gap", "grid-gap", "card-padding"],
+        "rules": "Default (8px). Use for standard component spacing, flex/grid item separation, container padding, and most element margins."
+      },
+      "org.primer.figma": {
+        "collection": "functional/size",
+        "scopes": ["gap"]
+      }
+    },
+    "filePath": "src/tokens/functional/spacing/space.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.size.8}",
+      "$type": "dimension",
+      "$description": "Default spacing for most UI elements. Comfortable visual density for standard component layouts.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["gap", "padding", "margin", "flex-gap", "grid-gap", "card-padding"],
+          "rules": "Default (8px). Use for standard component spacing, flex/grid item separation, container padding, and most element margins."
+        },
+        "org.primer.figma": {
+          "collection": "functional/size",
+          "scopes": ["gap"]
+        }
+      },
+      "key": "{space.sm}"
+    },
+    "name": "space-sm",
+    "attributes": {},
+    "path": ["space", "sm"],
+    "value": "0.5rem",
+    "type": "dimension",
+    "description": "Default spacing for most UI elements. Comfortable visual density for standard component layouts."
+  },
+  "space-xl": {
+    "key": "{space.xl}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["gap", "padding", "margin", "page-sections", "major-divisions"],
+        "rules": "Expansive (24px). Use for large section separation, top-level layout structure, major page divisions, and expansive breathing room."
+      },
+      "org.primer.figma": {
+        "collection": "functional/size",
+        "scopes": ["gap"]
+      }
+    },
+    "filePath": "src/tokens/functional/spacing/space.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.size.24}",
+      "$type": "dimension",
+      "$description": "Expansive spacing for large sections and top-level structure separation.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["gap", "padding", "margin", "page-sections", "major-divisions"],
+          "rules": "Expansive (24px). Use for large section separation, top-level layout structure, major page divisions, and expansive breathing room."
+        },
+        "org.primer.figma": {
+          "collection": "functional/size",
+          "scopes": ["gap"]
+        }
+      },
+      "key": "{space.xl}"
+    },
+    "name": "space-xl",
+    "attributes": {},
+    "path": ["space", "xl"],
+    "value": "1.5rem",
+    "type": "dimension",
+    "description": "Expansive spacing for large sections and top-level structure separation."
+  },
+  "space-xs": {
+    "key": "{space.xs}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["gap", "padding", "margin", "badge-spacing", "list-items"],
+        "rules": "Compact (4px). Use for small component spacing, tight list separations, badge padding, and minimal internal margins."
+      },
+      "org.primer.figma": {
+        "collection": "functional/size",
+        "scopes": ["gap"]
+      }
+    },
+    "filePath": "src/tokens/functional/spacing/space.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.size.4}",
+      "$type": "dimension",
+      "$description": "Compact spacing for small badges, tight internal spacing, and minimal breathing room.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["gap", "padding", "margin", "badge-spacing", "list-items"],
+          "rules": "Compact (4px). Use for small component spacing, tight list separations, badge padding, and minimal internal margins."
+        },
+        "org.primer.figma": {
+          "collection": "functional/size",
+          "scopes": ["gap"]
+        }
+      },
+      "key": "{space.xs}"
+    },
+    "name": "space-xs",
+    "attributes": {},
+    "path": ["space", "xs"],
+    "value": "0.25rem",
+    "type": "dimension",
+    "description": "Compact spacing for small badges, tight internal spacing, and minimal breathing room."
+  },
+  "space-xxs": {
+    "key": "{space.xxs}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["gap", "padding", "margin", "form-separators"],
+        "rules": "Ultra-compact (2px). Use for form field separators, tight dividers, and minimal breathing room between small elements."
+      },
+      "org.primer.figma": {
+        "collection": "functional/size",
+        "scopes": ["gap"]
+      }
+    },
+    "filePath": "src/tokens/functional/spacing/space.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.size.2}",
+      "$type": "dimension",
+      "$description": "Ultra-compact spacing for form field separators and tight visual divisions.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["gap", "padding", "margin", "form-separators"],
+          "rules": "Ultra-compact (2px). Use for form field separators, tight dividers, and minimal breathing room between small elements."
+        },
+        "org.primer.figma": {
+          "collection": "functional/size",
+          "scopes": ["gap"]
+        }
+      },
+      "key": "{space.xxs}"
+    },
+    "name": "space-xxs",
+    "attributes": {},
+    "path": ["space", "xxs"],
+    "value": "0.125rem",
+    "type": "dimension",
+    "description": "Ultra-compact spacing for form field separators and tight visual divisions."
+  }
+}

package/dist/fallbacks/functional/spacing/space.json

@@ -0,0 +1,8 @@
+{
+  "--space-xxs": "0.125rem",
+  "--space-xs": "0.25rem",
+  "--space-sm": "0.5rem",
+  "--space-md": "0.75rem",
+  "--space-lg": "1rem",
+  "--space-xl": "1.5rem"
+}