@keenmate/pure-admin-core 1.0.0 → 1.1.1

package/src/scss/themes/audi.scss

@@ -1,303 +0,0 @@
-/* Pure Admin Visual - Audi Theme (Pure SCSS Variables) */
-@use 'sass:color';
-
-// =============================================================================
-// THEME COLOR SLOTS (1-9) - Audi-inspired palette
-// =============================================================================
-$color-1: #bb0a30;  // Audi Red (classic)
-$color-2: #ff4444;  // Light Red
-$color-3: #ff6600;  // Orange (warning tone)
-$color-4: #d4af37;  // Gold (premium)
-$color-5: #00a0a0;  // Teal (contrast)
-$color-6: #0066cc;  // Blue (professional)
-$color-7: #8c8c8c;  // Silver (metallic)
-$color-8: #404040;  // Charcoal (neutral)
-$color-9: #6b3fa0;  // Purple (luxury)
-
-// 1. Import framework variables first (all defaults with !default flags)
-@import '../variables';
-
-// 2. Override SCSS variables for Audi theme
-$sidebar-width: 29rem; // 290px (10px base)
-$border-radius: 1px;
-$border-radius-lg: 2px;
-
-// Audi color palette
-$audi-black: #000000;        // Pure black
-$audi-near-black: #0a0a0a;   // Near black
-$audi-dark: #1a1a1a;         // Dark gray
-$audi-gray: #2a2a2a;         // Medium gray
-$audi-gray-light: #333333;   // Light gray
-$audi-gray-lighter: #4d4d4d; // Lighter gray
-$audi-gray-lightest: #666666;// Lightest gray
-$audi-red: #ff0000;          // Signature red
-$audi-red-dark: #cc0000;     // Dark red
-
-// Audi theme colors - Sharp black/red German aesthetic
-$primary-bg: $audi-near-black;
-$bg-secondary: $audi-near-black;
-$content-background-color: $audi-dark;  // Settings panel and main content background
-$header-bg: $audi-black;
-$header-border-color: $audi-gray-light; // Match sidebar border color
-$sidebar-bg: $audi-dark;
-$sidebar-submenu-bg: $audi-gray-light;
-$sidebar-submenu-hover-bg: rgba($audi-red, 0.25); // Match level 1 hover (red accent)
-$sidebar-submenu-active-bg: rgba($audi-red, 0.3); // Match level 1 active (red accent)
-$footer-bg: $audi-black;
-$border-color: $audi-gray-light;
-$text-primary: #ffffff;
-$text-secondary: #cccccc;
-$accent-color: $audi-red;
-$accent-hover: rgba($audi-red, 0.3); // For active/selected state
-$accent-light: rgba($audi-red, 0.25); // For hover state - increased for better visibility on dark bg
-
-// Sync base variables with theme colors (for web components)
-// Colors
-$base-accent-color: $accent-color;
-$base-accent-color-hover: color.adjust($base-accent-color, $lightness: 10%);
-$base-accent-color-active: color.adjust($base-accent-color, $lightness: 20%);
-$base-accent-color-light: $accent-light;
-$base-accent-color-light-hover: rgba($base-accent-color, 0.3);
-$base-primary-bg: $audi-dark;
-$base-primary-bg-hover: $audi-gray;
-$base-text-color-1: #ffffff;
-$base-text-color-2: #cccccc;
-$base-text-color-3: #999999;
-$base-text-color-4: #666666;
-$base-text-on-accent: #ffffff;
-$base-border-color: $audi-gray-light;
-
-// Input fields
-$base-input-background: $audi-black;
-$base-input-color: #ffffff;
-$base-input-border: 1px solid $audi-gray-light;
-$base-input-border-hover: 1px solid $accent-color;
-$base-input-border-focus: 1px solid $accent-color;
-$base-input-placeholder-color: #666666;
-$base-input-background-disabled: rgba($audi-gray, 0.5);
-
-// Dropdown/Popover
-$base-dropdown-background: $audi-dark;
-$base-dropdown-border: 1px solid $audi-gray-light;
-$base-dropdown-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
-
-// Tooltip
-$base-tooltip-background: $audi-gray-light;
-$base-tooltip-text-color: #ffffff;
-
-// Form focus colors - must match accent color
-$input-focus-border-color: $accent-color;
-$select-focus-border-color: $accent-color;
-$textarea-focus-border-color: $accent-color;
-
-// Checkbox colors - must match accent color
-$checkbox-border-color-hover: $accent-color;
-$checkbox-border-color-checked: $accent-color;
-$checkbox-bg-checked: $accent-color;
-$checkbox-bg-indeterminate: $accent-color;
-$checkbox-focus-shadow: 0 0 0 2px rgba($accent-color, 0.25);
-
-// Card colors
-$card-bg: $audi-dark;
-$card-header-bg: $audi-black;
-$card-footer-bg: $audi-black;
-$card-tabs-bg: $audi-gray-light;
-
-// Input colors
-$input-bg: $audi-black;
-$input-border: $audi-gray-light;
-$input-text: #ffffff;
-
-// Multiselect dropdown colors (match dark theme)
-$multiselect-dropdown-bg: $audi-dark;
-$multiselect-dropdown-border: $audi-gray-light;
-$multiselect-dropdown-text: #ffffff;
-
-// Table colors
-$table-stripe: $audi-gray;        // Subtle stripe with medium gray
-$table-bg: $audi-dark;
-$table-header-bg: $audi-black;
-$table-hover-bg: $audi-gray-light;
-
-// Enable red accent on table row hover (Audi signature detail)
-$table-hover-accent-width: 0.3rem;  // 3px in 10px base
-$table-hover-accent-color: $accent-color; // Uses the red #ff0000
-$table-hover-accent-position: left;
-
-// Modal colors
-$modal-content-bg: $audi-dark;
-$modal-overlay-bg: rgba($audi-black, 0.8);
-
-// Profile name in header
-$header-profile-name-color: #ffffff;  // White text on black header
-
-// Button colors - German precision with red accents
-$btn-primary-bg: $audi-red;
-$btn-primary-bg-hover: $audi-red-dark;
-$btn-primary-text: #ffffff;
-$btn-secondary-bg: $audi-gray-light;
-$btn-secondary-bg-hover: $audi-gray-lighter;
-$btn-secondary-text: #ffffff;
-$btn-success-bg: #00cc44;
-$btn-success-bg-hover: #009933;
-$btn-success-text: #ffffff;
-$btn-danger-bg: $audi-red;
-$btn-danger-bg-hover: $audi-red-dark;
-$btn-danger-text: #ffffff;
-$btn-warning-bg: #ff6600;
-$btn-warning-bg-hover: #e55a00;
-$btn-warning-text: #ffffff;
-$btn-info-bg: #0099ff;
-$btn-info-bg-hover: #0077cc;
-$btn-info-text: #ffffff;
-$btn-light-bg: $audi-gray-lightest;
-$btn-light-bg-hover: #808080;
-$btn-light-text: #ffffff;
-$btn-dark-bg: $audi-black;
-$btn-dark-bg-hover: $audi-dark;
-$btn-dark-text: #ffffff;
-
-// Validation shadow colors - match button colors
-$success-bg: $btn-success-bg;
-$success-bg-light: rgba(0, 204, 68, 0.25);
-$warning-bg: $btn-warning-bg;
-$warning-bg-light: rgba(255, 102, 0, 0.25);
-$danger-bg: $btn-danger-bg;
-$danger-bg-light: rgba(255, 0, 0, 0.25);
-
-// 3. Add Fira Sans Condensed fonts
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Fira Sans Condensed';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfvtrftV.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Fira Sans Condensed';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfLtrftV.woff2) format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Fira Sans Condensed';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfrtrftV.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Fira Sans Condensed';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfXtrftV.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Fira Sans Condensed';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfntrftV.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Fira Sans Condensed';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfjtrftV.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Fira Sans Condensed';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfbtrQ.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-// 4. Override font family SCSS variable after fonts are defined
-$body-font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
-
-// Card styling - thicker border for Audi design language
-$card-border-width: $border-width-medium;
-$card-border-radius: 0; // Sharp edges
-
-// 5. Import core framework styles (will use all our SCSS variables)
-@import '../core';
-
-// 5b. Import utility classes
-@import '../utilities';
-@import '../base-css-variables';
-
-// 6. Audi-specific styling overrides
-.pa-btn--primary {
-  font-weight: $font-weight-bold;
-  color: #ffffff !important; // Ensure white text on red background
-  border-radius: 0 !important; // Sharp edges for German precision
-}
-
-.pa-btn--danger {
-  font-weight: $font-weight-bold;
-  text-transform: uppercase;
-  color: #ffffff !important; // Ensure white text on red background
-  border-radius: 0 !important; // Sharp edges for German precision
-}
-
-.pa-btn--secondary {
-  border-color: $audi-gray-lightest !important; // Lighter border for better visibility
-}
-
-.pa-btn--outline-secondary {
-  border-color: $audi-gray-lightest !important; // Lighter border for dark background
-  color: #cccccc !important; // Lighter text for dark background
-
-  &:hover {
-    background-color: $audi-gray-light !important;
-    color: #ffffff !important;
-  }
-}
-
-.pa-card {
-  box-shadow: 0 $spacing-xs ($spacing-sm * 2) rgba($audi-black, 0.8);
-}
-
-// Sidebar left-border accent (instead of default right-border)
-.pa-sidebar__link {
-  border-left: $border-width-thick solid transparent; // Reserve space for active state
-  border-right: none; // Remove default right border reservation
-}
-
-.pa-sidebar__link--active {
-  border-left-color: $accent-color !important;
-  color: $accent-color !important;
-}
-
-.pa-sidebar__link--active .pa-sidebar__label,
-.pa-sidebar__link--active .pa-sidebar__icon {
-  color: $accent-color !important;
-}
-
-// CSS Variables for page loader (FOUC prevention) and base theme variables
-:root {
-  --page-loader-bg: rgba(10, 10, 10, 0.95);
-  --page-loader-spinner-border: #333;
-  --page-loader-spinner-accent: #ff0000; // Audi red
-
-  // Base CSS variables for web components (daterangepicker, multiselect, etc.)
-  @include output-base-css-variables;
-}

