@phcdevworks/spectre-ui 0.4.1 → 1.1.0

package/dist/components.css

@@ -1,6 +1,9 @@
 @layer components {
 
   :root {
+    /* structural border width */
+    --sp-component-border-width: var(--sp-border-width-base);
+
     /* button roles */
     --sp-component-button-border-base: var(--sp-component-button-ghost-bg);
     --sp-component-button-shadow: var(--sp-shadow-sm);
@@ -36,6 +39,21 @@
     --sp-component-button-success-bg-disabled: var(--sp-button-success-bgdisabled);
     --sp-component-button-success-text: var(--sp-button-success-text);
     --sp-component-button-success-text-disabled: var(--sp-button-success-textdisabled);
+    /* FLAG: buttons.cta tokens in spectre-tokens v2.x use warning.500 (Gold),
+       which violates the Aesthetic Audit guardrails. Remaining on accent palette. */
+    --sp-component-button-cta-bg: var(--sp-color-accent-600);
+    --sp-component-button-cta-bg-hover: var(--sp-color-accent-700);
+    --sp-component-button-cta-bg-active: var(--sp-color-accent-800);
+    --sp-component-button-cta-bg-disabled: var(--sp-color-accent-200);
+    --sp-component-button-cta-text: var(--sp-color-neutral-50);
+    --sp-component-button-cta-text-disabled: var(--sp-color-neutral-400);
+    --sp-component-button-cta-shadow: 0 4px 14px 0 var(--sp-color-accent-500) / 0.39;
+    --sp-component-button-accent-bg: var(--sp-button-accent-bg);
+    --sp-component-button-accent-bg-hover: var(--sp-button-accent-bghover);
+    --sp-component-button-accent-bg-active: var(--sp-button-accent-bgactive);
+    --sp-component-button-accent-bg-disabled: var(--sp-button-accent-bgdisabled);
+    --sp-component-button-accent-text: var(--sp-button-accent-text);
+    --sp-component-button-accent-text-disabled: var(--sp-button-accent-textdisabled);
 
     /* card roles */
     --sp-component-card-bg: var(--sp-surface-card);
@@ -77,12 +95,29 @@
     --sp-component-badge-radius: var(--sp-radius-pill);
     --sp-component-badge-primary-bg: var(--sp-button-primary-bg);
     --sp-component-badge-primary-text: var(--sp-button-text-on-primary);
+    --sp-component-badge-secondary-bg: var(--sp-button-secondary-bg);
+    --sp-component-badge-secondary-text: var(--sp-button-secondary-text);
+    --sp-component-badge-secondary-border: var(--sp-button-secondary-border);
     --sp-component-badge-success-bg: var(--sp-badge-success-bg);
     --sp-component-badge-success-text: var(--sp-badge-success-text);
     --sp-component-badge-warning-bg: var(--sp-badge-warning-bg);
     --sp-component-badge-warning-text: var(--sp-badge-warning-text);
     --sp-component-badge-danger-bg: var(--sp-badge-danger-bg);
     --sp-component-badge-danger-text: var(--sp-badge-danger-text);
+    --sp-component-badge-neutral-bg: var(--sp-badge-neutral-bg);
+    --sp-component-badge-neutral-text: var(--sp-badge-neutral-text);
+    --sp-component-badge-info-bg: var(--sp-badge-info-bg);
+    --sp-component-badge-info-text: var(--sp-badge-info-text);
+
+    /* badge hover states — missing from core token exports, mapped to semantic logic */
+    --sp-component-badge-primary-bg-hover: var(--sp-button-primary-bghover);
+    --sp-component-badge-secondary-bg-hover: var(--sp-button-secondary-bghover);
+    --sp-component-badge-success-bg-hover: var(--sp-color-success-200);
+    --sp-component-badge-warning-bg-hover: var(--sp-color-warning-200);
+    --sp-component-badge-danger-bg-hover: var(--sp-color-error-200);
+    --sp-component-badge-neutral-bg-hover: var(--sp-color-neutral-200);
+    --sp-component-badge-info-bg-hover: var(--sp-color-info-200);
+
     --sp-component-badge-padding-x-sm: var(--sp-space-8);
     --sp-component-badge-padding-x-md: var(--sp-space-12);
     --sp-component-badge-padding-x-lg: var(--sp-space-16);
@@ -105,6 +140,67 @@
     --sp-component-iconbox-danger-text: var(--sp-icon-box-icon-danger);
     --sp-component-iconbox-info-bg: var(--sp-color-info-50);
     --sp-component-iconbox-info-text: var(--sp-badge-info-text);
+
+    /* testimonial roles */
+    --sp-component-testimonial-bg: var(--sp-surface-card);
+    --sp-component-testimonial-border: var(--sp-color-neutral-200);
+    --sp-component-testimonial-text: var(--sp-color-neutral-700);
+    --sp-component-testimonial-author-name: var(--sp-color-neutral-900);
+    --sp-component-testimonial-author-title: var(--sp-color-neutral-500);
+    --sp-component-testimonial-quote-mark: var(--sp-color-neutral-300);
+
+    /* pricing card roles */
+    --sp-component-pricing-card-bg: var(--sp-surface-card);
+    --sp-component-pricing-card-border: var(--sp-color-neutral-200);
+    /* FLAG: component.pricingCard.featuredBg in tokens is info.600 (Blue), which clashing
+       with the warning.500 (Gold) badge. Remaining on neutral-900 to pass Aesthetic Audit. */
+    --sp-component-pricing-card-featured-bg: var(--sp-color-neutral-900);
+    --sp-component-pricing-card-featured-text: var(--sp-color-neutral-50);
+    --sp-component-pricing-card-featured-badge-bg: var(--sp-color-warning-500);
+    --sp-component-pricing-card-featured-badge-text: var(--sp-color-neutral-900);
+    --sp-component-pricing-card-price: var(--sp-color-neutral-900);
+    --sp-component-pricing-card-featured-price: var(--sp-color-neutral-50);
+    --sp-component-pricing-card-price-description: var(--sp-color-neutral-500);
+
+    /* rating roles */
+    --sp-component-rating-star-filled: var(--sp-color-warning-500);
+    --sp-component-rating-star-empty: var(--sp-color-neutral-200);
+    --sp-component-rating-text: var(--sp-color-neutral-500);
+  }
+
+  /* dark mode overrides for complex component tokens not yet exported by spectre-tokens v2.x */
+  :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-300);
+    --sp-component-testimonial-author-name: var(--sp-color-neutral-100);
+    --sp-component-testimonial-author-title: var(--sp-color-neutral-400);
+    --sp-component-testimonial-quote-mark: var(--sp-color-neutral-600);
+
+    --sp-component-pricing-card-bg: var(--sp-color-neutral-800);
+    --sp-component-pricing-card-border: var(--sp-color-neutral-700);
+    --sp-component-pricing-card-price: var(--sp-color-neutral-100);
+    --sp-component-pricing-card-price-description: var(--sp-color-neutral-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-800);
+    --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-700);
+    --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);
   }
 
   /* BUTTONS -------------------------------------------------------------- */
