[READ-ONLY] Mirror of https://github.com/flo-bit/ui-kit. 🦊 fox ui, svelte 5 and tailwind 4
flo-bit.dev/ui-kit/
svelte
tailwindcss
ui-components
small fixes
+221
-150
+6
.changeset/fuzzy-forks-tap.md
+6
.changeset/fuzzy-forks-tap.md
-106
apps/docs/src/lib/site-components/SelectTheme.svelte
-106
apps/docs/src/lib/site-components/SelectTheme.svelte
···
1
-
<script lang="ts" module>
2
-
let accentColor = $state({
3
-
class: '',
4
-
label: ''
5
-
});
6
-
7
-
let baseColor = $state({
8
-
class: '',
9
-
label: ''
10
-
});
11
-
</script>
12
-
13
-
<script lang="ts">
14
-
import { Subheading, Paragraph } from '@fuxui/base';
15
-
import { ColorSelect } from '@fuxui/colors';
16
-
import { onMount } from 'svelte';
17
-
18
-
let accentColors = [
19
-
{ class: 'text-red-500', label: 'red' },
20
-
{ class: 'text-orange-500', label: 'orange' },
21
-
{ class: 'text-amber-500', label: 'amber' },
22
-
{ class: 'text-yellow-500', label: 'yellow' },
23
-
{ class: 'text-lime-500', label: 'lime' },
24
-
{ class: 'text-green-500', label: 'green' },
25
-
{ class: 'text-emerald-500', label: 'emerald' },
26
-
{ class: 'text-teal-500', label: 'teal' },
27
-
{ class: 'text-cyan-500', label: 'cyan' },
28
-
{ class: 'text-sky-500', label: 'sky' },
29
-
{ class: 'text-blue-500', label: 'blue' },
30
-
{ class: 'text-indigo-500', label: 'indigo' },
31
-
{ class: 'text-violet-500', label: 'violet' },
32
-
{ class: 'text-purple-500', label: 'purple' },
33
-
{ class: 'text-fuchsia-500', label: 'fuchsia' },
34
-
{ class: 'text-pink-500', label: 'pink' },
35
-
{ class: 'text-rose-500', label: 'rose' }
36
-
];
37
-
38
-
let baseColors = [
39
-
{ class: 'text-gray-500', label: 'gray' },
40
-
{ class: 'text-stone-500', label: 'stone' },
41
-
{ class: 'text-zinc-500', label: 'zinc' },
42
-
{ class: 'text-neutral-500', label: 'neutral' },
43
-
{ class: 'text-slate-500', label: 'slate' }
44
-
];
45
-
46
-
onMount(() => {
47
-
let savedAccentColor = localStorage.getItem('accentColor');
48
-
if (savedAccentColor) {
49
-
accentColor.label = JSON.parse(savedAccentColor);
50
-
} else {
51
-
accentColor.label = 'pink';
52
-
}
53
-
54
-
let savedBaseColor = localStorage.getItem('baseColor');
55
-
if (savedBaseColor) {
56
-
baseColor.label = JSON.parse(savedBaseColor);
57
-
} else {
58
-
baseColor.label = 'stone';
59
-
}
60
-
});
61
-
62
-
let { showTitle = true } = $props();
63
-
</script>
64
-
65
-
{#if showTitle}
66
-
<Subheading class="mb-4">Select Theme</Subheading>
67
-
{/if}
68
-
69
-
<Paragraph class="mb-2">Accent Color</Paragraph>
70
-
<ColorSelect
71
-
bind:selected={accentColor}
72
-
colors={accentColors}
73
-
onselected={(color, previous) => {
74
-
if (typeof previous === 'string' || typeof color === 'string') {
75
-
return;
76
-
}
77
-
78
-
document.documentElement.classList.remove(previous.label.toLowerCase());
79
-
document.documentElement.classList.add(color.label.toLowerCase());
80
-
81
-
localStorage.setItem('accentColor', JSON.stringify(color.label));
82
-
83
-
window.dispatchEvent(
84
-
new CustomEvent('theme-changed', { detail: { accentColor: color.label } })
85
-
);
86
-
}}
87
-
class="w-64"
88
-
/>
89
-
90
-
<Paragraph class="mt-4 mb-2">Base Color</Paragraph>
91
-
<ColorSelect
92
-
bind:selected={baseColor}
93
-
colors={baseColors}
94
-
onselected={(color, previous) => {
95
-
if (typeof previous === 'string' || typeof color === 'string') {
96
-
return;
97
-
}
98
-
99
-
document.documentElement.classList.remove(previous.label.toLowerCase());
100
-
document.documentElement.classList.add(color.label.toLowerCase());
101
-
102
-
localStorage.setItem('baseColor', JSON.stringify(color.label));
103
-
104
-
window.dispatchEvent(new CustomEvent('theme-changed', { detail: { baseColor: color.label } }));
105
-
}}
106
-
/>
-25
apps/docs/src/lib/site-components/ThemeSelectDropdown.svelte
-25
apps/docs/src/lib/site-components/ThemeSelectDropdown.svelte
···
1
-
<script>
2
-
import { buttonVariants, Popover, cn } from '@fuxui/base';
3
-
import SelectTheme from './SelectTheme.svelte';
4
-
</script>
5
-
6
-
<Popover>
7
-
{#snippet child({ props })}
8
-
<button {...props}
9
-
class={cn(
10
-
buttonVariants({ variant: 'link', size: 'default' }),
11
-
'flex cursor-pointer items-center gap-0 -space-x-2 backdrop-blur-none'
12
-
)}
13
-
>
14
-
<div
15
-
class=" from-accent-500 to-accent-600 border-accent-700 dark:border-accent-400 z-10 size-6 rounded-full border bg-gradient-to-b"
16
-
></div>
17
-
18
-
<div
19
-
class=" from-base-500 to-base-600 border-base-700 dark:border-base-400 size-6 rounded-full border bg-gradient-to-b"
20
-
></div>
21
-
</button>
22
-
{/snippet}
23
-
<!-- add class w-72? -->
24
-
<SelectTheme showTitle={false} />
25
-
</Popover>
+4
-4
packages/colors/src/lib/components/index.ts
+4
-4
packages/colors/src/lib/components/index.ts
···
1
-
export { default as ColorGradientPicker } from './color-gradient-picker/ColorGradientPicker.svelte';
2
-
export { ColorPicker, PopoverColorPicker } from './color-picker';
3
-
export { ColorSelect } from './color-select';
4
-
1
+
export * from './color-gradient-picker';
2
+
export * from './color-picker';
3
+
export * from './color-select';
5
4
export * from './color-picker/base/color';
5
+
export * from './select-theme';
+39
-11
packages/base/src/lib/components/prose/Prose.svelte
+39
-11
packages/base/src/lib/components/prose/Prose.svelte
···
1
-
<script lang="ts">
2
-
import type { Snippet } from 'svelte';
1
+
<script lang="ts" module>
2
+
import type { WithElementRef } from 'bits-ui';
3
+
import type { HTMLAttributes } from 'svelte/elements';
4
+
import { type VariantProps, tv } from 'tailwind-variants';
3
5
import { cn } from '../../utils';
4
6
5
-
let { children, class: className }: { children: Snippet; class?: string } = $props();
7
+
export const proseVariants = tv({
8
+
base: 'prose dark:prose-invert prose-sm prose-a:no-underline prose-a:text-accent-600 dark:prose-a:text-accent-400 prose-pre:rounded-2xl w-full max-w-none',
9
+
variants: {
10
+
size: {
11
+
default: 'prose-sm',
12
+
md: 'prose-base',
13
+
lg: 'prose-lg',
14
+
xl: 'prose-xl',
15
+
'2xl': 'prose-2xl'
16
+
}
17
+
},
18
+
defaultVariants: {
19
+
size: 'default'
20
+
}
21
+
});
22
+
23
+
export type ProseSize = VariantProps<typeof proseVariants>['size'];
24
+
25
+
export type ProseProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
26
+
size?: ProseSize;
27
+
};
6
28
</script>
7
29
8
-
<div
9
-
class={cn(
10
-
'prose dark:prose-invert prose-sm prose-a:no-underline prose-a:text-accent-600 dark:prose-a:text-accent-600 prose-pre:rounded-2xl w-full max-w-2xl',
11
-
className
12
-
)}
13
-
>
30
+
<script lang="ts">
31
+
let {
32
+
children,
33
+
ref = $bindable(null),
34
+
class: className,
35
+
size = 'default',
36
+
...restProps
37
+
}: ProseProps = $props();
38
+
</script>
39
+
40
+
<div bind:this={ref} class={cn(proseVariants({ size }), className)} {...restProps}>
14
41
{@render children?.()}
15
42
</div>
16
43
44
+
<!-- TODO: this is not actually used right now, we have to fix that -->
17
45
<style>
18
-
.prose-base {
46
+
.prose-base-colors {
19
47
--tw-prose-body: var(--color-base-700);
20
48
--tw-prose-headings: var(--color-base-900);
21
49
--tw-prose-lead: var(--color-base-600);
···
56
84
--tw-prose-invert-td-borders: var(--color-base-700);
57
85
}
58
86
59
-
.prose-base-dark {
87
+
.prose-base-colors-dark {
60
88
--tw-prose-invert-body: var(--color-base-300);
61
89
--tw-prose-invert-headings: var(--color-white);
62
90
--tw-prose-invert-lead: var(--color-base-400);
+3
packages/base/src/lib/components/prose/index.ts
+3
packages/base/src/lib/components/prose/index.ts
+1
packages/colors/src/lib/components/color-gradient-picker/index.ts
+1
packages/colors/src/lib/components/color-gradient-picker/index.ts
···
1
+
export { default as ColorGradientPicker } from './ColorGradientPicker.svelte';
+118
packages/colors/src/lib/components/select-theme/SelectTheme.svelte
+118
packages/colors/src/lib/components/select-theme/SelectTheme.svelte
···
1
+
<script lang="ts" module>
2
+
let accentColor = $state({
3
+
class: '',
4
+
label: ''
5
+
});
6
+
7
+
let baseColor = $state({
8
+
class: '',
9
+
label: ''
10
+
});
11
+
</script>
12
+
13
+
<script lang="ts">
14
+
import { Paragraph } from '@fuxui/base';
15
+
import { ColorSelect } from '../';
16
+
import { onMount } from 'svelte';
17
+
18
+
let accentColors = [
19
+
{ class: 'text-red-500', label: 'red' },
20
+
{ class: 'text-orange-500', label: 'orange' },
21
+
{ class: 'text-amber-500', label: 'amber' },
22
+
{ class: 'text-yellow-500', label: 'yellow' },
23
+
{ class: 'text-lime-500', label: 'lime' },
24
+
{ class: 'text-green-500', label: 'green' },
25
+
{ class: 'text-emerald-500', label: 'emerald' },
26
+
{ class: 'text-teal-500', label: 'teal' },
27
+
{ class: 'text-cyan-500', label: 'cyan' },
28
+
{ class: 'text-sky-500', label: 'sky' },
29
+
{ class: 'text-blue-500', label: 'blue' },
30
+
{ class: 'text-indigo-500', label: 'indigo' },
31
+
{ class: 'text-violet-500', label: 'violet' },
32
+
{ class: 'text-purple-500', label: 'purple' },
33
+
{ class: 'text-fuchsia-500', label: 'fuchsia' },
34
+
{ class: 'text-pink-500', label: 'pink' },
35
+
{ class: 'text-rose-500', label: 'rose' }
36
+
];
37
+
38
+
let baseColors = [
39
+
{ class: 'text-gray-500', label: 'gray' },
40
+
{ class: 'text-stone-500', label: 'stone' },
41
+
{ class: 'text-zinc-500', label: 'zinc' },
42
+
{ class: 'text-neutral-500', label: 'neutral' },
43
+
{ class: 'text-slate-500', label: 'slate' }
44
+
];
45
+
46
+
let {
47
+
defaultAccentColor = 'pink',
48
+
defaultBaseColor = 'stone',
49
+
selectAccentColor = true,
50
+
selectBaseColor = true
51
+
}: {
52
+
defaultAccentColor?: string;
53
+
defaultBaseColor?: string;
54
+
selectAccentColor?: boolean;
55
+
selectBaseColor?: boolean;
56
+
} = $props();
57
+
58
+
onMount(() => {
59
+
let savedAccentColor = localStorage.getItem('accentColor');
60
+
if (savedAccentColor) {
61
+
accentColor.label = JSON.parse(savedAccentColor);
62
+
} else {
63
+
accentColor.label = defaultAccentColor;
64
+
}
65
+
66
+
let savedBaseColor = localStorage.getItem('baseColor');
67
+
if (savedBaseColor) {
68
+
baseColor.label = JSON.parse(savedBaseColor);
69
+
} else {
70
+
baseColor.label = defaultBaseColor;
71
+
}
72
+
});
73
+
</script>
74
+
75
+
{#if selectAccentColor}
76
+
<Paragraph class="mb-2">Accent Color</Paragraph>
77
+
<ColorSelect
78
+
bind:selected={accentColor}
79
+
colors={accentColors}
80
+
onselected={(color, previous) => {
81
+
if (typeof previous === 'string' || typeof color === 'string') {
82
+
return;
83
+
}
84
+
85
+
document.documentElement.classList.remove(previous.label.toLowerCase());
86
+
document.documentElement.classList.add(color.label.toLowerCase());
87
+
88
+
localStorage.setItem('accentColor', JSON.stringify(color.label));
89
+
90
+
window.dispatchEvent(
91
+
new CustomEvent('theme-changed', { detail: { accentColor: color.label } })
92
+
);
93
+
}}
94
+
class="w-64"
95
+
/>
96
+
{/if}
97
+
98
+
{#if selectBaseColor}
99
+
<Paragraph class="mb-2 mt-4">Base Color</Paragraph>
100
+
<ColorSelect
101
+
bind:selected={baseColor}
102
+
colors={baseColors}
103
+
onselected={(color, previous) => {
104
+
if (typeof previous === 'string' || typeof color === 'string') {
105
+
return;
106
+
}
107
+
108
+
document.documentElement.classList.remove(previous.label.toLowerCase());
109
+
document.documentElement.classList.add(color.label.toLowerCase());
110
+
111
+
localStorage.setItem('baseColor', JSON.stringify(color.label));
112
+
113
+
window.dispatchEvent(
114
+
new CustomEvent('theme-changed', { detail: { baseColor: color.label } })
115
+
);
116
+
}}
117
+
/>
118
+
{/if}
+41
packages/colors/src/lib/components/select-theme/SelectThemePopover.svelte
+41
packages/colors/src/lib/components/select-theme/SelectThemePopover.svelte
···
1
+
<script lang="ts">
2
+
import { buttonVariants, Popover, cn } from '@fuxui/base';
3
+
import SelectTheme from './SelectTheme.svelte';
4
+
5
+
let {
6
+
defaultAccentColor = 'pink',
7
+
defaultBaseColor = 'stone',
8
+
selectAccentColor = true,
9
+
selectBaseColor = true
10
+
}: {
11
+
defaultAccentColor?: string;
12
+
defaultBaseColor?: string;
13
+
selectAccentColor?: boolean;
14
+
selectBaseColor?: boolean;
15
+
} = $props();
16
+
</script>
17
+
18
+
<Popover>
19
+
{#snippet child({ props })}
20
+
<button
21
+
{...props}
22
+
class={cn(
23
+
buttonVariants({ variant: 'link', size: 'default' }),
24
+
'flex cursor-pointer items-center gap-0 -space-x-2 backdrop-blur-none'
25
+
)}
26
+
>
27
+
{#if selectAccentColor}
28
+
<div
29
+
class=" from-accent-500 to-accent-600 border-accent-700 dark:border-accent-400 z-10 size-6 rounded-full border bg-gradient-to-b"
30
+
></div>
31
+
{/if}
32
+
33
+
{#if selectBaseColor}
34
+
<div
35
+
class=" from-base-500 to-base-600 border-base-700 dark:border-base-400 size-6 rounded-full border bg-gradient-to-b"
36
+
></div>
37
+
{/if}
38
+
</button>
39
+
{/snippet}
40
+
<SelectTheme {defaultAccentColor} {defaultBaseColor} {selectAccentColor} {selectBaseColor} />
41
+
</Popover>
+2
packages/colors/src/lib/components/select-theme/index.ts
+2
packages/colors/src/lib/components/select-theme/index.ts
+4
-1
apps/docs/src/routes/(main)/docs/theme/+page.svelte
+4
-1
apps/docs/src/routes/(main)/docs/theme/+page.svelte