@trismegisto/core

O CSS do Hermes: um core.css com o estilo de todos os componentes (classes hm-*), os utilitários de layout, tipografia e tabela, e as fontes servidas pelo próprio pacote. Sem framework e sem JavaScript.

Na cadeia de camadas (tokens ← icons ← primitives ← core ← angular ← maps · charts · spine) fica entre a lógica (primitives) e os componentes Angular. Todo valor visual vem dos tokens --hm-* do @trismegisto/tokens: sem o tokens.css carregado antes, o core.css não tem cor nem espaçamento.

Instalação

npm install @trismegisto/core @trismegisto/tokens

Num app Angular, instale os cinco pacotes base juntos e na mesma versão (ver @trismegisto/angular).

Uso

Carregue os dois CSS, nesta ordem, no angular.json (styles) ou no ponto de entrada do bundler:

"styles": [
  "node_modules/@trismegisto/tokens/dist/tokens.css",
  "node_modules/@trismegisto/core/dist/core.css"
]

Pelo mapa de exports do pacote, o mesmo arquivo também é @trismegisto/core/core.css.

Fontes: Geist e Geist Mono (padrão), Roboto, Rubik e Figtree vêm em dist/fonts/ e são declaradas no próprio core.css com url() relativo. O bundler do app copia os arquivos sozinho: nenhum <link> para serviço externo de fontes. A família ativa é escolhida por data-font (ver "Escopo" abaixo); o navegador só baixa os arquivos da família em uso.

Escopo: tema, família, densidade e fonte

As classes não sabem de tema. Quem decide é o elemento raiz, por atributos:

| Atributo | Valores | | --- | --- | | data-theme | light, dark | | data-family | uma das 12 famílias (hera é a padrão) | | data-density | comfortable (padrão), compact | | data-font | geist (padrão), roboto, rubik, figtree |

No Angular, a diretiva hermesTheme do @trismegisto/angular aplica os quatro. Sem Angular, themeHostProps() do @trismegisto/primitives devolve os atributos e as cores a aplicar. A densidade compacta reescreve a escala de espaço e de altura de controle: tudo que usa os tokens compacta junto.

Componentes

Cada componente hm-* do @trismegisto/angular desenha a marcação com estas classes (hm-btn, hm-modal, hm-data-grid…). Usar as classes de componente direto, sem o Angular, só é seguro para quem replica a marcação e o comportamento do componente (um wrapper para outro framework, com os montadores de classe do @trismegisto/primitives, como buttonClass). Num app Angular, use o componente.

Utilitários

Classes de uso livre em qualquer tela, todas sobre os tokens (seguem tema e densidade):

| Grupo | Classes | | --- | --- | | Grade de 12 colunas | .hm-row + .hm-col-N, .hm-col-{sm,md,lg,xl}-N, .hm-col-auto, .hm-offset-*, .hm-order-* | | Layout | .hm-stack, .hm-cluster, .hm-split, .hm-center, .hm-container (--sm/md/lg/xl/fluid), .hm-push, .hm-align-*, .hm-justify-*, .hm-fill | | Espaço | .hm-gap-*, .hm-m{,t,b,s,e,x,y}-*, .hm-p{,t,b,s,e,x,y}-* na escala 0, micro, xs, sm, md, lg, xl, 2xl, 3xl (margem também auto) | | Visibilidade | .hm-hide-{sm,md,lg,xl}-up, .hm-hide-{…}-down, .hm-visually-hidden (some da tela, fica para leitor de tela) | | Tipografia | .hm-text-{xs…xxl}, .hm-text-{regular,medium,semibold,bold}, .hm-heading-1…6, .hm-text-muted, .hm-truncate, .hm-truncate-lines, .hm-nowrap, .hm-break-word, .hm-list, .hm-prose, .hm-code | | Outros | .hm-table (tabela nativa simples), .hm-scroll-area (rolagem com barra do tema), .hm-aspect-ratio |

Regras que valem para o app:

• .hm-heading-N é só visual: o nível continua sendo o elemento (<h2 class="hm-heading-4">).
• .hm-order-* muda só a ordem visual; leitor de tela e Tab seguem o DOM.
• .hm-scroll-area sem nada focável dentro precisa de tabindex="0", role="region" e aria-label.
• .hm-table é para lista estática. Com paginação, busca ou ordenação, use o hm-data-grid.
• CSS próprio do app também usa var(--hm-*): um #hex ou um px de espaçamento não acompanha tema escuro, família nem densidade.

Exemplos ao vivo e a escala completa: páginas "Tokens" (/tokens) e "Tema" (/pages/theming) do site de documentação (docs/website). Regras de tokens e densidade: CLAUDE.md §2 e §3.

Desenvolvimento do pacote

npm run build roda o lint e compila src/index.scss em dist/core.css. O lint (npm run lint, também npm test) barra cor, font-size, font-weight e z-index fora dos tokens e confere os breakpoints da grade contra os do @trismegisto/tokens.