docs: fondation projet (CLAUDE.md, design system, spec + plan jalon 1)
Ignore les dépôts de référence imbriqués (linux-update-dashboard, nas-ops). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,204 @@
|
||||
/* ============================================================
|
||||
ui-tokens.css
|
||||
Design tokens Gruvbox Seventies — dark (par défaut) + light.
|
||||
Sombre délavé (pas noir intense) / gris clair usé (pas blanc pur).
|
||||
============================================================ */
|
||||
|
||||
:root,
|
||||
[data-theme="dark"] {
|
||||
/* Couches de fond — sombre délavé, brun-gris chaud */
|
||||
--bg-0: #221c17; /* niveau le plus profond (rare) */
|
||||
--bg-1: #2a231d; /* fond app */
|
||||
--bg-2: #322a23; /* panneaux */
|
||||
--bg-3: #3c332a; /* cartes */
|
||||
--bg-4: #4a4035; /* hover */
|
||||
--bg-5: #5a4f43; /* press / actif */
|
||||
|
||||
/* Surfaces translucides */
|
||||
--surf-glass: rgba(50, 42, 35, 0.72);
|
||||
--surf-glass-strong: rgba(50, 42, 35, 0.92);
|
||||
--surf-glass-soft: rgba(50, 42, 35, 0.42);
|
||||
|
||||
/* Bordures */
|
||||
--border-1: rgba(168, 153, 132, 0.18);
|
||||
--border-2: rgba(168, 153, 132, 0.32);
|
||||
--border-3: rgba(168, 153, 132, 0.55);
|
||||
|
||||
/* Texte */
|
||||
--ink-1: #f2e5c7; /* cream principal */
|
||||
--ink-2: #d5c4a1; /* secondaire */
|
||||
--ink-3: #a89984; /* labels / hints */
|
||||
--ink-4: #7c6f64; /* désactivé */
|
||||
|
||||
/* Accent orange seventies */
|
||||
--accent: #fe8019;
|
||||
--accent-soft: #d65d0e;
|
||||
--accent-glow: rgba(254, 128, 25, 0.35);
|
||||
--accent-tint: rgba(254, 128, 25, 0.12);
|
||||
|
||||
/* Statuts */
|
||||
--ok: #4dbb26;
|
||||
--ok-glow: rgba(77, 187, 38, 0.45);
|
||||
--warn: #fabd2f;
|
||||
--warn-glow: rgba(250, 189, 47, 0.45);
|
||||
--err: #fb4934;
|
||||
--err-glow: rgba(251, 73, 52, 0.4);
|
||||
--info: #83a598;
|
||||
--info-glow: rgba(131, 165, 152, 0.4);
|
||||
|
||||
/* Couleurs additionnelles (datavis, badges, catégories) */
|
||||
--blue: #3db0d1;
|
||||
--blue-glow: rgba(61, 176, 209, 0.45);
|
||||
--purple: #c882c8;
|
||||
--purple-glow: rgba(200, 130, 200, 0.45);
|
||||
|
||||
/* Ombres */
|
||||
--shadow-1: 0 1px 2px rgba(0,0,0,0.4);
|
||||
--shadow-2: 0 4px 12px rgba(0,0,0,0.45);
|
||||
--shadow-3: 0 12px 32px rgba(0,0,0,0.55);
|
||||
--shadow-press: inset 0 2px 4px rgba(0,0,0,0.5);
|
||||
|
||||
/* Relief 3D pour tuiles : highlight haut + ombre bas + ombre portée */
|
||||
--tile-3d:
|
||||
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);
|
||||
--tile-3d-strong:
|
||||
inset 0 1px 0 rgba(255, 230, 180, 0.18),
|
||||
inset 0 -2px 0 rgba(0, 0, 0, 0.55),
|
||||
0 1px 0 rgba(0, 0, 0, 0.4),
|
||||
0 4px 8px rgba(0, 0, 0, 0.5),
|
||||
0 14px 28px rgba(0, 0, 0, 0.55);
|
||||
|
||||
/* Polices */
|
||||
--font-ui: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
|
||||
--font-terminal: 'Share Tech Mono', 'VT323', 'Courier New', monospace;
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
/* Gris clair usé, légèrement chaud (pas blanc pur) */
|
||||
--bg-0: #b8b2a3;
|
||||
--bg-1: #d5d0c5;
|
||||
--bg-2: #dcd7cc;
|
||||
--bg-3: #e3ded3;
|
||||
--bg-4: #ccc6b8;
|
||||
--bg-5: #bdb6a7;
|
||||
|
||||
--surf-glass: rgba(220, 215, 204, 0.72);
|
||||
--surf-glass-strong: rgba(220, 215, 204, 0.94);
|
||||
--surf-glass-soft: rgba(220, 215, 204, 0.42);
|
||||
|
||||
--border-1: rgba(60, 56, 54, 0.15);
|
||||
--border-2: rgba(60, 56, 54, 0.28);
|
||||
--border-3: rgba(60, 56, 54, 0.5);
|
||||
|
||||
--ink-1: #28241f;
|
||||
--ink-2: #3c3836;
|
||||
--ink-3: #5a544c;
|
||||
--ink-4: #8a8278;
|
||||
|
||||
--accent: #af3a03;
|
||||
--accent-soft: #d65d0e;
|
||||
--accent-glow: rgba(175, 58, 3, 0.28);
|
||||
--accent-tint: rgba(175, 58, 3, 0.08);
|
||||
|
||||
--ok: #3c911c;
|
||||
--ok-glow: rgba(60, 145, 28, 0.32);
|
||||
--warn: #b57614;
|
||||
--warn-glow: rgba(181, 118, 20, 0.35);
|
||||
--err: #9d0006;
|
||||
--err-glow: rgba(157, 0, 6, 0.3);
|
||||
--info: #427b58;
|
||||
--info-glow: rgba(66, 123, 88, 0.3);
|
||||
|
||||
/* Couleurs additionnelles (datavis, badges, catégories) */
|
||||
--blue: #2d82a3;
|
||||
--blue-glow: rgba(45, 130, 163, 0.32);
|
||||
--purple: #8c468c;
|
||||
--purple-glow: rgba(140, 70, 140, 0.32);
|
||||
|
||||
--shadow-1: 0 1px 2px rgba(40,30,20,0.12);
|
||||
--shadow-2: 0 4px 12px rgba(40,30,20,0.15);
|
||||
--shadow-3: 0 12px 32px rgba(40,30,20,0.2);
|
||||
--shadow-press: inset 0 2px 4px rgba(40,30,20,0.18);
|
||||
|
||||
/* Relief light : highlight haut blanc cassé + ombre marquée */
|
||||
--tile-3d:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.55),
|
||||
inset 0 -1px 0 rgba(60, 50, 40, 0.18),
|
||||
0 1px 0 rgba(60, 50, 40, 0.1),
|
||||
0 2px 4px rgba(60, 50, 40, 0.12),
|
||||
0 8px 18px rgba(60, 50, 40, 0.18);
|
||||
--tile-3d-strong:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.7),
|
||||
inset 0 -2px 0 rgba(60, 50, 40, 0.22),
|
||||
0 1px 0 rgba(60, 50, 40, 0.15),
|
||||
0 4px 8px rgba(60, 50, 40, 0.18),
|
||||
0 14px 28px rgba(60, 50, 40, 0.22);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Reset minimal + base typo
|
||||
============================================================ */
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 14px;
|
||||
color: var(--ink-1);
|
||||
background: var(--bg-1);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.mono { font-family: var(--font-mono); }
|
||||
.terminal { font-family: var(--font-terminal); letter-spacing: 0.02em; }
|
||||
.label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-3);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Surfaces — relief 3D marqué, AUCUN effet hover
|
||||
============================================================ */
|
||||
.glass {
|
||||
background: var(--surf-glass);
|
||||
backdrop-filter: blur(12px) saturate(140%);
|
||||
-webkit-backdrop-filter: blur(12px) saturate(140%);
|
||||
border: 1px solid var(--border-2);
|
||||
box-shadow: var(--tile-3d);
|
||||
}
|
||||
.glass-strong {
|
||||
background: var(--surf-glass-strong);
|
||||
backdrop-filter: blur(16px) saturate(150%);
|
||||
-webkit-backdrop-filter: blur(16px) saturate(150%);
|
||||
border: 1px solid var(--border-3);
|
||||
box-shadow: var(--tile-3d-strong);
|
||||
}
|
||||
|
||||
/* Élément cliquable : pas de hover, mais réelle pression 3D au clic */
|
||||
.interactive {
|
||||
cursor: pointer;
|
||||
transition: transform .04s ease-out, box-shadow .04s, background .04s;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.interactive:active {
|
||||
transform: translateY(1px);
|
||||
box-shadow: var(--shadow-press) !important;
|
||||
filter: brightness(0.92);
|
||||
}
|
||||
|
||||
/* Scrollbar custom */
|
||||
*::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||
*::-webkit-scrollbar-track { background: transparent; }
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background: var(--border-2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
*::-webkit-scrollbar-thumb:hover { background: var(--accent-soft); }
|
||||
@@ -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 <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
|
||||
*/
|
||||
@@ -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)"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user