Estándar de marca del CMS

Este es el estándar de marca definitivo del producto WebBlocks CMS para los recursos de autenticación, administración, paquete y runtime raíz que pertenecen al CMS. Existe para evitar que trabajos futuros reintroduzcan los antiguos experimentos de cambio de imagen, máscaras o iconos de aplicación tipo squircle.

Inventario de archivos de marca

El CMS mantiene los mismos archivos de marca definitivos tanto en las rutas de recursos del runtime como en las del paquete:

  • 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

Los archivos de favicon y de icono de aplicación son recursos fijos del chrome del navegador. Los archivos de la marca del producto siguen disponibles por compatibilidad y empaquetado, pero la representación en la autenticación y en la barra lateral de administración usa el componente SVG en línea reutilizable en lugar de marcado de imagen.

Componente reutilizable de la marca

El componente reutilizable de la marca del producto CMS se encuentra en:

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

Úselo a través del espacio de nombres de componentes del paquete:

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

El componente renderiza SVG en línea, usa stroke="currentColor" y omite intencionadamente los atributos width y height del SVG exterior de la marca del producto. El tamaño corresponde al CSS, mediante clases de WebBlocks UI y el CSS estático del CMS.

Uso en el shell de autenticación

Las vistas de autenticación del CMS usan el shell de invitado del paquete y el componente de marca en línea tanto para las marcas del panel de acento como para las de superficie/cabecera de formulario. El color de la marca en autenticación se controla mediante los tokens de WebBlocks UI:

  • Las superficies de acento usan color: var(--wb-accent-on).
  • Los contextos de superficie usan color: var(--wb-accent) o un fallback aprobado cuando no hay token disponible.

Las marcas en autenticación no deben usar img, picture, source, máscaras CSS ni conmutación por media queries.

Uso en la barra lateral de administración

La barra lateral de administración usa el mismo componente reutilizable de marca en SVG en línea. La barra lateral debe conservar el contrato de clases establecido de WebBlocks UI:

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

El color de la marca en la barra lateral se controla mediante los tokens de WebBlocks UI, usando var(--wb-accent) o un fallback aprobado para los contextos de superficie/administración.

Reglas de color y tokens

Los trazados SVG de la marca heredan el color mediante currentColor.

  • Superficies de acento: var(--wb-accent-on)
  • Contextos de superficie/administración: var(--wb-accent) o un fallback aprobado

No resuelva el color de la autenticación o de la barra lateral intercambiando archivos de imagen, añadiendo marcado <source> para claro/oscuro, añadiendo máscaras CSS o añadiendo dimensiones fijas al elemento SVG en línea.

No reintroducir

No reintroduzca ninguno de estos antiguos enfoques de marca del producto CMS:

  • Logotipos de marca con img en el chrome del producto en autenticación o en la barra lateral de administración
  • Conmutación con picture o source para las marcas del producto en autenticación o en la barra lateral de administración
  • Marcas con máscara CSS, incluida wb-auth-brand-mark-mask
  • Atributos width o height en los elementos SVG de marca del producto en autenticación o en la barra lateral de administración
  • La dirección de favicon o icono de aplicación tipo squircle
  • Archivos obsoletos como logo.svg, app-icon.svg, logo-mark-mask.svg, logo-mark-inverse.svg, icon-192x192.png o icon-512x512.png

Hay tests específicos que hacen cumplir este estándar en la autenticación, la barra lateral de administración, los recursos de marca de la raíz y los recursos de marca del paquete.