From ce2dc8baf42fa078b6bf42d870069eb7102a1081 Mon Sep 17 00:00:00 2001 From: gilles soulier Date: Thu, 21 May 2026 20:33:33 +0200 Subject: [PATCH] =?UTF-8?q?T=C3=A9l=C3=A9verser=20les=20fichiers=20vers=20?= =?UTF-8?q?"tokens"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tokens/tokens.gnome.css | 378 ++++++++++++++++++++++++++++++++++++++++ tokens/tokens.json | 136 +++++++++++++++ 2 files changed, 514 insertions(+) create mode 100644 tokens/tokens.gnome.css create mode 100644 tokens/tokens.json diff --git a/tokens/tokens.gnome.css b/tokens/tokens.gnome.css new file mode 100644 index 0000000..390b806 --- /dev/null +++ b/tokens/tokens.gnome.css @@ -0,0 +1,378 @@ +/* ============================================================ + tokens.gnome.css — Tokens pour applications GNOME (GTK 4 / libadwaita) + Gruvbox seventies · v1.0 + ============================================================ + + Usage dans une app GTK 4 / libadwaita : + + #include + GtkCssProvider *provider = gtk_css_provider_new(); + gtk_css_provider_load_from_path(provider, "tokens.gnome.css"); + gtk_style_context_add_provider_for_display( + gdk_display_get_default(), GTK_STYLE_PROVIDER(provider), + GTK_STYLE_PROVIDER_PRIORITY_APPLICATION); + + Python (PyGObject) : + 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 : + 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); + ============================================================ */ + +/* ============================================================ + THÈME SOMBRE (défaut) + ============================================================ */ + +/* Couches de fond (du plus profond au plus haut) */ +@define-color bg_0 #221c17; +@define-color bg_1 #2a231d; +@define-color bg_2 #322a23; +@define-color bg_3 #3c332a; +@define-color bg_4 #4a4035; +@define-color bg_5 #5a4f43; + +/* Encres / texte */ +@define-color ink_1 #f2e5c7; +@define-color ink_2 #d5c4a1; +@define-color ink_3 #a89984; +@define-color ink_4 #7c6f64; + +/* Accent orange seventies */ +@define-color accent_color #fe8019; +@define-color accent_soft #d65d0e; +@define-color accent_fg_color #221c17; + +/* Statuts */ +@define-color success_color #4dbb26; +@define-color warning_color #fabd2f; +@define-color error_color #fb4934; +@define-color info_color #83a598; +@define-color blue_color #3db0d1; +@define-color purple_color #c882c8; + +/* Bordures */ +@define-color border_1 alpha(#a89984, 0.18); +@define-color border_2 alpha(#a89984, 0.32); +@define-color border_3 alpha(#a89984, 0.55); + +/* Couleurs sémantiques GNOME / libadwaita (overrides) */ +@define-color window_bg_color @bg_1; +@define-color window_fg_color @ink_1; +@define-color view_bg_color @bg_2; +@define-color view_fg_color @ink_1; +@define-color headerbar_bg_color @bg_2; +@define-color headerbar_fg_color @ink_1; +@define-color headerbar_border_color @border_2; +@define-color headerbar_backdrop_color @bg_1; +@define-color sidebar_bg_color @bg_2; +@define-color sidebar_fg_color @ink_1; +@define-color sidebar_backdrop_color @bg_1; +@define-color popover_bg_color @bg_3; +@define-color popover_fg_color @ink_1; +@define-color card_bg_color @bg_3; +@define-color card_fg_color @ink_1; +@define-color shade_color alpha(black, 0.4); +@define-color scrollbar_outline_color alpha(@ink_3, 0.3); + +/* ============================================================ + COMPOSANTS GTK — habillage Gruvbox seventies + ============================================================ */ + +/* Fond global */ +window { + background-color: @window_bg_color; + color: @window_fg_color; + font-family: 'Inter', 'Cantarell', sans-serif; + font-size: 14px; +} + +/* HeaderBar (barre de titre) */ +headerbar { + background: @bg_2; + color: @ink_1; + border-bottom: 1px solid @border_2; + box-shadow: inset 0 1px 0 alpha(white, 0.04); + min-height: 48px; +} + +headerbar .title { + font-weight: 700; + font-size: 15px; +} +headerbar .subtitle { + font-family: 'JetBrains Mono', monospace; + font-size: 11px; + color: @ink_3; +} + +/* Boutons — relief 3D et accent */ +button { + background: @bg_3; + color: @ink_1; + border: 1px solid @border_2; + border-radius: 8px; + padding: 6px 12px; + font-weight: 500; + box-shadow: + inset 0 1px 0 alpha(white, 0.06), + inset 0 -1px 0 alpha(black, 0.3), + 0 1px 2px alpha(black, 0.4); + transition: all 60ms ease; +} +button:active { + background: @bg_4; + box-shadow: inset 0 2px 4px alpha(black, 0.5); + transform: translateY(1px); +} +button:disabled { + color: @ink_4; + opacity: 0.6; +} + +/* Bouton "suggested-action" = primary (accent orange) */ +button.suggested-action { + background: @accent_color; + color: @accent_fg_color; + border-color: @accent_soft; + box-shadow: + inset 0 1px 0 alpha(white, 0.2), + 0 2px 6px alpha(@accent_color, 0.35); +} +button.suggested-action:active { + background: @accent_soft; +} + +/* Bouton "destructive-action" = danger */ +button.destructive-action { + background: @bg_3; + color: @error_color; + border-color: @error_color; +} + +/* Bouton plat (toolbar) */ +button.flat { + background: transparent; + border-color: transparent; + box-shadow: none; +} +button.flat:hover { + background: @bg_3; +} + +/* Champs de saisie */ +entry, +text { + background: @bg_1; + color: @ink_1; + border: 1px solid @border_2; + border-radius: 8px; + padding: 8px 12px; + box-shadow: inset 0 1px 2px alpha(black, 0.3); +} +entry:focus, +text:focus { + border-color: @accent_color; + outline: 2px solid alpha(@accent_color, 0.18); + outline-offset: -1px; +} + +/* Listes / treeview */ +list, +treeview { + background: @bg_2; + color: @ink_1; +} +list > row { + padding: 8px 12px; + border-bottom: 1px solid @border_1; +} +list > row:selected, +treeview:selected { + background: alpha(@accent_color, 0.12); + color: @ink_1; + border-left: 3px solid @accent_color; +} + +/* Switch (toggle) */ +switch { + background: @bg_4; + border: 1px solid @border_2; + border-radius: 12px; + box-shadow: inset 0 1px 2px alpha(black, 0.4); + min-height: 22px; + min-width: 42px; +} +switch:checked { + background: @accent_color; + border-color: @accent_soft; + box-shadow: 0 0 10px alpha(@accent_color, 0.35); +} +switch slider { + background: @ink_2; + border-radius: 50%; + min-width: 18px; + min-height: 18px; +} +switch:checked slider { + background: @accent_fg_color; +} + +/* Scale (slider) */ +scale trough { + background: @bg_1; + border-radius: 4px; + min-height: 6px; +} +scale highlight { + background: @accent_color; + border-radius: 4px; +} +scale slider { + background: @ink_1; + border: 2px solid @accent_color; + border-radius: 50%; + min-width: 16px; + min-height: 16px; + box-shadow: 0 1px 4px alpha(black, 0.5); +} + +/* Progress bar (jauge horizontale type batterie) */ +progressbar trough { + background: @bg_1; + border: 1px solid @border_2; + border-radius: 4px; + box-shadow: inset 0 1px 2px alpha(black, 0.4); + min-height: 12px; +} +progressbar progress { + background: @success_color; + border-radius: 3px; + box-shadow: 0 0 8px alpha(@success_color, 0.45); +} + +/* Niveaux de progression sémantiques (à appliquer via add_css_class) */ +progressbar.warning progress { background: @warning_color; } +progressbar.error progress { background: @error_color; } +progressbar.info progress { background: @info_color; } + +/* Notebook / onglets */ +notebook header { + background: @bg_2; + border-bottom: 1px solid @border_2; +} +notebook tab { + padding: 8px 16px; + color: @ink_3; + border-top: 2px solid transparent; + font-family: 'JetBrains Mono', monospace; + font-size: 12px; +} +notebook tab:checked { + color: @ink_1; + border-top-color: @accent_color; + background: @bg_3; +} + +/* Popover */ +popover contents { + background: @bg_3; + color: @ink_1; + border: 1px solid @border_2; + border-radius: 10px; + padding: 6px; + box-shadow: 0 12px 32px alpha(black, 0.55); +} + +/* Menubutton / dropdown */ +menubutton button { + padding: 4px 8px; +} + +/* Status pill (badge) — à appliquer sur GtkLabel.status */ +label.status { + padding: 2px 8px; + border-radius: 999px; + font-family: 'JetBrains Mono', monospace; + font-size: 10px; + font-weight: 700; + letter-spacing: 0.06em; +} +label.status.ok { background: alpha(@success_color, 0.18); color: @success_color; } +label.status.warn { background: alpha(@warning_color, 0.18); color: @warning_color; } +label.status.error { background: alpha(@error_color, 0.18); color: @error_color; } +label.status.info { background: alpha(@info_color, 0.18); color: @info_color; } + +/* Texte monospace / terminal */ +label.mono, +.mono { + font-family: 'JetBrains Mono', monospace; +} +label.terminal, +.terminal { + font-family: 'Share Tech Mono', 'VT323', monospace; + letter-spacing: 0.02em; +} + +/* Carte tuile (à appliquer via add_css_class("tile")) */ +.tile, +.card { + background: @bg_3; + color: @ink_1; + border: 1px solid @border_2; + border-radius: 12px; + padding: 14px; + box-shadow: + inset 0 1px 0 alpha(white, 0.06), + inset 0 -1px 0 alpha(black, 0.4), + 0 2px 4px alpha(black, 0.4), + 0 6px 14px alpha(black, 0.45); +} + +/* Scrollbar */ +scrollbar slider { + background: @border_2; + border-radius: 4px; + min-width: 6px; + min-height: 6px; +} +scrollbar slider:hover { + background: @accent_soft; +} + +/* ============================================================ + THÈME CLAIR — à charger en alternative + Pour appliquer le thème clair, charger ce fichier puis + `tokens.gnome.light.css` (à dupliquer en remplaçant + les @define-color des fonds et encres) OU appliquer + un settings GTK light : + g_object_set(gtk_settings, "gtk-application-prefer-dark-theme", + FALSE, NULL); + Et fournir un fichier dérivé avec les valeurs ci-dessous : + ============================================================ */ +/* + bg_0: #b8b2a3 + bg_1: #d5d0c5 + bg_2: #dcd7cc + bg_3: #e3ded3 + bg_4: #ccc6b8 + bg_5: #bdb6a7 + ink_1: #28241f + ink_2: #3c3836 + ink_3: #5a544c + ink_4: #8a8278 + accent_color: #af3a03 + success_color: #3c911c + warning_color: #b57614 + error_color: #9d0006 + info_color: #427b58 + blue_color: #2d82a3 + purple_color: #8c468c +*/ diff --git a/tokens/tokens.json b/tokens/tokens.json new file mode 100644 index 0000000..915e0bf --- /dev/null +++ b/tokens/tokens.json @@ -0,0 +1,136 @@ +{ + "$schema": "design-tokens-v1", + "name": "mon design system — gruvbox seventies", + "version": "1.0.0", + "description": "Design system Gruvbox seventies. Orange brûlé, fond brun délavé en sombre / gris clair usé en clair. Deux thèmes dark/light parfaitement à parité.", + "themes": { + "dark": { + "bg": { + "0": { "value": "#221c17", "description": "Niveau le plus profond, rare" }, + "1": { "value": "#2a231d", "description": "Fond application principal" }, + "2": { "value": "#322a23", "description": "Panneaux (sidebar, headerbar)" }, + "3": { "value": "#3c332a", "description": "Cartes, tuiles" }, + "4": { "value": "#4a4035", "description": "Hover, état actif" }, + "5": { "value": "#5a4f43", "description": "Press, sélection forte" } + }, + "ink": { + "1": { "value": "#f2e5c7", "description": "Texte principal (cream)" }, + "2": { "value": "#d5c4a1", "description": "Texte secondaire" }, + "3": { "value": "#a89984", "description": "Labels, hints" }, + "4": { "value": "#7c6f64", "description": "Désactivé" } + }, + "accent": { + "primary": { "value": "#fe8019", "description": "Orange Gruvbox seventies" }, + "soft": { "value": "#d65d0e", "description": "Orange foncé (hover, bordures)" }, + "glow": { "value": "rgba(254, 128, 25, 0.35)" }, + "tint": { "value": "rgba(254, 128, 25, 0.12)" } + }, + "status": { + "ok": { "value": "#4dbb26" }, + "warn": { "value": "#fabd2f" }, + "err": { "value": "#fb4934" }, + "info": { "value": "#83a598" } + }, + "extra": { + "blue": { "value": "#3db0d1" }, + "purple": { "value": "#c882c8" } + }, + "border": { + "1": { "value": "rgba(168, 153, 132, 0.18)" }, + "2": { "value": "rgba(168, 153, 132, 0.32)" }, + "3": { "value": "rgba(168, 153, 132, 0.55)" } + } + }, + "light": { + "bg": { + "0": { "value": "#b8b2a3", "description": "Niveau le plus profond" }, + "1": { "value": "#d5d0c5", "description": "Fond application principal" }, + "2": { "value": "#dcd7cc", "description": "Panneaux" }, + "3": { "value": "#e3ded3", "description": "Cartes, tuiles" }, + "4": { "value": "#ccc6b8", "description": "Hover" }, + "5": { "value": "#bdb6a7", "description": "Press" } + }, + "ink": { + "1": { "value": "#28241f", "description": "Texte principal" }, + "2": { "value": "#3c3836", "description": "Texte secondaire" }, + "3": { "value": "#5a544c", "description": "Labels, hints" }, + "4": { "value": "#8a8278", "description": "Désactivé" } + }, + "accent": { + "primary": { "value": "#af3a03", "description": "Orange brûlé (variante contrastée)" }, + "soft": { "value": "#d65d0e" }, + "glow": { "value": "rgba(175, 58, 3, 0.28)" }, + "tint": { "value": "rgba(175, 58, 3, 0.08)" } + }, + "status": { + "ok": { "value": "#3c911c" }, + "warn": { "value": "#b57614" }, + "err": { "value": "#9d0006" }, + "info": { "value": "#427b58" } + }, + "extra": { + "blue": { "value": "#2d82a3" }, + "purple": { "value": "#8c468c" } + }, + "border": { + "1": { "value": "rgba(60, 56, 54, 0.15)" }, + "2": { "value": "rgba(60, 56, 54, 0.28)" }, + "3": { "value": "rgba(60, 56, 54, 0.5)" } + } + } + }, + "typography": { + "fonts": { + "ui": { "family": "Inter", "weights": [400, 500, 600, 700], "fallback": ["Cantarell", "system-ui", "sans-serif"] }, + "mono": { "family": "JetBrains Mono", "weights": [400, 500, 600, 700], "fallback": ["ui-monospace", "monospace"] }, + "terminal": { "family": "Share Tech Mono", "weights": [400], "fallback": ["VT323", "Courier New", "monospace"] } + }, + "scale": { + "label": { "size": 11, "weight": 500, "transform": "uppercase", "tracking": "0.08em", "family": "mono" }, + "caption": { "size": 12, "weight": 400, "family": "ui" }, + "body": { "size": 14, "weight": 400, "family": "ui" }, + "body-emph": { "size": 14, "weight": 600, "family": "ui" }, + "title": { "size": 18, "weight": 700, "family": "ui" }, + "h2": { "size": 22, "weight": 700, "family": "ui" }, + "h1": { "size": 28, "weight": 700, "family": "ui" }, + "display": { "size": 44, "weight": 700, "family": "ui" }, + "kpi": { "size": 28, "weight": 700, "family": "mono" } + } + }, + "radius": { + "xs": 3, + "sm": 4, + "md": 6, + "lg": 8, + "xl": 10, + "2xl": 12, + "pill": 999 + }, + "spacing": { + "1": 4, + "2": 6, + "3": 8, + "4": 10, + "5": 12, + "6": 14, + "7": 16, + "8": 18, + "9": 20, + "10": 24, + "12": 32, + "14": 40, + "16": 56 + }, + "shadows": { + "1": "0 1px 2px rgba(0,0,0,0.4)", + "2": "0 4px 12px rgba(0,0,0,0.45)", + "3": "0 12px 32px rgba(0,0,0,0.55)", + "press": "inset 0 2px 4px rgba(0,0,0,0.5)", + "tile3d": "inset 0 1px 0 rgba(255,230,180,0.12), inset 0 -1px 0 rgba(0,0,0,0.45), 0 1px 0 rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.4), 0 8px 18px rgba(0,0,0,0.5)" + }, + "motion": { + "fast": "60ms ease", + "normal": "180ms cubic-bezier(.3,.7,.3,1.2)", + "slow": "400ms cubic-bezier(.3,.6,.3,1)" + } +}