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

refactor(ui): apply elevation system across todo, contacts, calendar, clock apps

Browse source 
Replace all hardcoded hex/rgba colors with CSS custom properties throughout
the todo web app and fix modal backgrounds in contacts, calendar, and clock.
Removes all redundant :global(.dark) overrides — CSS vars handle both modes.

- todo: TaskEditModal, SubtaskList, TagStrip, TagStripModal, SyncIndicator
- todo: FokusLayout, GridLayout, KanbanLayout, ViewColumn (drop targets, add-column cards)
- todo: ViewSelector, ViewColumnHeader, ViewEditorModal, TodoToolbarContent
- todo: QuickAddTask, TagSelector, KanbanTaskCard, +layout (FAB)
- todo: DurationPicker, StorypointsSelector, FunRatingPicker, PrioritySelector
- contacts: NewContactModal background + remove Schnelleingabe quick input
- calendar: EventDetailModal, VoiceRecordingModal backgrounds
- clock: AuthGateModal background

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-03-31 19:00:24 +02:00
parent e3355191d5
commit 838b4c13de
25 changed files with 245 additions and 755 deletions
Download patch file Download diff file Expand all files Collapse all files

5
apps/calendar/apps/web/src/lib/components/event/EventDetailModal.svelte
View file

@ -470,9 +470,10 @@
} }
.modal-container { .modal-container {
background: hsl(var(--color-surface)); background: var(--color-surface-elevated-2);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
width: 100%; width: 100%;
max-width: 500px; max-width: 500px;
max-height: 90vh; max-height: 90vh;

6
apps/calendar/apps/web/src/lib/components/voice/VoiceRecordingModal.svelte
View file

@ -146,11 +146,11 @@
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: 201; z-index: 201;
background: hsl(var(--color-surface)); background: var(--color-surface-elevated-2);
border-radius: 1.5rem; border-radius: 1.5rem;
box-shadow: box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 25px 50px -12px rgba(0, 0, 0, 0.5),
0 0 0 1px hsl(var(--color-border)); 0 0 0 1px var(--color-border-strong);
padding: 2rem; padding: 2rem;
min-width: 280px; min-width: 280px;
max-width: 90vw; max-width: 90vw;

5
apps/clock/apps/web/src/lib/components/AuthGateModal.svelte
View file

@ -117,9 +117,10 @@
} }
.modal-content { .modal-content {
background-color: var(--color-background, white); background-color: var(--color-surface-elevated-2);
border: 1px solid var(--color-border-strong);
border-radius: 0.75rem; border-radius: 0.75rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
max-width: 28rem; max-width: 28rem;
width: 100%; width: 100%;
padding: 1.5rem; padding: 1.5rem;

102
apps/contacts/apps/web/src/lib/components/NewContactModal.svelte
View file

@ -5,7 +5,6 @@
import { newContactModalStore } from '$lib/stores/new-contact-modal.svelte'; import { newContactModalStore } from '$lib/stores/new-contact-modal.svelte';
import SocialMediaFields from './forms/SocialMediaFields.svelte'; import SocialMediaFields from './forms/SocialMediaFields.svelte';
import DateFields from './forms/DateFields.svelte'; import DateFields from './forms/DateFields.svelte';
import { parseContactInput, formatParsedContactPreview } from '$lib/utils/contact-parser';
import { findDuplicates, type DuplicateMatch } from '$lib/utils/duplicate-detector'; import { findDuplicates, type DuplicateMatch } from '$lib/utils/duplicate-detector';
import { contactCollection } from '$lib/data/local-store'; import { contactCollection } from '$lib/data/local-store';
import { import {
@ -30,7 +29,6 @@
let saving = $state(false); let saving = $state(false);
let error = $state<string | null>(null); let error = $state<string | null>(null);
let firstNameInput: HTMLInputElement; let firstNameInput: HTMLInputElement;
let quickInputRef: HTMLInputElement;
let fileInput: HTMLInputElement; let fileInput: HTMLInputElement;
// Photo state // Photo state
@ -70,50 +68,6 @@
let discord = $state(''); let discord = $state('');
let bluesky = $state(''); let bluesky = $state('');
// ─── Quick Input (NL Parser) ───────────────────────────
let quickInput = $state('');
let quickPreview = $state('');
let quickApplied = $state(false);
function handleQuickInput(e: Event) {
const text = (e.target as HTMLInputElement).value;
quickInput = text;
quickApplied = false;
if (!text.trim()) {
quickPreview = '';
return;
}
const parsed = parseContactInput(text);
quickPreview = formatParsedContactPreview(parsed);
}
function applyQuickInput() {
if (!quickInput.trim() || quickApplied) return;
const parsed = parseContactInput(quickInput);
if (parsed.firstName) firstName = parsed.firstName;
if (parsed.lastName) lastName = parsed.lastName;
if (parsed.email) email = parsed.email;
if (parsed.phone) phone = parsed.phone;
if (parsed.company) company = parsed.company;
quickApplied = true;
quickInput = '';
quickPreview = '';
}
function handleQuickKeydown(e: KeyboardEvent) {
if (e.key === 'Enter') {
e.preventDefault();
applyQuickInput();
// Move focus to first name field
firstNameInput?.focus();
}
}
// ─── Live Duplicate Detection ────────────────────────── // ─── Live Duplicate Detection ──────────────────────────
let duplicates = $state<DuplicateMatch[]>([]); let duplicates = $state<DuplicateMatch[]>([]);
let dupDebounce: ReturnType<typeof setTimeout> | undefined; let dupDebounce: ReturnType<typeof setTimeout> | undefined;
@ -328,22 +282,6 @@
<!-- Modal Body --> <!-- Modal Body -->
<div class="modal-body"> <div class="modal-body">
<!-- Quick Input Bar -->
<div class="quick-input-section">
<input
type="text"
class="quick-input"
bind:this={quickInputRef}
value={quickInput}
oninput={handleQuickInput}
onkeydown={handleQuickKeydown}
placeholder="Schnelleingabe: Max Müller @Firma max@mail.de +49... #tag"
/>
{#if quickPreview}
<div class="quick-preview">{quickPreview}</div>
{/if}
</div>
<!-- Duplicate Warning --> <!-- Duplicate Warning -->
{#if duplicates.length > 0} {#if duplicates.length > 0}
<div class="duplicate-warning" role="alert"> <div class="duplicate-warning" role="alert">
@ -654,14 +592,15 @@
} }
.modal-container { .modal-container {
background: hsl(var(--color-background)); background: var(--color-surface-elevated-2);
border: 1px solid var(--color-border-strong);
border-radius: 1.5rem; border-radius: 1.5rem;
width: 100%; width: 100%;
max-width: 560px; max-width: 560px;
max-height: 90vh; max-height: 90vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
animation: modalIn 0.2s ease-out; animation: modalIn 0.2s ease-out;
} }
@ -691,41 +630,6 @@
padding: 0 1.5rem 1.5rem; padding: 0 1.5rem 1.5rem;
} }
.quick-input-section {
margin-bottom: 1rem;
}
.quick-input {
width: 100%;
padding: 0.625rem 0.875rem;
border: 1px dashed hsl(var(--color-border));
border-radius: 0.75rem;
background: hsl(var(--color-muted) / 0.3);
color: hsl(var(--color-foreground));
font-size: 0.8125rem;
outline: none;
transition: all 0.15s;
}
.quick-input:focus {
border-style: solid;
border-color: hsl(var(--color-primary) / 0.5);
background: hsl(var(--color-background));
box-shadow: 0 0 0 3px hsl(var(--color-primary) / 0.1);
}
.quick-input::placeholder {
color: hsl(var(--color-muted-foreground));
font-size: 0.75rem;
}
.quick-preview {
margin-top: 0.25rem;
padding: 0 0.5rem;
font-size: 0.7rem;
color: hsl(var(--color-muted-foreground));
}
.duplicate-warning { .duplicate-warning {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;

38
apps/todo/apps/web/src/lib/components/QuickAddTask.svelte
View file

@ -526,13 +526,9 @@
min-width: 140px; min-width: 140px;
padding: 0.375rem; padding: 0.375rem;
border-radius: 0.75rem; border-radius: 0.75rem;
background: rgba(255, 255, 255, 0.95); background: var(--color-surface-elevated-3);
backdrop-filter: blur(12px); border: 1px solid var(--color-border);
-webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-xl);
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow:
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
z-index: 50; z-index: 50;
} }
@ -541,17 +537,9 @@
.dropdown { .dropdown {
top: auto; top: auto;
bottom: calc(100% + 0.5rem); bottom: calc(100% + 0.5rem);
box-shadow:
0 -10px 15px -3px rgba(0, 0, 0, 0.1),
0 -4px 6px -2px rgba(0, 0, 0, 0.05);
} }
} }
:global(.dark) .dropdown {
background: rgba(40, 40, 40, 0.95);
border: 1px solid rgba(255, 255, 255, 0.15);
}
.dropdown-item { .dropdown-item {
display: flex; display: flex;
align-items: center; align-items: center;
@ -560,7 +548,7 @@
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
border: none; border: none;
background: transparent; background: transparent;
color: #374151; color: var(--color-foreground);
cursor: pointer; cursor: pointer;
border-radius: 0.5rem; border-radius: 0.5rem;
font-size: 0.8125rem; font-size: 0.8125rem;
@ -568,25 +556,13 @@
transition: background 0.15s; transition: background 0.15s;
} }
:global(.dark) .dropdown-item {
color: #f3f4f6;
}
.dropdown-item:hover { .dropdown-item:hover {
background: rgba(0, 0, 0, 0.05); background: var(--color-surface-hover);
}
:global(.dark) .dropdown-item:hover {
background: rgba(255, 255, 255, 0.1);
} }
.dropdown-item.selected { .dropdown-item.selected {
background: rgba(139, 92, 246, 0.1); background: color-mix(in srgb, var(--color-primary) 12%, transparent);
color: #8b5cf6; color: var(--color-primary);
}
:global(.dark) .dropdown-item.selected {
background: rgba(139, 92, 246, 0.2);
} }
.priority-dot, .priority-dot,

