@keenmate/pure-admin-core 1.0.0-rc01

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

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

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

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