@@ -115,7 +211,7 @@
     gap: var(--sp-space-4);
     padding: var(--sp-space-4) var(--sp-space-16);
     border-radius: var(--sp-radius-md);
-    border: 1px solid var(--sp-component-button-border-base);
+    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;
@@ -148,6 +244,10 @@
     width: 100%;
   }
 
+  .sp-btn--pill {
+    border-radius: var(--sp-radius-pill);
+  }
+
   .sp-btn--icon {
     padding-inline: var(--sp-space-12);
     padding-block: var(--sp-space-4);
@@ -172,16 +272,8 @@
     line-height: var(--sp-font-lg-line-height);
   }
 
-  /* Generic forced-state helpers (safe, variant rules still set actual colors) */
-  .sp-btn.sp-btn--hover,
-  .sp-btn.is-hover {
-    /* no-op here; variant sections below define the actual hover colors */
-  }
+  /* Generic forced-state helpers (actual colors defined in variant sections below) */
 
-  .sp-btn.sp-btn--active,
-  .sp-btn.is-active {
-    /* no-op here; variant sections below define the actual active colors */
-  }
 
   /* primary */
   .sp-btn--primary {
@@ -307,6 +399,56 @@
     color: var(--sp-component-button-success-text-disabled);
   }
 
+  /* cta */
+  .sp-btn--cta {
+    background-color: var(--sp-component-button-cta-bg);
+    color: var(--sp-component-button-cta-text);
+    box-shadow: var(--sp-component-button-cta-shadow);
+  }
+
+  .sp-btn--cta.sp-btn--hover,
+  .sp-btn--cta.is-hover,
+  .sp-btn--cta:hover {
+    background-color: var(--sp-component-button-cta-bg-hover);
+  }
+
+  .sp-btn--cta.sp-btn--active,
+  .sp-btn--cta.is-active,
+  .sp-btn--cta:active {
+    background-color: var(--sp-component-button-cta-bg-active);
+  }
+
+  .sp-btn--cta.sp-btn--disabled,
+  .sp-btn--cta:disabled {
+    background-color: var(--sp-component-button-cta-bg-disabled);
+    color: var(--sp-component-button-cta-text-disabled);
+    box-shadow: none;
+  }
+
+  /* accent */
+  .sp-btn--accent {
+    background-color: var(--sp-component-button-accent-bg);
+    color: var(--sp-component-button-accent-text);
+  }
+
+  .sp-btn--accent.sp-btn--hover,
+  .sp-btn--accent.is-hover,
+  .sp-btn--accent:hover {
+    background-color: var(--sp-component-button-accent-bg-hover);
+  }
+
+  .sp-btn--accent.sp-btn--active,
+  .sp-btn--accent.is-active,
+  .sp-btn--accent:active {
+    background-color: var(--sp-component-button-accent-bg-active);
+  }
+
+  .sp-btn--accent.sp-btn--disabled,
+  .sp-btn--accent:disabled {
+    background-color: var(--sp-component-button-accent-bg-disabled);
+    color: var(--sp-component-button-accent-text-disabled);
+  }
+
   /* INPUTS --------------------------------------------------------------- */
 
   .sp-input-wrapper {
@@ -340,7 +482,7 @@
     appearance: none;
     padding: var(--sp-space-4) var(--sp-space-16);
     border-radius: var(--sp-radius-md);
-    border: 1px solid var(--sp-component-input-role-border);
+    border: var(--sp-component-border-width) solid var(--sp-component-input-role-border);
     background-color: var(--sp-component-input-role-bg);
     color: var(--sp-component-input-role-text);
     font-family: var(--sp-font-family-sans);
@@ -378,10 +520,14 @@
     width: 100%;
   }
 
