Utilidades CSS

Paquete: @tiendana/web-foundation

Clases de utilidad de propósito único para estilado rápido y consistente. Todas usan variables CSS del sistema de diseño.

Características

✅ Naming consistente - Prefijos predecibles (.m-*, .p-*, .text-*, .bg-*)
✅ Basadas en tokens - Usan variables CSS y cambian con el modo oscuro
✅ BEM en layout - .flex--*, .grid--* y .ellipsis--* como modificadores
✅ Spacing - Margin y padding con la escala xs a 3xl
✅ Layout - Flex, grid, display, position y overflow
✅ Animaciones - Keyframes con clases animate-*

Qué no incluye

No hay clases de tamaño de fuente (.text-sm, .text-xl...), de gap sueltas (.gap-md), .hidden, .overflow-x-auto, .rounded-circle ni .border-thin. Para esos casos usa las variables CSS (font-size: var(--font-size-sm)) o las clases .h1 a .h6 y .text-small.

Spacing

La escala es xs (4px), sm (8px), md (16px), lg (24px), xl (32px), 2xl (48px) y 3xl (64px).

Margin

<div class="m-md">Margin 16px</div>
<div class="mt-md mb-sm">Margin top 16px, bottom 8px</div>
<div class="mx-lg">Margin horizontal 24px</div>
<div class="my-sm">Margin vertical 8px</div>
<div class="mx-auto">Centrado horizontalmente</div>

Clases: m-{size}, mt-{size}, mr-{size}, mb-{size}, ml-{size}, mx-{size}, my-{size}, más m-auto, mx-auto y my-auto.

Padding

<div class="p-md">Padding 16px</div>
<div class="pt-lg pb-sm">Padding top 24px, bottom 8px</div>
<div class="px-lg py-md">Padding horizontal 24px, vertical 16px</div>

Clases: p-{size}, pt-{size}, pr-{size}, pb-{size}, pl-{size}, px-{size}, py-{size}.

Texto

Alineación y transformación

<p class="text-left">Izquierda</p>
<p class="text-center">Centrado</p>
<p class="text-right">Derecha</p>
<p class="text-justify">Justificado</p>
<p class="text-uppercase">mayúsculas</p>
<p class="text-lowercase">MINÚSCULAS</p>
<p class="text-capitalize">cada palabra</p>

Tamaño

No hay clases de tamaño. Usa los encabezados semánticos o sus clases, .text-small o la variable:

<p class="h5">Con el estilo de h5 (13px)</p>
<small>Texto pequeño (13px)</small>
<p class="text-small">Texto pequeño (13px)</p>

Peso, altura de línea y espaciado de letras

<p class="font-light">Peso 300</p>
<p class="font-normal">Peso 400</p>
<p class="font-medium">Peso 500</p>
<p class="font-semibold">Peso 600</p>
<p class="font-bold">Peso 700</p>
<p class="font-extrabold">Peso 800</p>

<p class="leading-tight">line-height 1</p>
<p class="leading-base">line-height 1.1</p>
<p class="leading-relaxed">line-height 1.3</p>
<p class="leading-loose">line-height 1.5</p>

<p class="tracking-tight">letter-spacing -0.025em</p>
<p class="tracking-normal">letter-spacing 0</p>
<p class="tracking-wide">letter-spacing 0.025em</p>
<p class="tracking-wider">letter-spacing 0.05em</p>

Estilo y decoración

.italic, .not-italic, .underline, .line-through y .no-underline.

Color de texto

<p class="text-primary">Texto principal</p>
<p class="text-secondary">Texto secundario</p>
<p class="text-disabled">Deshabilitado</p>
<p class="text-hint">Pista</p>
<p class="text-white">Blanco</p>
<p class="text-forrest">Forrest</p>
<p class="text-natura">Natura</p>
<p class="text-success">Éxito</p>
<p class="text-warning">Advertencia</p>
<p class="text-error">Error</p>
<p class="text-info">Información</p>

Disponibles: text-primary, text-secondary, text-disabled, text-hint, text-white, text-success, text-warning, text-error, text-info, text-forrest, text-natura, text-green-neon, text-lavender, text-sun y text-sky. No existen text-gray-*.

text-success usa Natura

A diferencia de bg-success (Green Neon), .text-success pinta con --color-natura para mantener contraste sobre fondos claros. Combinada con mat-icon o .material-symbols-rounded también fija fill.

Overflow, saltos y espacios

