Fondasi
Bentuk dan elevasi
Token radius, hairline 1px, tingkat bayangan, lapisan z-index, dan kapan material translusen boleh dipakai.
Kedalaman dibangun dari warna permukaan dan hairline 1px, bukan dari bayangan berat atau gradien. Bayangan hanya muncul pada lapisan yang melayang di atas konten, dan tetap sangat lembut.
Radius
--ds-radius-none0--ds-radius-xs0.125remFokus tautan.--ds-radius-sm0.25remStatus master, item menu.--ds-radius-md0.375remField, tombol (radius-field).--ds-radius-lg0.5remPill navigasi, popup combobox, opsi.--ds-radius-box0.625remPermukaan, modal, alert (radius-box).--ds-radius-xl0.75remKontrol top bar, tab container, notice.--ds-radius-card0.875remKartu portal, KPI, dropzone, panel.--ds-radius-2xl1remDialog besar.--ds-radius-full999pxPill, chip, badge, dot.| Token | Nilai | Dipakai oleh |
|---|---|---|
--ds-radius-xs, --ds-radius-sm |
2px, 4px | Kode inline, penanda kecil |
--ds-radius-md, --radius-field |
6px | Tombol, input, select, tab |
--ds-radius-box, --radius-box |
10px | Menu, alert, toast, popover |
--ds-radius-card |
14px | Kartu, panel, dialog |
--ds-radius-full |
999px | Pill, avatar, titik status |
Elemen di dalam wadah memakai radius lebih kecil daripada wadahnya agar sudutnya tampak sepusat. Pilih token terdekat; jangan menulis radius baru.
Border
| Variabel | Nilai | Catatan |
|---|---|---|
--ds-border-hairline | 1px | |
--ds-border-emphasis | 1.5px | Dropzone bergaris putus. |
--ds-border-focus | 2px | Cincin fokus, penanda rail aktif. |
--ds-border-accent | 3px | Garis aksen kiri (baris bermasalah, data yang ada). |
--ds-border-rail | 4px | Rail anak di tabel pohon. |
--ds-border-edge | 0.3125rem | Tepi kiri banner/kartu notifikasi (5 px). |
--ds-border-tone-bar | 0.25rem | Bar warna kiri kartu KPI. |
| Token | Nilai | Dipakai untuk |
|---|---|---|
--ds-border-hairline |
1px | Kartu, input, pemisah baris |
--ds-border-emphasis |
1.5px | Dropzone putus-putus |
--ds-border-focus |
2px | Focus ring |
--ds-border-accent |
3px | Penanda item aktif |
--ds-border-rail, --ds-border-tone-bar |
4px | Bilah tone di alert dan toast |
Pakai hairline --color-base-300 untuk struktur dan --ds-control-border untuk tepi kontrol (3:1 terhadap permukaannya). Garis tebal membawa arti (status, hubungan); jangan dipakai sebagai dekorasi.
Permukaan
- Konten berada di
--color-base-100di atas kanvas--color-base-200, dengan border 1px--color-base-300. - Tanpa gradien dan tanpa glow. daisyUI berjalan dengan
--depth: 0dan--noise: 0. - Di mode gelap, elevasi datang dari permukaan yang lebih terang, bukan bayangan yang lebih berat.
Bayangan
--ds-shadow-xsTab/segmen aktif.--ds-shadow-menuMenu baris tabel (inline).--ds-shadow-panelPanel info di top bar.--ds-shadow-overlayPanel notifikasi.--ds-shadow-pinned-startKolom sticky kiri saat tabel digeser.--ds-shadow-popoverLapisan melayang: combobox, kalender, menu popover.--ds-shadow-liftKartu interaktif saat hover/fokus.--ds-shadow-pinned-endKolom sticky kanan saat tabel digeser.| Tingkat | Token | Dipakai oleh |
|---|---|---|
| 0 | --ds-shadow-none |
Kartu, tabel, form: hanya border |
| 1 | --ds-shadow-xs |
Tab terpilih, kontrol terangkat saat diam |
| 2 | --ds-shadow-menu |
Panel menu inline |
| 3 | --ds-shadow-panel |
Panel melayang: popover, combobox, kalender, item yang diseret |
| 4 | --ds-shadow-overlay |
Dialog, panel notifikasi, command palette |
| lift | --ds-shadow-lift |
Kartu yang bisa diklik saat hover, naik --ds-lift (-2px) |
| pinned | --ds-shadow-pinned-start, -end |
Tepi kolom sticky tabel saat digeser |
Pakai hanya token ini. Lapisan melayang menggabungkan permukaan solid, border netral 1px (--ds-popover-border), dan satu tingkat bayangan.
Hanya border
Panel menu
Panel melayang
Lihat kode HTML
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:1.25rem;padding:.5rem">
<div style="border:1px solid var(--color-base-300);border-radius:var(--ds-radius-card);background:var(--color-base-100);padding:1rem"><strong>Tingkat 0</strong><br><span class="ds-text-subtle">Hanya border</span></div>
<div style="border:1px solid var(--color-base-300);border-radius:var(--ds-radius-card);background:var(--color-base-100);padding:1rem;box-shadow:var(--ds-shadow-menu)"><strong>Tingkat 2</strong><br><span class="ds-text-subtle">Panel menu</span></div>
<div style="border:1px solid var(--color-base-300);border-radius:var(--ds-radius-card);background:var(--color-base-100);padding:1rem;box-shadow:var(--ds-shadow-panel)"><strong>Tingkat 3</strong><br><span class="ds-text-subtle">Panel melayang</span></div>
</div>Lapisan dan z-index
| Variabel | Nilai | Catatan |
|---|---|---|
--ds-z-pinned | 2 | |
--ds-z-pinned-end | 3 | |
--ds-z-table-head | 5 | |
--ds-z-table-head-pinned | 6 | |
--ds-z-table-head-pinned-end | 7 | |
--ds-z-sticky | 10 | Bilah aksi lengket. |
--ds-z-menu | 20 | |
--ds-z-combobox | 30 | |
--ds-z-popover | 40 | |
--ds-z-notification | 45 | |
--ds-z-modal | 999 | Bawaan daisyUI .modal. |
--ds-z-tooltip | 1000 |
Dari bawah: kolom pinned tabel (2–3), header tabel (5–7), elemen sticky (10), menu (20), combobox (30), popover (40), notifikasi (45), modal (999), tooltip dan skip link (1000).
Penting
Pakai lapisan bernama (var(--ds-z-popover)), bukan angka. Lapisan baru ditambahkan ke tokens.json, bukan ke CSS komponen. Utamakan top layer (<dialog>, [popover]) yang bertumpuk tanpa z-index.
Scrim
--ds-scrim (rgb(8 18 28 / .4)) untuk dialog modal yang memblokir halaman. Popover dan drawer non-modal tidak memakai scrim. Dengan prefers-reduced-transparency, scrim naik ke 70%.
Material translusen
Translusen hanya boleh untuk chrome yang menimpa konten yang bisa digulir: top bar sticky, bottom navigation, dan lapisan melayang. Bukan gaya untuk kartu atau panel.
- Campur token permukaan dengan transparansi, misalnya
color-mix(in oklab, var(--color-base-100) 85%, transparent), lalu tambahkanbackdrop-filter: blur(12px). Jangan memakai warna mentah. - Jaga teks 4.5:1 terhadap konten terburuk yang bisa tergulir di bawahnya.
- Sediakan fallback opak:
@media (prefers-reduced-transparency: reduce)dan browser tanpabackdrop-filtermemakai--color-base-100. DS sudah melakukannya untuk popover, menu, combobox, dan toast. - Jangan menumpuk dua lapisan translusen.
Focus ring
Cincin 2px berwarna --ds-focus dengan offset 2px pada :focus-visible. Komponen yang rata dengan tepinya (area scroll tabel, item navigasi, opsi combobox) memakai -2px agar overflow tidak memotong cincin. Lihat State.
Token
--ds-radius-*, --ds-border-*, --ds-shadow-*, --ds-z-*, --ds-scrim, --ds-popover, --ds-popover-border, --ds-lift.