@keenmate/pure-admin-core 1.0.0 → 1.1.1

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

package/src/scss/themes/minimal.scss

@@ -1,134 +0,0 @@
-/* Minimal Theme for Pure Admin Visual - Ultra clean, monochrome approach */
-@use 'sass:color';
-
-// =============================================================================
-// THEME COLOR SLOTS (1-9) - Minimal muted palette
-// =============================================================================
-$color-1: #374151;  // Gray 700 (primary)
-$color-2: #6b7280;  // Gray 500 (secondary)
-$color-3: #059669;  // Emerald 600 (muted success)
-$color-4: #d97706;  // Amber 600 (muted warning)
-$color-5: #4f46e5;  // Indigo 600 (accent)
-$color-6: #7c3aed;  // Violet 600 (subtle)
-$color-7: #9ca3af;  // Gray 400 (light)
-$color-8: #1f2937;  // Gray 800 (dark)
-$color-9: #db2777;  // Pink 600 (highlight)
-
-@import '../variables';
-
-// Minimal theme color palette - grayscale focused
-$minimal-white: #ffffff;
-$minimal-gray-50: #fafafa;
-$minimal-gray-100: #f8f9fa;
-$minimal-gray-150: #f8f8f8;
-$minimal-gray-200: #fcfcfc;
-$minimal-gray-250: #fdfdfd;
-$minimal-gray-300: #f0f0f0;
-$minimal-gray-400: #e8e8e8;
-$minimal-gray-500: #d8d8d8;
-$minimal-gray-600: #e2e6ea;
-$minimal-gray-700: #777777;
-$minimal-gray-800: #555555;
-$minimal-gray-850: #444444;
-$minimal-gray-900: #333333;
-$minimal-dark-500: #343a40;
-$minimal-dark-700: #23272b;
-$minimal-dark-900: #212529;
-
-// Layout overrides
-$footer-height: 3.2rem;    // 32px (10px base) - was 2rem at 16px base
-$sidebar-width: 29rem;   // 290px (10px base)
-
-// Color overrides for minimal theme
-$primary-bg: $minimal-white;
-$content-background-color: $minimal-white;
-$header-bg: $minimal-gray-50;
-$sidebar-bg: $minimal-gray-150;
-$footer-bg: $minimal-gray-50;
-$border-color: $minimal-gray-400;
-$text-primary: $minimal-gray-900;
-$text-secondary: $minimal-gray-700;
-$accent-color: $minimal-gray-800;
-$accent-hover: rgba(85, 85, 85, 0.1);
-$accent-light: rgba(85, 85, 85, 0.05);
-
-// Sync base variables with theme 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.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: $minimal-white;
-$card-header-bg: $minimal-gray-50;
-$card-footer-bg: $minimal-gray-50;
-$card-tabs-bg: $minimal-gray-150;
-
-// Input colors
-$input-bg: $minimal-white;
-$input-border: $minimal-gray-400;
-$input-text: $minimal-gray-900;
-
-// Table colors
-$table-bg: $minimal-white;
-$table-header-bg: $minimal-gray-100;
-$table-hover-bg: $minimal-gray-100;
-$table-stripe: $minimal-gray-200;
-
-// Button colors - minimal grayscale approach with selective color
-$btn-primary-bg: $minimal-gray-800;
-$btn-primary-bg-hover: $minimal-gray-850;
-$btn-secondary-bg: $minimal-gray-400;
-$btn-secondary-bg-hover: $minimal-gray-500;
-$btn-success-bg: #28a745;
-$btn-success-bg-hover: #218838;
-$btn-warning-bg: #ffc107;
-$btn-warning-text: $minimal-dark-900;
-$btn-danger-bg: #dc3545;
-$btn-danger-bg-hover: #c82333;
-$btn-info-bg: #17a2b8;
-$btn-info-bg-hover: #138496;
-$btn-light-bg: $minimal-gray-100;
-$btn-light-text: $minimal-gray-900;
-$btn-light-bg-hover: $minimal-gray-600;
-$btn-dark-bg: $minimal-dark-500;
-$btn-dark-bg-hover: $minimal-dark-700;
-
-// Validation shadow colors - match button colors
-$success-bg: $btn-success-bg;
-$success-bg-light: rgba(40, 167, 69, 0.1);
-$warning-bg: $btn-warning-bg;
-$warning-bg-light: rgba(255, 193, 7, 0.1);
-$danger-bg: $btn-danger-bg;
-$danger-bg-light: rgba(220, 53, 69, 0.1);
-
-// Modal colors
-$modal-overlay-bg: rgba(0, 0, 0, 0.4);
-$modal-content-bg: $minimal-white;
-
-@import '../core';
-@import '../utilities';
-@import '../base-css-variables';
-
-// CSS Variables for page loader (FOUC prevention) and base theme variables
-:root {
-  --page-loader-bg: rgba(255, 255, 255, 0.95);
-  --page-loader-spinner-border: #e0e0e0;
-  --page-loader-spinner-accent: #000000;
-
-  // Base CSS variables for web components (daterangepicker, multiselect, etc.)
-  @include output-base-css-variables;
-}