/* ============================================================ 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 */