@titan-design/react-ui 0.2.6 → 0.3.0

package/dist/theme/index.d.mts

@@ -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 };