alexei.dolgolyov
d9ef3c6cc3
Foundation pass on the Aurora redesign: - app.css: full token swap to lavender/orchid/mint/sky pastel palette, vivid aurora gradient backdrop, frosted glass surface tokens, two themes (Aurora dark + Pearl light), shadow recipe for floating glass. - fonts: add Geist Sans / Geist Mono / Newsreader, drop DM Sans usage (legacy fontsource entries kept in package.json until full migration). - layout.svelte: sidebar becomes a floating glass rail with a conic- gradient brand orb, Newsreader italic 'Bridge' wordmark, soft glass hovers on nav links, gradient active indicator, gradient user avatar. - Card.svelte: glass surface + inner highlight + soft hover lift. - PageHeader.svelte: Newsreader serif display title. - +page.svelte (dashboard): stat cards become glass with colored accent 'orb', event timeline gets soft glass rows + slide-on-hover. Build clean (0 errors, pre-existing a11y warnings unchanged). Other pages still inherit old chrome via shared tokens but will need component-specific passes; tracked separately.
56 lines
1.3 KiB
Svelte
56 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
|
|
interface Props {
|
|
children: Snippet;
|
|
class?: string;
|
|
hover?: boolean;
|
|
entityId?: number | string;
|
|
[key: string]: unknown;
|
|
}
|
|
|
|
let { children, class: className = '', hover = false, entityId = undefined, ...rest }: Props = $props();
|
|
</script>
|
|
|
|
<div
|
|
class="card-component {hover ? 'card-hover' : ''} {className}"
|
|
data-entity-id={entityId}
|
|
{...rest}
|
|
>
|
|
<div class="card-component__inner">
|
|
{@render children()}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.card-component {
|
|
position: relative;
|
|
background: var(--color-glass);
|
|
backdrop-filter: blur(28px) saturate(160%);
|
|
-webkit-backdrop-filter: blur(28px) saturate(160%);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 22px;
|
|
box-shadow: var(--shadow-card);
|
|
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease;
|
|
overflow: hidden;
|
|
}
|
|
.card-component::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
pointer-events: none;
|
|
background: linear-gradient(180deg, var(--color-highlight), transparent 30%);
|
|
opacity: 0.4;
|
|
}
|
|
.card-component__inner {
|
|
position: relative;
|
|
z-index: 1;
|
|
padding: 1.25rem 1.4rem;
|
|
}
|
|
.card-hover:hover {
|
|
border-color: var(--color-rule-strong);
|
|
transform: translateY(-2px);
|
|
}
|
|
</style>
|