.storybook/host-theme-fixtures.ts

export type CodexMcpDevThemeName = "dark" | "light";

export type CodexMcpDevThemePreset = {
  label: string;
  theme: CodexMcpDevThemeName;
  variables: Record<string, string>;
};

const CODEX_HOST_COMMON_VARIABLES = {
  "--font-sans": '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
  "--font-mono":
    'ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
  "--font-weight-normal": "430",
  "--font-weight-medium": "500",
  "--font-weight-semibold": "600",
  "--font-weight-bold": "700",
  "--font-text-xs-size": "11px",
  "--font-text-sm-size": "12px",
  "--font-text-md-size": "14px",
  "--font-text-lg-size": "16px",
  "--font-text-xs-line-height": "1.45",
  "--font-text-sm-line-height": "1.4",
  "--font-text-md-line-height": "1.5",
  "--font-text-lg-line-height": "1.5",
  "--font-heading-xs-size": "18px",
  "--font-heading-sm-size": "20px",
  "--font-heading-md-size": "24px",
  "--font-heading-lg-size": "28px",
  "--font-heading-xl-size": "36px",
  "--font-heading-2xl-size": "48px",
  "--font-heading-3xl-size": "72px",
  "--font-heading-xs-line-height": "1.33",
  "--font-heading-sm-line-height": "1.33",
  "--font-heading-md-line-height": "1.2",
  "--font-heading-lg-line-height": "1.2",
  "--font-heading-xl-line-height": "1",
  "--font-heading-2xl-line-height": "1",
  "--font-heading-3xl-line-height": "1",
  "--border-radius-xs": "4px",
  "--border-radius-sm": "6px",
  "--border-radius-md": "8px",
  "--border-radius-lg": "10px",
  "--border-radius-xl": "12px",
  "--border-radius-full": "9999px",
  "--border-width-regular": "1px",
} satisfies Record<string, string>;

export const CODEX_MCP_DEV_THEME_PRESETS = {
  light: {
    label: "Codex Host Light",
    theme: "light",
    variables: {
      ...CODEX_HOST_COMMON_VARIABLES,
      "--color-background-primary": "rgba(237, 237, 237, 0.4)",
      "--color-background-secondary": "rgba(255, 255, 255, 0.7)",
      "--color-background-tertiary": "#f9f9f9",
      "--color-background-inverse": "#1a1c1f",
      "--color-background-ghost": "transparent",
      "--color-background-info": "#e5f3ff",
      "--color-background-danger": "#ffd9d9",
      "--color-background-success":
        "color-mix(in srgb, #00a240 12%, rgba(237, 237, 237, 0.4))",
      "--color-background-warning":
        "color-mix(in srgb, #e25507 12%, rgba(237, 237, 237, 0.4))",
      "--color-background-disabled": "rgba(26, 28, 31, 0.05)",
      "--color-text-primary": "#1a1c1f",
      "--color-text-secondary": "#5d6065",
      "--color-text-tertiary": "#5d6065",
      "--color-text-inverse": "rgba(237, 237, 237, 0.4)",
      "--color-text-ghost": "#5d6065",
      "--color-text-info": "#0069c2",
      "--color-text-danger": "#e02e2a",
      "--color-text-success": "#00a240",
      "--color-text-warning": "#e25507",
      "--color-text-disabled": "#5d6065",
      "--color-border-primary": "rgba(26, 28, 31, 0.08)",
      "--color-border-secondary": "rgba(26, 28, 31, 0.08)",
      "--color-border-tertiary": "rgba(26, 28, 31, 0.12)",
      "--color-border-inverse": "#1a1c1f",
      "--color-border-ghost": "transparent",
      "--color-border-info": "#339cff",
      "--color-border-danger": "#e02e2a",
      "--color-border-success": "#00a240",
      "--color-border-warning": "#e25507",
      "--color-border-disabled": "rgba(26, 28, 31, 0.08)",
      "--color-ring-primary": "#339cff",
      "--color-ring-secondary": "#339cff",
      "--color-ring-inverse": "#339cff",
      "--color-ring-info": "#339cff",
      "--color-ring-danger": "#e02e2a",
      "--color-ring-success": "#00a240",
      "--color-ring-warning": "#e25507",
      "--shadow-hairline": "0px 0px 0px 0.5px rgba(0, 0, 0, 0.1)",
      "--shadow-sm": "0px 1px 2px -1px rgba(0, 0, 0, 0.08)",
      "--shadow-md": "0px 2px 4px -1px rgba(0, 0, 0, 0.08)",
      "--shadow-lg": "0px 4px 8px -2px rgba(0, 0, 0, 0.1)",
    },
  },
  dark: {
    label: "Codex Host Dark",
    theme: "dark",
    variables: {
      ...CODEX_HOST_COMMON_VARIABLES,
      "--color-background-primary": "#212121",
      "--color-background-secondary": "rgba(33, 33, 33, 0.96)",
      "--color-background-tertiary": "#000000",
      "--color-background-inverse": "#ffffff",
      "--color-background-ghost": "transparent",
      "--color-background-info": "#00284d",
      "--color-background-danger": "#4d100e",
      "--color-background-success": "color-mix(in srgb, #40c977 12%, #212121)",
      "--color-background-warning": "color-mix(in srgb, #ff8549 12%, #212121)",
      "--color-background-disabled": "rgba(255, 255, 255, 0.05)",
      "--color-text-primary": "#ffffff",
      "--color-text-secondary": "#afafaf",
      "--color-text-tertiary": "#afafaf",
      "--color-text-inverse": "#212121",
      "--color-text-ghost": "#afafaf",
      "--color-text-info": "#99ceff",
      "--color-text-danger": "#ff6764",
      "--color-text-success": "#40c977",
      "--color-text-warning": "#ff8549",
      "--color-text-disabled": "#afafaf",
      "--color-border-primary": "rgba(255, 255, 255, 0.08)",
      "--color-border-secondary": "rgba(255, 255, 255, 0.08)",
      "--color-border-tertiary": "rgba(255, 255, 255, 0.12)",
      "--color-border-inverse": "#ffffff",
      "--color-border-ghost": "transparent",
      "--color-border-info": "rgba(51, 156, 255, 0.7)",
      "--color-border-danger": "#ff6764",
      "--color-border-success": "#40c977",
      "--color-border-warning": "#ff8549",
      "--color-border-disabled": "rgba(255, 255, 255, 0.08)",
      "--color-ring-primary": "rgba(51, 156, 255, 0.7)",
      "--color-ring-secondary": "rgba(51, 156, 255, 0.7)",
      "--color-ring-inverse": "rgba(51, 156, 255, 0.7)",
      "--color-ring-info": "rgba(51, 156, 255, 0.7)",
      "--color-ring-danger": "#ff6764",
      "--color-ring-success": "#40c977",
      "--color-ring-warning": "#ff8549",
      "--shadow-hairline": "0px 0px 0px 0.5px rgba(255, 255, 255, 0.08)",
      "--shadow-sm": "0px 1px 2px -1px rgba(0, 0, 0, 0.22)",
      "--shadow-md": "0px 2px 4px -1px rgba(0, 0, 0, 0.28)",
      "--shadow-lg": "0px 4px 8px -2px rgba(0, 0, 0, 0.32)",
    },
  },
} satisfies Record<CodexMcpDevThemeName, CodexMcpDevThemePreset>;