@flikk/ui 1.0.0-beta.29 → 1.0.0-beta.30

package/src/styles/theme.css

@@ -1,35 +1,45 @@
 @theme {
-   /* Primary color palette - full 50-950 range */
-   --color-primary-50: oklch(0.962 0.018 272.314);
-   --color-primary-100: oklch(0.93 0.034 272.788);
-   --color-primary-200: oklch(0.87 0.065 274.039);
-   --color-primary-300: oklch(0.785 0.115 274.713);
-   --color-primary-400: oklch(0.673 0.182 276.935);
-   --color-primary-500: oklch(0.585 0.233 277.117);
-   --color-primary-600: oklch(0.511 0.262 276.966);
-   --color-primary-700: oklch(0.457 0.24 277.023);
-   --color-primary-800: oklch(0.398 0.195 277.366);
-   --color-primary-900: oklch(0.359 0.144 278.697);
-   --color-primary-950: oklch(0.257 0.09 281.288);
-
-   --color-primary: var(--color-primary-600);
-   --color-primary-contrast: var(--color-neutral-50);
-
-   /* Secondary color palette - Tailwind v4 gray */
-   --color-secondary-50: oklch(0.984 0.003 247.858);
-   --color-secondary-100: oklch(0.968 0.007 247.896);
-   --color-secondary-200: oklch(0.929 0.013 255.508);
-   --color-secondary-300: oklch(0.869 0.022 252.894);
-   --color-secondary-400: oklch(0.704 0.04 256.788);
-   --color-secondary-500: oklch(0.554 0.046 257.417);
-   --color-secondary-600: oklch(0.446 0.043 257.281);
-   --color-secondary-700: oklch(0.372 0.044 257.287);
-   --color-secondary-800: oklch(0.279 0.041 260.031);
-   --color-secondary-900: oklch(0.208 0.042 265.755);
-   --color-secondary-950: oklch(0.129 0.042 264.695);
+   /* Primary color palette — monochrome: aliased to the neutral scale.
+      (Original blue ramp kept for easy revert:
+       50 oklch(0.962 0.018 272.314) … 600 oklch(0.511 0.262 276.966) … 950 oklch(0.257 0.09 281.288)) */
+   --color-primary-50: var(--color-neutral-50);
+   --color-primary-100: var(--color-neutral-100);
+   --color-primary-200: var(--color-neutral-200);
+   --color-primary-300: var(--color-neutral-300);
+   --color-primary-400: var(--color-neutral-400);
+   --color-primary-500: var(--color-neutral-500);
+   --color-primary-600: var(--color-neutral-600);
+   --color-primary-700: var(--color-neutral-700);
+   --color-primary-800: var(--color-neutral-800);
+   --color-primary-900: var(--color-neutral-900);
+   --color-primary-950: var(--color-neutral-950);
+
+   /* Light mode: dark primary → dark buttons with light text (contrast auto-resolves white). */
+   --color-primary: var(--color-primary-900);
+   /* Auto-derived: dark text on light/white primaries, white text on dark ones.
+      Crossover at oklch L 0.85 — see CLAUDE.md §3. The relative-color syntax reads
+      the live --color-primary, so a raw override (even white) self-corrects. */
+   --color-primary-contrast: oklch(from var(--color-primary) clamp(0, (0.85 - l) * 1000, 1) 0 0);
+
+   /* DEPRECATED: the `secondary` semantic color was removed (it overlapped
+      `neutral` and was ambiguous — see CLAUDE.md §8). These vars are now aliased
+      to the neutral scale so any stray/consumer CSS still resolves. Remove next
+      major. Original Tailwind-gray ramp kept for reference:
+      50 oklch(0.984 0.003 247.858) … 600 oklch(0.446 0.043 257.281) … 950 oklch(0.129 0.042 264.695). */
+   --color-secondary-50: var(--color-neutral-50);
+   --color-secondary-100: var(--color-neutral-100);
+   --color-secondary-200: var(--color-neutral-200);
+   --color-secondary-300: var(--color-neutral-300);
+   --color-secondary-400: var(--color-neutral-400);
+   --color-secondary-500: var(--color-neutral-500);
+   --color-secondary-600: var(--color-neutral-600);
+   --color-secondary-700: var(--color-neutral-700);
+   --color-secondary-800: var(--color-neutral-800);
+   --color-secondary-900: var(--color-neutral-900);
+   --color-secondary-950: var(--color-neutral-950);
 
    --color-secondary: var(--color-secondary-600);
-   --color-secondary-contrast: var(--color-neutral-50);
+   --color-secondary-contrast: oklch(from var(--color-secondary) clamp(0, (0.85 - l) * 1000, 1) 0 0);
 
    /* Danger/Error color palette - full 50-950 range */
    --color-danger-50: oklch(0.971 0.013 17.38);
@@ -45,7 +55,7 @@
    --color-danger-950: oklch(0.258 0.092 26.042);
 
    --color-danger: var(--color-danger-600);
-   --color-danger-contrast: var(--color-neutral-50);
+   --color-danger-contrast: oklch(from var(--color-danger) clamp(0, (0.85 - l) * 1000, 1) 0 0);
 
    /* Success color palette - Tailwind v4 teal */
    --color-success-50: oklch(0.984 0.014 180.72);
@@ -61,7 +71,7 @@
    --color-success-950: oklch(0.277 0.046 192.524);
 
    --color-success: var(--color-success-500);
-   --color-success-contrast: var(--color-neutral-50);
+   --color-success-contrast: oklch(from var(--color-success) clamp(0, (0.85 - l) * 1000, 1) 0 0);
 
    /* Warning color palette - full 50-950 range */
    --color-warning-50: oklch(0.987 0.022 95.277);
@@ -77,7 +87,7 @@
    --color-warning-950: oklch(0.279 0.077 45.635);
 
    --color-warning: var(--color-warning-600);
-   --color-warning-contrast: var(--color-neutral-50);
+   --color-warning-contrast: oklch(from var(--color-warning) clamp(0, (0.85 - l) * 1000, 1) 0 0);
 
    /* text color */
    --color-text-primary: var(--color-neutral-950);
@@ -93,25 +103,46 @@
    /* Interaction border (hover/focus-adjacent) — darkens in light for a clear
      edge, mirror of --color-surface-hover but on the border axis. */
    --color-border-hover: oklch(80% 0 0);
-   /* Surface elevation ladder — elevation reads LIGHTER (monotonic, symmetric with dark mode).
-     Light mode: a soft neutral page (background, 96.5%) with WHITE cards (surface) lifting off it.
-     raised/overlay are also white — white is the ceiling, so levels above the card separate by
-     shadow + border (and modals by a dimmed backdrop), not by luminance. sunken (95%) is the
-     recessed well that lives INSIDE white cards (inputs, code, table zebra, tracks) — 5% below the
-     card, and also below the floor. */
-   --color-surface-sunken: oklch(97.5% 0 0);
-   --color-surface: oklch(100% 0 0);
-   /* white — Card, KPI, Table, Sidebar… lift off the gray floor */
-   --color-surface-raised: oklch(100% 0 0);
-   /* white — Modal/Drawer; pop via shadow + dimmed backdrop */
-   --color-surface-overlay: oklch(100% 0 0);
-   /* white — Dropdown/Popover/Tooltip; pop via shadow */
+   /* ============================================
+     SURFACE ELEVATION LADDER — Fluid Functionalism (https://www.fluidfunctionalism.com/docs/surfaces)
+     8 numbered rungs are the ENGINE source of truth; the semantic tokens below are ALIASES onto fixed
+     rungs (existing theme files keep using --color-surface-overlay etc. unchanged). The relative-
+     elevation engine (src/theme/SurfaceContext) paints a deeper rung at runtime when a surface is nested.
+     Named --surface-N (NOT --color-surface-N) on purpose — keeps the bg-[var(--surface-N)] arbitrary-
+     value convention and avoids Tailwind auto-generating a colliding `surface-N` color utility.
+     Light: NEAR-WHITE floor (1=#FAFAFA), then WHITE ceiling (3–8 all #FFFFFF) — depth above the card is
+     carried by the doubling shadow ladder, NOT luminance. ============================================ */
+   --surface-1: #fafafa;
+   --surface-2: #fcfcfc;
+   --surface-3: #ffffff;
+   --surface-4: #ffffff;
+   --surface-5: #ffffff;
+   --surface-6: #ffffff;
+   --surface-7: #ffffff;
+   --surface-8: #ffffff;
+
+   /* Semantic aliases onto the rungs. */
+   --color-surface: var(--surface-3);
+   /* card — Card, KPI, Table, Sidebar… lift off the near-white floor via the shadow ring */
+   --color-surface-raised: var(--surface-4);
+   /* Modal/Drawer; pop via shadow + dimmed backdrop */
+   --color-surface-overlay: var(--surface-5);
+   /* Dropdown/Popover/Tooltip; pop via shadow */
+   /* sunken stays STANDALONE (a recess INSIDE a card — code, table zebra, tracks — not an
+     elevation rung), so it is not aliased to the ladder. */
+   --color-surface-sunken: #f4f4f4;
+   /* Input/field fill — the surface a text field paints. Defaults to the card surface (rung 3); the
+     relative-elevation engine raises it to ONE RUNG ABOVE the host (surfaceClasses publishes
+     `--field-fill = surface(level+1)` on each surface element, which inputs inherit via the CSS
+     cascade), so a field lifts a step out of its card/modal/overlay in dark. In light, rungs 3–8 are
+     all white, so this resolves to white = unchanged from a plain surface fill. */
+   --field-fill: var(--color-surface);
    /* Interaction fill (the one tokenized state): translucent tint so it composites correctly
      over ANY surface level — darkens in light, lightens in dark. For hover/active highlights. */
    --color-surface-hover: oklch(0% 0 0 / 0.05);
    --color-chart-track: rgba(0, 0, 0, 0.06);
-   --color-background: oklch(94.5% 0 0);
-   /* clearly-readable light-gray page canvas — white cards lift off it */
+   --color-background: var(--surface-1);
+   /* near-white page canvas (rung 1) — white cards lift via the shadow ring */
    /* DEPRECATED (remove next major): alias of --color-surface. Use the surface ladder. */
    --color-background-secondary: var(--color-surface);
    /* DEPRECATED (remove next major): recessed/subtle fills. Migrate per-usage to --color-surface-sunken
@@ -179,6 +210,11 @@
    /* Forms & Controls (1x base = 8px) */
    --form-radius: var(--radius-base);
 
+   /* Checkbox: small absolute box (20–28px), so the radius is CAPPED — a raw
+      multiple of --radius-base rounds the sm variant into a circle once the
+      base grows. min() keeps it a rounded square at any base. */
+   --checkbox-radius: min(calc(var(--radius-base) * 0.5), 6px);
+
    /* Overlays (1.5x base = 12px) */
    --dropdown-radius: calc(var(--radius-base) * 1.5);
    --tooltip-radius: calc(var(--radius-base) / 1);
@@ -187,7 +223,7 @@
 
    /* Feedback surfaces */
    --alert-radius: calc(var(--radius-base) * 1.5);
-   --toast-radius: calc(var(--radius-base) * 2);
+   --toast-radius: calc(var(--radius-base) * 1.5);
    --drawer-radius: calc(var(--radius-base) * 2);
    --metric-radius: calc(var(--radius-base) * 2);
 
@@ -422,6 +458,17 @@
       --ui-scrollbar-thumb-active: rgb(209 213 219);
       --ui-scrollbar-track-rest: transparent;
       --ui-scrollbar-track-active: rgba(209, 213, 219, 0.1);
+
+      /* Shimmer effect (effects/Shimmer) — light defaults.
+       Text shimmer adapts to dark for free via --color-text-* tokens; only the
+       surface sweep streak needs a .dark override (a strong white streak is too
+       loud on the near-black floor) — see the .dark block below. Both default
+       and override live in @layer theme so the .dark value wins the cascade. */
+      --shimmer-color: var(--color-text-muted);
+      --shimmer-highlight: var(--color-text-primary);
+      --shimmer-duration: 2s;
+      --shimmer-spread: 20%;
+      --shimmer-surface-highlight: color-mix(in srgb, #fff 60%, transparent);
    }
 
    /* Realistic layered elevation shadows — light mode (source of truth).
@@ -432,59 +479,63 @@
      🔴 Named --elevation-* on purpose, NOT --shadow-*: a `--shadow-*` theme
      property makes Tailwind v4 auto-generate a colliding `shadow-*` utility. */
    :root {
-      --elevation-real-sm:
-         0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
-         0.1px 3.6px 3.2px -4.1px rgba(0, 0, 0, 0.08);
-      --elevation-real-md:
-         0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
-         0.1px 3.7px 3.3px -2px rgba(0, 0, 0, 0.09),
-         0.4px 18.2px 16.2px -4.1px rgba(0, 0, 0, 0.06);
-      --elevation-real-lg:
-         0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
-         0.1px 3.6px 3.2px -0.8px rgba(0, 0, 0, 0.06),
-         0.2px 9.5px 8.5px -1.6px rgba(0, 0, 0, 0.06),
-         0.5px 22.6px 20.2px -2.4px rgba(0, 0, 0, 0.05),
-         1.1px 47.3px 42.2px -3.2px rgba(0, 0, 0, 0.04),
-         2.1px 87.7px 78.3px -4.1px rgba(0, 0, 0, 0.03);
-      --elevation-real-xl:
-         0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
-         0.2px 4.8px 4.3px -0.5px rgba(0, 0, 0, 0.06),
-         0.4px 11.2px 10px -1px rgba(0, 0, 0, 0.06),
-         0.7px 21.3px 19px -1.5px rgba(0, 0, 0, 0.05),
-         1.2px 38.4px 34.3px -2px rgba(0, 0, 0, 0.05),
-         2px 64.6px 57.7px -2.5px rgba(0, 0, 0, 0.04),
-         3.1px 102.1px 91.2px -3px rgba(0, 0, 0, 0.03),
-         4.7px 154.3px 137.8px -3.5px rgba(0, 0, 0, 0.03),
-         6.8px 222.5px 198.7px -4.1px rgba(0, 0, 0, 0.02);
-      --elevation-real-2xl:
-         0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
-         0.3px 6.2px 5.5px -0.3px rgba(0, 0, 0, 0.06),
-         0.6px 14.8px 13.2px -0.6px rgba(0, 0, 0, 0.06),
-         1px 27.1px 24.2px -0.9px rgba(0, 0, 0, 0.06),
-         1.6px 45.2px 40.4px -1.2px rgba(0, 0, 0, 0.05),
-         2.5px 70.3px 62.8px -1.5px rgba(0, 0, 0, 0.05),
-         3.7px 104.2px 93.1px -1.8px rgba(0, 0, 0, 0.04),
-         5.4px 148.9px 133px -2.1px rgba(0, 0, 0, 0.04),
-         7.6px 207.4px 185.3px -2.4px rgba(0, 0, 0, 0.03),
-         10.4px 283.8px 253.5px -2.7px rgba(0, 0, 0, 0.03),
-         14px 381.6px 340.9px -3px rgba(0, 0, 0, 0.02),
-         18.4px 503.7px 450px -3.3px rgba(0, 0, 0, 0.02);
-      --elevation-real-3xl:
-         0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
-         0.4px 8.1px 7.2px -0.2px rgba(0, 0, 0, 0.06),
-         0.8px 19.3px 17.2px -0.4px rgba(0, 0, 0, 0.06),
-         1.3px 34.8px 31.1px -0.6px rgba(0, 0, 0, 0.06),
-         2px 55.2px 49.3px -0.8px rgba(0, 0, 0, 0.06),
-         3px 81.7px 73px -1px rgba(0, 0, 0, 0.05),
-         4.3px 115.8px 103.4px -1.2px rgba(0, 0, 0, 0.05),
-         6px 158.9px 142px -1.4px rgba(0, 0, 0, 0.05),
-         8.2px 212.4px 189.7px -1.6px rgba(0, 0, 0, 0.04),
-         10.9px 278.8px 249.1px -1.8px rgba(0, 0, 0, 0.04),
-         14.2px 360.5px 322.1px -2px rgba(0, 0, 0, 0.03),
-         18.2px 460.1px 411px -2.2px rgba(0, 0, 0, 0.03),
-         23px 579.9px 518px -2.4px rgba(0, 0, 0, 0.02),
-         28.7px 722.4px 645.3px -2.6px rgba(0, 0, 0, 0.02),
-         35.3px 890.8px 796px -2.8px rgba(0, 0, 0, 0.02);
+      /* Doubling shadow ladder (Fluid Functionalism) — one faint color, offsets/blur double every
+       step, each layer a matching negative spread, plus a 0 0 0 1px hairline ring that carries the
+       surface edge. The 8 numbered --elevation-surface-N are the CANONICAL per-rung shadows (consumed
+       by @utility shadow-surface-N and the SurfaceContext engine); --elevation-real-{sm…3xl} below
+       are named ALIASES of rungs 2…7 (one source of truth, two name schemes). Each rung = the full
+       cumulative stack up to its level (rung 1 = ring only; rung 8 adds the 96px layer). */
+      --elevation-shadow-color: rgb(0 0 0 / 0.06);
+      --elevation-surface-1: 0 0 0 1px var(--elevation-shadow-color);
+      --elevation-surface-2:
+         0 0 0 1px var(--elevation-shadow-color),
+         0 1px 1px -0.5px var(--elevation-shadow-color);
+      --elevation-surface-3:
+         0 0 0 1px var(--elevation-shadow-color),
+         0 1px 1px -0.5px var(--elevation-shadow-color),
+         0 3px 3px -1.5px var(--elevation-shadow-color);
+      --elevation-surface-4:
+         0 0 0 1px var(--elevation-shadow-color),
+         0 1px 1px -0.5px var(--elevation-shadow-color),
+         0 3px 3px -1.5px var(--elevation-shadow-color),
+         0 6px 6px -3px var(--elevation-shadow-color);
+      --elevation-surface-5:
+         0 0 0 1px var(--elevation-shadow-color),
+         0 1px 1px -0.5px var(--elevation-shadow-color),
+         0 3px 3px -1.5px var(--elevation-shadow-color),
+         0 6px 6px -3px var(--elevation-shadow-color),
+         0 12px 12px -6px var(--elevation-shadow-color);
+      --elevation-surface-6:
+         0 0 0 1px var(--elevation-shadow-color),
+         0 1px 1px -0.5px var(--elevation-shadow-color),
+         0 3px 3px -1.5px var(--elevation-shadow-color),
+         0 6px 6px -3px var(--elevation-shadow-color),
+         0 12px 12px -6px var(--elevation-shadow-color),
+         0 24px 24px -12px var(--elevation-shadow-color);
+      --elevation-surface-7:
+         0 0 0 1px var(--elevation-shadow-color),
+         0 1px 1px -0.5px var(--elevation-shadow-color),
+         0 3px 3px -1.5px var(--elevation-shadow-color),
+         0 6px 6px -3px var(--elevation-shadow-color),
+         0 12px 12px -6px var(--elevation-shadow-color),
+         0 24px 24px -12px var(--elevation-shadow-color),
+         0 48px 48px -24px var(--elevation-shadow-color);
+      --elevation-surface-8:
+         0 0 0 1px var(--elevation-shadow-color),
+         0 1px 1px -0.5px var(--elevation-shadow-color),
+         0 3px 3px -1.5px var(--elevation-shadow-color),
+         0 6px 6px -3px var(--elevation-shadow-color),
+         0 12px 12px -6px var(--elevation-shadow-color),
+         0 24px 24px -12px var(--elevation-shadow-color),
+         0 48px 48px -24px var(--elevation-shadow-color),
+         0 96px 96px -48px var(--elevation-shadow-color);
+      /* Named aliases (sm…3xl = rungs 2…7) — keep for ad-hoc shadow-real-* utility use. */
+      --elevation-real-sm: var(--elevation-surface-2);
+      --elevation-real-md: var(--elevation-surface-3);
+      --elevation-real-lg: var(--elevation-surface-4);
+      --elevation-real-xl: var(--elevation-surface-5);
+      --elevation-real-2xl: var(--elevation-surface-6);
+      --elevation-real-3xl: var(--elevation-surface-7);
 
       --elevation-inner-real-sm:
          inset 0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
@@ -553,39 +604,52 @@
       /* Neutral text ramp (Linear's text reads essentially neutral off-white;
        slate was too blue against the low-chroma surfaces). */
       --color-text-primary: var(--color-neutral-50);
-      --color-text-secondary: var(--color-neutral-400);
+      --color-text-secondary: oklch(80% 0 0);
       --color-text-placeholder: var(--color-neutral-600);
       --color-text-muted: var(--color-neutral-600);
       --color-text-disabled: var(--color-neutral-400);
       --color-text-inverse: var(--color-neutral-950);
 
+      /* Shimmer surface sweep — dim the white streak on the near-black floor. */
+      --shimmer-surface-highlight: color-mix(in srgb, #fff 8%, transparent);
+
       /* Base theme colors */
-      --color-primary: var(--color-primary-500);
+      /* Dark mode: light primary → light buttons with dark text (contrast auto-resolves dark). */
+      --color-primary: var(--color-primary-100);
       --color-success: var(--color-success-400);
       --color-warning: var(--color-warning-400);
       --color-danger: var(--color-danger-400);
       --color-secondary: var(--color-secondary-400);
 
-      /* Contrast colors for filled variants on semantic backgrounds */
-      --color-primary-contrast: var(--color-neutral-50);
-      --color-danger-contrast: var(--color-neutral-50);
-      --color-success-contrast: var(--color-neutral-50);
-      --color-warning-contrast: var(--color-neutral-50);
-      --color-secondary-contrast: var(--color-neutral-50);
+      /* Contrast colors for filled variants on semantic backgrounds.
+         Auto-derived (same formula as :root) — recomputes against the dark-mode
+         base steps (-500/-400) overridden just above. See CLAUDE.md §3. */
+      --color-primary-contrast: oklch(from var(--color-primary) clamp(0, (0.85 - l) * 1000, 1) 0 0);
+      --color-danger-contrast: oklch(from var(--color-danger) clamp(0, (0.85 - l) * 1000, 1) 0 0);
+      --color-success-contrast: oklch(from var(--color-success) clamp(0, (0.85 - l) * 1000, 1) 0 0);
+      --color-warning-contrast: oklch(from var(--color-warning) clamp(0, (0.85 - l) * 1000, 1) 0 0);
+      --color-secondary-contrast: oklch(from var(--color-secondary) clamp(0, (0.85 - l) * 1000, 1) 0 0);
 
       /* Background colors - dark equivalents */
-      /* Surface elevation ladder. With a near-black floor (#010102, 6.9%), sunken
-       can't recess *below* the floor — it sits between background and surface,
-       recessed relative to the cards where wells/tracks/code/zebra actually live
-       (that's its real job). surface → raised → overlay ascend so each reads lifted.
-       Derived from hex: 0f1011 / 141516 / 18191a; faint cool tint (chroma ~0.003, hue ~248). */
-      --color-surface-sunken: oklch(12% 0.003 248);
-      --color-surface: oklch(17.2% 0.003 248);
-      --color-surface-raised: oklch(19.5% 0.003 248);
-      --color-surface-overlay: oklch(21.3% 0.003 248);
+      /* Surface ladder — faithful Fluid Functionalism dark palette. 8 rungs step up neutrally
+       (no tint) from the #171717 floor; semantic tokens alias the same rungs as in light. The
+       engine paints deeper rungs (6–8) when surfaces nest. */
+      --surface-1: #171717;
+      --surface-2: #1e1e1e;
+      --surface-3: #252525;
+      --surface-4: #2c2c2c;
+      --surface-5: #333333;
+      --surface-6: #3a3a3a;
+      --surface-7: #414141;
+      --surface-8: #484848;
+      --color-surface: var(--surface-3);
+      --color-surface-raised: var(--surface-4);
+      --color-surface-overlay: var(--surface-5);
+      /* sunken stays standalone — recessed inside cards (≈ rung 2, but it's a well, not a lift) */
+      --color-surface-sunken: #1e1e1e;
       --color-surface-hover: oklch(100% 0 0 / 0.07);
-      --color-background: oklch(6.9% 0.008 284);
-      /* #010102 — true-black canvas */
+      --color-background: var(--surface-1);
+      /* rung 1 — dark floor */
       /* DEPRECATED (remove next major): alias of --color-surface. */
       --color-background-secondary: var(--color-surface);
       /* DEPRECATED (remove next major): migrate per-usage to --color-surface-sunken / surface ladder. */
@@ -594,8 +658,8 @@
       --color-background-quinary: oklch(30% 0 0);
       --color-background-disabled: var(--color-neutral-800);
 
-      /* Scale backdrop — sits behind scaled content, darker than the near-black floor */
-      --color-scale-background: oklch(3% 0.006 280);
+      /* Scale backdrop — sits behind scaled content, darker than the #171717 floor */
+      --color-scale-background: #0a0a0a;
 
       /* Border - Linear-style subtle light hairline (a faint lift that catches
        light on the dark surface, rather than a flat mid-gray line). */
@@ -605,40 +669,83 @@
        on hover, matching the --color-surface-hover lighten-in-dark behavior. */
       --color-border-hover: oklch(100% 0.01 255 / 0.18);
 
-      /* Realistic elevation shadows — dark mode. Faint black is invisible on the
-       near-black floor, so light's 6–15-layer penumbra is replaced by a stronger
-       black "depth-pool" (alpha 0.40–0.60) + a 1px white TOP RIM (inset 0 1px 0)
-       that defines the lit top edge — the primary "raised panel" cue in dark UIs
-       (Linear/GitHub/Radix). Rim alpha grows slightly with elevation. */
-      --elevation-real-sm:
-         inset 0 1px 0 rgba(255, 255, 255, 0.05),
-         0 1px 2px rgba(0, 0, 0, 0.40),
-         0 2px 6px -1px rgba(0, 0, 0, 0.45);
-      --elevation-real-md:
-         inset 0 1px 0 rgba(255, 255, 255, 0.06),
-         0 1px 2px rgba(0, 0, 0, 0.40),
-         0 4px 10px -2px rgba(0, 0, 0, 0.45),
-         0 8px 20px -4px rgba(0, 0, 0, 0.40);
-      --elevation-real-lg:
-         inset 0 1px 0 rgba(255, 255, 255, 0.06),
-         0 1px 2px rgba(0, 0, 0, 0.45),
-         0 8px 18px -4px rgba(0, 0, 0, 0.50),
-         0 16px 36px -6px rgba(0, 0, 0, 0.42);
-      --elevation-real-xl:
-         inset 0 1px 0 rgba(255, 255, 255, 0.07),
-         0 1px 3px rgba(0, 0, 0, 0.50),
-         0 12px 28px -6px rgba(0, 0, 0, 0.55),
-         0 28px 56px -10px rgba(0, 0, 0, 0.45);
-      --elevation-real-2xl:
-         inset 0 1px 0 rgba(255, 255, 255, 0.07),
-         0 2px 4px rgba(0, 0, 0, 0.50),
-         0 18px 40px -8px rgba(0, 0, 0, 0.55),
-         0 40px 80px -14px rgba(0, 0, 0, 0.48);
-      --elevation-real-3xl:
-         inset 0 1px 0 rgba(255, 255, 255, 0.08),
-         0 2px 6px rgba(0, 0, 0, 0.55),
-         0 28px 60px -10px rgba(0, 0, 0, 0.60),
-         0 60px 120px -20px rgba(0, 0, 0, 0.50);
+      /* Realistic elevation shadows — dark mode (Fluid Functionalism doubling ladder).
+       Faint black is invisible on the dark floor, so each level layers: a scaling inset
+       white TOP RIM (dm-hi, the lit top edge — the primary "raised panel" cue in dark
+       UIs), a scaling inset ring (dm-ring), a scaling black 0 0 0 1px outline, and the
+       same doubling black drop ladder (dm-drop) used in light. Mirrors their shadow-2…7. */
+      --dm-hi-base: rgba(255, 255, 255, 0.01);
+      --dm-hi-mid: rgba(255, 255, 255, 0.02);
+      --dm-hi-high: rgba(255, 255, 255, 0.04);
+      --dm-hi-peak: rgba(255, 255, 255, 0.06);
+      --dm-ring-base: rgba(255, 255, 255, 0.02);
+      --dm-ring-mid: rgba(255, 255, 255, 0.04);
+      --dm-ring-high: rgba(255, 255, 255, 0.06);
+      --dm-drop: rgba(0, 0, 0, 0.18);
+      /* Canonical per-rung dark shadows (1 = inset ring only; 8 adds the 96px layer). */
+      --elevation-surface-1:
+         inset 0 0 0 1px var(--dm-ring-base);
+      --elevation-surface-2:
+         inset 0 1px 0 0 var(--dm-hi-base),
+         inset 0 0 0 1px var(--dm-ring-base),
+         0 1px 1px -0.5px var(--dm-drop);
+      --elevation-surface-3:
+         inset 0 1px 0 0 var(--dm-hi-mid),
+         inset 0 0 0 1px var(--dm-ring-base),
+         0 0 0 1px rgba(0, 0, 0, 0.12),
+         0 1px 1px -0.5px var(--dm-drop),
+         0 3px 3px -1.5px var(--dm-drop);
+      --elevation-surface-4:
+         inset 0 1px 0 0 var(--dm-hi-mid),
+         inset 0 0 0 1px var(--dm-ring-mid),
+         0 0 0 1px rgba(0, 0, 0, 0.14),
+         0 1px 1px -0.5px var(--dm-drop),
+         0 3px 3px -1.5px var(--dm-drop),
+         0 6px 6px -3px var(--dm-drop);
+      --elevation-surface-5:
+         inset 0 1px 0 0 var(--dm-hi-high),
+         inset 0 0 0 1px var(--dm-ring-mid),
+         0 0 0 1px rgba(0, 0, 0, 0.16),
+         0 1px 1px -0.5px var(--dm-drop),
+         0 3px 3px -1.5px var(--dm-drop),
+         0 6px 6px -3px var(--dm-drop),
+         0 12px 12px -6px var(--dm-drop);
+      --elevation-surface-6:
+         inset 0 1px 0 0 var(--dm-hi-high),
+         inset 0 0 0 1px var(--dm-ring-high),
+         0 0 0 1px rgba(0, 0, 0, 0.18),
+         0 1px 1px -0.5px var(--dm-drop),
+         0 3px 3px -1.5px var(--dm-drop),
+         0 6px 6px -3px var(--dm-drop),
+         0 12px 12px -6px var(--dm-drop),
+         0 24px 24px -12px var(--dm-drop);
+      --elevation-surface-7:
+         inset 0 1px 0 0 var(--dm-hi-peak),
+         inset 0 0 0 1px var(--dm-ring-high),
+         0 0 0 1px rgba(0, 0, 0, 0.20),
+         0 1px 1px -0.5px var(--dm-drop),
+         0 3px 3px -1.5px var(--dm-drop),
+         0 6px 6px -3px var(--dm-drop),
+         0 12px 12px -6px var(--dm-drop),
+         0 24px 24px -12px var(--dm-drop),
+         0 48px 48px -24px var(--dm-drop);
+      --elevation-surface-8:
+         inset 0 1px 0 0 var(--dm-hi-peak),
+         inset 0 0 0 1px var(--dm-ring-high),
+         0 0 0 1px rgba(0, 0, 0, 0.22),
+         0 1px 1px -0.5px var(--dm-drop),
+         0 3px 3px -1.5px var(--dm-drop),
+         0 6px 6px -3px var(--dm-drop),
+         0 12px 12px -6px var(--dm-drop),
+         0 24px 24px -12px var(--dm-drop),
+         0 48px 48px -24px var(--dm-drop),
+         0 96px 96px -48px var(--dm-drop);
+      --elevation-real-sm: var(--elevation-surface-2);
+      --elevation-real-md: var(--elevation-surface-3);
+      --elevation-real-lg: var(--elevation-surface-4);
+      --elevation-real-xl: var(--elevation-surface-5);
+      --elevation-real-2xl: var(--elevation-surface-6);
+      --elevation-real-3xl: var(--elevation-surface-7);
 
       /* Inset/recessed in dark: a black inset barely shows on the near-black floor
        (same reason outer shadows fail), so the recess is carried by the WHITE

package/dist/components/charts/shared/BarRenderer/index.d.ts

@@ -1,3 +0,0 @@
-export { BarRenderer } from './BarRenderer';
-export type { BarRendererProps } from './BarRenderer.types';
-export { BAR_ANIMATION_TIMING } from './BarRenderer.types';

package/dist/components/charts/shared/ChartContainer/ChartContainer.d.ts

@@ -1,85 +0,0 @@
-import React from "react";
-import { useTooltipPosition } from "../../hooks/useTooltipPosition";
-import type { ChartContainerProps, ChartDimensions, ChartMargins } from "./ChartContainer.types";
-import type { ChartScales } from "../../hooks/useChartScales";
-import type { ChartDataPoint, ChartConfig } from "../../types/chart.types";
-/**
- * Chart context for sharing state between ChartContainer and Renderers
- */
-export interface ChartContextValue {
-    /**
-     * Chart data
-     */
-    data: ChartDataPoint[];
-    /**
-     * Chart config
-     */
-    config: ChartConfig;
-    /**
-     * Calculated scales
-     */
-    scales: ChartScales;
-    /**
-     * Chart dimensions
-     */
-    dimensions: ChartDimensions;
-    /**
-     * Chart margins
-     */
-    margin: ChartMargins;
-    /**
-     * Inner width (width - margins)
-     */
-    innerWidth: number;
-    /**
-     * Inner height (height - margins)
-     */
-    innerHeight: number;
-    /**
-     * Hovered category index
-     */
-    hoveredCategory: number | null;
-    /**
-     * Set hovered category
-     */
-    setHoveredCategory: (index: number | null) => void;
-    /**
-     * Hovered point (for line charts)
-     */
-    hoveredPoint: {
-        index: number;
-        key: string;
-    } | null;
-    /**
-     * Set hovered point
-     */
-    setHoveredPoint: (point: {
-        index: number;
-        key: string;
-    } | null) => void;
-    /**
-     * Tooltip handlers
-     */
-    handleMouseEnter: ReturnType<typeof useTooltipPosition>['handleMouseEnter'];
-    handleMouseMove: ReturnType<typeof useTooltipPosition>['handleMouseMove'];
-    handleMouseLeave: ReturnType<typeof useTooltipPosition>['handleMouseLeave'];
-    /**
-     * Keyboard focus index
-     */
-    focusedElementIndex: number;
-    /**
-     * Whether in keyboard navigation mode
-     */
-    isKeyboardMode: boolean;
-}
-/**
- * Hook to access chart context from renderers
- */
-export declare const useChartContext: () => ChartContextValue;
-/**
- * ChartContainer Component
- *
- * Manages SVG container, axes, grid, tooltip, dimensions, and provides
- * context to child rendering components (BarRenderer, LineRenderer, etc.)
- */
-export declare const ChartContainer: React.FC<ChartContainerProps>;

package/dist/components/charts/shared/ChartContainer/index.d.ts

@@ -1,3 +0,0 @@
-export { ChartContainer, useChartContext } from './ChartContainer';
-export type { ChartContainerProps, ChartDimensions, ChartMargins, } from './ChartContainer.types';
-export type { ChartContextValue } from './ChartContainer';

package/dist/components/charts/shared/ChartLegend/ChartLegendContent.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { ChartLegendContentProps } from './ChartLegend.types';
-/**
- * Basic ChartLegendContent component - minimal implementation
- * TODO: Enhance with full legend content functionality when needed
- */
-export declare const ChartLegendContent: React.FC<ChartLegendContentProps>;