@titan-design/react-ui 0.2.6 → 0.3.0

package/dist/theme/index.d.ts

@@ -866,6 +866,23 @@ declare function getSemanticColors(mode: ThemeMode): {
  */
 
 declare const lightThemeCSSVars: {
+    readonly '--color-brand-primary-rgb': "255, 121, 0";
+    readonly '--color-brand-secondary-rgb': "64, 109, 135";
+    readonly '--color-status-success-rgb': "20, 184, 166";
+    readonly '--color-status-error-rgb': "209, 67, 67";
+    readonly '--color-status-warning-rgb': "255, 176, 32";
+    readonly '--color-status-info-rgb': "33, 150, 243";
+    readonly '--color-background-base-rgb': "16, 16, 16";
+    readonly '--font-family-sans': "'Inter'";
+    readonly '--font-family-body': "'Nunito Sans'";
+    readonly '--font-family-heading': "'Space Grotesk'";
+    readonly '--font-family-mono': "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace";
+    readonly '--ease-out': "cubic-bezier(0.22, 1, 0.36, 1)";
+    readonly '--ease-in-out': "cubic-bezier(0.65, 0, 0.35, 1)";
+    readonly '--ease-spring': "cubic-bezier(0.34, 1.56, 0.64, 1)";
+    readonly '--duration-fast': "150ms";
+    readonly '--duration-normal': "250ms";
+    readonly '--duration-slow': "400ms";
     readonly '--color-brand-primary': "#FF7900";
     readonly '--color-brand-primary-light': "#FF9630";
     readonly '--color-brand-primary-dark': "#D0620C";
@@ -906,8 +923,73 @@ declare const lightThemeCSSVars: {
     readonly '--color-interactive-selected': "rgba(55, 65, 81, 0.08)";
     readonly '--color-interactive-disabled': "rgba(55, 65, 81, 0.12)";
     readonly '--color-divider': "#E8E9EB";
+    readonly '--color-brand-primary-hover': "#F56C00";
+    readonly '--color-brand-primary-active': "#E06D10";
+    readonly '--color-brand-secondary-hover': "#39617A";
+    readonly '--color-brand-secondary-active': "#32556D";
+    readonly '--color-status-success-light': "#43C6B7";
+    readonly '--color-status-success-dark': "#0E8074";
+    readonly '--color-status-error-light': "#DA6868";
+    readonly '--color-status-error-dark': "#922E2E";
+    readonly '--color-status-warning-light': "#FFBF4C";
+    readonly '--color-status-warning-dark': "#B27B16";
+    readonly '--color-status-info-light': "#64B6F7";
+    readonly '--color-status-info-dark': "#0B79D0";
+    readonly '--color-on-status-success': "#FFFFFF";
+    readonly '--color-on-status-error': "#FFFFFF";
+    readonly '--color-on-status-warning': "#FFFFFF";
+    readonly '--color-on-status-info': "#FFFFFF";
+    readonly '--color-result-improve': "#4caf50";
+    readonly '--color-result-improve-light': "rgba(76, 175, 80, 0.12)";
+    readonly '--color-result-improve-dark': "#248a24";
+    readonly '--color-result-degrade': "#ef5350";
+    readonly '--color-result-degrade-light': "rgba(239, 83, 80, 0.12)";
+    readonly '--color-result-degrade-dark': "#b30000";
+    readonly '--color-result-inconclusive': "#9E9A97";
+    readonly '--color-result-inconclusive-light': "rgba(158, 154, 151, 0.12)";
+    readonly '--color-result-neutral': "#6B7280";
+    readonly '--color-on-result-improve': "#FFFFFF";
+    readonly '--color-on-result-degrade': "#FFFFFF";
+    readonly '--color-on-result-inconclusive': "#FFFFFF";
+    readonly '--color-data-1': "#1965B0";
+    readonly '--color-data-2': "#4EB265";
+    readonly '--color-data-3': "#F7F056";
+    readonly '--color-data-4': "#DC050C";
+    readonly '--color-data-5': "#882E72";
+    readonly '--color-data-6': "#F4A736";
+    readonly '--color-data-7': "#7BAFDE";
+    readonly '--color-data-8': "#90C987";
+    readonly '--color-data-9': "#CAACCB";
+    readonly '--color-data-10': "#EE8026";
+    readonly '--color-text-link-hover': "#3832A0";
+    readonly '--color-surface-overlay': "#FFFFFF";
+    readonly '--color-surface-input': "#FAFAFA";
+    readonly '--color-border-input': "#D1D5DB";
+    readonly '--color-border-input-hover': "#9CA3AF";
+    readonly '--color-border-input-focus': "#5048E5";
+    readonly '--color-border-input-error': "#D14343";
+    readonly '--color-interactive-disabled-text': "rgba(55, 65, 81, 0.26)";
+    readonly '--color-avatar-background': "#6B7280";
+    readonly '--color-avatar-text': "#FFFFFF";
 };
 declare const darkThemeCSSVars: {
+    readonly '--color-brand-primary-rgb': "255, 121, 0";
+    readonly '--color-brand-secondary-rgb': "64, 109, 135";
+    readonly '--color-status-success-rgb': "20, 184, 166";
+    readonly '--color-status-error-rgb': "209, 67, 67";
+    readonly '--color-status-warning-rgb': "255, 176, 32";
+    readonly '--color-status-info-rgb': "33, 150, 243";
+    readonly '--color-background-base-rgb': "16, 16, 16";
+    readonly '--font-family-sans': "'Inter'";
+    readonly '--font-family-body': "'Nunito Sans'";
+    readonly '--font-family-heading': "'Space Grotesk'";
+    readonly '--font-family-mono': "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace";
+    readonly '--ease-out': "cubic-bezier(0.22, 1, 0.36, 1)";
+    readonly '--ease-in-out': "cubic-bezier(0.65, 0, 0.35, 1)";
+    readonly '--ease-spring': "cubic-bezier(0.34, 1.56, 0.64, 1)";
+    readonly '--duration-fast': "150ms";
+    readonly '--duration-normal': "250ms";
+    readonly '--duration-slow': "400ms";
     readonly '--color-brand-primary': "#FF7900";
     readonly '--color-brand-primary-light': "#FF9630";
     readonly '--color-brand-primary-dark': "#D0620C";
@@ -948,8 +1030,73 @@ declare const darkThemeCSSVars: {
     readonly '--color-interactive-selected': "rgba(255, 255, 255, 0.08)";
     readonly '--color-interactive-disabled': "rgba(255, 255, 255, 0.12)";
     readonly '--color-divider': "#1F1F1F";
+    readonly '--color-brand-primary-hover': "#FF8500";
+    readonly '--color-brand-primary-active': "#FF9630";
+    readonly '--color-brand-secondary-hover': "#557488";
+    readonly '--color-brand-secondary-active': "#678498";
+    readonly '--color-status-success-light': "#43C6B7";
+    readonly '--color-status-success-dark': "#0E8074";
+    readonly '--color-status-error-light': "#DA6868";
+    readonly '--color-status-error-dark': "#922E2E";
+    readonly '--color-status-warning-light': "#FFBF4C";
+    readonly '--color-status-warning-dark': "#B27B16";
+    readonly '--color-status-info-light': "#64B6F7";
+    readonly '--color-status-info-dark': "#0B79D0";
+    readonly '--color-on-status-success': "#FFFFFF";
+    readonly '--color-on-status-error': "#FFFFFF";
+    readonly '--color-on-status-warning': "#FFFFFF";
+    readonly '--color-on-status-info': "#FFFFFF";
+    readonly '--color-result-improve': "#4caf50";
+    readonly '--color-result-improve-light': "rgba(76, 175, 80, 0.16)";
+    readonly '--color-result-improve-dark': "#248a24";
+    readonly '--color-result-degrade': "#ef5350";
+    readonly '--color-result-degrade-light': "rgba(239, 83, 80, 0.16)";
+    readonly '--color-result-degrade-dark': "#b30000";
+    readonly '--color-result-inconclusive': "#9E9A97";
+    readonly '--color-result-inconclusive-light': "rgba(158, 154, 151, 0.16)";
+    readonly '--color-result-neutral': "#9CA3AF";
+    readonly '--color-on-result-improve': "#FFFFFF";
+    readonly '--color-on-result-degrade': "#FFFFFF";
+    readonly '--color-on-result-inconclusive': "#FFFFFF";
+    readonly '--color-data-1': "#1965B0";
+    readonly '--color-data-2': "#4EB265";
+    readonly '--color-data-3': "#F7F056";
+    readonly '--color-data-4': "#DC050C";
+    readonly '--color-data-5': "#882E72";
+    readonly '--color-data-6': "#F4A736";
+    readonly '--color-data-7': "#7BAFDE";
+    readonly '--color-data-8': "#90C987";
+    readonly '--color-data-9': "#CAACCB";
+    readonly '--color-data-10': "#EE8026";
+    readonly '--color-text-link-hover': "#60A5FA";
+    readonly '--color-surface-overlay': "#191919";
+    readonly '--color-surface-input': "#191919";
+    readonly '--color-border-input': "#4B5563";
+    readonly '--color-border-input-hover': "#6B7280";
+    readonly '--color-border-input-focus': "#828DF8";
+    readonly '--color-border-input-error': "#EF4444";
+    readonly '--color-interactive-disabled-text': "rgba(255, 255, 255, 0.26)";
+    readonly '--color-avatar-background': "#4B5563";
+    readonly '--color-avatar-text': "#FFFFFF";
 };
 declare function getThemeCSSVars(mode: ThemeMode): {
+    readonly '--color-brand-primary-rgb': "255, 121, 0";
+    readonly '--color-brand-secondary-rgb': "64, 109, 135";
+    readonly '--color-status-success-rgb': "20, 184, 166";
+    readonly '--color-status-error-rgb': "209, 67, 67";
+    readonly '--color-status-warning-rgb': "255, 176, 32";
+    readonly '--color-status-info-rgb': "33, 150, 243";
+    readonly '--color-background-base-rgb': "16, 16, 16";
+    readonly '--font-family-sans': "'Inter'";
+    readonly '--font-family-body': "'Nunito Sans'";
+    readonly '--font-family-heading': "'Space Grotesk'";
+    readonly '--font-family-mono': "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace";
+    readonly '--ease-out': "cubic-bezier(0.22, 1, 0.36, 1)";
+    readonly '--ease-in-out': "cubic-bezier(0.65, 0, 0.35, 1)";
+    readonly '--ease-spring': "cubic-bezier(0.34, 1.56, 0.64, 1)";
+    readonly '--duration-fast': "150ms";
+    readonly '--duration-normal': "250ms";
+    readonly '--duration-slow': "400ms";
     readonly '--color-brand-primary': "#FF7900";
     readonly '--color-brand-primary-light': "#FF9630";
     readonly '--color-brand-primary-dark': "#D0620C";
@@ -990,7 +1137,72 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-interactive-selected': "rgba(55, 65, 81, 0.08)";
     readonly '--color-interactive-disabled': "rgba(55, 65, 81, 0.12)";
     readonly '--color-divider': "#E8E9EB";
+    readonly '--color-brand-primary-hover': "#F56C00";
+    readonly '--color-brand-primary-active': "#E06D10";
+    readonly '--color-brand-secondary-hover': "#39617A";
+    readonly '--color-brand-secondary-active': "#32556D";
+    readonly '--color-status-success-light': "#43C6B7";
+    readonly '--color-status-success-dark': "#0E8074";
+    readonly '--color-status-error-light': "#DA6868";
+    readonly '--color-status-error-dark': "#922E2E";
+    readonly '--color-status-warning-light': "#FFBF4C";
+    readonly '--color-status-warning-dark': "#B27B16";
+    readonly '--color-status-info-light': "#64B6F7";
+    readonly '--color-status-info-dark': "#0B79D0";
+    readonly '--color-on-status-success': "#FFFFFF";
+    readonly '--color-on-status-error': "#FFFFFF";
+    readonly '--color-on-status-warning': "#FFFFFF";
+    readonly '--color-on-status-info': "#FFFFFF";
+    readonly '--color-result-improve': "#4caf50";
+    readonly '--color-result-improve-light': "rgba(76, 175, 80, 0.12)";
+    readonly '--color-result-improve-dark': "#248a24";
+    readonly '--color-result-degrade': "#ef5350";
+    readonly '--color-result-degrade-light': "rgba(239, 83, 80, 0.12)";
+    readonly '--color-result-degrade-dark': "#b30000";
+    readonly '--color-result-inconclusive': "#9E9A97";
+    readonly '--color-result-inconclusive-light': "rgba(158, 154, 151, 0.12)";
+    readonly '--color-result-neutral': "#6B7280";
+    readonly '--color-on-result-improve': "#FFFFFF";
+    readonly '--color-on-result-degrade': "#FFFFFF";
+    readonly '--color-on-result-inconclusive': "#FFFFFF";
+    readonly '--color-data-1': "#1965B0";
+    readonly '--color-data-2': "#4EB265";
+    readonly '--color-data-3': "#F7F056";
+    readonly '--color-data-4': "#DC050C";
+    readonly '--color-data-5': "#882E72";
+    readonly '--color-data-6': "#F4A736";
+    readonly '--color-data-7': "#7BAFDE";
+    readonly '--color-data-8': "#90C987";
+    readonly '--color-data-9': "#CAACCB";
+    readonly '--color-data-10': "#EE8026";
+    readonly '--color-text-link-hover': "#3832A0";
+    readonly '--color-surface-overlay': "#FFFFFF";
+    readonly '--color-surface-input': "#FAFAFA";
+    readonly '--color-border-input': "#D1D5DB";
+    readonly '--color-border-input-hover': "#9CA3AF";
+    readonly '--color-border-input-focus': "#5048E5";
+    readonly '--color-border-input-error': "#D14343";
+    readonly '--color-interactive-disabled-text': "rgba(55, 65, 81, 0.26)";
+    readonly '--color-avatar-background': "#6B7280";
+    readonly '--color-avatar-text': "#FFFFFF";
 } | {
+    readonly '--color-brand-primary-rgb': "255, 121, 0";
+    readonly '--color-brand-secondary-rgb': "64, 109, 135";
+    readonly '--color-status-success-rgb': "20, 184, 166";
+    readonly '--color-status-error-rgb': "209, 67, 67";
+    readonly '--color-status-warning-rgb': "255, 176, 32";
+    readonly '--color-status-info-rgb': "33, 150, 243";
+    readonly '--color-background-base-rgb': "16, 16, 16";
+    readonly '--font-family-sans': "'Inter'";
+    readonly '--font-family-body': "'Nunito Sans'";
+    readonly '--font-family-heading': "'Space Grotesk'";
+    readonly '--font-family-mono': "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace";
+    readonly '--ease-out': "cubic-bezier(0.22, 1, 0.36, 1)";
+    readonly '--ease-in-out': "cubic-bezier(0.65, 0, 0.35, 1)";
+    readonly '--ease-spring': "cubic-bezier(0.34, 1.56, 0.64, 1)";
+    readonly '--duration-fast': "150ms";
+    readonly '--duration-normal': "250ms";
+    readonly '--duration-slow': "400ms";
     readonly '--color-brand-primary': "#FF7900";
     readonly '--color-brand-primary-light': "#FF9630";
     readonly '--color-brand-primary-dark': "#D0620C";
@@ -1031,6 +1243,54 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-interactive-selected': "rgba(255, 255, 255, 0.08)";
     readonly '--color-interactive-disabled': "rgba(255, 255, 255, 0.12)";
     readonly '--color-divider': "#1F1F1F";
+    readonly '--color-brand-primary-hover': "#FF8500";
+    readonly '--color-brand-primary-active': "#FF9630";
+    readonly '--color-brand-secondary-hover': "#557488";
+    readonly '--color-brand-secondary-active': "#678498";
+    readonly '--color-status-success-light': "#43C6B7";
+    readonly '--color-status-success-dark': "#0E8074";
+    readonly '--color-status-error-light': "#DA6868";
+    readonly '--color-status-error-dark': "#922E2E";
+    readonly '--color-status-warning-light': "#FFBF4C";
+    readonly '--color-status-warning-dark': "#B27B16";
+    readonly '--color-status-info-light': "#64B6F7";
+    readonly '--color-status-info-dark': "#0B79D0";
+    readonly '--color-on-status-success': "#FFFFFF";
+    readonly '--color-on-status-error': "#FFFFFF";
+    readonly '--color-on-status-warning': "#FFFFFF";
+    readonly '--color-on-status-info': "#FFFFFF";
+    readonly '--color-result-improve': "#4caf50";
+    readonly '--color-result-improve-light': "rgba(76, 175, 80, 0.16)";
+    readonly '--color-result-improve-dark': "#248a24";
+    readonly '--color-result-degrade': "#ef5350";
+    readonly '--color-result-degrade-light': "rgba(239, 83, 80, 0.16)";
+    readonly '--color-result-degrade-dark': "#b30000";
+    readonly '--color-result-inconclusive': "#9E9A97";
+    readonly '--color-result-inconclusive-light': "rgba(158, 154, 151, 0.16)";
+    readonly '--color-result-neutral': "#9CA3AF";
+    readonly '--color-on-result-improve': "#FFFFFF";
+    readonly '--color-on-result-degrade': "#FFFFFF";
+    readonly '--color-on-result-inconclusive': "#FFFFFF";
+    readonly '--color-data-1': "#1965B0";
+    readonly '--color-data-2': "#4EB265";
+    readonly '--color-data-3': "#F7F056";
+    readonly '--color-data-4': "#DC050C";
+    readonly '--color-data-5': "#882E72";
+    readonly '--color-data-6': "#F4A736";
+    readonly '--color-data-7': "#7BAFDE";
+    readonly '--color-data-8': "#90C987";
+    readonly '--color-data-9': "#CAACCB";
+    readonly '--color-data-10': "#EE8026";
+    readonly '--color-text-link-hover': "#60A5FA";
+    readonly '--color-surface-overlay': "#191919";
+    readonly '--color-surface-input': "#191919";
+    readonly '--color-border-input': "#4B5563";
+    readonly '--color-border-input-hover': "#6B7280";
+    readonly '--color-border-input-focus': "#828DF8";
+    readonly '--color-border-input-error': "#EF4444";
+    readonly '--color-interactive-disabled-text': "rgba(255, 255, 255, 0.26)";
+    readonly '--color-avatar-background': "#4B5563";
+    readonly '--color-avatar-text': "#FFFFFF";
 };
 declare const gluestackConfig: {
     readonly tokens: {
@@ -1299,6 +1559,62 @@ declare const neumorphicShadows: {
     };
 };
 
+/**
+ * TypeScript mirror of css-property-manifest.schema.json.
+ *
+ * A manifest records, per component, which visual CSS properties are tracked,
+ * which design token each one resolves from, the expected computed style
+ * value, and any per-variant overrides. Manifests are the fixtures consumed
+ * by Playwright computed-style assertions (see packages/ui/tests/visual).
+ */
+/** Variant axis name/value pairs, e.g. { variant: 'solid', color: 'primary', size: 'md' }. */
+type VariantAxes = Record<string, string>;
+/** A resolvedValue/token override that applies when the given variant axes match. */
+interface VariantOverride {
+    /** Partial variant axis values that trigger this override, merged onto baseVariant. */
+    variant: VariantAxes;
+    /** Semantic token key for this override, or null for a literal (non-tokenized) value. */
+    token?: string | null;
+    /** CSS custom property backing the token for this override, if any. */
+    cssVariable?: string | null;
+    /** Expected getComputedStyle value when the variant axes match. */
+    resolvedValue: string;
+}
+/** A single tracked CSS property for a component. */
+interface CssPropertyEntry {
+    /** CSS property name in camelCase, as returned by window.getComputedStyle (e.g. "backgroundColor"). */
+    property: string;
+    /** Semantic token key this property is sourced from, or null if not backed by a token. */
+    token: string | null;
+    /** CSS custom property backing the token (e.g. "--color-brand-primary"), if any. */
+    cssVariable?: string | null;
+    /** Expected computed style value for baseVariant. */
+    resolvedValue: string;
+    /** Overrides of token/resolvedValue for specific variant axis combinations. */
+    variantOverrides?: VariantOverride[];
+}
+/** The full per-component CSS property manifest. */
+interface CssPropertyManifest {
+    /** Component identifier matching its src/components/ui/{component} directory and Storybook id. */
+    component: string;
+    /** Optional human-readable note about what this manifest covers. */
+    description?: string;
+    /** Variant axis values each property's top-level resolvedValue was captured against. */
+    baseVariant?: VariantAxes;
+    /** Tracked CSS properties for this component. */
+    properties: CssPropertyEntry[];
+}
+
+/** Result of validating a candidate manifest: valid iff errors is empty. */
+interface ManifestValidationResult {
+    valid: boolean;
+    errors: string[];
+}
+/** Structurally validates a candidate value against the CssPropertyManifest shape. */
+declare function validateCssPropertyManifest(candidate: unknown): ManifestValidationResult;
+/** Type guard variant of validateCssPropertyManifest for use in narrowing contexts. */
+declare function isCssPropertyManifest(candidate: unknown): candidate is CssPropertyManifest;
+
 interface ThemePresetColors {
     'brand-primary'?: string;
     'brand-primary-light'?: string;
@@ -1384,4 +1700,4 @@ declare const defaultPreset: ThemePreset;
  */
 declare const audiobookPreset: ThemePreset;
 
-export { type ComponentType, type ElevationConfig, type ElevationLevel, type GlowIntensity, type ShadowIntensity, type ShadowSurface, type ThemeConfig, type ThemeMode, type ThemePreset, type ThemePresetColors, type ThemePresetFonts, type ThemePresetRadii, type ThemePresetShadows, applyThemePreset, audiobookPreset, buttonSizes, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, defaultPreset, discreteRainbow, elevationSystem, getBaseSurfaceColor, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getGlowShadow, getHoverColors, getSemanticColors, getThemeCSSVars, getValidatedElevation, gluestackConfig, hexToRgb, hsvToRgb, isDark, lightThemeCSSVars, lighten, neumorphicShadows, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, rgbToHex, rgbToHsv, semanticColorsDark, semanticColorsLight, semanticTypography, shadowColors };
+export { type ComponentType, type CssPropertyEntry, type CssPropertyManifest, type ElevationConfig, type ElevationLevel, type GlowIntensity, type ManifestValidationResult, type ShadowIntensity, type ShadowSurface, type ThemeConfig, type ThemeMode, type ThemePreset, type ThemePresetColors, type ThemePresetFonts, type ThemePresetRadii, type ThemePresetShadows, type VariantAxes, type VariantOverride, applyThemePreset, audiobookPreset, buttonSizes, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, defaultPreset, discreteRainbow, elevationSystem, getBaseSurfaceColor, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getGlowShadow, getHoverColors, getSemanticColors, getThemeCSSVars, getValidatedElevation, gluestackConfig, hexToRgb, hsvToRgb, isCssPropertyManifest, isDark, lightThemeCSSVars, lighten, neumorphicShadows, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, rgbToHex, rgbToHsv, semanticColorsDark, semanticColorsLight, semanticTypography, shadowColors, validateCssPropertyManifest };

package/dist/theme/index.js

@@ -729,6 +729,28 @@ function getSemanticColors(mode) {
 }
 
 // src/theme/config.ts
+var themeIndependentCSSVars = {
+  // RGB decomposed values for glow shadows
+  "--color-brand-primary-rgb": "255, 121, 0",
+  "--color-brand-secondary-rgb": "64, 109, 135",
+  "--color-status-success-rgb": "20, 184, 166",
+  "--color-status-error-rgb": "209, 67, 67",
+  "--color-status-warning-rgb": "255, 176, 32",
+  "--color-status-info-rgb": "33, 150, 243",
+  "--color-background-base-rgb": "16, 16, 16",
+  // Font families
+  "--font-family-sans": "'Inter'",
+  "--font-family-body": "'Nunito Sans'",
+  "--font-family-heading": "'Space Grotesk'",
+  "--font-family-mono": "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace",
+  // Animation tokens
+  "--ease-out": "cubic-bezier(0.22, 1, 0.36, 1)",
+  "--ease-in-out": "cubic-bezier(0.65, 0, 0.35, 1)",
+  "--ease-spring": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+  "--duration-fast": "150ms",
+  "--duration-normal": "250ms",
+  "--duration-slow": "400ms"
+};
 var lightThemeCSSVars = {
   "--color-brand-primary": semanticColorsLight["brand-primary"],
   "--color-brand-primary-light": semanticColorsLight["brand-primary-light"],
@@ -769,7 +791,56 @@ var lightThemeCSSVars = {
   "--color-interactive-active": semanticColorsLight["interactive-active"],
   "--color-interactive-selected": semanticColorsLight["interactive-selected"],
   "--color-interactive-disabled": semanticColorsLight["interactive-disabled"],
-  "--color-divider": semanticColorsLight["divider"]
+  "--color-divider": semanticColorsLight["divider"],
+  "--color-brand-primary-hover": semanticColorsLight["brand-primary-hover"],
+  "--color-brand-primary-active": semanticColorsLight["brand-primary-active"],
+  "--color-brand-secondary-hover": semanticColorsLight["brand-secondary-hover"],
+  "--color-brand-secondary-active": semanticColorsLight["brand-secondary-active"],
+  "--color-status-success-light": semanticColorsLight["status-success-light"],
+  "--color-status-success-dark": semanticColorsLight["status-success-dark"],
+  "--color-status-error-light": semanticColorsLight["status-error-light"],
+  "--color-status-error-dark": semanticColorsLight["status-error-dark"],
+  "--color-status-warning-light": semanticColorsLight["status-warning-light"],
+  "--color-status-warning-dark": semanticColorsLight["status-warning-dark"],
+  "--color-status-info-light": semanticColorsLight["status-info-light"],
+  "--color-status-info-dark": semanticColorsLight["status-info-dark"],
+  "--color-on-status-success": semanticColorsLight["on-status-success"],
+  "--color-on-status-error": semanticColorsLight["on-status-error"],
+  "--color-on-status-warning": semanticColorsLight["on-status-warning"],
+  "--color-on-status-info": semanticColorsLight["on-status-info"],
+  "--color-result-improve": semanticColorsLight["result-improve"],
+  "--color-result-improve-light": semanticColorsLight["result-improve-light"],
+  "--color-result-improve-dark": semanticColorsLight["result-improve-dark"],
+  "--color-result-degrade": semanticColorsLight["result-degrade"],
+  "--color-result-degrade-light": semanticColorsLight["result-degrade-light"],
+  "--color-result-degrade-dark": semanticColorsLight["result-degrade-dark"],
+  "--color-result-inconclusive": semanticColorsLight["result-inconclusive"],
+  "--color-result-inconclusive-light": semanticColorsLight["result-inconclusive-light"],
+  "--color-result-neutral": semanticColorsLight["result-neutral"],
+  "--color-on-result-improve": semanticColorsLight["on-result-improve"],
+  "--color-on-result-degrade": semanticColorsLight["on-result-degrade"],
+  "--color-on-result-inconclusive": semanticColorsLight["on-result-inconclusive"],
+  "--color-data-1": semanticColorsLight["data-1"],
+  "--color-data-2": semanticColorsLight["data-2"],
+  "--color-data-3": semanticColorsLight["data-3"],
+  "--color-data-4": semanticColorsLight["data-4"],
+  "--color-data-5": semanticColorsLight["data-5"],
+  "--color-data-6": semanticColorsLight["data-6"],
+  "--color-data-7": semanticColorsLight["data-7"],
+  "--color-data-8": semanticColorsLight["data-8"],
+  "--color-data-9": semanticColorsLight["data-9"],
+  "--color-data-10": semanticColorsLight["data-10"],
+  "--color-text-link-hover": semanticColorsLight["text-link-hover"],
+  "--color-surface-overlay": semanticColorsLight["surface-overlay"],
+  "--color-surface-input": semanticColorsLight["surface-input"],
+  "--color-border-input": semanticColorsLight["border-input"],
+  "--color-border-input-hover": semanticColorsLight["border-input-hover"],
+  "--color-border-input-focus": semanticColorsLight["border-input-focus"],
+  "--color-border-input-error": semanticColorsLight["border-input-error"],
+  "--color-interactive-disabled-text": semanticColorsLight["interactive-disabled-text"],
+  "--color-avatar-background": semanticColorsLight["avatar-background"],
+  "--color-avatar-text": semanticColorsLight["avatar-text"],
+  ...themeIndependentCSSVars
 };
 var darkThemeCSSVars = {
   "--color-brand-primary": semanticColorsDark["brand-primary"],
@@ -811,7 +882,56 @@ var darkThemeCSSVars = {
   "--color-interactive-active": semanticColorsDark["interactive-active"],
   "--color-interactive-selected": semanticColorsDark["interactive-selected"],
   "--color-interactive-disabled": semanticColorsDark["interactive-disabled"],
-  "--color-divider": semanticColorsDark["divider"]
+  "--color-divider": semanticColorsDark["divider"],
+  "--color-brand-primary-hover": semanticColorsDark["brand-primary-hover"],
+  "--color-brand-primary-active": semanticColorsDark["brand-primary-active"],
+  "--color-brand-secondary-hover": semanticColorsDark["brand-secondary-hover"],
+  "--color-brand-secondary-active": semanticColorsDark["brand-secondary-active"],
+  "--color-status-success-light": semanticColorsDark["status-success-light"],
+  "--color-status-success-dark": semanticColorsDark["status-success-dark"],
+  "--color-status-error-light": semanticColorsDark["status-error-light"],
+  "--color-status-error-dark": semanticColorsDark["status-error-dark"],
+  "--color-status-warning-light": semanticColorsDark["status-warning-light"],
+  "--color-status-warning-dark": semanticColorsDark["status-warning-dark"],
+  "--color-status-info-light": semanticColorsDark["status-info-light"],
+  "--color-status-info-dark": semanticColorsDark["status-info-dark"],
+  "--color-on-status-success": semanticColorsDark["on-status-success"],
+  "--color-on-status-error": semanticColorsDark["on-status-error"],
+  "--color-on-status-warning": semanticColorsDark["on-status-warning"],
+  "--color-on-status-info": semanticColorsDark["on-status-info"],
+  "--color-result-improve": semanticColorsDark["result-improve"],
+  "--color-result-improve-light": semanticColorsDark["result-improve-light"],
+  "--color-result-improve-dark": semanticColorsDark["result-improve-dark"],
+  "--color-result-degrade": semanticColorsDark["result-degrade"],
+  "--color-result-degrade-light": semanticColorsDark["result-degrade-light"],
+  "--color-result-degrade-dark": semanticColorsDark["result-degrade-dark"],
+  "--color-result-inconclusive": semanticColorsDark["result-inconclusive"],
+  "--color-result-inconclusive-light": semanticColorsDark["result-inconclusive-light"],
+  "--color-result-neutral": semanticColorsDark["result-neutral"],
+  "--color-on-result-improve": semanticColorsDark["on-result-improve"],
+  "--color-on-result-degrade": semanticColorsDark["on-result-degrade"],
+  "--color-on-result-inconclusive": semanticColorsDark["on-result-inconclusive"],
+  "--color-data-1": semanticColorsDark["data-1"],
+  "--color-data-2": semanticColorsDark["data-2"],
+  "--color-data-3": semanticColorsDark["data-3"],
+  "--color-data-4": semanticColorsDark["data-4"],
+  "--color-data-5": semanticColorsDark["data-5"],
+  "--color-data-6": semanticColorsDark["data-6"],
+  "--color-data-7": semanticColorsDark["data-7"],
+  "--color-data-8": semanticColorsDark["data-8"],
+  "--color-data-9": semanticColorsDark["data-9"],
+  "--color-data-10": semanticColorsDark["data-10"],
+  "--color-text-link-hover": semanticColorsDark["text-link-hover"],
+  "--color-surface-overlay": semanticColorsDark["surface-overlay"],
+  "--color-surface-input": semanticColorsDark["surface-input"],
+  "--color-border-input": semanticColorsDark["border-input"],
+  "--color-border-input-hover": semanticColorsDark["border-input-hover"],
+  "--color-border-input-focus": semanticColorsDark["border-input-focus"],
+  "--color-border-input-error": semanticColorsDark["border-input-error"],
+  "--color-interactive-disabled-text": semanticColorsDark["interactive-disabled-text"],
+  "--color-avatar-background": semanticColorsDark["avatar-background"],
+  "--color-avatar-text": semanticColorsDark["avatar-text"],
+  ...themeIndependentCSSVars
 };
 function getThemeCSSVars(mode) {
   return mode === "dark" ? darkThemeCSSVars : lightThemeCSSVars;
@@ -1500,6 +1620,67 @@ function getGlowShadow(color, intensity = "medium") {
   });
 }
 
+// src/theme/manifest/css-property-manifest.validate.ts
+var isPlainObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var isVariantAxes = (value) => isPlainObject(value) && Object.keys(value).length > 0 && Object.values(value).every((axisValue) => typeof axisValue === "string");
+function collectVariantOverrideErrors(override, path) {
+  if (!isPlainObject(override)) return [`${path} must be an object`];
+  const errors = [];
+  if (!isVariantAxes(override.variant))
+    errors.push(`${path}.variant must be a non-empty string-keyed object`);
+  if (override.token !== void 0 && override.token !== null && typeof override.token !== "string") {
+    errors.push(`${path}.token must be a string or null`);
+  }
+  if (typeof override.resolvedValue !== "string" || override.resolvedValue.length === 0) {
+    errors.push(`${path}.resolvedValue must be a non-empty string`);
+  }
+  return errors;
+}
+function collectPropertyErrors(entry, path) {
+  if (!isPlainObject(entry)) return [`${path} must be an object`];
+  const errors = [];
+  if (typeof entry.property !== "string" || entry.property.length === 0) {
+    errors.push(`${path}.property must be a non-empty string`);
+  }
+  if (entry.token !== null && typeof entry.token !== "string") {
+    errors.push(`${path}.token must be a string or null`);
+  }
+  if (typeof entry.resolvedValue !== "string" || entry.resolvedValue.length === 0) {
+    errors.push(`${path}.resolvedValue must be a non-empty string`);
+  }
+  if (entry.variantOverrides !== void 0) {
+    if (!Array.isArray(entry.variantOverrides)) {
+      errors.push(`${path}.variantOverrides must be an array`);
+    } else {
+      entry.variantOverrides.forEach(
+        (override, i) => errors.push(...collectVariantOverrideErrors(override, `${path}.variantOverrides[${i}]`))
+      );
+    }
+  }
+  return errors;
+}
+function validateCssPropertyManifest(candidate) {
+  if (!isPlainObject(candidate)) return { valid: false, errors: ["manifest must be an object"] };
+  const errors = [];
+  if (typeof candidate.component !== "string" || candidate.component.length === 0) {
+    errors.push("component must be a non-empty string");
+  }
+  if (candidate.baseVariant !== void 0 && !isVariantAxes(candidate.baseVariant)) {
+    errors.push("baseVariant must be a non-empty string-keyed object");
+  }
+  if (!Array.isArray(candidate.properties) || candidate.properties.length === 0) {
+    errors.push("properties must be a non-empty array");
+  } else {
+    candidate.properties.forEach(
+      (entry, i) => errors.push(...collectPropertyErrors(entry, `properties[${i}]`))
+    );
+  }
+  return { valid: errors.length === 0, errors };
+}
+function isCssPropertyManifest(candidate) {
+  return validateCssPropertyManifest(candidate).valid;
+}
+
 // src/theme/presets/apply.ts
 function colorKeyToVar(key) {
   return `--color-${key}`;
@@ -1690,6 +1871,7 @@ exports.getValidatedElevation = getValidatedElevation;
 exports.gluestackConfig = gluestackConfig;
 exports.hexToRgb = hexToRgb;
 exports.hsvToRgb = hsvToRgb;
+exports.isCssPropertyManifest = isCssPropertyManifest;
 exports.isDark = isDark;
 exports.lightThemeCSSVars = lightThemeCSSVars;
 exports.lighten = lighten;
@@ -1707,5 +1889,6 @@ exports.semanticColorsDark = semanticColorsDark;
 exports.semanticColorsLight = semanticColorsLight;
 exports.semanticTypography = semanticTypography;
 exports.shadowColors = shadowColors;
+exports.validateCssPropertyManifest = validateCssPropertyManifest;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map