@phcdevworks/spectre-tokens 2.8.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;
@@ -228,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;
@@ -255,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;
@@ -355,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;
@@ -395,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: {
@@ -180,6 +235,10 @@ interface SpectreGeneratedTokens {
                 overlay: string;
                 alternate: string;
                 hero: string;
+                hover: string;
+                selected: string;
+                active: string;
+                divider: string;
             };
             text: {
                 onPage: {
@@ -257,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: {
@@ -267,6 +381,10 @@ interface SpectreGeneratedTokens {
                 overlay: string;
                 alternate: string;
                 hero: string;
+                hover: string;
+                selected: string;
+                active: string;
+                divider: string;
             };
             text: {
                 onPage: {
@@ -347,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;
+                    };
+                };
             };
         };
     };
@@ -512,6 +685,7 @@ interface SpectreGeneratedTokens {
     };
     transitions: {
         duration: {
+            reduced: string;
             instant: string;
             fast: string;
             base: string;
@@ -572,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;
@@ -606,6 +822,8 @@ interface SpectreGeneratedTokens {
             offset: string;
             style: string;
         };
+        reducedMotion: string;
+        forcedColors: string;
         minTouchTarget: string;
         minTextSize: string;
     };
@@ -627,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: {
@@ -906,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;
@@ -924,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';
@@ -936,6 +1210,10 @@ interface SpectreModeTokens {
         overlay: SemanticTokenValue;
         alternate: SemanticTokenValue;
         hero: SemanticTokenValue;
+        hover: SemanticTokenValue;
+        selected: SemanticTokenValue;
+        active: SemanticTokenValue;
+        divider: SemanticTokenValue;
     };
     text: {
         onPage: {