@usefragments/ui 1.5.4 → 1.7.0

package/src/tokens/_density.scss

@@ -2,109 +2,43 @@
 // @usefragments/ui Density Scales
 // ============================================
 //
-// Defines 3 density presets that control spacing and sizing.
-// Each preset uses a different base unit to scale all spacing.
+// Compatibility adapter over the generated Measurement Module. Existing Sass
+// callers keep their flat map/function API, while measurements.json remains the
+// only editable numeric owner.
 //
 // ============================================
 
-@use "sass:math";
 @use "sass:map";
+@use "sass:math";
+@use "measurements.generated" as measurements;
 
-// --------------------------------------------
-// Density Definitions
-// --------------------------------------------
-// Each density includes:
-// - base-unit: The fundamental spacing unit
-// - multipliers: Scale factors for spacing tokens
-
-$density-compact: (
-  base-unit: 6px,
-  base-font-size: 14px,
-  // Button heights (compact, with a 32px interactive floor)
-  button-height-xs: 32px,
-  button-height-sm: 32px,
-  button-height-md: 32px,
-  button-height-lg: 36px,
-  // 6 units
-  // Input height
-  input-height: 32px,
-  input-height-sm: 32px,
-  input-height-lg: 36px,
-  // 6 units
-  // Touch targets
-  touch-sm: 32px,
-  touch-md: 32px,
-  touch-lg: 40px,
-  // Sidebar navigation
-  sidebar-item-height: 32px,
-);
-
-$density-default: (
-  base-unit: 7px,
-  base-font-size: 14px,
-  // Button heights align with field heights at each size
-  button-height-xs: 32px,
-  button-height-sm: 32px,
-  button-height-md: 40px,
-  button-height-lg: 44px,
-  // ~6 units
-  // Input height
-  input-height: 40px,
-  // ~6 units
-  input-height-sm: 32px,
-  // ~4.5 units
-  input-height-lg: 44px,
-  // ~6 units
-  // Touch targets (baseline)
-  touch-sm: 32px,
-  touch-md: 32px,
-  touch-lg: 44px,
-  // WCAG AAA recommended
-  // Sidebar navigation
-  sidebar-item-height: 32px,
-);
+@function _adapt-density($name) {
+  @return (
+    base-unit: measurements.density-value($name, "baseUnit"),
+    base-font-size: measurements.density-value($name, "baseFontSize"),
+    spacing-multipliers: measurements.density-value($name, "spacingMultipliers"),
+    control-height-xs: measurements.density-nested-value($name, "controlHeight", "xs"),
+    control-height-sm: measurements.density-nested-value($name, "controlHeight", "sm"),
+    control-height-md: measurements.density-nested-value($name, "controlHeight", "md"),
+    control-height-lg: measurements.density-nested-value($name, "controlHeight", "lg"),
+    touch-sm: measurements.density-nested-value($name, "touch", "sm"),
+    touch-md: measurements.density-nested-value($name, "touch", "md"),
+    touch-lg: measurements.density-nested-value($name, "touch", "lg"),
+    sidebar-item-height: measurements.density-value($name, "sidebarItemHeight")
+  );
+}
 
-$density-relaxed: (
-  base-unit: 8px,
-  base-font-size: 14px,
-  // Button heights align with field heights at each size
-  button-height-xs: 32px,
-  button-height-sm: 32px,
-  button-height-md: 44px,
-  button-height-lg: 48px,
-  // 6 units
-  // Input height
-  input-height: 44px,
-  // ~5.5 units
-  input-height-sm: 32px,
-  // 4 units
-  input-height-lg: 48px,
-  // 6 units
-  // Touch targets (proportional from default, not blown out)
-  touch-sm: 32px,
-  touch-md: 40px,
-  touch-lg: 48px,
-  // +9% from default (unchanged)
-  // Sidebar navigation
-  sidebar-item-height: 36px,
-);
+$density-compact: _adapt-density("compact");
+$density-default: _adapt-density("default");
+$density-relaxed: _adapt-density("relaxed");
 
