ttstd-infinite-canvas/web/src/pages/admin/theme/admin-ant-theme.ts

import type { ThemeConfig } from "antd";
import { theme as antdTheme } from "antd";

/** Isolated Ant Design theme for the admin console. Does not read product skins. */
export function getIsolatedAdminAntTheme(dark: boolean): ThemeConfig {
    const text = dark ? "#f5f5f5" : "#111111";
    const textSecondary = dark ? "#c4c4c4" : "#525252";
    const canvas = dark ? "#0f0f0f" : "#f5f5f5";
    const surface = dark ? "#181818" : "#ffffff";
    const surfaceMuted = dark ? "#222222" : "#f6f6f6";
    const border = dark ? "rgba(245, 245, 245, 0.12)" : "rgba(17, 17, 17, 0.12)";
    const primary = dark ? "#f5f5f5" : "#111111";
    const primaryFg = dark ? "#0f0f0f" : "#ffffff";
    const hover = dark ? "#ffffff" : "#2a2a2a";
    const active = dark ? "#d4d4d4" : "#404040";
    const danger = dark ? "#f87171" : "#dc2626";
    const success = dark ? "#4ade80" : "#15803d";
    const warning = dark ? "#fbbf24" : "#b45309";
    const info = dark ? "#60a5fa" : "#2563eb";
    const switchOn = dark ? "#22c55e" : "#16a34a";
    const switchOff = dark ? "#3f4b5a" : "#cbd5e1";

    return {
        algorithm: dark ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm,
        cssVar: { key: `admin-console-${dark ? "dark" : "light"}` },
        token: {
            fontFamily: 'ui-sans-serif, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", system-ui, sans-serif',
            fontSize: 13,
            fontSizeSM: 12,
            borderRadius: 6,
            borderRadiusLG: 8,
            borderRadiusSM: 4,
            controlHeight: 32,
            controlHeightSM: 28,
            controlHeightLG: 36,
            lineWidth: 1,
            colorPrimary: primary,
            colorPrimaryHover: hover,
            colorPrimaryActive: active,
            colorText: text,
            colorTextSecondary: textSecondary,
            colorTextTertiary: textSecondary,
            colorBgBase: canvas,
            colorBgContainer: surface,
            colorBgElevated: surface,
            colorBgLayout: canvas,
            colorBorder: border,
            colorBorderSecondary: border,
            colorSuccess: success,
            colorWarning: warning,
            colorError: danger,
            colorInfo: info,
            colorLink: text,
            colorLinkHover: hover,
            boxShadow: "none",
            boxShadowSecondary: dark ? "0 22px 56px rgba(0, 0, 0, 0.48)" : "0 16px 40px rgba(15, 23, 42, 0.16)",
            motionDurationFast: "0.12s",
            motionDurationMid: "0.12s",
            motionDurationSlow: "0.18s",
        },
        components: {
            Button: {
                borderRadius: 6,
                fontWeight: 550,
                paddingInline: 12,
                paddingInlineSM: 8,
                primaryShadow: "none",
                dangerShadow: "none",
                defaultBg: surface,
                defaultColor: text,
                defaultBorderColor: border,
                defaultHoverBg: surfaceMuted,
                defaultHoverColor: text,
                defaultHoverBorderColor: border,
                primaryColor: primaryFg,
            },
            Input: {
                borderRadius: 6,
                activeShadow: "none",
                paddingInline: 10,
                activeBg: surface,
                hoverBg: surface,
            },
            InputNumber: {
                borderRadius: 6,
                activeShadow: "none",
                activeBg: surface,
                hoverBg: surface,
            },
            Select: {
                borderRadius: 6,
                optionPadding: "7px 10px",
                optionSelectedBg: surfaceMuted,
                optionActiveBg: surfaceMuted,
            },
            Switch: {
                colorPrimary: switchOn,
                colorPrimaryHover: switchOn,
                colorTextQuaternary: switchOff,
                colorTextTertiary: switchOff,
            },
            Table: {
                headerBg: surfaceMuted,
                headerColor: textSecondary,
                headerSplitColor: "transparent",
                borderColor: border,
                rowHoverBg: surfaceMuted,
                cellPaddingBlock: 6,
                cellPaddingBlockMD: 6,
                cellPaddingBlockSM: 4,
                cellPaddingInline: 12,
                cellPaddingInlineSM: 8,
            },
            Tabs: {
                horizontalItemPadding: "8px 0",
                itemColor: textSecondary,
                itemSelectedColor: text,
                inkBarColor: text,
            },
            Drawer: {
                colorBgElevated: surface,
                paddingLG: 16,
            },
            Modal: {
                borderRadiusLG: 8,
                contentBg: surface,
                headerBg: surface,
            },
            Tooltip: {
                borderRadius: 6,
                colorBgSpotlight: dark ? "#f5f5f5" : "#111111",
                colorTextLightSolid: dark ? "#0f0f0f" : "#ffffff",
            },
            Dropdown: {
                borderRadiusLG: 8,
                controlItemBgHover: surfaceMuted,
                paddingBlock: 4,
            },
            Form: {
                itemMarginBottom: 14,
            },
            Segmented: {
                itemSelectedBg: surface,
                trackBg: surfaceMuted,
            },
            Card: {
                boxShadow: "none",
                boxShadowTertiary: "none",
            },
            Message: {
                borderRadiusLG: 8,
                contentPadding: "8px 14px",
            },
        },
    };
}