@getmicdrop/venue-calendar 4.2.33 → 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.
Files changed (118) hide show
  1. package/README.md +809 -809
  2. package/dist/{ArrowLeftIcon-B92-MN6-.js → ArrowLeftIcon-D2dcPIYB.js} +1 -1
  3. package/dist/{Badge-Bv_MT-Vt.js → Badge-Bk1dnG89.js} +1 -1
  4. package/dist/{BlockPlaceholder-DuE4xLS_.js → BlockPlaceholder-DJLtnBDw.js} +1 -1
  5. package/dist/{Calendar-CX3S7j_2.js → Calendar-CzvJjOKf.js} +19 -19
  6. package/dist/{CalendarFoundryView-CE5VMPRl.js → CalendarFoundryView-DWjYFSEw.js} +947 -947
  7. package/dist/{CalendarIcon-pJ01x71c.js → CalendarIcon-CkJFNFxp.js} +1 -1
  8. package/dist/{CartView-BZALykSb.js → CartView-DidUQzO-.js} +532 -532
  9. package/dist/{Checkout-B6BHEAwF.js → Checkout-1NyqTUI8.js} +129 -129
  10. package/dist/{Checkout-c6ExwNzk.js → Checkout-eIj6xGgL.js} +173 -173
  11. package/dist/{CheckoutTimer-Bz-HJhV2.js → CheckoutTimer-DFIHUIZl.js} +5 -5
  12. package/dist/{ChevronDownIcon-k93EaHQh.js → ChevronDownIcon-rsVUoX0r.js} +1 -1
  13. package/dist/{ClockIcon-hnrV9bwg.js → ClockIcon-CIwbKXZX.js} +1 -1
  14. package/dist/{CloseIcon-CdZ5mNTK.js → CloseIcon-B7HoEcON.js} +1 -1
  15. package/dist/{CollectionView-BMDKM-lg.js → CollectionView-Dt3NmdBh.js} +9 -10
  16. package/dist/{Event-DvRnmTdU.js → Event-B0hDsxnc.js} +85 -85
  17. package/dist/{EventPage-CTo8ynx6.js → EventPage-De-7chl3.js} +124 -125
  18. package/dist/{Heading-Dfo3bjyn.js → Heading-CQlZrwry.js} +1 -1
  19. package/dist/{Image-B3cEndLZ.js → Image-T6dKIfNx.js} +1 -1
  20. package/dist/{Input-BntIoPeV.js → Input-8KhoOdg-.js} +1 -1
  21. package/dist/{MailIcon-CMyjGJ4_.js → MailIcon-CSR5vhKU.js} +1 -1
  22. package/dist/{Modal-CpMs0l2W.js → Modal-D3Otve45.js} +2 -2
  23. package/dist/{ModalFooter-Kdyt5XyP.js → ModalFooter-fv8mC75I.js} +2 -2
  24. package/dist/{PasswordInput-C91gXtFY.js → PasswordInput-B_6cNrlw.js} +1 -1
  25. package/dist/{ScarcityBadge-C0YeWGkd.js → ScarcityBadge-CtHuWSRt.js} +23 -22
  26. package/dist/{SeriesPage-DNyhMA_k.js → SeriesPage-BFYmtgoi.js} +4 -4
  27. package/dist/{Spinner-BwiDys7C.js → Spinner-fFAXvj_B.js} +1 -1
  28. package/dist/{Success-BxvH6W_x.js → Success-BIVQOUqu.js} +52 -52
  29. package/dist/{TagIcon-BkPcpKdu.js → TagIcon-Do5sN8xR.js} +1 -1
  30. package/dist/ViewTicketsEmbed-CbbE-8EX.js +727 -0
  31. package/dist/{WarningCircleIcon-D78IFaPY.js → WarningCircleIcon-DuqytsVW.js} +1 -1
  32. package/dist/{WarningTriIcon-6WbGCso4.js → WarningTriIcon-CW-j3Vwq.js} +1 -1
  33. package/dist/{__SKIP_PATHS__-tAxwP7_6.js → __SKIP_PATHS__-Chv7DW7h.js} +1 -1
  34. package/dist/api/api.cjs +1 -1
  35. package/dist/api/api.mjs +299 -209
  36. package/dist/api/gift-cards.d.ts +1 -1
  37. package/dist/api/orders.d.ts +2 -2
  38. package/dist/api/types.d.ts +554 -554
  39. package/dist/{colors-DbQNhbC_.js → colors-BND7shPA.js} +119 -117
  40. package/dist/constants-BYtFptYp.js +356 -0
  41. package/dist/{copyToClipboard-DAGJHhtn.js → copyToClipboard-CcwaUGGt.js} +1 -1
  42. package/dist/{de-BG-86m10.js → de-8N03rEoe.js} +4 -1
  43. package/dist/{de-BZpzzwT9.js → de-CgHrjezX.js} +57 -1
  44. package/dist/{timezones-C5l0SSHK.js → defaultLabels-CGMGBy-u.js} +501 -1
  45. package/dist/{es-9jwSoUSD.js → es-D6ThNLUc.js} +45 -1
  46. package/dist/{es-B1RPM3H_.js → es-tRMGbtbB.js} +4 -1
  47. package/dist/{event-v8d4wRpB.js → event-CbAGNxgd.js} +1 -1
  48. package/dist/{event-transform-lC22EDSL.js → event-transform-DnvOiDVn.js} +4 -4
  49. package/dist/{eventStatusStream-CopqZ2oa.js → eventStatusStream-BIn6Dzkw.js} +5 -5
  50. package/dist/{fr-B6FgrH9s.js → fr-DDnljtQz.js} +4 -1
  51. package/dist/{fr-fYY2O8Ab.js → fr-W0OOohju.js} +57 -1
  52. package/dist/{href-BH6l_kZx.js → href-D2-tmkMF.js} +2 -2
  53. package/dist/{i18n-CIVh_urJ.js → i18n-4k6uF1EX.js} +126 -126
  54. package/dist/i18n-FnFHQ5QU.js +28 -0
  55. package/dist/{id-CK7hal8E.js → id-BZshacSm.js} +4 -1
  56. package/dist/{id-But8qcA2.js → id-xgAFN1EH.js} +57 -1
  57. package/dist/{it-BdV8d4GZ.js → it-B6Rbpjec.js} +4 -1
  58. package/dist/{it-Cr9Quauw.js → it-BhuT9BcE.js} +57 -1
  59. package/dist/{ja-DKVQltc4.js → ja-Bmj-bPuM.js} +4 -1
  60. package/dist/{ja-CNXwg0_H.js → ja-yca07ASz.js} +57 -1
  61. package/dist/{ko-DtoIJliT.js → ko-Pfftd2u0.js} +57 -1
  62. package/dist/{ko-DpIk-4pN.js → ko-r-ecuHZ5.js} +4 -1
  63. package/dist/{labels-BUH8ouCu.js → labels-Cs7xp4ug.js} +1 -1
  64. package/dist/locales/{4.2.32 → 4.2.34}/flow/de.js +1 -1
  65. package/dist/locales/{4.2.32 → 4.2.34}/flow/es.js +1 -1
  66. package/dist/locales/{4.2.32 → 4.2.34}/flow/fr.js +1 -1
  67. package/dist/locales/{4.2.32 → 4.2.34}/flow/id.js +1 -1
  68. package/dist/locales/{4.2.32 → 4.2.34}/flow/it.js +1 -1
  69. package/dist/locales/{4.2.32 → 4.2.34}/flow/ja.js +1 -1
  70. package/dist/locales/{4.2.32 → 4.2.34}/flow/ko.js +1 -1
  71. package/dist/locales/{4.2.32 → 4.2.34}/flow/nl.js +1 -1
  72. package/dist/locales/{4.2.32 → 4.2.34}/flow/pl.js +1 -1
  73. package/dist/locales/{4.2.32 → 4.2.34}/flow/pt-br.js +1 -1
  74. package/dist/locales/{4.2.32 → 4.2.34}/flow/tr.js +1 -1
  75. package/dist/locales/{4.2.32 → 4.2.34}/flow/zh.js +1 -1
  76. package/dist/locales/{4.2.32 → 4.2.34}/main/de.js +1 -1
  77. package/dist/locales/{4.2.32 → 4.2.34}/main/es.js +1 -1
  78. package/dist/locales/{4.2.32 → 4.2.34}/main/fr.js +1 -1
  79. package/dist/locales/{4.2.32 → 4.2.34}/main/id.js +1 -1
  80. package/dist/locales/{4.2.32 → 4.2.34}/main/it.js +1 -1
  81. package/dist/locales/{4.2.32 → 4.2.34}/main/ja.js +1 -1
  82. package/dist/locales/{4.2.32 → 4.2.34}/main/ko.js +1 -1
  83. package/dist/locales/{4.2.32 → 4.2.34}/main/nl.js +1 -1
  84. package/dist/locales/{4.2.32 → 4.2.34}/main/pl.js +1 -1
  85. package/dist/locales/{4.2.32 → 4.2.34}/main/pt-br.js +1 -1
  86. package/dist/locales/{4.2.32 → 4.2.34}/main/tr.js +1 -1
  87. package/dist/locales/{4.2.32 → 4.2.34}/main/zh.js +1 -1
  88. package/dist/{modalManager.svelte-C4dWVCst.js → modalManager.svelte-vILq6Thx.js} +2 -2
  89. package/dist/{nl-Dbs4YQMw.js → nl-CQEhSA2l.js} +57 -1
  90. package/dist/{nl-C-dVfidI.js → nl-CS1da1Bc.js} +4 -1
  91. package/dist/{order-totals-CeeD6GjZ.js → order-totals-CSDXY65z.js} +31 -31
  92. package/dist/{orders-BuGy4vpJ.js → orders-CH2nnS3m.js} +365 -209
  93. package/dist/{phoneUtils-BDV9Eggn.js → phoneUtils-BtJ3FhMK.js} +1 -1
  94. package/dist/{pixels-D6vqcuy2.js → pixels-BK7PGnme.js} +11 -11
  95. package/dist/{pl-CnFcI33y.js → pl-C2bkE2WA.js} +4 -1
  96. package/dist/{pl-Da6lsZXQ.js → pl-CyWqKYE8.js} +57 -1
  97. package/dist/{promo-DtLZRskK.js → promo-Cy4LPBAC.js} +3 -3
  98. package/dist/{pt-br-6QYijxa0.js → pt-br--DIxBDjz.js} +4 -1
  99. package/dist/{pt-br-D1wHabRR.js → pt-br-BC2I7f8-.js} +57 -1
  100. package/dist/seo/types.d.ts +156 -156
  101. package/dist/{serverTotals-t2UmKkhC.js → serverTotals-C3VhWitQ.js} +1 -1
  102. package/dist/{shareCopyFeedback.svelte-B-M53Wj2.js → shareCopyFeedback.svelte-DTl5jJ2n.js} +55 -55
  103. package/dist/{showcase-state-options-VZcqIjpF.js → showcase-state-options-CeCdn8_C.js} +1 -1
  104. package/dist/{to-event-card-props-CpXtfoKx.js → to-event-card-props-BmsDr8T3.js} +31 -31
  105. package/dist/{tr-Pv_m8usO.js → tr-Bk7x5MW7.js} +4 -1
  106. package/dist/{tr-CpN50zWw.js → tr-CNjaJc_1.js} +57 -1
  107. package/dist/types/index.d.ts +509 -509
  108. package/dist/{utils-CtqaTDLB.js → utils-pF15CnBe.js} +49 -49
  109. package/dist/venue-calendar.es.js +710 -734
  110. package/dist/venue-calendar.iife.js +56 -57
  111. package/dist/venue-calendar.umd.js +54 -55
  112. package/dist/{zh-CAAnH4T4.js → zh-C8kyVh24.js} +4 -1
  113. package/dist/{zh-CwlRq_aG.js → zh-DOeb3_A1.js} +57 -1
  114. package/package.json +1 -1
  115. package/src/lib/theme.js +222 -222
  116. package/dist/ViewTicketsEmbed-DVurn8FG.js +0 -690
  117. package/dist/constants-ENlpIS8i.js +0 -822
  118. 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.33",
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",
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
+ };