Colourways
Paquete: @tiendana/utils/logomark
Un colourway es el par de tonos con que se pinta el logomark según el fondo donde vive. El elemento trae cuatro y cada tono es una propiedad CSS que la página puede sobrescribir.
Características
✅ Diez colourways - primary, reverse, neon y mono, y desde 0.7.0 las caras de las submarcas: lavender, sun y sky, cada una con su -reverse
✅ Tonos como propiedades CSS - --logomark-* en el elemento o en cualquier ancestro
✅ Sin web-foundation - El elemento lleva los valores de marca, así que funciona en páginas sin tokens
✅ Mixin SCSS - Dentro de nuestras apps, colourways.scss fija las mismas propiedades desde los tokens
Valores del atributo
<tdn-logomark colourway="primary"></tdn-logomark>
<tdn-logomark colourway="reverse"></tdn-logomark>
<tdn-logomark colourway="neon"></tdn-logomark>
<tdn-logomark colourway="mono"></tdn-logomark>
<tdn-logomark colourway="lavender"></tdn-logomark>
<tdn-logomark colourway="sky-reverse"></tdn-logomark>
| Colourway | Cuerpo (la d) | Cara | Para qué fondo |
|---|---|---|---|
primary (por defecto) | forrest | natura | Fondos blancos y claros (p5, p17) |
reverse | blanco | natura | Fondos forrest y oscuros (p4, el tile de app de p17) |
neon | blanco | verde neón | Fotos y redes sociales (p5, p31) |
mono | forrest | forrest | Impresión a un solo color |
lavender, sun, sky | forrest | lavender, sun, sky | Fondos blancos y claros: las submarcas de p14 (beauty, gastro, agro). Desde 0.7.0 |
lavender-reverse, sun-reverse, sky-reverse | blanco | lavender, sun, sky | Fondos forrest y oscuros, como la columna oscura de p14. Desde 0.7.0 |
En todos los colourways salvo mono, la sonrisa y la X de ERROR se pintan con el rojo de error del sistema (--logomark-error), y solo mientras la X está visible. En mono ERROR se queda en forrest: un solo tono es el objetivo de ese colourway.
Las reglas de marca sobre qué colourway elegir en cada soporte están en Logomark en Fundamentos.
Propiedades CSS
Cada tono es una propiedad personalizada que la página puede fijar en el elemento o en cualquier ancestro:
| Propiedad | Qué pinta |
|---|---|
--logomark-face | La sonrisa y los ojos |
--logomark-body | La d |
--logomark-track | La marca sin dibujar (el trazo de fondo del clip draw) |
--logomark-error | La sonrisa y la X de ERROR; sin ella, el tono de la cara |
--logomark-keyline | El contorno troquelado de un sticker |
--logomark-sun | Opcional. El oro y el naranja de los disfraces: la calabaza de halloween, el dorado de christmas y el signo de precaución de warning |
--logomark-sun-light | Opcional. El disco de la esfera de christmas; sin él, el tono de la marca sin dibujar (--logomark-track) |
Lo que la página deje sin fijar sale del colourway.
Tonos opcionales: sun y sunLight
Desde 0.6.0 los tonos sun y sunLight son opcionales en LogomarkTones. Todos los colourways los definen igual salvo mono, que no define ninguno, y sun y sun-reverse, que no definen sun: su cara ya es sol, así que los ojos de la calabaza se perderían en su disco y el parpadeo de warning no se vería. Sin él, warning parpadea en el rojo de error y la calabaza queda en sus triángulos y su hoja.
| Tono | Valor | Token del mixin |
|---|---|---|
sun | #FF7834 | --color-sun |
sunLight | #FFDECC | --color-light-sun |
Qué pinta cada uno:
sun: el disco de la calabaza dehalloween, el signo de precaución dewarning(el "!" va en el tono del cuerpo) y, mientraswarningpulsa, la cara (sonrisa y ojos). Enchristmas, el zigzag dorado de la esfera, su casquillo y su gancho, las campanas y los destellos dorados; enbirthday, los destellos dorados y parte del confeti.sunLight: el disco de la esfera dechristmas, de modo que el rojo sea una banda y no toda la cara.
Sin sun, el signo de warning se pinta con el tono de error o, si tampoco hay, con el del cuerpo, y la cara parpadea en el tono de error o, sin él, no cambia; en la calabaza, sin sun se omiten el disco y sus costillas y queda la hoja con los triángulos de los ojos. Sin sunLight, la esfera usa el tono de --logomark-track. Por eso en mono, donde un solo tono es el objetivo, la calabaza queda reducida a sus triángulos y su hoja. El elemento lleva los valores de marca por sí mismo, porque las páginas sin web-foundation no tienen tokens.
.hero tdn-logomark {
--logomark-face: var(--color-natura);
--logomark-body: var(--color-forrest);
}
Tras un cambio de tema que solo cambia estas propiedades, llama a refresh() en el elemento para que las relea. Cambiar el atributo colourway ya lo hace por sí solo.
Mixin SCSS
Dentro de nuestras apps, colourways.scss fija las mismas propiedades a partir de los tokens de web-foundation:
@use '@tiendana/utils/logomark/colourways' as logomark;
:host { @include logomark.colourway(primary); }
:host-context(.scheme-dark) { @include logomark.colourway(reverse); }
La firma es colourway($name: primary, $track: null):
| Parámetro | Descripción |
|---|---|
$name | primary, reverse, neon, mono, lavender, lavender-reverse, sun, sun-reverse, sky o sky-reverse; cualquier otro valor es un error de compilación |
$track | Reemplaza el tono de la marca sin dibujar, para un host cuyo fondo no es blanco ni forrest |
.panel-gris tdn-logomark {
@include logomark.colourway(primary, $track: var(--color-gray-200));
}
El mixin solo usa tokens que mantienen su valor en ambos esquemas: los grises se invierten en oscuro y --color-light-forrest se vuelve translúcido allí. El keyline (el contorno de un sticker) es blanco bajo una d forrest y forrest bajo una blanca, nunca el tono de la d.
El mixin escribe var(--color-forrest), var(--color-natura), var(--color-green-neon), var(--color-lavender), var(--color-sky), var(--color-error), var(--color-sun), var(--color-light-sun) y var(--color-white): la página debe cargar @tiendana/web-foundation. Sin él, no uses el mixin y deja que el elemento use sus valores propios.
Tonos para exportar
Desde 0.5.0, la tabla de tonos de cada colourway se exporta como LOGOMARK_COLOURWAYS (un Readonly<Record<LogomarkColourway, LogomarkTones>>): úsala para exportar archivos con los tonos de la marca sin leer la página.
import { clipWebp, LOGOMARK_COLOURWAYS } from '@tiendana/utils/logomark';
const webp = await clipWebp({ name: 'celebrate', fps: 30, size: 512, tones: LOGOMARK_COLOURWAYS.primary, loop: true });
En 0.4.0 es privada: usa readLogomarkTones(el) sobre un elemento cuyas propiedades --logomark-* fije la página (mixin o CSS), o pasa tonos literales.
Ver También
- Elemento - el atributo
colourwayyrefresh() - Exportación - los tonos que reciben los exportadores
- Logomark en Fundamentos - qué colourway usar en cada soporte