aiolabs/sollunar-pitch
9
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

fix(deck): make the mycelium visualization light-mode aware

Browse source 
Slide 3's SVG hardcoded a dark-tuned palette (light-green threads/nodes at
low opacity) and referenced the removed --color-sand/ink vars, so it washed
out / broke in light mode. Route soil, sky, threads, nodes, ground line and
ghost/plus marks through mode-aware --myc-* tokens (darker & more saturated
in light), and use the flipping accent tokens for flower fills, the pulse
and labels. Reads clearly in both themes now.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Patrick Mulligan 2026-07-31 22:13:25 +02:00
commit 4f84bec477
2 changed files with 42 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

48
src/deck/components/MyceliumNetwork.vue
View file

@ -79,9 +79,9 @@ const cha = entityById('chateau') // farm
// surface flowers: the three experiences + two faint "future" ones.
// (Archipelago is the mycelium itself — the network below, not a flower.)
const flowers = [
{ x: 230, kind: 'bloom', color: 'var(--color-indigo-400)', name: sol.name, tag: sol.role },
{ x: 500, kind: 'festival', color: 'var(--color-rose-400)', name: fest.name, tag: fest.role },
{ x: 770, kind: 'bloom', color: 'var(--color-clay-400)', name: cha.name, tag: cha.role },
{ x: 230, kind: 'bloom', color: 'var(--color-indigo)', name: sol.name, tag: sol.role },
{ x: 500, kind: 'festival', color: 'var(--color-rose)', name: fest.name, tag: fest.role },
{ x: 770, kind: 'bloom', color: 'var(--color-clay)', name: cha.name, tag: cha.role },
{ x: 100, kind: 'ghost' },
{ x: 900, kind: 'ghost' },
] as const
@ -104,12 +104,12 @@ const festivalCaps = [
>
<defs>
<linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="hsl(160 40% 10%)" stop-opacity="0" />
<stop offset="100%" stop-color="hsl(160 45% 12%)" stop-opacity="0.5" />
<stop offset="0%" stop-color="var(--myc-sky-top)" stop-opacity="0" />
<stop offset="100%" stop-color="var(--myc-sky-bot)" stop-opacity="0.5" />
</linearGradient>
<linearGradient id="soilGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="hsl(28 40% 10%)" stop-opacity="0.55" />
<stop offset="100%" stop-color="hsl(28 45% 6%)" stop-opacity="0.15" />
<stop offset="0%" stop-color="var(--myc-soil-top)" stop-opacity="0.55" />
<stop offset="100%" stop-color="var(--myc-soil-bot)" stop-opacity="0.15" />
</linearGradient>
<filter id="soft" x="-40%" y="-40%" width="180%" height="180%">
<feGaussianBlur stdDeviation="4" />
@ -124,8 +124,8 @@ const festivalCaps = [
:y1="GROUND"
x2="1000"
:y2="GROUND"
stroke="var(--color-pine-500)"
stroke-opacity="0.35"
stroke="var(--myc-thread)"
stroke-opacity="0.5"
stroke-dasharray="2 6"
/>
@ -135,7 +135,7 @@ const festivalCaps = [
v-for="(e, i) in edges"
:key="`glow-${i}`"
:d="thread(e, i)"
stroke="var(--color-pine-500)"
stroke="var(--myc-glow)"
stroke-opacity="0.18"
stroke-width="6"
filter="url(#soft)"
@ -144,8 +144,8 @@ const festivalCaps = [
v-for="(e, i) in edges"
:key="`line-${i}`"
:d="thread(e, i)"
stroke="var(--color-pine-400)"
stroke-opacity="0.5"
stroke="var(--myc-thread)"
stroke-opacity="0.6"
stroke-width="1.4"
/>
<path
@ -154,7 +154,7 @@ const festivalCaps = [
class="myc-pulse"
:style="{ animationDelay: `${(i % 6) * 0.5}s` }"
:d="thread(e, i)"
stroke="var(--color-amber-300)"
stroke="var(--color-amber)"
stroke-width="2.2"
stroke-linecap="round"
/>
@ -170,7 +170,7 @@ const festivalCaps = [
:cx="n[0]"
:cy="n[1]"
r="4"
fill="var(--color-pine-300)"
fill="var(--myc-node)"
/>
</g>
@ -216,8 +216,8 @@ const festivalCaps = [
/>
</template>
<!-- solunar mark: sun + moon spark -->
<circle :cx="f.x" :cy="GROUND - 96" r="3.4" fill="var(--color-amber-300)" />
<circle :cx="f.x + 9" :cy="GROUND - 100" r="2" fill="var(--color-indigo-300)" />
<circle :cx="f.x" :cy="GROUND - 96" r="3.4" fill="var(--color-amber)" />
<circle :cx="f.x + 9" :cy="GROUND - 100" r="2" fill="var(--color-indigo)" />
</g>
</template>
@ -226,8 +226,8 @@ const festivalCaps = [
<path
:d="`M ${f.x} ${GROUND} C ${f.x - 5} ${GROUND - 22}, ${f.x + 5} ${GROUND - 38}, ${f.x} ${GROUND - 60}`"
fill="none"
stroke="var(--color-sand-dim)"
stroke-opacity="0.3"
stroke="var(--color-fg-muted)"
stroke-opacity="0.45"
stroke-dasharray="3 5"
stroke-width="4"
stroke-linecap="round"
@ -235,16 +235,16 @@ const festivalCaps = [
<path
:d="`M ${f.x - 26} ${GROUND - 60} Q ${f.x} ${GROUND - 90} ${f.x + 26} ${GROUND - 60} Q ${f.x} ${GROUND - 68} ${f.x - 26} ${GROUND - 60} Z`"
fill="none"
stroke="var(--color-sand-dim)"
stroke-opacity="0.35"
stroke="var(--color-fg-muted)"
stroke-opacity="0.5"
stroke-dasharray="3 5"
stroke-width="1.6"
/>
<g class="myc-plus" :style="{ animationDelay: `${i * 0.7}s` }">
<circle :cx="f.x" :cy="GROUND - 76" r="9" fill="hsl(160 24% 9%)" stroke="var(--color-amber-400)" stroke-opacity="0.6" />
<circle :cx="f.x" :cy="GROUND - 76" r="9" fill="var(--deck-bg)" stroke="var(--color-amber)" stroke-opacity="0.7" />
<path
:d="`M ${f.x - 4} ${GROUND - 76} h 8 M ${f.x} ${GROUND - 80} v 8`"
stroke="var(--color-amber-400)"
stroke="var(--color-amber)"
stroke-width="1.6"
stroke-linecap="round"
/>
@ -306,12 +306,12 @@ const festivalCaps = [
.myc-label-tag {
font-size: 10px;
letter-spacing: 0.22em;
fill: var(--color-sand-dim);
fill: var(--color-fg-muted);
}
.myc-zone {
font-size: 11px;
letter-spacing: 0.24em;
fill: var(--color-sand-dim);
fill: var(--color-fg-muted);
opacity: 0.7;
}

18
src/style.css
View file

@ -42,6 +42,15 @@
--deck-rose: hsl(346 72% 48%);
--deck-clay: hsl(14 70% 44%);
--deck-amber: hsl(30 90% 38%);
/* mycelium diagram · LIGHT — darker/saturated so it doesn't wash out */
--myc-glow: hsl(162 55% 42%);
--myc-thread: hsl(162 58% 32%);
--myc-node: hsl(162 62% 30%);
--myc-sky-top: hsl(160 35% 74%);
--myc-sky-bot: hsl(160 38% 66%);
--myc-soil-top: hsl(32 48% 56%);
--myc-soil-bot: hsl(32 42% 64%);
}
.dark {
@ -81,6 +90,15 @@
--deck-rose: hsl(342 95% 76%);
--deck-clay: hsl(14 72% 62%);
--deck-amber: hsl(38 96% 70%);
/* mycelium diagram · DARK — the original light-on-dark palette */
--myc-glow: hsl(160 60% 40%);
--myc-thread: hsl(159 45% 50%);
--myc-node: hsl(158 42% 62%);
--myc-sky-top: hsl(160 40% 10%);
--myc-sky-bot: hsl(160 45% 12%);
--myc-soil-top: hsl(28 40% 10%);
--myc-soil-bot: hsl(28 45% 6%);
}
@theme inline {