+  .sp-input--pill {
+    border-radius: var(--sp-radius-pill);
+  }
+
   .sp-input:focus,
   .sp-input--focus {
     border-color: var(--sp-component-input-role-border-focus);
-    box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + 1px) var(--sp-component-input-role-ring);
+    box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-component-input-role-ring);
     outline: none;
   }
 
@@ -422,7 +568,7 @@
     border-radius: var(--sp-radius-lg);
     padding: var(--sp-space-24);
     box-shadow: var(--sp-component-card-shadow);
-    border: 1px solid var(--sp-component-card-border-base);
+    border: var(--sp-component-border-width) solid var(--sp-component-card-border-base);
   }
 
   .sp-card p {
@@ -463,6 +609,11 @@
     height: 100%;
   }
 
+  .sp-card--disabled {
+    opacity: var(--sp-opacity-disabled);
+    pointer-events: none;
+  }
+
   .sp-card--interactive {
     cursor: pointer;
     transition:
@@ -473,7 +624,7 @@
   .sp-card--interactive:hover,
   .sp-card--interactive:focus-visible,
   .sp-card--interactive:focus-within {
-    transform: translateY(-1px);
+    transform: translateY(calc(var(--sp-component-border-width) * -1));
     box-shadow: var(--sp-component-card-shadow-elevated);
   }
 
@@ -490,7 +641,7 @@
     padding: var(--sp-component-badge-padding-y-md) var(--sp-component-badge-padding-x-md);
     font-size: var(--sp-font-sm-size);
     line-height: var(--sp-font-sm-line-height);
-    border: 1px solid transparent;
+    border: var(--sp-component-border-width) solid transparent;
     white-space: nowrap;
   }
 
