@titan-design/react-ui 0.1.0 → 0.2.5

package/dist/theme/index.d.mts

@@ -1299,4 +1299,89 @@ declare const neumorphicShadows: {
     };
 };
 
-export { type ComponentType, type ElevationConfig, type ElevationLevel, type GlowIntensity, type ShadowIntensity, type ShadowSurface, type ThemeConfig, type ThemeMode, buttonSizes, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, 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 };
+interface ThemePresetColors {
+    'brand-primary'?: string;
+    'brand-primary-light'?: string;
+    'brand-primary-dark'?: string;
+    'brand-primary-subtle'?: string;
+    'brand-primary-hover'?: string;
+    'brand-primary-active'?: string;
+    'brand-secondary'?: string;
+    'brand-secondary-light'?: string;
+    'brand-secondary-dark'?: string;
+    'brand-secondary-subtle'?: string;
+    'brand-secondary-hover'?: string;
+    'brand-secondary-active'?: string;
+    'on-brand-primary'?: string;
+    'on-brand-secondary'?: string;
+    'status-success'?: string;
+    'status-error'?: string;
+    'status-warning'?: string;
+    'status-info'?: string;
+    'text-primary'?: string;
+    'text-secondary'?: string;
+    'text-tertiary'?: string;
+    'surface-base'?: string;
+    'surface-elevated'?: string;
+    'surface-raised'?: string;
+    'surface-overlay'?: string;
+    'surface-input'?: string;
+    'background-base'?: string;
+    'background-default'?: string;
+    'background-subtle'?: string;
+    'border-default'?: string;
+    'border-subtle'?: string;
+    'border-strong'?: string;
+    'border-focus'?: string;
+    'divider'?: string;
+    [key: `${string}`]: string | undefined;
+}
+interface ThemePresetFonts {
+    sans?: string;
+    body?: string;
+    heading?: string;
+    mono?: string;
+}
+interface ThemePresetRadii {
+    sm?: string;
+    DEFAULT?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+}
+interface ThemePresetShadows {
+    sm?: string;
+    DEFAULT?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+}
+interface ThemePreset {
+    name: string;
+    description?: string;
+    colors?: {
+        dark?: ThemePresetColors;
+        light?: ThemePresetColors;
+    };
+    fonts?: ThemePresetFonts;
+    radii?: ThemePresetRadii;
+    shadows?: ThemePresetShadows;
+    /** Additional CSS classes to add to root element */
+    rootClasses?: string[];
+    /** Google Fonts import URL (appended to existing imports) */
+    fontImport?: string;
+}
+
+declare function applyThemePreset(preset: ThemePreset): () => void;
+
+declare const defaultPreset: ThemePreset;
+
+/**
+ * Audiobook Studio preset.
+ *
+ * Warm copper/patina aesthetic inspired by vintage audio equipment
+ * and reading lounges. Dark-mode only design with editorial typography.
+ */
+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 };

package/dist/theme/index.d.ts

@@ -1299,4 +1299,89 @@ declare const neumorphicShadows: {
     };
 };
 
