@usefragments/ui 1.6.0 → 1.7.0

package/src/recipes/_table-chrome.scss

@@ -9,8 +9,13 @@
   --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-8, #{measurements.raw-space(8)});
+  --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,
@@ -42,6 +47,14 @@
   @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.";
@@ -50,6 +63,7 @@
   --_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");
@@ -78,7 +92,7 @@
 @mixin header-cell {
   @include typography.role("ui-compact");
 
-  padding-block: var(--_fui-table-cell-block-inset);
+  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;

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: #a54f46 !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
@@ -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/_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
@@ -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);

package/src/tokens/_derive.scss

@@ -8,9 +8,9 @@
 //
 // ============================================
 
-@use 'sass:color';
-@use 'sass:math';
-@use 'palettes' as *;
+@use "sass:color";
+@use "sass:math";
+@use "palettes" as *;
 
 // --------------------------------------------
 // Color Utility Functions
@@ -21,7 +21,7 @@
 /// @return {Boolean} True if dark
 @function is-dark-color($color) {
   // oklch lightness is perceptually uniform (0-1 range)
-  @return color.channel($color, 'lightness', $space: oklch) < 0.5;
+  @return color.channel($color, "lightness", $space: oklch) < 0.5;
 }
 
 /// Get appropriate contrast color (black or white)
