Color de texto para el storefront¶

Lo que la tienda necesita saber para dibujar el color de letra que se administra desde este CMS. Escrito para quien implementa el lado del storefront, que es otra persona.

Requisito completo: RF-009. Historia #316, tarea #364.

Estado. El CMS ya sirve el color resuelto dentro del contenido. El render todavía no existe: hoy el storefront dibuja el texto sin color y no se rompe nada, simplemente no se ve.

Lo único que hay que hacer¶

Cada nodo de texto del contenido puede traer una clave textColorValue con un color en hexadecimal. Si está, se aplica al texto. Si no está, el texto va con el color que herede.

Eso es todo. No hay que consultar ninguna paleta, no hay que resolver nada y no hay una colección nueva que leer.

// dentro del render de un nodo de tipo "text"
const estilo = nodo.textColorValue ? { color: nodo.textColorValue } : undefined

Cómo se ve en la respuesta¶

Una palabra en negrita y con color, dentro de un párrafo:

{
  "type": "paragraph",
  "format": "center",
  "indent": 0,
  "children": [
    { "type": "text", "text": "Envío ", "format": 0, "style": "" },
    {
      "type": "text",
      "text": "gratis",
      "format": 1,
      "style": "",
      "$": { "textColor": "cian-de-seccion" },
      "textColorValue": "#0891B2"
    }
  ]
}

Dos claves, y conviene no confundirlas:

Clave	Qué es	Qué hace el storefront
`$.textColor`	El nombre corto del color, que es lo que está guardado en la base	Nada. Sirve para depurar y para saber qué color se eligió
`textColorValue`	El valor ya resuelto, que el CMS agrega al servir	Esto es lo que se aplica

El nombre puede venir sin valor al lado. Pasa cuando el color fue borrado o apagado en el panel. No es un error: el texto se dibuja con el color heredado, como si nunca hubiera tenido uno. No hay que inventar un color ni deducirlo del nombre.

Por qué el valor llega resuelto y no guardado¶

El contenido guarda el nombre del color, nunca su código. El código se resuelve cuando se sirve la respuesta. Gracias a eso, corregir un color en el panel se refleja en todas las páginas que lo usan, sin editarlas una por una.

La consecuencia para el storefront es que el valor no se puede guardar aparte ni derivar a un token propio: es un dato de la respuesta y cambia cuando cambia la paleta. Leerlo de la respuesta cada vez es lo correcto.

Conviene revisar el valor antes de inyectarlo¶

El CMS valida que sea un hexadecimal al guardarlo, así que en condiciones normales siempre lo es. Aun así, aplicar directo a style un texto que viene de la API es la clase de cosa que conviene acotar:

const esColor = (v) => typeof v === 'string' && /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(v)

Si no pasa, se ignora y el texto va sin color.

Antes de esto hay algo más urgente¶

Relevado el 2026-09-22, y conviene resolverlo antes de agregar el color, o el resultado va a seguir viéndose mal:

Hay dos renderizadores de contenido y el que corre no es el que parece. src/modules/common/components/RichText/index.tsx interpreta bien las marcas de formato, pero nadie lo importa. El que se usa es el que está definido dentro de src/app/[countryCode]/(main)/[slug]/page.tsx.
Ese ignora la alineación del párrafo y la sangría. Un título guardado con alineación center se ve a la izquierda. La configuración está bien guardada; no se lee.
Las columnas a la mitad se caen. El ancho se traduce bien a clases, pero el contenedor es una fila flexible con separación entre columnas: dos mitades más la separación pasan del 100%.

Son tres arreglos del storefront y merecen historia propia. El color por sí solo se va a ver, pero el resto del formato va a seguir sin respetarse.

Caché¶

Un cambio de color tarda hasta un minuto en verse, porque las lecturas del storefront a Payload revalidan por tiempo y nadie avisa cuando se publica. No es propio del color: es un hueco general entre los dos sistemas, relevado en Invalidación de la caché del storefront, y tiene historia aparte.

Qué no hay que hacer¶

No leer la colección de colores. No hace falta y además no es de lectura pública.
No guardar el hexadecimal en el storefront ni mapearlo a un token propio: deja de seguir a la paleta y vuelve el problema que este modelo evita.
No deducir el color del nombre. cian-de-seccion es una clave, no una descripción, y puede cambiar de valor sin cambiar de nombre.
No escribir nada de vuelta. Si el storefront alguna vez guardara contenido leído de la API, el CMS saca textColorValue antes de guardar; igual, no es su trabajo.