THEME TOKENS

Aynı component, farklı atmosfer.

CKCSS teması, component class’larını değiştirmez. Kendi token katmanınızı framework bağlantısından sonra ekleyin ve aynı HTML’i koruyun.

Core: Componentler yalnızca semantic --ck-color-* tokenlarını tüketir.
Theme: Yüzey, metin, primary ve focus değerlerini değiştirir.
Fallback: data-ck-theme olmadan sistem tercihi kullanılır.

01 · LIGHT

Açık çalışma alanı

Dokümantasyon, içerik ve gündüz odaklı ürün yüzeyleri için varsayılan semantic token eşlemesi.

DEFAULT TOKENS

Tokenlar componentten önce gelir.

Renk kararını her butona veya karta yeniden yazmadan bütün arayüzü tutarlı tutun.

:root {
  --ck-color-surface: #f7f3ea;
  --ck-color-text: #18263b;
  --ck-color-primary: #225a9b;
  --ck-color-primary-hover: #18477d;
  --ck-color-focus: #159a9c;
}

Bu override’ı CKCSS bağlantısından sonra kendi stylesheet’inize koyun.

02 · DARK

Koyu ürün yüzeyi

Dark mode, aynı class API’sini korur; semantic tokenlar koyu yüzey ve yeterli kontrast için yeniden eşlenir.

DATA ATTRIBUTE

Scope edilmiş koyu tema

Yalnızca bu alanın ve içindeki componentlerin tema değerlerini değiştirin.

<section data-ck-theme="dark">
  <article class="ck-card">
    <div class="ck-card__body">...</div>
  </article>
</section>

Frameworkün yerleşik dark token setini kullanır; ek JavaScript gerekmez.

THEME STARTER

Kendi temanızı tokenlarla başlatın.

Ajanlar ve ekip üyeleri aynı kısa sözleşmeyi kullansın: semantic token override edin; component class’larını veya framework kaynak CSS’ini değiştirmeyin.

AI tema rehberini aç Tüm tokenları gör

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/kayacuneyd/ckcss@v0.1.0-rc.2/dist/ckcss.min.css">
<link rel="stylesheet" href="/assets/my-theme.css">