@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.6 → 0.2.8

package/dist/themes/types.d.ts

@@ -0,0 +1,454 @@
+// Multi-Theme System Type Definitions
+// This file defines the core interfaces for theme configuration
+
+export interface MultiThemeConfig {
+  fonts: FontThemeConfig;
+  colors: ColorThemeConfig;
+  navigation: NavigationThemeConfig;
+  spacing: SpacingThemeConfig;
+  shadows: ShadowThemeConfig;
+  transitions: TransitionThemeConfig;
+  borderRadius: BorderRadiusThemeConfig;
+  borderWidth: BorderWidthThemeConfig;
+  animation: AnimationThemeConfig;
+  accessibility: AccessibilityThemeConfig;
+  print: PrintThemeConfig;
+  containerQuery: ContainerQueryThemeConfig;
+  container: ContainerThemeConfig;
+  shimmer: ShimmerThemeConfig;
+  meta: ThemeMetadata;
+  extends?: string; // Optional property for theme inheritance
+
+  // NEW: Add light/dark mode configuration (colors only)
+  modes?: {
+    light?: {
+      colors?: Partial<ColorThemeConfig>;
+    };
+    dark?: {
+      colors?: Partial<ColorThemeConfig>;
+    };
+  };
+}
+
+export interface FontThemeConfig {
+  primary: FontConfig;
+  secondary: FontConfig;
+  display: FontConfig;
+  body: FontConfig;
+  mono: FontConfig;
+}
+
+export interface FontConfig {
+  family: string;
+  weights: number[];
+  sizes: FontSizeScale;
+  lineHeights: LineHeightScale;
+  letterSpacing: LetterSpacingScale;
+  fallbacks?: string[]; // Font fallback stack
+  display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional'; // Font loading strategy
+  source?: FontSource; // Font source configuration
+  features?: FontFeatures; // Advanced font features
+}
+
+export interface FontSource {
+  type: 'google' | 'custom' | 'system';
+  url?: string; // For custom fonts
+  files?: FontFiles; // For custom font files
+}
+
+export interface FontFiles {
+  woff2?: string;
+  woff?: string;
+  ttf?: string;
+  eot?: string;
+  svg?: string;
+}
+
+export interface FontFeatures {
+  ligatures?: boolean;
+  kerning?: boolean;
+  variant?: 'normal' | 'small-caps' | 'all-small-caps';
+  stretch?: 'normal' | 'condensed' | 'expanded';
+  styleSet?: number;
+}
+
+export interface FontSizeScale {
+  xs: string;
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+  '2xl': string;
+  '3xl': string;
+  '4xl': string;
+  '5xl': string;
+  '6xl': string;
+}
+
+export interface LineHeightScale {
+  tight: string;
+  normal: string;
+  relaxed: string;
+  loose: string;
+}
+
+export interface LetterSpacingScale {
+  tight: string;
+  normal: string;
+  wide: string;
+  wider: string;
+  widest: string;
+}
+
+export interface ColorThemeConfig {
+  primary: ColorScale;
+  secondary: ColorScale;
+  semantic: SemanticColors;
+  neutral: ColorScale;
+  surface: SurfaceColors;
+  text: TextColors;
+  interactive: InteractiveColors;
+  // Additional color properties referenced in CSS
+  accent?: string;
+  'bg-primary'?: string;
+  'bg-secondary'?: string;
+  'surface-bg'?: string;
+  'primary-hover'?: string;
+  'primary-active'?: string;
+  'accent-rgb'?: string;
+  border?: string;
+  'border-transparent'?: string;
+  'text-primary'?: string;
+  'text-secondary'?: string;
+}
+
+export interface ColorScale {
+  50: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  500: string;
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+  // Additional color variations
+  light?: string;    // Lighter than 50
+  dark?: string;     // Darker than 900
+  contrast?: string; // High contrast version
+  // RGB versions for rgba() usage
+  '500-rgb'?: string;
+  '600-rgb'?: string;
+  '700-rgb'?: string;
+}
+
+export interface ColorAccessibility {
+  aa: boolean;       // WCAG AA compliance
+  aaa: boolean;      // WCAG AAA compliance
+  contrastRatio: number; // Actual contrast ratio
+  recommended: string[]; // Recommended improvements
+}
+
+export interface SemanticColors {
+  success: string;
+  warning: string;
+  error: string;
+  info: string;
+  // Enhanced semantic colors with accessibility
+  successLight?: string;
+  successDark?: string;
+  warningLight?: string;
+  warningDark?: string;
+  errorLight?: string;
+  errorDark?: string;
+  infoLight?: string;
+  infoDark?: string;
+  // RGB versions for rgba() usage
+  successRgb?: string;
+  warningRgb?: string;
+  errorRgb?: string;
+  errorDarkRgb?: string;
+  infoRgb?: string;
+  // Additional RGB versions referenced in CSS
+  'success-rgb'?: string;
+  'warning-rgb'?: string;
+  'error-rgb'?: string;
+  'error-dark-rgb'?: string;
+  'info-rgb'?: string;
+}
+
+export interface NeutralColors {
+  50: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  500: string;
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+}
+
+export interface SurfaceColors {
+  background: string;
+  surface: string;
+  border: string;
+  divider: string;
+}
+
+export interface TextColors {
+  primary: string;
+  secondary: string;
+  muted: string;
+  inverse: string;
+  onPrimary: string;
+  onSecondary: string;
+  onSurface: string;
+}
+
+export interface InteractiveColors {
+  hover: string;
+  active: string;
+  focus: string;
+  disabled: string;
+  // Enhanced interactive states
+  hoverLight?: string;
+  hoverDark?: string;
+  activeLight?: string;
+  activeDark?: string;
+  focusRing?: string;
+  focusRingOffset?: string;
+}
+
+// Color generation and utility interfaces
+export interface ColorGenerationConfig {
+  baseColor: string;
+  hueShift?: number;
+  saturationAdjust?: number;
+  lightnessAdjust?: number;
+  generateShades?: boolean;
+  generateTints?: boolean;
+  generateContrast?: boolean;
+}
+
+export interface ColorPalette {
+  name: string;
+  description: string;
+  colors: ColorScale;
+  accessibility: ColorAccessibility;
+  usage: string[];
+  tags: string[];
+}
+
+export interface SpacingThemeConfig {
+  scale: SpacingScale;
+  component: ComponentSpacing;
+  layout: LayoutSpacing;
+}
+
+export interface SpacingScale {
+  xs: string;
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+  '2xl': string;
+  '3xl': string;
+  '4xl': string;
+  '5xl': string;
+  '6xl': string;
+}
+
+export interface ComponentSpacing {
+  button: {
+    padding: string;
+    margin: string;
+    gap: string;
+  };
+  input: {
+    padding: string;
+    margin: string;
+    gap: string;
+  };
+  card: {
+    padding: string;
+    margin: string;
+    gap: string;
+  };
+}
+
+export interface LayoutSpacing {
+  page: string;
+  section: string;
+  container: string;
+  grid: string;
+}
+
+export interface ShadowThemeConfig {
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+  '2xl': string;
+  inner: string;
+  none: string;
+}
+
+export interface TransitionThemeConfig {
+  duration: TransitionDuration;
+  easing: TransitionEasing;
+  properties: TransitionProperties;
+}
+
+export interface BorderRadiusThemeConfig {
+  none: string;
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+  '2xl': string;
+  full: string;
+}
+
+export interface BorderWidthThemeConfig {
+  none: string;
+  thin: string;
+  normal: string;
+  focus: string;
+  thick: string;
+  extraThick: string;
+}
+
+export interface AnimationThemeConfig {
+  duration: {
+    fast: string;
+    normal: string;
+    slow: string;
+  };
+  easing: {
+    linear: string;
+    ease: string;
+    easeIn: string;
+    easeOut: string;
+    easeInOut: string;
+  };
+  transforms: {
+    hoverY: string;
+    offsetY: string;
+    scale: string;
+  };
+}
+
+export interface AccessibilityThemeConfig {
+  focusRing: {
+    width: string;
+    offset: string;
+    color: string;
+  };
+  outline: {
+    offset: string;
+  };
+  highContrast: {
+    borderWidth: string;
+    outlineWidth: string;
+  };
+  disabled: {
+    cursor: string;
+    opacity: string;
+  };
+}
+
+export interface PrintThemeConfig {
+  borderColor: string;
+  textColor: string;
+  textSecondaryColor: string;
+  backgroundColor: string;
+}
+
+export interface ContainerQueryThemeConfig {
+  small: string;
+  medium: string;
+  large: string;
+}
+
+export interface ContainerThemeConfig {
+  width: {
+    small: string;
+    medium: string;
+    large: string;
+    xl: string;
+    full: string;
+  };
+}
+
+export interface ShimmerThemeConfig {
+  alpha: string;
+  color: string;
+}
+
+export interface TransitionDuration {
+  fast: string;
+  normal: string;
+  slow: string;
+}
+
+export interface TransitionEasing {
+  linear: string;
+  ease: string;
+  easeIn: string;
+  easeOut: string;
+  easeInOut: string;
+}
+
+export interface TransitionProperties {
+  colors: string;
+  transform: string;
+  opacity: string;
+  shadow: string;
+}
+
+export interface ThemeMetadata {
+  name: string;
+  description: string;
+  author: string;
+  version: string;
+  category: 'brand' | 'enterprise' | 'creative' | 'custom' | 'accessibility';
+  tags: string[];
+  preview: string; // URL to preview image
+  createdAt: string;
+  updatedAt: string;
+}
+
+// Theme validation types
+export interface ThemeValidationResult {
+  isValid: boolean;
+  errors: ThemeValidationError[];
+  warnings: ThemeValidationWarning[];
+}
+
+export interface ThemeValidationError {
+  path: string;
+  message: string;
+  severity: 'error' | 'critical';
+}
+
+export interface ThemeValidationWarning {
+  path: string;
+  message: string;
+  severity: 'warning' | 'info';
+}
+
+// Theme inheritance types
+export interface ThemeInheritance {
+  extends?: string; // Theme name to extend
+  overrides: Partial<MultiThemeConfig>; // Properties to override
+  additions: Partial<MultiThemeConfig>; // Properties to add
+}
+
+// Complete theme with inheritance
+export interface CompleteThemeConfig extends MultiThemeConfig {
+  inheritance?: ThemeInheritance;
+  validation: ThemeValidationResult;
+}