@phcdevworks/spectre-tokens 2.7.0 → 2.9.0

package/dist/index.css

@@ -37,6 +37,41 @@
   --sp-icon-box-icon-success: #16a34a;
   --sp-icon-box-icon-warning: #d48806;
   --sp-icon-box-icon-danger: #dc2626;
+  --sp-nav-bg: #ffffff;
+  --sp-nav-text: #141b24;
+  --sp-nav-link: #374253;
+  --sp-nav-link-hover: #1f57db;
+  --sp-nav-link-active: #1946b4;
+  --sp-nav-border: #d9dfeb;
+  --sp-modal-bg: #ffffff;
+  --sp-modal-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.20);
+  --sp-modal-border: #d9dfeb;
+  --sp-modal-overlay: rgba(0, 0, 0, 0.6);
+  --sp-toast-success-bg: #f0fdf4;
+  --sp-toast-success-text: #166534;
+  --sp-toast-success-border: #bbf7d0;
+  --sp-toast-success-icon: #16a34a;
+  --sp-toast-warning-bg: #fffbea;
+  --sp-toast-warning-text: #8f5200;
+  --sp-toast-warning-border: #ffe08a;
+  --sp-toast-warning-icon: #d48806;
+  --sp-toast-danger-bg: #fef2f2;
+  --sp-toast-danger-text: #991b1b;
+  --sp-toast-danger-border: #fecaca;
+  --sp-toast-danger-icon: #dc2626;
+  --sp-toast-info-bg: #f0f9ff;
+  --sp-toast-info-text: #0c4a6e;
+  --sp-toast-info-border: #bae6fd;
+  --sp-toast-info-icon: #0369a1;
+  --sp-tooltip-bg: #141b24;
+  --sp-tooltip-text: #ffffff;
+  --sp-tooltip-border: #374253;
+  --sp-dropdown-bg: #ffffff;
+  --sp-dropdown-border: #d9dfeb;
+  --sp-dropdown-item-default: transparent;
+  --sp-dropdown-item-hover: #eef1f6;
+  --sp-dropdown-item-active: #f0f9ff;
+  --sp-dropdown-item-text: #141b24;
   --sp-color-brand-50: #eef4ff;
   --sp-color-brand-100: #d9e7ff;
   --sp-color-brand-200: #b9d2ff;
@@ -116,17 +151,24 @@
   --sp-color-white: #ffffff;
   --sp-color-black: #000000;
   --sp-space-0: 0rem;
+  --sp-space-1: 0.0625rem;
+  --sp-space-2: 0.125rem;
   --sp-space-4: 0.25rem;
+  --sp-space-6: 0.375rem;
   --sp-space-8: 0.5rem;
+  --sp-space-10: 0.625rem;
   --sp-space-12: 0.75rem;
+  --sp-space-14: 0.875rem;
   --sp-space-16: 1rem;
   --sp-space-20: 1.25rem;
   --sp-space-24: 1.5rem;
+  --sp-space-28: 1.75rem;
   --sp-space-32: 2rem;
   --sp-space-40: 2.5rem;
   --sp-space-48: 3rem;
   --sp-space-56: 3.5rem;
   --sp-space-64: 4rem;
+  --sp-space-72: 4.5rem;
   --sp-space-80: 5rem;
   --sp-space-96: 6rem;
   --sp-layout-section-padding-sm: 1.5rem;
@@ -142,16 +184,21 @@
   --sp-layout-container-padding-inline-md: 1.5rem;
   --sp-layout-container-padding-inline-lg: 2rem;
   --sp-layout-container-max-width: 72rem;
+  --sp-border-width-none: 0;
   --sp-border-width-base: 1px;
   --sp-border-width-thick: 2px;
   --sp-border-style-none: none;
   --sp-border-style-solid: solid;
+  --sp-border-style-dashed: dashed;
+  --sp-border-style-dotted: dotted;
   --sp-radius-none: 0;
   --sp-radius-sm: 2px;
   --sp-radius-md: 4px;
   --sp-radius-lg: 8px;
   --sp-radius-xl: 12px;
   --sp-radius-2xl: 16px;
