@phcdevworks/spectre-ui 1.1.2 → 1.3.0

package/README.md

@@ -110,19 +110,44 @@ Golden rule: consume tokens, do not redefine them.
 
 ### Root package
 
-Exports CSS path constants and class recipes, including:
+The root package exports CSS path constants plus the recipe functions re-exported
+from `src/recipes/index.ts`.
+
+Root constants:
 
 - `spectreStyles`
-- `getButtonClasses`
+- `spectreBaseStylesPath`
+- `spectreComponentsStylesPath`
+- `spectreUtilitiesStylesPath`
+
+Root recipe functions:
+
 - `getBadgeClasses`
+- `getButtonClasses`
 - `getCardClasses`
-- `getInputClasses`
 - `getIconBoxClasses`
+- `getInputClasses`
 - `getPricingCardClasses`
-- `getTestimonialClasses`
 - `getRatingClasses`
+- `getTestimonialClasses`
+
+Root recipe helper functions:
 
-Recipes also export their related TypeScript option and variant types.
+- `getPricingCardBadgeClasses`
+- `getPricingCardDescriptionClasses`
+- `getPricingCardPriceClasses`
+- `getPricingCardPriceContainerClasses`
+- `getRatingStarClasses`
+- `getRatingStarsClasses`
+- `getRatingTextClasses`
+- `getTestimonialAuthorClasses`
+- `getTestimonialAuthorInfoClasses`
+- `getTestimonialAuthorNameClasses`
+- `getTestimonialAuthorTitleClasses`
+- `getTestimonialQuoteClasses`
+
+The root package also re-exports the related recipe option, variant, size, and
+state TypeScript types defined by those recipes.
 
 ### Tailwind entry point
 
@@ -154,12 +179,14 @@ implementation drift.
 
 ## Development
 
-Install dependencies, then run the package checks:
+Install dependencies, then run the package verification flow:
 
-```bash
-npm run build
-npm test
-```
+    npm run ci:verify
+
+Planning artifacts for contract hardening live in:
+
+- [`ROADMAP.md`](ROADMAP.md)
+- [`TODO.md`](TODO.md)
 
 Key source areas:
 
@@ -189,7 +216,7 @@ When contributing:
 - keep styling token-driven
 - keep recipe APIs and CSS classes in sync
 - avoid local visual values unless clearly intentional
-- run `npm run build` and `npm test` before opening a pull request
+- run npm run ci:verify before opening a pull request
 
 See [CONTRIBUTING.md](CONTRIBUTING.md) for the full workflow.
 

package/dist/base.css

@@ -3,17 +3,20 @@
   --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: #657287;
+  --sp-component-card-text-muted: #4b576a;
   --sp-component-input-text: #141b24;
   --sp-component-input-placeholder: #657287;
   --sp-button-text-default: #141b24;
@@ -110,20 +113,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;
@@ -172,13 +163,25 @@
   --sp-font-md-weight: 500;
   --sp-font-lg-size: 1.25rem;
   --sp-font-lg-line-height: 2rem;
-  --sp-font-lg-weight: 500;
+  --sp-font-lg-weight: 600;
   --sp-font-xl-size: 1.5rem;
   --sp-font-xl-line-height: 2.125rem;
   --sp-font-xl-weight: 600;
   --sp-font-2xl-size: 1.875rem;
   --sp-font-2xl-line-height: 2.5rem;
-  --sp-font-2xl-weight: 600;
+  --sp-font-2xl-weight: 700;
+  --sp-font-3xl-size: 2.25rem;
+  --sp-font-3xl-line-height: 2.75rem;
+  --sp-font-3xl-weight: 700;
+  --sp-font-4xl-size: 3rem;
+  --sp-font-4xl-line-height: 3.5rem;
+  --sp-font-4xl-weight: 800;
+  --sp-font-5xl-size: 3.75rem;
+  --sp-font-5xl-line-height: 4.25rem;
+  --sp-font-5xl-weight: 800;
+  --sp-font-6xl-size: 4.5rem;
+  --sp-font-6xl-line-height: 5rem;
+  --sp-font-6xl-weight: 900;
   --sp-font-xs-letter-spacing: 0.02em;
   --sp-text-on-page-default: #141b24;
   --sp-text-on-page-muted: #4b576a;
@@ -250,6 +253,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: rgba(14, 165, 233, 0.4);
   --sp-button-secondary-bg: #ffffff;
   --sp-button-secondary-bghover: #f7f8fb;
   --sp-button-secondary-bgactive: #eef1f6;
@@ -259,6 +263,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: rgba(14, 165, 233, 0.4);
   --sp-button-ghost-bg: transparent;
   --sp-button-ghost-bghover: #f0f9ff;
   --sp-button-ghost-bgactive: #e0f2fe;
@@ -266,6 +271,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: rgba(14, 165, 233, 0.4);
   --sp-button-danger-bg: #dc2626;
   --sp-button-danger-bghover: #b91c1c;
   --sp-button-danger-bgactive: #991b1b;
@@ -295,6 +301,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: rgba(133, 79, 247, 0.4);
   --sp-form-default-bg: #ffffff;
   --sp-form-default-border: #b7c1d4;
   --sp-form-default-text: #141b24;
@@ -302,6 +309,8 @@
   --sp-form-hover-border: #0ea5e9;
   --sp-form-focus-border: #0ea5e9;
   --sp-form-focus-ring: #0ea5e9;
+  --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;
@@ -341,15 +350,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;
@@ -368,7 +380,7 @@
   --sp-badge-danger-text: #fee2e2;
   --sp-icon-box-bg: #222b38;
   --sp-icon-box-border: #374253;
-  --sp-icon-box-icon-default: #7dd3fc;
+  --sp-icon-box-icon-default: #38bdf8;
   --sp-icon-box-icon-success: #4ade80;
   --sp-icon-box-icon-warning: #ffc21a;
   --sp-icon-box-icon-danger: #f87171;
@@ -381,13 +393,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);
@@ -406,13 +419,13 @@
   }
 
   input,
-  button,
   textarea,
   select {
     font: inherit;
   }
 
   button {
+    font: inherit;
     border: none;
     background: none;
     padding: 0;