npm - @keenmate/pure-admin-core - Versions diffs - 2.1.1 → 2.2.0 - Mend

@keenmate/pure-admin-core 2.1.1 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/README.md +9 -6
package/dist/css/main.css +659 -5
package/package.json +1 -1
package/snippets/alerts.html +19 -0
package/snippets/cards.html +2 -3
package/src/scss/core-components/_alerts.scss +15 -0
package/src/scss/core-components/_buttons.scss +24 -0
package/src/scss/core-components/_callouts.scss +8 -0
package/src/scss/core-components/_cards.scss +1 -6
package/src/scss/core-components/_toasts.scss +93 -0

package/README.md CHANGED Viewed

@@ -2,14 +2,17 @@
 Lightweight, data-focused CSS/SCSS admin framework with Corporate theme as default.
+## 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
+- **Unified card actions naming** — `pa-card__tools` replaced with `pa-card__actions` across both `pa-card` and `pa-table-card`
+- **Font Tuning Tool** (`/font-test`) — Developer utility for finding the right `@font-face` descriptor values when using custom fonts
 ## What's New in 2.1.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
+- **Unified card actions naming** — `pa-card__tools` replaced with `pa-card__actions` across both `pa-card` and `pa-table-card`. Header and footer now use the same element name, disambiguated by context
+- **Font Tuning Tool** (`/font-test`) — Developer utility for finding the right `@font-face` descriptor values (`ascent-override`, `descent-override`, `size-adjust`) when using custom fonts. Loads any Google Font, generates variants for visual comparison, and outputs a copyable CSS snippet
 ## Installation

package/dist/css/main.css CHANGED Viewed

@@ -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;
@@ -12614,6 +12889,385 @@ 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);
+}
+.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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-admin-core",
-  "version": "2.1.1",
+  "version": "2.2.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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -291,6 +291,99 @@
   }
 }
+// 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 =====
+.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) {