@keenmate/pure-admin-core 1.0.0-rc01

package/src/scss/themes/audi.scss

@@ -0,0 +1,288 @@
+/* Pure Admin Visual - Audi Theme (Pure SCSS Variables) */
+@use 'sass:color';
+
+// 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: 3px;
+$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;
+
+// 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 {
+  border-radius: 0 !important; // Sharp edges
+  border: $border-width-medium solid $border-color;
+  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

@@ -0,0 +1,203 @@
+/* Corporate Theme for Pure Admin Visual - Professional blue/gray palette */
+
+@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;
+    }
+  }
+}
+
+// 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

@@ -0,0 +1,152 @@
+/* Dark Blue Theme for Pure Admin Visual */
+@use 'sass:color';
+
+@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;
+}