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

fix(mana/web): wrap var(--color-X) usages with hsl() in non-Phase-6 components

Browse source 
After the themes.css rewrite (commit 919fcca4b), --color-X holds raw HSL
channels instead of full hsl() strings. Files using `var(--color-X)` standalone
in scoped CSS were already broken — the value is not a valid CSS color, so
the browser fell back to either the literal hex fallback (`var(--color-X, #...)`)
or to inherited (white in light mode). The Phase 1 rewrite is neutral for
those files (same broken behavior as before), but the now-canonical convention
is to wrap with hsl().

Sweep 11 components/routes that are NOT in the Phase 6 visual rewrite scope:

- Breadcrumbs, KeyboardShortcutsModal
- dashboard/TilePanel, dashboard/TileResizeHandle
- page-carousel/PageCarousel
- workbench/scenes/{ConfirmDialog, SceneRenameDialog, SceneTabs}
- routes/(app)/{llm-test, observatory, spiral}

Mechanical replacement: `var(--color-X[, fallback])` → `hsl(var(--color-X))`.
The hex fallbacks are dropped because :root in themes.css now defines all
--color-X values statically.

TilePanel had two unknown-token references that don't exist in the new
themes.css schema and were silently rendering their hex fallbacks:
  - `--color-text` → `--color-foreground` (semantic synonym)
  - `--color-destructive` → `--color-error` (shadcn name for the same concept)

Skipped from this sweep:
- Files in Phase 6 modules (places, habits, contacts, todo, dreams, finance,
  calendar, notes, photos, automations, cycles, events, zitare) — they will
  be migrated together with their hand-rolled palettes in Phase 6.
- skilltree/types.ts uses --color-branch-{intellect,body,…} tokens that have
  never been defined anywhere — long-standing bug, needs actual brand colors
  added to themes.css to fix properly.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-04-09 01:45:34 +02:00
parent 2d3c2bfc6f
commit 6e20c298ac
11 changed files with 82 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

8
apps/mana/apps/web/src/lib/components/Breadcrumbs.svelte
View file

