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

package/dist/dark.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: #4dabf7;
   --pa-modal-overlay-bg: rgba(0, 0, 0, 0.7);
   --pa-modal-content-bg: #2a2a2a;
-  --pa-alert-success-bg: rgba(5, 150, 105, 0.08);
-  --pa-alert-success-border: rgba(5, 150, 105, 0.2);
-  --pa-alert-success-text: #059669;
-  --pa-alert-danger-bg: rgba(220, 38, 38, 0.08);
-  --pa-alert-danger-border: rgba(220, 38, 38, 0.2);
-  --pa-alert-danger-text: #dc2626;
-  --pa-alert-warning-bg: rgba(217, 119, 6, 0.08);
-  --pa-alert-warning-border: rgba(217, 119, 6, 0.2);
-  --pa-alert-warning-text: #d97706;
-  --pa-alert-info-bg: rgba(8, 145, 178, 0.08);
-  --pa-alert-info-border: rgba(8, 145, 178, 0.2);
-  --pa-alert-info-text: #0891b2;
   --pa-badge-success-bg: #d4edda;
   --pa-badge-success-text: #34d399;
   --pa-badge-warning-bg: #fff3cd;
@@ -15539,31 +15689,28 @@ html.font-size-4xl {
   --pa-color-7: #adb5bd;
   --pa-color-8: #f8f9fa;
   --pa-color-9: #ffa94d;
+  --pa-color-1-text: #ffffff;
+  --pa-color-2-text: #1a1a1a;
+  --pa-color-3-text: #1a1a1a;
+  --pa-color-4-text: #ffffff;
+  --pa-color-5-text: #ffffff;
+  --pa-color-6-text: #1a1a1a;
+  --pa-color-7-text: #1a1a1a;
+  --pa-color-8-text: #1a1a1a;
+  --pa-color-9-text: #1a1a1a;
+  --pa-alert-success-text: #ffffff;
+  --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: 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);
   --base-elevated-bg: #333333;
