/* ============================================================================= Habillage d'AFFiNE (project.babykare.fr) aux couleurs et à la police de l'ERP. Servi en /babykare/babykare..css, ajouté par inject.mjs au démarrage du conteneur dans les DEUX sources de HTML d'AFFiNE 0.27.4 (lues dans le source au tag v0.27.4) : - static/assets-manifest.json : le HTML de /workspace/* est GÉNÉRÉ par DocRendererController à partir de la liste `css` de ce fichier, lue une seule fois au démarrage (core/doc-renderer/controller.ts, readHtmlAssets) ; - static/selfhost.html : servi tel quel pour toutes les autres routes (core/selfhost/static.ts, res.sendFile). Couleurs : uniquement des tokens de app/assets/stylesheets/tokens.css (aucun hex inventé). Variables : uniquement des noms DÉFINIS par styles.1056fe91.css de l'image 0.27.4 ; inject.mjs signale au démarrage toute variable surchargée ici que la version d'AFFiNE en cours ne définit plus (risque n° 1 d'une mise à jour). Spécificité : AFFiNE pose ses valeurs sur `[data-theme=light]` et `[data-theme=dark]` (0,1,0), et pas seulement sur : le conteneur de l'éditeur (`div.page-editor-container`) porte SON PROPRE data-theme (mesuré le 07/10 dans l'instance), donc y redéclare les valeurs d'origine, qui priment sur celles héritées de . D'où le couple `:root[data-theme=…], :root [data-theme=…]` (0,2,0) : il atteint chaque porteur de l'attribut et gagne quel que soit l'ordre de chargement. Mode clair par défaut (décision d'Alex du 08/10/2026) : posé par theme-default.js, pas par cette feuille. Un utilisateur qui choisit « Sombre » dans Réglages > Apparence le garde ; l'ERP n'ayant pas de palette sombre, seuls la police et l'accent terracotta s'y appliquent. ============================================================================= */ /* ── Police : Open Sans HÉBERGÉE avec AFFiNE (décision d'Alex du 08/10/2026 : « l'option qui a les meilleures performances »). Mesuré le 08/10 depuis le Mac : par Google Fonts, la police n'arrive qu'après DEUX connexions de plus, ouvertes l'une après l'autre (fonts.googleapis.com 61 ms jusqu'au TLS, puis fonts.gstatic.com 58 ms) ; ici, elle part sur la connexion déjà ouverte vers project.babykare.fr. Aux rechargements, elle est revalidée (304) en parallèle, comme les fichiers d'AFFiNE eux-mêmes (Cache-Control max-age=0, mesuré). Fichiers : les polices VARIABLES servies par Google Fonts le 08/10/2026 (Open Sans v44, un fichier par sous-ensemble pour toutes les graisses), latin (42 964 o) et latin étendu (30 624 o), plages Unicode recopiées de la réponse de Google. Licence SIL OFL 1.1 : fonts/OFL.txt. Pas d'italique (comme l'ERP) : le navigateur l'incline. */ @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url(/babykare/fonts/open-sans-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url(/babykare/fonts/open-sans-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ── Police (les deux modes) ───────────────────────────────────────────────── --font-sans de l'ERP ; les polices emoji d'AFFiNE restent en repli. */ html:root { --affine-font-family: "Open Sans", ui-sans-serif, system-ui, -apple-system, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --affine-font-sans-family: "Open Sans", ui-sans-serif, system-ui, -apple-system, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } /* ── Mode clair : palette chaude ───────────────────────────────────────────── Accent : #8a5446 (--color-accent-text / --color-accent-strong) partout où un texte est posé dessus ou en est fait (6,11:1 sous du blanc) ; #AE7C72 (--color-accent) seulement pour les composants non textuels (3,54:1 sur blanc, seuil WCAG 1.4.11 de 3:1). */ :root[data-theme=light], :root [data-theme=light] { /* accent porteur de texte */ --affine-brand-color: #8a5446; --affine-primary-color: #8a5446; --affine-primary-color-04: rgba(138, 84, 70, 0.04); --affine-text-emphasis-color: #8a5446; --affine-v2-text-emphasis: #8a5446; --affine-v2-button-primary: #8a5446; --affine-v2-icon-activated: #8a5446; --affine-v2-selfhost-button-primary: #8a5446; /* accent décoratif (bordures, interrupteurs, cases, indicateurs) */ --affine-v2-input-border-active: #AE7C72; --affine-v2-layer-insideBorder-primaryBorder: #AE7C72; --affine-v2-loading-foreground: #AE7C72; --affine-v2-radio-active-chekced: #AE7C72; --affine-v2-tab-divider-indicator: #AE7C72; --affine-v2-toggle-background: #AE7C72; --affine-v2-button-checkBox: #AE7C72; --affine-v2-table-focusBorder: #AE7C72; --affine-v2-table-indicator-activated: #AE7C72; --affine-active-shadow: 0px 0px 0px 2px rgba(174, 124, 114, 0.3); --affine-large-button-effect: 0px 12px 21px 4px rgba(174, 124, 114, 0.15); --affine-v2-button-actionActive: rgba(174, 124, 114, 0.08); --affine-v2-database-focusBackground: rgba(174, 124, 114, 0.04); --affine-v2-table-focusBackground: rgba(174, 124, 114, 0.04); /* texte et icônes : --color-text-primary, --color-text-secondary, --color-text-muted */ --affine-text-primary-color: #1a1208; --affine-v2-text-primary: #1a1208; --affine-v2-tab-fontColor-active: #1a1208; --affine-text-secondary-color: #6b5c4e; --affine-v2-text-secondary: #6b5c4e; --affine-v2-icon-primary: #6d5e51; /* fonds : la page reste blanche (--color-surface), les fonds secondaires prennent le warm white de l'ERP (--color-bg), le tertiaire --color-border-subtle */ --affine-background-secondary-color: #F6F1EC; --affine-v2-layer-background-secondary: #F6F1EC; --affine-v2-selfhost-layer-background-secondary: #F6F1EC; --affine-background-tertiary-color: #efe9e0; --affine-v2-layer-background-tertiary: #efe9e0; /* bordures : --color-border ; survols en noir chaud (base de --shadow-*) */ --affine-border-color: #e8e0d5; --affine-v2-layer-insideBorder-border: #e8e0d5; --affine-hover-color: rgba(26, 18, 8, 0.04); --affine-v2-layer-background-hoverOverlay: rgba(26, 18, 8, 0.05); --affine-v2-selfhost-layer-background-sidebarBg-sidebarBg: #FCEAC5; } /* ── Barre latérale : la crème de l'ERP (--color-sidebar-*) ────────────────── Sur le web, AFFiNE peint la barre avec layer/background/primary, la même variable que la page (modules/app-sidebar/views/index.css.ts). On la redéfinit DANS le sous-arbre de la barre, repéré par son data-testid (attribut de test, stable d'une version à l'autre, contrairement aux classes vanilla-extract hachées). Les menus ouverts depuis la barre sont rendus hors du sous-arbre (portail) et gardent le fond blanc. */ :root[data-theme=light] [data-testid="app-sidebar-wrapper"] { --affine-v2-layer-background-primary: #FCEAC5; --affine-v2-layer-background-hoverOverlay: rgba(174, 124, 114, 0.12); --affine-hover-color: rgba(174, 124, 114, 0.12); --affine-v2-layer-insideBorder-border: rgba(174, 124, 114, 0.20); --affine-text-primary-color: #4a3728; --affine-v2-text-primary: #4a3728; --affine-v2-text-secondary: rgba(74, 55, 40, 0.75); --affine-v2-icon-primary: #4a3728; } /* Entrée active : --color-sidebar-active et --color-sidebar-active-text (5,6:1). AFFiNE pose le même voile au survol et à l'état actif (menu-item/index.css.ts, `&[data-active="true"]`) ; l'ERP les distingue, d'où cette règle. */ :root[data-theme=light] [data-testid="app-sidebar-wrapper"] [data-active="true"] { background: rgba(174, 124, 114, 0.20); color: #6e453c; } /* ── Mode sombre : l'accent seul ───────────────────────────────────────────── #AE7C72 fait 5,2:1 sur le fond sombre d'AFFiNE (#141414) : il porte le texte d'emphase en sombre. Les boutons gardent #8a5446 sous du blanc (6,11:1). */ :root[data-theme=dark], :root [data-theme=dark] { --affine-brand-color: #AE7C72; --affine-primary-color: #8a5446; --affine-text-emphasis-color: #AE7C72; --affine-v2-text-emphasis: #AE7C72; --affine-v2-button-primary: #8a5446; --affine-v2-icon-activated: #AE7C72; --affine-v2-input-border-active: #AE7C72; --affine-v2-layer-insideBorder-primaryBorder: #AE7C72; --affine-v2-loading-foreground: #AE7C72; --affine-v2-radio-active-chekced: #AE7C72; --affine-v2-tab-divider-indicator: #AE7C72; --affine-v2-toggle-background: #8a5446; --affine-v2-button-checkBox: #AE7C72; --affine-v2-table-focusBorder: #AE7C72; --affine-v2-table-indicator-activated: #AE7C72; --affine-active-shadow: 0px 0px 0px 2px rgba(174, 124, 114, 0.3); } /* ── Cases cochées : un bleu ÉCRIT EN DUR, hors de portée des variables ────── AFFiNE 0.27.4 dessine la case cochée avec CheckBoxCheckSolidIcon({ style: 'color: #1E96EB' }) : couleur littérale dans l'attribut style du SVG, sans variable (blocksuite/affine/blocks/list/src/utils/get-list-icon.ts, ligne 63, lu au tag ; mesuré le 08/10 dans l'instance : `svg.style.color` = rgb(30, 150, 235) alors que toutes nos variables valent terracotta au même endroit). Le bundle servi porte la même écriture à deux autres endroits (case d'une colonne de base de données, liste de sélection) : d'où un sélecteur sur la valeur écrite, et non sur la seule liste. Un attribut style ne se surcharge que par !important. #AE7C72 : composant non textuel, 3,54:1 sur blanc et 5,2:1 sur le fond sombre, au-dessus du seuil de 3:1 (WCAG 1.4.11). Hors de portée, signalé : l'animation au moment de cocher (box-shadow passé à Element.animate) et les traits du tableau blanc dessinés au canvas. */ svg[style*="1e96eb" i] { color: #AE7C72 !important; }