@titan-design/react-ui 0.12.0 → 0.12.1

package/dist/theme/index.d.ts

@@ -1,541 +1,7 @@
+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';
 
-/**
- * Semantic Design Tokens
- *
- * Meaningful tokens following DTCG (Design Tokens Community Group) naming conventions.
- * Pattern: {category}-{intent}-{variant?}-{state?}
- *
- * Categories:
- * - brand-* : Brand colors (primary, secondary, accent)
- * - status-* : Feedback colors (success, error, warning, info)
- * - result-* : Outcome indicators (improve, degrade, inconclusive, neutral)
- * - data-* : Data visualization colors (chart series)
- * - on-* : Text on colored backgrounds
- * - surface-* : Elevated containers (NOT "paper")
- * - background-* : Page backgrounds
- * - text-* : Text colors
- * - border-* : Border colors
- * - interactive-* : Hover/focus/active/disabled states
- */
-/**
- * GREY MAPPING (TD-07.14) — how the old cool scales resolved onto `greyRamp`.
- *
- * Every grey below came off `grey` (pure R=G=B) or `neutral` (cool, R−B
- * down to −26). They were snapped by NEAREST L*, not by matching step numbers,
- * because the two old scales were numbered incompatibly: `grey` ran
- * INVERTED and compressed (0 = #6E6E6E lightest, 900 = #101010 darkest), so
- * `grey[400]` and `greyRamp[400]` have nothing to do with each other.
- *
- *   grey 200→800  300→900  400→925  500→950
- *   neutral   50→50   100→100  300→200  400→400  500→600  600→700  900→950
- *
- * Surfaces move ΔE 1.9–4.8 — at or near imperceptible. The TEXT roles move
- * further (8.6–12.8), and that is the intended part of the change: they are
- * picking up the warmth the surfaces already had.
- *
- * Light gets its own column because strict L*-nearest collapsed `neutral[50]`
- * and `[100]` onto one step, flattening surface-elevated into surface-raised.
- * Light is still deferred as a design question — there is no `surfaceRampLight`.
- *
- * `border-default`, `-subtle` and `-strong` are GONE, replaced by `hairline-*`.
- * Once the planes became ramp steps, every value dark enough to read as a
- * border was also a plane's fill. Alpha composites instead of colliding.
- *
- * `text-tertiary` on dark is the one role that ignores L*-nearest; see it.
- */
-declare const semanticColorsLight: {
-    readonly 'brand-primary': "#FF7900";
-    readonly 'brand-primary-light': "#FFA063";
-    readonly 'brand-primary-dark': "#DA5F00";
-    readonly 'brand-primary-subtle': "rgba(255, 121, 0, 0.08)";
-    readonly 'brand-primary-hover': "#DA5F00";
-    readonly 'brand-primary-active': "#B94A00";
-    readonly 'brand-secondary': "#307B9B";
-    readonly 'brand-secondary-light': "#2697B7";
-    readonly 'brand-secondary-dark': "#2A617F";
-    readonly 'brand-secondary-subtle': "rgba(48, 123, 155, 0.08)";
-    readonly 'brand-secondary-hover': "#2A617F";
-    readonly 'brand-secondary-active': "#22465F";
-    readonly 'on-brand-primary': "#FFFFFF";
-    readonly 'on-brand-secondary': "#FFFFFF";
-    readonly 'status-success': "#2ED573";
-    readonly 'status-success-light': "#58F69E";
-    readonly 'status-success-dark': "#298732";
-    readonly 'status-success-subtle': "#E3FFEE";
-    readonly 'status-live': "#2ED573";
-    readonly 'status-live-muted': "#22A444";
-    readonly 'status-error': "#D14343";
-    readonly 'status-error-light': "#E05254";
-    readonly 'status-error-dark': "#A4221C";
-    readonly 'status-error-subtle': "#FFF4F4";
-    readonly 'status-error-vivid': "#D14343";
-    readonly 'status-error-vivid-light': "#E05254";
-    readonly 'status-error-vivid-dark': "#A4221C";
-    readonly 'status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
-    readonly 'status-warning': "#F9B415";
-    readonly 'status-warning-light': "#FFD352";
-    readonly 'status-warning-dark': "#C27400";
-    readonly 'status-warning-subtle': "#FFF7DD";
-    readonly 'status-info': "#2196F3";
-    readonly 'status-info-light': "#78C2FF";
-    readonly 'status-info-dark': "#1072CB";
-    readonly 'status-info-subtle': "#EFF8FF";
-    readonly 'on-status-success': "#FFFFFF";
-    readonly 'on-status-error': "#FFFFFF";
-    readonly 'on-status-warning': "#FFFFFF";
-    readonly 'on-status-info': "#FFFFFF";
-    readonly 'result-improve': "#4caf50";
-    readonly 'result-improve-light': "rgba(76, 175, 80, 0.12)";
-    readonly 'result-improve-dark': "#248a24";
-    readonly 'result-degrade': "#ef5350";
-    readonly 'result-degrade-light': "rgba(239, 83, 80, 0.12)";
-    readonly 'result-degrade-dark': "#b30000";
-    readonly 'result-inconclusive': "#9E9A97";
-    readonly 'result-inconclusive-light': "rgba(158, 154, 151, 0.12)";
-    readonly 'result-neutral': "#72716F";
-    readonly 'on-result-improve': "#FFFFFF";
-    readonly 'on-result-degrade': "#FFFFFF";
-    readonly 'on-result-inconclusive': "#FFFFFF";
-    readonly 'data-1': "#1965B0";
-    readonly 'data-2': "#4EB265";
-    readonly 'data-3': "#F7F056";
-    readonly 'data-4': "#DC050C";
-    readonly 'data-5': "#882E72";
-    readonly 'data-6': "#F4A736";
-    readonly 'data-7': "#7BAFDE";
-    readonly 'data-8': "#90C987";
-    readonly 'data-9': "#CAACCB";
-    readonly 'data-10': "#EE8026";
-    readonly 'text-primary': "#121828";
-    readonly 'text-secondary': "#65748B";
-    readonly 'text-tertiary': "#A29F9D";
-    readonly 'text-disabled': "rgba(55, 65, 81, 0.48)";
-    readonly 'text-inverse': "#FFFFFF";
-    readonly 'text-link': "#1072CB";
-    readonly 'text-link-hover': "#135AA8";
-    readonly 'surface-base': "#FFFFFF";
-    readonly 'surface-elevated': "#F9F6F3";
-    readonly 'surface-raised': "#EDEAE7";
-    readonly 'surface-overlay': "#FFFFFF";
-    readonly 'surface-input': "#F9F6F3";
-    readonly 'background-base': "#EBEBEB";
-    readonly 'background-default': "#FFFFFF";
-    readonly 'background-subtle': "#F9F6F3";
-    readonly 'background-frame': "#A29F9D";
-    readonly 'border-prominent': "#A29F9D";
-    readonly 'border-focus': "#1072CB";
-    readonly 'border-input': "#D4D1CE";
-    readonly 'border-input-hover': "#A29F9D";
-    readonly 'border-input-focus': "#1072CB";
-    readonly 'border-input-error': "#D14343";
-    readonly 'hairline-subtle': "rgba(0, 0, 0, 0.06)";
-    readonly 'hairline-default': "rgba(0, 0, 0, 0.09)";
-    readonly 'hairline-strong': "rgba(0, 0, 0, 0.14)";
-    readonly 'interactive-hover': "rgba(55, 65, 81, 0.04)";
-    readonly 'interactive-focus': "rgba(55, 65, 81, 0.12)";
-    readonly 'interactive-active': "rgba(55, 65, 81, 0.16)";
-    readonly 'interactive-selected': "rgba(55, 65, 81, 0.08)";
-    readonly 'interactive-disabled': "rgba(55, 65, 81, 0.12)";
-    readonly 'interactive-disabled-text': "rgba(55, 65, 81, 0.26)";
-    readonly divider: "#E8E9EB";
-    readonly 'avatar-background': "#72716F";
-    readonly 'avatar-text': "#FFFFFF";
-};
-declare const semanticColorsDark: {
-    readonly 'brand-primary': "#FF7900";
-    readonly 'brand-primary-light': "#FFA063";
-    readonly 'brand-primary-dark': "#DA5F00";
-    readonly 'brand-primary-subtle': "rgba(255, 121, 0, 0.12)";
-    readonly 'brand-primary-hover': "#FFA063";
-    readonly 'brand-primary-active': "#FFC7A2";
-    readonly 'brand-secondary': "#307B9B";
-    readonly 'brand-secondary-light': "#2697B7";
-    readonly 'brand-secondary-dark': "#2A617F";
-    readonly 'brand-secondary-subtle': "rgba(48, 123, 155, 0.12)";
-    readonly 'brand-secondary-hover': "#2697B7";
-    readonly 'brand-secondary-active': "#01B5D1";
-    readonly 'on-brand-primary': "#FFFFFF";
-    readonly 'on-brand-secondary': "#FFFFFF";
-    readonly 'status-success': "#2ED573";
-    readonly 'status-success-light': "#58F69E";
-    readonly 'status-success-dark': "#298732";
-    readonly 'status-success-subtle': "rgba(46, 213, 115, 0.12)";
-    readonly 'status-live': "#2ED573";
-    readonly 'status-live-muted': "#22A444";
-    readonly 'status-error': "#D14343";
-    readonly 'status-error-light': "#E05254";
-    readonly 'status-error-dark': "#A4221C";
-    readonly 'status-error-subtle': "rgba(209, 67, 67, 0.12)";
-    readonly 'status-error-vivid': "#D14343";
-    readonly 'status-error-vivid-light': "#E05254";
-    readonly 'status-error-vivid-dark': "#A4221C";
-    readonly 'status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
-    readonly 'status-warning': "#F9B415";
-    readonly 'status-warning-light': "#FFD352";
-    readonly 'status-warning-dark': "#C27400";
-    readonly 'status-warning-subtle': "rgba(249, 180, 21, 0.12)";
-    readonly 'status-info': "#2196F3";
-    readonly 'status-info-light': "#78C2FF";
-    readonly 'status-info-dark': "#1072CB";
-    readonly 'status-info-subtle': "rgba(33, 150, 243, 0.12)";
-    readonly 'on-status-success': "#FFFFFF";
-    readonly 'on-status-error': "#FFFFFF";
-    readonly 'on-status-warning': "#FFFFFF";
-    readonly 'on-status-info': "#FFFFFF";
-    readonly 'result-improve': "#4caf50";
-    readonly 'result-improve-light': "rgba(76, 175, 80, 0.16)";
-    readonly 'result-improve-dark': "#248a24";
-    readonly 'result-degrade': "#ef5350";
-    readonly 'result-degrade-light': "rgba(239, 83, 80, 0.16)";
-    readonly 'result-degrade-dark': "#b30000";
-    readonly 'result-inconclusive': "#9E9A97";
-    readonly 'result-inconclusive-light': "rgba(158, 154, 151, 0.16)";
-    readonly 'result-neutral': "#A29F9D";
-    readonly 'on-result-improve': "#FFFFFF";
-    readonly 'on-result-degrade': "#FFFFFF";
-    readonly 'on-result-inconclusive': "#FFFFFF";
-    readonly 'data-1': "#1965B0";
-    readonly 'data-2': "#4EB265";
-    readonly 'data-3': "#F7F056";
-    readonly 'data-4': "#DC050C";
-    readonly 'data-5': "#882E72";
-    readonly 'data-6': "#F4A736";
-    readonly 'data-7': "#7BAFDE";
-    readonly 'data-8': "#90C987";
-    readonly 'data-9': "#CAACCB";
-    readonly 'data-10': "#EE8026";
-    readonly 'text-primary': "#F9F6F3";
-    readonly 'text-secondary': "#A29F9D";
-    readonly 'text-tertiary': "#888684";
-    readonly 'text-disabled': "rgba(255, 255, 255, 0.38)";
-    readonly 'text-inverse': "#1C1916";
-    readonly 'text-link': "#828DF8";
-    readonly 'text-link-hover': "#3CA8FF";
-    readonly 'surface-base': "#252321";
-    readonly 'surface-elevated': "#2C2A28";
-    readonly 'surface-raised': "#31302F";
-    readonly 'surface-overlay': "#373635";
-    readonly 'surface-input': "#2C2A28";
-    readonly 'background-base': "#1C1916";
-    readonly 'background-default': "#252321";
-    readonly 'background-subtle': "#2C2A28";
-    readonly 'background-frame': "#100D0A";
-    readonly 'border-prominent': "#424140";
-    readonly 'border-focus': "#828DF8";
-    readonly 'border-input': "#5A5958";
-    readonly 'border-input-hover': "#72716F";
-    readonly 'border-input-focus': "#828DF8";
-    readonly 'border-input-error': "#E05254";
-    readonly 'hairline-subtle': "rgba(255, 255, 255, 0.10)";
-    readonly 'hairline-default': "rgba(255, 255, 255, 0.15)";
-    readonly 'hairline-strong': "rgba(255, 255, 255, 0.22)";
-    readonly 'interactive-hover': "rgba(255, 255, 255, 0.04)";
-    readonly 'interactive-focus': "rgba(255, 255, 255, 0.12)";
-    readonly 'interactive-active': "rgba(255, 255, 255, 0.16)";
-    readonly 'interactive-selected': "rgba(255, 255, 255, 0.08)";
-    readonly 'interactive-disabled': "rgba(255, 255, 255, 0.12)";
-    readonly 'interactive-disabled-text': "rgba(255, 255, 255, 0.26)";
-    readonly divider: "rgba(255, 255, 255, 0.09)";
-    readonly 'avatar-background': "#5A5958";
-    readonly 'avatar-text': "#FFFFFF";
-};
-declare const semanticTypography: {
-    readonly h1: {
-        readonly fontFamily: "heading";
-        readonly fontSize: "3.5rem";
-        readonly fontWeight: 700;
-        readonly lineHeight: 1.375;
-    };
-    readonly h2: {
-        readonly fontFamily: "heading";
-        readonly fontSize: "3rem";
-        readonly fontWeight: 700;
-        readonly lineHeight: 1.375;
-    };
-    readonly h3: {
-        readonly fontFamily: "heading";
-        readonly fontSize: "2.25rem";
-        readonly fontWeight: 700;
-        readonly lineHeight: 1.375;
-    };
-    readonly h4: {
-        readonly fontFamily: "heading";
-        readonly fontSize: "2rem";
-        readonly fontWeight: 700;
-        readonly lineHeight: 1.375;
-    };
-    readonly h5: {
-        readonly fontFamily: "heading";
-        readonly fontSize: "1.5rem";
-        readonly fontWeight: 600;
-        readonly lineHeight: 1.375;
-    };
-    readonly h6: {
-        readonly fontFamily: "heading";
-        readonly fontSize: "1.125rem";
-        readonly fontWeight: 600;
-        readonly lineHeight: 1.375;
-    };
-    readonly body1: {
-        readonly fontFamily: "body";
-        readonly fontSize: "1rem";
-        readonly fontWeight: 400;
-        readonly lineHeight: 1.5;
-    };
-    readonly body2: {
-        readonly fontFamily: "body";
-        readonly fontSize: "0.875rem";
-        readonly fontWeight: 400;
-        readonly lineHeight: 1.57;
-    };
-    readonly subtitle1: {
-        readonly fontFamily: "body";
-        readonly fontSize: "1rem";
-        readonly fontWeight: 500;
-        readonly lineHeight: 1.75;
-    };
-    readonly subtitle2: {
-        readonly fontFamily: "body";
-        readonly fontSize: "0.875rem";
-        readonly fontWeight: 500;
-        readonly lineHeight: 1.57;
-    };
-    readonly caption: {
-        readonly fontFamily: "body";
-        readonly fontSize: "0.75rem";
-        readonly fontWeight: 400;
-        readonly lineHeight: 1.66;
-    };
-    readonly overline: {
-        readonly fontFamily: "body";
-        readonly fontSize: "0.75rem";
-        readonly fontWeight: 600;
-        readonly lineHeight: 2.5;
-        readonly letterSpacing: "0.5px";
-        readonly textTransform: "uppercase";
-    };
-    readonly button: {
-        readonly fontFamily: "sans";
-        readonly fontSize: "0.875rem";
-        readonly fontWeight: 600;
-        readonly lineHeight: 1.75;
-    };
-};
-declare const buttonSizes: {
-    readonly sm: {
-        readonly paddingX: "16px";
-        readonly paddingY: "6px";
-        readonly fontSize: "0.875rem";
-    };
-    readonly md: {
-        readonly paddingX: "20px";
-        readonly paddingY: "8px";
-        readonly fontSize: "0.875rem";
-    };
-    readonly lg: {
-        readonly paddingX: "24px";
-        readonly paddingY: "11px";
-        readonly fontSize: "1rem";
-    };
-};
-type ThemeMode = 'light' | 'dark';
-declare function getSemanticColors(mode: ThemeMode): {
-    readonly 'brand-primary': "#FF7900";
-    readonly 'brand-primary-light': "#FFA063";
-    readonly 'brand-primary-dark': "#DA5F00";
-    readonly 'brand-primary-subtle': "rgba(255, 121, 0, 0.08)";
-    readonly 'brand-primary-hover': "#DA5F00";
-    readonly 'brand-primary-active': "#B94A00";
-    readonly 'brand-secondary': "#307B9B";
-    readonly 'brand-secondary-light': "#2697B7";
-    readonly 'brand-secondary-dark': "#2A617F";
-    readonly 'brand-secondary-subtle': "rgba(48, 123, 155, 0.08)";
-    readonly 'brand-secondary-hover': "#2A617F";
-    readonly 'brand-secondary-active': "#22465F";
-    readonly 'on-brand-primary': "#FFFFFF";
-    readonly 'on-brand-secondary': "#FFFFFF";
-    readonly 'status-success': "#2ED573";
-    readonly 'status-success-light': "#58F69E";
-    readonly 'status-success-dark': "#298732";
-    readonly 'status-success-subtle': "#E3FFEE";
-    readonly 'status-live': "#2ED573";
-    readonly 'status-live-muted': "#22A444";
-    readonly 'status-error': "#D14343";
-    readonly 'status-error-light': "#E05254";
-    readonly 'status-error-dark': "#A4221C";
-    readonly 'status-error-subtle': "#FFF4F4";
-    readonly 'status-error-vivid': "#D14343";
-    readonly 'status-error-vivid-light': "#E05254";
-    readonly 'status-error-vivid-dark': "#A4221C";
-    readonly 'status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
-    readonly 'status-warning': "#F9B415";
-    readonly 'status-warning-light': "#FFD352";
-    readonly 'status-warning-dark': "#C27400";
-    readonly 'status-warning-subtle': "#FFF7DD";
-    readonly 'status-info': "#2196F3";
-    readonly 'status-info-light': "#78C2FF";
-    readonly 'status-info-dark': "#1072CB";
-    readonly 'status-info-subtle': "#EFF8FF";
-    readonly 'on-status-success': "#FFFFFF";
-    readonly 'on-status-error': "#FFFFFF";
-    readonly 'on-status-warning': "#FFFFFF";
-    readonly 'on-status-info': "#FFFFFF";
-    readonly 'result-improve': "#4caf50";
-    readonly 'result-improve-light': "rgba(76, 175, 80, 0.12)";
-    readonly 'result-improve-dark': "#248a24";
-    readonly 'result-degrade': "#ef5350";
-    readonly 'result-degrade-light': "rgba(239, 83, 80, 0.12)";
-    readonly 'result-degrade-dark': "#b30000";
-    readonly 'result-inconclusive': "#9E9A97";
-    readonly 'result-inconclusive-light': "rgba(158, 154, 151, 0.12)";
-    readonly 'result-neutral': "#72716F";
-    readonly 'on-result-improve': "#FFFFFF";
-    readonly 'on-result-degrade': "#FFFFFF";
-    readonly 'on-result-inconclusive': "#FFFFFF";
-    readonly 'data-1': "#1965B0";
-    readonly 'data-2': "#4EB265";
-    readonly 'data-3': "#F7F056";
-    readonly 'data-4': "#DC050C";
-    readonly 'data-5': "#882E72";
-    readonly 'data-6': "#F4A736";
-    readonly 'data-7': "#7BAFDE";
-    readonly 'data-8': "#90C987";
-    readonly 'data-9': "#CAACCB";
-    readonly 'data-10': "#EE8026";
-    readonly 'text-primary': "#121828";
-    readonly 'text-secondary': "#65748B";
-    readonly 'text-tertiary': "#A29F9D";
-    readonly 'text-disabled': "rgba(55, 65, 81, 0.48)";
-    readonly 'text-inverse': "#FFFFFF";
-    readonly 'text-link': "#1072CB";
-    readonly 'text-link-hover': "#135AA8";
-    readonly 'surface-base': "#FFFFFF";
-    readonly 'surface-elevated': "#F9F6F3";
-    readonly 'surface-raised': "#EDEAE7";
-    readonly 'surface-overlay': "#FFFFFF";
-    readonly 'surface-input': "#F9F6F3";
-    readonly 'background-base': "#EBEBEB";
-    readonly 'background-default': "#FFFFFF";
-    readonly 'background-subtle': "#F9F6F3";
-    readonly 'background-frame': "#A29F9D";
-    readonly 'border-prominent': "#A29F9D";
-    readonly 'border-focus': "#1072CB";
-    readonly 'border-input': "#D4D1CE";
-    readonly 'border-input-hover': "#A29F9D";
-    readonly 'border-input-focus': "#1072CB";
-    readonly 'border-input-error': "#D14343";
-    readonly 'hairline-subtle': "rgba(0, 0, 0, 0.06)";
-    readonly 'hairline-default': "rgba(0, 0, 0, 0.09)";
-    readonly 'hairline-strong': "rgba(0, 0, 0, 0.14)";
-    readonly 'interactive-hover': "rgba(55, 65, 81, 0.04)";
-    readonly 'interactive-focus': "rgba(55, 65, 81, 0.12)";
-    readonly 'interactive-active': "rgba(55, 65, 81, 0.16)";
-    readonly 'interactive-selected': "rgba(55, 65, 81, 0.08)";
-    readonly 'interactive-disabled': "rgba(55, 65, 81, 0.12)";
-    readonly 'interactive-disabled-text': "rgba(55, 65, 81, 0.26)";
-    readonly divider: "#E8E9EB";
-    readonly 'avatar-background': "#72716F";
-    readonly 'avatar-text': "#FFFFFF";
-} | {
-    readonly 'brand-primary': "#FF7900";
-    readonly 'brand-primary-light': "#FFA063";
-    readonly 'brand-primary-dark': "#DA5F00";
-    readonly 'brand-primary-subtle': "rgba(255, 121, 0, 0.12)";
-    readonly 'brand-primary-hover': "#FFA063";
-    readonly 'brand-primary-active': "#FFC7A2";
-    readonly 'brand-secondary': "#307B9B";
-    readonly 'brand-secondary-light': "#2697B7";
-    readonly 'brand-secondary-dark': "#2A617F";
-    readonly 'brand-secondary-subtle': "rgba(48, 123, 155, 0.12)";
-    readonly 'brand-secondary-hover': "#2697B7";
-    readonly 'brand-secondary-active': "#01B5D1";
-    readonly 'on-brand-primary': "#FFFFFF";
-    readonly 'on-brand-secondary': "#FFFFFF";
-    readonly 'status-success': "#2ED573";
-    readonly 'status-success-light': "#58F69E";
-    readonly 'status-success-dark': "#298732";
-    readonly 'status-success-subtle': "rgba(46, 213, 115, 0.12)";
-    readonly 'status-live': "#2ED573";
-    readonly 'status-live-muted': "#22A444";
-    readonly 'status-error': "#D14343";
-    readonly 'status-error-light': "#E05254";
-    readonly 'status-error-dark': "#A4221C";
-    readonly 'status-error-subtle': "rgba(209, 67, 67, 0.12)";
-    readonly 'status-error-vivid': "#D14343";
-    readonly 'status-error-vivid-light': "#E05254";
-    readonly 'status-error-vivid-dark': "#A4221C";
-    readonly 'status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
-    readonly 'status-warning': "#F9B415";
-    readonly 'status-warning-light': "#FFD352";
-    readonly 'status-warning-dark': "#C27400";
-    readonly 'status-warning-subtle': "rgba(249, 180, 21, 0.12)";
-    readonly 'status-info': "#2196F3";
-    readonly 'status-info-light': "#78C2FF";
-    readonly 'status-info-dark': "#1072CB";
-    readonly 'status-info-subtle': "rgba(33, 150, 243, 0.12)";
-    readonly 'on-status-success': "#FFFFFF";
-    readonly 'on-status-error': "#FFFFFF";
-    readonly 'on-status-warning': "#FFFFFF";
-    readonly 'on-status-info': "#FFFFFF";
-    readonly 'result-improve': "#4caf50";
-    readonly 'result-improve-light': "rgba(76, 175, 80, 0.16)";
-    readonly 'result-improve-dark': "#248a24";
-    readonly 'result-degrade': "#ef5350";
-    readonly 'result-degrade-light': "rgba(239, 83, 80, 0.16)";
-    readonly 'result-degrade-dark': "#b30000";
-    readonly 'result-inconclusive': "#9E9A97";
-    readonly 'result-inconclusive-light': "rgba(158, 154, 151, 0.16)";
-    readonly 'result-neutral': "#A29F9D";
-    readonly 'on-result-improve': "#FFFFFF";
-    readonly 'on-result-degrade': "#FFFFFF";
-    readonly 'on-result-inconclusive': "#FFFFFF";
-    readonly 'data-1': "#1965B0";
-    readonly 'data-2': "#4EB265";
-    readonly 'data-3': "#F7F056";
-    readonly 'data-4': "#DC050C";
-    readonly 'data-5': "#882E72";
-    readonly 'data-6': "#F4A736";
-    readonly 'data-7': "#7BAFDE";
-    readonly 'data-8': "#90C987";
-    readonly 'data-9': "#CAACCB";
-    readonly 'data-10': "#EE8026";
-    readonly 'text-primary': "#F9F6F3";
-    readonly 'text-secondary': "#A29F9D";
-    readonly 'text-tertiary': "#888684";
-    readonly 'text-disabled': "rgba(255, 255, 255, 0.38)";
-    readonly 'text-inverse': "#1C1916";
-    readonly 'text-link': "#828DF8";
-    readonly 'text-link-hover': "#3CA8FF";
-    readonly 'surface-base': "#252321";
-    readonly 'surface-elevated': "#2C2A28";
-    readonly 'surface-raised': "#31302F";
-    readonly 'surface-overlay': "#373635";
-    readonly 'surface-input': "#2C2A28";
-    readonly 'background-base': "#1C1916";
-    readonly 'background-default': "#252321";
-    readonly 'background-subtle': "#2C2A28";
-    readonly 'background-frame': "#100D0A";
-    readonly 'border-prominent': "#424140";
-    readonly 'border-focus': "#828DF8";
-    readonly 'border-input': "#5A5958";
-    readonly 'border-input-hover': "#72716F";
-    readonly 'border-input-focus': "#828DF8";
-    readonly 'border-input-error': "#E05254";
-    readonly 'hairline-subtle': "rgba(255, 255, 255, 0.10)";
-    readonly 'hairline-default': "rgba(255, 255, 255, 0.15)";
-    readonly 'hairline-strong': "rgba(255, 255, 255, 0.22)";
-    readonly 'interactive-hover': "rgba(255, 255, 255, 0.04)";
-    readonly 'interactive-focus': "rgba(255, 255, 255, 0.12)";
-    readonly 'interactive-active': "rgba(255, 255, 255, 0.16)";
-    readonly 'interactive-selected': "rgba(255, 255, 255, 0.08)";
-    readonly 'interactive-disabled': "rgba(255, 255, 255, 0.12)";
-    readonly 'interactive-disabled-text': "rgba(255, 255, 255, 0.26)";
-    readonly divider: "rgba(255, 255, 255, 0.09)";
-    readonly 'avatar-background': "#5A5958";
-    readonly 'avatar-text': "#FFFFFF";
-};
-
 /**
  * Elevation System
  *
@@ -690,373 +156,6 @@ type GlowIntensity = 'subtle' | 'medium' | 'strong';
  */
 declare function getGlowShadow(color: string, intensity?: GlowIntensity): ViewStyle;
 
