Rename to generic color names (black, gray, orange, etc.) instead of Ash-specific names

This commit is contained in:
Richard Zink committed 2026-10-07 11:52:47 +02:00
1 parent b140a8b27b
commit 302291dd62
2 files changed
+143 -134

No files matched your search

+73 -73
View File
@@ -18,7 +18,7 @@
border: 1px solid rgba(230, 223, 209, 0.3);
border-radius: 0.6vh;
padding: 1vh 1vw;
color: var(--ash-bone);
color: var(--bone);
font-family: monospace;
font-size: 10px;
line-height: 1.4;
@@ -27,14 +27,14 @@
.debug-title {
font-size: 12px;
font-weight: bold;
color: var(--ash-ember);
color: var(--orange);
border-bottom: 1px solid rgba(230, 223, 209, 0.3);
padding-bottom: 4px;
margin-bottom: 6px;
}
.debug-section {
font-size: 10px;
color: var(--ash-icon);
color: var(--icon);
margin-top: 6px;
margin-bottom: 2px;
}
@@ -45,22 +45,22 @@
padding: 1px 0;
}
.debug-label {
color: var(--ash-icon);
color: var(--icon);
min-width: 80px;
}
.libel {
color: var(--ash-icon);
color: var(--icon);
min-width: 50px;
}
.hex {
color: var(--ash-bone);
color: var(--bone);
font-size: 10px;
font-family: monospace;
}
.swatch {
width: 14px;
height: 14px;
border: 1px solid var(--ash-stone);
border: 1px solid var(--stone);
border-radius: 2px;
}
@media (orientation: portrait) and (max-width: 700px) {
@@ -73,7 +73,7 @@
top: 2vh;
right: 2vh;
bottom: 2vh;
color: var(--ash-bone);
color: var(--bone);
background: rgba(28, 27, 31, 0.7);
padding: 1vh 1vw;
border-radius: 0.6vh;
@@ -132,14 +132,14 @@
gap: 0.6vw;
}
.info-label {
color: var(--ash-icon);
color: var(--icon);
}
.info-value {
color: var(--ash-bone);
color: var(--bone);
font-weight: bold;
}
.info-sub {
color: var(--ash-stone);
color: var(--stone);
font-size: 0.85em;
margin-left: 4px;
}
@@ -168,7 +168,7 @@
}
.weather-current-detail {
font-size: 1em;
color: var(--ash-icon);
color: var(--icon);
line-height: 1.3;
}
.weather-day {
@@ -182,11 +182,11 @@
font-size: 1em;
}
.weather-day-name {
color: var(--ash-bone);
color: var(--bone);
font-weight: bold;
}
.weather-day-minmax {
color: var(--ash-bone);
color: var(--bone);
font-size: 0.85em;
}
.weather-day-slots {
@@ -209,11 +209,11 @@
}
.weather-slot-icon svg { width: 100%; height: 100%; }
.weather-slot-label {
color: var(--ash-stone);
color: var(--stone);
font-size: 0.8em;
}
.weather-slot-temp {
color: var(--ash-bone);
color: var(--bone);
}
</style>
</head>
@@ -241,102 +241,102 @@
<div id="info-panel">
<svg id="analog-clock" viewBox="0 0 280 280">
<!-- Clock face -->
<circle cx="140" cy="140" r="135" fill="rgba(28,27,31,0.3)" stroke="var(--ash-bone)" stroke-width="2"/>
<circle cx="140" cy="140" r="135" fill="rgba(28,27,31,0.3)" stroke="var(--bone)" stroke-width="2"/>
<!-- Hour marks -->
<g id="hour-marks"></g>
<!-- Sun orbit (radius 65) -->
<circle cx="140" cy="140" r="65" stroke="var(--ash-border)" stroke-width="1" fill="none" stroke-dasharray="2,3" opacity="0.6"/>
<circle cx="140" cy="140" r="65" stroke="var(--gray-dark)" stroke-width="1" fill="none" stroke-dasharray="2,3" opacity="0.6"/>
<!-- Moon orbit (radius 88) -->
<circle cx="140" cy="140" r="88" stroke="var(--ash-border)" stroke-width="1" fill="none" stroke-dasharray="2,3" opacity="0.6"/>
<circle cx="140" cy="140" r="88" stroke="var(--gray-dark)" stroke-width="1" fill="none" stroke-dasharray="2,3" opacity="0.6"/>
<!-- Sun arc (from sunrise to sunset) -->
<path id="sun-arc" d="" stroke="var(--ash-ember)" stroke-width="2.5" fill="none"/>
<path id="sun-arc" d="" stroke="var(--orange)" stroke-width="2.5" fill="none"/>
<!-- Moon arc (from moonrise to moonset) -->
<path id="moon-arc" d="" stroke="var(--ash-icon)" stroke-width="2.5" fill="none"/>
<path id="moon-arc" d="" stroke="var(--icon)" stroke-width="2.5" fill="none"/>
<!-- Sun rise arrow (pointing in / up at sunrise) -->
<g id="sun-rise-arrow" fill="var(--ash-ember)">
<g id="sun-rise-arrow" fill="var(--orange)">
<polygon points="0,-9 8,0 -9,0"/>
</g>
<!-- Sun set arrow (pointing out / down at sunset) -->
<g id="sun-set-arrow" fill="var(--ash-ember)">
<g id="sun-set-arrow" fill="var(--orange)">
<polygon points="0,9 8,0 -9,0"/>
</g>
<!-- Moon rise arrow -->
<g id="moon-rise-arrow" fill="var(--ash-icon)">
<g id="moon-rise-arrow" fill="var(--icon)">
<polygon points="0,-9 8,0 -9,0"/>
</g>
<!-- Moon set arrow -->
<g id="moon-set-arrow" fill="var(--ash-icon)">
<g id="moon-set-arrow" fill="var(--icon)">
<polygon points="0,9 8,0 -9,0"/>
</g>
<!-- Sun zenith marker (diamond shape, small) -->
<g id="sun-zenith-marker" fill="var(--ash-ember)">
<g id="sun-zenith-marker" fill="var(--orange)">
<polygon points="0,-5 5,0 0,5 -5,0"/>
</g>
<!-- Moon zenith marker removed -->
<!-- Sun position (rendered after arcs/arrows so it's visible) -->
<circle id="rpg-sun-glow" cx="140" cy="140" r="14" fill="var(--ash-ember)" opacity="0.4"/>
<circle id="rpg-sun" cx="140" cy="140" r="8" fill="var(--ash-ember)"/>
<circle id="rpg-sun-core" cx="140" cy="140" r="3.5" fill="var(--ash-chalk)"/>
<circle id="rpg-sun-glow" cx="140" cy="140" r="14" fill="var(--orange)" opacity="0.4"/>
<circle id="rpg-sun" cx="140" cy="140" r="8" fill="var(--orange)"/>
<circle id="rpg-sun-core" cx="140" cy="140" r="3.5" fill="var(--chalk)"/>
<!-- Moon position (with phase) -->
<g id="rpg-moon">
<circle id="rpg-moon-bg" cx="0" cy="0" r="10" fill="var(--ash-panel)" stroke="var(--ash-stone)" stroke-width="1"/>
<path id="rpg-moon-lit" d="" fill="var(--ash-bone)"/>
<path id="rpg-moon-dark" d="" fill="var(--ash-mid)"/>
<circle id="rpg-moon-bg" cx="0" cy="0" r="10" fill="var(--dark)" stroke="var(--stone)" stroke-width="1"/>
<path id="rpg-moon-lit" d="" fill="var(--bone)"/>
<path id="rpg-moon-dark" d="" fill="var(--gray)"/>
</g>
<!-- Clock hands (on top of everything) -->
<line id="hour-hand" x1="140" y1="140" x2="140" y2="49" stroke="var(--ash-bone)" stroke-width="7" stroke-linecap="round" opacity="0.7"/>
<line id="minute-hand" x1="140" y1="140" x2="140" y2="28" stroke="var(--ash-bone)" stroke-width="5" stroke-linecap="round" opacity="0.7"/>
<line id="second-hand" x1="140" y1="140" x2="140" y2="20" stroke="var(--ash-blood)" stroke-width="2.5" stroke-linecap="round"/>
<circle cx="140" cy="140" r="5" fill="var(--ash-blood)"/>
<line id="hour-hand" x1="140" y1="140" x2="140" y2="49" stroke="var(--bone)" stroke-width="7" stroke-linecap="round" opacity="0.7"/>
<line id="minute-hand" x1="140" y1="140" x2="140" y2="28" stroke="var(--bone)" stroke-width="5" stroke-linecap="round" opacity="0.7"/>
<line id="second-hand" x1="140" y1="140" x2="140" y2="20" stroke="var(--red)" stroke-width="2.5" stroke-linecap="round"/>
<circle cx="140" cy="140" r="5" fill="var(--red)"/>
</svg>
<div id="digital-clock">00:00:00</div>
<div class="info-row">
<div class="info-icon">
<svg viewBox="0 0 24 24" fill="var(--ash-ember)"><circle cx="12" cy="12" r="4"/><g stroke="var(--ash-ember)" stroke-width="2" stroke-linecap="round"><line x1="12" y1="2" x2="12" y2="5"/><line x1="12" y1="19" x2="12" y2="22"/><line x1="2" y1="12" x2="5" y2="12"/><line x1="19" y1="12" x2="22" y2="12"/><line x1="4.9" y1="4.9" x2="6.9" y2="6.9"/><line x1="17.1" y1="17.1" x2="19.1" y2="19.1"/><line x1="4.9" y1="19.1" x2="6.9" y2="17.1"/><line x1="17.1" y1="6.9" x2="19.1" y2="4.9"/></g></svg>
<svg viewBox="0 0 24 24" fill="var(--orange)"><circle cx="12" cy="12" r="4"/><g stroke="var(--orange)" stroke-width="2" stroke-linecap="round"><line x1="12" y1="2" x2="12" y2="5"/><line x1="12" y1="19" x2="12" y2="22"/><line x1="2" y1="12" x2="5" y2="12"/><line x1="19" y1="12" x2="22" y2="12"/><line x1="4.9" y1="4.9" x2="6.9" y2="6.9"/><line x1="17.1" y1="17.1" x2="19.1" y2="19.1"/><line x1="4.9" y1="19.1" x2="6.9" y2="17.1"/><line x1="17.1" y1="6.9" x2="19.1" y2="4.9"/></g></svg>
</div>
<div class="info-content"><span class="info-label">Aufgang</span><span><span class="info-value" id="sunrise-value">--:--</span><span class="info-sub" id="sunrise-when"></span></span></div>
</div>
<div class="info-row">
<div class="info-icon">
<svg viewBox="0 0 24 24" fill="var(--ash-ember)"><circle cx="12" cy="12" r="4"/><line x1="12" y1="12" x2="12" y2="3" stroke="var(--ash-ember)" stroke-width="2"/></svg>
<svg viewBox="0 0 24 24" fill="var(--orange)"><circle cx="12" cy="12" r="4"/><line x1="12" y1="12" x2="12" y2="3" stroke="var(--orange)" stroke-width="2"/></svg>
</div>
<div class="info-content"><span class="info-label">Zenit Sonne</span><span><span class="info-value" id="sun-zenith-value">--:--</span><span class="info-sub" id="sun-zenith-when"></span></span></div>
</div>
<div class="info-row">
<div class="info-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="var(--ash-ember)" stroke-width="2"><path d="M3 12 A9 9 0 0 1 21 12 Z"/></svg>
<svg viewBox="0 0 24 24" fill="none" stroke="var(--orange)" stroke-width="2"><path d="M3 12 A9 9 0 0 1 21 12 Z"/></svg>
</div>
<div class="info-content"><span class="info-label">Untergang</span><span><span class="info-value" id="sunset-value">--:--</span><span class="info-sub" id="sunset-when"></span></span></div>
</div>
<div class="info-row">
<div class="info-icon">
<svg id="moon-phase-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="var(--ash-panel)"/></svg>
<svg id="moon-phase-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="var(--dark)"/></svg>
</div>
<div class="info-content"><span class="info-label">Mondphase</span><span class="info-value" id="moon-phase-text">--</span></div>
</div>
<div class="info-row">
<div class="info-icon">
<svg viewBox="0 0 24 24" fill="var(--ash-icon)"><path d="M12 2 a10 10 0 1 0 0 20 a8 8 0 1 1 0 -16 a6 6 0 1 1 0 8"/></svg>
<svg viewBox="0 0 24 24" fill="var(--icon)"><path d="M12 2 a10 10 0 1 0 0 20 a8 8 0 1 1 0 -16 a6 6 0 1 1 0 8"/></svg>
</div>
<div class="info-content"><span class="info-label">Mond auf</span><span><span class="info-value" id="moonrise-value">--:--</span><span class="info-sub" id="moonrise-when"></span></span></div>
</div>
<div class="info-row">
<div class="info-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="var(--ash-icon)" stroke-width="2"><path d="M3 12 A9 9 0 0 1 21 22 Z"/></svg>
<svg viewBox="0 0 24 24" fill="none" stroke="var(--icon)" stroke-width="2"><path d="M3 12 A9 9 0 0 1 21 22 Z"/></svg>
</div>
<div class="info-content"><span class="info-label">Mond unter</span><span><span class="info-value" id="moonset-value">--:--</span><span class="info-sub" id="moonset-when"></span></span></div>
</div>
@@ -387,26 +387,26 @@ var effect = (VANTA.CLOUDS2 || VANTA.CLOUDS)({
var PASSAU_LAT = 48.5667;
var PASSAU_LON = 13.4319;
// Read Ash palette colors from CSS variables
function getAshColors() {
// Read color palette from CSS variables
function getColors() {
var root = getComputedStyle(document.documentElement);
return {
void: root.getPropertyValue('--ash-void').trim(),
panel: root.getPropertyValue('--ash-panel').trim(),
raised: root.getPropertyValue('--ash-raised').trim(),
border: root.getPropertyValue('--ash-border').trim(),
mid: root.getPropertyValue('--ash-mid').trim(),
ash: root.getPropertyValue('--ash-ash').trim(),
stone: root.getPropertyValue('--ash-stone').trim(),
icon: root.getPropertyValue('--ash-icon').trim(),
bone: root.getPropertyValue('--ash-bone').trim(),
chalk: root.getPropertyValue('--ash-chalk').trim(),
ember: root.getPropertyValue('--ash-ember').trim(),
gold: root.getPropertyValue('--ash-gold').trim(),
blood: root.getPropertyValue('--ash-blood').trim(),
rust: root.getPropertyValue('--ash-rust').trim(),
steel: root.getPropertyValue('--ash-steel').trim(),
steelLight: root.getPropertyValue('--ash-steel-light').trim()
void: root.getPropertyValue('--black').trim(),
panel: root.getPropertyValue('--dark').trim(),
raised: root.getPropertyValue('--gray-darker').trim(),
border: root.getPropertyValue('--gray-dark').trim(),
mid: root.getPropertyValue('--gray').trim(),
ash: root.getPropertyValue('--gray-light').trim(),
stone: root.getPropertyValue('--stone').trim(),
icon: root.getPropertyValue('--icon').trim(),
bone: root.getPropertyValue('--bone').trim(),
chalk: root.getPropertyValue('--chalk').trim(),
ember: root.getPropertyValue('--orange').trim(),
gold: root.getPropertyValue('--yellow').trim(),
blood: root.getPropertyValue('--red').trim(),
rust: root.getPropertyValue('--brown').trim(),
steel: root.getPropertyValue('--blue').trim(),
steelLight: root.getPropertyValue('--blue-light').trim()
};
}
@@ -414,7 +414,7 @@ var effect = (VANTA.CLOUDS2 || VANTA.CLOUDS)({
return parseInt(hex.replace('#', ''), 16);
}
var ASH = getAshColors();
var ASH = getColors();
// Sun position palette (altitude-based) - all colors from Ash palette
// altitude in radians: -pi/2 (below) to pi/2 (zenith)
@@ -1138,45 +1138,45 @@ var weatherThemes = {
};
function weatherSVG(code) {
var c = 'var(--ash-bone)';
var c = 'var(--bone)';
switch (code) {
case 0:
return '<svg viewBox="0 0 24 24" fill="' + c + '"><circle cx="12" cy="12" r="5"/><g stroke="' + c + '" stroke-width="2" stroke-linecap="round"><line x1="12" y1="2" x2="12" y2="4"/><line x1="12" y1="20" x2="12" y2="22"/><line x1="2" y1="12" x2="4" y2="12"/><line x1="20" y1="12" x2="22" y2="12"/><line x1="4.9" y1="4.9" x2="6.3" y2="6.3"/><line x1="17.7" y1="17.7" x2="19.1" y2="19.1"/><line x1="4.9" y1="19.1" x2="6.3" y2="17.7"/><line x1="17.7" y1="6.3" x2="19.1" y2="4.9"/></g></svg>';
case 1:
case 2:
return '<svg viewBox="0 0 24 24" fill="none" stroke="' + c + '" stroke-width="2"><circle cx="8" cy="8" r="3" fill="' + c + '"/><line x1="8" y1="2" x2="8" y2="3"/><line x1="2" y1="8" x2="3" y2="8"/><line x1="3.5" y1="3.5" x2="4.2" y2="4.2"/><line x1="12.5" y1="3.5" x2="11.8" y2="4.2"/><path d="M10 14 a4 4 0 0 1 4 -4 a4 4 0 0 1 4 4 a3 3 0 0 1 0 6 h-8 a3 3 0 0 1 0 -6 z" fill="var(--ash-stone)" stroke="none"/></svg>';
return '<svg viewBox="0 0 24 24" fill="none" stroke="' + c + '" stroke-width="2"><circle cx="8" cy="8" r="3" fill="' + c + '"/><line x1="8" y1="2" x2="8" y2="3"/><line x1="2" y1="8" x2="3" y2="8"/><line x1="3.5" y1="3.5" x2="4.2" y2="4.2"/><line x1="12.5" y1="3.5" x2="11.8" y2="4.2"/><path d="M10 14 a4 4 0 0 1 4 -4 a4 4 0 0 1 4 4 a3 3 0 0 1 0 6 h-8 a3 3 0 0 1 0 -6 z" fill="var(--stone)" stroke="none"/></svg>';
case 3:
return '<svg viewBox="0 0 24 24" fill="var(--ash-stone)"><path d="M6 18 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/></svg>';
return '<svg viewBox="0 0 24 24" fill="var(--stone)"><path d="M6 18 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/></svg>';
case 45:
case 48:
return '<svg viewBox="0 0 24 24" fill="none" stroke="' + c + '" stroke-width="2"><path d="M6 18 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z" fill="var(--ash-stone)" stroke="' + c + '"/><line x1="8" y1="20" x2="8" y2="22"/><line x1="12" y1="20" x2="12" y2="22"/><line x1="16" y1="20" x2="16" y2="22"/></svg>';
return '<svg viewBox="0 0 24 24" fill="none" stroke="' + c + '" stroke-width="2"><path d="M6 18 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z" fill="var(--stone)" stroke="' + c + '"/><line x1="8" y1="20" x2="8" y2="22"/><line x1="12" y1="20" x2="12" y2="22"/><line x1="16" y1="20" x2="16" y2="22"/></svg>';
case 51:
case 55:
return '<svg viewBox="0 0 24 24" fill="var(--ash-stone)"><path d="M6 14 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g stroke="var(--ash-steel)" stroke-width="1.5" stroke-linecap="round"><line x1="8" y1="17" x2="7" y2="20"/><line x1="13" y1="17" x2="12" y2="20"/><line x1="17" y1="17" x2="16" y2="20"/></g></svg>';
return '<svg viewBox="0 0 24 24" fill="var(--stone)"><path d="M6 14 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g stroke="var(--blue)" stroke-width="1.5" stroke-linecap="round"><line x1="8" y1="17" x2="7" y2="20"/><line x1="13" y1="17" x2="12" y2="20"/><line x1="17" y1="17" x2="16" y2="20"/></g></svg>';
case 53:
return '<svg viewBox="0 0 24 24" fill="var(--ash-stone)"><path d="M6 14 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g stroke="var(--ash-steel)" stroke-width="1.5" stroke-linecap="round"><line x1="9" y1="16" x2="8" y2="20"/><line x1="13" y1="16" x2="12" y2="20"/></g></svg>';
return '<svg viewBox="0 0 24 24" fill="var(--stone)"><path d="M6 14 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g stroke="var(--blue)" stroke-width="1.5" stroke-linecap="round"><line x1="9" y1="16" x2="8" y2="20"/><line x1="13" y1="16" x2="12" y2="20"/></g></svg>';
case 61:
case 80:
return '<svg viewBox="0 0 24 24" fill="var(--ash-stone)"><path d="M6 13 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g stroke="var(--ash-steel)" stroke-width="1.5" stroke-linecap="round"><line x1="8" y1="16" x2="7" y2="21"/><line x1="13" y1="16" x2="12" y2="21"/><line x1="17" y1="16" x2="16" y2="21"/></g></svg>';
return '<svg viewBox="0 0 24 24" fill="var(--stone)"><path d="M6 13 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g stroke="var(--blue)" stroke-width="1.5" stroke-linecap="round"><line x1="8" y1="16" x2="7" y2="21"/><line x1="13" y1="16" x2="12" y2="21"/><line x1="17" y1="16" x2="16" y2="21"/></g></svg>';
case 63:
case 81:
return '<svg viewBox="0 0 24 24" fill="var(--ash-stone)"><path d="M6 13 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g stroke="var(--ash-steel)" stroke-width="1.5" stroke-linecap="round"><line x1="9" y1="15" x2="7" y2="21"/><line x1="13" y1="15" x2="11" y2="21"/><line x1="17" y1="15" x2="15" y2="21"/></g></svg>';
return '<svg viewBox="0 0 24 24" fill="var(--stone)"><path d="M6 13 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g stroke="var(--blue)" stroke-width="1.5" stroke-linecap="round"><line x1="9" y1="15" x2="7" y2="21"/><line x1="13" y1="15" x2="11" y2="21"/><line x1="17" y1="15" x2="15" y2="21"/></g></svg>';
case 65:
case 82:
return '<svg viewBox="0 0 24 24" fill="var(--ash-stone)"><path d="M6 13 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g stroke="var(--ash-steel)" stroke-width="1.5" stroke-linecap="round"><line x1="7" y1="15" x2="4" y2="22"/><line x1="11" y1="15" x2="8" y2="22"/><line x1="15" y1="15" x2="12" y2="22"/><line x1="19" y1="15" x2="16" y2="22"/></g></svg>';
return '<svg viewBox="0 0 24 24" fill="var(--stone)"><path d="M6 13 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g stroke="var(--blue)" stroke-width="1.5" stroke-linecap="round"><line x1="7" y1="15" x2="4" y2="22"/><line x1="11" y1="15" x2="8" y2="22"/><line x1="15" y1="15" x2="12" y2="22"/><line x1="19" y1="15" x2="16" y2="22"/></g></svg>';
case 71:
case 73:
case 75:
case 77:
case 85:
case 86:
return '<svg viewBox="0 0 24 24" fill="var(--ash-stone)"><path d="M6 13 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g fill="' + c + '"><circle cx="8" cy="18" r="1.5"/><circle cx="13" cy="19" r="1.5"/><circle cx="17" cy="18" r="1.5"/></g></svg>';
return '<svg viewBox="0 0 24 24" fill="var(--stone)"><path d="M6 13 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g fill="' + c + '"><circle cx="8" cy="18" r="1.5"/><circle cx="13" cy="19" r="1.5"/><circle cx="17" cy="18" r="1.5"/></g></svg>';
case 95:
case 96:
case 99:
return '<svg viewBox="0 0 24 24" fill="var(--ash-stone)"><path d="M6 13 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><path d="M12 2 L8 11 L12 11 L10 18 L16 9 L12 9 Z" fill="var(--ash-gold)"/></svg>';
return '<svg viewBox="0 0 24 24" fill="var(--stone)"><path d="M6 13 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><path d="M12 2 L8 11 L12 11 L10 18 L16 9 L12 9 Z" fill="var(--yellow)"/></svg>';
default:
return '<svg viewBox="0 0 24 24" fill="var(--ash-stone)"><circle cx="12" cy="12" r="6"/></svg>';
return '<svg viewBox="0 0 24 24" fill="var(--stone)"><circle cx="12" cy="12" r="6"/></svg>';
}
}