CMS Marka Standardı

Bu, CMS'e ait auth, admin, paket ve kök çalışma zamanı varlıkları için nihai WebBlocks CMS ürün marka standardıdır. Gelecekteki çalışmaların eski görsel değiştirme, maske veya squircle uygulama simgesi denemelerini yeniden gündeme getirmesini önlemek için vardır.

CMS, aynı nihai marka dosyalarını hem çalışma zamanı hem de paket varlık yollarında tutar:

• public/cms/brand/favicon.svg
• public/cms/brand/favicon-16x16.png
• public/cms/brand/favicon-32x32.png
• public/cms/brand/apple-touch-icon.png
• public/cms/brand/logo-mark.svg
• public/cms/brand/logo-mark-dark.svg
• public/cms/brand/logo-mark-on-accent.svg
• packages/webblocks-cms/public/cms/brand/favicon.svg
• packages/webblocks-cms/public/cms/brand/favicon-16x16.png
• packages/webblocks-cms/public/cms/brand/favicon-32x32.png
• packages/webblocks-cms/public/cms/brand/apple-touch-icon.png
• packages/webblocks-cms/public/cms/brand/logo-mark.svg
• packages/webblocks-cms/public/cms/brand/logo-mark-dark.svg
• packages/webblocks-cms/public/cms/brand/logo-mark-on-accent.svg

Favicon ve uygulama simgesi dosyaları sabit tarayıcı arayüzü varlıklarıdır. Ürün işareti dosyaları uyumluluk ve paketleme için kullanılabilir durumda kalır; ancak auth ve admin kenar çubuğu görüntülemesi, görsel işaretlemesi yerine yeniden kullanılabilir satır içi SVG bileşenini kullanır.

Yeniden kullanılabilir CMS ürün işareti bileşeni şu konumda bulunur:

packages/webblocks-cms/resources/views/components/brand-mark.blade.php

Bileşeni paket bileşen ad alanı üzerinden kullanın:

Bileşen satır içi SVG üretir, stroke="currentColor" kullanır ve dıştaki ürün marka SVG öğesinde width ve height özniteliklerini bilinçli olarak kullanmaz. Boyut, WebBlocks UI sınıfları ve CMS statik CSS'i aracılığıyla CSS'te tanımlanır.

CMS auth görünümleri, hem vurgu paneli hem de yüzey/form başlığı işaretleri için paketin konuk kabuğunu ve satır içi marka bileşenini kullanır. Auth marka rengi WebBlocks UI belirteçleri üzerinden denetlenir:

• Vurgu yüzeyleri color: var(--wb-accent-on) kullanır.
• Yüzey bağlamları color: var(--wb-accent) veya belirteç kullanılamadığında onaylı bir yedek değer kullanır.

Auth marka işaretleri img, picture, source, CSS maskeleri veya ortam bazlı değiştirme kullanmamalıdır.

Admin kenar çubuğu, aynı yeniden kullanılabilir satır içi SVG marka işareti bileşenini kullanır. Kenar çubuğu, yerleşik WebBlocks UI sınıf sözleşmesini korumalıdır:

• wb-sidebar-brand
• wb-sidebar-brand-logo
• wb-sidebar-brand-copy
• wb-sidebar-brand-note

Kenar çubuğu marka işaretinin rengi WebBlocks UI belirteçleriyle denetlenir; yüzey/admin bağlamları için var(--wb-accent) veya onaylı bir yedek değer kullanılır.

Marka işareti SVG yolları rengi currentColor üzerinden devralır.

• Vurgu yüzeyleri: var(--wb-accent-on)
• Yüzey/admin bağlamları: var(--wb-accent) veya onaylı bir yedek değer

Auth veya kenar çubuğu rengini görsel dosyalarını değiştirerek, karanlık/aydınlık <source> işaretlemesi ekleyerek, CSS maskeleri ekleyerek veya satır içi SVG öğesine sabit kodlanmış boyutlar ekleyerek çözmeyin.

Şu eski CMS ürün marka yaklaşımlarından hiçbirini yeniden kullanmayın:

• Auth veya admin kenar çubuğu ürün arayüzünde img marka logoları
• Auth veya admin kenar çubuğu ürün marka işaretleri için picture veya source ile değiştirme
• wb-auth-brand-mark-mask dahil olmak üzere CSS maskeli marka işaretleri
• Auth veya admin kenar çubuğu ürün marka SVG öğelerinde width veya height öznitelikleri
• Squircle favicon veya uygulama simgesi yaklaşımı
• logo.svg, app-icon.svg, logo-mark-mask.svg, logo-mark-inverse.svg, icon-192x192.png veya icon-512x512.png gibi kullanımdan kalkmış dosyalar

Odaklı testler bu standardı auth, admin kenar çubuğu, kök marka varlıkları ve paket marka varlıkları için zorunlu kılar.