@keenmate/pure-admin-theme-minimal 1.1.0 → 1.1.2

package/dist/minimal.css

@@ -2912,6 +2912,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);
@@ -5535,6 +5697,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 {
@@ -5558,6 +5721,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 {
@@ -5581,6 +5745,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 {
@@ -5604,6 +5769,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 {
@@ -5627,6 +5793,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 {
@@ -5650,6 +5817,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 {
@@ -5673,6 +5841,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 {
@@ -5696,6 +5865,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 {
@@ -5719,6 +5889,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 {
@@ -5992,38 +6163,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);
 }
 
 /* ========================================
@@ -6507,6 +6687,34 @@ a.pa-card p {
   font-size: 1.8rem;
 }
 
+.pa-textarea--xs {
+  height: 4rem;
+  min-height: 4rem;
+  padding: 0.6rem 0.8rem;
+  font-size: 1.2rem;
+}
+
+.pa-textarea--sm {
+  height: 6rem;
+  min-height: 6rem;
+  padding: 0.8rem 0.8rem;
+  font-size: 1.4rem;
+}
+
+.pa-textarea--lg {
+  height: 12rem;
+  min-height: 12rem;
+  padding: 0.8rem 0.8rem;
+  font-size: 1.6rem;
+}
+
+.pa-textarea--xl {
+  height: 16rem;
+  min-height: 16rem;
+  padding: 0.8rem 0.8rem;
+  font-size: 1.8rem;
+}
+
 .pa-mode-dark input[type=date]::-webkit-calendar-picker-indicator,
 .pa-mode-dark input[type=time]::-webkit-calendar-picker-indicator,
 .pa-mode-dark input[type=datetime-local]::-webkit-calendar-picker-indicator,
@@ -6600,6 +6808,163 @@ a.pa-card p {
   color: var(--pa-success-bg);
 }
 
+.pa-form-help--warning {
+  color: var(--pa-warning-bg);
+}
+
+.pa-form-help--color-1 {
+  color: var(--pa-color-1);
+}
+
+.pa-form-help--color-2 {
+  color: var(--pa-color-2);
+}
+
+.pa-form-help--color-3 {
+  color: var(--pa-color-3);
+}
+
+.pa-form-help--color-4 {
+  color: var(--pa-color-4);
+}
+
+.pa-form-help--color-5 {
+  color: var(--pa-color-5);
+}
+
+.pa-form-help--color-6 {
+  color: var(--pa-color-6);
+}
+
+.pa-form-help--color-7 {
+  color: var(--pa-color-7);
+}
+
+.pa-form-help--color-8 {
+  color: var(--pa-color-8);
+}
+
+.pa-form-help--color-9 {
+  color: var(--pa-color-9);
+}
+
+.pa-input--color-1,
+.pa-select--color-1,
+.pa-textarea--color-1 {
+  border-color: var(--pa-color-1);
+}
+
+.pa-input--color-1:focus,
+.pa-select--color-1:focus,
+.pa-textarea--color-1:focus {
+  border-color: var(--pa-color-1);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-1) 25%, transparent);
+}
+
+.pa-input--color-2,
+.pa-select--color-2,
+.pa-textarea--color-2 {
+  border-color: var(--pa-color-2);
+}
+
+.pa-input--color-2:focus,
+.pa-select--color-2:focus,
+.pa-textarea--color-2:focus {
+  border-color: var(--pa-color-2);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-2) 25%, transparent);
+}
+
+.pa-input--color-3,
+.pa-select--color-3,
+.pa-textarea--color-3 {
+  border-color: var(--pa-color-3);
+}
+
+.pa-input--color-3:focus,
+.pa-select--color-3:focus,
+.pa-textarea--color-3:focus {
+  border-color: var(--pa-color-3);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-3) 25%, transparent);
+}
+
+.pa-input--color-4,
+.pa-select--color-4,
+.pa-textarea--color-4 {
+  border-color: var(--pa-color-4);
+}
+
+.pa-input--color-4:focus,
+.pa-select--color-4:focus,
+.pa-textarea--color-4:focus {
+  border-color: var(--pa-color-4);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-4) 25%, transparent);
+}
+
+.pa-input--color-5,
+.pa-select--color-5,
+.pa-textarea--color-5 {
+  border-color: var(--pa-color-5);
+}
+
+.pa-input--color-5:focus,
+.pa-select--color-5:focus,
+.pa-textarea--color-5:focus {
+  border-color: var(--pa-color-5);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-5) 25%, transparent);
+}
+
+.pa-input--color-6,
+.pa-select--color-6,
+.pa-textarea--color-6 {
+  border-color: var(--pa-color-6);
+}
+
+.pa-input--color-6:focus,
+.pa-select--color-6:focus,
+.pa-textarea--color-6:focus {
+  border-color: var(--pa-color-6);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-6) 25%, transparent);
+}
+
+.pa-input--color-7,
+.pa-select--color-7,
+.pa-textarea--color-7 {
+  border-color: var(--pa-color-7);
+}
+
+.pa-input--color-7:focus,
+.pa-select--color-7:focus,
+.pa-textarea--color-7:focus {
+  border-color: var(--pa-color-7);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-7) 25%, transparent);
+}
+
+.pa-input--color-8,
+.pa-select--color-8,
+.pa-textarea--color-8 {
+  border-color: var(--pa-color-8);
+}
+
+.pa-input--color-8:focus,
+.pa-select--color-8:focus,
+.pa-textarea--color-8:focus {
+  border-color: var(--pa-color-8);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-8) 25%, transparent);
+}
+
+.pa-input--color-9,
+.pa-select--color-9,
+.pa-textarea--color-9 {
+  border-color: var(--pa-color-9);
+}
+
+.pa-input--color-9:focus,
+.pa-select--color-9:focus,
+.pa-textarea--color-9:focus {
+  border-color: var(--pa-color-9);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-9) 25%, transparent);
+}
+
 /* ========================================
    Input Groups
    Input groups with prepend/append addons and buttons
@@ -6647,6 +7012,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;
 }
 
@@ -6658,6 +7024,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;
 }
 
@@ -6667,11 +7034,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 {
@@ -7311,235 +7678,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 {
@@ -12540,6 +12693,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;
@@ -15486,18 +15648,6 @@ html.font-size-4xl {
   --pa-table-hover-accent-color: #555555;
   --pa-modal-overlay-bg: rgba(0, 0, 0, 0.4);
   --pa-modal-content-bg: #ffffff;
-  --pa-alert-success-bg: rgba(40, 167, 69, 0.08);
-  --pa-alert-success-border: rgba(40, 167, 69, 0.2);
-  --pa-alert-success-text: #28a745;
-  --pa-alert-danger-bg: rgba(220, 53, 69, 0.08);
-  --pa-alert-danger-border: rgba(220, 53, 69, 0.2);
-  --pa-alert-danger-text: #dc3545;
-  --pa-alert-warning-bg: rgba(255, 193, 7, 0.08);
-  --pa-alert-warning-border: rgba(255, 193, 7, 0.2);
-  --pa-alert-warning-text: #ffc107;
-  --pa-alert-info-bg: rgba(23, 162, 184, 0.08);
-  --pa-alert-info-border: rgba(23, 162, 184, 0.2);
-  --pa-alert-info-text: #17a2b8;
   --pa-badge-success-bg: #d4edda;
   --pa-badge-success-text: #155724;
   --pa-badge-warning-bg: #fff3cd;
@@ -15539,34 +15689,31 @@ html.font-size-4xl {
   --pa-color-7: #9ca3af;
   --pa-color-8: #1f2937;
   --pa-color-9: #db2777;
+  --pa-color-1-text: #ffffff;
+  --pa-color-2-text: #ffffff;
+  --pa-color-3-text: #ffffff;
+  --pa-color-4-text: #ffffff;
+  --pa-color-5-text: #ffffff;
+  --pa-color-6-text: #ffffff;
+  --pa-color-7-text: #1a1a1a;
+  --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) 15%, 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) 15%, 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) 15%, 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) 15%, transparent);
+  --pa-alert-info-border: color-mix(in srgb, var(--pa-info-bg) 30%, transparent);
   --pa-input-group-prepend-bg: #f8f9fa;
   --pa-input-group-prepend-text: #555555;
   --pa-input-group-append-bg: #f8f9fa;
   --pa-input-group-append-text: #555555;
-  --drp-dropdown-bg: #ffffff;
-  --drp-border-color: #e8e8e8;
-  --drp-primary-bg: #fafafa;
-  --drp-primary-bg-hover: #f8f9fa;
-  --drp-text-color-1: #333333;
-  --drp-text-bg: #777777;
-  --drp-button-bg: transparent;
-  --drp-button-color: #333333;
-  --drp-button-accent-text-color: #ffffff;
-  --drp-button-today-color: #555555;
-  --drp-button-clear-color: #777777;
-  --drp-button-cancel-color: #777777;
-  --ms-dropdown-bg: #ffffff;
-  --ms-input-bg: #ffffff;
-  --ms-primary-bg: #fafafa;
-  --ms-primary-bg-hover: #f8f9fa;
-  --ms-border-color: #e8e8e8;
-  --ms-text-color-1: #333333;
-  --ms-text-color-2: #777777;
-  --ms-text-color-3: #e2e6ea;
-  --ms-text-color-4: #d8d8d8;
-  --ms-hint-bg: #f8f9fa;
-  --ms-actions-bg: #f8f9fa;
-  --ms-selected-popover-bg: #ffffff;
 }
 
 .pa-mode-dark {
@@ -15632,14 +15779,18 @@ html.font-size-4xl {
   --pa-command-palette-item-hover-bg: #2e2e2e;
   --pa-command-palette-item-active-bg: rgba(255, 255, 255, 0.1);
   --pa-command-palette-highlight-bg: rgba(255, 255, 255, 0.15);
-  --pa-alert-info-text: #ffffff;
-  --pa-alert-info-bg: rgba(23, 162, 184, 0.3);
   --pa-alert-success-text: #ffffff;
-  --pa-alert-success-bg: rgba(40, 167, 69, 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) 45%, 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(220, 53, 69, 0.3);
+  --pa-alert-danger-bg: color-mix(in srgb, var(--pa-danger-bg) 45%, 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) 45%, 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) 45%, transparent);
+  --pa-alert-info-border: color-mix(in srgb, var(--pa-info-bg) 70%, transparent);
 }
 .pa-mode-dark .pa-alert code {
   color: inherit;
@@ -15695,34 +15846,6 @@ html.font-size-4xl {
   --base-tooltip-bg: #404040;
   --base-tooltip-text-color: #e8e8e8;
 }
-.pa-mode-dark web-daterangepicker {
-  --drp-dropdown-bg: #242424;
-  --drp-border-color: #404040;
-  --drp-primary-bg: #1a1a1a;
-  --drp-primary-bg-hover: #2e2e2e;
-  --drp-text-color-1: #e8e8e8;
-  --drp-text-bg: #a0a0a0;
-  --drp-button-bg: transparent;
-  --drp-button-color: #e8e8e8;
-  --drp-button-accent-text-color: #1a1a1a;
-  --drp-button-today-color: #e8e8e8;
-  --drp-button-clear-color: #a0a0a0;
-  --drp-button-cancel-color: #a0a0a0;
-}
-.pa-mode-dark web-multiselect {
-  --ms-dropdown-bg: #242424;
-  --ms-input-bg: #2e2e2e;
-  --ms-primary-bg: #1a1a1a;
-  --ms-primary-bg-hover: #2e2e2e;
-  --ms-border-color: #404040;
-  --ms-text-color-1: #e8e8e8;
-  --ms-text-color-2: #a0a0a0;
-  --ms-text-color-3: #707070;
-  --ms-text-color-4: #505050;
-  --ms-hint-bg: #1a1a1a;
-  --ms-actions-bg: #1a1a1a;
-  --ms-selected-popover-bg: #242424;
-}
 
 .pa-mode-dark .pa-card {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);

package/package.json

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

package/src/scss/minimal.scss

@@ -14,6 +14,17 @@ $color-7: #9ca3af;  // Gray 400 (light)
 $color-8: #1f2937;  // Gray 800 (dark)
 $color-9: #db2777;  // Pink 600 (highlight)
 
+// Contrast text colors for color slots
+$color-1-text: #ffffff;  // White on Gray 700
+$color-2-text: #ffffff;  // White on Gray 500
+$color-3-text: #ffffff;  // White on Emerald 600
+$color-4-text: #ffffff;  // White on Amber 600
+$color-5-text: #ffffff;  // White on Indigo 600
+$color-6-text: #ffffff;  // White on Violet 600
+$color-7-text: #1a1a1a;  // Dark on Gray 400 (light background)
+$color-8-text: #ffffff;  // White on Gray 800
+$color-9-text: #ffffff;  // White on Pink 600
+
 // ============================================================================
 // MINIMAL COLOR PALETTE - Grayscale focused
 // ============================================================================
@@ -199,39 +210,13 @@ $modal-content-bg: $minimal-white;
 
   // 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: #{$minimal-gray-100};
   --pa-input-group-prepend-text: #{$minimal-gray-800};
   --pa-input-group-append-bg: #{$minimal-gray-100};
   --pa-input-group-append-text: #{$minimal-gray-800};
-
-  // Web component overrides (light mode)
-  --drp-dropdown-bg: #{$minimal-white};
-  --drp-border-color: #{$minimal-gray-400};
-  --drp-primary-bg: #{$minimal-gray-50};
-  --drp-primary-bg-hover: #{$minimal-gray-100};
-  --drp-text-color-1: #{$minimal-gray-900};
-  --drp-text-bg: #{$minimal-gray-700};
-  --drp-button-bg: transparent;
-  --drp-button-color: #{$minimal-gray-900};
-  --drp-button-accent-text-color: #{$minimal-white};
-  --drp-button-today-color: #{$minimal-gray-800};
-  --drp-button-clear-color: #{$minimal-gray-700};
-  --drp-button-cancel-color: #{$minimal-gray-700};
-
-  --ms-dropdown-bg: #{$minimal-white};
-  --ms-input-bg: #{$minimal-white};
-  --ms-primary-bg: #{$minimal-gray-50};
-  --ms-primary-bg-hover: #{$minimal-gray-100};
-  --ms-border-color: #{$minimal-gray-400};
-  --ms-text-color-1: #{$minimal-gray-900};
-  --ms-text-color-2: #{$minimal-gray-700};
-  --ms-text-color-3: #{$minimal-gray-600};
-  --ms-text-color-4: #{$minimal-gray-500};
-  --ms-hint-bg: #{$minimal-gray-100};
-  --ms-actions-bg: #{$minimal-gray-100};
-  --ms-selected-popover-bg: #{$minimal-white};
 }
 
 // ============================================================================
@@ -342,15 +327,8 @@ $modal-content-bg: $minimal-white;
   --pa-command-palette-item-active-bg: rgba(255, 255, 255, 0.1);
   --pa-command-palette-highlight-bg: rgba(255, 255, 255, 0.15);
 
-  // Alerts - light text for dark mode visibility
-  --pa-alert-info-text: #ffffff;
-  --pa-alert-info-bg: rgba(23, 162, 184, 0.3);
-  --pa-alert-success-text: #ffffff;
-  --pa-alert-success-bg: rgba(40, 167, 69, 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(220, 53, 69, 0.3);
+  // Alert colors - derived from semantic colors
+  @include output-pa-alert-variables-dark;
 
   // Code inside alerts - inherit alert text color
   .pa-alert code {
@@ -415,37 +393,6 @@ $modal-content-bg: $minimal-white;
   --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: #{$dark-bg};
-    --drp-button-today-color: #{$dark-text};
-    --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: #707070;
-    --ms-text-color-4: #505050;
-    --ms-hint-bg: #{$dark-bg};
-    --ms-actions-bg: #{$dark-bg};
-    --ms-selected-popover-bg: #{$dark-card};
-  }
 }
 
 // ============================================================================