@keenmate/pure-admin-core 2.1.1 → 2.3.0

package/README.md

@@ -2,14 +2,16 @@
 
 Lightweight, data-focused CSS/SCSS admin framework with Corporate theme as default.
 
-## What's New in 2.1.0
+## What's New in 2.3.0
 
-- **Split Button** (`pa-btn-split`) — Primary action + dropdown toggle with Floating UI positioning, RTL support, custom icons, upward placement, and size variants
-- **Filter Card** (`pa-filter-card`) — Expandable filter card with inline filters row, actions, and collapsible advanced section
-- **Responsive grid table hover fix** — Card-style tables no longer highlight all cells on hover
-- **Mobile sidebar burger fix** — Sidebar behavior modes no longer show X instead of hamburger on mobile
-- **Sidebar resize fix** — Resize no longer blocked in icon-collapse mode when sidebar is expanded; disabled on mobile
-- **Actions column consistency** — All demo tables now show Actions as the first column
+- **Toast action buttons** — New `pa-toast__actions` element for action buttons inside toasts, separated by a border-top. Toast service supports `actions: [{ label, variant, onClick }]` with auto-dismiss on click
+- **Toast service improvements** — `filled`, `progressColor`, and `maxWidth` options. Container width ratchets up to the widest toast shown, preventing layout jitter when toasts dismiss
+- **Toast progress bar** — More visible: 5px height, 0.6 opacity (was 3px / 0.3)
+
+## What's New in 2.2.0
+
+- **Theme color slots (1-9) across components** — Alerts, callouts, toasts, and buttons now support `--color-{1-9}` and `--outline-color-{1-9}` variants using the 9 custom theme color slots. Themes that define `$color-1` through `$color-9` get matching component styles automatically
+- **Filled toast variants** — New `pa-toast--filled-*` variants with full-color backgrounds, contrast text, and semi-transparent progress bars. Available for all standard colors and theme color slots
 
 ## Installation
 
@@ -337,6 +339,10 @@ Works with both `pa-table` and `web-grid` component. First/last columns automati
 ### Toasts
 - `.pa-toast` - Base toast
 - `.pa-toast--primary/success/danger/warning/info` - Variants
+- `.pa-toast--filled-primary/success/danger/warning/info` - Filled variants (full-color background)
+- `.pa-toast--color-{1-9}` / `.pa-toast--filled-color-{1-9}` - Theme color slot variants
+- `.pa-toast__actions` - Action button row with border-top separator
+- `.pa-toast__progress` - Auto-dismiss progress bar (5px, 0.6 opacity)
 - Positions (RTL-aware): `top-end`, `top-center`, `top-start`, `bottom-end`, `bottom-center`, `bottom-start`
 
 ### Tooltips & Popovers

package/dist/css/main.css

@@ -5574,14 +5574,10 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   justify-content: space-between;
   align-items: center;
 }