+  --sp-radius-3xl: 24px;
+  --sp-radius-4xl: 32px;
   --sp-radius-pill: 999px;
   --sp-font-family-sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
   --sp-font-family-serif: 'Times New Roman', Times, serif;
@@ -216,6 +263,7 @@
   --sp-z-index-popover: 1500;
   --sp-z-index-tooltip: 1600;
   --sp-z-index-toast: 1700;
+  --sp-duration-reduced: 0.01ms;
   --sp-duration-instant: 75ms;
   --sp-duration-fast: 150ms;
   --sp-duration-base: 200ms;
@@ -243,6 +291,7 @@
   --sp-focus-ring-style: solid;
   --sp-min-touch-target: 44px;
   --sp-min-text-size: 16px;
+  --sp-reduced-motion: 0.01ms;
   --sp-button-primary-bg: #0369a1;
   --sp-button-primary-bghover: #075985;
   --sp-button-primary-bgactive: #0c4a6e;
@@ -276,6 +325,7 @@
   --sp-button-danger-text: #ffffff;
   --sp-button-danger-textdisabled: #8a96ad;
   --sp-button-danger-focusring: rgba(239, 68, 68, 0.4);
+  --sp-button-danger-focusvisible: rgba(239, 68, 68, 0.4);
   --sp-button-success-bg: #15803d;
   --sp-button-success-bghover: #166534;
   --sp-button-success-bgactive: #14532d;
@@ -283,6 +333,7 @@
   --sp-button-success-text: #ffffff;
   --sp-button-success-textdisabled: #8a96ad;
   --sp-button-success-focusring: rgba(34, 197, 94, 0.4);
+  --sp-button-success-focusvisible: rgba(34, 197, 94, 0.4);
   --sp-button-cta-bg: #1f57db;
   --sp-button-cta-bghover: #1946b4;
   --sp-button-cta-bgactive: #173b8f;
@@ -341,6 +392,30 @@
   --sp-animation-pulse-duration: 1200ms;
   --sp-animation-pulse-easing: cubic-bezier(0.4, 0, 0.2, 1);
   --sp-animation-pulse-keyframes: pulse;
