@phcdevworks/spectre-tokens 3.0.0 → 3.2.0

package/dist/index.css

@@ -5,6 +5,10 @@
   --sp-surface-overlay: rgba(0, 0, 0, 0.6);
   --sp-surface-subtle: #eef1f6;
   --sp-surface-hero: linear-gradient(135deg, #5b6ee1 0%, #6f3fd7 100%);
+  --sp-surface-hover: #eef1f6;
+  --sp-surface-selected: #f0f9ff;
+  --sp-surface-active: #d9dfeb;
+  --sp-surface-divider: #d9dfeb;
   --sp-text-on-page-default: #141b24;
   --sp-text-on-page-muted: #4b576a;
   --sp-text-on-page-subtle: #657287;
@@ -72,6 +76,43 @@
   --sp-dropdown-item-hover: #eef1f6;
   --sp-dropdown-item-active: #f0f9ff;
   --sp-dropdown-item-text: #141b24;
+  --sp-checkbox-bg: #ffffff;
+  --sp-checkbox-border: #b7c1d4;
+  --sp-checkbox-checked-bg: #0369a1;
+  --sp-checkbox-checked-border: #0369a1;
+  --sp-checkbox-text: #ffffff;
+  --sp-checkbox-disabled-bg: #f7f8fb;
+  --sp-checkbox-disabled-border: #d9dfeb;
+  --sp-radio-bg: #ffffff;
+  --sp-radio-border: #b7c1d4;
+  --sp-radio-checked-bg: #0369a1;
+  --sp-radio-checked-border: #0369a1;
+  --sp-radio-text: #ffffff;
+  --sp-radio-disabled-bg: #f7f8fb;
+  --sp-radio-disabled-border: #d9dfeb;
+  --sp-select-bg: #ffffff;
+  --sp-select-border: #b7c1d4;
+  --sp-select-text: #141b24;
+  --sp-select-placeholder-text: #657287;
+  --sp-select-disabled-bg: #f7f8fb;
+  --sp-select-disabled-border: #d9dfeb;
+  --sp-select-focus-border: #0ea5e9;
+  --sp-textarea-bg: #ffffff;
+  --sp-textarea-border: #b7c1d4;
+  --sp-textarea-text: #141b24;
+  --sp-textarea-placeholder: #657287;
+  --sp-textarea-disabled-bg: #f7f8fb;
+  --sp-textarea-disabled-border: #d9dfeb;
+  --sp-textarea-focus-border: #0ea5e9;
+  --sp-fieldset-border: #d9dfeb;
+  --sp-fieldset-legend-text: #141b24;
+  --sp-label-text: #141b24;
+  --sp-label-disabled-text: #8a96ad;
+  --sp-label-required-indicator-text: #dc2626;
+  --sp-link-default: #1f57db;
+  --sp-link-hover: #1946b4;
+  --sp-link-active: #173b8f;
+  --sp-link-visited: #5d28b8;
   --sp-color-brand-50: #eef4ff;
   --sp-color-brand-100: #d9e7ff;
   --sp-color-brand-200: #b9d2ff;
@@ -184,6 +225,8 @@
   --sp-layout-container-padding-inline-md: 1.5rem;
   --sp-layout-container-padding-inline-lg: 2rem;
   --sp-layout-container-max-width: 72rem;
+  --sp-layout-container-max-width-prose: 65ch;
+  --sp-layout-sidebar-width: 16rem;
   --sp-border-width-none: 0;
   --sp-border-width-base: 1px;
   --sp-border-width-thick: 2px;
@@ -424,6 +467,10 @@
   --sp-surface-overlay: rgba(0, 0, 0, 0.6);
   --sp-surface-subtle: #222b38;
   --sp-surface-hero: linear-gradient(135deg, #5d28b8 0%, #401f75 100%);
+  --sp-surface-hover: #374253;
+  --sp-surface-selected: #082f49;
+  --sp-surface-active: #4b576a;
+  --sp-surface-divider: #374253;
   --sp-text-on-page-default: #f7f8fb;
   --sp-text-on-page-muted: #b7c1d4;
   --sp-text-on-page-subtle: #8a96ad;
@@ -491,4 +538,41 @@
   --sp-dropdown-item-hover: #374253;
   --sp-dropdown-item-active: #082f49;
   --sp-dropdown-item-text: #eef1f6;
+  --sp-checkbox-bg: #222b38;
+  --sp-checkbox-border: #4b576a;
+  --sp-checkbox-checked-bg: #0369a1;
+  --sp-checkbox-checked-border: #0369a1;
+  --sp-checkbox-text: #ffffff;
+  --sp-checkbox-disabled-bg: #141b24;
+  --sp-checkbox-disabled-border: #374253;
+  --sp-radio-bg: #222b38;
+  --sp-radio-border: #4b576a;
+  --sp-radio-checked-bg: #0369a1;
+  --sp-radio-checked-border: #0369a1;
+  --sp-radio-text: #ffffff;
+  --sp-radio-disabled-bg: #141b24;
+  --sp-radio-disabled-border: #374253;
+  --sp-select-bg: #222b38;
+  --sp-select-border: #4b576a;
+  --sp-select-text: #f7f8fb;
+  --sp-select-placeholder-text: #8a96ad;
+  --sp-select-disabled-bg: #141b24;
+  --sp-select-disabled-border: #374253;
+  --sp-select-focus-border: #38bdf8;
+  --sp-textarea-bg: #222b38;
+  --sp-textarea-border: #4b576a;
+  --sp-textarea-text: #f7f8fb;
+  --sp-textarea-placeholder: #8a96ad;
+  --sp-textarea-disabled-bg: #141b24;
+  --sp-textarea-disabled-border: #374253;
+  --sp-textarea-focus-border: #38bdf8;
+  --sp-fieldset-border: #374253;
+  --sp-fieldset-legend-text: #f7f8fb;
+  --sp-label-text: #f7f8fb;
+  --sp-label-disabled-text: #4b576a;
+  --sp-label-required-indicator-text: #f87171;
+  --sp-link-default: #1f57db;
+  --sp-link-hover: #1946b4;
+  --sp-link-active: #173b8f;
+  --sp-link-visited: #5d28b8;
 }

package/dist/index.d.cts

@@ -117,6 +117,51 @@ interface SpectreGeneratedTokens {
                 text: string;
             };
         };
