@phcdevworks/spectre-ui 1.2.0 → 1.3.0

package/dist/index.css

@@ -7,15 +7,18 @@
   --sp-surface-card: #ffffff;
   --sp-surface-input: #ffffff;
   --sp-surface-overlay: rgba(20, 27, 36, 0.6);
+  --sp-surface-alternate: #eef1f6;
   --sp-surface-hero: linear-gradient(135deg, #5b6ee1 0%, #6f3fd7 100%);
   --sp-text-on-page-default: #141b24;
   --sp-text-on-page-muted: #4b576a;
   --sp-text-on-page-subtle: #657287;
   --sp-text-on-page-meta: #657287;
+  --sp-text-on-page-brand: #1f57db;
   --sp-text-on-surface-default: #141b24;
   --sp-text-on-surface-muted: #4b576a;
   --sp-text-on-surface-subtle: #657287;
   --sp-text-on-surface-meta: #657287;
+  --sp-text-on-surface-brand: #1f57db;
   --sp-component-card-text: #141b24;
   --sp-component-card-text-muted: #4b576a;
   --sp-component-input-text: #141b24;
@@ -114,20 +117,8 @@
   --sp-color-focus-primary: #336df4;
   --sp-color-focus-error: #ef4444;
   --sp-color-focus-info: #0369a1;
-  --sp-color-white-0: #;
-  --sp-color-white-1: f;
-  --sp-color-white-2: f;
-  --sp-color-white-3: f;
-  --sp-color-white-4: f;
-  --sp-color-white-5: f;
-  --sp-color-white-6: f;
-  --sp-color-black-0: #;
-  --sp-color-black-1: 0;
-  --sp-color-black-2: 0;
-  --sp-color-black-3: 0;
-  --sp-color-black-4: 0;
-  --sp-color-black-5: 0;
-  --sp-color-black-6: 0;
+  --sp-color-white: #ffffff;
+  --sp-color-black: #000000;
   --sp-space-0: 0rem;
   --sp-space-4: 0.25rem;
   --sp-space-8: 0.5rem;
@@ -266,7 +257,7 @@
   --sp-button-primary-text: #ffffff;
   --sp-button-primary-textdisabled: #8a96ad;
   --sp-button-primary-focusring: rgba(14, 165, 233, 0.4);
-  --sp-button-primary-focusvisible: {colors.info.500} / 0.4;
+  --sp-button-primary-focusvisible: rgba(14, 165, 233, 0.4);
   --sp-button-secondary-bg: #ffffff;
   --sp-button-secondary-bghover: #f7f8fb;
   --sp-button-secondary-bgactive: #eef1f6;
@@ -276,7 +267,7 @@
   --sp-button-secondary-border: #075985;
   --sp-button-secondary-borderdisabled: #d9dfeb;
   --sp-button-secondary-focusring: rgba(14, 165, 233, 0.4);
-  --sp-button-secondary-focusvisible: {colors.info.500} / 0.4;
+  --sp-button-secondary-focusvisible: rgba(14, 165, 233, 0.4);
   --sp-button-ghost-bg: transparent;
   --sp-button-ghost-bghover: #f0f9ff;
   --sp-button-ghost-bgactive: #e0f2fe;
@@ -284,7 +275,7 @@
   --sp-button-ghost-text: #075985;
   --sp-button-ghost-textdisabled: #8a96ad;
   --sp-button-ghost-focusring: rgba(14, 165, 233, 0.4);
-  --sp-button-ghost-focusvisible: {colors.info.500} / 0.4;
+  --sp-button-ghost-focusvisible: rgba(14, 165, 233, 0.4);
   --sp-button-danger-bg: #dc2626;
   --sp-button-danger-bghover: #b91c1c;
   --sp-button-danger-bgactive: #991b1b;
@@ -314,7 +305,7 @@
   --sp-button-accent-text: #ffffff;
   --sp-button-accent-textdisabled: #8a96ad;
   --sp-button-accent-focusring: rgba(133, 79, 247, 0.4);
-  --sp-button-accent-focusvisible: {colors.accent.500} / 0.4;
+  --sp-button-accent-focusvisible: rgba(133, 79, 247, 0.4);
   --sp-form-default-bg: #ffffff;
   --sp-form-default-border: #b7c1d4;
   --sp-form-default-text: #141b24;
@@ -322,8 +313,8 @@
   --sp-form-hover-border: #0ea5e9;
   --sp-form-focus-border: #0ea5e9;
   --sp-form-focus-ring: #0ea5e9;
-  --sp-form-focusvisible-border: {colors.info.500};
-  --sp-form-focusvisible-ring: {colors.info.500};
+  --sp-form-focusvisible-border: #0ea5e9;
+  --sp-form-focusvisible-ring: #0ea5e9;
   --sp-form-valid-border: #22c55e;
   --sp-form-valid-bg: #f0fdf4;
   --sp-form-valid-text: #15803d;
@@ -363,15 +354,18 @@
   --sp-surface-card: #222b38;
   --sp-surface-input: #374253;
   --sp-surface-overlay: #222b38;
-  --sp-surface-hero: linear-gradient(135deg, #401f75 0%, #5d28b8 100%);
+  --sp-surface-alternate: #222b38;
+  --sp-surface-hero: linear-gradient(135deg, #5d28b8 0%, #401f75 100%);
   --sp-text-on-page-default: #f7f8fb;
   --sp-text-on-page-muted: #b7c1d4;
   --sp-text-on-page-subtle: #8a96ad;
   --sp-text-on-page-meta: #8a96ad;
+  --sp-text-on-page-brand: #5a92ff;
   --sp-text-on-surface-default: #eef1f6;
   --sp-text-on-surface-muted: #b7c1d4;
   --sp-text-on-surface-subtle: #8a96ad;
   --sp-text-on-surface-meta: #8a96ad;
+  --sp-text-on-surface-brand: #5a92ff;
   --sp-component-card-text: #eef1f6;
   --sp-component-card-text-muted: #b7c1d4;
   --sp-component-input-text: #eef1f6;
@@ -403,13 +397,14 @@
     box-sizing: border-box;
   }
 
-  html,
-  body {
+  html {
     margin: 0;
     padding: 0;
   }
 
   body {
+    margin: 0;
+    padding: 0;
     min-height: 100vh;
     font-family: var(--sp-font-family-sans);
     font-size: var(--sp-font-md-size);
@@ -428,13 +423,13 @@
   }
 
   input,
-  button,
   textarea,
   select {
     font: inherit;
   }
 
   button {
+    font: inherit;
     border: none;
     background: none;
     padding: 0;
@@ -462,7 +457,7 @@
 }
 @layer components {
 
-  :root {
+  :where(:root) {
     /* structural border width */
     --sp-component-border-width: var(--sp-border-width-base);
 
@@ -518,8 +513,7 @@
 
     /* card roles */
     --sp-component-card-bg: var(--sp-surface-card);
-    --sp-component-card-text: var(--sp-text-on-surface-default);
-    --sp-component-card-text-muted: var(--sp-text-on-surface-muted);
+    /* --sp-component-card-text and --sp-component-card-text-muted are now provided directly by the token package */
     --sp-component-card-border: var(--sp-color-neutral-200);
     --sp-component-card-border-base: var(--sp-component-card-ghost-border);
     --sp-component-card-shadow: var(--sp-shadow-sm);
@@ -535,8 +529,8 @@
     /* input roles */
     --sp-component-input-role-border: var(--sp-form-default-border);
     --sp-component-input-role-bg: var(--sp-form-default-bg);
-    --sp-component-input-role-text: var(--sp-form-default-text);
-    --sp-component-input-role-placeholder: var(--sp-form-default-placeholder);
+    --sp-component-input-role-text: var(--sp-component-input-text);
+    --sp-component-input-role-placeholder: var(--sp-component-input-placeholder);
     --sp-component-input-role-border-hover: var(--sp-form-hover-border);
     --sp-component-input-role-border-focus: var(--sp-form-focus-border);
     --sp-component-input-role-ring: var(--sp-form-focus-ring);
@@ -597,7 +591,7 @@
     --sp-component-iconbox-success-bg: var(--sp-color-success-50);
     --sp-component-iconbox-success-text: var(--sp-icon-box-icon-success);
     --sp-component-iconbox-warning-bg: var(--sp-color-warning-50);
-    --sp-component-iconbox-warning-text: var(--sp-icon-box-icon-warning);
+    --sp-component-iconbox-warning-text: var(--sp-color-warning-800);
     --sp-component-iconbox-danger-bg: var(--sp-color-error-50);
     --sp-component-iconbox-danger-text: var(--sp-icon-box-icon-danger);
     --sp-component-iconbox-info-bg: var(--sp-color-info-50);
@@ -632,7 +626,7 @@
   }
 
   /* dark mode overrides mapped from Spectre token mode definitions */
-  :root[data-spectre-theme="dark"] {
+  :where(:root[data-spectre-theme="dark"]) {
     --sp-component-testimonial-bg: var(--sp-color-neutral-800);
     --sp-component-testimonial-border: var(--sp-color-neutral-700);
     --sp-component-testimonial-text: var(--sp-color-neutral-200);
@@ -648,29 +642,6 @@
     --sp-component-rating-star-filled: var(--sp-color-warning-400);
     --sp-component-rating-star-empty: var(--sp-color-neutral-700);
     --sp-component-rating-text: var(--sp-color-neutral-400);
-
-    --sp-component-badge-success-bg: var(--sp-color-success-800);
-    --sp-component-badge-success-text: var(--sp-color-success-100);
-    --sp-component-badge-warning-bg: var(--sp-color-warning-800);
-    --sp-component-badge-warning-text: var(--sp-color-warning-100);
-    --sp-component-badge-danger-bg: var(--sp-color-error-800);
-    --sp-component-badge-danger-text: var(--sp-color-error-100);
-    --sp-component-badge-neutral-bg: var(--sp-color-neutral-700);
-    --sp-component-badge-neutral-text: var(--sp-color-neutral-100);
-    --sp-component-badge-info-bg: var(--sp-color-info-900);
-    --sp-component-badge-info-text: var(--sp-color-info-100);
-
-    --sp-component-badge-success-bg-hover: var(--sp-color-success-700);
-    --sp-component-badge-warning-bg-hover: var(--sp-color-warning-800);
-    --sp-component-badge-danger-bg-hover: var(--sp-color-error-700);
-    --sp-component-badge-neutral-bg-hover: var(--sp-color-neutral-600);
-    --sp-component-badge-info-bg-hover: var(--sp-color-info-700);
-
-    --sp-component-iconbox-primary-bg: var(--sp-color-brand-900);
-    --sp-component-iconbox-success-bg: var(--sp-color-success-900);
-    --sp-component-iconbox-warning-bg: var(--sp-color-warning-900);
-    --sp-component-iconbox-danger-bg: var(--sp-color-error-900);
-    --sp-component-iconbox-info-bg: var(--sp-color-info-900);
   }
 
   /* BUTTONS -------------------------------------------------------------- */
@@ -684,7 +655,7 @@
     border: var(--sp-component-border-width) solid var(--sp-component-button-border-base);
     font-family: var(--sp-font-family-sans);
     font-size: var(--sp-font-md-size);
-    line-height: 1;
+    line-height: var(--sp-font-md-line-height);
     font-weight: var(--sp-font-md-weight);
     text-decoration: none;
     appearance: none;
@@ -1002,10 +973,17 @@
   }
 
   .sp-input:hover,
-  .sp-input--hover {
+  .sp-input--hover,
+  .sp-input.is-hover {
     border-color: var(--sp-component-input-role-border-hover);
   }
 
+  .sp-input:active,
+  .sp-input--active,
+  .sp-input.is-active {
+    opacity: var(--sp-opacity-active);
+  }
+
   .sp-input:focus,
   .sp-input--focus,
   .sp-input.is-focus {
@@ -1033,6 +1011,7 @@
     background-color: var(--sp-component-input-role-bg-disabled);
     color: var(--sp-component-input-role-text-disabled);
     border-color: var(--sp-component-input-role-border-disabled);
+    box-shadow: none;
     cursor: not-allowed;
     pointer-events: none;
   }
@@ -1041,7 +1020,6 @@
     color: var(--sp-component-input-role-text-disabled);
   }
 
-  .sp-input--disabled,
   .sp-input--disabled:focus {
     box-shadow: none;
   }
@@ -1114,7 +1092,8 @@
     cursor: pointer;
     transition:
       transform var(--sp-duration-fast) var(--sp-easing-out),
-      box-shadow var(--sp-duration-fast) var(--sp-easing-out);
+      box-shadow var(--sp-duration-fast) var(--sp-easing-out),
+      opacity var(--sp-duration-fast) var(--sp-easing-out);
   }
 
   .sp-card--interactive:hover,
@@ -1128,6 +1107,13 @@
     box-shadow: var(--sp-component-card-shadow-elevated);
   }
 
+  .sp-card--interactive:active,
+  .sp-card--interactive.sp-card--active,
+  .sp-card--interactive.is-active {
+    opacity: var(--sp-opacity-active);
+    transform: translateY(0);
+  }
+
   /* BADGES --------------------------------------------------------------- */
 
   .sp-badge {
@@ -1285,7 +1271,6 @@
     background-color: var(--sp-component-iconbox-primary-bg);
     font-family: var(--sp-font-family-sans);
     font-weight: var(--sp-font-md-weight);
-    line-height: 0;
     transition:
       background-color var(--sp-duration-fast) var(--sp-easing-out),
       color var(--sp-duration-fast) var(--sp-easing-out),
@@ -1299,11 +1284,6 @@
      - force currentColor for common svg shapes
      - preserve stroke-only icons (fill="none")
   */
-  .sp-iconbox,
-  .sp-iconbox>i {
-    line-height: 0;
-  }
-
   .sp-iconbox>i {
     display: inline-flex;
     align-items: center;
@@ -1322,7 +1302,6 @@
   }
 
   /* default to inheriting via currentColor */
-  .sp-iconbox svg,
   .sp-iconbox svg path,
   .sp-iconbox svg circle,
   .sp-iconbox svg rect,
@@ -1360,6 +1339,10 @@
     font-size: var(--sp-font-lg-size);
   }
 
+  .sp-iconbox--pill {
+    border-radius: var(--sp-radius-pill);
+  }
+
   .sp-iconbox--primary {
     background-color: var(--sp-component-iconbox-primary-bg);
     color: var(--sp-component-iconbox-primary-text);
@@ -1443,6 +1426,37 @@
     pointer-events: none;
   }
 
+  .sp-testimonial--interactive {
+    cursor: pointer;
+    transition:
+      transform var(--sp-duration-fast) var(--sp-easing-out),
+      box-shadow var(--sp-duration-fast) var(--sp-easing-out),
+      opacity var(--sp-duration-fast) var(--sp-easing-out);
+  }
+
+  .sp-testimonial--interactive:hover,
+  .sp-testimonial--interactive:focus-within,
+  .sp-testimonial--interactive.sp-testimonial--hover,
+  .sp-testimonial--interactive.is-hover {
+    transform: translateY(calc(var(--sp-component-border-width) * -1));
+    box-shadow: var(--sp-shadow-lg);
+  }
+
+  .sp-testimonial--interactive:active,
+  .sp-testimonial--interactive.sp-testimonial--active,
+  .sp-testimonial--interactive.is-active {
+    opacity: var(--sp-opacity-active);
+    transform: translateY(0);
+  }
+
+  .sp-testimonial--interactive:focus-visible,
+  .sp-testimonial--interactive.sp-testimonial--focus,
+  .sp-testimonial--interactive.is-focus {
+    outline: none;
+    transform: translateY(calc(var(--sp-component-border-width) * -1));
+    box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);
+  }
+
   .sp-testimonial-quote {
     color: var(--sp-component-testimonial-text);
     font-size: var(--sp-font-lg-size);
@@ -1494,7 +1508,10 @@
     flex-direction: column;
     gap: var(--sp-space-24);
     position: relative;
-    transition: transform var(--sp-duration-fast) var(--sp-easing-out);
+    transition:
+      transform var(--sp-duration-fast) var(--sp-easing-out),
+      box-shadow var(--sp-duration-fast) var(--sp-easing-out),
+      opacity var(--sp-duration-fast) var(--sp-easing-out);
   }
 
   .sp-pricing-card--featured {
@@ -1515,6 +1532,49 @@
     pointer-events: none;
   }
 
+  .sp-pricing-card--interactive {
+    cursor: pointer;
+  }
+
+  .sp-pricing-card--interactive:hover,
+  .sp-pricing-card--interactive:focus-within,
+  .sp-pricing-card--interactive.sp-pricing-card--hover,
+  .sp-pricing-card--interactive.is-hover {
+    transform: translateY(calc(var(--sp-component-border-width) * -1));
+    box-shadow: var(--sp-shadow-lg);
+  }
+
+  .sp-pricing-card--featured.sp-pricing-card--interactive:hover,
+  .sp-pricing-card--featured.sp-pricing-card--interactive:focus-visible,
+  .sp-pricing-card--featured.sp-pricing-card--interactive:focus-within,
+  .sp-pricing-card--featured.sp-pricing-card--interactive.sp-pricing-card--hover,
+  .sp-pricing-card--featured.sp-pricing-card--interactive.is-hover,
+  .sp-pricing-card--featured.sp-pricing-card--interactive.sp-pricing-card--focus,
+  .sp-pricing-card--featured.sp-pricing-card--interactive.is-focus {
+    transform: scale(1.05) translateY(calc(var(--sp-component-border-width) * -1));
+  }
+
+  .sp-pricing-card--interactive:active,
+  .sp-pricing-card--interactive.sp-pricing-card--active,
+  .sp-pricing-card--interactive.is-active {
+    opacity: var(--sp-opacity-active);
+    transform: translateY(0);
+  }
+
+  .sp-pricing-card--featured.sp-pricing-card--interactive:active,
+  .sp-pricing-card--featured.sp-pricing-card--interactive.sp-pricing-card--active,
+  .sp-pricing-card--featured.sp-pricing-card--interactive.is-active {
+    transform: scale(1.05) translateY(0);
+  }
+
+  .sp-pricing-card--interactive:focus-visible,
+  .sp-pricing-card--interactive.sp-pricing-card--focus,
+  .sp-pricing-card--interactive.is-focus {
+    outline: none;
+    transform: translateY(calc(var(--sp-component-border-width) * -1));
+    box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);
+  }
+
   .sp-pricing-card-badge {
     position: absolute;
     top: var(--sp-space-16);
@@ -1560,6 +1620,10 @@
     align-items: center;
     gap: var(--sp-space-8);
     font-size: var(--sp-component-rating-size-md);
+    border-radius: var(--sp-radius-md);
+    transition:
+      opacity var(--sp-duration-fast) var(--sp-easing-out),
+      box-shadow var(--sp-duration-fast) var(--sp-easing-out);
   }
 
   .sp-rating--sm {
@@ -1574,9 +1638,12 @@
     font-size: var(--sp-component-rating-size-lg);
   }
 
+  .sp-rating:disabled,
+  .sp-rating[aria-disabled="true"],
   .sp-rating--disabled {
     opacity: var(--sp-opacity-disabled);
     pointer-events: none;
+    cursor: not-allowed;
   }
 
   .sp-rating--loading {
@@ -1584,6 +1651,29 @@
     pointer-events: none;
   }
 
+  .sp-rating--interactive {
+    cursor: pointer;
+  }
+
+  .sp-rating--interactive:hover,
+  .sp-rating--interactive.sp-rating--hover,
+  .sp-rating--interactive.is-hover {
+    opacity: var(--sp-opacity-hover);
+  }
+
+  .sp-rating--interactive:active,
+  .sp-rating--interactive.sp-rating--active,
+  .sp-rating--interactive.is-active {
+    opacity: var(--sp-opacity-active);
+  }
+
+  .sp-rating--interactive:focus-visible,
+  .sp-rating--interactive.sp-rating--focus,
+  .sp-rating--interactive.is-focus {
+    outline: none;
+    box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);
+  }
+
   .sp-rating-stars {
     display: flex;
     gap: var(--sp-space-4);

package/dist/index.d.cts

@@ -58,6 +58,7 @@ interface CardRecipeOptions {
     loading?: boolean;
     hovered?: boolean;
     focused?: boolean;
+    active?: boolean;
 }
 declare function getCardClasses(opts?: CardRecipeOptions): string;
 
@@ -82,6 +83,7 @@ interface InputRecipeOptions {
     pill?: boolean;
     focused?: boolean;
     hovered?: boolean;
+    active?: boolean;
 }
 declare function getInputClasses(opts?: InputRecipeOptions): string;
 
@@ -140,6 +142,7 @@ interface IconBoxRecipeOptions {
     hovered?: boolean;
     focused?: boolean;
     active?: boolean;
+    pill?: boolean;
 }
 declare function getIconBoxClasses(opts?: IconBoxRecipeOptions): string;
 
@@ -150,6 +153,10 @@ declare function getIconBoxClasses(opts?: IconBoxRecipeOptions): string;
 interface TestimonialRecipeOptions {
     disabled?: boolean;
     loading?: boolean;
+    interactive?: boolean;
+    hovered?: boolean;
+    focused?: boolean;
+    active?: boolean;
 }
 declare function getTestimonialClasses(opts?: TestimonialRecipeOptions): string;
 declare function getTestimonialQuoteClasses(): string;
@@ -166,6 +173,10 @@ interface PricingCardRecipeOptions {
     featured?: boolean;
     disabled?: boolean;
     loading?: boolean;
+    interactive?: boolean;
+    hovered?: boolean;
+    focused?: boolean;
+    active?: boolean;
 }
 declare function getPricingCardClasses(opts?: PricingCardRecipeOptions): string;
 declare function getPricingCardBadgeClasses(): string;
@@ -187,6 +198,10 @@ interface RatingRecipeOptions {
     size?: RatingSize;
     disabled?: boolean;
     loading?: boolean;
+    interactive?: boolean;
+    hovered?: boolean;
+    focused?: boolean;
+    active?: boolean;
 }
 declare function getRatingClasses(opts?: RatingRecipeOptions): string;
 declare function getRatingStarsClasses(): string;

package/dist/index.d.ts

@@ -58,6 +58,7 @@ interface CardRecipeOptions {
     loading?: boolean;
     hovered?: boolean;
     focused?: boolean;
+    active?: boolean;
 }
 declare function getCardClasses(opts?: CardRecipeOptions): string;
 
@@ -82,6 +83,7 @@ interface InputRecipeOptions {
     pill?: boolean;
     focused?: boolean;
     hovered?: boolean;
+    active?: boolean;
 }
 declare function getInputClasses(opts?: InputRecipeOptions): string;
 
@@ -140,6 +142,7 @@ interface IconBoxRecipeOptions {
     hovered?: boolean;
     focused?: boolean;
     active?: boolean;
+    pill?: boolean;
 }
 declare function getIconBoxClasses(opts?: IconBoxRecipeOptions): string;
 
@@ -150,6 +153,10 @@ declare function getIconBoxClasses(opts?: IconBoxRecipeOptions): string;
 interface TestimonialRecipeOptions {
     disabled?: boolean;
     loading?: boolean;
+    interactive?: boolean;
+    hovered?: boolean;
+    focused?: boolean;
+    active?: boolean;
 }
 declare function getTestimonialClasses(opts?: TestimonialRecipeOptions): string;
 declare function getTestimonialQuoteClasses(): string;
@@ -166,6 +173,10 @@ interface PricingCardRecipeOptions {
     featured?: boolean;
     disabled?: boolean;
     loading?: boolean;
+    interactive?: boolean;
+    hovered?: boolean;
+    focused?: boolean;
+    active?: boolean;
 }
 declare function getPricingCardClasses(opts?: PricingCardRecipeOptions): string;
 declare function getPricingCardBadgeClasses(): string;
@@ -187,6 +198,10 @@ interface RatingRecipeOptions {
     size?: RatingSize;
     disabled?: boolean;
     loading?: boolean;
+    interactive?: boolean;
+    hovered?: boolean;
+    focused?: boolean;
+    active?: boolean;
 }
 declare function getRatingClasses(opts?: RatingRecipeOptions): string;
 declare function getRatingStarsClasses(): string;