# 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.