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
|
// place files you want to import through the `$lib` alias in this folder.
export type ButtonColours = {
fg: string;
fgDisabled: string;
bg: string;
bgActive: string;
bgHover: string;
};
export const S = {
card_bg: 'bg-[#ffffff]/20' as const,
shadow_large: 'shadow-[0_5px_25px_-3px_#00000077]' as const,
window:
'outline-[1.5px] outline-[#313135] rounded-xl flex flex-row items-stretch justify-stretch max-h-full' as const,
window_sidepanel: 'bg-[#28282C] rounded-l-xl p-2 pt-0 min-w-48' as const,
window_content: 'bg-[#1D1D20] rounded-r-xl p-2 pt-0 flex-1' as const,
window_content_fullscreen:
'bg-[#1D1D20] rounded-xl p-2 pt-0 flex-1 max-w-[100%]' as const,
window_topbar:
'box-border min-h-[3.5rem] px-1 py-2 font-bold flex items-center justify-center gap-2 sticky top-0 bg-inherit z-50' as const,
button(colours: 'primary' | 'secondary' | ButtonColours) {
switch (colours) {
case 'primary':
colours = {
fg: '#dedede',
fgDisabled: '#2e3436',
bg: '#3584E4',
bgActive: '#2A6AB8',
bgHover: '#4990E7',
};
break;
case 'secondary':
colours = {
fg: '#dedede',
fgDisabled: '#2e3436',
bg: '#0000',
bgActive: '#dedede22',
bgHover: '#dedede11',
};
break;
}
colours = colours as ButtonColours;
return `transition-all disabled:grayscale disabled:text-[${colours.fgDisabled}] not-disabled:text-[${colours.fg}] not-disabled:bg-[${colours.bg}] not-disabled:hover:bg-[${colours.bgHover}] not-disabled:active:bg-[${colours.bgActive}] flex items-center justify-center p-2 rounded-xl outline-2 outline-[#0000] not-disabled:focus:outline-[#4C82C999]`;
},
input:
'transition-all bg-[#2E2E32] not-disabled:not-focus:not-active:hover:bg-[#dedede11] p-2 outline-2 outline-[#0000] not-disabled:focus:outline-[#4C82C999]' as const,
heading: [
//
'text-2xl font-bold',
'text-lg',
] as const,
};
|
