@finqu/cool 1.3.0 → 2.0.2

package/scss/_dark.scss

@@ -0,0 +1,637 @@
+@use "variables" as *;
+
+/* Dark Mode ========================================================================== */
+
+// ---------------------------------------------------------------------------
+// Dark theme — CSS custom property overrides
+// ---------------------------------------------------------------------------
+
+@mixin cool-dark-properties {
+    color-scheme: dark;
+
+    // Grey scale (inverted for dark — blue-tinted slate)
+    --cool-color-grey-50: #020618;
+    --cool-color-grey-100: #081020;
+    --cool-color-grey-150: #0f172a;
+    --cool-color-grey-200: #141d33;
+    --cool-color-grey-250: #19233a;
+    --cool-color-grey-300: #1e293b;
+    --cool-color-grey-350: #273347;
+    --cool-color-grey-400: #334155;
+    --cool-color-grey-450: #3d4d62;
+    --cool-color-grey-500: #475569;
+    --cool-color-grey-550: #64748b;
+    --cool-color-grey-600: #7a8ba0;
+    --cool-color-grey-650: #94a3b8;
+    --cool-color-grey-700: #b0bdd0;
+    --cool-color-grey-750: #c8d2df;
+    --cool-color-grey-800: #dce3ec;
+    --cool-color-grey-850: #e2e8f0;
+    --cool-color-grey-900: #f1f5f9;
+    --cool-color-grey-950: #f8fafc;
+
+    --cool-color-grey-lightest: var(--cool-color-grey-50);
+    --cool-color-grey-lighter: var(--cool-color-grey-200);
+    --cool-color-grey-light: var(--cool-color-grey-350);
+    --cool-color-grey: var(--cool-color-grey-500);
+    --cool-color-grey-dark: var(--cool-color-grey-650);
+    --cool-color-grey-darker: var(--cool-color-grey-800);
+    --cool-color-grey-darkest: var(--cool-color-grey-950);
+
+    // Body
+    --cool-body-bg: #020618;
+    --cool-body-color: #f8fafc;
+    --cool-body-hover-bg: rgba(255, 255, 255, 0.04);
+    --cool-body-emphasize-bg: #081020;
+    --cool-body-surface-bg: #0f172a;
+
+    // Links
+    --cool-link-color: #60a5fa;
+    --cool-link-hover-color: #93c5fd;
+
+    // Borders
+    --cool-border-color: #1e293b;
+    --cool-hr-border-color: #1e293b;
+
+    // Headings
+    --cool-headings-color: #f8fafc;
+
+    // Icons
+    --cool-icon-color: #7a8ba0;
+
+    // Shadows
+    --cool-box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+    --cool-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+    --cool-box-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
+
+    // Forms / Inputs
+    --cool-input-bg: #081020;
+    --cool-input-color: #f8fafc;
+    --cool-input-border-color: #1e293b;
+    --cool-input-disabled-bg: #0f172a;
+    --cool-input-disabled-color: #70839e;
+    --cool-input-focus-border-color: #60a5fa;
+    --cool-input-placeholder-color: #70839e;
+    --cool-input-plaintext-color: #f8fafc;
+
+    --cool-input-group-addon-color: #94a3b8;
+    --cool-input-group-addon-bg: #081020;
+    --cool-input-group-border-color: #1e293b;
+    --cool-input-group-bg: #081020;
+    --cool-input-group-color: #94a3b8;
+
+    --cool-form-check-input-color: #60a5fa;
+    --cool-form-check-input-border-color: #475569;
+
+    // List group
+    --cool-list-group-bg: transparent;
+    --cool-list-group-color: #f8fafc;
+    --cool-list-group-hover-bg: rgba(255, 255, 255, 0.04);
+    --cool-list-group-active-color: #60a5fa;
+    --cool-list-group-disabled-color: #273347;
+    --cool-list-group-border-color: #1e293b;
+    --cool-list-group-distinctive-bg: #081020;
+
+    // Navbar
+    --cool-navbar-bg: #0f172a;
+    --cool-navbar-color: #f8fafc;
+    --cool-navbar-border-color: #0f172a;
+
+    // Section
+    --cool-section-bg: #0f172a;
+    --cool-section-color: #f8fafc;
+    --cool-section-border-color: #1e293b;
+    --cool-section-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+    --cool-section-secondary-bg: #081020;
+    --cool-section-divider-color: #1e293b;
+    --cool-section-title-bg: var(--cool-section-bg);
+    --cool-section-title-color: var(--cool-section-color);
+    --cool-section-title-actions-color: #94a3b8;
+    --cool-section-title-icons-color: #7a8ba0;
+    --cool-section-subtitle-color: #64748b;
+    --cool-section-placeholder-icon-color: #70839e;
+    --cool-section-placeholder-description-color: #70839e;
+    --cool-section-definition-heading-color: #94a3b8;
+    --cool-section-filters-bg: var(--cool-section-bg);
+    --cool-section-filters-color: var(--cool-section-color);
+    --cool-section-bulk-actions-bg: var(--cool-section-bg);
+    --cool-section-bulk-actions-color: var(--cool-section-color);
+
+    --cool-section-tabs-bg: var(--cool-section-bg);
+    --cool-section-tabs-color: #64748b;
+    --cool-section-tabs-hover-color: #f8fafc;
+    --cool-section-tabs-active-color: #f8fafc;
+    --cool-section-tabs-border-color: #1e293b;
+    --cool-section-tabs-border-active-color: #f8fafc;
+
+    // Table
+    --cool-table-bg: transparent;
+    --cool-table-color: #f8fafc;
+    --cool-table-hover-bg: rgba(255, 255, 255, 0.03);
+    --cool-table-hover-color: #f8fafc;
+    --cool-table-accent-bg: rgba(255, 255, 255, 0.02);
+    --cool-table-border-color: #1e293b;
+    --cool-table-th-bg: #081020;
+    --cool-table-head-bg: #081020;
+    --cool-table-head-color: #94a3b8;
+    --cool-table-link-color: #60a5fa;
+    --cool-table-link-hover-color: #93c5fd;
+    --cool-table-icon-color: #7a8ba0;
+    --cool-table-sortable-head-hover-bg: #0f172a;
+    --cool-table-responsive-first-td-bg: #081020;
+    --cool-table-sticky-actions-shadow-color: #020618;
+    --cool-table-sticky-actions-col-sticky-bg: #081020;
+    --cool-table-bulk-actions-hover-bg: #3f74d4;
+    --cool-table-bulk-actions-hover-color: #ffffff;
+
+    // Tabs
+    --cool-tabs-bg: transparent;
+    --cool-tabs-color: #64748b;
+    --cool-tabs-hover-color: #f8fafc;
+    --cool-tabs-active-color: #60a5fa;
+    --cool-tabs-hover-bg: transparent;
+
+    // Dropdown
+    --cool-dropdown-bg: #0f172a;
+    --cool-dropdown-color: #f8fafc;
+    --cool-dropdown-border-color: #273347;
+    --cool-dropdown-divider-bg: #273347;
+    --cool-dropdown-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
+    --cool-dropdown-title-color: #64748b;
+    --cool-dropdown-link-color: #b0bdd0;
+    --cool-dropdown-link-hover-color: #f8fafc;
+    --cool-dropdown-link-hover-bg: rgba(255, 255, 255, 0.06);
+    --cool-dropdown-link-active-color: #60a5fa;
+    --cool-dropdown-link-active-bg: rgba(255, 255, 255, 0.06);
+
+    // Frame sidebar
+    --cool-frame-sidebar-bg: #020618;
+    --cool-frame-sidebar-bg-mobile: #020618;
+    --cool-frame-sidebar-border-color: transparent;
+    --cool-frame-sidebar-nav-item-parent-color: #7a8ba0;
+    --cool-frame-sidebar-nav-item-child-color: #7a8ba0;
+    --cool-frame-sidebar-nav-item-child-hover-bg: rgba(255, 255, 255, 0.04);
+    --cool-frame-sidebar-nav-item-child-hover-color: #f8fafc;
+    --cool-frame-sidebar-nav-item-child-active-bg: rgba(96, 165, 250, 0.06);
+    --cool-frame-sidebar-nav-item-child-active-color: #60a5fa;
+    --cool-frame-sidebar-nav-item-parent-hover-color: #f8fafc;
+    --cool-frame-sidebar-nav-item-parent-hover-bg: rgba(255, 255, 255, 0.04);
+    --cool-frame-sidebar-nav-item-parent-active-color: #f8fafc;
+    --cool-frame-sidebar-nav-item-parent-active-bg: rgba(96, 165, 250, 0.06);
+    --cool-frame-sidebar-nav-icon-color: #7a8ba0;
+    --cool-frame-sidebar-nav-icon-hover-color: #f8fafc;
+    --cool-frame-sidebar-nav-icon-active-color: #60a5fa;
+    --cool-frame-sidebar-nav-a-icon-color: #475569;
+    --cool-frame-sidebar-nav-a-icon-hover-color: #7a8ba0;
+    --cool-frame-sidebar-tabs-color: #64748b;
+    --cool-frame-sidebar-tabs-border-color: #1e293b;
+    --cool-frame-sidebar-tabs-hover-color: #f8fafc;
+    --cool-frame-sidebar-tabs-active-color: #f8fafc;
+    --cool-frame-sidebar-tabs-active-border-color: #60a5fa;
+
+    // Floating sidebar
+    --cool-frame-sidebar-floating-bg: #0f172a;
+    --cool-frame-sidebar-floating-border-color: #1e293b;
+    --cool-frame-sidebar-floating-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
+
+    // Dialog
+    --cool-dialog-bg: #081020;
+    --cool-dialog-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
+
+    // Alert & Notification
+    --cool-alert-bg: #081020;
+    --cool-alert-color: #f8fafc;
+    --cool-notification-bg: rgba(96, 165, 250, 0.06);
+    --cool-notification-color: #93c5fd;
+    --cool-notification-border-color: rgba(96, 165, 250, 0.15);
+
+    // Popover
+    --cool-popover-bg: #0f172a;
+    --cool-popover-border-color: #273347;
+    --cool-popover-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+    --cool-popover-header-bg: #081020;
+    --cool-popover-header-color: #f8fafc;
+    --cool-popover-body-color: #f8fafc;
+
+    // Select
+    --cool-select-bg: #081020;
+    --cool-select-border-color: #1e293b;
+    --cool-select-divider-bg: #1e293b;
+    --cool-select-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
+    --cool-select-item-color: #b0bdd0;
+    --cool-select-item-hover-color: #f8fafc;
+    --cool-select-item-hover-bg: rgba(255, 255, 255, 0.06);
+    --cool-select-item-disabled-color: #475569;
+    --cool-select-header-color: #f8fafc;
+    --cool-select-chip-bg: #1e293b;
+    --cool-select-placeholder-color: #475569;
+    --cool-select-search-icon-color: #475569;
+
+    // Toast
+    --cool-toast-bg: #141d33;
+    --cool-toast-header-bg: #141d33;
+    --cool-toast-header-color: #f8fafc;
+    --cool-toast-body-color: #f8fafc;
+
+    // Pagination
+    --cool-pagination-color: #60a5fa;
+    --cool-pagination-hover-color: #93c5fd;
+    --cool-pagination-active-color: #60a5fa;
+    --cool-pagination-disabled-color: #475569;
+
+    // Media / Placeholders
+    --cool-image-icon-color: #475569;
+    --cool-image-bg-thumbnail: #081020;
+    --cool-image-loaded-bg: #081020;
+    --cool-image-select-trigger-bg: #1e293b;
+    --cool-image-select-trigger-color: #f8fafc;
+    --cool-placeholder-icon-color: #475569;
+    --cool-placeholder-title-color: #f8fafc;
+    --cool-placeholder-description-color: #64748b;
+
+    // Theme colors
+    --cool-theme-color-primary: #2c86c8;
+    --cool-theme-foreground-color-primary: #ffffff;
+    --cool-theme-color-secondary: #1e293b;
+    --cool-theme-foreground-color-secondary: #f8fafc;
+    --cool-theme-color-brand: #e70d68;
+    --cool-theme-foreground-color-brand: #ffffff;
+    --cool-theme-color-success: #4ade80;
+    --cool-theme-foreground-color-success: #86efac;
+    --cool-theme-color-danger: #f87171;
+    --cool-theme-foreground-color-danger: #fca5a5;
+    --cool-theme-color-warning: #fbbf24;
+    --cool-theme-foreground-color-warning: #fde68a;
+    --cool-theme-color-info: #38bdf8;
+    --cool-theme-foreground-color-info: #7dd3fc;
+    --cool-theme-color-light: #1e293b;
+    --cool-theme-foreground-color-light: #f8fafc;
+    --cool-theme-color-dark: #f8fafc;
+    --cool-theme-foreground-color-dark: #f8fafc;
+    --cool-theme-color-medium: #475569;
+    --cool-theme-foreground-color-medium: #f8fafc;
+    --cool-theme-foreground-color-grey-lightest: #f8fafc;
+    --cool-theme-foreground-color-grey-lighter: #f8fafc;
+    --cool-theme-foreground-color-grey-light: #f8fafc;
+    --cool-theme-foreground-color-grey: #f8fafc;
+    --cool-theme-foreground-color-grey-dark: #020618;
+    --cool-theme-foreground-color-grey-darker: #020618;
+    --cool-theme-foreground-color-grey-darkest: #020618;
+
+    // Theme background colors (solid dark-tinted)
+    --cool-theme-bg-color-primary: #111d36;
+    --cool-theme-bg-color-secondary: #192643;
+    --cool-theme-bg-color-success: #074320;
+    --cool-theme-bg-color-info: #12243a;
+    --cool-theme-bg-color-warning: #29200c;
+    --cool-theme-bg-color-danger: #361119;
+    --cool-theme-bg-color-light: #16213d;
+    --cool-theme-bg-color-dark: #243354;
+    --cool-theme-bg-color-medium: #1d2a4a;
+    --cool-theme-bg-color-brand: #2e1126;
+
+    // Theme text colors (used by badges)
+    --cool-theme-text-color-primary: #93c5fd;
+    --cool-theme-text-color-secondary: #94a3b8;
+    --cool-theme-text-color-success: #86efac;
+    --cool-theme-text-color-info: #7dd3fc;
+    --cool-theme-text-color-warning: #fde68a;
+    --cool-theme-text-color-danger: #fca5a5;
+    --cool-theme-text-color-light: #b0bdd0;
+    --cool-theme-text-color-medium: #7a8ba0;
+    --cool-theme-text-color-dark: #f8fafc;
+    --cool-theme-text-color-brand: #f9a8d4;
+}
+
+// ---------------------------------------------------------------------------
+// Light theme — re-declare default (light) values
+// Used by .light scope to reset values inside a .dark ancestor
+// ---------------------------------------------------------------------------
+
+@mixin cool-light-properties {
+    color-scheme: light;
+
+    // Grey scale (original light values)
+    --cool-color-grey-50: #{$grey-50};
+    --cool-color-grey-100: #{$grey-100};
+    --cool-color-grey-150: #{$grey-150};
+    --cool-color-grey-200: #{$grey-200};
+    --cool-color-grey-250: #{$grey-250};
+    --cool-color-grey-300: #{$grey-300};
+    --cool-color-grey-350: #{$grey-350};
+    --cool-color-grey-400: #{$grey-400};
+    --cool-color-grey-450: #{$grey-450};
+    --cool-color-grey-500: #{$grey-500};
+    --cool-color-grey-550: #{$grey-550};
+    --cool-color-grey-600: #{$grey-600};
+    --cool-color-grey-650: #{$grey-650};
+    --cool-color-grey-700: #{$grey-700};
+    --cool-color-grey-750: #{$grey-750};
+    --cool-color-grey-800: #{$grey-800};
+    --cool-color-grey-850: #{$grey-850};
+    --cool-color-grey-900: #{$grey-900};
+    --cool-color-grey-950: #{$grey-950};
+
+    // Named grey aliases (original light values)
+    @each $color, $value in $colors {
+        --cool-color-#{$color}: #{$value};
+    }
+
+    // Body
+    --cool-body-bg: #{$body-bg};
+    --cool-body-color: #{$body-color};
+    --cool-body-hover-bg: #{$body-hover-bg};
+    --cool-body-emphasize-bg: #{$body-emphasize-bg};
+    --cool-body-surface-bg: #{$body-surface-bg};
+
+    // Links
+    --cool-link-color: #{$link-color};
+    --cool-link-hover-color: #{$link-hover-color};
+
+    // Borders
+    --cool-border-color: #{$border-color};
+    --cool-hr-border-color: #{$hr-border-color};
+
+    // Headings
+    --cool-headings-color: #{$headings-color};
+
+    // Icons
+    --cool-icon-color: #{$icon-color};
+
+    // Shadows
+    --cool-box-shadow-sm: #{$box-shadow-sm};
+    --cool-box-shadow: #{$box-shadow};
+    --cool-box-shadow-lg: #{$box-shadow-lg};
+
+    // Forms / Inputs
+    --cool-input-bg: #{$input-bg};
+    --cool-input-color: #{$input-color};
+    --cool-input-border-color: #{$input-border-color};
+    --cool-input-disabled-bg: #{$input-disabled-bg};
+    --cool-input-disabled-color: #{$input-disabled-color};
+    --cool-input-focus-border-color: #{$input-focus-border-color};
+    --cool-input-placeholder-color: #{$input-placeholder-color};
+    --cool-input-plaintext-color: #{$input-plaintext-color};
+
+    --cool-input-group-addon-color: #{$input-group-addon-color};
+    --cool-input-group-addon-bg: #{$input-group-addon-bg};
+    --cool-input-group-border-color: #{$input-group-border-color};
+    --cool-input-group-bg: #{$input-group-bg};
+    --cool-input-group-color: #{$input-group-color};
+
+    --cool-form-check-input-color: #{$form-check-input-color};
+    --cool-form-check-input-border-color: #{$form-check-input-border-color};
+
+    // List group
+    --cool-list-group-bg: #{$list-group-bg};
+    --cool-list-group-color: #{$list-group-color};
+    --cool-list-group-hover-bg: #{$list-group-hover-bg};
+    --cool-list-group-active-color: #{$list-group-active-color};
+    --cool-list-group-disabled-color: #{$list-group-disabled-color};
+    --cool-list-group-border-color: #{$list-group-border-color};
+    --cool-list-group-distinctive-bg: #{$list-group-distinctive-bg};
+
+    // Navbar
+    --cool-navbar-bg: #{$navbar-bg};
+    --cool-navbar-color: #{$navbar-color};
+    --cool-navbar-border-color: #{$navbar-bg};
+
+    // Section
+    --cool-section-bg: #{$section-bg};
+    --cool-section-color: #{$section-color};
+    --cool-section-border-color: #{$section-border-color};
+    --cool-section-box-shadow: #{$section-box-shadow};
+    --cool-section-secondary-bg: #{$section-secondary-bg};
+    --cool-section-divider-color: #{$section-divider-color};
+    --cool-section-title-bg: #{$section-title-bg};
+    --cool-section-title-color: #{$section-title-color};
+    --cool-section-title-actions-color: #{$section-title-actions-color};
+    --cool-section-title-icons-color: #{$section-title-icons-color};
+    --cool-section-subtitle-color: #{$section-subtitle-color};
+    --cool-section-placeholder-icon-color: #{$section-placeholder-icon-color};
+    --cool-section-placeholder-description-color: #{$section-placeholder-description-color};
+    --cool-section-definition-heading-color: #{$section-definition-heading-color};
+    --cool-section-filters-bg: #{$section-filters-bg};
+    --cool-section-filters-color: #{$section-filters-color};
+    --cool-section-bulk-actions-bg: #{$section-bulk-actions-bg};
+    --cool-section-bulk-actions-color: #{$section-bulk-actions-color};
+
+    --cool-section-tabs-bg: #{$section-tabs-bg};
+    --cool-section-tabs-color: #{$section-tabs-color};
+    --cool-section-tabs-hover-color: #{$section-tabs-hover-color};
+    --cool-section-tabs-active-color: #{$section-tabs-active-color};
+    --cool-section-tabs-border-color: #{$section-tabs-border-color};
+
+    // Table
+    --cool-table-bg: #{$table-bg};
+    --cool-table-color: #{$table-color};
+    --cool-table-hover-bg: #{$table-hover-bg};
+    --cool-table-hover-color: #{$table-hover-color};
+    --cool-table-accent-bg: #{$table-accent-bg};
+    --cool-table-border-color: #{$table-border-color};
+    --cool-table-th-bg: #{$table-th-bg};
+    --cool-table-head-bg: #{$table-head-bg};
+    --cool-table-head-color: #{$table-head-color};
+    --cool-table-link-color: #{$table-link-color};
+    --cool-table-link-hover-color: #{$table-link-hover-color};
+    --cool-table-icon-color: #{$table-icon-color};
+    --cool-table-sortable-head-hover-bg: #{$table-sortable-head-hover-bg};
+    --cool-table-responsive-first-td-bg: #{$table-responsive-first-td-bg};
+    --cool-table-sticky-actions-shadow-color: #{$table-sticky-actions-shadow-color};
+    --cool-table-sticky-actions-col-sticky-bg: #{$table-sticky-actions-col-sticky-bg};
+    --cool-table-bulk-actions-hover-bg: #{$table-bulk-actions-hover-bg};
+    --cool-table-bulk-actions-hover-color: #{$table-bulk-actions-hover-color};
+
+    // Tabs
+    --cool-tabs-bg: #{$tabs-bg};
+    --cool-tabs-color: #{$tabs-text-color};
+    --cool-tabs-hover-color: #{$tabs-hover-color};
+    --cool-tabs-active-color: #{$tabs-active-color};
+    --cool-tabs-hover-bg: #{$tabs-hover-bg};
+
+    // Dropdown
+    --cool-dropdown-bg: #{$dropdown-bg};
+    --cool-dropdown-color: #{$dropdown-color};
+    --cool-dropdown-border-color: #{$dropdown-border-color};
+    --cool-dropdown-divider-bg: #{$dropdown-divider-bg};
+    --cool-dropdown-box-shadow: #{$dropdown-box-shadow};
+    --cool-dropdown-title-color: #{$dropdown-title-color};
+    --cool-dropdown-link-color: #{$dropdown-link-color};
+    --cool-dropdown-link-hover-color: #{$dropdown-link-hover-color};
+    --cool-dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
+    --cool-dropdown-link-active-color: #{$dropdown-link-active-color};
+    --cool-dropdown-link-active-bg: #{$dropdown-link-active-bg};
+
+    // Frame sidebar
+    --cool-frame-sidebar-bg: #{$frame-sidebar-bg};
+    --cool-frame-sidebar-bg-mobile: #{$frame-sidebar-bg-mobile};
+    --cool-frame-sidebar-border-color: #{$frame-sidebar-border-color};
+    --cool-frame-sidebar-nav-item-parent-color: #{$frame-sidebar-nav-item-parent-color};
+    --cool-frame-sidebar-nav-item-child-color: #{$frame-sidebar-nav-item-child-color};
+    --cool-frame-sidebar-nav-item-child-hover-bg: #{$frame-sidebar-nav-item-child-hover-bg};
+    --cool-frame-sidebar-nav-item-child-hover-color: #{$frame-sidebar-nav-item-child-hover-color};
+    --cool-frame-sidebar-nav-item-child-active-bg: #{$frame-sidebar-nav-item-child-active-bg};
+    --cool-frame-sidebar-nav-item-child-active-color: #{$frame-sidebar-nav-item-child-active-color};
+    --cool-frame-sidebar-nav-item-parent-hover-color: #{$frame-sidebar-nav-item-parent-hover-color};
+    --cool-frame-sidebar-nav-item-parent-hover-bg: #{$frame-sidebar-nav-item-parent-hover-bg};
+    --cool-frame-sidebar-nav-item-parent-active-color: #{$frame-sidebar-nav-item-parent-active-color};
+    --cool-frame-sidebar-nav-item-parent-active-bg: #{$frame-sidebar-nav-item-parent-active-bg};
+    --cool-frame-sidebar-nav-icon-color: #{$frame-sidebar-nav-icon-color};
+    --cool-frame-sidebar-nav-icon-hover-color: #{$frame-sidebar-nav-icon-hover-color};
+    --cool-frame-sidebar-nav-icon-active-color: #{$frame-sidebar-nav-icon-active-color};
+    --cool-frame-sidebar-nav-a-icon-color: #{$frame-sidebar-nav-a-icon-color};
+    --cool-frame-sidebar-nav-a-icon-hover-color: #{$frame-sidebar-nav-a-icon-hover-color};
+    --cool-frame-sidebar-tabs-color: #{$frame-sidebar-tabs-color};
+    --cool-frame-sidebar-tabs-border-color: #{$frame-sidebar-tabs-border-color};
+    --cool-frame-sidebar-tabs-hover-color: #{$frame-sidebar-tabs-hover-color};
+    --cool-frame-sidebar-tabs-active-color: #{$frame-sidebar-tabs-active-color};
+    --cool-frame-sidebar-tabs-active-border-color: #{$frame-sidebar-tabs-active-border-color};
+
+    // Floating sidebar
+    --cool-frame-sidebar-floating-bg: #{$frame-sidebar-floating-bg};
+    --cool-frame-sidebar-floating-border-color: #{$frame-sidebar-floating-border-color};
+    --cool-frame-sidebar-floating-box-shadow: #{$frame-sidebar-floating-box-shadow};
+
+    // Dialog
+    --cool-dialog-bg: #{$dialog-bg};
+    --cool-dialog-box-shadow: #{$dialog-box-shadow};
+
+    // Alert & Notification
+    --cool-alert-bg: #{$alert-bg};
+    --cool-alert-color: #{$alert-color};
+    --cool-notification-bg: #{$notification-bg};
+    --cool-notification-color: #{$notification-color};
+    --cool-notification-border-color: #{$notification-border-color};
+
+    // Popover
+    --cool-popover-bg: #{$popover-bg};
+    --cool-popover-border-color: #{$popover-border-color};
+    --cool-popover-box-shadow: #{$popover-box-shadow};
+    --cool-popover-header-bg: #{$popover-header-bg};
+    --cool-popover-header-color: #{$popover-header-color};
+    --cool-popover-body-color: #{$popover-body-color};
+
+    // Select
+    --cool-select-bg: #{$select-bg};
+    --cool-select-border-color: #{$select-border-color};
+    --cool-select-divider-bg: #{$select-divider-bg};
+    --cool-select-box-shadow: #{$select-box-shadow};
+    --cool-select-item-color: #{$select-item-color};
+    --cool-select-item-hover-color: #{$select-item-hover-color};
+    --cool-select-item-hover-bg: #{$select-item-hover-bg};
+    --cool-select-item-disabled-color: #{$select-item-disabled-color};
+    --cool-select-header-color: #{$select-header-color};
+    --cool-select-chip-bg: #{$select-chip-bg};
+    --cool-select-placeholder-color: #{$select-placeholder-color};
+    --cool-select-search-icon-color: #{$select-search-icon-color};
+
+    // Toast
+    --cool-toast-bg: #{$toast-bg};
+    --cool-toast-header-bg: #{$toast-header-bg};
+    --cool-toast-header-color: #{$toast-header-color};
+    --cool-toast-body-color: #{$toast-body-color};
+
+    // Pagination
+    --cool-pagination-color: #{$pagination-color};
+    --cool-pagination-hover-color: #{$pagination-hover-color};
+    --cool-pagination-active-color: #{$pagination-active-color};
+    --cool-pagination-disabled-color: #{$pagination-disabled-color};
+
+    // Media / Placeholders
+    --cool-image-icon-color: #{$image-icon-color};
+    --cool-image-bg-thumbnail: #{$image-bg-thumbnail};
+    --cool-image-loaded-bg: #{$image-loaded-bg};
+    --cool-image-select-trigger-bg: #{$image-select-trigger-bg};
+    --cool-image-select-trigger-color: #{$image-select-trigger-color};
+    --cool-placeholder-icon-color: #{$placeholder-icon-color};
+    --cool-placeholder-title-color: #{$placeholder-title-color};
+    --cool-placeholder-description-color: #{$placeholder-description-color};
+
+    // Theme colors
+    @each $color, $value in $theme-colors {
+        --cool-theme-color-#{$color}: #{$value};
+    }
+
+    @each $color, $value in $theme-foreground-colors {
+        --cool-theme-foreground-color-#{$color}: #{$value};
+    }
+
+    @each $color, $value in $theme-bg-colors {
+        --cool-theme-bg-color-#{$color}: #{$value};
+    }
+
+    @each $color, $value in $theme-text-colors {
+        --cool-theme-text-color-#{$color}: #{$value};
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Component-level dark overrides
+// Buttons with solid theme-color backgrounds need dark foreground text,
+// while foreground-color values are now light for bg-color contexts.
+// ---------------------------------------------------------------------------
+
+@mixin cool-dark-component-overrides {
+    .btn-action {
+        --cool-btn-color: #020618;
+    }
+
+    .btn-remove {
+        --cool-btn-hover-color: #020618;
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Orchestrator mixin — emits all dark mode rules
+// ---------------------------------------------------------------------------
+
+@mixin cool-dark-mode {
+    // A) Class-based fallback (works in all browsers)
+    .dark {
+        @include cool-dark-properties;
+        @include cool-dark-component-overrides;
+    }
+
+    .light {
+        @include cool-light-properties;
+    }
+
+    // B) @scope progressive enhancement (modern browsers only)
+    @supports (selector(:scope)) {
+        @scope (.dark) {
+            :scope {
+                @include cool-dark-properties;
+            }
+
+            @include cool-dark-component-overrides;
+        }
+
+        @scope (.light) {
+            :scope {
+                @include cool-light-properties;
+            }
+        }
+    }
+
+    // C) Auto-detection via prefers-color-scheme (conditional)
+    @if $cool-enable-dark-mode {
+        @media (prefers-color-scheme: dark) {
+            :root:not(.light) {
+                @include cool-dark-properties;
+                @include cool-dark-component-overrides;
+            }
+        }
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Output — conditional layer wrapping
+// ---------------------------------------------------------------------------
+
+@if $cool-use-base-layer {
+    @layer base {
+        @include cool-dark-mode;
+    }
+} @else {
+    @include cool-dark-mode;
+}