@ -30,22 +30,22 @@
}
.separator {
color: var(--color-muted-foreground, #94a3b8);
color: hsl(var(--color-muted-foreground));
font-size: 11px;
}
.crumb-link {
color: var(--color-muted-foreground, #94a3b8);
color: hsl(var(--color-muted-foreground));
text-decoration: none;
transition: color 0.15s;
}
.crumb-link:hover {
color: var(--color-primary, #6366f1);
color: hsl(var(--color-primary));
}
.crumb-current {
color: var(--color-foreground, #f1f5f9);
color: hsl(var(--color-foreground));
font-weight: 500;
}
</style>

18
apps/mana/apps/web/src/lib/components/KeyboardShortcutsModal.svelte
View file

@ -55,8 +55,8 @@
left: 50%;
transform: translate(-50%, -50%);
z-index: 55;
background: var(--color-card, #1e293b);
border: 1px solid var(--color-border, rgba(148, 163, 184, 0.15));
background: hsl(var(--color-card));
border: 1px solid hsl(var(--color-border)));
border-radius: 12px;
padding: 24px;
min-width: 320px;
@ -74,14 +74,14 @@
.modal-title {
font-size: 16px;
font-weight: 600;
color: var(--color-foreground, #f1f5f9);
color: hsl(var(--color-foreground));
margin: 0;
}
.close-btn {
background: none;
border: none;
color: var(--color-muted-foreground, #94a3b8);
color: hsl(var(--color-muted-foreground));
font-size: 20px;
cursor: pointer;
padding: 4px 8px;
@ -89,7 +89,7 @@
}
.close-btn:hover {
background: var(--color-muted, rgba(148, 163, 184, 0.1));
background: hsl(var(--color-muted)));
}
.shortcut-list {
@ -114,17 +114,17 @@
display: inline-flex;
align-items: center;
padding: 2px 8px;
background: var(--color-muted, rgba(148, 163, 184, 0.1));
border: 1px solid var(--color-border, rgba(148, 163, 184, 0.15));
background: hsl(var(--color-muted)));
border: 1px solid hsl(var(--color-border)));
border-radius: 5px;
font-size: 12px;
font-family: system-ui, sans-serif;
color: var(--color-foreground, #e2e8f0);
color: hsl(var(--color-foreground));
font-weight: 500;
}
.shortcut-desc {
font-size: 13px;
color: var(--color-muted-foreground, #94a3b8);
color: hsl(var(--color-muted-foreground));
}
</style>

24
apps/mana/apps/web/src/lib/components/dashboard/TilePanel.svelte
View file

@ -171,8 +171,8 @@
display: flex;
flex-direction: column;
border-radius: 0.75rem;
border: 2px dashed var(--color-primary, #6366f1);
background: var(--color-background, #fff);
border: 2px dashed hsl(var(--color-primary));
background: hsl(var(--color-background));
opacity: 0.95;
}
@ -181,7 +181,7 @@
align-items: center;
justify-content: center;
padding: 0.5rem;
border-bottom: 1px solid var(--color-border, #e5e7eb);
border-bottom: 1px solid hsl(var(--color-border));
cursor: grab;
}
@ -211,21 +211,21 @@
font-size: 0.75rem;
font-weight: 500;
cursor: pointer;
background: var(--color-surface, #f3f4f6);
color: var(--color-text, #374151);
background: hsl(var(--color-surface));
color: hsl(var(--color-foreground));
transition: background 0.15s;
}
.tile-edit-btn:hover {
background: var(--color-surface-hover, #e5e7eb);
background: hsl(var(--color-surface-hover));
}
.tile-edit-btn-danger {
color: var(--color-destructive, #ef4444);
color: hsl(var(--color-error));
}
.tile-edit-btn-danger:hover {
background: var(--color-destructive, #ef4444);
background: hsl(var(--color-error));
color: white;
}
@ -236,7 +236,7 @@
padding: 0.5rem;
max-height: 200px;
overflow-y: auto;
border-top: 1px solid var(--color-border, #e5e7eb);
border-top: 1px solid hsl(var(--color-border));
}
.tile-widget-option {
@ -247,18 +247,18 @@
text-align: left;
cursor: pointer;
background: transparent;
color: var(--color-text, #374151);
color: hsl(var(--color-foreground));
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tile-widget-option:hover {
background: var(--color-surface-hover, #e5e7eb);
background: hsl(var(--color-surface-hover));
}
.tile-widget-option.active {
background: var(--color-primary, #6366f1);
background: hsl(var(--color-primary));
color: white;
}
</style>

6
apps/mana/apps/web/src/lib/components/dashboard/TileResizeHandle.svelte
View file

@ -152,7 +152,7 @@
.tile-resize-handle-bar {
border-radius: 3px;
background: var(--color-border, #e5e7eb);
background: hsl(var(--color-border));
transition: background 0.15s ease;
}
@ -168,11 +168,11 @@
.tile-resize-handle:hover .tile-resize-handle-bar,
.tile-resize-handle.dragging .tile-resize-handle-bar {
background: var(--color-primary, #6366f1);
background: hsl(var(--color-primary));
}
.tile-resize-handle:focus-visible {
outline: 2px solid var(--color-primary, #6366f1);
outline: 2px solid hsl(var(--color-primary));
outline-offset: -1px;
border-radius: 3px;
}

20
apps/mana/apps/web/src/lib/components/page-carousel/PageCarousel.svelte
View file

@ -215,9 +215,9 @@
border-color: rgba(0, 0, 0, 0.12);
}
.add-card:hover {
border-color: var(--color-primary, #8b5cf6);
color: var(--color-primary, #8b5cf6);
background: color-mix(in srgb, var(--color-primary, #8b5cf6) 4%, transparent);
border-color: hsl(var(--color-primary));
color: hsl(var(--color-primary));
background: color-mix(in srgb, hsl(var(--color-primary)) 4%, transparent);
}
:global(.dark) .add-card {
border-color: rgba(255, 255, 255, 0.06);
@ -228,9 +228,9 @@
color: #6b7280;
}
:global(.dark) .add-card:hover {
border-color: var(--color-primary, #8b5cf6);
color: var(--color-primary, #8b5cf6);
background: color-mix(in srgb, var(--color-primary, #8b5cf6) 8%, transparent);
border-color: hsl(var(--color-primary));
color: hsl(var(--color-primary));
background: color-mix(in srgb, hsl(var(--color-primary)) 8%, transparent);
}
.add-label {
font-size: 0.875rem;
@ -303,13 +303,13 @@
padding: 0;
}
.tab-title:hover {
color: var(--color-primary, #8b5cf6);
color: hsl(var(--color-primary));
}
:global(.dark) .tab-title {
color: #e5e7eb;
}
:global(.dark) .tab-title:hover {
color: var(--color-primary, #8b5cf6);
color: hsl(var(--color-primary));
}
.tab-maximize,
.tab-close {
@ -329,7 +329,7 @@
opacity: 1;
}
.tab-maximize:hover {
color: var(--color-primary, #8b5cf6);
color: hsl(var(--color-primary));
background: rgba(139, 92, 246, 0.08);
}
.tab-close:hover {
@ -349,7 +349,7 @@
margin-left: 0.125rem;
}
.tab-add:hover {
color: var(--color-primary, #8b5cf6);
color: hsl(var(--color-primary));
background: rgba(139, 92, 246, 0.08);
}
</style>

2
apps/mana/apps/web/src/lib/components/workbench/scenes/ConfirmDialog.svelte
View file

@ -163,7 +163,7 @@
background: rgba(255, 255, 255, 0.06);
}
.cd-btn-primary {
background: var(--color-primary, #8b5cf6);
background: hsl(var(--color-primary));
color: white;
}
.cd-btn-primary:hover:not(:disabled) {

4
apps/mana/apps/web/src/lib/components/workbench/scenes/SceneRenameDialog.svelte
View file

@ -194,7 +194,7 @@
transition: border-color 0.15s;
}
.srd-input:focus {
border-color: var(--color-primary, #8b5cf6);
border-color: hsl(var(--color-primary));
}
:global(.dark) .srd-input {
background: #1f1c1a;
@ -237,7 +237,7 @@
background: rgba(255, 255, 255, 0.06);
}
.srd-btn-primary {
background: var(--color-primary, #8b5cf6);
background: hsl(var(--color-primary));
color: white;
}
.srd-btn-primary:hover:not(:disabled) {

4
apps/mana/apps/web/src/lib/components/workbench/scenes/SceneTabs.svelte
View file

@ -223,10 +223,10 @@
}
.scene-add:hover {
background: rgba(0, 0, 0, 0.05);
color: var(--color-primary, #8b5cf6);
color: hsl(var(--color-primary));
}
:global(.dark) .scene-add:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--color-primary, #8b5cf6);
color: hsl(var(--color-primary));
}
</style>

6
apps/mana/apps/web/src/routes/(app)/llm-test/+page.svelte
View file

@ -512,12 +512,12 @@
{@html `<style>
.llm-prose { line-height: 1.6; }
.llm-prose p { margin: 0.4em 0; }
.llm-prose pre { background: var(--color-muted, #1e1e2e); border-radius: 0.5rem; padding: 0.75rem; overflow-x: auto; margin: 0.5em 0; }
.llm-prose code { font-size: 0.85em; background: var(--color-muted, #1e1e2e); padding: 0.15em 0.3em; border-radius: 0.25rem; }
.llm-prose pre { background: hsl(var(--color-muted)); border-radius: 0.5rem; padding: 0.75rem; overflow-x: auto; margin: 0.5em 0; }
.llm-prose code { font-size: 0.85em; background: hsl(var(--color-muted)); padding: 0.15em 0.3em; border-radius: 0.25rem; }
.llm-prose pre code { background: none; padding: 0; }
.llm-prose ul, .llm-prose ol { padding-left: 1.5em; margin: 0.4em 0; }
.llm-prose h1, .llm-prose h2, .llm-prose h3 { margin: 0.6em 0 0.3em; font-weight: 600; }
.llm-prose blockquote { border-left: 3px solid var(--color-border, #444); padding-left: 0.75em; margin: 0.4em 0; opacity: 0.8; }
.llm-prose blockquote { border-left: 3px solid hsl(var(--color-border)); padding-left: 0.75em; margin: 0.4em 0; opacity: 0.8; }
</style>`}
</svelte:head>

6
apps/mana/apps/web/src/routes/(app)/observatory/+page.svelte
View file

@ -277,13 +277,13 @@
.gallery-title {
font-size: 20px;
font-weight: 700;
color: var(--color-foreground, #f1f5f9);
color: hsl(var(--color-foreground));
margin: 0 0 4px 0;
}
.gallery-subtitle {
font-size: 13px;
color: var(--color-muted-foreground, #94a3b8);
color: hsl(var(--color-muted-foreground));
margin: 0;
}
@ -330,7 +330,7 @@
.group-label {
font-size: 12px;
font-weight: 600;
color: var(--color-muted-foreground, #94a3b8);
color: hsl(var(--color-muted-foreground));
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 0;

66
apps/mana/apps/web/src/routes/(app)/spiral/+page.svelte
View file

@ -289,12 +289,12 @@
.page-title {
font-size: 1.75rem;
font-weight: 700;
color: var(--color-foreground);
color: hsl(var(--color-foreground));
margin: 0;
}
.page-subtitle {
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
font-size: 0.875rem;
margin: 0.25rem 0 0;
}
@ -306,8 +306,8 @@
}
.section {
background: var(--color-card, rgba(255, 255, 255, 0.05));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
background: hsl(var(--color-card)));
border: 1px solid hsl(var(--color-border)));
border-radius: 12px;
padding: 1.25rem;
}
@ -315,7 +315,7 @@
.section-title {
font-size: 1rem;
font-weight: 600;
color: var(--color-foreground);
color: hsl(var(--color-foreground));
margin: 0 0 1rem;
display: flex;
align-items: center;
@ -323,7 +323,7 @@
}
.badge {
background: var(--color-primary, #6366f1);
background: hsl(var(--color-primary));
color: white;
font-size: 0.75rem;
padding: 0.125rem 0.5rem;
@ -348,7 +348,7 @@
.viz-header h2 {
font-size: 1rem;
font-weight: 600;
color: var(--color-foreground);
color: hsl(var(--color-foreground));
margin: 0;
}
@ -364,7 +364,7 @@
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
}
.control input[type='range'] {
@ -388,17 +388,17 @@
.empty-state {
text-align: center;
padding: 3rem;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
}
.pixel-detail {
text-align: center;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
font-size: 0.875rem;
}
.pixel-detail code {
background: var(--color-background, rgba(0, 0, 0, 0.2));
background: hsl(var(--color-background)));
padding: 0.125rem 0.5rem;
border-radius: 4px;
font-family: monospace;
@ -427,7 +427,7 @@
.stat {
text-align: center;
padding: 0.75rem;
background: var(--color-background, rgba(0, 0, 0, 0.2));
background: hsl(var(--color-background)));
border-radius: 8px;
}
@ -435,14 +435,14 @@
display: block;
font-size: 1.25rem;
font-weight: 700;
color: var(--color-foreground);
color: hsl(var(--color-foreground));
font-family: monospace;
}
.stat-label {
display: block;
font-size: 0.7rem;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
margin-top: 0.25rem;
}
@ -452,7 +452,7 @@
.collected-at {
font-size: 0.75rem;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
text-align: right;
margin: 0;
}
@ -466,7 +466,7 @@
.app-card {
padding: 0.75rem;
background: var(--color-background, rgba(0, 0, 0, 0.2));
background: hsl(var(--color-background)));
border-radius: 8px;
}
@ -480,19 +480,19 @@
.app-name {
font-weight: 600;
font-size: 0.875rem;
color: var(--color-foreground);
color: hsl(var(--color-foreground));
}
.app-count {
font-family: monospace;
font-size: 1rem;
font-weight: 700;
color: var(--color-primary, #6366f1);
color: hsl(var(--color-primary));
}
.app-bar {
height: 4px;
background: var(--color-border, rgba(255, 255, 255, 0.1));
background: hsl(var(--color-border)));
border-radius: 2px;
overflow: hidden;
margin-bottom: 0.375rem;
@ -513,16 +513,16 @@
.app-label {
font-size: 0.75rem;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
}
.app-events {
font-size: 0.7rem;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
}
.empty-hint {
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
font-size: 0.875rem;
text-align: center;
padding: 1rem;
@ -541,7 +541,7 @@
align-items: center;
gap: 0.375rem;
font-size: 0.75rem;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
}
.color-swatch {
@ -569,15 +569,15 @@
border-radius: 8px;
font-size: 0.875rem;
font-weight: 500;
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
background: var(--color-background, rgba(0, 0, 0, 0.2));
color: var(--color-foreground);
border: 1px solid hsl(var(--color-border)));
background: hsl(var(--color-background)));
color: hsl(var(--color-foreground));
cursor: pointer;
transition: all 0.15s;
}
.btn:hover:not(:disabled) {
background: var(--color-accent, rgba(255, 255, 255, 0.1));
background: hsl(var(--color-accent)));
}
.btn:disabled {
@ -586,8 +586,8 @@
}
.btn-primary {
background: var(--color-primary, #6366f1);
border-color: var(--color-primary, #6366f1);
background: hsl(var(--color-primary));
border-color: hsl(var(--color-primary));
color: white;
}
@ -606,21 +606,21 @@
.info-box {
padding: 1rem;
background: var(--color-background, rgba(0, 0, 0, 0.2));
background: hsl(var(--color-background)));
border-radius: 8px;
border-left: 4px solid var(--color-primary, #6366f1);
border-left: 4px solid hsl(var(--color-primary));
}
.info-box h4 {
font-size: 0.875rem;
font-weight: 600;
margin: 0 0 0.5rem;
color: var(--color-foreground);
color: hsl(var(--color-foreground));
}
.info-box p {
font-size: 0.8rem;
color: var(--color-muted-foreground);
color: hsl(var(--color-muted-foreground));
margin: 0;
line-height: 1.5;
}