v3.55.3

fix(theme): align component styles with shared theme CSS variables
v3.55.2
2026-04-04 10:50:19 +00:00 · 2026-04-04 10:50:19 +00:00 · 2026-04-04 09:42:44 +00:00 · 2026-04-04 09:42:44 +00:00 · 2026-04-04 09:37:06 +00:00 · 2026-04-04 09:37:06 +00:00
55 changed files with 986 additions and 605 deletions
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,77 @@
 # Changelog

+## 2026-04-04 - 3.55.3 - fix(theme)
+align component styles with shared theme CSS variables
+
+- replace hardcoded bdTheme color usages across chart, dataview, input, layout, modal, media, simple, and workspace components with shared --dees-* theme tokens
+- add themeDefaultStyles to components and style modules that were not yet inheriting the shared theme defaults
+- standardize hover, border, background, text, and scrollbar colors for more consistent theming across the catalog
+
+## 2026-04-04 - 3.55.2 - fix(dees-simple-appdash,dees-simple-login)
+migrate app dashboard and login styles to shared theme CSS variables
+
+- Replaces hardcoded bdTheme color values with --dees-* design tokens across dashboard and login components
+- Aligns backgrounds, borders, text, hover, active, and scrollbar colors with the shared theming system
+
+## 2026-04-04 - 3.55.1 - fix(appui)
+replace hardcoded app UI theme colors with shared dees CSS variables
+
+- Standardizes app UI component styling on shared --dees-* theme tokens across app bar, menus, tabs, main content, and bottom bar
+- Removes remaining hardcoded light/dark color values in favor of centralized background, border, text, badge, tooltip, scrollbar, and accent variables
+
+## 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
+
+- Replaces dees-tile-* media component exports and implementations with dees-thumbnail-* counterparts for audio, image, video, note, folder, and pdf previews.
+- Introduces a shared DeesThumbnailBase and shared thumbnail styles for consistent sizing, hover overlays, loading states, error states, and lazy-loading behavior.
+- Updates the media index to export the new thumbnail component modules.
+- Includes a small layout cleanup in dees-dataview-codebox by removing forced full-height and absolute grid positioning.
+
+## 2026-04-03 - 3.53.0 - feat(dees-pdf-viewer)
+add configurable sidebar position support
+
+- introduces a sidebarPosition property with left and right options
+- updates viewer layout and footer alignment when the sidebar is displayed on the right
+
+## 2026-04-03 - 3.52.5 - fix(dees-pdf-viewer)
+add top scroll offset when navigating to a page in the PDF viewer
+
+- Subtracts 16px from the calculated scroll target so the selected page is not flush against the top edge of the viewer.
+- Improves page navigation positioning in the dees-pdf-viewer component.
+
+## 2026-04-03 - 3.52.4 - fix(appui-maincontent)
+adjust main content background theme colors
+
+- Update the main content background from pure white/near-black to softer light and dark theme values.
+
+## 2026-04-03 - 3.52.3 - fix(input-richtext)
+resolve rich text editor initialization and layout issues by bundling Tiptap locally and anchoring editor containers
+
+- Switch Tiptap imports from CDN URLs to bundled npm packages to avoid duplicate ProseMirror instances
+- Update rich text, code, dataview, and terminal preview containers to use absolute inset positioning for stable full-size layouts
+- Trigger a component update after rich text editor initialization and improve ProseMirror wrapping behavior
+
+## 2026-04-03 - 3.52.2 - fix(chart-log, simple-appdash)
+align terminal and dashboard theming with brightness mode and improve app dashboard scroll presentation
+
+- Update dees-chart-log to refresh the terminal theme when goBright changes and derive dark mode directly from the brightness setting.
+- Refine dees-simple-appdash control bar colors, borders, and shadow gradients for better light and dark theme consistency.
+- Expand the app dashboard demo with recent activity content to showcase scrollable layout behavior.
+
+## 2026-04-03 - 3.52.1 - fix(dees-modal)
+refine modal styling, spacing, and animations for a cleaner overlay presentation
+
+- Adjust modal entrance and exit transitions with updated transform, opacity, and timing values
+- Refresh heading and action button styling with tighter spacing, smaller controls, and improved theme-aware colors
+- Update tile shadow, margins, and content scrollbar styling to improve modal visual polish and readability
+
 ## 2026-04-03 - 3.52.0 - feat(dees-chart-area)
 add full page toggle control for chart area

--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@design.estate/dees-catalog",
-  "version": "3.52.0",
+  "version": "3.55.3",
  "private": false,
  "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
  "main": "dist_ts_web/index.js",
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@design.estate/dees-catalog',
-  version: '3.52.0',
+  version: '3.55.3',
  description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }
