@arijs/bootswatch-ve

Bootswatch reempacotado como design system Vanilla-Extract: o CSS (componentes E utilities) é pré-compilado por-tema com classes e variáveis 100% hasheadas (nada de --bs-* literal — zero colisão no seu projeto). As classes são importadas por família e aplicadas via cx do runtime Solid.

Uso (Solid)

import '@arijs/bootswatch-ve/themes/bootstrap/index.css'
import { bootstrapScope } from '@arijs/bootswatch-ve/themes/bootstrap/scope'
import { btn, btnPrimary } from '@arijs/bootswatch-ve/buttons'
import { mb3, textBgSecondary } from '@arijs/bootswatch-ve/utilities'
import { BootswatchProvider, useBootswatch } from '@arijs/bootswatch-ve/solid'

function Button() {
  const { cx } = useBootswatch()
  // cx aplica o scope do tema ativo automaticamente (reativo).
  return <button class={cx(btn, btnPrimary, mb3)}>OK</button>
}

export default () => (
  <BootswatchProvider scope={bootstrapScope}>
    <Button />
  </BootswatchProvider>
)

Camadas

• Por família — @arijs/bootswatch-ve/buttons, /alerts, /utilities, /global, … (2668 classes no total). Componentes e utilities são o mesmo tipo de coisa: classes de contract hasheadas, aplicadas por cx.
• @arijs/bootswatch-ve/themes/<tema>/index.css — todo o CSS de um tema (side-effect). Ou por família: .../themes/<tema>/buttons.css.
• @arijs/bootswatch-ve/themes/<tema>/scope — export const <tema>Scope (a classe de scope hasheada) + scope.css (define as vars do tema).
• @arijs/bootswatch-ve/solid — BootswatchProvider (aceita scope fixo OU accessor reativo p/ troca de tema em runtime), useBootswatch → { scope, cx }, e os atalhos useScope/useCx.

Temas disponíveis: bootstrap, brite, cerulean, cosmo, cyborg, darkly, flatly, journal, litera, lumen, lux, materia, minty, morph, pulse, quartz, sandstone, simplex, sketchy, slate, solar, spacelab, superhero, united, vapor, yeti, zephyr.