77
apps/todo/apps/web/src/lib/components/SubtaskList.svelte
View file

@ -200,25 +200,17 @@
gap: 0.5rem; gap: 0.5rem;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
border-radius: 0.75rem; border-radius: 0.75rem;
background: rgba(0, 0, 0, 0.03); background: var(--color-surface);
transition: all 0.15s; transition: all 0.15s;
} }
:global(.dark) .subtask-item {
background: rgba(255, 255, 255, 0.05);
}
.subtask-item:hover { .subtask-item:hover {
background: rgba(0, 0, 0, 0.06); background: var(--color-surface-hover);
}
:global(.dark) .subtask-item:hover {
background: rgba(255, 255, 255, 0.1);
} }
.drag-handle { .drag-handle {
cursor: grab; cursor: grab;
color: #9ca3af; color: var(--color-muted-foreground);
padding: 0.25rem; padding: 0.25rem;
opacity: 0.5; opacity: 0.5;
transition: opacity 0.15s; transition: opacity 0.15s;
@ -236,7 +228,7 @@
width: 1.125rem; width: 1.125rem;
height: 1.125rem; height: 1.125rem;
border-radius: 0.25rem; border-radius: 0.25rem;
border: 2px solid rgba(0, 0, 0, 0.2); border: 2px solid var(--color-border);
background: transparent; background: transparent;
display: flex; display: flex;
align-items: center; align-items: center;
@ -247,18 +239,14 @@
padding: 0; padding: 0;
} }
:global(.dark) .subtask-checkbox {
border-color: rgba(255, 255, 255, 0.3);
}
.subtask-checkbox:hover { .subtask-checkbox:hover {
border-color: #8b5cf6; border-color: var(--color-primary);
background: rgba(139, 92, 246, 0.1); background: color-mix(in srgb, var(--color-primary) 10%, transparent);
} }
.subtask-checkbox.checked { .subtask-checkbox.checked {
background: #8b5cf6; background: var(--color-primary);
border-color: #8b5cf6; border-color: var(--color-primary);
} }
.check-icon { .check-icon {
@ -274,41 +262,32 @@
border: none; border: none;
padding: 0; padding: 0;
font-size: 0.875rem; font-size: 0.875rem;
color: #374151; color: var(--color-foreground);
cursor: text; cursor: text;
} }
:global(.dark) .subtask-title {
color: #e5e7eb;
}
.subtask-title.completed { .subtask-title.completed {
text-decoration: line-through; text-decoration: line-through;
color: #9ca3af; color: var(--color-muted-foreground);
} }
.subtask-edit-input { .subtask-edit-input {
flex: 1; flex: 1;
background: white; background: var(--color-surface-elevated-3);
border: 1px solid #8b5cf6; border: 1px solid var(--color-primary);
border-radius: 0.375rem; border-radius: 0.375rem;
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
font-size: 0.875rem; font-size: 0.875rem;
color: #374151; color: var(--color-foreground);
outline: none; outline: none;
} }
:global(.dark) .subtask-edit-input {
background: rgba(255, 255, 255, 0.1);
color: #e5e7eb;
}
.subtask-delete { .subtask-delete {
opacity: 0; opacity: 0;
padding: 0.25rem; padding: 0.25rem;
border: none; border: none;
background: transparent; background: transparent;
color: #9ca3af; color: var(--color-muted-foreground);
cursor: pointer; cursor: pointer;
border-radius: 0.375rem; border-radius: 0.375rem;
transition: all 0.15s; transition: all 0.15s;
@ -319,8 +298,8 @@
} }
.subtask-delete:hover { .subtask-delete:hover {
color: #ef4444; color: var(--color-error);
background: rgba(239, 68, 68, 0.1); background: color-mix(in srgb, var(--color-error) 10%, transparent);
} }
/* Add subtask */ /* Add subtask */
@ -330,21 +309,17 @@
gap: 0.5rem; gap: 0.5rem;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
border-radius: 0.75rem; border-radius: 0.75rem;
border: 1px dashed rgba(0, 0, 0, 0.15); border: 1px dashed var(--color-border);
transition: all 0.15s; transition: all 0.15s;
} }
:global(.dark) .add-subtask {
border-color: rgba(255, 255, 255, 0.15);
}
.add-subtask:focus-within { .add-subtask:focus-within {
border-color: #8b5cf6; border-color: var(--color-primary);
background: rgba(139, 92, 246, 0.05); background: color-mix(in srgb, var(--color-primary) 5%, transparent);
} }
.add-icon { .add-icon {
color: #9ca3af; color: var(--color-muted-foreground);
} }
.add-input { .add-input {
@ -353,15 +328,11 @@
border: none; border: none;
outline: none; outline: none;
font-size: 0.875rem; font-size: 0.875rem;
color: #374151; color: var(--color-foreground);
} }
.add-input::placeholder { .add-input::placeholder {
color: #9ca3af; color: var(--color-muted-foreground);
}
:global(.dark) .add-input {
color: #e5e7eb;
} }
.add-btn { .add-btn {
@ -369,7 +340,7 @@
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 500; font-weight: 500;
color: white; color: white;
background: #8b5cf6; background: var(--color-primary);
border: none; border: none;
border-radius: 0.5rem; border-radius: 0.5rem;
cursor: pointer; cursor: pointer;
@ -377,6 +348,6 @@
} }
.add-btn:hover { .add-btn:hover {
background: #7c3aed; background: var(--color-primary-hover);
} }
</style> </style>

14
apps/todo/apps/web/src/lib/components/SyncIndicator.svelte
View file

