@getmicdrop/venue-calendar 4.2.34 → 4.2.36
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/README.md +809 -809
- package/dist/{ArrowLeftIcon-D2dcPIYB.js → ArrowLeftIcon-DS-NEije.js} +1 -1
- package/dist/{Badge-Bk1dnG89.js → Badge-DIHnRZlw.js} +1 -1
- package/dist/{BlockPlaceholder-DJLtnBDw.js → BlockPlaceholder-Dy9fStDr.js} +1 -1
- package/dist/{Calendar-CzvJjOKf.js → Calendar-CXwhGAmC.js} +6 -6
- package/dist/{CalendarFoundryView-DWjYFSEw.js → CalendarFoundryView-BbVin_52.js} +32 -31
- package/dist/{CalendarIcon-CkJFNFxp.js → CalendarIcon-CvZ-GUH_.js} +1 -1
- package/dist/{CartView-DidUQzO-.js → CartView-DT8DlMqQ.js} +19 -19
- package/dist/{Checkout-eIj6xGgL.js → Checkout-D3VqG09o.js} +15 -15
- package/dist/{Checkout-1NyqTUI8.js → Checkout-UU9C7CXV.js} +18 -18
- package/dist/{CheckoutTimer-DFIHUIZl.js → CheckoutTimer-2WEgppW1.js} +3 -3
- package/dist/{ChevronDownIcon-rsVUoX0r.js → ChevronDownIcon-DXbr-7H6.js} +1 -1
- package/dist/{ClockIcon-CIwbKXZX.js → ClockIcon-Dyx1LMo7.js} +1 -1
- package/dist/{CloseIcon-B7HoEcON.js → CloseIcon-NMHzwT75.js} +1 -1
- package/dist/{CollectionView-Dt3NmdBh.js → CollectionView-DyMB_bPY.js} +7 -7
- package/dist/{Event-B0hDsxnc.js → Event-CXCOnkmi.js} +22 -22
- package/dist/EventPage-HlhaVqRG.js +981 -0
- package/dist/{Heading-CQlZrwry.js → Heading-DcZtRBSB.js} +1 -1
- package/dist/{Image-T6dKIfNx.js → Image-BZGbFJLw.js} +1 -1
- package/dist/{Input-8KhoOdg-.js → Input-Cgdxdj6y.js} +1 -1
- package/dist/{MailIcon-CSR5vhKU.js → MailIcon-D34sBBQX.js} +1 -1
- package/dist/{Modal-D3Otve45.js → Modal-BvT64ak1.js} +2 -2
- package/dist/{ModalFooter-fv8mC75I.js → ModalFooter-DM1dyl4S.js} +2 -2
- package/dist/{PasswordInput-B_6cNrlw.js → PasswordInput-BNKrzXNm.js} +1 -1
- package/dist/{ScarcityBadge-CtHuWSRt.js → ScarcityBadge-DmbmsFlY.js} +5 -5
- package/dist/{SeriesPage-BFYmtgoi.js → SeriesPage-BXKz7PJV.js} +4 -4
- package/dist/{Spinner-fFAXvj_B.js → Spinner-gpYLD9h6.js} +1 -1
- package/dist/{Success-BIVQOUqu.js → Success-DieJd6sx.js} +18 -18
- package/dist/{TagIcon-Do5sN8xR.js → TagIcon-Q7BC2QeQ.js} +1 -1
- package/dist/{ViewTicketsEmbed-CbbE-8EX.js → ViewTicketsEmbed-DqwHARj0.js} +7 -7
- package/dist/{WarningCircleIcon-DuqytsVW.js → WarningCircleIcon-Dxi6_NlN.js} +1 -1
- package/dist/{WarningTriIcon-CW-j3Vwq.js → WarningTriIcon-BVNO82pk.js} +1 -1
- package/dist/{__SKIP_PATHS__-Chv7DW7h.js → __SKIP_PATHS__-BZ2V4IU4.js} +1 -1
- package/dist/api/api.cjs +1 -1
- package/dist/api/api.mjs +28 -34
- package/dist/api/types.d.ts +554 -554
- package/dist/api/waitlist.d.ts +6 -1
- package/dist/{colors-BND7shPA.js → colors-B3NG0RHG.js} +55 -61
- package/dist/{constants-BYtFptYp.js → constants-DqKf8bUn.js} +1 -1
- package/dist/{copyToClipboard-CcwaUGGt.js → copyToClipboard-CLo_2bfp.js} +1 -1
- package/dist/{de-CgHrjezX.js → de-tOW1Ez0s.js} +6 -0
- package/dist/{defaultLabels-CGMGBy-u.js → defaultLabels-D_9CneL4.js} +6 -0
- package/dist/{es-D6ThNLUc.js → es-DrYewQpd.js} +6 -0
- package/dist/{event-CbAGNxgd.js → event-CFDG8adb.js} +1 -1
- package/dist/{event-transform-DnvOiDVn.js → event-transform-jJPAKgYX.js} +4 -4
- package/dist/{eventStatusStream-BIn6Dzkw.js → eventStatusStream-wmEyQSgV.js} +1 -1
- package/dist/{fr-W0OOohju.js → fr-Bs9xnPu6.js} +6 -0
- package/dist/{href-D2-tmkMF.js → href-BfMcUXhM.js} +2 -2
- package/dist/{i18n-4k6uF1EX.js → i18n-BgkKrB4o.js} +5 -5
- package/dist/i18n-DK3npqzN.js +28 -0
- package/dist/{id-xgAFN1EH.js → id-BLwvLobz.js} +6 -0
- package/dist/{it-BhuT9BcE.js → it-CQ_Y8YK3.js} +6 -0
- package/dist/{ja-yca07ASz.js → ja-CeudRJqE.js} +6 -0
- package/dist/{ko-Pfftd2u0.js → ko-DFwVxd-1.js} +6 -0
- package/dist/{labels-Cs7xp4ug.js → labels-BHqxbbw9.js} +1 -1
- package/dist/locales/{4.2.34 → 4.2.36}/main/de.js +1 -1
- package/dist/locales/{4.2.34 → 4.2.36}/main/es.js +1 -1
- package/dist/locales/{4.2.34 → 4.2.36}/main/fr.js +1 -1
- package/dist/locales/{4.2.34 → 4.2.36}/main/id.js +1 -1
- package/dist/locales/{4.2.34 → 4.2.36}/main/it.js +1 -1
- package/dist/locales/{4.2.34 → 4.2.36}/main/ja.js +1 -1
- package/dist/locales/{4.2.34 → 4.2.36}/main/ko.js +1 -1
- package/dist/locales/{4.2.34 → 4.2.36}/main/nl.js +1 -1
- package/dist/locales/{4.2.34 → 4.2.36}/main/pl.js +1 -1
- package/dist/locales/{4.2.34 → 4.2.36}/main/pt-br.js +1 -1
- package/dist/locales/{4.2.34 → 4.2.36}/main/tr.js +1 -1
- package/dist/locales/{4.2.34 → 4.2.36}/main/zh.js +1 -1
- package/dist/{modalManager.svelte-vILq6Thx.js → modalManager.svelte-CrrDshW7.js} +2 -2
- package/dist/{nl-CQEhSA2l.js → nl-CYc0p85Y.js} +6 -0
- package/dist/{order-totals-CSDXY65z.js → order-totals-D0JKhd70.js} +3 -3
- package/dist/{orders-CH2nnS3m.js → orders-CCWPQsWb.js} +1 -1
- package/dist/{phoneUtils-BtJ3FhMK.js → phoneUtils-aQHGh8C_.js} +1 -1
- package/dist/{pixels-BK7PGnme.js → pixels-M2q8HRk_.js} +2 -2
- package/dist/{pl-CyWqKYE8.js → pl-BSqAasUa.js} +6 -0
- package/dist/{promo-Cy4LPBAC.js → promo-CKvS9lia.js} +1 -1
- package/dist/{pt-br-BC2I7f8-.js → pt-br-CZs8_gFN.js} +6 -0
- package/dist/seo/types.d.ts +156 -156
- package/dist/{serverTotals-C3VhWitQ.js → serverTotals-DGd3p1s5.js} +1 -1
- package/dist/{shareCopyFeedback.svelte-DTl5jJ2n.js → shareCopyFeedback.svelte-DTOJruVM.js} +4 -4
- package/dist/{showcase-state-options-CeCdn8_C.js → showcase-state-options-Da3jPUQb.js} +1 -1
- package/dist/{to-event-card-props-BmsDr8T3.js → to-event-card-props-B5bsYKP4.js} +3 -3
- package/dist/{tr-CNjaJc_1.js → tr-O80C2r5C.js} +6 -0
- package/dist/types/index.d.ts +509 -509
- package/dist/{utils-pF15CnBe.js → utils-RE2aEa_D.js} +2 -2
- package/dist/venue-calendar.es.js +30 -30
- package/dist/venue-calendar.iife.js +28 -28
- package/dist/venue-calendar.umd.js +49 -49
- package/dist/{zh-DOeb3_A1.js → zh-ydknixkJ.js} +6 -0
- package/package.json +3 -3
- package/src/lib/theme.js +222 -222
- package/dist/EventPage-De-7chl3.js +0 -970
- package/dist/i18n-FnFHQ5QU.js +0 -28
- /package/dist/locales/{4.2.34 → 4.2.36}/flow/de.js +0 -0
- /package/dist/locales/{4.2.34 → 4.2.36}/flow/es.js +0 -0
- /package/dist/locales/{4.2.34 → 4.2.36}/flow/fr.js +0 -0
- /package/dist/locales/{4.2.34 → 4.2.36}/flow/id.js +0 -0
- /package/dist/locales/{4.2.34 → 4.2.36}/flow/it.js +0 -0
- /package/dist/locales/{4.2.34 → 4.2.36}/flow/ja.js +0 -0
- /package/dist/locales/{4.2.34 → 4.2.36}/flow/ko.js +0 -0
- /package/dist/locales/{4.2.34 → 4.2.36}/flow/nl.js +0 -0
- /package/dist/locales/{4.2.34 → 4.2.36}/flow/pl.js +0 -0
- /package/dist/locales/{4.2.34 → 4.2.36}/flow/pt-br.js +0 -0
- /package/dist/locales/{4.2.34 → 4.2.36}/flow/tr.js +0 -0
- /package/dist/locales/{4.2.34 → 4.2.36}/flow/zh.js +0 -0
|
@@ -454,6 +454,12 @@ var e = {
|
|
|
454
454
|
waitlistRequeueFailed: "暂时无法为您前移 — 您仍在候补名单中",
|
|
455
455
|
waitlistPositionEstimate: "您目前大约排在第 {position} 位 — 座位空出后会向前移动",
|
|
456
456
|
waitlistLinkEventMismatch: "此链接属于另一场活动 — 请从那场演出的邮件中打开",
|
|
457
|
+
waitlistErrorNotEnabled: "本活动不提供候补名单",
|
|
458
|
+
waitlistErrorEventNotFound: "未找到活动",
|
|
459
|
+
waitlistErrorAlreadyPurchased: "您已购买本活动的门票",
|
|
460
|
+
waitlistErrorPhoneRegistered: "此电话号码已在候补名单中",
|
|
461
|
+
waitlistErrorJoinFailed: "加入候补名单失败,请重试",
|
|
462
|
+
waitlistErrorNetwork: "网络错误,请检查网络连接后重试",
|
|
457
463
|
sessionExpiringSoonMessage: "您的结算会话将在 {time} 后超时,所选门票将被释放回库存",
|
|
458
464
|
extensionsRemaining: "剩余延长次数:{count}",
|
|
459
465
|
continueCheckout: "继续结算",
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@getmicdrop/venue-calendar",
|
|
3
3
|
"_version_comment": "4.1.55 was the last PUBLISHED version, and the tree carried 36 commits npm's 4.1.55 does not have — including the gate-password security fix and four money fixes. A filename must never reuse a version npm has taken (jsDelivr/unpkg cache the FIRST bytes they see under `@4.1.55` forever, so republishing that number ships the old widget to every venue that pinned it). Bumped to 4.2.0 here, BEFORE anything is built for publish. `npm run release:preflight` refuses to proceed when this number already exists in the registry.",
|
|
4
|
-
"version": "4.2.
|
|
4
|
+
"version": "4.2.36",
|
|
5
5
|
"description": "A customizable Svelte calendar component for displaying comedy events",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"types": "./dist/types/index.d.ts",
|
|
@@ -142,7 +142,7 @@
|
|
|
142
142
|
"homepage": "https://github.com/get-micdrop/venue-calendar#readme",
|
|
143
143
|
"_peerDependencies_comment": "TWO different contracts live here, and they cover DIFFERENT entry points. (a) `svelte` — the ES and UMD builds externalize svelte (vite.config.lib.js rollupOptions.external) and ship PRE-COMPILED output that binds through svelte/internal/client, a private, non-semver surface. So the consumer's svelte is the runtime for code this package's compiler emitted, and the compiler version is the real floor. The upper bound is the part that was missing: `>=5.56.0` admits Svelte 6, and this was the ONLY manifest in the fleet that would have taken it — svelte-stripe's `svelte: ^5` peer was the sole accidental brake, and moving that package to devDependencies (below) removes it, so the bound has to be explicit and it has to land in the same change. The floor is 5.56.4, NOT the 5.56.9 this repo compiles with: micdrop-frontend pins svelte to exactly 5.56.4 tree-wide and CANNOT move (mf 3ce86e22a reverted the 5.56.4 -> 5.56.9 bump because the Foundry Catalog Gate stops producing a byte-identical catalog under a different compiler, and that has to be fixed with the catalog regenerated in the same change, on Linux). A floor of 5.56.9 would therefore ERESOLVE against micdrop-frontend's own override on `npm ci` — i.e. it would brick the app that consumes this package in order to record an aspiration. The residual skew (consumer 5.56.4 < compiler 5.56.9) is real but not a missing-symbol crash: all 73 svelte/internal members the shipped dist references are present in 5.56.4. The exposure is SIGNATURE drift across the 7 differing internal/client files (reactivity/props.js `rest_props` is the one behind the June crash), which export-presence checks cannot catch. Close it by aligning the compilers, not by widening this range. (b) `@getmicdrop/svelte-components` — required by the ./api subpath ONLY: dist/api/api.mjs emits 5 SC subpath imports and api.cjs emits 7 (vite.config.api.js externalizes SC deliberately; the manifest never said so, and npm therefore never installed or warned about it). It is marked OPTIONAL below on purpose: @getmicdrop/venue-calendar is PUBLIC on npm but @getmicdrop/svelte-components is PRIVATE (an unauthenticated `npm view` of it 404s while this package resolves fine), so a REQUIRED peer would make `npm i @getmicdrop/venue-calendar` fail outright for every third party that only wants the widget entry — which bundles SC and needs nothing installed. Optional means npm stays quiet when SC is absent (it cannot be fetched anyway) but still version-checks it when present. The main/IIFE/UMD builds do NOT externalize SC; see the devDependencies pin. SEAM RESOLVED (2026-08-23): declaring SC in BOTH devDependencies (build) and peerDependencies (./api contract) is the intended shape, and the test no longer objects. It used to: scDepType asserted SC appeared in EXACTLY ONE of the four dependency maps and found two, failing 3 tests. The fix landed where this note said it should — scripts/lockfile-sync-check.test.js now derives INSTALL_DEP_TYPES as DEP_TYPES minus peerDependencies, so a peer is no longer counted as somewhere SC is installed from. The detector (scripts/lockfile-sync-check.mjs) always handled peers correctly. Nothing is outstanding here; this paragraph is kept as the record of why the two-map shape is deliberate rather than a mistake to be tidied away",
|
|
144
144
|
"peerDependencies": {
|
|
145
|
-
"@getmicdrop/svelte-components": "^6.24.
|
|
145
|
+
"@getmicdrop/svelte-components": "^6.24.326",
|
|
146
146
|
"svelte": ">=5.56.4 <6"
|
|
147
147
|
},
|
|
148
148
|
"peerDependenciesMeta": {
|
|
@@ -154,7 +154,7 @@
|
|
|
154
154
|
"_devDependencies_pin_comment": "Three EXACT pins in here are load-bearing and must not be re-caretted by a dependency bot. (1) `@getmicdrop/svelte-components` — the ES/UMD/IIFE builds do NOT externalize SC, so it is COMPILED INTO every shipped artifact. RESTORED TO AN EXACT PIN 2026-08-23, having drifted back to a caret at some point between 6.24.311 and 6.24.316 — exactly the re-caretting this note warns about, which is worth knowing recurs. Under a caretted range like `^6.24.311` the SC version a venue's browser executes is whatever the range floats to on the publish machine at publish time, which is not recorded anywhere and is not reproducible after the fact; the `overrides` block below cannot help (it only ever covered esbuild, and consumers ignore a dependency's overrides entirely). Pinned exact so the artifact and the manifest agree, and vite.config.lib.js stamps the resolved version into the bundle as __VC_SC_VERSION__ so a venue's devtools can answer 'which SC is this?'. (2) `svelte` — the compiler whose private internal/client calls the pre-compiled dist binds to. `^5.56.9` let the compiler move under a peer range that stayed still; see _peerDependencies_comment. (3) `@stripe/stripe-js` in dependencies — see its own note there.",
|
|
155
155
|
"devDependencies": {
|
|
156
156
|
"@eslint/js": "^10.0.1",
|
|
157
|
-
"@getmicdrop/svelte-components": "6.24.
|
|
157
|
+
"@getmicdrop/svelte-components": "^6.24.329",
|
|
158
158
|
"@playwright/test": "^1.60.0",
|
|
159
159
|
"@size-limit/file": "^13.0.3",
|
|
160
160
|
"@sveltejs/adapter-auto": "^7.0.1",
|
package/src/lib/theme.js
CHANGED
|
@@ -1,222 +1,222 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Theme Configuration for Embeddable Calendar Widget
|
|
3
|
-
*
|
|
4
|
-
* This module provides comprehensive theming options for the calendar widget.
|
|
5
|
-
* All colors use HSL format for easy manipulation.
|
|
6
|
-
*
|
|
7
|
-
* Usage:
|
|
8
|
-
* 1. Import and call applyTheme() with your custom theme
|
|
9
|
-
* 2. Or set CSS custom properties directly on the widget container
|
|
10
|
-
*
|
|
11
|
-
* Example:
|
|
12
|
-
* ```js
|
|
13
|
-
* import { applyTheme, themes } from '@getmicdrop/venue-calendar/theme';
|
|
14
|
-
* applyTheme(themes.dark);
|
|
15
|
-
*
|
|
16
|
-
* // Or custom theme:
|
|
17
|
-
* applyTheme({
|
|
18
|
-
* brandPrimary: '270 76% 60%', // Purple
|
|
19
|
-
* textPrimary: '0 0% 100%',
|
|
20
|
-
* bgPrimary: '0 0% 10%',
|
|
21
|
-
* });
|
|
22
|
-
* ```
|
|
23
|
-
*/
|
|
24
|
-
|
|
25
|
-
// Default light theme
|
|
26
|
-
export const lightTheme = {
|
|
27
|
-
// Brand colors
|
|
28
|
-
brandPrimary: '217 91% 60%', // #2563EB - Blue
|
|
29
|
-
|
|
30
|
-
// Text colors
|
|
31
|
-
textPrimary: '0 0% 0%', // Black
|
|
32
|
-
textSecondary: '0 0% 40%', // Dark Gray
|
|
33
|
-
textTertiary: '0 0% 60%', // Gray
|
|
34
|
-
|
|
35
|
-
// Background colors
|
|
36
|
-
bgPrimary: '0 0% 100%', // White
|
|
37
|
-
bgSecondary: '0 0% 98%', // Light Gray
|
|
38
|
-
bgQuaternary: '0 0% 96%', // Very Light Gray
|
|
39
|
-
|
|
40
|
-
// Border/Stroke colors
|
|
41
|
-
strokePrimary: '0 0% 80%', // Medium Gray
|
|
42
|
-
strokeSecondary: '0 0% 90%', // Light Gray
|
|
43
|
-
|
|
44
|
-
// Status colors
|
|
45
|
-
statusOnSale: '217 91% 60%', // Blue
|
|
46
|
-
statusSellingFast: '38 92% 50%', // Orange
|
|
47
|
-
statusSoldOut: '0 84% 60%', // Red
|
|
48
|
-
|
|
49
|
-
// Calendar specific
|
|
50
|
-
todayBg: '217 91% 97%', // Light blue
|
|
51
|
-
todayText: '217 91% 50%', // Blue
|
|
52
|
-
eventDotOnSale: '217 91% 60%',
|
|
53
|
-
eventDotSellingFast: '38 92% 50%',
|
|
54
|
-
eventDotSoldOut: '0 84% 60%',
|
|
55
|
-
|
|
56
|
-
// Interaction states
|
|
57
|
-
hoverBg: '0 0% 96%',
|
|
58
|
-
focusRing: '217 91% 60%',
|
|
59
|
-
};
|
|
60
|
-
|
|
61
|
-
// Dark theme
|
|
62
|
-
export const darkTheme = {
|
|
63
|
-
// Brand colors
|
|
64
|
-
brandPrimary: '217 91% 65%', // Lighter blue for dark mode
|
|
65
|
-
|
|
66
|
-
// Text colors
|
|
67
|
-
textPrimary: '0 0% 98%', // Near white
|
|
68
|
-
textSecondary: '0 0% 70%', // Light gray
|
|
69
|
-
textTertiary: '0 0% 50%', // Gray
|
|
70
|
-
|
|
71
|
-
// Background colors
|
|
72
|
-
bgPrimary: '0 0% 9%', // Very dark gray
|
|
73
|
-
bgSecondary: '0 0% 13%', // Dark gray
|
|
74
|
-
bgQuaternary: '0 0% 17%', // Slightly lighter
|
|
75
|
-
|
|
76
|
-
// Border/Stroke colors
|
|
77
|
-
strokePrimary: '0 0% 30%',
|
|
78
|
-
strokeSecondary: '0 0% 20%',
|
|
79
|
-
|
|
80
|
-
// Status colors
|
|
81
|
-
statusOnSale: '217 91% 65%',
|
|
82
|
-
statusSellingFast: '38 92% 55%',
|
|
83
|
-
statusSoldOut: '0 84% 65%',
|
|
84
|
-
|
|
85
|
-
// Calendar specific
|
|
86
|
-
todayBg: '217 50% 20%',
|
|
87
|
-
todayText: '217 91% 70%',
|
|
88
|
-
eventDotOnSale: '217 91% 65%',
|
|
89
|
-
eventDotSellingFast: '38 92% 55%',
|
|
90
|
-
eventDotSoldOut: '0 84% 65%',
|
|
91
|
-
|
|
92
|
-
// Interaction states
|
|
93
|
-
hoverBg: '0 0% 20%',
|
|
94
|
-
focusRing: '217 91% 65%',
|
|
95
|
-
};
|
|
96
|
-
|
|
97
|
-
// High contrast theme for accessibility
|
|
98
|
-
export const highContrastTheme = {
|
|
99
|
-
brandPrimary: '217 100% 50%',
|
|
100
|
-
textPrimary: '0 0% 0%',
|
|
101
|
-
textSecondary: '0 0% 20%',
|
|
102
|
-
textTertiary: '0 0% 30%',
|
|
103
|
-
bgPrimary: '0 0% 100%',
|
|
104
|
-
bgSecondary: '0 0% 95%',
|
|
105
|
-
bgQuaternary: '0 0% 90%',
|
|
106
|
-
strokePrimary: '0 0% 0%',
|
|
107
|
-
strokeSecondary: '0 0% 30%',
|
|
108
|
-
statusOnSale: '217 100% 40%',
|
|
109
|
-
statusSellingFast: '30 100% 40%',
|
|
110
|
-
statusSoldOut: '0 100% 40%',
|
|
111
|
-
todayBg: '217 100% 90%',
|
|
112
|
-
todayText: '217 100% 30%',
|
|
113
|
-
eventDotOnSale: '217 100% 40%',
|
|
114
|
-
eventDotSellingFast: '30 100% 40%',
|
|
115
|
-
eventDotSoldOut: '0 100% 40%',
|
|
116
|
-
hoverBg: '217 100% 95%',
|
|
117
|
-
focusRing: '217 100% 40%',
|
|
118
|
-
};
|
|
119
|
-
|
|
120
|
-
// Preset themes collection
|
|
121
|
-
export const themes = {
|
|
122
|
-
light: lightTheme,
|
|
123
|
-
dark: darkTheme,
|
|
124
|
-
highContrast: highContrastTheme,
|
|
125
|
-
};
|
|
126
|
-
|
|
127
|
-
/**
|
|
128
|
-
* Apply a theme to the calendar widget
|
|
129
|
-
* @param {Object} theme - Theme object with HSL color values
|
|
130
|
-
* @param {HTMLElement} container - Optional container element (defaults to :root)
|
|
131
|
-
*/
|
|
132
|
-
export function applyTheme(theme, container = document.documentElement) {
|
|
133
|
-
const cssVarMap = {
|
|
134
|
-
brandPrimary: '--brand-primary',
|
|
135
|
-
textPrimary: '--text-primary',
|
|
136
|
-
textSecondary: '--text-secondary',
|
|
137
|
-
textTertiary: '--text-tertiary',
|
|
138
|
-
bgPrimary: '--bg-primary',
|
|
139
|
-
bgSecondary: '--bg-secondary',
|
|
140
|
-
bgQuaternary: '--bg-quaternary',
|
|
141
|
-
strokePrimary: '--stroke-primary',
|
|
142
|
-
strokeSecondary: '--stroke-secondary',
|
|
143
|
-
statusOnSale: '--status-on-sale',
|
|
144
|
-
statusSellingFast: '--status-selling-fast',
|
|
145
|
-
statusSoldOut: '--status-sold-out',
|
|
146
|
-
todayBg: '--today-bg',
|
|
147
|
-
todayText: '--today-text',
|
|
148
|
-
eventDotOnSale: '--event-dot-on-sale',
|
|
149
|
-
eventDotSellingFast: '--event-dot-selling-fast',
|
|
150
|
-
eventDotSoldOut: '--event-dot-sold-out',
|
|
151
|
-
hoverBg: '--hover-bg',
|
|
152
|
-
focusRing: '--focus-ring',
|
|
153
|
-
};
|
|
154
|
-
|
|
155
|
-
Object.entries(theme).forEach(([key, value]) => {
|
|
156
|
-
const cssVar = cssVarMap[key];
|
|
157
|
-
if (cssVar) {
|
|
158
|
-
container.style.setProperty(cssVar, value);
|
|
159
|
-
}
|
|
160
|
-
});
|
|
161
|
-
|
|
162
|
-
// Sync data-theme attribute when a known preset is applied so SC
|
|
163
|
-
// components (Stripe theme detector, DarkModeToggle reader, etc.)
|
|
164
|
-
// see the same intent. Partial/custom themes don't trigger this —
|
|
165
|
-
// they edit a few CSS vars without flipping the overall light/dark
|
|
166
|
-
// mode signal.
|
|
167
|
-
if (container.setAttribute) {
|
|
168
|
-
if (theme === darkTheme) {
|
|
169
|
-
container.setAttribute('data-theme', 'dark');
|
|
170
|
-
} else if (theme === lightTheme || theme === highContrastTheme) {
|
|
171
|
-
container.setAttribute('data-theme', 'light');
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
/**
|
|
177
|
-
* Generate CSS string for embedding
|
|
178
|
-
* @param {Object} theme - Theme object
|
|
179
|
-
* @returns {string} CSS string
|
|
180
|
-
*/
|
|
181
|
-
export function generateThemeCSS(theme) {
|
|
182
|
-
const cssVarMap = {
|
|
183
|
-
brandPrimary: '--brand-primary',
|
|
184
|
-
textPrimary: '--text-primary',
|
|
185
|
-
textSecondary: '--text-secondary',
|
|
186
|
-
textTertiary: '--text-tertiary',
|
|
187
|
-
bgPrimary: '--bg-primary',
|
|
188
|
-
bgSecondary: '--bg-secondary',
|
|
189
|
-
bgQuaternary: '--bg-quaternary',
|
|
190
|
-
strokePrimary: '--stroke-primary',
|
|
191
|
-
strokeSecondary: '--stroke-secondary',
|
|
192
|
-
statusOnSale: '--status-on-sale',
|
|
193
|
-
statusSellingFast: '--status-selling-fast',
|
|
194
|
-
statusSoldOut: '--status-sold-out',
|
|
195
|
-
todayBg: '--today-bg',
|
|
196
|
-
todayText: '--today-text',
|
|
197
|
-
eventDotOnSale: '--event-dot-on-sale',
|
|
198
|
-
eventDotSellingFast: '--event-dot-selling-fast',
|
|
199
|
-
eventDotSoldOut: '--event-dot-sold-out',
|
|
200
|
-
hoverBg: '--hover-bg',
|
|
201
|
-
focusRing: '--focus-ring',
|
|
202
|
-
};
|
|
203
|
-
|
|
204
|
-
const lines = [];
|
|
205
|
-
Object.entries(theme).forEach(([key, value]) => {
|
|
206
|
-
const cssVar = cssVarMap[key];
|
|
207
|
-
if (cssVar) {
|
|
208
|
-
lines.push(` ${cssVar}: ${value};`);
|
|
209
|
-
}
|
|
210
|
-
});
|
|
211
|
-
|
|
212
|
-
return `:root {\n${lines.join('\n')}\n}`;
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
export default {
|
|
216
|
-
themes,
|
|
217
|
-
lightTheme,
|
|
218
|
-
darkTheme,
|
|
219
|
-
highContrastTheme,
|
|
220
|
-
applyTheme,
|
|
221
|
-
generateThemeCSS,
|
|
222
|
-
};
|
|
1
|
+
/**
|
|
2
|
+
* Theme Configuration for Embeddable Calendar Widget
|
|
3
|
+
*
|
|
4
|
+
* This module provides comprehensive theming options for the calendar widget.
|
|
5
|
+
* All colors use HSL format for easy manipulation.
|
|
6
|
+
*
|
|
7
|
+
* Usage:
|
|
8
|
+
* 1. Import and call applyTheme() with your custom theme
|
|
9
|
+
* 2. Or set CSS custom properties directly on the widget container
|
|
10
|
+
*
|
|
11
|
+
* Example:
|
|
12
|
+
* ```js
|
|
13
|
+
* import { applyTheme, themes } from '@getmicdrop/venue-calendar/theme';
|
|
14
|
+
* applyTheme(themes.dark);
|
|
15
|
+
*
|
|
16
|
+
* // Or custom theme:
|
|
17
|
+
* applyTheme({
|
|
18
|
+
* brandPrimary: '270 76% 60%', // Purple
|
|
19
|
+
* textPrimary: '0 0% 100%',
|
|
20
|
+
* bgPrimary: '0 0% 10%',
|
|
21
|
+
* });
|
|
22
|
+
* ```
|
|
23
|
+
*/
|
|
24
|
+
|
|
25
|
+
// Default light theme
|
|
26
|
+
export const lightTheme = {
|
|
27
|
+
// Brand colors
|
|
28
|
+
brandPrimary: '217 91% 60%', // #2563EB - Blue
|
|
29
|
+
|
|
30
|
+
// Text colors
|
|
31
|
+
textPrimary: '0 0% 0%', // Black
|
|
32
|
+
textSecondary: '0 0% 40%', // Dark Gray
|
|
33
|
+
textTertiary: '0 0% 60%', // Gray
|
|
34
|
+
|
|
35
|
+
// Background colors
|
|
36
|
+
bgPrimary: '0 0% 100%', // White
|
|
37
|
+
bgSecondary: '0 0% 98%', // Light Gray
|
|
38
|
+
bgQuaternary: '0 0% 96%', // Very Light Gray
|
|
39
|
+
|
|
40
|
+
// Border/Stroke colors
|
|
41
|
+
strokePrimary: '0 0% 80%', // Medium Gray
|
|
42
|
+
strokeSecondary: '0 0% 90%', // Light Gray
|
|
43
|
+
|
|
44
|
+
// Status colors
|
|
45
|
+
statusOnSale: '217 91% 60%', // Blue
|
|
46
|
+
statusSellingFast: '38 92% 50%', // Orange
|
|
47
|
+
statusSoldOut: '0 84% 60%', // Red
|
|
48
|
+
|
|
49
|
+
// Calendar specific
|
|
50
|
+
todayBg: '217 91% 97%', // Light blue
|
|
51
|
+
todayText: '217 91% 50%', // Blue
|
|
52
|
+
eventDotOnSale: '217 91% 60%',
|
|
53
|
+
eventDotSellingFast: '38 92% 50%',
|
|
54
|
+
eventDotSoldOut: '0 84% 60%',
|
|
55
|
+
|
|
56
|
+
// Interaction states
|
|
57
|
+
hoverBg: '0 0% 96%',
|
|
58
|
+
focusRing: '217 91% 60%',
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
// Dark theme
|
|
62
|
+
export const darkTheme = {
|
|
63
|
+
// Brand colors
|
|
64
|
+
brandPrimary: '217 91% 65%', // Lighter blue for dark mode
|
|
65
|
+
|
|
66
|
+
// Text colors
|
|
67
|
+
textPrimary: '0 0% 98%', // Near white
|
|
68
|
+
textSecondary: '0 0% 70%', // Light gray
|
|
69
|
+
textTertiary: '0 0% 50%', // Gray
|
|
70
|
+
|
|
71
|
+
// Background colors
|
|
72
|
+
bgPrimary: '0 0% 9%', // Very dark gray
|
|
73
|
+
bgSecondary: '0 0% 13%', // Dark gray
|
|
74
|
+
bgQuaternary: '0 0% 17%', // Slightly lighter
|
|
75
|
+
|
|
76
|
+
// Border/Stroke colors
|
|
77
|
+
strokePrimary: '0 0% 30%',
|
|
78
|
+
strokeSecondary: '0 0% 20%',
|
|
79
|
+
|
|
80
|
+
// Status colors
|
|
81
|
+
statusOnSale: '217 91% 65%',
|
|
82
|
+
statusSellingFast: '38 92% 55%',
|
|
83
|
+
statusSoldOut: '0 84% 65%',
|
|
84
|
+
|
|
85
|
+
// Calendar specific
|
|
86
|
+
todayBg: '217 50% 20%',
|
|
87
|
+
todayText: '217 91% 70%',
|
|
88
|
+
eventDotOnSale: '217 91% 65%',
|
|
89
|
+
eventDotSellingFast: '38 92% 55%',
|
|
90
|
+
eventDotSoldOut: '0 84% 65%',
|
|
91
|
+
|
|
92
|
+
// Interaction states
|
|
93
|
+
hoverBg: '0 0% 20%',
|
|
94
|
+
focusRing: '217 91% 65%',
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
// High contrast theme for accessibility
|
|
98
|
+
export const highContrastTheme = {
|
|
99
|
+
brandPrimary: '217 100% 50%',
|
|
100
|
+
textPrimary: '0 0% 0%',
|
|
101
|
+
textSecondary: '0 0% 20%',
|
|
102
|
+
textTertiary: '0 0% 30%',
|
|
103
|
+
bgPrimary: '0 0% 100%',
|
|
104
|
+
bgSecondary: '0 0% 95%',
|
|
105
|
+
bgQuaternary: '0 0% 90%',
|
|
106
|
+
strokePrimary: '0 0% 0%',
|
|
107
|
+
strokeSecondary: '0 0% 30%',
|
|
108
|
+
statusOnSale: '217 100% 40%',
|
|
109
|
+
statusSellingFast: '30 100% 40%',
|
|
110
|
+
statusSoldOut: '0 100% 40%',
|
|
111
|
+
todayBg: '217 100% 90%',
|
|
112
|
+
todayText: '217 100% 30%',
|
|
113
|
+
eventDotOnSale: '217 100% 40%',
|
|
114
|
+
eventDotSellingFast: '30 100% 40%',
|
|
115
|
+
eventDotSoldOut: '0 100% 40%',
|
|
116
|
+
hoverBg: '217 100% 95%',
|
|
117
|
+
focusRing: '217 100% 40%',
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
// Preset themes collection
|
|
121
|
+
export const themes = {
|
|
122
|
+
light: lightTheme,
|
|
123
|
+
dark: darkTheme,
|
|
124
|
+
highContrast: highContrastTheme,
|
|
125
|
+
};
|
|
126
|
+
|
|
127
|
+
/**
|
|
128
|
+
* Apply a theme to the calendar widget
|
|
129
|
+
* @param {Object} theme - Theme object with HSL color values
|
|
130
|
+
* @param {HTMLElement} container - Optional container element (defaults to :root)
|
|
131
|
+
*/
|
|
132
|
+
export function applyTheme(theme, container = document.documentElement) {
|
|
133
|
+
const cssVarMap = {
|
|
134
|
+
brandPrimary: '--brand-primary',
|
|
135
|
+
textPrimary: '--text-primary',
|
|
136
|
+
textSecondary: '--text-secondary',
|
|
137
|
+
textTertiary: '--text-tertiary',
|
|
138
|
+
bgPrimary: '--bg-primary',
|
|
139
|
+
bgSecondary: '--bg-secondary',
|
|
140
|
+
bgQuaternary: '--bg-quaternary',
|
|
141
|
+
strokePrimary: '--stroke-primary',
|
|
142
|
+
strokeSecondary: '--stroke-secondary',
|
|
143
|
+
statusOnSale: '--status-on-sale',
|
|
144
|
+
statusSellingFast: '--status-selling-fast',
|
|
145
|
+
statusSoldOut: '--status-sold-out',
|
|
146
|
+
todayBg: '--today-bg',
|
|
147
|
+
todayText: '--today-text',
|
|
148
|
+
eventDotOnSale: '--event-dot-on-sale',
|
|
149
|
+
eventDotSellingFast: '--event-dot-selling-fast',
|
|
150
|
+
eventDotSoldOut: '--event-dot-sold-out',
|
|
151
|
+
hoverBg: '--hover-bg',
|
|
152
|
+
focusRing: '--focus-ring',
|
|
153
|
+
};
|
|
154
|
+
|
|
155
|
+
Object.entries(theme).forEach(([key, value]) => {
|
|
156
|
+
const cssVar = cssVarMap[key];
|
|
157
|
+
if (cssVar) {
|
|
158
|
+
container.style.setProperty(cssVar, value);
|
|
159
|
+
}
|
|
160
|
+
});
|
|
161
|
+
|
|
162
|
+
// Sync data-theme attribute when a known preset is applied so SC
|
|
163
|
+
// components (Stripe theme detector, DarkModeToggle reader, etc.)
|
|
164
|
+
// see the same intent. Partial/custom themes don't trigger this —
|
|
165
|
+
// they edit a few CSS vars without flipping the overall light/dark
|
|
166
|
+
// mode signal.
|
|
167
|
+
if (container.setAttribute) {
|
|
168
|
+
if (theme === darkTheme) {
|
|
169
|
+
container.setAttribute('data-theme', 'dark');
|
|
170
|
+
} else if (theme === lightTheme || theme === highContrastTheme) {
|
|
171
|
+
container.setAttribute('data-theme', 'light');
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
/**
|
|
177
|
+
* Generate CSS string for embedding
|
|
178
|
+
* @param {Object} theme - Theme object
|
|
179
|
+
* @returns {string} CSS string
|
|
180
|
+
*/
|
|
181
|
+
export function generateThemeCSS(theme) {
|
|
182
|
+
const cssVarMap = {
|
|
183
|
+
brandPrimary: '--brand-primary',
|
|
184
|
+
textPrimary: '--text-primary',
|
|
185
|
+
textSecondary: '--text-secondary',
|
|
186
|
+
textTertiary: '--text-tertiary',
|
|
187
|
+
bgPrimary: '--bg-primary',
|
|
188
|
+
bgSecondary: '--bg-secondary',
|
|
189
|
+
bgQuaternary: '--bg-quaternary',
|
|
190
|
+
strokePrimary: '--stroke-primary',
|
|
191
|
+
strokeSecondary: '--stroke-secondary',
|
|
192
|
+
statusOnSale: '--status-on-sale',
|
|
193
|
+
statusSellingFast: '--status-selling-fast',
|
|
194
|
+
statusSoldOut: '--status-sold-out',
|
|
195
|
+
todayBg: '--today-bg',
|
|
196
|
+
todayText: '--today-text',
|
|
197
|
+
eventDotOnSale: '--event-dot-on-sale',
|
|
198
|
+
eventDotSellingFast: '--event-dot-selling-fast',
|
|
199
|
+
eventDotSoldOut: '--event-dot-sold-out',
|
|
200
|
+
hoverBg: '--hover-bg',
|
|
201
|
+
focusRing: '--focus-ring',
|
|
202
|
+
};
|
|
203
|
+
|
|
204
|
+
const lines = [];
|
|
205
|
+
Object.entries(theme).forEach(([key, value]) => {
|
|
206
|
+
const cssVar = cssVarMap[key];
|
|
207
|
+
if (cssVar) {
|
|
208
|
+
lines.push(` ${cssVar}: ${value};`);
|
|
209
|
+
}
|
|
210
|
+
});
|
|
211
|
+
|
|
212
|
+
return `:root {\n${lines.join('\n')}\n}`;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
export default {
|
|
216
|
+
themes,
|
|
217
|
+
lightTheme,
|
|
218
|
+
darkTheme,
|
|
219
|
+
highContrastTheme,
|
|
220
|
+
applyTheme,
|
|
221
|
+
generateThemeCSS,
|
|
222
|
+
};
|