@keenmate/pure-admin-core 2.1.0 → 2.2.0

package/scripts/download-themes.js

@@ -259,6 +259,89 @@ async function main() {
     }
 
     console.log(`\nDownloaded ${downloaded} theme(s), skipped ${localThemes.length} local path(s)`);
+
+    // Check compatibility with installed core version
+    checkCoreCompatibility();
+}
+
+/**
+ * Check if downloaded themes are compatible with the installed core version
+ */
+function checkCoreCompatibility() {
+    // Find installed core version
+    const corePkgPaths = [
+        path.join(PROJECT_ROOT, 'node_modules', '@keenmate', 'pure-admin-core', 'package.json'),
+        path.join(PROJECT_ROOT, '..', 'packages', 'core', 'package.json') // workspace
+    ];
+
+    let coreVersion = null;
+    for (const p of corePkgPaths) {
+        if (fs.existsSync(p)) {
+            try {
+                const pkg = JSON.parse(fs.readFileSync(p, 'utf-8'));
+                coreVersion = pkg.version;
+                break;
+            } catch (e) {}
+        }
+    }
+
+    if (!coreVersion) return;
+
+    // Check each downloaded theme
+    const warnings = [];
+    const themeDirs = fs.readdirSync(THEMES_DIR, { withFileTypes: true })
+        .filter(d => d.isDirectory())
+        .map(d => d.name);
+
+    for (const name of themeDirs) {
+        const manifestPath = path.join(THEMES_DIR, name, 'theme.json');
+        if (!fs.existsSync(manifestPath)) continue;
+
+        try {
+            const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
+            const requiredCore = manifest.dependencies && manifest.dependencies.core;
+            if (!requiredCore) continue;
+
+            if (!satisfiesSemver(coreVersion, requiredCore)) {
+                warnings.push(`  ${name} (v${manifest.version}) requires core ${requiredCore}, installed: ${coreVersion}`);
+            }
+        } catch (e) {}
+    }
+
+    if (warnings.length > 0) {
+        console.log('\n⚠ Compatibility warnings:');
+        warnings.forEach(w => console.log(w));
+        console.log('\nConsider updating @keenmate/pure-admin-core');
+    } else if (themeDirs.length > 0) {
+        console.log(`\nAll themes compatible with core v${coreVersion}`);
+    }
+}
+
+/**
+ * Simple semver satisfaction check for ^major.minor.patch ranges
+ */
+function satisfiesSemver(version, range) {
+    // Parse version
+    const v = version.replace(/^v/, '').split('.').map(Number);
+
+    // Parse range (supports ^x.y.z and x.y.z)
+    const caret = range.startsWith('^');
+    const r = range.replace(/^[\^~]/, '').split('.').map(Number);
+
+    if (caret) {
+        // ^2.0.0 means >=2.0.0 <3.0.0
+        // ^0.2.0 means >=0.2.0 <0.3.0
+        if (r[0] > 0) {
+            return v[0] === r[0] && (v[1] > r[1] || (v[1] === r[1] && v[2] >= r[2]));
+        } else if (r[1] > 0) {
+            return v[0] === 0 && v[1] === r[1] && v[2] >= r[2];
+        } else {
+            return v[0] === 0 && v[1] === 0 && v[2] === r[2];
+        }
+    }
+
+    // Exact match
+    return v[0] === r[0] && v[1] === r[1] && v[2] === r[2];
 }
 
 console.log('Downloading themes...\n');

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/_fonts.scss

@@ -1,37 +1,37 @@
-/* Pure Admin Visual Framework - Default Font Definitions */
-
-// Default framework fonts - themes can override these
-// Note: Font size classes for <html> are in _utilities.scss (use px values for correct rem scaling)
-
-// Font family classes with system defaults
-.font-family-system {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-
-  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
-    font-family: inherit;
-  }
-}
-
-.font-family-sans {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-
-  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
-    font-family: inherit;
-  }
-}
-
-.font-family-serif {
-  font-family: Georgia, "Times New Roman", Times, serif;
-
-  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
-    font-family: inherit;
-  }
-}
-
-.font-family-mono {
-  font-family: "Courier New", Courier, monospace;
-
-  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
-    font-family: inherit;
-  }
+/* Pure Admin Visual Framework - Default Font Definitions */
+
+// Default framework fonts - themes can override these
+// Note: Font size classes for <html> are in _utilities.scss (use px values for correct rem scaling)
+
+// Font family classes with system defaults
+.font-family-system {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+
+  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
+    font-family: inherit;
+  }
+}
+
+.font-family-sans {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
+    font-family: inherit;
+  }
+}
+
+.font-family-serif {
+  font-family: Georgia, "Times New Roman", Times, serif;
+
+  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
+    font-family: inherit;
+  }
+}
+
+.font-family-mono {
+  font-family: "Courier New", Courier, monospace;
+
+  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
+    font-family: inherit;
+  }
 }

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

@@ -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) {