@keenmate/pure-admin-core 1.0.0 → 1.1.0

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

@@ -1,173 +0,0 @@
-/* Dark Red Theme for Pure Admin Visual */
-@use 'sass:color';
-
-// =============================================================================
-// THEME COLOR SLOTS (1-9) - Dark red palette
-// =============================================================================
-$color-1: #ef4444;  // Red 500 (primary)
-$color-2: #f87171;  // Red 400 (lighter)
-$color-3: #f97316;  // Orange 500 (accent)
-$color-4: #eab308;  // Yellow 500 (warning)
-$color-5: #ec4899;  // Pink 500 (secondary)
-$color-6: #8b5cf6;  // Violet 500 (contrast)
-$color-7: #fca5a5;  // Red 300 (muted)
-$color-8: #fef2f2;  // Red 50 (light)
-$color-9: #06b6d4;  // Cyan 500 (cool contrast)
-
-@import '../variables';
-
-// Dark red theme color palette
-$dark-red-bg-900: #1f0f0f;
-$dark-red-bg-800: #2d1a1a;
-$dark-red-bg-700: #5b2d2d;
-$dark-red-bg-600: #6b3333;
-$dark-red-bg-500: #3f2020;
-
-$dark-red-table-bg: #2d1b1b;
-$dark-red-table-header: #1a0e0e;
-$dark-red-table-hover: #4a2323;
-
-$dark-red-text-50: #fef2f2;
-$dark-red-text-300: #fca5a5;
-$dark-red-text-200: #fecdd3;
-
-$dark-red-accent: #ef4444;
-$dark-red-primary: #991b1b;
-$dark-red-primary-dark: #7f1d1d;
-$dark-red-success: #713f12;
-$dark-red-success-dark: #854d0e;
-$dark-red-warning: #a21caf;
-$dark-red-danger: #be123c;
-$dark-red-danger-dark: #9f1239;
-$dark-red-info: #881337;
-$dark-red-info-dark: #4c0519;
-$dark-red-very-dark: #18080a;
-$dark-red-darkest: #450a0a;
-
-// Color overrides for dark red theme
-$primary-bg: $dark-red-bg-900;
-$content-background-color: $dark-red-bg-900;
-$header-bg: $dark-red-bg-800;
-$sidebar-bg: $dark-red-bg-800;
-$sidebar-submenu-bg: $dark-red-bg-700;
-$sidebar-submenu-hover-bg: $dark-red-bg-600;
-$sidebar-submenu-active-bg: $dark-red-bg-700;
-$footer-bg: $dark-red-bg-800;
-$border-color: $dark-red-bg-700;
-$header-border-color: $dark-red-bg-700; // Match sidebar border color
-$text-primary: $dark-red-text-50;
-$text-secondary: $dark-red-text-300;
-$accent-color: $dark-red-accent;
-$accent-hover: rgba(239, 68, 68, 0.15);
-$accent-light: rgba(239, 68, 68, 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-red-bg-800;
-$base-primary-bg-hover: $dark-red-bg-700;
-$base-text-color-1: $dark-red-text-50;
-$base-text-color-2: $dark-red-text-300;
-$base-text-color-3: #b88888;
-$base-text-color-4: #8b5a5a;
-$base-text-on-accent: #ffffff;
-$base-border-color: $dark-red-bg-700;
-
-// Input fields
-$base-input-background: $dark-red-bg-900;
-$base-input-color: $dark-red-text-50;
-$base-input-border: 1px solid $dark-red-bg-700;
-$base-input-border-hover: 1px solid $accent-color;
-$base-input-border-focus: 1px solid $accent-color;
-$base-input-placeholder-color: $dark-red-bg-600;
-$base-input-background-disabled: rgba($dark-red-bg-800, 0.5);
-
-// Dropdown/Popover
-$base-dropdown-background: $dark-red-bg-800;
-$base-dropdown-border: 1px solid $dark-red-bg-700;
-$base-dropdown-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
-
-// Tooltip
-$base-tooltip-background: $dark-red-bg-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-red-bg-800;
-$card-header-bg: $dark-red-bg-900;
-$card-footer-bg: $dark-red-bg-900;
-$card-tabs-bg: $dark-red-bg-700;
-
-// Input colors
-$input-bg: $dark-red-bg-900;
-$input-border: $border-color;
-$input-text: $text-primary;
-
-// Table colors
-$table-bg: $dark-red-table-bg;
-$table-header-bg: $dark-red-table-header;
-$table-hover-bg: $dark-red-table-hover;
-$table-stripe: $dark-red-table-bg;
-
-// Button colors - red-focused palette
-$btn-primary-bg: $dark-red-primary;
-$btn-primary-bg-hover: $dark-red-primary-dark;
-$btn-secondary-bg: $dark-red-bg-500;
-$btn-secondary-bg-hover: $dark-red-bg-700;
-$btn-success-bg: $dark-red-success;
-$btn-success-bg-hover: $dark-red-success-dark;
-$btn-warning-bg: $dark-red-warning;
-$btn-warning-text: #ffffff;
-$btn-danger-bg: $dark-red-danger;
-$btn-danger-bg-hover: $dark-red-danger-dark;
-$btn-info-bg: $dark-red-info;
-$btn-info-bg-hover: $dark-red-info-dark;
-$btn-light-bg: $dark-red-bg-700;
-$btn-light-text: $dark-red-text-200;
-$btn-light-bg-hover: $dark-red-bg-600;
-$btn-dark-bg: $dark-red-very-dark;
-$btn-dark-bg-hover: $dark-red-darkest;
-
-// Validation shadow colors - match button colors
-$success-bg: $btn-success-bg;
-$success-bg-light: rgba(34, 197, 94, 0.15);
-$warning-bg: $btn-warning-bg;
-$warning-bg-light: rgba(251, 191, 36, 0.15);
-$danger-bg: $btn-danger-bg;
-$danger-bg-light: rgba(239, 68, 68, 0.15);
-
-// Modal colors
-$modal-overlay-bg: rgba(0, 0, 0, 0.7);
-$modal-content-bg: $dark-red-bg-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: #ef4444; // Red
-
-  // Base CSS variables for web components (daterangepicker, multiselect, etc.)
-  @include output-base-css-variables;
-}

