CSS değişkenleri

Renklerin, yazı tipinin, köşe yuvarlaklığının ve boşlukların CSS değişkenleriyle markanıza uyarlanması.

Varsayılan bileşen renk, yazı tipi ve köşe değerlerini sabit olarak tanımlamaz; hepsini CSS değişkenlerinden okur. Değişkenleri kendi CSS dosyanızda tanımladığınızda bileşen bu değerleri kullanır. Tanımlanmayan değişkenler için kanalın hazır tasarımının değerleri geçerlidir.

Değişkenler

Tablodaki varsayılan değerler Sıcak tasarımındır; diğer tasarımların farklı değerleri için: Hazır tasarımlar.

Değişken	Varsayılan	Kullanıldığı yer
`--review-font`	`inherit`	Tüm metinler. Varsayılan olarak sayfanızın yazı tipi kullanılır.
`--review-text`	`#1F1B16`	Ana metin rengi
`--review-text-muted`	`#6B6258`	İkincil metinler: yazar adının altındaki rozet ve tarih satırı, “Faydalı mı?” etiketi ve oy düğmeleri, bilgi notları
`--review-surface`	`#FFFFFF`	Kartların, düğmelerin, form alanlarının ve yorum yazma alanının arka planı
`--review-surface-sunken`	`#FAF6EF`	Filtre düğmelerinin ve görsel yer tutucularının arka planı, düğmelerin üzerine gelindiğindeki arka plan, yorum formundaki bilgilendirme metninin arka planı
`--review-border`	`#ECE5DA`	Çizgiler ve kenarlıklar
`--review-border-width`	`1px`	Çizgi kalınlığı
`--review-accent`	`#1F1B16`	Birincil düğmeler (örneğin “Ara” ve “Gönder”), seçili filtre düğmeleri ve odak çerçevesi
`--review-accent-text`	`#FFFFFF`	Birincil düğmelerin ve seçili filtre düğmelerinin metin rengi
`--review-star`	`#F2A516`	Yıldızların ve puan çubuklarının dolu kısmı, yorumdaki ölçek işaretçisi
`--review-track`	`#EFE4D2`	Yıldızların boş kısmı, puan çubuklarının ve basamaklı ölçeklerin zemini
`--review-verified`	`#1F7A4D`	Doğrulama rozeti ve doğrulanmış yorum sayısı
`--review-summary`	`#FBF5EB`	Özet panelinin, satıcı yanıtının ve çözüm kaydının arka planı; seçili “Evet” ya da “Hayır” düğmesinin arka planı
`--review-summary-text`	`#5B3A0E`	Özet panelindeki, satıcı yanıtındaki ve çözüm kaydındaki metin; özetteki ölçek işaretçisi; seçili oy düğmesinin metni
`--review-avatar`, `--review-avatar-text`	Ada göre değişir	Baş harf dairesinin arka planı ve harf rengi. Tanımlanmadığında renk, yazarın adına göre altı renkten biri olur; tanımlandığında tüm yorumlarda aynı renk kullanılır.
`--review-radius`	`14px`	Kartların, özet panelinin ve yorum yazma alanının köşe yuvarlaklığı
`--review-radius-sm`	`10px`	Düğmelerin, form alanlarının ve görsellerin köşe yuvarlaklığı
`--review-space-unit`	`4px`	Boşluk birimi. Tüm aralıklar bu değerin katlarıdır; değer büyütüldüğünde tüm aralıklar orantılı olarak artar.
`--review-label-transform`	`none`	“Doğrulanmış alıcı” gibi etiketlerin harf biçimi; örneğin `uppercase`
`--review-label-tracking`	`normal`	Aynı etiketlerin harf aralığı; örneğin `0.08em`

Hazır tasarımlar

Varsayılan bileşenin sekiz hazır tasarımı vardır: Sıcak, Güven, Editoryal, Sade, Pudra, Sportif, Doğal ve Gece. Kanalın tasarımı panelde Mağaza görünümü ekranında seçilir (Mağaza görünümü); container’daki data-review-theme attribute’u bu seçimi geçersiz kılar (Düzen ve CSS seçicileri).