-export { type ComponentType, type ElevationConfig, type ElevationLevel, type GlowIntensity, type ShadowIntensity, type ShadowSurface, type ThemeConfig, type ThemeMode, buttonSizes, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, 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 };
+interface ThemePresetColors {
+    'brand-primary'?: string;
+    'brand-primary-light'?: string;
+    'brand-primary-dark'?: string;
+    'brand-primary-subtle'?: string;
+    'brand-primary-hover'?: string;
+    'brand-primary-active'?: string;
+    'brand-secondary'?: string;
+    'brand-secondary-light'?: string;
+    'brand-secondary-dark'?: string;
+    'brand-secondary-subtle'?: string;
+    'brand-secondary-hover'?: string;
+    'brand-secondary-active'?: string;
+    'on-brand-primary'?: string;
+    'on-brand-secondary'?: string;
+    'status-success'?: string;
+    'status-error'?: string;
+    'status-warning'?: string;
+    'status-info'?: string;
+    'text-primary'?: string;
+    'text-secondary'?: string;
+    'text-tertiary'?: string;
+    'surface-base'?: string;
+    'surface-elevated'?: string;
+    'surface-raised'?: string;
+    'surface-overlay'?: string;
+    'surface-input'?: string;
+    'background-base'?: string;
+    'background-default'?: string;
+    'background-subtle'?: string;
+    'border-default'?: string;
+    'border-subtle'?: string;
+    'border-strong'?: string;
+    'border-focus'?: string;
+    'divider'?: string;
+    [key: `${string}`]: string | undefined;
+}
+interface ThemePresetFonts {
+    sans?: string;
+    body?: string;
+    heading?: string;
+    mono?: string;
+}
+interface ThemePresetRadii {
+    sm?: string;
+    DEFAULT?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+}
+interface ThemePresetShadows {
+    sm?: string;
+    DEFAULT?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+}
+interface ThemePreset {
+    name: string;
+    description?: string;
+    colors?: {
+        dark?: ThemePresetColors;
+        light?: ThemePresetColors;
+    };
+    fonts?: ThemePresetFonts;
+    radii?: ThemePresetRadii;
+    shadows?: ThemePresetShadows;
+    /** Additional CSS classes to add to root element */
+    rootClasses?: string[];
+    /** Google Fonts import URL (appended to existing imports) */
+    fontImport?: string;
+}
+
+declare function applyThemePreset(preset: ThemePreset): () => void;
+
+declare const defaultPreset: ThemePreset;
+
+/**
+ * Audiobook Studio preset.
+ *
+ * Warm copper/patina aesthetic inspired by vintage audio equipment
+ * and reading lounges. Dark-mode only design with editorial typography.
+ */
+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 };

package/dist/theme/index.js

@@ -1500,6 +1500,171 @@ function getGlowShadow(color, intensity = "medium") {
   });
 }
 
