base-ds

Problema

Cada aplicação reimplementava botões, formulários e navegação, com cores e espaçamentos diferentes e acessibilidade irregular.

Arquitetura

• Tokens de design expostos como CSS custom properties, com utilitários gerados para o Tailwind v3 e v4.
• Tema escuro trocando só os tokens semânticos, com o contraste verificado nos dois temas.
• Build dividido por componente: o app leva ao navegador só o que usa.
• Realce de código com tokens próprios, no formato do tema css-variables do Shiki:

import { codeToHtml, createCssVariablesTheme } from 'shiki'

const baseDsTheme = createCssVariablesTheme({
  name: 'base-ds',
  variablePrefix: '--color-code-',
})

const html = await codeToHtml(code, { lang: 'ts', theme: baseDsTheme })

Resultados

Ao trocar o bundle único pelo build dividido por componente, o JS que o base-ds acrescenta a uma página caiu de cerca de 950 KB para cerca de 48 KB.