@keenmate/pure-admin-core 1.1.1 → 1.1.3

package/README.md

@@ -151,6 +151,10 @@ This enables dark mode support for web components like `@keenmate/web-grid` that
 - `.pa-card__header` - Card header
 - `.pa-card__body` - Card body
 - `.pa-card__footer` - Card footer
+- **Semantic variants:** `.pa-card--primary/success/danger/warning`
+- **Theme color variants:** `.pa-card--color-1` through `.pa-card--color-9`
+  - Uses `--pa-color-N` for header background and border
+  - Text color automatically adjusts via `--pa-color-N-text` for readability
 
 ### Layout & Sidebar
 - `.pa-layout` - Main layout container
@@ -230,7 +234,9 @@ This enables dark mode support for web components like `@keenmate/web-grid` that
 ### Tooltips & Popovers
 - `.pa-tooltip` - Base tooltip (pure CSS, no JS required)
 - `.pa-tooltip--top/right/bottom/left` - Positioning
-- `.pa-tooltip--primary/success/warning/danger` - Variants
+- `.pa-tooltip--primary/success/warning/danger` - Semantic variants
+- `.pa-tooltip--color-1` through `.pa-tooltip--color-9` - Theme color variants
+  - Text color automatically adjusts via `--pa-color-N-text` for readability
 - `.pa-tooltip--multiline` - Multiline tooltips
 - `.pa-popover` - Base popover (requires JavaScript)
 - `.pa-popover--sm/md/lg` - Sizes
@@ -342,12 +348,16 @@ This enables dark mode support for web components like `@keenmate/web-grid` that
 - `.pa-bg-color-1` through `.pa-bg-color-9` - Background color slots
 - `.pa-text-color-1` through `.pa-text-color-9` - Text color slots
 - `.pa-border-color-1` through `.pa-border-color-9` - Border color slots
+- **CSS Variables:**
+  - `--pa-color-1` through `--pa-color-9` - Background colors (theme-defined)
+  - `--pa-color-1-text` through `--pa-color-9-text` - Contrast text colors for readability on colored backgrounds
 
 ## SCSS Variables
 
 All components use SCSS variables with `!default` flags, making them fully customizable:
 
 - **Colors**: `$main-bg`, `$page-bg`, `$subtle-bg`, `$accent-color`, `$text-color-1`, `$text-color-2`, etc.
+- **Theme Color Slots**: `$color-1` through `$color-9` (background colors), `$color-1-text` through `$color-9-text` (contrast text colors)
 - **Spacing**: `$spacing-xs` through `$spacing-2xl`
 - **Typography**: `$font-size-*`, `$line-height-*`, `$font-weight-*`
 - **Components**: `$btn-*`, `$card-*`, `$table-*`, etc.

package/dist/css/main.css

@@ -5385,6 +5385,141 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 .pa-card--stat .pa-card__body {
   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);
