MUI Theme

Theme object ด้านล่าง map ค่าจาก tokens/bgrimm.tokens.json เข้ากับ MUI createTheme() — ใช้เป็นจุดเริ่มต้นสำหรับโปรเจกต์ React ที่ใช้ MUI

theme.ts

import { createTheme } from '@mui/material/styles';

export const bgrimmTheme = createTheme({
  palette: {
    primary: {
      light: '#FF9956',
      main: '#FF6727',
      dark: '#C43400',
      contrastText: '#FFFFFF',
    },
    text: {
      primary: '#63666F',   // alias: color.text
      secondary: '#989AA5', // alias: color.muted — decorative/disabled เท่านั้น ห้ามใช้เป็น body text หลัก
    },
    background: {
      default: '#FFFFFF',
      paper: '#FCFEFF',
    },
    error: {
      main: '#C43400', // ใช้ Dark Orange แทนสีแดง default ของ MUI
    },
  },
  typography: {
    fontFamily: "'Noto Sans Thai', 'Open Sans', Arial, sans-serif",
    h1: { fontFamily: "'Source Serif Pro', 'Times New Roman', serif", fontWeight: 700 },
    h2: { fontFamily: "'Source Serif Pro', 'Times New Roman', serif", fontWeight: 700 },
    button: { fontWeight: 700, textTransform: 'none' }, // ปิด uppercase default ของ MUI
  },
  shape: {
    borderRadius: 8, // token: radius.md
  },
});

h1/h2 ภาษาไทยต้อง override

typography.h1/h2 ด้านบนตั้ง Source Serif Pro ไว้เป็นค่าเริ่มต้นสำหรับหน้าที่เป็นภาษาอังกฤษ — หน้าที่เป็นภาษาไทยเป็นหลัก ต้อง override ที่ระดับ component ให้ใช้ fontFamily: theme.typography.fontFamily (Noto Sans Thai) แทน เพราะ Source Serif Pro ไม่มี glyph ไทย (ดู Typography)

รายละเอียดการ override component เฉพาะจุด (MuiButton, MuiCard) ดูที่ Component Overrides