379 lines
9.6 KiB
CSS
379 lines
9.6 KiB
CSS
/* ============================================================
|
|
tokens.gnome.css — Tokens pour applications GNOME (GTK 4 / libadwaita)
|
|
Gruvbox seventies · v1.0
|
|
============================================================
|
|
|
|
Usage dans une app GTK 4 / libadwaita :
|
|
|
|
#include <gtk/gtk.h>
|
|
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
|
|
*/
|