-// --------------------------------------------
-// Density Map for Dynamic Access
-// --------------------------------------------
 $densities: (
   "compact": $density-compact,
   "default": $density-default,
   "relaxed": $density-relaxed,
 );
 
-// --------------------------------------------
-// Helper Functions
-// --------------------------------------------
-
-/// Get a density configuration by name
-/// @param {String} $name - Density name (compact, default, relaxed)
-/// @return {Map} The density configuration map
+/// Get a density configuration by name.
 @function get-density($name) {
   @if not map.has-key($densities, $name) {
     @warn "Unknown density '#{$name}'. Using 'default' as fallback.";
@@ -113,10 +47,7 @@ $densities: (
   @return map.get($densities, $name);
 }
 
-/// Get a specific value from a density configuration
-/// @param {Map} $density - A density configuration map
-/// @param {String} $key - The key to retrieve
-/// @return {*} The value
+/// Get a specific value from a density configuration.
 @function density-value($density, $key) {
   @if not map.has-key($density, $key) {
     @warn "Unknown density key '#{$key}'.";
@@ -125,52 +56,30 @@ $densities: (
   @return map.get($density, $key);
 }
 
-/// Derive spacing scale from base unit
-/// Returns a map with spacing tokens
-/// @param {Map} $density - A density configuration map
-/// @return {Map} Spacing tokens
+/// Derive the legacy density-responsive spacing map from generated values.
 @function derive-spacing($density) {
   $base: map.get($density, base-unit);
   $font-size: map.get($density, base-font-size);
-
-  // Convert to rem based on font size
-  // 1 unit = base-unit / font-size * 1rem
   $unit-rem: math.div($base, $font-size) * 1rem;
+  $multipliers: map.get($density, spacing-multipliers);
 
   @return (
-    // Micro spacing (pixel-precise for tiny alignments)
-    px: 1px,
-    0-5: $unit-rem * 0.3,
-    // ~2px for 7px base
-    0-75: $unit-rem * 0.43,
-
-    // ~3px for 7px base
-    // Standard spacing scale
-    1: $unit-rem,
-    // 1 unit
-    2: $unit-rem * 2,
-    // 2 units
-    3: $unit-rem * 3,
-    // 3 units
-    4: $unit-rem * 4,
-    // 4 units
-    5: $unit-rem * 5,
-    // 5 units
-    6: $unit-rem * 6,
-    // 6 units
-    8: $unit-rem * 8,
-    // 8 units
-    10: $unit-rem * 10,
-    // 10 units
-    12: $unit-rem * 12 // 12 units
+    px: map.get($multipliers, "px"),
+    0-5: $unit-rem * map.get($multipliers, "0-5"),
+    0-75: $unit-rem * map.get($multipliers, "0-75"),
+    1: $unit-rem * map.get($multipliers, "1"),
+    2: $unit-rem * map.get($multipliers, "2"),
+    3: $unit-rem * map.get($multipliers, "3"),
+    4: $unit-rem * map.get($multipliers, "4"),
+    5: $unit-rem * map.get($multipliers, "5"),
+    6: $unit-rem * map.get($multipliers, "6"),
+    8: $unit-rem * map.get($multipliers, "8"),
+    10: $unit-rem * map.get($multipliers, "10"),
+    12: $unit-rem * map.get($multipliers, "12")
   );
 }
 
-/// Convert pixel value to rem based on density
-/// @param {Map} $density - A density configuration map
-/// @param {Number} $px - Pixel value to convert
-/// @return {Number} Value in rem
+/// Convert a pixel value to rem based on a density profile.
 @function px-to-rem($density, $px) {
-  $font-size: map.get($density, base-font-size);
-  @return math.div($px, $font-size) * 1rem;
+  @return math.div($px, map.get($density, base-font-size)) * 1rem;
 }

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;
 }