/* tokens.css — ค่าคงที่ของหน้าตา (สี ระยะห่าง ตัวอักษร) * * ทุกอย่างที่เป็นตัวเลข "เวทมนตร์" ของดีไซน์ต้องอยู่ในไฟล์นี้ไฟล์เดียว * ไฟล์อื่นห้ามเขียนรหัสสีตรง ๆ ให้อ้าง var(--...) เสมอ * เพื่อให้เปลี่ยนธีมทั้งระบบได้จากที่เดียว และย้ายไป design token ของ React ได้ทันที * * ธีม: ค่าเริ่มต้นเดินตามระบบปฏิบัติการ (prefers-color-scheme) * ผู้ใช้กดสลับเองได้ผ่าน data-theme ที่ธาตุ ซึ่งมีลำดับความสำคัญสูงกว่า */ :root { /* ── ตัวอักษร ──────────────────────────────────────────────── * ชุดฟอนต์เดียวกับระบบอื่นในบ้าน: Latin เป็น Plus Jakarta Sans * แล้วตกมาที่ Helvetica/Arial ส่วนภาษาไทยตกมาที่ Sarabun ทีละตัวอักษร * ห้ามโหลดฟอนต์จากอินเทอร์เน็ต ระบบต้องทำงานได้แม้ไม่มีเน็ต * เครื่องที่ไม่มี Plus Jakarta Sans จะข้ามไปใช้ตัวถัดไปเองโดยอัตโนมัติ */ --font-sans: "Plus Jakarta Sans", Helvetica, Arial, "Sarabun", "Noto Sans Thai", "IBM Plex Sans Thai", "TH Sarabun New", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --font-mono: "Sarabun", ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace; /* ตัวเลขเงินต้องเรียงหลักตรงกันเสมอ จึงใช้ตัวเลขความกว้างเท่ากัน */ --font-num: "Sarabun", system-ui, sans-serif; --fs-xxs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 19px; --fs-2xl: 23px; --fs-3xl: 29px; --fs-4xl: 38px; --lh-tight: 1.3; --lh-normal: 1.55; --lh-loose: 1.75; --fw-normal: 400; --fw-medium: 500; --fw-bold: 600; --fw-black: 700; /* ── ระยะห่าง (ขั้นละ 4px) ───────────────────────────────── */ --sp-0: 0; --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; /* ── มุมโค้งและเงา ───────────────────────────────────────── * ค่าเดียวกับ radii ใน pink-web/src/utils/theme/tokens.ts * เพื่อให้การ์ดและปุ่มของทุกระบบในบ้านโค้งเท่ากัน */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px; /* ── ขนาดโครง ───────────────────────────────────────────── * จอเล็กสุดที่รองรับคือ 1024x768 แถบข้างจึงต้องแคบพอ */ --w-sidebar: 194px; --w-sidebar-narrow: 62px; --h-topbar: 56px; --h-clockbar: 46px; --w-content-max: 1560px; --z-dropdown: 100; --z-sticky: 200; --z-tooltip: 300; --z-modal: 400; --z-toast: 500; --dur-fast: 110ms; --dur-med: 200ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); } /* ─────────────────────────────────────────────────────────────── * ชุดสีธีมสว่าง * ─────────────────────────────────────────────────────────────── */ :root, :root[data-theme="light"] { color-scheme: light; --c-bg: #fafaf8; --c-bg-raised: #ffffff; --c-bg-sunken: #e7e5e2; --c-bg-hover: #f5f4f2; --c-bg-active: #e7e5e2; --c-bg-inset: #f5f4f2; --c-text: #0f1419; --c-text-soft: #57534e; --c-text-mute: #78716c; --c-text-faint: #a8a29e; --c-text-invert: #ffffff; --c-border: #e7e5e2; --c-border-strong: #d6d3d0; --c-border-focus: #0ea5a5; /* แบรนด์: ชุดสี Cortex Spectrum ของ Pinksolutions * กรมท่าคือสีหลักสื่อความน่าเชื่อถือ เขียวน้ำทะเลคือสีรองสื่อเทคโนโลยี * ค่าตรงนี้ต้องตรงกับ atlas ใน pink-web/src/utils/theme/tokens.ts เสมอ * ถ้าที่นั่นเปลี่ยน ต้องตามมาแก้ที่นี่ด้วย ไม่อย่างนั้นหน้าตาจะดริฟต์ออกจากระบบอื่น */ --c-brand: #1e3a5f; --c-brand-strong: #15293f; --c-brand-soft: #ebf0f7; --c-brand-text: #1e3a5f; /* สีรอง ใช้กับสิ่งที่ต้องเด่นแต่ไม่ใช่ปุ่มหลัก เช่น ตัวชี้วัดสด ป้ายเรียลไทม์ */ --c-accent: #0ea5a5; --c-accent-strong: #0b7e7e; --c-accent-soft: #cffafa; /* สีความหมาย: ใช้กับไฟจราจรของเงื่อนไขสินเชื่อและคำเตือน */ --c-ok: #059669; --c-ok-soft: #d1fae5; --c-ok-border: #a7e3c8; --c-warn: #d97706; --c-warn-soft: #fef3c7; --c-warn-border: #f2d08a; --c-danger: #b91c1c; --c-danger-soft: #fee2e2; --c-danger-border: #efaeae; --c-info: #0369a1; --c-info-soft: #e0f2fe; --c-info-border: #a8cfe8; --c-neutral-soft: #f5f4f2; /* สีของกราฟ 8 เส้น เลือกให้แยกออกจากกันได้แม้ตาบอดสี * สามเส้นแรกคือสีแบรนด์ตามลำดับความสำคัญ กรมท่า เขียวน้ำทะเล เหลืองอำพัน */ --c-ch1: #1e3a5f; --c-ch2: #0ea5a5; --c-ch3: #f59e0b; --c-ch4: #059669; --c-ch5: #7048b6; --c-ch6: #0369a1; --c-ch7: #b91c1c; --c-ch8: #78716c; --c-grid: #eceae7; --c-axis: #a8a29e; --shadow-sm: 0 1px 2px rgba(15, 20, 25, 0.07), 0 1px 1px rgba(15, 20, 25, 0.04); --shadow-md: 0 2px 6px rgba(15, 20, 25, 0.09), 0 1px 2px rgba(15, 20, 25, 0.05); --shadow-lg: 0 8px 26px rgba(15, 20, 25, 0.15); --shadow-focus: 0 0 0 3px rgba(14, 165, 165, 0.3); } /* ─────────────────────────────────────────────────────────────── * ชุดสีธีมมืด * ─────────────────────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --c-bg: #1a1917; --c-bg-raised: #232220; --c-bg-sunken: #121110; --c-bg-hover: #2b2a27; --c-bg-active: #35332f; --c-bg-inset: #1f1e1b; --c-text: #f2f0ed; --c-text-soft: #c4bfb8; --c-text-mute: #9c958c; --c-text-faint: #78716c; --c-text-invert: #1a1917; --c-border: #33312d; --c-border-strong: #4a4741; --c-border-focus: #2dd4d4; /* กรมท่าเข้มเกินกว่าจะอ่านออกบนพื้นมืด จึงใช้กรมท่าอ่อนแทน * เป็นสีเดียวกันในทางแบรนด์ แค่ปรับความสว่างให้ผ่านเกณฑ์ความคมชัด */ --c-brand: #7fa3cc; --c-brand-strong: #a5c1e0; --c-brand-soft: #1c2733; --c-brand-text: #a5c1e0; --c-accent: #2dd4d4; --c-accent-strong: #5fe3e3; --c-accent-soft: #10312f; --c-ok: #34d399; --c-ok-soft: #12291f; --c-ok-border: #2c5a44; --c-warn: #fbbf24; --c-warn-soft: #2c2416; --c-warn-border: #614920; --c-danger: #f87171; --c-danger-soft: #2e1a1c; --c-danger-border: #63343a; --c-info: #38bdf8; --c-info-soft: #16222e; --c-info-border: #2f4a68; --c-neutral-soft: #2b2a27; --c-ch1: #7fa3cc; --c-ch2: #2dd4d4; --c-ch3: #fbbf24; --c-ch4: #34d399; --c-ch5: #a98ae6; --c-ch6: #38bdf8; --c-ch7: #f87171; --c-ch8: #9c958c; --c-grid: #2a2825; --c-axis: #57534e; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6); --shadow-focus: 0 0 0 3px rgba(45, 212, 212, 0.35); } } /* ผู้ใช้กดสลับเป็นมืดเอง ต้องชนะค่าของระบบทั้งสองทิศทาง */ :root[data-theme="dark"] { color-scheme: dark; --c-bg: #1a1917; --c-bg-raised: #232220; --c-bg-sunken: #121110; --c-bg-hover: #2b2a27; --c-bg-active: #35332f; --c-bg-inset: #1f1e1b; --c-text: #f2f0ed; --c-text-soft: #c4bfb8; --c-text-mute: #9c958c; --c-text-faint: #78716c; --c-text-invert: #1a1917; --c-border: #33312d; --c-border-strong: #4a4741; --c-border-focus: #2dd4d4; /* กรมท่าเข้มเกินกว่าจะอ่านออกบนพื้นมืด จึงใช้กรมท่าอ่อนแทน * เป็นสีเดียวกันในทางแบรนด์ แค่ปรับความสว่างให้ผ่านเกณฑ์ความคมชัด */ --c-brand: #7fa3cc; --c-brand-strong: #a5c1e0; --c-brand-soft: #1c2733; --c-brand-text: #a5c1e0; --c-accent: #2dd4d4; --c-accent-strong: #5fe3e3; --c-accent-soft: #10312f; --c-ok: #34d399; --c-ok-soft: #12291f; --c-ok-border: #2c5a44; --c-warn: #fbbf24; --c-warn-soft: #2c2416; --c-warn-border: #614920; --c-danger: #f87171; --c-danger-soft: #2e1a1c; --c-danger-border: #63343a; --c-info: #38bdf8; --c-info-soft: #16222e; --c-info-border: #2f4a68; --c-neutral-soft: #2b2a27; --c-ch1: #7fa3cc; --c-ch2: #2dd4d4; --c-ch3: #fbbf24; --c-ch4: #34d399; --c-ch5: #a98ae6; --c-ch6: #38bdf8; --c-ch7: #f87171; --c-ch8: #9c958c; --c-grid: #2a2825; --c-axis: #57534e; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6); --shadow-focus: 0 0 0 3px rgba(45, 212, 212, 0.35); } /* สีประจำทีม 8 ทีม ใช้ทั้งหน้านักศึกษาและจอมอนิเตอร์ของอาจารย์ * ค่าเหล่านี้ไม่เปลี่ยนตามธีม เพราะเป็น "ป้ายระบุตัวตน" ต้องจำได้เหมือนเดิม */ :root { --team-1: #1e3a5f; --team-2: #0ea5a5; --team-3: #f59e0b; --team-4: #059669; --team-5: #7b52d3; --team-6: #0369a1; --team-7: #b91c1c; --team-8: #78716c; }