@usefragments/ui 1.0.2 → 1.2.0

package/src/tokens/_computed.scss

@@ -27,6 +27,11 @@ $_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;
+
 // --------------------------------------------
 // Computed: Base Configuration
 // --------------------------------------------
@@ -87,7 +92,12 @@ $computed-sidebar-item-height: density.px-to-rem($_density, map.get($_density, s
 
 // Accent colors (from brand seed)
 $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);
 
@@ -148,7 +158,7 @@ $computed-shadow-lg: map.get($_shadows-light, lg);
 $computed-focus-ring-color: derive.derive-focus-ring(seeds.$fui-brand, false);
 
 // Scrollbar
-$_scrollbar-light: derive.derive-scrollbar($_palette, false);
+$_scrollbar-light: derive.derive-scrollbar($_palette, false, seeds.$fui-neutral);
 $computed-scrollbar-track: map.get($_scrollbar-light, track);
 $computed-scrollbar-thumb: map.get($_scrollbar-light, thumb);
 $computed-scrollbar-thumb-hover: map.get($_scrollbar-light, thumb-hover);
@@ -160,8 +170,12 @@ $computed-backdrop: derive.derive-backdrop(false);
 // Computed: Colors - Dark Mode
 // --------------------------------------------
 
-// Accent colors — dark brands lightened for visibility; on-accent handles text contrast
+// 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);
@@ -212,11 +226,15 @@ $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)
+// 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).
 $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);
+$_scrollbar-dark: derive.derive-scrollbar($_palette, true, seeds.$fui-neutral);
 $computed-dark-scrollbar-track: map.get($_scrollbar-dark, track);
 $computed-dark-scrollbar-thumb: map.get($_scrollbar-dark, thumb);
 $computed-dark-scrollbar-thumb-hover: map.get($_scrollbar-dark, thumb-hover);

package/src/tokens/_derive.scss

@@ -155,6 +155,19 @@
 /// @return {Map} Surface token values
 @function derive-surfaces($palette, $is-dark: false, $palette-name: 'stone') {
   @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,
@@ -181,8 +194,9 @@
     );
   }
 
-  // Light mode: colorful palettes get tinted backgrounds
-  $is-colorful: $palette-name != 'stone';
+  // 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
@@ -217,6 +231,14 @@
 /// @return {Map} Body and main background values
 @function derive-app-surfaces($palette, $is-dark: false, $palette-name: 'stone') {
   @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,
@@ -230,7 +252,7 @@
     );
   }
 
