@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.9 → 0.2.11

package/dist/themes/types.js

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