Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<script lang="ts">
import type { HTMLButtonAttributes } from 'svelte/elements'
import Panel from './Panel.svelte';
export type Props = {
children?: HTMLButtonAttributes['children'],
variant?: 'primary' | 'secondary' | 'success' | 'error'
}
const { children, variant, placeholder, ...props }: Props = $props()
const tag = $derived(props.href != null ? 'a' : 'button')
</script>
<Panel class={['barbi-button', `barbi-button-${variant}`, !!placeholder && 'placeholder']} space="sm" {...props} tag={tag} hover active onclick={() => alert("foo")}>
{@render children?.()}
</Panel>
<style>
:global {
a.panel.barbi-button,
.panel.barbi-button a {
text-decoration: none;
}
.panel.barbi-button {
cursor: pointer;
--component-background: var(--colour-primary);
}
.panel.barbi-button.placeholder {
cursor: inherit;
pointer-events: none !important;
width: 0 !important;
opacity: 0 !important;
}
.panel.barbi-button:disabled {
cursor: not-allowed;
--component-background: var(--colour-concrete);
--component-colour: var(--colour-slate);
--border-colour: var(--colour-steel);
--colour-shadow: var(--colour-steel);
}
.panel.barbi-button:hover:not(:disabled) {
cursor: pointer;
--component-background: var(--colour-secondary);
}
.panel.barbi-button.barbi-button-primary:not(:disabled) {
--component-background: var(--colour-primary);
}
.panel.barbi-button.barbi-button-primary:hover:not(:disabled) {
--component-background: var(--colour-secondary);
}
.panel.barbi-button.barbi-button-secondary:not(:disabled) {
--component-background: var(--colour-emphasis);
}
.panel.barbi-button.barbi-button-secondary:hover:not(:disabled) {
--component-background: var(--colour-mustard);
}
.panel.barbi-button.barbi-button-success:not(:disabled) {
--component-background: var(--colour-success);
}
.panel.barbi-button.barbi-button-success:hover:not(:disabled) {
--component-background: var(--colour-pastel);
}
.panel.barbi-button.barbi-button-error:not(:disabled) {
--component-background: var(--colour-error);
}
.panel.barbi-button.barbi-button-error:hover:not(:disabled) {
--component-background: var(--colour-mustard);
}
}
</style>