Tasarım, değişkenlerin başlangıç değerlerini belirler. Kendi tanımladığınız --review-* değerleri her tasarımda önceliklidir; örneğin --review-accent tanımladıysanız bütün tasarımlarda sizin renginiz kullanılır. Diğer tasarımlarda Sıcak’tan farklı olan değerler aşağıdaki iki tablodadır; “—” yazan değer Sıcak ile aynıdır.

Değişken	Güven	Editoryal	Sade	Pudra
`--review-text`	`#17201D`	`#111111`	`#1A1A1A`	`#3A2A33`
`--review-text-muted`	`#56625E`	`#666666`	`#6B6B6B`	`#7E6874`
`--review-surface-sunken`	`#F2F7F5`	`#F4F4F4`	`#F6F6F6`	`#FFF4F7`
`--review-border`	`#DCE7E2`	`#E4E4E4`	`#E6E6E6`	`#F4DCE4`
`--review-accent`	`#0F6E56`	`#111111`	`#1A1A1A`	`#B83E68`
`--review-star`	`#EF9F27`	`#111111`	`#F5A623`	`#E56F96`
`--review-track`	`#E3ECE8`	`#DADADA`	`#EBEBEB`	`#F7E2EA`
`--review-verified`	`#0F6E56`	`#3D3D3D`	`#2E7D4F`	`#A0365C`
`--review-summary`	`#FFFFFF`	`transparent`	`#FFFFFF`	`#FFF0F4`
`--review-summary-text`	`#17201D`	`#111111`	`#1A1A1A`	`#7A2848`
`--review-radius`	`12px`	`2px`	`8px`	`22px`
`--review-radius-sm`	`8px`	`2px`	`6px`	`14px`

Değişken	Sportif	Doğal	Gece
`--review-text`	`#0E0E10`	`#2E3326`	`#F3F3F1`
`--review-text-muted`	`#55555C`	`#686D5C`	`#A9A9A4`
`--review-surface`	—	—	`#17181A`
`--review-surface-sunken`	`#F2F2F4`	`#F4F1E8`	`#222326`
`--review-border`	`#DADADF`	`#E3DDCB`	`#323438`
`--review-accent`	`#0E0E10`	`#4F6136`	`#F3F3F1`
`--review-accent-text`	—	—	`#111214`
`--review-star`	`#FF6A00`	`#C98F2E`	`#F5C451`
`--review-track`	`#E4E4E9`	`#EAE4D3`	`#3A3C41`
`--review-verified`	`#0E0E10`	`#4F6136`	`#7FD1A8`
`--review-summary`	`#FFFFFF`	`#F1EDDF`	`#222326`
`--review-summary-text`	`#0E0E10`	`#3B4529`	`#F3F3F1`
`--review-radius`	`4px`	`12px`	`12px`
`--review-radius-sm`	`2px`	`8px`	`8px`
`--review-label-transform`	`uppercase`	—	—
`--review-label-tracking`	`.08em`	—	—

Tasarımlar bazı öğelerin biçimini de değiştirir:

Güven ve Sportif tasarımlarında ortalama puan --review-accent renginde bir kutuda gösterilir ve “Faydalı mı?” oy düğmeleri çerçevelidir.
Güven ve Sade tasarımlarında özet paneli ince bir çerçeveyle çevrilir.
Güven ve Doğal tasarımlarında puan çubuklarının dolu kısmı ve ölçek işaretçisi --review-accent rengindedir; satıcı yanıtı ve çözüm kaydının sol kenarında bu renkte bir çizgi bulunur. Güven tasarımında kartlı düzende kartların sol kenarındaki çizgi de bu renktedir.
Editoryal tasarımında baş harf dairesi gösterilmez, yorum başlıkları tırnak içinde yazılır ve özet bir panel yerine alt çizgiyle ayrılır.
Sportif tasarımında özet --review-text renginde kalın bir çerçeveyle çevrilir, ortalama puan kalın ve italik yazılır, yorum başlıkları ve “Doğrulanmış alıcı” gibi etiketler büyük harfle gösterilir; filtre düğmeleri, oy düğmeleri ve “Daha fazla yorum” düğmesi yuvarlak uçlu değil köşelidir.
Sade tasarımında kartların üzerine gelindiğinde gölge çıkmaz.
Gece tasarımı koyu renkli siteler içindir: yorum bölümü kendi koyu zeminiyle (--review-surface), iç boşluğuyla ve yuvarlatılmış köşeleriyle gelir; sayfanızın zemini koyu olmasa da bölüm koyu görünür.

