@phcdevworks/spectre-tokens 2.0.0 → 2.1.0

package/dist/index.css

@@ -54,16 +54,16 @@
   --sp-color-neutral-700: #334155;
   --sp-color-neutral-800: #1e293b;
   --sp-color-neutral-900: #0f172a;
-  --sp-color-accent-50: #eff6ff;
-  --sp-color-accent-100: #dbeafe;
+  --sp-color-accent-50: #f5f3ff;
+  --sp-color-accent-100: #ede9fe;
   --sp-color-accent-200: #ddd6fe;
-  --sp-color-accent-300: #93c5fd;
-  --sp-color-accent-400: #60a5fa;
+  --sp-color-accent-300: #c4b5fd;
+  --sp-color-accent-400: #a78bfa;
   --sp-color-accent-500: #8b5cf6;
   --sp-color-accent-600: #7c3aed;
   --sp-color-accent-700: #6d28d9;
-  --sp-color-accent-800: #1e40af;
-  --sp-color-accent-900: #1e3a8a;
+  --sp-color-accent-800: #5b21b6;
+  --sp-color-accent-900: #4c1d95;
   --sp-color-success-50: #f0fdf4;
   --sp-color-success-100: #dcfce7;
   --sp-color-success-200: #bbf7d0;
@@ -150,6 +150,9 @@
   --sp-layout-container-padding-inline-sm: 1rem;
   --sp-layout-container-padding-inline-md: 1.5rem;
   --sp-layout-container-padding-inline-lg: 2rem;
+  --sp-layout-container-max-width: 72rem;
+  --sp-border-width-base: 1px;
+  --sp-border-width-thick: 2px;
   --sp-radius-none: 0;
   --sp-radius-sm: 2px;
   --sp-radius-md: 4px;
@@ -246,6 +249,7 @@
   --sp-button-primary-bgdisabled: #e2e8f0;
   --sp-button-primary-text: #ffffff;
   --sp-button-primary-textdisabled: #94a3b8;
+  --sp-button-primary-focusring: rgba(59, 130, 246, 0.4);
   --sp-button-secondary-bg: #ffffff;
   --sp-button-secondary-bghover: #f8fafc;
   --sp-button-secondary-bgactive: #f1f5f9;
@@ -254,24 +258,28 @@
   --sp-button-secondary-textdisabled: #94a3b8;
   --sp-button-secondary-border: #2563eb;
   --sp-button-secondary-borderdisabled: #e2e8f0;
+  --sp-button-secondary-focusring: rgba(59, 130, 246, 0.4);
   --sp-button-ghost-bg: transparent;
   --sp-button-ghost-bghover: #eff6ff;
   --sp-button-ghost-bgactive: #dbeafe;
   --sp-button-ghost-bgdisabled: transparent;
   --sp-button-ghost-text: #2563eb;
   --sp-button-ghost-textdisabled: #94a3b8;
+  --sp-button-ghost-focusring: rgba(59, 130, 246, 0.4);
   --sp-button-danger-bg: #dc2626;
   --sp-button-danger-bghover: #b91c1c;
   --sp-button-danger-bgactive: #991b1b;
   --sp-button-danger-bgdisabled: #fecaca;
   --sp-button-danger-text: #ffffff;
   --sp-button-danger-textdisabled: #94a3b8;
+  --sp-button-danger-focusring: rgba(239, 68, 68, 0.4);
   --sp-button-success-bg: #15803d;
   --sp-button-success-bghover: #166534;
   --sp-button-success-bgactive: #14532d;
   --sp-button-success-bgdisabled: #bbf7d0;
   --sp-button-success-text: #ffffff;
   --sp-button-success-textdisabled: #94a3b8;
+  --sp-button-success-focusring: rgba(34, 197, 94, 0.4);
   --sp-button-cta-bg: #f59e0b;
   --sp-button-cta-bghover: #d97706;
   --sp-button-cta-bgactive: #b45309;
