/* ========================================================================== Design Tokens — ระบบภายในองค์กร (Enterprise Internal System) ออกแบบสำหรับ: ใช้งานต่อเนื่องทั้งวัน · อ่านง่าย · ไม่ล้าตา · รองรับภาษาไทย -------------------------------------------------------------------------- วิธีใช้: โหมดมืด: อัตโนมัติตามระบบ + สลับเองได้ด้วย ========================================================================== */ :root { /* ------------------------------------------------------------------ 1. PRIMITIVE — ค่าสีดิบ (ห้ามใช้ตรงๆ ใน component ให้ใช้ SEMANTIC แทน) ------------------------------------------------------------------ */ /* Neutral — กระดาษนวลอุ่น + ดำอ่อน (ธีม "ขาว · ดำอ่อน · ทอง") */ --c-neutral-0: #FFFFFF; --c-neutral-25: #FEFDFB; --c-neutral-50: #F9F8F4; --c-neutral-100: #F1EFE9; --c-neutral-200: #E7E4DB; --c-neutral-300: #D2CEC2; --c-neutral-400: #9B968A; --c-neutral-500: #757269; --c-neutral-600: #56534B; --c-neutral-700: #3D3B35; --c-neutral-800: #2A2A2E; /* ← ดำอ่อน (ไม่ใช่ดำสนิท) */ --c-neutral-900: #1B1B1E; /* Primary — ทองแอนทีค (ปุ่มหลัก ลิงก์ ของใหม่ ตัวเลขสำคัญ) */ --c-primary-50: #F8F3E7; --c-primary-100: #F3ECDD; --c-primary-200: #E8DAB7; --c-primary-300: #D8BC7C; --c-primary-400: #C2A25C; /* ทองสว่าง — ใช้กับพื้นเข้ม/องค์ประกอบใหญ่ */ --c-primary-500: #A98A4B; --c-primary-600: #8A6D3B; /* ← สีหลัก (อ่านผ่านบนพื้นขาว) */ --c-primary-700: #755B2F; --c-primary-800: #5E4926; --c-primary-900: #46371D; /* Semantic — สื่อความหมายเท่านั้น ห้ามใช้เป็นสีตกแต่ง */ --c-success-50: #DCFCE7; --c-success-600: #16A34A; --c-success-700: #15803D; --c-warning-50: #FEF3C7; --c-warning-600: #D97706; --c-warning-700: #B45309; --c-danger-50: #FEE2E2; --c-danger-600: #DC2626; --c-danger-700: #B91C1C; --c-info-50: #E0F2FE; --c-info-600: #0284C7; --c-info-700: #0369A1; /* ------------------------------------------------------------------ 2. SEMANTIC — ใช้ตัวนี้ใน component (เปลี่ยนตามโหมดสว่าง/มืดอัตโนมัติ) ------------------------------------------------------------------ */ /* พื้นผิว */ --bg-app: var(--c-neutral-50); /* พื้นหลังหน้าจอ — ห้ามใช้ขาวล้วน */ --bg-surface: var(--c-neutral-0); /* การ์ด/แผง */ --bg-surface-raised: var(--c-neutral-0); /* modal/popover */ --bg-subtle: var(--c-neutral-100); /* header ตาราง, พื้นอ่อน */ --bg-hover: var(--c-neutral-100); --bg-active: var(--c-primary-50); --bg-inverse: var(--c-neutral-800); /* เส้นขอบ */ --border-subtle: var(--c-neutral-200); --border-default: var(--c-neutral-300); --border-strong: var(--c-neutral-400); --border-focus: var(--c-primary-600); /* ตัวอักษร — ห้ามใช้ดำล้วนบนขาวล้วน (คอนทราสต์สูงเกิน ตาล้า) */ --text-primary: var(--c-neutral-800); --text-secondary: var(--c-neutral-500); --text-tertiary: var(--c-neutral-400); --text-disabled: var(--c-neutral-300); --text-inverse: var(--c-neutral-0); --text-link: var(--c-primary-600); --text-brand: var(--c-primary-600); /* แอ็กชัน (ปุ่ม) — ทองซาตินไล่เฉดเล็กน้อยให้ดูมีมิติ */ --action-primary-bg: linear-gradient(165deg, #9A7B41, #7C6133); --action-primary-bg-hover: linear-gradient(165deg, #A98A4B, #8A6D3B); --action-primary-fg: var(--c-neutral-0); --action-ghost-fg: var(--c-neutral-700); --action-ghost-bg-hover: var(--c-neutral-100); --action-danger-bg: var(--c-danger-600); --action-danger-fg: var(--c-neutral-0); /* สถานะ (pill / badge / alert) */ --status-success-bg: var(--c-success-50); --status-success-fg: var(--c-success-700); --status-warning-bg: var(--c-warning-50); --status-warning-fg: var(--c-warning-700); --status-danger-bg: var(--c-danger-50); --status-danger-fg: var(--c-danger-700); --status-info-bg: var(--c-info-50); --status-info-fg: var(--c-info-700); --status-neutral-bg: var(--c-neutral-100); --status-neutral-fg: var(--c-neutral-600); /* ------------------------------------------------------------------ 3. TYPOGRAPHY — ปรับมาเพื่อภาษาไทยโดยเฉพาะ ------------------------------------------------------------------ */ /* ฟอนต์: Anuphan อ่านชัดบนจอ · Trirong เซอริฟไทยสำหรับหัวเรื่อง/ตัวเลขเงิน */ --font-sans: "Anuphan", "IBM Plex Sans Thai", "Noto Sans Thai", "Sarabun", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-display: "Trirong", "Anuphan", "Noto Sans Thai", serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ขนาด — ไทยต้องใหญ่กว่าอังกฤษ · body ห้ามต่ำกว่า 15px */ --fs-xs: 12px; /* label เล็ก, caption — ใช้เท่าที่จำเป็น */ --fs-sm: 13px; /* ข้อความรอง, ตาราง */ --fs-base: 15px; /* ← เนื้อหาหลัก (ขั้นต่ำสำหรับไทย) */ --fs-md: 16px; /* เนื้อหาที่ต้องอ่านนาน */ --fs-lg: 18px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px; /* ⚠️ ระยะบรรทัด — ไทยต้องมากกว่าอังกฤษ เพราะมีสระบน-ล่าง + วรรณยุกต์ซ้อน 2 ชั้น */ --lh-tight: 1.35; /* หัวข้อใหญ่เท่านั้น */ --lh-snug: 1.55; /* หัวข้อย่อย, ปุ่ม */ --lh-normal: 1.75; /* ← เนื้อหาไทย (อังกฤษใช้ 1.5 พอ) */ --lh-relaxed: 1.9; /* ย่อหน้ายาว */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --tracking-wide: 0.04em; /* สำหรับ label ตัวพิมพ์ใหญ่ */ /* ------------------------------------------------------------------ 4. SPACING — ฐาน 4px ------------------------------------------------------------------ */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* ------------------------------------------------------------------ 5. RADIUS · SHADOW · MOTION ------------------------------------------------------------------ */ --radius-sm: 8px; --radius-md: 12px; /* input, องค์ประกอบเล็ก */ --radius-lg: 18px; /* การ์ด, ตาราง */ --radius-xl: 24px; /* modal, การ์ดใหญ่ */ --radius-full: 9999px; /* pill / ปุ่มแคปซูล */ /* เงา — โทนอุ่นเข้ากับกระดาษนวล บางๆ พอ อย่าให้ลอยเกิน */ --shadow-xs: 0 1px 2px rgba(40, 38, 30, 0.05); --shadow-sm: 0 1px 3px rgba(40, 38, 30, 0.08), 0 1px 2px rgba(40, 38, 30, 0.04); --shadow-md: 0 4px 8px -2px rgba(40, 38, 30, 0.08), 0 2px 4px -2px rgba(40, 38, 30, 0.04); --shadow-lg: 0 12px 16px -4px rgba(40, 38, 30, 0.08), 0 4px 6px -2px rgba(40, 38, 30, 0.03); --ring-focus: 0 0 0 3px rgba(138, 109, 59, 0.28); --motion-fast: 120ms; --motion-normal: 200ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ------------------------------------------------------------------ 6. DENSITY — ความสูงองค์ประกอบ (สำคัญกับระบบข้อมูลเยอะ) ------------------------------------------------------------------ */ --h-control-sm: 32px; --h-control: 40px; /* ปุ่ม/input มาตรฐาน */ --h-control-lg: 48px; --h-table-row: 48px; /* ⚠️ อย่าต่ำกว่า 44px — ตาหลงบรรทัด */ --h-header: 56px; --w-sidebar: 248px; --w-content-max: 72ch; /* ความกว้างข้อความสูงสุด */ --z-dropdown: 1000; --z-sticky: 1020; --z-modal: 1050; --z-toast: 1080; } /* ========================================================================== DARK MODE — พื้นหลังห้ามเป็นดำล้วน (#000) ดำล้วน + ตัวอักษรขาว = เกิดขอบเรืองแสง (halation) บนจอ OLED อ่านนานปวดตา ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-app: #14161B; --bg-surface: #1C1F26; --bg-surface-raised: #22262F; --bg-subtle: #1E222A; --bg-hover: #262B34; --bg-active: #2C2A22; --bg-inverse: #EDEAE3; --border-subtle: #2A2E37; --border-default: #333845; --border-strong: #454B59; --border-focus: #C9A96A; --text-primary: #EDEAE3; /* งาช้างนวล ไม่ใช่ขาวล้วน */ --text-secondary: #9A9CA6; --text-tertiary: #767984; --text-disabled: #4E525C; --text-inverse: #14161B; --text-link: #D5B87E; --text-brand: #D5B87E; --action-primary-bg: linear-gradient(165deg, #D5B87E, #BC9C5C); --action-primary-bg-hover: linear-gradient(165deg, #E0C48C, #C9A96A); --action-primary-fg: #14161B; --action-ghost-fg: #C6C3BA; --action-ghost-bg-hover: #262B34; --status-success-bg: #1E2E22; --status-success-fg: #8FBF8F; --status-warning-bg: #332A16; --status-warning-fg: #E4C066; --status-danger-bg: #362020; --status-danger-fg: #E89B8B; --status-info-bg: #1E2933; --status-info-fg: #8FB8D8; --status-neutral-bg: #262B34; --status-neutral-fg: #9A9CA6; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 16px -4px rgba(0, 0, 0, 0.5); --ring-focus: 0 0 0 3px rgba(201, 169, 106, 0.35); } } /* สลับโหมดมืดด้วยตนเอง: */ :root[data-theme="dark"] { --bg-app: #14161B; --bg-surface: #1C1F26; --bg-surface-raised: #22262F; --bg-subtle: #1E222A; --bg-hover: #262B34; --bg-active: #2C2A22; --bg-inverse: #EDEAE3; --border-subtle: #2A2E37; --border-default: #333845; --border-strong: #454B59; --border-focus: #C9A96A; --text-primary: #EDEAE3; --text-secondary: #9A9CA6; --text-tertiary: #767984; --text-disabled: #4E525C; --text-inverse: #14161B; --text-link: #D5B87E; --text-brand: #D5B87E; --action-primary-bg: linear-gradient(165deg, #D5B87E, #BC9C5C); --action-primary-bg-hover: linear-gradient(165deg, #E0C48C, #C9A96A); --action-primary-fg: #14161B; --action-ghost-fg: #C6C3BA; --action-ghost-bg-hover: #262B34; --status-success-bg: #1E2E22; --status-success-fg: #8FBF8F; --status-warning-bg: #332A16; --status-warning-fg: #E4C066; --status-danger-bg: #362020; --status-danger-fg: #E89B8B; --status-info-bg: #1E2933; --status-info-fg: #8FB8D8; --status-neutral-bg: #262B34; --status-neutral-fg: #9A9CA6; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 16px -4px rgba(0, 0, 0, 0.5); --ring-focus: 0 0 0 3px rgba(201, 169, 106, 0.35); } /* ========================================================================== BASE — ตั้งค่าเริ่มต้นที่แนะนำ ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--bg-app); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-normal); /* 1.75 สำหรับไทย */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* โฟกัสต้องเห็นชัดเสมอ (accessibility) */ :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } /* เคารพผู้ใช้ที่ปิดแอนิเมชัน */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ========================================================================== ธีมเทมเพลตส่วนตัว — พนักงานเลือกเองในแท็บ "ของฉัน" ('light' = ทองสว่าง ค่าเริ่มต้น · 'dark' = กราไฟต์ทอง · ด้านล่างคือเทมเพลตเพิ่ม) ========================================================================== */ /* เขียวมรกต × งาช้าง × ทองเหลือง (จากแบบ Emerald Silk) */ :root[data-theme="emerald"] { --bg-app: #F4F2EA; --bg-surface: #FFFFFF; --bg-surface-raised: #FFFFFF; --bg-subtle: #ECEFE6; --bg-hover: #EDEFE8; --bg-active: #E3EAE0; --bg-inverse: #0F3B32; --border-subtle: #E3E1D6; --border-default: #CFCDBF; --border-strong: #A8A695; --border-focus: #0F5B4C; --text-primary: #1E2B27; --text-secondary: #68756F; --text-tertiary: #97A29C; --text-disabled: #C4CCC7; --text-inverse: #F2EFE6; --text-link: #0F5B4C; --text-brand: #0F5B4C; --action-primary-bg: linear-gradient(165deg, #155F50, #0E4237); --action-primary-bg-hover: linear-gradient(165deg, #1B6E5D, #135143); --action-primary-fg: #F2EFE6; --ring-focus: 0 0 0 3px rgba(15, 91, 76, 0.25); } /* โรสควอตซ์ × งาช้าง (อบอุ่นละมุน) */ :root[data-theme="rose"] { --bg-app: #F8F3F1; --bg-surface: #FFFFFF; --bg-surface-raised: #FFFFFF; --bg-subtle: #F3EAE7; --bg-hover: #F3ECEA; --bg-active: #F0E2DE; --bg-inverse: #5C3A3D; --border-subtle: #ECE2DE; --border-default: #D9CAC5; --border-strong: #B39F99; --border-focus: #9C5560; --text-primary: #33272A; --text-secondary: #7A6A6E; --text-tertiary: #A8989C; --text-disabled: #D4C8CB; --text-inverse: #FBF7F5; --text-link: #9C5560; --text-brand: #9C5560; --action-primary-bg: linear-gradient(165deg, #A85D68, #8A4750); --action-primary-bg-hover: linear-gradient(165deg, #B56873, #9C5560); --action-primary-fg: #FFFFFF; --ring-focus: 0 0 0 3px rgba(156, 85, 96, 0.25); }