@keenmate/pure-admin-core 1.0.0 → 1.1.0

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;
-}

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

@@ -1,169 +0,0 @@
-/* Dark Green Theme for Pure Admin Visual */
-@use 'sass:color';
-
-// =============================================================================
-// THEME COLOR SLOTS (1-9) - Dark green palette
-// =============================================================================
-$color-1: #22c55e;  // Green 500 (primary)
-$color-2: #4ade80;  // Green 400 (lighter)
-$color-3: #84cc16;  // Lime 500 (accent)
-$color-4: #eab308;  // Yellow 500 (warning)
-$color-5: #14b8a6;  // Teal 500 (info)
-$color-6: #3b82f6;  // Blue 500 (contrast)
-$color-7: #a3e635;  // Lime 400 (highlight)
-$color-8: #f0fdf4;  // Green 50 (light)
-$color-9: #f97316;  // Orange 500 (alert)
-
-@import '../variables';
-
-// Dark green theme color palette
-$dark-green-bg-900: #0f1e13;
-$dark-green-bg-800: #1a2e1f;
-$dark-green-bg-700: #2d5b3a;
-$dark-green-bg-600: #365e42;
-$dark-green-bg-500: #1e4025;
-
-$dark-green-text-50: #f0fdf4;
-$dark-green-text-300: #86efac;
-$dark-green-text-100: #dcfce7;
-
-$dark-green-accent: #22c55e;
-$dark-green-primary: #15803d;
-$dark-green-primary-dark: #166534;
-$dark-green-success: #059669;
-$dark-green-success-dark: #047857;
-$dark-green-warning: #854d0e;
-$dark-green-danger: #7f1d1d;
-$dark-green-danger-dark: #991b1b;
-$dark-green-info: #0e7490;
-$dark-green-info-dark: #155e75;
-$dark-green-very-dark: #0a0f0b;
-$dark-green-darkest: #052e16;
-
-// Color overrides for dark green theme
-$primary-bg: $dark-green-bg-900;
-$content-background-color: $dark-green-bg-900;
-$header-bg: $dark-green-bg-800;
-$sidebar-bg: $dark-green-bg-800;
-$sidebar-submenu-bg: $dark-green-bg-700;
-$sidebar-submenu-hover-bg: $dark-green-bg-600;
-$sidebar-submenu-active-bg: $dark-green-bg-700;
-$footer-bg: $dark-green-bg-800;
-$border-color: $dark-green-bg-700;
-$header-border-color: $dark-green-bg-700; // Match sidebar border color
-$text-primary: $dark-green-text-50;
-$text-secondary: $dark-green-text-300;
-$accent-color: $dark-green-accent;
-$accent-hover: rgba(34, 197, 94, 0.15);
-$accent-light: rgba(34, 197, 94, 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-green-bg-800;
-$base-primary-bg-hover: $dark-green-bg-700;
-$base-text-color-1: $dark-green-text-50;
-$base-text-color-2: $dark-green-text-300;
-$base-text-color-3: #6b8f6b;
-$base-text-color-4: #4a6b4a;
-$base-text-on-accent: #ffffff;
-$base-border-color: $dark-green-bg-700;
-
-// Input fields
-$base-input-background: $dark-green-bg-900;
-$base-input-color: $dark-green-text-50;
-$base-input-border: 1px solid $dark-green-bg-700;
-$base-input-border-hover: 1px solid $accent-color;
-$base-input-border-focus: 1px solid $accent-color;
-$base-input-placeholder-color: $dark-green-bg-600;
-$base-input-background-disabled: rgba($dark-green-bg-800, 0.5);
-
-// Dropdown/Popover
-$base-dropdown-background: $dark-green-bg-800;
-$base-dropdown-border: 1px solid $dark-green-bg-700;
-$base-dropdown-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
-
-// Tooltip
-$base-tooltip-background: $dark-green-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-green-bg-800;
-$card-header-bg: $dark-green-bg-900;
-$card-footer-bg: $dark-green-bg-900;
-$card-tabs-bg: $dark-green-bg-700;
-
-// Input colors
-$input-bg: $dark-green-bg-900;
-$input-border: $border-color;
-$input-text: $text-primary;
-
-// Table colors
-$table-bg: $dark-green-bg-800;
-$table-header-bg: $dark-green-bg-900;
-$table-hover-bg: $dark-green-bg-700;
-$table-stripe: $dark-green-bg-800;
-
-// Button colors - green-focused palette
-$btn-primary-bg: $dark-green-primary;
-$btn-primary-bg-hover: $dark-green-primary-dark;
-$btn-secondary-bg: $dark-green-bg-500;
-$btn-secondary-bg-hover: $dark-green-bg-700;
-$btn-success-bg: $dark-green-success;
-$btn-success-bg-hover: $dark-green-success-dark;
-$btn-warning-bg: $dark-green-warning;
-$btn-warning-text: #ffffff;
-$btn-danger-bg: $dark-green-danger;
-$btn-danger-bg-hover: $dark-green-danger-dark;
-$btn-info-bg: $dark-green-info;
-$btn-info-bg-hover: $dark-green-info-dark;
-$btn-light-bg: $dark-green-bg-700;
-$btn-light-text: $dark-green-text-100;
-$btn-light-bg-hover: $dark-green-bg-600;
-$btn-dark-bg: $dark-green-very-dark;
-$btn-dark-bg-hover: $dark-green-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-green-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: #10b981; // Green
-
-  // Base CSS variables for web components (daterangepicker, multiselect, etc.)
-  @include output-base-css-variables;
-}