<p class="ellipsis">Una línea con puntos suspensivos</p>
<p class="ellipsis--2">Hasta dos líneas y luego puntos suspensivos</p>
<p class="truncate">Equivale a .ellipsis</p>
<p class="break-words">Rompe palabras largas</p>
<p class="whitespace-nowrap">Sin saltos de línea</p>
<span class="clickable">cursor: pointer</span>

Clases: ellipsis y ellipsis--2 a ellipsis--5, truncate, break-normal, break-words, break-all, break-keep, whitespace-normal, whitespace-nowrap, whitespace-pre, whitespace-pre-line, whitespace-pre-wrap y clickable.

Display

<div class="d-block">Display block</div>
<div class="d-flex">Display flex</div>
<div class="d-grid">Display grid</div>
<div class="d-none">Display none (sin espacio)</div>

<div class="visible">Visible</div>
<div class="invisible">Invisible (conserva el espacio)</div>

Clases: d-none, d-block, d-inline, d-inline-block, d-flex, d-inline-flex, d-grid, d-inline-grid, visible e invisible. Para ocultar sin espacio usa d-none; .hidden no existe.

Layout (Flex)

.flex aplica display: flex y los modificadores --* ajustan el contenedor. .flex-item--* va en los hijos.

<div class="flex flex--column flex--gap-md">Columna con gap 16px</div>
<div class="flex flex--wrap flex--justify-between flex--align-center">Wrap, space-between y centrado vertical</div>
<div class="flex flex--between-center">Atajo: space-between + center</div>

<div class="flex">
  <div class="flex-item--1">Ocupa el espacio sobrante</div>
  <div class="flex-item--none">Tamaño fijo</div>
</div>

Grupo	Modificadores
Dirección	`--row`, `--row-reverse`, `--column`, `--column-reverse`
Wrap	`--wrap`, `--nowrap`, `--wrap-reverse`
Justify	`--justify-start`, `--justify-end`, `--justify-center`, `--justify-between`, `--justify-around`, `--justify-evenly`
Align items	`--align-start`, `--align-end`, `--align-center`, `--align-baseline`, `--align-stretch`
Align content	`--content-start`, `--content-end`, `--content-center`, `--content-between`, `--content-around`, `--content-stretch`
Gap	`--gap-xs`, `--gap-sm`, `--gap-md`, `--gap-lg`, `--gap-xl`, `--gap-2xl`, `--gap-3xl`
Atajos	`--center`, `--start-center`, `--between-center`, `--around-center`, `--end-center`

Hijos (.flex-item): --1, --auto, --initial, --none, --grow, --shrink, --no-grow, --no-shrink, --align-start, --align-end, --align-center, --align-baseline, --align-stretch, --order-first y --order-last.

Layout (Grid)

<div class="grid grid--cols-3 grid--gap-md">Grid de 3 columnas con gap 16px</div>
<div class="grid grid--auto-fit grid--gap-lg">Columnas de mínimo 250px que se ajustan al ancho</div>

<div class="grid grid--cols-12">
  <div class="grid-item--span-6">Mitad de la fila</div>
  <div class="grid-item--span-6">Mitad de la fila</div>
  <div class="grid-item--span-full">Ocupa toda la fila</div>
</div>

Grupo	Modificadores de `.grid`
Columnas	`--cols-1` a `--cols-6` y `--cols-12`
Autoajuste	`--auto-fit` y `--auto-fill` (`minmax(250px, 1fr)`)
Filas	`--rows-1` a `--rows-4`
Gap	`--gap-xs` a `--gap-3xl`
Alineación	`--justify-start/end/center/stretch`, `--align-start/end/center/stretch`, `--content-start/end/center/between/around/evenly`
Atajo	`--center`

Hijos (.grid-item): --span-1 a --span-6, --span-12, --span-full, --row-span-1 a --row-span-4, --justify-* y --align-*.

Spans disponibles

Solo existen span-1 a span-6, span-12 y span-full. No hay span-7 a span-11.

Colores de fondo

<div class="bg-forrest text-white">Fondo Forrest</div>
<div class="bg-gray-100">Fondo gris claro</div>
<div class="bg-success">Fondo success</div>

Disponibles:

Semánticos de superficie: bg-primary, bg-secondary, bg-tertiary, bg-transparent
Marca: bg-forrest, bg-dark-forrest, bg-light-forrest, bg-natura, bg-trust, bg-green-neon
Secundarios: bg-lavender, bg-sun, bg-sky
Estado: bg-success, bg-warning, bg-error, bg-info
Neutros: bg-white, bg-black, bg-gray-100 a bg-gray-600

Bordes