+  --sp-animation-reduced-motion-fadein-duration: 0.01ms;
+  --sp-animation-reduced-motion-fadein-easing: linear;
+  --sp-animation-reduced-motion-fadein-keyframes: fade-in;
+  --sp-animation-reduced-motion-fadeout-duration: 0.01ms;
+  --sp-animation-reduced-motion-fadeout-easing: linear;
+  --sp-animation-reduced-motion-fadeout-keyframes: fade-out;
+  --sp-animation-reduced-motion-slideup-duration: 0.01ms;
+  --sp-animation-reduced-motion-slideup-easing: linear;
+  --sp-animation-reduced-motion-slideup-keyframes: slide-up;
+  --sp-animation-reduced-motion-slidedown-duration: 0.01ms;
+  --sp-animation-reduced-motion-slidedown-easing: linear;
+  --sp-animation-reduced-motion-slidedown-keyframes: slide-down;
+  --sp-animation-reduced-motion-scalein-duration: 0.01ms;
+  --sp-animation-reduced-motion-scalein-easing: linear;
+  --sp-animation-reduced-motion-scalein-keyframes: scale-in;
+  --sp-animation-reduced-motion-bounce-duration: 0.01ms;
+  --sp-animation-reduced-motion-bounce-easing: linear;
+  --sp-animation-reduced-motion-bounce-keyframes: bounce;
+  --sp-animation-reduced-motion-shake-duration: 0.01ms;
+  --sp-animation-reduced-motion-shake-easing: linear;
+  --sp-animation-reduced-motion-shake-keyframes: shake;
+  --sp-animation-reduced-motion-pulse-duration: 0.01ms;
+  --sp-animation-reduced-motion-pulse-easing: linear;
+  --sp-animation-reduced-motion-pulse-keyframes: pulse;
 }
 :root[data-spectre-theme="dark"] {
   --sp-surface-page: #141b24;
@@ -381,4 +456,39 @@
   --sp-icon-box-icon-success: #4ade80;
   --sp-icon-box-icon-warning: #ffc21a;
   --sp-icon-box-icon-danger: #f87171;
+  --sp-nav-bg: #141b24;
+  --sp-nav-text: #f7f8fb;
+  --sp-nav-link: #b7c1d4;
+  --sp-nav-link-hover: #5a92ff;
+  --sp-nav-link-active: #8ab6ff;
+  --sp-nav-border: #374253;
+  --sp-modal-bg: #222b38;
+  --sp-modal-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.20);
+  --sp-modal-border: #374253;
+  --sp-modal-overlay: rgba(0, 0, 0, 0.6);
+  --sp-toast-success-bg: #14532d;
+  --sp-toast-success-text: #dcfce7;
+  --sp-toast-success-border: #15803d;
+  --sp-toast-success-icon: #4ade80;
+  --sp-toast-warning-bg: #734000;
+  --sp-toast-warning-text: #fff1c2;
+  --sp-toast-warning-border: #ad6800;
+  --sp-toast-warning-icon: #ffc21a;
+  --sp-toast-danger-bg: #7f1d1d;
+  --sp-toast-danger-text: #fee2e2;
+  --sp-toast-danger-border: #b91c1c;
+  --sp-toast-danger-icon: #f87171;
+  --sp-toast-info-bg: #082f49;
+  --sp-toast-info-text: #e0f2fe;
+  --sp-toast-info-border: #075985;
+  --sp-toast-info-icon: #38bdf8;
+  --sp-tooltip-bg: #f7f8fb;
+  --sp-tooltip-text: #141b24;
+  --sp-tooltip-border: #b7c1d4;
+  --sp-dropdown-bg: #222b38;
+  --sp-dropdown-border: #374253;
+  --sp-dropdown-item-default: transparent;
+  --sp-dropdown-item-hover: #374253;
+  --sp-dropdown-item-active: #082f49;
+  --sp-dropdown-item-text: #eef1f6;
 }

package/dist/index.d.cts

@@ -62,6 +62,61 @@ interface SpectreGeneratedTokens {
             starEmpty: string;
             text: string;
         };
