@nomideusz/svelte-calendar 0.2.0 → 0.2.2

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 (8) hide show
  1. package/README.md +129 -6
  2. package/dist/index.d.ts +1 -1
  3. package/dist/index.js +1 -1
  4. package/dist/theme/index.d.ts +1 -1
  5. package/dist/theme/index.js +1 -1
  6. package/dist/theme/presets.d.ts +13 -0
  7. package/dist/theme/presets.js +60 -1
  8. package/package.json +64 -62
package/README.md CHANGED
@@ -90,26 +90,46 @@ The `Settings` component provides a theme picker and dynamic fields for controll
90
90
 
91
91
  ## Themes
92
92
 
93
- Three built-in presets each view reads from the same `--dt-*` CSS custom property contract:
93
+ Five built-in presets — each view reads from the same `--dt-*` CSS custom property contract:
94
94
 
95
95
  | Preset | Tone |
96
96
  |--------|------|
97
- | `midnight` | Dark (deep navy/slate) |
98
- | `parchment` | Warm light (cream, amber accents) |
97
+ | `midnight` | Dark (deep navy/slate, red accent) |
98
+ | `parchment` | Warm light (cream, burnt sienna accents) |
99
99
  | `indigo` | Cool light (white surface, indigo accents) |
100
+ | `neutral` | **Site-friendly** — white/gray, blue accent, `inherit` fonts so it matches your site |
101
+ | `bare` | **Unstyled skeleton** — all `transparent`/`inherit`/`currentColor`, absorbs host styles entirely |
100
102
 
101
103
  ```svelte
102
104
  <script>
103
- import { midnight, parchment, indigo, presets } from '@nomideusz/svelte-calendar';
105
+ import { midnight, parchment, indigo, neutral, bare, presets } from '@nomideusz/svelte-calendar';
104
106
  </script>
105
107
 
106
- <!-- Apply directly -->
107
- <WeekGrid style={midnight} events={events} />
108
+ <!-- Blends into your site with no extra work -->
109
+ <Calendar {views} {adapter} theme={neutral} />
108
110
 
109
111
  <!-- Or use the presets map -->
110
112
  <WeekGrid style={presets['parchment']} events={events} />
111
113
  ```
112
114
 
115
+ ### Matching Your Site
116
+
117
+ The `neutral` preset inherits font families from your page (`--dt-sans: inherit; --dt-serif: inherit`) and uses a standard blue accent. For most sites this is all you need.
118
+
119
+ If you need full control, start from `bare` — it sets everything to `transparent`/`inherit`/`currentColor` — then override only the tokens you care about:
120
+
121
+ ```ts
122
+ import { bare } from '@nomideusz/svelte-calendar';
123
+
124
+ const myTheme = `
125
+ ${bare}
126
+ --dt-accent: #e11d48;
127
+ --dt-bg: var(--my-app-surface);
128
+ --dt-text: var(--my-app-text);
129
+ --dt-border: var(--my-app-border);
130
+ `;
131
+ ```
132
+
113
133
  ### Custom Themes
114
134
 
115
135
  Pass any string of `--dt-*` custom property declarations:
@@ -125,6 +145,109 @@ const custom = `
125
145
  `;
