/* ========================================================================== ATOMS / theme-toggle / theme-toggle.css -------------------------------------------------------------------------- Tombol toggle dark/light di navbar. Hanya pakai semantic token (--color-*) — JANGAN hardcode warna di sini, supaya otomatis ikut berubah saat [data-theme] di berubah. Catatan: ini KOMPONEN BERBEDA dari ATOMS/toggle (switch checkbox untuk form). theme-toggle adalah PENTING: show/hide icon DITANGANI OLEH design-system/js/theme.js lewat property .hidden (lihat fungsi _syncButtons di file tersebut), BUKAN oleh CSS [data-theme] selector. File ini hanya bertanggung jawab atas visual styling tombolnya (ukuran, warna, border, hover, focus), bukan logic tampil/sembunyi icon — supaya tidak ada dua sumber kebenaran yang bisa saling konflik. ========================================================================== */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; background-color: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-full); color: var(--color-text-primary); cursor: pointer; transition: background-color var(--duration-normal) var(--ease-default), border-color var(--duration-normal) var(--ease-default); } .theme-toggle:hover { background-color: var(--color-bg-elevated); border-color: var(--color-border-strong); } .theme-toggle:focus-visible { box-shadow: var(--shadow-focus-ring); outline: 2px solid var(--color-border-focus); outline-offset: 2px; } .theme-toggle-icon { display: inline-flex; width: 1.1rem; height: 1.1rem; } /* -------------------------------------------------------------------------- Opsional: kelas ini ditambahkan ke oleh theme.js (lihat fungsi _init di design-system/js/theme.js) selama first-paint, untuk mencegah elemen lain yang punya CSS transition pada color/background ikut "animasi" saat tema di-set pertama kali. Kalau ada komponen lain yang pakai transition pada warna, tambahkan baris serupa di komponen itu juga jika diperlukan. -------------------------------------------------------------------- */ .preload-transitions .theme-toggle { transition: none; }