feat(theme): centralize theme CSS tokens in theme defaults and add missing interactive color variables

changelog.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2026-04-04 - 3.55.0 - feat(theme)
+centralize theme CSS tokens in theme defaults and add missing interactive color variables
+
+- Refactors theme CSS variables to derive light and dark values from the shared themeDefaults token map instead of hardcoded color literals.
+- Adjusts dark background token values so secondary and tertiary surfaces align more consistently with the dark UI palette.
+- Adds new theme variables for interactive states, focus ring, tooltip, link, code, selection, and scrollbar styling.
+
 ## 2026-04-04 - 3.54.0 - feat(media)
 rename media tile components to thumbnail components and add shared thumbnail base exports
 

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.54.0',
+  version: '3.55.0',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/elements/00theme.ts

@@ -1,4 +1,4 @@
-import { css, cssManager, type CSSResult } from '@design.estate/dees-element';
+import { css, cssManager, unsafeCSS, type CSSResult } from '@design.estate/dees-element';
 
 // ============================================
 // Theme Token Type Definitions
@@ -113,8 +113,8 @@ export const themeDefaults: ITheme = {
     },
     dark: {
       bgPrimary: 'hsl(0 0% 3.9%)',    // #0a0a0a
-      bgSecondary: 'hsl(0 0% 7%)',    // #121212
+      bgSecondary: 'hsl(0 0% 3.9%)', // #0a0a0a (matches sidebar/tile in dark)
-      bgTertiary: 'hsl(0 0% 11%)',    // #1c1c1c
+      bgTertiary: 'hsl(0 0% 7%)',    // #121212
       textPrimary: 'hsl(0 0% 98%)',   // #fafafa
       textSecondary: 'hsl(0 0% 63.9%)', // #a3a3a3
       textMuted: 'hsl(0 0% 55%)',       // #8c8c8c
@@ -173,6 +173,10 @@ export const themeDefaults: ITheme = {
   },
 };
 
+// Shorthand aliases for CSS template usage
+const l = themeDefaults.colors.light;
+const d = themeDefaults.colors.dark;
+
 // ============================================
 // CSS Block for Component Import
 // ============================================
