@common-origin/design-system 2.12.1 → 2.13.0

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

@@ -0,0 +1,889 @@
+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;
+            "12": string;
+            "14": string;
+            "16": string;
+            "20": string;
+            "24": string;
+            "28": string;
+            "32": string;
+            "40": string;
+            "48": string;
+            "56": string;
+            "64": string;
+            auto: string;
+            full: string;
+            screen: string;
+            min: string;
+            max: string;
+            fit: string;
+        };
+        color: {
+            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;
+        };
+        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;
+        };
+        $ref: 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;
+                    };
+                };
+                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: {
+            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;
+            };
+        };
+        badge: {
+            dot: {
+                size: string;
+            };
+            count: {
+                minWidth: string;
+                height: string;
+                paddingX: string;
+            };
+            ring: {
+                width: string;
+            };
+            borderRadius: string;
+        };
+        $ref: string;
+    };
+    semantic: {
+        elevation: {
+            none: string;
+            inset: string;
+            raised: string;
+            floating: string;
+            overlay: string;
+            sticky: string;
+        };
+        border: {
+            default: string;
+            subtle: string;
+            strong: string;
+            focus: string;
+            tooltip: string;
+            radius: {
+                none: string;
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+                "2xl": string;
+                "3xl": string;
+                circle: string;
+            };
+        };
+        size: {
+            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;
+                auto: string;
+            };
+        };
+        color: {
+            text: {
+                default: string;
+                emphasis: string;
+                subdued: string;
+                inverse: string;
+                disabled: string;
+                interactive: string;
+                error: string;
+                success: string;
+                warning: string;
+            };
+            background: {
+                default: string;
+                subtle: string;
+                emphasis: string;
+                surface: string;
+                inverse: string;
+                interactive: string;
+                "interactive-subtle": string;
+                "interactive-hover": string;
+                "interactive-active": string;
+                error: string;
+                "error-subtle": string;
+                success: string;
+                "success-subtle": string;
+                warning: string;
+                "warning-subtle": string;
+                disabled: string;
+                progressTrack: string;
+                page: string;
+                overlay: string;
+                "hover-overlay": string;
+                "active-overlay": string;
+            };
+            border: {
+                default: string;
+                subtle: string;
+                strong: string;
+                interactive: string;
+                error: string;
+                success: string;
+                warning: 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-emphasis": string;
+                "blue-subtle": string;
+                purple: string;
+                "purple-emphasis": string;
+                "purple-subtle": string;
+                pink: string;
+                "pink-emphasis": string;
+                "pink-subtle": string;
+                yellow: string;
+                "yellow-emphasis": string;
+                "yellow-subtle": string;
+                green: string;
+                "green-emphasis": string;
+                "green-subtle": string;
+                red: string;
+                "red-emphasis": string;
+                "red-subtle": string;
+                orange: string;
+                "orange-emphasis": string;
+                "orange-subtle": string;
+                gray: string;
+                "gray-emphasis": string;
+                "gray-subtle": 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: {
+            transition: {
+                fast: string;
+                normal: string;
+                slow: string;
+            };
+            hover: string;
+            focus: string;
+            interactive: string;
+        };
+        $ref: string;
+    };
+};
+export type Tokens = typeof tokens;
+export type TokensBase = Tokens['base'];
+export type TokensSemantic = Tokens['semantic'];
+export type TokensComponent = Tokens['component'];