domma-js 0.41.0 → 0.44.0

package/public/dist/bundles/domma-complete.css

@@ -1,8 +1,8 @@
 /*!
- * Domma Complete CSS Bundle v0.41.0
+ * Domma Complete CSS Bundle v0.44.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-08-22T13:41:49.437Z
+ * Built: 2026-09-22T03:19:19.495Z
  */
 
 /* ============================================
@@ -11,11 +11,11 @@
    ============================================ */
 
 /*!
- * Domma Core CSS v0.41.0
+ * Domma Core CSS v0.44.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-08-22T13:41:49.294Z
- * Commit: 5d8b7e1
+ * Built: 2026-09-22T03:19:19.324Z
+ * Commit: a452582
  */
 
 /**
@@ -4838,11 +4838,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * Domma Grid CSS v0.41.0
+ * Domma Grid CSS v0.44.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-08-22T13:41:49.299Z
- * Commit: 5d8b7e1
+ * Built: 2026-09-22T03:19:19.327Z
+ * Commit: a452582
  */
 
 /**
@@ -5463,11 +5463,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * Domma Elements CSS v0.41.0
+ * Domma Elements CSS v0.44.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-08-22T13:41:49.303Z
- * Commit: 5d8b7e1
+ * Built: 2026-09-22T03:19:19.332Z
+ * Commit: a452582
  */
 
 /**
@@ -10800,7 +10800,9 @@ code {
     z-index: 1000;
     min-width: 10rem;
     padding: 0.5rem 0;
-    margin: 0.125rem 0 0;
+    /* No margin: the menu is placed by JS from `offset`, and a margin here would
+       silently add to it, so the box would not sit where it was measured to. */
+    margin: 0;
     background-color: var(--dm-surface);
     border: 1px solid var(--dm-border);
     border-radius: var(--dm-radius-md);
@@ -10818,30 +10820,13 @@ code {
 }
 
 /*
- * Hover bridge: the menu is rendered as a document.body sibling positioned with a
- * small offset/margin gap from its trigger. On a hover-triggered dropdown that gap
- * is a dead-zone - the pointer leaves the trigger before reaching the menu, firing
- * the close. These transparent pseudo-elements extend the menu's hoverable area
- * above and below it, so the trigger→menu path is one continuous hover surface.
- * Only present on hover dropdowns, so click dropdowns are unaffected.
+ * The trigger→menu gap is bridged in JS, not CSS. A transparent pseudo-element
+ * strip used to sit above and below the menu to keep the hover path continuous,
+ * but it only ever covered a fixed 12px directly in line with the menu box: any
+ * `offset` larger than that, or an approach taken at an angle, fell outside it,
+ * and while open it also blocked the page underneath. Dropdown._pointerInSafeZone()
+ * does the same job geometrically - see src/elements.js.
  */
-.domma-dropdown-menu-hover::before,
-.domma-dropdown-menu-hover::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    right: 0;
-    height: 0.75rem;
-    /* transparent - a hover surface only, never painted */
-}
-
-.domma-dropdown-menu-hover::before {
-    bottom: 100%; /* bridges the gap when the menu opens below the trigger */
-}
-
-.domma-dropdown-menu-hover::after {
-    top: 100%; /* bridges the gap when the menu opens above the trigger */
-}
 
 .domma-dropdown-item {
     display: block;
@@ -13573,6 +13558,428 @@ code {
     }
 }
 