@ -117,29 +117,29 @@
} }
.dot-synced { .dot-synced {
background: #22c55e; background: var(--color-success);
box-shadow: 0 0 4px rgba(34, 197, 94, 0.5); box-shadow: 0 0 4px color-mix(in srgb, var(--color-success) 50%, transparent);
} }
.dot-syncing { .dot-syncing {
background: #3b82f6; background: var(--color-primary);
animation: pulse 1s ease-in-out infinite; animation: pulse 1s ease-in-out infinite;
} }
.dot-pending { .dot-pending {
background: #f59e0b; background: var(--color-warning);
} }
.dot-offline { .dot-offline {
background: #f97316; background: var(--color-warning);
} }
.dot-error { .dot-error {
background: #ef4444; background: var(--color-error);
} }
.dot-local { .dot-local {
background: #8b5cf6; background: var(--color-primary);
} }
.dot-idle { .dot-idle {

62
apps/todo/apps/web/src/lib/components/TagStrip.svelte
View file

@ -169,29 +169,19 @@
/* Clear filter pill */ /* Clear filter pill */
.clear-filter-pill { .clear-filter-pill {
color: #ef4444; color: var(--color-error);
background: rgba(239, 68, 68, 0.1) !important; background: color-mix(in srgb, var(--color-error) 10%, transparent) !important;
border-color: rgba(239, 68, 68, 0.3) !important; border-color: color-mix(in srgb, var(--color-error) 30%, transparent) !important;
} }
.clear-filter-pill .tag-name { .clear-filter-pill .tag-name {
color: #ef4444; color: var(--color-error);
font-weight: 600; font-weight: 600;
} }
:global(.dark) .clear-filter-pill {
color: #f87171;
background: rgba(239, 68, 68, 0.15) !important;
border-color: rgba(239, 68, 68, 0.3) !important;
}
:global(.dark) .clear-filter-pill .tag-name {
color: #f87171;
}
.clear-filter-pill:hover:not(.hidden) { .clear-filter-pill:hover:not(.hidden) {
background: rgba(239, 68, 68, 0.2) !important; background: color-mix(in srgb, var(--color-error) 20%, transparent) !important;
border-color: rgba(239, 68, 68, 0.5) !important; border-color: color-mix(in srgb, var(--color-error) 50%, transparent) !important;
} }
.clear-filter-pill.hidden { .clear-filter-pill.hidden {
@ -201,40 +191,24 @@
/* More pill with neutral style */ /* More pill with neutral style */
.more-pill { .more-pill {
color: #374151; color: var(--color-foreground);
} }
.more-pill .tag-name { .more-pill .tag-name {
color: #374151; color: var(--color-foreground);
font-weight: 500; font-weight: 500;
} }
:global(.dark) .more-pill {
color: #f3f4f6;
}
:global(.dark) .more-pill .tag-name {
color: #f3f4f6;
}
/* Create pill with neutral style */ /* Create pill with neutral style */
.create-pill { .create-pill {
color: #374151; color: var(--color-foreground);
} }
.create-pill .tag-name { .create-pill .tag-name {
color: #374151; color: var(--color-foreground);
font-weight: 500; font-weight: 500;
} }
:global(.dark) .create-pill {
color: #f3f4f6;
}
:global(.dark) .create-pill .tag-name {
color: #f3f4f6;
}
/* Glass tag styling */ /* Glass tag styling */
.glass-tag { .glass-tag {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
@ -282,17 +256,13 @@
.tag-name { .tag-name {
font-size: 0.9375rem; font-size: 0.9375rem;
font-weight: 500; font-weight: 500;
color: #374151; color: var(--color-foreground);
white-space: nowrap; white-space: nowrap;
} }
:global(.dark) .tag-name {
color: #f3f4f6;
}
.loading-state { .loading-state {
font-size: 0.875rem; font-size: 0.875rem;
color: hsl(var(--color-muted-foreground)); color: var(--color-muted-foreground);
padding: 0.5rem; padding: 0.5rem;
} }
@ -301,18 +271,14 @@
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
cursor: pointer; cursor: pointer;
color: #6b7280; color: var(--color-muted-foreground);
font-size: 0.875rem; font-size: 0.875rem;
flex-shrink: 0; flex-shrink: 0;
} }
:global(.dark) .empty-state {
color: #9ca3af;
}
.add-hint { .add-hint {
font-size: 0.875rem; font-size: 0.875rem;
color: #8b5cf6; color: var(--color-primary);
font-weight: 500; font-weight: 500;
} }

189
apps/todo/apps/web/src/lib/components/TagStripModal.svelte
View file

@ -328,24 +328,15 @@
max-width: 500px; max-width: 500px;
max-height: 70vh; max-height: 70vh;
z-index: 100; z-index: 100;
background: rgba(255, 255, 255, 0.95); background: var(--color-surface-elevated-2);
backdrop-filter: blur(20px); border: 1px solid var(--color-border);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 1rem; border-radius: 1rem;
box-shadow: box-shadow: var(--shadow-xl);
0 25px 50px -12px rgba(0, 0, 0, 0.25),
0 0 0 1px rgba(255, 255, 255, 0.1);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
} }
:global(.dark) .tag-modal {
background: rgba(30, 30, 30, 0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.modal-header { .modal-header {
display: flex; display: flex;
align-items: center; align-items: center;
@ -356,11 +347,7 @@
.modal-title { .modal-title {
font-size: 1.125rem; font-size: 1.125rem;
font-weight: 600; font-weight: 600;
color: #1f2937; color: var(--color-foreground);
}
:global(.dark) .modal-title {
color: #f3f4f6;
} }
.header-actions { .header-actions {
@ -379,75 +366,48 @@
background: transparent; background: transparent;
border: none; border: none;
cursor: pointer; cursor: pointer;
color: #6b7280; color: var(--color-muted-foreground);
transition: all 0.15s ease; transition: all 0.15s ease;
} }
.header-btn:hover { .header-btn:hover {
background: rgba(0, 0, 0, 0.05); background: var(--color-surface-hover);
color: #1f2937; color: var(--color-foreground);
}
:global(.dark) .header-btn {
color: #9ca3af;
}
:global(.dark) .header-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: #f3f4f6;
} }
/* Search (sticky bottom) */ /* Search (sticky bottom) */
.search-wrapper { .search-wrapper {
position: relative; position: relative;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
border-top: 1px solid rgba(0, 0, 0, 0.08); border-top: 1px solid var(--color-border);
background: rgba(255, 255, 255, 0.9); background: var(--color-surface-elevated-2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
flex-shrink: 0; flex-shrink: 0;
} }
:global(.dark) .search-wrapper {
border-top-color: rgba(255, 255, 255, 0.08);
background: rgba(30, 30, 30, 0.9);
}
.search-wrapper :global(.search-icon) { .search-wrapper :global(.search-icon) {
position: absolute; position: absolute;
left: 1.75rem; left: 1.75rem;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
color: #9ca3af; color: var(--color-muted-foreground);
pointer-events: none; pointer-events: none;
} }
.search-input { .search-input {
width: 100%; width: 100%;
padding: 0.5rem 2rem 0.5rem 2.25rem; padding: 0.5rem 2rem 0.5rem 2.25rem;
border: 1px solid rgba(0, 0, 0, 0.1); border: 1px solid var(--color-border);
border-radius: 0.5rem; border-radius: 0.5rem;
background: rgba(0, 0, 0, 0.03); background: var(--color-surface);
color: #374151; color: var(--color-foreground);
font-size: 0.8125rem; font-size: 0.8125rem;
outline: none; outline: none;
transition: all 0.15s ease; transition: all 0.15s ease;
} }
.search-input:focus { .search-input:focus {
border-color: #8b5cf6; border-color: var(--color-primary);
background: white; background: var(--color-surface-elevated-2);
}
:global(.dark) .search-input {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
color: #f3f4f6;
}
:global(.dark) .search-input:focus {
border-color: #a78bfa;
background: rgba(255, 255, 255, 0.1);
} }
.search-clear { .search-clear {
@ -461,25 +421,20 @@
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
border-radius: 50%; border-radius: 50%;
background: rgba(0, 0, 0, 0.1); background: var(--color-surface-hover);
border: none; border: none;
cursor: pointer; cursor: pointer;
color: #6b7280; color: var(--color-muted-foreground);
} }
.search-clear:hover { .search-clear:hover {
background: rgba(0, 0, 0, 0.15); background: var(--color-border);
}
:global(.dark) .search-clear {
background: rgba(255, 255, 255, 0.1);
color: #9ca3af;
} }
.search-empty { .search-empty {
text-align: center; text-align: center;
padding: 1.5rem; padding: 1.5rem;
color: #9ca3af; color: var(--color-muted-foreground);
font-size: 0.875rem; font-size: 0.875rem;
} }
@ -496,22 +451,17 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 2rem; padding: 2rem;
color: #6b7280; color: var(--color-muted-foreground);
font-size: 0.875rem; font-size: 0.875rem;
gap: 1rem; gap: 1rem;
} }
:global(.dark) .loading-state,
:global(.dark) .empty-state {
color: #9ca3af;
}
.create-btn { .create-btn {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
background: #8b5cf6; background: var(--color-primary);
color: white; color: white;
border: none; border: none;
border-radius: 9999px; border-radius: 9999px;
@ -522,47 +472,34 @@
} }
.create-btn:hover { .create-btn:hover {
background: #7c3aed; background: var(--color-primary-hover);
} }
/* Edit Form Section */ /* Edit Form Section */
.edit-form-section { .edit-form-section {
background: rgba(139, 92, 246, 0.05); background: color-mix(in srgb, var(--color-primary) 5%, transparent);
border: 1px solid rgba(139, 92, 246, 0.2); border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
border-radius: 0.75rem; border-radius: 0.75rem;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
overflow: hidden; overflow: hidden;
} }
:global(.dark) .edit-form-section {
background: rgba(167, 139, 250, 0.1);
border-color: rgba(167, 139, 250, 0.2);
}
.edit-form-header { .edit-form-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
background: rgba(139, 92, 246, 0.1); background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
:global(.dark) .edit-form-header {
background: rgba(167, 139, 250, 0.15);
} }
.edit-form-title { .edit-form-title {
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 600; font-weight: 600;
color: #8b5cf6; color: var(--color-primary);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.025em; letter-spacing: 0.025em;
} }
:global(.dark) .edit-form-title {
color: #a78bfa;
}
.edit-form { .edit-form {
padding: 0.75rem; padding: 0.75rem;
display: flex; display: flex;
@ -581,39 +518,24 @@
height: 24px; height: 24px;
border-radius: 50%; border-radius: 50%;
flex-shrink: 0; flex-shrink: 0;
border: 2px solid rgba(0, 0, 0, 0.1); border: 2px solid var(--color-border);
}
:global(.dark) .color-preview {
border-color: rgba(255, 255, 255, 0.2);
} }
.name-input { .name-input {
flex: 1; flex: 1;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
border: 1px solid rgba(0, 0, 0, 0.15); border: 1px solid var(--color-border);
border-radius: 0.5rem; border-radius: 0.5rem;
background: white; background: var(--color-surface);
color: #374151; color: var(--color-foreground);
font-size: 0.875rem; font-size: 0.875rem;
outline: none; outline: none;
transition: all 0.15s ease; transition: all 0.15s ease;
} }
.name-input:focus { .name-input:focus {
border-color: #8b5cf6; border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
:global(.dark) .name-input {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
color: #f3f4f6;
}
:global(.dark) .name-input:focus {
border-color: #a78bfa;
box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.2);
} }
.color-picker-row { .color-picker-row {
@ -651,12 +573,12 @@
} }
.btn-primary { .btn-primary {
background: #8b5cf6; background: var(--color-primary);
color: white; color: white;
} }
.btn-primary:hover:not(:disabled) { .btn-primary:hover:not(:disabled) {
background: #7c3aed; background: var(--color-primary-hover);
} }
.btn-primary:disabled { .btn-primary:disabled {
@ -665,12 +587,12 @@
} }
.btn-danger { .btn-danger {
background: #ef4444; background: var(--color-error);
color: white; color: white;
} }
.btn-danger:hover { .btn-danger:hover {
background: #dc2626; background: color-mix(in srgb, var(--color-error) 85%, black);
} }
.icon-btn { .icon-btn {
@ -683,22 +605,13 @@
background: transparent; background: transparent;
border: none; border: none;
cursor: pointer; cursor: pointer;
color: #6b7280; color: var(--color-muted-foreground);
transition: all 0.15s ease; transition: all 0.15s ease;
} }
.icon-btn:hover { .icon-btn:hover {
background: rgba(0, 0, 0, 0.1); background: var(--color-surface-hover);
color: #374151; color: var(--color-foreground);
}
:global(.dark) .icon-btn {
color: #9ca3af;
}
:global(.dark) .icon-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: #f3f4f6;
} }
/* Tags grid */ /* Tags grid */
@ -758,14 +671,10 @@
.tag-name { .tag-name {
font-size: 0.8125rem; font-size: 0.8125rem;
font-weight: 500; font-weight: 500;
color: #374151; color: var(--color-foreground);
white-space: nowrap; white-space: nowrap;
} }
:global(.dark) .tag-name {
color: #f3f4f6;
}
.tag-edit-btn { .tag-edit-btn {
display: flex; display: flex;
align-items: center; align-items: center;
@ -773,10 +682,10 @@
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
border-radius: 50%; border-radius: 50%;
background: rgba(0, 0, 0, 0.1); background: var(--color-surface-hover);
border: none; border: none;
cursor: pointer; cursor: pointer;
color: #6b7280; color: var(--color-muted-foreground);
opacity: 0; opacity: 0;
transition: all 0.15s ease; transition: all 0.15s ease;
margin-left: 0.125rem; margin-left: 0.125rem;
@ -787,17 +696,7 @@
} }
.tag-edit-btn:hover { .tag-edit-btn:hover {
background: rgba(0, 0, 0, 0.2); background: var(--color-border);
color: #374151; color: var(--color-foreground);
}
:global(.dark) .tag-edit-btn {
background: rgba(255, 255, 255, 0.15);
color: #9ca3af;
}
:global(.dark) .tag-edit-btn:hover {
background: rgba(255, 255, 255, 0.25);
color: #f3f4f6;
} }
</style> </style>

135
apps/todo/apps/web/src/lib/components/TaskEditModal.svelte
View file

@ -297,34 +297,23 @@
max-height: calc(100vh - 4rem); max-height: calc(100vh - 4rem);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: var(--surface, #ffffff); background: var(--color-surface-elevated-2);
border: 1px solid rgba(0, 0, 0, 0.08); border: 1px solid var(--color-border);
border-radius: 1.5rem; border-radius: 1.5rem;
box-shadow: box-shadow: 0 32px 64px -12px rgba(0, 0, 0, 0.3);
0 32px 64px -12px rgba(0, 0, 0, 0.2),
0 0 0 1px rgba(0, 0, 0, 0.04);
overflow: hidden; overflow: hidden;
} }
:global(.dark) .page {
background: #1a1a1f;
border-color: rgba(255, 255, 255, 0.1);
}
/* ── Top bar ──────────────────────────────────────────── */ /* ── Top bar ──────────────────────────────────────────── */
.top-bar { .top-bar {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0.625rem 1.25rem; padding: 0.625rem 1.25rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.07); border-bottom: 1px solid var(--color-border);
flex-shrink: 0; flex-shrink: 0;
} }
:global(.dark) .top-bar {
border-bottom-color: rgba(255, 255, 255, 0.08);
}
.top-left, .top-left,
.top-right { .top-right {
display: flex; display: flex;
@ -334,7 +323,7 @@
.delete-confirm-text { .delete-confirm-text {
font-size: 0.8125rem; font-size: 0.8125rem;
color: #ef4444; color: var(--color-error);
font-weight: 500; font-weight: 500;
} }
@ -343,14 +332,14 @@
border: none; border: none;
background: transparent; background: transparent;
font-size: 0.8125rem; font-size: 0.8125rem;
color: #6b7280; color: var(--color-muted-foreground);
cursor: pointer; cursor: pointer;
border-radius: 0.5rem; border-radius: 0.5rem;
transition: background 0.15s; transition: background 0.15s;
} }
.btn-ghost:hover { .btn-ghost:hover {
background: rgba(0, 0, 0, 0.06); background: var(--color-surface-hover);
} }
.btn-ghost-danger { .btn-ghost-danger {
@ -358,7 +347,7 @@
border: none; border: none;
background: transparent; background: transparent;
font-size: 0.8125rem; font-size: 0.8125rem;
color: #ef4444; color: var(--color-error);
cursor: pointer; cursor: pointer;
border-radius: 0.5rem; border-radius: 0.5rem;
transition: background 0.15s; transition: background 0.15s;
@ -368,7 +357,7 @@
} }
.btn-ghost-danger:hover { .btn-ghost-danger:hover {
background: rgba(239, 68, 68, 0.08); background: color-mix(in srgb, var(--color-error) 8%, transparent);
} }
.btn-icon-danger { .btn-icon-danger {
@ -379,15 +368,15 @@
height: 1.875rem; height: 1.875rem;
border: none; border: none;
background: transparent; background: transparent;
color: #9ca3af; color: var(--color-muted-foreground);
cursor: pointer; cursor: pointer;
border-radius: 0.5rem; border-radius: 0.5rem;
transition: all 0.15s; transition: all 0.15s;
} }
.btn-icon-danger:hover { .btn-icon-danger:hover {
background: rgba(239, 68, 68, 0.08); background: color-mix(in srgb, var(--color-error) 8%, transparent);
color: #ef4444; color: var(--color-error);
} }
.btn-save { .btn-save {
@ -395,7 +384,7 @@
align-items: center; align-items: center;
gap: 0.375rem; gap: 0.375rem;
padding: 0.375rem 0.875rem; padding: 0.375rem 0.875rem;
background: #8b5cf6; background: var(--color-primary);
color: white; color: white;
border: none; border: none;
border-radius: 0.625rem; border-radius: 0.625rem;
@ -406,7 +395,7 @@
} }
.btn-save:hover:not(:disabled) { .btn-save:hover:not(:disabled) {
background: #7c3aed; background: var(--color-primary-hover);
} }
.btn-save:disabled { .btn-save:disabled {
@ -422,20 +411,15 @@
height: 1.875rem; height: 1.875rem;
border: none; border: none;
background: transparent; background: transparent;
color: #9ca3af; color: var(--color-muted-foreground);
cursor: pointer; cursor: pointer;
border-radius: 0.5rem; border-radius: 0.5rem;
transition: all 0.15s; transition: all 0.15s;
} }
.btn-close:hover { .btn-close:hover {
background: rgba(0, 0, 0, 0.06); background: var(--color-surface-hover);
color: #374151; color: var(--color-foreground);
}
:global(.dark) .btn-close:hover {
background: rgba(255, 255, 255, 0.08);
color: #e5e7eb;
} }
/* ── Title ────────────────────────────────────────────── */ /* ── Title ────────────────────────────────────────────── */
@ -450,7 +434,7 @@
background: transparent; background: transparent;
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 700; font-weight: 700;
color: #111827; color: var(--color-foreground);
line-height: 1.3; line-height: 1.3;
resize: none; resize: none;
overflow: hidden; overflow: hidden;
@ -459,16 +443,8 @@
font-family: inherit; font-family: inherit;
} }
:global(.dark) .title-input {
color: #f9fafb;
}
.title-input::placeholder { .title-input::placeholder {
color: #d1d5db; color: var(--color-border);
}
:global(.dark) .title-input::placeholder {
color: #4b5563;
} }
/* ── Content grid: Description | Subtasks/Links ───────── */ /* ── Content grid: Description | Subtasks/Links ───────── */
@ -477,15 +453,11 @@
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 0; gap: 0;
border-top: 1px solid rgba(0, 0, 0, 0.07); border-top: 1px solid var(--color-border);
overflow: hidden; overflow: hidden;
min-height: 0; min-height: 0;
} }
:global(.dark) .content-grid {
border-top-color: rgba(255, 255, 255, 0.08);
}
/* Single column on narrow */ /* Single column on narrow */
@container (max-width: 600px) { @container (max-width: 600px) {
.content-grid { .content-grid {
@ -503,11 +475,7 @@
} }
.col-subtasks { .col-subtasks {
border-left: 1px solid rgba(0, 0, 0, 0.07); border-left: 1px solid var(--color-border);
}
:global(.dark) .col-subtasks {
border-left-color: rgba(255, 255, 255, 0.08);
} }
.col-label { .col-label {
@ -515,21 +483,17 @@
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: #9ca3af; color: var(--color-muted-foreground);
flex-shrink: 0; flex-shrink: 0;
} }
:global(.dark) .col-label {
color: #6b7280;
}
.desc-textarea { .desc-textarea {
flex: 1; flex: 1;
width: 100%; width: 100%;
border: none; border: none;
background: transparent; background: transparent;
font-size: 0.875rem; font-size: 0.875rem;
color: #374151; color: var(--color-foreground);
resize: none; resize: none;
font-family: inherit; font-family: inherit;
line-height: 1.6; line-height: 1.6;
@ -537,16 +501,8 @@
min-height: 100px; min-height: 100px;
} }
:global(.dark) .desc-textarea {
color: #e5e7eb;
}
.desc-textarea::placeholder { .desc-textarea::placeholder {
color: #d1d5db; color: var(--color-border);
}
:global(.dark) .desc-textarea::placeholder {
color: #4b5563;
} }
.links-block { .links-block {
@ -566,7 +522,7 @@
border: none; border: none;
background: transparent; background: transparent;
font-size: 0.75rem; font-size: 0.75rem;
color: #8b5cf6; color: var(--color-primary);
cursor: pointer; cursor: pointer;
padding: 0.125rem 0.25rem; padding: 0.125rem 0.25rem;
border-radius: 0.375rem; border-radius: 0.375rem;
@ -574,7 +530,7 @@
} }
.link-add:hover { .link-add:hover {
background: rgba(139, 92, 246, 0.08); background: color-mix(in srgb, var(--color-primary) 8%, transparent);
} }
/* ── Properties strip ─────────────────────────────────── */ /* ── Properties strip ─────────────────────────────────── */
@ -583,13 +539,8 @@
flex-wrap: wrap; flex-wrap: wrap;
align-items: stretch; align-items: stretch;
flex-shrink: 0; flex-shrink: 0;
border-top: 1px solid rgba(0, 0, 0, 0.07); border-top: 1px solid var(--color-border);
background: rgba(0, 0, 0, 0.02); background: var(--color-surface);
}
:global(.dark) .props-strip {
border-top-color: rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.02);
} }
.prop { .prop {
@ -597,11 +548,7 @@
flex-direction: column; flex-direction: column;
gap: 0.25rem; gap: 0.25rem;
padding: 0.5rem 0.875rem; padding: 0.5rem 0.875rem;
border-right: 1px solid rgba(0, 0, 0, 0.06); border-right: 1px solid var(--color-border);
}
:global(.dark) .prop {
border-right-color: rgba(255, 255, 255, 0.06);
} }
.prop:last-child { .prop:last-child {
@ -626,20 +573,16 @@
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.07em; letter-spacing: 0.07em;
color: #9ca3af; color: var(--color-muted-foreground);
white-space: nowrap; white-space: nowrap;
} }
:global(.dark) .prop-label {
color: #6b7280;
}
.prop-input, .prop-input,
.prop-select { .prop-select {
border: none; border: none;
background: transparent; background: transparent;
font-size: 0.8125rem; font-size: 0.8125rem;
color: #374151; color: var(--color-foreground);
font-family: inherit; font-family: inherit;
padding: 0; padding: 0;
outline: none; outline: none;
@ -647,28 +590,22 @@
min-width: 0; min-width: 0;
} }
:global(.dark) .prop-input,
:global(.dark) .prop-select { :global(.dark) .prop-select {
color: #e5e7eb;
color-scheme: dark; color-scheme: dark;
} }
.prop-input:focus, .prop-input:focus,
.prop-select:focus { .prop-select:focus {
color: #8b5cf6; color: var(--color-primary);
} }
.prop-divider { .prop-divider {
width: 1px; width: 1px;
background: rgba(0, 0, 0, 0.08); background: var(--color-border);
margin: 0.375rem 0; margin: 0.375rem 0;
flex-shrink: 0; flex-shrink: 0;
} }
:global(.dark) .prop-divider {
background: rgba(255, 255, 255, 0.08);
}
/* ── Spinner ──────────────────────────────────────────── */ /* ── Spinner ──────────────────────────────────────────── */
.spinner { .spinner {
width: 0.875rem; width: 0.875rem;
@ -706,11 +643,7 @@
.col-subtasks { .col-subtasks {
border-left: none; border-left: none;
border-top: 1px solid rgba(0, 0, 0, 0.07); border-top: 1px solid var(--color-border);
}
:global(.dark) .col-subtasks {
border-top-color: rgba(255, 255, 255, 0.08);
} }
} }
</style> </style>