package/src/scss/themes/corporate.scss

@@ -1,229 +0,0 @@
-/* Corporate Theme for Pure Admin Visual - Professional blue/gray palette */
-
-// =============================================================================
-// THEME COLOR SLOTS (1-9) - Corporate professional palette
-// =============================================================================
-$color-1: #0284c7;  // Corporate Blue (primary)
-$color-2: #0ea5e9;  // Sky Blue (lighter)
-$color-3: #10b981;  // Emerald (success)
-$color-4: #f59e0b;  // Amber (attention)
-$color-5: #6366f1;  // Indigo (accent)
-$color-6: #8b5cf6;  // Violet (creative)
-$color-7: #64748b;  // Slate (neutral)
-$color-8: #334155;  // Dark Slate (contrast)
-$color-9: #ec4899;  // Pink (highlight)
-
-@import '../variables';
-
-// Corporate color palette
-$corporate-slate-50: #f8fafc;
-$corporate-slate-100: #f1f5f9;
-$corporate-slate-200: #e2e8f0;
-$corporate-slate-300: #cbd5e1;
-$corporate-slate-400: #94a3b8;
-$corporate-slate-500: #64748b;
-$corporate-slate-600: #475569;
-$corporate-slate-700: #334155;
-$corporate-slate-800: #1e293b;
-$corporate-slate-900: #0f172a;
-
-$corporate-blue-500: #0ea5e9;  // Brighter, more vibrant blue
-$corporate-blue-600: #0284c7;
-$corporate-blue-700: #0369a1;
-
-$corporate-gray-50: #f9fafb;
-$corporate-gray-100: #f3f4f6;
-$corporate-gray-200: #e5e7eb;
-$corporate-gray-400: #9ca3af;
-$corporate-gray-500: #6b7280;
-$corporate-gray-600: #4b5563;
-$corporate-gray-700: #374151;
-$corporate-gray-800: #1f2937;
-
-$corporate-emerald-500: #10b981;
-$corporate-emerald-600: #059669;
-$corporate-amber-500: #f59e0b;
-$corporate-red-500: #ef4444;
-$corporate-red-600: #dc2626;
-$corporate-cyan-500: #06b6d4;
-$corporate-cyan-600: #0891b2;
-
-// Layout overrides
-$footer-height: 3.2rem;    // 32px (10px base) - was 2rem at 16px base
-$sidebar-width: 29rem;   // 290px (10px base)
-
-// Corporate theme color overrides
-$primary-bg: #f4f6f9;
-$content-background-color: #f4f6f9;
-$header-bg: $corporate-slate-800;
-$header-border-color: $corporate-slate-200; // Match sidebar border color
-$header-profile-name-color: #ffffff;       // Light text on dark header
-$sidebar-bg: $corporate-slate-50;
-$footer-bg: $corporate-slate-800;
-$border-color: $corporate-slate-200;
-$text-primary: $corporate-slate-700;
-$text-secondary: $corporate-slate-500;
-$accent-color: $corporate-blue-500;
-$accent-hover: rgba(59, 130, 246, 0.1);
-$accent-light: rgba(59, 130, 246, 0.05);
-
-// Sync base variables with theme colors
-$base-accent-color: $accent-color;
-$base-accent-color-hover: $corporate-blue-600;
-$base-accent-color-active: $corporate-blue-700;
-$base-accent-color-light: $accent-light;
-$base-accent-color-light-hover: rgba($base-accent-color, 0.08);
-
-// Form focus colors - must match accent color
-$input-focus-border-color: $accent-color;
-$select-focus-border-color: $accent-color;
-$textarea-focus-border-color: $accent-color;
-
-// Checkbox colors - must match accent color
-$checkbox-border-color-hover: $accent-color;
-$checkbox-border-color-checked: $accent-color;
-$checkbox-bg-checked: $accent-color;
-$checkbox-bg-indeterminate: $accent-color;
-$checkbox-focus-shadow: 0 0 0 2px rgba($accent-color, 0.25);
-
-// Card colors
-$card-bg: #ffffff;
-$card-header-bg: $corporate-slate-100;
-$card-footer-bg: $corporate-slate-50;
-$card-tabs-bg: $corporate-slate-200;
-
-// Input colors
-$input-bg: #ffffff;
-$input-border: $corporate-slate-200;
-$input-text: $corporate-slate-700;
-
-// Table colors
-$table-bg: #ffffff;
-$table-header-bg: $corporate-slate-100;
-$table-hover-bg: $corporate-slate-50;
-$table-stripe: $corporate-slate-50;
-
-// Button colors - professional blue/gray palette
-$btn-primary-bg: $corporate-blue-500;
-$btn-primary-bg-hover: $corporate-blue-600;
-$btn-secondary-bg: $corporate-gray-500;
-$btn-secondary-bg-hover: $corporate-gray-600;
-$btn-success-bg: $corporate-emerald-500;
-$btn-success-bg-hover: $corporate-emerald-600;
-$btn-warning-bg: $corporate-amber-500;
-$btn-warning-text: #ffffff;
-$btn-danger-bg: $corporate-red-500;
-$btn-danger-bg-hover: $corporate-red-600;
-$btn-info-bg: $corporate-cyan-500;
-$btn-info-bg-hover: $corporate-cyan-600;
-$btn-light-bg: $corporate-gray-100;
-$btn-light-text: $corporate-gray-700;
-$btn-light-bg-hover: $corporate-gray-200;
-$btn-dark-bg: $corporate-gray-700;
-$btn-dark-bg-hover: $corporate-gray-800;
-
-// Validation shadow colors - match button colors
-$success-bg: $btn-success-bg;
-$success-bg-light: rgba(16, 185, 129, 0.1);
-$warning-bg: $btn-warning-bg;
-$warning-bg-light: rgba(245, 158, 11, 0.1);
-$danger-bg: $btn-danger-bg;
-$danger-bg-light: rgba(239, 68, 68, 0.1);
-
-// Modal colors
-$modal-overlay-bg: rgba(30, 41, 59, 0.5);
-$modal-content-bg: #ffffff;
-
-@import '../core';
-@import '../utilities';
-@import '../base-css-variables';
-
-// Corporate-specific styling overrides
-// Header text visibility - light text on dark header
-.pa-header {
-  &__brand h1 {
-    color: #ffffff !important;
-  }
-
-  &__nav > ul > li > a {
-    color: $corporate-slate-300 !important;
-
-    &:hover {
-      color: $corporate-blue-500 !important;
-      background-color: rgba($corporate-blue-500, 0.1) !important;
-    }
-  }
-
-  // Dropdown menu items - dark text on light background
-  &__dropdown li a {
-    color: $corporate-slate-700 !important;
-
-    &:hover {
-      color: $corporate-blue-500 !important;
-      background-color: rgba($corporate-blue-500, 0.1) !important;
-    }
-  }
-
-  &__title h2 {
-    color: $corporate-slate-300 !important;
-  }
-
-  &__profile-btn {
-    color: #ffffff !important;
-
-    &:hover {
-      background-color: rgba($corporate-blue-500, 0.2) !important;
-    }
-  }
-}
-
-// Burger menu - light bars on dark header
-.burger-menu {
-  span {
-    background-color: #ffffff !important;
-  }
-
-  &:hover span {
-    background-color: $corporate-blue-500 !important;
-  }
-}
-
-// Theme switcher in header
-.theme-switcher {
-  label {
-    color: $corporate-slate-300 !important;
-  }
-
-  select {
-    background-color: $corporate-slate-700 !important;
-    color: #ffffff !important;
-    border-color: $corporate-slate-600 !important;
-
-    &:focus {
-      border-color: $corporate-blue-500 !important;
-    }
-  }
-}
-
-// Footer - light text on dark background
-.pa-layout__footer {
-  color: $corporate-slate-300;
-
-  a {
-    color: #ffffff;
-
-    &:hover {
-      color: $corporate-blue-500;
-    }
-  }
-}
-
-// CSS Variables for page loader (FOUC prevention) and base theme variables
-:root {
-  --page-loader-bg: rgba(26, 26, 26, 0.95);
-  --page-loader-spinner-border: #333;
-  --page-loader-spinner-accent: #0066cc;
-
-  // Base CSS variables for web components (daterangepicker, multiselect, etc.)
-  @include output-base-css-variables;
-}

