@titan-design/react-ui 0.12.1 → 0.14.0

package/dist/theme/index.d.ts

@@ -1,158 +1,137 @@
 import { ThemeMode, getSemanticColors } from './tokens.js';
-export { CATEGORICAL_CVD_SAFE_MAX, CategoricalVariant, SURFACE_PLANE_STEPS, bestTextColor, buttonSizes, categoricalPalette, discreteRainbow, divergingScale, getCategoricalColor, getDiscreteRainbowColor, greyRamp, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveRamps, primitiveSpacing, primitiveTypography, primitiveZIndex, semanticColorsDark, semanticColorsLight, semanticTypography, sequentialEffort } from './tokens.js';
-import { ViewStyle, ViewProps } from 'react-native';
+export { CATEGORICAL_CVD_SAFE_MAX, CategoricalVariant, SURFACE_PLANE_STEPS, alertRedVivid, bestTextColor, buttonSizes, categoricalPalette, discreteRainbow, divergingScale, getCategoricalColor, getDiscreteRainbowColor, greyRamp, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveRamps, primitiveSpacing, primitiveTypography, primitiveZIndex, resultPaletteColors, semanticColorsDark, semanticColorsLight, semanticPins, semanticTypography, sequentialEffort } from './tokens.js';
+import { ViewStyle, TextStyle, ViewProps } from 'react-native';
 
 /**
- * Elevation System
+ * LIFT — the treatment a plane wears when it sits above its neighbour.
  *
- * A unified depth system where each elevation level corresponds to:
- * - Calculated surface color (derived from base using lighten)
- * - Shadow intensity and style (raised/pressed)
- * - Dynamically calculated shadow colors (derived from surface color)
- * - Semantic name for reference
+ * Tone says which plane a container sits on; lift says it is resting ON the one
+ * below. Two cues, both lit from above:
  *
- * Elevation range: -2 (deep inset) to +5 (floating overlay)
+ *   RIM      a crisp 1px top rim-light. The one neumorphism half that survives
+ *            near black. paperSheet's hero rim is 0.20 (VW-99 run 2); a card is
+ *            not a hero, so the default lift sits one grade quieter at 0.12,
+ *            chosen against 0.20 side by side in Lab/Depth (2026-09-08).
+ *   AMBIENT  a soft shadow cast onto the plane below, growing with the number of
+ *            planes crossed. Content lifts (1–3) are tight; floating lifts (4–5)
+ *            are large and soft, describing separation from the page rather than
+ *            rank in a stack.
  *
- * Negative elevations: Inset/pressed elements (sunken into surface)
- * Zero elevation: Base surface (background/page level)
- * Positive elevations: Raised elements (floating above surface)
- *
- * All colors are calculated dynamically from a base surface color,
- * allowing for custom surfaces and consistent color relationships.
- *
- * Lighting Model: Light source from upper-right corner
- * - Raised elements are always lighter than base (consistent across themes)
- * - Base colors must allow sufficient lightening in both themes
+ * Neither cue is a hairline ring: a ring is an edge, not a lift, and stays the
+ * divider's job. Web carries the multi-layer boxShadow; native gets the single
+ * shadow* set. The tone underneath is load-bearing on its own either way.
  */
 
