Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fitness: fix light/dark theme with semantic CSS variables

Browse Source 
Replace hardcoded Nord color references with semantic CSS variables
across all fitness components and pages. Use --color-primary instead
of --nord8 for interactive elements (auto-switches between --nord10
in light mode and --nord8 in dark mode). Change RPE color from
--nord13 (yellow) to --nord12 (orange) for better light mode contrast.
Fix mobile responsiveness on measure page form inputs.
This commit is contained in:
Alexander Bocken
2026-03-19 09:08:24 +01:00
parent cd7b1e21f2
commit 2fdfa2df6a
15 changed files with 166 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/fitness/ExerciseName.svelte
+1 -1
View File
@@ -14,7 +14,7 @@
<style>
.exercise-link {
color: var(--nord8);
color: var(--color-primary);
text-decoration: none;
font-weight: 600;
}
src/lib/components/fitness/ExercisePicker.svelte
+14 -23
View File
@@ -100,7 +100,7 @@
width: 100%;
max-width: 500px;
max-height: 85vh;
background: var(--nord0, #2e3440);
background: var(--color-bg-secondary);
border-radius: 16px 16px 0 0;
display: flex;
flex-direction: column;
@@ -111,7 +111,7 @@
justify-content: space-between;
align-items: center;
padding: 1rem;
border-bottom: 1px solid var(--nord3);
border-bottom: 1px solid var(--color-border);
}
.picker-header h2 {
margin: 0;
@@ -120,7 +120,7 @@
.close-btn {
background: none;
border: none;
color: var(--nord4);
color: var(--color-text-secondary);
cursor: pointer;
padding: 0.25rem;
}
@@ -129,31 +129,31 @@
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--nord3);
color: var(--nord4);
border-bottom: 1px solid var(--color-border);
color: var(--color-text-secondary);
}
.picker-search input {
flex: 1;
background: transparent;
border: none;
color: inherit;
color: var(--color-text-primary);
font-size: 0.9rem;
outline: none;
}
.picker-search input::placeholder {
color: var(--nord3);
color: var(--color-text-muted);
}
.picker-filters {
display: flex;
gap: 0.5rem;
padding: 0.5rem 1rem;
border-bottom: 1px solid var(--nord3);
border-bottom: 1px solid var(--color-border);
}
.picker-filters select {
flex: 1;
background: var(--nord1);
background: var(--color-bg-elevated);
color: inherit;
border: 1px solid var(--nord3);
border: 1px solid var(--color-border);
border-radius: 6px;
padding: 0.35rem 0.5rem;
font-size: 0.8rem;
@@ -172,14 +172,14 @@
padding: 0.75rem 1rem;
background: none;
border: none;
border-bottom: 1px solid var(--nord3, rgba(0,0,0,0.05));
border-bottom: 1px solid var(--color-border);
color: inherit;
text-align: left;
cursor: pointer;
font: inherit;
}
.exercise-item:hover {
background: var(--nord1, rgba(0,0,0,0.05));
background: var(--color-surface-hover);
}
.ex-name {
font-weight: 600;
@@ -187,22 +187,13 @@
}
.ex-meta {
font-size: 0.75rem;
color: var(--nord4);
color: var(--color-text-secondary);
text-transform: capitalize;
}
.no-results {
padding: 2rem;
text-align: center;
color: var(--nord4);
}
@media (prefers-color-scheme: light) {
:global(:root:not([data-theme])) .picker-panel {
background: white;
}
}
:global(:root[data-theme="light"]) .picker-panel {
background: white;
color: var(--color-text-secondary);
}
@media (min-width: 600px) {
src/lib/components/fitness/FitnessChart.svelte
+2 -13
View File
@@ -145,24 +145,13 @@
<style>
.chart-container {
background: var(--nord1, #f8f8f8);
background: var(--color-surface);
border-radius: 12px;
padding: 1rem;
border: 1px solid var(--nord3, #ddd);
border: 1px solid var(--color-border);
}
canvas {
max-width: 100%;
height: 100% !important;
}
@media (prefers-color-scheme: light) {
:global(:root:not([data-theme])) .chart-container {
background: white;
border-color: var(--nord4);
}
}
:global(:root[data-theme="light"]) .chart-container {
background: white;
border-color: var(--nord4);
}
</style>
src/lib/components/fitness/RestTimer.svelte
+3 -3
View File
@@ -56,12 +56,12 @@
}
.bg-ring {
fill: none;
stroke: var(--nord3, #ddd);
stroke: var(--color-border);
stroke-width: 4;
}
.progress-ring {
fill: none;
stroke: var(--nord8);
stroke: var(--color-primary);
stroke-width: 4;
stroke-linecap: round;
transition: stroke-dashoffset 1s linear;
@@ -70,7 +70,7 @@
font-size: 1.25rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--nord8);
color: var(--color-primary);
z-index: 1;
}
</style>
src/lib/components/fitness/SessionCard.svelte
+8 -19
View File
@@ -94,16 +94,16 @@
display: block;
text-decoration: none;
color: inherit;
background: var(--accent-dark);
background: var(--color-surface);
border: none;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: var(--shadow-sm);
padding: 1rem;
transition: transform 150ms ease, box-shadow 150ms ease;
}
.session-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
box-shadow: var(--shadow-md);
}
.session-card:active {
transform: translateY(0);
@@ -118,7 +118,7 @@
}
.session-date {
font-size: 0.75rem;
color: var(--nord4);
color: var(--color-text-secondary);
}
.exercise-list {
font-size: 0.8rem;
@@ -130,22 +130,22 @@
padding: 0.15rem 0;
}
.ex-sets {
color: var(--nord4);
color: var(--color-text-secondary);
}
.ex-best {
font-weight: 600;
font-size: 0.78rem;
}
.more {
color: var(--nord8);
color: var(--color-primary);
font-style: italic;
}
.card-footer {
display: flex;
gap: 1rem;
font-size: 0.75rem;
color: var(--nord4);
border-top: 1px solid var(--nord3, rgba(0,0,0,0.1));
color: var(--color-text-secondary);
border-top: 1px solid var(--color-border);
padding-top: 0.5rem;
}
.stat {
@@ -156,15 +156,4 @@
.stat.pr {
color: var(--nord13);
}
@media (prefers-color-scheme: light) {
:global(:root:not([data-theme])) .session-card {
background: var(--nord5);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
}
:global(:root[data-theme="light"]) .session-card {
background: var(--nord5);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
</style>
src/lib/components/fitness/SetTable.svelte
+10 -21
View File
@@ -124,7 +124,7 @@
text-transform: uppercase;
font-size: 0.7rem;
font-weight: 600;
color: var(--nord4);
color: var(--color-text-secondary);
padding: 0.4rem 0.5rem;
text-align: center;
letter-spacing: 0.05em;
@@ -132,15 +132,15 @@
tbody td {
padding: 0.35rem 0.5rem;
text-align: center;
border-top: 1px solid var(--nord3, rgba(0,0,0,0.1));
border-top: 1px solid var(--color-border);
}
.col-set {
width: 2.5rem;
font-weight: 700;
color: var(--nord4);
color: var(--color-text-secondary);
}
.col-prev {
color: var(--nord4);
color: var(--color-text-secondary);
font-size: 0.8rem;
}
.col-weight, .col-reps {
@@ -153,14 +153,14 @@
width: 2.5rem;
}
tr.completed {
background: rgba(163, 190, 140, 0.1);
background: color-mix(in srgb, var(--nord14) 10%, transparent);
}
input {
width: 100%;
max-width: 4rem;
text-align: center;
background: var(--nord1, #f0f0f0);
border: 1px solid var(--nord3, #ddd);
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: 6px;
padding: 0.3rem 0.25rem;
font-size: 0.875rem;
@@ -171,7 +171,7 @@
}
input:focus {
outline: none;
border-color: var(--nord8);
border-color: var(--color-primary);
}
.check-btn {
display: flex;
@@ -180,9 +180,9 @@
width: 2rem;
height: 2rem;
border-radius: 50%;
border: 2px solid var(--nord3);
border: 2px solid var(--color-border);
background: transparent;
color: var(--nord4);
color: var(--color-text-secondary);
cursor: pointer;
transition: all 150ms;
margin: 0 auto;
@@ -192,15 +192,4 @@
border-color: var(--nord14);
color: white;
}
@media (prefers-color-scheme: light) {
:global(:root:not([data-theme])) input {
background: var(--nord6, #eceff4);
border-color: var(--nord4);
}
}
:global(:root[data-theme="light"]) input {
background: var(--nord6, #eceff4);
border-color: var(--nord4);
}
</style>
src/lib/components/fitness/TemplateCard.svelte
+8 -19
View File
@@ -57,10 +57,10 @@
display: flex;
flex-direction: column;
text-align: left;
background: var(--accent-dark);
background: var(--color-surface);
border: none;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: var(--shadow-sm);
padding: 1rem;
cursor: pointer;
transition: transform 150ms ease, box-shadow 150ms ease;
@@ -70,7 +70,7 @@
}
.template-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
box-shadow: var(--shadow-md);
}
.template-card:active {
transform: translateY(0);
@@ -89,42 +89,31 @@
.menu-btn {
background: none;
border: none;
color: var(--nord4);
color: var(--color-text-secondary);
cursor: pointer;
padding: 0.15rem;
border-radius: 4px;
}
.menu-btn:hover {
color: var(--nord8);
color: var(--color-primary);
}
.exercise-preview {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.8rem;
color: var(--nord4);
color: var(--color-text-secondary);
}
.exercise-preview li {
padding: 0.1rem 0;
}
.exercise-preview .more {
color: var(--nord8);
color: var(--color-primary);
font-style: italic;
}
.last-used {
margin: 0.5rem 0 0;
font-size: 0.75rem;
color: var(--nord4);
}
@media (prefers-color-scheme: light) {
:global(:root:not([data-theme])) .template-card {
background: var(--nord5);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
}
:global(:root[data-theme="light"]) .template-card {
background: var(--nord5);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
color: var(--color-text-secondary);
}
</style>