@usefragments/ui 1.5.3 → 1.6.0

package/src/tokens/_mixins.scss

@@ -51,56 +51,6 @@
   }
 }
 
-// Enforce minimum pointer target dimensions for interactive controls.
-@mixin min-target-size($size: var(--fui-target-size-min, #{$fui-target-size-min})) {
-  min-width: $size;
-  min-height: $size;
-}
-
-// Centered interactive hit area with minimum dimensions.
-@mixin touch-target($size: var(--fui-target-size-min, #{$fui-target-size-min})) {
-  @include min-target-size($size);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-// Typography base
-@mixin text-base {
-  font-family: var(--fui-font-sans, #{$fui-font-sans});
-  font-size: var(--fui-font-size-sm, #{$fui-font-size-sm});
-  line-height: var(--fui-line-height-normal, #{$fui-line-height-normal});
-  color: var(--fui-text-primary, #{$fui-text-primary});
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-// Label text
-@mixin label-text {
-  font-family: var(--fui-font-sans, #{$fui-font-sans});
-  font-size: var(--fui-font-size-sm, #{$fui-font-size-sm});
-  font-weight: var(--fui-font-weight-medium, #{$fui-font-weight-medium});
-  color: var(--fui-text-primary, #{$fui-text-primary});
-}
-
-// Helper/caption text
-@mixin helper-text {
-  font-family: var(--fui-font-sans, #{$fui-font-sans});
-  font-size: var(--fui-font-size-xs, #{$fui-font-size-xs});
-  color: var(--fui-text-secondary, #{$fui-text-secondary});
-}
-
-// Section label text (e.g. sidebar headings, TOC label).
-// 11px uppercase reads cleanly where 10px starts to crush; semibold + 0.06em
-// tracking gives the label enough weight to register without shouting.
-@mixin section-label-text {
-  @include helper-text;
-  font-size: 0.786rem; // 11px at 14px root
-  font-weight: var(--fui-font-weight-semibold, #{$fui-font-weight-semibold});
-  text-transform: uppercase;
-  letter-spacing: var(--fui-letter-spacing-wide, #{$fui-letter-spacing-wide});
-}
-
 // Card surface
 @mixin surface-elevated {
   background-color: var(--fui-bg-elevated, #{$fui-bg-elevated});
@@ -108,149 +58,6 @@
   border-radius: var(--fui-radius-lg, #{$fui-radius-lg});
 }
 
-// Dropdown / popup container base styles.
-// Compose with @include surface-elevated for the full treatment.
-// Consumer sets min-width and optionally max-height/overflow.
-@mixin popup-container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--fui-popup-row-gap, #{$fui-popup-row-gap});
-  padding: var(--fui-popup-padding, #{$fui-popup-padding});
-  box-shadow: var(--fui-shadow-md, #{$fui-shadow-md});
-}
-
-// Scroll viewport for the popups that peek — Select, Listbox, Combobox. Sets
-// `--_popup-scroll-max-h`; the consumer applies it, because Base UI puts an
-// inline `max-height: 100%` on some of these popups that only `!important` beats.
-//
-// Row *pitch*, not row height: `popup-container` is a flex column, so N rows
-// occupy N pitches less the trailing gap. (A grouped popup nests its rows one
-// level down, where that gap does not reach, so the peek there runs a few
-// pixels shy of half a row — visible only as a slightly smaller sliver.)
-// Every term here reads the token that actually draws it — which is the point.
-// Written out longhand in three separate stylesheets, this calc billed
-// $fui-space-2 of vertical padding for a row `popup-item` pads with
-// $fui-space-1, deriving a 46px row against a real 32px one, so all three
-// popups outgrew their own content and never scrolled at all.
-@mixin popup-scroll-viewport {
-  --_popup-row-h: calc(
-    var(--fui-popup-item-font-size, #{$fui-popup-item-font-size}) *
-      var(--fui-line-height-normal, #{$fui-line-height-normal}) +
-      var(--fui-popup-item-padding-block, #{$fui-popup-item-padding-block}) * 2 +
-      var(--fui-popup-row-gap, #{$fui-popup-row-gap})
-  );
-
-  // The + 2px is the 1px border `surface-elevated` draws top and bottom: these
-  // popups are border-box, so max-height pays for the frame before the rows.
-  --_popup-scroll-max-h: calc(
-    var(--_popup-row-h) *
-      var(--fui-select-max-items, 4.5) - var(--fui-popup-row-gap, #{$fui-popup-row-gap}) +
-      var(--fui-popup-padding, #{$fui-popup-padding}) * 2 + 2px
-  );
-}
-
-// ============================================
-// Popup / menu item — canonical interaction model
-// ============================================
-// Shared by every list-popup surface (Combobox, Select, Menu, Listbox, Command,
-// NavigationMenu) so hover / keyboard-active / selected / disabled read identically
-// everywhere, in both light and dark mode.
-//
-//   rest        → transparent
-//   highlight   → @include popup-item-highlight  (pointer hover AND keyboard-active —
-//                 one neutral indicator; map [data-highlighted], :hover, .active to it)
-//   selected    → @include popup-item-selected   (accent-tinted + inset accent ring)
-//   disabled    → @include popup-item-disabled
-//
-// Base UI components set [data-highlighted] on both hover and keyboard nav, so a single
-// `&[data-highlighted] { @include popup-item-highlight; }` covers both. Custom popups
-// should map `&:hover, &.<active>, &[data-highlighted]` to the same mixin.
-
-// Dropdown/popup item base. Includes button-reset and text-base, then steps the
-// size down to the popup scale — see $fui-popup-item-font-size. Select, Listbox
-// and Combobox size their scroll viewport from the same token, so read it there
-// too rather than re-deriving an item height from the body size.
-@mixin popup-item {
-  @include button-reset;
-  @include text-base;
-
-  font-size: var(--fui-popup-item-font-size, #{$fui-popup-item-font-size});
-  display: flex;
-  align-items: center;
-  gap: var(--fui-space-1, #{$fui-space-1});
-  width: 100%;
-  padding: var(--fui-popup-item-padding-block, #{$fui-popup-item-padding-block})
-    var(--fui-popup-item-padding-inline, #{$fui-popup-item-padding-inline});
-  border-radius: var(--fui-radius-sm, #{$fui-radius-sm});
-  cursor: pointer;
-  outline: none;
-  transition:
-    background-color var(--fui-transition-fast, #{$fui-transition-fast}),
-    color var(--fui-transition-fast, #{$fui-transition-fast});
-}
-
-// Active item — pointer-hover and keyboard-active share this single neutral highlight.
-// Falls back to --fui-bg-active then the SCSS value where --fui-bg-highlight is unset.
-@mixin popup-item-highlight {
-  background-color: var(--fui-bg-highlight, var(--fui-bg-active, #{$fui-bg-active}));
-  color: var(--fui-text-primary, #{$fui-text-primary});
-}
-
-// Disabled item — uniform across every popup.
-@mixin popup-item-disabled {
-  opacity: 0.5;
-  pointer-events: none;
-  cursor: default;
-}
-
-// Group label within a dropdown/popup.
-@mixin popup-group-label {
-  padding: var(--fui-space-1, #{$fui-space-1}) var(--fui-space-2, #{$fui-space-2});
-  font-size: var(--fui-font-size-xs, #{$fui-font-size-xs});
-  font-weight: var(--fui-font-weight-medium, #{$fui-font-weight-medium});
-  color: var(--fui-text-tertiary, #{$fui-text-tertiary});
-  text-transform: uppercase;
-  letter-spacing: var(--fui-letter-spacing-wide, #{$fui-letter-spacing-wide});
-}
-
-// Shared shell for field-like controls.
-@mixin field-shell {
-  background-color: var(--fui-field-bg, transparent);
-  border: 1px solid var(--fui-field-border, var(--fui-border-strong, #{$fui-border-strong}));
-  border-radius: var(--fui-radius-md, #{$fui-radius-md});
-  transition:
-    background-color var(--fui-transition-fast, #{$fui-transition-fast}),
-    border-color var(--fui-transition-fast, #{$fui-transition-fast}),
-    box-shadow var(--fui-transition-fast, #{$fui-transition-fast}),
-    color var(--fui-transition-fast, #{$fui-transition-fast});
-
-  &:hover:not(:disabled):not([data-disabled]):not(:focus-visible) {
-    border-color: var(--fui-field-border-hover, var(--fui-text-tertiary, #{$fui-text-tertiary}));
-  }
-
-  &:focus:not(:disabled):not([data-disabled]) {
-    border-color: var(--fui-field-border-focus, var(--fui-color-accent, #{$fui-color-accent}));
-  }
-
-  &:disabled,
-  &[data-disabled] {
-    background-color: var(--fui-field-bg-disabled, var(--fui-bg-tertiary, #{$fui-bg-tertiary}));
-    color: var(--fui-text-tertiary, #{$fui-text-tertiary});
-  }
-}
-
-@mixin field-shell-focus {
-  @include focus-ring;
-  border-color: var(--fui-field-border-focus, var(--fui-color-accent, #{$fui-color-accent}));
-}
-
-@mixin popup-item-selected {
-  background-color: var(--fui-field-selection-bg, var(--fui-bg-hover, #{$fui-bg-hover}));
-  color: var(--fui-field-selection-color, var(--fui-text-primary, #{$fui-text-primary}));
-  box-shadow: inset 0 0 0 1px
-    var(--fui-field-selection-border, var(--fui-color-accent, #{$fui-color-accent}));
-}
-
 @mixin form-group-surface {
   background-color: var(--fui-form-group-bg, var(--fui-bg-secondary, #{$fui-bg-secondary}));
   border: 1px solid var(--fui-form-group-border, var(--fui-border, #{$fui-border}));
@@ -421,86 +228,3 @@
     0 10px 24px -16px
       color-mix(in srgb, var(--fui-color-danger-text, #{$fui-color-danger-text}) 28%, transparent);
 }
-
-// ============================================
-// Size Variant Mixins
-// ============================================
-
-/// Control size mixin for standardized sizing across buttons, inputs, selects
-/// @param {String} $size - Size variant: 'sm', 'md', or 'lg'
-/// @param {String} $component - Component type: 'button', 'input', or 'select'
-@mixin control-size($size, $component: "button") {
-  // Global accessibility floor: component-specific height tokens may be customized,
-  // but controls should not shrink below the minimum target size.
-  min-height: var(--fui-target-size-min, #{$fui-target-size-min});
-
-  @if $size == "sm" {
-    @if $component == "input" {
-      height: var(--fui-input-height-sm, #{$fui-input-height-sm});
-      padding: 0 var(--fui-space-2, #{$fui-space-2});
-      font-size: var(--fui-font-size-xs, #{$fui-font-size-xs});
-    } @else {
-      height: var(--fui-button-height-sm, #{$fui-button-height-sm});
-      padding: 0 var(--fui-space-2, #{$fui-space-2});
-      font-size: var(--fui-font-size-xs, #{$fui-font-size-xs});
-    }
-  } @else if $size == "md" {
-    @if $component == "input" {
-      height: var(--fui-input-height, #{$fui-input-height});
-      padding: 0 var(--fui-space-3, #{$fui-space-3});
-      font-size: var(--fui-font-size-sm, #{$fui-font-size-sm});
-    } @else {
-      height: var(--fui-button-height-md, #{$fui-button-height-md});
-      padding: 0 var(--fui-space-4, #{$fui-space-4});
-      font-size: var(--fui-font-size-sm, #{$fui-font-size-sm});
-    }
-  } @else if $size == "lg" {
-    @if $component == "input" {
-      height: var(--fui-input-height-lg, #{$fui-input-height-lg});
-      padding: 0 var(--fui-space-4, #{$fui-space-4});
-      font-size: var(--fui-font-size-base, #{$fui-font-size-base});
-    } @else {
-      height: var(--fui-button-height-lg, #{$fui-button-height-lg});
-      padding: 0 var(--fui-space-5, #{$fui-space-5});
-      font-size: var(--fui-font-size-base, #{$fui-font-size-base});
-    }
-  }
-}
-
-// ============================================
-// Form Field Wrapper
-// Generates .wrapper, .label, .helper, .helperError, .errorMessage
-// for consistent form field layout across all form components.
-// ============================================
-
-@mixin form-field-wrapper {
-  .wrapper {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .label {
-    @include label-text;
-    margin-bottom: var(--fui-space-1, #{$fui-space-1});
-  }
-
-  .required {
-    color: var(--fui-color-danger-text, #{$fui-color-danger-text});
-    margin-left: 2px;
-  }
-
-  .helper {
-    @include helper-text;
-    margin-top: var(--fui-space-1, #{$fui-space-1});
-  }
-
-  .helperError {
-    color: var(--fui-color-danger-text, #{$fui-color-danger-text});
-  }
-
-  .errorMessage {
-    font-size: var(--fui-font-size-xs, #{$fui-font-size-xs});
-    color: var(--fui-color-danger-text, #{$fui-color-danger-text});
-    margin-top: var(--fui-space-1, #{$fui-space-1});
-  }
-}

package/src/tokens/_property-registrations.scss

@@ -11,7 +11,7 @@
 // Usage: @include fui-property-registrations; (before fui-css-variables)
 // ============================================
 
-@use 'variables' as *;
+@use "variables" as *;
 
 // ============================================
 // Color Tokens
@@ -19,7 +19,7 @@
 
 @mixin register-color($name, $initial) {
   @property --fui-#{$name} {
-    syntax: '<color>';
+    syntax: "<color>";
     initial-value: #{$initial};
     inherits: true;
   }
@@ -31,7 +31,7 @@
 
 @mixin register-length($name, $initial) {
   @property --fui-#{$name} {
-    syntax: '<length>';
+    syntax: "<length>";
     initial-value: #{$initial};
     inherits: true;
   }
@@ -43,7 +43,7 @@
 
 @mixin register-number($name, $initial) {
   @property --fui-#{$name} {
-    syntax: '<number>';
+    syntax: "<number>";
     initial-value: #{$initial};
     inherits: true;
   }
@@ -58,154 +58,158 @@
   // Seed Colors — configurable brand/semantic seeds
   // Runtime derivation via relative color syntax operates in OKLCH space.
   // ------------------------------------------
-  @include register-color('seed-brand', $fui-color-accent);
-  @include register-color('seed-danger', $fui-color-danger);
-  @include register-color('seed-success', $fui-color-success);
-  @include register-color('seed-warning', $fui-color-warning);
-  @include register-color('seed-info', $fui-color-info);
+  @include register-color("seed-brand", $fui-color-accent);
+  @include register-color("seed-danger", $fui-color-danger);
+  @include register-color("seed-success", $fui-color-success);
+  @include register-color("seed-warning", $fui-color-warning);
+  @include register-color("seed-info", $fui-color-info);
 
   // ------------------------------------------
   // Colors — Accent (animatable for theme transitions)
   // ------------------------------------------
-  @include register-color('color-accent', $fui-color-accent);
-  @include register-color('color-accent-hover', $fui-color-accent-hover);
-  @include register-color('color-accent-active', $fui-color-accent-active);
+  @include register-color("color-accent", $fui-color-accent);
+  @include register-color("color-accent-hover", $fui-color-accent-hover);
+  @include register-color("color-accent-active", $fui-color-accent-active);
 
   // ------------------------------------------
   // Colors — Semantic
   // ------------------------------------------
-  @include register-color('color-danger', $fui-color-danger);
-  @include register-color('color-danger-hover', $fui-color-danger-hover);
-  @include register-color('color-success', $fui-color-success);
-  @include register-color('color-warning', $fui-color-warning);
-  @include register-color('color-info', $fui-color-info);
+  @include register-color("color-danger", $fui-color-danger);
+  @include register-color("color-danger-hover", $fui-color-danger-hover);
+  @include register-color("color-success", $fui-color-success);
+  @include register-color("color-warning", $fui-color-warning);
+  @include register-color("color-info", $fui-color-info);
 
   // ------------------------------------------
   // Colors — Semantic Backgrounds
   // ------------------------------------------
-  @include register-color('color-danger-bg', $fui-color-danger-bg);
-  @include register-color('color-success-bg', $fui-color-success-bg);
-  @include register-color('color-warning-bg', $fui-color-warning-bg);
-  @include register-color('color-info-bg', $fui-color-info-bg);
+  @include register-color("color-danger-bg", $fui-color-danger-bg);
+  @include register-color("color-success-bg", $fui-color-success-bg);
+  @include register-color("color-warning-bg", $fui-color-warning-bg);
+  @include register-color("color-info-bg", $fui-color-info-bg);
 
   // ------------------------------------------
   // Colors — Semantic Text
   // ------------------------------------------
-  @include register-color('color-danger-text', $fui-color-danger-text);
-  @include register-color('color-success-text', $fui-color-success-text);
-  @include register-color('color-warning-text', $fui-color-warning-text);
-  @include register-color('color-info-text', $fui-color-info-text);
+  @include register-color("color-danger-text", $fui-color-danger-text);
+  @include register-color("color-success-text", $fui-color-success-text);
+  @include register-color("color-warning-text", $fui-color-warning-text);
+  @include register-color("color-info-text", $fui-color-info-text);
 
   // ------------------------------------------
   // Colors — Surfaces
   // ------------------------------------------
-  @include register-color('bg-primary', $fui-bg-primary);
-  @include register-color('bg-secondary', $fui-bg-secondary);
-  @include register-color('bg-tertiary', $fui-bg-tertiary);
-  @include register-color('bg-elevated', $fui-bg-elevated);
-  @include register-color('bg-subtle', $fui-bg-subtle);
-  @include register-color('bg-hover', $fui-bg-hover);
-  @include register-color('bg-active', $fui-bg-active);
-  @include register-color('body-bg', $fui-body-bg);
-  @include register-color('main-bg', $fui-main-bg);
+  @include register-color("bg-primary", $fui-bg-primary);
+  @include register-color("bg-secondary", $fui-bg-secondary);
+  @include register-color("bg-tertiary", $fui-bg-tertiary);
+  @include register-color("bg-elevated", $fui-bg-elevated);
+  @include register-color("bg-subtle", $fui-bg-subtle);
+  @include register-color("bg-hover", $fui-bg-hover);
+  @include register-color("bg-active", $fui-bg-active);
+  @include register-color("body-bg", $fui-body-bg);
+  @include register-color("main-bg", $fui-main-bg);
 
   // ------------------------------------------
   // Colors — Text
   // ------------------------------------------
-  @include register-color('text-primary', $fui-text-primary);
-  @include register-color('text-secondary', $fui-text-secondary);
-  @include register-color('text-tertiary', $fui-text-tertiary);
-  @include register-color('text-inverse', $fui-text-inverse);
+  @include register-color("text-primary", $fui-text-primary);
+  @include register-color("text-secondary", $fui-text-secondary);
+  @include register-color("text-tertiary", $fui-text-tertiary);
+  @include register-color("text-inverse", $fui-text-inverse);
 
   // ------------------------------------------
   // Colors — Borders
   // ------------------------------------------
-  @include register-color('border', $fui-border);
-  @include register-color('border-default', $fui-border-default);
-  @include register-color('border-strong', $fui-border-strong);
+  @include register-color("border", $fui-border);
+  @include register-color("border-default", $fui-border-default);
+  @include register-color("border-strong", $fui-border-strong);
 
   // ------------------------------------------
   // Colors — Focus
   // ------------------------------------------
-  @include register-color('focus-ring-color', $fui-focus-ring-color);
+  @include register-color("focus-ring-color", $fui-focus-ring-color);
 
   // ------------------------------------------
   // Colors — Scrollbar
   // ------------------------------------------
-  @include register-color('scrollbar-track', $fui-scrollbar-track);
-  @include register-color('scrollbar-thumb', $fui-scrollbar-thumb);
-  @include register-color('scrollbar-thumb-hover', $fui-scrollbar-thumb-hover);
+  @include register-color("scrollbar-track", $fui-scrollbar-track);
+  @include register-color("scrollbar-thumb", $fui-scrollbar-thumb);
+  @include register-color("scrollbar-thumb-hover", $fui-scrollbar-thumb-hover);
 
   // ------------------------------------------
   // Spacing — Lengths
   // ------------------------------------------
-  @include register-length('space-px', $fui-space-px);
-  @include register-length('space-0-5', $fui-space-0-5);
-  @include register-length('space-0-75', $fui-space-0-75);
-  @include register-length('space-1', $fui-space-1);
-  @include register-length('space-2', $fui-space-2);
-  @include register-length('space-3', $fui-space-3);
-  @include register-length('space-4', $fui-space-4);
-  @include register-length('space-5', $fui-space-5);
-  @include register-length('space-6', $fui-space-6);
-  @include register-length('space-8', $fui-space-8);
-  @include register-length('space-10', $fui-space-10);
-  @include register-length('space-12', $fui-space-12);
+  @include register-length("space-px", $fui-space-px);
+  @include register-length("space-0-5", $fui-space-0-5);
+  @include register-length("space-0-75", $fui-space-0-75);
+  @include register-length("space-1", $fui-space-1);
+  @include register-length("space-2", $fui-space-2);
+  @include register-length("space-3", $fui-space-3);
+  @include register-length("space-4", $fui-space-4);
+  @include register-length("space-5", $fui-space-5);
+  @include register-length("space-6", $fui-space-6);
+  @include register-length("space-8", $fui-space-8);
+  @include register-length("space-10", $fui-space-10);
+  @include register-length("space-12", $fui-space-12);
 
   // ------------------------------------------
   // Border Radius — Lengths
   // ------------------------------------------
-  @include register-length('radius-sm', $fui-radius-sm);
-  @include register-length('radius-md', $fui-radius-md);
-  @include register-length('radius-lg', $fui-radius-lg);
-  @include register-length('radius-xl', $fui-radius-xl);
-  @include register-length('radius-full', $fui-radius-full);
+  @include register-length("radius-sm", $fui-radius-sm);
+  @include register-length("radius-md", $fui-radius-md);
+  @include register-length("radius-lg", $fui-radius-lg);
+  @include register-length("radius-xl", $fui-radius-xl);
+  @include register-length("radius-full", $fui-radius-full);
 
   // ------------------------------------------
   // Component Heights — Lengths
   // ------------------------------------------
-  @include register-length('button-height-xs', $fui-button-height-xs);
-  @include register-length('button-height-sm', $fui-button-height-sm);
-  @include register-length('button-height-md', $fui-button-height-md);
-  @include register-length('button-height-lg', $fui-button-height-lg);
-  @include register-length('input-height', $fui-input-height);
-  @include register-length('input-height-sm', $fui-input-height-sm);
-  @include register-length('input-height-lg', $fui-input-height-lg);
-  @include register-length('target-size-min', $fui-target-size-min);
+  @include register-length("control-height-xs", $fui-control-height-xs);
+  @include register-length("control-height-sm", $fui-control-height-sm);
+  @include register-length("control-height-md", $fui-control-height-md);
+  @include register-length("control-height-lg", $fui-control-height-lg);
+  @include register-length("button-height-xs", $fui-button-height-xs);
+  @include register-length("button-height-sm", $fui-button-height-sm);
+  @include register-length("button-height-md", $fui-button-height-md);
+  @include register-length("button-height-lg", $fui-button-height-lg);
+  @include register-length("input-height", $fui-input-height);
+  @include register-length("input-height-sm", $fui-input-height-sm);
+  @include register-length("input-height-lg", $fui-input-height-lg);
+  @include register-length("target-size-min", $fui-target-size-min);
 
   // ------------------------------------------
   // Focus Ring — Lengths
   // ------------------------------------------
-  @include register-length('focus-ring-offset', $fui-focus-ring-offset);
-  @include register-length('focus-ring-width', $fui-focus-ring-width);
-  @include register-length('scrollbar-width', $fui-scrollbar-width);
+  @include register-length("focus-ring-offset", $fui-focus-ring-offset);
+  @include register-length("focus-ring-width", $fui-focus-ring-width);
+  @include register-length("scrollbar-width", $fui-scrollbar-width);
 
   // ------------------------------------------
   // Typography — Numbers (unitless, animatable)
   // ------------------------------------------
-  @include register-number('font-weight-normal', $fui-font-weight-normal);
-  @include register-number('font-weight-medium', $fui-font-weight-medium);
-  @include register-number('font-weight-semibold', $fui-font-weight-semibold);
-  @include register-number('font-weight-bold', $fui-font-weight-bold);
-  @include register-number('line-height-tight', $fui-line-height-tight);
-  @include register-number('line-height-normal', $fui-line-height-normal);
-  @include register-number('line-height-relaxed', $fui-line-height-relaxed);
-  @include register-number('line-height-display', $fui-line-height-display);
-  @include register-number('line-height-prose', $fui-line-height-prose);
+  @include register-number("font-weight-normal", $fui-font-weight-normal);
+  @include register-number("font-weight-medium", $fui-font-weight-medium);
+  @include register-number("font-weight-semibold", $fui-font-weight-semibold);
+  @include register-number("font-weight-bold", $fui-font-weight-bold);
+  @include register-number("line-height-tight", $fui-line-height-tight);
+  @include register-number("line-height-normal", $fui-line-height-normal);
+  @include register-number("line-height-relaxed", $fui-line-height-relaxed);
+  @include register-number("line-height-display", $fui-line-height-display);
+  @include register-number("line-height-prose", $fui-line-height-prose);
 
   // ------------------------------------------
   // Typography — Font Sizes (lengths)
   // ------------------------------------------
-  @include register-length('font-size-2xs', $fui-font-size-2xs);
-  @include register-length('font-size-xs', $fui-font-size-xs);
-  @include register-length('font-size-sm', $fui-font-size-sm);
-  @include register-length('font-size-base', $fui-font-size-base);
-  @include register-length('font-size-md', $fui-font-size-md);
-  @include register-length('font-size-lg', $fui-font-size-lg);
-  @include register-length('font-size-xl', $fui-font-size-xl);
-  @include register-length('font-size-2xl', $fui-font-size-2xl);
-  @include register-length('font-size-3xl', $fui-font-size-3xl);
-  @include register-length('font-size-4xl', $fui-font-size-4xl);
+  @include register-length("font-size-2xs", $fui-font-size-2xs);
+  @include register-length("font-size-xs", $fui-font-size-xs);
+  @include register-length("font-size-sm", $fui-font-size-sm);
+  @include register-length("font-size-base", $fui-font-size-base);
+  @include register-length("font-size-md", $fui-font-size-md);
+  @include register-length("font-size-lg", $fui-font-size-lg);
+  @include register-length("font-size-xl", $fui-font-size-xl);
+  @include register-length("font-size-2xl", $fui-font-size-2xl);
+  @include register-length("font-size-3xl", $fui-font-size-3xl);
+  @include register-length("font-size-4xl", $fui-font-size-4xl);
 
   // ------------------------------------------
   // Note: The following tokens are NOT registered because @property