generated from tpl/obsidian-sample-plugin
41 lines
1.1 KiB
Svelte
41 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from "svelte";
|
|
import chroma from "chroma-js";
|
|
import { Color } from "@utils/color";
|
|
|
|
interface Props {
|
|
children?: Snippet;
|
|
color?: string;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
let { children, color = "green", onClick }: Props = $props();
|
|
|
|
const backgroundColor = $derived(chroma(color));
|
|
const borderLeftColor = $derived(chroma(color).mix("white", 0.04));
|
|
const borderRightColor = $derived(chroma(color).mix("black", 0.04));
|
|
const textColor = $derived(new Color(backgroundColor).contrastColor.hex);
|
|
</script>
|
|
|
|
<div
|
|
class="bookshelf__book-wrapper"
|
|
style:--book-color={backgroundColor.css()}
|
|
style:--book-border-left-color={borderLeftColor.css()}
|
|
style:--book-border-right-color={borderRightColor.css()}
|
|
style:color={textColor}
|
|
onclick={onClick}
|
|
onkeydown={(ev) => ev.key === "Enter" && onClick?.()}
|
|
role="link"
|
|
tabindex="0"
|
|
>
|
|
{@render children?.()}
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
div {
|
|
background: var(--book-color);
|
|
border-left: 2px solid var(--book-border-left-color);
|
|
border-right: 2px solid var(--book-border-right-color);
|
|
}
|
|
</style>
|