@keenmate/pure-admin-core 1.0.0-rc01

package/src/scss/themes/express.scss

@@ -0,0 +1,281 @@
+/* Express Theme - Bold yellow and red palette inspired by logistics brands */
+@use 'sass:color';
+
+@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

@@ -0,0 +1,121 @@
+/* Minimal Theme for Pure Admin Visual - Ultra clean, monochrome approach */
+@use 'sass:color';
+
+@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;
+}