till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-16 19:39:40 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

fix(mana/web): wrap bare var(--color-X) refs in hsl() across 19 files (P5)

Browse source 
These were latent rendering bugs: --color-X holds raw HSL channels at
runtime (set by createThemeStore), so a bare var(--color-foreground) is
not a valid CSS color value — the browser falls back to inherited and
the affected elements render with the wrong color (often invisible
text on the same-colored background).

Mechanical wrap of every bare reference in the affected files:
  var(--color-X)              → hsl(var(--color-X))
  var(--color-X, #fallback)   → hsl(var(--color-X))   (fallback dropped)
  color-mix(... var(--color-X) N%, transparent)
                              → hsl(var(--color-X) / 0.NN)

Also re-mapped two long-removed token names:
  --color-surface     → --color-muted    (subtle surface intent)
  --color-destructive → --color-error    (semantic alias)

190 refs across 19 files (habits, photos, notes, places, todo, cycles
helpers + their parent route shells). Brand-literal hex/rgba colors
left untouched (cycles pink, sport/category palettes, indigo→violet
gradients, photo placeholder gradients).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-04-09 13:02:33 +02:00
parent 9760269e9f
commit ea8ca13d37
19 changed files with 189 additions and 193 deletions
Download patch file Download diff file Expand all files Collapse all files

2
apps/mana/apps/web/src/lib/modules/cycles/components/SymptomManager.svelte
View file

@ -115,7 +115,7 @@
{:else}
<span
class="sm-dot"
style="background: {sym.color ?? 'var(--color-muted-foreground, #9ca3af)'}"
style="background: {sym.color ?? 'hsl(var(--color-muted-foreground))'}"
></span>
<div class="sm-info">
<span class="sm-name">{sym.name}</span>

52
apps/mana/apps/web/src/lib/modules/habits/ListView.svelte
View file

@ -305,15 +305,15 @@
gap: 0.125rem;
padding: 0.5rem 0.25rem;
border-radius: 0.75rem;
background: var(--color-surface, rgba(255, 255, 255, 0.04));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
background: hsl(var(--color-muted));
border: 1px solid hsl(var(--color-border));
cursor: pointer;
transition:
transform 0.15s,
box-shadow 0.15s;
user-select: none;
touch-action: manipulation;
color: var(--color-foreground, #fff);
color: hsl(var(--color-foreground));
}
.tally-item:hover {
@ -355,7 +355,7 @@
.tally-name {
font-size: 0.625rem;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@ -373,7 +373,7 @@
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
padding: 0.25rem 0;
}
@ -393,7 +393,7 @@
}
.log-name {
color: var(--color-foreground);
color: hsl(var(--color-foreground));
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
@ -401,28 +401,28 @@
}
.log-time {
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.add-btn {
border: 2px dashed var(--color-border, rgba(255, 255, 255, 0.15));
border: 2px dashed hsl(var(--color-border));
background: transparent;
}
.add-btn:hover {
border-color: var(--color-primary, #6366f1);
color: var(--color-primary, #6366f1);
border-color: hsl(var(--color-primary));
color: hsl(var(--color-primary));
}
.add-icon {
font-size: 1.25rem;
font-weight: 300;
line-height: 1;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
}
.add-btn:hover .add-icon {
color: var(--color-primary, #6366f1);
color: hsl(var(--color-primary));
}
/* ── Create Form ──────────────────────────────── */
@ -432,8 +432,8 @@
gap: 0.5rem;
padding: 0.75rem;
border-radius: 0.75rem;
background: var(--color-surface, rgba(255, 255, 255, 0.06));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
background: hsl(var(--color-muted));
border: 1px solid hsl(var(--color-border));
}
.create-row {
@ -463,25 +463,25 @@
overflow-y: auto;
border-radius: 0.5rem;
padding: 0.5rem;
background: var(--color-surface, rgba(255, 255, 255, 0.03));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
background: hsl(var(--color-muted));
border: 1px solid hsl(var(--color-border));
}
.create-input {
flex: 1;
background: transparent;
border: none;
border-bottom: 2px solid var(--color-border, rgba(255, 255, 255, 0.15));
color: var(--color-foreground);
border-bottom: 2px solid hsl(var(--color-border));
color: hsl(var(--color-foreground));
font-size: 0.875rem;
padding: 0.375rem 0;
outline: none;
}
.create-input:focus {
border-color: var(--color-primary, #6366f1);
border-color: hsl(var(--color-primary));
}
.create-input::placeholder {
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
}
.color-row {
@ -502,7 +502,7 @@
}
.color-dot.selected {
border-color: white;
box-shadow: 0 0 0 1px var(--color-primary, #6366f1);
box-shadow: 0 0 0 1px hsl(var(--color-primary));
}
.create-actions {
@ -523,14 +523,14 @@
.btn-cancel {
background: transparent;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
}
.btn-cancel:hover {
background: var(--color-muted, rgba(255, 255, 255, 0.08));
background: hsl(var(--color-muted));
}
.btn-create {
background: var(--color-primary, #6366f1);
background: hsl(var(--color-primary));
color: white;
}
.btn-create:hover:not(:disabled) {
@ -544,7 +544,7 @@
/* ── Empty / Misc ─────────────────────────────── */
.empty {
text-align: center;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
font-size: 0.875rem;
padding: 2rem 0;
display: flex;
@ -556,7 +556,7 @@
.empty-add-btn {
padding: 0.5rem 1rem;
border-radius: 0.5rem;
background: var(--color-primary, #6366f1);
background: hsl(var(--color-primary));
color: white;
border: none;
font-size: 0.8125rem;

10
apps/mana/apps/web/src/lib/modules/habits/components/DayTimeline.svelte
View file

@ -73,7 +73,7 @@
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
padding: 0 0.25rem;
}
@ -89,7 +89,7 @@
gap: 0.5rem;
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
background: var(--color-surface, rgba(255, 255, 255, 0.04));
background: hsl(var(--color-muted));
font-size: 0.875rem;
}
@ -107,19 +107,19 @@
}
.entry-title {
color: var(--color-foreground);
color: hsl(var(--color-foreground));
font-weight: 500;
}
.entry-time {
margin-left: auto;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
}
.entry-note {
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
font-size: 0.8125rem;
font-style: italic;
}

10
apps/mana/apps/web/src/lib/modules/habits/components/HabitBoard.svelte
View file

@ -73,16 +73,16 @@
gap: 0.25rem;
aspect-ratio: 1;
border-radius: 1rem;
background: var(--color-surface, rgba(255, 255, 255, 0.04));
border: 2px dashed var(--color-border, rgba(255, 255, 255, 0.15));
color: var(--color-muted-foreground);
background: hsl(var(--color-muted));
border: 2px dashed hsl(var(--color-border));
color: hsl(var(--color-muted-foreground));
cursor: pointer;
transition: all 0.15s;
}
.add-tile:hover {
border-color: var(--color-primary, #6366f1);
color: var(--color-primary, #6366f1);
border-color: hsl(var(--color-primary));
color: hsl(var(--color-primary));
background: rgba(99, 102, 241, 0.06);
}

52
apps/mana/apps/web/src/lib/modules/habits/components/HabitDetail.svelte
View file

@ -209,14 +209,14 @@
height: 2rem;
border-radius: 0.5rem;
background: transparent;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
border: none;
cursor: pointer;
transition: background 0.15s;
}
.back-btn:hover,
.edit-btn:hover {
background: var(--color-muted, rgba(255, 255, 255, 0.08));
background: hsl(var(--color-muted));
}
.header-info {
@ -234,7 +234,7 @@
.header-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-foreground);
color: hsl(var(--color-foreground));
}
.stats-grid {
@ -249,34 +249,34 @@
align-items: center;
padding: 0.75rem;
border-radius: 0.75rem;
background: var(--color-surface, rgba(255, 255, 255, 0.04));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
background: hsl(var(--color-muted));
border: 1px solid hsl(var(--color-border));
}
.stat-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-foreground);
color: hsl(var(--color-foreground));
font-variant-numeric: tabular-nums;
}
.stat-label {
font-size: 0.75rem;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
margin-top: 0.125rem;
}
.week-chart {
padding: 1rem;
border-radius: 0.75rem;
background: var(--color-surface, rgba(255, 255, 255, 0.04));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
background: hsl(var(--color-muted));
border: 1px solid hsl(var(--color-border));
}
.chart-title {
font-size: 0.75rem;
font-weight: 600;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
margin-bottom: 0.75rem;
}
@ -315,13 +315,13 @@
.bar-count {
font-size: 0.6875rem;
font-weight: 600;
color: var(--color-foreground);
color: hsl(var(--color-foreground));
font-variant-numeric: tabular-nums;
}
.bar-day {
font-size: 0.625rem;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
text-transform: uppercase;
}
@ -358,7 +358,7 @@
.section-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-foreground);
color: hsl(var(--color-foreground));
}
.day-group {
@ -372,7 +372,7 @@
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
padding: 0.25rem 0;
}
@ -382,19 +382,19 @@
gap: 0.5rem;
padding: 0.375rem 0.5rem;
border-radius: 0.375rem;
background: var(--color-surface, rgba(255, 255, 255, 0.03));
background: hsl(var(--color-muted));
}
.log-time {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-foreground);
color: hsl(var(--color-foreground));
font-variant-numeric: tabular-nums;
}
.log-note {
font-size: 0.8125rem;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
font-style: italic;
flex: 1;
}
@ -407,7 +407,7 @@
height: 1.25rem;
border-radius: 0.25rem;
background: transparent;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
border: none;
cursor: pointer;
opacity: 0;
@ -418,7 +418,7 @@
opacity: 1;
}
.log-delete:hover {
color: var(--color-destructive, #ef4444);
color: hsl(var(--color-error));
background: rgba(239, 68, 68, 0.1);
}
@ -426,7 +426,7 @@
display: flex;
gap: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
border-top: 1px solid hsl(var(--color-border));
}
.action-btn {
@ -434,18 +434,18 @@
border-radius: 0.5rem;
font-size: 0.8125rem;
font-weight: 500;
background: var(--color-surface, rgba(255, 255, 255, 0.06));
color: var(--color-muted-foreground);
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
background: hsl(var(--color-muted));
color: hsl(var(--color-muted-foreground));
border: 1px solid hsl(var(--color-border));
cursor: pointer;
transition: all 0.15s;
}
.action-btn:hover {
background: var(--color-muted, rgba(255, 255, 255, 0.1));
background: hsl(var(--color-muted));
}
.action-btn.danger {
color: var(--color-destructive, #ef4444);
color: hsl(var(--color-error));
border-color: rgba(239, 68, 68, 0.2);
}
.action-btn.danger:hover {
@ -453,7 +453,7 @@
}
.empty-text {
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
font-size: 0.875rem;
text-align: center;
padding: 1.5rem 0;

44
apps/mana/apps/web/src/lib/modules/habits/components/HabitForm.svelte
View file

@ -202,8 +202,8 @@
gap: 0.75rem;
padding: 1rem;
border-radius: 1rem;
background: var(--color-surface, rgba(255, 255, 255, 0.06));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
background: hsl(var(--color-muted));
border: 1px solid hsl(var(--color-border));
}
.form-row {
@ -232,17 +232,17 @@
flex: 1;
background: transparent;
border: none;
border-bottom: 2px solid var(--color-border, rgba(255, 255, 255, 0.15));
color: var(--color-foreground);
border-bottom: 2px solid hsl(var(--color-border));
color: hsl(var(--color-foreground));
font-size: 1rem;
padding: 0.5rem 0;
outline: none;
}
.title-input:focus {
border-color: var(--color-primary, #6366f1);
border-color: hsl(var(--color-primary));
}
.title-input::placeholder {
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
}
.icon-picker-wrapper {
@ -250,8 +250,8 @@
overflow-y: auto;
border-radius: 0.5rem;
padding: 0.5rem;
background: var(--color-surface, rgba(255, 255, 255, 0.03));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
background: hsl(var(--color-muted));
border: 1px solid hsl(var(--color-border));
}
.color-picker {
@ -273,7 +273,7 @@
}
.color-swatch.selected {
border-color: white;
box-shadow: 0 0 0 2px var(--color-primary, #6366f1);
box-shadow: 0 0 0 2px hsl(var(--color-primary));
}
.target-label {
@ -281,22 +281,22 @@
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
}
.target-input {
width: 4rem;
background: transparent;
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.15));
border: 1px solid hsl(var(--color-border));
border-radius: 0.5rem;
color: var(--color-foreground);
color: hsl(var(--color-foreground));
font-size: 0.875rem;
padding: 0.375rem 0.5rem;
outline: none;
text-align: center;
}
.target-input:focus {
border-color: var(--color-primary, #6366f1);
border-color: hsl(var(--color-primary));
}
.schedule-section {
@ -309,7 +309,7 @@
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
cursor: pointer;
}
.schedule-days {
@ -320,20 +320,20 @@
width: 2rem;
height: 2rem;
border-radius: 50%;
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.15));
border: 1px solid hsl(var(--color-border));
background: transparent;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
font-size: 0.6875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
}
.day-btn:hover {
border-color: var(--color-primary, #6366f1);
border-color: hsl(var(--color-primary));
}
.day-btn.active {
background: var(--color-primary, #6366f1);
border-color: var(--color-primary, #6366f1);
background: hsl(var(--color-primary));
border-color: hsl(var(--color-primary));
color: white;
}
@ -356,14 +356,14 @@
.btn-cancel {
background: transparent;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
}
.btn-cancel:hover {
background: var(--color-muted, rgba(255, 255, 255, 0.08));
background: hsl(var(--color-muted));
}
.btn-save {
background: var(--color-primary, #6366f1);
background: hsl(var(--color-primary));
color: white;
}
.btn-save:hover:not(:disabled) {

34
apps/mana/apps/web/src/lib/modules/photos/ListView.svelte
View file

@ -259,9 +259,9 @@
justify-content: center;
gap: 0.5rem;
background: rgba(99, 102, 241, 0.15);
border: 2px dashed var(--color-primary, #6366f1);
border: 2px dashed hsl(var(--color-primary));
border-radius: 0.75rem;
color: var(--color-primary, #6366f1);
color: hsl(var(--color-primary));
font-size: 0.875rem;
font-weight: 600;
pointer-events: none;
@ -272,7 +272,7 @@
display: flex;
gap: 0.75rem;
font-size: 0.75rem;
color: var(--color-muted-foreground, rgba(255, 255, 255, 0.4));
color: hsl(var(--color-muted-foreground));
}
/* ── Upload Button ─────────────────────────────── */
@ -283,17 +283,17 @@
gap: 0.5rem;
padding: 0.625rem;
border-radius: 0.5rem;
border: 2px dashed var(--color-border, rgba(255, 255, 255, 0.15));
border: 2px dashed hsl(var(--color-border));
background: transparent;
color: var(--color-muted-foreground, rgba(255, 255, 255, 0.5));
color: hsl(var(--color-muted-foreground));
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
}
.upload-btn:hover {
border-color: var(--color-primary, #6366f1);
color: var(--color-primary, #6366f1);
border-color: hsl(var(--color-primary));
color: hsl(var(--color-primary));
background: rgba(99, 102, 241, 0.05);
}
@ -315,7 +315,7 @@
aspect-ratio: 1;
border-radius: 0.375rem;
overflow: hidden;
background: var(--color-surface, rgba(255, 255, 255, 0.04));
background: hsl(var(--color-muted));
}
.upload-thumb img {
width: 100%;
@ -327,7 +327,7 @@
outline-offset: -2px;
}
.upload-thumb.error {
outline: 2px solid var(--color-destructive, #ef4444);
outline: 2px solid hsl(var(--color-error));
outline-offset: -2px;
}
@ -370,7 +370,7 @@
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-muted-foreground, rgba(255, 255, 255, 0.4));
color: hsl(var(--color-muted-foreground));
margin-bottom: 0.5rem;
}
@ -385,7 +385,7 @@
cursor: pointer;
}
.album-row:hover {
background: var(--color-surface, rgba(255, 255, 255, 0.05));
background: hsl(var(--color-muted));
}
.album-icon {
@ -395,8 +395,8 @@
width: 1.75rem;
height: 1.75rem;
border-radius: 0.375rem;
background: var(--color-surface, rgba(255, 255, 255, 0.06));
color: var(--color-muted-foreground);
background: hsl(var(--color-muted));
color: hsl(var(--color-muted-foreground));
flex-shrink: 0;
}
@ -408,7 +408,7 @@
.album-name {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-foreground, rgba(255, 255, 255, 0.8));
color: hsl(var(--color-foreground));
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@ -416,7 +416,7 @@
.album-desc {
font-size: 0.6875rem;
color: var(--color-muted-foreground, rgba(255, 255, 255, 0.3));
color: hsl(var(--color-muted-foreground));
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@ -424,7 +424,7 @@
.album-badge {
font-size: 0.625rem;
color: var(--color-muted-foreground, rgba(255, 255, 255, 0.3));
color: hsl(var(--color-muted-foreground));
flex-shrink: 0;
}
@ -432,7 +432,7 @@
padding: 2rem 0;
text-align: center;
font-size: 0.8125rem;
color: var(--color-muted-foreground, rgba(255, 255, 255, 0.3));
color: hsl(var(--color-muted-foreground));
}
@keyframes spin {

10
apps/mana/apps/web/src/lib/modules/photos/components/albums/AlbumCard.svelte
View file

@ -33,7 +33,7 @@
aspect-ratio: 4/3;
overflow: hidden;
border-radius: 0.75rem;
background-color: var(--color-muted, #f1f5f9);
background-color: hsl(var(--color-muted));
cursor: pointer;
border: none;
padding: 0;
@ -60,12 +60,8 @@
display: flex;
align-items: center;
justify-content: center;
color: var(--color-muted-foreground, #64748b);
background: linear-gradient(
135deg,
var(--color-muted, #f1f5f9) 0%,
var(--color-accent, #e2e8f0) 100%
);
color: hsl(var(--color-muted-foreground));
background: linear-gradient(135deg, hsl(var(--color-muted)) 0%, hsl(var(--color-accent)) 100%);
}
.album-overlay {

4
apps/mana/apps/web/src/lib/modules/photos/components/albums/AlbumGrid.svelte
View file

@ -39,8 +39,8 @@
.spinner {
width: 32px;
height: 32px;
border: 3px solid var(--color-border, #e2e8f0);
border-top-color: var(--color-primary, #6366f1);
border: 3px solid hsl(var(--color-border));
border-top-color: hsl(var(--color-primary));
border-radius: 50%;
animation: spin 1s linear infinite;
}

4
apps/mana/apps/web/src/lib/modules/photos/components/gallery/PhotoGrid.svelte
View file

@ -87,8 +87,8 @@
.spinner {
width: 32px;
height: 32px;
border: 3px solid var(--color-border, #e2e8f0);
border-top-color: var(--color-primary, #6366f1);
border: 3px solid hsl(var(--color-border));
border-top-color: hsl(var(--color-primary));
border-radius: 50%;
animation: spin 1s linear infinite;
}

36
apps/mana/apps/web/src/lib/modules/places/ListView.svelte
View file

@ -273,8 +273,8 @@
gap: 0.25rem;
padding: 0.5rem;
border-radius: 0.75rem;
background: var(--color-surface, rgba(255, 255, 255, 0.04));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
background: hsl(var(--color-muted));
border: 1px solid hsl(var(--color-border));
}
.tracking-row {
@ -289,9 +289,9 @@
gap: 0.375rem;
padding: 0.375rem 0.75rem;
border-radius: 9999px;
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.15));
border: 1px solid hsl(var(--color-border));
background: transparent;
color: var(--color-foreground);
color: hsl(var(--color-foreground));
font-size: 0.75rem;
font-weight: 500;
cursor: pointer;
@ -323,7 +323,7 @@
.tracking-coords {
font-size: 0.6875rem;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
font-variant-numeric: tabular-nums;
}
@ -341,9 +341,9 @@
flex: 1;
padding: 0.375rem 0.625rem;
border-radius: 0.5rem;
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
border: 1px solid hsl(var(--color-border));
background: transparent;
color: var(--color-foreground);
color: hsl(var(--color-foreground));
font-size: 0.8125rem;
outline: none;
}
@ -353,7 +353,7 @@
}
.search-input::placeholder {
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
}
/* ── Quick Create ─────────────────────────── */
@ -366,9 +366,9 @@
flex: 1;
padding: 0.375rem 0.625rem;
border-radius: 0.5rem;
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
border: 1px solid hsl(var(--color-border));
background: transparent;
color: var(--color-foreground);
color: hsl(var(--color-foreground));
font-size: 0.8125rem;
outline: none;
}
@ -378,15 +378,15 @@
}
.create-input::placeholder {
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
}
.create-btn {
padding: 0.375rem 0.5rem;
border-radius: 0.5rem;
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
border: 1px solid hsl(var(--color-border));
background: transparent;
color: var(--color-foreground);
color: hsl(var(--color-foreground));
cursor: pointer;
display: flex;
align-items: center;
@ -419,7 +419,7 @@
border-radius: 0.5rem;
border: none;
background: transparent;
color: var(--color-foreground);
color: hsl(var(--color-foreground));
cursor: pointer;
text-align: left;
transition: background 0.15s;
@ -427,7 +427,7 @@
}
.place-item:hover {
background: var(--color-surface, rgba(255, 255, 255, 0.04));
background: hsl(var(--color-muted));
}
.place-icon {
@ -465,7 +465,7 @@
align-items: center;
gap: 0.375rem;
font-size: 0.6875rem;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
}
.category-badge {
@ -500,14 +500,14 @@
.visit-count {
font-size: 0.6875rem;
font-weight: 600;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
font-variant-numeric: tabular-nums;
}
/* ── Empty ────────────────────────────────── */
.empty {
text-align: center;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
font-size: 0.8125rem;
padding: 2rem 0;
}

8
apps/mana/apps/web/src/lib/modules/todo/components/pages/PageEditBar.svelte
View file

@ -194,7 +194,7 @@
color: hsl(var(--color-foreground));
}
.icon-btn.active {
background: var(--color-primary, #8b5cf6);
background: hsl(var(--color-primary));
color: hsl(var(--color-primary-foreground));
}
.filter-toggle {
@ -261,8 +261,8 @@
color: hsl(var(--color-foreground));
}
.filter-pill.active {
background: var(--pill-color, var(--color-primary, #8b5cf6));
border-color: var(--pill-color, var(--color-primary, #8b5cf6));
background: var(--pill-color, hsl(var(--color-primary)));
border-color: var(--pill-color, hsl(var(--color-primary)));
color: hsl(var(--color-primary-foreground));
}
.completed-toggle {
@ -276,7 +276,7 @@
.completed-toggle input {
width: 14px;
height: 14px;
accent-color: var(--color-primary, #8b5cf6);
accent-color: hsl(var(--color-primary));
cursor: pointer;
}
.actions-row {

4
apps/mana/apps/web/src/lib/modules/todo/components/pages/PagePicker.svelte
View file

@ -111,7 +111,7 @@
margin-top: 0.25rem;
}
:global(.picker .custom-icon) {
color: var(--color-primary, #8b5cf6);
background: color-mix(in srgb, var(--color-primary, #8b5cf6) 10%, transparent);
color: hsl(var(--color-primary));
background: hsl(var(--color-primary) / 0.1);
}
</style>

8
apps/mana/apps/web/src/routes/(app)/habits/+page.svelte
View file

@ -87,7 +87,7 @@
.habits-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-foreground);
color: hsl(var(--color-foreground));
}
.habits-stats {
@ -95,7 +95,7 @@
gap: 1rem;
margin-top: 0.25rem;
font-size: 0.875rem;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
}
.board-section {
@ -111,11 +111,11 @@
.section-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-foreground);
color: hsl(var(--color-foreground));
}
.loading {
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
text-align: center;
padding: 3rem 0;
}

6
apps/mana/apps/web/src/routes/(app)/habits/[id]/+page.svelte
View file

@ -55,21 +55,21 @@
.not-found {
text-align: center;
padding: 3rem 0;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
}
.not-found button {
margin-top: 1rem;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
background: var(--color-primary, #6366f1);
background: hsl(var(--color-primary));
color: white;
border: none;
cursor: pointer;
}
.loading {
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
text-align: center;
padding: 3rem 0;
}

56
apps/mana/apps/web/src/routes/(app)/notes/+page.svelte
View file

@ -94,7 +94,7 @@
type="button"
class="color-dot"
class:selected={newColor === c}
style:background={c ?? 'var(--color-muted-foreground)'}
style:background={c ?? 'hsl(var(--color-muted-foreground))'}
style:opacity={c ? 1 : 0.4}
onclick={() => (newColor = c)}
></button>
@ -181,11 +181,11 @@
.notes-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-foreground);
color: hsl(var(--color-foreground));
}
.notes-stats {
font-size: 0.875rem;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
margin-top: 0.25rem;
}
@ -196,25 +196,25 @@
.search-input {
flex: 1;
background: var(--color-surface, rgba(255, 255, 255, 0.04));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
background: hsl(var(--color-muted));
border: 1px solid hsl(var(--color-border));
border-radius: 0.5rem;
color: var(--color-foreground);
color: hsl(var(--color-foreground));
font-size: 0.875rem;
padding: 0.5rem 0.75rem;
outline: none;
}
.search-input:focus {
border-color: var(--color-primary, #6366f1);
border-color: hsl(var(--color-primary));
}
.search-input::placeholder {
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
}
.add-btn {
padding: 0.5rem 1rem;
border-radius: 0.5rem;
background: var(--color-primary, #6366f1);
background: hsl(var(--color-primary));
color: white;
border: none;
font-size: 0.875rem;
@ -233,27 +233,27 @@
gap: 0.5rem;
padding: 1rem;
border-radius: 0.75rem;
background: var(--color-surface, rgba(255, 255, 255, 0.06));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
background: hsl(var(--color-muted));
border: 1px solid hsl(var(--color-border));
}
.create-title {
background: transparent;
border: none;
color: var(--color-foreground);
color: hsl(var(--color-foreground));
font-size: 1rem;
font-weight: 600;
padding: 0.25rem 0;
outline: none;
}
.create-title::placeholder {
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
}
.create-content {
background: transparent;
border: none;
color: var(--color-foreground);
color: hsl(var(--color-foreground));
font-size: 0.875rem;
padding: 0.25rem 0;
outline: none;
@ -262,7 +262,7 @@
font-family: inherit;
}
.create-content::placeholder {
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
}
.create-footer {
@ -288,7 +288,7 @@
}
.color-dot.selected {
border-color: white;
box-shadow: 0 0 0 1px var(--color-primary, #6366f1);
box-shadow: 0 0 0 1px hsl(var(--color-primary));
}
.create-actions {
@ -306,13 +306,13 @@
}
.btn-cancel {
background: transparent;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
}
.btn-cancel:hover {
background: var(--color-muted, rgba(255, 255, 255, 0.08));
background: hsl(var(--color-muted));
}
.btn-save {
background: var(--color-primary, #6366f1);
background: hsl(var(--color-primary));
color: white;
}
.btn-save:hover {
@ -329,7 +329,7 @@
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
}
.notes-grid {
@ -344,8 +344,8 @@
gap: 0.375rem;
padding: 0.75rem;
border-radius: 0.75rem;
background: var(--color-surface, rgba(255, 255, 255, 0.04));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
background: hsl(var(--color-muted));
border: 1px solid hsl(var(--color-border));
border-top: 3px solid transparent;
text-decoration: none;
transition:
@ -354,14 +354,14 @@
min-height: 6rem;
}
.note-card:hover {
background: var(--color-muted, rgba(255, 255, 255, 0.08));
background: hsl(var(--color-muted));
transform: translateY(-1px);
}
.card-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-foreground);
color: hsl(var(--color-foreground));
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@ -369,7 +369,7 @@
.card-preview {
font-size: 0.8125rem;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
@ -379,14 +379,14 @@
.card-meta {
font-size: 0.6875rem;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
opacity: 0.7;
margin-top: auto;
}
.empty {
text-align: center;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
font-size: 0.875rem;
padding: 3rem 0;
display: flex;
@ -396,7 +396,7 @@
}
.loading {
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
text-align: center;
padding: 3rem 0;
}

26
apps/mana/apps/web/src/routes/(app)/notes/[id]/+page.svelte
View file

@ -131,7 +131,7 @@
type="button"
class="color-dot"
class:selected={note.color === c}
style:background={c ?? 'var(--color-muted-foreground)'}
style:background={c ?? 'hsl(var(--color-muted-foreground))'}
style:opacity={c ? 1 : 0.4}
onclick={() => handleColorChange(c)}
></button>
@ -178,18 +178,18 @@
height: 2rem;
border-radius: 0.5rem;
background: transparent;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
border: none;
cursor: pointer;
}
.back-btn:hover {
background: var(--color-muted, rgba(255, 255, 255, 0.08));
background: hsl(var(--color-muted));
}
.header-meta {
flex: 1;
font-size: 0.8125rem;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
}
.header-actions {
@ -219,20 +219,20 @@
.detail-title {
background: transparent;
border: none;
color: var(--color-foreground);
color: hsl(var(--color-foreground));
font-size: 1.5rem;
font-weight: 700;
padding: 0;
outline: none;
}
.detail-title::placeholder {
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
}
.detail-content {
background: transparent;
border: none;
color: var(--color-foreground);
color: hsl(var(--color-foreground));
font-size: 0.9375rem;
line-height: 1.6;
padding: 0;
@ -243,7 +243,7 @@
flex: 1;
}
.detail-content::placeholder {
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
}
.detail-footer {
@ -251,7 +251,7 @@
justify-content: space-between;
align-items: center;
padding-top: 0.75rem;
border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
border-top: 1px solid hsl(var(--color-border));
}
.color-row {
@ -272,7 +272,7 @@
}
.color-dot.selected {
border-color: white;
box-shadow: 0 0 0 1px var(--color-primary, #6366f1);
box-shadow: 0 0 0 1px hsl(var(--color-primary));
}
.danger-actions {
@ -285,7 +285,7 @@
font-size: 0.8125rem;
font-weight: 500;
background: transparent;
color: var(--color-destructive, #ef4444);
color: hsl(var(--color-error));
border: 1px solid rgba(239, 68, 68, 0.2);
cursor: pointer;
}
@ -300,13 +300,13 @@
.loading {
text-align: center;
padding: 3rem 0;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
}
.not-found button {
margin-top: 1rem;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
background: var(--color-primary, #6366f1);
background: hsl(var(--color-primary));
color: white;
border: none;
cursor: pointer;

4
apps/mana/apps/web/src/routes/(app)/photos/+page.svelte
View file

@ -110,8 +110,8 @@
.error-message {
padding: 1rem;
background-color: var(--color-destructive);
color: var(--color-destructive-foreground);
background-color: hsl(var(--color-error));
color: white;
border-radius: var(--radius-md);
margin-bottom: 1rem;
}

12
apps/mana/apps/web/src/routes/(app)/photos/upload/+page.svelte
View file

@ -194,15 +194,15 @@
aspect-ratio: 1;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--color-muted);
background: hsl(var(--color-muted));
}
.file-item.success {
outline: 2px solid var(--color-success, #22c55e);
outline: 2px solid hsl(var(--color-success));
}
.file-item.error {
outline: 2px solid var(--color-destructive);
outline: 2px solid hsl(var(--color-error));
}
.file-preview {
@ -236,7 +236,7 @@
padding: 0.5rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
color: var(--color-foreground);
color: hsl(var(--color-foreground));
border: none;
cursor: pointer;
}
@ -271,11 +271,11 @@
}
.status-icon.success {
background: var(--color-success, #22c55e);
background: hsl(var(--color-success));
}
.status-icon.error {
background: var(--color-destructive);
background: hsl(var(--color-error));
}
.file-name {