till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-14 17:41:09 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

refactor(mana/web): migrate chrome/notification components to theme tokens (P5)

Browse source 
Six chrome-level UI components — modals, toasts and prompts that float
above the workbench — moved off hand-rolled #1e293b/#e5e7eb/#6366f1/etc.
literals onto theme tokens.

Files migrated:
  - RecoveryCodeUnlockModal — backdrop overlay (literal black/60),
    danger-state background → color-error
  - SessionWarning — warning toast bg → color-warning, dark text on the
    bright warning bg stays literal (intentional contrast pair)
  - SuggestionToast — primary CTA → color-primary, muted/error text →
    tokens. The toast itself keeps its dark literal bg by design (it's
    a floating notification, not a theme-aware surface)
  - SyncConflictToast — hover background → color-surface-hover
  - PwaUpdatePrompt — primary CTA was hardcoded indigo (#6366f1), now
    follows the active theme variant
  - auth/AuthRequiredModal — backdrop overlay literal, primary button
    text → color-primary-foreground

Backdrop overlays use literal `hsl(0 0% 0% / 0.6)` rather than a theme
token because semi-transparent black is the deliberate UI affordance
for "modal screen dimmer", not a theme-aware surface.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-04-09 12:27:09 +02:00
parent b8f2d8f694
commit 5052926481
6 changed files with 18 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

7
apps/mana/apps/web/src/lib/components/PwaUpdatePrompt.svelte
View file

@ -121,7 +121,7 @@
.update-icon {
flex-shrink: 0;
color: #6366f1;
color: hsl(var(--color-primary));
}
.update-text {
@ -150,7 +150,7 @@
}
.update-btn {
background: #6366f1;
background: hsl(var(--color-primary));
border: none;
color: white;
padding: 5px 12px;
@ -162,7 +162,8 @@
}
.update-btn:hover {
background: #5558e6;
background: hsl(var(--color-primary));
filter: brightness(0.9);
}
.dismiss-btn {

4
apps/mana/apps/web/src/lib/components/RecoveryCodeUnlockModal.svelte
View file

@ -113,7 +113,7 @@
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0, 0, 0, 0.6);
background: hsl(0 0% 0% / 0.6);
display: flex;
align-items: center;
justify-content: center;
@ -173,7 +173,7 @@
.error {
margin: 0.75rem 0;
padding: 0.75rem 1rem;
background: rgba(239, 68, 68, 0.08);
background: hsl(var(--color-error) / 0.08);
border: 1px solid rgba(239, 68, 68, 0.3);
border-radius: 0.5rem;
font-size: 0.85rem;

10
apps/mana/apps/web/src/lib/components/SessionWarning.svelte
View file

@ -71,8 +71,8 @@
display: flex;
align-items: center;
gap: 12px;
background: rgba(245, 158, 11, 0.95);
color: #1e293b;
background: hsl(var(--color-warning) / 0.95);
color: hsl(0 0% 12%);
padding: 10px 20px;
border-radius: 10px;
font-size: 13px;
@ -97,9 +97,9 @@
}
.refresh-btn {
background: rgba(0, 0, 0, 0.15);
background: hsl(0 0% 0% / 0.15);
border: none;
color: #1e293b;
color: hsl(0 0% 12%);
padding: 4px 12px;
border-radius: 6px;
font-size: 12px;
@ -109,6 +109,6 @@
}
.refresh-btn:hover {
background: rgba(0, 0, 0, 0.25);
background: hsl(0 0% 0% / 0.25);
}
</style>

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

@ -95,7 +95,7 @@
.toast-text {
font-size: 0.75rem;
color: #e5e7eb;
color: hsl(var(--color-foreground));
line-height: 1.3;
}
@ -110,7 +110,7 @@
padding: 0.25rem 0.625rem;
border-radius: 0.375rem;
border: none;
background: #8b5cf6;
background: hsl(var(--color-primary));
color: white;
font-size: 0.6875rem;
font-weight: 600;
@ -125,14 +125,14 @@
.toast-dismiss {
border: none;
background: transparent;
color: #6b7280;
color: hsl(var(--color-muted-foreground));
font-size: 1rem;
cursor: pointer;
padding: 0.125rem 0.25rem;
line-height: 1;
}
.toast-dismiss:hover {
color: #ef4444;
color: hsl(var(--color-error));
}
@keyframes slide-up {

2
apps/mana/apps/web/src/lib/components/SyncConflictToast.svelte
View file

@ -179,7 +179,7 @@
.close:hover {
color: var(--text-primary, #111);
background: rgba(0, 0, 0, 0.05);
background: hsl(var(--color-surface-hover));
}
.body {

4
apps/mana/apps/web/src/lib/components/auth/AuthRequiredModal.svelte
View file

@ -85,7 +85,7 @@
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0, 0, 0, 0.6);
background: hsl(0 0% 0% / 0.6);
display: flex;
align-items: center;
justify-content: center;
@ -151,7 +151,7 @@
.btn-primary {
background: var(--primary, #6366f1);
color: #fff;
color: hsl(var(--color-primary-foreground));
border-color: var(--primary, #6366f1);
}