DESIGN TOKEN REFERENCE

Bir ölçü sistemiyle daha sakin arayüzler.

CKCSS tokenları component ve layout kararlarını ortak bir ölçeğe bağlar. Tüm değerler tek CSS linkinden sonra override edilebilir.

01 · İZNİK PALETİ

50’den 950’ye kaynak renkler.

Kobalt, turkuaz, bole mercanı, yaprak yeşili, hardal, erguvan ve sır beyazı 11 basamaklı ham palettir. 50–200 hafif yüzeyler, 300–400 sınırlar, 500–700 aksiyonlar, 800–950 koyu yüzeyler içindir. Bileşenler yalnızca semantic roller kullanır.

:root {
  /* Ham kaynak paleti */
  /* Her aile: 50, 100, …, 900, 950 */
  --ck-iznik-glaze-50: #fdfbf6;
  --ck-iznik-glaze-950: #1d232d;
  --ck-iznik-cobalt-50: #eaf1f8;
  --ck-iznik-cobalt-500: #225a9b;
  --ck-iznik-cobalt-950: #101f35;
  --ck-iznik-turquoise-100: #d8eeee;
  --ck-iznik-bole-700: #a53526;

  /* Bileşen sözleşmesi */
  --ck-color-surface: var(--ck-iznik-glaze-100);
  --ck-color-text: var(--ck-iznik-ink);
  --ck-color-primary: var(--ck-iznik-cobalt-500);
  --ck-color-danger: var(--ck-iznik-bole-700);
  --ck-font-display: "Aleo", Georgia, serif;
}

.project-notice {
  background: var(--ck-iznik-turquoise-50);
  border: 1px solid var(--ck-iznik-turquoise-200);
  color: var(--ck-iznik-turquoise-800);
}

Ham tokenlar yerel marka detayları içindir; .ck-button gibi framework bileşenlerinde yalnızca --ck-color-* kullanılır. Metin/yüzey eşleşmelerinde kontrastı kontrol edin.

02 · TYPE & SPACE

Typography ve spacing

Font size, line-height, tracking ve spacing birlikte çalışır; responsive değerler token ölçeğini korur. Tek isimli ölçek: --ck-font-size-xs, --ck-font-size-sm, --ck-font-size-md, --ck-font-size-lg, --ck-font-size-xl, --ck-font-size-2xl ve --ck-font-size-display.

.project-copy {
  font-size: var(--ck-font-size-lg);
  line-height: var(--ck-line-relaxed);
  max-inline-size: 72ch;
  margin-block-end: var(--ck-space-6);
}

03 · GEOMETRY & MOTION

Radius, shadow ve motion

Component seviyesinde sınırlı geometri ve motion kullanın; her öğeye rastgele değer vermeyin.

.project-card {
  border-radius: var(--ck-radius-lg);
  box-shadow: var(--ck-shadow-sm);
  transition-duration: var(--ck-duration-standard);
  transition-timing-function: var(--ck-ease-standard);
}

04 · THEME OVERRIDE

Yalnız semantic rolleri değiştirin.

Core renk üretmez. CKCSS’ten sonra yüklenen proje CSS’inizde semantic --ck-color-* rollerini override edin; bileşenler yeni markaya otomatik uyum sağlar.

/* project-theme.css — CKCSS'ten sonra */
:root {
  --ck-color-surface: #fffdf8;
  --ck-color-text: #18243a;
  --ck-color-primary: #7357c8;
  --ck-color-primary-hover: #5e45ae;
  --ck-color-on-primary: #ffffff;
  --ck-color-focus: #7357c8;
  --ck-color-success: #19734d;
  --ck-color-warning: #8a5700;
  --ck-color-danger: #b42318;
}

[data-ck-theme="dark"] {
  --ck-color-surface: #152238;
  --ck-color-text: #f6f2ea;
  --ck-color-primary: #78d2cf;
  --ck-color-on-primary: #10202d;
}

Metin/yüzey, aksiyon/on-primary, focus/yüzey ve success/warning/danger metinlerinin kontrastını kendi marka renklerinizle kontrol edin. CSS custom property desteklenmeyen eski tarayıcılar için Core’un varsayılan değerleri fallback’tir. Kullanıcı tercihini değiştirmek isterseniz, yalnız bu tercihi yazan opsiyonel Enhance tema modülünü kullanın.

04 · LOCALIZATION

Yerelleştirme ve RTL

CKCSS yön-duyarlı tüm kurallarda logical properties kullanır; dir="rtl" sayfaları ek CSS gerektirmez. Üretilen içerik tokenlar üzerinden yerelleştirilebilir.

html[dir="rtl"][lang="ar"] {
  --ck-font-sans: "Noto Sans Arabic", system-ui, sans-serif;
  --ck-breadcrumb-separator: "›";
}

Aleo yalnızca Latin yüzüdür; Latin dışı scriptler için font ikamesi proje CSS'inde yapılır. Enhance modülleri metin yazmaz — etiketler markup'tan gelir (ADR 0015).