Variable themeConst

theme: Flattened<
    {
        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: "alpha"; value: "0.9" };
                        };
                    };
                    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: "alpha"; value: "0.9" };
                        };
                    };
                    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: "alpha"; value: "0.9" };
                        };
                    };
                };
                secondary: {
                    text: {
                        default: { value: "{colors.fg.default}" };
                        hover: {
                            value: "{colors.fg.default}";
                            modify: { type: "alpha"; value: "0.9" };
                        };
                    };
                };
            };
            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}" } };
                    border: {
                        default: { value: "{colors.line.heavy}" };
                        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.heavy}" };
                        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.secondary}" };
                        };
                        text: {
                            default: { value: "{colors.fg.default}" };
                            muted: { value: "{colors.fg.muted}" };
                            onHighlight: { value: "{colors.fg.default}" };
                            mutedOnHighlight: { value: "{colors.fg.muted}" };
                        };
                    };
                };
            };
            bg: {
                default: { value: "#ffffff" };
                alternate: { value: "#eef0f3" };
                overlay: {
                    value: "{colors.bg.alternate}";
                    modify: { type: "alpha"; value: 0.33 };
                };
                skeleton: {
                    value: "{colors.fg.default}";
                    modify: { type: "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" };
            };
            line: {
                default: { value: "#dcdfe4" };
                heavy: { value: "#9397a0" };
                primary: { value: "{colors.fg.primary}" };
                positive: { value: "{colors.fg.positive}" };
                negative: { value: "{colors.fg.negative}" };
            };
        };
        font: {
            family: {
                sans: {
                    value: "\"DM Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
                };
            };
            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