Renkler

01 · Renkler

Acun UI paleti. Bileşenler Tailwind'in renk adlarını (brand, gray, zinc, emerald…) kullanır; değerleri panel.css içindeki @theme bloğu belirler. Her rengin açık ve koyu tonları tek bir temel değerden color-mix ile türer, bu yüzden bir rengi değiştirmek tek satırdır.

panel.css @theme

Palet

panel.css içindeki @theme değerleri.

Renk	Token	Değer	Kullanım
Ana renk (primary)	`brand-600`	`#696bfe`	Butonlar, bağlantılar, seçili durumlar
Vurgu	`accent-500`	`#ec4899`	Menü rozetleri, küçük vurgular
Başarı (success)	`emerald-500`	`#42d697`	Onay, tamamlandı, aktif
Bilgi (info)	`sky-500`	`#45b8f4`	Bilgilendirme
Uyarı (warning)	`amber-500`	`#f9c74f`	Dikkat gerektiren durumlar
Tehlike (danger)	`red-500`	`#fe696a`	Silme, hata, pasif
İkincil (secondary)	`secondary-500`	`#8592a3`	Gri buton, soft-secondary
Koyu (dark)	`dark`	`#2b2c40`	Koyu buton
Açık (light)	`light`	`#f5f5f9`	Açık buton, açık tema sayfa zemini
Mürekkep	`gray-900`	`#16162a`	Başlıklar, koyu yüzeyler
gray-50	`--color-gray-50`	`#f7f7fb`	Sayfa zemini
gray-100	`--color-gray-100`	`#f0f0f6`	Üzerine gelme
gray-200	`--color-gray-200`	`#e4e4ee`	Çizgi
gray-300	`--color-gray-300`	`#cfd0de`	Belirgin çizgi
gray-400	`--color-gray-400`	`#85879c`	Soluk metin
gray-500	`--color-gray-500`	`#5f6177`	İkincil metin
gray-600	`--color-gray-600`	`#46485b`	İkon
gray-700	`--color-gray-700`	`#313244`	Gövde metni
gray-800	`--color-gray-800`	`#26273a`
gray-900	`--color-gray-900`	`#16162a`	Başlık (mürekkep)
zinc-950	`--color-zinc-950`	`#0a0a0a`	Sayfa zemini
zinc-900	`--color-zinc-900`	`#141414`	Yüzey (kart, menü)
zinc-800	`--color-zinc-800`	`#1f1f1f`	Üzerine gelme, alan
zinc-700	`--color-zinc-700`	`#2e2e2e`	Çizgi
zinc-600	`--color-zinc-600`	`#474747`	Belirgin çizgi
zinc-500	`--color-zinc-500`	`#8c8c8c`	Soluk metin
zinc-400	`--color-zinc-400`	`#b4b4b4`	İkincil metin
zinc-300	`--color-zinc-300`	`#d4d4d4`	Gövde metni
zinc-200	`--color-zinc-200`	`#e5e5e5`
zinc-100	`--color-zinc-100`	`#f5f5f5`	Başlık
default	`brand-color="default"`	`#696bfe`	Varsayılan
green	`brand-color="green"`	`#42d697`	Yeşil
red	`brand-color="red"`	`#fe696a`	Kırmızı
yellow	`brand-color="yellow"`	`#f9c74f`	Sarı
blue	`brand-color="blue"`	`#45b8f4`	Mavi
gray	`brand-color="gray"`	`#8592a3`	Gri
dark	`brand-color="dark"`	`#2b2c40`	Koyu

Anlam renkleri ve tonlar

Her anlam renginin 50 ile 950 arasında on bir tonu vardır ve hepsi tek bir temel değerden türer: ana renkte brand-600, diğerlerinde paletin rengi olan 500 tonu (emerald-500, sky-500, amber-500, red-500). Bu renkler açık olduğu için 600 ve üstü tonlar daha çok siyah karışarak okunaklı kalır: açık zeminlerde 50–100, dolgu ve ikonda 500, metinde 600–700 tonlarını kullanın.

CANLI ÖRNEK