-/**
- * Primitive Design Tokens
- *
- * Raw values with no semantic meaning. These are the foundation of the design system
- * and should rarely be used directly in components. Use semantic tokens instead.
- */
-/**
- * Absolute colour keywords.
- *
- * This used to hold five scales — `blue`, `red`, `redVivid`, `neutral` and
- * `charcoal`. All five are gone (TD-07.14): the greys folded into `greyRamp`
- * below and the chromatics into the OKLCH `primitiveRamps`. What is left has no
- * scale because these three are not colours you tune, they are keywords.
- */
-declare const primitiveColors: {
-    readonly white: "#FFFFFF";
-    readonly black: "#000000";
-    readonly transparent: "transparent";
-};
-/**
- * Unified warm-neutral grey ramp (TD-07.14)
- *
- * The ONE achromatic scale. Regenerate with `scripts/generate-grey-ramp.mjs` —
- * preserve the generator, not just the hexes.
- *
- * The surface planes ARE steps here rather than a parallel object: `850` is
- * overlay, `975` is the bezel. That is the whole point of the ramp. `grey`,
- * `neutral`, `surfaceRampDark` and `backgroundFrameDark` all resolve into it,
- * which is why every plane step below is byte-identical to the value that
- * shipped in v0.10.0 — the surfaces do not move, only their names.
- *
- * TWO THINGS ABOUT THE NUMBERING, both deliberate and both previously re-derived
- * from scratch more than once because they were never written down:
- *
- * 1. `975` sits BELOW the standard grid. `canonL` — the median L* of the seven
- *    chromatic `primitiveRamps` at each step — ends at L*10.3, which is step
- *    `950`. The bezel is L*3.8, darker than the grid's last rung, so there is
- *    simply no step number left for it and `975` extends past the end.
- * 2. `850`/`875` are quarter-steps because overlay/raised/elevated are only
- *    ~2.7 L* apart and all three collide on `900` at normal resolution. `800`
- *    is a generated bridge between `700` (L*37.9) and overlay (L*22.7) so the
- *    spacing stays even across the join.
- *
- * There is no `inset`. It was retired, not renamed: at ΔE 1.10 from `975` it was
- * an imperceptible duplicate of the frame, which is exactly why `<Surface pressed>`
- * (surface − 1) kept collapsing into it. `975` is the floor.
- *
- * Spec, generator and the rejected v1/v2 cuts:
- * coordination/design-explorations/foundations/warm-grey-ramp/
- */
-declare const greyRamp: {
-    readonly 50: "#F9F6F3";
-    readonly 100: "#EDEAE7";
-    readonly 200: "#D4D1CE";
-    readonly 300: "#BDBAB7";
-    readonly 400: "#A29F9D";
-    readonly 500: "#888684";
-    readonly 600: "#72716F";
-    readonly 700: "#5A5958";
-    readonly 800: "#424140";
-    readonly 850: "#373635";
-    readonly 875: "#31302F";
-    readonly 900: "#2C2A28";
-    readonly 925: "#252321";
-    readonly 950: "#1C1916";
-    readonly 975: "#100D0A";
-};
-/**
- * The surface planes, as ramp steps — the mapping `<Surface level>` resolves through.
- *
- * Ordered darkest -> lightest, which is the order `pressedLevel()` walks.
- */
-declare const SURFACE_PLANE_STEPS: {
-    readonly frame: 975;
-    readonly background: 950;
-    readonly base: 925;
-    readonly elevated: 900;
-    readonly raised: 875;
-    readonly overlay: 850;
-};
-/**
- * Derived tonal ramps (TD-05.09 color foundations)
- *
- * Seven OKLCH-generated hue ramps, 11 perceptual lightness steps each (50 -> 950).
- * Built with hue-torsion + a chroma arc, anchored through existing brand/semantic
- * hexes. `pin` marks the step each ramp flows through its anchor.
- * This is the single source of truth for chromatic hexes — the categorical palette
- * below references these steps rather than duplicating values.
- * See coordination/design-explorations/foundations.
- */
-declare const primitiveRamps: {
-    readonly red: {
-        readonly 50: "#FFF4F4";
-        readonly 100: "#FFE3E5";
-        readonly 200: "#FFC2C5";
-        readonly 300: "#FF9A9D";
-        readonly 400: "#F77175";
-        readonly 500: "#E05254";
-        readonly 600: "#D14343";
-        readonly 700: "#A4221C";
-        readonly 800: "#7E1002";
-        readonly 900: "#5A0900";
-        readonly 950: "#3D0400";
-    };
-    readonly orange: {
-        readonly 50: "#FFF5ED";
-        readonly 100: "#FFE6D4";
-        readonly 200: "#FFC7A2";
-        readonly 300: "#FFA063";
-        readonly 400: "#FF7900";
-        readonly 500: "#DA5F00";
-        readonly 600: "#B94A00";
-        readonly 700: "#983804";
-        readonly 800: "#6F290F";
-        readonly 900: "#4E1C0C";
-        readonly 950: "#331107";
-    };
-    readonly amber: {
-        readonly 50: "#FFF7DD";
-        readonly 100: "#FFEAA9";
-        readonly 200: "#FFD352";
-        readonly 300: "#F9B415";
-        readonly 400: "#E08C00";
-        readonly 500: "#C27400";
-        readonly 600: "#A45E00";
-        readonly 700: "#814D14";
-        readonly 800: "#5B3A1A";
-        readonly 900: "#442503";
-        readonly 950: "#301500";
-    };
-    readonly green: {
-        readonly 50: "#E3FFEE";
-        readonly 100: "#B5FFD2";
-        readonly 200: "#58F69E";
-        readonly 300: "#2ED573";
-        readonly 400: "#21C05D";
-        readonly 500: "#22A444";
-        readonly 600: "#298732";
-        readonly 700: "#2B6B25";
-        readonly 800: "#264D1C";
-        readonly 900: "#1B3515";
-        readonly 950: "#11220D";
-    };
-    readonly cyan: {
-        readonly 50: "#E6FBFF";
-        readonly 100: "#C2F6FF";
-        readonly 200: "#62EAFF";
-        readonly 300: "#22D3EE";
-        readonly 400: "#01B5D1";
-        readonly 500: "#2697B7";
-        readonly 600: "#307B9B";
-        readonly 700: "#2A617F";
-        readonly 800: "#22465F";
-        readonly 900: "#0B3149";
-        readonly 950: "#001F36";
-    };
-    readonly blue: {
-        readonly 50: "#EFF8FF";
-        readonly 100: "#D9EFFF";
-        readonly 200: "#ACDBFF";
-        readonly 300: "#78C2FF";
-        readonly 400: "#3CA8FF";
-        readonly 500: "#2196F3";
-        readonly 600: "#1072CB";
-        readonly 700: "#135AA8";
-        readonly 800: "#14407E";
-        readonly 900: "#112C5A";
-        readonly 950: "#091B3C";
-    };
-    readonly magenta: {
-        readonly 50: "#FFF3F9";
-        readonly 100: "#FFE2F1";
-        readonly 200: "#FFBDE2";
-        readonly 300: "#FF8FD5";
-        readonly 400: "#ED69C3";
-        readonly 500: "#D548AF";
-        readonly 600: "#BA2996";
-        readonly 700: "#9C0D7A";
-        readonly 800: "#77005A";
-        readonly 900: "#56003F";
-        readonly 950: "#3B0029";
-    };
-};
-/**
- * Categorical (qualitative) palette — an ordered, CVD-safe series expressed as
- * references into {@link primitiveRamps} (one source of truth; the palette moves
- * with the ramps).
- *
- * Design: a single canonical hue order (blue, magenta, red, orange, green, cyan,
- * amber), with steps chosen vivid-midtone-first and fanned lighter/darker as the
- * series grows to preserve separation. The sequence is nested-stable — a chart
- * with N series uses the first N colors, and the series index is stable as N
- * changes. Colorblind-safe worst-case deuteranopia/protanopia floor 8 holds
- * through {@link CATEGORICAL_CVD_SAFE_MAX} colors; the 7th is an extended color
- * that should be paired with a legend or other secondary encoding.
- *
- * Two variants: `default` (vivid, sits on neutral/light surfaces, legible under
- * black text) and `dark` (deeper shades legible under white text on a fill). A
- * separate "light" variant was dropped — the vivid `default` picks already clear
- * black-text contrast, so it doubles as the light-context palette.
- */
-declare const categoricalPalette: {
-    readonly default: readonly ["#2196F3", "#D548AF", "#E05254", "#FF7900", "#2ED573", "#22D3EE", "#A45E00"];
-    readonly dark: readonly ["#1072CB", "#BA2996", "#E05254", "#B94A00", "#264D1C", "#22465F", "#C27400"];
-};
-/** Largest series count that holds the CVD floor without a legend. */
-declare const CATEGORICAL_CVD_SAFE_MAX = 6;
-/**
- * Categorical palette variant.
- * - `default` : vivid; neutral/light surfaces, legible under black text
- * - `dark`    : deeper shades, legible under white text on a filled swatch
- */
-type CategoricalVariant = keyof typeof categoricalPalette;
-/**
- * Get a color from the ordered categorical palette by series index.
- * The palette is nested-stable, so the color for a given index does not change
- * with the total series count; `index` simply wraps past the end.
- *
- * @param index - 0-based series index (wraps past the end)
- * @param variant - `default` (black-text / light surfaces) or `dark` (white text)
- * @returns The hex color string
- */
-declare function getCategoricalColor(index: number, variant?: CategoricalVariant): string;
-/**
- * Diverging status scale (BodyMap training-status: under → optimal → over) as
- * references into {@link primitiveRamps}. A true diverging shape — `optimal` is
- * the lightest center, the extremes go darker — so the signal reads in lightness
- * (colorblind-robust; worst-case deut/protanopia min ΔE ~10.9) and the direction
- * reads in the blue↔red axis (the CVD-safe hue pair).
- *
- * Tuned so every stop is dark enough for the fill yet light enough that BLACK
- * text clears 4.5:1 on all five — no per-cell white/black flipping. The value
- * valley is symmetric: the two mid-arms (maintenance / approaching) sit at equal
- * lightness (both ~0.53 relative luminance), the ends darker.
- */
-declare const divergingScale: readonly ["#2196F3", "#22D3EE", "#58F69E", "#F9B415", "#D14343"];
-/**
- * Sequential "effort" scale (low → high intensity: green → yellow → orange → red)
- * as references into {@link primitiveRamps}. A 6-stop ordinal palette; the
- * velocity/RPE strip sub-samples it. Every adjacent pair clears the CVD floor
- * (min deut/protan ΔE ≥ 4.5), and within that the hue walk is kept smooth —
- * the amber-200 → amber-300 → orange-400 run steps the yellow→orange transition
- * gradually rather than lurching. Order encodes magnitude, so it tolerates the
- * green↔red CVD pair. Stops 0–3 take black text; the dark reds take white.
- */
-declare const sequentialEffort: readonly ["#2ED573", "#FFD352", "#F9B415", "#FF7900", "#D14343", "#A4221C"];
-/**
- * Best-contrast text color (black or white) for a solid fill — for labels sitting
- * on categorical/diverging/effort swatches. Uses the WCAG relative-luminance ratio.
- */
-declare function bestTextColor(hex: string): '#000000' | '#FFFFFF';
-/**
- * Discrete rainbow palette for data visualization
- * Based on Paul Tol's color schemes: https://personal.sron.nl/~pault/#fig:scheme_rainbow_discrete
- */
-declare const discreteRainbow: readonly ["#E8ECFB", "#D9CCE3", "#D1BBD7", "#CAACCB", "#BA8DB4", "#AE76A3", "#AA6F9E", "#994F88", "#882E72", "#1965B0", "#437DBF", "#5289C7", "#6195CF", "#7BAFDE", "#4EB265", "#90C987", "#CAE0AB", "#F7F056", "#F7CB45", "#F6C141", "#F4A736", "#F1932D", "#EE8026", "#E8601C", "#E65518", "#DC050C", "#A5170E", "#72190E", "#42150A"];
-/**
- * Get a color from the discrete rainbow palette for a given index and palette size.
- * Colors are optimized for visual distinction at each palette size.
- *
- * @param index - The index of the color in the series (0-based)
- * @param size - The total number of colors needed (1-23)
- * @returns The hex color string
- */
-declare function getDiscreteRainbowColor(index: number, size: number): string;
-declare const primitiveTypography: {
-    readonly fontFamilies: {
-        readonly sans: readonly ["Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica", "Arial", "sans-serif"];
-        readonly body: readonly ["Nunito Sans", "sans-serif"];
-        readonly heading: readonly ["Space Grotesk", "sans-serif"];
-        readonly mono: readonly ["SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", "monospace"];
-    };
-    readonly fontSizes: {
-        readonly xs: "0.75rem";
-        readonly sm: "0.875rem";
-        readonly base: "1rem";
-        readonly lg: "1.125rem";
-        readonly xl: "1.5rem";
-        readonly '2xl': "2rem";
-        readonly '3xl': "2.25rem";
-        readonly '4xl': "3rem";
-        readonly '5xl': "3.5rem";
-    };
-    readonly fontWeights: {
-        readonly normal: 400;
-        readonly medium: 500;
-        readonly semibold: 600;
-        readonly bold: 700;
-    };
-    readonly lineHeights: {
-        readonly none: 1;
-        readonly tight: 1.375;
-        readonly snug: 1.5;
-        readonly normal: 1.57;
-        readonly relaxed: 1.66;
-        readonly loose: 1.75;
-    };
-    readonly letterSpacing: {
-        readonly tighter: "-0.05em";
-        readonly tight: "-0.025em";
-        readonly normal: "0em";
-        readonly wide: "0.025em";
-        readonly wider: "0.05em";
-        readonly widest: "0.5px";
-    };
-};
-declare const primitiveSpacing: {
-    readonly 0: "0";
-    readonly px: "1px";
-    readonly 0.5: "0.125rem";
-    readonly 1: "0.25rem";
-    readonly 1.5: "0.375rem";
-    readonly 2: "0.5rem";
-    readonly 2.5: "0.625rem";
-    readonly 3: "0.75rem";
-    readonly 3.5: "0.875rem";
-    readonly 4: "1rem";
-    readonly 5: "1.25rem";
-    readonly 6: "1.5rem";
-    readonly 7: "1.75rem";
-    readonly 8: "2rem";
-    readonly 9: "2.25rem";
-    readonly 10: "2.5rem";
-    readonly 11: "2.75rem";
-    readonly 12: "3rem";
-    readonly 14: "3.5rem";
-    readonly 16: "4rem";
-    readonly 20: "5rem";
-    readonly 24: "6rem";
-    readonly 28: "7rem";
-    readonly 32: "8rem";
-};
-declare const primitiveBorderRadius: {
-    readonly none: "0";
-    readonly sm: "4px";
-    readonly DEFAULT: "8px";
-    readonly md: "8px";
-    readonly lg: "12px";
-    readonly xl: "16px";
-    readonly '2xl': "24px";
-    readonly full: "9999px";
-};
-declare const primitiveBreakpoints: {
-    readonly xs: 0;
-    readonly sm: 600;
-    readonly md: 1000;
-    readonly lg: 1200;
-    readonly xl: 1920;
-};
-declare const primitiveZIndex: {
-    readonly hide: -1;
-    readonly auto: "auto";
-    readonly base: 0;
-    readonly docked: 10;
-    readonly dropdown: 1000;
-    readonly sticky: 1100;
-    readonly drawer: 1100;
-    readonly banner: 1200;
-    readonly appBar: 1200;
-    readonly overlay: 1300;
-    readonly modal: 1400;
-    readonly popover: 1500;
-    readonly skipLink: 1600;
-    readonly toast: 1700;
-    readonly tooltip: 1800;
-};
-
 /**
  * Theme Configuration
  *
@@ -1652,8 +751,8 @@ type ThemeConfig = typeof gluestackConfig;
  *
  * Kept: grain, rim-light, contact shadow.
  *
- * See coordination/design-explorations/surface-system-north-star.md §4 and
- * coordination/validation-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.
  */
 
 /**
@@ -2016,4 +1115,4 @@ declare const defaultPreset: ThemePreset;
  */
 declare const audiobookPreset: ThemePreset;
 
