Temeller

Yükselti

Bir katmanın sayfanın önünde olduğunu yüzey rengi ve gölge birlikte anlatır. Açık modda gölge, koyu modda daha açık yüzey rengi derinlik verir.

Nasıl çalışır

Arayüzde dört düzey vardır. Her düzeyin bir yüzey rengi ve gerekiyorsa bir gölgesi bulunur:

Düzey	Yüzey	Gölge	Örnekler
Gömülü	`surface-sunken`	yok	Kod blokları, önizleme zemini
Katman	`surface-layer-1`, `surface-layer-2`	yok	Kenar menüsü, diyalog eylem bandı; sekme ve ilerleme izleri, iskelet
Sayfa	`surface-default`	yok	Sayfanın kendisi
Yükseltilmiş	`surface-raised`	`shadow-raised`	Kartlar, paneller
Bağlı açılır katman	`surface-raised` + 1 px `border-overlay` halka	`shadow-popup`	Açılır menü, bağlam menüsü, popover, onay balonu, bağlantı önizlemesi, seçim ve öneri listesi, ay ve yıl tablosu, DataTable sütun paneli
Yan çekmece	`surface-raised` + 1 px `border-overlay` halka, serbest köşeler yuvarlak	`shadow-panel`	Drawer (dört kenarda), alt ve üst sayfa
Kilitleyen katman	`surface-raised` + 1 px `border-overlay` halka	`shadow-overlay`	Diyalog, onay diyaloğu, arama paleti
Üst katman	`surface-raised` + 1 px `border-overlay` halka / `surface-inverse`	`shadow-overlay`	Bildirim (toast), ipucu

Varsayılan neutral paketinin yüzey değerleri. Bir nötr hazır ayarı veya markanın kendi nötr rampası aynı basamakları kendi tonunda taşır.

Yüzey	Açık	Koyu
`surface-sunken`	neutral 100 `#F5F5F5`	neutral 900 `#171717`
`surface-default`	neutral 75 `#F7F7F7`	neutral 850 `#1E1E1E`
`surface-raised`	neutral 0 `#FFFFFF`	neutral 800 `#262626`
`surface-layer-1`	neutral 100 `#F5F5F5`	neutral 800 `#262626`
`surface-layer-2`	neutral 150 `#EDEDED`	neutral 750 `#303030`
`surface-layer-3`	neutral 200 `#E5E5E5`	neutral 700 `#404040`
`surface-hovered`	neutral 100 `#F5F5F5`	neutral 750 `#303030`
`surface-selected`	neutral 150 `#EDEDED`	neutral 700 `#404040`
`border-subtle`	neutral 150 `#EDEDED`	neutral 750 `#303030`
`border-default`	neutral 200 `#E5E5E5`	neutral 700 `#404040`

Bütün açılır yüzeyler aynı tarifi kullanır: yükseltilmiş zemin, yer kaplamayan 1 px border-overlay halka ve role göre gölge. border-overlay açık modda yumuşak bir gri, koyu modda yüzde 10 beyazdır; koyu zeminde kenarı gölgeden daha iyi gösterir.

Koyu modda gölge zor görülür. Bu yüzden shadow-raised koyu modda boştur ve derinliği daha açık yüzey rengi taşır; shadow-popup, shadow-panel ve shadow-overlay ise daha koyu çizilir. Diyalog gibi sayfayı kilitleyen katmanların arkasına surface-scrim perdesi gelir; tarayıcı destekliyorsa perde arkasını blur-surface-scrim (4 px) kadar bulanıklaştırır.

Gömülü

Yükseltilmiş

Üst katman

Gölgeler

Tailwind’de shadow-xs, shadow-raised, shadow-popup, shadow-panel ve shadow-overlay araçlarıyla kullanılır. shadow-xs yalnızca bir kıl payı derinlik verir: form alanları, ikincil düğme ve klavye tuşu kullanır. Açık modda shadow-raised ve shadow-overlay iki katmanlıdır: yakın, keskin bir gölge ve uzak, yumuşak bir gölge. Varsayılan Tailwind gölgeleri kapalıdır.