@@ -198,50 +202,91 @@ export const themeDefaults: ITheme = {
 export const themeDefaultStyles: CSSResult = css`
   :host {
     /* ========================================
-     * Colors — Background
+     * Colors — Background (from themeDefaults)
      * ======================================== */
-    --dees-color-bg-primary: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
+    --dees-color-bg-primary: ${cssManager.bdTheme(l.bgPrimary, d.bgPrimary)};
-    --dees-color-bg-secondary: ${cssManager.bdTheme('hsl(0 0% 98%)', 'hsl(0 0% 7%)')};
+    --dees-color-bg-secondary: ${cssManager.bdTheme(l.bgSecondary, d.bgSecondary)};
-    --dees-color-bg-tertiary: ${cssManager.bdTheme('hsl(0 0% 96%)', 'hsl(0 0% 11%)')};
+    --dees-color-bg-tertiary: ${cssManager.bdTheme(l.bgTertiary, d.bgTertiary)};
 
     /* ========================================
-     * Colors — Text
+     * Colors — Text (from themeDefaults)
      * ======================================== */
-    --dees-color-text-primary: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+    --dees-color-text-primary: ${cssManager.bdTheme(l.textPrimary, d.textPrimary)};
-    --dees-color-text-secondary: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+    --dees-color-text-secondary: ${cssManager.bdTheme(l.textSecondary, d.textSecondary)};
-    --dees-color-text-muted: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
+    --dees-color-text-muted: ${cssManager.bdTheme(l.textMuted, d.textMuted)};
 
     /* ========================================
-     * Colors — Border
+     * Colors — Border (from themeDefaults)
      * ======================================== */
-    --dees-color-border-default: ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+    --dees-color-border-default: ${cssManager.bdTheme(l.borderDefault, d.borderDefault)};
-    --dees-color-border-subtle: ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 11%)')};
+    --dees-color-border-subtle: ${cssManager.bdTheme(l.borderSubtle, d.borderSubtle)};
-    --dees-color-border-strong: ${cssManager.bdTheme('hsl(0 0% 80%)', 'hsl(0 0% 20%)')};
+    --dees-color-border-strong: ${cssManager.bdTheme(l.borderStrong, d.borderStrong)};
 
     /* ========================================
-     * Colors — Warm Text (stone/gold accents)
+     * Colors — Warm Text (from themeDefaults)
      * ======================================== */
-    --dees-color-text-warm: ${cssManager.bdTheme('#78716c', '#b5a99a')};
+    --dees-color-text-warm: ${cssManager.bdTheme(l.textWarm, d.textWarm)};
 
     /* ========================================
-     * Colors — Accent
+     * Colors — Accent (from themeDefaults)
      * ======================================== */
-    --dees-color-accent-primary: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
+    --dees-color-accent-primary: ${cssManager.bdTheme(l.accentPrimary, d.accentPrimary)};
-    --dees-color-accent-success: ${cssManager.bdTheme('#22c55e', '#22c55e')};
+    --dees-color-accent-success: ${cssManager.bdTheme(l.accentSuccess, d.accentSuccess)};
-    --dees-color-accent-warning: ${cssManager.bdTheme('#f59e0b', '#f59e0b')};
+    --dees-color-accent-warning: ${cssManager.bdTheme(l.accentWarning, d.accentWarning)};
-    --dees-color-accent-error: ${cssManager.bdTheme('#ef4444', '#ef4444')};
+    --dees-color-accent-error: ${cssManager.bdTheme(l.accentError, d.accentError)};
 
     /* ========================================
-     * Colors — Badge (semantic status pairs)
+     * Colors — Badge (from themeDefaults)
      * ======================================== */
-    --dees-color-badge-default-bg: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+    --dees-color-badge-default-bg: ${cssManager.bdTheme(l.badgeDefaultBg, d.badgeDefaultBg)};
-    --dees-color-badge-default-fg: ${cssManager.bdTheme('#3f3f46', '#a1a1aa')};
+    --dees-color-badge-default-fg: ${cssManager.bdTheme(l.badgeDefaultFg, d.badgeDefaultFg)};
-    --dees-color-badge-success-bg: ${cssManager.bdTheme('#dcfce7', '#14532d')};
+    --dees-color-badge-success-bg: ${cssManager.bdTheme(l.badgeSuccessBg, d.badgeSuccessBg)};
-    --dees-color-badge-success-fg: ${cssManager.bdTheme('#166534', '#4ade80')};
+    --dees-color-badge-success-fg: ${cssManager.bdTheme(l.badgeSuccessFg, d.badgeSuccessFg)};
-    --dees-color-badge-warning-bg: ${cssManager.bdTheme('#fef3c7', '#451a03')};
+    --dees-color-badge-warning-bg: ${cssManager.bdTheme(l.badgeWarningBg, d.badgeWarningBg)};
-    --dees-color-badge-warning-fg: ${cssManager.bdTheme('#92400e', '#fbbf24')};
+    --dees-color-badge-warning-fg: ${cssManager.bdTheme(l.badgeWarningFg, d.badgeWarningFg)};
-    --dees-color-badge-error-bg: ${cssManager.bdTheme('#fee2e2', '#450a0a')};
+    --dees-color-badge-error-bg: ${cssManager.bdTheme(l.badgeErrorBg, d.badgeErrorBg)};
-    --dees-color-badge-error-fg: ${cssManager.bdTheme('#991b1b', '#f87171')};
+    --dees-color-badge-error-fg: ${cssManager.bdTheme(l.badgeErrorFg, d.badgeErrorFg)};
+
+    /* ========================================
+     * Colors — Interactive States
+     * ======================================== */
+    --dees-color-hover: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.06)')};
+    --dees-color-active: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
+    --dees-color-pressed: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.12)')};
+
+    /* ========================================
+     * Colors — Focus Ring
+     * ======================================== */
+    --dees-color-focus-ring: ${cssManager.bdTheme('rgba(59, 130, 246, 0.4)', 'rgba(59, 130, 246, 0.4)')};
+
+    /* ========================================
+     * Colors — Tooltip (inverted contrast)
+     * ======================================== */
+    --dees-color-tooltip-bg: ${cssManager.bdTheme('#18181b', '#fafafa')};
+    --dees-color-tooltip-fg: ${cssManager.bdTheme('#fafafa', '#18181b')};
+
+    /* ========================================
+     * Colors — Link
+     * ======================================== */
+    --dees-color-link: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
+    --dees-color-link-hover: ${cssManager.bdTheme('#2563eb', '#93bbfd')};
+
+    /* ========================================
+     * Colors — Code
+     * ======================================== */
+    --dees-color-code-bg: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.1)')};
+    --dees-color-code-block-bg: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+
+    /* ========================================
+     * Colors — Selection
+     * ======================================== */
+    --dees-color-selection: ${cssManager.bdTheme('rgba(59, 130, 246, 0.2)', 'rgba(59, 130, 246, 0.3)')};
+
+    /* ========================================
+     * Colors — Scrollbar
+     * ======================================== */
+    --dees-color-scrollbar-thumb: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
+    --dees-color-scrollbar-thumb-hover: ${cssManager.bdTheme('rgba(0, 0, 0, 0.25)', 'rgba(255, 255, 255, 0.25)')};
 
     /* ========================================
      * Spacing Scale