diff --git a/ts_web/elements/00theme.ts b/ts_web/elements/00theme.ts index 3c7625d..9a7563b 100644 --- a/ts_web/elements/00theme.ts +++ b/ts_web/elements/00theme.ts @@ -1,4 +1,4 @@ -import { css, type CSSResult } from '@design.estate/dees-element'; +import { css, cssManager, type CSSResult } from '@design.estate/dees-element'; // ============================================ // Theme Token Type Definitions @@ -11,6 +11,7 @@ export interface IThemeColors { textPrimary: string; textSecondary: string; textMuted: string; + textWarm: string; borderDefault: string; borderSubtle: string; borderStrong: string; @@ -18,6 +19,14 @@ export interface IThemeColors { 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 { @@ -79,34 +88,52 @@ export interface ITheme { export const themeDefaults: ITheme = { colors: { light: { - bgPrimary: '#ffffff', - bgSecondary: '#fafafa', - bgTertiary: '#f4f4f5', - textPrimary: '#09090b', - textSecondary: '#374151', - textMuted: '#71717a', - borderDefault: '#e5e7eb', - borderSubtle: '#f4f4f5', - borderStrong: '#d1d5db', + 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: '#09090b', - bgSecondary: '#0a0a0a', - bgTertiary: '#18181b', - textPrimary: '#fafafa', - textSecondary: '#d4d4d8', - textMuted: '#a1a1aa', - borderDefault: '#27272a', - borderSubtle: '#1a1a1a', - borderStrong: '#3f3f46', + 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: { @@ -152,7 +179,7 @@ export const themeDefaults: ITheme = { /** * 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. + * Provides CSS custom properties for colors, spacing, radius, shadows, transitions, and control heights. * * Usage: * ```typescript @@ -170,6 +197,52 @@ export const themeDefaults: ITheme = { */ 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 * ======================================== */