Token	Açık mod	Koyu mod
`--bigbang-shadow-xs`	`0px 1px 2px 0px rgba(0, 0, 0, 0.050980392156862744)0px 1px 2px 0px rgba(0, 0, 0, 0.050980392156862744)0px 1px 2px 0px rgba(0, 0, 0, 0.050980392156862744)`	`0px 0px 0px 0px rgba(0, 0, 0, 0)0px 0px 0px 0px rgba(0, 0, 0, 0)0px 0px 0px 0px rgba(0, 0, 0, 0)`
`--bigbang-shadow-raised`	`0px 1px 3px 0px rgba(0, 0, 0, 0.10196078431372549), 0px 1px 2px -1px rgba(0, 0, 0, 0.10196078431372549)0px 1px 3px 0px rgba(0, 0, 0, 0.10196078431372549), 0px 1px 2px -1px rgba(0, 0, 0, 0.10196078431372549)0px 1px 3px 0px rgba(0, 0, 0, 0.10196078431372549), 0px 1px 2px -1px rgba(0, 0, 0, 0.10196078431372549)`	`0px 0px 0px 0px rgba(0, 0, 0, 0)0px 0px 0px 0px rgba(0, 0, 0, 0)0px 0px 0px 0px rgba(0, 0, 0, 0)`
`--bigbang-shadow-overlay`	`0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)`	`0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)`
`--bigbang-shadow-popup`	`0px 4px 6px -1px rgba(0, 0, 0, 0.10196078431372549), 0px 2px 4px -2px rgba(0, 0, 0, 0.10196078431372549)0px 4px 6px -1px rgba(0, 0, 0, 0.10196078431372549), 0px 2px 4px -2px rgba(0, 0, 0, 0.10196078431372549)0px 4px 6px -1px rgba(0, 0, 0, 0.10196078431372549), 0px 2px 4px -2px rgba(0, 0, 0, 0.10196078431372549)`	`0px 4px 6px -1px rgba(0, 0, 0, 0.3215686274509804), 0px 2px 4px -2px rgba(0, 0, 0, 0.3215686274509804)0px 4px 6px -1px rgba(0, 0, 0, 0.3215686274509804), 0px 2px 4px -2px rgba(0, 0, 0, 0.3215686274509804)0px 4px 6px -1px rgba(0, 0, 0, 0.3215686274509804), 0px 2px 4px -2px rgba(0, 0, 0, 0.3215686274509804)`
`--bigbang-shadow-panel`	`0px 10px 15px -3px rgba(0, 0, 0, 0.10196078431372549), 0px 4px 6px -4px rgba(0, 0, 0, 0.10196078431372549)0px 10px 15px -3px rgba(0, 0, 0, 0.10196078431372549), 0px 4px 6px -4px rgba(0, 0, 0, 0.10196078431372549)0px 10px 15px -3px rgba(0, 0, 0, 0.10196078431372549), 0px 4px 6px -4px rgba(0, 0, 0, 0.10196078431372549)`	`0px 10px 15px -3px rgba(0, 0, 0, 0.3215686274509804), 0px 4px 6px -4px rgba(0, 0, 0, 0.3215686274509804)0px 10px 15px -3px rgba(0, 0, 0, 0.3215686274509804), 0px 4px 6px -4px rgba(0, 0, 0, 0.3215686274509804)0px 10px 15px -3px rgba(0, 0, 0, 0.3215686274509804), 0px 4px 6px -4px rgba(0, 0, 0, 0.3215686274509804)`
`--bigbang-shadow-glass`	`0px 8px 32px -8px rgba(0, 0, 0, 0.1607843137254902), 0px 2px 6px -2px rgba(0, 0, 0, 0.10196078431372549)0px 8px 32px -8px rgba(0, 0, 0, 0.1607843137254902), 0px 2px 6px -2px rgba(0, 0, 0, 0.10196078431372549)0px 8px 32px -8px rgba(0, 0, 0, 0.1607843137254902), 0px 2px 6px -2px rgba(0, 0, 0, 0.10196078431372549)`	`0px 8px 32px -8px rgba(0, 0, 0, 0.47843137254901963), 0px 0px 0px 0.5px rgba(255, 255, 255, 0.10196078431372549)0px 8px 32px -8px rgba(0, 0, 0, 0.47843137254901963), 0px 0px 0px 0.5px rgba(255, 255, 255, 0.10196078431372549)0px 8px 32px -8px rgba(0, 0, 0, 0.47843137254901963), 0px 0px 0px 0.5px rgba(255, 255, 255, 0.10196078431372549)`

Özel yüzeyler

