catalog/ts_web/elements/00theme.ts

import { css, type CSSResult } from '@design.estate/dees-element';

// ============================================
// Theme Token Type Definitions
// ============================================

export interface IThemeColors {
  bgPrimary: string;
  bgSecondary: string;
  bgTertiary: string;
  textPrimary: string;
  textSecondary: string;
  textMuted: string;
  borderDefault: string;
  borderSubtle: string;
  borderStrong: string;
  accentPrimary: string;
  accentSuccess: string;
  accentWarning: string;
  accentError: string;
}

export interface IThemeSpacing {
  xs: string;
  sm: string;
  md: string;
  lg: string;
  xl: string;
  '2xl': string;
  '3xl': string;
}

export interface IThemeRadius {
  xs: string;
  sm: string;
  md: string;
  lg: string;
  xl: string;
  full: string;
}

export interface IThemeShadows {
  xs: string;
  sm: string;
  md: string;
  lg: string;
}

export interface IThemeTransitions {
  fast: string;
  default: string;
  slow: string;
  slower: string;
}

export interface IThemeControlHeights {
  sm: string;
  md: string;
  lg: string;
  xl: string;
}

export interface ITheme {
  colors: {
    light: IThemeColors;
    dark: IThemeColors;
  };
  spacing: IThemeSpacing;
  radius: IThemeRadius;
  shadows: IThemeShadows;
  transitions: IThemeTransitions;
  controlHeights: IThemeControlHeights;
}

// ============================================
// Default Theme Values (TypeScript Object)
// ============================================

export const themeDefaults: ITheme = {
  colors: {
    light: {
      bgPrimary: '#ffffff',
      bgSecondary: '#fafafa',
      bgTertiary: '#f4f4f5',
      textPrimary: '#09090b',
      textSecondary: '#374151',
      textMuted: '#71717a',
      borderDefault: '#e5e7eb',
      borderSubtle: '#f4f4f5',
      borderStrong: '#d1d5db',
      accentPrimary: '#3b82f6',
      accentSuccess: '#22c55e',
      accentWarning: '#f59e0b',
      accentError: '#ef4444',
    },
    dark: {
      bgPrimary: '#09090b',
      bgSecondary: '#0a0a0a',
      bgTertiary: '#18181b',
      textPrimary: '#fafafa',
      textSecondary: '#d4d4d8',
      textMuted: '#a1a1aa',
      borderDefault: '#27272a',
      borderSubtle: '#1a1a1a',
      borderStrong: '#3f3f46',
      accentPrimary: '#3b82f6',
      accentSuccess: '#22c55e',
      accentWarning: '#f59e0b',
      accentError: '#ef4444',
    },
  },
  spacing: {
    xs: '4px',
    sm: '8px',
    md: '12px',
    lg: '16px',
    xl: '24px',
    '2xl': '32px',
    '3xl': '48px',
  },
  radius: {
    xs: '2px',
    sm: '4px',
    md: '6px',
    lg: '8px',
    xl: '12px',
    full: '999px',
  },
  shadows: {
    xs: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
    sm: '0 1px 3px rgba(0, 0, 0, 0.1)',
    md: '0 2px 8px rgba(0, 0, 0, 0.15)',
    lg: '0 4px 12px rgba(0, 0, 0, 0.15)',
  },
  transitions: {
    fast: '0.1s',
    default: '0.15s',
    slow: '0.2s',
    slower: '0.3s',
  },
  controlHeights: {
    sm: '32px',
    md: '36px',
    lg: '40px',
    xl: '48px',
  },
};

// ============================================
// CSS Block for Component Import
// ============================================

/**
 * Default theme styles to be imported into every component's static styles array.
 * Provides CSS custom properties for spacing, radius, shadows, transitions, and control heights.
 *
 * Usage:
 * ```typescript
 * import { themeDefaultStyles } from '../00theme.js';
 *
 * @customElement('my-component')
 * export class MyComponent extends DeesElement {
 *   public static styles = [
 *     themeDefaultStyles,
 *     cssManager.defaultStyles,
 *     css`...`
 *   ];
 * }
 * ```
 */
export const themeDefaultStyles: CSSResult = css`
  :host {
    /* ========================================
     * Spacing Scale
     * ======================================== */
    --dees-spacing-xs: 4px;
    --dees-spacing-sm: 8px;
    --dees-spacing-md: 12px;
    --dees-spacing-lg: 16px;
    --dees-spacing-xl: 24px;
    --dees-spacing-2xl: 32px;
    --dees-spacing-3xl: 48px;

    /* ========================================
     * Border Radius Scale
     * ======================================== */
    --dees-radius-xs: 2px;
    --dees-radius-sm: 4px;
    --dees-radius-md: 6px;
    --dees-radius-lg: 8px;
    --dees-radius-xl: 12px;
    --dees-radius-full: 999px;

    /* ========================================
     * Shadow Elevation Scale
     * ======================================== */
    --dees-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --dees-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --dees-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
    --dees-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);

    /* ========================================
     * Transition Duration Scale
     * ======================================== */
    --dees-transition-fast: 0.1s;
    --dees-transition-default: 0.15s;
    --dees-transition-slow: 0.2s;
    --dees-transition-slower: 0.3s;

    /* ========================================
     * Control Height Scale
     * ======================================== */
    --dees-control-height-sm: 32px;
    --dees-control-height-md: 36px;
    --dees-control-height-lg: 40px;
    --dees-control-height-xl: 48px;
  }
`;