From 6a80cbc34f1a29a4f5e77724d6d6ad0fd61304ef Mon Sep 17 00:00:00 2001 From: sucupira Date: Mon, 6 Jul 2026 20:55:50 -0400 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Design:=20Raffine=20les=20tokens?= =?UTF-8?q?=20(hi=C3=A9rarchie=20de=20texte,=20lavis=20dor=C3=A9s,=20lueur?= =?UTF-8?q?s)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Suite à l'analyse du vrai CSS d'unabyss.com (root tokens complets) : leur système est bien plus granulaire que le nôtre (8 niveaux de texte, opacités pré-mélangées en tokens, vocabulaire de lueur dorée à plusieurs usages). Emprunt de la STRUCTURE, pas des valeurs : - --ink-dim / --ink-ghost : deux niveaux de texte supplémentaires pour les métadonnées (coordonnées GPS) et le très discret, sans casser les 2 niveaux existants (--ink / --ink-soft) - --gold-wash-subtle / --gold-wash : fonds teintés or pré-mélangés, remplacent les oklch(...) ad hoc dispersés dans les composants - --glow-soft / --glow-strong : vocabulaire de lueur distinct d'une ombre générique — douce sur le titre du hero et la date du prochain lever, forte sur l'onglet actif (Science, Dogon) Co-Authored-By: Claude Sonnet 5 --- src/islands/map/ObservationMap.svelte | 2 +- src/observer.njk | 2 +- src/styles/components/cards.css | 4 ++-- src/styles/components/hero.css | 2 ++ src/styles/components/tabs.css | 1 + src/styles/tokens.css | 13 +++++++++++++ 6 files changed, 20 insertions(+), 4 deletions(-) diff --git a/src/islands/map/ObservationMap.svelte b/src/islands/map/ObservationMap.svelte index be04fcb..41565c5 100644 --- a/src/islands/map/ObservationMap.svelte +++ b/src/islands/map/ObservationMap.svelte @@ -30,7 +30,7 @@ const marker = L.marker([site.lat, site.lon], { icon: markerIcon(false) }).addTo(map); const desc = site[`description_${locale}`] ?? site.description_fr; marker.bindPopup( - `${site.name}
${desc}
${site.lat}°N, ${site.lon}°O — ${site.alt} m` + `${site.name}
${desc}
${site.lat}°N, ${site.lon}°O — ${site.alt} m` ); marker.on("popupopen", () => marker.setIcon(markerIcon(true))); marker.on("popupclose", () => marker.setIcon(markerIcon(false))); diff --git a/src/observer.njk b/src/observer.njk index c6c2e24..0afc117 100644 --- a/src/observer.njk +++ b/src/observer.njk @@ -70,7 +70,7 @@ eleventyComputed:

  • {{ site.name }}

    {{ site["description_" + locale] or site.description_fr }}

    -

    {{ site.lat }}°N, {{ site.lon }}°O — {{ site.alt }} m

    +

    {{ site.lat }}°N, {{ site.lon }}°O — {{ site.alt }} m

    • {% endfor %} diff --git a/src/styles/components/cards.css b/src/styles/components/cards.css index 0fe69b1..3ee0e2e 100644 --- a/src/styles/components/cards.css +++ b/src/styles/components/cards.css @@ -14,8 +14,8 @@ } .card.info-card.essential { - box-shadow: 0 0 0 2px var(--gold), var(--shadow-sm); - background: light-dark(oklch(96% 0.04 85), oklch(20% 0.035 85)); + box-shadow: 0 0 0 2px var(--gold), var(--glow-soft), var(--shadow-sm); + background: var(--gold-wash); } .info-card-header { diff --git a/src/styles/components/hero.css b/src/styles/components/hero.css index 8a3c1f1..710cad7 100644 --- a/src/styles/components/hero.css +++ b/src/styles/components/hero.css @@ -21,6 +21,7 @@ .hero-title .accent { color: var(--gold); + text-shadow: var(--glow-soft); } .hero-subtitle { @@ -46,6 +47,7 @@ font-family: var(--font-display); font-size: var(--text-3); color: var(--gold); + text-shadow: var(--glow-soft); } .hero-cta { diff --git a/src/styles/components/tabs.css b/src/styles/components/tabs.css index 8a25024..1cab188 100644 --- a/src/styles/components/tabs.css +++ b/src/styles/components/tabs.css @@ -60,6 +60,7 @@ background: var(--gold-surface); border-color: var(--gold-surface); color: oklch(20% 0.03 265); + box-shadow: var(--glow-strong); } @media (max-width: 47.99em) { diff --git a/src/styles/tokens.css b/src/styles/tokens.css index 49b30da..1196d26 100644 --- a/src/styles/tokens.css +++ b/src/styles/tokens.css @@ -5,8 +5,13 @@ Deux thèmes conceptuellement liés au sujet : Aube (clair) / Nuit (sombre). Le noir de nuit est volontairement presque neutre (chroma minimal) — un "premium near-black" plutôt qu'un bleu nuit saturé. */ + /* Hiérarchie de texte à 4 niveaux (inspirée de la granularité observée + chez unabyss.com — text/secondary/tertiary/muted...) : primaire, atténué, + discret (métadonnées : coordonnées GPS, légendes), fantôme (à peine là). */ --ink: light-dark(oklch(23% 0.03 265), oklch(96% 0.01 85)); --ink-soft: light-dark(oklch(38% 0.03 265), oklch(78% 0.015 85)); + --ink-dim: light-dark(oklch(52% 0.02 265), oklch(60% 0.015 85)); + --ink-ghost: light-dark(oklch(68% 0.015 265), oklch(42% 0.015 85)); --surface: light-dark(oklch(96% 0.015 85), oklch(11% 0.012 265)); --surface-raised: light-dark(oklch(99% 0.008 85), oklch(15% 0.015 265)); --surface-sunk: light-dark(oklch(91% 0.02 85), oklch(8% 0.012 265)); @@ -15,6 +20,14 @@ /* Or de Sirius : variante lisible (texte/liens) + variante décorative (glows) */ --gold: light-dark(oklch(45% 0.15 75), oklch(82% 0.15 87)); --gold-surface: oklch(80% 0.16 85); + /* Lavis dorés pré-mélangés : fonds/bordures teintés sans color-mix() ad hoc + dispersé dans chaque fichier — deux intensités suffisent à nos usages. */ + --gold-wash-subtle: light-dark(oklch(94% 0.025 85), oklch(24% 0.03 85)); + --gold-wash: light-dark(oklch(90% 0.05 85), oklch(28% 0.05 85)); + /* Vocabulaire de lueur, distinct d'une ombre générique : douce pour un + texte/accent au repos, forte pour un état actif/sélectionné. */ + --glow-soft: 0 0 20px light-dark(oklch(80% 0.15 87 / 20%), oklch(82% 0.15 87 / 30%)); + --glow-strong: 0 0 30px light-dark(oklch(80% 0.15 87 / 35%), oklch(82% 0.15 87 / 55%)); /* Corail (héritage Caraïbe du v1 du projet) : accent secondaire chaud, à côté de l'or plutôt qu'à sa place — inspiré du ton "burnt orange" d'unabyss.com. */