-type ElevationLevel = -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5;
-interface ElevationConfig {
-    /** Semantic name for this elevation level */
-    name: string;
-    /** Amount to lighten base color (0-1) */
-    colorAdjustment: number;
-    /** Shadow intensity */
-    shadowIntensity: 'subtle' | 'medium' | 'strong';
-    /** Shadow style: raised (floating) or pressed (inset) */
-    shadowStyle: 'raised' | 'pressed';
-    /** Description of use case */
-    description: string;
+type LiftStep = 1 | 2 | 3 | 4 | 5;
+/** The lowest lift that is FLOATING (menu, popover, toast) rather than content. */
+declare const FLOATING_LIFT_MIN: LiftStep;
+/** Rim-light alpha per mode. Light mode is a placeholder pending its own pass. */
+declare const LIFT_RIM_ALPHA: Record<ThemeMode, number>;
+interface LiftOptions {
+    /** Override the rim alpha. `0` drops the rim and leaves the ambient shadow alone. */
+    rim?: number;
 }
-declare const elevationSystem: Record<ElevationLevel, ElevationConfig>;
-/**
- * Get elevation configuration for a given level
- */
-declare function getElevationConfig(level: ElevationLevel): ElevationConfig;
+/** The web boxShadow string for a lift: rim first, then the ambient layers. */
+declare function liftShadow(step: LiftStep, mode?: ThemeMode, opts?: LiftOptions): string;
+/** Platform style for a lift. Compose after `backgroundColor`; never instead of it. */
+declare function liftStyle(step: LiftStep, mode?: ThemeMode, opts?: LiftOptions): ViewStyle;
+
 /**
- * Calculate surface color for an elevation level from a base color.
- * Results are cached to avoid redundant calculations.
+ * The surface planes: the grey-ramp steps a container can sit on, darkest first.
  *
- * @param baseColor - Base surface color (hex)
- * @param level - Elevation level
- * @param theme - Current theme ('light' or 'dark')
- * @returns Calculated surface color (hex)
- */
-declare function getElevationSurface(baseColor: string, level: ElevationLevel, theme: 'light' | 'dark'): string;
-/**
- * Get shadow style for an elevation level, calculated dynamically from surface color.
- * Results are cached to avoid redundant calculations.
+ * Every background a `<Surface>` or `<Card>` paints resolves through this list,
+ * so a container can only ever land ON the ramp. Stepping up (a lifted card) or
+ * down (a pressed well) is indexing `PLANE_ORDER`, clamped at both ends.
  *
- * @param baseColor - Base surface color (hex)
- * @param level - Elevation level
- * @param theme - Current theme ('light' or 'dark')
- * @param isHovered - Whether element is hovered
- * @returns ViewStyle with shadow properties
+ * `frame` is the bezel the ramp sits inside and the floor a pressed surface
+ * clamps at. It replaced a separate `inset` level in TD-07.14: at ΔE 1.10 from
+ * the frame that level was an imperceptible duplicate.
  */
+
+type SurfaceLevel = 'frame' | 'background' | 'base' | 'elevated' | 'raised' | 'overlay';
+declare const SURFACE_LEVEL_TOKEN: {
+    readonly frame: "background-frame";
+    readonly background: "background-base";
+    readonly base: "surface-base";
+    readonly elevated: "surface-elevated";
+    readonly raised: "surface-raised";
+    readonly overlay: "surface-overlay";
+};
+/** Darkest → lightest. Kept in lockstep with the grey ramp and surface.contract.test. */
+declare const PLANE_ORDER: readonly ["frame", "background", "base", "elevated", "raised", "overlay"];
+/** The background hex for a plane under a theme mode (literal hex, never a var()). */
+declare function surfaceBackground(level: SurfaceLevel, mode: ThemeMode): string;
 /**
- * The lowest elevation that still casts an outward shadow.
- *
- * On a near-black surface a drop-shadow is inert: at levels 1-3 the shadow is
- * dark-on-dark and contributes nothing a viewer can see, while still costing a
- * composite layer. Material dropped shadow-as-hierarchy for the same reason.
- * Inline hierarchy is the hairline's job (`hairline-*`), which composites by a
- * constant amount over any plane.
- *
- * At 4+ the element is genuinely FLOATING over a backdrop — menu, popover,
- * toast — where a large soft shadow describes separation from the page rather
- * than a rank in a stack. Those should also carry a hairline ring.
+ * The plane a `<Surface pressed>` resolves to: its parent's plane stepped one
+ * index DOWN the ramp, clamped at the `frame` floor.
+ *   overlay→raised, raised→elevated, elevated→base, base→background,
+ *   background→frame, frame→frame (clamped).
  */
-declare const FLOATING_ELEVATION_MIN: ElevationLevel;
-declare function getElevationShadow(baseColor: string, level: ElevationLevel, theme: 'light' | 'dark', isHovered?: boolean): ViewStyle;
+declare function pressedLevel(parent: SurfaceLevel): SurfaceLevel;
 /**
- * Elevation level backing a `<Surface pressed>` recess: the shallow `inset`
- * (-1) step. Pressed exposes ONE level of depth — pressed-2 is intentionally
- * not surfaced (the deeper `-2` deep-inset stays available to `elevation`).
+ * The plane a lifted surface resolves to: its parent's plane stepped `steps`
+ * UP the ramp, clamped at `overlay`. The clamp is what makes raised-on-raised
+ * unrepresentable: a card inside an overlay stays on the overlay and relies on
+ * its lift treatment, never on a lighter grey that is not on the ramp.
  */
-declare const PRESSED_ELEVATION_LEVEL: ElevationLevel;
+declare function raisedLevel(parent: SurfaceLevel, steps: number): SurfaceLevel;
+
 /**
- * Inner-shadow recess for a pressed (sunken) surface, tuned to the well's own
- * fill colour so the rim/shadow tints track the darker fill. Composes WITH the
- * darker pressed fill: on web it adds an inset boxShadow; on the native path
- * (no inset-shadow support) it's a no-op and the recess reads via the fill
- * alone — so a pressed surface stays legibly sunken with or without the shadow.
+ * Elevation — numeric depth that resolves to the grey ramp.
  *
- * @param fillColor - The pressed surface's own fill (one ramp step down).
- * @param theme - Current theme ('light' or 'dark').
- */
-declare function getPressedRecessShadow(fillColor: string, theme: 'light' | 'dark'): ViewStyle;
-/**
- * Get base surface color from theme.
- * This is the foundation color that all elevations are calculated from.
+ * A level is a plane on the surface ramp plus the treatment that plane wears:
  *
- * IMPORTANT: Base colors must be chosen to allow sufficient lightening.
+ *   -2  frame        recessed  (inset well, two planes down)
+ *   -1  background   recessed  (inset well, one plane down)
+ *    0  base         flat, no treatment
+ *    1  elevated     lifted    (tone + rim-light + ambient shadow)
+ *    2  raised       lifted
+ *    3  overlay      lifted
+ *    4  overlay      floating  (same recipe, larger shadow)
+ *    5  overlay      floating
  *
- * **Light Mode**: Cannot use `#FFFFFF` (white) - cannot lighten white!
- *   - Use `#F3F4F6` (neutral[100]) - can lighten to `#FAFAFA` → `#FFFFFF`
- *   - This allows raised elevations to be lighter (closer to white)
+ * These are ABSOLUTE readings from the page plane. `<Surface>` and `<Card>`
+ * apply the same numbers RELATIVE to the plane they are nested in; see
+ * `resolveSurfaceDepth`.
  *
- * **Dark Mode**: Need lighter base to allow sufficient lightening
- *   - Use `surface-elevated` (#2A2827, TD-surface-tokens ramp) - allows further lightening
+ * No level can produce a colour off the ramp. The previous ladder lightened a
+ * base colour in HSV by 2.5% per level and put five of its six stops between
+ * ramp steps, drifting warmer as it rose while the ramp is designed to cool.
+ * Floating levels share the overlay plane on purpose: past the top of the ramp,
+ * separation is the shadow's job, not a lighter grey.
  *
- * Can be overridden to use custom base colors for special cases.
+ * Depth is TONE + LIFT by default. The earlier rule that levels 1–3 separate by
+ * tone alone (TD-07.16) was reversed on 2026-09-08: the tight upper steps of the
+ * ramp (ΔL* 2.5–3) need the second channel, and a soft ambient shadow on a
+ * near-black plane is not inert once the rim-light gives it an edge to fall
+ * from. See Foundations/Depth.
  */
-declare function getBaseSurfaceColor(theme: 'light' | 'dark'): string;
+
+type ElevationLevel = -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5;
+declare const ELEVATION_PLANE: Record<ElevationLevel, SurfaceLevel>;
+/** The lowest elevation that is floating (menu, popover, toast) rather than content. */
+declare const FLOATING_ELEVATION_MIN: ElevationLevel;
+/** Elevation backing a `<Surface pressed>` recess: one plane down. */
+declare const PRESSED_ELEVATION_LEVEL: ElevationLevel;
+/** The ramp plane an absolute elevation sits on. */
+declare function elevationPlane(level: ElevationLevel): SurfaceLevel;
+/** The background hex for an absolute elevation: always a ramp step. */
+declare function getElevationSurface(level: ElevationLevel, mode?: ThemeMode): string;
 /**
- * Component-specific elevation ranges
- * Defines which elevation levels each component type can use
+ * Inner-shadow recess for a pressed (sunken) surface: the `insetWell` material's
+ * cut, which the wall calibrated in VW-99. Web only; on native the recess reads
+ * from the darker fill alone, which is why the fill is never optional.
  */
-declare const componentElevationRanges: {
-    readonly button: {
-        readonly allowed: readonly [2];
-        readonly default: 2;
-        readonly hover: 3;
-    };
-    readonly card: {
-        readonly allowed: readonly [1, 2, 3];
-        readonly default: 2;
-        readonly hover: 3;
-    };
-    readonly input: {
-        readonly allowed: readonly [-2, -1, 0];
-        readonly default: -1;
-    };
-    readonly overlay: {
-        readonly allowed: readonly [4, 5];
-        readonly default: 4;
-    };
-};
-type ComponentType = keyof typeof componentElevationRanges;
+declare function getPressedRecessShadow(fillColor: string, _mode?: ThemeMode): ViewStyle;
 /**
- * Validate and clamp elevation to component's allowed range
+ * The treatment an absolute elevation wears: a recess below 0, nothing at 0,
+ * a lift above it. Compose after `backgroundColor`.
  */
-declare function getValidatedElevation(component: ComponentType, requested: ElevationLevel): ElevationLevel;
-type GlowIntensity = 'subtle' | 'medium' | 'strong';
+declare function getElevationShadow(level: ElevationLevel, mode?: ThemeMode, opts?: LiftOptions): ViewStyle;
+type GlowIntensity = 'tight' | 'subtle' | 'medium' | 'strong';
 /**
- * Get a glow shadow style for emphasis/active states.
- *
- * Creates a colored radial glow around an element, useful for:
- * - Active recording indicators (orange glow)
- * - Success states (green glow)
- * - Error/danger indicators (red glow)
- * - Focus rings and attention-drawing elements
- *
- * @param color - Glow color (hex string, e.g. '#FF7900')
- * @param intensity - Glow intensity level
- * @returns ViewStyle with platform-specific shadow properties
+ * A coloured radial glow around an element, for emphasis and active states:
+ * a live recording indicator, a success or error pulse, a focus halo.
  */
 declare function getGlowShadow(color: string, intensity?: GlowIntensity): ViewStyle;
 
@@ -186,26 +165,42 @@ declare const lightThemeCSSVars: {
     readonly '--color-brand-primary-light': "#FFA063";
     readonly '--color-brand-primary-dark': "#DA5F00";
     readonly '--color-brand-primary-subtle': "rgba(255, 121, 0, 0.08)";
+    readonly '--color-brand-primary-muted': "rgba(255, 121, 0, 0.30)";
+    readonly '--color-brand-primary-strong': "rgba(255, 121, 0, 0.50)";
     readonly '--color-brand-secondary': "#307B9B";
     readonly '--color-brand-secondary-light': "#2697B7";
     readonly '--color-brand-secondary-dark': "#2A617F";
     readonly '--color-brand-secondary-subtle': "rgba(48, 123, 155, 0.08)";
+    readonly '--color-brand-secondary-muted': "rgba(48, 123, 155, 0.30)";
+    readonly '--color-brand-secondary-strong': "rgba(48, 123, 155, 0.50)";
     readonly '--color-on-brand-primary': "#FFFFFF";
     readonly '--color-on-brand-secondary': "#FFFFFF";
+    readonly '--color-on-brand-primary-subtle': "#FF7900";
+    readonly '--color-on-brand-secondary-subtle': "#307B9B";
     readonly '--color-status-success': "#2ED573";
     readonly '--color-status-success-subtle': "#E3FFEE";
+    readonly '--color-status-success-muted': "rgba(46, 213, 115, 0.30)";
+    readonly '--color-status-success-strong': "rgba(46, 213, 115, 0.50)";
     readonly '--color-status-live': "#2ED573";
     readonly '--color-status-live-muted': "#22A444";
     readonly '--color-status-error': "#D14343";
     readonly '--color-status-error-subtle': "#FFF4F4";
+    readonly '--color-status-error-muted': "rgba(209, 67, 67, 0.30)";
+    readonly '--color-status-error-strong': "rgba(209, 67, 67, 0.50)";
     readonly '--color-status-warning': "#F9B415";
     readonly '--color-status-warning-subtle': "#FFF7DD";
+    readonly '--color-status-warning-muted': "rgba(249, 180, 21, 0.30)";
+    readonly '--color-status-warning-strong': "rgba(249, 180, 21, 0.50)";
     readonly '--color-status-info': "#2196F3";
     readonly '--color-status-info-subtle': "#EFF8FF";
-    readonly '--color-status-error-vivid': "#D14343";
+    readonly '--color-status-info-muted': "rgba(33, 150, 243, 0.30)";
+    readonly '--color-status-info-strong': "rgba(33, 150, 243, 0.50)";
+    readonly '--color-status-error-vivid': "#FF4757";
     readonly '--color-status-error-vivid-light': "#E05254";
     readonly '--color-status-error-vivid-dark': "#A4221C";
     readonly '--color-status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
+    readonly '--color-status-error-vivid-muted': "rgba(255, 71, 87, 0.30)";
+    readonly '--color-status-error-vivid-strong': "rgba(255, 71, 87, 0.50)";
     readonly '--color-text-primary': "#121828";
     readonly '--color-text-secondary': "#65748B";
     readonly '--color-text-tertiary': "#A29F9D";
@@ -243,6 +238,10 @@ declare const lightThemeCSSVars: {
     readonly '--color-on-status-error': "#FFFFFF";
     readonly '--color-on-status-warning': "#FFFFFF";
     readonly '--color-on-status-info': "#FFFFFF";
+    readonly '--color-on-status-success-subtle': "#2ED573";
+    readonly '--color-on-status-error-subtle': "#D14343";
+    readonly '--color-on-status-warning-subtle': "#F9B415";
+    readonly '--color-on-status-info-subtle': "#2196F3";
     readonly '--color-result-improve': "#4caf50";
     readonly '--color-result-improve-light': "rgba(76, 175, 80, 0.12)";
     readonly '--color-result-improve-dark': "#248a24";
@@ -302,26 +301,42 @@ declare const darkThemeCSSVars: {
     readonly '--color-brand-primary-light': "#FFA063";
     readonly '--color-brand-primary-dark': "#DA5F00";
     readonly '--color-brand-primary-subtle': "rgba(255, 121, 0, 0.12)";
+    readonly '--color-brand-primary-muted': "rgba(255, 121, 0, 0.30)";
+    readonly '--color-brand-primary-strong': "rgba(255, 121, 0, 0.50)";
     readonly '--color-brand-secondary': "#307B9B";
     readonly '--color-brand-secondary-light': "#2697B7";
     readonly '--color-brand-secondary-dark': "#2A617F";
-    readonly '--color-brand-secondary-subtle': "rgba(48, 123, 155, 0.12)";
+    readonly '--color-brand-secondary-subtle': "rgba(34, 211, 238, 0.12)";
+    readonly '--color-brand-secondary-muted': "rgba(48, 123, 155, 0.30)";
+    readonly '--color-brand-secondary-strong': "rgba(48, 123, 155, 0.50)";
     readonly '--color-on-brand-primary': "#FFFFFF";
     readonly '--color-on-brand-secondary': "#FFFFFF";
+    readonly '--color-on-brand-primary-subtle': "#FF7900";
+    readonly '--color-on-brand-secondary-subtle': "#22D3EE";
     readonly '--color-status-success': "#2ED573";
     readonly '--color-status-success-subtle': "rgba(46, 213, 115, 0.12)";
+    readonly '--color-status-success-muted': "rgba(46, 213, 115, 0.30)";
+    readonly '--color-status-success-strong': "rgba(46, 213, 115, 0.50)";
     readonly '--color-status-live': "#2ED573";
     readonly '--color-status-live-muted': "#22A444";
     readonly '--color-status-error': "#D14343";
-    readonly '--color-status-error-subtle': "rgba(209, 67, 67, 0.12)";
+    readonly '--color-status-error-subtle': "rgba(247, 113, 117, 0.08)";
+    readonly '--color-status-error-muted': "rgba(209, 67, 67, 0.30)";
+    readonly '--color-status-error-strong': "rgba(209, 67, 67, 0.50)";
     readonly '--color-status-warning': "#F9B415";
     readonly '--color-status-warning-subtle': "rgba(249, 180, 21, 0.12)";
+    readonly '--color-status-warning-muted': "rgba(249, 180, 21, 0.30)";
+    readonly '--color-status-warning-strong': "rgba(249, 180, 21, 0.50)";
     readonly '--color-status-info': "#2196F3";
-    readonly '--color-status-info-subtle': "rgba(33, 150, 243, 0.12)";
-    readonly '--color-status-error-vivid': "#D14343";
+    readonly '--color-status-info-subtle': "rgba(120, 194, 255, 0.12)";
+    readonly '--color-status-info-muted': "rgba(33, 150, 243, 0.30)";
+    readonly '--color-status-info-strong': "rgba(33, 150, 243, 0.50)";
+    readonly '--color-status-error-vivid': "#FF4757";
     readonly '--color-status-error-vivid-light': "#E05254";
     readonly '--color-status-error-vivid-dark': "#A4221C";
     readonly '--color-status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
+    readonly '--color-status-error-vivid-muted': "rgba(255, 71, 87, 0.30)";
+    readonly '--color-status-error-vivid-strong': "rgba(255, 71, 87, 0.50)";
     readonly '--color-text-primary': "#F9F6F3";
     readonly '--color-text-secondary': "#A29F9D";
     readonly '--color-text-tertiary': "#888684";
@@ -359,6 +374,10 @@ declare const darkThemeCSSVars: {
     readonly '--color-on-status-error': "#FFFFFF";
     readonly '--color-on-status-warning': "#FFFFFF";
     readonly '--color-on-status-info': "#FFFFFF";
+    readonly '--color-on-status-success-subtle': "#2ED573";
+    readonly '--color-on-status-error-subtle': "#F77175";
+    readonly '--color-on-status-warning-subtle': "#F9B415";
+    readonly '--color-on-status-info-subtle': "#78C2FF";
     readonly '--color-result-improve': "#4caf50";
     readonly '--color-result-improve-light': "rgba(76, 175, 80, 0.16)";
     readonly '--color-result-improve-dark': "#248a24";
@@ -418,26 +437,42 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-brand-primary-light': "#FFA063";
     readonly '--color-brand-primary-dark': "#DA5F00";
     readonly '--color-brand-primary-subtle': "rgba(255, 121, 0, 0.08)";
+    readonly '--color-brand-primary-muted': "rgba(255, 121, 0, 0.30)";
+    readonly '--color-brand-primary-strong': "rgba(255, 121, 0, 0.50)";
     readonly '--color-brand-secondary': "#307B9B";
     readonly '--color-brand-secondary-light': "#2697B7";
     readonly '--color-brand-secondary-dark': "#2A617F";
     readonly '--color-brand-secondary-subtle': "rgba(48, 123, 155, 0.08)";
+    readonly '--color-brand-secondary-muted': "rgba(48, 123, 155, 0.30)";
+    readonly '--color-brand-secondary-strong': "rgba(48, 123, 155, 0.50)";
     readonly '--color-on-brand-primary': "#FFFFFF";
     readonly '--color-on-brand-secondary': "#FFFFFF";
+    readonly '--color-on-brand-primary-subtle': "#FF7900";
+    readonly '--color-on-brand-secondary-subtle': "#307B9B";
     readonly '--color-status-success': "#2ED573";
     readonly '--color-status-success-subtle': "#E3FFEE";
+    readonly '--color-status-success-muted': "rgba(46, 213, 115, 0.30)";
+    readonly '--color-status-success-strong': "rgba(46, 213, 115, 0.50)";
     readonly '--color-status-live': "#2ED573";
     readonly '--color-status-live-muted': "#22A444";
     readonly '--color-status-error': "#D14343";
     readonly '--color-status-error-subtle': "#FFF4F4";
+    readonly '--color-status-error-muted': "rgba(209, 67, 67, 0.30)";
+    readonly '--color-status-error-strong': "rgba(209, 67, 67, 0.50)";
     readonly '--color-status-warning': "#F9B415";
     readonly '--color-status-warning-subtle': "#FFF7DD";
+    readonly '--color-status-warning-muted': "rgba(249, 180, 21, 0.30)";
+    readonly '--color-status-warning-strong': "rgba(249, 180, 21, 0.50)";
     readonly '--color-status-info': "#2196F3";
     readonly '--color-status-info-subtle': "#EFF8FF";
-    readonly '--color-status-error-vivid': "#D14343";
+    readonly '--color-status-info-muted': "rgba(33, 150, 243, 0.30)";
+    readonly '--color-status-info-strong': "rgba(33, 150, 243, 0.50)";
+    readonly '--color-status-error-vivid': "#FF4757";
     readonly '--color-status-error-vivid-light': "#E05254";
     readonly '--color-status-error-vivid-dark': "#A4221C";
     readonly '--color-status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
+    readonly '--color-status-error-vivid-muted': "rgba(255, 71, 87, 0.30)";
+    readonly '--color-status-error-vivid-strong': "rgba(255, 71, 87, 0.50)";
     readonly '--color-text-primary': "#121828";
     readonly '--color-text-secondary': "#65748B";
     readonly '--color-text-tertiary': "#A29F9D";
@@ -475,6 +510,10 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-on-status-error': "#FFFFFF";
     readonly '--color-on-status-warning': "#FFFFFF";
     readonly '--color-on-status-info': "#FFFFFF";
+    readonly '--color-on-status-success-subtle': "#2ED573";
+    readonly '--color-on-status-error-subtle': "#D14343";
+    readonly '--color-on-status-warning-subtle': "#F9B415";
+    readonly '--color-on-status-info-subtle': "#2196F3";
     readonly '--color-result-improve': "#4caf50";
     readonly '--color-result-improve-light': "rgba(76, 175, 80, 0.12)";
     readonly '--color-result-improve-dark': "#248a24";
@@ -533,26 +572,42 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-brand-primary-light': "#FFA063";
     readonly '--color-brand-primary-dark': "#DA5F00";
     readonly '--color-brand-primary-subtle': "rgba(255, 121, 0, 0.12)";
+    readonly '--color-brand-primary-muted': "rgba(255, 121, 0, 0.30)";
+    readonly '--color-brand-primary-strong': "rgba(255, 121, 0, 0.50)";
     readonly '--color-brand-secondary': "#307B9B";
     readonly '--color-brand-secondary-light': "#2697B7";
     readonly '--color-brand-secondary-dark': "#2A617F";
-    readonly '--color-brand-secondary-subtle': "rgba(48, 123, 155, 0.12)";
+    readonly '--color-brand-secondary-subtle': "rgba(34, 211, 238, 0.12)";
+    readonly '--color-brand-secondary-muted': "rgba(48, 123, 155, 0.30)";
+    readonly '--color-brand-secondary-strong': "rgba(48, 123, 155, 0.50)";
     readonly '--color-on-brand-primary': "#FFFFFF";
     readonly '--color-on-brand-secondary': "#FFFFFF";
+    readonly '--color-on-brand-primary-subtle': "#FF7900";
+    readonly '--color-on-brand-secondary-subtle': "#22D3EE";
     readonly '--color-status-success': "#2ED573";
     readonly '--color-status-success-subtle': "rgba(46, 213, 115, 0.12)";
+    readonly '--color-status-success-muted': "rgba(46, 213, 115, 0.30)";
+    readonly '--color-status-success-strong': "rgba(46, 213, 115, 0.50)";
     readonly '--color-status-live': "#2ED573";
     readonly '--color-status-live-muted': "#22A444";
     readonly '--color-status-error': "#D14343";
-    readonly '--color-status-error-subtle': "rgba(209, 67, 67, 0.12)";
+    readonly '--color-status-error-subtle': "rgba(247, 113, 117, 0.08)";
+    readonly '--color-status-error-muted': "rgba(209, 67, 67, 0.30)";
+    readonly '--color-status-error-strong': "rgba(209, 67, 67, 0.50)";
     readonly '--color-status-warning': "#F9B415";
     readonly '--color-status-warning-subtle': "rgba(249, 180, 21, 0.12)";
+    readonly '--color-status-warning-muted': "rgba(249, 180, 21, 0.30)";
+    readonly '--color-status-warning-strong': "rgba(249, 180, 21, 0.50)";
     readonly '--color-status-info': "#2196F3";
-    readonly '--color-status-info-subtle': "rgba(33, 150, 243, 0.12)";
-    readonly '--color-status-error-vivid': "#D14343";
+    readonly '--color-status-info-subtle': "rgba(120, 194, 255, 0.12)";
+    readonly '--color-status-info-muted': "rgba(33, 150, 243, 0.30)";
+    readonly '--color-status-info-strong': "rgba(33, 150, 243, 0.50)";
+    readonly '--color-status-error-vivid': "#FF4757";
     readonly '--color-status-error-vivid-light': "#E05254";
     readonly '--color-status-error-vivid-dark': "#A4221C";
     readonly '--color-status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
+    readonly '--color-status-error-vivid-muted': "rgba(255, 71, 87, 0.30)";
+    readonly '--color-status-error-vivid-strong': "rgba(255, 71, 87, 0.50)";
     readonly '--color-text-primary': "#F9F6F3";
     readonly '--color-text-secondary': "#A29F9D";
     readonly '--color-text-tertiary': "#888684";
@@ -590,6 +645,10 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-on-status-error': "#FFFFFF";
     readonly '--color-on-status-warning': "#FFFFFF";
     readonly '--color-on-status-info': "#FFFFFF";
+    readonly '--color-on-status-success-subtle': "#2ED573";
+    readonly '--color-on-status-error-subtle': "#F77175";
+    readonly '--color-on-status-warning-subtle': "#F9B415";
+    readonly '--color-on-status-info-subtle': "#78C2FF";
     readonly '--color-result-improve': "#4caf50";
     readonly '--color-result-improve-light': "rgba(76, 175, 80, 0.16)";
     readonly '--color-result-improve-dark': "#248a24";
@@ -751,8 +810,10 @@ type ThemeConfig = typeof gluestackConfig;
  *
  * Kept: grain, rim-light, contact shadow.
  *
- * See sources/design/surface-system-north-star.md §4 and
- * sources/runbooks/VW-99-depth-wall-calibration.md.
+ * See `sources/design/surface-system-north-star.md` §4 and
+ * `sources/runbooks/VW-99-depth-wall-calibration.md`. Those paths are relative to
+ * the `voltras-workspace` active-work initiative (`active-work open voltras-workspace`), not this repo —
+ * titan-design has no `sources/` directory, so they do not resolve from here.
  */
 
 /**
@@ -837,6 +898,19 @@ declare function insetWell(tone?: string): ViewStyle;
  * wrong, so grain and shadow carry the material alone.
  */
 declare function barPaper(color: string, flip?: boolean): ViewStyle;
+/**
+ * A POST-IT card: a matte tinted sheet with a crisp rim, a defined contact
+ * shadow, and a deliberate CANT (`deg`) so it reads as a stuck note — where a
+ * small unit of data wants to feel pinned to the surface (alerts, next-set). A
+ * degree or two, not a fraction, so the tilt is intentional rather than a bug.
+ */
+declare function postIt(tone?: string, deg?: number): ViewStyle;
+/**
+ * DEBOSSED (engraved) text: a 1px light highlight dropped just below the glyphs
+ * so a label reads as pressed INTO the surface. Deliberate, for section eyebrows
+ * on a matte plane — not body copy. Pair with a tertiary/dim text colour.
+ */
+declare const debossLabel: TextStyle;
 
 /**
  * Colour math shared by the depth system.
@@ -1064,7 +1138,7 @@ interface ThemePresetColors {
     'hairline-subtle'?: string;
     'hairline-strong'?: string;
     'border-focus'?: string;
-    'divider'?: string;
+    divider?: string;
     [key: `${string}`]: string | undefined;
 }
 interface ThemePresetFonts {
@@ -1103,8 +1177,16 @@ interface ThemePreset {
     fontImport?: string;
 }
 
+/**
+ * @deprecated Use `ThemeProvider` with semantic tokens — removed once audiobook
+ * migrates off presets (AW-129).
+ */
 declare function applyThemePreset(preset: ThemePreset): () => void;
 
+/**
+ * @deprecated Use `ThemeProvider` with semantic tokens — removed once audiobook
+ * migrates off presets (AW-129).
+ */
 declare const defaultPreset: ThemePreset;
 
 /**
@@ -1112,7 +1194,10 @@ declare const defaultPreset: ThemePreset;
  *
  * Warm copper/patina aesthetic inspired by vintage audio equipment
  * and reading lounges. Dark-mode only design with editorial typography.
+ *
+ * @deprecated Use `ThemeProvider` with semantic tokens — removed once audiobook
+ * migrates off presets (AW-129).
  */
 declare const audiobookPreset: ThemePreset;
 
-export { type ComponentType, type CssPropertyEntry, type CssPropertyManifest, type ElevationConfig, type ElevationLevel, FLOATING_ELEVATION_MIN, type GlowIntensity, type GradientStyle, type ManifestValidationResult, PRESSED_ELEVATION_LEVEL, type ShadowIntensity, type ThemeConfig, ThemeMode, type ThemePreset, type ThemePresetColors, type ThemePresetFonts, type ThemePresetRadii, type ThemePresetShadows, ThemeProvider, type ThemeProviderMode, type ThemeProviderProps, type VariantAxes, type VariantOverride, applyThemePreset, audiobookPreset, barPaper, componentElevationRanges, darkThemeCSSVars, darken, defaultPreset, elevationSystem, getBaseSurfaceColor, getElevationConfig, getElevationShadow, getElevationSurface, getGlowShadow, getHoverColors, getPressedRecessShadow, getSemanticColors, getThemeCSSVars, getValidatedElevation, gluestackConfig, grainForTone, grainOpacityForTone, hexToRgb, hsvToRgb, insetWell, isCssPropertyManifest, isDark, lightThemeCSSVars, lighten, linearGradient, paperSheet, resolveColor, rgbToHex, rgbToHsv, surfaceGradient, validateCssPropertyManifest };
+export { type CssPropertyEntry, type CssPropertyManifest, ELEVATION_PLANE, type ElevationLevel, FLOATING_ELEVATION_MIN, FLOATING_LIFT_MIN, type GlowIntensity, type GradientStyle, LIFT_RIM_ALPHA, type LiftOptions, type LiftStep, type ManifestValidationResult, PLANE_ORDER, PRESSED_ELEVATION_LEVEL, SURFACE_LEVEL_TOKEN, type ShadowIntensity, type SurfaceLevel, type ThemeConfig, ThemeMode, type ThemePreset, type ThemePresetColors, type ThemePresetFonts, type ThemePresetRadii, type ThemePresetShadows, ThemeProvider, type ThemeProviderMode, type ThemeProviderProps, type VariantAxes, type VariantOverride, applyThemePreset, audiobookPreset, barPaper, darkThemeCSSVars, darken, debossLabel, defaultPreset, elevationPlane, getElevationShadow, getElevationSurface, getGlowShadow, getHoverColors, getPressedRecessShadow, getSemanticColors, getThemeCSSVars, gluestackConfig, grainForTone, grainOpacityForTone, hexToRgb, hsvToRgb, insetWell, isCssPropertyManifest, isDark, liftShadow, liftStyle, lightThemeCSSVars, lighten, linearGradient, paperSheet, postIt, pressedLevel, raisedLevel, resolveColor, rgbToHex, rgbToHsv, surfaceBackground, surfaceGradient, validateCssPropertyManifest };