@common-origin/design-system 2.18.0 → 2.20.0

package/dist/tokens/types/tokens.d.ts

@@ -1,1207 +1,6 @@
-export declare const tokens: {
-    base: {
-        border: {
-            radius: {
-                "1": string;
-                "2": string;
-                "3": string;
-                "4": string;
-                "5": string;
-                "6": string;
-                "7": string;
-                circle: string;
-            };
-            style: {
-                solid: string;
-                dashed: string;
-                dotted: string;
-            };
-            width: {
-                "0": string;
-                "1": string;
-                "2": string;
-                "3": string;
-                "4": string;
-                "5": string;
-                "6": string;
-                "8": string;
-            };
-        };
-        shadow: {
-            "1": string;
-            "2": string;
-            "3": string;
-            "4": string;
-            "5": string;
-            "6": string;
-            none: string;
-        };
-        zIndex: {
-            "0": string;
-            "1": string;
-            "2": string;
-            "3": string;
-            "4": string;
-            "5": string;
-            "6": string;
-            "7": string;
-            "8": string;
-        };
-        opacity: {
-            "0": string;
-            "5": string;
-            "10": string;
-            "20": string;
-            "25": string;
-            "30": string;
-            "40": string;
-            "50": string;
-            "60": string;
-            "70": string;
-            "75": string;
-            "80": string;
-            "90": string;
-            "95": string;
-            "100": string;
-        };
-        size: {
-            "0": string;
-            "1": string;
-            "2": string;
-            "3": string;
-            "4": string;
-            "5": string;
-            "6": string;
-            "7": string;
-            "8": string;
-            "9": string;
-            "10": string;
-            "11": string;
-            "12": string;
-            "14": string;
-            "15": string;
-            "16": string;
-            "18": string;
-            "20": string;
-            "24": string;
-            "28": string;
-            "30": string;
-            "32": string;
-            "40": string;
-            "45": string;
-            "48": string;
-            "50": string;
-            "56": string;
-            "64": string;
-            "75": string;
-            "90": string;
-            "100": string;
-            "140": string;
-            "180": string;
-            "192": string;
-            auto: string;
-            full: string;
-            screen: string;
-            min: string;
-            max: string;
-            fit: string;
-        };
-        color: {
-            transparent: string;
-            neutral: {
-                "100": string;
-                "200": string;
-                "300": string;
-                "400": string;
-                "500": string;
-                "600": string;
-                "700": string;
-                "800": string;
-                "900": string;
-                "1000": string;
-                "000": string;
-            };
-            green: {
-                "100": string;
-                "200": string;
-                "300": string;
-                "400": string;
-                "500": string;
-                "600": string;
-                "700": string;
-                "800": string;
-                "900": string;
-                "1000": string;
-                "1100": string;
-                "1200": string;
-                "1300": string;
-            };
-            orange: {
-                "100": string;
-                "200": string;
-                "300": string;
-                "400": string;
-                "500": string;
-                "600": string;
-                "700": string;
-                "800": string;
-                "900": string;
-                "1000": string;
-                "1100": string;
-                "1200": string;
-                "1300": string;
-            };
-            red: {
-                "100": string;
-                "200": string;
-                "300": string;
-                "400": string;
-                "500": string;
-                "600": string;
-                "700": string;
-                "800": string;
-                "900": string;
-                "1000": string;
-                "1100": string;
-                "1200": string;
-                "1300": string;
-            };
-            blue: {
-                "100": string;
-                "200": string;
-                "300": string;
-                "400": string;
-                "500": string;
-                "600": string;
-                "700": string;
-                "800": string;
-                "900": string;
-                "1000": string;
-                "1100": string;
-                "1200": string;
-                "1300": string;
-            };
-            purple: {
-                "100": string;
-                "200": string;
-                "300": string;
-                "400": string;
-                "500": string;
-                "600": string;
-                "700": string;
-                "800": string;
-                "900": string;
-                "1000": string;
-                "1100": string;
-                "1200": string;
-                "1300": string;
-            };
-            pink: {
-                "100": string;
-                "200": string;
-                "300": string;
-                "400": string;
-                "500": string;
-                "600": string;
-                "700": string;
-                "800": string;
-                "900": string;
-                "1000": string;
-                "1100": string;
-                "1200": string;
-                "1300": string;
-            };
-            yellow: {
-                "100": string;
-                "200": string;
-                "300": string;
-                "400": string;
-                "500": string;
-                "600": string;
-                "700": string;
-                "800": string;
-                "900": string;
-                "1000": string;
-                "1100": string;
-                "1200": string;
-                "1300": string;
-            };
-        };
-        spacing: {
-            "0": string;
-            "1": string;
-            "2": string;
-            "3": string;
-            "4": string;
-            "5": string;
-            "6": string;
-            "7": string;
-            "8": string;
-            "9": string;
-            "10": string;
-            "12": string;
-            "14": string;
-            "16": string;
-            "20": string;
-            "24": string;
-            "28": string;
-            "32": string;
-            "40": string;
-            "48": string;
-            "56": string;
-            "64": string;
-            auto: string;
-        };
-        fontFamily: {
-            heading: string;
-            body: string;
-            monospace: string;
-        };
-        fontSize: {
-            "1": string;
-            "2": string;
-            "3": string;
-            "4": string;
-            "5": string;
-            "6": string;
-            "7": string;
-            "8": string;
-            "9": string;
-            "10": string;
-        };
-        fontWeight: {
-            "1": string;
-            "2": string;
-            "3": string;
-            "4": string;
-            "5": string;
-            "6": string;
-            "7": string;
-        };
-        lineHeight: {
-            "1": string;
-            "2": string;
-            "3": string;
-            "4": string;
-            "5": string;
-            "6": string;
-            "7": string;
-            "8": string;
-            "9": string;
-            "10": string;
-            "11": string;
-            none: string;
-        };
-        letterSpacing: {
-            "0": string;
-            "1": string;
-            "2": string;
-            "3": string;
-            "4": string;
-        };
-        breakpoint: {
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-            "2xl": string;
-        };
-        duration: {
-            instant: string;
-            fast: string;
-            normal: string;
-            moderate: string;
-            slow: string;
-            slower: string;
-            slowest: string;
-        };
-        easing: {
-            linear: string;
-            ease: string;
-            easeIn: string;
-            easeOut: string;
-            easeInOut: string;
-            easeInQuart: string;
-            easeOutQuart: string;
-            easeInOutQuart: string;
-            easeInBack: string;
-            easeOutBack: string;
-            easeInOutBack: string;
-        };
-    };
-    component: {
-        button: {
-            primary: {
-                backgroundColor: string;
-                textColor: string;
-                borderRadius: string;
-                padding: string;
-                font: string;
-            };
-            hover: {
-                backgroundColor: string;
-            };
-            active: {
-                backgroundColor: string;
-            };
-            focus: {
-                outline: string;
-                outlineOffset: string;
-            };
-            disabled: {
-                backgroundColor: string;
-                textColor: string;
-            };
-            variants: {
-                secondary: {
-                    backgroundColor: string;
-                    textColor: string;
-                    hover: {
-                        backgroundColor: string;
-                    };
-                    active: {
-                        backgroundColor: string;
-                    };
-                    disabled: {
-                        backgroundColor: string;
-                        textColor: string;
-                    };
-                };
-                naked: {
-                    backgroundColor: string;
-                    textColor: string;
-                    hover: {
-                        backgroundColor: string;
-                    };
-                    active: {
-                        backgroundColor: string;
-                    };
-                    disabled: {
-                        backgroundColor: string;
-                        textColor: string;
-                    };
-                };
-                accent: {
-                    backgroundColor: string;
-                    textColor: string;
-                    hover: {
-                        backgroundColor: string;
-                    };
-                    active: {
-                        backgroundColor: string;
-                    };
-                    disabled: {
-                        backgroundColor: string;
-                        textColor: string;
-                    };
-                };
-                emphasis: {
-                    backgroundColor: string;
-                    textColor: string;
-                    hover: {
-                        backgroundColor: string;
-                    };
-                    active: {
-                        backgroundColor: string;
-                    };
-                    disabled: {
-                        backgroundColor: string;
-                        textColor: string;
-                    };
-                };
-                danger: {
-                    backgroundColor: string;
-                    textColor: string;
-                    hover: {
-                        backgroundColor: string;
-                    };
-                    active: {
-                        backgroundColor: string;
-                    };
-                    disabled: {
-                        backgroundColor: string;
-                        textColor: string;
-                    };
-                };
-            };
-            sizes: {
-                small: {
-                    padding: string;
-                    font: string;
-                };
-                medium: {
-                    padding: string;
-                    font: string;
-                };
-                large: {
-                    padding: string;
-                    font: string;
-                };
-            };
-        };
-        chip: {
-            closeButton: {
-                size: string;
-            };
-            default: {
-                backgroundColor: string;
-                textColor: string;
-                borderRadius: string;
-                padding: string;
-                font: string;
-            };
-            hover: {
-                backgroundColor: string;
-            };
-            active: {
-                backgroundColor: string;
-            };
-            focus: {
-                outline: string;
-                outlineOffset: string;
-            };
-            disabled: {
-                backgroundColor: string;
-                textColor: string;
-            };
-            variants: {
-                emphasis: {
-                    backgroundColor: string;
-                    textColor: string;
-                    hover: {
-                        backgroundColor: string;
-                    };
-                    active: {
-                        backgroundColor: string;
-                    };
-                    disabled: {
-                        backgroundColor: string;
-                        textColor: string;
-                    };
-                };
-                subtle: {
-                    backgroundColor: string;
-                    textColor: string;
-                    hover: {
-                        backgroundColor: string;
-                    };
-                    active: {
-                        backgroundColor: string;
-                    };
-                    disabled: {
-                        backgroundColor: string;
-                        textColor: string;
-                    };
-                };
-                interactive: {
-                    backgroundColor: string;
-                    textColor: string;
-                    hover: {
-                        backgroundColor: string;
-                    };
-                    active: {
-                        backgroundColor: string;
-                    };
-                    disabled: {
-                        backgroundColor: string;
-                        textColor: string;
-                    };
-                };
-            };
-            sizes: {
-                small: {
-                    padding: string;
-                    font: string;
-                };
-                medium: {
-                    padding: string;
-                    font: string;
-                };
-                large: {
-                    padding: string;
-                    font: string;
-                };
-            };
-        };
-        iconButton: {
-            primary: {
-                backgroundColor: string;
-                borderRadius: string;
-                minWidth: string;
-                minHeight: string;
-                display: string;
-                alignItems: string;
-                justifyContent: string;
-            };
-            hover: {
-                backgroundColor: string;
-            };
-            active: {
-                backgroundColor: string;
-            };
-            focus: {
-                outline: string;
-                outlineOffset: string;
-            };
-            disabled: {
-                backgroundColor: string;
-            };
-            variants: {
-                secondary: {
-                    backgroundColor: string;
-                    hover: {
-                        backgroundColor: string;
-                    };
-                    active: {
-                        backgroundColor: string;
-                    };
-                    disabled: {
-                        backgroundColor: string;
-                    };
-                };
-                naked: {
-                    backgroundColor: string;
-                    hover: {
-                        backgroundColor: string;
-                    };
-                    active: {
-                        backgroundColor: string;
-                    };
-                    disabled: {
-                        backgroundColor: string;
-                    };
-                };
-            };
-            sizes: {
-                small: {
-                    minWidth: string;
-                    minHeight: string;
-                    padding: string;
-                };
-                medium: {
-                    minWidth: string;
-                    minHeight: string;
-                    padding: string;
-                };
-                large: {
-                    minWidth: string;
-                    minHeight: string;
-                    padding: string;
-                };
-            };
-        };
-        separator: {
-            border: string;
-            margin: string;
-            variants: {
-                default: {
-                    border: string;
-                    margin: string;
-                };
-                strong: {
-                    border: string;
-                    margin: string;
-                };
-                minimal: {
-                    border: string;
-                    margin: string;
-                };
-            };
-            sizes: {
-                small: {
-                    margin: string;
-                };
-                medium: {
-                    margin: string;
-                };
-                large: {
-                    margin: string;
-                };
-                xlarge: {
-                    margin: string;
-                };
-            };
-        };
-        progressBar: {
-            backgroundColor: string;
-            borderRadius: string;
-            sizes: {
-                sm: {
-                    height: string;
-                };
-                md: {
-                    height: string;
-                };
-                lg: {
-                    height: string;
-                };
-                xl: {
-                    height: string;
-                };
-            };
-        };
-        input: {
-            default: {
-                backgroundColor: string;
-                textColor: string;
-                borderColor: string;
-                borderRadius: string;
-                borderWidth: string;
-                paddingY: string;
-                paddingX: string;
-                font: string;
-            };
-            placeholder: {
-                textColor: string;
-            };
-            hover: {
-                borderColor: string;
-            };
-            focus: {
-                borderColor: string;
-                outline: string;
-                outlineOffset: string;
-            };
-            error: {
-                borderColor: string;
-                focus: {
-                    borderColor: string;
-                    outline: string;
-                    outlineOffset: string;
-                };
-                hover: {
-                    borderColor: string;
-                };
-            };
-            disabled: {
-                backgroundColor: string;
-                textColor: string;
-                borderColor: string;
-                cursor: string;
-            };
-            textarea: {
-                minHeight: string;
-            };
-        };
-        badge: {
-            dot: {
-                size: string;
-            };
-            count: {
-                minWidth: string;
-                height: string;
-                paddingX: string;
-                lineHeight: string;
-            };
-            ring: {
-                width: string;
-            };
-            borderRadius: string;
-            label: {
-                fontWeight: string;
-                typography: {
-                    small: string;
-                    medium: string;
-                };
-            };
-        };
-        field: {
-            gap: string;
-            label: {
-                typography: string;
-                color: string;
-                colorDisabled: string;
-                gap: string;
-            };
-            requiredIndicator: {
-                color: string;
-                fontWeight: string;
-            };
-            helperText: {
-                typography: string;
-                color: string;
-                colorError: string;
-            };
-        };
-        alert: {
-            severity: {
-                error: {
-                    background: string;
-                    text: string;
-                };
-                warning: {
-                    background: string;
-                    text: string;
-                };
-                info: {
-                    background: string;
-                    text: string;
-                };
-                success: {
-                    background: string;
-                    text: string;
-                };
-            };
-            appearance: {
-                outlined: {
-                    borderColor: {
-                        error: string;
-                        warning: string;
-                        info: string;
-                        success: string;
-                    };
-                };
-                borderless: {
-                    borderColor: {
-                        error: string;
-                        warning: string;
-                        info: string;
-                        success: string;
-                    };
-                };
-            };
-            title: {
-                typography: string;
-                fontWeight: string;
-                lineHeight: string;
-            };
-            message: {
-                typography: string;
-                lineHeight: string;
-            };
-        };
-        tabBar: {
-            badge: {
-                typography: string;
-                fontWeight: string;
-                size: string;
-            };
-            scrollbar: {
-                height: string;
-            };
-        };
-        searchField: {
-            sectionHeader: {
-                typography: string;
-                letterSpacing: string;
-            };
-        };
-        avatar: {
-            initials: {
-                fontFamily: string;
-                fontWeight: string;
-                lineHeight: string;
-                fontSize: {
-                    xs: string;
-                    sm: string;
-                    md: string;
-                    lg: string;
-                    xl: string;
-                };
-            };
-        };
-        codeBlock: {
-            fontFamily: string;
-            fontSize: string;
-            lineHeight: string;
-        };
-        slider: {
-            thumb: {
-                shadow: {
-                    default: string;
-                    hover: string;
-                    active: string;
-                };
-            };
-        };
-        accountCard: {
-            header: {
-                minHeight: string;
-            };
-            minWidth: string;
-        };
-        breadcrumbs: {
-            item: {
-                maxWidth: string;
-            };
-        };
-        cardLarge: {
-            maxWidth: string;
-        };
-        checkbox: {
-            box: {
-                size: string;
-            };
-            row: {
-                minHeight: string;
-            };
-        };
-        emptyState: {
-            illustration: {
-                small: string;
-                medium: string;
-                large: string;
-            };
-            maxWidth: string;
-            text: {
-                maxWidth: string;
-            };
-            actions: {
-                maxWidth: string;
-            };
-        };
-        listItem: {
-            expandedIndent: {
-                compact: string;
-                comfortable: string;
-            };
-        };
-        transactionListItem: {
-            minHeight: string;
-        };
-    };
-    semantic: {
-        elevation: {
-            none: string;
-            inset: string;
-            raised: string;
-            floating: string;
-            overlay: string;
-            sticky: string;
-        };
-        breakpoint: {
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-            "2xl": string;
-        };
-        opacity: {
-            disabled: string;
-            full: string;
-        };
-        fontFamily: {
-            body: string;
-            monospace: string;
-        };
-        fontSize: {
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-        };
-        lineHeight: {
-            none: string;
-            tight: string;
-            normal: string;
-        };
-        letterSpacing: {
-            tighter: string;
-            tight: string;
-            normal: string;
-            wide: string;
-        };
-        fontWeight: {
-            regular: string;
-            medium: string;
-            semibold: string;
-            bold: string;
-        };
-        zIndex: {
-            sticky: string;
-            dropdown: string;
-            overlay: string;
-            modal: string;
-        };
-        border: {
-            default: string;
-            subtle: string;
-            strong: string;
-            focus: string;
-            tooltip: string;
-            width: {
-                thin: string;
-                thick: string;
-            };
-            focusOffset: string;
-            radius: {
-                none: string;
-                xs: string;
-                sm: string;
-                md: string;
-                lg: string;
-                xl: string;
-                "2xl": string;
-                "3xl": string;
-                circle: string;
-            };
-        };
-        size: {
-            touchTarget: string;
-            overlay: {
-                sm: string;
-                md: string;
-                lg: string;
-            };
-            label: {
-                small: string;
-                medium: string;
-                large: string;
-            };
-            menu: {
-                maxHeight: string;
-            };
-            dimension: {
-                "1": string;
-                "2": string;
-                "4": string;
-                "5": string;
-                "6": string;
-                "8": string;
-                "12": string;
-                "15": string;
-                "18": string;
-                "20": string;
-                "30": string;
-                "45": string;
-                "50": string;
-                "75": string;
-                "90": string;
-                "100": string;
-                "192": string;
-            };
-            icon: {
-                xs: string;
-                sm: string;
-                md: string;
-                lg: string;
-                xl: string;
-                "2xl": string;
-            };
-            avatar: {
-                xs: string;
-                sm: string;
-                md: string;
-                lg: string;
-                xl: string;
-            };
-        };
-        spacing: {
-            separator: {
-                sm: string;
-                md: string;
-                lg: string;
-                xl: string;
-            };
-            component: {
-                xs: string;
-                sm: string;
-                md: string;
-                lg: string;
-                xl: string;
-                "2xl": string;
-            };
-            layout: {
-                none: string;
-                xs: string;
-                sm: string;
-                md: string;
-                lg: string;
-                xl: string;
-                "2xl": string;
-                "3xl": string;
-                "4xl": string;
-                "5xl": string;
-                "6xl": string;
-                "7xl": string;
-                "8xl": string;
-                "9xl": string;
-                "10xl": string;
-                "11xl": string;
-                auto: string;
-            };
-        };
-        color: {
-            text: {
-                default: string;
-                emphasis: string;
-                subdued: string;
-                inverse: string;
-                disabled: string;
-                interactive: string;
-                "interactive-hover": string;
-                "interactive-active": string;
-                error: string;
-                success: string;
-                warning: string;
-            };
-            background: {
-                default: string;
-                subtle: string;
-                emphasis: string;
-                "emphasis-hover": string;
-                "emphasis-active": string;
-                surface: string;
-                inverse: string;
-                interactive: string;
-                "interactive-subtle": string;
-                "interactive-subtle-hover": string;
-                "interactive-subtle-active": string;
-                "interactive-hover": string;
-                "interactive-active": string;
-                error: string;
-                "error-hover": string;
-                "error-active": string;
-                "error-subtle": string;
-                success: string;
-                "success-subtle": string;
-                warning: string;
-                "warning-subtle": string;
-                disabled: string;
-                neutral: string;
-                "neutral-hover": string;
-                "neutral-active": string;
-                transparent: string;
-                progressTrack: string;
-                page: string;
-                overlay: string;
-                "hover-overlay": string;
-                "active-overlay": string;
-                "inverse-overlay": string;
-            };
-            border: {
-                default: string;
-                subtle: string;
-                control: string;
-                strong: string;
-                interactive: string;
-                error: string;
-                success: string;
-                warning: string;
-                none: string;
-            };
-            icon: {
-                default: string;
-                emphasis: string;
-                subdued: string;
-                disabled: string;
-                inverse: string;
-                interactive: string;
-                "interactive-hover": string;
-                "interactive-active": string;
-                error: string;
-                success: string;
-                warning: string;
-            };
-            financial: {
-                credit: string;
-                "credit-hover": string;
-                debit: string;
-                "debit-hover": string;
-                pending: string;
-                neutral: string;
-            };
-            category: {
-                blue: string;
-                "blue-strong": string;
-                "blue-emphasis": string;
-                "blue-subtle": string;
-                purple: string;
-                "purple-strong": string;
-                "purple-emphasis": string;
-                "purple-subtle": string;
-                pink: string;
-                "pink-strong": string;
-                "pink-emphasis": string;
-                "pink-subtle": string;
-                yellow: string;
-                "yellow-strong": string;
-                "yellow-emphasis": string;
-                "yellow-subtle": string;
-                green: string;
-                "green-strong": string;
-                "green-emphasis": string;
-                "green-subtle": string;
-                red: string;
-                "red-strong": string;
-                "red-emphasis": string;
-                "red-subtle": string;
-                orange: string;
-                "orange-strong": string;
-                "orange-emphasis": string;
-                "orange-subtle": string;
-                gray: string;
-                "gray-strong": string;
-                "gray-emphasis": string;
-                "gray-subtle": string;
-                "blue-text": string;
-                "purple-text": string;
-                "pink-text": string;
-                "yellow-text": string;
-                "green-text": string;
-                "red-text": string;
-                "orange-text": string;
-                "gray-text": string;
-            };
-            status: {
-                pending: string;
-                "pending-bg": string;
-                completed: string;
-                "completed-bg": string;
-                failed: string;
-                "failed-bg": string;
-                cancelled: string;
-                "cancelled-bg": string;
-                processing: string;
-                "processing-bg": string;
-                scheduled: string;
-                "scheduled-bg": string;
-            };
-        };
-        typography: {
-            display: string;
-            h1: string;
-            h2: string;
-            h3: string;
-            h4: string;
-            h5: string;
-            h6: string;
-            subtitle: string;
-            body: string;
-            small: string;
-            overline: string;
-            caption: string;
-            button1: string;
-            button2: string;
-            button3: string;
-            label: string;
-            breadcrumb: string;
-        };
-        motion: {
-            duration: {
-                normal: string;
-                fast: string;
-                slow: string;
-            };
-            easing: {
-                easeInOut: string;
-                easeOut: string;
-            };
-            transition: {
-                fast: string;
-                normal: string;
-                slow: string;
-            };
-            hover: string;
-            focus: string;
-            interactive: string;
-        };
-    };
-};
-export type Tokens = typeof tokens;
+import type { Tokens } from '../styles/tokens';
+export declare const tokens: Tokens;
+export type { Tokens };
 export type TokensBase = Tokens['base'];
 export type TokensSemantic = Tokens['semantic'];
 export type TokensComponent = Tokens['component'];