-export { CATEGORICAL_CVD_SAFE_MAX, type CategoricalVariant, type ComponentType, type CssPropertyEntry, type CssPropertyManifest, type ElevationConfig, type ElevationLevel, FLOATING_ELEVATION_MIN, type GlowIntensity, type GradientStyle, type ManifestValidationResult, PRESSED_ELEVATION_LEVEL, SURFACE_PLANE_STEPS, type ShadowIntensity, type ThemeConfig, type ThemeMode, type ThemePreset, type ThemePresetColors, type ThemePresetFonts, type ThemePresetRadii, type ThemePresetShadows, ThemeProvider, type ThemeProviderMode, type ThemeProviderProps, type VariantAxes, type VariantOverride, applyThemePreset, audiobookPreset, barPaper, bestTextColor, buttonSizes, categoricalPalette, componentElevationRanges, darkThemeCSSVars, darken, defaultPreset, discreteRainbow, divergingScale, elevationSystem, getBaseSurfaceColor, getCategoricalColor, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getGlowShadow, getHoverColors, getPressedRecessShadow, getSemanticColors, getThemeCSSVars, getValidatedElevation, gluestackConfig, grainForTone, grainOpacityForTone, greyRamp, hexToRgb, hsvToRgb, insetWell, isCssPropertyManifest, isDark, lightThemeCSSVars, lighten, linearGradient, paperSheet, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveRamps, primitiveSpacing, primitiveTypography, primitiveZIndex, resolveColor, rgbToHex, rgbToHsv, semanticColorsDark, semanticColorsLight, semanticTypography, sequentialEffort, surfaceGradient, validateCssPropertyManifest };
+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 };