vexplor/frontend/lib/theme.ts

// WACE 솔루션 공통 테마 정의
export const theme = {
  // 색상 팔레트
  colors: {
    // 주요 브랜드 색상
    primary: {
      50: "hsl(210 40% 98%)",
      100: "hsl(210 40% 96%)",
      200: "hsl(214 32% 91%)",
      300: "hsl(213 27% 84%)",
      400: "hsl(215 20% 65%)",
      500: "hsl(215 16% 47%)",
      600: "hsl(215 19% 35%)",
      700: "hsl(215 25% 27%)",
      800: "hsl(217 33% 17%)",
      900: "hsl(222.2 47.4% 11.2%)",
      DEFAULT: "hsl(222.2 47.4% 11.2%)",
      foreground: "hsl(210 40% 98%)",
    },

    // 보조 색상
    secondary: {
      DEFAULT: "hsl(210 40% 96%)",
      foreground: "hsl(222.2 84% 4.9%)",
    },

    // 액센트 색상
    accent: {
      DEFAULT: "hsl(210 40% 98%)",
      foreground: "hsl(222.2 84% 4.9%)",
    },

    // 파괴적 액션 (삭제, 경고 등)
    destructive: {
      DEFAULT: "hsl(0 62.8% 30.6%)",
      foreground: "hsl(210 40% 98%)",
    },

    // 성공 색상
    success: {
      DEFAULT: "hsl(142.1 76.2% 36.3%)",
      foreground: "hsl(355.7 100% 97.3%)",
    },

    // 경고 색상
    warning: {
      DEFAULT: "hsl(32.1 94.6% 43.7%)",
      foreground: "hsl(355.7 100% 97.3%)",
    },

    // 정보 색상
    info: {
      DEFAULT: "hsl(221.2 83.2% 53.3%)",
      foreground: "hsl(210 40% 98%)",
    },

    // 뮤트된 색상
    muted: {
      DEFAULT: "hsl(210 40% 96%)",
      foreground: "hsl(215.4 16.3% 46.9%)",
    },

    // 배경 색상
    background: "hsl(0 0% 100%)",
    foreground: "hsl(222.2 84% 4.9%)",

    // 카드 색상
    card: {
      DEFAULT: "hsl(0 0% 100%)",
      foreground: "hsl(222.2 84% 4.9%)",
    },

    // 팝오버 색상
    popover: {
      DEFAULT: "hsl(0 0% 100%)",
      foreground: "hsl(222.2 84% 4.9%)",
    },

    // 테두리 색상
    border: "hsl(214.3 31.8% 91.4%)",
    input: "hsl(214.3 31.8% 91.4%)",
    ring: "hsl(222.2 84% 4.9%)",
  },

  // 타이포그래피
  typography: {
    fontFamily: {
      sans: ["Inter", "system-ui", "sans-serif"],
      mono: ["JetBrains Mono", "ui-monospace", "monospace"],
    },
    fontSize: {
      xs: ["0.75rem", { lineHeight: "1rem" }],
      sm: ["0.875rem", { lineHeight: "1.25rem" }],
      base: ["1rem", { lineHeight: "1.5rem" }],
      lg: ["1.125rem", { lineHeight: "1.75rem" }],
      xl: ["1.25rem", { lineHeight: "1.75rem" }],
      "2xl": ["1.5rem", { lineHeight: "2rem" }],
      "3xl": ["1.875rem", { lineHeight: "2.25rem" }],
      "4xl": ["2.25rem", { lineHeight: "2.5rem" }],
    },
    fontWeight: {
      normal: "400",
      medium: "500",
      semibold: "600",
      bold: "700",
    },
  },

  // 간격
  spacing: {
    px: "1px",
    0: "0",
    0.5: "0.125rem",
    1: "0.25rem",
    1.5: "0.375rem",
    2: "0.5rem",
    2.5: "0.625rem",
    3: "0.75rem",
    3.5: "0.875rem",
    4: "1rem",
    5: "1.25rem",
    6: "1.5rem",
    7: "1.75rem",
    8: "2rem",
    9: "2.25rem",
    10: "2.5rem",
    11: "2.75rem",
    12: "3rem",
    14: "3.5rem",
    16: "4rem",
    20: "5rem",
    24: "6rem",
    28: "7rem",
    32: "8rem",
    36: "9rem",
    40: "10rem",
    44: "11rem",
    48: "12rem",
    52: "13rem",
    56: "14rem",
    60: "15rem",
    64: "16rem",
    72: "18rem",
    80: "20rem",
    96: "24rem",
  },

  // 둥근 모서리
  borderRadius: {
    none: "0",
    sm: "0.125rem",
    DEFAULT: "0.25rem",
    md: "0.375rem",
    lg: "0.5rem",
    xl: "0.75rem",
    "2xl": "1rem",
    "3xl": "1.5rem",
    full: "9999px",
  },

  // 그림자
  boxShadow: {
    sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
    DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
    md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
    lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
    xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
    "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
    inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
    none: "none",
  },

  // 애니메이션
  animation: {
    duration: {
      fast: "150ms",
      normal: "200ms",
      slow: "300ms",
    },
    timing: {
      easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
      easeOut: "cubic-bezier(0, 0, 0.2, 1)",
      easeIn: "cubic-bezier(0.4, 0, 1, 1)",
    },
  },

  // 반응형 브레이크포인트
  breakpoints: {
    sm: "640px",
    md: "768px",
    lg: "1024px",
    xl: "1280px",
    "2xl": "1536px",
  },

  // z-index 레벨
  zIndex: {
    dropdown: 1000,
    sticky: 1020,
    fixed: 1030,
    modal: 1040,
    popover: 1050,
    tooltip: 1060,
    toast: 1070,
  },
};

// 다크 모드 테마 (추후 확장용)
export const darkTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    background: "hsl(222.2 84% 4.9%)",
    foreground: "hsl(210 40% 98%)",
    card: {
      DEFAULT: "hsl(222.2 84% 4.9%)",
      foreground: "hsl(210 40% 98%)",
    },
    popover: {
      DEFAULT: "hsl(222.2 84% 4.9%)",
      foreground: "hsl(210 40% 98%)",
    },
    muted: {
      DEFAULT: "hsl(217.2 32.6% 17.5%)",
      foreground: "hsl(215 20.2% 65.1%)",
    },
    border: "hsl(217.2 32.6% 17.5%)",
    input: "hsl(217.2 32.6% 17.5%)",
  },
};

// 테마 유틸리티 함수
export const getThemeValue = (path: string, theme = theme) => {
  return path.split(".").reduce((obj, key) => obj?.[key], theme);
};

// CSS 변수 생성 함수
export const createCSSVariables = (theme: typeof theme) => {
  const variables: Record<string, string> = {};

  // 색상 변수 생성
  Object.entries(theme.colors).forEach(([key, value]) => {
    if (typeof value === "string") {
      variables[`--color-${key}`] = value;
    } else if (typeof value === "object") {
      Object.entries(value).forEach(([subKey, subValue]) => {
        variables[`--color-${key}-${subKey}`] = subValue as string;
      });
    }
  });

  return variables;
};

export type Theme = typeof theme;