@getmicdrop/venue-calendar 4.2.32 → 4.2.34
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-B92-MN6-.js → ArrowLeftIcon-D2dcPIYB.js} +1 -1
- package/dist/{Badge-Bv_MT-Vt.js → Badge-Bk1dnG89.js} +1 -1
- package/dist/{BlockPlaceholder-DuE4xLS_.js → BlockPlaceholder-DJLtnBDw.js} +1 -1
- package/dist/{Calendar-CXq_H56Z.js → Calendar-CzvJjOKf.js} +19 -19
- package/dist/{CalendarFoundryView-DxQKDDgF.js → CalendarFoundryView-DWjYFSEw.js} +980 -960
- package/dist/{CalendarIcon-pJ01x71c.js → CalendarIcon-CkJFNFxp.js} +1 -1
- package/dist/{CartView-DRVzz2Jv.js → CartView-DidUQzO-.js} +532 -532
- package/dist/{Checkout-Cdw5BIfy.js → Checkout-1NyqTUI8.js} +129 -129
- package/dist/{Checkout-DmermPNB.js → Checkout-eIj6xGgL.js} +173 -173
- package/dist/{CheckoutTimer-Bz-HJhV2.js → CheckoutTimer-DFIHUIZl.js} +5 -5
- package/dist/{ChevronDownIcon-k93EaHQh.js → ChevronDownIcon-rsVUoX0r.js} +1 -1
- package/dist/{ClockIcon-hnrV9bwg.js → ClockIcon-CIwbKXZX.js} +1 -1
- package/dist/{CloseIcon-CdZ5mNTK.js → CloseIcon-B7HoEcON.js} +1 -1
- package/dist/{CollectionView-C15_ZzBb.js → CollectionView-Dt3NmdBh.js} +9 -10
- package/dist/{Event-B0IdtMpP.js → Event-B0hDsxnc.js} +377 -359
- package/dist/{EventPage-B4y4n5md.js → EventPage-De-7chl3.js} +124 -125
- package/dist/{Heading-Dfo3bjyn.js → Heading-CQlZrwry.js} +1 -1
- package/dist/{Image-B3cEndLZ.js → Image-T6dKIfNx.js} +1 -1
- package/dist/{Input-BntIoPeV.js → Input-8KhoOdg-.js} +1 -1
- package/dist/{MailIcon-CMyjGJ4_.js → MailIcon-CSR5vhKU.js} +1 -1
- package/dist/{Modal-B6BsMEaP.js → Modal-D3Otve45.js} +2 -2
- package/dist/{ModalFooter-D1XdQEhH.js → ModalFooter-fv8mC75I.js} +162 -147
- package/dist/{PasswordInput-C91gXtFY.js → PasswordInput-B_6cNrlw.js} +1 -1
- package/dist/{ScarcityBadge-C0YeWGkd.js → ScarcityBadge-CtHuWSRt.js} +23 -22
- package/dist/{SeriesPage-1ZZgy2K-.js → SeriesPage-BFYmtgoi.js} +4 -4
- package/dist/{Spinner-BwiDys7C.js → Spinner-fFAXvj_B.js} +1 -1
- package/dist/{Success-BxvH6W_x.js → Success-BIVQOUqu.js} +52 -52
- package/dist/{TagIcon-BkPcpKdu.js → TagIcon-Do5sN8xR.js} +1 -1
- package/dist/ViewTicketsEmbed-CbbE-8EX.js +727 -0
- package/dist/{WarningCircleIcon-D78IFaPY.js → WarningCircleIcon-DuqytsVW.js} +1 -1
- package/dist/{WarningTriIcon-6WbGCso4.js → WarningTriIcon-CW-j3Vwq.js} +1 -1
- package/dist/{__SKIP_PATHS__-tAxwP7_6.js → __SKIP_PATHS__-Chv7DW7h.js} +1 -1
- package/dist/api/api.cjs +1 -1
- package/dist/api/api.mjs +299 -209
- package/dist/api/gift-cards.d.ts +1 -1
- package/dist/api/orders.d.ts +2 -2
- package/dist/api/types.d.ts +554 -554
- package/dist/{colors-DbQNhbC_.js → colors-BND7shPA.js} +119 -117
- package/dist/constants-BYtFptYp.js +356 -0
- package/dist/{copyToClipboard-DAGJHhtn.js → copyToClipboard-CcwaUGGt.js} +1 -1
- package/dist/{de-BG-86m10.js → de-8N03rEoe.js} +4 -1
- package/dist/{de-BZpzzwT9.js → de-CgHrjezX.js} +57 -1
- package/dist/{timezones-C5l0SSHK.js → defaultLabels-CGMGBy-u.js} +501 -1
- package/dist/{es-9jwSoUSD.js → es-D6ThNLUc.js} +45 -1
- package/dist/{es-B1RPM3H_.js → es-tRMGbtbB.js} +4 -1
- package/dist/{event-v8d4wRpB.js → event-CbAGNxgd.js} +1 -1
- package/dist/{event-transform-lC22EDSL.js → event-transform-DnvOiDVn.js} +4 -4
- package/dist/{eventStatusStream-CopqZ2oa.js → eventStatusStream-BIn6Dzkw.js} +5 -5
- package/dist/{fr-B6FgrH9s.js → fr-DDnljtQz.js} +4 -1
- package/dist/{fr-fYY2O8Ab.js → fr-W0OOohju.js} +57 -1
- package/dist/{href-BH6l_kZx.js → href-D2-tmkMF.js} +2 -2
- package/dist/{i18n-CIVh_urJ.js → i18n-4k6uF1EX.js} +126 -126
- package/dist/i18n-FnFHQ5QU.js +28 -0
- package/dist/{id-CK7hal8E.js → id-BZshacSm.js} +4 -1
- package/dist/{id-But8qcA2.js → id-xgAFN1EH.js} +57 -1
- package/dist/{it-BdV8d4GZ.js → it-B6Rbpjec.js} +4 -1
- package/dist/{it-Cr9Quauw.js → it-BhuT9BcE.js} +57 -1
- package/dist/{ja-DKVQltc4.js → ja-Bmj-bPuM.js} +4 -1
- package/dist/{ja-CNXwg0_H.js → ja-yca07ASz.js} +57 -1
- package/dist/{ko-DtoIJliT.js → ko-Pfftd2u0.js} +57 -1
- package/dist/{ko-DpIk-4pN.js → ko-r-ecuHZ5.js} +4 -1
- package/dist/{labels-BUH8ouCu.js → labels-Cs7xp4ug.js} +1 -1
- package/dist/locales/{4.2.32 → 4.2.34}/flow/de.js +1 -1
- package/dist/locales/{4.2.32 → 4.2.34}/flow/es.js +1 -1
- package/dist/locales/{4.2.32 → 4.2.34}/flow/fr.js +1 -1
- package/dist/locales/{4.2.32 → 4.2.34}/flow/id.js +1 -1
- package/dist/locales/{4.2.32 → 4.2.34}/flow/it.js +1 -1
- package/dist/locales/{4.2.32 → 4.2.34}/flow/ja.js +1 -1
- package/dist/locales/{4.2.32 → 4.2.34}/flow/ko.js +1 -1
- package/dist/locales/{4.2.32 → 4.2.34}/flow/nl.js +1 -1
- package/dist/locales/{4.2.32 → 4.2.34}/flow/pl.js +1 -1
- package/dist/locales/{4.2.32 → 4.2.34}/flow/pt-br.js +1 -1
- package/dist/locales/{4.2.32 → 4.2.34}/flow/tr.js +1 -1
- package/dist/locales/{4.2.32 → 4.2.34}/flow/zh.js +1 -1
- package/dist/locales/{4.2.32 → 4.2.34}/main/de.js +1 -1
- package/dist/locales/{4.2.32 → 4.2.34}/main/es.js +1 -1
- package/dist/locales/{4.2.32 → 4.2.34}/main/fr.js +1 -1
- package/dist/locales/{4.2.32 → 4.2.34}/main/id.js +1 -1
- package/dist/locales/{4.2.32 → 4.2.34}/main/it.js +1 -1
- package/dist/locales/{4.2.32 → 4.2.34}/main/ja.js +1 -1
- package/dist/locales/{4.2.32 → 4.2.34}/main/ko.js +1 -1
- package/dist/locales/{4.2.32 → 4.2.34}/main/nl.js +1 -1
- package/dist/locales/{4.2.32 → 4.2.34}/main/pl.js +1 -1
- package/dist/locales/{4.2.32 → 4.2.34}/main/pt-br.js +1 -1
- package/dist/locales/{4.2.32 → 4.2.34}/main/tr.js +1 -1
- package/dist/locales/{4.2.32 → 4.2.34}/main/zh.js +1 -1
- package/dist/{modalManager.svelte-BLfn6RXD.js → modalManager.svelte-vILq6Thx.js} +2 -2
- package/dist/{nl-Dbs4YQMw.js → nl-CQEhSA2l.js} +57 -1
- package/dist/{nl-C-dVfidI.js → nl-CS1da1Bc.js} +4 -1
- package/dist/{order-totals-CeeD6GjZ.js → order-totals-CSDXY65z.js} +31 -31
- package/dist/{orders-BuGy4vpJ.js → orders-CH2nnS3m.js} +365 -209
- package/dist/{phoneUtils-BDV9Eggn.js → phoneUtils-BtJ3FhMK.js} +1 -1
- package/dist/{pixels-D6vqcuy2.js → pixels-BK7PGnme.js} +11 -11
- package/dist/{pl-CnFcI33y.js → pl-C2bkE2WA.js} +4 -1
- package/dist/{pl-Da6lsZXQ.js → pl-CyWqKYE8.js} +57 -1
- package/dist/{promo-DtLZRskK.js → promo-Cy4LPBAC.js} +3 -3
- package/dist/{pt-br-6QYijxa0.js → pt-br--DIxBDjz.js} +4 -1
- package/dist/{pt-br-D1wHabRR.js → pt-br-BC2I7f8-.js} +57 -1
- package/dist/seo/types.d.ts +156 -156
- package/dist/{serverTotals-t2UmKkhC.js → serverTotals-C3VhWitQ.js} +1 -1
- package/dist/{shareCopyFeedback.svelte-B-M53Wj2.js → shareCopyFeedback.svelte-DTl5jJ2n.js} +55 -55
- package/dist/{showcase-state-options-VZcqIjpF.js → showcase-state-options-CeCdn8_C.js} +1 -1
- package/dist/{to-event-card-props-CpXtfoKx.js → to-event-card-props-BmsDr8T3.js} +31 -31
- package/dist/{tr-Pv_m8usO.js → tr-Bk7x5MW7.js} +4 -1
- package/dist/{tr-CpN50zWw.js → tr-CNjaJc_1.js} +57 -1
- package/dist/types/index.d.ts +509 -509
- package/dist/{utils-CtqaTDLB.js → utils-pF15CnBe.js} +49 -49
- package/dist/venue-calendar.css +1 -1
- package/dist/venue-calendar.es.js +711 -735
- package/dist/venue-calendar.iife.js +60 -61
- package/dist/venue-calendar.umd.js +54 -55
- package/dist/{zh-CAAnH4T4.js → zh-C8kyVh24.js} +4 -1
- package/dist/{zh-CwlRq_aG.js → zh-DOeb3_A1.js} +57 -1
- package/package.json +3 -3
- package/src/lib/theme.js +222 -222
- package/dist/ViewTicketsEmbed-DVurn8FG.js +0 -690
- package/dist/constants-ENlpIS8i.js +0 -822
- package/dist/createI18n-DBUVdZra.js +0 -75
|
@@ -172,7 +172,10 @@ var e = {
|
|
|
172
172
|
waitlistLinkUsed: "此链接已被使用。您仍在候补名单中",
|
|
173
173
|
waitlistLinkEmailMismatch: "此链接已发送至其他邮箱。您仍在候补名单中",
|
|
174
174
|
waitlistLinkInventoryExhausted: "这些门票刚刚已被抢完。您仍在候补名单中 — 如果再有余票释出,我们会发送邮件通知您",
|
|
175
|
-
dismiss: "关闭"
|
|
175
|
+
dismiss: "关闭",
|
|
176
|
+
keepMeUpdatedByVenue: "接收 {venue} 的活动及最新资讯",
|
|
177
|
+
privacyPolicyLink: "隐私政策",
|
|
178
|
+
paymentUnavailable: "目前无法为此订单收款 — 请刷新页面或联系场馆"
|
|
176
179
|
};
|
|
177
180
|
//#endregion
|
|
178
181
|
export { e as zh };
|
|
@@ -439,7 +439,63 @@ var e = {
|
|
|
439
439
|
hasEvents: "有活动",
|
|
440
440
|
viewMode: "视图模式",
|
|
441
441
|
goToCurrentMonth: "返回本月",
|
|
442
|
-
nShowtimes: "{n} 个场次"
|
|
442
|
+
nShowtimes: "{n} 个场次",
|
|
443
|
+
checkoutUnavailableTitle: "此处暂不支持在线购票",
|
|
444
|
+
checkoutUnavailableBody: "您可以在下方浏览近期演出,但目前无法在本网站购票。请前往场馆自己的购票页面,或联系场馆预订。",
|
|
445
|
+
checkoutUnavailableOwnerNote: "网站所有者:{origin} 尚未注册结算功能。请联系 Micdrop 将此域名添加到您组织允许的嵌入域名中 — 更改最多需要 5 分钟生效。",
|
|
446
|
+
keepMeUpdatedByVenue: "接收 {venue} 的活动及最新资讯",
|
|
447
|
+
waitlistWindowNotice: "这些门票将为您保留",
|
|
448
|
+
waitlistWindowSuffix: "— 超时后,名额将让给下一位排队者",
|
|
449
|
+
waitlistWindowExpired: "您的购票时限已过 — 该座位正在提供给下一位排队者",
|
|
450
|
+
waitlistRequeueCta: "排到下一个位置",
|
|
451
|
+
waitlistRequeueBusy: "正在为您前移…",
|
|
452
|
+
waitlistRequeueDone: "您已排在第一位 — 下一个座位空出后我们会立即发邮件通知您",
|
|
453
|
+
waitlistRequeueNotOnList: "您已不在此候补名单中 — 请通过下方按钮重新加入",
|
|
454
|
+
waitlistRequeueFailed: "暂时无法为您前移 — 您仍在候补名单中",
|
|
455
|
+
waitlistPositionEstimate: "您目前大约排在第 {position} 位 — 座位空出后会向前移动",
|
|
456
|
+
waitlistLinkEventMismatch: "此链接属于另一场活动 — 请从那场演出的邮件中打开",
|
|
457
|
+
sessionExpiringSoonMessage: "您的结算会话将在 {time} 后超时,所选门票将被释放回库存",
|
|
458
|
+
extensionsRemaining: "剩余延长次数:{count}",
|
|
459
|
+
continueCheckout: "继续结算",
|
|
460
|
+
okIllHurry: "好的,我会尽快",
|
|
461
|
+
maxExtensionsReached: "已达到延长次数上限",
|
|
462
|
+
sessionExpired: "会话已超时",
|
|
463
|
+
sessionExpiredMessage: "您的结算会话已超时,所选门票已被释放",
|
|
464
|
+
selectTicketsAgain: "重新选择门票",
|
|
465
|
+
selectTicketsLabel: "选择门票",
|
|
466
|
+
orderNotFound: "未找到订单",
|
|
467
|
+
orderNotFoundMessage: "我们找不到您的订单。这可能是因为会话已超时,或您直接打开了此页面。请重新选择门票",
|
|
468
|
+
pageSections: "页面栏目",
|
|
469
|
+
viewTicketsOrderNotFound: "未找到订单。请检查邮件中的链接",
|
|
470
|
+
viewTicketsLoadFailed: "无法加载您的门票,请重试",
|
|
471
|
+
doorsAtTime: "{time} 开场",
|
|
472
|
+
ticketCarousel: "门票轮播",
|
|
473
|
+
qrCodeForTicket: "门票 {number} 的二维码",
|
|
474
|
+
qrRefundedSuffix: "已退款,不可入场",
|
|
475
|
+
qrCheckedInSuffix: "已检票",
|
|
476
|
+
refunded: "已退款",
|
|
477
|
+
checkedIn: "已检票",
|
|
478
|
+
ticketRefundedNote: "此门票已退款,入场时将不被接受",
|
|
479
|
+
ticketCheckedInNote: "此门票已被扫描 — 无法再次使用",
|
|
480
|
+
previousTicket: "上一张门票",
|
|
481
|
+
nextTicket: "下一张门票",
|
|
482
|
+
ticketCountOfTotal: "第 {current} 张,共 {total} 张",
|
|
483
|
+
addToAppleWallet: "添加到 Apple Wallet",
|
|
484
|
+
addToGoogleWallet: "添加到 Google Wallet",
|
|
485
|
+
walletPassesComingSoon: "电子钱包票券即将推出。您的门票就在这里 — 可以截图或下载 PDF",
|
|
486
|
+
downloadPdf: "下载 PDF",
|
|
487
|
+
addToCalendarPrefix: "添加到日历:",
|
|
488
|
+
getDirections: "查看路线",
|
|
489
|
+
requestARefund: "申请退款",
|
|
490
|
+
refundRequestSent: "您的退款申请已发送给{venue},他们会就您的订单与您联系",
|
|
491
|
+
refundReasonPrompt: "告诉{venue}您申请退款的原因(可选)",
|
|
492
|
+
refundNotePlaceholder: "给场馆留言…",
|
|
493
|
+
sending: "发送中…",
|
|
494
|
+
submitRefundRequest: "提交退款申请",
|
|
495
|
+
somethingWentWrong: "出了点问题,请稍后重试",
|
|
496
|
+
orderNumberLine: "订单 {orderNumber}",
|
|
497
|
+
questionsPrompt: "有疑问?",
|
|
498
|
+
opensInGoogleMaps: "(在 Google 地图中打开)"
|
|
443
499
|
};
|
|
444
500
|
//#endregion
|
|
445
501
|
export { e as zh };
|
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.34",
|
|
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.325",
|
|
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": "
|
|
157
|
+
"@getmicdrop/svelte-components": "6.24.325",
|
|
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
|
+
};
|