13
apps/todo/apps/web/src/lib/components/TodoToolbarContent.svelte
View file

@ -244,12 +244,10 @@
transform: translateX(-50%); transform: translateX(-50%);
min-width: 260px; min-width: 260px;
padding: 0.75rem; padding: 0.75rem;
background: rgba(255, 255, 255, 0.95); background: var(--color-surface-elevated-3);
backdrop-filter: blur(12px); border: 1px solid var(--color-border);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0.75rem; border-radius: 0.75rem;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); box-shadow: var(--shadow-xl);
z-index: 100; z-index: 100;
} }
@ -259,11 +257,6 @@
top: calc(100% + 0.5rem); top: calc(100% + 0.5rem);
} }
:global(.dark) .filter-dropdown {
background: rgba(30, 30, 30, 0.95);
border-color: rgba(255, 255, 255, 0.1);
}
.filter-section { .filter-section {
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }

30
apps/todo/apps/web/src/lib/components/board-views/FokusLayout.svelte
View file

@ -299,25 +299,21 @@
} }
:global(.fokus-drop-target) { :global(.fokus-drop-target) {
outline: 2px dashed #8b5cf6; outline: 2px dashed var(--color-primary);
outline-offset: -2px; outline-offset: -2px;
border-radius: 0.375rem; border-radius: 0.375rem;
background: rgba(139, 92, 246, 0.04); background: color-mix(in srgb, var(--color-primary) 4%, transparent);
} }
/* Add sheet */ /* Add sheet */
.add-sheet { .add-sheet {
border: 2px dashed rgba(139, 92, 246, 0.3) !important; border: 2px dashed color-mix(in srgb, var(--color-primary) 30%, transparent) !important;
background: rgba(139, 92, 246, 0.02) !important; background: color-mix(in srgb, var(--color-primary) 2%, transparent) !important;
box-shadow: none !important; box-shadow: none !important;
} }
.add-sheet:hover { .add-sheet:hover {
border-color: #8b5cf6 !important; border-color: var(--color-primary) !important;
background: rgba(139, 92, 246, 0.06) !important; background: color-mix(in srgb, var(--color-primary) 6%, transparent) !important;
}
:global(.dark) .add-sheet {
border-color: rgba(139, 92, 246, 0.25) !important;
background: rgba(139, 92, 246, 0.04) !important;
} }
.add-sheet-btn { .add-sheet-btn {
@ -336,13 +332,13 @@
.add-sheet-icon { .add-sheet-icon {
font-size: 2rem; font-size: 2rem;
font-weight: 300; font-weight: 300;
color: #8b5cf6; color: var(--color-primary);
line-height: 1; line-height: 1;
} }
.add-sheet-label { .add-sheet-label {
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
color: #8b5cf6; color: var(--color-primary);
} }
/* Heute erledigt section */ /* Heute erledigt section */
@ -392,17 +388,11 @@
width: 6px; width: 6px;
height: 6px; height: 6px;
border-radius: 50%; border-radius: 50%;
background: rgba(0, 0, 0, 0.15); background: var(--color-border);
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.page-dot.active { .page-dot.active {
background: hsl(var(--color-primary)); background: var(--color-primary);
transform: scale(1.3); transform: scale(1.3);
} }
:global(.dark) .page-dot {
background: rgba(255, 255, 255, 0.2);
}
:global(.dark) .page-dot.active {
background: hsl(var(--color-primary));
}
</style> </style>

18
apps/todo/apps/web/src/lib/components/board-views/GridLayout.svelte
View file

@ -110,30 +110,24 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
min-height: 200px; min-height: 200px;
border: 2px dashed rgba(139, 92, 246, 0.3); border: 2px dashed color-mix(in srgb, var(--color-primary) 30%, transparent);
border-radius: 0.375rem; border-radius: 0.375rem;
background: rgba(139, 92, 246, 0.03); background: color-mix(in srgb, var(--color-primary) 3%, transparent);
cursor: pointer; cursor: pointer;
transition: all 0.15s; transition: all 0.15s;
} }
.add-column-card:hover { .add-column-card:hover {
border-color: #8b5cf6; border-color: var(--color-primary);
background: rgba(139, 92, 246, 0.08); background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
:global(.dark) .add-column-card {
background: rgba(139, 92, 246, 0.05);
}
:global(.dark) .add-column-card:hover {
background: rgba(139, 92, 246, 0.12);
} }
.add-icon { .add-icon {
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 300; font-weight: 300;
color: #8b5cf6; color: var(--color-primary);
} }
.add-label { .add-label {
font-size: 0.8125rem; font-size: 0.8125rem;
font-weight: 500; font-weight: 500;
color: #8b5cf6; color: var(--color-primary);
} }
</style> </style>

26
apps/todo/apps/web/src/lib/components/board-views/KanbanLayout.svelte
View file

@ -92,14 +92,10 @@
} }
.kanban-layout::-webkit-scrollbar-thumb { .kanban-layout::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.1); background: var(--color-border);
border-radius: 3px; border-radius: 3px;
} }
:global(.dark) .kanban-layout::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
}
.kanban-column-wrapper { .kanban-column-wrapper {
min-width: 300px; min-width: 300px;
max-width: 340px; max-width: 340px;
@ -114,33 +110,25 @@
gap: 0.5rem; gap: 0.5rem;
width: 100%; width: 100%;
min-height: 250px; min-height: 250px;
border: 2px dashed rgba(139, 92, 246, 0.3); border: 2px dashed color-mix(in srgb, var(--color-primary) 30%, transparent);
border-radius: 0.375rem; border-radius: 0.375rem;
background: rgba(139, 92, 246, 0.03); background: color-mix(in srgb, var(--color-primary) 3%, transparent);
cursor: pointer; cursor: pointer;
transition: all 0.15s; transition: all 0.15s;
} }
.add-column-card:hover { .add-column-card:hover {
border-color: #8b5cf6; border-color: var(--color-primary);
background: rgba(139, 92, 246, 0.08); background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
:global(.dark) .add-column-card {
background: rgba(139, 92, 246, 0.05);
border-color: rgba(139, 92, 246, 0.25);
}
:global(.dark) .add-column-card:hover {
border-color: #8b5cf6;
background: rgba(139, 92, 246, 0.12);
} }
.add-column-icon { .add-column-icon {
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 300; font-weight: 300;
color: #8b5cf6; color: var(--color-primary);
line-height: 1; line-height: 1;
} }
.add-column-label { .add-column-label {
font-size: 0.8125rem; font-size: 0.8125rem;
font-weight: 500; font-weight: 500;
color: #8b5cf6; color: var(--color-primary);
} }
</style> </style>

16
apps/todo/apps/web/src/lib/components/board-views/ViewColumn.svelte
View file

@ -190,26 +190,18 @@
} }
.tasks-container::-webkit-scrollbar-thumb { .tasks-container::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.1); background: var(--color-border);
border-radius: 3px; border-radius: 3px;
} }
:global(.dark) .tasks-container::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
}
.tasks-container::-webkit-scrollbar-thumb:hover { .tasks-container::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.2); background: var(--color-muted-foreground);
}
:global(.dark) .tasks-container::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.25);
} }
:global(.drop-target) { :global(.drop-target) {
outline: 2px dashed #8b5cf6; outline: 2px dashed var(--color-primary);
outline-offset: -2px; outline-offset: -2px;
border-radius: 0.375rem; border-radius: 0.375rem;
background: rgba(139, 92, 246, 0.04); background: color-mix(in srgb, var(--color-primary) 4%, transparent);
} }
</style> </style>