126
146
  ```
127
147
 
148
+ <details>
149
+ <summary><strong>Full token reference</strong></summary>
150
+
151
+ | Token | Purpose |
152
+ |-------|----------|
153
+ | `--dt-bg` | Main background |
154
+ | `--dt-surface` | Elevated surface (cards, popovers) |
155
+ | `--dt-border` | Default border |
156
+ | `--dt-border-day` | Day-column dividers |
157
+ | `--dt-text` | Primary text |
158
+ | `--dt-text-2` | Secondary text |
159
+ | `--dt-text-3` | Tertiary / muted text |
160
+ | `--dt-accent` | Accent color (buttons, now-indicator, highlights) |
161
+ | `--dt-accent-dim` | Accent at ~12% opacity |
162
+ | `--dt-glow` | Accent glow / focus ring |
163
+ | `--dt-today-bg` | Today column highlight |
164
+ | `--dt-btn-text` | Button label color |
165
+ | `--dt-scrollbar` | Scrollbar thumb |
166
+ | `--dt-success` | Success / completed indicator |
167
+ | `--dt-serif` | Serif font stack |
168
+ | `--dt-sans` | Sans-serif font stack |
169
+ | `--dt-mono` | Monospace font stack |
170
+ | `--dt-hm-empty` | Heatmap: empty cell |
171
+ | `--dt-hm-low` | Heatmap: low density |
172
+ | `--dt-hm-mid` | Heatmap: medium density |
173
+ | `--dt-hm-high` | Heatmap: high density |
174
+ | `--dt-hm-max` | Heatmap: maximum density |
175
+
176
+ </details>
177
+
178
+ ## Accessibility
179
+
180
+ All interactive elements include proper ARIA attributes and keyboard support:
181
+
182
+ - **EventBlock** — `role="button"`, `aria-label` (title + time + duration + status), `tabindex="0"`, Enter/Space activates
183
+ - **EmptySlot** — `role="button"`, `aria-label` (time range + duration), keyboard-accessible for event creation
184
+ - **NowIndicator** — `role="status"`, `aria-live="polite"` announces the current time
185
+ - **Calendar** — `role="region"`, `aria-label="Calendar"`
186
+ - **Toolbar** — `aria-label="Calendar navigation"`
187
+ - Focus-visible outlines on all interactive primitives
188
+
189
+ ## Locale & i18n
190
+
191
+ The calendar uses `Intl.DateTimeFormat` for all date/time formatting. Pass a BCP 47 locale tag to the `Calendar` shell:
192
+
193
+ ```svelte
194
+ <Calendar {views} {adapter} locale="pl-PL" dir="rtl" />
195
+ ```
196
+
197
+ | Prop | Type | Default | Description |
198
+ |------|------|---------|-------------|
199
+ | `locale` | `string` | `'en-US'` | BCP 47 tag — controls weekday names, month names, date formats |
200
+ | `dir` | `'ltr' \| 'rtl' \| 'auto'` | — | Text direction (for Arabic, Hebrew, etc.) |
201
+
202
+ The `locale` prop automatically switches between 12-hour and 24-hour time display based on the locale's hour cycle.
203
+
204
+ ### Programmatic locale control
205
+
206
+ ```ts
207
+ import { setDefaultLocale, getDefaultLocale, is24HourLocale } from '@nomideusz/svelte-calendar';
208
+
209
+ setDefaultLocale('de-DE'); // All formatting functions now use German
210
+ is24HourLocale('en-US'); // false (12h)
211
+ is24HourLocale('de-DE'); // true (24h)
212
+ ```
213
+
214
+ All formatting functions (`weekdayShort`, `monthLong`, `fmtDay`, `fmtWeekRange`, etc.) accept an optional `locale` parameter to override per-call.
215
+
216
+ ## Timezones
217
+
218
+ Timezone utilities are included via `date-fns-tz`:
219
+
220
+ ```ts
221
+ import {
222
+ toZonedTime,
223
+ fromZonedTime,
224
+ nowInZone,
225
+ formatInTimeZone,
226
+ } from '@nomideusz/svelte-calendar';
227
+
228
+ // Display a UTC date in a specific timezone
229
+ const nyTime = toZonedTime(utcDate, 'America/New_York');
230
+
231
+ // Convert back to UTC for storage
232
+ const utc = fromZonedTime(displayDate, 'America/New_York');
233
+
234
+ // Current time in Tokyo
235
+ const tokyoNow = nowInZone('Asia/Tokyo');
236
+
237
+ // Locale-aware formatting in a timezone
238
+ formatInTimeZone(date, 'Europe/Warsaw', { hour: 'numeric', minute: '2-digit' }, 'pl-PL');
239
+ // → "14:30"
240
+ ```
241
+
242
+ The engine's `createViewState` also accepts a `timezone` option:
243
+
244
+ ```ts
245
+ const viewState = createViewState({
246
+ defaultView: 'week-grid',
247
+ timezone: 'America/New_York', // stored on viewState.timezone
248
+ });
249
+ ```
250
+
128
251
  ## Architecture
129
252
 
130
253
  ```