@@ -517,21 +668,75 @@
     color: var(--sp-component-badge-primary-text);
   }
 
+  .sp-badge--primary.sp-badge--interactive:hover {
+    background-color: var(--sp-component-badge-primary-bg-hover);
+  }
+
+  .sp-badge--secondary {
+    background-color: var(--sp-component-badge-secondary-bg);
+    color: var(--sp-component-badge-secondary-text);
+    border-color: var(--sp-component-badge-secondary-border);
+  }
+
+  .sp-badge--secondary.sp-badge--interactive:hover {
+    background-color: var(--sp-component-badge-secondary-bg-hover);
+  }
+
   .sp-badge--success {
     background-color: var(--sp-component-badge-success-bg);
     color: var(--sp-component-badge-success-text);
   }
 
+  .sp-badge--success.sp-badge--interactive:hover {
+    background-color: var(--sp-component-badge-success-bg-hover);
+  }
+
   .sp-badge--warning {
     background-color: var(--sp-component-badge-warning-bg);
     color: var(--sp-component-badge-warning-text);
   }
 
+  .sp-badge--warning.sp-badge--interactive:hover {
+    background-color: var(--sp-component-badge-warning-bg-hover);
+  }
+
   .sp-badge--danger {
     background-color: var(--sp-component-badge-danger-bg);
     color: var(--sp-component-badge-danger-text);
   }
 
+  .sp-badge--danger.sp-badge--interactive:hover {
+    background-color: var(--sp-component-badge-danger-bg-hover);
+  }
+
+  .sp-badge--neutral {
+    background-color: var(--sp-component-badge-neutral-bg);
+    color: var(--sp-component-badge-neutral-text);
+  }
+
+  .sp-badge--neutral.sp-badge--interactive:hover {
+    background-color: var(--sp-component-badge-neutral-bg-hover);
+  }
+
+  .sp-badge--info {
+    background-color: var(--sp-component-badge-info-bg);
+    color: var(--sp-component-badge-info-text);
+  }
+
+  .sp-badge--info.sp-badge--interactive:hover {
+    background-color: var(--sp-component-badge-info-bg-hover);
+  }
+
+  .sp-badge--interactive {
+    cursor: pointer;
+    transition: background-color var(--sp-duration-fast) var(--sp-easing-out);
+  }
+
+  .sp-badge--disabled {
+    opacity: var(--sp-opacity-disabled);
+    pointer-events: none;
+  }
+
   /* ICON BOXES ----------------------------------------------------------- */
 
   .sp-iconbox {
@@ -636,4 +841,155 @@
     background-color: var(--sp-component-iconbox-info-bg);
     color: var(--sp-component-iconbox-info-text);
   }