26
apps/todo/apps/web/src/lib/components/board-views/ViewColumnHeader.svelte
View file

@ -279,19 +279,13 @@
top: calc(100% + 0.5rem); top: calc(100% + 0.5rem);
left: 0; left: 0;
z-index: 51; z-index: 51;
background: rgba(255, 255, 255, 0.97); background: var(--color-surface-elevated-3);
backdrop-filter: blur(12px); border: 1px solid var(--color-border);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0.75rem; border-radius: 0.75rem;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15); box-shadow: var(--shadow-xl);
padding: 0.625rem; padding: 0.625rem;
min-width: 170px; min-width: 170px;
} }
:global(.dark) .color-picker {
background: rgba(30, 30, 30, 0.97);
border-color: rgba(255, 255, 255, 0.12);
}
.picker-grid { .picker-grid {
display: grid; display: grid;
@ -313,7 +307,7 @@
transform: scale(1.15); transform: scale(1.15);
} }
.picker-swatch.active { .picker-swatch.active {
border-color: white; border-color: var(--color-surface-elevated-3);
box-shadow: 0 0 0 2px currentColor; box-shadow: 0 0 0 2px currentColor;
} }
@ -322,19 +316,13 @@
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
padding-top: 0.375rem; padding-top: 0.375rem;
border-top: 1px solid rgba(0, 0, 0, 0.06); border-top: 1px solid var(--color-border);
}
:global(.dark) .custom-color-row {
border-top-color: rgba(255, 255, 255, 0.08);
} }
.custom-label { .custom-label {
font-size: 0.6875rem; font-size: 0.6875rem;
font-weight: 500; font-weight: 500;
color: #6b7280; color: var(--color-muted-foreground);
}
:global(.dark) .custom-label {
color: #9ca3af;
} }
.custom-color-input { .custom-color-input {
@ -350,7 +338,7 @@
padding: 0; padding: 0;
} }
.custom-color-input::-webkit-color-swatch { .custom-color-input::-webkit-color-swatch {
border: 2px solid rgba(0, 0, 0, 0.1); border: 2px solid var(--color-border);
border-radius: 50%; border-radius: 50%;
} }
</style> </style>

