feat(theme): enhance color definitions and add warm text and badge colors

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',
+      bgPrimary: 'hsl(0 0% 100%)',    // #ffffff
-      bgSecondary: '#fafafa',
+      bgSecondary: 'hsl(0 0% 98%)',   // #fafafa
-      bgTertiary: '#f4f4f5',
+      bgTertiary: 'hsl(0 0% 96%)',    // #f5f5f5
-      textPrimary: '#09090b',
+      textPrimary: 'hsl(0 0% 3.9%)',  // #0a0a0a
-      textSecondary: '#374151',
+      textSecondary: 'hsl(0 0% 20%)', // #333333
-      textMuted: '#71717a',
+      textMuted: 'hsl(0 0% 45%)',     // #737373
-      borderDefault: '#e5e7eb',
+      textWarm: '#78716c',            // warm stone
-      borderSubtle: '#f4f4f5',
+      borderDefault: 'hsl(0 0% 89.8%)', // #e5e5e5
-      borderStrong: '#d1d5db',
+      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',
+      bgPrimary: 'hsl(0 0% 3.9%)',    // #0a0a0a
-      bgSecondary: '#0a0a0a',
+      bgSecondary: 'hsl(0 0% 7%)',    // #121212
-      bgTertiary: '#18181b',
+      bgTertiary: 'hsl(0 0% 11%)',    // #1c1c1c
-      textPrimary: '#fafafa',
+      textPrimary: 'hsl(0 0% 98%)',   // #fafafa
-      textSecondary: '#d4d4d8',
+      textSecondary: 'hsl(0 0% 63.9%)', // #a3a3a3
-      textMuted: '#a1a1aa',
+      textMuted: 'hsl(0 0% 55%)',       // #8c8c8c
-      borderDefault: '#27272a',
+      textWarm: '#b5a99a',              // warm stone
-      borderSubtle: '#1a1a1a',
+      borderDefault: 'hsl(0 0% 14.9%)', // #262626
-      borderStrong: '#3f3f46',
+      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
      * ======================================== */