@classic-homes/theme-svelte 0.1.1 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/components/Button.svelte +4 -4
- package/dist/lib/components/Dialog.svelte +66 -37
- package/dist/lib/components/Dialog.svelte.d.ts +4 -0
- package/dist/lib/components/DropdownMenu.svelte +4 -4
- package/dist/lib/components/Select.svelte +38 -2
- package/dist/lib/components/Tabs.svelte +1 -1
- package/dist/lib/components/layout/DashboardLayout.svelte +2 -2
- package/dist/lib/components/layout/FormPageLayout.svelte +6 -2
- package/dist/lib/components/layout/FormPageLayout.svelte.d.ts +4 -1
- package/dist/lib/components/layout/Header.svelte +1 -1
- package/dist/lib/components/layout/PublicLayout.svelte +3 -3
- package/dist/lib/components/layout/QuickLinks.svelte +4 -4
- package/dist/lib/components/layout/Sidebar.svelte +3 -1
- package/package.json +1 -1
|
@@ -4,13 +4,13 @@
|
|
|
4
4
|
import { tv, type VariantProps } from 'tailwind-variants';
|
|
5
5
|
|
|
6
6
|
const buttonVariants = tv({
|
|
7
|
-
base: 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background transition-
|
|
7
|
+
base: 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
|
|
8
8
|
variants: {
|
|
9
9
|
variant: {
|
|
10
|
-
default: 'bg-primary text-primary-foreground hover:
|
|
11
|
-
secondary: 'bg-secondary text-secondary-foreground hover:
|
|
10
|
+
default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
|
|
11
|
+
secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
|
|
12
12
|
destructive:
|
|
13
|
-
'bg-destructive text-destructive-foreground hover:
|
|
13
|
+
'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 focus-visible:ring-destructive',
|
|
14
14
|
outline:
|
|
15
15
|
'border-2 border-primary text-primary bg-transparent hover:bg-primary hover:text-primary-foreground',
|
|
16
16
|
ghost: 'hover:bg-muted hover:text-foreground',
|
|
@@ -20,6 +20,10 @@
|
|
|
20
20
|
trigger?: Snippet;
|
|
21
21
|
/** Optional footer element */
|
|
22
22
|
footer?: Snippet;
|
|
23
|
+
/** Optional header actions (rendered before the close button) */
|
|
24
|
+
headerActions?: Snippet;
|
|
25
|
+
/** Whether to show the close button (default: true) */
|
|
26
|
+
showClose?: boolean;
|
|
23
27
|
}
|
|
24
28
|
|
|
25
29
|
let {
|
|
@@ -31,12 +35,19 @@
|
|
|
31
35
|
children,
|
|
32
36
|
trigger,
|
|
33
37
|
footer,
|
|
38
|
+
headerActions,
|
|
39
|
+
showClose = true,
|
|
34
40
|
}: Props = $props();
|
|
35
41
|
|
|
36
42
|
function handleOpenChange(newOpen: boolean) {
|
|
37
43
|
open = newOpen;
|
|
38
44
|
onOpenChange?.(newOpen);
|
|
39
45
|
}
|
|
46
|
+
|
|
47
|
+
function handleClose() {
|
|
48
|
+
open = false;
|
|
49
|
+
onOpenChange?.(false);
|
|
50
|
+
}
|
|
40
51
|
</script>
|
|
41
52
|
|
|
42
53
|
<DialogPrimitive.Root bind:open onOpenChange={handleOpenChange}>
|
|
@@ -56,56 +67,74 @@
|
|
|
56
67
|
/>
|
|
57
68
|
<DialogPrimitive.Content
|
|
58
69
|
class={cn(
|
|
59
|
-
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background
|
|
70
|
+
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg overflow-hidden',
|
|
60
71
|
className
|
|
61
72
|
)}
|
|
62
73
|
>
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
74
|
+
<!-- Header section with title and actions -->
|
|
75
|
+
{#if title || description || headerActions || showClose}
|
|
76
|
+
<div
|
|
77
|
+
class="flex items-start justify-between gap-4 border-b border-border bg-muted/30 px-6 py-4"
|
|
78
|
+
>
|
|
79
|
+
<!-- Title section -->
|
|
80
|
+
<div class="flex flex-col space-y-1.5 min-w-0 flex-1">
|
|
81
|
+
{#if title}
|
|
82
|
+
<DialogPrimitive.Title class="text-lg font-semibold leading-none tracking-tight">
|
|
83
|
+
{title}
|
|
84
|
+
</DialogPrimitive.Title>
|
|
85
|
+
{/if}
|
|
86
|
+
{#if description}
|
|
87
|
+
<DialogPrimitive.Description class="text-sm text-muted-foreground">
|
|
88
|
+
{description}
|
|
89
|
+
</DialogPrimitive.Description>
|
|
90
|
+
{/if}
|
|
91
|
+
</div>
|
|
92
|
+
|
|
93
|
+
<!-- Actions section -->
|
|
94
|
+
<div class="flex items-center gap-1 shrink-0 -mr-2 -mt-1">
|
|
95
|
+
{#if headerActions}
|
|
96
|
+
{@render headerActions()}
|
|
97
|
+
{/if}
|
|
98
|
+
{#if showClose}
|
|
99
|
+
<DialogPrimitive.Close
|
|
100
|
+
class="flex h-9 w-9 items-center justify-center rounded-md bg-transparent text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none"
|
|
101
|
+
aria-label="Close dialog"
|
|
102
|
+
>
|
|
103
|
+
<svg
|
|
104
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
105
|
+
width="20"
|
|
106
|
+
height="20"
|
|
107
|
+
viewBox="0 0 24 24"
|
|
108
|
+
fill="none"
|
|
109
|
+
stroke="currentColor"
|
|
110
|
+
stroke-width="2"
|
|
111
|
+
stroke-linecap="round"
|
|
112
|
+
stroke-linejoin="round"
|
|
113
|
+
class="h-5 w-5"
|
|
114
|
+
>
|
|
115
|
+
<path d="M18 6 6 18" />
|
|
116
|
+
<path d="m6 6 12 12" />
|
|
117
|
+
</svg>
|
|
118
|
+
<span class="sr-only">Close</span>
|
|
119
|
+
</DialogPrimitive.Close>
|
|
120
|
+
{/if}
|
|
121
|
+
</div>
|
|
75
122
|
</div>
|
|
76
123
|
{/if}
|
|
77
124
|
|
|
78
|
-
|
|
125
|
+
<!-- Content section -->
|
|
126
|
+
<div class="dialog-content px-6 py-2">
|
|
79
127
|
{@render children()}
|
|
80
128
|
</div>
|
|
81
129
|
|
|
130
|
+
<!-- Footer section -->
|
|
82
131
|
{#if footer}
|
|
83
|
-
<div
|
|
132
|
+
<div
|
|
133
|
+
class="flex flex-col-reverse border-t border-border bg-muted/30 px-6 py-4 sm:flex-row sm:justify-end sm:space-x-2"
|
|
134
|
+
>
|
|
84
135
|
{@render footer()}
|
|
85
136
|
</div>
|
|
86
137
|
{/if}
|
|
87
|
-
|
|
88
|
-
<DialogPrimitive.Close
|
|
89
|
-
class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
|
|
90
|
-
aria-label="Close dialog"
|
|
91
|
-
>
|
|
92
|
-
<svg
|
|
93
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
94
|
-
width="24"
|
|
95
|
-
height="24"
|
|
96
|
-
viewBox="0 0 24 24"
|
|
97
|
-
fill="none"
|
|
98
|
-
stroke="currentColor"
|
|
99
|
-
stroke-width="2"
|
|
100
|
-
stroke-linecap="round"
|
|
101
|
-
stroke-linejoin="round"
|
|
102
|
-
class="h-4 w-4"
|
|
103
|
-
>
|
|
104
|
-
<path d="M18 6 6 18" />
|
|
105
|
-
<path d="m6 6 12 12" />
|
|
106
|
-
</svg>
|
|
107
|
-
<span class="sr-only">Close</span>
|
|
108
|
-
</DialogPrimitive.Close>
|
|
109
138
|
</DialogPrimitive.Content>
|
|
110
139
|
</DialogPrimitive.Portal>
|
|
111
140
|
</DialogPrimitive.Root>
|
|
@@ -16,6 +16,10 @@ interface Props {
|
|
|
16
16
|
trigger?: Snippet;
|
|
17
17
|
/** Optional footer element */
|
|
18
18
|
footer?: Snippet;
|
|
19
|
+
/** Optional header actions (rendered before the close button) */
|
|
20
|
+
headerActions?: Snippet;
|
|
21
|
+
/** Whether to show the close button (default: true) */
|
|
22
|
+
showClose?: boolean;
|
|
19
23
|
}
|
|
20
24
|
declare const Dialog: import("svelte").Component<Props, {}, "open">;
|
|
21
25
|
type Dialog = ReturnType<typeof Dialog>;
|
|
@@ -93,8 +93,8 @@
|
|
|
93
93
|
disabled={subItem.disabled}
|
|
94
94
|
onSelect={() => subItem.onSelect?.()}
|
|
95
95
|
class={cn(
|
|
96
|
-
'relative flex cursor-
|
|
97
|
-
subItem.destructive && 'text-destructive
|
|
96
|
+
'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default',
|
|
97
|
+
subItem.destructive && 'text-destructive data-[highlighted]:text-destructive'
|
|
98
98
|
)}
|
|
99
99
|
>
|
|
100
100
|
{subItem.label}
|
|
@@ -118,8 +118,8 @@
|
|
|
118
118
|
disabled={item.disabled}
|
|
119
119
|
onSelect={() => item.onSelect?.()}
|
|
120
120
|
class={cn(
|
|
121
|
-
'relative flex cursor-
|
|
122
|
-
item.destructive && 'text-destructive
|
|
121
|
+
'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default',
|
|
122
|
+
item.destructive && 'text-destructive data-[highlighted]:text-destructive'
|
|
123
123
|
)}
|
|
124
124
|
>
|
|
125
125
|
{item.label}
|
|
@@ -161,8 +161,26 @@
|
|
|
161
161
|
value={option.value}
|
|
162
162
|
label={option.label}
|
|
163
163
|
disabled={option.disabled}
|
|
164
|
-
class="relative flex w-full cursor-
|
|
164
|
+
class="relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default"
|
|
165
165
|
>
|
|
166
|
+
{#if option.value === value}
|
|
167
|
+
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
|
168
|
+
<svg
|
|
169
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
170
|
+
width="16"
|
|
171
|
+
height="16"
|
|
172
|
+
viewBox="0 0 24 24"
|
|
173
|
+
fill="none"
|
|
174
|
+
stroke="currentColor"
|
|
175
|
+
stroke-width="2"
|
|
176
|
+
stroke-linecap="round"
|
|
177
|
+
stroke-linejoin="round"
|
|
178
|
+
class="h-4 w-4"
|
|
179
|
+
>
|
|
180
|
+
<polyline points="20 6 9 17 4 12" />
|
|
181
|
+
</svg>
|
|
182
|
+
</span>
|
|
183
|
+
{/if}
|
|
166
184
|
{option.label}
|
|
167
185
|
</SelectPrimitive.Item>
|
|
168
186
|
{/each}
|
|
@@ -172,8 +190,26 @@
|
|
|
172
190
|
value={item.value}
|
|
173
191
|
label={item.label}
|
|
174
192
|
disabled={item.disabled}
|
|
175
|
-
class="relative flex w-full cursor-
|
|
193
|
+
class="relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default"
|
|
176
194
|
>
|
|
195
|
+
{#if item.value === value}
|
|
196
|
+
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
|
197
|
+
<svg
|
|
198
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
199
|
+
width="16"
|
|
200
|
+
height="16"
|
|
201
|
+
viewBox="0 0 24 24"
|
|
202
|
+
fill="none"
|
|
203
|
+
stroke="currentColor"
|
|
204
|
+
stroke-width="2"
|
|
205
|
+
stroke-linecap="round"
|
|
206
|
+
stroke-linejoin="round"
|
|
207
|
+
class="h-4 w-4"
|
|
208
|
+
>
|
|
209
|
+
<polyline points="20 6 9 17 4 12" />
|
|
210
|
+
</svg>
|
|
211
|
+
</span>
|
|
212
|
+
{/if}
|
|
177
213
|
{item.label}
|
|
178
214
|
</SelectPrimitive.Item>
|
|
179
215
|
{/if}
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
tabindex={value === tab.id ? 0 : -1}
|
|
103
103
|
disabled={tab.disabled}
|
|
104
104
|
class={cn(
|
|
105
|
-
'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-
|
|
105
|
+
'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
|
|
106
106
|
value === tab.id
|
|
107
107
|
? 'bg-background text-foreground shadow-sm'
|
|
108
108
|
: 'hover:bg-background/50 hover:text-foreground',
|
|
@@ -165,7 +165,7 @@
|
|
|
165
165
|
<!-- Mobile Menu Button -->
|
|
166
166
|
{#if isMobile}
|
|
167
167
|
<button
|
|
168
|
-
class="rounded-md p-2 hover:bg-accent lg:hidden"
|
|
168
|
+
class="rounded-md p-2 hover:bg-accent hover:text-accent-foreground lg:hidden"
|
|
169
169
|
onclick={() => sidebarStore.toggle()}
|
|
170
170
|
aria-label="Open menu"
|
|
171
171
|
>
|
|
@@ -181,7 +181,7 @@
|
|
|
181
181
|
{:else}
|
|
182
182
|
<!-- Collapse Toggle Button (Desktop) -->
|
|
183
183
|
<button
|
|
184
|
-
class="rounded-md p-2 hover:bg-accent"
|
|
184
|
+
class="rounded-md p-2 hover:bg-accent hover:text-accent-foreground"
|
|
185
185
|
onclick={() => sidebarStore.toggle()}
|
|
186
186
|
aria-label={sidebarStore.isOpen ? 'Collapse sidebar' : 'Expand sidebar'}
|
|
187
187
|
>
|
|
@@ -8,7 +8,8 @@
|
|
|
8
8
|
* - Two-column layout with optional sidebar
|
|
9
9
|
* - Help text footer
|
|
10
10
|
* - Responsive design (sidebar above main on mobile)
|
|
11
|
-
* -
|
|
11
|
+
* - Transparent background by default (inherits from parent layout)
|
|
12
|
+
* - Optional sage background via sageBackground prop
|
|
12
13
|
*/
|
|
13
14
|
import type { Snippet } from 'svelte';
|
|
14
15
|
import { cn } from '../../utils.js';
|
|
@@ -22,6 +23,8 @@
|
|
|
22
23
|
helpText?: string;
|
|
23
24
|
/** Show the notices section (renders notices snippet if provided) */
|
|
24
25
|
showNotices?: boolean;
|
|
26
|
+
/** Use sage green background (default: false, inherits from parent layout) */
|
|
27
|
+
sageBackground?: boolean;
|
|
25
28
|
/** Main form content */
|
|
26
29
|
children: Snippet;
|
|
27
30
|
/** Optional notices content (alert cards, etc.) */
|
|
@@ -37,6 +40,7 @@
|
|
|
37
40
|
description,
|
|
38
41
|
helpText,
|
|
39
42
|
showNotices = true,
|
|
43
|
+
sageBackground = false,
|
|
40
44
|
children,
|
|
41
45
|
notices,
|
|
42
46
|
sidebar,
|
|
@@ -46,7 +50,7 @@
|
|
|
46
50
|
const hasSidebar = $derived(sidebar !== undefined);
|
|
47
51
|
</script>
|
|
48
52
|
|
|
49
|
-
<div class={cn('min-h-screen
|
|
53
|
+
<div class={cn('min-h-screen py-8 sm:py-12', sageBackground && 'bg-brand-core-4-tint', className)}>
|
|
50
54
|
<div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
|
|
51
55
|
<!-- Header Section -->
|
|
52
56
|
<header class="mb-8 text-center">
|
|
@@ -7,7 +7,8 @@
|
|
|
7
7
|
* - Two-column layout with optional sidebar
|
|
8
8
|
* - Help text footer
|
|
9
9
|
* - Responsive design (sidebar above main on mobile)
|
|
10
|
-
* -
|
|
10
|
+
* - Transparent background by default (inherits from parent layout)
|
|
11
|
+
* - Optional sage background via sageBackground prop
|
|
11
12
|
*/
|
|
12
13
|
import type { Snippet } from 'svelte';
|
|
13
14
|
interface Props {
|
|
@@ -19,6 +20,8 @@ interface Props {
|
|
|
19
20
|
helpText?: string;
|
|
20
21
|
/** Show the notices section (renders notices snippet if provided) */
|
|
21
22
|
showNotices?: boolean;
|
|
23
|
+
/** Use sage green background (default: false, inherits from parent layout) */
|
|
24
|
+
sageBackground?: boolean;
|
|
22
25
|
/** Main form content */
|
|
23
26
|
children: Snippet;
|
|
24
27
|
/** Optional notices content (alert cards, etc.) */
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
<!-- Mobile Menu Button -->
|
|
58
58
|
{#if showMenuButton}
|
|
59
59
|
<button
|
|
60
|
-
class="rounded-md p-2 hover:bg-accent lg:hidden"
|
|
60
|
+
class="rounded-md p-2 hover:bg-accent hover:text-accent-foreground lg:hidden"
|
|
61
61
|
onclick={() => onMenuClick?.()}
|
|
62
62
|
aria-label="Open menu"
|
|
63
63
|
>
|
|
@@ -107,7 +107,7 @@
|
|
|
107
107
|
<!-- Mobile Menu Button -->
|
|
108
108
|
{#if navigation.length > 0}
|
|
109
109
|
<button
|
|
110
|
-
class="rounded-md p-2 hover:bg-accent md:hidden"
|
|
110
|
+
class="rounded-md p-2 hover:bg-accent hover:text-accent-foreground md:hidden"
|
|
111
111
|
onclick={() => (mobileMenuOpen = !mobileMenuOpen)}
|
|
112
112
|
aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
|
|
113
113
|
aria-expanded={mobileMenuOpen}
|
|
@@ -148,7 +148,7 @@
|
|
|
148
148
|
'block rounded-md px-3 py-2 text-sm font-bold uppercase transition-colors',
|
|
149
149
|
item.active
|
|
150
150
|
? 'bg-primary/10 text-primary'
|
|
151
|
-
: 'text-muted-foreground hover:bg-accent hover:text-foreground'
|
|
151
|
+
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
|
|
152
152
|
)}
|
|
153
153
|
target={item.external ? '_blank' : undefined}
|
|
154
154
|
rel={item.external ? 'noopener noreferrer' : undefined}
|
|
@@ -164,7 +164,7 @@
|
|
|
164
164
|
</header>
|
|
165
165
|
|
|
166
166
|
<!-- Main Content -->
|
|
167
|
-
<main id="main-content" class="flex-1">
|
|
167
|
+
<main id="main-content" class="flex-1 bg-content-bg">
|
|
168
168
|
{@render children()}
|
|
169
169
|
</main>
|
|
170
170
|
|
|
@@ -51,18 +51,18 @@
|
|
|
51
51
|
display === 'list' && 'gap-3 rounded-md px-3 py-2 text-sm',
|
|
52
52
|
display === 'list' &&
|
|
53
53
|
isLight &&
|
|
54
|
-
'text-muted-foreground hover:bg-accent hover:text-foreground',
|
|
54
|
+
'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
|
|
55
55
|
display === 'list' &&
|
|
56
56
|
!isLight &&
|
|
57
|
-
'text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-foreground',
|
|
57
|
+
'text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
|
|
58
58
|
// Icon mode styles
|
|
59
59
|
display === 'icons' && 'rounded-md p-2',
|
|
60
60
|
display === 'icons' &&
|
|
61
61
|
isLight &&
|
|
62
|
-
'text-muted-foreground hover:bg-accent hover:text-foreground',
|
|
62
|
+
'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
|
|
63
63
|
display === 'icons' &&
|
|
64
64
|
!isLight &&
|
|
65
|
-
'text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-foreground'
|
|
65
|
+
'text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground'
|
|
66
66
|
)}
|
|
67
67
|
target={link.external ? '_blank' : undefined}
|
|
68
68
|
rel={link.external ? 'noopener noreferrer' : undefined}
|
|
@@ -225,7 +225,9 @@
|
|
|
225
225
|
<button
|
|
226
226
|
class={cn(
|
|
227
227
|
'absolute right-2 top-2 rounded-md p-2',
|
|
228
|
-
isLight
|
|
228
|
+
isLight
|
|
229
|
+
? 'hover:bg-accent hover:text-accent-foreground'
|
|
230
|
+
: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground'
|
|
229
231
|
)}
|
|
230
232
|
onclick={() => onClose?.()}
|
|
231
233
|
aria-label="Close sidebar"
|