12
apps/todo/apps/web/src/lib/components/board-views/ViewEditorModal.svelte
View file

@ -949,16 +949,10 @@
gap: 0.25rem; gap: 0.25rem;
padding: 0.5rem; padding: 0.5rem;
margin-top: 0.25rem; margin-top: 0.25rem;
background: rgba(255, 255, 255, 0.95); background: var(--color-surface-elevated-3);
backdrop-filter: blur(12px); border: 1px solid var(--color-border);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0.75rem; border-radius: 0.75rem;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15); box-shadow: var(--shadow-xl);
}
:global(.dark) .color-picker-dropdown {
background: rgba(30, 30, 40, 0.95);
border-color: rgba(255, 255, 255, 0.15);
} }
.color-swatch { .color-swatch {

27
apps/todo/apps/web/src/lib/components/board-views/ViewSelector.svelte
View file

@ -323,19 +323,10 @@
z-index: 200; z-index: 200;
min-width: 160px; min-width: 160px;
padding: 0.375rem; padding: 0.375rem;
background: rgba(255, 255, 255, 0.95); background: var(--color-surface-elevated-3);
backdrop-filter: blur(16px); border: 1px solid var(--color-border);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0.75rem; border-radius: 0.75rem;
box-shadow: box-shadow: var(--shadow-xl);
0 10px 25px -5px rgba(0, 0, 0, 0.15),
0 4px 6px -2px rgba(0, 0, 0, 0.1);
}
:global(.dark) .context-menu {
background: rgba(30, 30, 40, 0.95);
border-color: rgba(255, 255, 255, 0.12);
} }
.context-item { .context-item {
@ -346,7 +337,7 @@
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
font-size: 0.8125rem; font-size: 0.8125rem;
font-weight: 500; font-weight: 500;
color: #374151; color: var(--color-foreground);
background: transparent; background: transparent;
border: none; border: none;
border-radius: 0.5rem; border-radius: 0.5rem;
@ -355,14 +346,6 @@
} }
.context-item:hover { .context-item:hover {
background: rgba(0, 0, 0, 0.06); background: var(--color-surface-hover);
}
:global(.dark) .context-item {
color: #e5e7eb;
}
:global(.dark) .context-item:hover {
background: rgba(255, 255, 255, 0.1);
} }
</style> </style>