package/dist/index.d.ts CHANGED
@@ -9,5 +9,5 @@ export { createMemoryAdapter, createRestAdapter } from './adapters/index.js';
9
9
  export type { CalendarAdapter, DateRange, RestAdapterOptions } from './adapters/index.js';
10
10
  export { createClock, DAY_MS, HOUR_MS, HOURS, sod, startOfWeek, addDaysMs, diffDays, pad, fractionalHour, fmtHM, fmtS, dayNum, dayOfWeek, fmtH, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, setDefaultLocale, getDefaultLocale, is24HourLocale, timeToX, toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, } from './core/index.js';
11
11
  export type { Clock, TimelineEvent, WeekTimelineProps, DayTimelineProps, } from './core/index.js';
12
- export { midnight, parchment, indigo, presets, stageBg } from './theme/index.js';
12
+ export { midnight, parchment, indigo, neutral, bare, presets, stageBg } from './theme/index.js';
13
13
  export type { PresetName } from './theme/index.js';
package/dist/index.js CHANGED
@@ -11,4 +11,4 @@ export { createMemoryAdapter, createRestAdapter } from './adapters/index.js';
11
11
  // ─── Core: clock, time, locale, types ───────────────────
12
12
  export { createClock, DAY_MS, HOUR_MS, HOURS, sod, startOfWeek, addDaysMs, diffDays, pad, fractionalHour, fmtHM, fmtS, dayNum, dayOfWeek, fmtH, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, setDefaultLocale, getDefaultLocale, is24HourLocale, timeToX, toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, } from './core/index.js';
13
13
  // ─── Themes ─────────────────────────────────────────────
14
- export { midnight, parchment, indigo, presets, stageBg } from './theme/index.js';
14
+ export { midnight, parchment, indigo, neutral, bare, presets, stageBg } from './theme/index.js';
package/dist/theme/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export { midnight, parchment, indigo, presets, stageBg, } from './presets.js';
1
+ export { midnight, parchment, indigo, neutral, bare, presets, stageBg, } from './presets.js';
2
2
  export type { PresetName } from './presets.js';
package/dist/theme/index.js CHANGED
@@ -1,2 +1,2 @@
1
1
  // ─── Theme barrel export ────────────────────────────────
2
- export { midnight, parchment, indigo, presets, stageBg, } from './presets.js';
2
+ export { midnight, parchment, indigo, neutral, bare, presets, stageBg, } from './presets.js';
package/dist/theme/presets.d.ts CHANGED
@@ -10,11 +10,24 @@ export declare const midnight = "\n\t--dt-bg: #0b0e14;\n\t--dt-surface: #10141c;
10
10
  export declare const parchment = "\n\t--dt-bg: #f0e9dd;\n\t--dt-surface: #e8dfd0;\n\t--dt-border: rgba(139, 110, 70, 0.12);\n\t--dt-border-day: rgba(139, 110, 70, 0.22);\n\t--dt-text: rgba(55, 40, 22, 0.88);\n\t--dt-text-2: rgba(110, 85, 52, 0.62);\n\t--dt-text-3: rgba(139, 110, 70, 0.42);\n\t--dt-accent: #b85c2f;\n\t--dt-accent-dim: rgba(184, 92, 47, 0.14);\n\t--dt-glow: rgba(184, 92, 47, 0.25);\n\t--dt-today-bg: rgba(184, 92, 47, 0.04);\n\t--dt-btn-text: #fdf6ee;\n\t--dt-scrollbar: rgba(139, 110, 70, 0.15);\n\t--dt-success: rgba(76, 153, 76, 0.7);\n\t--dt-serif: Georgia, 'Times New Roman', serif;\n\t--dt-mono: 'Courier New', 'Courier', monospace;\n\t--dt-sans: 'Outfit', Georgia, serif;\n\t--dt-hm-empty: rgba(139, 110, 70, 0.06);\n\t--dt-hm-low: rgba(184, 92, 47, 0.15);\n\t--dt-hm-mid: rgba(184, 92, 47, 0.3);\n\t--dt-hm-high: rgba(184, 92, 47, 0.5);\n\t--dt-hm-max: rgba(184, 92, 47, 0.72);\n";
