@phcdevworks/spectre-ui 2.1.0 → 2.3.0

package/dist/utilities.css

@@ -5,6 +5,10 @@
   --sp-surface-overlay: rgba(0, 0, 0, 0.6);
   --sp-surface-subtle: #eef1f6;
   --sp-surface-hero: linear-gradient(135deg, #5b6ee1 0%, #6f3fd7 100%);
+  --sp-surface-hover: #eef1f6;
+  --sp-surface-selected: #f0f9ff;
+  --sp-surface-active: #d9dfeb;
+  --sp-surface-divider: #d9dfeb;
   --sp-text-on-page-default: #141b24;
   --sp-text-on-page-muted: #4b576a;
   --sp-text-on-page-subtle: #657287;
@@ -72,6 +76,10 @@
   --sp-dropdown-item-hover: #eef1f6;
   --sp-dropdown-item-active: #f0f9ff;
   --sp-dropdown-item-text: #141b24;
+  --sp-link-default: #1f57db;
+  --sp-link-hover: #1946b4;
+  --sp-link-active: #173b8f;
+  --sp-link-visited: #5d28b8;
   --sp-color-brand-50: #eef4ff;
   --sp-color-brand-100: #d9e7ff;
   --sp-color-brand-200: #b9d2ff;
@@ -184,6 +192,8 @@
   --sp-layout-container-padding-inline-md: 1.5rem;
   --sp-layout-container-padding-inline-lg: 2rem;
   --sp-layout-container-max-width: 72rem;
+  --sp-layout-container-max-width-prose: 65ch;
+  --sp-layout-sidebar-width: 16rem;
   --sp-border-width-none: 0;
   --sp-border-width-base: 1px;
   --sp-border-width-thick: 2px;
@@ -424,6 +434,10 @@
   --sp-surface-overlay: rgba(0, 0, 0, 0.6);
   --sp-surface-subtle: #222b38;
   --sp-surface-hero: linear-gradient(135deg, #5d28b8 0%, #401f75 100%);
+  --sp-surface-hover: #374253;
+  --sp-surface-selected: #082f49;
+  --sp-surface-active: #4b576a;
+  --sp-surface-divider: #374253;
   --sp-text-on-page-default: #f7f8fb;
   --sp-text-on-page-muted: #b7c1d4;
   --sp-text-on-page-subtle: #8a96ad;
@@ -491,6 +505,10 @@
   --sp-dropdown-item-hover: #374253;
   --sp-dropdown-item-active: #082f49;
   --sp-dropdown-item-text: #eef1f6;
+  --sp-link-default: #1f57db;
+  --sp-link-hover: #1946b4;
+  --sp-link-active: #173b8f;
+  --sp-link-visited: #5d28b8;
 }
 @layer utilities {
   .sp-stack {
@@ -506,6 +524,10 @@
     gap: var(--sp-layout-stack-gap-md);
   }
 
+  .sp-stack--basis-sidebar {
+    flex: 0 0 var(--sp-layout-sidebar-width);
+  }
+
   .sp-container {
     width: 100%;
     margin-left: auto;
@@ -515,11 +537,79 @@
     max-width: var(--sp-layout-container-max-width);
   }
 
+  .sp-container--max-width-prose {
+    max-width: var(--sp-layout-container-max-width-prose);
+  }
+
   .sp-section {
     padding-top: var(--sp-layout-section-padding-md);
     padding-bottom: var(--sp-layout-section-padding-md);
   }
 
+  .sp-grid {
+    display: grid;
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+
+  .sp-grid--gap-sm {
+    gap: var(--sp-layout-stack-gap-sm);
+  }
+
+  .sp-grid--gap-md {
+    gap: var(--sp-layout-stack-gap-md);
+  }
+
+  .sp-grid--gap-lg {
+    gap: var(--sp-layout-stack-gap-lg);
+  }
+
+  .sp-grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+
+  /* min-width values match the published --sp-breakpoint-md / --sp-breakpoint-lg
+     token values; CSS does not allow var() inside @media feature queries. */
+  @media (min-width: 768px) {
+    .sp-grid-cols-2 {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+
+    .sp-grid-cols-3,
+    .sp-grid-cols-4 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .sp-grid-cols-6 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .sp-grid-cols-12 {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .sp-grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .sp-grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .sp-grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    .sp-grid-cols-6 {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+
+    .sp-grid-cols-12 {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+  }
+
   .sp-shadow-soft {
     box-shadow: var(--sp-shadow-md);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phcdevworks/spectre-ui",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "description": "@phcdevworks/spectre-ui is the Layer 2 styling contract between @phcdevworks/spectre-tokens and downstream adapters or apps.",
   "keywords": [
     "phcdevworks",
@@ -101,7 +101,7 @@
     "typescript": "^5.9 || ^6.0"
   },
   "dependencies": {
-    "@phcdevworks/spectre-tokens": "^3.0.0"
+    "@phcdevworks/spectre-tokens": "^3.1.0"
   },
   "devDependencies": {
     "@phcdevworks/spectre-manifest": "^1.0.0",