Warna

Peran semantik

Peran bawaan daisyUI 5. Tiap swatch menampilkan terang di kiri dan gelap di kanan. Pakai sebagai var(--color-primary) atau utilitas Tailwind (bg-primary, text-base-content).

Permukaan netral dan hangat. Teal muncul pada aksi utama, item navigasi saat ini, seleksi, dan focus ring, dan secara bawaan tidak di tempat lain.

Ekstensi Citia

Peran yang tidak ada di daisyUI. Nama CSS-nya --ds-<nama>; Tailwind membaca --color-<nama> (text-link, bg-popover, border-control).

Warna status

Status memakai empat rona dengan arti tetap. Isian tonal (pucat) mengisi area; warna jenuh hanya muncul sebagai border 1px, ikon, atau titik. Status selalu disertai kata, dan bentuk ikon berbeda per nada, sehingga tetap terbaca bagi buta warna dan dalam skala abu-abu.

<div class="flex flex-wrap gap-3">
  <span class="ds-pill is-info">Terjadwal</span>
  <span class="ds-pill is-success">Lunas</span>
  <span class="ds-pill is-warning">Menunggu pembayaran</span>
  <span class="ds-pill is-error">Terlambat</span>
  <span class="ds-pill is-neutral">Draf</span>
</div>

Aturan:

• Tulis status sebagai kata. Warna dan titik hanya mendukung.
• Teks di atas tint memakai base-content atau peran -text, bukan warna dasar status di tema terang.
• Jangan menandai galat hanya dengan merah: tambahkan pesan di dekat field, dihubungkan dengan aria-describedby.
• Jangan mengubah arti demi merek. Merek boleh menyesuaikan nada, bukan arti.

State layer

Hover, tekan, seleksi, dan drag diungkapkan sebagai lapisan translusen warna konten di atas permukaan, bukan warna baru. Token:

.app-row:hover {
  background: color-mix(in oklab, var(--color-base-content) calc(var(--ds-opacity-state-hover) * 100%), var(--color-base-100));
}
.app-row[aria-selected="true"] {
  background: color-mix(in oklab, var(--color-primary) calc(var(--ds-opacity-state-selected) * 100%), var(--color-base-100));
}

Karena lapisan dicampur dari token, ia menyesuaikan tema apa pun tanpa hex baru. Tint dijaga 16% atau kurang agar teks di atasnya tetap 4.5:1.

Resep tint dan border

Mode gelap

Tema gelap dirancang, bukan dibalik.

• Permukaan berwarna hitam kebiruan (base-100 #151c25, halaman #0e141b), bukan hitam murni, supaya bayangan dan garis tipis tetap terbaca.
• primary menjadi #00a4b2 dengan teks gelap #0e141b; terang memakai #00838f dengan putih.
• --ds-focus menjadi aqua #00d4df (9.38:1) karena warna fokus tema terang terlalu gelap di halaman gelap.
• --ds-link pindah ke biru info #7aa2f7 (6.81:1).
• Warna status lebih terang (success #34d399, error #f87171) dan peran -text-nya sama dengan warna dasar, yang sudah lolos 4.5:1.
• Popover diangkat dengan sedikit putih (color-mix dengan 6% putih) agar lapisan terpisah dari halaman tanpa bergantung pada bayangan; bayangan lebih pekat (.36) karena halamannya sudah gelap.
• Hindari teks putih murni (base-content adalah #e6edf3) dan area jenuh yang besar, yang menyilaukan di gelap.

Pilih tema di markup dengan data-theme="light" atau "dark"; lihat Tema.

Palet primitif

Nilai mentah di balik peran. Arahkan kursor ke chip untuk melihat catatannya.

Hasil kontras

dotnet run tools/tokens.cs menghitung rasio WCAG 2.2 untuk 72 pasangan di kedua tema dan menulis wwwroot/tokens/contrast.json. Pasangan wajib di bawah 4.5:1 (teks) atau 3:1 (batas, focus ring, ikon) menggagalkan build. Pasangan berlabel informasional tidak menentukan hasil.

Lakukan dan jangan

• Lakukan: pakai peran lewat variabel: color: var(--ds-subtle), border-color: var(--ds-control-border).
• Lakukan: pasangkan setiap warna status dengan kata dan ikon.
• Lakukan: jaga satu btn-primary per area; teal menandainya.
• Lakukan: periksa pasangan teks-di-atas-warna yang baru dan tambahkan ke tools/tokens.cs.
• Jangan: pakai hex, primitif, atau kelas palet Tailwind (bg-red-500) di komponen.
• Jangan: memberi tint di atas 16% di belakang teks, atau memakai gradien, glow, dan blok jenuh yang besar.
• Jangan: memakai warna saja untuk state: baris terpilih juga mendapat centang, bilah, atau perubahan bobot.
• Jangan: memakai biru untuk tombol atau teal untuk tautan.

.app-ref { color: var(--ds-link); text-decoration: underline; }
.app-hint { color: var(--ds-subtle); }
.app-field { border: 1px solid var(--ds-control-border); background: var(--color-base-100); }

<a asp-page="Details" asp-route-id="@Model.Id" class="text-link underline underline-offset-2">INV-2026-0418</a>
<p class="text-subtle">Format INV-TTTT-NNNN</p>
<input class="input border-control" />

Utilitas itu berasal dari generated/tailwind-theme.css dan di-resolve per elemen, sehingga data-theme bersarang tetap memakai warnanya sendiri.