package/src/scss/themes/dark-blue.scss

@@ -1,165 +0,0 @@
-/* Dark Blue Theme for Pure Admin Visual */
-@use 'sass:color';
-
-// =============================================================================
-// THEME COLOR SLOTS (1-9) - Dark blue palette
-// =============================================================================
-$color-1: #3b82f6;  // Blue 500 (primary)
-$color-2: #60a5fa;  // Blue 400 (lighter)
-$color-3: #22c55e;  // Green 500 (success)
-$color-4: #eab308;  // Yellow 500 (warning)
-$color-5: #a855f7;  // Purple 500 (accent)
-$color-6: #06b6d4;  // Cyan 500 (info)
-$color-7: #94a3b8;  // Slate 400 (neutral)
-$color-8: #f1f5f9;  // Slate 100 (light)
-$color-9: #f43f5e;  // Rose 500 (highlight)
-
-@import '../variables';
-
-// Dark blue theme color palette
-$dark-blue-slate-900: #0f172a;
-$dark-blue-slate-800: #1e293b;
-$dark-blue-slate-700: #334155;
-$dark-blue-slate-600: #475569;
-$dark-blue-slate-100: #f1f5f9;
-$dark-blue-slate-400: #94a3b8;
-
-$dark-blue-blue-500: #3b82f6;
-$dark-blue-blue-700: #1e40af;
-$dark-blue-blue-800: #1e3a8a;
-$dark-blue-sky-900: #0c4a6e;
-$dark-blue-sky-800: #075985;
-$dark-blue-sky-700: #0369a1;
-$dark-blue-sky-600: #0284c7;
-$dark-blue-cyan-600: #0e7490;
-$dark-blue-cyan-700: #155e75;
-$dark-blue-sky-50: #e0f2fe;
-$dark-blue-slate-950: #020617;
-
-// Color overrides for dark blue theme
-$primary-bg: $dark-blue-slate-900;
-$content-background-color: $dark-blue-slate-900;
-$header-bg: $dark-blue-slate-800;
-$sidebar-bg: $dark-blue-slate-800;
-$sidebar-submenu-bg: $dark-blue-slate-700;
-$sidebar-submenu-hover-bg: $dark-blue-slate-600;
-$sidebar-submenu-active-bg: $dark-blue-slate-700;
-$footer-bg: $dark-blue-slate-800;
-$border-color: $dark-blue-slate-700;
-$header-border-color: $dark-blue-slate-700; // Match sidebar border color
-$text-primary: $dark-blue-slate-100;
-$text-secondary: $dark-blue-slate-400;
-$accent-color: $dark-blue-blue-500;
-$accent-hover: rgba(59, 130, 246, 0.15);
-$accent-light: rgba(59, 130, 246, 0.08);
-
-// Sync base variables with theme colors (for web components)
-// Colors
-$base-accent-color: $accent-color;
-$base-accent-color-hover: color.adjust($base-accent-color, $lightness: 10%);
-$base-accent-color-active: color.adjust($base-accent-color, $lightness: 20%);
-$base-accent-color-light: $accent-light;
-$base-accent-color-light-hover: rgba($base-accent-color, 0.12);
-$base-primary-bg: $dark-blue-slate-800;
-$base-primary-bg-hover: $dark-blue-slate-700;
-$base-text-color-1: $dark-blue-slate-100;
-$base-text-color-2: $dark-blue-slate-400;
-$base-text-color-3: #6b7280;
-$base-text-color-4: #4b5563;
-$base-text-on-accent: #ffffff;
-$base-border-color: $dark-blue-slate-700;
-
-// Input fields
-$base-input-background: $dark-blue-slate-900;
-$base-input-color: $dark-blue-slate-100;
-$base-input-border: 1px solid $dark-blue-slate-700;
-$base-input-border-hover: 1px solid $accent-color;
-$base-input-border-focus: 1px solid $accent-color;
-$base-input-placeholder-color: $dark-blue-slate-600;
-$base-input-background-disabled: rgba($dark-blue-slate-800, 0.5);
-
-// Dropdown/Popover
-$base-dropdown-background: $dark-blue-slate-800;
-$base-dropdown-border: 1px solid $dark-blue-slate-700;
-$base-dropdown-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
-
-// Tooltip
-$base-tooltip-background: $dark-blue-slate-700;
-$base-tooltip-text-color: #ffffff;
-
-// Form focus colors - must match accent color
-$input-focus-border-color: $accent-color;
-$select-focus-border-color: $accent-color;
-$textarea-focus-border-color: $accent-color;
-
-// Checkbox colors - must match accent color
-$checkbox-border-color-hover: $accent-color;
-$checkbox-border-color-checked: $accent-color;
-$checkbox-bg-checked: $accent-color;
-$checkbox-bg-indeterminate: $accent-color;
-$checkbox-focus-shadow: 0 0 0 2px rgba($accent-color, 0.25);
-
-// Card colors
-$card-bg: $dark-blue-slate-800;
-$card-header-bg: $dark-blue-slate-900;
-$card-footer-bg: $dark-blue-slate-900;
-$card-tabs-bg: $dark-blue-slate-700;
-
-// Input colors
-$input-bg: $dark-blue-slate-900;
-$input-border: $border-color;
-$input-text: $text-primary;
-
-// Table colors
-$table-bg: $dark-blue-slate-800;
-$table-header-bg: $dark-blue-slate-900;
-$table-hover-bg: $dark-blue-slate-700;
-$table-stripe: $dark-blue-slate-800;
-
-// Button colors - blue-focused palette
-$btn-primary-bg: $dark-blue-blue-700;
-$btn-primary-bg-hover: $dark-blue-blue-800;
-$btn-secondary-bg: $dark-blue-slate-700;
-$btn-secondary-bg-hover: $dark-blue-slate-600;
-$btn-success-bg: $dark-blue-cyan-600;
-$btn-success-bg-hover: $dark-blue-cyan-700;
-$btn-warning-bg: $dark-blue-sky-700;
-$btn-warning-text: #ffffff;
-$btn-danger-bg: $dark-blue-sky-800;
-$btn-danger-bg-hover: $dark-blue-sky-900;
-$btn-info-bg: $dark-blue-sky-600;
-$btn-info-bg-hover: $dark-blue-sky-700;
-$btn-light-bg: $dark-blue-slate-700;
-$btn-light-text: $dark-blue-sky-50;
-$btn-light-bg-hover: $dark-blue-slate-600;
-$btn-dark-bg: $dark-blue-slate-900;
-$btn-dark-bg-hover: $dark-blue-slate-950;
-
-// Validation shadow colors - match button colors
-$success-bg: $btn-success-bg;
-$success-bg-light: rgba(34, 211, 238, 0.15);
-$warning-bg: $btn-warning-bg;
-$warning-bg-light: rgba(14, 165, 233, 0.15);
-$danger-bg: $btn-danger-bg;
-$danger-bg-light: rgba(7, 89, 133, 0.15);
-
-// Modal colors
-$modal-overlay-bg: rgba(0, 0, 0, 0.75);
-$modal-content-bg: $dark-blue-slate-800;
-
-// Profile name in header
-$header-profile-name-color: #ffffff;  // White text on dark header
-
-@import '../core';
-@import '../utilities';
-@import '../base-css-variables';
-
-// CSS Variables for page loader (FOUC prevention) and base theme variables
-:root {
-  --page-loader-bg: rgba(26, 26, 26, 0.95);
-  --page-loader-spinner-border: #333;
-  --page-loader-spinner-accent: #3b82f6; // Blue
-
-  // Base CSS variables for web components (daterangepicker, multiselect, etc.)
-  @include output-base-css-variables;
-}