granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add element-based backgrounds to detail sidebar

Browse source
This commit is contained in:
Justin Edmund 2025-09-24 03:49:20 -07:00
parent 506d33bf57
commit 6034157d07
2 changed files with 414 additions and 387 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

783
src/lib/components/sidebar/DetailsSidebar.svelte
View file

@ -1,433 +1,442 @@
<script lang="ts"> <script lang="ts">
import type { GridCharacter, GridWeapon, GridSummon } from '$lib/types/api/party' import type { GridCharacter, GridWeapon, GridSummon } from '$lib/types/api/party'
import { getElementLabel } from '$lib/utils/element' import { getElementLabel } from '$lib/utils/element'
import { getRarityLabel } from '$lib/utils/rarity' import { getRarityLabel } from '$lib/utils/rarity'
import { getProficiencyLabel } from '$lib/utils/proficiency' import { getProficiencyLabel } from '$lib/utils/proficiency'
import { getRaceLabel } from '$lib/utils/race' import { getRaceLabel } from '$lib/utils/race'
import { getGenderLabel } from '$lib/utils/gender' import { getGenderLabel } from '$lib/utils/gender'
import { getCharacterDetailImage, getWeaponBaseImage, getSummonDetailImage, getCharacterPose } from '$lib/utils/images' import {
import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte' getCharacterDetailImage,
getWeaponBaseImage,
getSummonDetailImage,
getCharacterPose
} from '$lib/utils/images'
import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte'
interface Props { interface Props {
type: 'character' | 'weapon' | 'summon' type: 'character' | 'weapon' | 'summon'
item: GridCharacter | GridWeapon | GridSummon item: GridCharacter | GridWeapon | GridSummon
} }
let { type, item }: Props = $props() let { type, item }: Props = $props()
// Helper to get the actual item data // Helper to get the actual item data
function getItemData() { function getItemData() {
if (type === 'character') { if (type === 'character') {
return (item as GridCharacter).character return (item as GridCharacter).character
} else if (type === 'weapon') { } else if (type === 'weapon') {
return (item as GridWeapon).weapon return (item as GridWeapon).weapon
} else { } else {
return (item as GridSummon).summon return (item as GridSummon).summon
} }
} }
// Helper for localized names // Helper for localized names
function displayName(input: any): string { function displayName(input: any): string {
if (!input) return '—' if (!input) return '—'
const maybe = input.name ?? input const maybe = input.name ?? input
if (typeof maybe === 'string') return maybe if (typeof maybe === 'string') return maybe
if (maybe && typeof maybe === 'object') { if (maybe && typeof maybe === 'object') {
return maybe.en || maybe.ja || '—' return maybe.en || maybe.ja || '—'
} }
return '—' return '—'
} }
// Get the item's actual data // Get the item's actual data
const itemData = $derived(getItemData()) const itemData = $derived(getItemData())
// Grid item info (uncap levels from the grid item itself) // Grid item info (uncap levels from the grid item itself)
const gridUncapLevel = $derived( const gridUncapLevel = $derived(
type === 'character' ? (item as GridCharacter).uncapLevel : type === 'character'
type === 'weapon' ? (item as GridWeapon).uncapLevel : ? (item as GridCharacter).uncapLevel
(item as GridSummon).uncapLevel : type === 'weapon'
) ? (item as GridWeapon).uncapLevel
: (item as GridSummon).uncapLevel
)
const gridTranscendence = $derived( const gridTranscendence = $derived(
type === 'character' ? (item as GridCharacter).transcendenceStep : type === 'character'
type === 'weapon' ? (item as GridWeapon).transcendenceStep : ? (item as GridCharacter).transcendenceStep
(item as GridSummon).transcendenceStep : type === 'weapon'
) ? (item as GridWeapon).transcendenceStep
: (item as GridSummon).transcendenceStep
)
// Get image URL based on type using detail/base variants // Get image URL based on type using detail/base variants
function getImageUrl(): string { function getImageUrl(): string {
const id = itemData?.granblueId const id = itemData?.granblueId
if (type === 'character') { if (type === 'character') {
const pose = getCharacterPose(gridUncapLevel, gridTranscendence) const pose = getCharacterPose(gridUncapLevel, gridTranscendence)
return getCharacterDetailImage(id, pose) return getCharacterDetailImage(id, pose)
} else if (type === 'weapon') { } else if (type === 'weapon') {
return getWeaponBaseImage(id) return getWeaponBaseImage(id)
} else { } else {
return getSummonDetailImage(id) return getSummonDetailImage(id)
} }
} }
// Get element-based background color
function getElementBackground(): string {
const element = itemData?.element
switch (element) {
case 1: return 'var(--wind-item-detail-bg)'
case 2: return 'var(--fire-item-detail-bg)'
case 3: return 'var(--water-item-detail-bg)'
case 4: return 'var(--earth-item-detail-bg)'
case 5: return 'var(--dark-item-detail-bg)'
case 6: return 'var(--light-item-detail-bg)'
default: return 'var(--null-item-detail-bg)'
}
}
</script> </script>
<div class="details-sidebar"> <div class="details-sidebar">
<div class="item-header"> <div class="item-header" style="background: {getElementBackground()}">
<img <img src={getImageUrl()} alt={displayName(itemData)} class="item-image {type}" />
src={getImageUrl()} </div>
alt={displayName(itemData)}
class="item-image"
/>
<div class="item-title">
<h2>{displayName(itemData)}</h2>
{#if itemData?.granblueId}
<span class="granblue-id">ID: {itemData.granblueId}</span>
{/if}
</div>
</div>
<div class="details-section"> <div class="details-section">
<h3>Basic Information</h3> <h3>Basic Information</h3>
<div class="detail-row"> <div class="detail-row">
<span class="label">Rarity</span> <span class="label">Rarity</span>
<span class="value">{getRarityLabel(itemData?.rarity)}</span> <span class="value">{getRarityLabel(itemData?.rarity)}</span>
</div> </div>
<div class="detail-row"> <div class="detail-row">
<span class="label">Element</span> <span class="label">Element</span>
<span class="value">{getElementLabel(itemData?.element)}</span> <span class="value">{getElementLabel(itemData?.element)}</span>
</div> </div>
{#if type === 'character'} {#if type === 'character'}
{#if itemData?.race && itemData.race.length > 0} {#if itemData?.race && itemData.race.length > 0}
<div class="detail-row"> <div class="detail-row">
<span class="label">Race</span> <span class="label">Race</span>
<span class="value"> <span class="value">
{itemData.race.map(r => getRaceLabel(r)).filter(Boolean).join(', ') || '—'} {itemData.race
</span> .map((r) => getRaceLabel(r))
</div> .filter(Boolean)
{/if} .join(', ') || '—'}
<div class="detail-row"> </span>
<span class="label">Gender</span> </div>
<span class="value">{getGenderLabel(itemData?.gender)}</span> {/if}
</div> <div class="detail-row">
{#if itemData?.proficiency && itemData.proficiency.length > 0} <span class="label">Gender</span>
<div class="detail-row"> <span class="value">{getGenderLabel(itemData?.gender)}</span>
<span class="label">Proficiencies</span> </div>
<span class="value"> {#if itemData?.proficiency && itemData.proficiency.length > 0}
{itemData.proficiency.map(p => getProficiencyLabel(p)).filter(Boolean).join(', ') || '—'} <div class="detail-row">
</span> <span class="label">Proficiencies</span>
</div> <span class="value">
{/if} {itemData.proficiency
{:else if type === 'weapon'} .map((p) => getProficiencyLabel(p))
<div class="detail-row"> .filter(Boolean)
<span class="label">Proficiency</span> .join(', ') || '—'}
<span class="value">{getProficiencyLabel(itemData?.proficiency?.[0])}</span> </span>
</div> </div>
{/if} {/if}
</div> {:else if type === 'weapon'}
<div class="detail-row">
<span class="label">Proficiency</span>
<span class="value">{getProficiencyLabel(itemData?.proficiency?.[0])}</span>
</div>
{/if}
</div>
<div class="details-section"> <div class="details-section">
<h3>Uncap Status</h3> <h3>Uncap Status</h3>
<div class="uncap-display"> <div class="uncap-display">
<UncapIndicator <UncapIndicator
type={type} {type}
uncapLevel={gridUncapLevel} uncapLevel={gridUncapLevel}
transcendenceStage={gridTranscendence} transcendenceStage={gridTranscendence}
special={itemData?.special} special={itemData?.special}
flb={itemData?.uncap?.flb} flb={itemData?.uncap?.flb}
ulb={itemData?.uncap?.ulb} ulb={itemData?.uncap?.ulb}
transcendence={itemData?.uncap?.transcendence} transcendence={itemData?.uncap?.transcendence}
editable={false} editable={false}
/> />
</div> </div>
<div class="detail-row"> <div class="detail-row">
<span class="label">Current Uncap</span> <span class="label">Current Uncap</span>
<span class="value">{gridUncapLevel ?? 0}★</span> <span class="value">{gridUncapLevel ?? 0}★</span>
</div> </div>
{#if gridTranscendence && gridTranscendence > 0} {#if gridTranscendence && gridTranscendence > 0}
<div class="detail-row"> <div class="detail-row">
<span class="label">Transcendence</span> <span class="label">Transcendence</span>
<span class="value">Stage {gridTranscendence}</span> <span class="value">Stage {gridTranscendence}</span>
</div> </div>
{/if} {/if}
{#if itemData?.uncap} {#if itemData?.uncap}
<div class="detail-row"> <div class="detail-row">
<span class="label">Available Uncaps</span> <span class="label">Available Uncaps</span>
<span class="value"> <span class="value">
{[ {[
itemData.uncap.flb && 'FLB', itemData.uncap.flb && 'FLB',
itemData.uncap.ulb && 'ULB', itemData.uncap.ulb && 'ULB',
itemData.uncap.transcendence && 'Transcendence' itemData.uncap.transcendence && 'Transcendence'
].filter(Boolean).join(', ') || 'Standard'} ]
</span> .filter(Boolean)
</div> .join(', ') || 'Standard'}
{/if} </span>
</div> </div>
{/if}
</div>
<div class="details-section"> <div class="details-section">
<h3>Stats</h3> <h3>Stats</h3>
{#if itemData?.hp} {#if itemData?.hp}
<div class="stats-group"> <div class="stats-group">
<h4>HP</h4> <h4>HP</h4>
<div class="detail-row"> <div class="detail-row">
<span class="label">Base</span> <span class="label">Base</span>
<span class="value">{itemData.hp.minHp ?? '—'}</span> <span class="value">{itemData.hp.minHp ?? '—'}</span>
</div> </div>
<div class="detail-row"> <div class="detail-row">
<span class="label">Max</span> <span class="label">Max</span>
<span class="value">{itemData.hp.maxHp ?? '—'}</span> <span class="value">{itemData.hp.maxHp ?? '—'}</span>
</div> </div>
{#if itemData.uncap?.flb && itemData.hp.maxHpFlb} {#if itemData.uncap?.flb && itemData.hp.maxHpFlb}
<div class="detail-row"> <div class="detail-row">
<span class="label">Max (FLB)</span> <span class="label">Max (FLB)</span>
<span class="value">{itemData.hp.maxHpFlb}</span> <span class="value">{itemData.hp.maxHpFlb}</span>
</div> </div>
{/if} {/if}
{#if itemData.uncap?.ulb && itemData.hp.maxHpUlb} {#if itemData.uncap?.ulb && itemData.hp.maxHpUlb}
<div class="detail-row"> <div class="detail-row">
<span class="label">Max (ULB)</span> <span class="label">Max (ULB)</span>
<span class="value">{itemData.hp.maxHpUlb}</span> <span class="value">{itemData.hp.maxHpUlb}</span>
</div> </div>
{/if} {/if}
</div> </div>
{/if} {/if}
{#if itemData?.atk} {#if itemData?.atk}
<div class="stats-group"> <div class="stats-group">
<h4>Attack</h4> <h4>Attack</h4>
<div class="detail-row"> <div class="detail-row">
<span class="label">Base</span> <span class="label">Base</span>
<span class="value">{itemData.atk.minAtk ?? '—'}</span> <span class="value">{itemData.atk.minAtk ?? '—'}</span>
</div> </div>
<div class="detail-row"> <div class="detail-row">
<span class="label">Max</span> <span class="label">Max</span>
<span class="value">{itemData.atk.maxAtk ?? '—'}</span> <span class="value">{itemData.atk.maxAtk ?? '—'}</span>
</div> </div>
{#if itemData.uncap?.flb && itemData.atk.maxAtkFlb} {#if itemData.uncap?.flb && itemData.atk.maxAtkFlb}
<div class="detail-row"> <div class="detail-row">
<span class="label">Max (FLB)</span> <span class="label">Max (FLB)</span>
<span class="value">{itemData.atk.maxAtkFlb}</span> <span class="value">{itemData.atk.maxAtkFlb}</span>
</div> </div>
{/if} {/if}
{#if itemData.uncap?.ulb && itemData.atk.maxAtkUlb} {#if itemData.uncap?.ulb && itemData.atk.maxAtkUlb}
<div class="detail-row"> <div class="detail-row">
<span class="label">Max (ULB)</span> <span class="label">Max (ULB)</span>
<span class="value">{itemData.atk.maxAtkUlb}</span> <span class="value">{itemData.atk.maxAtkUlb}</span>
</div> </div>
{/if} {/if}
</div> </div>
{/if} {/if}
</div> </div>
{#if type === 'weapon' && itemData?.weaponSkills && itemData.weaponSkills.length > 0} {#if type === 'weapon' && itemData?.weaponSkills && itemData.weaponSkills.length > 0}
<div class="details-section"> <div class="details-section">
<h3>Skills</h3> <h3>Skills</h3>
<div class="skills-list"> <div class="skills-list">
{#each itemData.weaponSkills as skill} {#each itemData.weaponSkills as skill}
<div class="skill-item"> <div class="skill-item">
<h4>{displayName(skill) || 'Unknown Skill'}</h4> <h4>{displayName(skill) || 'Unknown Skill'}</h4>
{#if skill.description} {#if skill.description}
<p>{skill.description}</p> <p>{skill.description}</p>
{/if} {/if}
</div> </div>
{/each} {/each}
</div> </div>
</div> </div>
{/if} {/if}
{#if type === 'summon' && itemData?.summonAuras && itemData.summonAuras.length > 0} {#if type === 'summon' && itemData?.summonAuras && itemData.summonAuras.length > 0}
<div class="details-section"> <div class="details-section">
<h3>Auras</h3> <h3>Auras</h3>
<div class="auras-list"> <div class="auras-list">
{#each itemData.summonAuras as aura} {#each itemData.summonAuras as aura}
<div class="aura-item"> <div class="aura-item">
<h4>{displayName(aura) || 'Unknown Aura'}</h4> <h4>{displayName(aura) || 'Unknown Aura'}</h4>
{#if aura.description} {#if aura.description}
<p>{aura.description}</p> <p>{aura.description}</p>
{/if} {/if}
</div> </div>
{/each} {/each}
</div> </div>
</div> </div>
{/if} {/if}
{#if type === 'weapon' && itemData?.weaponKeys && itemData.weaponKeys.length > 0} {#if type === 'weapon' && itemData?.weaponKeys && itemData.weaponKeys.length > 0}
<div class="details-section"> <div class="details-section">
<h3>Weapon Keys</h3> <h3>Weapon Keys</h3>
<div class="keys-list"> <div class="keys-list">
{#each itemData.weaponKeys as key} {#each itemData.weaponKeys as key}
<div class="key-item"> <div class="key-item">
<span class="key-slot">Slot {key.slot}</span> <span class="key-slot">Slot {key.slot}</span>
<span class="key-name">{displayName(key.weaponKey1) || '—'}</span> <span class="key-name">{displayName(key.weaponKey1) || '—'}</span>
</div> </div>
{/each} {/each}
</div> </div>
</div> </div>
{/if} {/if}
{#if type === 'character' && itemData?.special} {#if type === 'character' && itemData?.special}
<div class="details-section"> <div class="details-section">
<div class="detail-row special-indicator"> <div class="detail-row special-indicator">
<span class="label">Special Character</span> <span class="label">Special Character</span>
<span class="value">✓</span> <span class="value">✓</span>
</div> </div>
</div> </div>
{/if} {/if}
</div> </div>
<style lang="scss"> <style lang="scss">
@use '$src/themes/colors' as colors; @use '$src/themes/colors' as colors;
@use '$src/themes/spacing' as spacing; @use '$src/themes/spacing' as spacing;
@use '$src/themes/typography' as typography; @use '$src/themes/typography' as typography;
@use '$src/themes/layout' as layout; @use '$src/themes/layout' as layout;
.details-sidebar { .details-sidebar {
padding: spacing.$unit-2x; padding: 0 spacing.$unit-2x spacing.$unit-2x;
color: var(--text-primary, colors.$grey-10); color: var(--text-primary, colors.$grey-10);
} display: flex;
flex-direction: column;
gap: spacing.$unit-2x;
}
.item-header { .item-header {
display: flex; display: flex;
gap: spacing.$unit-2x; gap: spacing.$unit-2x;
align-items: flex-start; align-items: flex-start;
margin-bottom: spacing.$unit-3x; border-radius: layout.$item-corner;
padding-bottom: spacing.$unit-2x; border: 1px solid colors.$grey-70;
border-bottom: 1px solid var(--border-color, colors.$grey-70); justify-content: center;
} transition: background 0.3s ease;
.item-image { .item-image.weapon {
width: 80px; width: 62%;
height: 80px; }
border-radius: layout.$item-corner;
object-fit: cover;
background: colors.$grey-80;
border: 1px solid colors.$grey-70;
}
.item-title { .item-image.summon,
flex: 1; .item-image.character {
width: 100%;
}
}
h2 { .details-section {
margin: 0 0 calc(spacing.$unit * 0.5) 0; margin-bottom: spacing.$unit-3x;
font-size: typography.$font-xlarge;
font-weight: typography.$medium;
color: var(--text-primary, colors.$grey-10);
}
.granblue-id { h3 {
font-size: typography.$font-small; margin: 0 0 calc(spacing.$unit * 1.5) 0;
color: var(--text-secondary, colors.$grey-50); font-size: typography.$font-regular;
} font-weight: typography.$medium;
} color: var(--text-secondary, colors.$grey-40);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.details-section { h4 {
margin-bottom: spacing.$unit-3x; margin: spacing.$unit 0 calc(spacing.$unit * 0.5) 0;
font-size: typography.$font-regular;
font-weight: typography.$medium;
color: var(--text-primary, colors.$grey-20);
}
}
h3 { .detail-row {
margin: 0 0 calc(spacing.$unit * 1.5) 0; display: flex;
font-size: typography.$font-regular; justify-content: space-between;
font-weight: typography.$medium; align-items: center;
color: var(--text-secondary, colors.$grey-40); padding: calc(spacing.$unit * 0.75) 0;
text-transform: uppercase; border-bottom: 1px solid rgba(colors.$grey-70, 0.5);
letter-spacing: 0.5px;
}
h4 { &:last-child {
margin: spacing.$unit 0 calc(spacing.$unit * 0.5) 0; border-bottom: none;
font-size: typography.$font-regular; }
font-weight: typography.$medium;
color: var(--text-primary, colors.$grey-20);
}
}
.detail-row { .label {
display: flex; font-size: typography.$font-regular;
justify-content: space-between; color: var(--text-secondary, colors.$grey-50);
align-items: center; }
padding: calc(spacing.$unit * 0.75) 0;
border-bottom: 1px solid rgba(colors.$grey-70, 0.5);
&:last-child { .value {
border-bottom: none; font-size: typography.$font-regular;
} color: var(--text-primary, colors.$grey-10);
font-weight: typography.$medium;
text-align: right;
}
}
.label { .uncap-display {
font-size: typography.$font-regular; margin-bottom: calc(spacing.$unit * 1.5);
color: var(--text-secondary, colors.$grey-50); padding: spacing.$unit;
} background: colors.$grey-90;
border-radius: calc(layout.$item-corner * 0.5);
display: flex;
justify-content: center;
}
.value { .stats-group {
font-size: typography.$font-regular; margin-bottom: spacing.$unit-2x;
color: var(--text-primary, colors.$grey-10);
font-weight: typography.$medium;
text-align: right;
}
}
.uncap-display { &:last-child {
margin-bottom: calc(spacing.$unit * 1.5); margin-bottom: 0;
padding: spacing.$unit; }
background: colors.$grey-90; }
border-radius: calc(layout.$item-corner * 0.5);
display: flex;
justify-content: center;
}
.stats-group { .skills-list,
margin-bottom: spacing.$unit-2x; .auras-list {
.skill-item,
.aura-item {
padding: spacing.$unit;
background: colors.$grey-90;
border-radius: calc(layout.$item-corner * 0.5);
margin-bottom: spacing.$unit;
&:last-child { h4 {
margin-bottom: 0; margin: 0 0 calc(spacing.$unit * 0.5) 0;
} font-size: typography.$font-regular;
} color: var(--text-primary, colors.$grey-10);
}
.skills-list, p {
.auras-list { margin: 0;
.skill-item, font-size: typography.$font-small;
.aura-item { color: var(--text-secondary, colors.$grey-50);
padding: spacing.$unit; line-height: 1.4;
background: colors.$grey-90; }
border-radius: calc(layout.$item-corner * 0.5); }
margin-bottom: spacing.$unit; }
h4 { .keys-list {
margin: 0 0 calc(spacing.$unit * 0.5) 0; .key-item {
font-size: typography.$font-regular; display: flex;
color: var(--text-primary, colors.$grey-10); justify-content: space-between;
} padding: calc(spacing.$unit * 0.75);
background: colors.$grey-90;
border-radius: calc(layout.$item-corner * 0.5);
margin-bottom: calc(spacing.$unit * 0.5);
p { .key-slot {
margin: 0; font-size: typography.$font-small;
font-size: typography.$font-small; color: var(--text-secondary, colors.$grey-50);
color: var(--text-secondary, colors.$grey-50); }
line-height: 1.4;
}
}
}
.keys-list { .key-name {
.key-item { font-size: typography.$font-small;
display: flex; color: var(--text-primary, colors.$grey-10);
justify-content: space-between; font-weight: typography.$medium;
padding: calc(spacing.$unit * 0.75); }
background: colors.$grey-90; }
border-radius: calc(layout.$item-corner * 0.5); }
margin-bottom: calc(spacing.$unit * 0.5);
.key-slot { .special-indicator {
font-size: typography.$font-small; .value {
color: var(--text-secondary, colors.$grey-50); color: var(--color-success, #4caf50);
} font-size: typography.$font-large;
}
.key-name { }
font-size: typography.$font-small; </style>
color: var(--text-primary, colors.$grey-10);
font-weight: typography.$medium;
}
}
}
.special-indicator {
.value {
color: var(--color-success, #4caf50);
font-size: typography.$font-large;
}
}
</style>

18
src/themes/themes.scss
View file

@ -233,6 +233,15 @@
--light-nav-selected-bg: #{colors.$light-bg-20}; --light-nav-selected-bg: #{colors.$light-bg-20};
--dark-nav-selected-bg: #{colors.$dark-bg-20}; --dark-nav-selected-bg: #{colors.$dark-bg-20};
// Item detail backgrounds (same colors as nav selected)
--null-item-detail-bg: #{colors.$grey-85};
--wind-item-detail-bg: #{colors.$wind-bg-20};
--fire-item-detail-bg: #{colors.$fire-bg-20};
--water-item-detail-bg: #{colors.$water-bg-20};
--earth-item-detail-bg: #{colors.$earth-bg-20};
--light-item-detail-bg: #{colors.$light-bg-20};
--dark-item-detail-bg: #{colors.$dark-bg-20};
// Light - Element navigation selected text // Light - Element navigation selected text
--null-nav-selected-text: #{colors.$grey-40}; --null-nav-selected-text: #{colors.$grey-40};
--wind-nav-selected-text: #{colors.$wind-text-20}; --wind-nav-selected-text: #{colors.$wind-text-20};
@ -511,6 +520,15 @@
--light-nav-selected-bg: #{colors.$light-bg-20}; --light-nav-selected-bg: #{colors.$light-bg-20};
--dark-nav-selected-bg: #{colors.$dark-bg-20}; --dark-nav-selected-bg: #{colors.$dark-bg-20};
// Item detail backgrounds (same colors as nav selected)
--null-item-detail-bg: #{colors.$grey-85};
--wind-item-detail-bg: #{colors.$wind-bg-20};
--fire-item-detail-bg: #{colors.$fire-bg-20};
--water-item-detail-bg: #{colors.$water-bg-20};
--earth-item-detail-bg: #{colors.$earth-bg-20};
--light-item-detail-bg: #{colors.$light-bg-20};
--dark-item-detail-bg: #{colors.$dark-bg-20};
// Dark - Element navigation selected text (same as light theme) // Dark - Element navigation selected text (same as light theme)
--null-nav-selected-text: #{colors.$grey-40}; --null-nav-selected-text: #{colors.$grey-40};
--wind-nav-selected-text: #{colors.$wind-text-20}; --wind-nav-selected-text: #{colors.$wind-text-20};