@phcdevworks/spectre-ui 0.3.0 → 0.4.1

package/dist/utilities.css

@@ -2,28 +2,28 @@
   .sp-stack {
     display: flex;
     flex-direction: column;
-    gap: var(--sp-layout-stack-gap-md, var(--sp-space-md, 1rem));
+    gap: var(--sp-layout-stack-gap-md);
   }
 
   .sp-hstack {
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: var(--sp-layout-stack-gap-md, var(--sp-space-md, 1rem));
+    gap: var(--sp-layout-stack-gap-md);
   }
 
   .sp-container {
     width: 100%;
     margin-left: auto;
     margin-right: auto;
-    padding-left: var(--sp-layout-container-padding-inline-md, var(--sp-space-md, 1rem));
-    padding-right: var(--sp-layout-container-padding-inline-md, var(--sp-space-md, 1rem));
-    max-width: var(--sp-container-max-width, 72rem);
+    padding-left: var(--sp-layout-container-padding-inline-md);
+    padding-right: var(--sp-layout-container-padding-inline-md);
+    max-width: 72rem;
   }
 
   .sp-section {
-    padding-top: var(--sp-layout-section-padding-md, var(--sp-space-2xl, 3rem));
-    padding-bottom: var(--sp-layout-section-padding-md, var(--sp-space-2xl, 3rem));
+    padding-top: var(--sp-layout-section-padding-md);
+    padding-bottom: var(--sp-layout-section-padding-md);
   }
 
   .sp-shadow-soft {
@@ -33,4 +33,163 @@
   .sp-shadow-strong {
     box-shadow: var(--sp-shadow-lg);
   }
+
+  .sp-z-base {
+    z-index: var(--sp-z-index-base);
+  }
+
+  .sp-z-dropdown {
+    z-index: var(--sp-z-index-dropdown);
+  }
+
+  .sp-z-sticky {
+    z-index: var(--sp-z-index-sticky);
+  }
+
+  .sp-z-fixed {
+    z-index: var(--sp-z-index-fixed);
+  }
+
+  .sp-z-overlay {
+    z-index: var(--sp-z-index-overlay);
+  }
+
+  .sp-z-modal {
+    z-index: var(--sp-z-index-modal);
+  }
+
+  .sp-z-popover {
+    z-index: var(--sp-z-index-popover);
+  }
+
+  .sp-z-tooltip {
+    z-index: var(--sp-z-index-tooltip);
+  }
+
+  .sp-animate-fade-in {
+    animation: var(--sp-animation-fadein-keyframes)
+      var(--sp-animation-fadein-duration) var(--sp-animation-fadein-easing);
+  }
+
+  .sp-animate-fade-out {
+    animation: var(--sp-animation-fadeout-keyframes)
+      var(--sp-animation-fadeout-duration) var(--sp-animation-fadeout-easing);
+  }
+
+  .sp-animate-slide-up {
+    animation: var(--sp-animation-slideup-keyframes)
+      var(--sp-animation-slideup-duration) var(--sp-animation-slideup-easing);
+  }
+
+  .sp-animate-slide-down {
+    animation: var(--sp-animation-slidedown-keyframes)
+      var(--sp-animation-slidedown-duration)
+      var(--sp-animation-slidedown-easing);
+  }
+
+  .sp-animate-scale-in {
+    animation: var(--sp-animation-scalein-keyframes)
+      var(--sp-animation-scalein-duration) var(--sp-animation-scalein-easing);
+  }
+
+  .sp-animate-bounce {
+    animation: var(--sp-animation-bounce-keyframes)
+      var(--sp-animation-bounce-duration) var(--sp-animation-bounce-easing);
+  }
+
+  .sp-animate-shake {
+    animation: var(--sp-animation-shake-keyframes)
+      var(--sp-animation-shake-duration) var(--sp-animation-shake-easing);
+  }
+
+  .sp-animate-pulse {
+    animation: var(--sp-animation-pulse-keyframes)
+      var(--sp-animation-pulse-duration) var(--sp-animation-pulse-easing);
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fade-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes slide-up {
+    from {
+      opacity: 0;
+      transform: translateY(0.5rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slide-down {
+    from {
+      opacity: 0;
+      transform: translateY(-0.5rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes scale-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes bounce {
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-0.375rem);
+    }
+  }
+
+  @keyframes shake {
+    0%,
+    100% {
+      transform: translateX(0);
+    }
+    20%,
+    60% {
+      transform: translateX(-0.375rem);
+    }
+    40%,
+    80% {
+      transform: translateX(0.375rem);
+    }
+  }
+
+  @keyframes pulse {
+    0%,
+    100% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.04);
+    }
+  }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@phcdevworks/spectre-ui",
-  "version": "0.3.0",
-  "description": "Framework-agnostic UI layer for the Spectre design system. Provides base CSS, component classes, utilities, and a Tailwind preset powered by @phcdevworks/spectre-tokens.",
+  "version": "0.4.1",
+  "description": "Cross-platform UI built on Spectre Tokens. A Tailwind-powered design system that turns the tokens into consistent CSS utilities, component classes and design recipes for WordPress blocks, Astro components, 11ty templates and other modern web apps.",
   "keywords": [
     "phcdevworks",
     "spectre",
@@ -36,7 +36,7 @@
   "bugs": {
     "url": "https://github.com/phcdevworks/spectre-ui/issues"
   },
-  "homepage": "https://github.com/phcdevworks/spectre-ui#readme",
+  "homepage": "https://phcdevworks.com",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -77,7 +77,7 @@
     "tailwindcss": "^3.4.0 || ^4.0.0"
   },
   "dependencies": {
-    "@phcdevworks/spectre-tokens": "^0.2.0"
+    "@phcdevworks/spectre-tokens": "^0.2.1"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.20",