@commenteme/tokens

Os tokens de design de commente.me, do kit de marca e interface v3.3.1: cores, paleta de dados, transparências, tipografia, espaço, raios, alturas, tamanhos de ícone, sombras, foco, motion e layout. Em CSS, JSON e TypeScript, com o tema do Tailwind 4 pronto.

npm install @commenteme/tokens

CSS

@import "@commenteme/tokens/tokens.css";

O tokens.css é a cópia exata do kit: as variáveis (--azul, --atencion-fondo, --r-panel, --sombra-modal, --t-base…), as classes de marca (.lockup, .logotipo, .punto) e as de contexto. O layout raiz declara o contexto:

<body class="ctx-sitio">  <!-- commente.me, help, support: Barlow nos títulos, Arial no texto -->
<body class="ctx-admin">  <!-- app.commente.me: fonte do sistema, base 14px, fundo papel gris -->

Tailwind 4

@import "tailwindcss";
@import "@commenteme/tokens/tailwind.css";

O tailwind.css traz o tokens.css na camada base e o tema. As utilitárias apontam para as variáveis do kit; cores, raios e sombras levam o nome do token, como no preset:

| grupo | classes | |---|---| | cores | bg-azul, hover:bg-azul-hover, bg-amarillo, text-texto-suave, border-borde-campo, bg-papel-gris, text-error-texto, bg-error-fondo, bg-error-fondo-suave, border-error-borde-suave, bg-info-fondo, bg-atencion-fondo, border-atencion-borde, text-atencion-icono, bg-seleccion-fondo, bg-velo | | dados | bg-dato-1…bg-dato-6, stroke-dato-principal, stroke-dato-comparacion, bg-dato-meta, text-dato-positivo, text-dato-negativo, fill-dato-relleno, bg-dato-pista | | semânticas | bg-base, text-sobre-base, bg-acento, text-sobre-acento, bg-superficie, bg-superficie-2, text-marca-realce | | fontes | font-display (Barlow), font-texto (Arial), font-ui (sistema), font-mono | | pesos | font-normal, font-medium, font-semibold, font-bold, font-black | | raios | rounded-barra 2, rounded-leyenda 3, rounded-tecla 4, rounded-check 5, rounded-chip 6, rounded-sub 7, rounded-control 8, rounded-md 9, rounded-panel 10, rounded-lg 12, rounded-burbuja 14, rounded-xl 16, rounded-2xl 20, rounded-tile 24, rounded-pill, rounded-circulo | | sombras | shadow-1, shadow-2, shadow-drawer, shadow-modal, shadow-vitrina, shadow-toast, shadow-perilla, shadow-foco, shadow-foco-peligro, shadow-activo-nav, shadow-activo-tab, shadow-activo-sitio | | alturas | h-ctl-xs 28, h-ctl-sm 32, h-filtro 36, h-nav 38, h-ctl 40, h-cuenta 44, h-ctl-lg 48, h-oauth 50, h-campo-sitio 52, h-cta-sitio 56, h-topbar 60 | | ícones | size-ic-check-tabla 10, size-ic-check 12, size-ic-xs 14, size-ic-sm 16, size-ic-aviso 18, size-ic-nav 20, size-ic-vacio 24, size-ic-modulo 32, size-ic-tarjeta 40, size-ic-confirmacion 56 | | larguras | w-sidebar 248, max-w-sitio, max-w-admin, max-w-modal, max-w-drawer, max-w-paleta | | motion | duration-rapido 120, duration-base 200, duration-panel 280, duration-grafico 600, ease-entrar, ease-salir | | cortes | movil: abaixo de 960, chico: abaixo de 600 — para baixo, como no preset do kit |

As alturas não se chamam h-sm/h-md/h-lg como no preset do Tailwind 3: no Tailwind 4, h-*, w-*, p-* e max-w-* leem o mesmo --spacing-*, e um --spacing-md mudaria também o max-w-md padrão. Os ícones levam o nome do token (--ic-nav → size-ic-nav).

A paleta, as famílias, os pesos e os raios padrão do Tailwind saem, como no preset do kit: bg-red-500, text-gray-900, font-sans, font-light e rounded-sm deixam de existir. Uma paleta só, nenhum hex solto. O espaçamento padrão fica, porque já é base 4, como o do kit (p-4 = 16px), e os breakpoints padrão (sm:, md:, lg:) também.

Só o tema, com o tokens.css carregado por fora: @import "@commenteme/tokens/theme.css";.

Tailwind 3

// tailwind.config.js
module.exports = { presets: [require('@commenteme/tokens/tailwind-preset')] };

É o preset do kit, sem edição: bg-atencion-fondo, rounded-panel, h-md, w-nav (ícone de 20), shadow-modal, max-w-drawer, duration-base, ease-entrar, movil:.

JavaScript e Node

Para onde não há CSS: imagem OG com satori, e-mail, PDF, gráfico.

import { color, dato, semantic, radius, motion, cssVar } from '@commenteme/tokens';

color.azul;                  // '#005278'
color['atencion-icono'];     // '#B37A00'
dato['dato-comparacion'];    // '#8A989E' — a série comparada, em linha pontilhada
semantic['sobre-acento'];    // '#1A1A1A' — os semânticos chegam resolvidos
radius['r-panel'];           // '10px'
motion['t-panel'];           // '280ms'
cssVar('azul');              // 'var(--azul)', para style inline; nome errado não compila

Os grupos são os do tokens.json do kit, com os mesmos nomes e valores: color, alpha, dato, shadow, radius, height, icon, space, font, weight, motion e layout. Também exporta semantic, vars (todas as variáveis do tokens.css, cruas) e kitVersion. O JSON do kit está em @commenteme/tokens/tokens.json. O build confere que o JSON e o CSS do kit dizem o mesmo e para se divergirem.

Versão

O pacote segue o versionamento semântico por conta própria. A versão do kit de onde os tokens saíram está em kitVersion, lida do tokens.json do kit — hoje 3.3.0, embora o kit seja o v3.3.1: o JSON do kit não subiu o número junto. Mudanças em CHANGELOG.md.

Licença

MIT para o código. A marca commente.me — nome, logotipo, ladrillo e lockup — não entra nessa licença: ver MARCA.md.