@keenmate/pure-admin-theme-express 1.1.1 → 1.1.2

package/dist/express.css

@@ -2975,6 +2975,168 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   padding: 2.4rem 1.6rem;
 }
 
+.pa-card--color-1 {
+  border-color: var(--pa-color-1);
+}
+
+.pa-card--color-1 .pa-card__header {
+  background-color: var(--pa-color-1);
+  color: var(--pa-color-1-text);
+}
+
+.pa-card--color-1 .pa-card__header h1,
+.pa-card--color-1 .pa-card__header h2,
+.pa-card--color-1 .pa-card__header h3,
+.pa-card--color-1 .pa-card__header h4,
+.pa-card--color-1 .pa-card__header h5,
+.pa-card--color-1 .pa-card__header h6 {
+  color: var(--pa-color-1-text);
+}
+
+.pa-card--color-2 {
+  border-color: var(--pa-color-2);
+}
+
+.pa-card--color-2 .pa-card__header {
+  background-color: var(--pa-color-2);
+  color: var(--pa-color-2-text);
+}
+
+.pa-card--color-2 .pa-card__header h1,
+.pa-card--color-2 .pa-card__header h2,
+.pa-card--color-2 .pa-card__header h3,
+.pa-card--color-2 .pa-card__header h4,
+.pa-card--color-2 .pa-card__header h5,
+.pa-card--color-2 .pa-card__header h6 {
+  color: var(--pa-color-2-text);
+}
+
+.pa-card--color-3 {
+  border-color: var(--pa-color-3);
+}
+
+.pa-card--color-3 .pa-card__header {
+  background-color: var(--pa-color-3);
+  color: var(--pa-color-3-text);
+}
+
+.pa-card--color-3 .pa-card__header h1,
+.pa-card--color-3 .pa-card__header h2,
+.pa-card--color-3 .pa-card__header h3,
+.pa-card--color-3 .pa-card__header h4,
+.pa-card--color-3 .pa-card__header h5,
+.pa-card--color-3 .pa-card__header h6 {
+  color: var(--pa-color-3-text);
+}
+
+.pa-card--color-4 {
+  border-color: var(--pa-color-4);
+}
+
+.pa-card--color-4 .pa-card__header {
+  background-color: var(--pa-color-4);
+  color: var(--pa-color-4-text);
+}
+
+.pa-card--color-4 .pa-card__header h1,
+.pa-card--color-4 .pa-card__header h2,
+.pa-card--color-4 .pa-card__header h3,
+.pa-card--color-4 .pa-card__header h4,
+.pa-card--color-4 .pa-card__header h5,
+.pa-card--color-4 .pa-card__header h6 {
+  color: var(--pa-color-4-text);
+}
+
+.pa-card--color-5 {
+  border-color: var(--pa-color-5);
+}
+
+.pa-card--color-5 .pa-card__header {
+  background-color: var(--pa-color-5);
+  color: var(--pa-color-5-text);
+}
+
+.pa-card--color-5 .pa-card__header h1,
+.pa-card--color-5 .pa-card__header h2,
+.pa-card--color-5 .pa-card__header h3,
+.pa-card--color-5 .pa-card__header h4,
+.pa-card--color-5 .pa-card__header h5,
+.pa-card--color-5 .pa-card__header h6 {
+  color: var(--pa-color-5-text);
+}
+
+.pa-card--color-6 {
+  border-color: var(--pa-color-6);
+}
+
+.pa-card--color-6 .pa-card__header {
+  background-color: var(--pa-color-6);
+  color: var(--pa-color-6-text);
+}
+
+.pa-card--color-6 .pa-card__header h1,
+.pa-card--color-6 .pa-card__header h2,
+.pa-card--color-6 .pa-card__header h3,
+.pa-card--color-6 .pa-card__header h4,
+.pa-card--color-6 .pa-card__header h5,
+.pa-card--color-6 .pa-card__header h6 {
+  color: var(--pa-color-6-text);
+}
+
+.pa-card--color-7 {
+  border-color: var(--pa-color-7);
+}
+
+.pa-card--color-7 .pa-card__header {
+  background-color: var(--pa-color-7);
+  color: var(--pa-color-7-text);
+}
+
+.pa-card--color-7 .pa-card__header h1,
+.pa-card--color-7 .pa-card__header h2,
+.pa-card--color-7 .pa-card__header h3,
+.pa-card--color-7 .pa-card__header h4,
+.pa-card--color-7 .pa-card__header h5,
+.pa-card--color-7 .pa-card__header h6 {
+  color: var(--pa-color-7-text);
+}
+
+.pa-card--color-8 {
+  border-color: var(--pa-color-8);
+}
+
+.pa-card--color-8 .pa-card__header {
+  background-color: var(--pa-color-8);
+  color: var(--pa-color-8-text);
+}
+
+.pa-card--color-8 .pa-card__header h1,
+.pa-card--color-8 .pa-card__header h2,
+.pa-card--color-8 .pa-card__header h3,
+.pa-card--color-8 .pa-card__header h4,
+.pa-card--color-8 .pa-card__header h5,
+.pa-card--color-8 .pa-card__header h6 {
+  color: var(--pa-color-8-text);
+}
+
+.pa-card--color-9 {
+  border-color: var(--pa-color-9);
+}
+
+.pa-card--color-9 .pa-card__header {
+  background-color: var(--pa-color-9);
+  color: var(--pa-color-9-text);
+}
+
+.pa-card--color-9 .pa-card__header h1,
+.pa-card--color-9 .pa-card__header h2,
+.pa-card--color-9 .pa-card__header h3,
+.pa-card--color-9 .pa-card__header h4,
+.pa-card--color-9 .pa-card__header h5,
+.pa-card--color-9 .pa-card__header h6 {
+  color: var(--pa-color-9-text);
+}
+
 .pa-card__tabs {
   display: flex;
   border-bottom: 1px solid var(--pa-border-color);
@@ -5598,6 +5760,7 @@ a.pa-card p {
 
 .pa-tooltip--color-1::before {
   background-color: var(--pa-color-1);
+  color: var(--pa-color-1-text);
 }
 
 .pa-tooltip--color-1::after {
@@ -5621,6 +5784,7 @@ a.pa-card p {
 
 .pa-tooltip--color-2::before {
   background-color: var(--pa-color-2);
+  color: var(--pa-color-2-text);
 }
 
 .pa-tooltip--color-2::after {
@@ -5644,6 +5808,7 @@ a.pa-card p {
 
 .pa-tooltip--color-3::before {
   background-color: var(--pa-color-3);
+  color: var(--pa-color-3-text);
 }
 
 .pa-tooltip--color-3::after {
@@ -5667,6 +5832,7 @@ a.pa-card p {
 
 .pa-tooltip--color-4::before {
   background-color: var(--pa-color-4);
+  color: var(--pa-color-4-text);
 }
 
 .pa-tooltip--color-4::after {
@@ -5690,6 +5856,7 @@ a.pa-card p {
 
 .pa-tooltip--color-5::before {
   background-color: var(--pa-color-5);
+  color: var(--pa-color-5-text);
 }
 
 .pa-tooltip--color-5::after {
@@ -5713,6 +5880,7 @@ a.pa-card p {
 
 .pa-tooltip--color-6::before {
   background-color: var(--pa-color-6);
+  color: var(--pa-color-6-text);
 }
 
 .pa-tooltip--color-6::after {
@@ -5736,6 +5904,7 @@ a.pa-card p {
 
 .pa-tooltip--color-7::before {
   background-color: var(--pa-color-7);
+  color: var(--pa-color-7-text);
 }
 
 .pa-tooltip--color-7::after {
@@ -5759,6 +5928,7 @@ a.pa-card p {
 
 .pa-tooltip--color-8::before {
   background-color: var(--pa-color-8);
+  color: var(--pa-color-8-text);
 }
 
 .pa-tooltip--color-8::after {
@@ -5782,6 +5952,7 @@ a.pa-card p {
 
 .pa-tooltip--color-9::before {
   background-color: var(--pa-color-9);
+  color: var(--pa-color-9-text);
 }
 
 .pa-tooltip--color-9::after {
@@ -6055,38 +6226,47 @@ a.pa-card p {
 
 .pa-tooltip-floating.pa-tooltip--color-1 {
   background-color: var(--pa-color-1);
+  color: var(--pa-color-1-text);
 }
 
 .pa-tooltip-floating.pa-tooltip--color-2 {
   background-color: var(--pa-color-2);
+  color: var(--pa-color-2-text);
 }
 
 .pa-tooltip-floating.pa-tooltip--color-3 {
   background-color: var(--pa-color-3);
+  color: var(--pa-color-3-text);
 }
 
 .pa-tooltip-floating.pa-tooltip--color-4 {
   background-color: var(--pa-color-4);
+  color: var(--pa-color-4-text);
 }
 
 .pa-tooltip-floating.pa-tooltip--color-5 {
   background-color: var(--pa-color-5);
+  color: var(--pa-color-5-text);
 }
 
 .pa-tooltip-floating.pa-tooltip--color-6 {
   background-color: var(--pa-color-6);
+  color: var(--pa-color-6-text);
 }
 
 .pa-tooltip-floating.pa-tooltip--color-7 {
   background-color: var(--pa-color-7);
+  color: var(--pa-color-7-text);
 }
 
 .pa-tooltip-floating.pa-tooltip--color-8 {
   background-color: var(--pa-color-8);
+  color: var(--pa-color-8-text);
 }
 
 .pa-tooltip-floating.pa-tooltip--color-9 {
   background-color: var(--pa-color-9);
+  color: var(--pa-color-9-text);
 }
 
 /* ========================================
@@ -6895,6 +7075,7 @@ a.pa-card p {
 .pa-input-group__prepend {
   background-color: var(--pa-input-group-prepend-bg);
   color: var(--pa-input-group-prepend-text);
+  border-color: var(--pa-input-group-prepend-bg);
   border-right: none;
 }
 
@@ -6906,6 +7087,7 @@ a.pa-card p {
 .pa-input-group__append {
   background-color: var(--pa-input-group-append-bg);
   color: var(--pa-input-group-append-text);
+  border-color: var(--pa-input-group-append-bg);
   border-left: none;
 }
 
@@ -6915,11 +7097,11 @@ a.pa-card p {
 }
 
 .pa-input-group__prepend + .pa-input-group__prepend {
-  border-left: 1px solid var(--pa-border-color);
+  border-left: 1px solid var(--pa-input-group-prepend-bg);
 }
 
 .pa-input-group__append + .pa-input-group__append {
-  border-left: 1px solid var(--pa-border-color);
+  border-left: 1px solid var(--pa-input-group-append-bg);
 }
 
 .pa-input-group:has(.pa-input:focus) .pa-input-group__prepend {
@@ -7559,235 +7741,21 @@ input:indeterminate + .pa-checkbox__box::after {
  * Maps Pure Admin SCSS variables to web component CSS custom properties
  *
  * @keenmate/web-multiselect: Uses --base-* variables from _base-css-variables.scss
- * @keenmate/web-daterangepicker: Uses --drp-* variables defined below
- */
-/*
+ * @keenmate/web-daterangepicker: Uses --base-* variables from _base-css-variables.scss
+ *
+ * NOTE: Both components use the --base-* CSS variable system with built-in fallback chains:
+ *   1. External override: --ms-accent-color: #custom
+ *   2. Theme base value: var(--base-accent-color)
+ *   3. Hardcoded default: #3b82f6
+ *
+ * This means Pure Admin only needs to set --base-* variables (via the
+ * output-base-css-variables mixin) and the components will automatically
+ * pick up the theme colors.
  */
-/* ========================================
-   Date Range Picker Variables (--drp-*)
-   v1.3.0+ Semantic Variable Architecture
-
-   NOTE: Variables set directly on web-daterangepicker
-   element to pierce shadow DOM (custom properties
-   cascade into shadow DOM when set on host element)
-   ======================================== */
-web-daterangepicker {
-  /* ===== BASE PRIMITIVES ===== */
-  /* Colors */
-  --drp-accent-color: #007bff;
-  --drp-primary-bg: #007bff;
-  --drp-primary-bg-hover: rgb(51, 149.4, 255);
-  --drp-text-primary: var(--pa-text-color-1);
-  --drp-text-secondary: var(--pa-text-color-2);
-  --drp-border-color: #e1e5e9;
-  --drp-card-bg: var(--pa-card-bg);
-  --drp-hover-bg: #f8f9fa;
-  /* Spacing */
-  --drp-spacing-xs: 0.4rem;
-  --drp-spacing-sm: 0.8rem;
-  --drp-spacing-md: 1.2rem;
-  --drp-spacing-base: 1.6rem;
-  --drp-spacing-lg: 2.4rem;
-  --drp-spacing-xl: 3.2rem;
-  /* Typography */
-  --drp-font-size-xs: 1.2rem;
-  --drp-font-size-sm: 1.4rem;
-  --drp-font-size-base: 1.6rem;
-  --drp-font-size-lg: 1.8rem;
-  --drp-font-weight-normal: 400;
-  --drp-font-weight-medium: 500;
-  --drp-font-weight-semibold: 600;
-  /* Animations */
-  --drp-transition-fast: 0.1s;
-  --drp-transition-normal: 0.15s;
-  --drp-easing-snappy: ease-out;
-  --drp-easing-smooth: ease;
-  /* Shadows */
-  --drp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
-  --drp-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
-  --drp-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
-  --drp-shadow-xl: 0 0 60px rgba(0, 0, 0, 0.12);
-  /* Border radius */
-  --drp-border-radius: 4px;
-  --drp-border-radius-sm: 2px;
-  --drp-border-radius-lg: 8px;
-  /* Border width */
-  --drp-border-width-base: 1px;
-  --drp-border-width-medium: 2px;
-  /* ===== INPUT FIELD SEMANTIC VARIABLES ===== */
-  /* Input colors */
-  --drp-input-background: var(--pa-input-bg);
-  --drp-input-color: var(--pa-text-color-1);
-  --drp-input-border-color: #ced4da;
-  --drp-input-border-color-hover: #007bff;
-  --drp-input-border-color-focus: #007bff;
-  --drp-input-placeholder-color: var(--pa-text-color-2);
-  --drp-input-disabled-background: var(--pa-input-bg);
-  --drp-input-disabled-color: var(--pa-text-color-2);
-  /* Input focus effects */
-  --drp-input-focus-shadow-color: rgba(0, 123, 255, 0.05);
-  --drp-input-focus-shadow-size: 3px;
-  /* Input icon */
-  --drp-input-icon-color: var(--pa-text-color-2);
-  --drp-input-icon-opacity: 1;
-  /* Input size variants - matched to Pure Admin .pa-input sizes (10px base)
-     Heights: xs=31px, sm=33px, md=35px, lg=38px, xl=41px */
-  /* Extra Small (31px) */
-  --drp-input-size-xs-font: 1.2rem;
-  --drp-input-size-xs-padding-v: 0.8rem;
-  --drp-input-size-xs-padding-h: 0.8rem;
-  --drp-input-size-xs-height: 3.1rem; /* 31px (10px base) */
-  --drp-input-size-xs-icon-size: 1.2rem; /* 12px (10px base) */
-  /* Small (33px - same height as xs, slightly larger icon) */
-  --drp-input-size-sm-font: 1.2rem;
-  --drp-input-size-sm-padding-v: 0.8rem;
-  --drp-input-size-sm-padding-h: 0.8rem;
-  --drp-input-size-sm-height: 3.3rem; /* 33px (10px base) */
-  --drp-input-size-sm-icon-size: 1.4rem; /* 14px (10px base) */
-  /* Medium/Default (maps to pa-input: 35px) */
-  --drp-input-size-md-font: 1.4rem;
-  --drp-input-size-md-padding-v: 0.8rem;
-  --drp-input-size-md-padding-h: 0.8rem;
-  --drp-input-size-md-height: 3.5rem; /* 35px (10px base) */
-  --drp-input-size-md-icon-size: 1.6rem; /* 16px (10px base) */
-  /* Large (maps to pa-input--lg: 38px) */
-  --drp-input-size-lg-font: 1.6rem;
-  --drp-input-size-lg-padding-v: 0.8rem;
-  --drp-input-size-lg-padding-h: 0.8rem;
-  --drp-input-size-lg-height: 3.8rem; /* 38px (10px base) */
-  --drp-input-size-lg-icon-size: 1.8rem; /* 18px (10px base) */
-  /* Extra Large (maps to pa-input--xl: 41px) */
-  --drp-input-size-xl-font: 1.8rem;
-  --drp-input-size-xl-padding-v: 0.8rem;
-  --drp-input-size-xl-padding-h: 0.8rem;
-  --drp-input-size-xl-height: 4.1rem; /* 41px (10px base) */
-  --drp-input-size-xl-icon-size: 2rem; /* 20px (10px base) */
-  /* ===== CALENDAR CONTAINER ===== */
-  --drp-calendar-bg: var(--pa-card-bg);
-  --drp-calendar-border: #e1e5e9;
-  --drp-calendar-shadow: 0 0 60px rgba(0, 0, 0, 0.12);
-  --drp-calendar-border-radius: 4px;
-  --drp-calendar-padding: 1.6rem;
-  --drp-calendar-z-index: 1000;
-  /* ===== HEADER ===== */
-  --drp-header-padding: 0.8rem 1.2rem;
-  --drp-header-font-size: 1.6rem;
-  --drp-header-font-weight: 600;
-  --drp-header-text-color: var(--pa-text-color-1);
-  --drp-header-bg-hover: rgba(0, 123, 255, 0.12);
-  --drp-header-bg-active: rgba(0, 123, 255, 0.05);
-  /* ===== NAVIGATION ===== */
-  --drp-nav-btn-size: 3.2rem; /* 32px (10px base) */
-  --drp-nav-text-color: var(--pa-text-color-1);
-  --drp-nav-border-color: #e1e5e9;
-  --drp-nav-bg-hover: rgba(0, 123, 255, 0.12);
-  --drp-nav-bg-active: rgba(0, 123, 255, 0.05);
-  --drp-nav-border-hover: #007bff;
-  /* ===== WEEKDAY HEADER ===== */
-  --drp-weekday-font-size: 1.2rem;
-  --drp-weekday-font-weight: 600;
-  --drp-weekday-color: var(--pa-text-color-2);
-  --drp-weekday-padding: 0.4rem;
-  /* ===== CALENDAR GRID ===== */
-  --drp-day-size: 3.6rem; /* 36px (10px base) */
-  --drp-day-font-size: 1.4rem;
-  --drp-day-border-radius: 2px;
-  /* Day states */
-  --drp-day-text-color: var(--pa-text-color-1);
-  --drp-day-bg-hover: rgba(0, 123, 255, 0.12);
-  --drp-day-border-hover: transparent;
-  /* Today indicator */
-  --drp-day-today-border: #007bff;
-  /* Selected state */
-  --drp-day-selected-bg: #007bff;
-  --drp-day-selected-color: #ffffff;
-  /* Range state */
-  --drp-day-range-bg: rgba(0, 123, 255, 0.05);
-  --drp-day-range-text: var(--pa-text-color-1);
-  /* Focused state */
-  --drp-day-focused-outline: #007bff;
-  /* Disabled state */
-  --drp-day-disabled-color: var(--pa-text-color-2);
-  --drp-day-disabled-opacity: 0.65;
-  /* Other month */
-  --drp-day-other-month-color: var(--pa-text-color-2);
-  --drp-day-other-month-opacity: 0.5;
-  /* ===== BADGES ===== */
-  /* Dot badges (original style) */
-  --drp-badge-size: 0.6rem; /* 6px (10px base) */
-  --drp-badge-primary: #007bff;
-  --drp-badge-success: #28a745;
-  --drp-badge-warning: #ffc107;
-  --drp-badge-danger: #dc3545;
-  --drp-badge-info: #17a2b8;
-  /* Number badges */
-  --drp-badge-number-bg: #dc3545;
-  --drp-badge-number-color: #ffffff;
-  /* Count badges */
-  --drp-badge-count-bg: #007bff;
-  --drp-badge-count-color: #ffffff;
-  /* Text badges */
-  --drp-badge-text-bg: rgba(0, 123, 255, 0.05);
-  --drp-badge-text-color: var(--pa-text-color-1);
-  /* ===== SUMMARY BAR ===== */
-  --drp-summary-bg: #f8f9fa;
-  --drp-summary-border-color: #e1e5e9;
-  --drp-summary-text-color: var(--pa-text-color-1);
-  --drp-summary-count-color: #007bff;
-  --drp-summary-padding: 0.8rem 1.2rem;
-  --drp-summary-font-size: 1.4rem;
-  --drp-summary-font-weight: 500;
-  /* ===== BUTTONS ===== */
-  /* Today button */
-  --drp-button-today-bg: #6c757d;
-  --drp-button-today-bg-hover: #545b62;
-  --drp-button-today-color: #ffffff;
-  --drp-button-today-border: #e1e5e9;
-  /* Clear button */
-  --drp-button-clear-bg: #6c757d;
-  --drp-button-clear-bg-hover: #545b62;
-  --drp-button-clear-color: #ffffff;
-  --drp-button-clear-border: #e1e5e9;
-  /* Cancel button */
-  --drp-button-cancel-bg: #6c757d;
-  --drp-button-cancel-bg-hover: #545b62;
-  --drp-button-cancel-color: #ffffff;
-  --drp-button-cancel-border: #e1e5e9;
-  /* Apply button */
-  --drp-button-apply-bg: #007bff;
-  --drp-button-apply-bg-hover: rgb(51, 149.4, 255);
-  --drp-button-apply-color: #ffffff;
-  --drp-button-apply-border: #007bff;
-  /* Button sizing */
-  --drp-button-padding: 0.8rem 1rem;
-  --drp-button-font-size: 1.4rem;
-  --drp-button-border-radius: 4px;
-  --drp-button-gap: 0.8rem;
-  /* ===== UNIFIED NAVIGATION ===== */
-  /* Range selectors in unified nav */
-  --drp-unified-range-text-color: var(--pa-text-color-1);
-  --drp-unified-range-bg-hover: rgba(0, 123, 255, 0.12);
-  --drp-unified-range-bg-active: rgba(0, 123, 255, 0.05);
-  /* Month/Year display */
-  --drp-unified-month-color: var(--pa-text-color-1);
-  /* Rolling selector disabled state */
-  --drp-unified-rolling-disabled-color: var(--pa-text-color-2);
-  /* ===== ROLLING SELECTOR ===== */
-  --drp-rolling-bg: var(--pa-card-bg);
-  --drp-rolling-border: #e1e5e9;
-  --drp-rolling-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  --drp-rolling-item-hover-bg: rgba(0, 123, 255, 0.12);
-  --drp-rolling-item-selected-bg: #007bff;
-  --drp-rolling-item-selected-text: #ffffff;
-  --drp-rolling-font-size: 1.4rem;
-  --drp-rolling-item-text-color: var(--pa-text-color-1);
-  --drp-rolling-item-disabled-color: var(--pa-text-color-2);
-  /* ===== LOADING OVERLAY ===== */
-  --drp-loading-bg: rgba(255, 255, 255, 0.8);
-  --drp-loading-spinner-color: #007bff;
-  --drp-loading-spinner-size: 1.6rem;
-  /* ===== MULTIPLE MONTHS ===== */
-  --drp-months-gap: 2.4rem;
+/* Web Multiselect - Group label styling */
+web-multiselect {
+  --ms-group-label-color: var(--base-text-color-1);
+  --ms-group-label-font-weight: 600;
 }
 
 .pa-file-input {
@@ -12788,6 +12756,15 @@ html.font-size-4xl {
   white-space: nowrap;
 }
 
+.pa-link {
+  color: #007bff;
+  text-decoration: none;
+}
+
+.pa-link:hover {
+  text-decoration: underline;
+}
+
 .component-showcase {
   display: flex;
   flex-wrap: wrap;
@@ -15837,18 +15814,6 @@ html.font-size-4xl {
   --pa-table-hover-accent-color: #D40511;
   --pa-modal-overlay-bg: rgba(0, 0, 0, 0.6);
   --pa-modal-content-bg: #ffffff;
-  --pa-alert-success-bg: rgba(16, 185, 129, 0.68);
-  --pa-alert-success-border: #10b981;
-  --pa-alert-success-text: #065f46;
-  --pa-alert-danger-bg: rgba(212, 5, 17, 0.58);
-  --pa-alert-danger-border: #D40511;
-  --pa-alert-danger-text: #7f1d1d;
-  --pa-alert-warning-bg: rgba(255, 193, 7, 0.58);
-  --pa-alert-warning-border: #ffc107;
-  --pa-alert-warning-text: #78350f;
-  --pa-alert-info-bg: rgba(6, 182, 212, 0.58);
-  --pa-alert-info-border: #06b6d4;
-  --pa-alert-info-text: #164e63;
   --pa-badge-success-bg: #d4edda;
   --pa-badge-success-text: #065f46;
   --pa-badge-warning-bg: #fff3cd;
@@ -15890,34 +15855,35 @@ html.font-size-4xl {
   --pa-color-7: #8C8C8C;
   --pa-color-8: #333333;
   --pa-color-9: #00b4d8;
+  --pa-color-1-text: #ffffff;
+  --pa-color-2-text: #1a1a1a;
+  --pa-color-3-text: #ffffff;
+  --pa-color-4-text: #ffffff;
+  --pa-color-5-text: #ffffff;
+  --pa-color-6-text: #ffffff;
+  --pa-color-7-text: #ffffff;
+  --pa-color-8-text: #ffffff;
+  --pa-color-9-text: #ffffff;
+  --pa-alert-success-text: color-mix(in srgb, var(--pa-success-bg) 60%, black);
+  --pa-alert-success-bg: color-mix(in srgb, var(--pa-success-bg) 68%, transparent);
+  --pa-alert-success-border: color-mix(in srgb, var(--pa-success-bg) 30%, transparent);
+  --pa-alert-danger-text: color-mix(in srgb, var(--pa-danger-bg) 60%, black);
+  --pa-alert-danger-bg: color-mix(in srgb, var(--pa-danger-bg) 68%, transparent);
+  --pa-alert-danger-border: color-mix(in srgb, var(--pa-danger-bg) 30%, transparent);
+  --pa-alert-warning-text: color-mix(in srgb, var(--pa-warning-bg) 60%, black);
+  --pa-alert-warning-bg: color-mix(in srgb, var(--pa-warning-bg) 68%, transparent);
+  --pa-alert-warning-border: color-mix(in srgb, var(--pa-warning-bg) 30%, transparent);
+  --pa-alert-info-text: color-mix(in srgb, var(--pa-info-bg) 60%, black);
+  --pa-alert-info-bg: color-mix(in srgb, var(--pa-info-bg) 68%, transparent);
+  --pa-alert-info-border: color-mix(in srgb, var(--pa-info-bg) 30%, transparent);
   --pa-input-group-prepend-bg: #EBEBEB;
   --pa-input-group-prepend-text: #333333;
   --pa-input-group-append-bg: #EBEBEB;
   --pa-input-group-append-text: #333333;
-  --drp-dropdown-bg: #ffffff;
-  --drp-border-color: #E5E5E5;
-  --drp-primary-bg: #F2F2F2;
-  --drp-primary-bg-hover: #EBEBEB;
-  --drp-text-color-1: #333333;
-  --drp-text-bg: #8C8C8C;
-  --drp-button-bg: transparent;
-  --drp-button-color: #333333;
-  --drp-button-accent-text-color: #ffffff;
-  --drp-button-today-color: #D40511;
-  --drp-button-clear-color: #8C8C8C;
-  --drp-button-cancel-color: #8C8C8C;
-  --ms-dropdown-bg: #ffffff;
-  --ms-input-bg: #ffffff;
-  --ms-primary-bg: #F2F2F2;
-  --ms-primary-bg-hover: #EBEBEB;
-  --ms-border-color: #E5E5E5;
-  --ms-text-color-1: #333333;
-  --ms-text-color-2: #8C8C8C;
-  --ms-text-color-3: #CCCCCC;
-  --ms-text-color-4: #E5E5E5;
-  --ms-hint-bg: #EBEBEB;
-  --ms-actions-bg: #EBEBEB;
-  --ms-selected-popover-bg: #ffffff;
+  --pa-alert-success-text: #ffffff;
+  --pa-alert-warning-text: #ffffff;
+  --pa-alert-danger-text: #ffffff;
+  --pa-alert-info-text: #ffffff;
 }
 
 .pa-mode-dark {
@@ -15954,9 +15920,9 @@ html.font-size-4xl {
   --pa-input-border: #3a3a3a;
   --pa-input-text: #ffffff;
   --pa-input-focus-border-color: #D40511;
-  --pa-input-group-prepend-bg: rgba(255, 204, 0, 0.15);
+  --pa-input-group-prepend-bg: rgba(255, 204, 0, 0.35);
   --pa-input-group-prepend-text: #FFCC00;
-  --pa-input-group-append-bg: rgba(255, 204, 0, 0.15);
+  --pa-input-group-append-bg: rgba(255, 204, 0, 0.35);
   --pa-input-group-append-text: #FFCC00;
 }
 .pa-mode-dark .pa-input-group__button {
@@ -15983,14 +15949,18 @@ html.font-size-4xl {
   --pa-command-palette-item-hover-bg: #2a2a2a;
   --pa-command-palette-item-active-bg: rgba(212, 5, 17, 0.2);
   --pa-command-palette-highlight-bg: rgba(212, 5, 17, 0.3);
-  --pa-alert-info-text: #ffffff;
-  --pa-alert-info-bg: rgba(6, 182, 212, 0.3);
   --pa-alert-success-text: #ffffff;
-  --pa-alert-success-bg: rgba(16, 185, 129, 0.3);
-  --pa-alert-warning-text: #ffffff;
-  --pa-alert-warning-bg: rgba(255, 193, 7, 0.3);
+  --pa-alert-success-bg: color-mix(in srgb, var(--pa-success-bg) 30%, transparent);
+  --pa-alert-success-border: color-mix(in srgb, var(--pa-success-bg) 70%, transparent);
   --pa-alert-danger-text: #ffffff;
-  --pa-alert-danger-bg: rgba(212, 5, 17, 0.3);
+  --pa-alert-danger-bg: color-mix(in srgb, var(--pa-danger-bg) 30%, transparent);
+  --pa-alert-danger-border: color-mix(in srgb, var(--pa-danger-bg) 70%, transparent);
+  --pa-alert-warning-text: #ffffff;
+  --pa-alert-warning-bg: color-mix(in srgb, var(--pa-warning-bg) 30%, transparent);
+  --pa-alert-warning-border: color-mix(in srgb, var(--pa-warning-bg) 70%, transparent);
+  --pa-alert-info-text: #ffffff;
+  --pa-alert-info-bg: color-mix(in srgb, var(--pa-info-bg) 30%, transparent);
+  --pa-alert-info-border: color-mix(in srgb, var(--pa-info-bg) 70%, transparent);
 }
 .pa-mode-dark .pa-alert code {
   color: inherit;
@@ -16003,13 +15973,13 @@ html.font-size-4xl {
   --pa-btn-light-bg: #2a2a2a;
   --pa-btn-light-bg-hover: #3a3a3a;
   --pa-btn-light-text: #ffffff;
-  --pa-success-bg: #10b981;
+  --pa-success-bg: #34d399;
   --pa-success-bg-light: rgba(16, 185, 129, 0.2);
-  --pa-warning-bg: #f59e0b;
+  --pa-warning-bg: #fbbf24;
   --pa-warning-bg-light: rgba(245, 158, 11, 0.2);
-  --pa-danger-bg: #98040C;
-  --pa-danger-bg-light: rgba(180, 5, 14, 0.2);
-  --pa-info-bg: #06b6d4;
+  --pa-danger-bg: #f87171;
+  --pa-danger-bg-light: rgba(248, 113, 113, 0.2);
+  --pa-info-bg: #22d3ee;
   --pa-info-bg-light: rgba(6, 182, 212, 0.2);
   --base-main-bg: #242424;
   --base-page-bg: #1a1a1a;
@@ -16043,34 +16013,6 @@ html.font-size-4xl {
   --base-tooltip-bg: #3a3a3a;
   --base-tooltip-text-color: #ffffff;
 }
-.pa-mode-dark web-daterangepicker {
-  --drp-dropdown-bg: #242424;
-  --drp-border-color: #3a3a3a;
-  --drp-primary-bg: #1a1a1a;
-  --drp-primary-bg-hover: #2a2a2a;
-  --drp-text-color-1: #ffffff;
-  --drp-text-bg: #aaaaaa;
-  --drp-button-bg: transparent;
-  --drp-button-color: #ffffff;
-  --drp-button-accent-text-color: #ffffff;
-  --drp-button-today-color: #D40511;
-  --drp-button-clear-color: #aaaaaa;
-  --drp-button-cancel-color: #aaaaaa;
-}
-.pa-mode-dark web-multiselect {
-  --ms-dropdown-bg: #242424;
-  --ms-input-bg: #2a2a2a;
-  --ms-primary-bg: #1a1a1a;
-  --ms-primary-bg-hover: #2a2a2a;
-  --ms-border-color: #3a3a3a;
-  --ms-text-color-1: #ffffff;
-  --ms-text-color-2: #aaaaaa;
-  --ms-text-color-3: #888888;
-  --ms-text-color-4: #666666;
-  --ms-hint-bg: #1a1a1a;
-  --ms-actions-bg: #1a1a1a;
-  --ms-selected-popover-bg: #242424;
-}
 
 .pa-mode-dark .pa-layout__footer {
   color: #333333 !important;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-admin-theme-express",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Express theme for Pure Admin",
   "style": "dist/express.css",
   "exports": {

package/src/scss/express.scss

@@ -14,6 +14,17 @@ $color-7: #8C8C8C;  // Gray (neutral)
 $color-8: #333333;  // Dark (contrast)
 $color-9: #00b4d8;  // Cyan (info)
 
+// Contrast text colors for color slots
+$color-1-text: #ffffff;  // White on Express Red
+$color-2-text: #1a1a1a;  // Dark on Express Yellow (light background)
+$color-3-text: #ffffff;  // White on Orange
+$color-4-text: #ffffff;  // White on Green
+$color-5-text: #ffffff;  // White on Blue
+$color-6-text: #ffffff;  // White on Purple
+$color-7-text: #ffffff;  // White on Gray
+$color-8-text: #ffffff;  // White on Dark
+$color-9-text: #ffffff;  // White on Cyan
+
 // ============================================================================
 // EXPRESS COLOR PALETTE
 // ============================================================================
@@ -111,6 +122,12 @@ $base-focus-ring-color: rgba($express-red, 0.25);
 // Typography
 $base-font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
 
+// ============================================================================
+// ALERT COLOR DERIVATION - Express wants saturated, high-contrast alerts
+// ============================================================================
+$alert-bg-opacity-light: 68;  // Saturated backgrounds for light mode
+$alert-bg-opacity-dark: 30;   // Standard dark mode backgrounds
+
 // ============================================================================
 // FRAMEWORK VARIABLES - Import and let them derive from base
 // ============================================================================
@@ -189,23 +206,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: $base-success-text;
-$alert-success-bg: rgba(16, 185, 129, 0.68);
-$alert-success-border: $base-success-color;
-
-$alert-danger-text: $base-danger-text;
-$alert-danger-bg: rgba(212, 5, 17, 0.58);
-$alert-danger-border: $express-red;
-
-$alert-warning-text: $base-warning-text;
-$alert-warning-bg: rgba(255, 193, 7, 0.58);
-$alert-warning-border: #ffc107;
-
-$alert-info-text: $base-info-text;
-$alert-info-bg: rgba(6, 182, 212, 0.58);
-$alert-info-border: $base-info-color;
-
 // ============================================================================
 // FONTS - Fira Sans Condensed
 // ============================================================================
@@ -437,6 +437,7 @@ $alert-info-border: $base-info-color;
 
   // Pure Admin theme CSS variables
   @include output-pa-css-variables;
+  @include output-pa-alert-variables-light;
 
   // Input group - light gray background for light mode
   --pa-input-group-prepend-bg: #{$express-gray-lightest};
@@ -444,32 +445,12 @@ $alert-info-border: $base-info-color;
   --pa-input-group-append-bg: #{$express-gray-lightest};
   --pa-input-group-append-text: #{$express-dark};
 
-  // Web component overrides (light mode)
-  --drp-dropdown-bg: #ffffff;
-  --drp-border-color: #{$express-gray-lighter};
-  --drp-primary-bg: #{$express-bg};
-  --drp-primary-bg-hover: #{$express-gray-lightest};
-  --drp-text-color-1: #{$express-dark};
-  --drp-text-bg: #{$express-gray};
-  --drp-button-bg: transparent;
-  --drp-button-color: #{$express-dark};
-  --drp-button-accent-text-color: #ffffff;
-  --drp-button-today-color: #{$express-red};
-  --drp-button-clear-color: #{$express-gray};
-  --drp-button-cancel-color: #{$express-gray};
-
-  --ms-dropdown-bg: #ffffff;
-  --ms-input-bg: #ffffff;
-  --ms-primary-bg: #{$express-bg};
-  --ms-primary-bg-hover: #{$express-gray-lightest};
-  --ms-border-color: #{$express-gray-lighter};
-  --ms-text-color-1: #{$express-dark};
-  --ms-text-color-2: #{$express-gray};
-  --ms-text-color-3: #{$express-gray-light};
-  --ms-text-color-4: #{$express-gray-lighter};
-  --ms-hint-bg: #{$express-gray-lightest};
-  --ms-actions-bg: #{$express-gray-lightest};
-  --ms-selected-popover-bg: #ffffff;
+  // Override alert text to white for saturated backgrounds (Express brand)
+  --pa-alert-success-text: #ffffff;
+  --pa-alert-warning-text: #ffffff;
+  --pa-alert-danger-text: #ffffff;
+  --pa-alert-info-text: #ffffff;
+
 }
 
 // ============================================================================
@@ -536,10 +517,10 @@ $alert-info-border: $base-info-color;
   --pa-input-text: #{$dark-text};
   --pa-input-focus-border-color: #{$express-red};
 
-  // Input group - use muted yellow for Express branding
-  --pa-input-group-prepend-bg: rgba(255, 204, 0, 0.15);
+  // Input group - vibrant yellow for Express branding
+  --pa-input-group-prepend-bg: rgba(255, 204, 0, 0.35);
   --pa-input-group-prepend-text: #{$express-yellow};
-  --pa-input-group-append-bg: rgba(255, 204, 0, 0.15);
+  --pa-input-group-append-bg: rgba(255, 204, 0, 0.35);
   --pa-input-group-append-text: #{$express-yellow};
 
   // Input group buttons
@@ -580,15 +561,8 @@ $alert-info-border: $base-info-color;
   --pa-command-palette-item-active-bg: rgba(212, 5, 17, 0.2);
   --pa-command-palette-highlight-bg: rgba(212, 5, 17, 0.3);
 
-  // Alerts - light text for dark mode visibility
-  --pa-alert-info-text: #ffffff;
-  --pa-alert-info-bg: rgba(6, 182, 212, 0.3);
-  --pa-alert-success-text: #ffffff;
-  --pa-alert-success-bg: rgba(16, 185, 129, 0.3);
-  --pa-alert-warning-text: #ffffff;
-  --pa-alert-warning-bg: rgba(255, 193, 7, 0.3);
-  --pa-alert-danger-text: #ffffff;
-  --pa-alert-danger-bg: rgba(212, 5, 17, 0.3);
+  // Alert colors - derived from semantic colors
+  @include output-pa-alert-variables-dark;
 
   // Code inside alerts - inherit alert text color
   .pa-alert code {
@@ -604,14 +578,14 @@ $alert-info-border: $base-info-color;
   --pa-btn-light-bg-hover: #{$dark-border};
   --pa-btn-light-text: #{$dark-text};
 
-  // Semantic colors - slightly brighter for dark mode
-  --pa-success-bg: #10b981;
+  // Semantic colors - brighter for dark mode visibility
+  --pa-success-bg: #34d399;
   --pa-success-bg-light: rgba(16, 185, 129, 0.2);
-  --pa-warning-bg: #f59e0b;
+  --pa-warning-bg: #fbbf24;
   --pa-warning-bg-light: rgba(245, 158, 11, 0.2);
-  --pa-danger-bg: #{$express-red-dark};
-  --pa-danger-bg-light: rgba(180, 5, 14, 0.2);
-  --pa-info-bg: #06b6d4;
+  --pa-danger-bg: #f87171;
+  --pa-danger-bg-light: rgba(248, 113, 113, 0.2);
+  --pa-info-bg: #22d3ee;
   --pa-info-bg-light: rgba(6, 182, 212, 0.2);
 
   // Base variables for web components (dark mode)
@@ -651,37 +625,6 @@ $alert-info-border: $base-info-color;
   --base-tooltip-bg: #{$dark-border};
   --base-tooltip-text-color: #{$dark-text};
 
-  // Daterangepicker overrides (dark mode)
-  web-daterangepicker {
-    --drp-dropdown-bg: #{$dark-card};
-    --drp-border-color: #{$dark-border};
-    --drp-primary-bg: #{$dark-bg};
-    --drp-primary-bg-hover: #{$dark-surface};
-    --drp-text-color-1: #{$dark-text};
-    --drp-text-bg: #{$dark-text-bg};
-    --drp-button-bg: transparent;
-    --drp-button-color: #{$dark-text};
-    --drp-button-accent-text-color: #ffffff;
-    --drp-button-today-color: #{$express-red};
-    --drp-button-clear-color: #{$dark-text-bg};
-    --drp-button-cancel-color: #{$dark-text-bg};
-  }
-
-  // Multiselect overrides (dark mode)
-  web-multiselect {
-    --ms-dropdown-bg: #{$dark-card};
-    --ms-input-bg: #{$dark-surface};
-    --ms-primary-bg: #{$dark-bg};
-    --ms-primary-bg-hover: #{$dark-surface};
-    --ms-border-color: #{$dark-border};
-    --ms-text-color-1: #{$dark-text};
-    --ms-text-color-2: #{$dark-text-bg};
-    --ms-text-color-3: #888888;
-    --ms-text-color-4: #666666;
-    --ms-hint-bg: #{$dark-bg};
-    --ms-actions-bg: #{$dark-bg};
-    --ms-selected-popover-bg: #{$dark-card};
-  }
 }
 
 // ============================================================================