/** * DM9 Phase 2–3 — component + btn + hub accent scale จาก brand/surface ด้วย CSS (color-mix) * LayoutHelper ฉีดเฉพาะ brand/mode/action keys; palette ใน layouts.php ยัง override คีย์ใดก็ได้ * โหลดหลัง ui-tokens.css ก่อน generateThemeCSS() ใน header */ :root { /* Panel */ --dm-panel-bg: var(--dm-bg-surface, #ffffff); --dm-panel-border: var(--dm-border, #dce4ec); --dm-subpanel-bg: var(--dm-bg-surface, #ffffff); --dm-subpanel-border: var(--dm-border, #dce4ec); /* Card */ --dm-card-bg: var(--dm-bg-surface, #ffffff); --dm-card-border: var(--dm-border, #dce4ec); --dm-card-title: var(--dm-text-main, #2c3e50); --dm-card-text: var(--dm-text-main, #2c3e50); --dm-card-muted: var(--dm-text-muted, #7f8c8d); --dm-card-head-bg: color-mix(in srgb, var(--dm-bg-surface, #ffffff) 98%, var(--dm-text-main, #000000) 2%); --dm-card-head-border: var(--dm-border, #dce4ec); --dm-card-highlight-bg: color-mix(in srgb, var(--dm-primary, #34495e) 5%, var(--dm-bg-surface, #ffffff) 95%); --dm-card-highlight-border: color-mix(in srgb, var(--dm-primary, #34495e) 12%, var(--dm-border, #dce4ec) 88%); --dm-card-footer: color-mix(in srgb, var(--dm-bg-surface, #ffffff) 97%, var(--dm-text-main, #000000) 3%); --dm-card-footer-border: var(--dm-border, #dce4ec); /* Table — โทนหัวตาราง/หัวการ์ด: tone แล้ว Light +ดำ 10% / Dark +ขาว 10% */ --dm-table-bg: var(--dm-bg-surface, #ffffff); --dm-table-border: var(--dm-border, #dce4ec); --dm-table-head-tone: color-mix(in srgb, var(--dm-primary, #34495e) 92%, var(--dm-bg-surface, #ffffff) 8%); --dm-table-head-bg: color-mix(in srgb, var(--dm-table-head-tone) 90%, #000000 10%); --dm-table-head-text: #ffffff; --dm-table-head-border: color-mix(in srgb, var(--dm-table-head-bg) 92%, #000000 8%); --dm-table-row-bg: var(--dm-bg-surface, #ffffff); --dm-table-row-alt-bg: color-mix(in srgb, var(--dm-bg-surface, #ffffff) 98%, var(--dm-text-main, #000000) 2%); --dm-table-row-text: var(--dm-text-main, #2c3e50); --dm-table-row-hover-bg: color-mix(in srgb, var(--dm-primary, #34495e) 6%, var(--dm-bg-surface, #ffffff) 94%); --dm-table-row-muted-text: color-mix(in srgb, var(--dm-text-muted, #7f8c8d) 88%, var(--dm-bg-surface, #ffffff) 12%); --dm-table-row-muted-strong: color-mix(in srgb, var(--dm-text-muted, #7f8c8d) 92%, #000000 8%); --dm-table-link-text: var(--dm-primary, #34495e); /* Timetable grid (schools/term/timetable) — โครงสร้างอิง table/card tokens */ --dm-tt-title-bg: color-mix(in srgb, var(--dm-bg-soft, #eef2f5) 88%, var(--dm-primary, #34495e) 12%); --dm-tt-title-border: var(--dm-table-border, var(--dm-border, #dce4ec)); --dm-tt-title-text: var(--dm-text-main, #2c3e50); --dm-tt-period-head-bg: var(--dm-table-head-bg, var(--dm-primary, #34495e)); --dm-tt-period-head-text: var(--dm-table-head-text, #ffffff); --dm-tt-day-label-text: var(--dm-text-main, #2c3e50); --dm-tt-cell-empty-bg: var(--dm-table-row-alt-bg, color-mix(in srgb, var(--dm-bg-surface, #ffffff) 98%, var(--dm-text-main, #000000) 2%)); --dm-tt-cell-empty-text: var(--dm-table-row-muted-text, var(--dm-text-muted, #7f8c8d)); --dm-tt-cell-border: var(--dm-table-border, var(--dm-border, #dce4ec)); --dm-tt-cell-filled-text: var(--dm-table-row-text, var(--dm-text-main, #2c3e50)); --dm-tt-cell-hover-filter: brightness(0.95); --dm-tt-class-list-hover-accent: var(--dm-primary, #34495e); /* Subject registration time grid (gradebooks modal) */ --dm-subjectreg-timecell-unavailable-bg: color-mix( in srgb, var(--dm-text-muted, #7f8c8d) 22%, var(--dm-table-row-bg, #ffffff) 78% ); --dm-subjectreg-timecell-unavailable-text: var(--dm-text-muted, #6c757d); /* Toolbar */ --dm-toolbar-bg: color-mix(in srgb, var(--dm-bg-surface, #ffffff) 97%, var(--dm-text-main, #000000) 3%); --dm-toolbar-border: var(--dm-border, #dce4ec); --dm-toolbar-text: var(--dm-text-main, #2c3e50); --dm-toolbar-muted: var(--dm-text-muted, #7f8c8d); --dm-toolbar-control-bg: var(--dm-bg-surface, #ffffff); --dm-toolbar-control-border: var(--dm-border, #dce4ec); --dm-toolbar-control-text: var(--dm-text-main, #2c3e50); --dm-toolbar-control-icon: var(--dm-text-muted, #7f8c8d); --dm-toolbar-menu-bg: var(--dm-bg-surface, #ffffff); --dm-toolbar-menu-border: var(--dm-border, #dce4ec); /* Modal (Bootstrap .modal — mount ที่ body) */ --dm-modal-backdrop-bg: rgba(15, 23, 42, 0.45); --dm-modal-bg: var(--dm-card-bg, var(--dm-bg-surface, #ffffff)); --dm-modal-border: var(--dm-card-border, var(--dm-border, #dce4ec)); --dm-modal-radius: 12px; --dm-modal-shadow: 0 4px 16px color-mix(in srgb, var(--dm-text-main, #000000) 12%, transparent), 0 12px 40px color-mix(in srgb, var(--dm-text-main, #000000) 16%, transparent); --dm-modal-header-bg: var(--dm-table-head-bg, var(--dm-primary, #34495e)); --dm-modal-header-text: var(--dm-table-head-text, #ffffff); --dm-modal-header-border: var(--dm-table-head-border, var(--dm-table-head-bg)); --dm-modal-header-bg-soft: var(--dm-card-head-bg, var(--dm-bg-soft, #f8f9fa)); /* อย่าใช้ dm-card-title/dm-card-text — palette มักเป็นสีขาวสำหรับหัวการ์ดเข้ม */ --dm-modal-header-text-soft: var(--dm-text-main, #2c3e50); --dm-modal-header-border-soft: var(--dm-card-head-border, var(--dm-border, #dce4ec)); --dm-modal-close-filter: brightness(0) invert(1); --dm-modal-body-bg: var(--dm-modal-bg); --dm-modal-body-text: var(--dm-text-main, #2c3e50); --dm-modal-body-muted: var(--dm-text-muted, #7f8c8d); --dm-modal-footer-bg: var(--dm-card-footer, color-mix(in srgb, var(--dm-bg-surface, #ffffff) 97%, var(--dm-text-main, #000000) 3%)); --dm-modal-footer-border: var(--dm-card-footer-border, var(--dm-border, #dce4ec)); --dm-modal-footer-text: var(--dm-text-main, #2c3e50); /* Input */ --dm-input-bg: var(--dm-bg-surface, #ffffff); --dm-input-text: var(--dm-text-main, #2c3e50); --dm-input-placeholder: var(--dm-text-muted, #7f8c8d); --dm-input-border: var(--dm-border, #dce4ec); --dm-input-focus-border: var(--dm-primary, #34495e); --dm-input-focus-ring: color-mix(in srgb, var(--dm-primary, #34495e) 14%, transparent); --dm-input-icon: var(--dm-text-muted, #7f8c8d); /* Filter / pagination */ --dm-filter-panel-bg: var(--dm-bg-surface, #ffffff); --dm-filter-panel-border: var(--dm-border, #dce4ec); --dm-filter-panel-muted: color-mix(in srgb, var(--dm-bg-surface, #ffffff) 97%, var(--dm-text-main, #000000) 3%); --dm-filter-label: var(--dm-text-main, #2c3e50); --dm-filter-option-text: var(--dm-text-main, #2c3e50); --dm-filter-option-muted: var(--dm-text-muted, #7f8c8d); --dm-filter-accent: var(--dm-primary, #34495e); --dm-pagination-bg: var(--dm-bg-surface, #ffffff); --dm-pagination-border: var(--dm-border, #dce4ec); --dm-pagination-text: var(--dm-text-main, #2c3e50); --dm-pagination-active-bg: var(--dm-primary, #34495e); --dm-pagination-active-text: #ffffff; --dm-pagination-info-text: var(--dm-text-muted, #7f8c8d); --dm-pagination-bar-bg: color-mix(in srgb, var(--dm-bg-surface, #ffffff) 97%, var(--dm-text-main, #000000) 3%); --dm-pagination-bar-border: var(--dm-border, #dce4ec); /* Table row actions */ --dm-table-action-view-bg: color-mix(in srgb, var(--dm-primary, #34495e) 92%, #000000 8%); --dm-table-action-view-text: #ffffff; --dm-table-action-view-border: color-mix(in srgb, var(--dm-primary, #34495e) 92%, #000000 8%); --dm-table-action-edit-bg: var(--dm-bg-soft, var(--dm-bg-surface, #eef2f5)); --dm-table-action-edit-text: var(--dm-text-main, #2c3e50); --dm-table-action-edit-border: var(--dm-border, #dce4ec); --dm-table-action-delete-bg: #fff5f6; --dm-table-action-delete-text: #c82333; --dm-table-action-delete-border: #f3c6cd; --dm-action-icon-primary-bg: var(--dm-bg-soft, var(--dm-bg-surface, #eef2f5)); --dm-action-icon-primary-text: var(--dm-text-main, #2c3e50); --dm-action-icon-primary-border: var(--dm-border, #dce4ec); --dm-action-icon-danger-bg: #fff5f6; --dm-action-icon-danger-text: #c82333; --dm-action-icon-danger-border: #f3c6cd; --dm-status-online-bg: #d1fae5; --dm-status-online-text: #065f46; --dm-status-online-border: #8de3bd; --dm-status-offline-bg: #f3f4f6; --dm-status-offline-text: #6b7280; --dm-status-offline-border: #d7dbe1; /* Hub tile accent scale (CoreUI) — palette ใน layouts.php override ได้ทีละคีย์ */ --dm-hub-accent-1: #e55353; --dm-hub-accent-2: #6f42c1; --dm-hub-accent-3: #2eb85c; --dm-hub-accent-4: #3399ff; --dm-hub-accent-5: #e83e8c; --dm-hub-accent-6: #6610f2; --dm-hub-accent-7: #f9b115; --dm-hub-accent-8: #20c997; --dm-hub-accent-9: #17a2b8; --dm-hub-accent-10: #321fdb; --dm-hub-accent-11: #fd7e14; /* Semantic buttons (ui-buttons.css) */ --dm-btn-primary-bg: var(--dm-primary, #34495e); --dm-btn-primary-text: #ffffff; --dm-btn-primary-border: var(--dm-btn-primary-bg); --dm-btn-primary-hover-bg: color-mix(in srgb, var(--dm-btn-primary-bg) 86%, #ffffff 14%); --dm-btn-primary-hover-text: #ffffff; --dm-btn-primary-hover-border: var(--dm-btn-primary-hover-bg); --dm-btn-secondary-bg: var(--dm-bg-soft, #eef2f5); --dm-btn-secondary-text: var(--dm-text-main, #2c3e50); --dm-btn-secondary-border: var(--dm-border, #dce4ec); --dm-btn-secondary-hover-bg: color-mix(in srgb, var(--dm-btn-secondary-bg) 92%, #ffffff 8%); --dm-btn-secondary-hover-text: var(--dm-btn-secondary-text); --dm-btn-secondary-hover-border: color-mix(in srgb, var(--dm-btn-secondary-border) 92%, #ffffff 8%); --dm-btn-success-bg: #198754; --dm-btn-success-text: #ffffff; --dm-btn-success-border: #198754; --dm-btn-success-hover-bg: color-mix(in srgb, var(--dm-btn-success-bg) 90%, #ffffff 10%); --dm-btn-success-hover-text: #ffffff; --dm-btn-success-hover-border: var(--dm-btn-success-hover-bg); --dm-btn-info-bg: #17a2b8; --dm-btn-info-text: #ffffff; --dm-btn-info-border: #17a2b8; --dm-btn-info-hover-bg: color-mix(in srgb, var(--dm-btn-info-bg) 88%, #000000 12%); --dm-btn-info-hover-text: #ffffff; --dm-btn-info-hover-border: var(--dm-btn-info-hover-bg); --dm-btn-warning-bg: #ffc107; --dm-btn-warning-text: #212529; --dm-btn-warning-border: #e0aa06; --dm-btn-warning-hover-bg: color-mix(in srgb, var(--dm-btn-warning-bg) 88%, #ffffff 12%); --dm-btn-warning-hover-text: #212529; --dm-btn-warning-hover-border: color-mix(in srgb, var(--dm-btn-warning-border) 90%, #ffffff 10%); --dm-btn-danger-bg: #dc3545; --dm-btn-danger-text: #ffffff; --dm-btn-danger-border: #dc3545; --dm-btn-danger-hover-bg: color-mix(in srgb, var(--dm-btn-danger-bg) 90%, #ffffff 10%); --dm-btn-danger-hover-text: #ffffff; --dm-btn-danger-hover-border: var(--dm-btn-danger-hover-bg); } body.theme-dark { --dm-card-bg: color-mix(in srgb, var(--dm-bg-surface, #2c3e50) 70%, #ffffff 30%); --dm-card-border: color-mix(in srgb, var(--dm-border, #34495e) 82%, #ffffff 18%); --dm-card-head-bg: color-mix(in srgb, var(--dm-bg-surface, #2c3e50) 80%, #ffffff 20%); --dm-card-head-border: color-mix(in srgb, var(--dm-border, #34495e) 88%, #ffffff 12%); --dm-card-highlight-bg: color-mix(in srgb, var(--dm-primary, #5a8dee) 10%, var(--dm-bg-surface, #2c3e50) 90%); --dm-card-highlight-border: color-mix(in srgb, var(--dm-primary, #5a8dee) 18%, var(--dm-border, #34495e) 82%); --dm-card-footer: color-mix(in srgb, var(--dm-bg-surface, #2c3e50) 90%, #ffffff 10%); --dm-table-head-tone: color-mix(in srgb, var(--dm-bg-surface, #2c3e50) 80%, #ffffff 20%); --dm-table-head-bg: color-mix(in srgb, var(--dm-table-head-tone) 90%, #ffffff 10%); --dm-table-head-text: var(--dm-text-main, #ecf0f1); --dm-table-head-border: color-mix(in srgb, var(--dm-table-head-bg) 88%, #ffffff 12%); --dm-table-row-alt-bg: color-mix(in srgb, var(--dm-bg-surface, #2c3e50) 94%, #ffffff 6%); --dm-table-row-hover-bg: color-mix(in srgb, var(--dm-bg-surface, #2c3e50) 88%, #ffffff 12%); --dm-table-row-muted-text: color-mix(in srgb, var(--dm-text-muted, #b9c4d6) 92%, #000000 8%); --dm-table-row-muted-strong: color-mix(in srgb, var(--dm-text-main, #ecf0f1) 80%, #000000 20%); --dm-table-link-text: color-mix(in srgb, var(--dm-primary, #5a8dee) 62%, #ffffff 38%); --dm-toolbar-bg: color-mix(in srgb, var(--dm-bg-surface, #2c3e50) 90%, #ffffff 10%); --dm-toolbar-control-bg: color-mix(in srgb, var(--dm-bg-surface, #2c3e50) 84%, #ffffff 16%); --dm-toolbar-menu-bg: color-mix(in srgb, var(--dm-bg-surface, #2c3e50) 88%, #ffffff 12%); --dm-modal-backdrop-bg: rgba(0, 0, 0, 0.62); --dm-modal-shadow: 0 8px 24px color-mix(in srgb, #000000 35%, transparent), 0 20px 48px color-mix(in srgb, #000000 45%, transparent); --dm-modal-header-bg-soft: color-mix(in srgb, var(--dm-bg-surface, #2c3e50) 88%, #ffffff 12%); --dm-modal-header-text-soft: var(--dm-text-main, #ecf0f1); --dm-modal-header-border-soft: color-mix(in srgb, var(--dm-border, #34495e) 88%, #ffffff 12%); --dm-modal-close-filter: brightness(0) invert(1); --dm-filter-panel-muted: color-mix(in srgb, var(--dm-bg-surface, #2c3e50) 92%, #ffffff 8%); --dm-pagination-bar-bg: color-mix(in srgb, var(--dm-bg-surface, #2c3e50) 90%, #ffffff 10%); --dm-table-action-view-bg: color-mix(in srgb, var(--dm-bg-surface, #2c3e50) 82%, #ffffff 18%); --dm-table-action-view-text: var(--dm-text-main, #ecf0f1); --dm-table-action-view-border: color-mix(in srgb, var(--dm-border, #34495e) 90%, #ffffff 10%); --dm-table-action-edit-bg: color-mix(in srgb, var(--dm-bg-surface, #2c3e50) 88%, #ffffff 12%); --dm-table-action-delete-bg: #4a2b31; --dm-table-action-delete-text: #ff8e9a; --dm-table-action-delete-border: #7a414b; --dm-action-icon-danger-bg: #4a2b31; --dm-action-icon-danger-text: #ff8e9a; --dm-action-icon-danger-border: #7a414b; --dm-status-online-bg: #14382d; --dm-status-online-text: #8df0c6; --dm-status-online-border: #2c7b62; --dm-status-offline-bg: #303a45; --dm-status-offline-text: #c0cad6; --dm-status-offline-border: #556171; --dm-btn-primary-hover-bg: color-mix(in srgb, var(--dm-btn-primary-bg) 82%, #000000 18%); --dm-btn-primary-hover-border: var(--dm-btn-primary-hover-bg); --dm-btn-secondary-bg: color-mix(in srgb, var(--dm-bg-surface, #2c3e50) 88%, #ffffff 12%); --dm-btn-secondary-hover-bg: color-mix(in srgb, var(--dm-bg-surface, #2c3e50) 84%, #000000 16%); --dm-btn-secondary-hover-border: color-mix(in srgb, var(--dm-border, #34495e) 88%, #000000 12%); --dm-btn-success-bg: #1f7a4f; --dm-btn-success-border: #2ea86d; --dm-btn-success-hover-bg: color-mix(in srgb, var(--dm-btn-success-bg) 86%, #000000 14%); --dm-btn-success-hover-border: color-mix(in srgb, var(--dm-btn-success-border) 88%, #000000 12%); --dm-btn-info-hover-bg: color-mix(in srgb, var(--dm-btn-info-bg) 86%, #000000 14%); --dm-btn-info-hover-border: color-mix(in srgb, var(--dm-btn-info-border) 88%, #000000 12%); --dm-btn-warning-bg: #6f5a19; --dm-btn-warning-text: #f8f3df; --dm-btn-warning-border: #a08222; --dm-btn-warning-hover-bg: color-mix(in srgb, var(--dm-btn-warning-bg) 88%, #000000 12%); --dm-btn-warning-hover-text: #fff7df; --dm-btn-warning-hover-border: color-mix(in srgb, var(--dm-btn-warning-border) 90%, #000000 10%); --dm-btn-danger-bg: #7a2f39; --dm-btn-danger-border: #a04654; --dm-btn-danger-hover-bg: color-mix(in srgb, var(--dm-btn-danger-bg) 88%, #000000 12%); --dm-btn-danger-hover-border: color-mix(in srgb, var(--dm-btn-danger-border) 90%, #000000 10%); --dm-subjectreg-timecell-unavailable-bg: color-mix( in srgb, var(--dm-text-muted, #9ca3af) 28%, var(--dm-table-row-bg, #1f2b37) 72% ); --dm-subjectreg-timecell-unavailable-text: var(--dm-text-muted, #9ca3af); }