CMS-Markenstandard

Dies ist der endgültige WebBlocks-CMS-Produktmarkenstandard für CMS-eigene Auth-, Admin-, Paket- und Root-Laufzeit-Assets. Er existiert, um zu verhindern, dass künftige Arbeiten ältere Experimente mit Bildwechsel, Masken oder Squircle-App-Icons wieder einführen.

Inventar der Markendateien

Das CMS führt dieselben endgültigen Markendateien sowohl in den Laufzeit- als auch in den Paket-Asset-Pfaden:

  • 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

Die Favicon- und App-Icon-Dateien sind feste Browser-Chrome-Assets. Die Produktmarken-Dateien bleiben für Kompatibilität und Paketierung verfügbar, aber die Darstellung in Auth und Admin-Seitenleiste verwendet die wiederverwendbare Inline-SVG-Komponente anstelle von Bild-Markup.

Wiederverwendbare Markenzeichen-Komponente

Die wiederverwendbare CMS-Produktmarken-Komponente befindet sich unter:

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

Verwenden Sie sie über den Komponenten-Namespace des Pakets:

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

Die Komponente rendert Inline-SVG, verwendet stroke="currentColor" und lässt die Attribute width und height am äußeren Produktmarken-SVG bewusst weg. Die Größe gehört ins CSS über WebBlocks-UI-Klassen und das statische CSS des CMS.

Verwendung in der Auth-Shell

CMS-Auth-Views verwenden die Gast-Shell des Pakets und die Inline-Markenkomponente sowohl für Akzentpanel- als auch für Oberflächen-/Formularkopf-Markenzeichen. Die Auth-Markenfarbe wird über WebBlocks-UI-Tokens gesteuert:

  • Akzentflächen verwenden color: var(--wb-accent-on).
  • Oberflächenkontexte verwenden color: var(--wb-accent) oder einen genehmigten Fallback, wenn kein Token verfügbar ist.

Auth-Markenzeichen dürfen kein img, picture, source, keine CSS-Masken und keinen medienabhängigen Wechsel verwenden.

Verwendung in der Admin-Seitenleiste

Die Admin-Seitenleiste verwendet dieselbe wiederverwendbare Inline-SVG-Markenzeichen-Komponente. Die Seitenleiste muss den etablierten WebBlocks-UI-Klassenvertrag beibehalten:

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

Die Farbe des Markenzeichens in der Seitenleiste wird über WebBlocks-UI-Tokens gesteuert; für Oberflächen-/Admin-Kontexte wird var(--wb-accent) oder ein genehmigter Fallback verwendet.

Farb- und Token-Regeln

Die SVG-Pfade des Markenzeichens erben die Farbe über currentColor.

  • Akzentflächen: var(--wb-accent-on)
  • Oberflächen-/Admin-Kontexte: var(--wb-accent) oder ein genehmigter Fallback

Lösen Sie Farbfragen in Auth oder Seitenleiste nicht durch den Austausch von Bilddateien, das Hinzufügen von Dark-/Light-<source>-Markup, CSS-Masken oder fest codierte Abmessungen am Inline-SVG-Element.

Nicht wieder einführen

Führen Sie keinen dieser älteren CMS-Produktmarken-Ansätze wieder ein:

  • img-Markenlogos im Produkt-Chrome von Auth oder Admin-Seitenleiste
  • picture- oder source-Wechsel für Produktmarkenzeichen in Auth oder Admin-Seitenleiste
  • CSS-Masken-Markenzeichen, einschließlich wb-auth-brand-mark-mask
  • width- oder height-Attribute an Produktmarken-SVG-Elementen in Auth oder Admin-Seitenleiste
  • Squircle-Favicon- oder App-Icon-Richtung
  • Veraltete Dateien wie logo.svg, app-icon.svg, logo-mark-mask.svg, logo-mark-inverse.svg, icon-192x192.png oder icon-512x512.png

Gezielte Tests setzen diesen Standard für Auth, Admin-Seitenleiste, Root-Marken-Assets und Paket-Marken-Assets durch.