domma-js 0.19.0 → 0.19.2

package/public/dist/themes/domma-themes.css

@@ -1,9 +1,9 @@
 /*!
- * Domma Themes v0.19.0
+ * Domma Themes v0.19.2
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-03-04T12:17:54.419Z
- * Commit: ff798af
+ * Built: 2026-03-06T13:45:53.761Z
+ * Commit: cd0754a
  */
 
 /**
@@ -4320,216 +4320,471 @@
     --dm-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
 }
 
-.dm-theme-grayve {
-    color-scheme: dark; /* Slate is typically a dark theme */
-
-    /* Tailwind-based color palette - adapting for grayve */
-    /* Slate (using bootswatch values) */
-    --dm-slate-50: #F8F9FA; /* Off-white */
-    --dm-slate-100: #E9ECEF;
-    --dm-slate-200: #DEE2E6;
-    --dm-slate-300: #CED4DA;
-    --dm-slate-400: #ADB5BD;
-    --dm-slate-500: #6C757D; /* Medium Gray */
-    --dm-slate-600: #495057;
-    --dm-slate-700: #343A40;
-    --dm-slate-800: #212529;
-    --dm-slate-900: #1a1e21; /* Dark Gray */
-    --dm-slate-950: #141619; /* Very Dark Gray */
-
-    /* Blues (for primary/info, etc.) */
-    --dm-blue-50: #e0f7fa;
-    --dm-blue-100: #b2ebf2;
-    --dm-blue-200: #80deea;
-    --dm-blue-300: #4dd0e1;
-    --dm-blue-400: #26c6da;
-    --dm-blue-500: #00bcd4; /* Bootswatch primary might be close to this or lighter */
-    --dm-blue-600: #00acc1;
-    --dm-blue-700: #0097a7;
-    --dm-blue-800: #00838f;
-    --dm-blue-900: #006064;
-    --dm-blue-950: #004d40;
-
-    /* Green (Success) */
-    --dm-green-500: #28a745;
-    --dm-green-400: #49cc61;
-    --dm-green-300: #6fd180;
-    --dm-green-600: #218838;
-
-    /* Red (Danger) */
-    --dm-red-500: #dc3545;
-    --dm-red-400: #e35a67;
-    --dm-red-300: #eb808a;
-    --dm-red-600: #c82333;
-
-    /* Amber (Warning) */
-    --dm-amber-500: #ffc107;
-    --dm-amber-400: #ffcd38;
-    --dm-amber-300: #ffd865;
-    --dm-amber-600: #e0a800;
-
-    /* Sky (Info - often similar to primary but distinct) */
-    --dm-sky-500: #17a2b8;
-    --dm-sky-400: #26d2e9;
-    --dm-sky-300: #51daec;
-    --dm-sky-600: #138496;
-
-    /* Semantic colors */
-    --dm-background: var(--dm-slate-900);
-    --dm-background-alt: var(--dm-slate-800);
-    --dm-surface: var(--dm-slate-800);
-    --dm-surface-raised: var(--dm-slate-700);
-    --dm-surface-overlay: rgba(0, 0, 0, 0.7);
-
-    /* Text */
-    --dm-text: var(--dm-slate-200);
-    --dm-text-secondary: var(--dm-slate-400);
-    --dm-text-muted: var(--dm-slate-500);
-    --dm-text-disabled: var(--dm-slate-600);
-    --dm-text-inverse: var(--dm-slate-900);
-
-    /* Borders */
-    --dm-border: var(--dm-slate-700);
-    --dm-border-light: var(--dm-slate-800);
-    --dm-border-dark: var(--dm-slate-600);
-    --dm-border-focus: var(--dm-blue-500); /* Use a vibrant blue for focus */
-    --dm-focus-ring: rgba(0, 188, 212, 0.3); /* Based on dm-blue-500 */
-    --dm-focus-ring-danger: rgba(220, 53, 69, 0.3); /* Based on dm-red-500 */
-
-    /* Interactive States */
-    --dm-hover-bg: rgba(255, 255, 255, 0.07);
-    --dm-active-bg: rgba(255, 255, 255, 0.1);
-    --dm-selected-bg: var(--dm-blue-600);
-    --dm-disabled-opacity: 0.4;
+/**
+ * Domma Grayve Light Theme
+ * Slate/cyan monochrome palette — complementary light variant
+ * Light mode variant
+ */
 