+        checkbox: {
+            bg: string;
+            border: string;
+            checkedBg: string;
+            checkedBorder: string;
+            text: string;
+            disabledBg: string;
+            disabledBorder: string;
+        };
+        radio: {
+            bg: string;
+            border: string;
+            checkedBg: string;
+            checkedBorder: string;
+            text: string;
+            disabledBg: string;
+            disabledBorder: string;
+        };
+        select: {
+            bg: string;
+            border: string;
+            text: string;
+            placeholderText: string;
+            disabledBg: string;
+            disabledBorder: string;
+            focusBorder: string;
+        };
+        textarea: {
+            bg: string;
+            border: string;
+            text: string;
+            placeholder: string;
+            disabledBg: string;
+            disabledBorder: string;
+            focusBorder: string;
+        };
+        fieldset: {
+            border: string;
+            legendText: string;
+        };
+        label: {
+            text: string;
+            disabledText: string;
+            requiredIndicatorText: string;
+        };
     };
     buttons: {
         primary: {
@@ -371,6 +416,51 @@ interface SpectreGeneratedTokens {
                         text: string;
                     };
                 };
+                checkbox: {
+                    bg: string;
+                    border: string;
+                    checkedBg: string;
+                    checkedBorder: string;
+                    text: string;
+                    disabledBg: string;
+                    disabledBorder: string;
+                };
+                radio: {
+                    bg: string;
+                    border: string;
+                    checkedBg: string;
+                    checkedBorder: string;
+                    text: string;
+                    disabledBg: string;
+                    disabledBorder: string;
+                };
+                select: {
+                    bg: string;
+                    border: string;
+                    text: string;
+                    placeholderText: string;
+                    disabledBg: string;
+                    disabledBorder: string;
+                    focusBorder: string;
+                };
+                textarea: {
+                    bg: string;
+                    border: string;
+                    text: string;
+                    placeholder: string;
+                    disabledBg: string;
+                    disabledBorder: string;
+                    focusBorder: string;
+                };
+                fieldset: {
+                    border: string;
+                    legendText: string;
+                };
+                label: {
+                    text: string;
+                    disabledText: string;
+                    requiredIndicatorText: string;
+                };
             };
         };
         dark: {
@@ -520,6 +610,51 @@ interface SpectreGeneratedTokens {
                         text: string;
                     };
                 };
+                checkbox: {
+                    bg: string;
+                    border: string;
+                    checkedBg: string;
+                    checkedBorder: string;
+                    text: string;
+                    disabledBg: string;
+                    disabledBorder: string;
+                };
+                radio: {
+                    bg: string;
+                    border: string;
+                    checkedBg: string;
+                    checkedBorder: string;
+                    text: string;
+                    disabledBg: string;
+                    disabledBorder: string;
+                };
+                select: {
+                    bg: string;
+                    border: string;
+                    text: string;
+                    placeholderText: string;
+                    disabledBg: string;
+                    disabledBorder: string;
+                    focusBorder: string;
+                };
+                textarea: {
+                    bg: string;
+                    border: string;
+                    text: string;
+                    placeholder: string;
+                    disabledBg: string;
+                    disabledBorder: string;
+                    focusBorder: string;
+                };
+                fieldset: {
+                    border: string;
+                    legendText: string;
+                };
+                label: {
+                    text: string;
+                    disabledText: string;
+                    requiredIndicatorText: string;
+                };
             };
         };
     };
