Dar estilo a tu tienda
Cada decisión visual es una custom property en la raíz del propio componente, y su valor por defecto lee uno de los trece tokens de tienda. Cambiar el aspecto de una tienda es una edición, no catorce.
/* Así está declarada cada perilla */
--fe-woo-reviews-accent: var(--fe-woo-accent, #111827);
Una tienda que no define nada ve exactamente lo de siempre — el hex está ahí, de respaldo. Una tienda que define el token una vez cambia todos los componentes.
Apúntalos a tu propio sistema de diseño
Los campos aceptan cualquier valor CSS, no sólo un hex. Lo que quieres de una
tienda que ya tiene su sistema de diseño no es #0f766e, es
var(--tu-color-primario).
Esa captura es la tienda de demostración: sus tokens leen var(--primary),
var(--base-ultra-dark) y el resto de variables de su framework, así que cambiar
la marca del sitio cambia la tienda con él.
Dejar un campo vacío quiere decir «esto no lo decido yo», así que la variable no se escribe y sigue valiendo el valor que trae el plugin. No significa transparente, y no significa blanco.
Los trece
| Token | Qué pinta |
|---|---|
--fe-woo-accent | El fondo de los botones que hacen algo, y de lo que esté seleccionado |
--fe-woo-accent-color | El texto sobre ese acento |
--fe-woo-accent-hover | Opcional. El acento con el ratón encima. Vacío = se calcula del acento |
--fe-woo-accent-color-hover | Opcional. El texto sobre ese hover. Vacío = el color de texto de arriba |
--fe-woo-surface | El fondo de las tarjetas: el carrito, el resumen del pedido, una reseña |
--fe-woo-panel | El fondo más callado: totales, cabeceras de tabla, campos |
--fe-woo-border | Todas las líneas |
--fe-woo-color | El texto principal |
--fe-woo-muted | Etiquetas, recuentos, la letra pequeña |
--fe-woo-focus-ring | El anillo alrededor de lo que tiene el foco del teclado |
--fe-woo-success | En stock, pedido hecho, cupón aplicado |
--fe-woo-warning | Quedan pocos, un pedido en espera |
--fe-woo-danger | Agotado, un pago fallido, un campo que corregir |
Más la forma y la escala tipográfica: --fe-woo-radius y
--fe-woo-control-radius, --fe-woo-button-weight, y --fe-woo-text-xs …
--fe-woo-text-2xl.
Y dos para los iconos que van juntos en una cabecera —el carrito, el buscador y
la wishlist—: --fe-woo-icon-size (1.5rem) y --fe-woo-icon-stroke (2, el
grosor de su línea). Cambiando uno una vez cambian los tres; cada componente
conserva su propia perilla por si uno tiene que ser distinto.
Las superficies —una tarjeta, un panel, una nota— leen --fe-woo-radius. Los
controles —un campo, un botón, una pastilla— leen --fe-woo-control-radius. Con
--fe-woo-control-radius: 999px, una superficie que leyera el radio del control
se convertiría en un óvalo.
Los tres estados traen su propio fondo
El fondo pálido que va detrás de un acierto o de un error no es un campo: se calcula del color que elijas, mezclado al 10% con tu superficie. Pedir seis colores para decir tres cosas es pedirle a alguien que acierte una pareja tres veces — y la que falla no se ve hasta que aparece un aviso en una tienda de verdad.
Lo que no los sigue, a propósito
Un precio rebajado y las estrellas de una valoración siguen rojo y ámbar por su cuenta. Son convenciones, no estados: atarlos a los tokens significaría que cambiar «Error» repinta tus rebajas.
Las perillas que comparte cada componente
La clase raíz de cada componente declara las mismas dieciséis propiedades, y cada una lee el token de arriba. Significan lo mismo en todas partes, así que se escriben una vez aquí en vez de repetirse en cada componente.
Cambia <componente> por el prefijo del componente — atc, mc, cart,
gallery, filters, checkout, account, reviews, search, price,
rating, var, crumb, catalog, count, stock:
| Perilla | Lee | Qué controla |
|---|---|---|
--fe-woo-<componente>-accent | --fe-woo-accent | Sus botones y lo que esté elegido |
--fe-woo-<componente>-accent-color | --fe-woo-accent-color | El texto sobre ese acento |
--fe-woo-<componente>-accent-hover | --fe-woo-accent-hover | El acento al pasar el ratón |
--fe-woo-<componente>-accent-color-hover | --fe-woo-accent-color-hover | El texto sobre ese hover |
--fe-woo-<componente>-accent-soft | se calcula | El acento al 12%, para el tinte de algo elegido |
--fe-woo-<componente>-surface | --fe-woo-surface | Sus tarjetas |
--fe-woo-<componente>-panel | --fe-woo-panel | Sus fondos secundarios |
--fe-woo-<componente>-border | --fe-woo-border | Sus líneas |
--fe-woo-<componente>-color | --fe-woo-color | Su texto |
--fe-woo-<componente>-muted | --fe-woo-muted | Sus etiquetas y su letra pequeña |
--fe-woo-<componente>-radius | --fe-woo-radius | Las esquinas de sus superficies |
--fe-woo-<componente>-control-radius | --fe-woo-control-radius | Las de sus campos y botones |
--fe-woo-<componente>-control-size | --fe-woo-control-size | La altura de esos campos y botones |
--fe-woo-<componente>-button-weight | --fe-woo-button-weight | El grosor del texto de sus botones |
--fe-woo-<componente>-focus-ring | --fe-woo-focus-ring | Su anillo de foco |
--fe-woo-<componente>-gap | — | La separación entre sus propias piezas |
Pon una de estas y has retematizado ese componente solo; pon el token que lee y has retematizado la tienda. Ninguna de las dos cosas necesita un selector anidado.
Los radios y las casillas
Donde un componente dibuje uno —un método de pago, una opción de envío, un
filtro— es el mismo control, así que lee un juego compartido en vez de seis que
se parecen: --fe-woo-choice-bg, -border, -accent, -accent-color,
-radius y -focus-ring. Cada una toma por defecto el valor del componente que
la rodea, así que le siguen sin tocarlas.
Los desplegables
Lo mismo, y por lo mismo: el de ordenar y el selector de variación son un solo control, y repartidos en dos hojas acabaron viéndose distintos — uno con la flecha del navegador y otro con la nuestra.
La flecha se dibuja en vez de usar la nativa porque la nativa va pegada al borde: con un radio de píldora queda dentro de la curva, a cuatro píxeles del filo, y no hay forma de moverla.
| Perilla | Por defecto | Qué controla |
|---|---|---|
--fe-woo-select-arrow | un chevron gris | El glifo entero, como background-image |
--fe-woo-select-arrow-size | 0.7rem | Cuánto mide — el hueco que se le reserva sale de ahí |
--fe-woo-select-arrow-inset | 0.75rem | A qué distancia del borde va |
--fe-woo-select-padding | 0.75rem | El espacio del otro lado del texto |
Se voltea sola en [dir='rtl'], y le devuelve la flecha al sistema en el alto contraste de Windows, donde las
imágenes de fondo se descartan.
La comprobación de contraste
La pestaña Design mide diez parejas y dice qué campo tocar cuando una no llega.
Lo mide en tu propia tienda, en un iframe del frente — porque la mayoría de
las tiendas escribe var(--su-color), y esa variable no existe en wp-admin.
Guarda, y el informe vuelve a medir.
Un selector no sabe decir var(--tu-color) ni color-mix(...). La muestra de al
lado de cada campo es una comodidad para elegir un hex; lo que se guarda es el
campo de texto que tiene al lado.