-  --drp-dropdown-bg: #2a2a2a;
-  --drp-border-color: #404040;
-  --drp-primary-bg: #1a1a1a;
-  --drp-primary-bg-hover: #333333;
-  --drp-text-color-1: #ffffff;
-  --drp-text-color-2: #b8b8b8;
-  --drp-button-bg: transparent;
-  --drp-button-color: #ffffff;
-  --drp-button-accent-text-color: #ffffff;
-  --drp-button-today-color: #4dabf7;
-  --drp-button-clear-color: #b8b8b8;
-  --drp-button-cancel-color: #b8b8b8;
-  --ms-dropdown-bg: #2a2a2a;
-  --ms-input-bg: #333333;
-  --ms-primary-bg: #1a1a1a;
-  --ms-primary-bg-hover: #333333;
-  --ms-border-color: #404040;
-  --ms-text-color-1: #ffffff;
-  --ms-text-color-2: #b8b8b8;
-  --ms-text-color-3: #888888;
-  --ms-text-color-4: #666666;
-  --ms-hint-bg: #1a1a1a;
-  --ms-actions-bg: #1a1a1a;
-  --ms-selected-popover-bg: #2a2a2a;
 }
 
 .pa-mode-light {
@@ -15619,14 +15766,18 @@ html.font-size-4xl {
   --pa-command-palette-item-hover-bg: #f1f5f9;
   --pa-command-palette-item-active-bg: rgba(77, 171, 247, 0.15);
   --pa-command-palette-highlight-bg: rgba(77, 171, 247, 0.2);
-  --pa-alert-info-text: #0c4a6e;
-  --pa-alert-info-bg: rgba(14, 165, 233, 0.15);
-  --pa-alert-success-text: #14532d;
-  --pa-alert-success-bg: rgba(34, 197, 94, 0.15);
-  --pa-alert-warning-text: #713f12;
-  --pa-alert-warning-bg: rgba(234, 179, 8, 0.15);
-  --pa-alert-danger-text: #7f1d1d;
-  --pa-alert-danger-bg: rgba(239, 68, 68, 0.15);
+  --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-btn-secondary-bg: #e2e8f0;
   --pa-btn-secondary-bg-hover: #cbd5e1;
   --pa-btn-secondary-text: #1e293b;
@@ -15673,34 +15824,6 @@ html.font-size-4xl {
   --base-tooltip-bg: #1e293b;
   --base-tooltip-text-color: #ffffff;
 }
-.pa-mode-light web-daterangepicker {
-  --drp-dropdown-bg: #ffffff;
-  --drp-border-color: #e2e8f0;
-  --drp-primary-bg: #f8fafc;
-  --drp-primary-bg-hover: #f1f5f9;
-  --drp-text-color-1: #1e293b;
-  --drp-text-color-2: #64748b;
-  --drp-button-bg: transparent;
-  --drp-button-color: #1e293b;
-  --drp-button-accent-text-color: #ffffff;
-  --drp-button-today-color: #4dabf7;
-  --drp-button-clear-color: #64748b;
-  --drp-button-cancel-color: #64748b;
-}
-.pa-mode-light web-multiselect {
-  --ms-dropdown-bg: #ffffff;
-  --ms-input-bg: #ffffff;
-  --ms-primary-bg: #f8fafc;
-  --ms-primary-bg-hover: #f1f5f9;
-  --ms-border-color: #e2e8f0;
-  --ms-text-color-1: #1e293b;
-  --ms-text-color-2: #64748b;
-  --ms-text-color-3: #94a3b8;
-  --ms-text-color-4: #cbd5e1;
-  --ms-hint-bg: #f1f5f9;
-  --ms-actions-bg: #f1f5f9;
-  --ms-selected-popover-bg: #ffffff;
-}
 .pa-mode-light .pa-card {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-admin-theme-dark",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Dark theme for Pure Admin with color variants (blue, green, red) via CSS classes",
   "style": "dist/dark.css",
   "exports": {

package/src/scss/dark.scss

@@ -14,6 +14,17 @@ $color-7: #adb5bd;  // Gray (neutral)
 $color-8: #f8f9fa;  // Light (contrast)
 $color-9: #ffa94d;  // Orange (highlight)
 
+// Contrast text colors for color slots
+$color-1-text: #ffffff;  // White on Light Blue
+$color-2-text: #1a1a1a;  // Dark on Light Green
+$color-3-text: #1a1a1a;  // Dark on Yellow (light background)
+$color-4-text: #ffffff;  // White on Light Red
+$color-5-text: #ffffff;  // White on Light Purple
+$color-6-text: #1a1a1a;  // Dark on Teal (light background)
+$color-7-text: #1a1a1a;  // Dark on Gray (light background)
+$color-8-text: #1a1a1a;  // Dark on Light (very light background)
+$color-9-text: #1a1a1a;  // Dark on Orange (light background)
+
 // ============================================================================
 // DARK THEME COLOR PALETTE
 // ============================================================================
@@ -205,36 +216,11 @@ $checkbox-focus-shadow: 0 0 0 2px $base-focus-ring-color;
 
   // Pure Admin theme CSS variables for runtime theme switching
   @include output-pa-css-variables;
+  @include output-pa-alert-variables-dark;
 
   // Override base-elevated-bg for dark mode (web-grid striped rows, headers)
   --base-elevated-bg: #{$dark-bg-tertiary};
 
-  // Web component overrides (dark mode)
-  --drp-dropdown-bg: #{$dark-bg-secondary};
-  --drp-border-color: #{$dark-bg-quaternary};
-  --drp-primary-bg: #{$dark-bg-primary};
-  --drp-primary-bg-hover: #{$dark-bg-tertiary};
-  --drp-text-color-1: #{$dark-text-primary};
-  --drp-text-color-2: #{$dark-text-secondary};
-  --drp-button-bg: transparent;
-  --drp-button-color: #{$dark-text-primary};
-  --drp-button-accent-text-color: #ffffff;
-  --drp-button-today-color: #{$dark-accent};
-  --drp-button-clear-color: #{$dark-text-secondary};
-  --drp-button-cancel-color: #{$dark-text-secondary};
-
-  --ms-dropdown-bg: #{$dark-bg-secondary};
-  --ms-input-bg: #{$dark-bg-tertiary};
-  --ms-primary-bg: #{$dark-bg-primary};
-  --ms-primary-bg-hover: #{$dark-bg-tertiary};
-  --ms-border-color: #{$dark-bg-quaternary};
-  --ms-text-color-1: #{$dark-text-primary};
-  --ms-text-color-2: #{$dark-text-secondary};
-  --ms-text-color-3: #888888;
-  --ms-text-color-4: #666666;
-  --ms-hint-bg: #{$dark-bg-primary};
-  --ms-actions-bg: #{$dark-bg-primary};
-  --ms-selected-popover-bg: #{$dark-bg-secondary};
 }
 
 // ============================================================================
@@ -334,15 +320,8 @@ $checkbox-focus-shadow: 0 0 0 2px $base-focus-ring-color;
   --pa-command-palette-item-active-bg: rgba(77, 171, 247, 0.15);
   --pa-command-palette-highlight-bg: rgba(77, 171, 247, 0.2);
 
-  // Alerts
-  --pa-alert-info-text: #0c4a6e;
-  --pa-alert-info-bg: rgba(14, 165, 233, 0.15);
-  --pa-alert-success-text: #14532d;
-  --pa-alert-success-bg: rgba(34, 197, 94, 0.15);
-  --pa-alert-warning-text: #713f12;
-  --pa-alert-warning-bg: rgba(234, 179, 8, 0.15);
-  --pa-alert-danger-text: #7f1d1d;
-  --pa-alert-danger-bg: rgba(239, 68, 68, 0.15);
+  // Alert colors - derived from semantic colors
+  @include output-pa-alert-variables-light;
 
   // Buttons
   --pa-btn-secondary-bg: #{$light-border};
@@ -398,38 +377,6 @@ $checkbox-focus-shadow: 0 0 0 2px $base-focus-ring-color;
   --base-tooltip-bg: #{$light-text};
   --base-tooltip-text-color: #ffffff;
 
-  // Daterangepicker overrides (light mode)
-  web-daterangepicker {
-    --drp-dropdown-bg: #{$light-card};
-    --drp-border-color: #{$light-border};
-    --drp-primary-bg: #{$light-bg};
-    --drp-primary-bg-hover: #{$light-surface};
-    --drp-text-color-1: #{$light-text};
-    --drp-text-color-2: #{$light-text-secondary};
-    --drp-button-bg: transparent;
-    --drp-button-color: #{$light-text};
-    --drp-button-accent-text-color: #ffffff;
-    --drp-button-today-color: #{$dark-accent};
-    --drp-button-clear-color: #{$light-text-secondary};
-    --drp-button-cancel-color: #{$light-text-secondary};
-  }
-
-  // Multiselect overrides (light mode)
-  web-multiselect {
-    --ms-dropdown-bg: #{$light-card};
-    --ms-input-bg: #{$light-card};
-    --ms-primary-bg: #{$light-bg};
-    --ms-primary-bg-hover: #{$light-surface};
-    --ms-border-color: #{$light-border};
-    --ms-text-color-1: #{$light-text};
-    --ms-text-color-2: #{$light-text-secondary};
-    --ms-text-color-3: #94a3b8;
-    --ms-text-color-4: #cbd5e1;
-    --ms-hint-bg: #{$light-surface};
-    --ms-actions-bg: #{$light-surface};
-    --ms-selected-popover-bg: #{$light-card};
-  }
-
   // Card shadows lighter
   .pa-card {
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);