Tema Geliştirme

CSS Değişkenleri ve Tasarım Sistemi

Core'un sağladığı CSS custom properties ve kullanımı.

Onox Core bir tasarım token sistemi sağlar. Temalar bu değişkenleri kullanarak tutarlı görünüm elde eder.

Renk Tokenleri

:root {
  --brand-500: #EF305E;   /* Ana marka rengi */
  --text-strong: #0F172A; /* Başlık metni */
  --text-base: #334155;   /* Paragraf metni */
  --text-muted: #64748B;  /* İkincil metin */
  --surface: #FFFFFF;     /* Kart arka planı */
  --surface-2: #F8FAFC;   /* Sayfa arka planı */
  --border: #E2E8F0;      /* Kenarlık */
  --success: #16A34A;
  --warning: #F59E0B;
  --danger: #DC2626;
  --info: #0284C7;
}

Boşluk Sistemi

--sp-1: 0.25rem;  /* 4px */
--sp-2: 0.5rem;   /* 8px */
--sp-3: 0.75rem;  /* 12px */
--sp-4: 1rem;     /* 16px */
--sp-5: 1.25rem;  /* 20px */
--sp-6: 1.5rem;   /* 24px */
--sp-8: 2rem;     /* 32px */
--sp-10: 2.5rem;  /* 40px */

Dark Mode

Tema html[data-theme="dark"] seçicisiyle dark mode desteği sağlamalıdır. Core tüm tokenleri dark mode için otomatik override eder.