@@ -46,7 +46,7 @@
 /// @param {Boolean} $is-dark - Whether in dark mode
 /// @return {Color} Hover state color
 @function derive-accent-hover($base, $is-dark: false) {
-  $l: color.channel($base, 'lightness', $space: oklch);
+  $l: color.channel($base, "lightness", $space: oklch);
 
   @if $is-dark {
     @if $l > 0.85 {
@@ -72,7 +72,7 @@
 /// @param {Boolean} $is-dark - Whether in dark mode
 /// @return {Color} Active state color
 @function derive-accent-active($base, $is-dark: false) {
-  $l: color.channel($base, 'lightness', $space: oklch);
+  $l: color.channel($base, "lightness", $space: oklch);
 
   @if $is-dark {
     @if $l > 0.85 {
@@ -102,8 +102,8 @@
 /// @param {Color} $brand - Brand color
 /// @return {Color} Dark-mode accent
 @function derive-dark-accent($brand) {
-  $l: color.channel($brand, 'lightness', $space: oklch);
-  $c: color.channel($brand, 'chroma', $space: oklch);
+  $l: color.channel($brand, "lightness", $space: oklch);
+  $c: color.channel($brand, "chroma", $space: oklch);
   // color.channel returns lightness as a percentage; normalize to a unitless 0–1
   // ratio so the comparisons below share a scale with the 0.55/0.85 bounds.
   $l-num: $l;
@@ -113,7 +113,7 @@
   // grey-lift only kicks in for low-chroma brands; vibrant brands keep their own L.
   $target-l: math.max($l-num, 0.95 - 2 * $c);
   $clamped-l: math.max(0.55, math.min($target-l, 0.85));
-  @return oklch($clamped-l $c color.channel($brand, 'hue', $space: oklch));
+  @return oklch($clamped-l $c color.channel($brand, "hue", $space: oklch));
 }
 
 // --------------------------------------------
@@ -146,185 +146,103 @@
 // Surface/Background Derivation
 // --------------------------------------------
 
-/// Derive surface/background tokens from a neutral palette
+/// Derive surface/background tokens for the paper ramp.
 /// Maps shade levels to semantic surface tokens for visual depth layering.
-/// For colorful palettes (ice, earth, sand, fire), light mode uses tinted backgrounds.
 /// @param {Map} $palette - Neutral palette map
 /// @param {Boolean} $is-dark - Whether in dark mode
-/// @param {String} $palette-name - Palette name for colorful detection (default: 'stone')
 /// @return {Map} Surface token values
-@function derive-surfaces($palette, $is-dark: false, $palette-name: 'stone') {
+@function derive-surfaces($palette, $is-dark: false, $palette-name: "paper") {
   @if $is-dark {
-    // Carbon (Fragments default) — charcoal material surfaces, not voids.
-    @if $palette-name == 'carbon' {
-      @return (
-        primary: #212121,   // page / body background
-        secondary: #171717, // sidebar, recessed panels, surface
-        tertiary: #2f2f2f,  // raised / hover / active row (surface-2)
-        elevated: #2f2f2f,  // cards float above the page tone
-        subtle: #171717,    // recessed (code wells, insets)
-        hover: rgba(255, 255, 255, 0.055),
-        active: rgba(255, 255, 255, 0.085)
-      );
-    }
-
-    @if $palette-name == 'stone' or $palette-name == 'mono' {
-      @return (
-        primary: #000000,
-        secondary: #050505,
-        tertiary: #111111,
-        elevated: #151515,
-        subtle: #080808,
-        hover: rgba(255, 255, 255, 0.055),
-        active: rgba(255, 255, 255, 0.085)
-      );
-    }
-
-    // Dark mode: darker = more recessed, lighter = elevated
-    // Hover/active opacities tuned for subdued dense-UI aesthetic: hairlines and
-    // alpha overlays do most of the depth work rather than heavy color shifts.
+    // The cream canvas moved onto a warm charcoal plane with a real elevation
+    // ladder: bands step up from the page, cards step up from bands — the
+    // dark mirror of canvas / tinted band / white card in light mode.
     @return (
-      primary: get-shade($palette, 950),           // Page background (darkest)
-      secondary: get-shade($palette, 900),         // Sidebar, panels
-      tertiary: get-shade($palette, 800),          // Content areas (lighter)
-      elevated: interpolate-shade($palette, 875),  // Cards (distinct from secondary)
-      subtle: interpolate-shade($palette, 925),    // Between primary and secondary
-      hover: rgba(255, 255, 255, 0.035),           // Interactive hover
-      active: rgba(255, 255, 255, 0.06)            // Interactive active
+      primary: #171614,
+      // page background
+      secondary: #171614,
+      // shell/sidebar on the same plane
+      tertiary: #1e1c19,
+      // tinted section band, raised chrome
+      elevated: #262421,
+      // cards and overlays float clearly above bands
+      subtle: #1b1a17,
+      // barely-raised wells
+      hover: #2a2723,
+      // transient interaction
+      active: #322e29 // transient pressed interaction
     );
   }
 
-  // Light mode: colorful palettes get tinted backgrounds. Carbon is a neutral
-  // (like stone) — white surfaces in light mode.
-  $is-colorful: $palette-name != 'stone' and $palette-name != 'carbon';
-  @if $is-colorful {
-    @return (
-      primary: get-shade($palette, 50),            // Tinted page background
-      secondary: get-shade($palette, 100),         // Tinted secondary panels
-      tertiary: get-shade($palette, 200),          // Deeper tint for nested sections
-      elevated: #ffffff,                           // Cards, modals (floats above)
-      subtle: get-shade($palette, 50),             // Very subtle tinted background
-      hover: rgba(0, 0, 0, 0.04),                  // Interactive hover
-      active: rgba(0, 0, 0, 0.06)                  // Interactive active
-    );
-  }
-
-  // Stone palette: neutral white backgrounds
+  // Light mode — the warm gallery scheme: a cream page canvas, white cards
+  // floating above it, and a deeper cream band for nested sections.
+  // Hover/active are warm alpha tints so interaction chrome never goes cold
+  // grey on the warm canvas.
   @return (
-    primary: #ffffff,                            // Page background (white)
-    secondary: get-shade($palette, 100),         // Sidebar, secondary panels
-    tertiary: get-shade($palette, 100),          // Nested sections
-    elevated: #ffffff,                           // Cards, modals (floats above)
-    subtle: get-shade($palette, 50),             // Very subtle backgrounds
-    hover: rgba(0, 0, 0, 0.04),                  // Interactive hover
-    active: rgba(0, 0, 0, 0.06)                  // Interactive active
+    primary: #faf8f5,
+    // page canvas (cream)
+    secondary: #faf8f5,
+    // shell/sidebar on the same plane
+    tertiary: #f2ede7,
+    // tinted section band, hover-on-paper
+    elevated: #ffffff,
+    // cards and overlays float white
+    subtle: #fdfcfa,
+    // barely-raised wells
+    hover: rgba(96, 48, 16, 0.06),
+    // warm transient interaction
+    active: rgba(96, 48, 16, 0.1) // warm pressed interaction
   );
 }
 
 /// Derive document/application canvas tokens used by base body styles and
-/// large layout containers. The defaults intentionally separate the page
-/// canvas from the primary main surface so app shells can expose chrome around
-/// the focused content region.
+/// large layout containers. Body and main share the paper canvas so app
+/// shells sit on one plane; raised component roles provide the contrast.
 /// @param {Map} $palette - Neutral palette map
 /// @param {Boolean} $is-dark - Whether in dark mode
-/// @param {String} $palette-name - Palette name for colorful detection
 /// @return {Map} Body and main background values
-@function derive-app-surfaces($palette, $is-dark: false, $palette-name: 'stone') {
+@function derive-app-surfaces($palette, $is-dark: false, $palette-name: "paper") {
   @if $is-dark {
-    // Carbon (Fragments default) — flat page canvas at #212121.
-    @if $palette-name == 'carbon' {
-      @return (
-        body: #212121,
-        main: #212121
-      );
-    }
-
-    @if $palette-name == 'stone' or $palette-name == 'mono' or $palette-name == 'wind' {
-      @return (
-        body: #000000,
-        main: #050505
-      );
-    }
-
-    @return (
-      body: get-shade($palette, 800),
-      main: get-shade($palette, 900)
-    );
+    @return (body: #171614, main: #171614);
   }
-
-  @if $palette-name == 'stone' or $palette-name == 'carbon' or $palette-name == 'wind' {
-    @return (
-      body: get-shade($palette, 100),
-      main: #ffffff
-    );
-  }
-
-  @return (
-    body: get-shade($palette, 100),
-    main: get-shade($palette, 50)
-  );
+  @return (body: #faf8f5, main: #faf8f5);
 }
 
 // --------------------------------------------
 // Text Color Derivation
 // --------------------------------------------
 
-/// Derive text tokens from a neutral palette.
-/// For colorful palettes in light mode, applies ensure-contrast() to meet
-/// WCAG AAA (7:1) against tinted backgrounds (palette[50]).
+/// Derive text tokens for the paper ramp.
+/// Light mode applies ensure-contrast() to meet WCAG AAA (7:1) against the
+/// cream canvas; dark mode uses warm ink tiers so text keeps the scheme's
+/// warmth instead of snapping to pure white.
 /// @param {Map} $palette - Neutral palette map
 /// @param {Boolean} $is-dark - Whether in dark mode
-/// @param {String} $palette-name - Palette name for background detection (default: 'stone')
 /// @return {Map} Text token values
-@function derive-text($palette, $is-dark: false, $palette-name: 'stone') {
+@function derive-text($palette, $is-dark: false, $palette-name: "paper") {
   @if $is-dark {
-    // Carbon (Fragments default) — ink / muted / faint text tiers.
-    @if $palette-name == 'carbon' {
-      @return (
-        primary: #ececec,   // ink
-        secondary: #b4b4b4, // muted
-        tertiary: #8f8f8f,  // faint / placeholder
-        inverse: #212121    // text on light (sage) accents
-      );
-    }
-
-    @if $palette-name == 'stone' or $palette-name == 'mono' {
-      @return (
-        primary: #ededed,
-        secondary: #a1a1a1,
-        tertiary: #7a7a7a,
-        inverse: #000000
-      );
-    }
-
-    // Dark mode: neutral white text on all palettes.
-    // Palette-tinted text (e.g. green-on-green-dark) looks muddy and reduces
-    // readability. Major polished dark themes use neutral white text regardless
-    // of background tint.
-    // Opacity ladder tuned for a subdued, product-chrome aesthetic — secondary
-    // and tertiary are lifted closer to primary so dense UI reads cleanly
-    // without needing to bump to primary for every chrome label.
     @return (
-      primary: #ffffff,
-      secondary: rgba(255, 255, 255, 0.72),
-      tertiary: rgba(255, 255, 255, 0.5),
-      inverse: get-shade($palette, 900)            // Text on light accents
+      primary: #f0ede9,
+      // warm ink
+      secondary: #b6b0a8,
+      // muted
+      tertiary: #8d8780,
+      // faint / placeholder
+      inverse: #171614 // text on light (cream) accents
     );
   }
 
-  // Light mode background — stone/carbon use white, colorful palettes use palette[50]
-  $bg: #ffffff;
-  @if $palette-name != 'stone' and $palette-name != 'carbon' {
-    $bg: get-shade($palette, 50);
-  }
+  $bg: get-shade($palette, 50);
 
   @return (
-    primary: get-shade($palette, 900),           // Main text (high contrast)
+    primary: get-shade($palette, 900),
+    // Main text (high contrast)
     secondary: ensure-contrast(get-shade($palette, 600), $bg, 7),
     tertiary: ensure-contrast(
-      color.mix(get-shade($palette, 600), get-shade($palette, 500), 20%), $bg, 7
-    ),
-    inverse: get-shade($palette, 100)            // Text on dark accents
+        color.mix(get-shade($palette, 600), get-shade($palette, 500), 20%),
+        $bg,
+        7
+      ),
+    inverse: get-shade($palette, 100) // Text on dark accents
   );
 }
 
@@ -332,41 +250,22 @@
 // Border Color Derivation
 // --------------------------------------------
 
-/// Derive border tokens from a neutral palette
+/// Derive border tokens for the paper ramp
 /// @param {Map} $palette - Neutral palette map
 /// @param {Boolean} $is-dark - Whether in dark mode
 /// @return {Map} Border token values
-@function derive-borders($palette, $is-dark: false, $palette-name: 'stone') {
+@function derive-borders($palette, $is-dark: false, $palette-name: "paper") {
   @if $is-dark {
-    // Carbon (Fragments default) — solid hairline + strong border.
-    @if $palette-name == 'carbon' {
-      @return (
-        default: #323232, // hairline
-        strong: #4b4b4b   // strong border
-      );
-    }
-
-    @if $palette-name == 'stone' or $palette-name == 'mono' {
-      @return (
-        default: rgba(255, 255, 255, 0.075),
-        strong: rgba(255, 255, 255, 0.14)
-      );
-    }
-
-    // Dark mode: subtle white-alpha hairlines. Tight opacities keep panel
-    // edges barely-there so borders define structure without adding visual
-    // weight — matches the dense dashboard aesthetic.
+    // Solid warm hairline + strong border on the charcoal plane.
     @return (
-      default: rgba(255, 255, 255, 0.055),
-      strong: rgba(255, 255, 255, 0.085)
-    );
-  } @else {
-    // Light mode: reduced opacity (ChatGPT --border-light ~5%)
-    @return (
-      default: rgba(0, 0, 0, 0.05),
-      strong: rgba(0, 0, 0, 0.10)
+      default: #343029,
+      // hairline
+      strong: #4a4641 // strong border
     );
   }
+  // Warm-tinted hairlines so edges on the cream canvas never read as cold
+  // grey lines cutting through a warm scheme.
+  @return (default: rgba(60, 45, 30, 0.1), strong: rgba(60, 45, 30, 0.18));
 }
 
 // --------------------------------------------
@@ -381,17 +280,33 @@
     // Dark mode: near-zero shadows — hairlines and alpha overlays carry
     // elevation instead, matching dense product-chrome aesthetics.
     @return (
-      sm: (0 1px 2px 0 rgba(0, 0, 0, 0.15)),
-      md: (0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 1px 3px -2px rgba(0, 0, 0, 0.15)),
-      lg: (0 8px 12px -3px rgba(0, 0, 0, 0.25), 0 3px 5px -4px rgba(0, 0, 0, 0.18))
+      sm: (
+        0 1px 2px 0 rgba(0, 0, 0, 0.15),
+      ),
+      md: (
+        0 2px 4px -1px rgba(0, 0, 0, 0.2),
+        0 1px 3px -2px rgba(0, 0, 0, 0.15),
+      ),
+      lg: (
+        0 8px 12px -3px rgba(0, 0, 0, 0.25),
+        0 3px 5px -4px rgba(0, 0, 0, 0.18),
+      )
     );
   } @else {
     // Light mode: flatter aesthetic — near-zero shadows so layout reads
     // as structure rather than floating chrome.
     @return (
-      sm: (0 1px 2px 0 rgba(0, 0, 0, 0.02)),
-      md: (0 2px 4px -1px rgba(0, 0, 0, 0.04), 0 1px 3px -2px rgba(0, 0, 0, 0.03)),
-      lg: (0 8px 12px -3px rgba(0, 0, 0, 0.06), 0 3px 5px -4px rgba(0, 0, 0, 0.04))
+      sm: (
+        0 1px 2px 0 rgba(0, 0, 0, 0.02),
+      ),
+      md: (
+        0 2px 4px -1px rgba(0, 0, 0, 0.04),
+        0 1px 3px -2px rgba(0, 0, 0, 0.03),
+      ),
+      lg: (
+        0 8px 12px -3px rgba(0, 0, 0, 0.06),
+        0 3px 5px -4px rgba(0, 0, 0, 0.04),
+      )
     );
   }
 }
@@ -400,33 +315,20 @@
 // Scrollbar Derivation
 // --------------------------------------------
 
-/// Derive scrollbar tokens from a neutral palette
+/// Derive scrollbar tokens for the paper ramp
 /// @param {Map} $palette - Neutral palette map
 /// @param {Boolean} $is-dark - Whether in dark mode
 /// @return {Map} Scrollbar token values
-@function derive-scrollbar($palette, $is-dark: false, $palette-name: 'stone') {
+@function derive-scrollbar($palette, $is-dark: false, $palette-name: "paper") {
   @if $is-dark {
-    // Carbon (Fragments default) — transparent track, strong-border thumb.
-    @if $palette-name == 'carbon' {
-      @return (
-        track: transparent,
-        thumb: #4b4b4b,
-        thumb-hover: #b4b4b4
-      );
-    }
-
-    @return (
-      track: get-shade($palette, 800),
-      thumb: get-shade($palette, 600),
-      thumb-hover: get-shade($palette, 500)
-    );
-  } @else {
-    @return (
-      track: get-shade($palette, 100),
-      thumb: get-shade($palette, 300),
-      thumb-hover: get-shade($palette, 400)
-    );
+    // Transparent track, strong-border thumb on the warm charcoal plane.
+    @return (track: transparent, thumb: #4a4641, thumb-hover: #b6b0a8);
   }
+  @return (
+    track: get-shade($palette, 100),
+    thumb: get-shade($palette, 300),
+    thumb-hover: get-shade($palette, 400)
+  );
 }
 
 // --------------------------------------------
@@ -510,9 +412,9 @@
 /// @param {Color} $color - Color to measure
 /// @return {Number} Relative luminance 0-1
 @function _wcag-luminance($color) {
-  $r: _srgb-linearize(color.channel($color, 'red', $space: rgb));
-  $g: _srgb-linearize(color.channel($color, 'green', $space: rgb));
-  $b: _srgb-linearize(color.channel($color, 'blue', $space: rgb));
+  $r: _srgb-linearize(color.channel($color, "red", $space: rgb));
+  $g: _srgb-linearize(color.channel($color, "green", $space: rgb));
+  $b: _srgb-linearize(color.channel($color, "blue", $space: rgb));
   @return 0.2126 * $r + 0.7152 * $g + 0.0722 * $b;
 }