<div class="border rounded-md">Borde 1px y radio 4px</div>
<div class="border-b border-secondary">Solo borde inferior, color secundario</div>
<div class="border border-focus rounded-lg">Borde de foco</div>
<div class="rounded-full">Radio de píldora</div>

Borde: border, border-t, border-r, border-b, border-l, border-0. El color por defecto es --color-border-primary. Color: border-primary, border-secondary, border-focus y border-transparent.

Radio: rounded-sm (2px), rounded-md (4px), rounded-chip (6px), rounded-lg (8px), rounded-xl (16px), rounded-full, y los de esquinas rounded-t-md, rounded-r-md, rounded-b-md y rounded-l-md. Para 2xl, button o circle usa var(--border-radius-*).

Sombras

<div class="shadow-sm">Sombra pequeña</div>
<div class="shadow-md">Sombra media</div>
<div class="shadow-lg">Sombra grande</div>
<div class="shadow-none">Sin sombra</div>

Clases: shadow-sm, shadow-md, shadow-lg, shadow-xl, shadow-2xl y shadow-none. Recuerda que el sistema reserva las sombras para overlays: ver Sombras.

Position y Overflow

<div class="position-relative">
  <div class="position-absolute">Absoluto</div>
</div>
<div class="overflow-auto">Overflow auto</div>

Position: position-static, position-relative, position-absolute, position-fixed, position-sticky. Overflow: overflow-auto, overflow-hidden, overflow-visible, overflow-scroll.

Animaciones

Los keyframes y las clases animate-* viven en utilities/animations. Cada clase aplica la animación indicada; las de entrada se ejecutan una vez y las marcadas como infinitas se repiten.

Clase	Keyframe	Duración y repetición
`.animate-opacity`	`opac` (aparece de transparente a opaco)	0.8s
`.animate-spin`	`spin` (giro horario)	1s, lineal, infinita
`.animate-spin-alternate`	`spin-alternate` (giro antihorario en el primer 20% del ciclo y pausa hasta el siguiente)	1s, lineal, infinita
`.animate-fading`	`fading` (aparece y desaparece)	2s, infinita
`.animate-from-bottom`	`from-bottom`	0.3s
`.animate-from-top`	`from-top`	0.3s
`.animate-from-left`	`from-left`	0.3s
`.animate-from-right`	`from-right`	0.3s
`.animate-zoom`	`zoom` (de escala 0 a 1)	0.3s
`.animate-product-setting`	`product-setting` (sube 20px con fade)	0.3s
`.animate-pulse-dot`	`pulse-dot`	2s, infinita
`.animate-wave-gradient`	`waveGradientSuperSmooth`	8s, lineal, infinita

<span class="material-symbols-rounded animate-spin">progress_activity</span>
<div class="animate-from-bottom">Entra desde abajo</div>
<span class="animate-pulse-dot" style="--pulse-dot-color: var(--color-natura)"></span>

Notas:

Las clases animate-from-* animan top, bottom, left o right, así que el elemento necesita position distinto de static para que el desplazamiento se vea.
pulse-dot lee la variable --pulse-dot-color, que no está definida por defecto: declárala en el elemento.
Los keyframes (opac, spin, spin-alternate, fading, from-bottom, from-top, from-left, from-right, zoom, product-setting, pulse-dot, waveGradientSuperSmooth) se pueden usar en tus propias reglas con animation: spin 1s linear infinite.
El reset reduce las animaciones a 0.01ms cuando el usuario pide movimiento reducido. Ver CSS Overview.
También se define lottie-player { display: block; } para el reproductor de Lottie.

Ejemplo Combinado

<div class="p-lg bg-forrest text-white rounded-lg">
  <h2 class="mb-md">Título</h2>
  <p class="mb-sm">Párrafo con utilidades combinadas</p>
  <div class="flex flex--gap-sm flex--justify-end">
    <button class="bttn bttn--secondary">Cancelar</button>
    <button class="bttn bttn--primary">Confirmar</button>
  </div>
</div>

Ver También

Foundations - Spacing - Tokens de espaciado
Foundations - Typography - Sistema tipográfico
Foundations - Colors - Paleta de colores
CSS Overview - Visión general del sistema

Características​

Spacing​

Margin​

Padding​

Texto​

Alineación y transformación​

Tamaño​

Peso, altura de línea y espaciado de letras​

Estilo y decoración​

Color de texto​

Overflow, saltos y espacios​

Display​

Layout (Flex)​

Layout (Grid)​

Colores de fondo​

Bordes​

Sombras​

Position y Overflow​

Animaciones​

Ejemplo Combinado​

Ver También​