11
11
  /** Soft Indigo — calm productivity, muted lavender with indigo markers */
12
12
  export declare const indigo = "\n\t--dt-bg: #f7f6fc;\n\t--dt-surface: #eeedf8;\n\t--dt-border: rgba(99, 102, 241, 0.08);\n\t--dt-border-day: rgba(99, 102, 241, 0.14);\n\t--dt-text: rgba(30, 27, 55, 0.82);\n\t--dt-text-2: rgba(75, 70, 120, 0.55);\n\t--dt-text-3: rgba(99, 102, 241, 0.3);\n\t--dt-accent: #6366f1;\n\t--dt-accent-dim: rgba(99, 102, 241, 0.12);\n\t--dt-glow: rgba(99, 102, 241, 0.25);\n\t--dt-today-bg: rgba(99, 102, 241, 0.03);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(99, 102, 241, 0.1);\n\t--dt-success: rgba(34, 197, 94, 0.7);\n\t--dt-serif: Georgia, 'Times New Roman', serif;\n\t--dt-sans: 'Outfit', system-ui, sans-serif;\n\t--dt-hm-empty: rgba(99, 102, 241, 0.04);\n\t--dt-hm-low: rgba(99, 102, 241, 0.12);\n\t--dt-hm-mid: rgba(99, 102, 241, 0.28);\n\t--dt-hm-high: rgba(99, 102, 241, 0.48);\n\t--dt-hm-max: rgba(99, 102, 241, 0.7);\n";
13
+ /**
14
+ * Neutral — inherits fonts from host page, uses standard grays + safe blue accent.
15
+ * Drop-in preset that blends into any website without fighting its design.
16
+ */
17
+ export declare const neutral = "\n\t--dt-bg: #ffffff;\n\t--dt-surface: #f9fafb;\n\t--dt-border: rgba(0, 0, 0, 0.08);\n\t--dt-border-day: rgba(0, 0, 0, 0.14);\n\t--dt-text: rgba(0, 0, 0, 0.87);\n\t--dt-text-2: rgba(0, 0, 0, 0.54);\n\t--dt-text-3: rgba(0, 0, 0, 0.38);\n\t--dt-accent: #2563eb;\n\t--dt-accent-dim: rgba(37, 99, 235, 0.12);\n\t--dt-glow: rgba(37, 99, 235, 0.25);\n\t--dt-today-bg: rgba(37, 99, 235, 0.04);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(0, 0, 0, 0.1);\n\t--dt-success: rgba(22, 163, 74, 0.7);\n\t--dt-serif: inherit;\n\t--dt-sans: inherit;\n\t--dt-mono: ui-monospace, 'SFMono-Regular', monospace;\n\t--dt-hm-empty: rgba(0, 0, 0, 0.03);\n\t--dt-hm-low: rgba(37, 99, 235, 0.12);\n\t--dt-hm-mid: rgba(37, 99, 235, 0.28);\n\t--dt-hm-high: rgba(37, 99, 235, 0.48);\n\t--dt-hm-max: rgba(37, 99, 235, 0.7);\n";
18
+ /**
19
+ * Bare — transparent skeleton that inherits everything from the host page.
20
+ * All colors use currentColor/transparent/inherit so the calendar fully absorbs
21
+ * the parent site's design. Override individual --dt-* tokens as needed.
22
+ */
23
+ export declare const bare = "\n\t--dt-bg: transparent;\n\t--dt-surface: transparent;\n\t--dt-border: currentColor;\n\t--dt-border-day: currentColor;\n\t--dt-text: inherit;\n\t--dt-text-2: inherit;\n\t--dt-text-3: inherit;\n\t--dt-accent: currentColor;\n\t--dt-accent-dim: transparent;\n\t--dt-glow: transparent;\n\t--dt-today-bg: transparent;\n\t--dt-btn-text: inherit;\n\t--dt-scrollbar: currentColor;\n\t--dt-success: currentColor;\n\t--dt-serif: inherit;\n\t--dt-sans: inherit;\n\t--dt-mono: inherit;\n\t--dt-hm-empty: transparent;\n\t--dt-hm-low: currentColor;\n\t--dt-hm-mid: currentColor;\n\t--dt-hm-high: currentColor;\n\t--dt-hm-max: currentColor;\n";
13
24
  /** All available presets keyed by name */