@@ -279,12 +287,14 @@
   --sp-button-cta-text: #0f172a;
   --sp-button-cta-textdisabled: #94a3b8;
   --sp-button-cta-shadow: 0 4px 14px 0 rgba(245, 158, 11, 0.39);
+  --sp-button-cta-focusring: rgba(245, 158, 11, 0.4);
   --sp-button-accent-bg: #7c3aed;
   --sp-button-accent-bghover: #6d28d9;
-  --sp-button-accent-bgactive: #1e40af;
+  --sp-button-accent-bgactive: #5b21b6;
   --sp-button-accent-bgdisabled: #ddd6fe;
   --sp-button-accent-text: #ffffff;
   --sp-button-accent-textdisabled: #94a3b8;
+  --sp-button-accent-focusring: rgba(139, 92, 246, 0.4);
   --sp-form-default-bg: #ffffff;
   --sp-form-default-border: #cbd5e1;
   --sp-form-default-text: #0f172a;
@@ -331,7 +341,7 @@
   --sp-surface-card: #1e293b;
   --sp-surface-input: #334155;
   --sp-surface-overlay: #1e293b;
-  --sp-surface-hero: linear-gradient(135deg, #1e3a8a 0%, #6d28d9 100%);
+  --sp-surface-hero: linear-gradient(135deg, #4c1d95 0%, #6d28d9 100%);
   --sp-text-on-page-default: #f8fafc;
   --sp-text-on-page-muted: #cbd5e1;
   --sp-text-on-page-subtle: #94a3b8;

package/dist/index.d.cts

@@ -199,6 +199,9 @@ interface SpectreGeneratedTokens {
             textDisabled: {
                 value: string;
             };
+            focusRing: {
+                value: string;
+            };
         };
         secondary: {
             bg: {
@@ -228,6 +231,9 @@ interface SpectreGeneratedTokens {
             borderDisabled: {
                 value: string;
             };
+            focusRing: {
+                value: string;
+            };
         };
         ghost: {
             bg: {
@@ -248,6 +254,9 @@ interface SpectreGeneratedTokens {
             textDisabled: {
                 value: string;
             };
+            focusRing: {
+                value: string;
+            };
         };
         danger: {
             bg: {
@@ -271,6 +280,9 @@ interface SpectreGeneratedTokens {
             textDisabled: {
                 value: string;
             };
+            focusRing: {
+                value: string;
+            };
         };
         success: {
             bg: {
@@ -294,6 +306,9 @@ interface SpectreGeneratedTokens {
             textDisabled: {
                 value: string;
             };
+            focusRing: {
+                value: string;
+            };
         };
         cta: {
             bg: {
@@ -320,6 +335,9 @@ interface SpectreGeneratedTokens {
             shadow: {
                 value: string;
             };
+            focusRing: {
+                value: string;
+            };
         };
         accent: {
             bg: {
@@ -343,6 +361,9 @@ interface SpectreGeneratedTokens {
             textDisabled: {
                 value: string;
             };
+            focusRing: {
+                value: string;
+            };
         };
     };
     forms: {
@@ -743,6 +764,9 @@ interface SpectreGeneratedTokens {
                             pair: string;
                         };
                     };
+                    neutralBgHover: {
+                        value: string;
+                    };
                     neutralText: {
                         value: string;
                         metadata: {};
@@ -753,6 +777,9 @@ interface SpectreGeneratedTokens {
                             pair: string;
                         };
                     };
+                    infoBgHover: {
+                        value: string;
+                    };
                     infoText: {
                         value: string;
                         metadata: {};
@@ -763,6 +790,9 @@ interface SpectreGeneratedTokens {
                             pair: string;
                         };
                     };
+                    successBgHover: {
+                        value: string;
+                    };
                     successText: {
                         value: string;
                         metadata: {};
@@ -773,6 +803,9 @@ interface SpectreGeneratedTokens {
                             pair: string;
                         };
                     };
+                    warningBgHover: {
+                        value: string;
+                    };
                     warningText: {
                         value: string;
                         metadata: {};
@@ -783,6 +816,9 @@ interface SpectreGeneratedTokens {
                             pair: string;
                         };
                     };
+                    dangerBgHover: {
+                        value: string;
+                    };
                     dangerText: {
                         value: string;
                         metadata: {};
@@ -1138,6 +1174,12 @@ interface SpectreGeneratedTokens {
         card: string;
         input: string;
     };
+    border: {
+        width: {
+            base: string;
+            thick: string;
+        };
+    };
     surface: {
         page: {
             value: string;
@@ -1198,6 +1240,7 @@ interface SpectreGeneratedTokens {
                 md: string;
                 lg: string;
             };
+            maxWidth: string;
         };
     };
     font: {
@@ -1447,6 +1490,7 @@ interface LayoutTokens {
     };
     container: {
         paddingInline: TokenScale;
+        maxWidth: string;
     };
 }
 interface Tokens extends Omit<SpectreGeneratedTokens, 'modes' | 'surface' | 'text'> {
@@ -1471,6 +1515,8 @@ interface TailwindTheme {
     transitionDuration: SpectreGeneratedTokens['transitions']['duration'];
     transitionTimingFunction: SpectreGeneratedTokens['transitions']['easing'];
     opacity: SpectreGeneratedTokens['opacity'];
+    maxWidth: Record<string, string | undefined>;
+    borderWidth: Record<string, string | undefined>;
 }
 
 declare const generateCssVariables: (tokens: SpectreTokens, options?: CssVariableOptions) => string;

package/dist/index.d.ts

@@ -199,6 +199,9 @@ interface SpectreGeneratedTokens {
             textDisabled: {
                 value: string;
             };
+            focusRing: {
+                value: string;
+            };
         };
         secondary: {
             bg: {
@@ -228,6 +231,9 @@ interface SpectreGeneratedTokens {
             borderDisabled: {
                 value: string;
             };
+            focusRing: {
+                value: string;
+            };
         };
         ghost: {
             bg: {
@@ -248,6 +254,9 @@ interface SpectreGeneratedTokens {
             textDisabled: {
                 value: string;
             };
+            focusRing: {
+                value: string;
+            };
         };
         danger: {
             bg: {
@@ -271,6 +280,9 @@ interface SpectreGeneratedTokens {
             textDisabled: {
                 value: string;
             };
+            focusRing: {
+                value: string;
+            };
         };
         success: {
             bg: {
@@ -294,6 +306,9 @@ interface SpectreGeneratedTokens {
             textDisabled: {
                 value: string;
             };
+            focusRing: {
+                value: string;
+            };
         };
         cta: {
             bg: {
@@ -320,6 +335,9 @@ interface SpectreGeneratedTokens {
             shadow: {
                 value: string;
             };
+            focusRing: {
+                value: string;
+            };
         };
         accent: {
             bg: {
@@ -343,6 +361,9 @@ interface SpectreGeneratedTokens {
             textDisabled: {
                 value: string;
             };
+            focusRing: {
+                value: string;
+            };
         };
     };
     forms: {
@@ -743,6 +764,9 @@ interface SpectreGeneratedTokens {
                             pair: string;
                         };
                     };
+                    neutralBgHover: {
+                        value: string;
+                    };
                     neutralText: {
                         value: string;
                         metadata: {};
@@ -753,6 +777,9 @@ interface SpectreGeneratedTokens {
                             pair: string;
                         };
                     };
+                    infoBgHover: {
+                        value: string;
+                    };
                     infoText: {
                         value: string;
                         metadata: {};
@@ -763,6 +790,9 @@ interface SpectreGeneratedTokens {
                             pair: string;
                         };
                     };
+                    successBgHover: {
+                        value: string;
+                    };
                     successText: {
                         value: string;
                         metadata: {};
@@ -773,6 +803,9 @@ interface SpectreGeneratedTokens {
                             pair: string;
                         };
                     };
+                    warningBgHover: {
+                        value: string;
+                    };
                     warningText: {
                         value: string;
                         metadata: {};
@@ -783,6 +816,9 @@ interface SpectreGeneratedTokens {
                             pair: string;
                         };
                     };
+                    dangerBgHover: {
+                        value: string;
+                    };
                     dangerText: {
                         value: string;
                         metadata: {};
@@ -1138,6 +1174,12 @@ interface SpectreGeneratedTokens {
         card: string;
         input: string;
     };
+    border: {
+        width: {
+            base: string;
+            thick: string;
+        };
+    };
     surface: {
         page: {
             value: string;
@@ -1198,6 +1240,7 @@ interface SpectreGeneratedTokens {
                 md: string;
                 lg: string;
             };
+            maxWidth: string;
         };
     };
     font: {
@@ -1447,6 +1490,7 @@ interface LayoutTokens {
     };
     container: {
         paddingInline: TokenScale;
+        maxWidth: string;
     };
 }
 interface Tokens extends Omit<SpectreGeneratedTokens, 'modes' | 'surface' | 'text'> {
@@ -1471,6 +1515,8 @@ interface TailwindTheme {
     transitionDuration: SpectreGeneratedTokens['transitions']['duration'];
     transitionTimingFunction: SpectreGeneratedTokens['transitions']['easing'];
     opacity: SpectreGeneratedTokens['opacity'];
+    maxWidth: Record<string, string | undefined>;
+    borderWidth: Record<string, string | undefined>;
 }
 
 declare const generateCssVariables: (tokens: SpectreTokens, options?: CssVariableOptions) => string;

package/dist/index.js

@@ -199,6 +199,9 @@ var coreTokens = {
       },
       "textDisabled": {
         "value": "{colors.neutral.400}"
+      },
+      "focusRing": {
+        "value": "{colors.info.500} / 0.4"
       }
     },
     "secondary": {
@@ -228,6 +231,9 @@ var coreTokens = {
       },
       "borderDisabled": {
         "value": "{colors.neutral.200}"
+      },
+      "focusRing": {
+        "value": "{colors.info.500} / 0.4"
       }
     },
     "ghost": {
@@ -248,6 +254,9 @@ var coreTokens = {
       },
       "textDisabled": {
         "value": "{colors.neutral.400}"
+      },
+      "focusRing": {
+        "value": "{colors.info.500} / 0.4"
       }
     },
     "danger": {
@@ -271,6 +280,9 @@ var coreTokens = {
       },
       "textDisabled": {
         "value": "{colors.neutral.400}"
+      },
+      "focusRing": {
+        "value": "{colors.error.500} / 0.4"
       }
     },
     "success": {
@@ -294,6 +306,9 @@ var coreTokens = {
       },
       "textDisabled": {
         "value": "{colors.neutral.400}"
+      },
+      "focusRing": {
+        "value": "{colors.success.500} / 0.4"
       }
     },
     "cta": {
@@ -320,6 +335,9 @@ var coreTokens = {
       },
       "shadow": {
         "value": "0 4px 14px 0 {colors.warning.500} / 0.39"
+      },
+      "focusRing": {
+        "value": "{colors.warning.500} / 0.4"
       }
     },
     "accent": {
@@ -343,6 +361,9 @@ var coreTokens = {
       },
       "textDisabled": {
         "value": "{colors.neutral.400}"
+      },
+      "focusRing": {
+        "value": "{colors.accent.500} / 0.4"
       }
     }
   },
@@ -744,6 +765,9 @@ var coreTokens = {
               "pair": "modes.dark.component.badge.neutralText"
             }
           },
+          "neutralBgHover": {
+            "value": "{colors.neutral.600}"
+          },
           "neutralText": {
             "value": "{colors.neutral.100}",
             "metadata": {}
@@ -754,6 +778,9 @@ var coreTokens = {
               "pair": "modes.dark.component.badge.infoText"
             }
           },
+          "infoBgHover": {
+            "value": "{colors.info.700}"
+          },
           "infoText": {
             "value": "{colors.info.100}",
             "metadata": {}
@@ -764,6 +791,9 @@ var coreTokens = {
               "pair": "modes.dark.component.badge.successText"
             }
           },
+          "successBgHover": {
+            "value": "{colors.success.700}"
+          },
           "successText": {
             "value": "{colors.success.100}",
             "metadata": {}
@@ -774,6 +804,9 @@ var coreTokens = {
               "pair": "modes.dark.component.badge.warningText"
             }
           },
+          "warningBgHover": {
+            "value": "{colors.warning.700}"
+          },
           "warningText": {
             "value": "{colors.warning.100}",
             "metadata": {}
@@ -784,6 +817,9 @@ var coreTokens = {
               "pair": "modes.dark.component.badge.dangerText"
             }
           },
+          "dangerBgHover": {
+            "value": "{colors.error.700}"
+          },
           "dangerText": {
             "value": "{colors.error.100}",
             "metadata": {}
@@ -922,16 +958,16 @@ var coreTokens = {
       "900": "#0f172a"
     },
     "accent": {
-      "50": "#eff6ff",
-      "100": "#dbeafe",
+      "50": "#f5f3ff",
+      "100": "#ede9fe",
       "200": "#ddd6fe",
-      "300": "#93c5fd",
-      "400": "#60a5fa",
+      "300": "#c4b5fd",
+      "400": "#a78bfa",
       "500": "#8b5cf6",
       "600": "#7c3aed",
       "700": "#6d28d9",
-      "800": "#1e40af",
-      "900": "#1e3a8a"
+      "800": "#5b21b6",
+      "900": "#4c1d95"
     },
     "success": {
       "50": "#f0fdf4",
@@ -1139,6 +1175,12 @@ var coreTokens = {
     "card": "{colors.neutral.200}",
     "input": "{colors.neutral.300}"
   },
+  "border": {
+    "width": {
+      "base": "1px",
+      "thick": "2px"
+    }
+  },
   "surface": {
     "page": {
       "value": "{colors.neutral.50}",
@@ -1198,7 +1240,8 @@ var coreTokens = {
         "sm": "1rem",
         "md": "1.5rem",
         "lg": "2rem"
-      }
+      },
+      "maxWidth": "72rem"
     }
   },
   "font": {
@@ -1400,6 +1443,16 @@ var createCssVariableMap = (tokens2, options = {}) => {
         assign(toVariableName(prefix, "layout", "container", "padding-inline", key), value);
       });
     }
+    const container = layout.container;
+    if (container?.maxWidth) {
+      assign(toVariableName(prefix, "layout", "container", "max-width"), container.maxWidth);
+    }
+  }
+  const border = baseTokens.border;
+  if (border?.width) {
+    Object.entries(border.width).forEach(([key, value]) => {
+      assign(toVariableName(prefix, "border", "width", key), value);
+    });
   }
   Object.entries(baseTokens.radii).forEach(([key, value]) => {
     assign(toVariableName(prefix, "radius", key), value);
@@ -1778,7 +1831,7 @@ var createTailwindTheme = (source = tokens) => {
   return {
     colors,
     spacing: { ...source.space ?? {} },
-    borderRadius: { ...source.radii },
+    borderRadius: { ...source.radii ?? {} },
     fontFamily,
     fontSize,
     boxShadow: { ...source.shadows },
@@ -1786,7 +1839,14 @@ var createTailwindTheme = (source = tokens) => {
     zIndex: { ...source.zIndex },
     transitionDuration: { ...source.transitions.duration },
     transitionTimingFunction: { ...source.transitions.easing },
-    opacity: { ...source.opacity }
+    opacity: { ...source.opacity },
+    maxWidth: {
+      container: source.layout?.container?.maxWidth
+    },
+    borderWidth: {
+      DEFAULT: source.border?.width.base,
+      ...source.border?.width ?? {}
+    }
   };
 };
 var tailwindTheme = createTailwindTheme(tokens);