@studiolxd/brand 49.6.0 → 49.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiolxd/brand",
-  "version": "49.6.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/components/fieldset.css

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --fieldset-legend-space-after: var(--text-heading-space-after); /** Aire bajo el legend — el mismo em que deja un Heading */
+}

package/src/tokens/components/fieldset.ts

@@ -0,0 +1,4 @@
+import fieldsetJson from '../../../tokens/component/fieldset.json';
+import { flattenTokens } from '../utils';
+
+export const fieldsetTokens = flattenTokens(fieldsetJson as never);

package/src/tokens/index.css

@@ -75,6 +75,7 @@
 @import "./components/radio-group.css";
 @import "./components/arrow.css";
 @import "./components/icon.css";
+@import "./components/fieldset.css";
 @import "./components/floating-panel.css";
 @import "./components/floating-dock.css";
 @import "./molecules/menu.css";
@@ -169,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/_index.legacy.scss

@@ -49,6 +49,7 @@
 @import 'components/accordion';
 @import 'components/arrow';
 @import 'components/icon';
+@import 'components/fieldset';
 @import 'molecules/input-field';
 @import 'molecules/form-field';
 @import 'molecules/field-row';

package/src/tokens/scss/_index.scss

@@ -49,6 +49,7 @@
 @forward 'components/accordion';
 @forward 'components/arrow';
 @forward 'components/icon';
+@forward 'components/fieldset';
 @forward 'molecules/input-field';
 @forward 'molecules/form-field';
 @forward 'molecules/field-row';

package/src/tokens/scss/components/_fieldset.scss

@@ -0,0 +1,4 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-fieldset-legend-space-after: 0.5em; // Aire bajo el legend — el mismo em que deja un Heading

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