@@ -899,6 +1034,10 @@ interface SpectreGeneratedTokens {
                 lg: string;
             };
             maxWidth: string;
+            maxWidthProse: string;
+        };
+        sidebar: {
+            width: string;
         };
     };
     font: {
@@ -1175,6 +1314,42 @@ interface ComponentDropdownTokens<Value = string> {
         text: Value;
     };
 }
+interface ComponentSelectionControlTokens<Value = string> {
+    bg: Value;
+    border: Value;
+    checkedBg: Value;
+    checkedBorder: Value;
+    text: Value;
+    disabledBg: Value;
+    disabledBorder: Value;
+}
+interface ComponentSelectTokens<Value = string> {
+    bg: Value;
+    border: Value;
+    text: Value;
+    placeholderText: Value;
+    disabledBg: Value;
+    disabledBorder: Value;
+    focusBorder: Value;
+}
+interface ComponentTextareaTokens<Value = string> {
+    bg: Value;
+    border: Value;
+    text: Value;
+    placeholder: Value;
+    disabledBg: Value;
+    disabledBorder: Value;
+    focusBorder: Value;
+}
+interface ComponentFieldsetTokens<Value = string> {
+    border: Value;
+    legendText: Value;
+}
+interface ComponentLabelTokens<Value = string> {
+    text: Value;
+    disabledText: Value;
+    requiredIndicatorText: Value;
+}
 interface ComponentTokens<Value = string> {
     card: {
         text: Value;
@@ -1198,6 +1373,12 @@ interface ComponentTokens<Value = string> {
     toast: ComponentToastTokens<Value>;
     tooltip: ComponentTooltipTokens<Value>;
     dropdown: ComponentDropdownTokens<Value>;
+    checkbox: ComponentSelectionControlTokens<Value>;
+    radio: ComponentSelectionControlTokens<Value>;
+    select: ComponentSelectTokens<Value>;
+    textarea: ComponentTextareaTokens<Value>;
+    fieldset: ComponentFieldsetTokens<Value>;
+    label: ComponentLabelTokens<Value>;
     [key: string]: unknown;
 }
 type SpectreModeName = 'default' | 'dark';
@@ -1245,6 +1426,10 @@ interface LayoutTokens {
     container: {
         paddingInline: TokenScale;
         maxWidth: string;
+        maxWidthProse: string;
+    };
+    sidebar: {
+        width: string;
     };
 }
 type Tokens = SpectreGeneratedTokens;
@@ -1269,6 +1454,7 @@ interface TailwindTheme {
     transitionTimingFunction: SpectreGeneratedTokens['transitions']['easing'];
     opacity: SpectreGeneratedTokens['opacity'];
     maxWidth: Record<string, string | undefined>;
+    width: Record<string, string | undefined>;
     borderWidth: Record<string, string | undefined>;
 }
 

package/dist/index.d.ts

@@ -117,6 +117,51 @@ interface SpectreGeneratedTokens {
                 text: string;
             };
         };
+        checkbox: {
+            bg: string;
+            border: string;
+            checkedBg: string;
+            checkedBorder: string;
+            text: string;
+            disabledBg: string;
+            disabledBorder: string;
+        };
+        radio: {
+            bg: string;
+            border: string;
+            checkedBg: string;
+            checkedBorder: string;
+            text: string;
+            disabledBg: string;
+            disabledBorder: string;
+        };
+        select: {
+            bg: string;
+            border: string;
+            text: string;
+            placeholderText: string;
+            disabledBg: string;
+            disabledBorder: string;
+            focusBorder: string;
+        };
+        textarea: {
+            bg: string;
+            border: string;
+            text: string;
+            placeholder: string;
+            disabledBg: string;
+            disabledBorder: string;
+            focusBorder: string;
+        };
+        fieldset: {
+            border: string;
+            legendText: string;
+        };
+        label: {
+            text: string;
+            disabledText: string;
+            requiredIndicatorText: string;
+        };
     };
     buttons: {
         primary: {
@@ -371,6 +416,51 @@ interface SpectreGeneratedTokens {
                         text: string;
                     };
                 };
+                checkbox: {
+                    bg: string;
+                    border: string;
+                    checkedBg: string;
+                    checkedBorder: string;
+                    text: string;
+                    disabledBg: string;
+                    disabledBorder: string;
+                };
+                radio: {
+                    bg: string;
+                    border: string;
+                    checkedBg: string;
+                    checkedBorder: string;
+                    text: string;
+                    disabledBg: string;
+                    disabledBorder: string;
+                };
+                select: {
+                    bg: string;
+                    border: string;
+                    text: string;
+                    placeholderText: string;
+                    disabledBg: string;
+                    disabledBorder: string;
+                    focusBorder: string;
+                };
+                textarea: {
+                    bg: string;
+                    border: string;
+                    text: string;
+                    placeholder: string;
+                    disabledBg: string;
+                    disabledBorder: string;
+                    focusBorder: string;
+                };
+                fieldset: {
+                    border: string;
+                    legendText: string;
+                };
+                label: {
+                    text: string;
+                    disabledText: string;
+                    requiredIndicatorText: string;
+                };
             };
         };
         dark: {
@@ -520,6 +610,51 @@ interface SpectreGeneratedTokens {
                         text: string;
                     };
                 };