14
25
  export declare const presets: {
15
26
  readonly midnight: "\n\t--dt-bg: #0b0e14;\n\t--dt-surface: #10141c;\n\t--dt-border: rgba(148, 163, 184, 0.07);\n\t--dt-border-day: rgba(148, 163, 184, 0.14);\n\t--dt-text: rgba(226, 232, 240, 0.85);\n\t--dt-text-2: rgba(148, 163, 184, 0.55);\n\t--dt-text-3: rgba(100, 116, 139, 0.55);\n\t--dt-accent: #ef4444;\n\t--dt-accent-dim: rgba(239, 68, 68, 0.18);\n\t--dt-glow: rgba(239, 68, 68, 0.35);\n\t--dt-today-bg: rgba(239, 68, 68, 0.02);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(148, 163, 184, 0.12);\n\t--dt-success: rgba(74, 222, 128, 0.7);\n\t--dt-serif: Georgia, 'Times New Roman', serif;\n\t--dt-hm-empty: rgba(80, 80, 120, 0.06);\n\t--dt-hm-low: rgba(239, 68, 68, 0.15);\n\t--dt-hm-mid: rgba(239, 68, 68, 0.3);\n\t--dt-hm-high: rgba(239, 68, 68, 0.5);\n\t--dt-hm-max: rgba(239, 68, 68, 0.72);\n";
16
27
  readonly parchment: "\n\t--dt-bg: #f0e9dd;\n\t--dt-surface: #e8dfd0;\n\t--dt-border: rgba(139, 110, 70, 0.12);\n\t--dt-border-day: rgba(139, 110, 70, 0.22);\n\t--dt-text: rgba(55, 40, 22, 0.88);\n\t--dt-text-2: rgba(110, 85, 52, 0.62);\n\t--dt-text-3: rgba(139, 110, 70, 0.42);\n\t--dt-accent: #b85c2f;\n\t--dt-accent-dim: rgba(184, 92, 47, 0.14);\n\t--dt-glow: rgba(184, 92, 47, 0.25);\n\t--dt-today-bg: rgba(184, 92, 47, 0.04);\n\t--dt-btn-text: #fdf6ee;\n\t--dt-scrollbar: rgba(139, 110, 70, 0.15);\n\t--dt-success: rgba(76, 153, 76, 0.7);\n\t--dt-serif: Georgia, 'Times New Roman', serif;\n\t--dt-mono: 'Courier New', 'Courier', monospace;\n\t--dt-sans: 'Outfit', Georgia, serif;\n\t--dt-hm-empty: rgba(139, 110, 70, 0.06);\n\t--dt-hm-low: rgba(184, 92, 47, 0.15);\n\t--dt-hm-mid: rgba(184, 92, 47, 0.3);\n\t--dt-hm-high: rgba(184, 92, 47, 0.5);\n\t--dt-hm-max: rgba(184, 92, 47, 0.72);\n";
17
28
  readonly indigo: "\n\t--dt-bg: #f7f6fc;\n\t--dt-surface: #eeedf8;\n\t--dt-border: rgba(99, 102, 241, 0.08);\n\t--dt-border-day: rgba(99, 102, 241, 0.14);\n\t--dt-text: rgba(30, 27, 55, 0.82);\n\t--dt-text-2: rgba(75, 70, 120, 0.55);\n\t--dt-text-3: rgba(99, 102, 241, 0.3);\n\t--dt-accent: #6366f1;\n\t--dt-accent-dim: rgba(99, 102, 241, 0.12);\n\t--dt-glow: rgba(99, 102, 241, 0.25);\n\t--dt-today-bg: rgba(99, 102, 241, 0.03);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(99, 102, 241, 0.1);\n\t--dt-success: rgba(34, 197, 94, 0.7);\n\t--dt-serif: Georgia, 'Times New Roman', serif;\n\t--dt-sans: 'Outfit', system-ui, sans-serif;\n\t--dt-hm-empty: rgba(99, 102, 241, 0.04);\n\t--dt-hm-low: rgba(99, 102, 241, 0.12);\n\t--dt-hm-mid: rgba(99, 102, 241, 0.28);\n\t--dt-hm-high: rgba(99, 102, 241, 0.48);\n\t--dt-hm-max: rgba(99, 102, 241, 0.7);\n";
29
+ readonly neutral: "\n\t--dt-bg: #ffffff;\n\t--dt-surface: #f9fafb;\n\t--dt-border: rgba(0, 0, 0, 0.08);\n\t--dt-border-day: rgba(0, 0, 0, 0.14);\n\t--dt-text: rgba(0, 0, 0, 0.87);\n\t--dt-text-2: rgba(0, 0, 0, 0.54);\n\t--dt-text-3: rgba(0, 0, 0, 0.38);\n\t--dt-accent: #2563eb;\n\t--dt-accent-dim: rgba(37, 99, 235, 0.12);\n\t--dt-glow: rgba(37, 99, 235, 0.25);\n\t--dt-today-bg: rgba(37, 99, 235, 0.04);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(0, 0, 0, 0.1);\n\t--dt-success: rgba(22, 163, 74, 0.7);\n\t--dt-serif: inherit;\n\t--dt-sans: inherit;\n\t--dt-mono: ui-monospace, 'SFMono-Regular', monospace;\n\t--dt-hm-empty: rgba(0, 0, 0, 0.03);\n\t--dt-hm-low: rgba(37, 99, 235, 0.12);\n\t--dt-hm-mid: rgba(37, 99, 235, 0.28);\n\t--dt-hm-high: rgba(37, 99, 235, 0.48);\n\t--dt-hm-max: rgba(37, 99, 235, 0.7);\n";
30
+ readonly bare: "\n\t--dt-bg: transparent;\n\t--dt-surface: transparent;\n\t--dt-border: currentColor;\n\t--dt-border-day: currentColor;\n\t--dt-text: inherit;\n\t--dt-text-2: inherit;\n\t--dt-text-3: inherit;\n\t--dt-accent: currentColor;\n\t--dt-accent-dim: transparent;\n\t--dt-glow: transparent;\n\t--dt-today-bg: transparent;\n\t--dt-btn-text: inherit;\n\t--dt-scrollbar: currentColor;\n\t--dt-success: currentColor;\n\t--dt-serif: inherit;\n\t--dt-sans: inherit;\n\t--dt-mono: inherit;\n\t--dt-hm-empty: transparent;\n\t--dt-hm-low: currentColor;\n\t--dt-hm-mid: currentColor;\n\t--dt-hm-high: currentColor;\n\t--dt-hm-max: currentColor;\n";
18
31
  };
