@keenmate/pure-admin-core 1.0.0-rc06 → 1.1.0

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

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