Plano

blueprint es un dibujo técnico: líneas finas sobre una hoja casi negra, esquinas rectas y una marca de registro —una pequeña cruz— en cada esquina de una tarjeta, de un diálogo y de una fila de estadísticas. Todo lo que nombra o acciona algo —un botón, la etiqueta de un campo, una pestaña, una etiqueta, un encabezado de columna, un enlace de la barra— va en una fuente monoespaciada, en mayúsculas espaciadas, mientras que los títulos y el texto corrido siguen en una grotesca, compuesta apretada. Una línea continua es un borde y una discontinua divide lo que hay dentro, como un plano marca una arista oculta: las filas de una tabla, un separador, el tramo hasta un paso que aún no ha llegado. Se ciñe a pocos colores. El botón sólido, una casilla marcada, una barra llena y todo lo elegido son tinta, impresa en negativo; un único azul de plano marca el foco y la etiqueta sobre un título; éxito, aviso y peligro conservan los suyos para lo que dicen. Nada proyecta sombra. El modo oscuro es el aspecto original; el modo claro conserva cada línea y cada marca y lo imprime en tinta sobre papel blanco.

Cómo usarlo

import { iconSet, styles } from 'sitelo/ui'

iconSet('square')

head(
  title('Mi sitio'),
  styles({ preset: 'blueprint' }),
)
// <link rel="stylesheet" href="/su/ui-c9428b65.css">
// <link rel="stylesheet" href="/su/blueprint-4d1f8a20.css">

iconSet('square') dibuja los iconos a juego —líneas finas y rectas con extremos cuadrados y esquinas vivas, como en la vista previa de arriba—, también los que los componentes dibujan por su cuenta. Llámalo una vez, desde un módulo que importen tus páginas.

Pinta la página con var(--su-bp-backdrop) para tener el fondo del preset con una cuadrícula tenue trazada encima, o con un simple var(--su-bg). El preset usa Geist o Inter, y Geist Mono, JetBrains Mono o IBM Plex Mono, si la página las carga y, si no, las fuentes del propio sistema; no descarga nada.

body {
  background: var(--su-bp-backdrop);
  color: var(--su-text);
  font-family: var(--su-font-sans);
}

Tus propios colores

theme() sigue funcionando por encima, así que un preset es un punto de partida y no un fork. La paleta primaria es la tinta —el botón sólido, una casilla marcada, una barra llena, todo lo elegido—, así que primary lo recolorea todo de una vez. El resto son tokens propios del preset: --su-bp-accent, el azul con que se dibujan el foco y la marca de un título; --su-bp-mark, las marcas de registro, que transparent hace desaparecer; --su-bp-field, la línea que rodea un campo; --su-bp-track, el carril por el que corre una barra de progreso; --su-bp-grid y --su-bp-cell, las líneas del fondo y el tamaño de sus cuadros; y --su-bp-tracking, el espaciado entre las mayúsculas de una etiqueta. Aquí el azul pasa a un naranja de señalización, y las marcas con él.

head(
  styles({ preset: 'blueprint' }),
  theme(
    { bpAccent: '#c2410c', bpMark: '#c2410c' },
    { dark: { bpAccent: '#ff7a3d', bpMark: '#ff7a3d' } },
  ),
)