/** * Tema warna AppGen — aksen dinamis via CSS variable. * Dimuat SETELAH tailwind.css agar meng-override kelas oranye/amber. * Ganti aksen dengan atribut */ :root{ --acc-400:#fb923c; --acc-500:#f97316; --acc-600:#ea580c; --acc-to:#d97706; } [data-accent="blue"] { --acc-400:#60a5fa; --acc-500:#3b82f6; --acc-600:#2563eb; --acc-to:#4f46e5; } [data-accent="violet"] { --acc-400:#a78bfa; --acc-500:#8b5cf6; --acc-600:#7c3aed; --acc-to:#6d28d9; } [data-accent="emerald"]{ --acc-400:#34d399; --acc-500:#10b981; --acc-600:#059669; --acc-to:#0d9488; } [data-accent="rose"] { --acc-400:#fb7185; --acc-500:#f43f5e; --acc-600:#e11d48; --acc-to:#be123c; } [data-accent="lime"] { --acc-400:#a3e635; --acc-500:#84cc16; --acc-600:#65a30d; --acc-to:#4d7c0f; } [data-accent="sky"] { --acc-400:#38bdf8; --acc-500:#0ea5e9; --acc-600:#0284c7; --acc-to:#0369a1; } /* --- teks --- */ .text-orange-300,.text-orange-400{ color:var(--acc-400)!important } .text-orange-500{ color:var(--acc-500)!important } .text-orange-600{ color:var(--acc-600)!important } .fill-orange-500{ fill:var(--acc-500)!important } .hover\:text-orange-300:hover,.hover\:text-orange-400:hover{ color:var(--acc-400)!important } .group:hover .group-hover\:text-orange-400{ color:var(--acc-400)!important } /* --- latar --- */ .bg-orange-600{ background-color:var(--acc-600)!important } .bg-orange-500\/10{ background-color:color-mix(in srgb,var(--acc-500) 10%,transparent)!important } .bg-orange-500\/20{ background-color:color-mix(in srgb,var(--acc-500) 20%,transparent)!important } .hover\:bg-orange-500\/20:hover{ background-color:color-mix(in srgb,var(--acc-500) 20%,transparent)!important } /* --- garis tepi --- */ .border-orange-500\/20{ border-color:color-mix(in srgb,var(--acc-500) 20%,transparent)!important } .border-orange-500\/30{ border-color:color-mix(in srgb,var(--acc-500) 30%,transparent)!important } .border-orange-500\/40{ border-color:color-mix(in srgb,var(--acc-500) 40%,transparent)!important } .hover\:border-orange-500\/50:hover{ border-color:color-mix(in srgb,var(--acc-500) 50%,transparent)!important } /* --- ring fokus --- */ .focus-within\:ring-orange-500\/30:focus-within{ --tw-ring-color:color-mix(in srgb,var(--acc-500) 30%,transparent)!important } .focus\:ring-orange-500\/40:focus{ --tw-ring-color:color-mix(in srgb,var(--acc-500) 40%,transparent)!important } /* --- gradien tombol --- */ .from-orange-600{ --tw-gradient-from:var(--acc-600) var(--tw-gradient-from-position)!important; --tw-gradient-to:rgb(0 0 0 / 0) var(--tw-gradient-to-position)!important; --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important } .from-orange-500{ --tw-gradient-from:var(--acc-500) var(--tw-gradient-from-position)!important; --tw-gradient-to:rgb(0 0 0 / 0) var(--tw-gradient-to-position)!important; --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important } .to-amber-600{ --tw-gradient-to:var(--acc-to) var(--tw-gradient-to-position)!important } .hover\:from-orange-500:hover{ --tw-gradient-from:var(--acc-500) var(--tw-gradient-from-position)!important; --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important } .hover\:to-amber-500:hover{ --tw-gradient-to:color-mix(in srgb,var(--acc-to) 82%,#fff) var(--tw-gradient-to-position)!important } /* --- bayangan aksen --- */ .shadow-orange-500\/25{ --tw-shadow-color:color-mix(in srgb,var(--acc-500) 25%,transparent)!important; --tw-shadow:var(--tw-shadow-colored)!important } .shadow-orange-500\/10{ --tw-shadow-color:color-mix(in srgb,var(--acc-500) 10%,transparent)!important; --tw-shadow:var(--tw-shadow-colored)!important } /* --- blob gradien hero mengikuti aksen --- */ .acc-blob{ background-color:color-mix(in srgb,var(--acc-500) 30%,transparent)!important }