Open Props: Tokens de diseño

Open Props es una librería muy interesante que incorpora una serie de variables CSS a modo de tokens de diseño o clases de utilidad, pero utilizando dichas variables CSS, que son mucho menos intrusivas y reutilizables en nuestro código CSS.

Muchos desarrolladores utilizan librerías como Tailwind simplemente por el hecho de buscar una serie de tokens de diseño que faciliten y reduzcan la cantidad de opciones de colores, tamaños, etc. Open Props es una librería que se centra en proporcionar justo eso, sólo que mediante variables CSS.

Instalación

La instalación de la librería es muy sencilla. Simplemente, tenemos que instalar el paquete open-props mediante NPM:

$ npm install -D open-props

Una vez hecho, es recomendable instalar esta extensión para VSCode: CSS Variable Autocomplete. Con ella instalada, podemos añadir en F1 / Open User Settings (JSON) la siguiente configuración para que autocomplete nuestras variables de OpenProps:

{
  ...,
  "cssVariables.lookupFiles": [
    "**/*.css",
    "node_modules/open-props/open-props.min.css"
  ],
  ...
}

Esto indica al sistema que busque el paquete previamente instalado de Open Props y nos autocomplete con las variables correspondientes en el editor.

Uso de Open Props

Utilizar Open Props es muy sencillo, pero hay múltiples formas de utilizarlo para adaptarnos a cualquier tipo de caso de uso. Las formas más básicas y sencillas son las siguientes:

@import "open-props/open-props.min.css";

.item {
  --size: 200px;

  width: var(--size);
  height: var(--size);
  background:
    var(--noise-3),
    var(--indigo-10);
  background-size: 75px;
  background-blend-mode: overlay;
}

import "open-props/open-props.min.css";

import OpenProps from "open-props";

const { noise3, indigo10 } = OpenProps;

console.log(indigo10);    // "#2f44ad"
console.log(noise3);      // "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 1024...)"

@import "https://unpkg.com/open-props";

Colores

Open Props utiliza un esquema nombres y números bien repartidos entre todas las posibilidades para establecer los tokens de diseño de la librería. De esta forma, tenemos más coherencia y no hay que elegir entre valores demasiado arbitrarios.

Por ejemplo, respecto a los colores, Open Props usa un esquema llamado Open Color y Colar, optimizado para el desarrollo de interfaces de usuario.

Para utilizar colores con dicho esquema es tan fácil como escribir la variable CSS --color-{0-12}, donde color es la gama de color deseada y {0-12} es un número de 0 a 12, siendo 0 el más cercano a blanco y 12 el más cercano al tono de color en cuestión.

De esta misma forma, tenemos tokens de diseño para muchos otros conceptos: animaciones, relaciones de aspecto, bordes, colores, duraciones, ritmos, tipografías, gradientes, ruidos, media queries, sombras, etc...

@import "https://unpkg.com/open-props";

.container {
  display: grid;
  gap: var(--size-4);
  background: var(--indigo-6);
  border-radius: var(--radius-2);
  font-family: var(--font-mono);
}

Por aquí tienes una lista actualizada de los tokens disponibles, en la web de Open Props.

Elimina los tokens que no uses

Si estás usando PostCSS o Vite (que usa PostCSS por dentro), puedes utilizar el plugin postcss-jit-props que se encargará de que en tu versión definitiva la web para desplegar sólo se encuentren los tokens de diseño necesarios, y no todos los que existen en la librería.

Lo único que tienes que hacer es eliminar la importación de Open Props en el .css y en su lugar, configurar o crear un fichero postcss.config.js y escribir lo siguiente:

import postcssJitProps from "postcss-jit-props";
import { dirname, resolve } from "node:path";
import { fileURLToPath } from "node:url";

const __dirname = dirname(fileURLToPath(import.meta.url));

export default {
  plugins: [
    postcssJitProps({
      files: [
        resolve(__dirname, "node_modules/open-props/open-props.min.css"),
      ]
    }),
  ]
}

Esto se encargará de importar sólo los tokens de diseño utilizados en tu código, reduciendo en gran medida el tamaño del .css y no necesitando importar la librería Open Props. Es importante que no tengas la importación hecha de forma manual, ya que postcss-jit-props ya lo hace por nosotros, y de tenerla, se añadirían todos los tokens.

Importación selectiva

Si prefieres gestionar la importación de los tokens de una forma más manual y controlada, puede que prefieras realizar una importación específica en lugar de importar toda la librería de golpe.

Para ello, simplemente importamos de la siguiente forma:

<div class="item"></div>

<style>
@import "https://unpkg.com/open-props/src/props.indigo.css";
@import "https://unpkg.com/open-props/src/props.gradients.css";

.item {
  width: 200px;
  height: 200px;
  background:
    var(--noise-3),
    var(--indigo-10);
  background-size: 75px;
  background-blend-mode: overlay;
}
</style>

En este caso, si observas, hemos importado los archivos específicos /src/props.indigo.css y /src/props.gradients.css. Estos dos archivos son los que tienen las variables CSS de los colores de la gama indigo y los gradientes donde se incluyen las texturas de ruidos noise.

Aunque lo hemos hecho sobre un CDN, podemos usarlo igualmente desde NPM, omitiendo el dominio y comenzando en open-props.

Como puedes ver, de forma sencilla, tenemos múltiples tokens de diseño que nos sirven para nuestro día a día, sin necesidad de utilizar librerías más grandes y pesadas o que carecen de algunos tokens interesantes como los que incluye Open Props.