@usefragments/ui 1.6.0 → 2.0.0

package/src/components/Badge/index.tsx

@@ -8,19 +8,25 @@ import styles from "./Badge.module.scss";
  * Badge for status indicators, labels, and counts.
  * @see https://usefragments.com/components/badge
  */
+export type BadgeVariant = "soft" | "outline" | "ghost";
+export type BadgeTone = "neutral" | "accent" | "info" | "success" | "warning" | "danger";
+
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
   children: React.ReactNode;
-  /** Visual style variant.
+  /** Chrome family.
    *
-   * - `default` / semantic / `outline`: pill-shaped status badges for
-   *   tags, counts, or state.
-   * - `label`: hairline-bordered label on the shared control floor for
-   *   metadata pills inside dense dashboard rows. Pair with `dotColor`.
-   * - `dim`: transparent 32px filter-pill chrome used
-   *   for toolbar filter chips. Pair with `active` to mark the selected one.
-   * @default "default"
+   * - `soft` (default): tinted pill for tags, counts, or state.
+   * - `outline`: hairline-bordered, transparent — metadata pills inside
+   *   dense rows. Pair with `dotColor`.
+   * - `ghost`: transparent filter-pill chrome for toolbar filters. Pair with
+   *   `active` to mark the selected one.
+   * @default "soft"
    * @see https://usefragments.com/components/badge#variants */
-  variant?: "default" | "success" | "warning" | "error" | "info" | "outline" | "label" | "dim";
+  variant?: BadgeVariant;
+  /** Colour. `neutral` is the plain badge; the semantic tones paint the
+   * shared status ramp.
+   * @default "neutral" */
+  tone?: BadgeTone;
   /** Badge size.
    * @default "md" */
   size?: "sm" | "md" | "lg";
@@ -29,13 +35,13 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
   /** Breathe the status dot, for a state that is still happening rather than
    * one that has settled. Respects `prefers-reduced-motion`. */
   dotPulse?: boolean;
-  /** Color for the leading status dot. Applies to `variant="label"` (and the
-   * generic `dot` prop). Accepts any CSS color including CSS custom properties. */
+  /** Color for the leading status dot. Accepts any CSS color including CSS
+   * custom properties. */
   dotColor?: string;
   /** Icon element rendered before the label */
   icon?: React.ReactNode;
-  /** Marks `variant="dim"` as the currently selected filter. Has no effect on
-   * other variants. */
+  /** Marks `variant="ghost"` as the currently selected filter. Has no effect
+   * on other variants. */
   active?: boolean;
   /** Makes the badge removable. Called when dismiss button is clicked. */
   onRemove?: () => void;
@@ -44,10 +50,20 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
   announce?: boolean;
 }
 
