@phcdevworks/spectre-tokens 1.0.0 → 2.1.0

package/dist/index.d.ts

@@ -1,3 +1,1342 @@
+interface SpectreGeneratedTokens {
+    component: {
+        card: {
+            text: {
+                value: string;
+            };
+            textMuted: {
+                value: string;
+            };
+        };
+        input: {
+            text: {
+                value: string;
+            };
+            placeholder: {
+                value: string;
+            };
+        };
+        button: {
+            textDefault: {
+                value: string;
+            };
+            textOnPrimary: {
+                value: string;
+            };
+        };
+        badge: {
+            neutralBg: {
+                value: string;
+                metadata: {
+                    pair: string;
+                };
+            };
+            neutralBgHover: {
+                value: string;
+            };
+            neutralText: {
+                value: string;
+            };
+            infoBg: {
+                value: string;
+                metadata: {
+                    pair: string;
+                };
+            };
+            infoBgHover: {
+                value: string;
+            };
+            infoText: {
+                value: string;
+            };
+            successBg: {
+                value: string;
+                metadata: {
+                    pair: string;
+                };
+            };
+            successBgHover: {
+                value: string;
+            };
+            successText: {
+                value: string;
+            };
+            warningBg: {
+                value: string;
+                metadata: {
+                    pair: string;
+                };
+            };
+            warningBgHover: {
+                value: string;
+            };
+            warningText: {
+                value: string;
+            };
+            dangerBg: {
+                value: string;
+                metadata: {
+                    pair: string;
+                };
+            };
+            dangerBgHover: {
+                value: string;
+            };
+            dangerText: {
+                value: string;
+            };
+        };
+        iconBox: {
+            bg: {
+                value: string;
+            };
+            border: {
+                value: string;
+            };
+            iconDefault: {
+                value: string;
+            };
+            iconSuccess: {
+                value: string;
+            };
+            iconWarning: {
+                value: string;
+            };
+            iconDanger: {
+                value: string;
+            };
+        };
+        testimonial: {
+            bg: {
+                value: string;
+            };
+            border: {
+                value: string;
+            };
+            text: {
+                value: string;
+            };
+            authorName: {
+                value: string;
+            };
+            authorTitle: {
+                value: string;
+            };
+            quoteMark: {
+                value: string;
+            };
+        };
+        pricingCard: {
+            bg: {
+                value: string;
+                metadata: {};
+            };
+            border: {
+                value: string;
+                metadata: {};
+            };
+            featuredBg: {
+                value: string;
+                metadata: {
+                    pair: string;
+                };
+            };
+            featuredText: {
+                value: string;
+                metadata: {};
+            };
+            featuredBadgeBg: {
+                value: string;
+                metadata: {
+                    pair: string;
+                };
+            };
+            featuredBadgeText: {
+                value: string;
+                metadata: {};
+            };
+            price: {
+                value: string;
+                metadata: {};
+            };
+            priceDescription: {
+                value: string;
+                metadata: {};
+            };
+        };
+        rating: {
+            starFilled: {
+                value: string;
+            };
+            starEmpty: {
+                value: string;
+            };
+            text: {
+                value: string;
+            };
+        };
+    };
+    buttons: {
+        primary: {
+            bg: {
+                value: string;
+                metadata: {
+                    pair: string;
+                };
+            };
+            bgHover: {
+                value: string;
+            };
+            bgActive: {
+                value: string;
+            };
+            bgDisabled: {
+                value: string;
+            };
+            text: {
+                value: string;
+            };
+            textDisabled: {
+                value: string;
+            };
+            focusRing: {
+                value: string;
+            };
+        };
+        secondary: {
+            bg: {
+                value: string;
+                metadata: {
+                    pair: string;
+                };
+            };
+            bgHover: {
+                value: string;
+            };
+            bgActive: {
+                value: string;
+            };
+            bgDisabled: {
+                value: string;
+            };
+            text: {
+                value: string;
+            };
+            textDisabled: {
+                value: string;
+            };
+            border: {
+                value: string;
+            };
+            borderDisabled: {
+                value: string;
+            };
+            focusRing: {
+                value: string;
+            };
+        };
+        ghost: {
+            bg: {
+                value: string;
+            };
+            bgHover: {
+                value: string;
+            };
+            bgActive: {
+                value: string;
+            };
+            bgDisabled: {
+                value: string;
+            };
+            text: {
+                value: string;
+            };
+            textDisabled: {
+                value: string;
+            };
+            focusRing: {
+                value: string;
+            };
+        };
+        danger: {
+            bg: {
+                value: string;
+                metadata: {
+                    pair: string;
+                };
+            };
+            bgHover: {
+                value: string;
+            };
+            bgActive: {
+                value: string;
+            };
+            bgDisabled: {
+                value: string;
+            };
+            text: {
+                value: string;
+            };
+            textDisabled: {
+                value: string;
+            };
+            focusRing: {
+                value: string;
+            };
+        };
+        success: {
+            bg: {
+                value: string;
+                metadata: {
+                    pair: string;
+                };
+            };
+            bgHover: {
+                value: string;
+            };
+            bgActive: {
+                value: string;
+            };
+            bgDisabled: {
+                value: string;
+            };
+            text: {
+                value: string;
+            };
+            textDisabled: {
+                value: string;
+            };
+            focusRing: {
+                value: string;
+            };
+        };
+        cta: {
+            bg: {
+                value: string;
+                metadata: {
+                    pair: string;
+                };
+            };
+            bgHover: {
+                value: string;
+            };
+            bgActive: {
+                value: string;
+            };
+            bgDisabled: {
+                value: string;
+            };
+            text: {
+                value: string;
+            };
+            textDisabled: {
+                value: string;
+            };
+            shadow: {
+                value: string;
+            };
+            focusRing: {
+                value: string;
+            };
+        };
+        accent: {
+            bg: {
+                value: string;
+                metadata: {
+                    pair: string;
+                };
+            };
+            bgHover: {
+                value: string;
+            };
+            bgActive: {
+                value: string;
+            };
+            bgDisabled: {
+                value: string;
+            };
+            text: {
+                value: string;
+            };
+            textDisabled: {
+                value: string;
+            };
+            focusRing: {
+                value: string;
+            };
+        };
+    };
+    forms: {
+        default: {
+            bg: {
+                value: string;
+            };
+            border: {
+                value: string;
+            };
+            text: {
+                value: string;
+            };
+            placeholder: {
+                value: string;
+            };
+        };
+        hover: {
+            border: {
+                value: string;
+            };
+        };
+        focus: {
+            border: {
+                value: string;
+            };
+            ring: {
+                value: string;
+            };
+        };
+        valid: {
+            border: {
+                value: string;
+            };
+            bg: {
+                value: string;
+                metadata: {
+                    pair: string;
+                };
+            };
+            text: {
+                value: string;
+            };
+        };
+        invalid: {
+            border: {
+                value: string;
+            };
+            bg: {
+                value: string;
+                metadata: {
+                    pair: string;
+                };
+            };
+            text: {
+                value: string;
+            };
+        };
+        disabled: {
+            bg: {
+                value: string;
+            };
+            border: {
+                value: string;
+            };
+            text: {
+                value: string;
+            };
+        };
+    };
+    modes: {
+        default: {
+            surface: {
+                page: {
+                    value: string;
+                };
+                card: {
+                    value: string;
+                };
+                input: {
+                    value: string;
+                };
+                overlay: {
+                    value: string;
+                };
+                alternate: {
+                    value: string;
+                };
+                hero: {
+                    value: string;
+                };
+            };
+            text: {
+                onPage: {
+                    default: {
+                        value: string;
+                    };
+                    muted: {
+                        value: string;
+                    };
+                    subtle: {
+                        value: string;
+                    };
+                    meta: {
+                        value: string;
+                    };
+                    brand: {
+                        value: string;
+                    };
+                };
+                onSurface: {
+                    default: {
+                        value: string;
+                    };
+                    muted: {
+                        value: string;
+                    };
+                    subtle: {
+                        value: string;
+                    };
+                    meta: {
+                        value: string;
+                    };
+                    brand: {
+                        value: string;
+                    };
+                };
+            };
+            component: {
+                card: {
+                    text: {
+                        value: string;
+                    };
+                    textMuted: {
+                        value: string;
+                    };
+                };
+                input: {
+                    text: {
+                        value: string;
+                    };
+                    placeholder: {
+                        value: string;
+                    };
+                };
+                button: {
+                    textDefault: {
+                        value: string;
+                    };
+                    textOnPrimary: {
+                        value: string;
+                    };
+                };
+                badge: {
+                    neutralBg: {
+                        value: string;
+                        metadata: {
+                            pair: string;
+                        };
+                    };
+                    neutralText: {
+                        value: string;
+                        metadata: {};
+                    };
+                    infoBg: {
+                        value: string;
+                        metadata: {
+                            pair: string;
+                        };
+                    };
+                    infoText: {
+                        value: string;
+                        metadata: {};
+                    };
+                    successBg: {
+                        value: string;
+                        metadata: {
+                            pair: string;
+                        };
+                    };
+                    successText: {
+                        value: string;
+                        metadata: {};
+                    };
+                    warningBg: {
+                        value: string;
+                        metadata: {
+                            pair: string;
+                        };
+                    };
+                    warningText: {
+                        value: string;
+                        metadata: {};
+                    };
+                    dangerBg: {
+                        value: string;
+                        metadata: {
+                            pair: string;
+                        };
+                    };
+                    dangerText: {
+                        value: string;
+                        metadata: {};
+                    };
+                };
+                iconBox: {
+                    bg: {
+                        value: string;
+                        metadata: {};
+                    };
+                    border: {
+                        value: string;
+                        metadata: {};
+                    };
+                    iconDefault: {
+                        value: string;
+                        metadata: {};
+                    };
+                    iconSuccess: {
+                        value: string;
+                        metadata: {};
+                    };
+                    iconWarning: {
+                        value: string;
+                        metadata: {};
+                    };
+                    iconDanger: {
+                        value: string;
+                        metadata: {};
+                    };
+                };
+                testimonial: {
+                    bg: {
+                        value: string;
+                        metadata: {};
+                    };
+                    border: {
+                        value: string;
+                        metadata: {};
+                    };
+                    text: {
+                        value: string;
+                        metadata: {};
+                    };
+                    authorName: {
+                        value: string;
+                        metadata: {};
+                    };
+                    authorTitle: {
+                        value: string;
+                        metadata: {};
+                    };
+                    quoteMark: {
+                        value: string;
+                        metadata: {};
+                    };
+                };
+                pricingCard: {
+                    bg: {
+                        value: string;
+                        metadata: {};
+                    };
+                    border: {
+                        value: string;
+                        metadata: {};
+                    };
+                    featuredBg: {
+                        value: string;
+                        metadata: {
+                            pair: string;
+                        };
+                    };
+                    featuredText: {
+                        value: string;
+                        metadata: {};
+                    };
+                    featuredBadgeBg: {
+                        value: string;
+                        metadata: {
+                            pair: string;
+                        };
+                    };
+                    featuredBadgeText: {
+                        value: string;
+                        metadata: {};
+                    };
+                    price: {
+                        value: string;
+                        metadata: {};
+                    };
+                    priceDescription: {
+                        value: string;
+                        metadata: {};
+                    };
+                };
+                rating: {
+                    starFilled: {
+                        value: string;
+                        metadata: {};
+                    };
+                    starEmpty: {
+                        value: string;
+                        metadata: {};
+                    };
+                    text: {
+                        value: string;
+                        metadata: {};
+                    };
+                };
+            };
+        };
+        dark: {
+            surface: {
+                page: {
+                    value: string;
+                };
+                card: {
+                    value: string;
+                };
+                input: {
+                    value: string;
+                };
+                overlay: {
+                    value: string;
+                };
+                alternate: {
+                    value: string;
+                };
+                hero: {
+                    value: string;
+                };
+            };
+            text: {
+                onPage: {
+                    default: {
+                        value: string;
+                    };
+                    muted: {
+                        value: string;
+                    };
+                    subtle: {
+                        value: string;
+                    };
+                    meta: {
+                        value: string;
+                    };
+                    brand: {
+                        value: string;
+                    };
+                };
+                onSurface: {
+                    default: {
+                        value: string;
+                    };
+                    muted: {
+                        value: string;
+                    };
+                    subtle: {
+                        value: string;
+                    };
+                    meta: {
+                        value: string;
+                    };
+                    brand: {
+                        value: string;
+                    };
+                };
+            };
+            component: {
+                card: {
+                    text: {
+                        value: string;
+                    };
+                    textMuted: {
+                        value: string;
+                    };
+                };
+                input: {
+                    text: {
+                        value: string;
+                    };
+                    placeholder: {
+                        value: string;
+                    };
+                };
+                button: {
+                    textDefault: {
+                        value: string;
+                    };
+                    textOnPrimary: {
+                        value: string;
+                    };
+                };
+                badge: {
+                    neutralBg: {
+                        value: string;
+                        metadata: {
+                            pair: string;
+                        };
+                    };
+                    neutralBgHover: {
+                        value: string;
+                    };
+                    neutralText: {
+                        value: string;
+                        metadata: {};
+                    };
+                    infoBg: {
+                        value: string;
+                        metadata: {
+                            pair: string;
+                        };
+                    };
+                    infoBgHover: {
+                        value: string;
+                    };
+                    infoText: {
+                        value: string;
+                        metadata: {};
+                    };
+                    successBg: {
+                        value: string;
+                        metadata: {
+                            pair: string;
+                        };
+                    };
+                    successBgHover: {
+                        value: string;
+                    };
+                    successText: {
+                        value: string;
+                        metadata: {};
+                    };
+                    warningBg: {
+                        value: string;
+                        metadata: {
+                            pair: string;
+                        };
+                    };
+                    warningBgHover: {
+                        value: string;
+                    };
+                    warningText: {
+                        value: string;
+                        metadata: {};
+                    };
+                    dangerBg: {
+                        value: string;
+                        metadata: {
+                            pair: string;
+                        };
+                    };
+                    dangerBgHover: {
+                        value: string;
+                    };
+                    dangerText: {
+                        value: string;
+                        metadata: {};
+                    };
+                };
+                iconBox: {
+                    bg: {
+                        value: string;
+                        metadata: {};
+                    };
+                    border: {
+                        value: string;
+                        metadata: {};
+                    };
+                    iconDefault: {
+                        value: string;
+                        metadata: {};
+                    };
+                    iconSuccess: {
+                        value: string;
+                        metadata: {};
+                    };
+                    iconWarning: {
+                        value: string;
+                        metadata: {};
+                    };
+                    iconDanger: {
+                        value: string;
+                        metadata: {};
+                    };
+                };
+                testimonial: {
+                    bg: {
+                        value: string;
+                        metadata: {};
+                    };
+                    border: {
+                        value: string;
+                        metadata: {};
+                    };
+                    text: {
+                        value: string;
+                        metadata: {};
+                    };
+                    authorName: {
+                        value: string;
+                        metadata: {};
+                    };
+                    authorTitle: {
+                        value: string;
+                        metadata: {};
+                    };
+                    quoteMark: {
+                        value: string;
+                        metadata: {};
+                    };
+                };
+                pricingCard: {
+                    bg: {
+                        value: string;
+                        metadata: {};
+                    };
+                    border: {
+                        value: string;
+                        metadata: {};
+                    };
+                    featuredBg: {
+                        value: string;
+                        metadata: {
+                            pair: string;
+                        };
+                    };
+                    featuredText: {
+                        value: string;
+                        metadata: {};
+                    };
+                    featuredBadgeBg: {
+                        value: string;
+                        metadata: {
+                            pair: string;
+                        };
+                    };
+                    featuredBadgeText: {
+                        value: string;
+                        metadata: {};
+                    };
+                    price: {
+                        value: string;
+                        metadata: {};
+                    };
+                    priceDescription: {
+                        value: string;
+                        metadata: {};
+                    };
+                };
+                rating: {
+                    starFilled: {
+                        value: string;
+                        metadata: {};
+                    };
+                    starEmpty: {
+                        value: string;
+                        metadata: {};
+                    };
+                    text: {
+                        value: string;
+                        metadata: {};
+                    };
+                };
+            };
+        };
+    };
+    colors: {
+        brand: {
+            '50': string;
+            '100': string;
+            '200': string;
+            '300': string;
+            '400': string;
+            '500': string;
+            '600': string;
+            '700': string;
+            '800': string;
+            '900': string;
+        };
+        neutral: {
+            '50': string;
+            '100': string;
+            '200': string;
+            '300': string;
+            '400': string;
+            '500': string;
+            '600': string;
+            '700': string;
+            '800': string;
+            '900': string;
+        };
+        accent: {
+            '50': string;
+            '100': string;
+            '200': string;
+            '300': string;
+            '400': string;
+            '500': string;
+            '600': string;
+            '700': string;
+            '800': string;
+            '900': string;
+        };
+        success: {
+            '50': string;
+            '100': string;
+            '200': string;
+            '300': string;
+            '400': string;
+            '500': string;
+            '600': string;
+            '700': string;
+            '800': string;
+            '900': string;
+        };
+        warning: {
+            '50': string;
+            '100': string;
+            '200': string;
+            '300': string;
+            '400': string;
+            '500': string;
+            '600': string;
+            '700': string;
+            '800': string;
+            '900': string;
+        };
+        error: {
+            '50': string;
+            '100': string;
+            '200': string;
+            '300': string;
+            '400': string;
+            '500': string;
+            '600': string;
+            '700': string;
+            '800': string;
+            '900': string;
+        };
+        info: {
+            '50': string;
+            '100': string;
+            '200': string;
+            '300': string;
+            '400': string;
+            '500': string;
+            '600': string;
+            '700': string;
+            '800': string;
+            '900': string;
+        };
+        indigo: {
+            '500': string;
+            '600': string;
+        };
+        violet: {
+            '600': string;
+        };
+        focus: {
+            primary: string;
+            error: string;
+            info: string;
+        };
+        white: string;
+        black: string;
+    };
+    space: {
+        '0': string;
+        '4': string;
+        '8': string;
+        '12': string;
+        '16': string;
+        '20': string;
+        '24': string;
+        '32': string;
+        '40': string;
+        '48': string;
+        '56': string;
+        '64': string;
+        '80': string;
+        '96': string;
+    };
+    radii: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        pill: string;
+    };
+    shadows: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    breakpoints: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    zIndex: {
+        base: string;
+        dropdown: string;
+        sticky: string;
+        fixed: string;
+        overlay: string;
+        modal: string;
+        popover: string;
+        tooltip: string;
+    };
+    transitions: {
+        duration: {
+            instant: string;
+            fast: string;
+            base: string;
+            moderate: string;
+            slow: string;
+            slower: string;
+        };
+        easing: {
+            linear: string;
+            in: string;
+            out: string;
+            inOut: string;
+            spring: string;
+        };
+    };
+    animations: {
+        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;
+        hover: string;
+        active: string;
+        focus: string;
+        overlay: string;
+        tooltip: string;
+    };
+    aspectRatios: {
+        square: string;
+        video: string;
+        portrait: string;
+        landscape: string;
+        ultrawide: string;
+        hero: string;
+    };
+    icons: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+    };
+    accessibility: {
+        focusRing: {
+            width: string;
+            offset: string;
+            style: string;
+        };
+        minTouchTarget: string;
+        minTextSize: string;
+    };
+    borders: {
+        card: string;
+        input: string;
+    };
+    border: {
+        width: {
+            base: string;
+            thick: string;
+        };
+    };
+    surface: {
+        page: {
+            value: string;
+            description: string;
+        };
+        card: {
+            value: string;
+            description: string;
+        };
+        input: {
+            value: string;
+            description: string;
+        };
+        overlay: {
+            value: string;
+            description: string;
+        };
+    };
+    text: {
+        onPage: {
+            default: string;
+            muted: string;
+            subtle: string;
+            meta: string;
+            brand: string;
+        };
+        onSurface: {
+            default: string;
+            muted: string;
+            subtle: string;
+            meta: string;
+            brand: string;
+        };
+    };
+    layout: {
+        section: {
+            padding: {
+                sm: string;
+                md: string;
+                lg: string;
+            };
+            gap: {
+                sm: string;
+                md: string;
+                lg: string;
+            };
+        };
+        stack: {
+            gap: {
+                sm: string;
+                md: string;
+                lg: string;
+            };
+        };
+        container: {
+            paddingInline: {
+                sm: string;
+                md: string;
+                lg: string;
+            };
+            maxWidth: string;
+        };
+    };
+    font: {
+        xs: {
+            size: string;
+            lineHeight: string;
+            weight: number;
+        };
+        sm: {
+            size: string;
+            lineHeight: string;
+            weight: number;
+        };
+        md: {
+            size: string;
+            lineHeight: string;
+            weight: number;
+        };
+        lg: {
+            size: string;
+            lineHeight: string;
+            weight: number;
+        };
+        xl: {
+            size: string;
+            lineHeight: string;
+            weight: number;
+        };
+        '2xl': {
+            size: string;
+            lineHeight: string;
+            weight: number;
+        };
+    };
+    typography: {
+        families: {
+            sans: string;
+            serif: string;
+            mono: string;
+        };
+        scale: {
+            xs: {
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: number;
+                letterSpacing: string;
+            };
+            sm: {
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: number;
+            };
+            md: {
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: number;
+            };
+            lg: {
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: number;
+            };
+            xl: {
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: number;
+            };
+            '2xl': {
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: number;
+            };
+            '3xl': {
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: number;
+            };
+            '4xl': {
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: number;
+            };
+            '5xl': {
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: number;
+            };
+            '6xl': {
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: number;
+            };
+        };
+    };
+}
+
 type ColorScale = Record<string, string>;
 type TokenScale = Record<string, string>;
 interface TypographyScaleEntry {
@@ -6,11 +1345,6 @@ interface TypographyScaleEntry {
     fontWeight?: number;
     letterSpacing?: string;
 }
-interface FontScaleEntry {
-    size: string;
-    lineHeight: string;
-    weight: number;
-}
 interface TypographyTokens {
     families: Record<string, string>;
     scale: Record<string, TypographyScaleEntry>;
@@ -112,12 +1446,12 @@ interface ComponentTokens<Value = string> {
     testimonial: ComponentTestimonialTokens<Value>;
     pricingCard: ComponentPricingCardTokens<Value>;
     rating: ComponentRatingTokens<Value>;
-    [key: string]: any;
+    [key: string]: unknown;
 }
 type SpectreModeName = 'default' | 'dark';
 type SemanticTokenValue = string | {
     value: string;
-    [key: string]: any;
+    [key: string]: unknown;
 };
 interface SpectreModeTokens {
     surface: {
@@ -144,59 +1478,8 @@ interface SpectreModeTokens {
     };
     component: ComponentTokens<SemanticTokenValue>;
 }
-interface SpectreTokens {
-    colors: any;
-    space: TokenScale;
-    layout: LayoutTokens;
-    radii: any;
-    typography: any;
-    font: {
-        xs: FontScaleEntry;
-        sm: FontScaleEntry;
-        md: FontScaleEntry;
-        lg: FontScaleEntry;
-        xl: FontScaleEntry;
-        ['2xl']: FontScaleEntry;
-    };
-    shadows: any;
-    breakpoints: any;
-    zIndex: any;
-    transitions: any;
-    buttons?: any;
-    forms?: any;
-    accessibility?: any;
-    opacity?: any;
-    animations?: any;
-    borders?: any;
-    surface: {
-        page: SemanticTokenValue;
-        card: SemanticTokenValue;
-        input: SemanticTokenValue;
-        overlay: SemanticTokenValue;
-        [key: string]: SemanticTokenValue;
-    };
-    text: {
-        onPage: {
-            default: string;
-            muted: string;
-            subtle: string;
-            meta: string;
-        };
-        onSurface: {
-            default: string;
-            muted: string;
-            subtle: string;
-            meta: string;
-        };
-        [key: string]: any;
-    };
-    component: ComponentTokens<SemanticTokenValue>;
-    modes: {
-        default: Partial<SpectreModeTokens>;
-        dark: Partial<SpectreModeTokens>;
-        [mode: string]: Partial<SpectreModeTokens>;
-    };
-}
+
+type SpectreTokens = SpectreGeneratedTokens;
 interface LayoutTokens {
     section: {
         padding: TokenScale;
@@ -207,46 +1490,33 @@ interface LayoutTokens {
     };
     container: {
         paddingInline: TokenScale;
+        maxWidth: string;
     };
 }
-interface Tokens {
-    colors: Record<string, ColorScale>;
-    opacity: TokenScale;
-    accessibility: AccessibilityTokens;
-    buttons: Record<string, ButtonStateTokens>;
-    forms: Record<string, FormStateTokens>;
-    component: ComponentTokens;
-    space: TokenScale;
-    layout: LayoutTokens;
-    radii: TokenScale;
-    typography: TypographyTokens;
-    font: Record<string, FontScaleEntry>;
-    shadows: TokenScale;
-    breakpoints: TokenScale;
-    zIndex: TokenScale;
-    transitions: TransitionTokens;
-    animations: Record<string, AnimationEntry>;
+interface Tokens extends Omit<SpectreGeneratedTokens, 'modes' | 'surface' | 'text'> {
 }
 interface CssVariableOptions {
     selector?: string;
     prefix?: string;
 }
 interface TailwindTheme {
-    colors: Record<string, string | Record<string, string>>;
-    spacing: TokenScale;
-    borderRadius: TokenScale;
+    colors: SpectreGeneratedTokens['colors'] | Record<string, string | Record<string, string>>;
+    spacing: SpectreGeneratedTokens['space'];
+    borderRadius: SpectreGeneratedTokens['radii'];
     fontFamily: Record<string, string[]>;
     fontSize: Record<string, [string, {
         lineHeight: string;
         fontWeight?: number;
         letterSpacing?: string;
     }]>;
-    boxShadow: TokenScale;
-    screens: TokenScale;
-    zIndex: TokenScale;
-    transitionDuration: TokenScale;
-    transitionTimingFunction: TokenScale;
-    opacity: TokenScale;
+    boxShadow: SpectreGeneratedTokens['shadows'];
+    screens: SpectreGeneratedTokens['breakpoints'];
+    zIndex: SpectreGeneratedTokens['zIndex'];
+    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;