Vellum

Retrouver le rendu Material Design des éléments paper de Polymer (coins de 2 px, ombres d’élévation, ondulation, durées et courbes d’animation) dans n’importe quel projet, sans framework. Les valeurs ont été étudiées dans les sources de Polymer puis réimplémentées : physique de paper-ripple, ombres de 2 à 24 dp, métriques et timings des boutons, champs, cases à cocher, onglets, dialogues, etc.

• Aucune dépendance d’exécution : CSS et modules ES, environ 7 ko gzip par fichier, déclarations TypeScript fournies.
• Éléments natifs d’abord : cases à cocher, boutons radio, interrupteurs, curseurs et listes déroulantes sont de vrais <input>/<select>, les dialogues des <dialog>. Formulaires, clavier et lecteurs d’écran fonctionnent sans JS ; le JS ajoute l’ondulation, les onglets, les listes, les compteurs, la validation et les toasts.
• Composants : boutons, FAB, champs flottants avec aide, erreur et compteur, sélecteurs, onglets et navigation, menus, barre d’outils, cartes, puces, alertes, tableaux, barres de progression, spinner, dialogues, toasts.
• Thèmes : environ 30 variables CSS par thème, dont tout le reste dérive (ombres, états, focus, couleurs désactivées). 33 thèmes fournis : clair, sombre, collection PolymerThemes et palettes classiques (Solarized, Nord, Dracula, Gruvbox, Catppuccin…). Un thème peut s’appliquer à un seul panneau.
• Générateur de thèmes (demo/builder.html) : sélecteurs de couleur, valeurs dérivées automatiquement, contraste WCAG de chaque paire texte/fond, aperçu sur toute la démo, bloc CSS à copier.
• Accessibilité du mouvement : seules transform, opacity et box-shadow sont animées ; avec prefers-reduced-motion, les durées tombent à 1 ms et l’ondulation devient un bref flash.

Un thème ne définit que des variables de base ; src/css/tokens.css calcule le reste et le redéclare sur chaque portée [data-theme]. Le catalogue de thèmes est un module JS (THEMES, deriveTheme(), themeCSS(), contrast()) utilisable par des outils ; les fichiers CSS en sont générés et un test vérifie qu’ils sont à jour.

Le dépôt est le site : demo/ charge la bibliothèque compilée, versionnée dans dist/, par des URL relatives. Il fonctionne donc tel quel sur GitHub Pages ou GitLab Pages, sans étape de compilation. dist/vellum-demo.html contient la démo en un seul fichier autonome.

Le paquet n’est pas publié sur un registre : on l’installe depuis git ou on copie dist/.

import '@claude177/vellum/vellum.css'
import { init, observe, toast, openDialog, setTheme } from '@claude177/vellum'

init(document)             // améliore tous les composants de la page
// observe(document.body)  // et ceux ajoutés plus tard
setTheme('dark')

Sans bundler :

<link rel="stylesheet" href="vellum.css">
<script type="module">import { init } from './vellum.js'; init(document)</script>

Ajouter class="v-app" sur <body> pour le fond, la police et l’anneau de focus. Exemple de bouton : <button class="v-button v-button--raised v-button--primary">.

Les outils tournent dans des conteneurs Podman, rien n’est installé sur l’hôte :

bin/dev npm install
bin/dev up       # serveur Vite sur 127.0.0.1:8126
bin/dev test     # Vitest (jsdom)
bin/dev build    # dist/ : CSS, JS, thèmes, polices, démo autonome
bin/e2e motion.mjs   # Playwright : rafales d’images de chaque interaction