-  @if $palette-name == 'stone' or $palette-name == 'wind' {
+  @if $palette-name == 'stone' or $palette-name == 'carbon' or $palette-name == 'wind' {
     @return (
       body: get-shade($palette, 100),
       main: #ffffff
@@ -256,6 +278,16 @@
 /// @return {Map} Text token values
 @function derive-text($palette, $is-dark: false, $palette-name: 'stone') {
   @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,
@@ -280,9 +312,9 @@
     );
   }
 
-  // Light mode background — stone uses white, colorful palettes use palette[50]
+  // Light mode background — stone/carbon use white, colorful palettes use palette[50]
   $bg: #ffffff;
-  @if $palette-name != 'stone' {
+  @if $palette-name != 'stone' and $palette-name != 'carbon' {
     $bg: get-shade($palette, 50);
   }
 
@@ -306,6 +338,14 @@
 /// @return {Map} Border token values
 @function derive-borders($palette, $is-dark: false, $palette-name: 'stone') {
   @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),
@@ -364,8 +404,17 @@
 /// @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) {
+@function derive-scrollbar($palette, $is-dark: false, $palette-name: 'stone') {
   @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),

package/src/tokens/_palettes.scss

@@ -120,6 +120,29 @@ $palette-fragments: (
   950: #0d1f17   // Darkest bg
 );
 
+// --------------------------------------------
+// Carbon - Fragments brand neutral (DEFAULT)
+// The hybrid-skin charcoal ramp. Distinct from `mono` (true black) — carbon's
+// dark surfaces sit at #212121 (page) with #171717 recessed panels and #2f2f2f
+// raised/elevated so panels read as material, not voids. Dark surface/text/
+// border values are emitted explicitly by the derive-* branches; light mode
+// behaves like a neutral white palette. Key stops: 900 = page bg,
+// 950 = recessed surface, 800 = hairline, 700 = strong border, 500 = faint text.
+// --------------------------------------------
+$palette-carbon: (
+  50:  #fafafa,
+  100: #f4f4f4,
+  200: #e4e4e4,
+  300: #d1d1d1,
+  400: #b0b0b0,
+  500: #8f8f8f,  // faint / placeholder text
+  600: #5a5a5a,
+  700: #4b4b4b,  // strong border
+  800: #323232,  // hairline / default border
+  900: #212121,  // page / body background
+  950: #171717   // recessed surface (cards, panels, code wells)
+);
+
 // --------------------------------------------
 // Fire - Warm red/orange tones
 // Energy, passion feel
@@ -149,6 +172,7 @@ $palettes: (
   "earth": $palette-earth,
   "fire": $palette-fire,
   "fragments": $palette-fragments,
+  "carbon": $palette-carbon,
   "wind": $palette-stone  // Legacy alias — "wind" was renamed to "stone"
 );
 

package/src/tokens/_seeds.scss

@@ -22,13 +22,16 @@
 // --------------------------------------------
 
 /// Primary brand color - derives accent colors, focus rings, etc.
+/// Default = Fragments "pine" (the fill/foreground accent). The out-of-box
+/// theme derives a sage foreground accent in dark mode from this seed.
 /// @type Color
-$fui-brand: #18181b !default;
+$fui-brand: #006b57 !default;
 
 /// Neutral palette name for surfaces, text, and borders
-/// Options: "stone" | "mono" | "ice" | "earth" | "sand" | "fire" | "fragments"
+/// Options: "carbon" | "stone" | "mono" | "ice" | "earth" | "sand" | "fire" | "fragments"
+/// Default = "carbon" (the Fragments "Flight Recorder" near-black ramp).
 /// @type String
-$fui-neutral: "stone" !default;
+$fui-neutral: "carbon" !default;
 
 /// Density preset controlling spacing scale
 /// Options: "compact" | "default" | "relaxed"
@@ -45,7 +48,7 @@ $fui-radius-style: "default" !default;
 // --------------------------------------------
 // Fail fast at compile time if invalid seed values are provided.
 
-$_valid-neutrals: "stone", "mono", "ice", "earth", "sand", "fire", "fragments";
+$_valid-neutrals: "carbon", "stone", "mono", "ice", "earth", "sand", "fire", "fragments";
 @if not list.index($_valid-neutrals, $fui-neutral) {
   @error "Invalid $fui-neutral: '#{$fui-neutral}'. Must be one of: #{$_valid-neutrals}";
 }
@@ -66,18 +69,23 @@ $_valid-radii: "sharp", "subtle", "default", "rounded", "pill";
 // Override these to customize semantic colors.
 // If not overridden, they use sensible defaults.
 
-/// Danger/error color (defaults to red-500)
+// The status seeds below are tuned to sit in one family with the sage brand
+// (`$fui-brand` / success `#7fc9b3`): soft, muted, ~60% lightness rather than
+// neon. Danger is the warm complement of sage, warning its split-complement,
+// info a cool teal-adjacent slate — so they read as one palette, not bolted-on.
+
+/// Danger/error color — muted coral-terracotta, sage's warm complement.
 /// @type Color
-$fui-danger: #ef4444 !default;
+$fui-danger: #d97066 !default;
 
-/// Success color (defaults to green-500)
+/// Success color (Fragments brand default — sage; green means "contract passing")
 /// @type Color
-$fui-success: #22c55e !default;
+$fui-success: #7fc9b3 !default;
 
-/// Warning color (defaults to amber-500)
+/// Warning color — honey amber, muted to match the sage family.
 /// @type Color
-$fui-warning: #f59e0b !default;
+$fui-warning: #e0aa5c !default;
 
-/// Info color (defaults to blue-500)
+/// Info color — dusty slate-blue, a cool teal-adjacent tone (was flat grey).
 /// @type Color
-$fui-info: #3b82f6 !default;
+$fui-info: #7fa6c4 !default;

package/src/tokens/_variables.scss

@@ -22,6 +22,7 @@
 // ============================================
 
 // Import computed values from seed system
+@use "sass:string";
 @use "computed" as computed;
 
 // --------------------------------------------
@@ -44,17 +45,15 @@ $fui-base-unit: computed.$computed-base-unit !default;
 // Typography
 // --------------------------------------------
 $fui-font-sans:
-  "Geist Sans",
-  "Geist",
+  "Inter Variable",
   Inter,
-  system-ui,
   -apple-system,
   BlinkMacSystemFont,
   "Segoe UI",
-  Roboto,
+  system-ui,
   sans-serif !default;
 $fui-font-mono:
-  "Geist Mono", "SF Mono", SFMono-Regular, ui-monospace, "Cascadia Code", Menlo, monospace !default;
+  "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace !default;
 
 // Font sizes (rem based on 14px root).
 // Scale ladder tuned for industry-leading docs hierarchy:
@@ -197,7 +196,7 @@ $fui-shadow-lg: computed.$computed-shadow-lg !default;
 // Focus ring (derived from $fui-brand)
 $fui-focus-ring-color: computed.$computed-focus-ring-color !default;
 $fui-focus-ring-offset: 2px !default;
-$fui-focus-ring-width: 1px !default;
+$fui-focus-ring-width: 2px !default;
 
 // Scrollbar (derived from $fui-neutral palette)
 $fui-scrollbar-width: 8px !default;
@@ -214,6 +213,28 @@ $fui-dark-color-on-accent: computed.$computed-dark-color-on-accent !default;
 $fui-dark-color-accent-hover: computed.$computed-dark-color-accent-hover !default;
 $fui-dark-color-accent-active: computed.$computed-dark-color-accent-active !default;
 
+// True when the brand seed is the Fragments default (pine). When true, the
+// runtime (relative-color) dark accent is pinned to the exact SCSS-computed
+// sage values so the ~93% relative-color path and the SCSS fallback agree.
+// Any consumer-supplied $fui-brand flips this false and restores the reactive
+// OKLCH derivation that tracks --fui-seed-brand at runtime.
+$fui-brand-is-default: computed.$brand-is-fragments-default !default;
+
+$_rt-dark-accent: $fui-dark-color-accent;
+$_rt-dark-accent-hover: $fui-dark-color-accent-hover;
+$_rt-dark-accent-active: $fui-dark-color-accent-active;
+@if not $fui-brand-is-default {
+  $_rt-dark-accent: string.unquote(
+    "oklch(from var(--fui-seed-brand) clamp(0.55, max(l, calc(0.95 - 2 * c)), 0.85) c h)"
+  );
+  $_rt-dark-accent-hover: string.unquote(
+    "oklch(from var(--fui-seed-brand) clamp(0.6, max(calc(l + 0.06), calc(0.97 - 2 * c)), 0.9) c h)"
+  );
+  $_rt-dark-accent-active: string.unquote(
+    "oklch(from var(--fui-seed-brand) clamp(0.5, max(calc(l - 0.04), calc(0.9 - 2 * c)), 0.82) c h)"
+  );
+}
+
 // Surface colors (dark) - derived from $fui-neutral palette
 $fui-dark-bg-primary: computed.$computed-dark-bg-primary !default;
 $fui-dark-bg-secondary: computed.$computed-dark-bg-secondary !default;
@@ -285,6 +306,8 @@ $fui-button-height-xs: computed.$computed-button-height-xs !default;
 $fui-button-height-sm: computed.$computed-button-height-sm !default;
 $fui-button-height-md: computed.$computed-button-height-md !default;
 $fui-button-height-lg: computed.$computed-button-height-lg !default;
+$fui-button-outlined-shadow: inset 0 1px 0
+  light-dark(color-mix(in srgb, white 72%, transparent), color-mix(in srgb, white 5%, transparent)) !default;
 
 // Input heights (derived from density seed)
 // Note: These are dedicated input tokens, not reusing button heights
@@ -323,9 +346,15 @@ $fui-sidebar-item-height: computed.$computed-sidebar-item-height !default; // de
 $fui-appshell-header-height: 56px !default;
 $fui-header-z-index: 40 !default;
 
-// CodeBlock background — shared with Markdown's <pre> prose styling.
-// Other code/tooltip styling tokens live in their component modules.
-$fui-code-bg: #0c0c0e !default;
+// CodeBlock background — shared with Markdown's <pre> prose styling — and
+// selection tint are runtime hooks so consuming apps can preserve their own
+// code-surface treatment without forking either component.
+$fui-code-bg: #171717 !default;
+$fui-code-selection-bg: color-mix(
+  in srgb,
+  var(--fui-button-primary-base, #006b57) 30%,
+  transparent
+) !default;
 
 // --------------------------------------------
 // CSS Custom Properties Export
@@ -508,12 +537,14 @@ $fui-code-bg: #0c0c0e !default;
     --fui-border: light-dark(#{$fui-border}, #{$fui-dark-border});
     --fui-border-default: light-dark(#{$fui-border-default}, #{$fui-dark-border-default});
     --fui-border-strong: light-dark(#{$fui-border-strong}, #{$fui-dark-border-strong});
+    --fui-border-subtle: color-mix(in srgb, var(--fui-border-default) 68%, transparent);
 
-    // Native browser text selection. This should track the primary action blue,
-    // while component-selected states can stay tuned per control density.
+    // Native browser text selection tracks the accent (pine in light, sage in
+    // dark) as a soft wash — matching the Flight Recorder accent-tint.
+    // Component-selected states stay tuned per control density.
     --fui-selection-bg: light-dark(
-      color-mix(in srgb, var(--fui-button-primary-base, #0a84ff) 18%, transparent),
-      color-mix(in srgb, var(--fui-button-primary-base, #0a84ff) 32%, transparent)
+      color-mix(in srgb, var(--fui-color-accent, #006b57) 18%, transparent),
+      color-mix(in srgb, var(--fui-color-accent, #7fc9b3) 22%, transparent)
     );
     --fui-selection-color: var(--fui-text-primary);
 
@@ -553,30 +584,13 @@ $fui-code-bg: #0c0c0e !default;
     --fui-kbd-radius: var(--fui-radius-sm);
     --fui-kbd-reserved-width: 2.714rem; // 38px, enough for "⌘K"
 
-    // Button chrome. Neutral and primary buttons use the same raised-edge
-    // recipe in light and dark: crisp border, subtle top highlight, and a
-    // pressed inset state.
-    --fui-button-radius: var(--fui-radius-lg);
-    --fui-button-primary-base: light-dark(#0a84ff, #0a84ff);
-    --fui-button-primary-hover: light-dark(#1994ff, #2f9bff);
-    --fui-button-primary-active: light-dark(#006edb, #0068d6);
-    --fui-button-primary-bg: linear-gradient(
-      to bottom,
-      color-mix(in srgb, var(--fui-button-primary-base) 78%, white 22%) 0%,
-      var(--fui-button-primary-base) 52%,
-      color-mix(in srgb, var(--fui-button-primary-active) 88%, black 12%) 100%
-    );
-    --fui-button-primary-bg-hover: linear-gradient(
-      to bottom,
-      color-mix(in srgb, var(--fui-button-primary-hover) 76%, white 24%) 0%,
-      var(--fui-button-primary-hover) 52%,
-      color-mix(in srgb, var(--fui-button-primary-active) 84%, black 16%) 100%
-    );
-    --fui-button-primary-bg-active: linear-gradient(
-      to bottom,
-      color-mix(in srgb, var(--fui-button-primary-active) 88%, black 12%) 0%,
-      var(--fui-button-primary-active) 100%
-    );
+    // Button chrome. Primary fill = pine. Border/color are shared; the fill
+    // treatment and radius branch on the brand: the Fragments default renders a
+    // FLAT solid pill (hybrid-skin), while consumer-branded builds keep the
+    // raised-gradient recipe with crisp border, top highlight, and pressed inset.
+    --fui-button-primary-base: light-dark(#006b57, #006b57);
+    --fui-button-primary-hover: light-dark(#187762, #187762);
+    --fui-button-primary-active: light-dark(#005f4c, #005f4c);
     --fui-button-primary-border-hover: color-mix(
       in srgb,
       var(--fui-button-primary-active) 86%,
@@ -588,13 +602,47 @@ $fui-code-bg: #0c0c0e !default;
       black 26%
     );
     --fui-button-primary-color: #fff;
-    --fui-button-primary-shadow:
-      inset 0 1px 0 color-mix(in srgb, white 30%, transparent),
-      inset 0 -1px 0 color-mix(in srgb, black 18%, transparent),
-      0 1px 1px color-mix(in srgb, black 16%, transparent);
-    --fui-button-primary-shadow-active:
-      inset 0 1px 2px color-mix(in srgb, black 30%, transparent),
-      0 1px 0 color-mix(in srgb, white 8%, transparent);
+
+    @if $fui-brand-is-default {
+      // Flat solid pill — hybrid-skin treatment.
+      --fui-button-radius: var(--fui-radius-full);
+      --fui-button-primary-bg: var(--fui-button-primary-base);
+      --fui-button-primary-bg-hover: var(--fui-button-primary-hover);
+      --fui-button-primary-bg-active: var(--fui-button-primary-active);
+      --fui-button-primary-shadow: none;
+      --fui-button-primary-shadow-active: inset
+        0
+        1px
+        2px
+        color-mix(in srgb, black 22%, transparent);
+    } @else {
+      // Raised-gradient recipe for consumer-branded builds.
+      --fui-button-radius: var(--fui-radius-lg);
+      --fui-button-primary-bg: linear-gradient(
+        to bottom,
+        color-mix(in srgb, var(--fui-button-primary-base) 78%, white 22%) 0%,
+        var(--fui-button-primary-base) 52%,
+        color-mix(in srgb, var(--fui-button-primary-active) 88%, black 12%) 100%
+      );
+      --fui-button-primary-bg-hover: linear-gradient(
+        to bottom,
+        color-mix(in srgb, var(--fui-button-primary-hover) 76%, white 24%) 0%,
+        var(--fui-button-primary-hover) 52%,
+        color-mix(in srgb, var(--fui-button-primary-active) 84%, black 16%) 100%
+      );
+      --fui-button-primary-bg-active: linear-gradient(
+        to bottom,
+        color-mix(in srgb, var(--fui-button-primary-active) 88%, black 12%) 0%,
+        var(--fui-button-primary-active) 100%
+      );
+      --fui-button-primary-shadow:
+        inset 0 1px 0 color-mix(in srgb, white 30%, transparent),
+        inset 0 -1px 0 color-mix(in srgb, black 18%, transparent),
+        0 1px 1px color-mix(in srgb, black 16%, transparent);
+      --fui-button-primary-shadow-active:
+        inset 0 1px 2px color-mix(in srgb, black 30%, transparent),
+        0 1px 0 color-mix(in srgb, white 8%, transparent);
+    }
 
     --fui-button-neutral-bg: linear-gradient(
       to bottom,
@@ -638,6 +686,7 @@ $fui-code-bg: #0c0c0e !default;
       var(--fui-text-primary) 42%
     );
     --fui-button-neutral-color: var(--fui-text-primary);
+    --fui-button-outlined-shadow: #{$fui-button-outlined-shadow};
     --fui-button-neutral-shadow:
       inset 0 1px 0
         light-dark(
@@ -650,6 +699,9 @@ $fui-code-bg: #0c0c0e !default;
       inset 0 1px 2px color-mix(in srgb, black 16%, transparent),
       inset 0 0 0 1px color-mix(in srgb, var(--fui-text-primary) 6%, transparent);
 
+    --fui-code-bg: #{$fui-code-bg};
+    --fui-code-selection-bg: #{$fui-code-selection-bg};
+
     // Popup/menu active-item highlight — neutral, deliberately stronger than
     // --fui-bg-hover (which is tuned for subtle surface hovers and reads as ~invisible
     // on menu items, esp. in dark mode). Shared by every popup-list surface. Accent is
@@ -674,9 +726,12 @@ $fui-code-bg: #0c0c0e !default;
     --fui-sidebar-footer-border: color-mix(in srgb, var(--fui-border-default) 68%, transparent);
 
     // Card/panel surfaces.
+    --fui-badge-radius: var(--fui-radius-lg);
+    --fui-badge-dot-color: currentColor;
     --fui-card-radius: var(--fui-radius-lg);
     --fui-card-bg: color-mix(in srgb, var(--fui-bg-elevated) 92%, transparent);
     --fui-card-border: color-mix(in srgb, var(--fui-border-default) 86%, transparent);
+    --fui-card-outlined-border: var(--fui-card-border);
     --fui-card-shadow: inset 0 1px 0
       light-dark(
         color-mix(in srgb, white 86%, transparent),
@@ -692,6 +747,8 @@ $fui-code-bg: #0c0c0e !default;
       var(--fui-bg-elevated) 84%,
       var(--fui-text-primary) 6%
     );
+    --fui-card-active-shadow: inset 0 1px 2px color-mix(in srgb, black 12%, transparent);
+    --fui-card-panel-shadow: var(--fui-card-shadow);
     --fui-card-stat-bg: color-mix(in srgb, var(--fui-bg-elevated) 74%, transparent);
     --fui-card-stat-border: color-mix(in srgb, var(--fui-border-default) 78%, transparent);
     --fui-card-stat-shadow: var(--fui-card-shadow);
@@ -810,10 +867,10 @@ $fui-code-bg: #0c0c0e !default;
       // brand (high c) keeps its own lightness, while a neutral grey brand (c≈0) lifts
       // toward ~0.85 so it stays visible on dark surfaces where lightness is the only
       // perceptual cue. Final L is clamped to [0.55, 0.85].
-      --fui-color-accent: light-dark(
-        var(--fui-seed-brand),
-        oklch(from var(--fui-seed-brand) clamp(0.55, max(l, calc(0.95 - 2 * c)), 0.85) c h)
-      );
+      // Dark half is gated: the Fragments default emits the exact SCSS-computed
+      // sage constants (#{$_rt-dark-accent}) so this path and the fallback agree;
+      // any consumer $fui-brand restores the reactive chroma-aware OKLCH lift.
+      --fui-color-accent: light-dark(var(--fui-seed-brand), #{$_rt-dark-accent});
 
       // Auto-contrast text for elements on accent backgrounds (buttons, chips, etc.)
       // Lightness > 0.6 → dark text; otherwise → white. Users can override this token.
@@ -822,15 +879,11 @@ $fui-code-bg: #0c0c0e !default;
       );
       --fui-color-accent-hover: light-dark(
         oklch(from var(--fui-seed-brand) max(0.05, calc(l - 0.06)) c h),
-        oklch(
-          from var(--fui-seed-brand) clamp(0.6, max(calc(l + 0.06), calc(0.97 - 2 * c)), 0.9) c h
-        )
+        #{$_rt-dark-accent-hover}
       );
       --fui-color-accent-active: light-dark(
         oklch(from var(--fui-seed-brand) max(0.05, calc(l - 0.12)) c h),
-        oklch(
-          from var(--fui-seed-brand) clamp(0.5, max(calc(l - 0.04), calc(0.9 - 2 * c)), 0.82) c h
-        )
+        #{$_rt-dark-accent-active}
       );
 
       // Semantic hover derived from seed
@@ -881,18 +934,12 @@ $fui-code-bg: #0c0c0e !default;
     // is never clamped, so saturated brands (e.g. blue-600) stay true in dark mode.
     :root[data-theme="dark"],
     :root.dark {
-      --fui-color-accent: oklch(
-        from var(--fui-seed-brand) clamp(0.55, max(l, calc(0.95 - 2 * c)), 0.85) c h
-      );
+      --fui-color-accent: #{$_rt-dark-accent};
       --fui-color-on-accent: oklch(
         from var(--fui-color-accent) calc(0 + (1 - clamp(0, calc((l - 0.6) * 999), 1))) 0 0
       );
-      --fui-color-accent-hover: oklch(
-        from var(--fui-seed-brand) clamp(0.6, max(calc(l + 0.06), calc(0.97 - 2 * c)), 0.9) c h
-      );
-      --fui-color-accent-active: oklch(
-        from var(--fui-seed-brand) clamp(0.5, max(calc(l - 0.04), calc(0.9 - 2 * c)), 0.82) c h
-      );
+      --fui-color-accent-hover: #{$_rt-dark-accent-hover};
+      --fui-color-accent-active: #{$_rt-dark-accent-active};
       --fui-color-danger-bg: color-mix(in oklch, var(--fui-seed-danger) 24%, black);
       --fui-color-success-bg: color-mix(in oklch, var(--fui-seed-success) 24%, black);
       --fui-color-warning-bg: color-mix(in oklch, var(--fui-seed-warning) 24%, black);

package/dist/components/Cloud/DashboardLayoutPrototypes.shared.d.ts

@@ -1,33 +0,0 @@
-import { type ProgressProps } from "../Progress";
-export { PrototypeShell } from "./DashboardLayoutPrototypes.shell";
-export type StateVariant = "success" | "warning" | "error" | "info";
-export type AreaRow = {
-    area: string;
-    owner: string;
-    coverage: number;
-    drift: number;
-    criticality: string;
-    state: "Healthy" | "Watching" | "Blocked" | "Review";
-    variant: StateVariant;
-};
-export declare const areas: AreaRow[];
-export declare function MetricPanel({ label, value, progress, variant, }: {
-    label: string;
-    value: string;
-    progress: number;
-    variant?: ProgressProps["variant"];
-}): import("react/jsx-runtime").JSX.Element;
-export declare function CoverageHero({ className }?: {
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function AreasTable({ title }: {
-    title?: string;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function ActionPanel({ className }?: {
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function ActivityPanel(): import("react/jsx-runtime").JSX.Element;
-export declare function ActivityTable(): import("react/jsx-runtime").JSX.Element;
-export declare function StatePanel(): import("react/jsx-runtime").JSX.Element;
-export declare function FindingsToolbar(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=DashboardLayoutPrototypes.shared.d.ts.map

package/dist/components/Cloud/DashboardLayoutPrototypes.shared.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DashboardLayoutPrototypes.shared.d.ts","sourceRoot":"","sources":["../../../src/components/Cloud/DashboardLayoutPrototypes.shared.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAK3D,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEpE,MAAM,MAAM,OAAO,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;IACrD,OAAO,EAAE,YAAY,CAAC;CACvB,CAAC;AAUF,eAAO,MAAM,KAAK,EAAE,OAAO,EAqC1B,CAAC;AAyFF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAmB,GACpB,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;CACpC,2CAgBA;AAED,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,GAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAO,2CAsDtE;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAuB,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,2CAwBzE;AAED,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,GAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAO,2CAuBrE;AAED,wBAAgB,aAAa,4CAW5B;AAED,wBAAgB,aAAa,4CAY5B;AAED,wBAAgB,UAAU,4CA6BzB;AAED,wBAAgB,eAAe,4CAoB9B"}

package/dist/components/Cloud/DashboardLayoutPrototypes.shell.d.ts

@@ -1,11 +0,0 @@
-import type { ReactNode } from "react";
-export type CloudNavLabel = "Dashboard" | "Pull Requests" | "Backlog" | "Governance" | "Developer setup" | "Settings";
-export declare function PrototypeShell({ activeNav, eyebrow, title, description, actions, children, }: {
-    activeNav?: CloudNavLabel;
-    eyebrow?: string;
-    title: string;
-    description?: string;
-    actions?: ReactNode;
-    children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=DashboardLayoutPrototypes.shell.d.ts.map

package/dist/components/Cloud/DashboardLayoutPrototypes.shell.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DashboardLayoutPrototypes.shell.d.ts","sourceRoot":"","sources":["../../../src/components/Cloud/DashboardLayoutPrototypes.shell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAmBvC,MAAM,MAAM,aAAa,GACrB,WAAW,GACX,eAAe,GACf,SAAS,GACT,YAAY,GACZ,iBAAiB,GACjB,UAAU,CAAC;AAmEf,wBAAgB,cAAc,CAAC,EAC7B,SAAuB,EACvB,OAAO,EACP,KAAK,EACL,WAA+E,EAC/E,OAAO,EACP,QAAQ,GACT,EAAE;IACD,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAwCA"}

package/dist/components/Cloud/PullRequestsPrototypes.content.d.ts

@@ -1,5 +0,0 @@
-export declare function PrototypeActions(): import("react/jsx-runtime").JSX.Element;
-export declare function PullRequestInbox({ density }: {
-    density?: "condensed" | "regular";
-}): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=PullRequestsPrototypes.content.d.ts.map

package/dist/components/Cloud/PullRequestsPrototypes.content.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PullRequestsPrototypes.content.d.ts","sourceRoot":"","sources":["../../../src/components/Cloud/PullRequestsPrototypes.content.tsx"],"names":[],"mappings":"AAsLA,wBAAgB,gBAAgB,4CAQ/B;AAqFD,wBAAgB,gBAAgB,CAAC,EAAE,OAAqB,EAAE,EAAE;IAAE,OAAO,CAAC,EAAE,WAAW,GAAG,SAAS,CAAA;CAAE,2CAOhG"}

package/dist/components/Cloud/PullRequestsPrototypes.detail-panels.d.ts

@@ -1,4 +0,0 @@
-export declare function FindingsPanel(): import("react/jsx-runtime").JSX.Element;
-export declare function ConversationPanel(): import("react/jsx-runtime").JSX.Element;
-export declare function ChangedFilesPanel(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=PullRequestsPrototypes.detail-panels.d.ts.map

package/dist/components/Cloud/PullRequestsPrototypes.detail-panels.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PullRequestsPrototypes.detail-panels.d.ts","sourceRoot":"","sources":["../../../src/components/Cloud/PullRequestsPrototypes.detail-panels.tsx"],"names":[],"mappings":"AAiHA,wBAAgB,aAAa,4CAyD5B;AAMD,wBAAgB,iBAAiB,4CA8ChC;AAiJD,wBAAgB,iBAAiB,4CAahC"}