58
apps/todo/apps/web/src/lib/components/form/DurationPicker.svelte
View file

@ -137,29 +137,23 @@
.duration-btn { .duration-btn {
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
border: 1px solid rgba(0, 0, 0, 0.1); border: 1px solid var(--color-border);
border-radius: 9999px; border-radius: 9999px;
background: rgba(255, 255, 255, 0.8); background: var(--color-surface);
font-size: 0.8125rem; font-size: 0.8125rem;
color: #374151; color: var(--color-foreground);
cursor: pointer; cursor: pointer;
transition: all 0.15s; transition: all 0.15s;
} }
:global(.dark) .duration-btn {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.15);
color: #e5e7eb;
}
.duration-btn:hover { .duration-btn:hover {
border-color: #8b5cf6; border-color: var(--color-primary);
} }
.duration-btn.selected { .duration-btn.selected {
background: rgba(139, 92, 246, 0.15); background: color-mix(in srgb, var(--color-primary) 15%, transparent);
border-color: #8b5cf6; border-color: var(--color-primary);
color: #8b5cf6; color: var(--color-primary);
} }
.duration-clear { .duration-clear {
@ -171,14 +165,14 @@
padding: 0; padding: 0;
border: none; border: none;
border-radius: 9999px; border-radius: 9999px;
background: rgba(239, 68, 68, 0.1); background: color-mix(in srgb, var(--color-error) 10%, transparent);
color: #ef4444; color: var(--color-error);
cursor: pointer; cursor: pointer;
transition: all 0.15s; transition: all 0.15s;
} }
.duration-clear:hover { .duration-clear:hover {
background: rgba(239, 68, 68, 0.2); background: color-mix(in srgb, var(--color-error) 20%, transparent);
} }
.duration-custom { .duration-custom {
@ -189,44 +183,32 @@
.duration-input { .duration-input {
width: 80px; width: 80px;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
border: 1px solid rgba(0, 0, 0, 0.15); border: 1px solid var(--color-border);
border-radius: 0.75rem; border-radius: 0.75rem;
background: rgba(255, 255, 255, 0.8); background: var(--color-surface);
font-size: 0.875rem; font-size: 0.875rem;
color: #374151; color: var(--color-foreground);
}
:global(.dark) .duration-input {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.15);
color: #f3f4f6;
} }
.duration-input:focus { .duration-input:focus {
outline: none; outline: none;
border-color: #8b5cf6; border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent);
} }
.duration-unit { .duration-unit {
width: 120px; width: 120px;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
border: 1px solid rgba(0, 0, 0, 0.15); border: 1px solid var(--color-border);
border-radius: 0.75rem; border-radius: 0.75rem;
background: rgba(255, 255, 255, 0.8); background: var(--color-surface);
font-size: 0.875rem; font-size: 0.875rem;
color: #374151; color: var(--color-foreground);
}
:global(.dark) .duration-unit {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.15);
color: #f3f4f6;
} }
.duration-unit:focus { .duration-unit:focus {
outline: none; outline: none;
border-color: #8b5cf6; border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent);
} }
</style> </style>

14
apps/todo/apps/web/src/lib/components/form/FunRatingPicker.svelte
View file

@ -81,14 +81,10 @@
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
border-radius: 9999px; border-radius: 9999px;
background: rgba(0, 0, 0, 0.1); background: var(--color-border);
transition: all 0.15s; transition: all 0.15s;
} }
:global(.dark) .fun-rating-dot .dot {
background: rgba(255, 255, 255, 0.15);
}
.fun-rating-dot.filled .dot { .fun-rating-dot.filled .dot {
background: var(--dot-color); background: var(--dot-color);
} }
@ -98,7 +94,7 @@
justify-content: space-between; justify-content: space-between;
padding: 0 0.25rem; padding: 0 0.25rem;
font-size: 0.6875rem; font-size: 0.6875rem;
color: #9ca3af; color: var(--color-muted-foreground);
} }
.fun-rating-clear { .fun-rating-clear {
@ -110,13 +106,13 @@
padding: 0; padding: 0;
border: none; border: none;
border-radius: 9999px; border-radius: 9999px;
background: rgba(239, 68, 68, 0.1); background: color-mix(in srgb, var(--color-error) 10%, transparent);
color: #ef4444; color: var(--color-error);
cursor: pointer; cursor: pointer;
transition: all 0.15s; transition: all 0.15s;
} }
.fun-rating-clear:hover { .fun-rating-clear:hover {
background: rgba(239, 68, 68, 0.2); background: color-mix(in srgb, var(--color-error) 20%, transparent);
} }
</style> </style>