package/src/scss/themes/dark.scss

@@ -1,158 +0,0 @@
-/* Dark Theme for Pure Admin Visual */
-@use 'sass:color';
-
-// =============================================================================
-// THEME COLOR SLOTS (1-9) - Dark theme vibrant palette
-// =============================================================================
-$color-1: #4dabf7;  // Light Blue (primary)
-$color-2: #69db7c;  // Light Green (success)
-$color-3: #ffd43b;  // Yellow (warning)
-$color-4: #ff6b6b;  // Light Red (danger)
-$color-5: #da77f2;  // Light Purple (accent)
-$color-6: #38d9a9;  // Teal (info)
-$color-7: #adb5bd;  // Gray (neutral)
-$color-8: #f8f9fa;  // Light (contrast)
-$color-9: #ffa94d;  // Orange (highlight)
-
-@import '../variables';
-
-// Dark theme color palette
-$dark-bg-primary: #1a1a1a;
-$dark-bg-secondary: #2a2a2a;
-$dark-bg-tertiary: #333333;
-$dark-bg-quaternary: #404040;
-$dark-bg-header: #2d2d2d;
-$dark-bg-sidebar: #242424;
-$dark-bg-hover: #353535;
-
-$dark-text-primary: #ffffff;
-$dark-text-secondary: #b8b8b8;
-
-$dark-accent: #4dabf7;
-
-// Color overrides for dark theme
-$primary-bg: $dark-bg-primary;
-$content-background-color: $dark-bg-primary;
-$header-bg: $dark-bg-header;
-$sidebar-bg: $dark-bg-sidebar;
-$sidebar-submenu-bg: $dark-bg-tertiary;
-$sidebar-submenu-hover-bg: $dark-bg-hover;
-$sidebar-submenu-active-bg: $dark-bg-quaternary;
-$footer-bg: $dark-bg-header;
-$border-color: $dark-bg-quaternary;
-$text-primary: $dark-text-primary;
-$text-secondary: $dark-text-secondary;
-$accent-color: $dark-accent;
-$accent-hover: rgba(77, 171, 247, 0.15);
-$accent-light: rgba(77, 171, 247, 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-bg-secondary;
-$base-primary-bg-hover: $dark-bg-tertiary;
-$base-text-color-1: #ffffff;
-$base-text-color-2: #b8b8b8;
-$base-text-color-3: #888888;
-$base-text-color-4: #666666;
-$base-text-on-accent: #ffffff;
-$base-border-color: $dark-bg-quaternary;
-
-// Input fields
-$base-input-background: $dark-bg-tertiary;
-$base-input-color: #ffffff;
-$base-input-border: 1px solid $dark-bg-quaternary;
-$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($dark-bg-tertiary, 0.5);
-
-// Dropdown/Popover
-$base-dropdown-background: $dark-bg-secondary;
-$base-dropdown-border: 1px solid $dark-bg-quaternary;
-$base-dropdown-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
-
-// Tooltip
-$base-tooltip-background: $dark-bg-tertiary;
-$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-bg-secondary;
-$card-header-bg: $dark-bg-tertiary;
-$card-footer-bg: $dark-bg-tertiary;
-$card-tabs-bg: $dark-bg-tertiary;
-
-// Input colors
-$input-bg: $dark-bg-tertiary;
-$input-border: $border-color;
-$input-text: $text-primary;
-
-// Table colors
-$table-bg: $dark-bg-secondary;
-$table-header-bg: $dark-bg-tertiary;
-$table-hover-bg: $dark-bg-hover;
-$table-stripe: $dark-bg-tertiary;
-
-// Button colors
-$btn-primary-bg: #2563eb;
-$btn-primary-bg-hover: #1d4ed8;
-$btn-secondary-bg: #374151;
-$btn-secondary-bg-hover: #4b5563;
-$btn-success-bg: #059669;
-$btn-success-bg-hover: #047857;
-$btn-warning-bg: #d97706;
-$btn-warning-text: #ffffff;
-$btn-danger-bg: #dc2626;
-$btn-danger-bg-hover: #b91c1c;
-$btn-info-bg: #0891b2;
-$btn-info-bg-hover: #0e7490;
-$btn-light-bg: #374151;
-$btn-light-text: #f3f4f6;
-$btn-light-bg-hover: #4b5563;
-$btn-dark-bg: #111827;
-$btn-dark-bg-hover: #030712;
-
-// Validation shadow colors - match button colors
-$success-bg: $btn-success-bg;
-$success-bg-light: rgba(5, 150, 105, 0.15);
-$warning-bg: $btn-warning-bg;
-$warning-bg-light: rgba(217, 119, 6, 0.15);
-$danger-bg: $btn-danger-bg;
-$danger-bg-light: rgba(220, 38, 38, 0.15);
-
-// Modal colors
-$modal-overlay-bg: rgba(0, 0, 0, 0.7);
-$modal-content-bg: $dark-bg-secondary;
-
-// 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: #0ea5e9; // Bright blue
-
-  // Base CSS variables for web components (daterangepicker, multiselect, etc.)
-  @include output-base-css-variables;
-}

