@classic-homes/theme-svelte 0.1.2 → 0.1.4

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.
Files changed (14) hide show
  1. package/dist/lib/components/Button.svelte +4 -4
  2. package/dist/lib/components/Dialog.svelte +1 -1
  3. package/dist/lib/components/DropdownMenu.svelte +4 -6
  4. package/dist/lib/components/Select.svelte +2 -2
  5. package/dist/lib/components/Tabs.svelte +1 -1
  6. package/dist/lib/components/layout/AppShell.svelte +1 -1
  7. package/dist/lib/components/layout/DashboardLayout.svelte +2 -2
  8. package/dist/lib/components/layout/FormPageLayout.svelte +6 -2
  9. package/dist/lib/components/layout/FormPageLayout.svelte.d.ts +4 -1
  10. package/dist/lib/components/layout/Header.svelte +1 -1
  11. package/dist/lib/components/layout/PublicLayout.svelte +3 -3
  12. package/dist/lib/components/layout/QuickLinks.svelte +4 -4
  13. package/dist/lib/components/layout/Sidebar.svelte +3 -1
  14. package/package.json +1 -1
package/dist/lib/components/Button.svelte CHANGED
@@ -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-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
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:opacity-90',
11
- secondary: 'bg-secondary text-secondary-foreground hover:opacity-90',
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:opacity-90 focus-visible:ring-destructive',
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',
package/dist/lib/components/Dialog.svelte CHANGED
@@ -97,7 +97,7 @@
97
97
  {/if}
98
98
  {#if showClose}
99
99
  <DialogPrimitive.Close
100
- class="flex h-9 w-9 items-center justify-center rounded-md bg-transparent text-muted-foreground transition-[background-color,color] duration-150 ease-in-out hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none"
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
101
  aria-label="Close dialog"
102
102
  >
103
103
  <svg
package/dist/lib/components/DropdownMenu.svelte CHANGED
@@ -93,9 +93,8 @@
93
93
  disabled={subItem.disabled}
94
94
  onSelect={() => subItem.onSelect?.()}
95
95
  class={cn(
96
- 'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors duration-75 hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground 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 &&
98
- 'text-destructive hover:text-destructive focus:text-destructive data-[highlighted]: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'
99
98
  )}
100
99
  >
101
100
  {subItem.label}
@@ -119,9 +118,8 @@
119
118
  disabled={item.disabled}
120
119
  onSelect={() => item.onSelect?.()}
121
120
  class={cn(
122
- 'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors duration-75 hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default',
123
- item.destructive &&
124
- 'text-destructive hover:text-destructive focus:text-destructive data-[highlighted]: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'
125
123
  )}
126
124
  >
127
125
  {item.label}
package/dist/lib/components/Select.svelte CHANGED
@@ -161,7 +161,7 @@
161
161
  value={option.value}
162
162
  label={option.label}
163
163
  disabled={option.disabled}
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 duration-75 hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default"
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
166
  {#if option.value === value}
167
167
  <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
@@ -190,7 +190,7 @@
190
190
  value={item.value}
191
191
  label={item.label}
192
192
  disabled={item.disabled}
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 duration-75 hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default"
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"
194
194
  >
195
195
  {#if item.value === value}
196
196
  <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
package/dist/lib/components/Tabs.svelte CHANGED
@@ -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-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
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',
package/dist/lib/components/layout/AppShell.svelte CHANGED
@@ -52,7 +52,7 @@
52
52
  let {
53
53
  skipToId = 'main-content',
54
54
  skipToText = 'Skip to main content',
55
- toastPosition = 'top-right',
55
+ toastPosition = 'bottom-right',
56
56
  children,
57
57
  }: Props = $props();
58
58
  </script>
package/dist/lib/components/layout/DashboardLayout.svelte CHANGED
@@ -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
  >
package/dist/lib/components/layout/FormPageLayout.svelte CHANGED
@@ -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
- * - Light sage background for visual distinction
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 bg-brand-core-4-tint py-8 sm:py-12', className)}>
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">
package/dist/lib/components/layout/FormPageLayout.svelte.d.ts CHANGED
@@ -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
- * - Light sage background for visual distinction
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.) */
package/dist/lib/components/layout/Header.svelte CHANGED
@@ -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
  >
package/dist/lib/components/layout/PublicLayout.svelte CHANGED
@@ -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
 
package/dist/lib/components/layout/QuickLinks.svelte CHANGED
@@ -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}
package/dist/lib/components/layout/Sidebar.svelte CHANGED
@@ -225,7 +225,9 @@
225
225
  <button
226
226
  class={cn(
227
227
  'absolute right-2 top-2 rounded-md p-2',
228
- isLight ? 'hover:bg-accent' : 'hover:bg-sidebar-accent'
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"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@classic-homes/theme-svelte",
3
- "version": "0.1.2",
3
+ "version": "0.1.4",
4
4
  "description": "Svelte components for the Classic theme system",
5
5
  "type": "module",
6
6
  "svelte": "./dist/lib/index.js",