-    /* Brand Colors */
-    --dm-primary: var(--dm-blue-500);
-    --dm-primary-dark: var(--dm-blue-700);
-    --dm-primary-light: var(--dm-blue-300);
-    --dm-primary-hover: var(--dm-blue-400);
-    --dm-primary-active: var(--dm-blue-600);
-
-    --dm-secondary: var(--dm-slate-500);
-    --dm-secondary-hover: var(--dm-slate-400);
-    --dm-secondary-active: var(--dm-slate-300);
-
-    /* Status Colors */
-    --dm-success: var(--dm-green-500);
-    --dm-success-hover: var(--dm-green-400);
-    --dm-success-active: var(--dm-green-600);
-    --dm-success-light: rgba(40, 167, 69, 0.2);
-    --dm-success-dark: var(--dm-green-600);
+.dm-theme-grayve-light {
+    color-scheme: light;
 
-    --dm-danger: var(--dm-red-500);
-    --dm-danger-hover: var(--dm-red-400);
-    --dm-danger-active: var(--dm-red-600);
-    --dm-danger-light: rgba(220, 53, 69, 0.2);
-    --dm-danger-dark: var(--dm-red-600);
+    /* ================================================
+       FOUNDATIONAL COLORS - Light Mode Base
+       ================================================ */
 
-    --dm-warning: var(--dm-amber-400);
-    --dm-warning-hover: var(--dm-amber-300);
-    --dm-warning-active: var(--dm-amber-500);
-    --dm-warning-text: var(--dm-amber-900);
-    --dm-warning-light: rgba(255, 193, 7, 0.2);
-    --dm-warning-dark: var(--dm-amber-600);
+    /* Backgrounds - Light/white backgrounds */
+    --dm-background: #ffffff;
+    --dm-background-alt: #f8f9fa;
+    --dm-surface: #ffffff;
+    --dm-surface-raised: #f1f3f5;
+    --dm-surface-overlay: #f8f9fa;
 
-    --dm-info: var(--dm-sky-500);
-    --dm-info-hover: var(--dm-sky-400);
-    --dm-info-active: var(--dm-sky-600);
-    --dm-info-light: rgba(23, 162, 184, 0.2);
-    --dm-info-dark: var(--dm-sky-600);
-
-    /* Background Tints */
-    --dm-primary-bg: rgba(0, 188, 212, 0.15);
-    --dm-secondary-bg: rgba(108, 117, 125, 0.15);
-    --dm-success-bg: rgba(40, 167, 69, 0.15);
-    --dm-danger-bg: rgba(220, 53, 69, 0.15);
-    --dm-warning-bg: rgba(255, 193, 7, 0.15);
-    --dm-info-bg: rgba(23, 162, 184, 0.15);
-
-    /* Semantic Surface Colors */
-    --dm-surface-secondary: var(--dm-slate-900);
-    --dm-card-bg: var(--dm-slate-800);
-    --dm-card-border: var(--dm-slate-700);
-
-    /* Legacy color names (kept for backwards compatibility) */
-    --dm-light: var(--dm-slate-200);
-    --dm-dark: var(--dm-slate-800);
-    --dm-white: #ffffff;
-    --dm-black: #000000;
-
-    /* Grays (mapped to Slate) */
-    --dm-gray-50: var(--dm-slate-50);
-    --dm-gray-100: var(--dm-slate-100);
-    --dm-gray-200: var(--dm-slate-200);
-    --dm-gray-300: var(--dm-slate-300);
-    --dm-gray-400: var(--dm-slate-400);
-    --dm-gray-500: var(--dm-slate-500);
-    --dm-gray-600: var(--dm-slate-600);
-    --dm-gray-700: var(--dm-slate-700);
-    --dm-gray-800: var(--dm-slate-800);
-    --dm-gray-900: var(--dm-slate-900);
-    --dm-gray-950: var(--dm-slate-950);
-
-    /* Component-specific variables */
+    /* Text - Dark colours for readability on light */
+    --dm-text: #212529;
+    --dm-text-secondary: #495057;
+    --dm-text-muted: #6c757d;
+    --dm-text-disabled: #adb5bd;
+    --dm-text-inverse: #ffffff;
+
+    /* Borders - Subtle on light backgrounds */
+    --dm-border: #dee2e6;
+    --dm-border-light: #e9ecef;
+    --dm-border-dark: #ced4da;
+
+    /* ================================================
+       GRAYVE ACCENT COLORS - Darker cyan for light-mode contrast
+       ================================================ */
+
+    /* PRIMARY COLOURS - Dark Cyan for contrast */
+    --dm-primary: #00838f;
+    --dm-primary-hover: #006064;
+    --dm-primary-active: #00acc1;
+    --dm-primary-light: #e0f7fa;
+    --dm-primary-dark: #006064;
+
+    /* Focus ring with cyan colour */
+    --dm-focus-ring: 0 0 0 3px rgba(0, 131, 143, 0.3);
+    --dm-border-focus: #00838f;
+
+    /* ================================================
+       SECONDARY COLOURS - Blue Grey
+       ================================================ */
+    --dm-secondary: #546e7a;
+    --dm-secondary-hover: #607d8b;
+    --dm-secondary-active: #78909c;
+    --dm-secondary-light: rgba(84, 110, 122, 0.15);
+    --dm-secondary-dark: #455a64;
+
+    /* ================================================
+       STATUS COLOURS
+       ================================================ */
+    --dm-success: #2e7d32;
+    --dm-success-hover: #388e3c;
+    --dm-success-active: #1b5e20;
+    --dm-success-light: rgba(46, 125, 50, 0.1);
+    --dm-success-dark: #1b5e20;
+
+    --dm-info: #0277bd;
+    --dm-info-hover: #0288d1;
+    --dm-info-active: #01579b;
+    --dm-info-light: rgba(2, 119, 189, 0.1);
+    --dm-info-dark: #01579b;
+
+    --dm-warning: #f57c00;
+    --dm-warning-hover: #fb8c00;
+    --dm-warning-active: #e65100;
+    --dm-warning-text: #e65100;
+    --dm-warning-light: rgba(245, 124, 0, 0.1);
+    --dm-warning-dark: #e65100;
+
+    --dm-danger: #c62828;
+    --dm-danger-hover: #d32f2f;
+    --dm-danger-active: #b71c1c;
+    --dm-danger-light: rgba(198, 40, 40, 0.1);
+    --dm-danger-dark: #b71c1c;
+
+    /* ================================================
+       ACCENT COLOURS
+       ================================================ */
+    --dm-accent-1: #b2ebf2; /* Cyan 100 */
+    --dm-accent-2: #80deea; /* Cyan 200 */
+    --dm-accent-3: #00838f; /* Cyan 800 */
+    --dm-accent-4: #006064; /* Cyan 900 */
+
+    /* ================================================
+       INTERACTIVE STATES
+       ================================================ */
+    --dm-hover-bg: rgba(0, 131, 143, 0.06);
+    --dm-active-bg: rgba(0, 131, 143, 0.1);
+    --dm-selected-bg: #e0f7fa;
+    --dm-disabled-opacity: 0.4;
+
+    /* ================================================
+       COMPONENT-SPECIFIC COLORS
+       ================================================ */
+
+    /* Cards */
+    --dm-card-bg: var(--dm-surface);
+    --dm-card-border: var(--dm-border);
+    --dm-card-shadow: var(--dm-shadow-md);
+
+    /* Inputs */
     --dm-input-bg: var(--dm-surface);
     --dm-input-border: var(--dm-border-dark);
     --dm-input-text: var(--dm-text);
     --dm-input-placeholder: var(--dm-text-muted);
     --dm-input-focus-border: var(--dm-primary);
-    --dm-input-disabled-bg: var(--dm-slate-800);
+    --dm-input-disabled-bg: #f8f9fa;
 
+    /* Buttons */
+    --dm-btn-text: var(--dm-text);
+    --dm-btn-bg: var(--dm-surface);
+    --dm-btn-border: var(--dm-border-dark);
+
+    /* Tables */
+    --dm-table-bg: transparent;
     --dm-table-border: var(--dm-border);
+    --dm-table-header-bg: var(--dm-background-alt);
+    --dm-table-header-text: var(--dm-text);
+    --dm-table-stripe-bg: rgba(0, 0, 0, 0.02);
     --dm-table-hover-bg: var(--dm-hover-bg);
-    --dm-table-stripe-bg: rgba(255, 255, 255, 0.03);
+    --dm-table-selected-bg: var(--dm-selected-bg);
 
-    --dm-navbar-bg: var(--dm-surface);
-    --dm-navbar-text: var(--dm-text);
-    --dm-navbar-border: var(--dm-border);
+    /* Modals */
+    --dm-modal-bg: var(--dm-surface);
+    --dm-modal-border: var(--dm-border);
+    --dm-modal-backdrop: rgba(0, 0, 0, 0.5);
+    --dm-modal-shadow: var(--dm-shadow-xl);
 
-    --dm-dropdown-bg: var(--dm-surface-raised);
+    /* Dropdowns */
+    --dm-dropdown-bg: var(--dm-surface);
     --dm-dropdown-border: var(--dm-border);
+    --dm-dropdown-shadow: var(--dm-shadow-lg);
     --dm-dropdown-item-hover: var(--dm-hover-bg);
     --dm-dropdown-item-active: var(--dm-selected-bg);
 
+    /* Tooltips */
+    --dm-tooltip-bg: #212529;
+    --dm-tooltip-text: #ffffff;
+
+    /* Toasts */
+    --dm-toast-bg: var(--dm-surface);
+    --dm-toast-border: var(--dm-border);
+    --dm-toast-shadow: var(--dm-shadow-lg);
+
+    /* Navbar */
+    --dm-navbar-bg: var(--dm-surface);
+    --dm-navbar-text: var(--dm-text);
+    --dm-navbar-border: var(--dm-border);
+
+    /* Sidebar */
     --dm-sidebar-bg: var(--dm-surface);
+    --dm-sidebar-text: var(--dm-text);
     --dm-sidebar-border: var(--dm-border);
     --dm-sidebar-item-hover: var(--dm-hover-bg);
     --dm-sidebar-item-active: var(--dm-selected-bg);
 
+    /* Tabs */
+    --dm-tab-border: var(--dm-border);
+    --dm-tab-hover-bg: var(--dm-hover-bg);
+
+    /* Accordion */
+    --dm-accordion-bg: var(--dm-surface);
+    --dm-accordion-border: var(--dm-border);
+    --dm-accordion-header-bg: var(--dm-background-alt);
+    --dm-accordion-header-hover: var(--dm-hover-bg);
+
+    /* Badges */
+    --dm-badge-bg: var(--dm-secondary);
+    --dm-badge-text: #ffffff;
+
+    /* Pills */
+    --dm-pill-bg: #e0f7fa;
+    --dm-pill-color: #006064;
+    --dm-pill-hover-bg: #b2ebf2;
+
+    /* Autocomplete / Pillbox */
     --dm-autocomplete-bg: var(--dm-surface);
     --dm-autocomplete-border: var(--dm-border);
     --dm-autocomplete-shadow: var(--dm-shadow-md);
     --dm-autocomplete-item-hover: var(--dm-hover-bg);
     --dm-autocomplete-item-active: var(--dm-selected-bg);
     --dm-autocomplete-highlight: var(--dm-primary-light);
-
     --dm-pillbox-bg: var(--dm-surface);
     --dm-pillbox-border: var(--dm-border);
-    --dm-pill-bg: var(--dm-gray-700); /* Darker pill background for dark theme */
-    --dm-pill-color: var(--dm-text);
-    --dm-pill-hover-bg: var(--dm-gray-600);
 
+    /* Progress */
+    --dm-progress-bg: #e9ecef;
+
+    /* Scrollbar */
+    --dm-scrollbar-track: #f8f9fa;
+    --dm-scrollbar-thumb: #ced4da;
+    --dm-scrollbar-thumb-hover: #adb5bd;
+
+    /* Code */
+    --dm-code-bg: #f8f9fa;
+    --dm-code-text: #00838f;
+    --dm-code-border: var(--dm-border);
+
+    /* ================================================
+       SHADOWS - Standard for light mode
+       ================================================ */
+    --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+    --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+}
+
+/* Syntax highlighting tokens for grayve-light */
+.dm-theme-grayve-light .code-block .syntax-keyword {
+    color: #7c4dff; /* Deep Purple */
+    font-weight: 500;
+}
+
+.dm-theme-grayve-light .code-block .syntax-string,
+.dm-theme-grayve-light .code-block .syntax-template-string {
+    color: #2e7d32; /* Green */
+}
+
+.dm-theme-grayve-light .code-block .syntax-function {
+    color: #00838f; /* Cyan */
+}
+
+/**
+ * Domma Grayve Dark Theme
+ * Slate/cyan monochrome palette — adapted from Bootswatch Slate
+ * Dark mode variant
+ */
+
+.dm-theme-grayve-dark {
+    color-scheme: dark;
+
+    /* ================================================
+       FOUNDATIONAL COLORS - Dark Mode Base
+       ================================================ */
+
+    /* Backgrounds - Slate dark backgrounds */
+    --dm-background: #1a1e21;     /* slate-900 */
+    --dm-background-alt: #212529; /* slate-800 */
+    --dm-surface: #212529;        /* slate-800 */
+    --dm-surface-raised: #343A40; /* slate-700 */
+    --dm-surface-overlay: #343A40;/* slate-700 */
+
+    /* Text - Light colours for readability on dark */
+    --dm-text: #DEE2E6;           /* slate-200 */
+    --dm-text-secondary: #ADB5BD; /* slate-400 */
+    --dm-text-muted: #6C757D;     /* slate-500 */
+    --dm-text-disabled: #495057;  /* slate-600 */
+    --dm-text-inverse: #1a1e21;   /* slate-900 */
+
+    /* Borders - Subtle on dark backgrounds */
+    --dm-border: #343A40;         /* slate-700 */
+    --dm-border-light: #212529;   /* slate-800 */
+    --dm-border-dark: #495057;    /* slate-600 */
+
+    /* ================================================
+       GRAYVE ACCENT COLORS - Cyan/teal tones
+       ================================================ */
+
+    /* PRIMARY COLOURS - Cyan Teal */
+    --dm-primary: #00bcd4;
+    --dm-primary-hover: #00acc1;
+    --dm-primary-active: #26c6da;
+    --dm-primary-light: #e0f7fa;
+    --dm-primary-dark: #0097a7;
+
+    /* Focus ring with cyan colour */
+    --dm-focus-ring: 0 0 0 3px rgba(0, 188, 212, 0.3);
+    --dm-border-focus: #00bcd4;
+
+    /* ================================================
+       SECONDARY COLOURS - Blue Grey
+       ================================================ */
+    --dm-secondary: #6C757D;
+    --dm-secondary-hover: #ADB5BD;
+    --dm-secondary-active: #CED4DA;
+    --dm-secondary-light: #E9ECEF;
+    --dm-secondary-dark: #495057;
+
+    /* ================================================
+       STATUS COLOURS
+       ================================================ */
+    --dm-success: #28a745;
+    --dm-success-hover: #49cc61;
+    --dm-success-active: #218838;
+    --dm-success-light: rgba(40, 167, 69, 0.2);
+    --dm-success-dark: #1e7e34;
+
+    --dm-info: #17a2b8;
+    --dm-info-hover: #26d2e9;
+    --dm-info-active: #138496;
+    --dm-info-light: rgba(23, 162, 184, 0.2);
+    --dm-info-dark: #117a8b;
+
+    --dm-warning: #ffc107;
+    --dm-warning-hover: #ffcd38;
+    --dm-warning-active: #e0a800;
+    --dm-warning-text: #856404;
+    --dm-warning-light: rgba(255, 193, 7, 0.2);
+    --dm-warning-dark: #d39e00;
+
+    --dm-danger: #dc3545;
+    --dm-danger-hover: #e35a67;
+    --dm-danger-active: #c82333;
+    --dm-danger-light: rgba(220, 53, 69, 0.2);
+    --dm-danger-dark: #bd2130;
+
+    /* ================================================
+       ACCENT COLOURS
+       ================================================ */
+    --dm-accent-1: #80deea; /* Cyan 200 */
+    --dm-accent-2: #4dd0e1; /* Cyan 300 */
+    --dm-accent-3: #00bcd4; /* Cyan 500 */
+    --dm-accent-4: #0097a7; /* Cyan 700 */
+
+    /* ================================================
+       INTERACTIVE STATES
+       ================================================ */
+    --dm-hover-bg: rgba(255, 255, 255, 0.07);
+    --dm-active-bg: rgba(255, 255, 255, 0.1);
+    --dm-selected-bg: #00838f;
+    --dm-disabled-opacity: 0.4;
+
+    /* ================================================
+       COMPONENT-SPECIFIC COLORS
+       ================================================ */
+
+    /* Cards */
+    --dm-card-bg: var(--dm-surface);
+    --dm-card-border: var(--dm-border);
+    --dm-card-shadow: var(--dm-shadow-md);
+
+    /* Inputs */
+    --dm-input-bg: var(--dm-surface);
+    --dm-input-border: var(--dm-border-dark);
+    --dm-input-text: var(--dm-text);
+    --dm-input-placeholder: var(--dm-text-muted);
+    --dm-input-focus-border: var(--dm-primary);
+    --dm-input-disabled-bg: #212529;
+
+    /* Buttons */
+    --dm-btn-text: var(--dm-text);
+    --dm-btn-bg: var(--dm-surface);
+    --dm-btn-border: var(--dm-border-dark);
+
+    /* Tables */
+    --dm-table-bg: transparent;
+    --dm-table-border: var(--dm-border);
+    --dm-table-header-bg: var(--dm-background-alt);
+    --dm-table-header-text: var(--dm-text);
+    --dm-table-stripe-bg: rgba(255, 255, 255, 0.03);
+    --dm-table-hover-bg: var(--dm-hover-bg);
+    --dm-table-selected-bg: var(--dm-selected-bg);
+
+    /* Modals */
+    --dm-modal-bg: var(--dm-surface);
+    --dm-modal-border: var(--dm-border);
+    --dm-modal-backdrop: rgba(0, 0, 0, 0.7);
+    --dm-modal-shadow: var(--dm-shadow-xl);
+
+    /* Dropdowns */
+    --dm-dropdown-bg: var(--dm-surface-raised);
+    --dm-dropdown-border: var(--dm-border);
+    --dm-dropdown-shadow: var(--dm-shadow-lg);
+    --dm-dropdown-item-hover: var(--dm-hover-bg);
+    --dm-dropdown-item-active: var(--dm-selected-bg);
+
+    /* Tooltips */
+    --dm-tooltip-bg: #1a1e21;
+    --dm-tooltip-text: #ffffff;
+
+    /* Toasts */
+    --dm-toast-bg: var(--dm-surface);
+    --dm-toast-border: var(--dm-border);
+    --dm-toast-shadow: var(--dm-shadow-lg);
+
+    /* Navbar */
+    --dm-navbar-bg: var(--dm-surface);
+    --dm-navbar-text: var(--dm-text);
+    --dm-navbar-border: var(--dm-border);
+
+    /* Sidebar */
+    --dm-sidebar-bg: var(--dm-surface);
+    --dm-sidebar-text: var(--dm-text);
+    --dm-sidebar-border: var(--dm-border);
+    --dm-sidebar-item-hover: var(--dm-hover-bg);
+    --dm-sidebar-item-active: var(--dm-selected-bg);
+
+    /* Tabs */
     --dm-tab-border: var(--dm-border);
     --dm-tab-hover-bg: var(--dm-hover-bg);
-    --dm-tab-active-border: var(--dm-primary);
-    --dm-tab-active-text: var(--dm-primary);
 
+    /* Accordion */
+    --dm-accordion-bg: var(--dm-surface);
     --dm-accordion-border: var(--dm-border);
+    --dm-accordion-header-bg: var(--dm-background-alt);
     --dm-accordion-header-hover: var(--dm-hover-bg);
+
+    /* Badges */
+    --dm-badge-bg: var(--dm-secondary);
+    --dm-badge-text: #1a1e21;
+
+    /* Pills */
+    --dm-pill-bg: #343A40;
+    --dm-pill-color: var(--dm-text);
+    --dm-pill-hover-bg: #495057;
+
+    /* Autocomplete / Pillbox */
+    --dm-autocomplete-bg: var(--dm-surface);
+    --dm-autocomplete-border: var(--dm-border);
+    --dm-autocomplete-shadow: var(--dm-shadow-md);
+    --dm-autocomplete-item-hover: var(--dm-hover-bg);
+    --dm-autocomplete-item-active: var(--dm-selected-bg);
+    --dm-autocomplete-highlight: var(--dm-primary-light);
+    --dm-pillbox-bg: var(--dm-surface);
+    --dm-pillbox-border: var(--dm-border);
+
+    /* Progress */
+    --dm-progress-bg: #343A40;
+
+    /* Scrollbar */
+    --dm-scrollbar-track: #212529;
+    --dm-scrollbar-thumb: #495057;
+    --dm-scrollbar-thumb-hover: #6C757D;
+
+    /* Code */
+    --dm-code-bg: #1a1e21;
+    --dm-code-text: #80deea;
+    --dm-code-border: var(--dm-border);
+
+    /* ================================================
+       SHADOWS - Subtle for dark mode
+       ================================================ */
+    --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+    --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
 }
 
