Standard de marque du CMS

Voici le standard de marque définitif du produit WebBlocks CMS pour les ressources d'authentification, d'administration, de paquet et de runtime racine appartenant au CMS. Il existe pour éviter que des travaux futurs ne réintroduisent les anciennes expérimentations de bascule d'images, de masques ou d'icônes d'application en squircle.

Inventaire des fichiers de marque

Le CMS conserve les mêmes fichiers de marque définitifs dans les chemins de ressources du runtime et du paquet :

  • 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

Les fichiers favicon et icône d'application sont des ressources fixes du chrome du navigateur. Les fichiers de la marque produit restent disponibles pour la compatibilité et l'empaquetage, mais le rendu de l'authentification et de la barre latérale d'administration utilise le composant SVG inline réutilisable plutôt qu'un balisage d'image.

Composant réutilisable de la marque

Le composant réutilisable de la marque produit du CMS se trouve à :

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

Utilisez-le via l'espace de noms de composants du paquet :

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

Le composant produit du SVG inline, utilise stroke="currentColor" et omet volontairement les attributs width et height sur le SVG externe de la marque produit. La taille relève du CSS, via les classes WebBlocks UI et le CSS statique du CMS.

Utilisation dans le shell d'authentification

Les vues d'authentification du CMS utilisent le shell invité du paquet et le composant de marque inline, aussi bien pour les marques du panneau accent que pour celles de surface / en-tête de formulaire. La couleur de la marque en authentification est pilotée par les tokens WebBlocks UI :

  • Les surfaces accent utilisent color: var(--wb-accent-on).
  • Les contextes de surface utilisent color: var(--wb-accent) ou un repli approuvé lorsqu'aucun token n'est disponible.

Les marques en authentification ne doivent pas utiliser img, picture, source, de masques CSS ni de bascule par media queries.

Utilisation dans la barre latérale d'administration

La barre latérale d'administration utilise le même composant réutilisable de marque en SVG inline. Elle doit préserver le contrat de classes établi de WebBlocks UI :

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

La couleur de la marque dans la barre latérale est pilotée par les tokens WebBlocks UI, avec var(--wb-accent) ou un repli approuvé pour les contextes de surface / administration.

Règles de couleur et de tokens

Les tracés SVG de la marque héritent de la couleur via currentColor.

  • Surfaces accent : var(--wb-accent-on)
  • Contextes de surface / administration : var(--wb-accent) ou un repli approuvé

Ne réglez pas la couleur de l'authentification ou de la barre latérale en échangeant des fichiers image, en ajoutant du balisage <source> clair/sombre, des masques CSS ou des dimensions codées en dur sur l'élément SVG inline.

À ne pas réintroduire

Ne réintroduisez aucune de ces anciennes approches de marque du produit CMS :

  • Logos de marque en img dans le chrome produit de l'authentification ou de la barre latérale d'administration
  • Bascule via picture ou source pour les marques produit de l'authentification ou de la barre latérale d'administration
  • Marques en masque CSS, y compris wb-auth-brand-mark-mask
  • Attributs width ou height sur les éléments SVG de marque produit de l'authentification ou de la barre latérale d'administration
  • La piste du favicon ou de l'icône d'application en squircle
  • Fichiers obsolètes tels que logo.svg, app-icon.svg, logo-mark-mask.svg, logo-mark-inverse.svg, icon-192x192.png ou icon-512x512.png

Des tests ciblés font respecter ce standard pour l'authentification, la barre latérale d'administration, les ressources de marque de la racine et celles du paquet.