rasmusq/wishlist
Public Access
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

wip: making themes more dynamic and easy to add

Browse Source
This commit is contained in:
rasmusq
2025-11-30 01:30:43 +01:00
parent d165e5992a
commit 152bd7cdb1
12 changed files with 76 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/lib/components/themes/svgs/CardPattern.svelte
View File

@@ -1,38 +1,14 @@
<script lang="ts">
import { asset } from '$app/paths';
let {
color = 'currentColor',
opacity = 0.08,
pattern = 'waves'
pattern = 'none'
}: {
color?: string;
opacity?: number;
pattern?: 'waves' | 'geometric' | 'dots';
pattern?: string;
} = $props();
const patternPath = `/themes/${pattern}/item.svg`;
const patternOpacity = 0.2;
</script>
<div class="absolute bottom-0 left-0 right-0 pointer-events-none overflow-hidden rounded-b-lg" style="opacity: {opacity};">
{#if pattern === 'waves'}
<svg class="w-full h-auto" viewBox="0 0 400 80" xmlns="http://www.w3.org/2000/svg">
<path
fill={color}
d="M0,40 C100,20 200,60 300,40 C350,30 375,35 400,40 L400,80 L0,80 Z"
/>
</svg>
{:else if pattern === 'geometric'}
<svg class="w-full h-auto" viewBox="0 0 400 80" xmlns="http://www.w3.org/2000/svg">
<path
fill={color}
d="M0,80 L200,20 L400,80 Z"
/>
</svg>
{:else if pattern === 'dots'}
<svg class="w-full h-auto" viewBox="0 0 400 80" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="dots-pattern-card" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="2" fill={color} />
</pattern>
</defs>
<rect width="400" height="80" fill="url(#dots-pattern-card)" />
</svg>
{/if}
<div class="absolute bottom-0 right-0 pointer-events-none overflow-hidden rounded-b-lg" style="opacity: {patternOpacity};">
<img alt="card svg background pattern" src={asset(patternPath)}>
</div>