-/* Syntax highlighting tokens for grayve (assuming similar to dark theme) */
-.dm-theme-grayve .code-block .syntax-keyword {
+/* Syntax highlighting tokens for grayve-dark */
+.dm-theme-grayve-dark .code-block .syntax-keyword {
     color: #c792ea; /* Purple */
     font-weight: 500;
 }
 
-.dm-theme-grayve .code-block .syntax-string,
-.dm-theme-grayve .code-block .syntax-template-string {
+.dm-theme-grayve-dark .code-block .syntax-string,
+.dm-theme-grayve-dark .code-block .syntax-template-string {
     color: #c3e88d; /* Green */
 }
 
-.dm-theme-grayve .code-block .syntax-function {
+.dm-theme-grayve-dark .code-block .syntax-function {
     color: #82aaff; /* Light Blue */
 }
+

package/templates/kickstart/CLAUDE.md

@@ -554,7 +554,7 @@ $(document.body).on('themechange', (e) => {
 - **Silver:** `silver-light`, `silver-dark` - Cool gray tones
 - **Charcoal:** `charcoal-light`, `charcoal-dark` - Professional gray (default)
 - **Christmas:** `christmas-light`, `christmas-dark` - Festive red/green
-- **Grayve:** `grayve` - Monochrome design theme
+- **Grayve:** `grayve-light`, `grayve-dark` - Monochrome slate theme
 - **Core:** `core-light` - Minimal, clean theme
 
 ### Icons (`I` / `Domma.icons`)