Desain Token & CSS Variables
Tema Xionic mengimplementasikan sistem Design Tokens berbasis CSS Custom Properties (:root). Pendekatan ini memungkinkan Child Theme untuk merombak tampilan visual, palet warna, dan radius kontainer secara global tanpa perlu mengedit atau menimpa ratusan baris CSS framework.
Token Bawaan :root
Berikut adalah daftar token bawaan tema parent Xionic:
CSS
:root {
/* Palet Permukaan / Background */
--xionic-surface: #ffffff;
--xionic-surface-low: #f9fafb;
--xionic-surface-high: #f3f4f6;
--xionic-surface-highest: #e5e7eb;
/* Warna Teks & Konten */
--xionic-primary: #1e3a8a;
--xionic-on-surface: #1f2937;
--xionic-on-surface-variant: #6b7280;
/* Warna Aksen & Tombol */
--xionic-secondary: #0284c7;
--xionic-secondary-container: #fed488;
--xionic-on-secondary-container: #785a1a;
/* Border & Garis Pembatas */
--xionic-outline: #d1d5db;
--xionic-outline-variant: #e5e7eb;
/* Tipografi */
--xionic-font-display: 'Playfair Display', Georgia, serif;
--xionic-font-body: 'Inter', sans-serif;
/* Lebar Kontainer Maksimum */
--xionic-container-max: 1120px;
}
Deskripsi Token
| Nama Token | Peran / Penggunaan |
|---|---|
--xionic-surface |
Warna latar belakang utama konten dan kartu putih. |
--xionic-surface-low |
Warna latar belakang sekunder lembut (misal: baris ganjil tabel, background section abu-abu muda). |
--xionic-surface-high |
Warna latar belakang header atau kartu yang lebih menonjol. |
--xionic-primary |
Warna identitas brand utama, judul besar, dan tombol primer. |
--xionic-secondary |
Warna aksen penunjang, link hover, dan highlight. |
--xionic-on-surface |
Warna teks utama body (kontras tinggi terhadap surface). |
--xionic-on-surface-variant |
Warna teks sekunder, tanggal postingan, dan deskripsi redup. |
--xionic-outline |
Warna garis border pemisah kartu dan input form. |
--xionic-font-display |
Jenis font serif/display untuk headline h1–h3. |
--xionic-font-body |
Jenis font sans-serif untuk isi artikel dan menu. |
--xionic-container-max |
Batas maksimum lebar kontainer utama situs. |