Warna & Token

Token warna inti yang dipakai untuk latar, teks, dan pembatas di seluruh tema.

Token Semantik

Palet per Tema

Setiap tema memiliki latar dan warna aksen tersendiri. Ganti tema dari ikon di header.

Palet Utilitas

Skala warna utilitas dari Tailwind yang dipakai untuk status (info, sukses, peringatan, error).

Tipografi

Skala ukuran teks standar serta font Arab khusus untuk ayat Al-Qur'an.

Tombol

Matriks varian × warna. Pakai varian solid untuk aksi penting, subtle untuk aksi sekunder, outline untuk aksi paling rendah.

<Button variant="solid | subtle | outline"
        color="primary | secondary | info | success | warning | danger"
        size="sm | md | lg"
        disabled
        onClick={fn}>...</Button>

Tombol Ikon

Tombol bujur sangkar berukuran tetap untuk aksi cepat tanpa label. Wajib mengisi ariaLabel.

<IconButton variant="ghost | subtle | outline | solid"
            color="primary | secondary | info | success | warning | danger"
            size="xs | sm | md | lg"
            rounded="md | full"
            ariaLabel="…"
            onClick={fn}>
  <Icon size="sm" />
</IconButton>

Badge

Penanda status berukuran kecil. Mendukung matriks varian × warna yang sama dengan tombol.

<Badge variant="solid | subtle | outline"
       color="primary | secondary | info | success | warning | danger"
       size="sm | md | lg">label</Badge>

Tab

Komponen tab dengan indikator geser. Cocok untuk selektor seimbang dengan 2–4 pilihan. Indikator bergerak mulus saat berganti tab.

<Tabs
  options={[{ value: 'a', label: 'Option A' }, { value: 'b', label: 'Option B' }]}
  value={selected}
  onchange={(v) => (selected = v)}
/>

Chip / Pill

Pelabelan ringkas atau filter yang bisa dipilih. Mendukung varian warna dan keadaan aktif.

<Chip color="neutral | blue | green | orange | red | purple"
      size="sm | md"
      shape="pill | rounded"
      active
      onClick={fn}>label</Chip>

Banner / Alert

Pesan inline untuk menyampaikan status atau peringatan. Berbeda dengan toast, banner menetap di tempat.

<Banner type="info | success | warn | error" title="..." dismissible>body</Banner>

Kontrol Form

Input, textarea, checkbox, dan radio dengan label dan pesan kesalahan yang konsisten.

<Input label="..." size="sm | md | lg" bind:value error="..." hint="..." />

<Textarea label="..." size="sm | md | lg" rows={4} bind:value />

<Checkbox label="..." bind:checked />

<Radio name="..." value="..." label="..." bind:group />

Collapsible

Wadah yang bisa dibuka-tutup untuk menyembunyikan detail.

<Collapsible title="..." open>content</Collapsible>

Bottom Sheet

Panel yang muncul dari bawah untuk aksi atau detail kontekstual.

<BottomSheet show={open} title="..." onClose={fn}>content</BottomSheet>

Toast

Notifikasi singkat di pojok atas. Mendukung info, sukses, peringatan, dan error.

toast.show({ message: '...', type: 'info | success | warn | error' })

Breadcrumb

Jejak navigasi hierarkis menuju halaman saat ini.

<Breadcrumb items={[{ text: '...', href: '/' }]} />

Kartu

Wadah konten dengan latar sekunder dan bayangan lembut.

Varian

Dengan Header & Footer

Padding

Komponen lama

CardShadow masih dipakai di banyak halaman dan kompatibel dengan tata letak yang ada.

<Card variant="filled | outline | elevated" padding="none | sm | md | lg" title="..." subtitle="...">
  body
  {#snippet header()}...{/snippet}
  {#snippet footer()}...{/snippet}
</Card>

Kartu Gradien

Kartu dengan latar gradien bawaan dan dekorasi sudut. Mendukung 10 preset warna, mode interaktif (button/link), dan pemilihan gradien berbasis indeks.

Preset Gradien

Interaktif (button / link)

Tanpa dekorasi lingkaran

Pemilihan berbasis indeks — berguna untuk daftar

Patterns

Overlay a repeating pattern on any gradient. Choose from dots, grid, diagonal, or triangles.

<GradientCard gradient="emerald">
  <!-- content -->
</GradientCard>

<!-- with pattern -->
<GradientCard gradient="violet" pattern="dots">
  ...
</GradientCard>

<!-- interactive -->
<GradientCard gradient="blue" as="button" onClick={fn}>
  ...
</GradientCard>

<!-- index-based (cycles through 10 presets) -->
<GradientCard gradient={index}>
  ...
</GradientCard>

<!-- props: gradient | pattern | decorative | padding | rounded | as | href | onClick | ariaLabel | class -->

Ilustrasi

Komponen ilustrasi SVG inline. Semua bersifat dekoratif (aria-hidden) dan menyesuaikan lebar kontainer dengan rasio aspek 16:9.

import MorningBanner from '$lib/illustrations/MorningBanner.svelte';

<MorningBanner class="..." />

import EveningBanner from '$lib/illustrations/EveningBanner.svelte';

<EveningBanner class="..." />

import PrayerTimeIllustration from '$lib/illustrations/PrayerTimeIllustration.svelte';

<PrayerTimeIllustration hours={currentHour} class="..." />
// hours 0-23 → fajr | morning | noon | afternoon | sunset | night

Ilustrasi error (SVG statis)

Dipakai di halaman error / status kosong. Lokasi: /images/illustrasion-error.svg.

<img src="/images/illustrasion-error.svg" alt="..." class="w-48 h-auto" />

Ikon

Kumpulan ikon SVG yang dipakai bersama. Semua ikon menerima prop ukuran.

<BookmarkIcon size="xs | sm | md | lg | xl" />