Standard di marca del CMS

Questo è lo standard di marca definitivo del prodotto WebBlocks CMS per gli asset di autenticazione, amministrazione, pacchetto e runtime radice di proprietà del CMS. Esiste per impedire che lavori futuri reintroducano i vecchi esperimenti di scambio immagini, maschere o icone applicazione a squircle.

Inventario dei file di marca

Il CMS mantiene gli stessi file di marca definitivi sia nei percorsi degli asset del runtime sia in quelli del pacchetto:

  • 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

I file favicon e icona applicazione sono asset fissi del chrome del browser. I file del marchio di prodotto restano disponibili per compatibilità e packaging, ma il rendering dell'autenticazione e della barra laterale di amministrazione usa il componente SVG inline riutilizzabile invece del markup immagine.

Componente riutilizzabile del marchio

Il componente riutilizzabile del marchio di prodotto del CMS si trova in:

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

Usatelo tramite il namespace dei componenti del pacchetto:

<x-webblocks-cms::brand-mark class="..." decorative="true" />

Il componente renderizza SVG inline, usa stroke="currentColor" e omette intenzionalmente gli attributi width e height dall'SVG esterno del marchio di prodotto. La dimensione spetta al CSS, tramite le classi WebBlocks UI e il CSS statico del CMS.

Uso nella shell di autenticazione

Le viste di autenticazione del CMS usano la shell guest del pacchetto e il componente di marca inline sia per i marchi del pannello accent sia per quelli di superficie/intestazione del form. Il colore di marca in autenticazione è controllato tramite i token WebBlocks UI:

  • Le superfici accent usano color: var(--wb-accent-on).
  • I contesti di superficie usano color: var(--wb-accent) o un fallback approvato quando un token non è disponibile.

I marchi in autenticazione non devono usare img, picture, source, maschere CSS o commutazione tramite media query.

Uso nella barra laterale di amministrazione

La barra laterale di amministrazione usa lo stesso componente riutilizzabile di marchio in SVG inline. La barra laterale deve preservare il contratto di classi stabilito da WebBlocks UI:

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

Il colore del marchio nella barra laterale è controllato dai token WebBlocks UI, usando var(--wb-accent) o un fallback approvato per i contesti di superficie/amministrazione.

Regole di colore e token

I path SVG del marchio ereditano il colore tramite currentColor.

  • Superfici accent: var(--wb-accent-on)
  • Contesti di superficie/amministrazione: var(--wb-accent) o un fallback approvato

Non risolvete il colore dell'autenticazione o della barra laterale scambiando file immagine, aggiungendo markup <source> per chiaro/scuro, aggiungendo maschere CSS o dimensioni fisse all'elemento SVG inline.

Da non reintrodurre

Non reintroducete nessuno di questi vecchi approcci di marca del prodotto CMS:

  • Loghi di marca con img nel chrome di prodotto in autenticazione o nella barra laterale di amministrazione
  • Commutazione con picture o source per i marchi di prodotto in autenticazione o nella barra laterale di amministrazione
  • Marchi con maschera CSS, inclusa wb-auth-brand-mark-mask
  • Attributi width o height sugli elementi SVG di marca del prodotto in autenticazione o nella barra laterale di amministrazione
  • La direzione favicon o icona applicazione a squircle
  • File obsoleti come logo.svg, app-icon.svg, logo-mark-mask.svg, logo-mark-inverse.svg, icon-192x192.png o icon-512x512.png

Test mirati fanno rispettare questo standard per l'autenticazione, la barra laterale di amministrazione, gli asset di marca della radice e quelli del pacchetto.