12
apps/todo/apps/web/src/lib/components/form/PrioritySelector.svelte
View file

@ -37,21 +37,15 @@
align-items: center; align-items: center;
gap: 0.375rem; gap: 0.375rem;
padding: 0.5rem 0.875rem; padding: 0.5rem 0.875rem;
border: 1px solid rgba(0, 0, 0, 0.1); border: 1px solid var(--color-border);
border-radius: 9999px; border-radius: 9999px;
background: rgba(255, 255, 255, 0.8); background: var(--color-surface);
font-size: 0.8125rem; font-size: 0.8125rem;
color: #374151; color: var(--color-foreground);
cursor: pointer; cursor: pointer;
transition: all 0.15s; transition: all 0.15s;
} }
:global(.dark) .priority-btn {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.15);
color: #e5e7eb;
}
.priority-btn:hover { .priority-btn:hover {
border-color: var(--priority-color); border-color: var(--priority-color);
} }

26
apps/todo/apps/web/src/lib/components/form/StorypointsSelector.svelte
View file

@ -53,30 +53,24 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0 0.5rem; padding: 0 0.5rem;
border: 1px solid rgba(0, 0, 0, 0.1); border: 1px solid var(--color-border);
border-radius: 9999px; border-radius: 9999px;
background: rgba(255, 255, 255, 0.8); background: var(--color-surface);
font-size: 0.8125rem; font-size: 0.8125rem;
font-weight: 500; font-weight: 500;
color: #374151; color: var(--color-foreground);
cursor: pointer; cursor: pointer;
transition: all 0.15s; transition: all 0.15s;
} }
:global(.dark) .storypoint-btn {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.15);
color: #e5e7eb;
}
.storypoint-btn:hover { .storypoint-btn:hover {
border-color: #8b5cf6; border-color: var(--color-primary);
} }
.storypoint-btn.selected { .storypoint-btn.selected {
background: rgba(139, 92, 246, 0.15); background: color-mix(in srgb, var(--color-primary) 15%, transparent);
border-color: #8b5cf6; border-color: var(--color-primary);
color: #8b5cf6; color: var(--color-primary);
} }
.storypoint-clear { .storypoint-clear {
@ -88,13 +82,13 @@
padding: 0; padding: 0;
border: none; border: none;
border-radius: 9999px; border-radius: 9999px;
background: rgba(239, 68, 68, 0.1); background: color-mix(in srgb, var(--color-error) 10%, transparent);
color: #ef4444; color: var(--color-error);
cursor: pointer; cursor: pointer;
transition: all 0.15s; transition: all 0.15s;
} }
.storypoint-clear:hover { .storypoint-clear:hover {
background: rgba(239, 68, 68, 0.2); background: color-mix(in srgb, var(--color-error) 20%, transparent);
} }
</style> </style>

30
apps/todo/apps/web/src/lib/components/form/TagSelector.svelte
View file

@ -148,18 +148,12 @@
overflow-y: auto; overflow-y: auto;
padding: 0.375rem; padding: 0.375rem;
border-radius: 0.75rem; border-radius: 0.75rem;
background: rgba(255, 255, 255, 0.95); background: var(--color-surface-elevated-3);
backdrop-filter: blur(12px); border: 1px solid var(--color-border);
border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: var(--shadow-xl);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
z-index: 10; z-index: 10;
} }
:global(.dark) .tag-dropdown {
background: rgba(40, 40, 40, 0.95);
border-color: rgba(255, 255, 255, 0.15);
}
.tag-option { .tag-option {
display: flex; display: flex;
align-items: center; align-items: center;
@ -175,15 +169,11 @@
} }
.tag-option:hover { .tag-option:hover {
background: rgba(0, 0, 0, 0.05); background: var(--color-surface-hover);
}
:global(.dark) .tag-option:hover {
background: rgba(255, 255, 255, 0.1);
} }
.tag-option.selected { .tag-option.selected {
background: rgba(139, 92, 246, 0.1); background: color-mix(in srgb, var(--color-primary) 12%, transparent);
} }
.tag-dot { .tag-dot {
@ -196,23 +186,19 @@
.tag-name { .tag-name {
flex: 1; flex: 1;
font-size: 0.875rem; font-size: 0.875rem;
color: #374151; color: var(--color-foreground);
}
:global(.dark) .tag-name {
color: #e5e7eb;
} }
.check-icon { .check-icon {
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
color: #8b5cf6; color: var(--color-primary);
} }
.no-tags { .no-tags {
padding: 0.75rem; padding: 0.75rem;
text-align: center; text-align: center;
font-size: 0.875rem; font-size: 0.875rem;
color: #9ca3af; color: var(--color-muted-foreground);
} }
</style> </style>

35
apps/todo/apps/web/src/lib/components/kanban/KanbanTaskCard.svelte
View file

@ -597,17 +597,10 @@
z-index: 100; z-index: 100;
min-width: 160px; min-width: 160px;
padding: 0.375rem; padding: 0.375rem;
background: rgba(255, 255, 255, 0.95); background: var(--color-surface-elevated-3);
backdrop-filter: blur(12px); border: 1px solid var(--color-border);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0.75rem; border-radius: 0.75rem;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15); box-shadow: var(--shadow-xl);
}
:global(.dark) .context-menu {
background: rgba(40, 40, 40, 0.95);
border-color: rgba(255, 255, 255, 0.15);
} }
.context-item { .context-item {
@ -619,31 +612,23 @@
border: none; border: none;
background: transparent; background: transparent;
font-size: 0.875rem; font-size: 0.875rem;
color: #374151; color: var(--color-foreground);
cursor: pointer; cursor: pointer;
border-radius: 0.5rem; border-radius: 0.5rem;
transition: background 0.15s; transition: background 0.15s;
text-align: left; text-align: left;
} }
:global(.dark) .context-item {
color: #e5e7eb;
}
.context-item:hover { .context-item:hover {
background: rgba(0, 0, 0, 0.05); background: var(--color-surface-hover);
}
:global(.dark) .context-item:hover {
background: rgba(255, 255, 255, 0.1);
} }
.context-item.danger { .context-item.danger {
color: #ef4444; color: var(--color-error);
} }
.context-item.danger:hover { .context-item.danger:hover {
background: rgba(239, 68, 68, 0.1); background: color-mix(in srgb, var(--color-error) 10%, transparent);
} }
.context-icon { .context-icon {
@ -654,14 +639,10 @@
.context-divider { .context-divider {
height: 1px; height: 1px;
background: rgba(0, 0, 0, 0.1); background: var(--color-border);
margin: 0.25rem 0.5rem; margin: 0.25rem 0.5rem;
} }
:global(.dark) .context-divider {
background: rgba(255, 255, 255, 0.1);
}
/* Inline subtasks — same size as title, just indented */ /* Inline subtasks — same size as title, just indented */
.subtasks-inline { .subtasks-inline {
display: flex; display: flex;

24
apps/todo/apps/web/src/routes/(app)/+layout.svelte
View file

@ -601,13 +601,9 @@
width: 54px; width: 54px;
height: 54px; height: 54px;
border-radius: 50%; border-radius: 50%;
background: rgba(255, 255, 255, 0.9); background: var(--color-surface-elevated-2);
backdrop-filter: blur(12px); border: 1px solid var(--color-border);
-webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-xl);
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.15),
0 2px 4px rgba(0, 0, 0, 0.1);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
@ -616,16 +612,8 @@
transition: all 0.2s ease; transition: all 0.2s ease;
} }
:global(.dark) .pillnav-fab {
background: rgba(30, 30, 30, 0.9);
border-color: rgba(255, 255, 255, 0.15);
}
.pillnav-fab:hover { .pillnav-fab:hover {
transform: scale(1.05); transform: scale(1.05);
box-shadow:
0 6px 16px rgba(0, 0, 0, 0.2),
0 3px 6px rgba(0, 0, 0, 0.15);
} }
.pillnav-fab:active { .pillnav-fab:active {
@ -635,10 +623,6 @@
.fab-icon { .fab-icon {
width: 24px; width: 24px;
height: 24px; height: 24px;
color: #374151; color: var(--color-foreground);
}
:global(.dark) .fab-icon {
color: #f3f4f6;
} }
</style> </style>