/* ============================================================================ kk-theme.css — Kaokla ecosystem UNIFIED theme (single source of truth) กฎเหล็ก: 3 โหมดเท่านั้น = dark / light / device · หลัก 60-30-10 · ห้ามตัวหนังสือกลืนพื้น - data-theme บน : absent | "device" → ตาม OS (prefers-color-scheme) "dark" | "light" → บังคับ - โหลด "ท้ายสุด" ในทุกแอป → alias override เฉพาะ COLOR token ของ base CSS เดิม (คง component/layout CSS เดิมไว้ · เปลี่ยนแค่จานสี → ทุกแอปหน้าตาเป็นระบบเดียว) - 60% = --kk-bg (พื้นหลัก) · 30% = --kk-surface (การ์ด/พาเนล) · 10% = --kk-accent (เน้น) ============================================================================ */ /* ---------- DARK (default) ---------- */ :root { color-scheme: dark; --kk-bg: #0e1621; /* 60% dominant */ --kk-bg-2: #0a1019; /* deeper (หลังการ์ด/ขอบจอ) */ --kk-surface: #172230; /* 30% secondary — การ์ด/พาเนล */ --kk-surface-2: #1f2c3c; /* raised */ --kk-accent: #2f95ff; /* 10% accent */ --kk-accent-2: #22d3ee; /* accent รอง (ใช้เท่าที่จำเป็น) */ --kk-accent-ink: #ffffff; /* ตัวอักษรบน accent */ --kk-text: #e9eff7; /* หลัก — contrast ~14:1 บน bg */ --kk-text-dim: #a4b5c9; /* รอง — ~7:1 */ --kk-text-faint: #6f8298; /* จาง — ~4.6:1 (ยังอ่านออก) */ --kk-line: #263340; --kk-good: #34d399; --kk-good-ink:#04140d; --kk-warn: #fbbf24; --kk-warn-ink:#1c1600; --kk-bad: #f87171; --kk-bad-ink:#1a0606; --kk-3d-bg: #0c1521; /* พื้นหลัง 3D view */ --kk-3d-fog: #0c1521; --kk-3d-grid: #24333f; } /* ---------- LIGHT (forced) ---------- */ :root[data-theme="light"] { color-scheme: light; --kk-bg: #f4f7fb; --kk-bg-2: #e9eef4; --kk-surface: #ffffff; --kk-surface-2: #eef2f8; --kk-accent: #1f7ff2; --kk-accent-2: #0e7490; --kk-accent-ink: #ffffff; --kk-text: #17222f; /* ~15:1 บน bg สว่าง */ --kk-text-dim: #51617a; /* ~7:1 */ --kk-text-faint: #74869b; /* ~4.6:1 */ --kk-line: #d6e0ec; --kk-good: #059669; --kk-good-ink:#ffffff; --kk-warn: #b45309; --kk-warn-ink:#ffffff; --kk-bad: #dc2626; --kk-bad-ink:#ffffff; --kk-3d-bg: #eef2f7; --kk-3d-fog: #dce4ee; --kk-3d-grid: #c3cedd; } /* ---------- DEVICE (ตาม OS) — เมื่อไม่บังคับ dark/light หรือระบุ device แล้ว OS = light ---------- */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-theme="light"]), :root[data-theme="device"], :root[data-theme="system"] { color-scheme: light; --kk-bg:#f4f7fb; --kk-bg-2:#e9eef4; --kk-surface:#ffffff; --kk-surface-2:#eef2f8; --kk-accent:#1f7ff2; --kk-accent-2:#0e7490; --kk-accent-ink:#ffffff; --kk-text:#17222f; --kk-text-dim:#51617a; --kk-text-faint:#74869b; --kk-line:#d6e0ec; --kk-good:#059669; --kk-good-ink:#fff; --kk-warn:#b45309; --kk-warn-ink:#fff; --kk-bad:#dc2626; --kk-bad-ink:#fff; --kk-3d-bg:#eef2f7; --kk-3d-fog:#dce4ee; --kk-3d-grid:#c3cedd; } } /* ============================================================================ ALIAS LAYER — map legacy per-app color tokens → canonical (ครอบทุก namespace) วางท้ายไฟล์ + ไฟล์นี้โหลดท้ายสุด → ชนะ base CSS (:root เท่ากัน last-wins) · ธีมชื่อเมืองเดิม (data-theme=macos-*) ถูกปิดที่ switcher แล้วจึงไม่ match · ⚠ alias เฉพาะ token "สี" เท่านั้น — ห้ามแตะ --*-font / --fut-skew / --*-grad ที่ไม่ใช่สี ============================================================================ */ :root, :root[data-theme="light"], :root[data-theme="dark"], :root[data-theme="device"] { /* soft tint bg (badge/alert) — โปร่งใสตามสี → เข้ากับทุกธีม */ --kk-good-soft: color-mix(in srgb, var(--kk-good) 15%, transparent); --kk-warn-soft: color-mix(in srgb, var(--kk-warn) 16%, transparent); --kk-bad-soft: color-mix(in srgb, var(--kk-bad) 15%, transparent); --kk-accent-soft: color-mix(in srgb, var(--kk-accent) 14%, transparent); --kk-glow: color-mix(in srgb, var(--kk-accent) 30%, transparent); /* ---- generic ---- */ --bg: var(--kk-bg); --bg-2: var(--kk-bg-2); --surface: var(--kk-surface); --surface-2: var(--kk-surface-2); --surface2: var(--kk-surface-2); --panel: var(--kk-surface); --panel2: var(--kk-surface-2); --panel-2: var(--kk-surface-2); --card: var(--kk-surface); --text: var(--kk-text); --ink: var(--kk-text); --mute: var(--kk-text-dim); --muted: var(--kk-text-dim); --accent: var(--kk-accent); --accent2: var(--kk-accent); --accent-2: var(--kk-accent-2); --line: var(--kk-line); --border: var(--kk-line); --good: var(--kk-good); --warn: var(--kk-warn); --bad: var(--kk-bad); --cy: var(--kk-accent-2); /* System-D generic (home-calculator ฯลฯ) */ --fg: var(--kk-text); --input-bg: var(--kk-surface); --info-bg: var(--kk-accent-soft); --info-fg: var(--kk-text); --warn-bg: var(--kk-warn-soft); --warn-fg: var(--kk-text); --warn-bd: var(--kk-warn); /* System-D apps (kaokla-2D · BOQ · scaffold · house-ai · daily) — token ของแต่ละแอปใน style.css */ --ink-2: var(--kk-text-dim); --ink-faint: var(--kk-text-faint); --primary: var(--kk-accent); --primary-ink: var(--kk-accent-ink); --primary-soft: var(--kk-accent-soft); --primary-strong: var(--kk-accent); --border-strong: var(--kk-line); --line-strong: var(--kk-line); --line2: var(--kk-line); --surface: var(--kk-surface); --surface-alt: var(--kk-surface-2); --surface-soft: var(--kk-surface-2); --bg-alt: var(--kk-bg-2); --grid-line: var(--kk-3d-grid); --good-soft: var(--kk-good-soft); --ok: var(--kk-good); --warn-soft: var(--kk-warn-soft); --warning: var(--kk-warn); --warning-soft: var(--kk-warn-soft); --danger: var(--kk-bad); --danger-soft: var(--kk-bad-soft); --sidebar-bg: var(--kk-bg-2); --sidebar-bg-2: var(--kk-surface); --sidebar-text: var(--kk-text); --sidebar-muted: var(--kk-text-dim); --btn-bg: var(--kk-surface-2); --btn-text: var(--kk-text); --topbar-bg: var(--kk-surface); --icon-border: var(--kk-line); --acc-bg: var(--kk-accent-soft); --acc-border: var(--kk-accent); --acc-text: var(--kk-text); /* scaffold 3D --model-* (bg มี alias แล้ว · เพิ่มเส้น/ชิ้นส่วน) */ --model-grid-major: var(--kk-3d-grid); --model-grid-minor: var(--kk-3d-grid); /* ---- CAD --c-* (truss) ---- */ --c-bg: var(--kk-bg); --c-panel: var(--kk-surface); --c-panel2: var(--kk-surface-2); --c-text: var(--kk-text); --c-text-2: var(--kk-text-dim); --c-mute: var(--kk-text-faint); --c-faint: var(--kk-text-faint); --c-accent: var(--kk-accent); --c-accent2: var(--kk-accent-2); --c-accent-bg: var(--kk-accent-soft); --c-line: var(--kk-line); --c-line-2: var(--kk-line); --c-hover: var(--kk-surface-2); --c-good: var(--kk-good); --c-good-bg: var(--kk-good-soft); --c-warn: var(--kk-warn); --c-warn-bg: var(--kk-warn-soft); --c-bad: var(--kk-bad); --c-bad-bg: var(--kk-bad-soft); --c-grid-bg: var(--kk-3d-bg); --c-grid-line: var(--kk-3d-grid); /* ---- FUT neon --fut-* (peb/cellular/simple/reinforcement) → แบน 60-30-10 ---- */ --fut-bg-0: var(--kk-bg-2); --fut-bg-1: var(--kk-bg); --fut-bg-2: var(--kk-surface); --fut-bg-3: var(--kk-surface-2); --fut-text: var(--kk-text); --fut-text-2: var(--kk-text-dim); --fut-text-mute: var(--kk-text-dim); --fut-text-faint: var(--kk-text-faint); --fut-teal: var(--kk-accent); --fut-teal-bright: var(--kk-accent); --fut-teal-deep: var(--kk-accent-2); --fut-line: var(--kk-line); --fut-line-strong: var(--kk-line); --fut-glass: var(--kk-surface); --fut-green: var(--kk-good); --fut-green-bright: var(--kk-good); --fut-gold: var(--kk-warn); --fut-pink: var(--kk-bad); --fut-purple: var(--kk-accent); --fut-grad: var(--kk-accent); --fut-grad-soft: var(--kk-accent-soft); --fut-glow-teal: var(--kk-glow); --fut-glow-soft: var(--kk-glow); /* ---- Suite --ss-* (connection/simple/home) — ครบทุก color token ---- */ --ss-bg: var(--kk-bg); --ss-bg-sidebar: var(--kk-bg-2); --ss-surface: var(--kk-surface); --ss-surface-2: var(--kk-surface-2); --ss-surface-3: var(--kk-surface-2); --ss-ink: var(--kk-text); --ss-ink-2: var(--kk-text-dim); --ss-faint: var(--kk-text-faint); --ss-muted: var(--kk-text-dim); --ss-text: var(--kk-text); --ss-brand: var(--kk-accent); --ss-brand-hover: var(--kk-accent); --ss-brand-soft: var(--kk-accent-soft); --ss-brand-ring: var(--kk-accent); --ss-accent: var(--kk-accent); --ss-accent-soft: var(--kk-accent-soft); --ss-panel: var(--kk-surface); --ss-line: var(--kk-line); --ss-line-strong: var(--kk-line); --ss-info-bg: var(--kk-accent-soft); --ss-info-line: var(--kk-line); --ss-pass: var(--kk-good); --ss-pass-bg: var(--kk-good-soft); --ss-pass-fill: var(--kk-good); --ss-fail: var(--kk-bad); --ss-fail-bg: var(--kk-bad-soft); --ss-fail-fill: var(--kk-bad); --ss-warn: var(--kk-warn); --ss-warn-bg: var(--kk-warn-soft); --ss-warn-fill: var(--kk-warn); /* ---- ENG --eng-* (peb-eng-theme: peb/cellular · dark-only base + !important · rule ใช้ var() → ค่าไหลผ่าน) ---- */ --eng-bg-0: var(--kk-bg-2); --eng-bg-1: var(--kk-bg); --eng-bg-2: var(--kk-surface); --eng-bg-3: var(--kk-surface); --eng-bg-4: var(--kk-surface-2); --eng-text: var(--kk-text); --eng-text-2: var(--kk-text-dim); --eng-text-mute: var(--kk-text-dim); --eng-text-faint: var(--kk-text-faint); --eng-line: var(--kk-line); --eng-line-2: var(--kk-line); --eng-glass: var(--kk-surface); --eng-primary: var(--kk-accent); --eng-primary-br: var(--kk-accent); --eng-primary-dim: var(--kk-accent); --eng-secondary: var(--kk-accent-2); --eng-purple: var(--kk-accent); --eng-ok: var(--kk-good); --eng-warn: var(--kk-warn); --eng-danger: var(--kk-bad); --eng-grad: var(--kk-accent); --eng-grad-soft: var(--kk-accent-soft); --eng-glow: var(--kk-glow); /* ---- Theme-B --t-* (เผื่อยังมี) ---- */ --t-bg: var(--kk-bg); --t-ink: var(--kk-text); --t-brand: var(--kk-accent); --t-line: var(--kk-line); --t-surface: var(--kk-surface); /* ---- 3D bg vars (home-calc --g3d-* · scaffold --model-*) ---- */ --g3d-bg: var(--kk-3d-bg); --g3d-fog: var(--kk-3d-fog); --g3d-grid: var(--kk-3d-grid); --model-bg: var(--kk-3d-bg); --model-fog: var(--kk-3d-fog); } /* ============================================================================ COMPONENT COLOR FIXES — จุดที่ base CSS hardcode สี (ไม่ใช่ token) → บังคับตามธีม โหลดท้ายสุด = ชนะ (specificity เท่ากัน last-wins) · เพิ่มจุดใหม่เมื่อ audit เจอ ============================================================================ */ /* Suite (connection/simple/home): header hardcode gradient/ขาว → surface แบนตามธีม (image:none กัน gradient ทับ) */ html body .app-header.app-header, html body header.app-header { background: var(--kk-surface) !important; background-image: none !important; border-bottom-color: var(--kk-line) !important; } .tab:hover { background: var(--kk-surface-2); } /* peb-eng-theme (peb/cellular): html + กล่อง 3D hardcode gradient มืด (นีออน) → แบน 60-30-10 ตามธีม */ html { background: var(--kk-bg) !important; } #viewport-3d, .viewport-3d, .viewport3d { background: var(--kk-3d-bg) !important; } /* ★ INPUT/SELECT/TEXTAREA — base เดิม hardcode พื้นดำ rgba (peb-eng ฯลฯ) → ตัวอักษรกลืนพื้นในโหมดสว่าง บังคับตามธีม (bg=surface · text · placeholder) ด้วย selector+specificity ที่ชนะ base (โหลดท้าย) */ input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="search"], input[type="tel"], input[type="password"], input:not([type]), select, textarea, .input, .select, .field input, .field select, .kk-drop select { background: var(--kk-surface) !important; color: var(--kk-text) !important; -webkit-text-fill-color: var(--kk-text) !important; border-color: var(--kk-line) !important; } select option { background: var(--kk-surface) !important; color: var(--kk-text) !important; -webkit-text-fill-color: var(--kk-text) !important; } input::placeholder, textarea::placeholder { color: var(--kk-text-faint) !important; -webkit-text-fill-color: var(--kk-text-faint) !important; opacity: 1; } /* ★ HEADER title + RIBBON buttons — base hardcode สี (ขาว/ดำ) ไม่ตามธีม → ชนกันบางโหมด */ .app-title, .app-header .app-title, body > header h1, .app-header h1 { color: var(--kk-text) !important; -webkit-text-fill-color: var(--kk-text) !important; } .ribbon .rb-btn, .kk-drop .rb-btn, .rb-btn, .kk-proj-summary, .ribbon-btn, .ribbon .btn { background: var(--kk-surface-2) !important; color: var(--kk-text) !important; -webkit-text-fill-color: var(--kk-text) !important; border-color: var(--kk-line) !important; } .ribbon .rb-btn.rb-primary, .kk-drop .rb-btn.rb-primary, .rb-btn.rb-primary, .ribbon-btn.primary { background: var(--kk-accent) !important; color: var(--kk-accent-ink) !important; -webkit-text-fill-color: var(--kk-accent-ink) !important; border-color: transparent !important; } /* ★ TABLE — base hardcode พื้นดำ rgba → ตามธีม (ตัวเลข/หัวตารางไม่กลืน) */ table, .tbl, table.r { background: var(--kk-surface) !important; } table.r th, .tbl th { background: var(--kk-surface-2) !important; color: var(--kk-text-dim) !important; -webkit-text-fill-color: var(--kk-text-dim) !important; } table td, table th, .tbl td, .tbl th { color: var(--kk-text); } /* ชนะ color-scheme:dark !important ของ base เดิม (peb-eng-theme) → scrollbar/form control ตามธีม */ :root[data-theme="light"] { color-scheme: light !important; } :root[data-theme="dark"] { color-scheme: dark !important; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-theme="light"]), :root[data-theme="device"] { color-scheme: light !important; } } /* กันตัวหนังสือกลืนพื้น (safety net) — body ใช้จานสีกลาง ถ้า base ไม่ได้ตั้ง */ html { background: var(--kk-bg); } body { background: var(--kk-bg); color: var(--kk-text); } /* ซ่อน switcher ธีมเก่าของ System-D ที่ใช้ html[data-theme] (kaokla-2D/BOQ/scaffold) — kk FAB เป็นตัวเดียว (house-ai ใช้ body[data-theme]+warm = ระบบต่าง คงของเดิม · home ใช้ #theme-sel เอง ไม่โดน) */ #kkTheme, #theme-toggle, .theme-switcher { display: none !important; } /* ---------- 3D viewer overlay (peb/cellular · viewer3d) ---------- caption/toolbar/info ลอยบนฉาก 3D + มี dark-glass chip เป็น bg คงที่ (rgba(8,16,25,..)) แต่ text เดิมใช้ var(--eng-text-*) → light theme = ตัวมืดบนชิปมืด = กลืน (cr 1.1) → บังคับตัวหนังสือสว่างคงที่ อ่านออกทุกธีม (active btn คงตัวเข้มบน accent สว่าง) */ .viewport-3d .vp-caption, #frame3d .v3d-info, #frame3d .v3d-btn, .v3d-toolbar .v3d-btn { color: #d4dde7 !important; } #frame3d .v3d-btn.active { color: #05131a !important; } /* ---------- fut-theme + peb-eng-theme (simple/peb/cellular) glass มืด hardcode -> theme-aware ---------- ปุ่ม ghost/secondary/view + การ์ด metric/chip ตั้ง bg rgba(8,20,32)/rgba(11,22,34) important คงที่ -> light theme กลืน (cr 1.25-1.87) */ .btn-ghost:not(.active){ background: transparent !important; color: var(--kk-accent) !important; box-shadow: inset 0 0 0 1px var(--kk-line) !important; } .btn-secondary:not(.active){ background: var(--kk-surface-2) !important; color: var(--kk-text) !important; } .view-btn:not(.active){ background: var(--kk-surface-2) !important; color: var(--kk-text) !important; } .metric, .chip{ background: var(--kk-surface-2) !important; } /* ---------- FAB switcher (kk-theme.js) ---------- */ #kk-theme-fab { position: fixed; right: 16px; bottom: 16px; z-index: 2147483000; font-family: inherit; } #kk-theme-fab .kk-th-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--kk-line) !important; background: var(--kk-surface) !important; color: var(--kk-text) !important; -webkit-text-fill-color: var(--kk-text) !important; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.28); } #kk-theme-fab .kk-th-toggle:hover { border-color: var(--kk-accent); } #kk-theme-fab .kk-th-menu { position: absolute; right: 0; bottom: calc(100% + 8px); min-width: 148px; display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 12px; border: 1px solid var(--kk-line) !important; background: var(--kk-surface) !important; box-shadow: 0 12px 32px rgba(0,0,0,.34); } #kk-theme-fab .kk-th-menu[hidden] { display: none; } #kk-theme-fab .kk-th-opt { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--kk-text) !important; -webkit-text-fill-color: var(--kk-text) !important; font-size: 13.5px; font-weight: 500; text-align: left; cursor: pointer; white-space: nowrap; } #kk-theme-fab .kk-th-opt:hover { background: var(--kk-surface-2); } #kk-theme-fab .kk-th-opt[aria-current="true"] { background: var(--kk-accent); color: var(--kk-accent-ink) !important; -webkit-text-fill-color: var(--kk-accent-ink) !important; }