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

18
src/style.css
View file

@ -42,6 +42,15 @@
--deck-rose: hsl(346 72% 48%); --deck-rose: hsl(346 72% 48%);
--deck-clay: hsl(14 70% 44%); --deck-clay: hsl(14 70% 44%);
--deck-amber: hsl(30 90% 38%); --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 { .dark {
@ -81,6 +90,15 @@
--deck-rose: hsl(342 95% 76%); --deck-rose: hsl(342 95% 76%);
--deck-clay: hsl(14 72% 62%); --deck-clay: hsl(14 72% 62%);
--deck-amber: hsl(38 96% 70%); --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 { @theme inline {