Tema ve beyaz etiket

Nasıl çalışır

Her müşteri markası bir marka paketidir: kapalı bir şemaya uyan ve derleme sırasında işlenen bir token dosyası. Paket yalnızca izin verilen değerleri (renk rampaları, görünüm seçimleri ve en fazla sekiz koyu mod istisnası) değiştirebilir; anlam ve bileşen token’larının adları ve aralarındaki ilişkiler değişmez. Her marka, açık ve koyu mod için ayrı, sabit CSS dosyalarına derlenir.

Ürün ekranları çalışma anında tema yüklemez. Marka ve mod, kök öğedeki data-brand ve data-theme öznitelikleriyle seçilir; değerler derlenmiş dosyalardan gelir.

Bugünkü markalar

Marka	Amaç
neutral	Varsayılan paket: nötr birincil eylemler, iris ve şeftali vurgular
bigbang	İsteğe bağlı paket: deniz mavisi marka rengi ve marka renginde birincil eylemler (appearance.primary: brand)
fixture	Deneme markası: bileşenlerin marka değiştiğinde doğru davrandığını göstermek için kullanılır

Sağ üstteki Görünüm menüsünden markalar arasında geçiş yapabilirsiniz.

Görünüm

Marka dosyasındaki isteğe bağlı appearance alanı iki seçim yapar:

Alan	Değerler	Etkisi
primary	neutral (varsayılan), brand	neutral birincil eylemleri açık modda neredeyse siyah, koyu modda neredeyse beyaz yapar; marka rengi rozetlerde, vurgu alanlarında ve brand tonunda kalır. brand birincil eylemi, odak rengini ve bağlantıyı marka rampasından alır.
radius	default, none, compact, soft, round	Köşe yarıçapı ölçeğini tek seferde değiştirir. default 10 px tabanlı ölçektir; none köşeleri düzleştirir.

Nötr görünümde bağlantı rengi metin rengine eşittir; bağlantıyı alt çizgi ayırt eder.

Materyal

Cam bir marka paketinin parçası değildir: uygulama onu Provider material="glass" ile açar ve her marka iki materyalle de çalışır. Cam tonları, kenar, çizgi ve parlama her mod için türetilen anlam token’larıdır (color-material-glass-*); paket bunları değiştiremez. validateBrand, her paket için cam üstündeki metin ve ikonları iki modda yedi en kötü arka plan üstünde denetler; rampaları kapıdan geçen bir marka camda da geçer. Bkz. Materyal.

Hazır ayarlar

applyPreset(dosya, { neutral, accent }) bir marka dosyasına hazır bir nötr ve vurgu rampası uygular. Nötr hazır ayarlar zinc, stone, slate ve gray; doygunlukları nötr sınırına çekilmiştir. Her biri DS nötr rampasının bütün basamaklarını, 75 (açık sayfa) ve 750 (koyu layer-2 ve üzerine gelme) dahil, kendi tonunda taşır. Vurgu hazır ayarları blue, green, orange, rose, violet ve teal. Her birleşim kontrast testinden geçer. Tema üreticisi aynı hazır ayarları ve görünüm seçimlerini sunar.

Marka paketi kuralları

Bugün uygulanan (pnpm --filter @bigbang/tokens run brand:validate; her token derlemesi de çalıştırır):

• Marka dosyası kapalı bir şemaya uyar; tanımsız bir anahtar, rampa veya basamak derlemeyi yoluyla birlikte durdurur.

• Her marka 50’den 950’ye 11 basamaklı bir brand ve bir accent rampası tanımlar. İsterse neutral rampasını 75 ve 750 dahil 0’dan 1000’e bütün basamaklarıyla (nötrler marka rengi gibi görünmesin diye doygunluk sınırlı), red, green, orange, blue durum rampalarını ve violet, teal, pink kategori rampalarını basamak adlarını koruyarak değiştirebilir.

• appearance yalnızca yukarıdaki alanları ve değerleri alır.

• Rampa değerleri saydam olmayan #RRGGBB değerleridir. OKLCH tohumunu kaydeden bir rampa bu tohumdan aynen yeniden üretilmelidir; elle yapılan her açıklık değişikliği adjust altında listelenir.

• Koyu mod istisnaları overrides.dark altındadır, bir anlam token’ını başka bir rampa basamağına bağlar ve en fazla sekiz tanedir.

• Kontrast çiftleri her marka ve modda yuvarlama olmadan çalışır: metin en az 4,5:1, kenarlık ve durum göstergeleri en az 3:1. Kalan bir çift derlemeyi durdurur. Değiştirilen violet, teal ya da pink rampası, çerçeveli rozetlerin kullandığı sayfa yüzeyindeki etiket metni için de denetlenir.

• Ham değerler ve rampalar derlenmiş dosyalara çıkmaz; bileşenler yalnızca anlam ve bileşen token’larını görür.

• Her marka için tek bir imzalı çıktı üretilir.

• Paketteki her varlık (yazı tipi, logo, görsel) sınırsız ticari kullanım lisansı taşır ve lisans kaydına işlenir.

Tema üreticisi

Tema üreticisi bu sitede, derlemenin kullandığı doğrulayıcıyla, marka renklerinden aday bir marka dosyası üretir. Ürettiği dosya normal marka paketi sürecinden (şema, kontrast testi, imza) geçer; ürünlerde çalışma anında tema yükleme yine yoktur. Materyal seçicisi markayı opak ya da cam yüzeylerde önizler.