48 lines
2.3 KiB
TypeScript
48 lines
2.3 KiB
TypeScript
import type { Config } from 'tailwindcss'
|
|
|
|
export default {
|
|
// dark mode คุมด้วย class บน <html> (toggle จาก useTheme)
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
// สีทั้งหมดอ่านจาก CSS vars ใน app/assets/css/tailwind.css (:root + .dark)
|
|
// → สลับโหมดที่ตัวแปร ไม่ต้องมีคู่ dark: class ตาม markup
|
|
colors: {
|
|
primary: 'rgb(var(--c-primary) / <alpha-value>)',
|
|
'primary-hover': 'rgb(var(--c-primary-hover) / <alpha-value>)',
|
|
'on-primary': 'rgb(var(--c-on-primary) / <alpha-value>)',
|
|
accent: 'rgb(var(--c-accent) / <alpha-value>)',
|
|
success: 'rgb(var(--c-success) / <alpha-value>)',
|
|
'success-strong': 'rgb(var(--c-success-strong) / <alpha-value>)',
|
|
error: 'rgb(var(--c-error) / <alpha-value>)',
|
|
'error-strong': 'rgb(var(--c-error-strong) / <alpha-value>)',
|
|
focus: 'rgb(var(--c-focus) / <alpha-value>)',
|
|
surface: 'rgb(var(--c-surface) / <alpha-value>)',
|
|
elevated: 'rgb(var(--c-elevated) / <alpha-value>)',
|
|
'surface-muted': 'rgb(var(--c-surface-muted) / <alpha-value>)',
|
|
ink: 'rgb(var(--c-ink) / <alpha-value>)',
|
|
muted: 'rgb(var(--c-muted) / <alpha-value>)',
|
|
line: 'rgb(var(--c-line) / <alpha-value>)',
|
|
},
|
|
fontFamily: {
|
|
// Mac ได้ Sukhumvit Set จริง — นอกนั้น fallback ไป Sarabun (Google Fonts)
|
|
sans: ['Sukhumvit Set', 'Sarabun', 'system-ui', '-apple-system', 'Segoe UI', 'sans-serif'],
|
|
},
|
|
fontSize: {
|
|
display: ['2.25rem', { lineHeight: '1.2', fontWeight: '700' }], // 36px — h1 หน้าหลัก
|
|
'page-title': ['1.75rem', { lineHeight: '1.25', fontWeight: '700' }], // 28px — h1 หน้าอื่น
|
|
'section-title': ['1.25rem', { lineHeight: '1.4', fontWeight: '700' }], // 20px — h2 section
|
|
'body-lg': ['1.125rem', { lineHeight: '1.5' }], // 18px — prose
|
|
},
|
|
borderRadius: {
|
|
DEFAULT: '0.5rem', // rounded เปล่า ๆ (รวม file:rounded) → 8px ตาม scheme
|
|
card: '0.5rem',
|
|
pill: '9999px',
|
|
},
|
|
boxShadow: {
|
|
soft: '0 4px 4px 0 rgba(0, 0, 0, 0.25)',
|
|
'soft-lg': '0 8px 20px 0 rgba(0, 0, 0, 0.18)',
|
|
},
|
|
},
|
|
},
|
|
} satisfies Config
|