19
32
  export type PresetName = keyof typeof presets;
20
33
  /**
package/dist/theme/presets.js CHANGED
@@ -76,8 +76,65 @@ export const indigo = `
76
76
  --dt-hm-high: rgba(99, 102, 241, 0.48);
77
77
  --dt-hm-max: rgba(99, 102, 241, 0.7);
78
78
  `;
79
+ /**
80
+ * Neutral — inherits fonts from host page, uses standard grays + safe blue accent.
81
+ * Drop-in preset that blends into any website without fighting its design.
82
+ */
83
+ export const neutral = `
84
+ --dt-bg: #ffffff;
85
+ --dt-surface: #f9fafb;
86
+ --dt-border: rgba(0, 0, 0, 0.08);
87
+ --dt-border-day: rgba(0, 0, 0, 0.14);
88
+ --dt-text: rgba(0, 0, 0, 0.87);
89
+ --dt-text-2: rgba(0, 0, 0, 0.54);
90
+ --dt-text-3: rgba(0, 0, 0, 0.38);
91
+ --dt-accent: #2563eb;
92
+ --dt-accent-dim: rgba(37, 99, 235, 0.12);
93
+ --dt-glow: rgba(37, 99, 235, 0.25);
94
+ --dt-today-bg: rgba(37, 99, 235, 0.04);
95
+ --dt-btn-text: #fff;
96
+ --dt-scrollbar: rgba(0, 0, 0, 0.1);
97
+ --dt-success: rgba(22, 163, 74, 0.7);
98
+ --dt-serif: inherit;
99
+ --dt-sans: inherit;
100
+ --dt-mono: ui-monospace, 'SFMono-Regular', monospace;
101
+ --dt-hm-empty: rgba(0, 0, 0, 0.03);
102
+ --dt-hm-low: rgba(37, 99, 235, 0.12);
103
+ --dt-hm-mid: rgba(37, 99, 235, 0.28);
104
+ --dt-hm-high: rgba(37, 99, 235, 0.48);
105
+ --dt-hm-max: rgba(37, 99, 235, 0.7);
106
+ `;
107
+ /**
108
+ * Bare — transparent skeleton that inherits everything from the host page.
109
+ * All colors use currentColor/transparent/inherit so the calendar fully absorbs
110
+ * the parent site's design. Override individual --dt-* tokens as needed.
111
+ */
112
+ export const bare = `
113
+ --dt-bg: transparent;
114
+ --dt-surface: transparent;
115
+ --dt-border: currentColor;
116
+ --dt-border-day: currentColor;
117
+ --dt-text: inherit;
118
+ --dt-text-2: inherit;
119
+ --dt-text-3: inherit;
120
+ --dt-accent: currentColor;
121
+ --dt-accent-dim: transparent;
122
+ --dt-glow: transparent;
123
+ --dt-today-bg: transparent;
124
+ --dt-btn-text: inherit;
125
+ --dt-scrollbar: currentColor;
126
+ --dt-success: currentColor;
127
+ --dt-serif: inherit;
128
+ --dt-sans: inherit;
129
+ --dt-mono: inherit;
130
+ --dt-hm-empty: transparent;
131
+ --dt-hm-low: currentColor;
132
+ --dt-hm-mid: currentColor;
133
+ --dt-hm-high: currentColor;
134
+ --dt-hm-max: currentColor;
135
+ `;
79
136
  /** All available presets keyed by name */
