---
title: Token'lar
description: "@ikas/theme ile kurulan CSS değişkenleri: yüzeyler, palet, tonlar, grafik renkleri, derinlik ve tipografi."
---

Token'ları ham palet sınıfları veya hex değerler yerine Tailwind sınıflarıyla kullanın: `bg-card`, `text-muted-foreground`, `bg-blue-subtle`.

```bash
npx shadcn@latest add @ikas/theme
```

## Yüzeyler ve metin

Önce açık tema: kırık beyaz sayfa, beyaz kartlar, siyaha yakın metin ve odak için tek bir mavi.

_Görsel blok: Yüzey ve metin token'ları._ [Önizlemeyi aç](https://builders.ikas.com/ui-preview/embed/tokens-surfaces)

## Palet

Yedi genel renk ve her biri için beş token. Bileşenler `color` prop'u ile birini seçer; varsayılan her yerde `neutral`'dır.

_Görsel blok: Renk paleti._ [Önizlemeyi aç](https://builders.ikas.com/ui-preview/embed/tokens-palette)

| Token | Kullanım |
| --- | --- |
| `--<c>` | Solid dolgu (buton, solid badge) |
| `--<c>-foreground` | Solid dolgu üzerindeki metin |
| `--<c>-subtle` | Yumuşak dolgu (soft buton, badge, banner) |
| `--<c>-subtle-foreground` | Yumuşak dolgu üzerindeki metin ve renkli metin |
| `--<c>-border` | Yumuşak dolgu üzerindeki ince kenarlık |

## Durum renkleri

Paletin üzerindeki anlamsal takma adlar: `--info`, `--success`, `--warning`, `--danger` (her biri `-foreground`, `-subtle`, `-subtle-foreground`, `-border` ile). Badge, Banner, Meter, EmptyState ve toast'lar bunları `status` (toast'ta tür) ile seçer; durumlar ve doğrulama mesajları ham renk kullanmaz.

_Görsel blok: Durum token'ları._ [Önizlemeyi aç](https://builders.ikas.com/ui-preview/embed/tokens-statuses)

Renkli bir dolgunun üzerindeki yükseltilmiş yüzey için `--tint-surface` ve `--tint-surface-hover` kullanılır (soft Banner içindeki outline butonlar). Yarı saydam beyazdır; altındaki durumun tonunu korur ve koyu temada yalnızca hafifçe aydınlatır.

### Durum tonu (`@ikas/status`)

Banner, Toast, EmptyState (danger), Meter ve StatCard durumu aynı tariften okur: `statusTint[status]` sınıfı bir öğeye o durumun yerel değişkenlerini verir. `--s` solid renk, `--s-fg` solid üzerindeki metin, `--s-subtle` yumuşak dolgu, `--s-text` tonlu metin, `--s-border` ince kenar; türetilenler `--s-icon` (solid ile tonlu metnin ortası, amber de beyaz üzerinde ve kendi dolgusunda 3:1 kalır), `--s-title`, `--s-body` ve `--s-hover`. Kendi bileşeninizde durum rengi gerekiyorsa token'ları tek tek yazmak yerine bunu kullanın; bileşenler bağımlılık olarak kendiliğinden kurar.

```tsx
import { statusTint } from "@/lib/status"

<div className={cn(statusTint.warning, "bg-(--s-subtle) text-(--s-text)")}>
  <AlertTriangleIcon className="text-(--s-icon)" />
</div>
```

## Grafik paleti

Kategorik seriler için altı renk; bu sırayla atanır ve döngüye girmez. Tek seri `--chart-ink` kullanır. Palet, renk körlüğü ayrımı, normal görüş eşiği ve beyaz üzerinde 3:1 kontrast için doğrulanmıştır.

_Görsel blok: Grafik paleti._ [Önizlemeyi aç](https://builders.ikas.com/ui-preview/embed/tokens-chart)

<Callout type="warning">
Durum renkleri (yeşil, amber, kırmızı) seri rengi olarak kullanılmaz. 6'dan fazla seri "Diğer" altında toplanır veya küçük çoklu grafiklere bölünür.
</Callout>

## Derinlik

Derinlik etkileşim demektir. Basılan şeyler yükseltilmiş, yazılan şeyler içe gömülü, geri kalan her şey düzdür.

_Görsel blok: Derinlik token'ları._ [Önizlemeyi aç](https://builders.ikas.com/ui-preview/embed/tokens-elevation)

## Tipografi

Inter. Küçük ve yoğun bir ölçek; uygulama içinde 24px üstü metin yoktur.

_Görsel blok: Tipografi ölçeği._ [Önizlemeyi aç](https://builders.ikas.com/ui-preview/embed/tokens-type)