@x-via/tailwind-preset

Preset Tailwind + theme.css com a identidade X-VIA. A estratégia: o shadcn/ui lê variáveis CSS (--primary, --radius…) — este pacote sequestra essas variáveis, então qualquer componente (mesmo os que o Lovable inventa) já nasce na paleta X-VIA.

Instalação (npm público)

npm install -D @x-via/tailwind-preset

Uso

tailwind.config.js (CommonJS ou ESM):

module.exports = {
  presets: [require("@x-via/tailwind-preset")],
  content: ["./index.html", "./src/**/*.{ts,tsx}"],
};

Entry CSS do app:

@import "@x-via/tailwind-preset/theme.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

Pronto. Use as classes semânticas do shadcn (bg-primary, text-foreground, text-muted-foreground, border-border, bg-destructive, bg-success, bg-warning). Nunca cor literal (bg-blue-500) nem hex (bg-[#4EB6E7]).

Tokens semânticos (já validados em contraste AA)

| Token | Cor | Origem | |---|---|---| | --primary | #1675A2 (azul-700) | 5.1:1 no branco | | --foreground | #333333 (neutro-900) | 12.6:1 | | --background | #FFFFFF | | | --muted / --secondary | #F3F4F4 (neutro-100) | | | --muted-foreground | #636E74 (neutro-600) | 5.2:1 | | --border / --input | #E3E6E8 (neutro-200) | | | --accent | #EDF8FD (azul-50) | hover | | --accent-foreground | #0C415A (azul-900) | | | --ring | #1B8FC6 (azul-600) | foco | | --destructive | #CF1219 (vermelho-600) | 5.6:1 | | --success | #1F7036 (verde-800) | 6.1:1 | | --warning | #FABC14 (amarelo-500, cor da marca) | usar com --warning-foreground grafite | | --radius | 0.5rem | |

Escalas de marca também disponíveis (azul, verde, amarelo, vermelho, neutro) — mas prefira sempre os semânticos. As cores da logo (ex.: azul #4EB6E7) não vão cruas pra UI por reprovarem em WCAG; a interface usa o degrau mais escuro do mesmo matiz.

Lint visual

npx xvia-lint-visual [dir] — reprova cor literal/arbitrária/hex, falta do preset ou do theme.css, e página sem PageLayout. Saída em BLOQUEIA/REVISAR.