+
+  .sp-iconbox--disabled {
+    opacity: var(--sp-opacity-disabled);
+    pointer-events: none;
+  }
+
+  /* TESTIMONIALS --------------------------------------------------------- */
+
+  .sp-testimonial {
+    background-color: var(--sp-component-testimonial-bg);
+    border: var(--sp-component-border-width) solid var(--sp-component-testimonial-border);
+    border-radius: var(--sp-radius-lg);
+    padding: var(--sp-space-32);
+    display: flex;
+    flex-direction: column;
+    gap: var(--sp-space-24);
+  }
+
+  .sp-testimonial-quote {
+    color: var(--sp-component-testimonial-text);
+    font-size: var(--sp-font-lg-size);
+    line-height: var(--sp-font-lg-line-height);
+    font-style: italic;
+    position: relative;
+  }
+
+  .sp-testimonial-quote::before {
+    content: "“";
+    color: var(--sp-component-testimonial-quote-mark);
+    font-size: var(--sp-space-48);
+    position: absolute;
+    top: calc(var(--sp-space-24) * -1);
+    left: calc(var(--sp-space-16) * -1);
+    opacity: var(--sp-opacity-overlay);
+  }
+
+  .sp-testimonial-author {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-space-16);
+  }
+
+  .sp-testimonial-author-info {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .sp-testimonial-author-name {
+    color: var(--sp-component-testimonial-author-name);
+    font-weight: var(--sp-font-xl-weight);
+    font-size: var(--sp-font-md-size);
+  }
+
+  .sp-testimonial-author-title {
+    color: var(--sp-component-testimonial-author-title);
+    font-size: var(--sp-font-sm-size);
+  }
+
+  /* PRICING CARDS -------------------------------------------------------- */
+
+  .sp-pricing-card {
+    background-color: var(--sp-component-pricing-card-bg);
+    border: var(--sp-component-border-width) solid var(--sp-component-pricing-card-border);
+    border-radius: var(--sp-radius-lg);
+    padding: var(--sp-space-32);
+    display: flex;
+    flex-direction: column;
+    gap: var(--sp-space-24);
+    position: relative;
+    transition: transform var(--sp-duration-fast) var(--sp-easing-out);
+  }
+
+  .sp-pricing-card--featured {
+    background-color: var(--sp-component-pricing-card-featured-bg);
+    color: var(--sp-component-pricing-card-featured-text);
+    transform: scale(1.05);
+    z-index: 1;
+    border: none;
+  }
+
+  .sp-pricing-card--disabled {
+    opacity: var(--sp-opacity-disabled);
+    pointer-events: none;
+  }
+
+  .sp-pricing-card-badge {
+    position: absolute;
+    top: var(--sp-space-16);
+    right: var(--sp-space-16);
+    background-color: var(--sp-component-pricing-card-featured-badge-bg);
+    color: var(--sp-component-pricing-card-featured-badge-text);
+    padding: var(--sp-space-4) var(--sp-space-12);
+    border-radius: var(--sp-radius-pill);
+    font-size: var(--sp-font-xs-size);
+    font-weight: var(--sp-font-md-weight);
+  }
+
+  .sp-pricing-card-price-container {
+    display: flex;
+    align-items: baseline;
+    gap: var(--sp-space-4);
+  }
+
+  .sp-pricing-card-price {
+    font-size: var(--sp-font-2xl-size);
+    font-weight: var(--sp-font-2xl-weight);
+    color: var(--sp-component-pricing-card-price);
+  }
+
+  .sp-pricing-card--featured .sp-pricing-card-price {
+    color: var(--sp-component-pricing-card-featured-price);
+  }
+
+  .sp-pricing-card-description {
+    color: var(--sp-component-pricing-card-price-description);
+    font-size: var(--sp-font-sm-size);
+  }
+
+  .sp-pricing-card--featured .sp-pricing-card-description {
+    color: var(--sp-component-pricing-card-featured-text);
+    opacity: 0.8;
+  }
+
+  /* RATING --------------------------------------------------------------- */
+
+  .sp-rating {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sp-space-8);
+  }
+
+  .sp-rating-stars {
+    display: flex;
+    gap: var(--sp-space-4);
+    color: var(--sp-component-rating-star-empty);
+  }
+
+  .sp-rating-star {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .sp-rating-star--filled {
+    color: var(--sp-component-rating-star-filled);
+  }
+
+  .sp-rating-text {
+    color: var(--sp-component-rating-text);
+    font-size: var(--sp-font-sm-size);
+  }
 }