Variable themeConst

theme: Flattened<
    {
        borderRadius: {
            cta: { value: "{borderRadius.full}" };
            input: { value: "{borderRadius.sm}" };
            link: { value: "{borderRadius.full}" };
            modal: { value: "{borderRadius.sm}" };
            select: {
                trigger: { value: "{borderRadius.sm}" };
                list: { value: "{borderRadius.sm}" };
            };
            none: { value: 0 };
            xs: {
                value: "{font.size.base}";
                modify: { type: "multiply"; value: 0.25 };
            };
            sm: {
                value: "{font.size.base}";
                modify: { type: "multiply"; value: 0.5 };
            };
            md: {
                value: "{font.size.base}";
                modify: { type: "multiply"; value: 0.75 };
            };
            lg: { value: "{font.size.base}"; modify: { type: "multiply"; value: 1 } };
            xl: {
                value: "{font.size.base}";
                modify: { type: "multiply"; value: 1.5 };
            };
            full: { value: 99999 };
        };
        colors: {
            page: {
                bg: { default: { value: "{colors.bg.default}" } };
                border: { default: { value: "{colors.line.default}" } };
                text: {
                    default: { value: "{colors.fg.default}" };
                    muted: { value: "{colors.fg.muted}" };
                };
            };
            cta: {
                primary: {
                    bg: {
                        default: { value: "{colors.bg.primary}" };
                        hover: {
                            value: "{colors.bg.primary}";
                            modify: {
                                type: "color-mix";
                                value: readonly [readonly ["{colors.bg.contrast}", "15%"]];
                            };
                        };
                        pressed: {
                            value: "{colors.bg.primary}";
                            modify: {
                                type: "color-mix";
                                value: readonly [readonly ["{colors.bg.contrast}", "30%"]];
                            };
                        };
                    };
                    border: { focus: { value: "{colors.line.primary}" } };
                    text: {
                        default: { value: "{colors.fg.onPrimary}" };
                        hover: { value: "{colors.fg.onPrimary}" };
                    };
                };
                secondary: {
                    bg: {
                        default: { value: "{colors.bg.secondary}" };
                        hover: {
                            value: "{colors.bg.secondary}";
                            modify: {
                                type: "color-mix";
                                value: readonly [readonly ["{colors.bg.contrast}", "10%"]];
                            };
                        };
                        pressed: {
                            value: "{colors.bg.secondary}";
                            modify: {
                                type: "color-mix";
                                value: readonly [readonly ["{colors.bg.contrast}", "20%"]];
                            };
                        };
                    };
                    border: { focus: { value: "{colors.line.primary}" } };
                    text: {
                        default: { value: "{colors.fg.onSecondary}" };
                        hover: { value: "{colors.fg.onSecondary}" };
                    };
                };
            };
            link: {
                primary: {
                    text: {
                        default: { value: "{colors.fg.primary}" };
                        hover: {
                            value: "{colors.fg.primary}";
                            modify: {
                                type: "color-mix";
                                value: readonly [readonly ["{colors.bg.contrast}", "15%"]];
                            };
                        };
                        pressed: {
                            value: "{colors.fg.primary}";
                            modify: {
                                type: "color-mix";
                                value: readonly [readonly ["{colors.bg.contrast}", "30%"]];
                            };
                        };
                    };
                };
                secondary: {
                    text: {
                        default: { value: "{colors.fg.default}" };
                        hover: {
                            value: "{colors.fg.default}";
                            modify: {
                                type: "color-mix";
                                value: readonly [readonly ["{colors.bg.contrast}", "10%"]];
                            };
                        };
                        pressed: {
                            value: "{colors.fg.default}";
                            modify: {
                                type: "color-mix";
                                value: readonly [readonly ["{colors.bg.contrast}", "20%"]];
                            };
                        };
                    };
                };
            };
            input: {
                bg: { default: { value: "{colors.bg.default}" } };
                border: {
                    default: { value: "{colors.line.heavy}" };
                    focus: { value: "{colors.line.primary}" };
                    error: { value: "{colors.line.negative}" };
                    success: { value: "{colors.line.positive}" };
                };
                label: { default: { value: "{colors.fg.default}" } };
                placeholder: { default: { value: "{colors.fg.muted}" } };
                text: { default: { value: "{colors.fg.default}" } };
                errorText: { default: { value: "{colors.fg.negative}" } };
                successText: { default: { value: "{colors.fg.positive}" } };
            };
            select: {
                label: { default: { value: "{colors.fg.default}" } };
                trigger: {
                    bg: {
                        default: { value: "{colors.bg.default}" };
                        hover: {
                            value: "{colors.bg.default}";
                            modify: {
                                type: "color-mix";
                                value: readonly [readonly ["{colors.bg.contrast}", "5%"]];
                            };
                        };
                        pressed: {
                            value: "{colors.bg.default}";
                            modify: {
                                type: "color-mix";
                                value: readonly [readonly ["{colors.bg.contrast}", "7%"]];
                            };
                        };
                    };
                    border: {
                        default: { value: "{colors.line.default}" };
                        focus: { value: "{colors.line.primary}" };
                        error: { value: "{colors.line.negative}" };
                        success: { value: "{colors.line.positive}" };
                    };
                    placeholder: { default: { value: "{colors.fg.muted}" } };
                    text: { default: { value: "{colors.fg.default}" } };
                    errorText: { default: { value: "{colors.fg.negative}" } };
                    successText: { default: { value: "{colors.fg.positive}" } };
                };
                list: {
                    bg: { default: { value: "{colors.bg.default}" } };
                    border: {
                        default: { value: "{colors.line.default}" };
                        focus: { value: "{colors.line.primary}" };
                        error: { value: "{colors.line.negative}" };
                        success: { value: "{colors.line.positive}" };
                    };
                    item: {
                        bg: {
                            default: { value: "{colors.bg.default}" };
                            highlight: {
                                value: "{colors.bg.default}";
                                modify: {
                                    type: "color-mix";
                                    value: readonly [readonly [(...), (...)]];
                                };
                            };
                        };
                        text: {
                            default: { value: "{colors.fg.default}" };
                            muted: { value: "{colors.fg.muted}" };
                            onHighlight: { value: "{colors.fg.default}" };
                            mutedOnHighlight: { value: "{colors.fg.muted}" };
                        };
                    };
                };
            };
            code: {
                bg: { default: { value: "{colors.bg.alternate}" } };
                border: { default: { value: "{colors.line.heavy}" } };
                text: { default: { value: "{colors.fg.default}" } };
            };
            bg: {
                default: { value: "#ffffff" };
                alternate: { value: "#eef0f3" };
                contrast: { value: "{colors.fg.default}" };
                overlay: {
                    value: "{colors.bg.alternate}";
                    modify: { type: "color-alpha"; value: 0.33 };
                };
                skeleton: {
                    value: "{colors.fg.default}";
                    modify: { type: "color-alpha"; value: 0.1 };
                };
                primary: { value: "#0052ff" };
                secondary: { value: "#eef0f3" };
            };
            fg: {
                default: { value: "#0a0b0d" };
                muted: { value: "#5b616e" };
                primary: { value: "#0052ff" };
                onPrimary: { value: "#ffffff" };
                onSecondary: { value: "#0a0b0d" };
                positive: { value: "#098551" };
                negative: { value: "#cf202f" };
                warning: { value: "#ed702f" };
            };
            line: {
                default: { value: "#dcdfe4" };
                heavy: { value: "#9397a0" };
                primary: { value: "{colors.fg.primary}" };
                positive: { value: "{colors.fg.positive}" };
                negative: { value: "{colors.fg.negative}" };
            };
        };
        font: {
            family: {
                page: { value: "{font.family.body}" };
                cta: { value: "{font.family.interactive}" };
                link: { value: "{font.family.interactive}" };
                input: { value: "{font.family.interactive}" };
                select: { value: "{font.family.interactive}" };
                code: { value: "{font.family.mono}" };
                mono: { value: "\"DM Mono\", monospace" };
                sans: {
                    value: "\"Rethink Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
                };
                body: { value: "{font.family.sans}" };
                interactive: { value: "{font.family.sans}" };
            };
            size: { base: { value: 16 } };
        };
    },
> = ...

const theme: Partial<Theme> = {
  "colors-bg-primary": "#0052ff",
  "colors-cta-primary-bg-default": "var(--cdp-web-colors-bg-primary)",
  "font-size-base": "16px",
};
Copy