+// src/theme/presets/apply.ts
+function colorKeyToVar(key) {
+  return `--color-${key}`;
+}
+function applyColorOverrides(colors, root) {
+  for (const [key, value] of Object.entries(colors)) {
+    if (value !== void 0) {
+      root.style.setProperty(colorKeyToVar(key), value);
+    }
+  }
+}
+function applyFontOverrides(fonts, root) {
+  const fontVarMap = {
+    sans: "--font-family-sans",
+    body: "--font-family-body",
+    heading: "--font-family-heading",
+    mono: "--font-family-mono"
+  };
+  for (const [key, value] of Object.entries(fonts)) {
+    if (value !== void 0 && fontVarMap[key]) {
+      root.style.setProperty(fontVarMap[key], value);
+    }
+  }
+}
+function injectFontImport(url) {
+  if (typeof document === "undefined") return;
+  const existing = document.querySelector(`link[href="${url}"]`);
+  if (existing) return;
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = url;
+  document.head.appendChild(link);
+}
+function applyThemePreset(preset) {
+  if (typeof document === "undefined") {
+    return () => {
+    };
+  }
+  const root = document.documentElement;
+  const removals = [];
+  if (preset.fontImport) {
+    injectFontImport(preset.fontImport);
+  }
+  const isLight = root.classList.contains("light");
+  const modeColors = isLight ? preset.colors?.light : preset.colors?.dark;
+  if (modeColors) {
+    const previousValues = {};
+    for (const key of Object.keys(modeColors)) {
+      previousValues[colorKeyToVar(key)] = root.style.getPropertyValue(colorKeyToVar(key)) || null;
+    }
+    applyColorOverrides(modeColors, root);
+    removals.push(() => {
+      for (const [varName, prev] of Object.entries(previousValues)) {
+        if (prev === null) {
+          root.style.removeProperty(varName);
+        } else {
+          root.style.setProperty(varName, prev);
+        }
+      }
+    });
+  }
+  if (preset.fonts) {
+    applyFontOverrides(preset.fonts, root);
+  }
+  if (preset.rootClasses) {
+    for (const cls of preset.rootClasses) {
+      root.classList.add(cls);
+    }
+    removals.push(() => {
+      for (const cls of preset.rootClasses) {
+        root.classList.remove(cls);
+      }
+    });
+  }
+  return () => {
+    for (const remove of removals) {
+      remove();
+    }
+  };
+}
+
+// src/theme/presets/default.ts
+var defaultPreset = {
+  name: "default",
+  description: "Titan Design System default theme \u2014 orange accent, steel secondary"
+};
+
+// src/theme/presets/audiobook.ts
+var audiobookPreset = {
+  name: "audiobook",
+  description: "Warm copper/patina theme with editorial typography",
+  fontImport: "https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,600;0,700;1,400&family=Outfit:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap",
+  fonts: {
+    sans: "'Outfit', 'Avenir', 'Avenir Next', system-ui, sans-serif",
+    body: "'Outfit', 'Avenir', 'Avenir Next', system-ui, sans-serif",
+    heading: "'Newsreader', 'Libre Baskerville', Georgia, serif",
+    mono: "'JetBrains Mono', 'SF Mono', 'Fira Code', monospace"
+  },
+  colors: {
+    dark: {
+      // Brand: Copper accent
+      "brand-primary": "#d4782a",
+      "brand-primary-light": "#e8944a",
+      "brand-primary-dark": "#9a4a15",
+      "brand-primary-subtle": "rgba(212, 120, 42, 0.12)",
+      "brand-primary-hover": "#e8944a",
+      "brand-primary-active": "#f5b070",
+      // Brand secondary: Patina/verdigris
+      "brand-secondary": "#3a9b8a",
+      "brand-secondary-light": "#55baa7",
+      "brand-secondary-dark": "#1f5c52",
+      "brand-secondary-subtle": "rgba(58, 155, 138, 0.12)",
+      "brand-secondary-hover": "#55baa7",
+      "brand-secondary-active": "#7ed4c4",
+      "on-brand-primary": "#FFFFFF",
+      "on-brand-secondary": "#FFFFFF",
+      // Status colors (audiobook's warmer status palette)
+      "status-success": "#5fb870",
+      "status-error": "#d85c4a",
+      "status-warning": "#d4a43a",
+      "status-info": "#5a8fd4",
+      // Text: warm off-whites
+      "text-primary": "#f4f3f1",
+      "text-secondary": "#b5b3af",
+      "text-tertiary": "#7a7875",
+      // Surfaces: warm charcoals (not pure gray)
+      "surface-base": "#101114",
+      "surface-elevated": "#15171c",
+      "surface-raised": "#1a1d24",
+      "surface-overlay": "#15171c",
+      "surface-input": "#15171c",
+      // Backgrounds
+      "background-base": "#0a0b0d",
+      "background-default": "#101114",
+      "background-subtle": "#1a1d24",
+      // Borders
+      "border-default": "rgba(255, 255, 255, 0.06)",
+      "border-subtle": "rgba(255, 255, 255, 0.03)",
+      "border-strong": "#2d323d",
+      "border-focus": "#d4782a",
+      "border-input": "#2d323d",
+      "border-input-hover": "#454c5c",
+      "border-input-focus": "#d4782a",
+      "border-input-error": "#d85c4a",
+      // Interactive
+      "interactive-hover": "rgba(255, 255, 255, 0.04)",
+      "interactive-focus": "rgba(255, 255, 255, 0.12)",
+      "interactive-active": "rgba(255, 255, 255, 0.16)",
+      "interactive-selected": "rgba(255, 255, 255, 0.08)",
+      "divider": "rgba(255, 255, 255, 0.06)",
+      // Glow RGB values for shadow utilities
+      "brand-primary-rgb": "212, 120, 42",
+      "brand-secondary-rgb": "58, 155, 138",
+      "status-success-rgb": "95, 184, 112",
+      "status-error-rgb": "216, 92, 74",
+      "status-warning-rgb": "212, 164, 58",
+      "status-info-rgb": "90, 143, 212",
+      "background-base-rgb": "10, 11, 13"
+    }
+  },
+  rootClasses: ["atmosphere-warm", "grain"]
+};
+
+exports.applyThemePreset = applyThemePreset;
+exports.audiobookPreset = audiobookPreset;
 exports.buttonSizes = buttonSizes;
 exports.componentElevationRanges = componentElevationRanges;
 exports.createFlatShadow = createFlatShadow;
@@ -1509,6 +1674,7 @@ exports.createRaisedHoverShadow = createRaisedHoverShadow;
 exports.createRaisedShadow = createRaisedShadow;
 exports.darkThemeCSSVars = darkThemeCSSVars;
 exports.darken = darken;
+exports.defaultPreset = defaultPreset;
 exports.discreteRainbow = discreteRainbow;
 exports.elevationSystem = elevationSystem;
 exports.getBaseSurfaceColor = getBaseSurfaceColor;