dees-catalog/ts_web/elements/00theme.ts

import { css, cssManager, 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;
  textWarm: string;
  borderDefault: string;
  borderSubtle: string;
  borderStrong: string;
  accentPrimary: string;
  accentSuccess: string;
  accentWarning: string;
  accentError: string;
  badgeDefaultBg: string;
  badgeDefaultFg: string;
  badgeSuccessBg: string;
  badgeSuccessFg: string;
  badgeWarningBg: string;
  badgeWarningFg: string;
  badgeErrorBg: string;
  badgeErrorFg: 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: 'hsl(0 0% 100%)',    // #ffffff
      bgSecondary: 'hsl(0 0% 98%)',   // #fafafa
      bgTertiary: 'hsl(0 0% 96%)',    // #f5f5f5
      textPrimary: 'hsl(0 0% 3.9%)',  // #0a0a0a
      textSecondary: 'hsl(0 0% 20%)', // #333333
      textMuted: 'hsl(0 0% 45%)',     // #737373
      textWarm: '#78716c',            // warm stone
      borderDefault: 'hsl(0 0% 89.8%)', // #e5e5e5
      borderSubtle: 'hsl(0 0% 93%)',    // #ededed
      borderStrong: 'hsl(0 0% 80%)',    // #cccccc
      accentPrimary: '#3b82f6',
      accentSuccess: '#22c55e',
      accentWarning: '#f59e0b',
      accentError: '#ef4444',
      badgeDefaultBg: '#f4f4f5',
      badgeDefaultFg: '#3f3f46',
      badgeSuccessBg: '#dcfce7',
      badgeSuccessFg: '#166534',
      badgeWarningBg: '#fef3c7',
      badgeWarningFg: '#92400e',
      badgeErrorBg: '#fee2e2',
      badgeErrorFg: '#991b1b',
    },
    dark: {
      bgPrimary: 'hsl(0 0% 3.9%)',    // #0a0a0a
      bgSecondary: 'hsl(0 0% 7%)',    // #121212
      bgTertiary: 'hsl(0 0% 11%)',    // #1c1c1c
      textPrimary: 'hsl(0 0% 98%)',   // #fafafa
      textSecondary: 'hsl(0 0% 63.9%)', // #a3a3a3
      textMuted: 'hsl(0 0% 55%)',       // #8c8c8c
      textWarm: '#b5a99a',              // warm stone
      borderDefault: 'hsl(0 0% 14.9%)', // #262626
      borderSubtle: 'hsl(0 0% 11%)',     // #1c1c1c
      borderStrong: 'hsl(0 0% 20%)',     // #333333
      accentPrimary: '#3b82f6',
      accentSuccess: '#22c55e',
      accentWarning: '#f59e0b',
      accentError: '#ef4444',
      badgeDefaultBg: '#27272a',
      badgeDefaultFg: '#a1a1aa',
      badgeSuccessBg: '#14532d',
      badgeSuccessFg: '#4ade80',
      badgeWarningBg: '#451a03',
      badgeWarningFg: '#fbbf24',
      badgeErrorBg: '#450a0a',
      badgeErrorFg: '#f87171',
    },
  },
  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 colors, 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 {
    /* ========================================
     * Colors — Background
     * ======================================== */
    --dees-color-bg-primary: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
    --dees-color-bg-secondary: ${cssManager.bdTheme('hsl(0 0% 98%)', 'hsl(0 0% 7%)')};
    --dees-color-bg-tertiary: ${cssManager.bdTheme('hsl(0 0% 96%)', 'hsl(0 0% 11%)')};

    /* ========================================
     * Colors — Text
     * ======================================== */
    --dees-color-text-primary: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
    --dees-color-text-secondary: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
    --dees-color-text-muted: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};

    /* ========================================
     * Colors — Border
     * ======================================== */
    --dees-color-border-default: ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
    --dees-color-border-subtle: ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 11%)')};
    --dees-color-border-strong: ${cssManager.bdTheme('hsl(0 0% 80%)', 'hsl(0 0% 20%)')};

    /* ========================================
     * Colors — Warm Text (stone/gold accents)
     * ======================================== */
    --dees-color-text-warm: ${cssManager.bdTheme('#78716c', '#b5a99a')};

    /* ========================================
     * Colors — Accent
     * ======================================== */
    --dees-color-accent-primary: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
    --dees-color-accent-success: ${cssManager.bdTheme('#22c55e', '#22c55e')};
    --dees-color-accent-warning: ${cssManager.bdTheme('#f59e0b', '#f59e0b')};
    --dees-color-accent-error: ${cssManager.bdTheme('#ef4444', '#ef4444')};

    /* ========================================
     * Colors — Badge (semantic status pairs)
     * ======================================== */
    --dees-color-badge-default-bg: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
    --dees-color-badge-default-fg: ${cssManager.bdTheme('#3f3f46', '#a1a1aa')};
    --dees-color-badge-success-bg: ${cssManager.bdTheme('#dcfce7', '#14532d')};
    --dees-color-badge-success-fg: ${cssManager.bdTheme('#166534', '#4ade80')};
    --dees-color-badge-warning-bg: ${cssManager.bdTheme('#fef3c7', '#451a03')};
    --dees-color-badge-warning-fg: ${cssManager.bdTheme('#92400e', '#fbbf24')};
    --dees-color-badge-error-bg: ${cssManager.bdTheme('#fee2e2', '#450a0a')};
    --dees-color-badge-error-fg: ${cssManager.bdTheme('#991b1b', '#f87171')};

    /* ========================================
     * 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;
  }
`;