package/src/scss/themes/express.scss

@@ -1,294 +0,0 @@
-/* Express Theme - Bold yellow and red palette inspired by logistics brands */
-@use 'sass:color';
-
-// =============================================================================
-// THEME COLOR SLOTS (1-9) - Express logistics palette
-// =============================================================================
-$color-1: #D40511;  // Express Red (primary)
-$color-2: #FFCC00;  // Express Yellow (brand)
-$color-3: #ff6b00;  // Orange (urgent)
-$color-4: #00a651;  // Green (delivered)
-$color-5: #0066cc;  // Blue (tracking)
-$color-6: #6b3fa0;  // Purple (premium)
-$color-7: #8C8C8C;  // Gray (neutral)
-$color-8: #333333;  // Dark (contrast)
-$color-9: #00b4d8;  // Cyan (info)
-
-@import '../variables';
-
-// Express color palette - Bold yellow and red
-$express-yellow: #FFCC00;       // Primary yellow
-$express-yellow-light: #FFE57F;
-$express-yellow-lighter: #FFF0B2;
-
-$express-red: #D40511;          // Primary red
-$express-red-hover: #F91320;
-$express-red-dark: #98040C;
-
-$express-black: #000000;
-$express-dark: #333333;
-$express-gray: #8C8C8C;
-$express-gray-light: #CCCCCC;
-$express-gray-lighter: #E5E5E5;
-$express-gray-lightest: #EBEBEB;
-$express-bg: #F2F2F2;
-
-// Layout overrides
-$sidebar-width: 29rem;   // 290px (10px base)
-
-// Font overrides
-$body-font-family: "Delivery", system-ui, -apple-system, sans-serif;
-
-// Express theme color overrides - Bold yellow header/footer with red accents
-$primary-bg: #ffffff;
-$content-background-color: $express-bg;
-$header-bg: $express-yellow;        // Bold yellow header
-$header-border-color: $express-yellow; // Remove gray line between header and sidebar
-$sidebar-bg: $express-black;        // Black sidebar
-$sidebar-submenu-bg: #1a1a1a;       // Slightly lighter black for submenus
-$sidebar-submenu-hover-bg: rgba(255, 255, 255, 0.1); // Match level 1 hover
-$sidebar-submenu-active-bg: $express-red; // Match level 1 active (red accent)
-$footer-bg: $express-yellow;        // Bold yellow footer
-$footer-border-color: $express-yellow; // Remove gray line between footer and sidebar
-$border-color: $express-gray-lighter;
-$text-primary: $express-dark;
-$text-secondary: $express-gray;
-$accent-color: $express-red;        // Red accent
-$accent-hover: rgba(212, 5, 17, 0.12);
-$accent-light: rgba(212, 5, 17, 0.06);
-
-// Sync base variables with theme colors
-$base-accent-color: $accent-color;
-$base-accent-color-hover: $express-red-hover;
-$base-accent-color-active: color.adjust($express-red, $lightness: 15%);
-$base-accent-color-light: $accent-light;
-$base-accent-color-light-hover: rgba($base-accent-color, 0.10);
-
-// 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: $express-gray-lightest;
-$card-footer-bg: #ffffff;
-$card-tabs-bg: $express-gray-lighter;
-
-// Input colors
-$input-bg: #ffffff;
-$input-border: $express-gray-lighter;
-$input-text: $express-dark;
-
-// Table colors
-$table-bg: #ffffff;
-$table-header-bg: $express-gray-lightest;
-$table-hover-bg: $express-yellow-lighter;
-$table-stripe: $express-bg;
-
-// Button colors - Red primary, yellow secondary
-$btn-primary-bg: $express-red;
-$btn-primary-bg-hover: $express-red-hover;
-$btn-primary-text: #ffffff;
-$btn-secondary-bg: $express-yellow;
-$btn-secondary-bg-hover: $express-yellow-light;
-$btn-secondary-text: $express-black;
-$btn-success-bg: #10b981;
-$btn-success-bg-hover: #059669;
-$btn-warning-bg: #f59e0b;
-$btn-warning-text: #ffffff;
-$btn-danger-bg: $express-red-dark;
-$btn-danger-bg-hover: $express-red;
-$btn-info-bg: #06b6d4;
-$btn-info-bg-hover: #0891b2;
-$btn-light-bg: $express-gray-lightest;
-$btn-light-text: $express-dark;
-$btn-light-bg-hover: $express-gray-lighter;
-$btn-dark-bg: $express-dark;
-$btn-dark-bg-hover: $express-black;
-
-// 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(180, 5, 14, 0.1);
-
-// Modal colors
-$modal-overlay-bg: rgba(0, 0, 0, 0.6);
-$modal-content-bg: #ffffff;
-
-// Profile name in header
-$header-profile-name-color: $express-black;  // Black text on yellow header
-
-// Alert colors - Vibrant and punchy with semi-transparent backgrounds
-$alert-success-text: #065f46; // Darker green for contrast
-$alert-success-bg: rgba(16, 185, 129, 0.68); // More vibrant
-$alert-success-border: #10b981;
-
-$alert-danger-text: #7f1d1d; // Dark red for contrast
-$alert-danger-bg: rgba(212, 5, 17, 0.58);
-$alert-danger-border: $express-red;
-$alert-danger-text-transform: uppercase; // Uppercase for emphasis
-
-$alert-warning-text: #78350f; // Dark amber for contrast
-$alert-warning-bg: rgba(255, 193, 7, 0.58);
-$alert-warning-border: #ffc107;
-
-$alert-info-text: #164e63; // Dark cyan for contrast
-$alert-info-bg: rgba(6, 182, 212, 0.58);
-$alert-info-border: #06b6d4;
-
-// Delivery Font
-@font-face {
-    font-family: "Delivery";
-    src: url(/fonts/Delivery/Delivery_W_Rg.woff2) format("woff2");
-    font-weight: 400;
-    font-style: normal;
-}
-
-@import '../core';
-@import '../utilities';
-@import '../base-css-variables';
-
-// Express-specific styling overrides
-// Header text visibility - black text on yellow header
-.pa-header {
-  &__brand h1 {
-    color: $express-black !important;
-    font-weight: $font-weight-bold !important;
-  }
-
-  &__nav ul li a {
-    color: $express-dark !important;
-
-    &:hover {
-      color: $express-red !important;
-      background-color: rgba(212, 5, 17, 0.08) !important;
-    }
-  }
-
-  &__title h2 {
-    color: $express-dark !important;
-  }
-
-  &__profile-btn {
-    color: $express-black !important;
-
-    &:hover {
-      background-color: rgba(212, 5, 17, 0.12) !important;
-    }
-  }
-}
-
-// Burger menu - black bars on yellow header
-.burger-menu {
-  span {
-    background-color: $express-black !important;
-  }
-
-  &:hover span {
-    background-color: $express-red !important;
-  }
-}
-
-// Theme switcher in header
-.theme-switcher {
-  label {
-    color: $express-dark !important;
-  }
-
-  select {
-    background-color: $express-yellow-light !important;
-    color: $express-black !important;
-    border-color: $express-gray-lighter !important;
-
-    &:focus {
-      border-color: $express-red !important;
-    }
-  }
-}
-
-// Footer text - black on yellow
-.admin-footer {
-  &__content p {
-    color: $express-dark !important;
-  }
-}
-
-// Sidebar - black background with white/light text
-.pa-sidebar {
-  border-right-color: $express-black !important; // Remove gray border
-
-  &__link,
-  &__toggle {
-    color: #ffffff !important;
-
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.1) !important;
-      color: $express-yellow !important;
-    }
-  }
-
-  &__link--active {
-    background-color: $express-red !important;
-    border-right: 3px solid $express-yellow !important;
-    color: #ffffff !important;
-  }
-
-  &__chevron {
-    color: #ffffff !important;
-  }
-}
-
-// Primary button - bold red with white text
-.pa-btn--primary {
-  font-weight: $font-weight-bold !important;
-  background-color: $express-red !important;
-  color: #ffffff !important;
-
-  &:hover {
-    background-color: $express-red-hover !important;
-    box-shadow: 0 2px 8px rgba(212, 5, 17, 0.3) !important;
-  }
-}
-
-// Secondary button - yellow with black text
-.pa-btn--secondary {
-  background-color: $express-yellow !important;
-  color: $express-black !important;
-  border-color: $express-yellow !important;
-
-  &:hover {
-    background-color: $express-yellow-light !important;
-    border-color: $express-yellow-light !important;
-    box-shadow: 0 2px 8px rgba(255, 204, 0, 0.25) !important;
-  }
-}
-
-// Danger button - dark red
-.pa-btn--danger {
-  font-weight: $font-weight-bold !important;
-
-  &:hover {
-    box-shadow: 0 2px 8px rgba(212, 5, 17, 0.3) !important;
-  }
-}
-
-// CSS Variables for page loader (FOUC prevention) and base theme variables
-:root {
-  --page-loader-bg: rgba(0, 0, 0, 0.95);
-  --page-loader-spinner-border: #333;
-  --page-loader-spinner-accent: #FFCC00; // Express yellow
-
-  // Base CSS variables for web components (daterangepicker, multiselect, etc.)
-  @include output-base-css-variables;
-}