+/* ============================================
+   Context Menu
+   Bound to a container, delegated to its children. Nested menus shadow their
+   parent for the region they cover; see src/context-menu.js for resolution.
+   ============================================ */
+
+/*
+ * Every themeable value is a custom property with the theme token as its
+ * fallback, so an unstyled menu follows the active theme and only the options
+ * actually passed override it. Nothing here generates per-instance rules.
+ */
+.dm-context-menu {
+    position: fixed;
+    z-index: 10050;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    padding: 4px;
+    overflow-y: auto;
+    background: var(--dm-ctx-surface, var(--dm-surface));
+    color: var(--dm-text);
+    border: 1px solid var(--dm-ctx-accent, var(--dm-border));
+    border-radius: var(--dm-ctx-radius, var(--dm-radius-md));
+    box-shadow: var(--dm-ctx-shadow, 0 8px 24px rgba(0, 0, 0, 0.18));
+    font-size: 0.875rem;
+    transform-origin: top left;
+    outline: none;
+    transition:
+        opacity var(--dm-ctx-duration, 120ms) var(--dm-ctx-easing, ease),
+        transform var(--dm-ctx-duration, 120ms) var(--dm-ctx-easing, ease);
+}
+
+/*
+ * A translucent panel needs its own layer: mixing the surface with transparent
+ * keeps the text fully opaque, which `opacity` on the element would not - that
+ * would fade the labels along with the background and fail contrast outright.
+ */
+.dm-context-menu[style*="--dm-ctx-opacity"] {
+    background: color-mix(
+        in srgb,
+        var(--dm-ctx-surface, var(--dm-surface)) calc(var(--dm-ctx-opacity) * 100%),
+        transparent
+    );
+    backdrop-filter: blur(10px);
+}
+
+/* An accent tints the leading edge as well as the border. */
+.dm-context-menu[style*="--dm-ctx-accent"] {
+    border-left-width: 3px;
+}
+
+/* ---- transitions ---- */
+
+.dm-context-menu[data-transition] {
+    opacity: 0;
+}
+
+.dm-context-menu[data-transition="scale"] { transform: scale(0.97); }
+.dm-context-menu[data-transition="fade"]  { transform: none; }
+.dm-context-menu[data-transition="slide"] { transform: translateY(-6px); }
+.dm-context-menu[data-transition="none"]  { transform: none; transition: none; }
+
+.dm-context-menu.is-open {
+    opacity: 1;
+    transform: none;
+}
+
+/* ---- density ---- */
+
+.dm-context-menu[data-density="compact"] {
+    font-size: 0.8125rem;
+    padding: 2px;
+}
+
+.dm-context-menu[data-density="compact"] .dm-context-menu-item {
+    padding: 0.25rem 0.45rem;
+}
+
+.dm-context-menu-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 0.4rem 0.6rem;
+    background: none;
+    border: 0;
+    border-radius: var(--dm-radius-sm);
+    color: inherit;
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+    transition: background var(--dm-transition-fast);
+}
+
+.dm-context-menu-item:hover:not(.is-disabled),
+.dm-context-menu-item:focus-visible {
+    background: var(--dm-background-alt);
+    outline: none;
+}
+
+/*
+ * The accent tints the hover wash rather than the label. A named colour cannot
+ * be guaranteed readable against whatever surface the menu is on - the same
+ * trap that made --dm-danger 1.02:1 on admin-smooth-steel - so the text keeps
+ * the one pairing every theme guarantees and the accent carries the meaning.
+ */
+.dm-context-menu[style*="--dm-ctx-accent"] .dm-context-menu-item:hover:not(.is-disabled),
+.dm-context-menu[style*="--dm-ctx-accent"] .dm-context-menu-item:focus-visible {
+    background: color-mix(in srgb, var(--dm-ctx-accent) 16%, transparent);
+}
+
+.dm-context-menu-item:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--dm-border-focus);
+}
+
+.dm-context-menu-item.is-disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+}
+
+/*
+ * Destructive items carry their warning in a tinted wash rather than in red
+ * text. A saturated red cannot be read on a mid-tone surface - on
+ * admin-smooth-steel, --dm-danger against --dm-surface lands at 1.02:1 - and
+ * no single red works across a light surface, a dark one and the mid-tone
+ * themes in between. The wash is mixed FROM the surface, so it adapts, and the
+ * label keeps the one colour every theme guarantees is readable on it.
+ */
+.dm-context-menu-item.is-danger {
+    background: color-mix(in srgb, var(--dm-danger) 10%, transparent);
+}
+
+.dm-context-menu-item.is-danger:hover:not(.is-disabled) {
+    background: color-mix(in srgb, var(--dm-danger) 22%, transparent);
+}
+
+.dm-context-menu-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 16px;
+    width: 16px;
+    height: 16px;
+}
+
+.dm-context-menu-label {
+    flex: 1 1 auto;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.dm-context-menu-shortcut {
+    flex: 0 0 auto;
+    padding-left: 1rem;
+    font-size: 0.78em;
+    font-variant-numeric: tabular-nums;
+    opacity: 0.8;
+}
+
+.dm-context-menu-chevron {
+    display: inline-flex;
+    flex: 0 0 auto;
+    margin-left: auto;
+    padding-left: 0.4rem;
+    opacity: 0.7;
+}
+
+.dm-context-menu-item.has-submenu .dm-context-menu-label {
+    flex: 0 1 auto;
+}
+
+.dm-context-menu-item.is-checked .dm-context-menu-icon::after {
+    content: "";
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--dm-ctx-accent, var(--dm-primary));
+}
+
+.dm-context-menu-divider {
+    height: 1px;
+    margin: 4px 2px;
+    background: var(--dm-border);
+}
+
+.dm-context-menu-header {
+    padding: 0.35rem 0.6rem 0.2rem;
+    font-size: 0.72rem;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+
+/* The affordance that tells people a menu is there at all. */
+.dm-context-menu-host {
+    cursor: context-menu;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .dm-context-menu,
+    .dm-context-menu[data-transition] {
+        transition: none !important;
+        transform: none !important;
+    }
+}
+
+/* ============================================
+   DatePicker
+   --------------------------------------------
+   Every colour is a --dm-* token that the theme layer defines, so the calendar
+   takes whatever theme the host is wearing - including one applied to a region
+   by a theme override, since the tokens are inherited rather than hard-coded.
+   Nothing here invents a token: an undefined var() resolves to nothing and
+   paints a blank panel.
+   ============================================ */
+
+.dm-datepicker {
+    position: absolute;
+    z-index: 1080;
+    width: max-content;
+    padding: 0.5rem;
+
+    font-family: var(--dm-font-sans);
+    font-size: var(--dm-font-size-sm);
+    color: var(--dm-text);
+
+    background: var(--dm-surface-raised, var(--dm-surface));
+    border: 1px solid var(--dm-border);
+    border-radius: var(--dm-radius-lg);
+    box-shadow: var(--dm-shadow-lg);
+}
+
+.dm-datepicker--inline {
+    position: static;
+    box-shadow: none;
+    margin-top: 0.35rem;
+}
+
+/* Header: month and year pickers between two chevrons. */
+
+.dm-datepicker-head {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    margin-bottom: 0.4rem;
+}
+
+.dm-datepicker-pickers {
+    display: flex;
+    gap: 0.3rem;
+    flex: 1 1 auto;
+    justify-content: center;
+}
+
+/*
+ * Five rules below are recorded in scripts/validate-contrast-pairs.baseline.json
+ * rather than fixed, and the reason is the theme system, not this component.
+ *
+ * The three `--dm-text-disabled` rules (.is-outside, .is-disabled and the
+ * disabled action) sit below 3:1 on `--dm-surface-raised` in ALL 33 themes -
+ * 1.37 at worst. That is the disabled ramp behaving as designed, and WCAG AA
+ * 1.4.3 exempts inactive controls from the contrast minimum. Lifting it to 4.5
+ * here would make disabled dates LIGHTER than the muted weekday header, which
+ * inverts the hierarchy.
+ *
+ * The two `--dm-text-muted` rules (.dm-datepicker-nav, .dm-datepicker-week)
+ * fail on `--dm-surface-raised` in 23 of the 33 themes, worst 3.11. No token
+ * below `--dm-text` clears AA on a raised surface everywhere, so this is not
+ * fixable by picking a different variable - the muted ramp itself would have to
+ * be redesigned across every theme. Using `--dm-text` instead would pass, and
+ * cost the weekday header and adjacent-month days the de-emphasis that makes a
+ * calendar readable at a glance.
+ *
+ * If the muted ramp is ever revisited, `npm run validate:contrast
+ * --update-baseline` should drop these two.
+ */
+.dm-datepicker-nav {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    flex: 0 0 auto;
+
+    color: var(--dm-text-muted);
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--dm-radius-md);
+    cursor: pointer;
+    transition: background var(--dm-transition-fast), color var(--dm-transition-fast);
+}
+
+.dm-datepicker-nav:hover {
+    color: var(--dm-text);
+    background: var(--dm-hover-bg);
+}
+
+.dm-datepicker-select {
+    padding: 0.2rem 0.35rem;
+    font: inherit;
+    color: var(--dm-input-text, var(--dm-text));
+    background: var(--dm-input-bg, var(--dm-surface));
+    border: 1px solid var(--dm-input-border, var(--dm-border));
+    border-radius: var(--dm-radius-md);
+    cursor: pointer;
+}
+
+.dm-datepicker-select:focus-visible {
+    outline: none;
+    border-color: var(--dm-input-focus-border, var(--dm-primary));
+    box-shadow: var(--dm-focus-ring);
+}
+
+/* The grid. Seven equal columns, so the weekday row and the days line up
+   whatever the digits are - a table would do the same but cannot carry the
+   roles this needs. */
+
+.dm-datepicker-row {
+    display: grid;
+    grid-template-columns: repeat(7, 2rem);
+    gap: 2px;
+}
+
+.dm-datepicker[data-week-numbers] .dm-datepicker-row {
+    grid-template-columns: 1.6rem repeat(7, 2rem);
+}
+
+.dm-datepicker-weekdays { margin-bottom: 2px; }
+
+.dm-datepicker-weekday,
+.dm-datepicker-week {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 1.6rem;
+    font-size: var(--dm-font-size-xs);
+    font-weight: var(--dm-font-weight-semibold);
+    color: var(--dm-text-muted);
+}
+
+.dm-datepicker-week { font-weight: 400; }
+
+.dm-datepicker-day {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 2rem;
+    padding: 0;
+
+    font: inherit;
+    font-variant-numeric: tabular-nums;
+    color: var(--dm-text);
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--dm-radius-md);
+    cursor: pointer;
+    transition: background var(--dm-transition-fast), color var(--dm-transition-fast);
+}
+
+.dm-datepicker-day:hover:not(.is-disabled) { background: var(--dm-hover-bg); }
+
+.dm-datepicker-day:focus-visible {
+    outline: none;
+    box-shadow: var(--dm-focus-ring);
+}
+
+/* The days either side of the month are shown rather than blanked: a calendar
+   with holes in it is harder to read than one that runs on. */
+.dm-datepicker-day.is-outside { color: var(--dm-text-disabled); }
+
+.dm-datepicker-day.is-today {
+    border-color: var(--dm-primary);
+    font-weight: var(--dm-font-weight-semibold);
+}
+
+.dm-datepicker-day.is-selected,
+.dm-datepicker-day.is-selected:hover {
+    color: var(--dm-primary-text);
+    background: var(--dm-primary);
+    border-color: var(--dm-primary);
+}
+
+.dm-datepicker-day.is-disabled {
+    color: var(--dm-text-disabled);
+    cursor: not-allowed;
+    opacity: var(--dm-disabled-opacity);
+}
+
+/* Footer actions. */
+
+.dm-datepicker-foot {
+    display: flex;
+    gap: 0.35rem;
+    justify-content: flex-end;
+    margin-top: 0.45rem;
+    padding-top: 0.45rem;
+    border-top: 1px solid var(--dm-border);
+}
+
+.dm-datepicker-action {
+    padding: 0.2rem 0.6rem;
+    font: inherit;
+    font-size: var(--dm-font-size-xs);
+    color: var(--dm-link);
+    background: transparent;
+    border: 0;
+    border-radius: var(--dm-radius-md);
+    cursor: pointer;
+}
+
+.dm-datepicker-action:hover:not(:disabled) {
+    color: var(--dm-link-hover);
+    background: var(--dm-hover-bg);
+}
+
+.dm-datepicker-action:disabled {
+    color: var(--dm-text-disabled);
+    cursor: not-allowed;
+}
+
 
 /* ============================================
    THEME SYSTEM
@@ -13580,11 +13987,11 @@ code {
    ============================================ */
 
 /*!
- * Domma Themes v0.41.0
+ * Domma Themes v0.44.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-08-22T13:41:49.280Z
- * Commit: 5d8b7e1
+ * Built: 2026-09-22T03:19:19.311Z
+ * Commit: a452582
  */
 
 /**
@@ -19732,40 +20139,40 @@ code {
 .dm-theme-admin-smooth-steel {
     color-scheme: dark;
 
-    --dm-background: #586170;
-    --dm-background-alt: #4f5764;
-    --dm-surface: #646d7c;
-    --dm-surface-raised: #6c7686;
-    --dm-surface-overlay: #6c7686;
+    --dm-background: #353a43;
+    --dm-background-alt: #2f343c;
+    --dm-surface: #3c414a;
+    --dm-surface-raised: #414750;
+    --dm-surface-overlay: #414750;
     --dm-text: #f7f9fb;
     --dm-text-secondary: #d2d8e0;
     --dm-text-muted: #b3bcc8;
     --dm-text-disabled: #8a93a1;
     --dm-text-inverse: #1f2733;
-    --dm-border: #6f7888;
-    --dm-border-light: #5c6573;
-    --dm-border-dark: #7a8494;
+    --dm-border: #434852;
+    --dm-border-light: #373d45;
+    --dm-border-dark: #494f59;
     --dm-hover-bg: rgba(255, 255, 255, 0.07);
     --dm-active-bg: rgba(255, 255, 255, 0.10);
     --dm-disabled-opacity: 0.4;
-    --dm-sidebar-bg: #454d5a;
+    --dm-sidebar-bg: #292e36;
     --dm-sidebar-text: #d2d8e0;
-    --dm-sidebar-border: #3b424d;
-    --dm-navbar-bg: #4f5764;
+    --dm-sidebar-border: #232830;
+    --dm-navbar-bg: #2f343c;
     --dm-navbar-text: #f7f9fb;
-    --dm-navbar-border: #5c6573;
-    --dm-table-header-bg: #535b69;
+    --dm-navbar-border: #373d45;
+    --dm-table-header-bg: #32373f;
     --dm-table-stripe-bg: rgba(255, 255, 255, 0.03);
     --dm-table-hover-bg: rgba(255, 255, 255, 0.07);
     --dm-modal-backdrop: rgba(0, 0, 0, 0.6);
     --dm-tooltip-bg: #1f2733;
     --dm-tooltip-text: #ffffff;
-    --dm-scrollbar-track: #4f5764;
-    --dm-scrollbar-thumb: #7a8494;
-    --dm-scrollbar-thumb-hover: #8b95a5;
-    --dm-code-bg: #454d5a;
+    --dm-scrollbar-track: #2f343c;
+    --dm-scrollbar-thumb: #494f59;
+    --dm-scrollbar-thumb-hover: #5a616c;
+    --dm-code-bg: #292e36;
     --dm-code-text: #ffd9a8;
-    --dm-progress-bg: #535b69;
+    --dm-progress-bg: #32373f;
 
     --dm-primary: #3b76bc;
     --dm-primary-hover: #356bab;
@@ -19870,40 +20277,40 @@ code {
 .dm-theme-admin-smooth-indigo {
     color-scheme: dark;
 
-    --dm-background: #586170;
-    --dm-background-alt: #4f5764;
-    --dm-surface: #646d7c;
-    --dm-surface-raised: #6c7686;
-    --dm-surface-overlay: #6c7686;
+    --dm-background: #353a43;
+    --dm-background-alt: #2f343c;
+    --dm-surface: #3c414a;
+    --dm-surface-raised: #414750;
+    --dm-surface-overlay: #414750;
     --dm-text: #f7f9fb;
     --dm-text-secondary: #d2d8e0;
     --dm-text-muted: #b3bcc8;
     --dm-text-disabled: #8a93a1;
     --dm-text-inverse: #1f2733;
-    --dm-border: #6f7888;
-    --dm-border-light: #5c6573;
-    --dm-border-dark: #7a8494;
+    --dm-border: #434852;
+    --dm-border-light: #373d45;
+    --dm-border-dark: #494f59;
     --dm-hover-bg: rgba(255, 255, 255, 0.07);
     --dm-active-bg: rgba(255, 255, 255, 0.10);
     --dm-disabled-opacity: 0.4;
-    --dm-sidebar-bg: #454d5a;
+    --dm-sidebar-bg: #292e36;
     --dm-sidebar-text: #d2d8e0;
-    --dm-sidebar-border: #3b424d;
-    --dm-navbar-bg: #4f5764;
+    --dm-sidebar-border: #232830;
+    --dm-navbar-bg: #2f343c;
     --dm-navbar-text: #f7f9fb;
-    --dm-navbar-border: #5c6573;
-    --dm-table-header-bg: #535b69;
+    --dm-navbar-border: #373d45;
+    --dm-table-header-bg: #32373f;
     --dm-table-stripe-bg: rgba(255, 255, 255, 0.03);
     --dm-table-hover-bg: rgba(255, 255, 255, 0.07);
     --dm-modal-backdrop: rgba(0, 0, 0, 0.6);
     --dm-tooltip-bg: #1f2733;
     --dm-tooltip-text: #ffffff;
-    --dm-scrollbar-track: #4f5764;
-    --dm-scrollbar-thumb: #7a8494;
-    --dm-scrollbar-thumb-hover: #8b95a5;
-    --dm-code-bg: #454d5a;
+    --dm-scrollbar-track: #2f343c;
+    --dm-scrollbar-thumb: #494f59;
+    --dm-scrollbar-thumb-hover: #5a616c;
+    --dm-code-bg: #292e36;
     --dm-code-text: #ffd9a8;
-    --dm-progress-bg: #535b69;
+    --dm-progress-bg: #32373f;
 
     --dm-primary: #5b63a8;
     --dm-primary-hover: #4f5694;
@@ -20008,40 +20415,40 @@ code {
 .dm-theme-admin-smooth-teal {
     color-scheme: dark;
 
-    --dm-background: #586170;
-    --dm-background-alt: #4f5764;
-    --dm-surface: #646d7c;
-    --dm-surface-raised: #6c7686;
-    --dm-surface-overlay: #6c7686;
+    --dm-background: #353a43;
+    --dm-background-alt: #2f343c;
+    --dm-surface: #3c414a;
+    --dm-surface-raised: #414750;
+    --dm-surface-overlay: #414750;
     --dm-text: #f7f9fb;
     --dm-text-secondary: #d2d8e0;
     --dm-text-muted: #b3bcc8;
     --dm-text-disabled: #8a93a1;
     --dm-text-inverse: #1f2733;
-    --dm-border: #6f7888;
-    --dm-border-light: #5c6573;
-    --dm-border-dark: #7a8494;
+    --dm-border: #434852;
+    --dm-border-light: #373d45;
+    --dm-border-dark: #494f59;
     --dm-hover-bg: rgba(255, 255, 255, 0.07);
     --dm-active-bg: rgba(255, 255, 255, 0.10);
     --dm-disabled-opacity: 0.4;
-    --dm-sidebar-bg: #454d5a;
+    --dm-sidebar-bg: #292e36;
     --dm-sidebar-text: #d2d8e0;
-    --dm-sidebar-border: #3b424d;
-    --dm-navbar-bg: #4f5764;
+    --dm-sidebar-border: #232830;
+    --dm-navbar-bg: #2f343c;
     --dm-navbar-text: #f7f9fb;
-    --dm-navbar-border: #5c6573;
-    --dm-table-header-bg: #535b69;
+    --dm-navbar-border: #373d45;
+    --dm-table-header-bg: #32373f;
     --dm-table-stripe-bg: rgba(255, 255, 255, 0.03);
     --dm-table-hover-bg: rgba(255, 255, 255, 0.07);
     --dm-modal-backdrop: rgba(0, 0, 0, 0.6);
     --dm-tooltip-bg: #1f2733;
     --dm-tooltip-text: #ffffff;
-    --dm-scrollbar-track: #4f5764;
-    --dm-scrollbar-thumb: #7a8494;
-    --dm-scrollbar-thumb-hover: #8b95a5;
-    --dm-code-bg: #454d5a;
+    --dm-scrollbar-track: #2f343c;
+    --dm-scrollbar-thumb: #494f59;
+    --dm-scrollbar-thumb-hover: #5a616c;
+    --dm-code-bg: #292e36;
     --dm-code-text: #ffd9a8;
-    --dm-progress-bg: #535b69;
+    --dm-progress-bg: #32373f;
 
     --dm-primary: #2a8178;
     --dm-primary-hover: #287d75;