@studiolxd/brand 49.7.0 → 49.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiolxd/brand",
-  "version": "49.7.0",
+  "version": "49.8.0",
   "description": "El sistema de diseño de Studio LXD: componentes React, tokens y documentación de la suite SLXD.",
   "repository": {
     "type": "git",

package/src/tokens/index.css

@@ -170,6 +170,11 @@
    especificidad, para que se lea en el orden en que actúa. */
 @import "./surface-invert.css";
 
+/* Superficie siempre clara: el contrapunto de `.surface-dark`, para el interior
+   de un relleno claro universal (el amarillo del aviso). Solo actúa dentro de
+   una superficie oscura, que es donde hay algo que devolver a claro. */
+@import "./surface-light.css";
+
 /* Remapeo de la superficie pública (`.site-shell`) — va al final: los tokens
    que redefine tienen la misma especificidad que los `:root` de arriba. */
 @import "./surface-public.css";

package/src/tokens/molecules/banner.css

@@ -16,6 +16,9 @@
   --banner-info-border-color: var(--color-text-on-dark); /** Información — filete blanco. Dibuja el canto también cuando la página ya es oscura y el relleno prusia coincide con el fondo, igual que en el alert `default` */
   --banner-warning-bg: var(--color-warning-fill); /** Aviso — el relleno del rol: el amarillo de marca, aquí como feedback. Universal, igual en las dos superficies */
   --banner-warning-border-color: var(--color-warning-fill); /** Aviso — filete igual al relleno: el amarillo ya se separa de cualquier fondo del sistema */
+  --banner-error-bg: var(--color-error-fill); /** Error — el relleno del rol: el rojo semántico. Universal, igual en las dos superficies, como el de `Alert error` */
+  --banner-error-color: var(--color-error-fill-text); /** Error — mensaje blanco sobre el relleno rojo */
+  --banner-error-border-color: var(--color-error-fill); /** Error — filete igual al relleno: el rojo ya se separa de cualquier fondo del sistema */
   --banner-warning-color: var(--color-warning-fill-text); /** Aviso — mensaje prusia sobre el relleno amarillo (11,17:1, AAA) */
   --banner-warning-close-color: var(--color-warning-fill-text); /** Aviso — aspa y su anillo de foco. Es el único relleno claro de la barra, así que el aspa no puede tomar la tinta ambiente: con `[data-theme="dark"]` en la raíz saldría blanca sobre amarillo (1,50:1). Va fijada a la tinta del rol, que es universal */
 }

package/src/tokens/molecules/banner.ts

@@ -3,7 +3,7 @@ import { flattenTokens } from '../utils';
 
 const all = flattenTokens(banner as never);
 
-const VARIANTS = ['info', 'warning'];
+const VARIANTS = ['info', 'warning', 'error'];
 
 export const bannerBaseTokens = all.filter(
   t => !VARIANTS.some(v => t.name.startsWith(`--banner-${v}-`)),

package/src/tokens/scss/molecules/_banner.scss

@@ -16,3 +16,6 @@ $lxd-banner-warning-bg: #ffcd00; // Aviso — el relleno del rol: el amarillo de
 $lxd-banner-warning-color: #111e30; // Aviso — mensaje prusia sobre el relleno amarillo (11,17:1, AAA)
 $lxd-banner-warning-border-color: #ffcd00; // Aviso — filete igual al relleno: el amarillo ya se separa de cualquier fondo del sistema
 $lxd-banner-warning-close-color: #111e30; // Aviso — aspa y su anillo de foco. Es el único relleno claro de la barra, así que el aspa no puede tomar la tinta ambiente: con `[data-theme="dark"]` en la raíz saldría blanca sobre amarillo (1,50:1). Va fijada a la tinta del rol, que es universal
+$lxd-banner-error-bg: #b30000; // Error — el relleno del rol: el rojo semántico. Universal, igual en las dos superficies, como el de `Alert error`
+$lxd-banner-error-color: #ffffff; // Error — mensaje blanco sobre el relleno rojo
+$lxd-banner-error-border-color: #b30000; // Error — filete igual al relleno: el rojo ya se separa de cualquier fondo del sistema