mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-23 02:46:42 +02:00
fix(ui): replace hardcoded colors with theme variables
- InputBar: use --color-primary, --color-surface, --color-border for focus ring, backgrounds, and syntax highlighting - PillToolbarButton: active state uses --color-primary - PillViewSwitcher: sliding indicator and active text use theme colors - PillTimeRangeSelector: all glass effects and active states themed - CalendarToolbar: FAB active state uses theme colors - CalendarToolbarContent: removed hardcoded primaryColor prop - DateStrip: replaced all #3b82f6 with theme variables All UI components now automatically adapt to the selected theme (Ocean, Sunset, Forest, etc.) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Till-JS
parent
a1c3eafee6
commit
88c91e22b0
7 changed files with 140 additions and 247 deletions
|
|
@ -146,11 +146,11 @@
|
|||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
background: hsl(var(--color-surface) / 0.92);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
box-shadow: 0 -2px 16px hsl(var(--color-foreground) / 0.08);
|
||||
border-radius: 1rem;
|
||||
white-space: nowrap;
|
||||
max-width: calc(100vw - 2rem);
|
||||
|
|
@ -164,26 +164,16 @@
|
|||
display: none; /* Chrome/Safari */
|
||||
}
|
||||
|
||||
:global(.dark) .toolbar-content {
|
||||
background: rgba(30, 30, 30, 0.92);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
/* Glass styling */
|
||||
.glass-pill {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
background: hsl(var(--color-surface) / 0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
box-shadow: 0 2px 8px hsl(var(--color-foreground) / 0.08);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
:global(.dark) .glass-pill {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glass-panel {
|
||||
background: transparent;
|
||||
}
|
||||
|
|
@ -203,19 +193,15 @@
|
|||
|
||||
.toolbar-fab:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 4px 12px hsl(var(--color-foreground) / 0.15);
|
||||
}
|
||||
|
||||
.toolbar-fab.active {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
:global(.dark) .toolbar-fab.active {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
background: hsl(var(--color-muted));
|
||||
}
|
||||
|
||||
.toolbar-fab.active .fab-icon {
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
|
||||
.fab-icon {
|
||||
|
|
@ -232,14 +218,10 @@
|
|||
.toolbar-divider {
|
||||
width: 1px;
|
||||
height: 1.5rem;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
background: hsl(var(--color-border));
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
|
||||
:global(.dark) .toolbar-divider {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
/* Layout toggle button */
|
||||
.layout-btn {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -101,7 +101,6 @@
|
|||
options={viewOptions}
|
||||
value={viewStore.viewType}
|
||||
onChange={handleViewChange}
|
||||
primaryColor="#3b82f6"
|
||||
embedded={true}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -155,21 +154,12 @@
|
|||
}
|
||||
|
||||
.toolbar-content.vertical :global(.pill-view-switcher .switcher-btn:hover) {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
:global(.dark) .toolbar-content.vertical :global(.pill-view-switcher .switcher-btn:hover) {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: hsl(var(--color-foreground) / 0.05);
|
||||
}
|
||||
|
||||
.toolbar-content.vertical :global(.pill-view-switcher .switcher-btn.active) {
|
||||
background: color-mix(in srgb, #3b82f6 15%, transparent 85%);
|
||||
border-color: color-mix(in srgb, #3b82f6 25%, transparent 75%);
|
||||
}
|
||||
|
||||
:global(.dark) .toolbar-content.vertical :global(.pill-view-switcher .switcher-btn.active) {
|
||||
background: color-mix(in srgb, #3b82f6 25%, transparent 75%);
|
||||
border-color: color-mix(in srgb, #3b82f6 35%, transparent 65%);
|
||||
background: hsl(var(--color-primary) / 0.15);
|
||||
border-color: hsl(var(--color-primary) / 0.25);
|
||||
}
|
||||
|
||||
/* PillTimeRangeSelector in vertical mode */
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<script lang="ts">
|
||||
import { viewStore } from '$lib/stores/view.svelte';
|
||||
import { eventsStore } from '$lib/stores/events.svelte';
|
||||
import { settingsStore } from '$lib/stores/settings.svelte';
|
||||
import DateStripContextMenu from './DateStripContextMenu.svelte';
|
||||
import {
|
||||
format,
|
||||
isToday,
|
||||
|
|
@ -14,6 +16,14 @@
|
|||
import { onMount, tick } from 'svelte';
|
||||
import SunCalc from 'suncalc';
|
||||
|
||||
// Context menu reference
|
||||
let contextMenu: DateStripContextMenu;
|
||||
|
||||
function handleContextMenu(e: MouseEvent) {
|
||||
e.preventDefault();
|
||||
contextMenu?.show(e.clientX, e.clientY);
|
||||
}
|
||||
|
||||
interface Props {
|
||||
isSidebarMode?: boolean;
|
||||
isToolbarExpanded?: boolean;
|
||||
|
|
@ -223,8 +233,10 @@
|
|||
class="date-strip-wrapper"
|
||||
class:sidebar-mode={isSidebarMode}
|
||||
class:toolbar-expanded={isToolbarExpanded}
|
||||
class:compact={settingsStore.dateStripCompact}
|
||||
>
|
||||
<div class="date-strip-container">
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="date-strip-container" oncontextmenu={handleContextMenu}>
|
||||
<!-- Month label -->
|
||||
<div class="month-header">
|
||||
<span class="month-label">
|
||||
|
|
@ -250,12 +262,12 @@
|
|||
{@const isFirstOfMonth = day.getDate() === 1}
|
||||
{@const moonPhase = isSignificantMoonPhase(day)}
|
||||
{@const eventCount = getEventCount(day)}
|
||||
{#if isFirstOfMonth}
|
||||
{#if isFirstOfMonth && settingsStore.dateStripShowMonthDividers}
|
||||
<div class="month-divider"></div>
|
||||
{/if}
|
||||
<button
|
||||
class="day-item"
|
||||
class:weekend={dayIsWeekend}
|
||||
class:weekend={dayIsWeekend && settingsStore.dateStripHighlightWeekends}
|
||||
class:selected={dayIsSelected && !dayIsToday}
|
||||
class:in-range={dayInRange && !dayIsToday}
|
||||
class:range-start={dayIsRangeStart && !dayIsToday}
|
||||
|
|
@ -263,23 +275,17 @@
|
|||
data-date={format(day, 'yyyy-MM-dd')}
|
||||
data-is-today={dayIsToday}
|
||||
onclick={() => handleDayClick(day)}
|
||||
style={dayIsToday
|
||||
? 'background: #3b82f6; color: white; border-radius: 10px; font-weight: 700; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);'
|
||||
: ''}
|
||||
class:is-today={dayIsToday}
|
||||
>
|
||||
{#if moonPhase.significant}
|
||||
<span class="moon-indicator">{moonPhase.emoji}</span>
|
||||
{/if}
|
||||
<span class="day-weekday" style={dayIsToday ? 'opacity: 1; color: white;' : ''}
|
||||
>{format(day, 'EE', { locale: de })}</span
|
||||
>
|
||||
<span class="day-number" style={dayIsToday ? 'color: white;' : ''}
|
||||
>{format(day, 'd')}</span
|
||||
>
|
||||
<span class="day-weekday">{format(day, 'EE', { locale: de })}</span>
|
||||
<span class="day-number">{format(day, 'd')}</span>
|
||||
{#if eventCount > 0}
|
||||
<div class="event-dots" style={dayIsToday ? 'opacity: 0.9;' : ''}>
|
||||
<div class="event-dots">
|
||||
{#each Array(eventCount) as _, i}
|
||||
<span class="event-dot" style={dayIsToday ? 'background: white;' : ''}></span>
|
||||
<span class="event-dot"></span>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
@ -327,21 +333,21 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0.375rem 0.875rem;
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
border: 1px solid rgba(59, 130, 246, 0.3);
|
||||
background: hsl(var(--color-primary) / 0.1);
|
||||
border: 1px solid hsl(var(--color-primary) / 0.3);
|
||||
border-radius: 9999px;
|
||||
cursor: pointer;
|
||||
color: #3b82f6;
|
||||
color: hsl(var(--color-primary));
|
||||
pointer-events: auto;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.today-button:hover {
|
||||
background: #3b82f6;
|
||||
border-color: #3b82f6;
|
||||
color: white;
|
||||
background: hsl(var(--color-primary));
|
||||
border-color: hsl(var(--color-primary));
|
||||
color: hsl(var(--color-primary-foreground, 0 0% 100%));
|
||||
transform: translateY(-50%) scale(1.02);
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
||||
box-shadow: 0 4px 12px hsl(var(--color-primary) / 0.3);
|
||||
}
|
||||
|
||||
.today-button:hover .today-date {
|
||||
|
|
@ -358,7 +364,7 @@
|
|||
.today-date {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: #60a5fa;
|
||||
color: hsl(var(--color-primary) / 0.8);
|
||||
}
|
||||
|
||||
.date-strip-container {
|
||||
|
|
@ -464,7 +470,7 @@
|
|||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background: #3b82f6;
|
||||
background: hsl(var(--color-primary));
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
|
|
@ -478,13 +484,13 @@
|
|||
|
||||
.day-item.selected {
|
||||
background: var(--color-muted, #f3f4f6);
|
||||
color: #3b82f6;
|
||||
color: hsl(var(--color-primary));
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* View range highlighting */
|
||||
.day-item.in-range {
|
||||
background: rgba(59, 130, 246, 0.15);
|
||||
background: hsl(var(--color-primary) / 0.15);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
|
|
@ -501,7 +507,33 @@
|
|||
}
|
||||
|
||||
.day-item.in-range:hover {
|
||||
background: rgba(59, 130, 246, 0.25);
|
||||
background: hsl(var(--color-primary) / 0.25);
|
||||
}
|
||||
|
||||
/* Today styling */
|
||||
.day-item.is-today {
|
||||
background: hsl(var(--color-primary));
|
||||
color: hsl(var(--color-primary-foreground, 0 0% 100%));
|
||||
border-radius: 10px;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 2px 8px hsl(var(--color-primary) / 0.4);
|
||||
}
|
||||
|
||||
.day-item.is-today .day-weekday {
|
||||
opacity: 1;
|
||||
color: hsl(var(--color-primary-foreground, 0 0% 100%));
|
||||
}
|
||||
|
||||
.day-item.is-today .day-number {
|
||||
color: hsl(var(--color-primary-foreground, 0 0% 100%));
|
||||
}
|
||||
|
||||
.day-item.is-today .event-dots {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.day-item.is-today .event-dot {
|
||||
background: hsl(var(--color-primary-foreground, 0 0% 100%));
|
||||
}
|
||||
|
||||
.day-weekday {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue