/* ═══════════════════════════════════════════════════════════════════════════ PAT WorkOS — Themes v1.0 (ชั้นที่ 2 — โหลดต่อจาก pat-tokens.css) หลักการ: ธีม "รีแมปเฉพาะชั้น semantic/component" เท่านั้น ⛔ ห้ามธีมใดแก้ค่า primitive (สีดิบ) — ไม่งั้นจะสืบสวนย้อนไม่ได้ว่าสีมาจากไหน แกนที่ 1 — โหมดการมอง แกนที่ 4 — เทศกาล ═══════════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────────────── LIGHT — ค่าเริ่มต้น (นิยามอยู่ใน pat-tokens.css แล้ว) · ประกาศซ้ำเพื่อความชัด ───────────────────────────────────────────────────────────────────────── */ [data-theme="light"] { color-scheme: light; } /* ───────────────────────────────────────────────────────────────────────── DARK — ห้องควบคุม · ทำงานกลางคืน · จอที่เปิดค้างทั้งวัน สีดิบชุดใหม่ (abyss/fog) อยู่ในชั้น primitive ของ tokens.json แล้ว ───────────────────────────────────────────────────────────────────────── */ [data-theme="dark"] { color-scheme: dark; --abyss-900:#08111d; --abyss-800:#0b1626; --abyss-700:#12233a; --abyss-600:#1a2f4d; --abyss-500:#24405f; --fog-100:#eaf1f9; --fog-300:#cbd8e6; --fog-500:#93a5b8; --fog-700:#5f7288; --surface-app:var(--abyss-800); --surface-card:var(--abyss-700); --surface-raised:var(--abyss-600);--surface-sunken:var(--abyss-900); --surface-header:var(--abyss-900);--surface-header-ink:var(--fog-100); --surface-nav:var(--abyss-900); --surface-nav-ink:var(--fog-300); --surface-scrim:rgba(4,9,16,.62); --ink-strong:var(--fog-100); --ink-body:var(--fog-300); --ink-muted:var(--fog-500); --ink-on-brand:var(--fog-100); --ink-disabled:var(--fog-700); --line:var(--abyss-500); --line-soft:var(--abyss-600); --line-strong:var(--fog-700); /* ปุ่มหลักบนพื้นมืดต้องสว่างขึ้น ไม่งั้นจมพื้น */ --brand-primary:var(--navy-500); --brand-primary-dark:var(--navy-600); --brand-accent:var(--gold-400); --brand-secondary:var(--sky-400); --brand-accent-soft:rgba(220,184,78,.14); --link:var(--sky-300); --focus:var(--sky-400); /* เฉดส่วนประกอบบนพื้นมืด — พื้นจาง/ขอบเข้ม/ตัวอักษรสว่าง (กลับด้านจากโหมดสว่าง) */ --tint-gold-bg:rgba(201,162,39,.16); --tint-gold-bd:#8a6f1d; --tint-gold-ink:#ecd488; --tint-gold-row:rgba(201,162,39,.07); --tint-sky-bg:rgba(74,144,217,.16); --tint-sky-bd:#2f5da3; --tint-sky-ink:#9cc7f0; --tint-sky-row:rgba(74,144,217,.07); --tint-neutral-bg:rgba(147,165,184,.12);--tint-neutral-bd:#24405f;--tint-neutral-ink:#93a5b8;--tint-neutral-row:transparent; --tint-success-bg:rgba(31,157,87,.16); --tint-success-bd:#1a6b41; --tint-success-ink:#6fd39a; --tint-success-row:rgba(31,157,87,.07); --tint-warning-bg:rgba(224,161,18,.16);--tint-warning-bd:#8a6209; --tint-warning-ink:#f0cf96; --tint-warning-row:rgba(224,161,18,.07); --tint-danger-bg:rgba(214,69,69,.16); --tint-danger-bd:#8f2f2f; --tint-danger-ink:#eebcbc; --tint-danger-row:rgba(214,69,69,.07); --sidepanel-hover:rgba(255,255,255,.06); --sidepanel-active:rgba(74,144,217,.24); --table-head-bg:var(--abyss-600); --table-divider:var(--abyss-600); --btn-outline-bd:var(--abyss-500); --btn-disabled-bg:var(--abyss-600); --btn-disabled-ink:var(--fog-700); --btn-disabled-bd:var(--abyss-500); --tree-guide:rgba(203,216,230,.20); --tree-active-ink:var(--sky-300); --topbar-line:rgba(255,255,255,.08); --shadow-card:0 1px 2px rgba(0,0,0,.40),0 8px 24px rgba(0,0,0,.34); --shadow-raised:0 4px 16px rgba(0,0,0,.46); } /* ───────────────────────────────────────────────────────────────────────── CONTRAST — ความต่างสูงสุด (ผู้ใช้สายตาเลือนราง · จอสะท้อนแสงกลางแจ้ง) ทุกคู่สี ≥ 7:1 · ขอบหนาขึ้น · วงแหวนโฟกัสหนา 4px ───────────────────────────────────────────────────────────────────────── */ [data-theme="contrast"] { color-scheme: light; --surface-app:#ffffff; --surface-card:#ffffff; --surface-raised:#f2f2f2; --surface-sunken:#f2f2f2; --surface-header:#000000; --surface-header-ink:#ffffff; --surface-nav:#000000; --surface-nav-ink:#ffffff; --surface-scrim:rgba(0,0,0,.72); --ink-strong:#000000; --ink-body:#000000; --ink-muted:#3a3a3a; --ink-disabled:#6b6b6b; --line:#000000; --line-soft:#767676; --line-strong:#000000; --brand-primary:#00335c; --brand-primary-dark:#000000; --brand-accent:#7a5b00; --brand-accent-soft:#fff3cc; --brand-secondary:#00457a; --ink-on-accent:#ffffff; /* ทองเข้มพอที่จะรับตัวอักษรขาวได้ในโหมดนี้ */ --link:#00457a; --focus:#000000; --focus-w:4px; --status-success:#0a6b39; --status-warning:#7a5307; --status-danger:#9b1c1c; --status-info:#00457a; --tint-gold-bg:#fff3cc; --tint-gold-bd:#7a5b00; --tint-gold-ink:#3d2d00; --tint-sky-bg:#e3f0fb; --tint-sky-bd:#00457a; --tint-sky-ink:#00335c; --tint-neutral-bg:#f2f2f2; --tint-neutral-bd:#000000; --tint-neutral-ink:#000000; --tint-success-bg:#ddf3e6; --tint-success-bd:#0a6b39; --tint-success-ink:#053d20; --tint-warning-bg:#fdeed6; --tint-warning-bd:#7a5307; --tint-warning-ink:#4a3204; --tint-danger-bg:#fbe3e3; --tint-danger-bd:#9b1c1c; --tint-danger-ink:#5e0f0f; --shadow-card:0 0 0 1px #000000; --shadow-raised:0 0 0 2px #000000; --shadow-overlay:0 0 0 3px #000000; --tree-guide:#767676; } [data-theme="contrast"] .pat-card, [data-theme="contrast"] .pat-field, [data-theme="contrast"] .pat-btn { border-width:2px; } /* ───────────────────────────────────────────────────────────────────────── BOARD — จอห้องประชุม 1920x1080 · ระยะมอง 5-8 ม. ไม่ใช่ "อุปกรณ์" แต่เป็น "โหมดการมอง" → จึงอยู่แกนธีม ไม่ใช่แกนฐาน ───────────────────────────────────────────────────────────────────────── */ [data-theme="board"] { color-scheme: dark; --surface-app:var(--navy-900); --surface-card:var(--navy-800); --surface-raised:var(--navy-700); --surface-sunken:var(--navy-900); --surface-header:var(--navy-900); --surface-header-ink:var(--paper-0); --ink-strong:var(--paper-0); --ink-body:var(--sky-200); --ink-muted:var(--sky-300); --line:rgba(156,199,240,.22); --line-soft:rgba(156,199,240,.12); --line-strong:var(--sky-300); --brand-secondary:var(--sky-400); --link:var(--sky-300); --tint-gold-bg:var(--gold-500); --tint-gold-bd:var(--gold-500); --tint-gold-ink:var(--navy-900); --tint-sky-bg:transparent; --tint-sky-bd:var(--sky-500); --tint-sky-ink:var(--sky-300); --tint-success-bg:transparent; --tint-success-bd:var(--success);--tint-success-ink:#6fd39a; --tint-neutral-bg:transparent; --tint-neutral-bd:var(--ink-300);--tint-neutral-ink:var(--ink-300); --table-head-bg:transparent; --table-divider:rgba(156,199,240,.16); --table-row-pad:20px 28px; --topbar-h:0px; --statusbar-h:0px; /* จอบอร์ดไม่มีแถบเครื่องมือ — มีแต่เนื้อหา */ --badge-fs:32px; --badge-pad:10px 24px; --badge-dot:16px; --card-pad:32px; --radius-md:20px; /* สเกลตัวอักษรของจอบอร์ด ถูกบังคับใช้ผ่าน .pat-board-* ใน pat-components.css */ } /* ───────────────────────────────────────────────────────────────────────── ธีมตามเครื่องผู้ใช้ — ใช้เมื่อผู้ใช้ยังไม่เลือกเอง (data-theme="auto") ───────────────────────────────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { [data-theme="auto"] { color-scheme: dark; --surface-app:#0b1626; --surface-card:#12233a; --surface-raised:#1a2f4d; --surface-sunken:#08111d; --surface-header:#08111d; --surface-header-ink:#eaf1f9; --surface-nav:#08111d; --surface-nav-ink:#cbd8e6; --surface-scrim:rgba(4,9,16,.62); --ink-strong:#eaf1f9; --ink-body:#cbd8e6; --ink-muted:#93a5b8; --line:#24405f; --line-soft:#1a2f4d; --line-strong:#5f7288; --brand-primary:var(--navy-500); --brand-accent:var(--gold-400); --brand-secondary:var(--sky-400); --link:var(--sky-300); --focus:var(--sky-400); } } /* ═══════════════════════════════════════════════════════════════════════════ แกนที่ 4 — เทศกาล / วาระพิเศษ (data-event) ⛔ ขอบเขตที่อีเวนต์แตะได้ มีแค่ 4 ตัวแปรนี้เท่านั้น: --event-strip แถบบางเหนือแถบหัว --event-accent-decor สีของงานตกแต่ง (ไม่ใช่สีของปุ่ม/สถานะ) --event-motif-opacity ความเข้มของลายทะเล --event-badge-display ป้ายเทศกาลบนแถบหัว ห้ามอีเวนต์แตะ --status-* / --queue-* / --brand-primary เด็ดขาด (ยกเว้น "ไว้อาลัย" ซึ่งเป็นข้อยกเว้นเดียวที่ระเบียบทางการกำหนดให้ปิดสีทอง) ═══════════════════════════════════════════════════════════════════════════ */ [data-event]:not([data-event="none"]) { --event-strip-h:3px; --event-badge-display:inline-flex; } [data-event="pat-day"] { --event-strip:linear-gradient(90deg,#c9a227,#ecd488,#c9a227); --event-accent-decor:var(--gold-400); } [data-event="newyear"] { --event-strip:linear-gradient(90deg,#2f5da3,#4a90d9,#9cc7f0,#4a90d9,#2f5da3); --event-accent-decor:var(--sky-300); } [data-event="songkran"] { --event-strip:linear-gradient(90deg,#9cc7f0,#cfe3f8,#9cc7f0); --event-accent-decor:var(--sky-400); } /* ไว้อาลัย — ปิดทองทั้งระบบ · ปิดลาย · ไม่มีป้ายเทศกาล */ [data-event="mourning"] { --event-strip:#28313f; --event-strip-h:3px; --event-motif-opacity:0; --event-accent-decor:var(--ink-500); --event-badge-display:none; --brand-accent:var(--ink-500); --brand-accent-soft:var(--paper-100); --ink-on-accent:var(--paper-0); --queue-current:var(--ink-700); --tint-gold-bg:var(--paper-100); --tint-gold-bd:var(--steel-400); --tint-gold-ink:var(--ink-700); --tint-gold-row:var(--paper-50); } [data-event="mourning"] .pat-logo, [data-event="mourning"] img.pat-brandmark { filter:grayscale(1); }