ADR 0021 – Charte graphique C3 « Atlas dense Anorys »

Statut : Accepté (2026-10-15)

Direction retenue par Aurélien : densité dans l’esprit d’IntelliJ (pas de VS Code), interface claire et légère où toutes les informations restent visibles. Ni pastel, ni aspect Notion. Accent vert Anorys #157A6E, gris #F0F0F0 et #FAFAFA, titres en Signika, interface en Heebo, code en JetBrains Mono.

Contexte

Le front utilisait le thème Material par défaut : palette azure, police Roboto chargée depuis Google Fonts, densité 0, coins arrondis en pilule et grand tiroir de navigation de 220 px. La maquette C3 propose une barre d’outils latérale fine, des onglets, un arbre compact (lignes de 24 px), des propriétés en grille de deux colonnes, un panneau de contexte découpé en sections et une barre d’état.

Décision

Une seule source : src/styles/charte-c3.css

Toutes les couleurs, polices et mesures sont des variables --sb-* : surfaces (chrome, panel, editor, line, hover, selection), texte, marque et états (accent, warn, tag…), familles de types, couleurs du logo. Le thème clair est déclaré sur :root (color-scheme: light), le sombre sur :root[data-theme='dark'] (color-scheme: dark). Les composants utilisent ces variables, jamais une couleur en dur.

Material raccordé à la charte

styles.scss construit la palette primaire sur #157A6E (ng generate @angular/material:theme-color, fichier src/styles/_theme-colors.scss), fixe la typographie (Heebo pour le texte, Signika pour les titres) et la densité à -2. Ensuite, mat.theme-overrides fait pointer les jetons système vers les variables de la charte : primary, surface*, outline*, secondary-container pour la sélection, tertiary pour l’avertissement, tailles 13 et 15 px, coins à 8 px. Le thème Material suit donc le basculement clair/sombre sans être compilé deux fois. En densité -2, un champ Material en apparence fill perd son libellé visible. Tous les champs passent donc en outline par MAT_FORM_FIELD_DEFAULT_OPTIONS, y compris ceux générés par Formly, qui étaient auparavant en fill. AG Grid reçoit les mêmes variables par provideGlobalGridOptions (themeQuartz.withParams, lignes de 28 px).

Thème sombre : il suit le système

ThemeService (core/theme.ts) pose data-theme sur <html> d’après prefers-color-scheme et suit ses changements. Un script de trois lignes dans index.html pose déjà la bonne valeur avant l’amorçage d’Angular, pour éviter un flash clair en mode sombre. theme-color est déclaré pour chacun des deux schémas. L’interface ne propose pas encore de bascule manuelle.

Polices auto-hébergées

Les polices passent par @fontsource (Signika 500/600, Heebo 400/500/600, JetBrains Mono 400), sous-ensemble latin seulement, qui couvre le français, y compris œ. Il n’y a plus d’appel à Google Fonts pour le texte. Les fichiers woff2 sont des ressources séparées : le bundle initial reste à 2,02 Mo, contre 2,05 Mo avant. Les icônes Material Symbols restent servies par Google, ce point est noté au backlog.

Couleur et forme par type de nœud

Le front pose l’attribut data-node-type avec le nom du type tel qu’il vient de config/. La charte associe cinq familles à une couleur et à une forme : projet (carré), tache (rond), note (page à coin replié), personne (rond), ressource (lien). Les autres types retombent sur la couleur neutre. Les familles personne et ressource anticipent des types qui n’existent pas encore dans config/. Deux classes sont prévues : .sb-type-icon colore une icône, .sb-type-mark dessine une pastille de 8 px. Elles sont utilisées dans la colonne « Type » de la liste, dans l’inbox et dans les résultats de la palette.

Ce rapprochement vit dans la feuille de style de la charte, et non dans le code TypeScript ou Java. C’est une entorse assumée à la règle « le domaine vit dans config/ » : les noms des familles reprennent ceux des types d’exemple. Une clé color (ou family) dans les définitions de type la lèvera ; elle est notée au backlog.

Coquille

Les éléments suivants remplacent la barre Material et le tiroir de 220 px :

• un en-tête de 40 px (--sb-chrome) avec le logo, clair ou sombre selon le thème, suivi du nom « Second Brain » en Signika, du bouton de la palette et de « Nouveau » ;
• une barre d’outils latérale de 40 px, avec des icônes de 20 px, des bulles d’aide et aria-current ; l’aria-label de l’entrée Inbox porte le nombre d’éléments à trier, et le badge reste décoratif ;
• un lien d’évitement « Aller au contenu » vers <main>, qui est déclaré cdkScrollable pour que les panneaux superposés (listes, autocomplétions, menus) suivent le défilement ;
• une barre d’état de 24 px qui affiche le nombre d’éléments à trier et le raccourci de la palette.

Les pages gardent leur structure. Leurs marges sont réduites à 12/16 px et la largeur maximale passe à 1440 px.

Logo et icônes

Le logo « Hexa facetté » est un hexagone de six triangles issus du centre, avec un point orange au centre. Il existe en plusieurs fichiers SVG dans public/ : logo.svg, logo-sombre.svg, logo-mono.svg, icone.svg, icone-sombre.svg, et favicon.svg, identique à icone.svg. Les PNG 16, 32, 48, 64, 180, 192 et 512 et le favicon.ico (16/32/48, PNG embarqués) ont été générés une fois depuis icone.svg avec Chrome sans interface. Ils sont versionnés tels quels et à régénérer si icone.svg change. index.html déclare favicon.svg, favicon.ico (sizes="any") et apple-touch-icon (icone-180.png). Le projet n’a pas encore de manifeste PWA.

Reporté (backlog)

• Onglets de nœuds ouverts, arbre compact de la hiérarchie (lignes de 24 px), propriétés d’aspect en grille de deux colonnes, panneau de contexte à sections (liens, rétroliens, fichier, historique) dans l’éditeur : ce sont des refontes de mise en page, pas un habillage.
• Bascule clair/sombre manuelle et mémorisée.
• Material Symbols auto-hébergées : fait, voir l’ADR 0022.
• Clé de couleur ou de famille dans les définitions de type.
• Callouts et coloration du code aux couleurs de la charte : ils gardent leurs teintes ADR 0010.

Conséquences

• Toute nouvelle couleur passe par une variable --sb-*, ajoutée dans les deux thèmes.
• Les composants Material restent utilisables sans surcharge locale : la charte agit au niveau des jetons système.
• Le thème sombre suit le système dès maintenant. Tout nouveau composant doit être vérifié dans les deux thèmes.

Amendement (2026-10-15)

Les icônes Material Symbols sont désormais auto-hébergées (ADR 0022). Plus aucune police n’est chargée depuis Google.

Amendement (2026-10-15, ADR 0024)

La mise en page de la maquette C3 complète cette charte :

• Thème : il suit toujours le système par défaut, mais il peut être forcé en clair ou en sombre dans les paramètres. Le choix est mémorisé, et theme-color le suit.
• Grille de propriétés : les champs Material y sont compactés par mat.form-field-overrides et mat.chips-overrides, sous .sb-props seulement.
• Cartes des pages : elles sont aplaties par des règles globales (!important sur les marges internes de mat-card). Seules ces exceptions dérogent au principe « composants Material sans surcharge locale ».