+                checkbox: {
+                    bg: string;
+                    border: string;
+                    checkedBg: string;
+                    checkedBorder: string;
+                    text: string;
+                    disabledBg: string;
+                    disabledBorder: string;
+                };
+                radio: {
+                    bg: string;
+                    border: string;
+                    checkedBg: string;
+                    checkedBorder: string;
+                    text: string;
+                    disabledBg: string;
+                    disabledBorder: string;
+                };
+                select: {
+                    bg: string;
+                    border: string;
+                    text: string;
+                    placeholderText: string;
+                    disabledBg: string;
+                    disabledBorder: string;
+                    focusBorder: string;
+                };
+                textarea: {
+                    bg: string;
+                    border: string;
+                    text: string;
+                    placeholder: string;
+                    disabledBg: string;
+                    disabledBorder: string;
+                    focusBorder: string;
+                };
+                fieldset: {
+                    border: string;
+                    legendText: string;
+                };
+                label: {
+                    text: string;
+                    disabledText: string;
+                    requiredIndicatorText: string;
+                };
             };
         };
     };
@@ -899,6 +1034,10 @@ interface SpectreGeneratedTokens {
                 lg: string;
             };
             maxWidth: string;
+            maxWidthProse: string;
+        };
+        sidebar: {
+            width: string;
         };
     };
     font: {
@@ -1175,6 +1314,42 @@ interface ComponentDropdownTokens<Value = string> {
         text: Value;
     };
 }
+interface ComponentSelectionControlTokens<Value = string> {
+    bg: Value;
+    border: Value;
+    checkedBg: Value;
+    checkedBorder: Value;
+    text: Value;
+    disabledBg: Value;
+    disabledBorder: Value;
+}
+interface ComponentSelectTokens<Value = string> {
+    bg: Value;
+    border: Value;
+    text: Value;
+    placeholderText: Value;
+    disabledBg: Value;
+    disabledBorder: Value;
+    focusBorder: Value;
+}
+interface ComponentTextareaTokens<Value = string> {
+    bg: Value;
+    border: Value;
+    text: Value;
+    placeholder: Value;
+    disabledBg: Value;
+    disabledBorder: Value;
+    focusBorder: Value;
+}
+interface ComponentFieldsetTokens<Value = string> {
+    border: Value;
+    legendText: Value;
+}
+interface ComponentLabelTokens<Value = string> {
+    text: Value;
+    disabledText: Value;
+    requiredIndicatorText: Value;
+}
 interface ComponentTokens<Value = string> {
     card: {
         text: Value;
@@ -1198,6 +1373,12 @@ interface ComponentTokens<Value = string> {
     toast: ComponentToastTokens<Value>;
     tooltip: ComponentTooltipTokens<Value>;
     dropdown: ComponentDropdownTokens<Value>;
+    checkbox: ComponentSelectionControlTokens<Value>;
+    radio: ComponentSelectionControlTokens<Value>;
+    select: ComponentSelectTokens<Value>;
+    textarea: ComponentTextareaTokens<Value>;
+    fieldset: ComponentFieldsetTokens<Value>;
+    label: ComponentLabelTokens<Value>;
     [key: string]: unknown;
 }
 type SpectreModeName = 'default' | 'dark';
@@ -1245,6 +1426,10 @@ interface LayoutTokens {
     container: {
         paddingInline: TokenScale;
         maxWidth: string;
+        maxWidthProse: string;
+    };
+    sidebar: {
+        width: string;
     };
 }
 type Tokens = SpectreGeneratedTokens;
@@ -1269,6 +1454,7 @@ interface TailwindTheme {
     transitionTimingFunction: SpectreGeneratedTokens['transitions']['easing'];
     opacity: SpectreGeneratedTokens['opacity'];
     maxWidth: Record<string, string | undefined>;
+    width: Record<string, string | undefined>;
     borderWidth: Record<string, string | undefined>;
 }