-.pa-card__tools {
-  display: flex;
-  gap: 0.8rem;
-  align-items: center;
-}
 .pa-card__actions {
   display: flex;
   gap: 0.8rem;
+  align-items: center;
 }
 .pa-card__meta {
   color: var(--pa-text-color-2);
@@ -7410,6 +7406,159 @@ a.pa-card p {
   background-color: var(--pa-btn-info-bg);
   color: var(--pa-btn-info-text);
 }
+.pa-btn--color-1 {
+  background-color: var(--pa-color-1);
+  border-color: var(--pa-color-1);
+  color: var(--pa-color-1-text);
+}
+.pa-btn--color-1:hover {
+  filter: brightness(0.9);
+}
+.pa-btn--outline-color-1 {
+  background-color: transparent;
+  border-color: var(--pa-color-1);
+  color: var(--pa-color-1);
+}
+.pa-btn--outline-color-1:hover {
+  background-color: var(--pa-color-1);
+  color: var(--pa-color-1-text);
+}
+.pa-btn--color-2 {
+  background-color: var(--pa-color-2);
+  border-color: var(--pa-color-2);
+  color: var(--pa-color-2-text);
+}
+.pa-btn--color-2:hover {
+  filter: brightness(0.9);
+}
+.pa-btn--outline-color-2 {
+  background-color: transparent;
+  border-color: var(--pa-color-2);
+  color: var(--pa-color-2);
+}
+.pa-btn--outline-color-2:hover {
+  background-color: var(--pa-color-2);
+  color: var(--pa-color-2-text);
+}
+.pa-btn--color-3 {
+  background-color: var(--pa-color-3);
+  border-color: var(--pa-color-3);
+  color: var(--pa-color-3-text);
+}
+.pa-btn--color-3:hover {
+  filter: brightness(0.9);
+}
+.pa-btn--outline-color-3 {
+  background-color: transparent;
+  border-color: var(--pa-color-3);
+  color: var(--pa-color-3);
+}
+.pa-btn--outline-color-3:hover {
+  background-color: var(--pa-color-3);
+  color: var(--pa-color-3-text);
+}
+.pa-btn--color-4 {
+  background-color: var(--pa-color-4);
+  border-color: var(--pa-color-4);
+  color: var(--pa-color-4-text);
+}
+.pa-btn--color-4:hover {
+  filter: brightness(0.9);
+}
+.pa-btn--outline-color-4 {
+  background-color: transparent;
+  border-color: var(--pa-color-4);
+  color: var(--pa-color-4);
+}
+.pa-btn--outline-color-4:hover {
+  background-color: var(--pa-color-4);
+  color: var(--pa-color-4-text);
+}
+.pa-btn--color-5 {
+  background-color: var(--pa-color-5);
+  border-color: var(--pa-color-5);
+  color: var(--pa-color-5-text);
+}
+.pa-btn--color-5:hover {
+  filter: brightness(0.9);
+}
+.pa-btn--outline-color-5 {
+  background-color: transparent;
+  border-color: var(--pa-color-5);
+  color: var(--pa-color-5);
+}
+.pa-btn--outline-color-5:hover {
+  background-color: var(--pa-color-5);
+  color: var(--pa-color-5-text);
+}
+.pa-btn--color-6 {
+  background-color: var(--pa-color-6);
+  border-color: var(--pa-color-6);
+  color: var(--pa-color-6-text);
+}
+.pa-btn--color-6:hover {
+  filter: brightness(0.9);
+}
+.pa-btn--outline-color-6 {
+  background-color: transparent;
+  border-color: var(--pa-color-6);
+  color: var(--pa-color-6);
+}
+.pa-btn--outline-color-6:hover {
+  background-color: var(--pa-color-6);
+  color: var(--pa-color-6-text);
+}
+.pa-btn--color-7 {
+  background-color: var(--pa-color-7);
+  border-color: var(--pa-color-7);
+  color: var(--pa-color-7-text);
+}
+.pa-btn--color-7:hover {
+  filter: brightness(0.9);
+}
+.pa-btn--outline-color-7 {
+  background-color: transparent;
+  border-color: var(--pa-color-7);
+  color: var(--pa-color-7);
+}
+.pa-btn--outline-color-7:hover {
+  background-color: var(--pa-color-7);
+  color: var(--pa-color-7-text);
+}
+.pa-btn--color-8 {
+  background-color: var(--pa-color-8);
+  border-color: var(--pa-color-8);
+  color: var(--pa-color-8-text);
+}
+.pa-btn--color-8:hover {
+  filter: brightness(0.9);
+}
+.pa-btn--outline-color-8 {
+  background-color: transparent;
+  border-color: var(--pa-color-8);
+  color: var(--pa-color-8);
+}
+.pa-btn--outline-color-8:hover {
+  background-color: var(--pa-color-8);
+  color: var(--pa-color-8-text);
+}
+.pa-btn--color-9 {
+  background-color: var(--pa-color-9);
+  border-color: var(--pa-color-9);
+  color: var(--pa-color-9-text);
+}
+.pa-btn--color-9:hover {
+  filter: brightness(0.9);
+}
+.pa-btn--outline-color-9 {
+  background-color: transparent;
+  border-color: var(--pa-color-9);
+  color: var(--pa-color-9);
+}
+.pa-btn--outline-color-9:hover {
+  background-color: var(--pa-color-9);
+  color: var(--pa-color-9-text);
+}
 .pa-btn:disabled {
   opacity: 0.65;
   cursor: not-allowed;
@@ -8671,6 +8820,96 @@ a.pa-card p {
   border-color: var(--pa-info-bg);
   background-color: transparent;
 }
+.pa-alert--color-1 {
+  color: var(--pa-color-1-text);
+  background-color: var(--pa-color-1);
+  border-color: var(--pa-color-1);
+}
+.pa-alert--outline-color-1 {
+  color: var(--pa-color-1);
+  border-color: var(--pa-color-1);
+  background-color: transparent;
+}
+.pa-alert--color-2 {
+  color: var(--pa-color-2-text);
+  background-color: var(--pa-color-2);
+  border-color: var(--pa-color-2);
+}
+.pa-alert--outline-color-2 {
+  color: var(--pa-color-2);
+  border-color: var(--pa-color-2);
+  background-color: transparent;
+}
+.pa-alert--color-3 {
+  color: var(--pa-color-3-text);
+  background-color: var(--pa-color-3);
+  border-color: var(--pa-color-3);
+}
+.pa-alert--outline-color-3 {
+  color: var(--pa-color-3);
+  border-color: var(--pa-color-3);
+  background-color: transparent;
+}
+.pa-alert--color-4 {
+  color: var(--pa-color-4-text);
+  background-color: var(--pa-color-4);
+  border-color: var(--pa-color-4);
+}
+.pa-alert--outline-color-4 {
+  color: var(--pa-color-4);
+  border-color: var(--pa-color-4);
+  background-color: transparent;
+}
+.pa-alert--color-5 {
+  color: var(--pa-color-5-text);
+  background-color: var(--pa-color-5);
+  border-color: var(--pa-color-5);
+}
+.pa-alert--outline-color-5 {
+  color: var(--pa-color-5);
+  border-color: var(--pa-color-5);
+  background-color: transparent;
+}
+.pa-alert--color-6 {
+  color: var(--pa-color-6-text);
+  background-color: var(--pa-color-6);
+  border-color: var(--pa-color-6);
+}
+.pa-alert--outline-color-6 {
+  color: var(--pa-color-6);
+  border-color: var(--pa-color-6);
+  background-color: transparent;
+}
+.pa-alert--color-7 {
+  color: var(--pa-color-7-text);
+  background-color: var(--pa-color-7);
+  border-color: var(--pa-color-7);
+}
+.pa-alert--outline-color-7 {
+  color: var(--pa-color-7);
+  border-color: var(--pa-color-7);
+  background-color: transparent;
+}
+.pa-alert--color-8 {
+  color: var(--pa-color-8-text);
+  background-color: var(--pa-color-8);
+  border-color: var(--pa-color-8);
+}
+.pa-alert--outline-color-8 {
+  color: var(--pa-color-8);
+  border-color: var(--pa-color-8);
+  background-color: transparent;
+}
+.pa-alert--color-9 {
+  color: var(--pa-color-9-text);
+  background-color: var(--pa-color-9);
+  border-color: var(--pa-color-9);
+}
+.pa-alert--outline-color-9 {
+  color: var(--pa-color-9);
+  border-color: var(--pa-color-9);
+  background-color: transparent;
+}
 .pa-alert--sm {
   padding: 1.2rem 1rem;
   font-size: 1.4rem;
@@ -8796,6 +9035,42 @@ a.pa-card p {
   border-inline-start-color: var(--pa-info-bg);
   background-color: var(--pa-info-bg-subtle);
 }
+.pa-callout--color-1 {
+  border-inline-start-color: var(--pa-color-1);
+  background-color: color-mix(in srgb, var(--pa-color-1) 10%, transparent);
+}
+.pa-callout--color-2 {
+  border-inline-start-color: var(--pa-color-2);
+  background-color: color-mix(in srgb, var(--pa-color-2) 10%, transparent);
+}
+.pa-callout--color-3 {
+  border-inline-start-color: var(--pa-color-3);
+  background-color: color-mix(in srgb, var(--pa-color-3) 10%, transparent);
+}
+.pa-callout--color-4 {
+  border-inline-start-color: var(--pa-color-4);
+  background-color: color-mix(in srgb, var(--pa-color-4) 10%, transparent);
+}
+.pa-callout--color-5 {
+  border-inline-start-color: var(--pa-color-5);
+  background-color: color-mix(in srgb, var(--pa-color-5) 10%, transparent);
+}
+.pa-callout--color-6 {
+  border-inline-start-color: var(--pa-color-6);
+  background-color: color-mix(in srgb, var(--pa-color-6) 10%, transparent);
+}
+.pa-callout--color-7 {
+  border-inline-start-color: var(--pa-color-7);
+  background-color: color-mix(in srgb, var(--pa-color-7) 10%, transparent);
+}
+.pa-callout--color-8 {
+  border-inline-start-color: var(--pa-color-8);
+  background-color: color-mix(in srgb, var(--pa-color-8) 10%, transparent);
+}
+.pa-callout--color-9 {
+  border-inline-start-color: var(--pa-color-9);
+  background-color: color-mix(in srgb, var(--pa-color-9) 10%, transparent);
+}
 .pa-callout--sm {
   padding: 0.8rem 1.2rem;
   font-size: 1.2rem;
@@ -12523,6 +12798,15 @@ code {
   line-height: 1.5;
 }
 
+.pa-toast__actions {
+  margin-top: 1.6rem;
+  padding-top: 1.6rem;
+  border-top: 1px solid var(--pa-border-color);
+  display: flex;
+  gap: 0.8rem;
+  flex-wrap: wrap;
+}
+
 .pa-toast__close {
   flex-shrink: 0;
   background: none;
@@ -12553,9 +12837,9 @@ code {
   position: absolute;
   bottom: 0;
   inset-inline-start: 0;
-  height: 3px;
+  height: 5px;
   background-color: currentColor;
-  opacity: 0.3;
+  opacity: 0.6;
   transition: width linear;
 }
 
@@ -12614,6 +12898,389 @@ code {
   color: var(--pa-btn-info-bg);
 }
 
+.pa-toast--color-1 {
+  border-color: var(--pa-color-1);
+}
+.pa-toast--color-1 .pa-toast__icon {
+  background-color: color-mix(in srgb, var(--pa-color-1) 15%, transparent);
+  color: var(--pa-color-1);
+}
+.pa-toast--color-1 .pa-toast__progress {
+  color: var(--pa-color-1);
+}
+
+.pa-toast--color-2 {
+  border-color: var(--pa-color-2);
+}
+.pa-toast--color-2 .pa-toast__icon {
+  background-color: color-mix(in srgb, var(--pa-color-2) 15%, transparent);
+  color: var(--pa-color-2);
+}
+.pa-toast--color-2 .pa-toast__progress {
+  color: var(--pa-color-2);
+}
+
+.pa-toast--color-3 {
+  border-color: var(--pa-color-3);
+}
+.pa-toast--color-3 .pa-toast__icon {
+  background-color: color-mix(in srgb, var(--pa-color-3) 15%, transparent);
+  color: var(--pa-color-3);
+}
+.pa-toast--color-3 .pa-toast__progress {
+  color: var(--pa-color-3);
+}
+
+.pa-toast--color-4 {
+  border-color: var(--pa-color-4);
+}
+.pa-toast--color-4 .pa-toast__icon {
+  background-color: color-mix(in srgb, var(--pa-color-4) 15%, transparent);
+  color: var(--pa-color-4);
+}
+.pa-toast--color-4 .pa-toast__progress {
+  color: var(--pa-color-4);
+}
+
+.pa-toast--color-5 {
+  border-color: var(--pa-color-5);
+}
+.pa-toast--color-5 .pa-toast__icon {
+  background-color: color-mix(in srgb, var(--pa-color-5) 15%, transparent);
+  color: var(--pa-color-5);
+}
+.pa-toast--color-5 .pa-toast__progress {
+  color: var(--pa-color-5);
+}
+
+.pa-toast--color-6 {
+  border-color: var(--pa-color-6);
+}
+.pa-toast--color-6 .pa-toast__icon {
+  background-color: color-mix(in srgb, var(--pa-color-6) 15%, transparent);
+  color: var(--pa-color-6);
+}
+.pa-toast--color-6 .pa-toast__progress {
+  color: var(--pa-color-6);
+}
+
+.pa-toast--color-7 {
+  border-color: var(--pa-color-7);
+}
+.pa-toast--color-7 .pa-toast__icon {
+  background-color: color-mix(in srgb, var(--pa-color-7) 15%, transparent);
+  color: var(--pa-color-7);
+}
+.pa-toast--color-7 .pa-toast__progress {
+  color: var(--pa-color-7);
+}
+
+.pa-toast--color-8 {
+  border-color: var(--pa-color-8);
+}
+.pa-toast--color-8 .pa-toast__icon {
+  background-color: color-mix(in srgb, var(--pa-color-8) 15%, transparent);
+  color: var(--pa-color-8);
+}
+.pa-toast--color-8 .pa-toast__progress {
+  color: var(--pa-color-8);
+}
+
+.pa-toast--color-9 {
+  border-color: var(--pa-color-9);
+}
+.pa-toast--color-9 .pa-toast__icon {
+  background-color: color-mix(in srgb, var(--pa-color-9) 15%, transparent);
+  color: var(--pa-color-9);
+}
+.pa-toast--color-9 .pa-toast__progress {
+  color: var(--pa-color-9);
+}
+
+[class*=pa-toast--filled] .pa-toast__actions {
+  border-top-color: rgba(255, 255, 255, 0.25);
+}
+
+.pa-toast--filled-primary {
+  background-color: var(--pa-btn-primary-bg);
+  border-color: var(--pa-btn-primary-bg);
+  color: var(--pa-btn-primary-text);
+}
+.pa-toast--filled-primary .pa-toast__title,
+.pa-toast--filled-primary .pa-toast__message {
+  color: inherit;
+}
+.pa-toast--filled-primary .pa-toast__icon {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: inherit;
+}
+.pa-toast--filled-primary .pa-toast__close {
+  color: inherit;
+}
+.pa-toast--filled-primary .pa-toast__progress {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.pa-toast--filled-success {
+  background-color: var(--pa-btn-success-bg);
+  border-color: var(--pa-btn-success-bg);
+  color: var(--pa-btn-success-text);
+}
+.pa-toast--filled-success .pa-toast__title,
+.pa-toast--filled-success .pa-toast__message {
+  color: inherit;
+}
+.pa-toast--filled-success .pa-toast__icon {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: inherit;
+}
+.pa-toast--filled-success .pa-toast__close {
+  color: inherit;
+}
+.pa-toast--filled-success .pa-toast__progress {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.pa-toast--filled-danger {
+  background-color: var(--pa-btn-danger-bg);
+  border-color: var(--pa-btn-danger-bg);
+  color: var(--pa-btn-danger-text);
+}
+.pa-toast--filled-danger .pa-toast__title,
+.pa-toast--filled-danger .pa-toast__message {
+  color: inherit;
+}
+.pa-toast--filled-danger .pa-toast__icon {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: inherit;
+}
+.pa-toast--filled-danger .pa-toast__close {
+  color: inherit;
+}
+.pa-toast--filled-danger .pa-toast__progress {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.pa-toast--filled-warning {
+  background-color: var(--pa-btn-warning-bg);
+  border-color: var(--pa-btn-warning-bg);
+  color: var(--pa-btn-warning-text);
+}
+.pa-toast--filled-warning .pa-toast__title,
+.pa-toast--filled-warning .pa-toast__message {
+  color: inherit;
+}
+.pa-toast--filled-warning .pa-toast__icon {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: inherit;
+}
+.pa-toast--filled-warning .pa-toast__close {
+  color: inherit;
+}
+.pa-toast--filled-warning .pa-toast__progress {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.pa-toast--filled-info {
+  background-color: var(--pa-btn-info-bg);
+  border-color: var(--pa-btn-info-bg);
+  color: var(--pa-btn-info-text);
+}
+.pa-toast--filled-info .pa-toast__title,
+.pa-toast--filled-info .pa-toast__message {
+  color: inherit;
+}
+.pa-toast--filled-info .pa-toast__icon {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: inherit;
+}
+.pa-toast--filled-info .pa-toast__close {
+  color: inherit;
+}
+.pa-toast--filled-info .pa-toast__progress {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.pa-toast--filled-color-1 {
+  background-color: var(--pa-color-1);
+  border-color: var(--pa-color-1);
+  color: var(--pa-color-1-text);
+}
+.pa-toast--filled-color-1 .pa-toast__title,
+.pa-toast--filled-color-1 .pa-toast__message {
+  color: inherit;
+}
+.pa-toast--filled-color-1 .pa-toast__icon {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: inherit;
+}
+.pa-toast--filled-color-1 .pa-toast__close {
+  color: inherit;
+}
+.pa-toast--filled-color-1 .pa-toast__progress {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.pa-toast--filled-color-2 {
+  background-color: var(--pa-color-2);
+  border-color: var(--pa-color-2);
+  color: var(--pa-color-2-text);
+}
+.pa-toast--filled-color-2 .pa-toast__title,
+.pa-toast--filled-color-2 .pa-toast__message {
+  color: inherit;
+}
+.pa-toast--filled-color-2 .pa-toast__icon {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: inherit;
+}
+.pa-toast--filled-color-2 .pa-toast__close {
+  color: inherit;
+}
+.pa-toast--filled-color-2 .pa-toast__progress {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.pa-toast--filled-color-3 {
+  background-color: var(--pa-color-3);
+  border-color: var(--pa-color-3);
+  color: var(--pa-color-3-text);
+}
+.pa-toast--filled-color-3 .pa-toast__title,
+.pa-toast--filled-color-3 .pa-toast__message {
+  color: inherit;
+}
+.pa-toast--filled-color-3 .pa-toast__icon {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: inherit;
+}
+.pa-toast--filled-color-3 .pa-toast__close {
+  color: inherit;
+}
+.pa-toast--filled-color-3 .pa-toast__progress {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.pa-toast--filled-color-4 {
+  background-color: var(--pa-color-4);
+  border-color: var(--pa-color-4);
+  color: var(--pa-color-4-text);
+}
+.pa-toast--filled-color-4 .pa-toast__title,
+.pa-toast--filled-color-4 .pa-toast__message {
+  color: inherit;
+}
+.pa-toast--filled-color-4 .pa-toast__icon {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: inherit;
+}
+.pa-toast--filled-color-4 .pa-toast__close {
+  color: inherit;
+}
+.pa-toast--filled-color-4 .pa-toast__progress {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.pa-toast--filled-color-5 {
+  background-color: var(--pa-color-5);
+  border-color: var(--pa-color-5);
+  color: var(--pa-color-5-text);
+}
+.pa-toast--filled-color-5 .pa-toast__title,
+.pa-toast--filled-color-5 .pa-toast__message {
+  color: inherit;
+}
+.pa-toast--filled-color-5 .pa-toast__icon {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: inherit;
+}
+.pa-toast--filled-color-5 .pa-toast__close {
+  color: inherit;
+}
+.pa-toast--filled-color-5 .pa-toast__progress {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.pa-toast--filled-color-6 {
+  background-color: var(--pa-color-6);
+  border-color: var(--pa-color-6);
+  color: var(--pa-color-6-text);
+}
+.pa-toast--filled-color-6 .pa-toast__title,
+.pa-toast--filled-color-6 .pa-toast__message {
+  color: inherit;
+}
+.pa-toast--filled-color-6 .pa-toast__icon {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: inherit;
+}
+.pa-toast--filled-color-6 .pa-toast__close {
+  color: inherit;
+}
+.pa-toast--filled-color-6 .pa-toast__progress {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.pa-toast--filled-color-7 {
+  background-color: var(--pa-color-7);
+  border-color: var(--pa-color-7);
+  color: var(--pa-color-7-text);
+}
+.pa-toast--filled-color-7 .pa-toast__title,
+.pa-toast--filled-color-7 .pa-toast__message {
+  color: inherit;
+}
+.pa-toast--filled-color-7 .pa-toast__icon {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: inherit;
+}
+.pa-toast--filled-color-7 .pa-toast__close {
+  color: inherit;
+}
+.pa-toast--filled-color-7 .pa-toast__progress {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.pa-toast--filled-color-8 {
+  background-color: var(--pa-color-8);
+  border-color: var(--pa-color-8);
+  color: var(--pa-color-8-text);
+}
+.pa-toast--filled-color-8 .pa-toast__title,
+.pa-toast--filled-color-8 .pa-toast__message {
+  color: inherit;
+}
+.pa-toast--filled-color-8 .pa-toast__icon {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: inherit;
+}
+.pa-toast--filled-color-8 .pa-toast__close {
+  color: inherit;
+}
+.pa-toast--filled-color-8 .pa-toast__progress {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.pa-toast--filled-color-9 {
+  background-color: var(--pa-color-9);
+  border-color: var(--pa-color-9);
+  color: var(--pa-color-9-text);
+}
+.pa-toast--filled-color-9 .pa-toast__title,
+.pa-toast--filled-color-9 .pa-toast__message {
+  color: inherit;
+}
+.pa-toast--filled-color-9 .pa-toast__icon {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: inherit;
+}
+.pa-toast--filled-color-9 .pa-toast__close {
+  color: inherit;
+}
+.pa-toast--filled-color-9 .pa-toast__progress {
+  color: rgba(255, 255, 255, 0.5);
+}
+
 @media (max-width: 768px) {
   .pa-toast-container {
     inset-inline: 1.2rem !important;

package/package.json

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

package/snippets/alerts.html

@@ -158,6 +158,21 @@
 </div>
 
 
+<!-- THEME COLOR ALERTS (color-1 through color-9) -->
+
+<!-- Theme Color 1 Alert (filled) -->
+<div class="pa-alert pa-alert--color-1">
+  <strong>Color 1!</strong> Theme color slot 1 alert.
+</div>
+
+<!-- Theme Color 1 Alert (outline) -->
+<div class="pa-alert pa-alert--outline-color-1">
+  <strong>Color 1 Outline!</strong> Theme color slot 1 outline alert.
+</div>
+
+<!-- Pattern: pa-alert--color-{1-9} and pa-alert--outline-color-{1-9} -->
+
+
 <!-- ALERT SIZES -->
 
 <!-- Small Alert -->
@@ -235,6 +250,10 @@ OUTLINE VARIANTS (border only):
 - .pa-alert--outline-warning: Orange outline
 - .pa-alert--outline-info: Cyan outline
 
+THEME COLOR VARIANTS (1-9):
+- .pa-alert--color-{1-9}: Filled theme color slot
+- .pa-alert--outline-color-{1-9}: Outline theme color slot
+
 SIZES:
 - .pa-alert--sm: Small alert (reduced padding and font)
 - (default): Standard size

package/snippets/cards.html

@@ -176,7 +176,7 @@
       <span class="pa-card__title-icon">📊</span>
       <h3 class="pa-card__title-text">Analytics Dashboard</h3>
     </div>
-    <div class="pa-card__tools">
+    <div class="pa-card__actions">
       <button class="pa-btn pa-btn--sm pa-btn--secondary">Refresh</button>
     </div>
   </div>
@@ -366,8 +366,7 @@ CARD ELEMENTS:
 - .pa-card__title: Title container
 - .pa-card__title-icon: Icon in title
 - .pa-card__title-text: Title text
-- .pa-card__tools: Tools/actions container in header
-- .pa-card__actions: Actions container in footer
+- .pa-card__actions: Actions container (used in header and footer)
 
 CARD TABS:
 - .pa-card__tabs: Tab container in header

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

@@ -106,6 +106,21 @@
     background-color: transparent;
   }
 
+  // Theme color slot variants (color-1 through color-9)
+  @for $i from 1 through 9 {
+    &--color-#{$i} {
+      color: var(--pa-color-#{$i}-text);
+      background-color: var(--pa-color-#{$i});
+      border-color: var(--pa-color-#{$i});
+    }
+
+    &--outline-color-#{$i} {
+      color: var(--pa-color-#{$i});
+      border-color: var(--pa-color-#{$i});
+      background-color: transparent;
+    }
+  }
+
   // Alert sizes (size modifiers only change font-size, padding controlled by theme)
   &--sm {
     padding: $alert-padding-v $alert-padding-h;

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

@@ -204,6 +204,30 @@
     }
   }
 
+  // Theme color slot variants (color-1 through color-9)
+  @for $i from 1 through 9 {
+    &--color-#{$i} {
+      background-color: var(--pa-color-#{$i});
+      border-color: var(--pa-color-#{$i});
+      color: var(--pa-color-#{$i}-text);
+
+      &:hover {
+        filter: brightness($btn-hover-brightness);
+      }
+    }
+
+    &--outline-color-#{$i} {
+      background-color: transparent;
+      border-color: var(--pa-color-#{$i});
+      color: var(--pa-color-#{$i});
+
+      &:hover {
+        background-color: var(--pa-color-#{$i});
+        color: var(--pa-color-#{$i}-text);
+      }
+    }
+  }
+
   // Button states
   &:disabled {
     opacity: $btn-disabled-opacity;

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

@@ -54,6 +54,14 @@
     background-color: var(--pa-info-bg-subtle);
   }
 
+  // Theme color slot variants (color-1 through color-9)
+  @for $i from 1 through 9 {
+    &--color-#{$i} {
+      border-inline-start-color: var(--pa-color-#{$i});
+      background-color: color-mix(in srgb, var(--pa-color-#{$i}) 10%, transparent);
+    }
+  }
+
   // Callout sizes
   &--sm {
     padding: $spacing-sm $spacing-md;

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

@@ -228,15 +228,10 @@
     align-items: center;
   }
 
-  &__tools {
-    display: flex;
-    gap: $spacing-sm;
-    align-items: center;
-  }
-
   &__actions {
     display: flex;
     gap: $spacing-sm;
+    align-items: center;
   }
 
   &__meta {

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

@@ -179,6 +179,16 @@
   line-height: $line-height-base;
 }
 
+// Toast actions (buttons under a separator)
+.pa-toast__actions {
+  margin-top: $spacing-base;
+  padding-top: $spacing-base;
+  border-top: $border-width-base solid var(--pa-border-color);
+  display: flex;
+  gap: $spacing-sm;
+  flex-wrap: wrap;
+}
+
 // Toast close button
 .pa-toast__close {
   flex-shrink: 0;
@@ -215,7 +225,7 @@
   inset-inline-start: 0; // RTL: flips to right
   height: $toast-progress-height;
   background-color: currentColor;
-  opacity: 0.3;
+  opacity: 0.6;
   transition: width linear;
 }
 
@@ -291,6 +301,104 @@
   }
 }
 
+// Theme color slot variants (color-1 through color-9)
+@for $i from 1 through 9 {
+  .pa-toast--color-#{$i} {
+    border-color: var(--pa-color-#{$i});
+
+    .pa-toast__icon {
+      background-color: color-mix(in srgb, var(--pa-color-#{$i}) 15%, transparent);
+      color: var(--pa-color-#{$i});
+    }
+
+    .pa-toast__progress {
+      color: var(--pa-color-#{$i});
+    }
+  }
+}
+
+// ===== FILLED TOAST VARIANTS =====
+
+// Filled toast actions: separator color + reset button colors from toast inheritance
+[class*="pa-toast--filled"] .pa-toast__actions {
+  border-top-color: rgba(255, 255, 255, 0.25);
+}
+
+.pa-toast--filled-primary {
+  background-color: var(--pa-btn-primary-bg);
+  border-color: var(--pa-btn-primary-bg);
+  color: var(--pa-btn-primary-text);
+
+  .pa-toast__title,
+  .pa-toast__message { color: inherit; }
+  .pa-toast__icon { background-color: rgba(255, 255, 255, 0.2); color: inherit; }
+  .pa-toast__close { color: inherit; }
+  .pa-toast__progress { color: rgba(255, 255, 255, 0.5); }
+}
+
+.pa-toast--filled-success {
+  background-color: var(--pa-btn-success-bg);
+  border-color: var(--pa-btn-success-bg);
+  color: var(--pa-btn-success-text);
+
+  .pa-toast__title,
+  .pa-toast__message { color: inherit; }
+  .pa-toast__icon { background-color: rgba(255, 255, 255, 0.2); color: inherit; }
+  .pa-toast__close { color: inherit; }
+  .pa-toast__progress { color: rgba(255, 255, 255, 0.5); }
+}
+
+.pa-toast--filled-danger {
+  background-color: var(--pa-btn-danger-bg);
+  border-color: var(--pa-btn-danger-bg);
+  color: var(--pa-btn-danger-text);
+
+  .pa-toast__title,
+  .pa-toast__message { color: inherit; }
+  .pa-toast__icon { background-color: rgba(255, 255, 255, 0.2); color: inherit; }
+  .pa-toast__close { color: inherit; }
+  .pa-toast__progress { color: rgba(255, 255, 255, 0.5); }
+}
+
+.pa-toast--filled-warning {
+  background-color: var(--pa-btn-warning-bg);
+  border-color: var(--pa-btn-warning-bg);
+  color: var(--pa-btn-warning-text);
+
+  .pa-toast__title,
+  .pa-toast__message { color: inherit; }
+  .pa-toast__icon { background-color: rgba(255, 255, 255, 0.2); color: inherit; }
+  .pa-toast__close { color: inherit; }
+  .pa-toast__progress { color: rgba(255, 255, 255, 0.5); }
+}
+
+.pa-toast--filled-info {
+  background-color: var(--pa-btn-info-bg);
+  border-color: var(--pa-btn-info-bg);
+  color: var(--pa-btn-info-text);
+
+  .pa-toast__title,
+  .pa-toast__message { color: inherit; }
+  .pa-toast__icon { background-color: rgba(255, 255, 255, 0.2); color: inherit; }
+  .pa-toast__close { color: inherit; }
+  .pa-toast__progress { color: rgba(255, 255, 255, 0.5); }
+}
+
+// Filled theme color slot variants (color-1 through color-9)
+@for $i from 1 through 9 {
+  .pa-toast--filled-color-#{$i} {
+    background-color: var(--pa-color-#{$i});
+    border-color: var(--pa-color-#{$i});
+    color: var(--pa-color-#{$i}-text);
+
+    .pa-toast__title,
+    .pa-toast__message { color: inherit; }
+    .pa-toast__icon { background-color: rgba(255, 255, 255, 0.2); color: inherit; }
+    .pa-toast__close { color: inherit; }
+    .pa-toast__progress { color: rgba(255, 255, 255, 0.5); }
+  }
+}
+
 // ===== RESPONSIVE =====
 
 @media (max-width: $mobile-breakpoint) {

package/src/scss/variables/_components.scss

@@ -397,7 +397,7 @@ $toast-padding-v: $spacing-md !default;
 $toast-padding-h: $spacing-md !default;
 $toast-icon-size: 3.2rem !default;           // 32px (was 2rem)
 $toast-close-size: 2.4rem !default;          // 24px (was 1.5rem)
-$toast-progress-height: 3px !default;
+$toast-progress-height: 5px !default;
 
 // ============================================================================
 // TOOLTIP SYSTEM