mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 20:01:09 +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
|
|
@ -268,34 +268,22 @@
|
|||
}
|
||||
|
||||
.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);
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
:global(.dark) .glass-pill {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
color: #f3f4f6;
|
||||
0 4px 6px -1px hsl(var(--color-foreground) / 0.1),
|
||||
0 2px 4px -1px hsl(var(--color-foreground) / 0.06);
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.glass-pill:hover {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-color: rgba(0, 0, 0, 0.15);
|
||||
background: hsl(var(--color-surface) / 0.95);
|
||||
transform: translateY(-1px);
|
||||
box-shadow:
|
||||
0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
||||
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
:global(.dark) .glass-pill:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-color: rgba(255, 255, 255, 0.25);
|
||||
0 10px 15px -3px hsl(var(--color-foreground) / 0.1),
|
||||
0 4px 6px -2px hsl(var(--color-foreground) / 0.05);
|
||||
}
|
||||
|
||||
.pill-icon {
|
||||
|
|
@ -322,42 +310,23 @@
|
|||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
background: transparent;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
:global(.dark) .embedded-btn {
|
||||
color: #f3f4f6;
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.embedded-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
:global(.dark) .embedded-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: hsl(var(--color-foreground) / 0.05);
|
||||
}
|
||||
|
||||
/* Active state for toggle mode */
|
||||
.embedded-btn.active {
|
||||
background: color-mix(in srgb, var(--color-primary-500, #3b82f6) 15%, transparent 85%);
|
||||
color: var(--color-primary-500, #3b82f6);
|
||||
}
|
||||
|
||||
:global(.dark) .embedded-btn.active {
|
||||
background: color-mix(in srgb, var(--color-primary-500, #3b82f6) 25%, transparent 75%);
|
||||
color: var(--color-primary-400, #60a5fa);
|
||||
background: hsl(var(--color-primary) / 0.15);
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
|
||||
.glass-pill.active {
|
||||
background: color-mix(in srgb, var(--color-primary-500, #3b82f6) 15%, white 85%);
|
||||
border-color: var(--color-primary-500, #3b82f6);
|
||||
color: var(--color-primary-500, #3b82f6);
|
||||
}
|
||||
|
||||
:global(.dark) .glass-pill.active {
|
||||
background: color-mix(in srgb, var(--color-primary-500, #3b82f6) 30%, transparent 70%);
|
||||
border-color: var(--color-primary-400, #60a5fa);
|
||||
color: var(--color-primary-400, #60a5fa);
|
||||
background: hsl(var(--color-primary) / 0.15);
|
||||
border-color: hsl(var(--color-primary));
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
|
||||
.chevron-icon {
|
||||
|
|
@ -420,18 +389,13 @@
|
|||
}
|
||||
|
||||
.glass-dropdown {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
background: hsl(var(--color-surface) / 0.95);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
box-shadow:
|
||||
0 20px 25px -5px rgba(0, 0, 0, 0.1),
|
||||
0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
:global(.dark) .glass-dropdown {
|
||||
background: rgba(30, 30, 30, 0.95);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
0 20px 25px -5px hsl(var(--color-foreground) / 0.1),
|
||||
0 10px 10px -5px hsl(var(--color-foreground) / 0.04);
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
|
|
@ -440,13 +404,8 @@
|
|||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #6b7280;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
:global(.dark) .dropdown-header {
|
||||
color: #9ca3af;
|
||||
border-bottom-color: rgba(255, 255, 255, 0.1);
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
border-bottom: 1px solid hsl(var(--color-border));
|
||||
}
|
||||
|
||||
.time-selectors {
|
||||
|
|
@ -467,14 +426,10 @@
|
|||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #6b7280;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
:global(.dark) .column-label {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.hour-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -509,32 +464,19 @@
|
|||
border-radius: 0.5rem;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
:global(.dark) .hour-option {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
.hour-option:hover:not(.disabled) {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
:global(.dark) .hour-option:hover:not(.disabled) {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: hsl(var(--color-foreground) / 0.05);
|
||||
}
|
||||
|
||||
.hour-option.active {
|
||||
background: color-mix(in srgb, var(--color-primary-500, #3b82f6) 20%, white 80%);
|
||||
color: var(--color-primary-500, #3b82f6);
|
||||
}
|
||||
|
||||
:global(.dark) .hour-option.active {
|
||||
background: color-mix(in srgb, var(--color-primary-500, #3b82f6) 30%, transparent 70%);
|
||||
color: var(--color-primary-500, #3b82f6);
|
||||
background: hsl(var(--color-primary) / 0.2);
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
|
||||
.hour-option.disabled {
|
||||
|
|
@ -544,27 +486,19 @@
|
|||
|
||||
.time-divider {
|
||||
width: 1px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
background: hsl(var(--color-border));
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
:global(.dark) .time-divider {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.dropdown-footer {
|
||||
padding: 0.5rem 1rem;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-top: 1px solid hsl(var(--color-border));
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:global(.dark) .dropdown-footer {
|
||||
border-top-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.current-range {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-primary-500, #3b82f6);
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -49,28 +49,20 @@
|
|||
border: none;
|
||||
border-radius: 9999px;
|
||||
cursor: pointer;
|
||||
color: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
:global(.dark) .toolbar-btn {
|
||||
color: #f3f4f6;
|
||||
}
|
||||
|
||||
.toolbar-btn:hover:not(:disabled) {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
:global(.dark) .toolbar-btn:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: hsl(var(--color-foreground) / 0.05);
|
||||
}
|
||||
|
||||
.toolbar-btn.active {
|
||||
background: color-mix(in srgb, #3b82f6 15%, transparent 85%);
|
||||
color: #3b82f6;
|
||||
background: hsl(var(--color-primary) / 0.15);
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
|
||||
.toolbar-btn.icon-only {
|
||||
|
|
|
|||
|
|
@ -21,13 +21,11 @@
|
|||
value: string;
|
||||
/** Called when view changes */
|
||||
onChange: (id: string) => void;
|
||||
/** Primary color for active state */
|
||||
primaryColor?: string;
|
||||
/** Embedded mode - no background/border, for use inside a parent bar */
|
||||
embedded?: boolean;
|
||||
}
|
||||
|
||||
let { options, value, onChange, primaryColor = '#3b82f6', embedded = false }: Props = $props();
|
||||
let { options, value, onChange, embedded = false }: Props = $props();
|
||||
|
||||
let containerRef = $state<HTMLDivElement | null>(null);
|
||||
let indicatorStyle = $state('');
|
||||
|
|
@ -84,7 +82,6 @@
|
|||
class="pill-view-switcher"
|
||||
class:glass-pill={!embedded}
|
||||
class:embedded-switcher={embedded}
|
||||
style="--switcher-primary-color: {primaryColor}"
|
||||
bind:this={containerRef}
|
||||
>
|
||||
<!-- Sliding indicator -->
|
||||
|
|
@ -127,18 +124,13 @@
|
|||
}
|
||||
|
||||
.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);
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
:global(.dark) .glass-pill {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
0 4px 6px -1px hsl(var(--color-foreground) / 0.1),
|
||||
0 2px 4px -1px hsl(var(--color-foreground) / 0.06);
|
||||
}
|
||||
|
||||
/* Embedded mode - no background/border */
|
||||
|
|
@ -156,17 +148,12 @@
|
|||
top: 0;
|
||||
bottom: 0;
|
||||
border-radius: 9999px;
|
||||
background: color-mix(in srgb, var(--switcher-primary-color) 15%, white 85%);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
background: hsl(var(--color-primary) / 0.15);
|
||||
box-shadow: 0 1px 3px hsl(var(--color-foreground) / 0.1);
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
:global(.dark) .sliding-indicator {
|
||||
background: color-mix(in srgb, var(--switcher-primary-color) 25%, transparent 75%);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.switcher-btn {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
|
@ -179,31 +166,19 @@
|
|||
border: none;
|
||||
border-radius: 9999px;
|
||||
cursor: pointer;
|
||||
color: #6b7280;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
:global(.dark) .switcher-btn {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.switcher-btn:hover:not(.disabled) {
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
:global(.dark) .switcher-btn:hover:not(.disabled) {
|
||||
color: #e5e7eb;
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.switcher-btn.active {
|
||||
color: var(--switcher-primary-color);
|
||||
}
|
||||
|
||||
:global(.dark) .switcher-btn.active {
|
||||
color: var(--switcher-primary-color);
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
|
||||
.switcher-btn.disabled {
|
||||
|
|
|
|||
|
|
@ -55,7 +55,6 @@
|
|||
searchingText?: string;
|
||||
createText?: string;
|
||||
appIcon?: string;
|
||||
primaryColor?: string;
|
||||
autoFocus?: boolean;
|
||||
/** Bottom offset from viewport bottom (default: '70px') */
|
||||
bottomOffset?: string;
|
||||
|
|
@ -74,7 +73,6 @@
|
|||
searchingText = 'Suche...',
|
||||
createText = 'Erstellen',
|
||||
appIcon = 'search',
|
||||
primaryColor = '#8b5cf6',
|
||||
autoFocus = true,
|
||||
bottomOffset = '70px',
|
||||
hasFabRight = false,
|
||||
|
|
@ -248,7 +246,7 @@
|
|||
<div
|
||||
class="quick-input-bar"
|
||||
class:has-fab-right={hasFabRight}
|
||||
style="--primary-color: {primaryColor}; --bottom-offset: {bottomOffset}"
|
||||
style="--bottom-offset: {bottomOffset}"
|
||||
>
|
||||
<!-- Results Panel (above input) -->
|
||||
{#if showPanel}
|
||||
|
|
@ -451,32 +449,27 @@
|
|||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 1.25rem;
|
||||
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);
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
border-radius: 9999px;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
0 4px 6px -1px hsl(var(--color-foreground) / 0.1),
|
||||
0 2px 4px -1px hsl(var(--color-foreground) / 0.06);
|
||||
transition: all 0.2s ease;
|
||||
/* Fixed height to prevent size changes */
|
||||
height: 54px;
|
||||
}
|
||||
|
||||
:global(.dark) .input-container {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.input-container:focus-within {
|
||||
border-color: var(--primary-color);
|
||||
border-color: hsl(var(--color-primary));
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06),
|
||||
0 0 0 2px color-mix(in srgb, var(--primary-color) 25%, transparent);
|
||||
0 4px 6px -1px hsl(var(--color-foreground) / 0.1),
|
||||
0 2px 4px -1px hsl(var(--color-foreground) / 0.06),
|
||||
0 0 0 2px hsl(var(--color-primary) / 0.25);
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
|
|
@ -530,29 +523,29 @@
|
|||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
/* Syntax highlighting colors */
|
||||
/* Syntax highlighting colors - using theme-aware semantic colors */
|
||||
.input-highlight-backdrop :global(.hl-priority-urgent) {
|
||||
color: #ef4444;
|
||||
color: hsl(var(--color-error, 0 84% 60%));
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.input-highlight-backdrop :global(.hl-priority-high) {
|
||||
color: #f97316;
|
||||
color: hsl(var(--color-warning, 25 95% 53%));
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.input-highlight-backdrop :global(.hl-priority-medium) {
|
||||
color: #eab308;
|
||||
color: hsl(var(--color-warning, 48 96% 53%));
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.input-highlight-backdrop :global(.hl-priority-low) {
|
||||
color: #22c55e;
|
||||
color: hsl(var(--color-success, 142 71% 45%));
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.input-highlight-backdrop :global(.hl-tag) {
|
||||
color: var(--primary-color);
|
||||
color: hsl(var(--color-primary));
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
|
@ -562,12 +555,12 @@
|
|||
}
|
||||
|
||||
.input-highlight-backdrop :global(.hl-date) {
|
||||
color: hsl(262 83% 58%);
|
||||
color: hsl(var(--color-accent, 262 83% 58%));
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.input-highlight-backdrop :global(.hl-time) {
|
||||
color: hsl(262 83% 58%);
|
||||
color: hsl(var(--color-accent, 262 83% 58%));
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
|
@ -575,8 +568,8 @@
|
|||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 9999px;
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
background: hsl(var(--color-primary));
|
||||
color: hsl(var(--color-primary-foreground, 0 0% 100%));
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
|
|
@ -612,19 +605,14 @@
|
|||
margin: 0 auto 0.5rem;
|
||||
max-height: 320px;
|
||||
overflow-y: auto;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
background: hsl(var(--color-surface) / 0.95);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-radius: 1rem;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
:global(.dark) .results-panel {
|
||||
background: rgba(30, 30, 30, 0.95);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
0 4px 6px -1px hsl(var(--color-foreground) / 0.1),
|
||||
0 2px 4px -1px hsl(var(--color-foreground) / 0.06);
|
||||
}
|
||||
|
||||
/* Result Items */
|
||||
|
|
@ -661,8 +649,8 @@
|
|||
height: 36px;
|
||||
min-width: 36px;
|
||||
border-radius: 9999px;
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
background: hsl(var(--color-primary));
|
||||
color: hsl(var(--color-primary-foreground, 0 0% 100%));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -750,7 +738,7 @@
|
|||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border: 2px solid hsl(var(--color-border));
|
||||
border-top-color: var(--primary-color);
|
||||
border-top-color: hsl(var(--color-primary));
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue