khata-ui/src/shared-theme/themeConfig.ts

import { gray } from "./themePrimitives";
import { alpha } from "@mui/material/styles";

declare module "@mui/material/styles" {
  interface Theme {
    semantic: SemanticColors;
  }
  interface ThemeOptions {
    semantic?: SemanticColors;
  }
}

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

export interface SemanticColors {
  surface: {
    page: string;
    card: string;
    elevated: string;
  };
  border: {
    default: string;
    subtle: string;
  };
  text: {
    primary: string;
    secondary: string;
    muted: string;
  };
}

const darkBg = 'hsl(0, 0%, 9%)';
const darkPaper = 'hsl(0, 0%, 14%)';
const darkElevated = 'hsl(0, 0%, 19%)';

export function getSemanticColors(mode: SemanticColorMode): SemanticColors {
  if (mode === "dark") {
    return {
      surface: {
        page: darkBg,
        card: darkPaper,
        elevated: darkElevated,
      },
      border: {
        default: 'hsla(0, 0%, 100%, 0.08)',
        subtle: 'hsla(0, 0%, 100%, 0.04)',
      },
      text: {
        primary: 'hsl(0, 0%, 92%)',
        secondary: 'hsl(0, 0%, 60%)',
        muted: 'hsl(0, 0%, 45%)',
      },
    };
  }

  return {
    surface: {
      page: "hsl(0, 0%, 99%)",
      card: "hsl(220, 35%, 97%)",
      elevated: gray[100],
    },
    border: {
      default: alpha(gray[300], 0.4),
      subtle: alpha(gray[200], 0.3),
    },
    text: {
      primary: gray[800],
      secondary: gray[600],
      muted: gray[500],
    },
  };
}