@phcdevworks/spectre-ui 1.2.0 → 1.4.0

package/README.md

@@ -118,6 +118,7 @@ Root constants:
 - `spectreStyles`
 - `spectreBaseStylesPath`
 - `spectreComponentsStylesPath`
+- `spectreIndexStylesPath`
 - `spectreUtilitiesStylesPath`
 
 Root recipe functions:
@@ -183,6 +184,11 @@ Install dependencies, then run the package verification flow:
 
     npm run ci:verify
 
+Planning artifacts for contract hardening live in:
+
+- [`ROADMAP.md`](ROADMAP.md)
+- [`TODO.md`](TODO.md)
+
 Key source areas:
 
 - `src/styles/` for source CSS

package/dist/base.css

@@ -3,15 +3,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;
@@ -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;
@@ -217,9 +208,9 @@
   --sp-icon-box-icon-warning: #d48806;
   --sp-icon-box-icon-danger: #dc2626;
   --sp-shadow-none: none;
-  --sp-shadow-sm: 0 1px 2px 0 rgba(34, 43, 56, 0.06);
-  --sp-shadow-md: 0 2px 6px -1px rgba(34, 43, 56, 0.08);
-  --sp-shadow-lg: 0 6px 16px -4px rgba(34, 43, 56, 0.12);
+  --sp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --sp-shadow-md: 0 2px 6px -1px rgba(0, 0, 0, 0.08);
+  --sp-shadow-lg: 0 6px 16px -4px rgba(0, 0, 0, 0.12);
   --sp-breakpoint-sm: 640px;
   --sp-breakpoint-md: 768px;
   --sp-breakpoint-lg: 1024px;
@@ -262,7 +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: {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;
@@ -272,7 +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: {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;
@@ -280,7 +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: {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;
@@ -310,7 +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: {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;
@@ -318,8 +309,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;
@@ -358,16 +349,19 @@
   --sp-surface-page: #141b24;
   --sp-surface-card: #222b38;
   --sp-surface-input: #374253;
-  --sp-surface-overlay: #222b38;
-  --sp-surface-hero: linear-gradient(135deg, #401f75 0%, #5d28b8 100%);
+  --sp-surface-overlay: rgba(0, 0, 0, 0.6);
+  --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;
@@ -399,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);
@@ -424,13 +419,13 @@
   }
 
   input,
-  button,
   textarea,
   select {
     font: inherit;
   }
 
   button {
+    font: inherit;
     border: none;
     background: none;
     padding: 0;