From 0b6f3c0808412328a5f9e6a005b94675f3888f05 Mon Sep 17 00:00:00 2001 From: gilles soulier Date: Thu, 21 May 2026 20:25:32 +0200 Subject: [PATCH] =?UTF-8?q?T=C3=A9l=C3=A9verser=20les=20fichiers=20vers=20?= =?UTF-8?q?"/"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit first --- README.md | 304 +++++++++++ consigne_design_system.md | 363 +++++++++++++ exemple-minimal.html | 115 +++++ exemple-tout.html | 1015 +++++++++++++++++++++++++++++++++++++ ui-kit.jsx | 656 ++++++++++++++++++++++++ 5 files changed, 2453 insertions(+) create mode 100644 README.md create mode 100644 consigne_design_system.md create mode 100644 exemple-minimal.html create mode 100644 exemple-tout.html create mode 100644 ui-kit.jsx diff --git a/README.md b/README.md new file mode 100644 index 0000000..a0ee628 --- /dev/null +++ b/README.md @@ -0,0 +1,304 @@ +# mon design system — Gruvbox seventies + +> Design system rétro-futuriste pour applications de monitoring, ops, IoT, domotique. +> Orange brûlé, fond brun délavé en sombre / gris clair usé en clair. +> **Version 1.0** · deux thèmes (dark + light), 14+ composants React, palette GTK pour GNOME. + +--- + +## 🚀 Démarrage rapide (web) + +```html + + + + + + + + + + + + + + + + + + +
+ + + + + +``` + +Pour voir tout fonctionner, ouvre `examples/exemple-minimal.html`. + +--- + +## 📂 Contenu du package + +``` +export/ +├── README.md ← Ce fichier +├── consigne_design_system.md ← Brief pour agents IA (Claude, ChatGPT…) +├── tokens/ +│ ├── tokens.css ← Variables CSS web (dark + light) +│ ├── tokens.gnome.css ← GTK 4 / libadwaita (apps GNOME) +│ └── tokens.json ← Format générique (Tailwind, Figma…) +├── components/ +│ └── ui-kit.jsx ← 14 composants React (Button, IconButton, Toggle, Tooltip, +│ StatusLed, BatteryGauge, RadialGauge, BigRadialGauge, +│ Popup, TreeNav, Sparkline, LineChart, Icon, …) +└── examples/ + └── exemple-minimal.html ← Démo minimale autoportante +``` + +--- + +## 🎨 Ce qui est paramétrable + +### 1. Thème global + +```html + +``` + +Tu peux mettre `data-theme` sur **n'importe quel parent** pour basculer un sous-arbre uniquement (utile pour une preview en mode opposé dans un menu de réglages). + +### 2. Toutes les couleurs (CSS variables) + +Édite `tokens.css` ou surcharge dans ton propre CSS : + +```css +:root[data-theme="dark"] { + --accent: #fe8019; /* Couleur principale (orange seventies) */ + --accent-soft: #d65d0e; + --bg-1: #2a231d; /* Fond app */ + --bg-3: #3c332a; /* Cartes */ + --ink-1: #f2e5c7; /* Texte */ + --ok: #4dbb26; + --warn: #fabd2f; + --err: #fb4934; + --blue: #3db0d1; /* Datavis additionnel */ + --purple: #c882c8; +} +``` + +**4 statuts** (ok / warn / err / info) + **2 couleurs datavis** (blue / purple) + **6 niveaux de fond** + **4 niveaux d'encre** + **3 niveaux de bordure**. + +### 3. Polices + +Trois familles, toutes substituables : + +| Variable | Usage | Défaut | +|-----------------|-------------------------------------|---------------------| +| `--font-ui` | Interface (titres, corps, boutons) | Inter | +| `--font-mono` | Données, code, valeurs numériques | JetBrains Mono | +| `--font-terminal` | Logs, terminal embarqué, vibe rétro | Share Tech Mono | + +Pour changer, remplace simplement les `@import` Google Fonts et redéfinis les variables. + +### 4. Ombres et relief + +```css +--tile-3d /* Relief 3D marqué pour cartes */ +--shadow-1, -2, -3 /* Niveaux d'élévation */ +--shadow-press /* Inset pour état pressé */ +--hover-glow /* Halo accent au survol */ +``` + +### 5. Composants — props paramétrables + +Chaque composant accepte des props pour personnaliser sans toucher au CSS. Exemples : + +```jsx + + + + + + + + + + + + + Contenu + + + +``` + +Voir la doc complète des props : `Component Reference.html` dans le projet original. + +--- + +## 🐧 Utilisation dans une app GNOME (GTK 4 / libadwaita) + +Charge `tokens/tokens.gnome.css` comme provider CSS au démarrage de l'app. + +**Python (PyGObject)** : +```python +from gi.repository import Gtk, Gdk + +css_provider = Gtk.CssProvider() +css_provider.load_from_path("tokens.gnome.css") +Gtk.StyleContext.add_provider_for_display( + Gdk.Display.get_default(), + css_provider, + Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION +) +``` + +**GJS** : +```javascript +const provider = new Gtk.CssProvider(); +provider.load_from_path('tokens.gnome.css'); +Gtk.StyleContext.add_provider_for_display( + Gdk.Display.get_default(), + provider, + Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION +); +``` + +**Rust (gtk4-rs)** : +```rust +let provider = gtk::CssProvider::new(); +provider.load_from_path("tokens.gnome.css"); +gtk::style_context_add_provider_for_display( + &gdk::Display::default().unwrap(), + &provider, + gtk::STYLE_PROVIDER_PRIORITY_APPLICATION, +); +``` + +Le fichier override directement les couleurs sémantiques de libadwaita (`@window_bg_color`, `@accent_color`, etc.) ET ajoute des styles spécifiques pour les widgets courants : `button.suggested-action`, `entry`, `switch`, `scale`, `progressbar`, `notebook`, `popover`… + +Classes CSS supplémentaires à appliquer via `add_css_class()` : +- `.tile` / `.card` — Tuile en relief 3D +- `.mono` — Texte monospace JetBrains Mono +- `.terminal` — Texte terminal Share Tech Mono +- `.status.ok` / `.status.warn` / `.status.error` / `.status.info` — Badge de statut + +--- + +## 🔧 Intégration dans d'autres outils + +### Tailwind CSS + +Convertis `tokens.json` en `tailwind.config.js` : + +```js +const tokens = require('./tokens/tokens.json'); +module.exports = { + theme: { + extend: { + colors: { + accent: tokens.themes.dark.accent.primary.value, + ok: tokens.themes.dark.status.ok.value, + // … + }, + fontFamily: { + sans: [tokens.typography.fonts.ui.family, ...tokens.typography.fonts.ui.fallback], + mono: [tokens.typography.fonts.mono.family], + }, + }, + }, +}; +``` + +### Figma / outils de design + +`tokens.json` suit un schéma compatible avec la plupart des plugins de tokens (Figma Tokens, Style Dictionary). Importe-le directement. + +### Variables Sass / SCSS + +```scss +@use 'sass:map'; +$tokens: ( + accent: #fe8019, + bg-1: #2a231d, + ok: #4dbb26, +); +// … +``` + +--- + +## ⚙️ Personnalisation avancée + +### Créer un thème dérivé + +Duplique `tokens.css`, change le nom du sélecteur (`[data-theme="ocean"]` par exemple) et modifie les variables. Charge les deux fichiers — `data-theme` choisira automatiquement. + +### Ajouter une couleur status custom + +```css +:root[data-theme="dark"] { + --critical: #ff0080; + --critical-glow: rgba(255, 0, 128, 0.45); +} +``` + +Utilisable ensuite partout : `` nécessite une PR dans `ui-kit.jsx` (carte `map` dans `StatusLed`), mais en raw CSS tu peux utiliser la variable directement. + +### Désactiver les effets + +Tous les effets de `transition` / `transform` / `box-shadow` sont concentrés dans les classes `.interactive`, `.bg-hover`, `.gauge-hover`. Surcharge-les en CSS si besoin : + +```css +.interactive { transition: none !important; } +``` + +--- + +## ✅ Checklist d'intégration + +- [ ] Polices Google Fonts chargées (Inter, JetBrains Mono, Share Tech Mono) +- [ ] Font Awesome 6 chargé +- [ ] `tokens.css` (web) **ou** `tokens.gnome.css` (GTK) chargé +- [ ] Attribut `data-theme="dark"` (ou "light") sur `` ou un parent +- [ ] React 18 + Babel chargés (uniquement pour `ui-kit.jsx`) +- [ ] `ui-kit.jsx` chargé en `type="text/babel"` + +--- + +## 📋 Statuts du système + +| Couleur | Token | Hex (dark) | Hex (light) | Usage | +|---------|--------|------------|-------------|-----------------------------| +| Accent | `--accent` | `#fe8019` | `#af3a03` | Primaire, focus, sélection | +| OK | `--ok` | `#4dbb26` | `#3c911c` | Succès, état nominal | +| Warn | `--warn` | `#fabd2f` | `#b57614` | Attention, latence élevée | +| Err | `--err` | `#fb4934` | `#9d0006` | Erreur, alerte critique | +| Info | `--info` | `#83a598` | `#427b58` | Information neutre | +| Blue | `--blue` | `#3db0d1` | `#2d82a3` | Datavis catégorie 2 | +| Purple | `--purple` | `#c882c8` | `#8c468c` | Datavis catégorie 3 | + +--- + +## 🤖 Pour les agents IA + +Si tu utilises ce design system avec une IA (Claude, GPT, Copilot, etc.), partage-lui le fichier **`consigne_design_system.md`**. Il y trouvera toutes les règles d'utilisation, conventions, contre-exemples à éviter. + +--- + +**Licence** · Usage libre dans tes projets. Pas de garantie. diff --git a/consigne_design_system.md b/consigne_design_system.md new file mode 100644 index 0000000..d8252d6 --- /dev/null +++ b/consigne_design_system.md @@ -0,0 +1,363 @@ +# Consignes — mon design system (Gruvbox seventies) + +> **Tu es un agent IA chargé de produire ou modifier du code utilisant ce design system.** +> Lis ce fichier en entier avant d'écrire la moindre ligne. Suis les règles à la lettre. + +--- + +## 🎯 Identité du système + +- **Nom** : mon design system — Gruvbox seventies +- **Vibe** : rétro-industriel, console de monitoring, SCADA, terminal années 70 +- **Palette** : orange brûlé Gruvbox + fond brun délavé (pas noir intense) ou gris clair usé (pas blanc pur) +- **Cas d'usage cibles** : tableaux de bord, monitoring, IoT, domotique, ops, scanners réseau +- **Public** : utilisateurs techniques (admin sys, devs, makers) — densité d'info élevée acceptée + +--- + +## 📁 Fichiers à connaître + +| Fichier | Contient | +|---------------------------------|-------------------------------------------------------| +| `tokens/tokens.css` | Variables CSS web (`:root[data-theme="dark|light"]`) | +| `tokens/tokens.gnome.css` | Tokens GTK 4 / libadwaita (`@define-color`) | +| `tokens/tokens.json` | Tokens en JSON pour outils externes | +| `components/ui-kit.jsx` | 14 composants React (Button, Icon, Popup…) | +| `examples/exemple-minimal.html` | Démo de référence | + +--- + +## ⚠️ Règles absolues — ne JAMAIS enfreindre + +1. **Toujours utiliser les variables CSS**, jamais des hex en dur dans le code utilisateur. + ✅ `color: var(--accent)` + ❌ `color: #fe8019` + +2. **Toujours déclarer `data-theme`** sur un parent (`` ou un wrapper). + Sans ça, les variables ne sont pas définies et l'UI casse silencieusement. + +3. **Composants existants** — ne jamais en réinventer. Vérifier d'abord la liste ci-dessous. + +4. **Icônes** — utiliser le composant `` avec les noms mappés. JAMAIS d'emoji, JAMAIS de SVG inline custom pour un cas où une icône Font Awesome existe. + +5. **Pas d'effet hover** sur les boutons / tuiles / composants généraux (sauf jauges et tuiles Heimdall qui en ont un). Seulement **pression 3D au clic** via `.interactive`. + +6. **Toujours des tooltips** sur les boutons icônes seuls (`` exige `label`). + +7. **Pas de bordure arrondie excessive**. Tuiles : `border-radius: 10-12px`. Boutons : `8px`. Pastilles : `999px`. + +8. **Polices** — respecter strictement les 3 familles : + - **Inter** → UI (titres, corps, boutons, labels d'interface généraux) + - **JetBrains Mono** → données numériques, valeurs, code, IDs, IPs + - **Share Tech Mono** → logs, terminal embarqué, ambiance rétro + Toute autre police = bug. + +9. **Tonalité** : labels en `text-transform: uppercase` + `letter-spacing: 0.08em` (classe `.label` déjà fournie). + +10. **Densité** : pas de padding inutile. Ce DS est dense par nature. Tuiles : padding 14-18px. Boutons : 6-10px vertical. + +--- + +## 🎨 Tokens disponibles + +### Couleurs (toutes définies en `dark` ET `light`) + +#### Fonds (du plus profond au plus haut) +``` +--bg-0 très rare, niveau le plus bas +--bg-1 fond application principal +--bg-2 panneaux (sidebar, headerbar) +--bg-3 cartes, tuiles ← LE PLUS UTILISÉ +--bg-4 hover, état actif +--bg-5 press, sélection forte +``` + +#### Texte (du plus contrasté au moins) +``` +--ink-1 texte principal +--ink-2 texte secondaire +--ink-3 labels, hints +--ink-4 désactivé +``` + +#### Accent +``` +--accent couleur primaire (orange Gruvbox seventies) +--accent-soft variante foncée (bordures, hover) +--accent-glow halo (rgba) +--accent-tint teinte transparente (fonds discrets) +``` + +#### Statuts +``` +--ok #4dbb26 (vert flashy) +--warn #fabd2f (jaune) +--err #fb4934 (rouge) +--info #83a598 (vert-bleu pastel) +``` + +#### Datavis additionnel +``` +--blue #3db0d1 +--purple #c882c8 +``` + +#### Bordures +``` +--border-1, --border-2, --border-3 du plus subtil au plus marqué +``` + +#### Ombres / relief +``` +--shadow-1, -2, -3 élévations standards +--shadow-press état pressé (inset) +--tile-3d relief 3D marqué pour cartes ← À utiliser sur les tuiles importantes +``` + +### Polices +``` +--font-ui 'Inter', system-ui, sans-serif +--font-mono 'JetBrains Mono', monospace +--font-terminal 'Share Tech Mono', monospace +``` + +--- + +## 🧩 Composants — quand utiliser quoi + +| Besoin | Composant | Exemple | +|--------|-----------|---------| +| Bouton texte avec ou sans icône | ` // NON + // OUI +``` + +❌ **`window.alert` / `confirm`** — toujours utiliser ``. + +❌ **Texte secondaire en `--ink-1`** — choisir la bonne couche d'encre selon la hiérarchie. + +❌ **Sur-utiliser le glow / shadow** — réservé aux accents importants. + +❌ **Mélanger les casses de label** — labels = uppercase mono, titres = sentence case. + +--- + +## ✅ Patterns recommandés + +### Hiérarchie de fond +- App / page → `--bg-1` +- Sidebar / headerbar → `--bg-2` +- Tuiles / cartes principales → `--bg-3` ou `.glass` +- Input fields / containers profonds → `--bg-1` avec inset shadow + +### Effet glass standard +```jsx +className="glass" // backdrop-filter + bg semi-transparent + tile-3d shadow +``` +ou pour plus marqué : +```jsx +className="glass-strong" +``` + +### Validation visuelle d'un état critique +```jsx + // pastille pulsante + +// + bordure rouge sur le conteneur : +style={{ border: '1px solid var(--err)', boxShadow: 'inset 0 1px 0 rgba(251,73,52,0.2), 0 0 18px rgba(251,73,52,0.15)' }} +``` + +### Sticky footer d'actions (form) +```jsx +
+ + {dirty ? 'modifications non sauvegardées' : 'à jour'} + + + +
+``` + +--- + +## 🌗 Gestion des deux thèmes + +**Règle d'or** : tout ce qui s'affiche doit être lisible et cohérent dans les deux thèmes. + +Avant de livrer un écran, **mentalement (ou réellement) bascule `data-theme`** et vérifie : +- Les couleurs personnalisées (en dur) cassent forcément → utilise les tokens +- Les opacités blanches (`rgba(255,255,255,…)`) en dark passent mal en light → préfère les variables `--border-*` +- Les ombres très profondes en dark sont invisibles en light → utilise `--shadow-*` qui s'adapte + +Pour basculer dynamiquement : +```jsx +document.documentElement.dataset.theme = 'light'; +``` + +--- + +## 🪟 Cas particulier : applications GNOME + +Pour GTK 4 / libadwaita : +1. Charger `tokens/tokens.gnome.css` via `GtkCssProvider` +2. Le fichier **override les couleurs sémantiques libadwaita** (`@accent_color`, `@window_bg_color`, etc.) — les widgets standards se ré-habillent automatiquement +3. Ajouter `add_css_class("tile")` pour le relief 3D, `("mono")` pour monospace, `("terminal")` pour Share Tech Mono +4. Pour les boutons accent : utiliser la classe libadwaita standard `suggested-action` (déjà restylée) +5. Pour danger : classe `destructive-action` + +Polices : penser à installer ou bundler Inter / JetBrains Mono / Share Tech Mono dans le `.flatpak` / `.deb` (sinon GTK fallback sur Cantarell / DejaVu). + +--- + +## 🎯 Quand l'utilisateur demande quelque chose… + +### "Ajoute un bouton de déconnexion" +→ `` ou +`` + +### "Affiche le statut du serveur" +→ Combinaison `` + label texte. Le pulse uniquement si c'est critique/nouveau. + +### "Mets une jauge CPU" +→ `` (inline) +ou `` (visuel) + +### "Crée une modale de confirmation" +→ `` avec `footer={<>}` + +### "Liste hiérarchique des serveurs" +→ `` avec `groups: [{ id, icon: 'server', label, count, open, children: [{ id, label, status, meta }] }]` + +### "Affiche les logs" +→ Conteneur avec `font-family: var(--font-terminal)` + lignes colorées par niveau (ERROR → var(--err), WARN → var(--warn), INFO → var(--ink-2)). + +### "Ajoute une option dark/light dans les réglages" +→ `` + effet de bord : +```jsx +React.useEffect(() => { document.documentElement.dataset.theme = theme; }, [theme]); +``` + +--- + +## 📐 Tailles standards à respecter + +| Élément | Taille / Padding | +|---------------|------------------------------------------| +| Boutons sm | h: 28px · pad: 5px 10px · font: 12px | +| Boutons md | h: 34px · pad: 7px 14px · font: 13px | +| Boutons lg | h: 40px · pad: 10px 18px · font: 14px | +| IconButton | 34px (default) · 26px (compact) | +| Inputs | pad: 9px 12px · font: 13px | +| Toggle | 42 × 22px | +| StatusLed | 8-14px diamètre | +| Header app | 48-56px hauteur | +| Sidebar | 200-260px largeur | +| Volet logs | 320-360px largeur | +| Status bar | 24-28px hauteur | +| Radius tuile | 10-12px | +| Radius button | 8px | +| Espacement | 8 / 12 / 14 / 18 / 24px (rythme bas) | + +--- + +## 💡 Trucs pour ne pas se tromper + +1. **Avant de créer un composant, cherche d'abord** dans `ui-kit.jsx`. 90% du temps il existe déjà. +2. **Avant d'inventer une couleur**, regarde les tokens. Tu as 6 fonds, 4 encres, 4 statuts, 2 datavis = largement assez. +3. **Si tu hésites sur une taille de police** : labels = 11px mono uppercase, body = 13-14px, kpi = 18-28px mono bold. +4. **Quand tu ajoutes une tuile**, mets `className="glass"` (ou `glass-strong` pour les modales) — tout le styling est inclus. +5. **Pour un état critique**, combine plusieurs signaux : couleur + pulse LED + icône + position visuelle. Pas juste une couleur. +6. **Quand l'utilisateur demande "un peu d'effet"** : pas de hover (sauf jauges), oui à la pression 3D, oui aux animations d'entrée 200-400ms `cubic-bezier(.3,.7,.3,1.2)`. + +--- + +## 🔚 En cas de doute + +- Pas sûr d'une couleur ? → tokens +- Pas sûr d'un composant ? → `ui-kit.jsx` +- Pas sûr d'un layout ? → `examples/exemple-minimal.html` +- Pas sûr d'une convention ? → ce fichier + +Toujours préférer la cohérence avec l'existant à l'innovation. +Quand tu doutes, **demande-moi** plutôt que de deviner. diff --git a/exemple-minimal.html b/exemple-minimal.html new file mode 100644 index 0000000..bf9daac --- /dev/null +++ b/exemple-minimal.html @@ -0,0 +1,115 @@ + + + + + Exemple minimal — mon design system + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + diff --git a/exemple-tout.html b/exemple-tout.html new file mode 100644 index 0000000..2bac517 --- /dev/null +++ b/exemple-tout.html @@ -0,0 +1,1015 @@ + + + + + Exemple complet — mon design system + + + + + + + + + + + + + + + + + + +
+ + + + + + + diff --git a/ui-kit.jsx b/ui-kit.jsx new file mode 100644 index 0000000..92f9e76 --- /dev/null +++ b/ui-kit.jsx @@ -0,0 +1,656 @@ +/* ============================================================ + ui-kit.jsx + Composants haute-fid Gruvbox Seventies. + Tout est purement décoratif/interactif côté composant. + Effets : transparence (glass), hover glow, click 3D, tooltips. + ============================================================ */ + +const { useState, useRef, useEffect } = React; + +/* ============================================================ + Icônes — Font Awesome 6 Free. + Mapping nom logique → classe FA. Le CSS de FA est chargé en CDN + dans le . Le composant garde la MÊME API qu'avant (name, + size, style) pour ne rien casser ailleurs. + ============================================================ */ +const ICON_MAP = { + cpu: 'microchip', + memory: 'memory', + disk: 'hard-drive', + network: 'network-wired', + clock: 'clock', + grid: 'table-cells', + list: 'list', + cog: 'gear', + alert: 'triangle-exclamation', + bell: 'bell', + server: 'server', + chart: 'chart-line', + bars: 'chart-simple', + terminal: 'terminal', + refresh: 'arrows-rotate', + play: 'play', + pause: 'pause', + power: 'power-off', + sun: 'sun', + moon: 'moon', + search: 'magnifying-glass', + close: 'xmark', + chevR: 'chevron-right', + chevL: 'chevron-left', + chevD: 'chevron-down', + chevU: 'chevron-up', + plus: 'plus', + filter: 'filter', + download: 'download', + folder: 'folder', + node: 'circle-nodes', + user: 'user', +}; + +const Icon = ({ name, size = 16, style }) => { + const fa = ICON_MAP[name] || 'circle-question'; + return ( +