Nanabrook

Un framework CSS+JS léger, token-driven et modulable. Inspiré du caméléon Brookesia nana — petit, flexible, adaptable.

Installation

npm install nanabrook

Ou via CDN :

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nanabrook/dist/nanabrook.min.css">
<!-- JS (composants interactifs) -->
<script src="https://cdn.jsdelivr.net/npm/nanabrook/dist/nanabrook.min.js" defer></script>

<!-- Version spécifique (recommandé en production) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/nanabrook.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/nanabrook.min.js" defer></script>

Usage

Le principe : une couleur → tout le système

/* theme.css */
:root {
  --brand-primary: #2563eb; /* c'est tout — palette, dark mode, composants : tout dérivé */
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nanabrook/dist/nanabrook.min.css">
<script src="https://cdn.jsdelivr.net/npm/nanabrook/dist/nanabrook.min.js" defer></script>
<link rel="stylesheet" href="theme.css">

Avec un bundler (Vite, Webpack…) :

import 'nanabrook/dist/nanabrook.min.css'
import 'nanabrook'
import './theme.css'

Avec un design system existant

:root {
  --brand-primary:   #2563eb;
  --brand-secondary: #7c3aed; /* optionnel — dérivé auto (hue +150°) si absent */
  --brand-success:   #16a34a;
  --brand-warning:   #f59e0b;
  --brand-danger:    #dc2626;
  --brand-neutral:   #475569;
}

Variables globales de thème

:root {
  /* Radius par famille */
  --radius-box:      var(--radius-lg);    /* card, modal, alert, toast */
  --radius-field:    var(--radius-md);    /* button, input, select, tabs */
  --radius-selector: var(--radius-full);  /* checkbox, switch, badge */

  /* Taille de base des champs et selectors */
  --size-field:    4px;  /* × multiplicateur → XS=24px … XL=56px */
  --size-selector: 4px;  /* × multiplicateur → XS=16px … XL=32px */

  /* Effets */
  --depth:        0;    /* 1 = relief 3D sur tous les composants */
  --border-width: 1px;
}

Ce qui est inclus

CSS

• Reset — base normalisée
• Tokens primitifs — palettes OKLCH, spacing 8pt, ombres, transitions
• Tokens sémantiques — surfaces, textes, états, dark mode automatique
• Tokens responsives — font-sizes fluid (clamp)
• 113 utilitaires — layout, flexbox, grid, spacing, couleurs, typographie, transforms, filtres
• 35 composants — entièrement stylés, token-driven, dark mode transparent

JavaScript

Auto-initialisation via attributs data-nb-*. Aucune configuration requise.

<!-- Modal -->
<button data-nb-modal-open="my-modal">Ouvrir</button>
<dialog class="modal" id="my-modal" data-nb-modal>
  <div class="modal__box">…</div>
</dialog>

<!-- Toast programmatique -->
<script>
  NB.Toast.show({ message: 'Enregistré', type: 'success' })
</script>

Composants (35)

| Catégorie | Composants | |---|---| | Fondations | button, badge, alert, card, divider, spinner, skeleton | | Formulaires | switch, checkbox, radio, input, textarea, select, range, file, filter-chips | | Navigation | tabs, accordion, modal, dropdown, menu, tooltip | | Avancés | toast, steps, pagination, avatar, breadcrumb, progress, table, tag, stat, empty-state, kbd, timeline, drawer |

Système de couleurs

Nanabrook utilise OKLCH et les CSS relative colors pour une cohérence perceptuelle optimale — sans JavaScript.

--brand-primary dérive automatiquement via CSS :

• Palettes 50→900 pour primary, secondary, success, warning, danger, info, neutral
• --brand-secondary dérivé automatiquement (hue +150°) si non fourni
• Neutrals teintés par la hue du brand
• Dark mode complet via @media (prefers-color-scheme: dark) + data-theme="dark|light"

Formats acceptés pour toutes les --brand-* : #hex, rgb(), hsl(), hwb(), oklch(), oklab(), lch(), couleurs nommées CSS.

API Palette (optionnel)

Pour les cas avancés (Shadow DOM, ThemeGenerator, intégrations JS dynamiques) :

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/nanabrook-palette.min.js"></script>

// Générer les variables CSS depuis n'importe quelle couleur
const vars = NB.Palette.generateVars('#2563eb')

// Appliquer dans un élément ou un ShadowRoot
NB.Palette.applyVars(vars, shadowRoot)

// Convertir n'importe quel format CSS → [l, c, h]
NB.Palette.colorToOklch('hsl(220 80% 53%)')

Dark mode — trois états

<html>                     <!-- auto : suit l'OS (défaut) -->
<html data-theme="dark">   <!-- dark forcé -->
<html data-theme="light">  <!-- light forcé -->

Convention numérique — grille 8pt

| Classe | Valeur | |--------|--------| | .m-1 | 8px | | .p-2 | 16px | | .gap-3 | 24px | | .h-4 | 32px |

API JavaScript

Les composants interactifs sont accessibles sur window.NB :

NB.Toast.show({ message, type, title, duration, dismissible, solid, position, icon })
NB.Toast.dismiss(toastEl)
NB.Modal.open('my-modal')
NB.Modal.close('my-modal')

Les composants émettent des événements préfixés nb: :

document.addEventListener('nb:modal:open', ({ detail }) => console.log(detail))
document.addEventListener('nb:toast:show', ({ detail }) => console.log(detail))
document.addEventListener('nb:drawer:open', ({ detail }) => console.log(detail))

Licence

MIT — Pierre Fardel