+const TONE_CLASS: Record<BadgeTone, string | undefined> = {
+  neutral: undefined,
+  accent: styles.toneAccent,
+  info: styles.toneInfo,
+  success: styles.toneSuccess,
+  warning: styles.toneWarning,
+  danger: styles.toneDanger,
+};
+
 const BadgeRoot = React.forwardRef<HTMLSpanElement, BadgeProps>(function Badge(
   {
     children,
-    variant = "default",
+    variant = "soft",
+    tone = "neutral",
     size = "md",
     dot = false,
     dotPulse = false,
@@ -68,7 +84,8 @@ const BadgeRoot = React.forwardRef<HTMLSpanElement, BadgeProps>(function Badge(
     styles.badge,
     styles[size],
     styles[variant],
-    active && variant === "dim" && styles.active,
+    TONE_CLASS[tone],
+    active && variant === "ghost" && styles.active,
     className,
   ]
     .filter(Boolean)
@@ -81,8 +98,8 @@ const BadgeRoot = React.forwardRef<HTMLSpanElement, BadgeProps>(function Badge(
   // For status badges, include the status in the aria-label if not provided
   const effectiveAriaLabel =
     ariaLabel ||
-    (announce && variant !== "default" && variant !== "outline"
-      ? `${variant}: ${typeof children === "string" ? children : ""}`
+    (announce && tone !== "neutral"
+      ? `${tone}: ${typeof children === "string" ? children : ""}`
       : undefined);
 
   return (

package/src/components/BentoGrid/BentoGrid.contract.json

@@ -1,16 +1,9 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "BentoGrid",
-  "description": "Asymmetric grid layout with responsive spans and built-in surface styling for bento-style feature sections",
+  "description": "Asymmetric feature grid where tiles span different widths and heights.",
   "category": "layout",
-  "tags": [
-    "bento",
-    "grid",
-    "layout",
-    "responsive",
-    "feature-grid",
-    "asymmetric"
-  ],
+  "tags": ["bento", "grid", "layout", "responsive", "feature-grid", "asymmetric"],
   "status": "stable",
   "sourcePath": "src/components/BentoGrid/index.tsx",
   "exportName": "BentoGrid",
@@ -31,25 +24,14 @@
       "description": "Number of columns — auto-collapses responsively (3→2→1)",
       "default": "3",
       "required": false,
-      "values": [
-        "2",
-        "3",
-        "4"
-      ]
+      "values": ["2", "3", "4"]
     },
     "gap": {
       "type": "enum",
       "description": "Gap between grid items, mapped to spacing tokens",
       "default": "md",
       "required": false,
-      "values": [
-        "none",
-        "xs",
-        "sm",
-        "md",
-        "lg",
-        "xl"
-      ]
+      "values": ["none", "xs", "sm", "md", "lg", "xl"]
     },
     "style": {
       "type": "object",
@@ -59,22 +41,21 @@
   },
   "usage": {
     "when": [
-      "Asymmetric feature grids with hero + supporting items",
-      "Dashboard overviews where cards have different visual weight",
-      "Marketing pages with mixed-size content blocks",
-      "Any layout where items need per-breakpoint column/row spans"
+      "Feature grids with one hero tile and supporting tiles",
+      "Dashboards where cards carry different weight",
+      "Marketing sections with mixed-size blocks"
     ],
     "whenNot": [
-      "Uniform grids where all items are the same size (use Grid)",
-      "Form layouts with labeled fields (use Grid)",
-      "Simple stacked content (use Stack)"
+      "Uniform tiles of one size (use Grid)",
+      "Labelled form fields (use Grid)",
+      "A single column of content (use Stack)"
     ],
     "guidelines": [
-      "Use colSpan/rowSpan with responsive objects for layouts that adapt across breakpoints",
-      "The hero item typically uses colSpan={2} rowSpan={2} at lg and above",
-      "Items include built-in surface styling — no need to wrap children in Card",
-      "Grid auto-collapses: 3→2 columns below lg, all→1 column below sm",
-      "Root and Item forward DOM props (aria-*, data-*, handlers), and Item style merges with span CSS vars"
+      "colSpan and rowSpan take per-breakpoint objects",
+      "A hero tile is usually colSpan 2 and rowSpan 2 from lg up",
+      "Tiles carry their own surface — do not wrap them in Card",
+      "Columns collapse 3 to 2 below lg, and to 1 below sm",
+      "Keep source order equal to visual order for screen readers"
     ],
     "accessibility": [
       "Grid is purely visual — it does not affect reading order or semantics",
@@ -86,23 +67,18 @@
   "examples": [
     {
       "name": "Default",
-      "description": "Basic 3-column uniform bento grid",
-      "code": "<BentoGrid columns={3} gap=\"md\">\n  <BentoGrid.Item>Item 1</BentoGrid.Item>\n  <BentoGrid.Item>Item 2</BentoGrid.Item>\n  <BentoGrid.Item>Item 3</BentoGrid.Item>\n  <BentoGrid.Item>Item 4</BentoGrid.Item>\n  <BentoGrid.Item>Item 5</BentoGrid.Item>\n  <BentoGrid.Item>Item 6</BentoGrid.Item>\n</BentoGrid>"
+      "description": "Equal tiles, each on its own surface.",
+      "code": "import { BentoGrid } from '@/components/BentoGrid';\nimport { Box } from '@/components/Box';\n\n<Box width=\"100%\">\n  <BentoGrid columns={3} gap=\"md\">\n    <BentoGrid.Item>Item 1</BentoGrid.Item>\n    <BentoGrid.Item>Item 2</BentoGrid.Item>\n    <BentoGrid.Item>Item 3</BentoGrid.Item>\n    <BentoGrid.Item>Item 4</BentoGrid.Item>\n    <BentoGrid.Item>Item 5</BentoGrid.Item>\n    <BentoGrid.Item>Item 6</BentoGrid.Item>\n  </BentoGrid>\n</Box>"
     },
     {
       "name": "Hero Layout",
-      "description": "2×2 hero item with 4 supporting items in a 3-column grid",
-      "code": "<BentoGrid columns={3} gap=\"md\">\n  <BentoGrid.Item colSpan={{ base: 1, lg: 2 }} rowSpan={{ base: 1, lg: 2 }}>\n    Hero content\n  </BentoGrid.Item>\n  <BentoGrid.Item>Item 2</BentoGrid.Item>\n  <BentoGrid.Item>Item 3</BentoGrid.Item>\n  <BentoGrid.Item>Item 4</BentoGrid.Item>\n  <BentoGrid.Item>Item 5</BentoGrid.Item>\n</BentoGrid>"
+      "description": "One tile takes two columns and two rows; the rest fill around it.",
+      "code": "import { BentoGrid } from '@/components/BentoGrid';\nimport { Box } from '@/components/Box';\n\n<Box width=\"100%\">\n  <BentoGrid columns={3} gap=\"md\">\n    <BentoGrid.Item colSpan={{ base: 1, lg: 2 }} rowSpan={{ base: 1, lg: 2 }}>\n      Hero content\n    </BentoGrid.Item>\n    <BentoGrid.Item>Item 2</BentoGrid.Item>\n    <BentoGrid.Item>Item 3</BentoGrid.Item>\n    <BentoGrid.Item>Item 4</BentoGrid.Item>\n    <BentoGrid.Item>Item 5</BentoGrid.Item>\n  </BentoGrid>\n</Box>"
     },
     {
       "name": "Two Column",
-      "description": "2-column bento with a wide item",
-      "code": "<BentoGrid columns={2} gap=\"md\">\n  <BentoGrid.Item>Item 1</BentoGrid.Item>\n  <BentoGrid.Item>Item 2</BentoGrid.Item>\n  <BentoGrid.Item colSpan={2}>Wide item</BentoGrid.Item>\n  <BentoGrid.Item>Item 4</BentoGrid.Item>\n  <BentoGrid.Item>Item 5</BentoGrid.Item>\n</BentoGrid>"
-    },
-    {
-      "name": "Full-Width Banner",
-      "description": "3-column grid with a full-width item spanning all columns",
-      "code": "<BentoGrid columns={3} gap=\"md\">\n  <BentoGrid.Item>Item 1</BentoGrid.Item>\n  <BentoGrid.Item>Item 2</BentoGrid.Item>\n  <BentoGrid.Item>Item 3</BentoGrid.Item>\n  <BentoGrid.Item colSpan={3}>Full-width banner</BentoGrid.Item>\n</BentoGrid>"
+      "description": "colSpan stretches a tile across the whole row.",
+      "code": "import { BentoGrid } from '@/components/BentoGrid';\nimport { Box } from '@/components/Box';\n\n<Box width=\"100%\">\n  <BentoGrid columns={2} gap=\"md\">\n    <BentoGrid.Item>Item 1</BentoGrid.Item>\n    <BentoGrid.Item>Item 2</BentoGrid.Item>\n    <BentoGrid.Item colSpan={2}>Wide item</BentoGrid.Item>\n    <BentoGrid.Item>Item 4</BentoGrid.Item>\n    <BentoGrid.Item>Item 5</BentoGrid.Item>\n  </BentoGrid>\n</Box>"
     }
   ],
   "relations": [

package/src/components/BentoGrid/BentoGrid.module.scss

@@ -83,8 +83,8 @@
   --_col-span: var(--bento-col-span, 1);
   --_row-span: var(--bento-row-span, 1);
 
-  grid-column: span var(--_col-span);
-  grid-row: span var(--_row-span);
+  grid-column: span var(--_col-span, var(--bento-col-span, 1));
+  grid-row: span var(--_row-span, var(--bento-row-span, 1));
 
   @include breakpoint-sm {
     --_col-span: var(--bento-col-span-sm, var(--bento-col-span, 1));
@@ -129,12 +129,8 @@
 // Accessibility: High Contrast Mode
 // ============================================
 
-@media (prefers-contrast: more) {
-  .item {
-    border-color: var(--fui-text-primary, $fui-text-primary);
-    outline: var(--fui-stroke-hairline, 1px) solid var(--fui-text-primary, $fui-text-primary);
-    outline-offset: calc(-1 * var(--fui-stroke-default, 2px));
-  }
+.item {
+  @include high-contrast-outline;
 }
 
 // ============================================

package/src/components/Box/Box.contract.json

@@ -1,15 +1,9 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "Box",
-  "description": "Primitive layout component for applying spacing, backgrounds, and borders. A flexible container for building custom layouts.",
+  "description": "Applies spacing, background, border, and radius to any element.",
   "category": "layout",
-  "tags": [
-    "layout",
-    "container",
-    "spacing",
-    "primitive",
-    "box"
-  ],
+  "tags": ["layout", "container", "spacing", "primitive", "box"],
   "status": "stable",
   "sourcePath": "src/components/Box/index.tsx",
   "exportName": "Box",
@@ -54,122 +48,55 @@
       "description": "HTML element to render",
       "default": "div",
       "required": false,
-      "values": [
-        "div",
-        "section",
-        "article",
-        "aside",
-        "main",
-        "header",
-        "footer",
-        "nav",
-        "span"
-      ]
+      "values": ["div", "section", "article", "aside", "main", "header", "footer", "nav", "span"]
     },
     "padding": {
       "type": "enum",
       "description": "Padding on all sides",
       "required": false,
-      "values": [
-        "none",
-        "xs",
-        "sm",
-        "md",
-        "lg",
-        "xl"
-      ]
+      "values": ["none", "xs", "sm", "md", "lg", "xl"]
     },
     "paddingX": {
       "type": "enum",
       "description": "Horizontal padding",
       "required": false,
-      "values": [
-        "none",
-        "xs",
-        "sm",
-        "md",
-        "lg",
-        "xl"
-      ]
+      "values": ["none", "xs", "sm", "md", "lg", "xl"]
     },
     "paddingY": {
       "type": "enum",
       "description": "Vertical padding",
       "required": false,
-      "values": [
-        "none",
-        "xs",
-        "sm",
-        "md",
-        "lg",
-        "xl"
-      ]
+      "values": ["none", "xs", "sm", "md", "lg", "xl"]
     },
     "margin": {
       "type": "enum",
       "description": "Margin on all sides",
       "required": false,
-      "values": [
-        "none",
-        "xs",
-        "sm",
-        "md",
-        "lg",
-        "xl",
-        "auto"
-      ]
+      "values": ["none", "xs", "sm", "md", "lg", "xl", "auto"]
     },
     "marginX": {
       "type": "enum",
       "description": "Horizontal margin",
       "required": false,
-      "values": [
-        "none",
-        "xs",
-        "sm",
-        "md",
-        "lg",
-        "xl",
-        "auto"
-      ]
+      "values": ["none", "xs", "sm", "md", "lg", "xl", "auto"]
     },
     "marginY": {
       "type": "enum",
       "description": "Vertical margin",
       "required": false,
-      "values": [
-        "none",
-        "xs",
-        "sm",
-        "md",
-        "lg",
-        "xl",
-        "auto"
-      ]
+      "values": ["none", "xs", "sm", "md", "lg", "xl", "auto"]
     },
     "background": {
       "type": "enum",
       "description": "Background color",
       "required": false,
-      "values": [
-        "none",
-        "primary",
-        "secondary",
-        "tertiary",
-        "elevated"
-      ]
+      "values": ["none", "primary", "secondary", "tertiary", "elevated"]
     },
     "rounded": {
       "type": "enum",
       "description": "Border radius",
       "required": false,
-      "values": [
-        "none",
-        "sm",
-        "md",
-        "lg",
-        "full"
-      ]
+      "values": ["none", "sm", "md", "lg", "full"]
     },
     "border": {
       "type": "boolean",
@@ -205,60 +132,31 @@
       "type": "enum",
       "description": "Border color variant (requires border or directional border)",
       "required": false,
-      "values": [
-        "default",
-        "strong",
-        "accent",
-        "danger"
-      ]
+      "values": ["default", "strong", "accent", "danger"]
     },
     "shadow": {
       "type": "enum",
       "description": "Box shadow",
       "required": false,
-      "values": [
-        "none",
-        "sm",
-        "md",
-        "lg"
-      ]
+      "values": ["none", "sm", "md", "lg"]
     },
     "overflow": {
       "type": "enum",
       "description": "Overflow behavior",
       "required": false,
-      "values": [
-        "hidden",
-        "auto",
-        "scroll",
-        "visible"
-      ]
+      "values": ["hidden", "auto", "scroll", "visible"]
     },
     "color": {
       "type": "enum",
       "description": "Text color",
       "required": false,
-      "values": [
-        "primary",
-        "secondary",
-        "tertiary",
-        "accent",
-        "inverse"
-      ]
+      "values": ["primary", "secondary", "tertiary", "accent", "inverse"]
     },
     "display": {
       "type": "enum",
       "description": "Display type",
       "required": false,
-      "values": [
-        "none",
-        "block",
-        "inline",
-        "inline-block",
-        "flex",
-        "inline-flex",
-        "grid"
-      ]
+      "values": ["none", "block", "inline", "inline-block", "flex", "inline-flex", "grid"]
     },
     "width": {
       "type": "union",
@@ -303,23 +201,21 @@
   },
   "usage": {
     "when": [
-      "Applying consistent padding or margin to content sections",
-      "Creating bordered or elevated containers",
-      "Wrapping content with semantic HTML elements",
-      "Building custom layouts not covered by Stack or Grid"
+      "Padding or insetting a section of content",
+      "Bordered or elevated containers",
+      "Rendering a semantic element with design-system spacing"
     ],
     "whenNot": [
-      "Horizontal or vertical stacking (use Stack)",
-      "Grid-based layouts (use Grid)",
-      "Card-like containers with header/body/footer (use Card)",
-      "Simple text styling (use Text)"
+      "Spacing a row or column of siblings (use Stack)",
+      "Two-dimensional layouts (use Grid)",
+      "Header/body/footer surfaces (use Card)",
+      "Styling text alone (use Text)"
     ],
     "guidelines": [
-      "Use padding props instead of inline styles for consistency",
-      "Choose semantic HTML elements (section, article) where appropriate",
-      "Combine with Stack or Grid for complex layouts",
-      "Use background variants from the design system, not custom colors",
-      "Box forwards DOM props (id, role, aria-*, data-*, event handlers) to the rendered element"
+      "Use the padding and margin props, never inline styles",
+      "Set as=\"section\" or as=\"article\" so the markup stays semantic",
+      "Backgrounds come from the token scale — no custom colours",
+      "Reach for Stack or Grid before nesting Boxes for layout"
     ],
     "accessibility": [
       "Choose semantic as prop values for proper document structure",
@@ -330,43 +226,43 @@
   "examples": [
     {
       "name": "Default",
-      "description": "Basic box with padding",
+      "description": "Padding, background, and radius in one element.",
       "code": "<Box padding=\"md\" background=\"secondary\" rounded=\"md\">\n  Content with padding and background\n</Box>"
     },
     {
       "name": "With Border",
-      "description": "Bordered container",
+      "description": "A hairline border instead of a filled background.",
       "code": "<Box padding=\"lg\" border rounded=\"md\">\n  Bordered content area\n</Box>"
     },
     {
       "name": "Directional Padding",
-      "description": "Different horizontal and vertical padding",
+      "description": "Horizontal and vertical padding set separately.",
       "code": "<Box paddingX=\"xl\" paddingY=\"sm\" background=\"tertiary\" rounded=\"sm\">\n  Wide horizontal padding, short vertical\n</Box>"
     },
     {
       "name": "Centered with Auto Margin",
-      "description": "Centered content using margin auto",
-      "code": "<Box padding=\"md\" marginX=\"auto\" background=\"elevated\" rounded=\"lg\" style={{ maxWidth: '300px' }}>\n  Centered content\n</Box>"
+      "description": "marginX=\"auto\" centres a fixed-width box in a wider parent.",
+      "code": "import { Box } from '@/components/Box';\n\n<Box width=\"100%\" border rounded=\"md\" padding=\"md\">\n  <Box padding=\"md\" marginX=\"auto\" width=\"240px\" background=\"elevated\" rounded=\"lg\">\n    Centred by auto margin\n  </Box>\n</Box>"
     },
     {
       "name": "Directional Borders",
-      "description": "Individual border sides",
+      "description": "Border on chosen sides only.",
       "code": "<Box padding=\"md\" borderTop borderBottom>\n  Top and bottom borders only\n</Box>"
     },
     {
       "name": "With Shadow",
-      "description": "Box with shadow elevation",
+      "description": "Shadow lifts the surface off the page.",
       "code": "<Box padding=\"lg\" rounded=\"md\" shadow=\"md\" background=\"primary\">\n  Elevated content with shadow\n</Box>"
     },
     {
       "name": "Overflow Hidden",
-      "description": "Content overflow clipped",
-      "code": "<Box padding=\"md\" overflow=\"hidden\" border rounded=\"md\" style={{ maxHeight: '60px' }}>\n  This box clips overflowing content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n</Box>"
+      "description": "Content past the box's height is clipped, not scrolled.",
+      "code": "import { Box } from '@/components/Box';\n\n<Box padding=\"md\" overflow=\"hidden\" border rounded=\"md\" width=\"320px\" height=\"72px\">\n  This box clips its overflowing content. Lorem ipsum dolor sit amet, consectetur\n  adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna\n  aliqua, and this final sentence never becomes visible.\n</Box>"
     },
     {
       "name": "Text Colors",
-      "description": "Text color variants",
-      "code": "<Box padding=\"md\" display=\"flex\" style={{ gap: '16px' }}>\n  <Box color=\"primary\">Primary</Box>\n  <Box color=\"secondary\">Secondary</Box>\n  <Box color=\"tertiary\">Tertiary</Box>\n  <Box color=\"accent\">Accent</Box>\n</Box>"
+      "description": "Text colour tokens, from strongest to accent.",
+      "code": "import { Box } from '@/components/Box';\nimport { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"md\">\n  <Box color=\"primary\">Primary</Box>\n  <Box color=\"secondary\">Secondary</Box>\n  <Box color=\"tertiary\">Tertiary</Box>\n  <Box color=\"accent\">Accent</Box>\n</Stack>"
     }
   ],
   "relations": [
@@ -404,15 +300,11 @@
       "height/minHeight/maxHeight: string|number - sizing",
       "All standard HTMLElement props are forwarded to the rendered element"
     ],
-    "a11yRules": [
-      "A11Y_SEMANTIC_HTML"
-    ]
+    "a11yRules": ["A11Y_SEMANTIC_HTML"]
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": [
-      "Root"
-    ]
+    "subComponents": ["Root"]
   },
   "provenance": {
     "source": "migrated",

package/src/components/Box/Box.module.scss

@@ -1,5 +1,6 @@
 @use "../../recipes/layout";
 @use "../../tokens/variables" as *;
+@use "../../tokens/measurements.generated" as measurements;
 
 .box {
   box-sizing: border-box;
@@ -181,7 +182,7 @@
 
 // Border radius
 .rounded-none {
-  border-radius: 0;
+  border-radius: var(--fui-radius-none, #{$fui-radius-none});
 }
 .rounded-sm {
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
@@ -198,21 +199,21 @@
 
 // Border
 .border {
-  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
+  border: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid var(--fui-border, $fui-border);
 }
 
 // Directional borders
 .borderTop {
-  border-top: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
+  border-top: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid var(--fui-border, $fui-border);
 }
 .borderBottom {
-  border-bottom: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
+  border-bottom: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid var(--fui-border, $fui-border);
 }
 .borderLeft {
-  border-left: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
+  border-left: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid var(--fui-border, $fui-border);
 }
 .borderRight {
-  border-right: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
+  border-right: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid var(--fui-border, $fui-border);
 }
 
 // Border color