Personnalisation du thème Espresso
Personnalisation du thème Espresso
Espresso est le système de design du bureau de Dodock. Il définit des variables CSS (des « tokens ») pour les couleurs, les arrondis, les espacements, la typographie et les ombres. Les composants de l'interface (boutons es-button, badges es-badge…) utilisent ces variables.
Cette page s'adresse aux développeurs. Le thème ne se règle pas depuis un formulaire : pour l'adapter, vous surchargez des variables dans le CSS d'une application. Pour le site web public, utilisez plutôt le Thème du site web.
Les familles de variables
Les fichiers sont dans frappe/public/css/espresso/.
| Famille | Fichier | Exemples |
|---|---|---|
| Surfaces (fonds) | colors.css | --surface-base, --surface-gray-1 à --surface-gray-…, --surface-blue-…, --surface-red-… |
| Encre (textes, icônes) | colors.css | --ink-base, --ink-gray-8, --ink-blue-link, --ink-red-… |
| Contours | colors.css | --outline-base, --outline-gray-2 |
| Arrondis | radius.css | échelle --radius-0 à --radius-9, et --radius-sm (4px), --radius (8px), --radius-md (10px), --radius-lg (12px), --radius-full (9999px) |
| Espacement | spacing.css | --spacing (0.25rem), unité de base : calc(var(--spacing) * 4) |
| Typographie | typography.css | --text-xs, --text-sm (13px), --text-base (14px), --text-lg (16px), --text-xl… |
| Ombres | effects.css | --elevation-sm à --elevation-2xl, --shadow-sm |
Chaque couleur existe en version claire (:root, [data-theme="light"]) et sombre ([data-theme="dark"]). Le passage au thème sombre change la valeur des variables, pas leur nom.
Les anciennes variables (--bg-color, --fg-color, --border-radius…) restent définies dans legacy.css pour les applications existantes. Elles pointent vers les variables Espresso. N'en utilisez pas dans un nouveau code.
Badges
Un badge est un élément es-badge. Ses attributs règlent son style :
| Attribut | Valeurs |
|---|---|
data-theme | gray (défaut), blue, green, amber, red, violet |
data-variant | solid, subtle (défaut), outline, ghost |
data-size | sm, md (défaut), lg |
Les anciennes couleurs d'indicateur restent acceptées et sont converties : orange et yellow deviennent amber, purple devient violet. Dans un script, créez plutôt les badges avec frappe.ui.badge (voir Personnaliser les boutons et badges).
Surcharger des variables
- Dans votre application, créez un fichier CSS, par exemple
mon_app/public/css/theme.css. - Déclarez-le dans le fichier
hooks.pyde l'application :app_include_css = "/assets/mon_app/css/theme.css" - Redéfinissez les variables à changer, pour le thème clair et le thème sombre si besoin.
- Lancez
bench build --app mon_app, puis rechargez le bureau.
Exemple
Exemple fictif. Vous voulez des coins plus arrondis et un fond de barre latérale plus clair.
:root,
[data-theme="light"] {
--radius: 10px;
--radius-md: 12px;
--surface-sidebar: var(--surface-base);
}
Les boutons, les champs et les cartes qui utilisent --radius et --radius-md prennent les nouveaux arrondis. Le thème sombre garde ses valeurs, car seul le bloc clair est surchargé.