Bu farklar da özgüllük eklemeyen kurallarla yazılmıştır; kendi CSS kurallarınız bunları geçersiz kılabilir. Gece tasarımının kök öğeye verdiği zemin, iç boşluk ve köşe yuvarlaklığı bunun tek istisnasıdır: ayrıntı için Düzen ve CSS seçicileri › CSS seçicileri.

Tanımlama yeri

Değişkenleri :root seçicisinde tanımlayın. Yorum formu, sipariş doğrulaması ve fotoğraf görüntüleyici, sayfanın üzerinde açılan ve body öğesine eklenen bir dialog içinde gösterilir. Dialog açılırken değişkenlerin o anki değerleri dialog’u açan öğeden (yorum yazma alanından ya da yorum listesinden) okunur ve dialog’a aktarılır. Yorum yazma alanını data-review-gate ile container’ın dışında gösteriyorsanız ve değişkenleri yalnızca container’da tanımlarsanız, bu alan ve oradan açılan dialog değerleri almaz.

:root {
  --review-font: "Inter", system-ui, sans-serif;
  --review-text: #111418;
  --review-text-muted: #5b626b;
  --review-accent: #0b4f9c;
  --review-accent-text: #ffffff;
  --review-star: #e0a100;
  --review-radius: 0;
  --review-radius-sm: 0;
  --review-space-unit: 5px;
  --review-label-transform: uppercase;
  --review-label-tracking: 0.06em;
}

Farklı sayfalarda farklı bir görünüm istiyorsanız aynı değişkenleri daha dar kapsamlı bir seçicide yeniden tanımlayabilirsiniz; yorum bölümü en yakın tanımı kullanır, dialog da açıldığı yerdeki değerleri alır.

Bileşen --review-* değişkenlerini kendisi tanımlamaz; varsayılan ve tasarım değerleri yalnızca kendi kurallarında kullanılır. Kendi CSS kurallarınızda var(--review-accent) gibi bir değişken kullanacaksanız değişkeni tanımlayın ya da yedek değer verin: var(--review-accent, #1f1b16).

Koyu tema

Siteniz yalnızca koyu renkliyse değişkenleri tanımlamak yerine kanal için Gece tasarımını seçebilirsiniz (Hazır tasarımlar). Siteniz açık ve koyu tema arasında geçiş yapıyorsa değişkenleri koyu tema kuralınızın içinde yeniden tanımlayın. Özet paneli ve satıcı yanıtı --review-summary ile --review-summary-text değerlerini kullandığı için bu ikisini de tanımlayın:

@media (prefers-color-scheme: dark) {
  :root {
    --review-text: #eceef0;
    --review-text-muted: #a3aab3;
    --review-surface: #15181c;
    --review-surface-sunken: #1d2126;
    --review-border: #2e343b;
    --review-accent: #7fb2ff;
    --review-accent-text: #0b1320;
    --review-track: #2e343b;
    --review-verified: #5cc08a;
    --review-summary: #1d2126;
    --review-summary-text: #eceef0;
  }
}

Erişilebilirlik

--review-text ile --review-surface arasında, --review-verified ile --review-surface arasında, --review-summary-text ile --review-summary arasında ve --review-accent-text ile --review-accent arasında en az 4,5:1 kontrast oranı bulunmalıdır.
Odak çerçevesi --review-accent renginde gösterilir ve kaldırılmamalıdır; klavyeyle gezinen ziyaretçiler hangi öğede olduklarını bu çerçeveyle görür.
Yıldızlar, ekran okuyucular için ayrıca metin olarak da sunulur (örneğin “5 üzerinden 4”); yalnızca rengi değiştirmeniz yeterlidir.

Stillerin kapsamı

Bileşenin stil kuralları yalnızca kendi öğelerine uygulanır ve sayfanızdaki diğer öğeleri etkilemez. Bileşen, kök öğesinde miras alınan stilleri sıfırlar (all: initial); bu nedenle sayfanızdaki button, p ya da li gibi etiket seçicili genel kurallar bileşenin görünümünü değiştirmez. Sınıf ya da ID içeren daha özgül kurallarınız ise bileşenin içindeki öğelere de uygulanabilir.

Değişkenlerle yapılamayan değişiklikler için: Düzen ve CSS seçicileri.