Quiet patterns

Retículas de puntos y líneas en el color del texto al 5%: textura que nunca compite con el contenido.

Open your store today

Twelve products and a domain, ready in an afternoon.

Instalación

$ pnpm dlx shadcn@latest add @ssntl/pattern

Uso

css

/* app/globals.css */
@import "../styles/ssntl/pattern.css";

<section class="bg-dots">…</section>
<section class="bg-grid">…</section>

Reglas

Lo que este componente espera de ti, tal como se instala en styles/ssntl/pattern.md junto al código. El archivo completo agrega cuándo usarlo, teclado, los fundamentos de UI que aplica y cada regla compartida (en inglés).

styles/ssntl/pattern.md

## Reglas de Quiet patterns

- **Fondos tranquilos.** Los patrones se dibujan en el color del texto al 5%, así se adaptan a claro y oscuro.
- Mantén cualquier textura bajo 6%; si se nota mientras lees, es demasiado fuerte.
- Usa un patrón detrás de un titular o un estado vacío, nunca detrás de texto de lectura o datos.

Abrir el archivo de reglas completo

Código

styles/ssntl/pattern.css

/* Quiet backgrounds: a texture you feel more than see. Both patterns draw
   in the current text color at 5%, so they adapt to light and dark and
   never compete with the content on top. Keep them under 6%.

     bg-dots     a 16px dot grid
     bg-grid     a 32px line grid */

@utility bg-dots {
  background-image: radial-gradient(
    color-mix(in oklab, currentColor 5%, transparent) 1px,
    transparent 1px
  );
  background-size: calc(var(--spacing) * 4) calc(var(--spacing) * 4);
}

@utility bg-grid {
  --_line: color-mix(in oklab, currentColor 5%, transparent);
  background-image:
    linear-gradient(var(--_line) 1px, transparent 1px),
    linear-gradient(90deg, var(--_line) 1px, transparent 1px);
  background-size: calc(var(--spacing) * 8) calc(var(--spacing) * 8);
}