--- a/ts_web/elements/00group-appui/dees-appui-appbar/styles.ts
+++ b/ts_web/elements/00group-appui/dees-appui-appbar/styles.ts
@@ -12,8 +12,8 @@ export const appuiAppbarStyles = [
        position: relative;
        width: 100%;
        height: var(--appbar-height);
-        border-bottom: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
-        background: ${cssManager.bdTheme('#ffffff', '#000000')};
+        border-bottom: 1px solid var(--dees-color-border-default);
+        background: var(--dees-color-bg-primary);
        color: ${cssManager.bdTheme('#00000080', '#ffffff80')};
        font-size: var(--appbar-font-size);
        display: grid;
@@ -78,8 +78,8 @@ export const appuiAppbarStyles = [
        top: 100%;
        left: 0;
        min-width: 200px;
-        background: ${cssManager.bdTheme('#ffffff', '#000000')};
-        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-default);
        border-radius: 4px;
        box-shadow: ${cssManager.bdTheme('0 4px 12px rgba(0, 0, 0, 0.15)', '0 4px 12px rgba(0, 0, 0, 0.3)')};
        margin-top: 4px;
@@ -112,7 +112,7 @@ export const appuiAppbarStyles = [

      .dropdown-divider {
        height: 1px;
-        background: ${cssManager.bdTheme('#e0e0e0', '#202020')};
+        background: var(--dees-color-border-default);
        margin: 4px 0;
      }

@@ -215,7 +215,7 @@ export const appuiAppbarStyles = [
        width: 8px;
        height: 8px;
        border-radius: 50%;
-        border: 2px solid ${cssManager.bdTheme('#ffffff', '#000000')};
+        border: 2px solid var(--dees-color-bg-primary);
      }

      .user-status.online {
--- a/ts_web/elements/00group-appui/dees-appui-bottombar/dees-appui-bottombar.ts
+++ b/ts_web/elements/00group-appui/dees-appui-bottombar/dees-appui-bottombar.ts
@@ -52,10 +52,10 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
        align-items: center;
        padding: 0 8px;
        gap: 4px;
-        background: ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(0 0% 6%)')};
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 15%)')};
+        background: var(--dees-color-bg-tertiary);
+        border-top: 1px solid var(--dees-color-border-default);
        font-size: 11px;
-        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
+        color: var(--dees-color-text-muted);
      }

      .widget {
@@ -70,8 +70,8 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
      }

      .widget:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 12%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-secondary);
      }

      .widget dees-icon {
@@ -81,7 +81,7 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
      .widget-separator {
        width: 1px;
        height: 14px;
-        background: ${cssManager.bdTheme('hsl(0 0% 80%)', 'hsl(0 0% 20%)')};
+        background: var(--dees-color-border-strong);
        margin: 0 4px;
      }

@@ -124,12 +124,12 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
        border-radius: 3px;
        cursor: pointer;
        transition: background 0.15s ease;
-        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
+        color: var(--dees-color-text-muted);
      }

      .action-button:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 12%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-secondary);
      }

      .action-button.disabled {
@@ -139,7 +139,7 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {

      .action-button.disabled:hover {
        background: transparent;
-        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
+        color: var(--dees-color-text-muted);
      }
    `,
  ];
--- a/ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts
+++ b/ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts
@@ -63,14 +63,13 @@ export class DeesAppuiMaincontent extends DeesElement {
    themeDefaultStyles,
    cssManager.defaultStyles,
    css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
-        color: ${cssManager.bdTheme('#333', '#fff')};
+        color: var(--dees-color-text-secondary);
        display: grid;
        grid-template-rows: auto 1fr;
        width: 100%;
        height: 100%;
-        background: ${cssManager.bdTheme('#ffffff', '#161616')};
+        background: var(--dees-color-bg-secondary);
      }

      .maincontainer {
--- a/ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts
+++ b/ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts
@@ -55,28 +55,27 @@ export class DeesAppuiMainmenu extends DeesElement {
    themeDefaultStyles,
    cssManager.defaultStyles,
    css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        --menu-width-expanded: 200px;
        --menu-width-collapsed: 56px;
-        --tooltip-bg: ${cssManager.bdTheme('#18181b', '#fafafa')};
-        --tooltip-fg: ${cssManager.bdTheme('#fafafa', '#18181b')};
+        --tooltip-bg: var(--dees-color-tooltip-bg);
+        --tooltip-fg: var(--dees-color-tooltip-fg);
        position: relative;
        display: block;
        height: 100%;
      }

      .mainContainer {
-        color: ${cssManager.bdTheme('#666', '#ccc')};
+        color: var(--dees-color-text-secondary);
        z-index: ${zIndexLayers.fixed.appBar};
        display: flex;
        flex-direction: column;
        position: relative;
        width: var(--menu-width-expanded);
        height: 100%;
-        background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
+        background: var(--dees-color-bg-secondary);
        user-select: none;
-        border-right: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
+        border-right: 1px solid var(--dees-color-border-subtle);
        font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        transition: width 0.25s ease;
      }
@@ -94,23 +93,23 @@ export class DeesAppuiMainmenu extends DeesElement {
        width: 24px;
        height: 24px;
        border-radius: 50%;
-        background: ${cssManager.bdTheme('#ffffff', '#27272a')};
-        border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#3f3f46')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-strong);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
-        color: ${cssManager.bdTheme('#737373', '#a1a1aa')};
+        color: var(--dees-color-text-muted);
        opacity: 0;
        transition: opacity 0.2s ease, background 0.15s ease;
        padding: 0;
      }

      .collapse-toggle:hover {
-        background: ${cssManager.bdTheme('#f4f4f5', '#3f3f46')};
-        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        background: var(--dees-color-bg-tertiary);
+        color: var(--dees-color-text-primary);
      }

      :host(:hover) .collapse-toggle {
@@ -128,14 +127,14 @@ export class DeesAppuiMainmenu extends DeesElement {
        gap: 10px;
        height: 48px;
        padding: 0 14px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
+        border-bottom: 1px solid var(--dees-color-border-subtle);
        flex-shrink: 0;
        box-sizing: border-box;
      }

      .logoSection .logoIcon {
        font-size: 22px;
-        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        color: var(--dees-color-text-primary);
        flex-shrink: 0;
      }

@@ -143,7 +142,7 @@ export class DeesAppuiMainmenu extends DeesElement {
        flex: 1;
        font-size: 15px;
        font-weight: 600;
-        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        color: var(--dees-color-text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
@@ -178,12 +177,12 @@ export class DeesAppuiMainmenu extends DeesElement {
      }

      .menuSection::-webkit-scrollbar-thumb {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
+        background: var(--dees-color-scrollbar-thumb);
        border-radius: 3px;
      }

      .menuSection::-webkit-scrollbar-thumb:hover {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.25)', 'rgba(255, 255, 255, 0.25)')};
+        background: var(--dees-color-scrollbar-thumb-hover);
      }

      /* Menu Group */
@@ -200,7 +199,7 @@ export class DeesAppuiMainmenu extends DeesElement {
        padding: 8px 12px 6px;
        font-size: 11px;
        font-weight: 600;
-        color: ${cssManager.bdTheme('#737373', '#737373')};
+        color: var(--dees-color-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
@@ -238,21 +237,21 @@ export class DeesAppuiMainmenu extends DeesElement {
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.15s ease;
-        color: ${cssManager.bdTheme('#525252', '#a3a3a3')};
+        color: var(--dees-color-text-secondary);
      }

      .tab:hover {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.06)')};
+        background: var(--dees-color-hover);
        color: ${cssManager.bdTheme('#262626', '#e5e5e5')};
      }

      .tab:active {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
+        background: var(--dees-color-active);
      }

      .tab.selectedTab {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
-        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        background: var(--dees-color-active);
+        color: var(--dees-color-text-primary);
      }

      .tab.selectedTab::before {
@@ -263,7 +262,7 @@ export class DeesAppuiMainmenu extends DeesElement {
        transform: translateY(-50%);
        width: 3px;
        height: 16px;
-        background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        background: var(--dees-color-text-primary);
        border-radius: 0 2px 2px 0;
      }

@@ -353,23 +352,23 @@ export class DeesAppuiMainmenu extends DeesElement {
      }

      .badge.default {
-        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
-        color: ${cssManager.bdTheme('#3f3f46', '#a1a1aa')};
+        background: var(--dees-color-badge-default-bg);
+        color: var(--dees-color-badge-default-fg);
      }

      .badge.success {
-        background: ${cssManager.bdTheme('#dcfce7', '#14532d')};
-        color: ${cssManager.bdTheme('#166534', '#4ade80')};
+        background: var(--dees-color-badge-success-bg);
+        color: var(--dees-color-badge-success-fg);
      }

      .badge.warning {
-        background: ${cssManager.bdTheme('#fef3c7', '#451a03')};
-        color: ${cssManager.bdTheme('#92400e', '#fbbf24')};
+        background: var(--dees-color-badge-warning-bg);
+        color: var(--dees-color-badge-warning-fg);
      }

      .badge.error {
-        background: ${cssManager.bdTheme('#fee2e2', '#450a0a')};
-        color: ${cssManager.bdTheme('#991b1b', '#f87171')};
+        background: var(--dees-color-badge-error-bg);
+        color: var(--dees-color-badge-error-fg);
      }

      :host([collapsed]) .badge {
@@ -380,7 +379,7 @@ export class DeesAppuiMainmenu extends DeesElement {
      .bottomSection {
        flex-shrink: 0;
        padding: 8px;
-        border-top: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
+        border-top: 1px solid var(--dees-color-border-subtle);
        display: flex;
        flex-direction: column;
        gap: 2px;
--- a/ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts
+++ b/ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts
@@ -73,30 +73,29 @@ export class DeesAppuiSecondarymenu extends DeesElement {
    themeDefaultStyles,
    cssManager.defaultStyles,
    css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        --sidebar-width-expanded: 240px;
        --sidebar-width-collapsed: 56px;
-        --sidebar-bg: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
-        --sidebar-fg: ${cssManager.bdTheme('#525252', '#a3a3a3')};
-        --sidebar-fg-muted: ${cssManager.bdTheme('#737373', '#737373')};
-        --sidebar-fg-active: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
-        --sidebar-border: ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
-        --sidebar-hover: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.06)')};
-        --sidebar-active: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
-        --sidebar-accent: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
-        --tooltip-bg: ${cssManager.bdTheme('#18181b', '#fafafa')};
-        --tooltip-fg: ${cssManager.bdTheme('#fafafa', '#18181b')};
+        --sidebar-bg: var(--dees-color-bg-secondary);
+        --sidebar-fg: var(--dees-color-text-secondary);
+        --sidebar-fg-muted: var(--dees-color-text-muted);
+        --sidebar-fg-active: var(--dees-color-text-primary);
+        --sidebar-border: var(--dees-color-border-subtle);
+        --sidebar-hover: var(--dees-color-hover);
+        --sidebar-active: var(--dees-color-active);
+        --sidebar-accent: var(--dees-color-text-primary);
+        --tooltip-bg: var(--dees-color-tooltip-bg);
+        --tooltip-fg: var(--dees-color-tooltip-fg);

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

        /* Action colors */
        --action-primary: ${cssManager.bdTheme('#2563eb', '#3b82f6')};
@@ -136,23 +135,23 @@ export class DeesAppuiSecondarymenu extends DeesElement {
        width: 24px;
        height: 24px;
        border-radius: 50%;
-        background: ${cssManager.bdTheme('#ffffff', '#27272a')};
-        border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#3f3f46')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-strong);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
-        color: ${cssManager.bdTheme('#737373', '#a1a1aa')};
+        color: var(--dees-color-text-muted);
        opacity: 0;
        transition: opacity 0.2s ease, background 0.15s ease;
        padding: 0;
      }

      .collapse-toggle:hover {
-        background: ${cssManager.bdTheme('#f4f4f5', '#3f3f46')};
-        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        background: var(--dees-color-bg-tertiary);
+        color: var(--dees-color-text-primary);
      }

      :host(:hover) .collapse-toggle {
@@ -215,12 +214,12 @@ export class DeesAppuiSecondarymenu extends DeesElement {
      }

      .menuSection::-webkit-scrollbar-thumb {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
+        background: var(--dees-color-scrollbar-thumb);
        border-radius: 3px;
      }

      .menuSection::-webkit-scrollbar-thumb:hover {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.25)', 'rgba(255, 255, 255, 0.25)')};
+        background: var(--dees-color-scrollbar-thumb-hover);
      }

      /* Menu Group */
@@ -261,7 +260,7 @@ export class DeesAppuiSecondarymenu extends DeesElement {
        gap: 8px;
        font-size: 11px;
        font-weight: 600;
-        color: ${cssManager.bdTheme('#78716c', '#b5a99a')};
+        color: var(--dees-color-text-warm);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
@@ -270,13 +269,13 @@ export class DeesAppuiSecondarymenu extends DeesElement {

      .groupHeader .groupTitle dees-icon {
        font-size: 16px;
-        color: ${cssManager.bdTheme('#78716c', '#b5a99a')};
+        color: var(--dees-color-text-warm);
      }

      .groupHeader .chevron {
        font-size: 12px;
        transition: transform 0.2s ease;
-        color: ${cssManager.bdTheme('#78716c', '#b5a99a')};
+        color: var(--dees-color-text-warm);
      }

      .groupHeader.collapsed .chevron {
--- a/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts
+++ b/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts
@@ -60,7 +60,6 @@ export class DeesAppuiTabs extends DeesElement {
    themeDefaultStyles,
    cssManager.defaultStyles,
    css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        display: block;
        position: relative;
@@ -76,7 +75,7 @@ export class DeesAppuiTabs extends DeesElement {

      .tabs-wrapper.horizontal-wrapper {
        height: 48px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        border-bottom: 1px solid var(--dees-color-border-default);
        box-sizing: border-box;
        overflow: hidden;
        display: flex;
@@ -133,13 +132,13 @@ export class DeesAppuiTabs extends DeesElement {
      .tab-actions.left {
        padding-left: 12px;
        padding-right: 8px;
-        border-right: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        border-right: 1px solid var(--dees-color-border-default);
      }

      .tab-actions.right {
        padding-right: 12px;
        padding-left: 8px;
-        border-left: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        border-left: 1px solid var(--dees-color-border-default);
      }

      .tab-action-button {
@@ -152,17 +151,17 @@ export class DeesAppuiTabs extends DeesElement {
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease;
        background: transparent;
-        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        color: var(--dees-color-text-muted);
        flex-shrink: 0;
      }

      .tab-action-button:hover {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.06)')};
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        background: var(--dees-color-active);
+        color: var(--dees-color-text-primary);
      }

      .tab-action-button:active {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+        background: var(--dees-color-pressed);
      }

      .tab-action-button.disabled {
@@ -172,7 +171,7 @@ export class DeesAppuiTabs extends DeesElement {

      .tab-action-button.disabled:hover {
        background: transparent;
-        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        color: var(--dees-color-text-muted);
      }

      .tab-action-button dees-icon {
@@ -237,12 +236,12 @@ export class DeesAppuiTabs extends DeesElement {
        font-size: 14px;
        gap: 2px;
        position: relative;
-        background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
+        background: var(--dees-color-bg-tertiary);
        border-radius: 8px;
      }

      .tab {
-        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        color: var(--dees-color-text-muted);
        white-space: nowrap;
        cursor: pointer;
        transition: color 0.15s ease;
@@ -270,7 +269,7 @@ export class DeesAppuiTabs extends DeesElement {
        transform: translateY(-50%);
        height: 20px;
        width: 1px;
-        background: ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        background: var(--dees-color-border-default);
        opacity: 0.5;
      }
      
@@ -291,11 +290,11 @@ export class DeesAppuiTabs extends DeesElement {
      }

      .tab:hover {
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        color: var(--dees-color-text-primary);
      }
      
      .horizontal .tab:hover {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(255, 255, 255, 0.03)')};
+        background: var(--dees-color-hover);
      }
      
      .horizontal .tab:hover::after,
@@ -308,7 +307,7 @@ export class DeesAppuiTabs extends DeesElement {
      }

      .horizontal .tab.selectedTab {
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        color: var(--dees-color-text-primary);
      }
      
      .horizontal .tab.selectedTab::after,
@@ -317,7 +316,7 @@ export class DeesAppuiTabs extends DeesElement {
      }

      .vertical .tab.selectedTab {
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        color: var(--dees-color-text-primary);
      }

      .tab dees-icon {
@@ -337,7 +336,7 @@ export class DeesAppuiTabs extends DeesElement {
      .tabs-wrapper .tabIndicator {
        height: 3px;
        bottom: 0;
-        background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
+        background: var(--dees-color-accent-primary);
        border-radius: 3px 3px 0 0;
        z-index: 3;
      }
@@ -350,7 +349,7 @@ export class DeesAppuiTabs extends DeesElement {
        left: 8px;
        right: 8px;
        border-radius: 6px;
-        background: ${cssManager.bdTheme('#ffffff', '#27272a')};
+        background: var(--dees-color-bg-primary);
        z-index: 1;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
      }
@@ -366,7 +365,7 @@ export class DeesAppuiTabs extends DeesElement {
        margin-left: 8px;
        opacity: 0.4;
        transition: opacity 0.15s, background 0.15s;
-        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        color: var(--dees-color-text-muted);
      }

      .tab:hover .tab-close {
@@ -375,8 +374,8 @@ export class DeesAppuiTabs extends DeesElement {

      .tab-close:hover {
        opacity: 1;
-        background: ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(255,255,255,0.1)')};
-        color: ${cssManager.bdTheme('#ef4444', '#f87171')};
+        background: var(--dees-color-pressed);
+        color: var(--dees-color-accent-error);
      }

      .tab.selectedTab .tab-close {
--- a/ts_web/elements/00group-appui/dees-appui/dees-appui.ts
+++ b/ts_web/elements/00group-appui/dees-appui/dees-appui.ts
@@ -184,12 +184,11 @@ export class DeesAppui extends DeesElement {
    themeDefaultStyles,
    cssManager.defaultStyles,
    css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        position: absolute;
        height: 100%;
        width: 100%;
-        background: ${cssManager.bdTheme('#f0f0f0', '#1a1a1a')};
+        background: var(--dees-color-bg-tertiary);
      }
      .maingrid {
        position: absolute;
--- a/ts_web/elements/00group-chart/dees-chart-area/styles.ts
+++ b/ts_web/elements/00group-chart/dees-chart-area/styles.ts
@@ -1,13 +1,15 @@
 import { css, cssManager } from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';

 export const chartAreaStyles = [
+    themeDefaultStyles,
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        height: 400px;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        color: var(--dees-color-text-primary);
        font-size: 14px;
      }
      dees-tile {
@@ -24,7 +26,7 @@ export const chartAreaStyles = [
        font-size: 14px;
        font-weight: 500;
        letter-spacing: -0.01em;
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-secondary);
      }
      .expandBtn {
        display: flex;
@@ -36,13 +38,13 @@ export const chartAreaStyles = [
        border-radius: 4px;
        background: transparent;
        cursor: pointer;
-        color: ${cssManager.bdTheme('hsl(0 0% 55%)', 'hsl(0 0% 45%)')};
+        color: var(--dees-color-text-muted);
        transition: all 0.15s ease;
        padding: 0;
      }
      .expandBtn:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 12%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-secondary);
      }
      .chartContainer {
        position: absolute;
@@ -64,7 +66,7 @@ export const chartAreaStyles = [
      }
      .statsSeries + .statsSeries {
        padding-left: 24px;
-        border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-left: 1px solid var(--dees-color-border-default);
      }
      .statsColor {
        width: 8px;
@@ -75,15 +77,15 @@ export const chartAreaStyles = [
      .statsName {
        font-weight: 500;
        font-size: 11px;
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
+        color: var(--dees-color-text-secondary);
        margin-right: 4px;
      }
      .statsItem {
        font-size: 11px;
-        color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
+        color: var(--dees-color-text-muted);
      }
      .statsItem strong {
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
+        color: var(--dees-color-text-primary);
      }
      .lw-tooltip {
        position: absolute;
--- a/ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.ts
+++ b/ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.ts
@@ -106,7 +106,7 @@ export class DeesChartLog extends DeesElement {
        display: block;
        height: 400px;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        color: var(--dees-color-text-primary);
      }

      dees-tile {
@@ -124,7 +124,7 @@ export class DeesChartLog extends DeesElement {
      .title {
        font-weight: 500;
        font-size: 14px;
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        color: var(--dees-color-text-primary);
        white-space: nowrap;
      }

@@ -141,10 +141,10 @@ export class DeesChartLog extends DeesElement {
        flex: 1;
        padding: 4px 8px;
        font-size: 12px;
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid var(--dees-color-border-default);
        border-radius: 4px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        background: var(--dees-color-bg-primary);
+        color: var(--dees-color-text-primary);
        outline: none;
      }

@@ -153,7 +153,7 @@ export class DeesChartLog extends DeesElement {
      }

      .search-box input::placeholder {
-        color: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')};
+        color: var(--dees-color-text-muted);
      }

      .search-nav {
@@ -164,35 +164,35 @@ export class DeesChartLog extends DeesElement {
      .search-nav button {
        padding: 4px 6px;
        font-size: 11px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 14.9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-default);
        border-radius: 3px;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
        cursor: pointer;
        line-height: 1;
      }

      .search-nav button:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 20%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
      }

      .filter-toggle {
        padding: 4px 8px;
        font-size: 11px;
        font-weight: 500;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 14.9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-default);
        border-radius: 4px;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
        cursor: pointer;
        transition: all 0.15s;
        white-space: nowrap;
      }

      .filter-toggle:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 20%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
      }

      .filter-toggle.active {
@@ -208,11 +208,11 @@ export class DeesChartLog extends DeesElement {
      }

      .control-button {
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 14.9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-default);
        border-radius: 4px;
        padding: 4px 10px;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
        cursor: pointer;
        font-size: 12px;
        font-weight: 500;
@@ -220,9 +220,9 @@ export class DeesChartLog extends DeesElement {
      }

      .control-button:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 20%)')};
-        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 25%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+        background: var(--dees-color-hover);
+        border-color: var(--dees-color-border-strong);
+        color: var(--dees-color-text-primary);
      }

      .control-button.active {
@@ -247,7 +247,7 @@ export class DeesChartLog extends DeesElement {
        align-items: center;
        justify-content: center;
        height: 100%;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
        font-style: italic;
        font-size: 13px;
      }
@@ -299,7 +299,7 @@ export class DeesChartLog extends DeesElement {

      .metric.rate {
        margin-left: auto;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
      }

      .metric.rate::before {
@@ -458,6 +458,9 @@ export class DeesChartLog extends DeesElement {

  public updated(changedProperties: Map<string, any>) {
    super.updated(changedProperties);
+    if (changedProperties.has('goBright') && this.terminal) {
+      this.terminal.options.theme = this.getTerminalTheme();
+    }
    if (changedProperties.has('logEntries') && this.terminalReady && this.logEntries.length > 0) {
      const oldEntries: ILogEntry[] = changedProperties.get('logEntries') || [];
      const newEntries = this.logEntries;
@@ -504,7 +507,7 @@ export class DeesChartLog extends DeesElement {
  }

  private getTerminalTheme() {
-    const isDark = this.domtoolsInstance?.themeManager?.isDarkMode ?? true;
+    const isDark = !this.goBright;
    return isDark
      ? {
          background: '#0a0a0a',
--- a/ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts
+++ b/ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts
@@ -2,6 +2,7 @@ import { demoFunc } from './dees-dataview-codebox.demo.js';
 import {
  DeesElement,
  html,
+  css,
  customElement,
  type TemplateResult,
  property,
@@ -9,6 +10,7 @@ import {
  cssManager,
 } from '@design.estate/dees-element';
 import { cssGeistFontFamily, cssMonoFontFamily } from '../../00fonts.js';
+import { themeDefaultStyles } from '../../00theme.js';

 import type { HLJSApi } from 'highlight.js';

@@ -39,6 +41,11 @@ export class DeesDataviewCodebox extends DeesElement {
  })
  accessor codeToDisplay: string = '';

+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+  ];
+
  constructor() {
    super();
  }
@@ -53,16 +60,14 @@ export class DeesDataviewCodebox extends DeesElement {
          text-align: left;
          font-size: 16px;
          font-family: ${cssGeistFontFamily};
-          height: 100%;
          box-sizing: border-box;
        }
        dees-tile {
-          height: 100%;
-          color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+          color: var(--dees-color-text-primary);
        }

        .appbar {
-          color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+          color: var(--dees-color-text-muted);
          height: 32px;
          display: flex;
          font-size: 13px;
@@ -80,7 +85,7 @@ export class DeesDataviewCodebox extends DeesElement {
        }

        .bottomBar {
-          color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+          color: var(--dees-color-text-muted);
          height: 28px;
          font-size: 11px;
          line-height: 28px;
@@ -117,15 +122,13 @@ export class DeesDataviewCodebox extends DeesElement {
          display: grid;
          grid-template-columns: 50px auto;
          overflow: auto;
-          flex: 1;
-          min-height: 0;
        }

        .lineNumbers {
-          color: ${cssManager.bdTheme('#71717a', '#52525b')};
+          color: var(--dees-color-text-muted);
          padding: 24px 16px 0px 0px;
          text-align: right;
-          border-right: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+          border-right: 1px solid var(--dees-color-border-default);
        }

        .lineCounter:last-child {
--- a/ts_web/elements/00group-dataview/dees-dataview-statusobject/dees-dataview-statusobject.ts
+++ b/ts_web/elements/00group-dataview/dees-dataview-statusobject/dees-dataview-statusobject.ts
@@ -42,7 +42,7 @@ export class DeesDataviewStatusobject extends DeesElement {
      }

      dees-tile {
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
+        color: var(--dees-color-text-primary);
        cursor: default;
      }

@@ -61,7 +61,7 @@ export class DeesDataviewStatusobject extends DeesElement {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: -0.01em;
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-secondary);
        flex: 1;
      }

@@ -78,21 +78,21 @@ export class DeesDataviewStatusobject extends DeesElement {
      .copyMain {
        font-size: 11px;
        font-weight: 500;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 14.9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-default);
        text-align: center;
        padding: 4px 10px;
        border-radius: 4px;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
        user-select: none;
        cursor: pointer;
        transition: all 0.15s ease;
      }

      .copyMain:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
-        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+        background: var(--dees-color-hover);
+        border-color: var(--dees-color-border-strong);
+        color: var(--dees-color-text-primary);
      }

      .copyMain:active {
@@ -121,7 +121,7 @@ export class DeesDataviewStatusobject extends DeesElement {
        gap: 10px;
        height: 36px;
        padding: 0 16px;
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 10%)')};
+        border-bottom: 1px solid var(--dees-color-border-subtle);
        transition: background-color 0.15s ease;
        cursor: context-menu;
      }
@@ -149,7 +149,7 @@ export class DeesDataviewStatusobject extends DeesElement {
      .detail .detailsText .label {
        font-size: 12px;
        font-weight: 500;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
        letter-spacing: -0.01em;
        white-space: nowrap;
        flex-shrink: 0;
@@ -167,7 +167,7 @@ export class DeesDataviewStatusobject extends DeesElement {
      }

      .bottomBar {
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
        height: 28px;
        font-size: 11px;
        line-height: 28px;
--- a/ts_web/elements/00group-dataview/dees-statsgrid/dees-statsgrid.ts
+++ b/ts_web/elements/00group-dataview/dees-statsgrid/dees-statsgrid.ts
@@ -160,7 +160,7 @@ export class DeesStatsGrid extends DeesElement {
      .grid-title {
        font-size: 16px;
        font-weight: 500;
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        color: var(--dees-color-text-primary);
        letter-spacing: -0.01em;
      }

@@ -186,7 +186,7 @@ export class DeesStatsGrid extends DeesElement {
      }

      .stats-tile:hover::part(outer) {
-        border-color: ${cssManager.bdTheme('#d0d0d0', '#2a2a2a')};
+        border-color: var(--dees-color-border-strong);
      }

      .stats-tile.clickable {
--- a/ts_web/elements/00group-dataview/dees-table/styles.ts
+++ b/ts_web/elements/00group-dataview/dees-table/styles.ts
@@ -13,7 +13,7 @@ export const tableStyles: CSSResult[] = [
      }

      dees-tile {
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        color: var(--dees-color-text-primary);
        font-family: ${cssGeistFontFamily};
        font-weight: 400;
        font-size: 14px;
@@ -41,7 +41,7 @@ export const tableStyles: CSSResult[] = [
      .heading1 {
        font-size: 14px;
        font-weight: 500;
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-secondary);
        letter-spacing: -0.01em;
      }

@@ -69,18 +69,18 @@ export const tableStyles: CSSResult[] = [
        padding: 4px 10px;
        font-size: 12px;
        font-weight: 500;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
        background: transparent;
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid var(--dees-color-border-default);
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.15s ease;
      }

      .headerAction:hover {
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
-        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
+        color: var(--dees-color-text-primary);
+        background: var(--dees-color-hover);
+        border-color: var(--dees-color-border-strong);
      }

      .headerAction dees-icon {
@@ -93,8 +93,8 @@ export const tableStyles: CSSResult[] = [
        grid-gap: 16px;
        grid-template-columns: 1fr max-content;
        padding: 16px 24px;
-        background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(0 0% 3.9%)')};
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        background: var(--dees-color-bg-secondary);
+        border-bottom: 1px solid var(--dees-color-border-default);
        transition: all 0.2s ease;
      }

@@ -157,7 +157,7 @@ export const tableStyles: CSSResult[] = [
      
      thead {
        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 9%)')};
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
+        border-bottom: 1px solid var(--dees-color-border-strong);
      }
      :host([sticky-header]) thead th {
        position: sticky;
@@ -172,7 +172,7 @@ export const tableStyles: CSSResult[] = [
      
      /* Default horizontal lines (bottom border only) */
      tbody tr {
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-bottom: 1px solid var(--dees-color-border-default);
      }
      
      tbody tr:last-child {
@@ -181,8 +181,8 @@ export const tableStyles: CSSResult[] = [
      
      /* Full horizontal lines when enabled */
      :host([show-horizontal-lines]) tbody tr {
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-top: 1px solid var(--dees-color-border-default);
+        border-bottom: 1px solid var(--dees-color-border-default);
      }
      
      :host([show-horizontal-lines]) tbody tr:first-child {
@@ -190,7 +190,7 @@ export const tableStyles: CSSResult[] = [
      }
      
      :host([show-horizontal-lines]) tbody tr:last-child {
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-bottom: 1px solid var(--dees-color-border-default);
      }
      
      tbody tr:hover {
@@ -222,13 +222,13 @@ export const tableStyles: CSSResult[] = [
      
      /* Grid mode - shows both vertical and horizontal lines */
      :host([show-grid]) th {
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid var(--dees-color-border-default);
        border-left: none;
        border-top: none;
      }
      
      :host([show-grid]) td {
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid var(--dees-color-border-default);
        border-left: none;
        border-top: none;
      }
@@ -251,12 +251,12 @@ export const tableStyles: CSSResult[] = [
      tbody td.actionsCol {
        position: sticky;
        right: 0;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
+        background: var(--dees-color-bg-primary);
      }
      thead th.actionsCol { z-index: 3; }
      tbody td.actionsCol {
        z-index: 1;
-        box-shadow: -1px 0 0 0 ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        box-shadow: -1px 0 0 0 var(--dees-color-border-default);
      }
      
      tbody tr.selected {
@@ -278,18 +278,18 @@ export const tableStyles: CSSResult[] = [
      }
      
      :host([show-vertical-lines]) th {
-        border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-right: 1px solid var(--dees-color-border-default);
      }
      
      td {
        padding: 8px 16px;
        vertical-align: middle;
        font-size: 13px;
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        color: var(--dees-color-text-primary);
      }
      
      :host([show-vertical-lines]) td {
-        border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-right: 1px solid var(--dees-color-border-default);
      }
      
      th:first-child,
@@ -327,10 +327,10 @@ export const tableStyles: CSSResult[] = [
        height: calc(100% - 8px);
        padding: 0 12px;
        outline: none;
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid var(--dees-color-border-default);
        border-radius: 6px;
        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        color: var(--dees-color-text-primary);
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
@@ -355,9 +355,9 @@ export const tableStyles: CSSResult[] = [
        padding: 6px 8px;
        font-size: 13px;
        border-radius: 6px;
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid var(--dees-color-border-default);
        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        color: var(--dees-color-text-primary);
      }
      .actionsContainer {
        display: flex;
@@ -398,7 +398,7 @@ export const tableStyles: CSSResult[] = [
        height: 32px;
        padding: 0 16px;
        font-size: 11px;
-        color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
+        color: var(--dees-color-text-muted);
        width: 100%;
        box-sizing: border-box;
      }
--- a/ts_web/elements/00group-input/dees-input-code/dees-input-code.ts
+++ b/ts_web/elements/00group-input/dees-input-code/dees-input-code.ts
@@ -142,16 +142,16 @@ export class DeesInputCode extends DeesInputBase<string> {
        padding: 4px 10px;
        font-size: 12px;
        font-weight: 500;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 12%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 20%)')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-default);
        border-radius: 4px;
        cursor: pointer;
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+        color: var(--dees-color-text-secondary);
        transition: all 0.15s ease;
      }

      .language-button:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 15%)')};
+        background: var(--dees-color-hover);
      }

      .language-dropdown {
@@ -159,8 +159,8 @@ export class DeesInputCode extends DeesInputBase<string> {
        top: 100%;
        left: 0;
        margin-top: 4px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 20%)')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-default);
        border-radius: 6px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 100;
@@ -173,16 +173,16 @@ export class DeesInputCode extends DeesInputBase<string> {
        padding: 8px 12px;
        font-size: 12px;
        cursor: pointer;
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+        color: var(--dees-color-text-secondary);
        transition: background 0.15s ease;
      }

      .language-option:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 15%)')};
+        background: var(--dees-color-hover);
      }

      .language-option.selected {
-        background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 20%)')};
+        background: var(--dees-color-active);
      }

      .toolbar-button {
@@ -195,18 +195,18 @@ export class DeesInputCode extends DeesInputBase<string> {
        border: none;
        border-radius: 4px;
        cursor: pointer;
-        color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 60%)')};
+        color: var(--dees-color-text-muted);
        transition: all 0.15s ease;
      }

      .toolbar-button:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 15%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-secondary);
      }

      .toolbar-button.active {
-        background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+        background: var(--dees-color-active);
+        color: var(--dees-color-text-secondary);
      }

      .toolbar-button.success {
@@ -214,9 +214,8 @@ export class DeesInputCode extends DeesInputBase<string> {
      }

      .editor-wrapper {
-        position: relative;
-        flex: 1;
-        min-height: 0;
+        position: absolute;
+        inset: 0;
      }

      dees-workspace-monaco {
@@ -227,7 +226,7 @@ export class DeesInputCode extends DeesInputBase<string> {
      .toolbar-divider {
        width: 1px;
        height: 20px;
-        background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')};
+        background: var(--dees-color-border-default);
        margin: 0 4px;
      }

--- a/ts_web/elements/00group-input/dees-input-richtext/component.ts
+++ b/ts_web/elements/00group-input/dees-input-richtext/component.ts
@@ -239,6 +239,7 @@ export class DeesInputRichtext extends DeesInputBase<string> {
    this.editorElement = this.shadowRoot!.querySelector('.editor-content')!;
    this.linkInputElement = this.shadowRoot!.querySelector('.link-input input')!;
    this.initializeEditor();
+    this.requestUpdate();
  }

  private initializeEditor(): void {
--- a/ts_web/elements/00group-input/dees-input-richtext/styles.ts
+++ b/ts_web/elements/00group-input/dees-input-richtext/styles.ts
@@ -1,7 +1,9 @@
 import { css, cssManager } from '@design.estate/dees-element';
 import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
+import { themeDefaultStyles } from '../../00theme.js';

 export const richtextStyles = [
+    themeDefaultStyles,
    ...DeesInputBase.baseStyles,
    cssManager.defaultStyles,
    css`
@@ -20,7 +22,7 @@ export const richtextStyles = [
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: 500;
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+        color: var(--dees-color-text-primary);
      }

      dees-tile {
@@ -28,7 +30,7 @@ export const richtextStyles = [
      }

      dees-tile:hover::part(outer) {
-        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
+        border-color: var(--dees-color-border-strong);
      }

      dees-tile.focused::part(outer) {
@@ -68,8 +70,8 @@ export const richtextStyles = [
      }

      .toolbar-button:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
      }

      .toolbar-button.active {
@@ -85,22 +87,24 @@ export const richtextStyles = [
      .toolbar-divider {
        width: 1px;
        height: 24px;
-        background: ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        background: var(--dees-color-border-default);
        margin: 0 4px;
      }

      .editor-content {
-        flex: 1;
+        position: absolute;
+        inset: 0;
        padding: 16px;
        overflow-y: auto;
-        min-height: var(--min-height, 200px);
      }

      .editor-content .ProseMirror {
        outline: none;
        line-height: 1.6;
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        color: var(--dees-color-text-primary);
        min-height: 100%;
+        white-space: pre-wrap;
+        word-wrap: break-word;
      }

      .editor-content .ProseMirror p {
@@ -147,7 +151,7 @@ export const richtextStyles = [
      }

      .editor-content .ProseMirror blockquote {
-        border-left: 4px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-left: 4px solid var(--dees-color-border-default);
        margin: 1em 0;
        padding-left: 1em;
        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
@@ -155,12 +159,12 @@ export const richtextStyles = [
      }

      .editor-content .ProseMirror code {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
+        background: var(--dees-color-bg-tertiary);
        border-radius: 3px;
        padding: 0.2em 0.4em;
        font-family: 'Intel One Mono', 'Fira Code', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
        font-size: 0.9em;
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+        color: var(--dees-color-text-primary);
      }

      .editor-content .ProseMirror pre {
@@ -193,7 +197,7 @@ export const richtextStyles = [
        padding: 0 12px;
        height: 28px;
        font-size: 11px;
-        color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
+        color: var(--dees-color-text-muted);
        display: flex;
        justify-content: space-between;
        align-items: center;
@@ -211,8 +215,8 @@ export const richtextStyles = [
        top: 100%;
        left: 0;
        right: 0;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-default);
        border-radius: 6px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        padding: 12px;
@@ -226,12 +230,12 @@ export const richtextStyles = [
      .link-input input {
        width: 100%;
        padding: 8px 12px;
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid var(--dees-color-border-default);
        border-radius: 6px;
        outline: none;
        font-size: 14px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        background: var(--dees-color-bg-primary);
+        color: var(--dees-color-text-primary);
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      }

@@ -248,19 +252,19 @@ export const richtextStyles = [

      .link-input-buttons button {
        padding: 6px 12px;
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid var(--dees-color-border-default);
        border-radius: 4px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
+        background: var(--dees-color-bg-primary);
        cursor: pointer;
        font-size: 12px;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
        transition: all 0.15s ease;
        font-weight: 500;
      }

      .link-input-buttons button:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
      }

      .link-input-buttons button.primary {
@@ -281,7 +285,7 @@ export const richtextStyles = [
        line-height: 1.4;
      }

-      :host([disabled]) .editor-container {
+      :host([disabled]) dees-tile {
        opacity: 0.6;
        cursor: not-allowed;
      }
--- a/ts_web/elements/00group-layout/dees-tile/dees-tile.ts
+++ b/ts_web/elements/00group-layout/dees-tile/dees-tile.ts
@@ -56,7 +56,7 @@ export class DeesTile extends DeesElement {
        display: flex;
        flex-direction: column;
        font-family: ${cssGeistFontFamily};
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        color: var(--dees-color-text-primary);
      }

      /* --- The frame --- */
@@ -64,8 +64,8 @@ export class DeesTile extends DeesElement {
        position: relative;
        flex: 1;
        min-height: 0;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-default);
        border-radius: 8px;
        overflow: hidden;
        display: flex;
@@ -84,7 +84,7 @@ export class DeesTile extends DeesElement {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: -0.01em;
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-secondary);
      }

      /* --- Content: the rounded inset --- */
@@ -92,8 +92,8 @@ export class DeesTile extends DeesElement {
        flex: 1;
        position: relative;
        border-radius: 8px;
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 11%)')};
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 11%)')};
+        border-top: 1px solid var(--dees-color-border-subtle);
+        border-bottom: 1px solid var(--dees-color-border-subtle);
        overflow: hidden;
      }

--- a/ts_web/elements/00group-media/dees-pdf-viewer/component.ts
+++ b/ts_web/elements/00group-media/dees-pdf-viewer/component.ts
@@ -3,6 +3,7 @@ import { PdfManager } from '../dees-pdf-shared/PdfManager.js';
 import { viewerStyles } from './styles.js';
 import { demo as demoFunc } from './demo.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
+import '../../00group-layout/dees-tile/dees-tile.js';

 declare global {
  interface HTMLElementTagNameMap {
@@ -33,6 +34,9 @@ export class DeesPdfViewer extends DeesElement {
  @property({ type: Boolean })
  accessor showSidebar: boolean = false;

+  @property({ type: String })
+  accessor sidebarPosition: 'left' | 'right' = 'left';
+
  @property({ type: Number })
  accessor currentPage: number = 1;

@@ -54,6 +58,9 @@ export class DeesPdfViewer extends DeesElement {
  @property({ type: Array })
  accessor pageData: Array<{page: number, rendered: boolean, rendering: boolean, textLayerRendered: boolean}> = [];

+  @property({ type: Number })
+  accessor pdfFileSize: number = 0;
+
  private pdfDocument: any;
  private renderState: RenderState = 'idle';
  private renderAbortController: AbortController | null = null;
@@ -85,9 +92,9 @@ export class DeesPdfViewer extends DeesElement {

  public render(): TemplateResult {
    return html`
-      <div class="pdf-viewer ${this.showSidebar ? 'with-sidebar' : ''}">
+      <dees-tile class="${this.showSidebar ? 'with-sidebar' : ''} sidebar-${this.sidebarPosition}">
        ${this.showToolbar ? html`
-          <div class="toolbar">
+          <div slot="header" class="toolbar">
            <div class="toolbar-group">
              <button
                class="toolbar-button"
@@ -240,7 +247,23 @@ export class DeesPdfViewer extends DeesElement {
            `}
          </div>
        </div>
-      </div>
+        <div slot="footer" class="pdf-footer">
+          <div class="pdf-footer-left">
+            <span class="pdf-footer-item">Zoom ${Math.round(this.currentZoom * 100)}%</span>
+            ${this.pdfFileSize > 0 ? html`
+              <span class="pdf-footer-item">${this.formatFileSize(this.pdfFileSize)}</span>
+            ` : ''}
+          </div>
+          <div class="pdf-footer-center" style="margin-left: ${this.showSidebar && this.sidebarPosition === 'left' ? '100px' : this.showSidebar && this.sidebarPosition === 'right' ? '-100px' : '0'}">
+            <span>Page ${this.currentPage} of ${this.totalPages}</span>
+          </div>
+          <div class="pdf-footer-right">
+            ${this.pdfUrl ? html`
+              <span class="pdf-footer-filename">${this.pdfUrl.split('/').pop()}</span>
+            ` : ''}
+          </div>
+        </div>
+      </dees-tile>
    `;
  }

@@ -305,6 +328,12 @@ export class DeesPdfViewer extends DeesElement {
    }
  }

+  private formatFileSize(bytes: number): string {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  }
+
  private async loadPdf() {
    this.loading = true;
    this.renderState = 'loading';
@@ -323,6 +352,14 @@ export class DeesPdfViewer extends DeesElement {
      this.currentPage = this.initialPage;
      this.resolveInitialViewportMode();

+      // Get file size
+      try {
+        const data = await this.pdfDocument.getData();
+        this.pdfFileSize = data.length;
+      } catch (e) {
+        this.pdfFileSize = 0;
+      }
+
      // Initialize thumbnail and page data arrays
      this.thumbnailData = Array.from({length: this.totalPages}, (_, i) => ({
        page: i + 1,
@@ -699,8 +736,8 @@ export class DeesPdfViewer extends DeesElement {
      const viewerRect = this.viewerMain.getBoundingClientRect();
      const currentScrollTop = this.viewerMain.scrollTop;

-      // Calculate the target scroll position
-      const targetScrollTop = currentScrollTop + (pageRect.top - viewerRect.top) - this.viewerMain.clientTop;
+      // Calculate the target scroll position (offset by 16px so page doesn't touch the top edge)
+      const targetScrollTop = currentScrollTop + (pageRect.top - viewerRect.top) - this.viewerMain.clientTop - 16;

      // Scroll to the calculated position
      if (smooth) {
--- a/ts_web/elements/00group-media/dees-pdf-viewer/demo.ts
+++ b/ts_web/elements/00group-media/dees-pdf-viewer/demo.ts
@@ -3,8 +3,8 @@ import { html } from '@design.estate/dees-element';
 export const demo = () => html`
  <style>
    .demo-container {
-      padding: 40px;
-      background: #f5f5f5;
+      padding: 20px;
+      background: #000000;
    }

    .demo-section {
@@ -15,6 +15,7 @@ export const demo = () => html`
      margin-bottom: 20px;
      font-size: 18px;
      font-weight: 600;
+      color: #fafafa;
    }

    dees-pdf-viewer {
--- a/ts_web/elements/00group-media/dees-pdf-viewer/styles.ts
+++ b/ts_web/elements/00group-media/dees-pdf-viewer/styles.ts
@@ -1,6 +1,8 @@
 import { css, cssManager } from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';

 export const viewerStyles = [
+  themeDefaultStyles,
  cssManager.defaultStyles,
  css`
    :host {
@@ -12,25 +14,47 @@ export const viewerStyles = [
      contain: layout style;
    }

-    .pdf-viewer {
-      width: 100%;
+    dees-tile {
      height: 100%;
-      display: flex;
-      flex-direction: column;
-      background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(215 20% 10%)')};
-      position: relative;
-      overflow: hidden;
+    }
+
+    .viewer-container::before,
+    .viewer-container::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      height: 8px;
+      z-index: 5;
+      pointer-events: none;
+    }
+
+    .viewer-container::before {
+      top: 0;
+      background: linear-gradient(
+        to bottom,
+        ${cssManager.bdTheme('hsl(0 0% 0% / 0.08)', 'hsl(0 0% 0% / 0.4)')},
+        ${cssManager.bdTheme('hsl(0 0% 0% / 0.03)', 'hsl(0 0% 0% / 0.12)')},
+        transparent
+      );
+    }
+
+    .viewer-container::after {
+      bottom: 0;
+      background: linear-gradient(
+        to top,
+        ${cssManager.bdTheme('hsl(0 0% 0% / 0.08)', 'hsl(0 0% 0% / 0.4)')},
+        ${cssManager.bdTheme('hsl(0 0% 0% / 0.03)', 'hsl(0 0% 0% / 0.12)')},
+        transparent
+      );
    }

    .toolbar {
-      height: 48px;
-      background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20% 15%)')};
-      border-bottom: 1px solid ${cssManager.bdTheme('hsl(214 31% 91%)', 'hsl(217 25% 22%)')};
+      height: 40px;
      display: flex;
      align-items: center;
-      padding: 0 16px;
-      gap: 16px;
-      flex-shrink: 0;
+      padding: 0 12px;
+      gap: 12px;
    }

    .toolbar-group {
@@ -108,21 +132,27 @@ export const viewerStyles = [
    }

    .viewer-container {
-      flex: 1;
+      position: absolute;
+      inset: 0;
      display: flex;
      overflow: hidden;
-      position: relative;
-      min-height: 0;
    }

    .sidebar {
      width: 200px;
-      background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20% 15%)')};
+      background: transparent;
      border-right: 1px solid ${cssManager.bdTheme('hsl(214 31% 91%)', 'hsl(217 25% 22%)')};
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
+      order: 0;
+    }
+
+    .sidebar-right .sidebar {
+      border-right: none;
+      border-left: 1px solid ${cssManager.bdTheme('hsl(214 31% 91%)', 'hsl(217 25% 22%)')};
+      order: 1;
    }

    .sidebar-header {
@@ -334,5 +364,52 @@ export const viewerStyles = [
    .pdf-viewer.with-sidebar .viewer-main {
      margin-left: 0;
    }
+
+    .pdf-footer {
+      height: 28px;
+      padding: 0 16px;
+      display: flex;
+      align-items: center;
+      font-size: 11px;
+      color: var(--dees-color-text-muted);
+      width: 100%;
+      box-sizing: border-box;
+      position: relative;
+    }
+
+    .pdf-footer-left {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .pdf-footer-left .pdf-footer-item + .pdf-footer-item {
+      padding-left: 12px;
+      border-left: 1px solid var(--dees-color-border-default);
+    }
+
+    .pdf-footer-center {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      font-weight: 500;
+      transition: margin-left 0.15s ease;
+    }
+
+    .pdf-footer-right {
+      margin-left: auto;
+    }
+
+    .pdf-footer-item {
+      white-space: nowrap;
+    }
+
+    .pdf-footer-filename {
+      font-family: 'Intel One Mono', 'Geist Mono', monospace;
+      opacity: 0.7;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
  `,
 ];
--- a/ts_web/elements/00group-media/dees-thumbnail-audio/component.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-audio/component.ts
@@ -8,22 +8,22 @@ import {
  type TemplateResult,
  type CSSResult,
 } from '@design.estate/dees-element';
-import { DeesTileBase } from '../dees-tile-shared/DeesTileBase.js';
-import { tileBaseStyles } from '../dees-tile-shared/styles.js';
+import { DeesThumbnailBase } from '../dees-thumbnail-shared/DeesThumbnailBase.js';
+import { thumbnailBaseStyles } from '../dees-thumbnail-shared/styles.js';
 import { demo } from './demo.js';

 declare global {
  interface HTMLElementTagNameMap {
-    'dees-tile-audio': DeesTileAudio;
+    'dees-thumbnail-audio': DeesThumbnailAudio;
  }
 }

-@customElement('dees-tile-audio')
-export class DeesTileAudio extends DeesTileBase {
+@customElement('dees-thumbnail-audio')
+export class DeesThumbnailAudio extends DeesThumbnailBase {
  public static demo = demo;
  public static demoGroups = ['Media'];
  public static styles = [
-    ...tileBaseStyles,
+    ...thumbnailBaseStyles,
    css`
      .audio-content {
        position: relative;
--- a/ts_web/elements/00group-media/dees-thumbnail-audio/demo.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-audio/demo.ts
@@ -26,51 +26,51 @@ export const demo = () => html`
    <div class="demo-section">
      <h3>Audio Tiles</h3>
      <div class="tile-row">
-        <dees-tile-audio
+        <dees-thumbnail-audio
          src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
          title="SoundHelix Song 1"
          artist="T. Schuerger"
          label="soundhelix-1.mp3"
          @tile-click=${(e: CustomEvent) => console.log('Audio clicked:', e.detail)}
-        ></dees-tile-audio>
+        ></dees-thumbnail-audio>

-        <dees-tile-audio
+        <dees-thumbnail-audio
          src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3"
          title="SoundHelix Song 2"
          artist="T. Schuerger"
          label="soundhelix-2.mp3"
-        ></dees-tile-audio>
+        ></dees-thumbnail-audio>

-        <dees-tile-audio
+        <dees-thumbnail-audio
          src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3"
          title="SoundHelix Song 3"
          label="soundhelix-3.mp3"
-        ></dees-tile-audio>
+        ></dees-thumbnail-audio>
      </div>
    </div>

    <div class="demo-section">
      <h3>Size Variants</h3>
      <div class="tile-row">
-        <dees-tile-audio
+        <dees-thumbnail-audio
          size="small"
          src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
          title="Small"
          label="small.mp3"
-        ></dees-tile-audio>
+        ></dees-thumbnail-audio>

-        <dees-tile-audio
+        <dees-thumbnail-audio
          src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
          title="Default"
          label="default.mp3"
-        ></dees-tile-audio>
+        ></dees-thumbnail-audio>

-        <dees-tile-audio
+        <dees-thumbnail-audio
          size="large"
          src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
          title="Large"
          label="large.mp3"
-        ></dees-tile-audio>
+        ></dees-thumbnail-audio>
      </div>
    </div>
  </div>
--- a/ts_web/elements/00group-media/dees-thumbnail-audio/index.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-audio/index.ts
--- a/ts_web/elements/00group-media/dees-thumbnail-folder/component.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-folder/component.ts
@@ -7,11 +7,11 @@ import {
  type TemplateResult,
  type CSSResult,
 } from '@design.estate/dees-element';
-import { DeesTileBase } from '../dees-tile-shared/DeesTileBase.js';
-import { tileBaseStyles } from '../dees-tile-shared/styles.js';
+import { DeesThumbnailBase } from '../dees-thumbnail-shared/DeesThumbnailBase.js';
+import { thumbnailBaseStyles } from '../dees-thumbnail-shared/styles.js';
 import { demo } from './demo.js';

-export interface ITileFolderItem {
+export interface IThumbnailFolderItem {
  type: 'pdf' | 'image' | 'audio' | 'video' | 'note' | 'folder' | 'unknown';
  thumbnailSrc?: string;
  name: string;
@@ -29,16 +29,16 @@ const TYPE_ICON_MAP: Record<string, string> = {

 declare global {
  interface HTMLElementTagNameMap {
-    'dees-tile-folder': DeesTileFolder;
+    'dees-thumbnail-folder': DeesThumbnailFolder;
  }
 }

-@customElement('dees-tile-folder')
-export class DeesTileFolder extends DeesTileBase {
+@customElement('dees-thumbnail-folder')
+export class DeesThumbnailFolder extends DeesThumbnailBase {
  public static demo = demo;
  public static demoGroups = ['Media'];
  public static styles = [
-    ...tileBaseStyles,
+    ...thumbnailBaseStyles,
    css`
      .folder-content {
        position: relative;
@@ -116,7 +116,7 @@ export class DeesTileFolder extends DeesTileBase {
  accessor name: string = '';

  @property({ attribute: false })
-  accessor items: ITileFolderItem[] = [];
+  accessor items: IThumbnailFolderItem[] = [];

  protected renderTileContent(): TemplateResult {
    const previewItems = this.items.slice(0, 4);
--- a/ts_web/elements/00group-media/dees-thumbnail-folder/demo.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-folder/demo.ts
@@ -1,8 +1,8 @@
 import { html } from '@design.estate/dees-element';
-import type { ITileFolderItem } from './component.js';
+import type { IThumbnailFolderItem } from './component.js';

 export const demo = () => {
-  const photosFolder: ITileFolderItem[] = [
+  const photosFolder: IThumbnailFolderItem[] = [
    { type: 'image', name: 'sunset.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=1' },
    { type: 'image', name: 'mountain.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=2' },
    { type: 'image', name: 'ocean.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=3' },
@@ -11,7 +11,7 @@ export const demo = () => {
    { type: 'image', name: 'desert.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=6' },
  ];

-  const projectFolder: ITileFolderItem[] = [
+  const projectFolder: IThumbnailFolderItem[] = [
    { type: 'note', name: 'README.md' },
    { type: 'note', name: 'package.json' },
    { type: 'folder', name: 'src' },
@@ -21,16 +21,16 @@ export const demo = () => {
    { type: 'image', name: 'logo.png', thumbnailSrc: 'https://picsum.photos/100/100?random=10' },
  ];

-  const mediaFolder: ITileFolderItem[] = [
+  const mediaFolder: IThumbnailFolderItem[] = [
    { type: 'video', name: 'intro.mp4' },
    { type: 'audio', name: 'background.mp3' },
    { type: 'image', name: 'thumbnail.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=20' },
    { type: 'pdf', name: 'storyboard.pdf' },
  ];

-  const emptyFolder: ITileFolderItem[] = [];
+  const emptyFolder: IThumbnailFolderItem[] = [];

-  const singleItemFolder: ITileFolderItem[] = [
+  const singleItemFolder: IThumbnailFolderItem[] = [
    { type: 'pdf', name: 'report.pdf' },
  ];

@@ -60,61 +60,61 @@ export const demo = () => {
      <div class="demo-section">
        <h3>Folder Tiles</h3>
        <div class="tile-row">
-          <dees-tile-folder
+          <dees-thumbnail-folder
            name="Photos"
            .items=${photosFolder}
            label="6 photos"
            @tile-click=${(e: CustomEvent) => console.log('Folder clicked:', e.detail)}
-          ></dees-tile-folder>
+          ></dees-thumbnail-folder>

-          <dees-tile-folder
+          <dees-thumbnail-folder
            name="my-project"
            .items=${projectFolder}
            label="Project files"
-          ></dees-tile-folder>
+          ></dees-thumbnail-folder>

-          <dees-tile-folder
+          <dees-thumbnail-folder
            name="Media Assets"
            .items=${mediaFolder}
            label="Mixed media"
-          ></dees-tile-folder>
+          ></dees-thumbnail-folder>
        </div>
      </div>

      <div class="demo-section">
        <h3>Edge Cases</h3>
        <div class="tile-row">
-          <dees-tile-folder
+          <dees-thumbnail-folder
            name="Empty Folder"
            .items=${emptyFolder}
-          ></dees-tile-folder>
+          ></dees-thumbnail-folder>

-          <dees-tile-folder
+          <dees-thumbnail-folder
            name="Single Item"
            .items=${singleItemFolder}
-          ></dees-tile-folder>
+          ></dees-thumbnail-folder>
        </div>
      </div>

      <div class="demo-section">
        <h3>Size Variants</h3>
        <div class="tile-row">
-          <dees-tile-folder
+          <dees-thumbnail-folder
            size="small"
            name="Small"
            .items=${photosFolder}
-          ></dees-tile-folder>
+          ></dees-thumbnail-folder>

-          <dees-tile-folder
+          <dees-thumbnail-folder
            name="Default"
            .items=${photosFolder}
-          ></dees-tile-folder>
+          ></dees-thumbnail-folder>

-          <dees-tile-folder
+          <dees-thumbnail-folder
            size="large"
            name="Large"
            .items=${photosFolder}
-          ></dees-tile-folder>
+          ></dees-thumbnail-folder>
        </div>
      </div>
    </div>
--- a/ts_web/elements/00group-media/dees-thumbnail-folder/index.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-folder/index.ts
--- a/ts_web/elements/00group-media/dees-thumbnail-image/component.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-image/component.ts
@@ -8,22 +8,22 @@ import {
  type TemplateResult,
  type CSSResult,
 } from '@design.estate/dees-element';
-import { DeesTileBase } from '../dees-tile-shared/DeesTileBase.js';
-import { tileBaseStyles } from '../dees-tile-shared/styles.js';
+import { DeesThumbnailBase } from '../dees-thumbnail-shared/DeesThumbnailBase.js';
+import { thumbnailBaseStyles } from '../dees-thumbnail-shared/styles.js';
 import { demo } from './demo.js';

 declare global {
  interface HTMLElementTagNameMap {
-    'dees-tile-image': DeesTileImage;
+    'dees-thumbnail-image': DeesThumbnailImage;
  }
 }

-@customElement('dees-tile-image')
-export class DeesTileImage extends DeesTileBase {
+@customElement('dees-thumbnail-image')
+export class DeesThumbnailImage extends DeesThumbnailBase {
  public static demo = demo;
  public static demoGroups = ['Media'];
  public static styles = [
-    ...tileBaseStyles,
+    ...thumbnailBaseStyles,
    css`
      .image-wrapper {
        position: relative;
--- a/ts_web/elements/00group-media/dees-thumbnail-image/demo.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-image/demo.ts
@@ -26,59 +26,59 @@ export const demo = () => html`
    <div class="demo-section">
      <h3>Image Tiles</h3>
      <div class="tile-row">
-        <dees-tile-image
+        <dees-thumbnail-image
          src="https://picsum.photos/800/600"
          alt="Landscape photo"
          label="landscape.jpg"
          @tile-click=${(e: CustomEvent) => console.log('Image clicked:', e.detail)}
-        ></dees-tile-image>
+        ></dees-thumbnail-image>

-        <dees-tile-image
+        <dees-thumbnail-image
          src="https://picsum.photos/400/400"
          alt="Square photo"
          label="square.png"
-        ></dees-tile-image>
+        ></dees-thumbnail-image>

-        <dees-tile-image
+        <dees-thumbnail-image
          src="https://picsum.photos/300/900"
          alt="Portrait photo"
          label="portrait.webp"
-        ></dees-tile-image>
+        ></dees-thumbnail-image>
      </div>
    </div>

    <div class="demo-section">
      <h3>Size Variants</h3>
      <div class="tile-row">
-        <dees-tile-image
+        <dees-thumbnail-image
          size="small"
          src="https://picsum.photos/200/200"
          alt="Small"
          label="small.jpg"
-        ></dees-tile-image>
+        ></dees-thumbnail-image>

-        <dees-tile-image
+        <dees-thumbnail-image
          src="https://picsum.photos/600/400"
          alt="Default"
          label="default.jpg"
-        ></dees-tile-image>
+        ></dees-thumbnail-image>

-        <dees-tile-image
+        <dees-thumbnail-image
          size="large"
          src="https://picsum.photos/1200/800"
          alt="Large"
          label="large.jpg"
-        ></dees-tile-image>
+        ></dees-thumbnail-image>
      </div>
    </div>

    <div class="demo-section">
      <h3>Error State (broken URL)</h3>
-      <dees-tile-image
+      <dees-thumbnail-image
        src="https://invalid-url-that-does-not-exist.example/image.png"
        alt="Broken"
        label="broken.png"
-      ></dees-tile-image>
+      ></dees-thumbnail-image>
    </div>
  </div>
 `;
--- a/ts_web/elements/00group-media/dees-thumbnail-image/index.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-image/index.ts
--- a/ts_web/elements/00group-media/dees-thumbnail-note/component.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-note/component.ts
@@ -8,22 +8,22 @@ import {
  type TemplateResult,
  type CSSResult,
 } from '@design.estate/dees-element';
-import { DeesTileBase } from '../dees-tile-shared/DeesTileBase.js';
-import { tileBaseStyles } from '../dees-tile-shared/styles.js';
+import { DeesThumbnailBase } from '../dees-thumbnail-shared/DeesThumbnailBase.js';
+import { thumbnailBaseStyles } from '../dees-thumbnail-shared/styles.js';
 import { demo } from './demo.js';

 declare global {
  interface HTMLElementTagNameMap {
-    'dees-tile-note': DeesTileNote;
+    'dees-thumbnail-note': DeesThumbnailNote;
  }
 }

-@customElement('dees-tile-note')
-export class DeesTileNote extends DeesTileBase {
+@customElement('dees-thumbnail-note')
+export class DeesThumbnailNote extends DeesThumbnailBase {
  public static demo = demo;
  public static demoGroups = ['Media'];
  public static styles = [
-    ...tileBaseStyles,
+    ...thumbnailBaseStyles,
    css`
      .note-content {
        position: relative;
--- a/ts_web/elements/00group-media/dees-thumbnail-note/demo.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-note/demo.ts
@@ -72,63 +72,63 @@ Action Items:
      <div class="demo-section">
        <h3>Note Tiles</h3>
        <div class="tile-row">
-          <dees-tile-note
+          <dees-thumbnail-note
            title="component.ts"
            .content=${sampleCode}
            language="typescript"
            label="component.ts"
            @tile-click=${(e: CustomEvent) => console.log('Note clicked:', e.detail)}
-          ></dees-tile-note>
+          ></dees-thumbnail-note>

-          <dees-tile-note
+          <dees-thumbnail-note
            title="Meeting Notes"
            .content=${sampleText}
            label="meeting-notes.txt"
-          ></dees-tile-note>
+          ></dees-thumbnail-note>

-          <dees-tile-note
+          <dees-thumbnail-note
            title="package.json"
            .content=${sampleJson}
            language="json"
            label="package.json"
-          ></dees-tile-note>
+          ></dees-thumbnail-note>
        </div>
      </div>

      <div class="demo-section">
        <h3>Size Variants</h3>
        <div class="tile-row">
-          <dees-tile-note
+          <dees-thumbnail-note
            size="small"
            title="small.ts"
            .content=${sampleCode}
            language="ts"
            label="small.ts"
-          ></dees-tile-note>
+          ></dees-thumbnail-note>

-          <dees-tile-note
+          <dees-thumbnail-note
            title="default.ts"
            .content=${sampleCode}
            language="ts"
            label="default.ts"
-          ></dees-tile-note>
+          ></dees-thumbnail-note>

-          <dees-tile-note
+          <dees-thumbnail-note
            size="large"
            title="large.ts"
            .content=${sampleCode}
            language="ts"
            label="large.ts"
-          ></dees-tile-note>
+          ></dees-thumbnail-note>
        </div>
      </div>

      <div class="demo-section">
        <h3>Without Title</h3>
-        <dees-tile-note
+        <dees-thumbnail-note
          .content=${sampleText}
          label="untitled.txt"
-        ></dees-tile-note>
+        ></dees-thumbnail-note>
      </div>
    </div>
  `;
--- a/ts_web/elements/00group-media/dees-thumbnail-note/index.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-note/index.ts
--- a/ts_web/elements/00group-media/dees-thumbnail-pdf/component.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-pdf/component.ts
@@ -1,6 +1,6 @@
 import { property, state, html, customElement, type TemplateResult, type CSSResult } from '@design.estate/dees-element';
-import { DeesTileBase } from '../dees-tile-shared/DeesTileBase.js';
-import { tileBaseStyles } from '../dees-tile-shared/styles.js';
+import { DeesThumbnailBase } from '../dees-thumbnail-shared/DeesThumbnailBase.js';
+import { thumbnailBaseStyles } from '../dees-thumbnail-shared/styles.js';
 import { PdfManager } from '../dees-pdf-shared/PdfManager.js';
 import { CanvasPool, type PooledCanvas } from '../dees-pdf-shared/CanvasPool.js';
 import { PerformanceMonitor, throttle, formatFileSize } from '../dees-pdf-shared/utils.js';
@@ -9,15 +9,15 @@ import { demo as demoFunc } from './demo.js';

 declare global {
  interface HTMLElementTagNameMap {
-    'dees-tile-pdf': DeesTilePdf;
+    'dees-thumbnail-pdf': DeesThumbnailPdf;
  }
 }

-@customElement('dees-tile-pdf')
-export class DeesTilePdf extends DeesTileBase {
+@customElement('dees-thumbnail-pdf')
+export class DeesThumbnailPdf extends DeesThumbnailBase {
  public static demo = demoFunc;
  public static demoGroups = ['Media', 'PDF'];
-  public static styles = [...tileBaseStyles, tilePdfStyles] as any;
+  public static styles = [...thumbnailBaseStyles, tilePdfStyles] as any;

  @property({ type: String })
  accessor pdfUrl: string = '';
--- a/ts_web/elements/00group-media/dees-thumbnail-pdf/demo.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-pdf/demo.ts
@@ -11,7 +11,7 @@ export const demo = () => {
    for (let i = 0; i < count; i++) {
      const pdfUrl = samplePdfs[i % samplePdfs.length];
      items.push(html`
-        <dees-tile-pdf
+        <dees-thumbnail-pdf
          pdfUrl="${pdfUrl}"
          clickable="true"
          grid-mode
@@ -19,7 +19,7 @@ export const demo = () => {
            console.log('PDF Tile clicked:', e.detail);
            alert(`PDF clicked: ${e.detail.pageCount} pages`);
          }}
-        ></dees-tile-pdf>
+        ></dees-thumbnail-pdf>
      `);
    }
    return items;
@@ -67,56 +67,56 @@ export const demo = () => {
    <div class="demo-container">
      <div class="demo-section">
        <h3>Single PDF Tile</h3>
-        <dees-tile-pdf
+        <dees-thumbnail-pdf
          pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
          clickable="true"
-        ></dees-tile-pdf>
+        ></dees-thumbnail-pdf>
      </div>

      <div class="demo-section">
        <h3>Different Sizes</h3>
        <div class="preview-row">
          <div class="preview-label">Small:</div>
-          <dees-tile-pdf
+          <dees-thumbnail-pdf
            size="small"
            pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
            clickable="true"
-          ></dees-tile-pdf>
+          ></dees-thumbnail-pdf>
        </div>

        <div class="preview-row">
          <div class="preview-label">Default:</div>
-          <dees-tile-pdf
+          <dees-thumbnail-pdf
            pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
            clickable="true"
-          ></dees-tile-pdf>
+          ></dees-thumbnail-pdf>
        </div>

        <div class="preview-row">
          <div class="preview-label">Large:</div>
-          <dees-tile-pdf
+          <dees-thumbnail-pdf
            size="large"
            pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
            clickable="true"
-          ></dees-tile-pdf>
+          ></dees-thumbnail-pdf>
        </div>
      </div>

      <div class="demo-section">
        <h3>With Label</h3>
-        <dees-tile-pdf
+        <dees-thumbnail-pdf
          pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
          clickable="true"
          label="Research Paper.pdf"
-        ></dees-tile-pdf>
+        ></dees-thumbnail-pdf>
      </div>

      <div class="demo-section">
        <h3>Non-Clickable</h3>
-        <dees-tile-pdf
+        <dees-thumbnail-pdf
          pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
          clickable="false"
-        ></dees-tile-pdf>
+        ></dees-thumbnail-pdf>
      </div>

      <div class="demo-section">
--- a/ts_web/elements/00group-media/dees-thumbnail-pdf/index.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-pdf/index.ts
--- a/ts_web/elements/00group-media/dees-thumbnail-pdf/styles.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-pdf/styles.ts
--- a/ts_web/elements/00group-media/dees-thumbnail-shared/DeesThumbnailBase.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-shared/DeesThumbnailBase.ts
@@ -5,11 +5,11 @@ import {
  type TemplateResult,
  type CSSResult,
 } from '@design.estate/dees-element';
-import { tileBaseStyles } from './styles.js';
+import { thumbnailBaseStyles } from './styles.js';
 import '../../00group-utility/dees-icon/dees-icon.js';

-export abstract class DeesTileBase extends DeesElement {
-  public static styles: CSSResult[] = tileBaseStyles as any;
+export abstract class DeesThumbnailBase extends DeesElement {
+  public static styles: CSSResult[] = thumbnailBaseStyles as any;

  @property({ type: Boolean })
  accessor clickable: boolean = true;
--- a/ts_web/elements/00group-media/dees-thumbnail-shared/index.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-shared/index.ts
@@ -0,0 +1,2 @@
+export { DeesThumbnailBase } from './DeesThumbnailBase.js';
+export { thumbnailBaseStyles } from './styles.js';
--- a/ts_web/elements/00group-media/dees-thumbnail-shared/styles.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-shared/styles.ts
@@ -1,6 +1,6 @@
 import { css, cssManager } from '@design.estate/dees-element';

-export const tileBaseStyles = [
+export const thumbnailBaseStyles = [
  cssManager.defaultStyles,
  css`
    :host {
--- a/ts_web/elements/00group-media/dees-thumbnail-video/component.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-video/component.ts
@@ -8,22 +8,22 @@ import {
  type TemplateResult,
  type CSSResult,
 } from '@design.estate/dees-element';
-import { DeesTileBase } from '../dees-tile-shared/DeesTileBase.js';
-import { tileBaseStyles } from '../dees-tile-shared/styles.js';
+import { DeesThumbnailBase } from '../dees-thumbnail-shared/DeesThumbnailBase.js';
+import { thumbnailBaseStyles } from '../dees-thumbnail-shared/styles.js';
 import { demo } from './demo.js';

 declare global {
  interface HTMLElementTagNameMap {
-    'dees-tile-video': DeesTileVideo;
+    'dees-thumbnail-video': DeesThumbnailVideo;
  }
 }

-@customElement('dees-tile-video')
-export class DeesTileVideo extends DeesTileBase {
+@customElement('dees-thumbnail-video')
+export class DeesThumbnailVideo extends DeesThumbnailBase {
  public static demo = demo;
  public static demoGroups = ['Media'];
  public static styles = [
-    ...tileBaseStyles,
+    ...thumbnailBaseStyles,
    css`
      .video-wrapper {
        position: relative;
--- a/ts_web/elements/00group-media/dees-thumbnail-video/demo.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-video/demo.ts
@@ -26,54 +26,54 @@ export const demo = () => html`
    <div class="demo-section">
      <h3>Video Tiles</h3>
      <div class="tile-row">
-        <dees-tile-video
+        <dees-thumbnail-video
          src="https://www.w3schools.com/html/mov_bbb.mp4"
          label="bunny.mp4"
          @tile-click=${(e: CustomEvent) => console.log('Video clicked:', e.detail)}
-        ></dees-tile-video>
+        ></dees-thumbnail-video>

-        <dees-tile-video
+        <dees-thumbnail-video
          src="https://www.w3schools.com/html/movie.mp4"
          poster="https://picsum.photos/400/300"
          label="movie.mp4"
-        ></dees-tile-video>
+        ></dees-thumbnail-video>

-        <dees-tile-video
+        <dees-thumbnail-video
          src="https://www.w3schools.com/html/mov_bbb.mp4"
          label="another-video.mp4"
-        ></dees-tile-video>
+        ></dees-thumbnail-video>
      </div>
    </div>

    <div class="demo-section">
      <h3>Size Variants</h3>
      <div class="tile-row">
-        <dees-tile-video
+        <dees-thumbnail-video
          size="small"
          src="https://www.w3schools.com/html/mov_bbb.mp4"
          label="small.mp4"
-        ></dees-tile-video>
+        ></dees-thumbnail-video>

-        <dees-tile-video
+        <dees-thumbnail-video
          src="https://www.w3schools.com/html/mov_bbb.mp4"
          label="default.mp4"
-        ></dees-tile-video>
+        ></dees-thumbnail-video>

-        <dees-tile-video
+        <dees-thumbnail-video
          size="large"
          src="https://www.w3schools.com/html/mov_bbb.mp4"
          label="large.mp4"
-        ></dees-tile-video>
+        ></dees-thumbnail-video>
      </div>
    </div>

    <div class="demo-section">
      <h3>With Poster Image</h3>
-      <dees-tile-video
+      <dees-thumbnail-video
        src="https://www.w3schools.com/html/movie.mp4"
        poster="https://picsum.photos/600/400"
        label="poster-video.mp4"
-      ></dees-tile-video>
+      ></dees-thumbnail-video>
    </div>
  </div>
 `;
--- a/ts_web/elements/00group-media/dees-thumbnail-video/index.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-video/index.ts
--- a/ts_web/elements/00group-media/dees-tile-shared/index.ts
+++ b/ts_web/elements/00group-media/dees-tile-shared/index.ts
@@ -1,2 +0,0 @@
-export { DeesTileBase } from './DeesTileBase.js';
-export { tileBaseStyles } from './styles.js';
--- a/ts_web/elements/00group-media/index.ts
+++ b/ts_web/elements/00group-media/index.ts
@@ -8,11 +8,11 @@ export * from './dees-preview/index.js';
 export * from './dees-pdf-shared/index.js';
 export * from './dees-pdf-viewer/index.js';

-// Tile Components
-export * from './dees-tile-shared/index.js';
-export * from './dees-tile-pdf/index.js';
-export * from './dees-tile-image/index.js';
-export * from './dees-tile-audio/index.js';
-export * from './dees-tile-video/index.js';
-export * from './dees-tile-note/index.js';
-export * from './dees-tile-folder/index.js';
+// Thumbnail Components
+export * from './dees-thumbnail-shared/index.js';
+export * from './dees-thumbnail-pdf/index.js';
+export * from './dees-thumbnail-image/index.js';
+export * from './dees-thumbnail-audio/index.js';
+export * from './dees-thumbnail-video/index.js';
+export * from './dees-thumbnail-note/index.js';
+export * from './dees-thumbnail-folder/index.js';
--- a/ts_web/elements/00group-overlay/dees-modal/dees-modal.ts
+++ b/ts_web/elements/00group-overlay/dees-modal/dees-modal.ts
@@ -21,6 +21,7 @@ import {
 import * as domtools from '@design.estate/dees-domtools';
 import { DeesWindowLayer } from '../dees-windowlayer/dees-windowlayer.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 import { themeDefaultStyles } from '../../00theme.js';

 declare global {
@@ -128,8 +129,7 @@ export class DeesModal extends DeesElement {
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        font-family: ${cssGeistFontFamily};
-        color: ${cssManager.bdTheme('#333', '#fff')};
-        will-change: transform;
+        color: var(--dees-color-text-primary);
      }
      .modalContainer {
        display: flex;
@@ -142,106 +142,112 @@ export class DeesModal extends DeesElement {
        align-items: center;
        justify-content: center;
      }
-      .modal {
-        will-change: transform;
-        transform: translateY(0px) scale(0.95);
+      dees-tile {
+        will-change: transform, opacity;
+        transform: translateY(8px) scale(0.98);
        opacity: 0;
        min-height: 120px;
-        max-height: calc(100vh - 40px);
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border-radius: 6px;
-        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
-        transition: all 0.2s ease;
-        overflow: hidden;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
-        margin: 20px;
-        display: flex;
-        flex-direction: column;
+        max-height: calc(100vh - 80px);
+        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
+        margin: 40px;
        overscroll-behavior: contain;
      }

+      dees-tile::part(outer) {
+        box-shadow:
+          0 0 0 1px ${cssManager.bdTheme('hsl(0 0% 0% / 0.03)', 'hsl(0 0% 100% / 0.03)')},
+          0 8px 40px ${cssManager.bdTheme('hsl(0 0% 0% / 0.12)', 'hsl(0 0% 0% / 0.5)')},
+          0 2px 8px ${cssManager.bdTheme('hsl(0 0% 0% / 0.06)', 'hsl(0 0% 0% / 0.25)')};
+      }
+
      /* Width variations */
-      .modal.width-small {
+      dees-tile.width-small {
        width: 380px;
      }

-      .modal.width-medium {
+      dees-tile.width-medium {
        width: 560px;
      }

-      .modal.width-large {
+      dees-tile.width-large {
        width: 800px;
      }

-      .modal.width-fullscreen {
+      dees-tile.width-fullscreen {
        width: calc(100vw - 40px);
        height: calc(100vh - 40px);
        max-height: calc(100vh - 40px);
      }

      @media (max-width: 768px) {
-        .modal {
+        dees-tile {
          width: calc(100vw - 40px) !important;
          max-width: none !important;
        }
-        
-        /* Allow full height on mobile when content needs it */
+
        .modalContainer {
          padding: 10px;
        }
-        
-        .modal {
+
+        dees-tile {
          margin: 10px;
          max-height: calc(100vh - 20px);
        }
-        
-        /* Full screen mode on mobile */
-        .modal.mobile-fullscreen {
+
+        dees-tile.mobile-fullscreen {
          width: 100vw !important;
          height: 100vh !important;
          max-height: 100vh !important;
          margin: 0;
+        }
+
+        dees-tile.mobile-fullscreen::part(outer) {
          border-radius: 0;
          border: none;
        }
      }

-      .modal.show {
+      dees-tile.show {
        opacity: 1;
-        transform: translateY(0px) scale(1);
+        transform: translateY(0) scale(1);
      }

-      .modal.show.predestroy {
+      dees-tile.show.predestroy {
        opacity: 0;
-        transform: translateY(10px) scale(1);
+        transform: translateY(6px) scale(0.98);
+        transition: transform 0.15s ease-in, opacity 0.15s ease-in;
      }

-      .modal .heading {
-        height: 40px;
-        min-height: 40px;
-        font-family: ${cssGeistFontFamily};
+      .heading {
+        height: 36px;
        display: flex;
        align-items: center;
-        justify-content: space-between;
-        padding: 0 12px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        padding: 0 8px 0 16px;
        position: relative;
-        flex-shrink: 0;
      }

-      .modal .heading .header-buttons {
+      .heading .heading-text {
+        flex: 1;
+        font-weight: 500;
+        font-size: 13px;
+        letter-spacing: -0.01em;
+        color: var(--dees-color-text-secondary);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .heading .header-buttons {
        display: flex;
        align-items: center;
-        gap: 4px;
-        position: absolute;
-        right: 8px;
-        top: 50%;
-        transform: translateY(-50%);
+        gap: 2px;
+        flex-shrink: 0;
+        margin-left: 8px;
      }

-      .modal .heading .header-button {
-        width: 28px;
-        height: 28px;
+      .heading .header-button {
+        width: 24px;
+        height: 24px;
        border-radius: 4px;
        display: flex;
        align-items: center;
@@ -249,89 +255,85 @@ export class DeesModal extends DeesElement {
        cursor: pointer;
        transition: all 0.15s ease;
        background: transparent;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        color: var(--dees-color-text-muted);
      }

-      .modal .heading .header-button:hover {
-        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+      .heading .header-button:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-secondary);
      }

-      .modal .heading .header-button:active {
-        background: ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
+      .heading .header-button:active {
+        background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 15%)')};
      }

-      .modal .heading .header-button dees-icon {
-        width: 16px;
-        height: 16px;
+      .heading .header-button dees-icon {
+        width: 14px;
+        height: 14px;
        display: block;
      }

-      .modal .heading .heading-text {
-        flex: 1;
-        text-align: center;
-        font-weight: 600;
-        font-size: 14px;
-        line-height: 40px;
-        padding: 0 40px;
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
-      }
-
-      .modal .content {
-        flex: 1;
+      .content {
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
+        scrollbar-width: thin;
+        scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
      }
-      .modal .bottomButtons {
+      .bottomButtons {
        display: flex;
        flex-direction: row;
-        border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
        justify-content: flex-end;
-        gap: 8px;
-        padding: 8px;
-        flex-shrink: 0;
+        align-items: center;
+        gap: 0;
+        height: 36px;
+        width: 100%;
+        box-sizing: border-box;
      }

-      .modal .bottomButtons .bottomButton {
-        padding: 8px 16px;
-        border-radius: 4px;
-        line-height: 16px;
+      .bottomButtons .bottomButton {
+        padding: 0 16px;
+        height: 100%;
        text-align: center;
-        font-size: 14px;
+        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        user-select: none;
        transition: all 0.15s ease;
-        background: ${cssManager.bdTheme('#ffffff', '#27272a')};
-        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        background: transparent;
+        border: none;
+        border-left: 1px solid var(--dees-color-border-subtle);
+        color: var(--dees-color-text-muted);
        white-space: nowrap;
+        display: flex;
+        align-items: center;
      }

-      .modal .bottomButtons .bottomButton:hover {
-        background: ${cssManager.bdTheme('#f4f4f5', '#3f3f46')};
-        border-color: ${cssManager.bdTheme('#d1d5db', '#52525b')};
-      }
-      .modal .bottomButtons .bottomButton:active {
-        background: ${cssManager.bdTheme('#e5e7eb', '#52525b')};
-      }
-      .modal .bottomButtons .bottomButton:last-child {
-        border-right: none;
+      .bottomButtons .bottomButton:first-child {
+        border-left: none;
      }

-      .modal .bottomButtons .bottomButton.primary {
-        background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
-        border-color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
-        color: #ffffff;
+      .bottomButtons .bottomButton:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
      }
-      .modal .bottomButtons .bottomButton.primary:hover {
-        background: ${cssManager.bdTheme('#2563eb', '#2563eb')};
-        border-color: ${cssManager.bdTheme('#2563eb', '#2563eb')};
+
+      .bottomButtons .bottomButton:active {
+        background: ${cssManager.bdTheme('hsl(0 0% 92%)', 'hsl(0 0% 13%)')};
      }
-      .modal .bottomButtons .bottomButton.primary:active {
-        background: ${cssManager.bdTheme('#1d4ed8', '#1d4ed8')};
-        border-color: ${cssManager.bdTheme('#1d4ed8', '#1d4ed8')};
+
+      .bottomButtons .bottomButton.primary {
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
+        font-weight: 600;
+      }
+
+      .bottomButtons .bottomButton.primary:hover {
+        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
+      }
+
+      .bottomButtons .bottomButton.primary:active {
+        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.12)', 'hsl(213.1 93.9% 67.8% / 0.12)')};
      }
    `,
  ];
@@ -345,13 +347,13 @@ export class DeesModal extends DeesElement {

    return html`
      <style>
-        ${customWidth ? `.modal { width: ${customWidth}; }` : ''}
-        ${maxWidthStyle ? `.modal { max-width: ${maxWidthStyle}; }` : ''}
-        ${minWidthStyle ? `.modal { min-width: ${minWidthStyle}; }` : ''}
+        ${customWidth ? `dees-tile { width: ${customWidth}; }` : ''}
+        ${maxWidthStyle ? `dees-tile { max-width: ${maxWidthStyle}; }` : ''}
+        ${minWidthStyle ? `dees-tile { min-width: ${minWidthStyle}; }` : ''}
      </style>
      <div class="modalContainer" @click=${this.handleOutsideClick} style="z-index: ${this.modalZIndex}">
-        <div class="modal ${widthClass} ${mobileFullscreenClass}">
-          <div class="heading">
+        <dees-tile class="${widthClass} ${mobileFullscreenClass}">
+          <div slot="header" class="heading">
            <div class="heading-text">${this.heading}</div>
            <div class="header-buttons">
              ${this.showHelpButton ? html`
@@ -368,7 +370,7 @@ export class DeesModal extends DeesElement {
          </div>
          <div class="content" style="padding: ${this.contentPadding}px;">${this.content}</div>
          ${this.menuOptions.length > 0 ? html`
-            <div class="bottomButtons">
+            <div slot="footer" class="bottomButtons">
              ${this.menuOptions.map(
                (actionArg, index) => html`
                  <div class="bottomButton ${index === this.menuOptions.length - 1 ? 'primary' : ''} ${actionArg.name === 'OK' ? 'ok' : ''}" @click=${() => {
@@ -378,7 +380,7 @@ export class DeesModal extends DeesElement {
              )}
            </div>
          ` : ''}
-        </div>
+        </dees-tile>
      </div>
    `;
  }
@@ -388,8 +390,8 @@ export class DeesModal extends DeesElement {
    super.firstUpdated(_changedProperties);
    const domtools = await this.domtoolsPromise;
    await domtools.convenience.smartdelay.delayFor(30);
-    const modal = this.shadowRoot!.querySelector('.modal');
-    modal!.classList.add('show');
+    const tile = this.shadowRoot!.querySelector('dees-tile');
+    tile!.classList.add('show');
  }

  public async handleOutsideClick(eventArg: MouseEvent) {
@@ -402,8 +404,8 @@ export class DeesModal extends DeesElement {

  public async destroy() {
    const domtools = await this.domtoolsPromise;
-    const modal = this.shadowRoot!.querySelector('.modal');
-    modal!.classList.add('predestroy');
+    const tile = this.shadowRoot!.querySelector('dees-tile');
+    tile!.classList.add('predestroy');
    await domtools.convenience.smartdelay.delayFor(200);
    document.body.removeChild(this);
    await this.windowLayer.destroy();
--- a/ts_web/elements/00group-simple/dees-shopping-productcard/dees-shopping-productcard.ts
+++ b/ts_web/elements/00group-simple/dees-shopping-productcard/dees-shopping-productcard.ts
@@ -67,7 +67,7 @@ export class DeesShoppingProductcard extends DeesElement {
      }

      dees-tile:hover::part(outer) {
-        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
+        border-color: var(--dees-color-border-strong);
        box-shadow: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1);
      }

@@ -148,7 +148,7 @@ export class DeesShoppingProductcard extends DeesElement {
      .product-name {
        font-size: 14px;
        font-weight: 500;
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-secondary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
@@ -204,7 +204,7 @@ export class DeesShoppingProductcard extends DeesElement {
      .price-current {
        font-size: 20px;
        font-weight: 600;
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        color: var(--dees-color-text-primary);
      }

      .price-original {
--- a/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.demo.ts
+++ b/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.demo.ts
@@ -110,6 +110,48 @@ class DemoViewDashboard extends DeesElement {
          console.log('Tile action:', e.detail);
        }}
      ></dees-statsgrid>
+
+      <h2 style="margin-top: 40px;">Recent Activity</h2>
+      <p>Below is a log of recent system events and user activity to demonstrate scrollable content.</p>
+
+      ${[
+        { time: '2 min ago', event: 'User john@example.com logged in from 192.168.1.42', type: 'info' },
+        { time: '5 min ago', event: 'Deployment v3.52.1 completed successfully on production', type: 'success' },
+        { time: '12 min ago', event: 'Database backup finished — 2.4 GB compressed', type: 'info' },
+        { time: '18 min ago', event: 'SSL certificate renewed for api.example.com (expires 2027-04-03)', type: 'success' },
+        { time: '25 min ago', event: 'Memory usage spike on worker-03 (92%) — auto-scaled to 4 instances', type: 'warning' },
+        { time: '31 min ago', event: 'New user registration: sarah@company.io', type: 'info' },
+        { time: '45 min ago', event: 'Scheduled job "cleanup-temp-files" completed — removed 1,247 files', type: 'info' },
+        { time: '1 hour ago', event: 'API rate limit reached for client app-mobile-ios (429 responses)', type: 'warning' },
+        { time: '1.5 hours ago', event: 'CDN cache purged for /assets/* — 340 objects invalidated', type: 'info' },
+        { time: '2 hours ago', event: 'Failed login attempt for admin@example.com from 203.0.113.50 (blocked)', type: 'error' },
+        { time: '2.5 hours ago', event: 'Webhook delivery to https://hooks.slack.com succeeded (200 OK)', type: 'info' },
+        { time: '3 hours ago', event: 'Cron job "generate-reports" started — processing Q1 2026 data', type: 'info' },
+        { time: '3.5 hours ago', event: 'Load balancer health check: all 8 nodes healthy', type: 'success' },
+        { time: '4 hours ago', event: 'DNS propagation complete for new subdomain staging.example.com', type: 'success' },
+      ].map(item => html`
+        <div style="
+          display: flex;
+          align-items: baseline;
+          gap: 12px;
+          padding: 10px 0;
+          border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 12%)')};
+          font-size: 13px;
+        ">
+          <span style="
+            flex-shrink: 0;
+            width: 100px;
+            font-size: 11px;
+            color: ${cssManager.bdTheme('hsl(0 0% 55%)', 'hsl(0 0% 45%)')};
+          ">${item.time}</span>
+          <span style="
+            color: ${item.type === 'error' ? cssManager.bdTheme('hsl(0 72% 50%)', 'hsl(0 72% 65%)') :
+              item.type === 'warning' ? cssManager.bdTheme('hsl(25 95% 50%)', 'hsl(25 95% 63%)') :
+              item.type === 'success' ? cssManager.bdTheme('hsl(142 70% 40%)', 'hsl(142 70% 55%)') :
+              cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 75%)')};
+          ">${item.event}</span>
+        </div>
+      `)}
    `;
  }
 }
--- a/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts
+++ b/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts
@@ -76,9 +76,8 @@ export class DeesSimpleAppDash extends DeesElement {
    themeDefaultStyles,
    cssManager.defaultStyles,
    css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
+        color: var(--dees-color-text-primary);
        user-select: none;
        display: block;
        overflow: hidden;
@@ -102,8 +101,8 @@ export class DeesSimpleAppDash extends DeesElement {
        left: 0px;
        height: calc(100% - 24px);
        width: 240px;
-        background: ${cssManager.bdTheme('hsl(0 0% 99%)', 'hsl(0 0% 7%)')};
-        border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
+        background: var(--dees-color-bg-secondary);
+        border-right: 1px solid var(--dees-color-border-default);
        font-size: 13px;
        font-family: 'Geist Sans', sans-serif;
        z-index: 2;
@@ -114,7 +113,7 @@ export class DeesSimpleAppDash extends DeesElement {

      .sidebar-header {
        padding: 20px 16px;
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
+        border-bottom: 1px solid var(--dees-color-border-default);
        display: flex;
        align-items: center;
        gap: 12px;
@@ -127,25 +126,22 @@ export class DeesSimpleAppDash extends DeesElement {
        width: 36px;
        height: 36px;
        border-radius: 10px;
-        background: ${cssManager.bdTheme(
-          'linear-gradient(135deg, hsl(215 20% 95%) 0%, hsl(215 20% 90%) 100%)',
-          'linear-gradient(135deg, hsl(215 20% 18%) 0%, hsl(215 20% 14%) 100%)'
-        )};
+        background: var(--dees-color-bg-tertiary);
        box-shadow: ${cssManager.bdTheme(
-          '0 1px 2px rgb(0 0 0 / 0.05), inset 0 1px 0 rgb(255 255 255 / 0.5)',
-          '0 1px 2px rgb(0 0 0 / 0.2), inset 0 1px 0 rgb(255 255 255 / 0.05)'
+          '0 1px 2px rgb(0 0 0 / 0.05)',
+          '0 1px 2px rgb(0 0 0 / 0.2)'
        )};
      }

      .header-icon-wrapper dees-icon {
        font-size: 18px;
-        color: ${cssManager.bdTheme('hsl(215 20% 40%)', 'hsl(215 20% 70%)')};
+        color: var(--dees-color-text-primary);
      }

      .appName {
        font-size: 15px;
        font-weight: 600;
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
+        color: var(--dees-color-text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
@@ -156,7 +152,7 @@ export class DeesSimpleAppDash extends DeesElement {
        overflow-y: auto;
        padding: 12px 8px;
        scrollbar-width: thin;
-        scrollbar-color: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')} transparent;
+        scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
      }

      .viewTabs-container::-webkit-scrollbar {
@@ -168,12 +164,12 @@ export class DeesSimpleAppDash extends DeesElement {
      }

      .viewTabs-container::-webkit-scrollbar-thumb {
-        background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')};
+        background: var(--dees-color-scrollbar-thumb);
        border-radius: 3px;
      }

      .viewTabs-container::-webkit-scrollbar-thumb:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 75%)', 'hsl(0 0% 30%)')};
+        background: var(--dees-color-scrollbar-thumb-hover);
      }

      .section-label {
@@ -181,7 +177,7 @@ export class DeesSimpleAppDash extends DeesElement {
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
-        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 50%)')};
+        color: var(--dees-color-text-muted);
        padding: 8px 12px 8px;
        margin-bottom: 4px;
      }
@@ -199,25 +195,25 @@ export class DeesSimpleAppDash extends DeesElement {
        padding: 10px 12px;
        cursor: default;
        transition: all 0.15s ease;
-        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 65%)')};
+        color: var(--dees-color-text-secondary);
        user-select: none;
        position: relative;
        border-radius: 8px;
      }

      .viewTab:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.04)', 'hsl(0 0% 100% / 0.05)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
+        background: var(--dees-color-hover);
+        color: ${cssManager.bdTheme('#262626', '#e5e5e5')};
      }

      .viewTab:active {
-        background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.06)', 'hsl(0 0% 100% / 0.07)')};
+        background: var(--dees-color-active);
        transform: scale(0.99);
      }

      .viewTab.selected {
-        background: ${cssManager.bdTheme('hsl(215 25% 95%)', 'hsl(215 20% 15%)')};
-        color: ${cssManager.bdTheme('hsl(215 25% 30%)', 'hsl(215 25% 85%)')};
+        background: var(--dees-color-active);
+        color: var(--dees-color-text-primary);
        font-weight: 500;
      }

@@ -229,7 +225,7 @@ export class DeesSimpleAppDash extends DeesElement {
        bottom: 8px;
        width: 3px;
        border-radius: 0 2px 2px 0;
-        background: ${cssManager.bdTheme('hsl(215 70% 50%)', 'hsl(215 70% 60%)')};
+        background: var(--dees-color-text-primary);
      }

      .viewTab dees-icon {
@@ -243,8 +239,8 @@ export class DeesSimpleAppDash extends DeesElement {
      }

      .viewTab.selected dees-icon {
-        opacity: 0.9;
-        color: ${cssManager.bdTheme('hsl(215 70% 45%)', 'hsl(215 70% 65%)')};
+        opacity: 1;
+        color: var(--dees-color-text-primary);
      }

      .viewTab span {
@@ -256,7 +252,7 @@ export class DeesSimpleAppDash extends DeesElement {

      .appActions {
        padding: 12px 8px;
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
+        border-top: 1px solid var(--dees-color-border-default);
      }

      .action {
@@ -267,7 +263,7 @@ export class DeesSimpleAppDash extends DeesElement {
        border-radius: 8px;
        cursor: default;
        transition: all 0.15s ease;
-        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 65%)')};
+        color: var(--dees-color-text-secondary);
      }

      .action:hover {
@@ -295,19 +291,55 @@ export class DeesSimpleAppDash extends DeesElement {
        bottom: 24px;
        width: calc(100% - 240px);
        overflow: auto;
-        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 5%)')};
+        background: var(--dees-color-bg-secondary);
        overscroll-behavior: contain;
      }

+      .appcontent::before {
+        content: '';
+        position: sticky;
+        top: 0;
+        left: 0;
+        right: 0;
+        display: block;
+        height: 8px;
+        margin-bottom: -8px;
+        z-index: 10;
+        pointer-events: none;
+        background: linear-gradient(
+          to bottom,
+          ${cssManager.bdTheme('hsl(0 0% 0% / 0.08)', 'hsl(0 0% 0% / 0.4)')},
+          ${cssManager.bdTheme('hsl(0 0% 0% / 0.03)', 'hsl(0 0% 0% / 0.12)')},
+          transparent
+        );
+      }
+
+      .controlbar::before {
+        content: '';
+        position: absolute;
+        top: -8px;
+        left: 240px;
+        right: 0;
+        height: 8px;
+        pointer-events: none;
+        background: linear-gradient(
+          to top,
+          ${cssManager.bdTheme('hsl(0 0% 0% / 0.08)', 'hsl(0 0% 0% / 0.4)')},
+          ${cssManager.bdTheme('hsl(0 0% 0% / 0.03)', 'hsl(0 0% 0% / 0.12)')},
+          transparent
+        );
+      }
+
      .controlbar {
-        color: #fff;
+        color: var(--dees-color-text-muted);
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 24px;
-        background: ${cssManager.bdTheme('hsl(220 13% 18%)', 'hsl(220 13% 12%)')};
-        z-index: 2;
+        background: var(--dees-color-bg-tertiary);
+        border-top: 1px solid var(--dees-color-border-default);
+        z-index: 11;
        display: flex;
        justify-content: flex-end;
        align-items: center;
@@ -325,9 +357,10 @@ export class DeesSimpleAppDash extends DeesElement {
        height: 100%;
        white-space: nowrap;
        cursor: default;
-        color: hsl(0 0% 70%);
+        color: var(--dees-color-text-muted);
        transition: all 0.15s ease;
-        border-left: 1px solid hsl(0 0% 100% / 0.08);
+        border-left: 1px solid var(--dees-color-border-strong);
+
      }

      .control:first-child {
@@ -335,8 +368,8 @@ export class DeesSimpleAppDash extends DeesElement {
      }

      .control:hover {
-        background: hsl(0 0% 100% / 0.06);
-        color: hsl(0 0% 95%);
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
      }

      .control dees-icon {
@@ -344,11 +377,11 @@ export class DeesSimpleAppDash extends DeesElement {
      }

      .control.status-connected dees-icon {
-        color: hsl(142 70% 50%);
+        color: ${cssManager.bdTheme('hsl(142 70% 35%)', 'hsl(142 70% 50%)')};
      }

      .control.status-terminal dees-icon {
-        color: hsl(45 90% 55%);
+        color: ${cssManager.bdTheme('hsl(38 92% 45%)', 'hsl(38 92% 55%)')};
      }

      /* Global Message Banners */
@@ -371,7 +404,7 @@ export class DeesSimpleAppDash extends DeesElement {
        font-size: 13px;
        font-family: 'Geist Sans', sans-serif;
        font-weight: 500;
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
+        border-bottom: 1px solid var(--dees-color-border-default);
        animation: bannerSlideDown 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
      }

--- a/ts_web/elements/00group-simple/dees-simple-login/dees-simple-login.ts
+++ b/ts_web/elements/00group-simple/dees-simple-login/dees-simple-login.ts
@@ -31,9 +31,8 @@ export class DeesSimpleLogin extends DeesElement {
    themeDefaultStyles,
    cssManager.defaultStyles,
    css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        color: var(--dees-color-text-primary);
        user-select: none;
        display: block;
        width: 100%;
@@ -50,7 +49,7 @@ export class DeesSimpleLogin extends DeesElement {
        height: 100%;
        top: 0;
        left: 0;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
+        background: var(--dees-color-bg-primary);
      }

      .slotContainer {
@@ -83,17 +82,17 @@ export class DeesSimpleLogin extends DeesElement {
        font-size: 24px;
        font-weight: 600;
        letter-spacing: -0.025em;
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
+        color: var(--dees-color-text-primary);
      }

      .subheader {
        font-size: 14px;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
      }

      .login-card {
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-default);
        border-radius: 8px;
        padding: 24px;
      }
--- a/ts_web/elements/00group-workspace/dees-workspace-terminal-preview/dees-workspace-terminal-preview.ts
+++ b/ts_web/elements/00group-workspace/dees-workspace-terminal-preview/dees-workspace-terminal-preview.ts
@@ -81,21 +81,21 @@ export class DeesWorkspaceTerminalPreview extends DeesElement {
        height: 32px;
        font-size: 12px;
        font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
-        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
+        color: var(--dees-color-text-muted);
      }

      .terminal-header-icon {
-        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 50%)')};
+        color: var(--dees-color-text-muted);
      }

      .terminal-header-command {
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
+        color: var(--dees-color-text-secondary);
        font-weight: 500;
      }

      .terminal-container {
-        flex: 1;
-        position: relative;
+        position: absolute;
+        inset: 0;
        padding: 8px;
      }

@@ -243,12 +243,12 @@ export class DeesWorkspaceTerminalPreview extends DeesElement {
      }

      .xterm .xterm-viewport::-webkit-scrollbar-thumb {
-        background: ${cssManager.bdTheme('hsl(0 0% 80%)', 'hsl(0 0% 25%)')};
+        background: var(--dees-color-scrollbar-thumb);
        border-radius: 4px;
      }

      .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 70%)', 'hsl(0 0% 35%)')};
+        background: var(--dees-color-scrollbar-thumb-hover);
      }
    `,
  ];
--- 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, unsafeCSS, 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% 3.9%)', // #0a0a0a (matches sidebar/tile in dark)
+      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
+      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: {
@@ -146,13 +173,17 @@ 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
 // ============================================

 /**
 * 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 +201,93 @@ export const themeDefaults: ITheme = {
 */
 export const themeDefaultStyles: CSSResult = css`
  :host {
+    /* ========================================
+     * Colors — Background (from themeDefaults)
+     * ======================================== */
+    --dees-color-bg-primary: ${cssManager.bdTheme(l.bgPrimary, d.bgPrimary)};
+    --dees-color-bg-secondary: ${cssManager.bdTheme(l.bgSecondary, d.bgSecondary)};
+    --dees-color-bg-tertiary: ${cssManager.bdTheme(l.bgTertiary, d.bgTertiary)};
+
+    /* ========================================
+     * Colors — Text (from themeDefaults)
+     * ======================================== */
+    --dees-color-text-primary: ${cssManager.bdTheme(l.textPrimary, d.textPrimary)};
+    --dees-color-text-secondary: ${cssManager.bdTheme(l.textSecondary, d.textSecondary)};
+    --dees-color-text-muted: ${cssManager.bdTheme(l.textMuted, d.textMuted)};
+
+    /* ========================================
+     * Colors — Border (from themeDefaults)
+     * ======================================== */
+    --dees-color-border-default: ${cssManager.bdTheme(l.borderDefault, d.borderDefault)};
+    --dees-color-border-subtle: ${cssManager.bdTheme(l.borderSubtle, d.borderSubtle)};
+    --dees-color-border-strong: ${cssManager.bdTheme(l.borderStrong, d.borderStrong)};
+
+    /* ========================================
+     * Colors — Warm Text (from themeDefaults)
+     * ======================================== */
+    --dees-color-text-warm: ${cssManager.bdTheme(l.textWarm, d.textWarm)};
+
+    /* ========================================
+     * Colors — Accent (from themeDefaults)
+     * ======================================== */
+    --dees-color-accent-primary: ${cssManager.bdTheme(l.accentPrimary, d.accentPrimary)};
+    --dees-color-accent-success: ${cssManager.bdTheme(l.accentSuccess, d.accentSuccess)};
+    --dees-color-accent-warning: ${cssManager.bdTheme(l.accentWarning, d.accentWarning)};
+    --dees-color-accent-error: ${cssManager.bdTheme(l.accentError, d.accentError)};
+
+    /* ========================================
+     * Colors — Badge (from themeDefaults)
+     * ======================================== */
+    --dees-color-badge-default-bg: ${cssManager.bdTheme(l.badgeDefaultBg, d.badgeDefaultBg)};
+    --dees-color-badge-default-fg: ${cssManager.bdTheme(l.badgeDefaultFg, d.badgeDefaultFg)};
+    --dees-color-badge-success-bg: ${cssManager.bdTheme(l.badgeSuccessBg, d.badgeSuccessBg)};
+    --dees-color-badge-success-fg: ${cssManager.bdTheme(l.badgeSuccessFg, d.badgeSuccessFg)};
+    --dees-color-badge-warning-bg: ${cssManager.bdTheme(l.badgeWarningBg, d.badgeWarningBg)};
+    --dees-color-badge-warning-fg: ${cssManager.bdTheme(l.badgeWarningFg, d.badgeWarningFg)};
+    --dees-color-badge-error-bg: ${cssManager.bdTheme(l.badgeErrorBg, d.badgeErrorBg)};
+    --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
     * ======================================== */
--- a/ts_web/services/DeesServiceLibLoader.ts
+++ b/ts_web/services/DeesServiceLibLoader.ts
@@ -310,23 +310,16 @@ body > div[style*="top: -50000px"][style*="width: 50000px"] {
    }

    this.tiptapLoadingPromise = (async () => {
-      const version = CDN_VERSIONS.tiptap;
-
-      // Load all Tiptap modules in parallel
-      const [
-        coreModule,
-        starterKitModule,
-        underlineModule,
-        textAlignModule,
-        linkModule,
-        typographyModule,
-      ] = await Promise.all([
-        import(/* @vite-ignore */ `${CDN_BASE}/@tiptap/core@${version}/+esm`),
-        import(/* @vite-ignore */ `${CDN_BASE}/@tiptap/starter-kit@${version}/+esm`),
-        import(/* @vite-ignore */ `${CDN_BASE}/@tiptap/extension-underline@${version}/+esm`),
-        import(/* @vite-ignore */ `${CDN_BASE}/@tiptap/extension-text-align@${version}/+esm`),
-        import(/* @vite-ignore */ `${CDN_BASE}/@tiptap/extension-link@${version}/+esm`),
-        import(/* @vite-ignore */ `${CDN_BASE}/@tiptap/extension-typography@${version}/+esm`),
+      // Import directly from npm packages — bundled by esbuild into a single
+      // module graph. CDN loading caused duplicate ProseMirror instances because
+      // jsdelivr resolves each package's dependencies independently.
+      const [coreModule, starterKitModule, underlineModule, textAlignModule, linkModule, typographyModule] = await Promise.all([
+        import('@tiptap/core'),
+        import('@tiptap/starter-kit'),
+        import('@tiptap/extension-underline'),
+        import('@tiptap/extension-text-align'),
+        import('@tiptap/extension-link'),
+        import('@tiptap/extension-typography'),
      ]);

      this.tiptapLib = {
Author	SHA1	Message	Date
Juergen Kunz	31d728ec49	v3.55.3 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-04-04 10:50:19 +00:00
Juergen Kunz	ca290d1267	fix(theme): align component styles with shared theme CSS variables	2026-04-04 10:50:19 +00:00
Juergen Kunz	dcef6faa66	v3.55.2 Some checks failed Default (tags) / security (push) Failing after 1s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-04-04 09:42:44 +00:00
Juergen Kunz	fe9eb21fe0	fix(dees-simple-appdash,dees-simple-login): migrate app dashboard and login styles to shared theme CSS variables	2026-04-04 09:42:44 +00:00
Juergen Kunz	f352314971	v3.55.1 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-04-04 09:37:06 +00:00
Juergen Kunz	130ca68471	fix(appui): replace hardcoded app UI theme colors with shared dees CSS variables	2026-04-04 09:37:06 +00:00
Juergen Kunz	cdde25d0b4	v3.55.0 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-04-04 09:23:11 +00:00
Juergen Kunz	231c57b596	feat(theme): centralize theme CSS tokens in theme defaults and add missing interactive color variables	2026-04-04 09:23:11 +00:00
Juergen Kunz	167dcb2b0a	feat(theme): enhance color definitions and add warm text and badge colors	2026-04-04 09:12:54 +00:00
Juergen Kunz	fdccdcdf73	feat(dees-simple-appdash): update color themes for improved UI consistency	2026-04-04 08:38:54 +00:00
Juergen Kunz	bee1cafdb4	v3.54.0 Some checks failed Default (tags) / security (push) Failing after 1s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-04-04 08:13:56 +00:00
Juergen Kunz	42b40da67c	feat(media): rename media tile components to thumbnail components and add shared thumbnail base exports	2026-04-04 08:13:56 +00:00
Juergen Kunz	10cd1e2755	v3.53.0 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-04-03 20:27:50 +00:00
Juergen Kunz	68ed024aaa	feat(dees-pdf-viewer): add configurable sidebar position support	2026-04-03 20:27:50 +00:00
Juergen Kunz	6b6ccd0e3c	v3.52.5 Some checks failed Default (tags) / security (push) Failing after 1s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-04-03 19:58:51 +00:00
Juergen Kunz	d933c47b49	fix(dees-pdf-viewer): add top scroll offset when navigating to a page in the PDF viewer	2026-04-03 19:58:51 +00:00
Juergen Kunz	3defbba5fd	feat(pdf-viewer): enhance PDF viewer with file size display and footer layout	2026-04-03 19:50:46 +00:00
Juergen Kunz	02522c9a15	v3.52.4 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-04-03 19:25:18 +00:00
Juergen Kunz	4370efe6fb	fix(appui-maincontent): adjust main content background theme colors	2026-04-03 19:25:18 +00:00
Juergen Kunz	cde2a833ef	v3.52.3 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-04-03 13:51:03 +00:00
Juergen Kunz	31fbe22f55	fix(input-richtext): resolve rich text editor initialization and layout issues by bundling Tiptap locally and anchoring editor containers	2026-04-03 13:51:03 +00:00
Juergen Kunz	e6f501e804	v3.52.2 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 1s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-04-03 13:33:56 +00:00
Juergen Kunz	f052fb9c9f	fix(chart-log, simple-appdash): align terminal and dashboard theming with brightness mode and improve app dashboard scroll presentation	2026-04-03 13:33:56 +00:00
Juergen Kunz	77130ffb5e	v3.52.1 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-04-03 13:16:44 +00:00
Juergen Kunz	236b83d0a0	fix(dees-modal): refine modal styling, spacing, and animations for a cleaner overlay presentation	2026-04-03 13:16:44 +00:00
Juergen Kunz	a2e0760cc6	feat(dees-modal): refactor modal to use dees-tile component for improved layout and styling	2026-04-03 13:13:43 +00:00