Token	Açık mod	Koyu mod
`--bigbang-color-surface-translucent` Kayan içeriğin üstündeki buzlu başlık çubuğu	`rgba(252, 252, 252, 0.8509803921568627)rgba(252, 252, 252, 0.8509803921568627)rgba(252, 252, 252, 0.8509803921568627)`	`rgba(30, 30, 30, 0.8509803921568627)rgba(30, 30, 30, 0.8509803921568627)rgba(30, 30, 30, 0.8509803921568627)`
`--bigbang-color-surface-scrim` Diyalog ve paletin arkasındaki perde	`rgba(0, 0, 0, 0.10196078431372549)rgba(0, 0, 0, 0.10196078431372549)rgba(0, 0, 0, 0.10196078431372549)`	`rgba(0, 0, 0, 0.10196078431372549)rgba(0, 0, 0, 0.10196078431372549)rgba(0, 0, 0, 0.10196078431372549)`
`--bigbang-color-surface-checker` Bileşen önizleme zemininin dama deseni	`#fafafa#fafafa#fafafa`	`#101010#101010#101010`

Cam

Cam bir Provider altında çerçeve seviyeleri yığındaki yerini korur ama materyal değiştirir: dolgu bulanık bir arka plan üstünde yarı saydam bir tona döner (blur-surface-glass, açık modda 16 px, koyu modda 20 px), halka açık bir kenar ve ince bir çizgiye, gölge shadow-glass’a döner. Diyaloglar daha yüksek kontrastlı tonu alır. Yükseltilmiş kartlar ve sayfa opak kalır. Bkz. Materyal.

Token	Açık mod	Koyu mod
`--bigbang-shadow-glass`	`0px 8px 32px -8px rgba(0, 0, 0, 0.1607843137254902), 0px 2px 6px -2px rgba(0, 0, 0, 0.10196078431372549)0px 8px 32px -8px rgba(0, 0, 0, 0.1607843137254902), 0px 2px 6px -2px rgba(0, 0, 0, 0.10196078431372549)0px 8px 32px -8px rgba(0, 0, 0, 0.1607843137254902), 0px 2px 6px -2px rgba(0, 0, 0, 0.10196078431372549)`	`0px 8px 32px -8px rgba(0, 0, 0, 0.47843137254901963), 0px 0px 0px 0.5px rgba(255, 255, 255, 0.10196078431372549)0px 8px 32px -8px rgba(0, 0, 0, 0.47843137254901963), 0px 0px 0px 0.5px rgba(255, 255, 255, 0.10196078431372549)0px 8px 32px -8px rgba(0, 0, 0, 0.47843137254901963), 0px 0px 0px 0.5px rgba(255, 255, 255, 0.10196078431372549)`
`--bigbang-blur-surface-glass`	`16px16px16px`	`20px20px20px`
`--bigbang-blur-surface-glass-clear`	`6px6px6px`	`8px8px8px`

Katman sırası

Üst üste gelen katmanlar her ekranda aynı sırayla dizilir. Aşağıdaki liste alttan üste doğrudur; bir katman listede kendinden yukarıdakinin üstüne çıkmaz.

Sıra	Katman	Örnek
1	İçerik	Sayfa, kartlar, tablolar
2	Yapışkan bölgeler	Üst çubuk, tablo başlığı, alt eylem çubuğu
3	Çekmece	Dar ekranda kenar menü, yan panel
4	Açılır katman	Açılır menü, açılır pencere, seçim listesi
5	Diyalog	Onay ve form diyalogları, arkasında `surface-scrim` perdesiyle
6	Bildirim	Toast; diyalog açıkken de görünür
7	İpucu	Her zaman en üstte, kısa ömürlü

Bileşenler z-index değerini kendileri yazmaz; açılır katmanlar sayfanın sonuna taşınarak çizilir ve sıra yukarıdaki listeden gelir. Katman sırası token’ları (layer.*) eklenene kadar bu tablo kaynaktır.

Yönergeler

Düzeyi role göre seçin

bg-surface-raised ring-1 ring-line-overlay shadow-popup

YapınAçılır menü bağlı açılır katmandır: yükseltilmiş yüzey ince halka ve açılır katman gölgesiyle kullanılır.

shadow-[0_10px_30px_rgba(0,0,0,.3)]

YapmayınElle yazılan gölge koyu modda ve marka değişiminde uyumsuz kalır.