+        nav: {
+            bg: string;
+            text: string;
+            link: string;
+            linkHover: string;
+            linkActive: string;
+            border: string;
+        };
+        modal: {
+            bg: string;
+            shadow: string;
+            border: string;
+            overlay: string;
+        };
+        toast: {
+            success: {
+                bg: string;
+                text: string;
+                border: string;
+                icon: string;
+            };
+            warning: {
+                bg: string;
+                text: string;
+                border: string;
+                icon: string;
+            };
+            danger: {
+                bg: string;
+                text: string;
+                border: string;
+                icon: string;
+            };
+            info: {
+                bg: string;
+                text: string;
+                border: string;
+                icon: string;
+            };
+        };
+        tooltip: {
+            bg: string;
+            text: string;
+            border: string;
+        };
+        dropdown: {
+            bg: string;
+            border: string;
+            item: {
+                default: string;
+                hover: string;
+                active: string;
+                text: string;
+            };
+        };
     };
     buttons: {
         primary: {
@@ -104,6 +159,7 @@ interface SpectreGeneratedTokens {
             text: string;
             textDisabled: string;
             focusRing: string;
+            focusVisible: string;
         };
         success: {
             bg: string;
@@ -113,6 +169,7 @@ interface SpectreGeneratedTokens {
             text: string;
             textDisabled: string;
             focusRing: string;
+            focusVisible: string;
         };
         cta: {
             bg: string;
@@ -178,6 +235,10 @@ interface SpectreGeneratedTokens {
                 overlay: string;
                 alternate: string;
                 hero: string;
+                hover: string;
+                selected: string;
+                active: string;
+                divider: string;
             };
             text: {
                 onPage: {
@@ -255,6 +316,61 @@ interface SpectreGeneratedTokens {
                     starEmpty: string;
                     text: string;
                 };
+                nav: {
+                    bg: string;
+                    text: string;
+                    link: string;
+                    linkHover: string;
+                    linkActive: string;
+                    border: string;
+                };
+                modal: {
+                    bg: string;
+                    shadow: string;
+                    border: string;
+                    overlay: string;
+                };
+                toast: {
+                    success: {
+                        bg: string;
+                        text: string;
+                        border: string;
+                        icon: string;
+                    };
+                    warning: {
+                        bg: string;
+                        text: string;
+                        border: string;
+                        icon: string;
+                    };
+                    danger: {
+                        bg: string;
+                        text: string;
+                        border: string;
+                        icon: string;
+                    };
+                    info: {
+                        bg: string;
+                        text: string;
+                        border: string;
+                        icon: string;
+                    };
+                };
+                tooltip: {
+                    bg: string;
+                    text: string;
+                    border: string;
+                };
+                dropdown: {
+                    bg: string;
+                    border: string;
+                    item: {
+                        default: string;
+                        hover: string;
+                        active: string;
+                        text: string;
+                    };
+                };
             };
         };
         dark: {
@@ -265,6 +381,10 @@ interface SpectreGeneratedTokens {
                 overlay: string;
                 alternate: string;
                 hero: string;
+                hover: string;
+                selected: string;
+                active: string;
+                divider: string;
             };
             text: {
                 onPage: {
@@ -345,6 +465,61 @@ interface SpectreGeneratedTokens {
                     starEmpty: string;
                     text: string;
                 };
+                nav: {
+                    bg: string;
+                    text: string;
+                    link: string;
+                    linkHover: string;
+                    linkActive: string;
+                    border: string;
+                };
+                modal: {
+                    bg: string;
+                    shadow: string;
+                    border: string;
+                    overlay: string;
+                };
+                toast: {
+                    success: {
+                        bg: string;
+                        text: string;
+                        border: string;
+                        icon: string;
+                    };
+                    warning: {
+                        bg: string;
+                        text: string;
+                        border: string;
+                        icon: string;
+                    };
+                    danger: {
+                        bg: string;
+                        text: string;
+                        border: string;
+                        icon: string;
+                    };
+                    info: {
+                        bg: string;
+                        text: string;
+                        border: string;
+                        icon: string;
+                    };
+                };
+                tooltip: {
+                    bg: string;
+                    text: string;
+                    border: string;
+                };
+                dropdown: {
+                    bg: string;
+                    border: string;
+                    item: {
+                        default: string;
+                        hover: string;
+                        active: string;
+                        text: string;
+                    };
+                };
             };
         };
     };
@@ -450,17 +625,24 @@ interface SpectreGeneratedTokens {
     };
     space: {
         '0': string;
+        '1': string;
+        '2': string;
         '4': string;
+        '6': string;
         '8': string;
+        '10': string;
         '12': string;
+        '14': string;
         '16': string;
         '20': string;
         '24': string;
+        '28': string;
         '32': string;
         '40': string;
         '48': string;
         '56': string;
         '64': string;
+        '72': string;
         '80': string;
         '96': string;
     };
@@ -471,6 +653,8 @@ interface SpectreGeneratedTokens {
         lg: string;
         xl: string;
         '2xl': string;
+        '3xl': string;
+        '4xl': string;
         pill: string;
     };
     shadows: {
@@ -501,6 +685,7 @@ interface SpectreGeneratedTokens {
     };
     transitions: {
         duration: {
+            reduced: string;
             instant: string;
             fast: string;
             base: string;
@@ -561,6 +746,48 @@ interface SpectreGeneratedTokens {
             easing: string;
             keyframes: string;
         };
+        reducedMotion: {
+            fadeIn: {
+                duration: string;
+                easing: string;
+                keyframes: string;
+            };
+            fadeOut: {
+                duration: string;
+                easing: string;
+                keyframes: string;
+            };
+            slideUp: {
+                duration: string;
+                easing: string;
+                keyframes: string;
+            };
+            slideDown: {
+                duration: string;
+                easing: string;
+                keyframes: string;
+            };
+            scaleIn: {
+                duration: string;
+                easing: string;
+                keyframes: string;
+            };
+            bounce: {
+                duration: string;
+                easing: string;
+                keyframes: string;
+            };
+            shake: {
+                duration: string;
+                easing: string;
+                keyframes: string;
+            };
+            pulse: {
+                duration: string;
+                easing: string;
+                keyframes: string;
+            };
+        };
     };
     opacity: {
         disabled: string;
@@ -595,17 +822,22 @@ interface SpectreGeneratedTokens {
             offset: string;
             style: string;
         };
+        reducedMotion: string;
+        forcedColors: string;
         minTouchTarget: string;
         minTextSize: string;
     };
     border: {
         width: {
+            none: string;
             base: string;
             thick: string;
         };
         style: {
             none: string;
             solid: string;
+            dashed: string;
+            dotted: string;
         };
     };
     surface: {
@@ -613,6 +845,16 @@ interface SpectreGeneratedTokens {
         card: string;
         input: string;
         overlay: string;
+        hover: string;
+        selected: string;
+        active: string;
+        divider: string;
+    };
+    link: {
+        default: string;
+        hover: string;
+        active: string;
+        visited: string;
     };
     text: {
         onPage: {
@@ -892,6 +1134,47 @@ interface ComponentRatingTokens<Value = string> {
     starEmpty: Value;
     text: Value;
 }
+interface ComponentNavTokens<Value = string> {
+    bg: Value;
+    text: Value;
+    link: Value;
+    linkHover: Value;
+    linkActive: Value;
+    border: Value;
+}
+interface ComponentModalTokens<Value = string> {
+    bg: Value;
+    shadow: Value;
+    border: Value;
+    overlay: Value;
+}
+interface ComponentToastVariantTokens<Value = string> {
+    bg: Value;
+    text: Value;
+    border: Value;
+    icon: Value;
+}
+interface ComponentToastTokens<Value = string> {
+    success: ComponentToastVariantTokens<Value>;
+    warning: ComponentToastVariantTokens<Value>;
+    danger: ComponentToastVariantTokens<Value>;
+    info: ComponentToastVariantTokens<Value>;
+}
+interface ComponentTooltipTokens<Value = string> {
+    bg: Value;
+    text: Value;
+    border: Value;
+}
+interface ComponentDropdownTokens<Value = string> {
+    bg: Value;
+    border: Value;
+    item: {
+        default: Value;
+        hover: Value;
+        active: Value;
+        text: Value;
+    };
+}
 interface ComponentTokens<Value = string> {
     card: {
         text: Value;
@@ -910,6 +1193,11 @@ interface ComponentTokens<Value = string> {
     testimonial: ComponentTestimonialTokens<Value>;
     pricingCard: ComponentPricingCardTokens<Value>;
     rating: ComponentRatingTokens<Value>;
+    nav: ComponentNavTokens<Value>;
+    modal: ComponentModalTokens<Value>;
+    toast: ComponentToastTokens<Value>;
+    tooltip: ComponentTooltipTokens<Value>;
+    dropdown: ComponentDropdownTokens<Value>;
     [key: string]: unknown;
 }
 type SpectreModeName = 'default' | 'dark';
@@ -922,6 +1210,10 @@ interface SpectreModeTokens {
         overlay: SemanticTokenValue;
         alternate: SemanticTokenValue;
         hero: SemanticTokenValue;
+        hover: SemanticTokenValue;
+        selected: SemanticTokenValue;
+        active: SemanticTokenValue;
+        divider: SemanticTokenValue;
     };
     text: {
         onPage: {