@@ -7590,6 +7725,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 {
   border-top-color: var(--pa-color-1);
@@ -7608,6 +7744,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 {
   border-top-color: var(--pa-color-2);
@@ -7626,6 +7763,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 {
   border-top-color: var(--pa-color-3);
@@ -7644,6 +7782,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 {
   border-top-color: var(--pa-color-4);
@@ -7662,6 +7801,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 {
   border-top-color: var(--pa-color-5);
@@ -7680,6 +7820,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 {
   border-top-color: var(--pa-color-6);
@@ -7698,6 +7839,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 {
   border-top-color: var(--pa-color-7);
@@ -7716,6 +7858,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 {
   border-top-color: var(--pa-color-8);
@@ -7734,6 +7877,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 {
   border-top-color: var(--pa-color-9);
@@ -7966,30 +8110,39 @@ 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);
 }
 
 /* ========================================
@@ -8710,6 +8863,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;
 }
 .pa-input-group__prepend:first-child {
@@ -8719,6 +8873,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;
 }
 .pa-input-group__append:last-child {
@@ -8726,10 +8881,10 @@ a.pa-card p {
   border-bottom-right-radius: 4px;
 }
 .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 {
   border-right: 1px solid var(--pa-input-focus-border-color);
@@ -9295,235 +9450,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 {
@@ -13991,6 +13932,14 @@ 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-admin-core",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "Lightweight, data-focused HTML/CSS admin framework built with PureCSS foundation and comprehensive component system",
   "style": "dist/css/main.css",
   "exports": {

package/snippets/buttons.html

@@ -248,6 +248,18 @@
   Continue
 </button>
 
+<!-- Fixed Width with Truncation -->
+<!-- Use minwr-* + maxwr-* to constrain width, text-truncate on inner span for ellipsis -->
+<button class="pa-btn pa-btn--primary minwr-10 maxwr-10">
+  <span class="pa-btn__icon">✓</span>
+  <span class="text-truncate">Save All Changes</span>
+</button>
+
+<button class="pa-btn pa-btn--secondary minwr-10 maxwr-10">
+  <span class="pa-btn__icon">×</span>
+  <span class="text-truncate">Cancel and Go Back</span>
+</button>
+
 
 <!-- BUTTON ALIGNMENT -->
 

package/src/scss/_base-css-variables.scss

@@ -148,6 +148,65 @@
   --base-border-radius-lg: #{$base-border-radius-lg};
 }
 
+// ============================================================================
+// ALERT COLOR DERIVATION MIXINS
+// ============================================================================
+// These mixins use color-mix() to automatically derive alert colors from
+// semantic base colors (--pa-success-bg, --pa-danger-bg, etc.)
+//
+// Light mode: dark text on subtle backgrounds
+// Dark mode: light text on tinted backgrounds
+//
+// Themes call the appropriate mixin instead of hardcoding 12+ CSS variables.
+// Override specific variables after the mixin call if needed.
+// ============================================================================
+
+// Light mode: dark text on subtle backgrounds
+@mixin output-pa-alert-variables-light {
+  // Success
+  --pa-alert-success-text: color-mix(in srgb, var(--pa-success-bg) #{$alert-text-mix-light}, black);
+  --pa-alert-success-bg: color-mix(in srgb, var(--pa-success-bg) #{$alert-bg-opacity-light}%, transparent);
+  --pa-alert-success-border: color-mix(in srgb, var(--pa-success-bg) #{$alert-border-opacity-light}%, transparent);
+
+  // Danger
+  --pa-alert-danger-text: color-mix(in srgb, var(--pa-danger-bg) #{$alert-text-mix-light}, black);
+  --pa-alert-danger-bg: color-mix(in srgb, var(--pa-danger-bg) #{$alert-bg-opacity-light}%, transparent);
+  --pa-alert-danger-border: color-mix(in srgb, var(--pa-danger-bg) #{$alert-border-opacity-light}%, transparent);
+
+  // Warning
+  --pa-alert-warning-text: color-mix(in srgb, var(--pa-warning-bg) #{$alert-text-mix-light}, black);
+  --pa-alert-warning-bg: color-mix(in srgb, var(--pa-warning-bg) #{$alert-bg-opacity-light}%, transparent);
+  --pa-alert-warning-border: color-mix(in srgb, var(--pa-warning-bg) #{$alert-border-opacity-light}%, transparent);
+
+  // Info
+  --pa-alert-info-text: color-mix(in srgb, var(--pa-info-bg) #{$alert-text-mix-light}, black);
+  --pa-alert-info-bg: color-mix(in srgb, var(--pa-info-bg) #{$alert-bg-opacity-light}%, transparent);
+  --pa-alert-info-border: color-mix(in srgb, var(--pa-info-bg) #{$alert-border-opacity-light}%, transparent);
+}
+
+// Dark mode: white text on tinted backgrounds (white text is always readable)
+@mixin output-pa-alert-variables-dark {
+  // Success
+  --pa-alert-success-text: #ffffff;
+  --pa-alert-success-bg: color-mix(in srgb, var(--pa-success-bg) #{$alert-bg-opacity-dark}%, transparent);
+  --pa-alert-success-border: color-mix(in srgb, var(--pa-success-bg) #{$alert-border-opacity-dark}%, transparent);
+
+  // Danger
+  --pa-alert-danger-text: #ffffff;
+  --pa-alert-danger-bg: color-mix(in srgb, var(--pa-danger-bg) #{$alert-bg-opacity-dark}%, transparent);
+  --pa-alert-danger-border: color-mix(in srgb, var(--pa-danger-bg) #{$alert-border-opacity-dark}%, transparent);
+
+  // Warning
+  --pa-alert-warning-text: #ffffff;
+  --pa-alert-warning-bg: color-mix(in srgb, var(--pa-warning-bg) #{$alert-bg-opacity-dark}%, transparent);
+  --pa-alert-warning-border: color-mix(in srgb, var(--pa-warning-bg) #{$alert-border-opacity-dark}%, transparent);
+
+  // Info
+  --pa-alert-info-text: #ffffff;
+  --pa-alert-info-bg: color-mix(in srgb, var(--pa-info-bg) #{$alert-bg-opacity-dark}%, transparent);
+  --pa-alert-info-border: color-mix(in srgb, var(--pa-info-bg) #{$alert-border-opacity-dark}%, transparent);
+}
+
 // ============================================================================
 // PURE ADMIN THEME CSS VARIABLES OUTPUT MIXIN
 // ============================================================================
@@ -343,20 +402,9 @@
   --pa-modal-content-bg: #{$modal-content-bg};
 
   // =========================================================================
-  // ALERT COLORS
+  // ALERT COLORS - Now derived via output-pa-alert-variables-light/dark mixins
+  // Themes must call the appropriate mixin after output-pa-css-variables
   // =========================================================================
-  --pa-alert-success-bg: #{$alert-success-bg};
-  --pa-alert-success-border: #{$alert-success-border};
-  --pa-alert-success-text: #{$alert-success-text};
-  --pa-alert-danger-bg: #{$alert-danger-bg};
-  --pa-alert-danger-border: #{$alert-danger-border};
-  --pa-alert-danger-text: #{$alert-danger-text};
-  --pa-alert-warning-bg: #{$alert-warning-bg};
-  --pa-alert-warning-border: #{$alert-warning-border};
-  --pa-alert-warning-text: #{$alert-warning-text};
-  --pa-alert-info-bg: #{$alert-info-bg};
-  --pa-alert-info-border: #{$alert-info-border};
-  --pa-alert-info-text: #{$alert-info-text};
 
   // =========================================================================
   // BADGE COLORS
@@ -429,4 +477,15 @@
   --pa-color-7: #{$color-7};
   --pa-color-8: #{$color-8};
   --pa-color-9: #{$color-9};
+
+  // Theme color slots - text/contrast colors
+  --pa-color-1-text: #{$color-1-text};
+  --pa-color-2-text: #{$color-2-text};
+  --pa-color-3-text: #{$color-3-text};
+  --pa-color-4-text: #{$color-4-text};
+  --pa-color-5-text: #{$color-5-text};
+  --pa-color-6-text: #{$color-6-text};
+  --pa-color-7-text: #{$color-7-text};
+  --pa-color-8-text: #{$color-8-text};
+  --pa-color-9-text: #{$color-9-text};
 }

package/src/scss/core-components/_cards.scss

@@ -213,6 +213,28 @@
     }
   }
 
+  // Theme color variants (color-1 through color-9)
+  // These use theme-customizable colors from --pa-color-* CSS variables
+  @for $i from 1 through 9 {
+    &--color-#{$i} {
+      border-color: var(--pa-color-#{$i});
+
+      .pa-card__header {
+        background-color: var(--pa-color-#{$i});
+        color: var(--pa-color-#{$i}-text);
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+          color: var(--pa-color-#{$i}-text);
+        }
+      }
+    }
+  }
+
   // Card tabs
   &__tabs {
     display: flex;

package/src/scss/core-components/_tooltips.scss

@@ -242,6 +242,7 @@
   @for $i from 1 through 9 {
     &--color-#{$i}::before {
       background-color: var(--pa-color-#{$i});
+      color: var(--pa-color-#{$i}-text);
     }
     &--color-#{$i}::after {
       border-top-color: var(--pa-color-#{$i});
@@ -538,6 +539,7 @@
   @for $i from 1 through 9 {
     &.pa-tooltip--color-#{$i} {
       background-color: var(--pa-color-#{$i});
+      color: var(--pa-color-#{$i}-text);
     }
   }
 }

package/src/scss/core-components/_utilities.scss

@@ -260,6 +260,16 @@ html.font-size-4xl {
   white-space: nowrap;
 }
 
+// Link styling
+.pa-link {
+  color: $accent-color;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
 // Component showcase styling
 .component-showcase {
   display: flex;

package/src/scss/core-components/_web-components-theme.scss

@@ -2,293 +2,20 @@
  * 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
- */
-@use '../variables' as *;
-/*
+ * @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: #{$accent-color};
-  --drp-primary-bg: #{$btn-primary-bg};
-  --drp-primary-bg-hover: #{$btn-primary-bg-hover};
-  --drp-text-primary: var(--pa-text-color-1);
-  --drp-text-secondary: var(--pa-text-color-2);
-  --drp-border-color: #{$border-color};
-  --drp-card-bg: var(--pa-card-bg);
-  --drp-hover-bg: #{$table-hover-bg};
-
-  /* Spacing */
-  --drp-spacing-xs: #{$spacing-xs};
-  --drp-spacing-sm: #{$spacing-sm};
-  --drp-spacing-md: #{$spacing-md};
-  --drp-spacing-base: #{$spacing-base};
-  --drp-spacing-lg: #{$spacing-lg};
-  --drp-spacing-xl: #{$spacing-xl};
-
-  /* Typography */
-  --drp-font-size-xs: #{$font-size-xs};
-  --drp-font-size-sm: #{$font-size-sm};
-  --drp-font-size-base: #{$font-size-base};
-  --drp-font-size-lg: #{$font-size-lg};
-  --drp-font-weight-normal: #{$font-weight-normal};
-  --drp-font-weight-medium: #{$font-weight-medium};
-  --drp-font-weight-semibold: #{$font-weight-semibold};
-
-  /* Animations */
-  --drp-transition-fast: #{$transition-fast};
-  --drp-transition-normal: #{$transition-normal};
-  --drp-easing-snappy: #{$easing-snappy};
-  --drp-easing-smooth: #{$easing-smooth};
-
-  /* Shadows */
-  --drp-shadow-sm: #{$shadow-sm};
-  --drp-shadow-md: #{$shadow-md};
-  --drp-shadow-lg: #{$shadow-lg};
-  --drp-shadow-xl: #{$shadow-xl};
-
-  /* Border radius */
-  --drp-border-radius: #{$border-radius};
-  --drp-border-radius-sm: #{$border-radius-sm};
-  --drp-border-radius-lg: #{$border-radius-lg};
-
-  /* Border width */
-  --drp-border-width-base: #{$border-width-base};
-  --drp-border-width-medium: #{$border-width-medium};
-
-  /* ===== 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: #{$input-border};
-  --drp-input-border-color-hover: #{$accent-color};
-  --drp-input-border-color-focus: #{$accent-color};
-  --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: #{$accent-light};
-  --drp-input-focus-shadow-size: #{$focus-ring-width};
-
-  /* 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: #{$font-size-xs};
-  --drp-input-size-xs-padding-v: #{$input-padding-v};
-  --drp-input-size-xs-padding-h: #{$input-padding-h};
-  --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: #{$font-size-xs};
-  --drp-input-size-sm-padding-v: #{$input-padding-v};
-  --drp-input-size-sm-padding-h: #{$input-padding-h};
-  --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: #{$font-size-sm};
-  --drp-input-size-md-padding-v: #{$input-padding-v};
-  --drp-input-size-md-padding-h: #{$input-padding-h};
-  --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: #{$font-size-base};
-  --drp-input-size-lg-padding-v: #{$input-padding-v};
-  --drp-input-size-lg-padding-h: #{$input-padding-h};
-  --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: #{$font-size-lg};
-  --drp-input-size-xl-padding-v: #{$input-padding-v};
-  --drp-input-size-xl-padding-h: #{$input-padding-h};
-  --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: #{$border-color};
-  --drp-calendar-shadow: #{$shadow-xl};
-  --drp-calendar-border-radius: #{$border-radius};
-  --drp-calendar-padding: #{$spacing-base};
-  --drp-calendar-z-index: #{$z-index-dropdown};
-
-  /* ===== HEADER ===== */
-
-  --drp-header-padding: #{$spacing-sm} #{$spacing-md};
-  --drp-header-font-size: #{$font-size-base};
-  --drp-header-font-weight: #{$font-weight-semibold};
-  --drp-header-text-color: var(--pa-text-color-1);
-  --drp-header-bg-hover: #{$accent-hover};
-  --drp-header-bg-active: #{$accent-light};
-
-  /* ===== NAVIGATION ===== */
-
-  --drp-nav-btn-size: 3.2rem; /* 32px (10px base) */
-  --drp-nav-text-color: var(--pa-text-color-1);
-  --drp-nav-border-color: #{$border-color};
-  --drp-nav-bg-hover: #{$accent-hover};
-  --drp-nav-bg-active: #{$accent-light};
-  --drp-nav-border-hover: #{$accent-color};
-
-  /* ===== WEEKDAY HEADER ===== */
-
-  --drp-weekday-font-size: #{$font-size-xs};
-  --drp-weekday-font-weight: #{$font-weight-semibold};
-  --drp-weekday-color: var(--pa-text-color-2);
-  --drp-weekday-padding: #{$spacing-xs};
-
-  /* ===== CALENDAR GRID ===== */
-
-  --drp-day-size: 3.6rem; /* 36px (10px base) */
-  --drp-day-font-size: #{$font-size-sm};
-  --drp-day-border-radius: #{$border-radius-sm};
-
-  /* Day states */
-  --drp-day-text-color: var(--pa-text-color-1);
-  --drp-day-bg-hover: #{$accent-hover};
-  --drp-day-border-hover: transparent;
-
-  /* Today indicator */
-  --drp-day-today-border: #{$accent-color};
-
-  /* Selected state */
-  --drp-day-selected-bg: #{$accent-color};
-  --drp-day-selected-color: #ffffff;
-
-  /* Range state */
-  --drp-day-range-bg: #{$accent-light};
-  --drp-day-range-text: var(--pa-text-color-1);
-
-  /* Focused state */
-  --drp-day-focused-outline: #{$accent-color};
-
-  /* Disabled state */
-  --drp-day-disabled-color: var(--pa-text-color-2);
-  --drp-day-disabled-opacity: #{$opacity-disabled};
-
-  /* Other month */
-  --drp-day-other-month-color: var(--pa-text-color-2);
-  --drp-day-other-month-opacity: #{$opacity-muted};
-
-  /* ===== BADGES ===== */
-
-  /* Dot badges (original style) */
-  --drp-badge-size: 0.6rem; /* 6px (10px base) */
-  --drp-badge-primary: #{$btn-primary-bg};
-  --drp-badge-success: #{$success-bg};
-  --drp-badge-warning: #{$warning-bg};
-  --drp-badge-danger: #{$danger-bg};
-  --drp-badge-info: #{$info-bg};
-
-  /* Number badges */
-  --drp-badge-number-bg: #{$danger-bg};
-  --drp-badge-number-color: #ffffff;
-
-  /* Count badges */
-  --drp-badge-count-bg: #{$accent-color};
-  --drp-badge-count-color: #ffffff;
-
-  /* Text badges */
-  --drp-badge-text-bg: #{$accent-light};
-  --drp-badge-text-color: var(--pa-text-color-1);
-
-  /* ===== SUMMARY BAR ===== */
-
-  --drp-summary-bg: #{$card-header-bg};
-  --drp-summary-border-color: #{$border-color};
-  --drp-summary-text-color: var(--pa-text-color-1);
-  --drp-summary-count-color: #{$accent-color};
-  --drp-summary-padding: #{$spacing-sm} #{$spacing-md};
-  --drp-summary-font-size: #{$font-size-sm};
-  --drp-summary-font-weight: #{$font-weight-medium};
-
-  /* ===== BUTTONS ===== */
-
-  /* Today button */
-  --drp-button-today-bg: #{$btn-secondary-bg};
-  --drp-button-today-bg-hover: #{$btn-secondary-bg-hover};
-  --drp-button-today-color: #{$btn-secondary-text};
-  --drp-button-today-border: #{$border-color};
-
-  /* Clear button */
-  --drp-button-clear-bg: #{$btn-secondary-bg};
-  --drp-button-clear-bg-hover: #{$btn-secondary-bg-hover};
-  --drp-button-clear-color: #{$btn-secondary-text};
-  --drp-button-clear-border: #{$border-color};
-
-  /* Cancel button */
-  --drp-button-cancel-bg: #{$btn-secondary-bg};
-  --drp-button-cancel-bg-hover: #{$btn-secondary-bg-hover};
-  --drp-button-cancel-color: #{$btn-secondary-text};
-  --drp-button-cancel-border: #{$border-color};
-
-  /* Apply button */
-  --drp-button-apply-bg: #{$btn-primary-bg};
-  --drp-button-apply-bg-hover: #{$btn-primary-bg-hover};
-  --drp-button-apply-color: #{$btn-primary-text};
-  --drp-button-apply-border: #{$btn-primary-bg};
-
-  /* Button sizing */
-  --drp-button-padding: #{$btn-padding-sm-v} #{$btn-padding-sm-h};
-  --drp-button-font-size: #{$font-size-sm};
-  --drp-button-border-radius: #{$border-radius};
-  --drp-button-gap: #{$spacing-sm};
-
-  /* ===== UNIFIED NAVIGATION ===== */
-
-  /* Range selectors in unified nav */
-  --drp-unified-range-text-color: var(--pa-text-color-1);
-  --drp-unified-range-bg-hover: #{$accent-hover};
-  --drp-unified-range-bg-active: #{$accent-light};
-
-  /* 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: #{$border-color};
-  --drp-rolling-shadow: #{$shadow-md};
-  --drp-rolling-item-hover-bg: #{$accent-hover};
-  --drp-rolling-item-selected-bg: #{$accent-color};
-  --drp-rolling-item-selected-text: #ffffff;
-  --drp-rolling-font-size: #{$font-size-sm};
-  --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: #{$accent-color};
-  --drp-loading-spinner-size: #{$spinner-size};
-
-  /* ===== MULTIPLE MONTHS ===== */
-
-  --drp-months-gap: #{$spacing-lg};
+/* Web Multiselect - Group label styling */
+web-multiselect {
+  --ms-group-label-color: var(--base-text-color-1);
+  --ms-group-label-font-weight: 600;
 }

package/src/scss/core-components/forms/_input-groups.scss

@@ -47,6 +47,7 @@
   &__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;
 
     &:first-child {
@@ -58,6 +59,7 @@
   &__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;
 
     &:last-child {
@@ -68,11 +70,11 @@
 
   // Adjacent prepends/appends need borders between them
   &__prepend + &__prepend {
-    border-left: $border-width-base solid var(--pa-border-color);
+    border-left: $border-width-base solid var(--pa-input-group-prepend-bg);
   }
 
   &__append + &__append {
-    border-left: $border-width-base solid var(--pa-border-color);
+    border-left: $border-width-base solid var(--pa-input-group-append-bg);
   }
 
   // When input is focused, show focus border on adjacent prepend/append

package/src/scss/variables/_base.scss

@@ -213,3 +213,16 @@ $base-border-radius-lg: 0.8 !default;  // 8px
 
 // Command palette input height (must be after $base-input-size-* variables)
 $command-palette-input-height: #{$base-input-size-lg-height}rem !default;
+
+// =============================================================================
+// ALERT COLOR DERIVATION PARAMETERS
+// Used by color-mix() mixins to derive alert colors from semantic base colors
+// Themes can override these to customize alert appearance
+// =============================================================================
+
+$alert-bg-opacity-light: 15 !default;       // Light mode: subtle bg (%)
+$alert-bg-opacity-dark: 45 !default;        // Dark mode: punchy, vibrant bg (%)
+$alert-border-opacity-light: 30 !default;   // Light mode border (%)
+$alert-border-opacity-dark: 70 !default;    // Dark mode border - more visible (%)
+$alert-text-mix-light: 60% !default;        // Mix with black for dark text
+$alert-text-mix-dark: 80% !default;         // Mix with white for light text

package/src/scss/variables/_colors.scss

@@ -216,3 +216,15 @@ $color-6: transparent !default;
 $color-7: transparent !default;
 $color-8: transparent !default;
 $color-9: transparent !default;
+
+// Theme color slots - text/contrast colors
+// These define the text color to use when color-N is used as a background
+$color-1-text: #ffffff !default;
+$color-2-text: #ffffff !default;
+$color-3-text: #ffffff !default;
+$color-4-text: #ffffff !default;
+$color-5-text: #ffffff !default;
+$color-6-text: #ffffff !default;
+$color-7-text: #ffffff !default;
+$color-8-text: #ffffff !default;
+$color-9-text: #ffffff !default;

package/src/scss/variables/_components.scss

@@ -283,24 +283,11 @@ $alert-icon-margin: $spacing-sm !default;
 $alert-list-padding-left: $spacing-lg !default;
 $alert-list-item-margin-top: $card-footer-padding-v !default;
 
-// Alert colors
-$alert-success-bg: $success-bg-subtle !default;
-$alert-success-border: $success-border !default;
-$alert-success-text: $success-bg !default;
-
-$alert-danger-bg: $danger-bg-subtle !default;
-$alert-danger-border: $danger-border !default;
-$alert-danger-text: $danger-bg !default;
+// Alert colors - Now derived via color-mix() mixins in _base-css-variables.scss
+// Themes call output-pa-alert-variables-light/dark instead of hardcoding values
+// Keep only the text transform variable as it's not color-related
 $alert-danger-text-transform: none !default;
 
-$alert-warning-bg: $warning-bg-subtle !default;
-$alert-warning-border: $warning-border !default;
-$alert-warning-text: $warning-bg !default;
-
-$alert-info-bg: $info-bg-subtle !default;
-$alert-info-border: $info-border !default;
-$alert-info-text: $info-bg !default;
-
 // ============================================================================
 // CALLOUT SYSTEM
 // ============================================================================