/* * Généré par `rake hoot:theme` depuis src/theme-dark.tokens. * NE PAS ÉDITER À LA MAIN — les deux blocs ci-dessous doivent rester * identiques, et c'est la seule raison d'être de cette génération. */ html[data-theme="sombre"] { /* Dit au navigateur de rendre ses propres contrôles en sombre : sélecteur de date, ascenseurs, menus natifs. Aucune règle CSS ne les atteint autrement, et ils resteraient clairs au milieu de la page. */ color-scheme: dark; --surface-app: var(--hoot-color-neutral-1000); --surface-card: var(--hoot-color-neutral-950); --surface-sunken: var(--hoot-color-neutral-900); --surface-nav: var(--hoot-color-base-black); --surface-nav-active: var(--hoot-color-purple-900); --text-main: var(--hoot-color-neutral-25); --text-light: var(--hoot-color-neutral-300); --text-faint: var(--hoot-color-neutral-500); --text-contrast: var(--hoot-color-neutral-1000); --text-accent: var(--hoot-color-purple-300); --text-on-accent: var(--hoot-color-base-white); --border-light: var(--hoot-color-neutral-900); --border-neutral: var(--hoot-color-neutral-800); /* Un cran PLUS CLAIR que son homologue clair n'est plus sombre : sur un fond sombre, c'est en s'éclaircissant qu'un contour se détache. neutral-500 tient 3,94:1 sur la carte, là où neutral-700 retomberait à 2,38:1. */ --border-strong: var(--hoot-color-neutral-500); --accent: var(--hoot-color-purple-500); --draft: var(--hoot-color-electric-violet-400); --accent-strong: var(--hoot-color-purple-400); --accent-quiet: var(--hoot-color-neutral-900); --accent-alt: var(--hoot-color-purple-300); --accent-alt-quiet: var(--hoot-color-neutral-900); /* Les états montent d'un cran vers le clair : sur fond sombre, un danger-700 passe sous le seuil de lisibilité que la même teinte tient sur blanc. */ --danger: var(--hoot-color-danger-300); --danger-quiet: var(--hoot-color-neutral-900); --warning: var(--hoot-color-tertiary-300); --warning-quiet: var(--hoot-color-neutral-900); --success: var(--hoot-color-success-300); --success-quiet: var(--hoot-color-neutral-900); /* Les teintes d'axe montent dans la bande claire, pour la même raison que les états : un brand-600 sur fond sombre passe sous le seuil. Leur `quiet` tombe sur le neutre, comme TOUS les `quiet` de ce fichier. Les cartes d'axes deviennent donc du même gris, et la teinte ne se dit plus que par la barre et la pastille — c'est cohérent avec le reste du sombre, où aucun fond n'est teinté. Conséquence à ne pas manquer : la pastille se remplit d'une teinte CLAIRE, et son glyphe doit donc virer au sombre. C'est --text-contrast qui le fait, et c'est pourquoi les règles écrivent celui-ci plutôt que --text-on-accent, qui reste blanc dans les deux thèmes. */ --tone-indigo: var(--hoot-color-brand-300); --tone-indigo-quiet: var(--hoot-color-neutral-900); --tone-teal: var(--hoot-color-secondary-300); --tone-teal-quiet: var(--hoot-color-neutral-900); --tone-amber: var(--hoot-color-tertiary-300); --tone-amber-quiet: var(--hoot-color-neutral-900); --tone-rose: var(--hoot-color-pink-300); --tone-rose-quiet: var(--hoot-color-neutral-900); --tone-violet: var(--hoot-color-electric-violet-300); --tone-violet-quiet: var(--hoot-color-neutral-900); --tone-slate: var(--hoot-color-neutral-300); --tone-slate-quiet: var(--hoot-color-neutral-900); /* L'encre s'ÉCLAIRCIT ici, quand elle s'assombrissait en clair : elle écrit sur le neutre du `quiet`, pas sur un fond teinté. L'indigo monte d'un cran de plus que ses sœurs — au cran 300 il tombait à 4,26:1, juste sous le seuil que les autres passent largement. */ --tone-indigo-ink: var(--hoot-color-brand-200); --tone-teal-ink: var(--hoot-color-secondary-300); --tone-amber-ink: var(--hoot-color-tertiary-300); --tone-rose-ink: var(--hoot-color-pink-300); --tone-violet-ink: var(--hoot-color-electric-violet-300); --tone-slate-ink: var(--hoot-color-neutral-300); --shadow-card: 0 1px 2px rgba(0, 0, 0, .4); --shadow-raised: 0 4px 12px rgba(0, 0, 0, .55); --shadow-overlay: 0 8px 24px rgba(0, 0, 0, .65); --overlay-scrim: rgba(0, 0, 0, .62); --focus-ring: 0 0 0 3px rgba(108, 94, 246, .35); --glow-danger: 0 1px 2px rgba(229, 115, 115, .45); /* Le sombre a ses PROPRES pas, choisis dans la bande de clarté L 0.48–0.67 que le mode impose — ce n'est pas un basculement automatique du clair. Les créneaux 2, 4 et 6 gardent le leur : ils y tombaient déjà. */ --chart-1: var(--hoot-color-brand-400); --chart-2: var(--hoot-color-pink-500); --chart-3: var(--hoot-color-secondary-600); --chart-4: var(--hoot-color-purple-500); --chart-5: var(--hoot-color-tertiary-700); --chart-6: var(--hoot-color-electric-violet-600); --chart-grid: var(--hoot-color-neutral-900); --chart-ink: var(--hoot-color-neutral-300); /* L'ANCRAGE S'INVERSE. En clair « plus » est plus sombre ; en sombre « plus » est plus clair. Deux jeux de pas CHOISIS, pas une inversion calculée du clair — même raisonnement que pour les six créneaux catégoriels ci-dessus. Mesuré : l'extrémité proche de la surface tient 2,51:1 sur --surface-card sombre, contre un plancher de 2:1. */ --ordinal-1: var(--hoot-color-brand-500); --ordinal-2: var(--hoot-color-brand-400); --ordinal-3: var(--hoot-color-brand-300); --ordinal-4: var(--hoot-color-brand-200); --ordinal-5: var(--hoot-color-brand-100); /* LE PIVOT BOUGE, et ce n'est pas un oubli : à neutral-300 (L* 66,2) il n'y avait plus de place AU-DESSUS de lui pour deux pas d'un bras qui doit s'éclaircir. Le pivot doit être le pas le plus SOMBRE de la rampe ici — l'inverse du clair, comme pour l'ordinale — et chaque bras s'éclaircit ensuite de façon MONOTONE en s'en éloignant. neutral-500 (L* 50,7) rouvre cette place : tient 2,59:1 sur blanc et 3,94:1 sur le sombre, et laisse deux pas de marge à chaque bras avant le blanc pur. Calculé (L* CIE, cf. test/lib/ramp_readability_test.rb) : pivot 50,7 puis 61,8 / 72,1 côté négatif et 64,4 / 73,0 côté positif — les deux bras monotones, écarts 11,1/10,3 et 13,7/8,6, tous au-dessus du plancher de 6,0. */ --diverging-neg-2: var(--hoot-color-danger-200); --diverging-neg-1: var(--hoot-color-danger-300); --diverging-mid: var(--hoot-color-neutral-500); --diverging-pos-1: var(--hoot-color-success-500); --diverging-pos-2: var(--hoot-color-success-400); } @media (prefers-color-scheme: dark) { html[data-theme="auto"] { /* Dit au navigateur de rendre ses propres contrôles en sombre : sélecteur de date, ascenseurs, menus natifs. Aucune règle CSS ne les atteint autrement, et ils resteraient clairs au milieu de la page. */ color-scheme: dark; --surface-app: var(--hoot-color-neutral-1000); --surface-card: var(--hoot-color-neutral-950); --surface-sunken: var(--hoot-color-neutral-900); --surface-nav: var(--hoot-color-base-black); --surface-nav-active: var(--hoot-color-purple-900); --text-main: var(--hoot-color-neutral-25); --text-light: var(--hoot-color-neutral-300); --text-faint: var(--hoot-color-neutral-500); --text-contrast: var(--hoot-color-neutral-1000); --text-accent: var(--hoot-color-purple-300); --text-on-accent: var(--hoot-color-base-white); --border-light: var(--hoot-color-neutral-900); --border-neutral: var(--hoot-color-neutral-800); /* Un cran PLUS CLAIR que son homologue clair n'est plus sombre : sur un fond sombre, c'est en s'éclaircissant qu'un contour se détache. neutral-500 tient 3,94:1 sur la carte, là où neutral-700 retomberait à 2,38:1. */ --border-strong: var(--hoot-color-neutral-500); --accent: var(--hoot-color-purple-500); --draft: var(--hoot-color-electric-violet-400); --accent-strong: var(--hoot-color-purple-400); --accent-quiet: var(--hoot-color-neutral-900); --accent-alt: var(--hoot-color-purple-300); --accent-alt-quiet: var(--hoot-color-neutral-900); /* Les états montent d'un cran vers le clair : sur fond sombre, un danger-700 passe sous le seuil de lisibilité que la même teinte tient sur blanc. */ --danger: var(--hoot-color-danger-300); --danger-quiet: var(--hoot-color-neutral-900); --warning: var(--hoot-color-tertiary-300); --warning-quiet: var(--hoot-color-neutral-900); --success: var(--hoot-color-success-300); --success-quiet: var(--hoot-color-neutral-900); /* Les teintes d'axe montent dans la bande claire, pour la même raison que les états : un brand-600 sur fond sombre passe sous le seuil. Leur `quiet` tombe sur le neutre, comme TOUS les `quiet` de ce fichier. Les cartes d'axes deviennent donc du même gris, et la teinte ne se dit plus que par la barre et la pastille — c'est cohérent avec le reste du sombre, où aucun fond n'est teinté. Conséquence à ne pas manquer : la pastille se remplit d'une teinte CLAIRE, et son glyphe doit donc virer au sombre. C'est --text-contrast qui le fait, et c'est pourquoi les règles écrivent celui-ci plutôt que --text-on-accent, qui reste blanc dans les deux thèmes. */ --tone-indigo: var(--hoot-color-brand-300); --tone-indigo-quiet: var(--hoot-color-neutral-900); --tone-teal: var(--hoot-color-secondary-300); --tone-teal-quiet: var(--hoot-color-neutral-900); --tone-amber: var(--hoot-color-tertiary-300); --tone-amber-quiet: var(--hoot-color-neutral-900); --tone-rose: var(--hoot-color-pink-300); --tone-rose-quiet: var(--hoot-color-neutral-900); --tone-violet: var(--hoot-color-electric-violet-300); --tone-violet-quiet: var(--hoot-color-neutral-900); --tone-slate: var(--hoot-color-neutral-300); --tone-slate-quiet: var(--hoot-color-neutral-900); /* L'encre s'ÉCLAIRCIT ici, quand elle s'assombrissait en clair : elle écrit sur le neutre du `quiet`, pas sur un fond teinté. L'indigo monte d'un cran de plus que ses sœurs — au cran 300 il tombait à 4,26:1, juste sous le seuil que les autres passent largement. */ --tone-indigo-ink: var(--hoot-color-brand-200); --tone-teal-ink: var(--hoot-color-secondary-300); --tone-amber-ink: var(--hoot-color-tertiary-300); --tone-rose-ink: var(--hoot-color-pink-300); --tone-violet-ink: var(--hoot-color-electric-violet-300); --tone-slate-ink: var(--hoot-color-neutral-300); --shadow-card: 0 1px 2px rgba(0, 0, 0, .4); --shadow-raised: 0 4px 12px rgba(0, 0, 0, .55); --shadow-overlay: 0 8px 24px rgba(0, 0, 0, .65); --overlay-scrim: rgba(0, 0, 0, .62); --focus-ring: 0 0 0 3px rgba(108, 94, 246, .35); --glow-danger: 0 1px 2px rgba(229, 115, 115, .45); /* Le sombre a ses PROPRES pas, choisis dans la bande de clarté L 0.48–0.67 que le mode impose — ce n'est pas un basculement automatique du clair. Les créneaux 2, 4 et 6 gardent le leur : ils y tombaient déjà. */ --chart-1: var(--hoot-color-brand-400); --chart-2: var(--hoot-color-pink-500); --chart-3: var(--hoot-color-secondary-600); --chart-4: var(--hoot-color-purple-500); --chart-5: var(--hoot-color-tertiary-700); --chart-6: var(--hoot-color-electric-violet-600); --chart-grid: var(--hoot-color-neutral-900); --chart-ink: var(--hoot-color-neutral-300); /* L'ANCRAGE S'INVERSE. En clair « plus » est plus sombre ; en sombre « plus » est plus clair. Deux jeux de pas CHOISIS, pas une inversion calculée du clair — même raisonnement que pour les six créneaux catégoriels ci-dessus. Mesuré : l'extrémité proche de la surface tient 2,51:1 sur --surface-card sombre, contre un plancher de 2:1. */ --ordinal-1: var(--hoot-color-brand-500); --ordinal-2: var(--hoot-color-brand-400); --ordinal-3: var(--hoot-color-brand-300); --ordinal-4: var(--hoot-color-brand-200); --ordinal-5: var(--hoot-color-brand-100); /* LE PIVOT BOUGE, et ce n'est pas un oubli : à neutral-300 (L* 66,2) il n'y avait plus de place AU-DESSUS de lui pour deux pas d'un bras qui doit s'éclaircir. Le pivot doit être le pas le plus SOMBRE de la rampe ici — l'inverse du clair, comme pour l'ordinale — et chaque bras s'éclaircit ensuite de façon MONOTONE en s'en éloignant. neutral-500 (L* 50,7) rouvre cette place : tient 2,59:1 sur blanc et 3,94:1 sur le sombre, et laisse deux pas de marge à chaque bras avant le blanc pur. Calculé (L* CIE, cf. test/lib/ramp_readability_test.rb) : pivot 50,7 puis 61,8 / 72,1 côté négatif et 64,4 / 73,0 côté positif — les deux bras monotones, écarts 11,1/10,3 et 13,7/8,6, tous au-dessus du plancher de 6,0. */ --diverging-neg-2: var(--hoot-color-danger-200); --diverging-neg-1: var(--hoot-color-danger-300); --diverging-mid: var(--hoot-color-neutral-500); --diverging-pos-1: var(--hoot-color-success-500); --diverging-pos-2: var(--hoot-color-success-400); } } /* LE CHEVRON DES SELECTS DE FILTRES. Il est dessiné en `background-image`, parce qu'un `