<div class="space-y-3">
    @foreach (['brand' => 'Ana renk', 'emerald' => 'Başarı', 'sky' => 'Bilgi', 'amber' => 'Uyarı', 'red' => 'Tehlike'] as $renk => $ad)
        <div class="grid grid-cols-[6rem_1fr] items-center gap-3">
            <span class="text-xs font-medium text-gray-500 dark:text-zinc-400">{{ $ad }}</span>
            <div class="grid grid-cols-11 overflow-hidden rounded-sm">
                @foreach ([50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as $ton)
                    <span class="h-9" style="background: var(--color-{{ $renk }}-{{ $ton }})" title="{{ $renk }}-{{ $ton }}"></span>
                @endforeach
            </div>
        </div>
    @endforeach
</div>

Prop	Değerler
`brand · emerald · sky · amber · red`	50 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 950

Metin ve yüzey renkleri

Açık temada gray, koyu temada zinc nötrleri kullanılır. Her sınıfı dark: karşılığıyla birlikte yazın: başlık text-gray-900 dark:text-zinc-100, gövde text-gray-700 dark:text-zinc-300, ikincil metin text-gray-500 dark:text-zinc-400, kart zemini bg-white dark:bg-zinc-900.

CANLI ÖRNEK

<div class="grid gap-4 sm:grid-cols-2">
    <div class="space-y-1 rounded-sm bg-white p-4 shadow-sm dark:bg-zinc-900">
        <p class="text-sm font-semibold text-gray-900 dark:text-zinc-100">Başlık · gray-900 / zinc-100</p>
        <p class="text-sm text-gray-700 dark:text-zinc-300">Gövde metni · gray-700 / zinc-300</p>
        <p class="text-sm text-gray-500 dark:text-zinc-400">İkincil metin · gray-500 / zinc-400</p>
        <p class="text-sm text-gray-400 dark:text-zinc-500">Soluk metin · gray-400 / zinc-500</p>
    </div>
    <div class="space-y-1 rounded-sm border border-gray-200 bg-gray-50 p-4 text-sm dark:border-zinc-700 dark:bg-zinc-950">
        <p>Sayfa zemini · gray-50 / zinc-950</p>
        <p>Çizgi · gray-200 / zinc-700</p>
        <p class="rounded-sm px-2 py-1 hover:bg-gray-100 dark:hover:bg-zinc-800">Üzerine gelme · gray-100 / zinc-800</p>
    </div>
</div>

Prop	Değerler
`gray-*`	Açık tema nötrleri
`zinc-*`	Koyu tema nötrleri (dark: ile)

Durum renkleri

Bileşenler durumları açık bir zemin (50) ve koyu bir metinle (700) gösterir; koyu temada zemin %10 saydam, metin 400 tonundadır. Bilgi rengi her bileşende sky'dır: uyarı, rozet, avatar, istatistik kartı, zaman çizelgesi ve soft-info düğmenin info görünümü aynı tonları kullanır. Durum bildirmeyen marka vurgularında (ör. "Yeni" rozeti) brand tonları kullanılır.

CANLI ÖRNEK

<div class="flex flex-wrap gap-2 text-sm">
    <span class="rounded-sm bg-emerald-50 px-3 py-2 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400">Teslim edildi</span>
    <span class="rounded-sm bg-amber-50 px-3 py-2 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400">Beklemede</span>
    <span class="rounded-sm bg-red-50 px-3 py-2 text-red-700 dark:bg-red-500/10 dark:text-red-400">İptal edildi</span>
    <span class="rounded-sm bg-sky-50 px-3 py-2 text-sky-700 dark:bg-sky-500/10 dark:text-sky-400">Bilgilendirildi</span>
    <span class="rounded-sm bg-brand-50 px-3 py-2 text-brand-700 dark:bg-brand-500/10 dark:text-brand-300">Yeni kayıt</span>
</div>

Prop	Değerler
`Açık tema`	bg-{renk}-50 text-{renk}-700
`Koyu tema`	dark:bg-{renk}-500/10 dark:text-{renk}-400

Vurgu rengi

accent (pembe) yalnızca küçük vurgular içindir: menüdeki sayı rozetleri ve yatay menüde etkin sayfanın alt çizgisi. Bu renkte yalnızca 50, 100, 500 ve 600 tonları tanımlıdır; düğme ya da geniş yüzeylerde kullanmayın.

CANLI ÖRNEK

<div class="flex flex-wrap items-center gap-8">
    <span class="h-0.5 w-10 rounded-full bg-accent-500"></span>
    <span class="rounded-full bg-accent-50 px-1.5 font-mono text-2xs font-medium tabular-nums text-accent-600 dark:bg-accent-500/15 dark:text-accent-500">12</span>
</div>

Prop	Değerler
`accent-*`	50 \| 100 \| 500 \| 600

Kullanıcının ana rengi seçmesi

acun:brand-color-picker yedi hazır renk ve serbest bir renk seçici gösterir. Seçim anında bütün arayüze uygulanır ve tarayıcıda saklanır; beyaz yazının okunamayacağı kadar açık bir renk seçilirse uyarı çıkar.

CANLI ÖRNEK

<acun:brand-color-picker label="Ana renk" />

Prop	Değerler
`label`	Başlık ve grubun erişilebilir adı
`custom`	true \| false (serbest renk seçici)
`presets`	anahtar => [hex, ad] dizisi

Tercihi hesaba kaydetmek

Düzenler brand-color prop'uyla kullanıcının kayıtlı rengini (hazır ad ya da #rrggbb) ilk boyamadan önce uygular. preference-url verildiğinde renk seçici yeni seçimi bu adrese { brand } olarak gönderir; verilmezse tercih yalnızca tarayıcıda kalır.

BLADE

<acun:layout.sidebar
    :brand-color="auth()->user()->marka_rengi"
    preference-url="{{ route('arayuz-tercihi.guncelle') }}"
>
    …
</acun:layout.sidebar>

{{-- Sunucu doğrulaması: ['brand' => ['regex:/^(#[0-9a-fA-F]{6}|default|green|red|yellow|blue|gray|dark)$/']] --}}

Prop	Değerler
`brand-color`	default \| green \| red \| yellow \| blue \| gray \| dark \| #rrggbb
`preference-url`	Tercihin kaydedileceği POST adresi

Ana rengi değiştirmek

Uygulamanın tamamında farklı bir ana renk için CSS'inizde yalnızca --color-brand-600 değerini değiştirin; diğer brand-* tonları ondan türer. Kullanıcının seçtiği hazır renkler html etiketindeki data-brand-color özniteliğiyle bu değerin üzerine yazılır.

CSS

/* app.css — @import '@acunsoft/acun-ui-core'; satırından sonra */
@theme {
    --color-brand-600: #0f766e;
}

Prop	Değerler
`--color-brand-600`	Ana rengin temel değeri
`data-brand-color`	Hazır rengin adı (html özniteliği)

API

Prop'lar ve slot'lar

Bileşenin kabul ettiği değerler.

Prop	Varsayılan	Açıklama
`--color-brand-600`	`#696bfe`	Ana renk; brand-50 … 950 bundan türer
`--color-accent-500`	`#ec4899`	Vurgu; accent-50, 100 ve 600 bundan türer
`--color-emerald-500`	`#42d697`	Başarı tonlarının temeli
`--color-sky-500`	`#45b8f4`	Bilgi tonlarının temeli
`--color-amber-500`	`#f9c74f`	Uyarı tonlarının temeli
`--color-red-500`	`#fe696a`	Tehlike tonlarının temeli
`--color-secondary-500`	`#8592a3`	İkincil (gri) tonların temeli
`--color-dark · --color-light`	`#2b2c40 · #f5f5f9`	Koyu ve açık buton; light açık temada sayfa zemini
`--btn-{variant}-*`	`panel.css`	Dolu butonların zemin, kenarlık, üzerine gelince ve gölge renkleri
`data-brand-color`	`default`	html özniteliği: default · green · red · yellow · blue · gray · dark · custom
`brand-color-picker: presets`	`7 hazır renk`	anahtar => [hex, ad]; anahtar data-brand-color değeri olur
`brand-color-picker: custom`	`true`	Serbest renk seçiciyi gösterir
`brand-color-picker: label`	`null`	Üstteki başlık; boşsa grup adı "Ana renk"