80
- export const presets = { midnight, parchment, indigo };
137
+ export const presets = { midnight, parchment, indigo, neutral, bare };
81
138
  /**
82
139
  * Stage background color matching each theme.
83
140
  * Useful for the container behind the timeline component.
@@ -86,4 +143,6 @@ export const stageBg = {
86
143
  midnight: '#080a0f',
87
144
  parchment: '#e4dace',
88
145
  indigo: '#efedf8',
146
+ neutral: '#ffffff',
147
+ bare: 'transparent',
89
148
  };
package/package.json CHANGED
@@ -1,63 +1,65 @@
1
1
  {
2
- "name": "@nomideusz/svelte-calendar",
3
- "version": "0.2.0",
4
- "description": "A themeable, pluggable Svelte 5 calendar with Day and Week views — Grid, Timeline, Agenda, Heatmap.",
5
- "type": "module",
6
- "license": "MIT",
7
- "svelte": "./dist/index.js",
8
- "types": "./dist/index.d.ts",
9
- "exports": {
10
- ".": {
11
- "types": "./dist/index.d.ts",
12
- "svelte": "./dist/index.js",
13
- "default": "./dist/index.js"
14
- }
15
- },
16
- "files": [
17
- "dist",
18
- "!dist/**/*.test.*",
19
- "!dist/**/*.spec.*"
20
- ],
21
- "peerDependencies": {
22
- "svelte": "^5.0.0"
23
- },
24
- "devDependencies": {
25
- "@sveltejs/adapter-auto": "^7.0.0",
26
- "@sveltejs/kit": "^2.50.2",
27
- "@sveltejs/package": "^2.5.7",
28
- "@sveltejs/vite-plugin-svelte": "^6.2.4",
29
- "svelte": "^5.51.0",
30
- "svelte-check": "^4.3.6",
31
- "typescript": "^5.9.3",
32
- "vite": "^7.3.1",
33
- "vitest": "^4.0.18"
34
- },
35
- "dependencies": {
36
- "date-fns": "^4.1.0",
37
- "date-fns-tz": "^3.2.0"
38
- },
39
- "keywords": [
40
- "svelte",
41
- "calendar",
42
- "scheduler",
43
- "timeline",
44
- "week",
45
- "day",
46
- "booking",
47
- "svelte5"
48
- ],
49
- "repository": {
50
- "type": "git",
51
- "url": "https://github.com/nomideusz/svelte-calendar"
52
- },
53
- "scripts": {
54
- "dev": "vite dev",
55
- "build": "vite build",
56
- "package": "svelte-kit sync && svelte-package",
57
- "preview": "vite preview",
58
- "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
59
- "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
60
- "test": "vitest run",
61
- "test:watch": "vitest"
62
- }
63
- }
2
+ "name": "@nomideusz/svelte-calendar",
3
+ "version": "0.2.2",
4
+ "description": "A themeable, pluggable Svelte 5 calendar with Day and Week views — Grid, Timeline, Agenda, Heatmap.",
5
+ "type": "module",
6
+ "license": "MIT",
7
+ "svelte": "./dist/index.js",
8
+ "types": "./dist/index.d.ts",
9
+ "exports": {
10
+ ".": {
11
+ "types": "./dist/index.d.ts",
12
+ "svelte": "./dist/index.js",
13
+ "default": "./dist/index.js"
14
+ }
15
+ },
16
+ "files": [
17
+ "dist",
18
+ "!dist/**/*.test.*",
19
+ "!dist/**/*.spec.*"
20
+ ],
21
+ "scripts": {
22
+ "dev": "vite dev",
23
+ "build": "vite build",
24
+ "package": "svelte-kit sync && svelte-package",
25
+ "prepublishOnly": "npm run package",
26
+ "preview": "vite preview",
27
+ "prepare": "svelte-kit sync || echo ''",
28
+ "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
29
+ "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
30
+ "test": "vitest run",
31
+ "test:watch": "vitest"
32
+ },
33
+ "peerDependencies": {
34
+ "svelte": "^5.0.0"
35
+ },
36
+ "devDependencies": {
37
+ "@sveltejs/adapter-auto": "^7.0.0",
38
+ "@sveltejs/kit": "^2.50.2",
39
+ "@sveltejs/package": "^2.5.7",
40
+ "@sveltejs/vite-plugin-svelte": "^6.2.4",
41
+ "svelte": "^5.51.0",
42
+ "svelte-check": "^4.3.6",
43
+ "typescript": "^5.9.3",
44
+ "vite": "^7.3.1",
45
+ "vitest": "^4.0.18"
46
+ },
47
+ "dependencies": {
48
+ "date-fns": "^4.1.0",
49
+ "date-fns-tz": "^3.2.0"
50
+ },
51
+ "keywords": [
52
+ "svelte",
53
+ "calendar",
54
+ "scheduler",
55
+ "timeline",
56
+ "week",
57
+ "day",
58
+ "booking",
59
+ "svelte5"
60
+ ],
61
+ "repository": {
62
+ "type": "git",
63
+ "url": "https://github.com/nomideusz/svelte-calendar"
64
+ }
65
+ }