@usefragments/ui 1.5.4 → 1.7.0

package/src/recipes/_representation.scss

@@ -0,0 +1,193 @@
+@use "../tokens/measurements.generated" as measurements;
+@use "action" as action;
+@use "typography" as typography;
+
+@function _raw($step) {
+  @return var(--fui-raw-space-#{$step}, #{measurements.raw-space($step)});
+}
+
+@function avatar-size($size) {
+  $step: null;
+
+  @if $size == "xs" {
+    $step: 24;
+  } @else if $size == "sm" {
+    $step: 32;
+  } @else if $size == "md" {
+    $step: 40;
+  } @else if $size == "lg" {
+    $step: 48;
+  } @else if $size == "xl" {
+    $step: 64;
+  } @else {
+    @error "Unknown avatar size '#{$size}'. Expected xs, sm, md, lg, or xl.";
+  }
+
+  @return var(--fui-avatar-size-#{$size}, #{_raw($step)});
+}
+
+@function avatar-overlap($size) {
+  $step: null;
+
+  @if $size == "xs" {
+    $step: 6;
+  } @else if $size == "sm" {
+    $step: 8;
+  } @else if $size == "md" {
+    $step: 10;
+  } @else if $size == "lg" {
+    $step: 12;
+  } @else if $size == "xl" {
+    $step: 16;
+  } @else {
+    @error "Unknown avatar overlap '#{$size}'. Expected xs, sm, md, lg, or xl.";
+  }
+
+  @return var(--fui-avatar-overlap-#{$size}, #{_raw($step)});
+}
+
+@function icon-size($size) {
+  @if $size ==
+    "xs" or
+    $size ==
+    "sm" or
+    $size ==
+    "md" or
+    $size ==
+    "lg" or
+    $size ==
+    "xl" or
+    $size ==
+    "2xl"
+  {
+    @return var(--fui-icon-#{$size}, #{measurements.target-value("icon", $size)});
+  }
+
+  @error "Unknown icon size '#{$size}'. Expected xs, sm, md, lg, xl, or 2xl.";
+}
+
+@function activity-size($size) {
+  @if $size == "sm" {
+    @return icon-size("md");
+  } @else if $size == "md" {
+    @return icon-size("lg");
+  } @else if $size == "lg" {
+    @return icon-size("xl");
+  } @else if $size == "xl" {
+    @return icon-size("2xl");
+  }
+
+  @error "Unknown activity size '#{$size}'. Expected sm, md, lg, or xl.";
+}
+
+@function badge-track($size) {
+  @if $size == "sm" {
+    @return var(--fui-badge-track-sm, #{_raw(20)});
+  } @else if $size == "md" {
+    @return var(--fui-badge-track-md, #{_raw(24)});
+  } @else if $size == "lg" {
+    @return var(--fui-badge-track-lg, #{action.track("sm")});
+  }
+
+  @error "Unknown badge size '#{$size}'. Expected sm, md, or lg.";
+}
+
+@mixin avatar($size) {
+  $type-role: "ui-standard";
+
+  @if $size == "xs" or $size == "sm" {
+    $type-role: "ui-compact";
+  } @else if $size == "xl" {
+    $type-role: "title-md";
+  }
+
+  @include typography.role($type-role);
+
+  inline-size: avatar-size($size);
+  block-size: avatar-size($size);
+  overflow: hidden;
+  border-radius: var(--fui-radius-full);
+}
+
+@mixin avatar-group-item($size) {
+  margin-inline-start: calc(-1 * #{avatar-overlap($size)});
+  border: var(--fui-stroke-default, #{measurements.target-value("stroke", "default")}) solid
+    var(--fui-bg-primary);
+}
+
+@mixin glyph($size) {
+  inline-size: icon-size($size);
+  block-size: icon-size($size);
+  flex: 0 0 auto;
+}
+
+@mixin activity($size) {
+  --_fui-activity-size: #{activity-size($size)};
+
+  inline-size: var(--_fui-activity-size);
+  block-size: var(--_fui-activity-size);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
+@mixin skeleton($kind, $size) {
+  @if $kind == "avatar" {
+    @if $size == "sm" {
+      inline-size: avatar-size("sm");
+      block-size: avatar-size("sm");
+    } @else if $size == "md" {
+      inline-size: avatar-size("md");
+      block-size: avatar-size("md");
+    } @else if $size == "lg" {
+      inline-size: avatar-size("lg");
+      block-size: avatar-size("lg");
+    } @else {
+      @error "Unknown skeleton size '#{$size}'. Expected sm, md, or lg.";
+    }
+  } @else if $kind == "button" or $kind == "field" {
+    @if $size == "sm" or $size == "md" or $size == "lg" {
+      block-size: action.track($size);
+    } @else {
+      @error "Unknown skeleton size '#{$size}'. Expected sm, md, or lg.";
+    }
+  } @else {
+    @error "Unknown skeleton kind '#{$kind}'. Expected avatar, button, or field.";
+  }
+}
+
+@mixin badge($size) {
+  @if $size == "sm" {
+    @include typography.role("ui-compact");
+  } @else if $size == "md" or $size == "lg" {
+    @include typography.role("ui-standard");
+  } @else {
+    @error "Unknown badge size '#{$size}'. Expected sm, md, or lg.";
+  }
+
+  min-block-size: badge-track($size);
+}
+
+@mixin chart-marker($kind) {
+  @if $kind == "dot" {
+    inline-size: var(--fui-chart-marker-dot, #{_raw(8)});
+    block-size: var(--fui-chart-marker-dot, #{_raw(8)});
+    border-radius: var(--fui-radius-full);
+  } @else if $kind == "line" or $kind == "dashed" {
+    inline-size: var(--fui-chart-marker-inline, #{_raw(12)});
+    block-size: var(--fui-chart-marker-stroke, #{_raw(2)});
+  } @else {
+    @error "Unknown chart marker '#{$kind}'. Expected dot, line, or dashed.";
+  }
+}
+
+@mixin chart-tooltip {
+  @include typography.role("body-compact");
+
+  --_fui-chart-tooltip-item-gap: #{_raw(8)};
+
+  min-inline-size: var(--fui-chart-tooltip-min-inline, 100px);
+  padding-block: _raw(8);
+  padding-inline: _raw(12);
+}

package/src/recipes/_segmented.scss

@@ -0,0 +1,26 @@
+@use "action";
+
+@function track($size) {
+  @return action.track($size);
+}
+
+@mixin rail($size) {
+  --_fui-segmented-track: #{action.track($size)};
+  --_fui-segmented-inline-inset: #{action.inline-inset($size)};
+  --_fui-segmented-gap: #{action.gap($size)};
+  --_fui-segmented-icon-size: #{action.icon-size($size)};
+
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: stretch;
+  min-block-size: var(--_fui-segmented-track);
+}
+
+@mixin item($size) {
+  @include action.base;
+  @include action.size($size);
+}
+
+@mixin glyph($size) {
+  @include action.glyph($size);
+}

package/src/recipes/_surface.scss

@@ -0,0 +1,13 @@
+@use "../tokens/measurements.generated" as measurements;
+
+@function inset($role) {
+  @if $role == "panel" or $role == "compact" or $role == "default" or $role == "roomy" {
+    @return var(--fui-surface-inset-#{$role}, #{measurements.target-value("surfaceInset", $role)});
+  }
+
+  @error "Unknown surface inset role '#{$role}'. Expected panel, compact, default, or roomy.";
+}
+
+@mixin apply-inset($role) {
+  padding: inset($role);
+}

package/src/recipes/_table-chrome.scss

@@ -0,0 +1,119 @@
+@use "../tokens/measurements.generated" as measurements;
+@use "typography" as typography;
+
+@mixin properties {
+  --fui-table-row-track-compact: var(--fui-raw-space-32, #{measurements.raw-space(32)});
+  --fui-table-row-track-regular: var(--fui-raw-space-40, #{measurements.raw-space(40)});
+  --fui-table-row-track-relaxed: var(--fui-raw-space-48, #{measurements.raw-space(48)});
+  --fui-table-cell-inline-inset-compact: var(--fui-raw-space-8, #{measurements.raw-space(8)});
+  --fui-table-cell-inline-inset-regular: var(--fui-raw-space-12, #{measurements.raw-space(12)});
+  --fui-table-cell-inline-inset-relaxed: var(--fui-raw-space-16, #{measurements.raw-space(16)});
+  --fui-table-cell-block-inset-compact: var(--fui-raw-space-4, #{measurements.raw-space(4)});
+  --fui-table-cell-block-inset-regular: var(--fui-raw-space-10, #{measurements.raw-space(10)});
+  --fui-table-cell-block-inset-relaxed: var(--fui-raw-space-12, #{measurements.raw-space(12)});
+  // The header sits tighter than the rows it labels: a column head is chrome,
+  // not a record, so it keeps the pre-ledger inset while cells breathe.
+  --fui-table-header-block-inset-compact: var(--fui-raw-space-4, #{measurements.raw-space(4)});
+  --fui-table-header-block-inset-regular: var(--fui-raw-space-8, #{measurements.raw-space(8)});
+  --fui-table-header-block-inset-relaxed: var(--fui-raw-space-12, #{measurements.raw-space(12)});
+  --fui-table-tree-indent-step: var(--fui-raw-space-24, #{measurements.raw-space(24)});
+  --fui-table-divider-size: var(
+    --fui-stroke-hairline,
+    #{measurements.target-value("stroke", "hairline")}
+  );
+}
+
+@function row-track($density) {
+  @if $density == "compact" or $density == "regular" or $density == "relaxed" {
+    @return var(--fui-table-row-track-#{$density});
+  }
+
+  @error "Unknown table density '#{$density}'. Expected compact, regular, or relaxed.";
+}
+
+@function cell-inline-inset($density) {
+  @if $density == "compact" or $density == "regular" or $density == "relaxed" {
+    @return var(--fui-table-cell-inline-inset-#{$density});
+  }
+
+  @error "Unknown table density '#{$density}'. Expected compact, regular, or relaxed.";
+}
+
+@function cell-block-inset($density) {
+  @if $density == "compact" or $density == "regular" or $density == "relaxed" {
+    @return var(--fui-table-cell-block-inset-#{$density});
+  }
+
+  @error "Unknown table density '#{$density}'. Expected compact, regular, or relaxed.";
+}
+
+@function header-block-inset($density) {
+  @if $density == "compact" or $density == "regular" or $density == "relaxed" {
+    @return var(--fui-table-header-block-inset-#{$density});
+  }
+
+  @error "Unknown table density '#{$density}'. Expected compact, regular, or relaxed.";
+}
+
+@mixin density($density) {
+  @if $density != "compact" and $density != "regular" and $density != "relaxed" {
+    @error "Unknown table density '#{$density}'. Expected compact, regular, or relaxed.";
+  }
+
+  --_fui-table-row-track: #{row-track($density)};
+  --_fui-table-cell-inline-inset: #{cell-inline-inset($density)};
+  --_fui-table-cell-block-inset: #{cell-block-inset($density)};
+  --_fui-table-header-block-inset: #{header-block-inset($density)};
+
+  @if $density == "compact" {
+    @include typography.role("ui-compact");
+  } @else {
+    @include typography.role("body-compact");
+  }
+}
+
+@mixin root {
+  @include properties;
+
+  inline-size: 100%;
+  border-collapse: collapse;
+}
+
+@mixin caption {
+  @include typography.role("caption");
+
+  padding-block: var(--fui-raw-space-12, #{measurements.raw-space(12)});
+  padding-inline: 0;
+  color: var(--fui-text-secondary);
+  text-align: start;
+  caption-side: top;
+}
+
+@mixin header-cell {
+  @include typography.role("ui-compact");
+
+  padding-block: var(--_fui-table-header-block-inset, var(--_fui-table-cell-block-inset));
+  padding-inline: var(--_fui-table-cell-inline-inset);
+  color: var(--fui-text-secondary);
+  text-align: start;
+  vertical-align: middle;
+}
+
+@mixin body-cell {
+  padding-block: var(--_fui-table-cell-block-inset);
+  padding-inline: var(--_fui-table-cell-inline-inset);
+  color: var(--fui-text-primary);
+  vertical-align: middle;
+}
+
+@mixin row {
+  height: var(--_fui-table-row-track);
+  border-block-end: var(--fui-table-divider-size) solid var(--fui-table-border, var(--fui-border));
+}
+
+@mixin tree-cell {
+  padding-inline-start: calc(
+    var(--_fui-table-cell-inline-inset) + var(--_fui-table-tree-depth, 0) *
+      var(--fui-table-tree-indent-step)
+  );
+}

package/src/recipes/_target.scss

@@ -0,0 +1,31 @@
+@use "../tokens/measurements.generated" as measurements;
+
+@function hit-size($role) {
+  @if $role == "micro" {
+    @return var(--fui-control-track-micro, #{measurements.target-value("controlTrack", "micro")});
+  } @else if $role == "compact" {
+    @return var(--fui-control-track-md, #{measurements.target-value("controlTrack", "md")});
+  } @else if $role == "touch" {
+    @return var(--fui-raw-space-48, #{measurements.raw-space(48)});
+  }
+
+  @error "Unknown hit-target role '#{$role}'. Expected micro, compact, or touch.";
+}
+
+@mixin hit-area($role) {
+  --_fui-target-hit-size: #{hit-size($role)};
+
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    inline-size: max(100%, var(--_fui-target-hit-size));
+    block-size: max(100%, var(--_fui-target-hit-size));
+    box-sizing: border-box;
+    transform: translate(-50%, -50%);
+    pointer-events: auto;
+  }
+}

package/src/recipes/_typography.scss

@@ -0,0 +1,38 @@
+@use "../tokens/measurements.generated" as measurements;
+@use "../tokens/variables" as tokens;
+
+@function font-size($role) {
+  @return var(--fui-type-#{$role}-size, #{measurements.typography-value($role, "size")});
+}
+
+@function line-height($role) {
+  @return var(--fui-type-#{$role}-line, #{measurements.typography-value($role, "line")});
+}
+
+@function weight($role) {
+  @return var(--fui-type-#{$role}-weight, #{measurements.typography-value($role, "weight")});
+}
+
+@function tracking($role) {
+  @return var(--fui-type-#{$role}-tracking, #{measurements.typography-value($role, "tracking")});
+}
+
+@function font-family($role) {
+  // Reuse the generated lookup as the closed-role assertion. Families remain
+  // a semantic choice here rather than a numeric generated property.
+  $_validated-role: measurements.typography-value($role, "size");
+
+  @if $role == "code" {
+    @return var(--fui-font-mono, #{tokens.$fui-font-mono});
+  }
+
+  @return var(--fui-font-sans, #{tokens.$fui-font-sans});
+}
+
+@mixin role($role) {
+  font-size: font-size($role);
+  line-height: line-height($role);
+  font-weight: weight($role);
+  letter-spacing: tracking($role);
+  font-family: font-family($role);
+}

package/src/recipes/popup.ts

@@ -0,0 +1,12 @@
+import { MEASUREMENT_PROFILES, measurementPx } from "../measurements";
+
+export const POPUP_OFFSET_PX = measurementPx(MEASUREMENT_PROFILES.rawSpace["4"], "rawSpace.4");
+export const POPUP_VIEWPORT_ROWS = 4.5;
+
+export function resolvePopupViewportRows(maxVisibleItems?: number): number {
+  if (maxVisibleItems === undefined || !Number.isFinite(maxVisibleItems) || maxVisibleItems <= 0) {
+    return POPUP_VIEWPORT_ROWS;
+  }
+
+  return Math.max(1, Math.floor(maxVisibleItems)) + 0.5;
+}

package/src/recipes/table-chrome.ts

@@ -0,0 +1,30 @@
+import { MEASUREMENT_PROFILES, measurementPx } from "../measurements";
+
+export type TableDensity = "compact" | "regular" | "relaxed";
+export type TableDensityInput = TableDensity | "condensed";
+export type LegacyTableSize = "sm" | "md" | "compact";
+
+export const TABLE_ROW_TRACKS: Readonly<Record<TableDensity, number>> = Object.freeze({
+  compact: measurementPx(MEASUREMENT_PROFILES.rawSpace[32], "rawSpace.32"),
+  regular: measurementPx(MEASUREMENT_PROFILES.rawSpace[40], "rawSpace.40"),
+  relaxed: measurementPx(MEASUREMENT_PROFILES.rawSpace[48], "rawSpace.48"),
+});
+
+export function resolveTableDensity(input: {
+  density?: TableDensityInput;
+  size?: LegacyTableSize;
+}): TableDensity {
+  if (input.density !== undefined) {
+    return input.density === "condensed" ? "compact" : input.density;
+  }
+
+  if (input.size === "sm" || input.size === "compact") {
+    return "compact";
+  }
+
+  return "regular";
+}
+
+export function resolveTableRowTrack(density: TableDensity): number {
+  return TABLE_ROW_TRACKS[density];
+}

package/src/scss.d.ts

@@ -1,4 +1,4 @@
-declare module '*.module.scss' {
+declare module "*.module.scss" {
   const classes: { [key: string]: string };
   export default classes;
 }

package/src/styles/globals.scss

@@ -7,7 +7,6 @@
 // Usage in SCSS (recommended):
 //   @use '@usefragments/ui/styles' with (
 //     $fui-brand: #6366f1,
-//     $fui-neutral: "earth",
 //     $fui-radius-style: "rounded"
 //   );
 //
@@ -24,17 +23,16 @@
 // Consumers set these via @use ... with().
 // Values are forwarded to the seed/token chain below.
 
-$fui-brand: #006b57 !default;
-$fui-neutral: "carbon" !default;
+$fui-brand: #f56138 !default;
+$fui-neutral: "paper" !default;
 $fui-density: "default" !default;
 $fui-radius-style: "default" !default;
-// Status seeds tuned to sit in one family with the sage brand (see
-// tokens/_seeds.scss): danger is sage's warm complement, warning its
-// split-complement, info a cool teal-adjacent slate — all muted to match.
-$fui-danger: #d97066 !default;
-$fui-success: #7fc9b3 !default;
-$fui-warning: #e0aa5c !default;
-$fui-info: #7fa6c4 !default;
+// Status seeds (see tokens/_seeds.scss): Cloud Surfaces rust / forest /
+// amber / slate-blue. Washes derive from these.
+$fui-danger: #c44732 !default;
+$fui-success: #2c8c5f !default;
+$fui-warning: #c4922a !default;
+$fui-info: #3d7aa8 !default;
 
 // Configure seeds BEFORE loading variables.
 // Sass module singleton: once configured here, every subsequent
@@ -60,7 +58,7 @@ $fui-info: #7fa6c4 !default;
 // Consumer styles outside any @layer always win over layered styles.
 // Within layers: tokens < base < components (declared first = lowest priority).
 // Browser support: ~97% (Chrome 99+, Firefox 97+, Safari 15.4+)
-@layer fui.tokens, fui.base;
+@layer fui.tokens, fui.base, fui.components;
 
 // Output typed @property registrations (must be top-level, can't be in @layer)
 @include prop-reg.fui-property-registrations;
@@ -98,7 +96,7 @@ $fui-info: #7fa6c4 !default;
     font-size: inherit;
     font-family: var(
       --fui-font-sans,
-      Inter,
+      "Onest",
       system-ui,
       -apple-system,
       BlinkMacSystemFont,
@@ -126,21 +124,24 @@ $fui-info: #7fa6c4 !default;
     color: inherit;
   }
 
+  // Classless prose anchors take the link ink (≥ 4.5:1 on every surface in
+  // both themes); the accent stays for actions. Hover strengthens the rule.
   :where(a:not([class]):not([style])) {
-    color: var(--fui-color-accent, #{$fui-color-accent});
+    color: var(--fui-link-ink, #{$fui-link-ink});
     text-decoration: underline;
-    text-underline-offset: 2px;
-    transition: color 0.15s ease;
+    text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
+    text-underline-offset: 0.2em;
+    transition: text-decoration-color 0.15s ease;
 
     &:hover {
-      color: var(--fui-color-accent-hover, #{$fui-color-accent-hover});
+      text-decoration-color: currentColor;
     }
   }
 
   ::selection {
     background-color: var(
       --fui-selection-bg,
-      color-mix(in srgb, var(--fui-color-accent, #7fc9b3) 18%, transparent)
+      color-mix(in srgb, var(--fui-color-accent, #f56138) 18%, transparent)
     );
     color: var(--fui-selection-color, var(--fui-text-primary, #171717));
   }
@@ -200,11 +201,11 @@ $fui-info: #7fa6c4 !default;
   }
 
   :where(:focus-visible) {
-    outline: 1px solid color-mix(in srgb, var(--fui-focus-ring-color, #006b57) 24%, transparent);
+    outline: 1px solid color-mix(in srgb, var(--fui-focus-ring-color, #f56138) 24%, transparent);
     outline-offset: var(--fui-focus-ring-offset, 2px);
     box-shadow:
       0 0 0 calc(var(--fui-focus-ring-width, 2px) + 1px)
-        color-mix(in srgb, var(--fui-focus-ring-color, #006b57) 10%, transparent),
-      0 10px 24px -16px color-mix(in srgb, var(--fui-focus-ring-color, #006b57) 18%, transparent);
+        color-mix(in srgb, var(--fui-focus-ring-color, #f56138) 10%, transparent),
+      0 10px 24px -16px color-mix(in srgb, var(--fui-focus-ring-color, #f56138) 18%, transparent);
   }
 }

package/src/tokens/_component-properties.scss

@@ -5,8 +5,8 @@
 // doing so would override each component's fallback/inheritance behavior.
 // Governance reads this file as the explicit vocabulary for dynamic values.
 @mixin fui-component-property-contract {
-  --fui-checkbox-radius: 0.25rem;
-  --fui-grid-min-child-width: 16rem;
+  --fui-checkbox-radius: var(--fui-radius-sm);
+  --fui-grid-min-child-width: var(--fui-layout-measure-grid-cell);
   --fui-line-clamp: 2;
   --fui-navmenu-viewport-height: 0px;
   --fui-navmenu-viewport-left: 0px;

package/src/tokens/_computed.scss

@@ -27,10 +27,10 @@ $_radius: radius.get-radius-style(seeds.$fui-radius-style);
 // Derive spacing from density
 $_spacing: density.derive-spacing($_density);
 
-// True when the brand seed is the Fragments default (pine). Lets the default
-// theme emit exact Flight Recorder accents (sage dark / pine light) while any
-// consumer-supplied $fui-brand keeps the full seed→accent derivation.
-$brand-is-fragments-default: seeds.$fui-brand == #006b57;
+// True when the brand seed is the Fragments default (coral). The default
+// theme uses the exact SCSS-computed accents; any consumer-supplied
+// $fui-brand keeps the full seed→accent derivation reactive at runtime.
+$brand-is-fragments-default: seeds.$fui-brand == #f56138;
 
 // --------------------------------------------
 // Computed: Base Configuration
@@ -70,21 +70,21 @@ $computed-radius-full: radius.radius-full();
 // Computed: Component Heights (from density)
 // --------------------------------------------
 
-$computed-button-height-xs: density.px-to-rem($_density, map.get($_density, button-height-xs));
-$computed-button-height-sm: density.px-to-rem($_density, map.get($_density, button-height-sm));
-$computed-button-height-md: density.px-to-rem($_density, map.get($_density, button-height-md));
-$computed-button-height-lg: density.px-to-rem($_density, map.get($_density, button-height-lg));
-
-$computed-input-height: density.px-to-rem($_density, map.get($_density, input-height));
-$computed-input-height-sm: density.px-to-rem($_density, map.get($_density, input-height-sm));
-$computed-input-height-lg: density.px-to-rem($_density, map.get($_density, input-height-lg));
+// Canonical interactive control ladder
+$computed-control-height-xs: density.px-to-rem($_density, map.get($_density, control-height-xs));
+$computed-control-height-sm: density.px-to-rem($_density, map.get($_density, control-height-sm));
+$computed-control-height-md: density.px-to-rem($_density, map.get($_density, control-height-md));
+$computed-control-height-lg: density.px-to-rem($_density, map.get($_density, control-height-lg));
 
 $computed-touch-sm: density.px-to-rem($_density, map.get($_density, touch-sm));
 $computed-touch-md: density.px-to-rem($_density, map.get($_density, touch-md));
 $computed-touch-lg: density.px-to-rem($_density, map.get($_density, touch-lg));
 
 // Sidebar navigation (from density)
-$computed-sidebar-item-height: density.px-to-rem($_density, map.get($_density, sidebar-item-height));
+$computed-sidebar-item-height: density.px-to-rem(
+  $_density,
+  map.get($_density, sidebar-item-height)
+);
 
 // --------------------------------------------
 // Computed: Colors - Light Mode
@@ -95,9 +95,6 @@ $computed-color-accent: seeds.$fui-brand;
 // Default (pine) fill needs white text; contrast-color mis-scores mid-dark
 // brands, so pin on-accent to white for the Fragments default.
 $computed-color-on-accent: derive.contrast-color(seeds.$fui-brand);
-@if $brand-is-fragments-default {
-  $computed-color-on-accent: #ffffff;
-}
 $computed-color-accent-hover: derive.derive-accent-hover(seeds.$fui-brand, false);
 $computed-color-accent-active: derive.derive-accent-active(seeds.$fui-brand, false);
 
@@ -171,11 +168,7 @@ $computed-backdrop: derive.derive-backdrop(false);
 // --------------------------------------------
 
 // Accent colors — dark brands lightened for visibility; on-accent handles text contrast.
-// The Fragments default resolves to exact sage; overrides keep the chroma-aware lift.
 $computed-dark-color-accent: derive.derive-dark-accent(seeds.$fui-brand);
-@if $brand-is-fragments-default {
-  $computed-dark-color-accent: #7fc9b3;
-}
 $computed-dark-color-on-accent: derive.contrast-color($computed-dark-color-accent);
 $computed-dark-color-accent-hover: derive.derive-accent-hover($computed-dark-color-accent, true);
 $computed-dark-color-accent-active: derive.derive-accent-active($computed-dark-color-accent, true);
@@ -226,12 +219,8 @@ $computed-dark-shadow-sm: map.get($_shadows-dark, sm);
 $computed-dark-shadow-md: map.get($_shadows-dark, md);
 $computed-dark-shadow-lg: map.get($_shadows-dark, lg);
 
-// Focus ring (dark mode) — follows the dark accent. Pinned to sage for the
-// Fragments default (derive-focus-ring mis-scores the mid-dark pine brand).
+// Focus ring (dark mode) — follows the dark accent.
 $computed-dark-focus-ring-color: derive.derive-focus-ring(seeds.$fui-brand, true);
-@if $brand-is-fragments-default {
-  $computed-dark-focus-ring-color: #7fc9b3;
-}
 
 // Scrollbar (dark mode)
 $_scrollbar-dark: derive.derive-scrollbar($_palette, true, seeds.$fui-neutral);