@getmicdrop/venue-calendar 3.3.5 → 3.3.7
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 +661 -661
- package/dist/VenueCalendar-2gCRs3C_.js.map +1 -1
- package/dist/api/api.cjs.map +1 -1
- package/dist/api/api.mjs.map +1 -1
- package/dist/api/types.d.ts +289 -289
- package/dist/types/index.d.ts +395 -395
- package/dist/venue-calendar.iife.js.map +1 -1
- package/dist/venue-calendar.umd.js.map +1 -1
- package/package.json +96 -96
- package/src/lib/theme.js +209 -209
package/package.json
CHANGED
|
@@ -1,96 +1,96 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@getmicdrop/venue-calendar",
|
|
3
|
-
"version": "3.3.
|
|
4
|
-
"description": "A customizable Svelte calendar component for displaying comedy events",
|
|
5
|
-
"type": "module",
|
|
6
|
-
"types": "./dist/types/index.d.ts",
|
|
7
|
-
"main": "./dist/venue-calendar.umd.js",
|
|
8
|
-
"module": "./dist/venue-calendar.es.js",
|
|
9
|
-
"exports": {
|
|
10
|
-
".": {
|
|
11
|
-
"types": "./dist/types/index.d.ts",
|
|
12
|
-
"import": "./dist/venue-calendar.es.js",
|
|
13
|
-
"require": "./dist/venue-calendar.umd.js",
|
|
14
|
-
"default": "./dist/venue-calendar.es.js"
|
|
15
|
-
},
|
|
16
|
-
"./api": {
|
|
17
|
-
"types": "./dist/api/index.d.ts",
|
|
18
|
-
"import": "./dist/api/api.mjs",
|
|
19
|
-
"require": "./dist/api/api.cjs",
|
|
20
|
-
"default": "./dist/api/api.mjs"
|
|
21
|
-
},
|
|
22
|
-
"./theme": {
|
|
23
|
-
"import": "./src/lib/theme.js",
|
|
24
|
-
"default": "./src/lib/theme.js"
|
|
25
|
-
},
|
|
26
|
-
"./dist/venue-calendar.css": "./dist/venue-calendar.css"
|
|
27
|
-
},
|
|
28
|
-
"files": [
|
|
29
|
-
"dist",
|
|
30
|
-
"src/lib/theme.js",
|
|
31
|
-
"README.md"
|
|
32
|
-
],
|
|
33
|
-
"scripts": {
|
|
34
|
-
"dev": "vite dev",
|
|
35
|
-
"build": "vite build",
|
|
36
|
-
"build:lib": "vite build --config vite.config.lib.js",
|
|
37
|
-
"build:api": "vite build --config vite.config.api.js",
|
|
38
|
-
"build:all": "npm run build:lib && npm run build:api",
|
|
39
|
-
"preview": "vite preview",
|
|
40
|
-
"prepare": "svelte-kit sync || echo ''",
|
|
41
|
-
"prepublishOnly": "npm run build:all",
|
|
42
|
-
"check": "svelte-check --diagnostic-sources \"js,svelte\"",
|
|
43
|
-
"check:all": "svelte-check",
|
|
44
|
-
"test": "vitest run",
|
|
45
|
-
"test:watch": "vitest",
|
|
46
|
-
"test:ui": "vitest --ui"
|
|
47
|
-
},
|
|
48
|
-
"keywords": [
|
|
49
|
-
"svelte",
|
|
50
|
-
"calendar",
|
|
51
|
-
"events",
|
|
52
|
-
"comedy",
|
|
53
|
-
"venue",
|
|
54
|
-
"component",
|
|
55
|
-
"micdrop"
|
|
56
|
-
],
|
|
57
|
-
"author": "MicDrop",
|
|
58
|
-
"license": "MIT",
|
|
59
|
-
"repository": {
|
|
60
|
-
"type": "git",
|
|
61
|
-
"url": "git+https://github.com/get-micdrop/venue-calendar.git"
|
|
62
|
-
},
|
|
63
|
-
"bugs": {
|
|
64
|
-
"url": "https://github.com/get-micdrop/venue-calendar/issues"
|
|
65
|
-
},
|
|
66
|
-
"homepage": "https://github.com/get-micdrop/venue-calendar#readme",
|
|
67
|
-
"peerDependencies": {
|
|
68
|
-
"svelte": "^5.0.0"
|
|
69
|
-
},
|
|
70
|
-
"devDependencies": {
|
|
71
|
-
"@sveltejs/adapter-auto": "^6.1.0",
|
|
72
|
-
"@sveltejs/kit": "^2.49.4",
|
|
73
|
-
"@sveltejs/vite-plugin-svelte": "^6.2.4",
|
|
74
|
-
"@tailwindcss/vite": "^4.0.0",
|
|
75
|
-
"@testing-library/jest-dom": "^6.9.1",
|
|
76
|
-
"@testing-library/svelte": "^5.3.1",
|
|
77
|
-
"@vitest/coverage-v8": "^4.0.16",
|
|
78
|
-
"baseline-browser-mapping": "^2.9.11",
|
|
79
|
-
"jsdom": "^27.4.0",
|
|
80
|
-
"svelte": "^5.46.1",
|
|
81
|
-
"svelte-check": "^4.3.5",
|
|
82
|
-
"tailwindcss": "^4.0.0",
|
|
83
|
-
"typescript": "^5.9.3",
|
|
84
|
-
"vite": "^7.0.0",
|
|
85
|
-
"vite-plugin-dts": "^4.5.0",
|
|
86
|
-
"vitest": "^4.0.16"
|
|
87
|
-
},
|
|
88
|
-
"dependencies": {
|
|
89
|
-
"@getmicdrop/svelte-components": "^5.10.0",
|
|
90
|
-
"@stripe/stripe-js": "^4.0.0",
|
|
91
|
-
"carbon-icons-svelte": "^13.7.0",
|
|
92
|
-
"esbuild": "^0.27.2",
|
|
93
|
-
"js-cookie": "^3.0.5",
|
|
94
|
-
"svelte-stripe": "^1.4.0"
|
|
95
|
-
}
|
|
96
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@getmicdrop/venue-calendar",
|
|
3
|
+
"version": "3.3.7",
|
|
4
|
+
"description": "A customizable Svelte calendar component for displaying comedy events",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"types": "./dist/types/index.d.ts",
|
|
7
|
+
"main": "./dist/venue-calendar.umd.js",
|
|
8
|
+
"module": "./dist/venue-calendar.es.js",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"types": "./dist/types/index.d.ts",
|
|
12
|
+
"import": "./dist/venue-calendar.es.js",
|
|
13
|
+
"require": "./dist/venue-calendar.umd.js",
|
|
14
|
+
"default": "./dist/venue-calendar.es.js"
|
|
15
|
+
},
|
|
16
|
+
"./api": {
|
|
17
|
+
"types": "./dist/api/index.d.ts",
|
|
18
|
+
"import": "./dist/api/api.mjs",
|
|
19
|
+
"require": "./dist/api/api.cjs",
|
|
20
|
+
"default": "./dist/api/api.mjs"
|
|
21
|
+
},
|
|
22
|
+
"./theme": {
|
|
23
|
+
"import": "./src/lib/theme.js",
|
|
24
|
+
"default": "./src/lib/theme.js"
|
|
25
|
+
},
|
|
26
|
+
"./dist/venue-calendar.css": "./dist/venue-calendar.css"
|
|
27
|
+
},
|
|
28
|
+
"files": [
|
|
29
|
+
"dist",
|
|
30
|
+
"src/lib/theme.js",
|
|
31
|
+
"README.md"
|
|
32
|
+
],
|
|
33
|
+
"scripts": {
|
|
34
|
+
"dev": "vite dev",
|
|
35
|
+
"build": "vite build",
|
|
36
|
+
"build:lib": "vite build --config vite.config.lib.js",
|
|
37
|
+
"build:api": "vite build --config vite.config.api.js",
|
|
38
|
+
"build:all": "npm run build:lib && npm run build:api",
|
|
39
|
+
"preview": "vite preview",
|
|
40
|
+
"prepare": "svelte-kit sync || echo ''",
|
|
41
|
+
"prepublishOnly": "npm run build:all",
|
|
42
|
+
"check": "svelte-check --diagnostic-sources \"js,svelte\"",
|
|
43
|
+
"check:all": "svelte-check",
|
|
44
|
+
"test": "vitest run",
|
|
45
|
+
"test:watch": "vitest",
|
|
46
|
+
"test:ui": "vitest --ui"
|
|
47
|
+
},
|
|
48
|
+
"keywords": [
|
|
49
|
+
"svelte",
|
|
50
|
+
"calendar",
|
|
51
|
+
"events",
|
|
52
|
+
"comedy",
|
|
53
|
+
"venue",
|
|
54
|
+
"component",
|
|
55
|
+
"micdrop"
|
|
56
|
+
],
|
|
57
|
+
"author": "MicDrop",
|
|
58
|
+
"license": "MIT",
|
|
59
|
+
"repository": {
|
|
60
|
+
"type": "git",
|
|
61
|
+
"url": "git+https://github.com/get-micdrop/venue-calendar.git"
|
|
62
|
+
},
|
|
63
|
+
"bugs": {
|
|
64
|
+
"url": "https://github.com/get-micdrop/venue-calendar/issues"
|
|
65
|
+
},
|
|
66
|
+
"homepage": "https://github.com/get-micdrop/venue-calendar#readme",
|
|
67
|
+
"peerDependencies": {
|
|
68
|
+
"svelte": "^5.0.0"
|
|
69
|
+
},
|
|
70
|
+
"devDependencies": {
|
|
71
|
+
"@sveltejs/adapter-auto": "^6.1.0",
|
|
72
|
+
"@sveltejs/kit": "^2.49.4",
|
|
73
|
+
"@sveltejs/vite-plugin-svelte": "^6.2.4",
|
|
74
|
+
"@tailwindcss/vite": "^4.0.0",
|
|
75
|
+
"@testing-library/jest-dom": "^6.9.1",
|
|
76
|
+
"@testing-library/svelte": "^5.3.1",
|
|
77
|
+
"@vitest/coverage-v8": "^4.0.16",
|
|
78
|
+
"baseline-browser-mapping": "^2.9.11",
|
|
79
|
+
"jsdom": "^27.4.0",
|
|
80
|
+
"svelte": "^5.46.1",
|
|
81
|
+
"svelte-check": "^4.3.5",
|
|
82
|
+
"tailwindcss": "^4.0.0",
|
|
83
|
+
"typescript": "^5.9.3",
|
|
84
|
+
"vite": "^7.0.0",
|
|
85
|
+
"vite-plugin-dts": "^4.5.0",
|
|
86
|
+
"vitest": "^4.0.16"
|
|
87
|
+
},
|
|
88
|
+
"dependencies": {
|
|
89
|
+
"@getmicdrop/svelte-components": "^5.10.0",
|
|
90
|
+
"@stripe/stripe-js": "^4.0.0",
|
|
91
|
+
"carbon-icons-svelte": "^13.7.0",
|
|
92
|
+
"esbuild": "^0.27.2",
|
|
93
|
+
"js-cookie": "^3.0.5",
|
|
94
|
+
"svelte-stripe": "^1.4.0"
|
|
95
|
+
}
|
|
96
|
+
}
|
package/src/lib/theme.js
CHANGED
|
@@ -1,209 +1,209 @@
|
|
|
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-Tartiary', // Note: keeping original typo for compatibility
|
|
138
|
-
bgPrimary: '--BG-Primary',
|
|
139
|
-
bgSecondary: '--BG-Secondary',
|
|
140
|
-
bgQuaternary: '--BG-Quaternary',
|
|
141
|
-
strokePrimary: '--Stroke-Primary',
|
|
142
|
-
strokeSecondary: '--Stroke-Secondary',
|
|
143
|
-
statusOnSale: '--Status-OnSale',
|
|
144
|
-
statusSellingFast: '--Status-SellingFast',
|
|
145
|
-
statusSoldOut: '--Status-SoldOut',
|
|
146
|
-
todayBg: '--Today-BG',
|
|
147
|
-
todayText: '--Today-Text',
|
|
148
|
-
eventDotOnSale: '--EventDot-OnSale',
|
|
149
|
-
eventDotSellingFast: '--EventDot-SellingFast',
|
|
150
|
-
eventDotSoldOut: '--EventDot-SoldOut',
|
|
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
|
-
|
|
163
|
-
/**
|
|
164
|
-
* Generate CSS string for embedding
|
|
165
|
-
* @param {Object} theme - Theme object
|
|
166
|
-
* @returns {string} CSS string
|
|
167
|
-
*/
|
|
168
|
-
export function generateThemeCSS(theme) {
|
|
169
|
-
const cssVarMap = {
|
|
170
|
-
brandPrimary: '--Brand-Primary',
|
|
171
|
-
textPrimary: '--Text-Primary',
|
|
172
|
-
textSecondary: '--Text-Secondary',
|
|
173
|
-
textTertiary: '--Text-Tartiary',
|
|
174
|
-
bgPrimary: '--BG-Primary',
|
|
175
|
-
bgSecondary: '--BG-Secondary',
|
|
176
|
-
bgQuaternary: '--BG-Quaternary',
|
|
177
|
-
strokePrimary: '--Stroke-Primary',
|
|
178
|
-
strokeSecondary: '--Stroke-Secondary',
|
|
179
|
-
statusOnSale: '--Status-OnSale',
|
|
180
|
-
statusSellingFast: '--Status-SellingFast',
|
|
181
|
-
statusSoldOut: '--Status-SoldOut',
|
|
182
|
-
todayBg: '--Today-BG',
|
|
183
|
-
todayText: '--Today-Text',
|
|
184
|
-
eventDotOnSale: '--EventDot-OnSale',
|
|
185
|
-
eventDotSellingFast: '--EventDot-SellingFast',
|
|
186
|
-
eventDotSoldOut: '--EventDot-SoldOut',
|
|
187
|
-
hoverBg: '--Hover-BG',
|
|
188
|
-
focusRing: '--Focus-Ring',
|
|
189
|
-
};
|
|
190
|
-
|
|
191
|
-
const vars = Object.entries(theme)
|
|
192
|
-
.map(([key, value]) => {
|
|
193
|
-
const cssVar = cssVarMap[key];
|
|
194
|
-
return cssVar ? ` ${cssVar}: ${value};` : null;
|
|
195
|
-
})
|
|
196
|
-
.filter(Boolean)
|
|
197
|
-
.join('\n');
|
|
198
|
-
|
|
199
|
-
return `:root {\n${vars}\n}`;
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
export default {
|
|
203
|
-
themes,
|
|
204
|
-
lightTheme,
|
|
205
|
-
darkTheme,
|
|
206
|
-
highContrastTheme,
|
|
207
|
-
applyTheme,
|
|
208
|
-
generateThemeCSS,
|
|
209
|
-
};
|
|
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-Tartiary', // Note: keeping original typo for compatibility
|
|
138
|
+
bgPrimary: '--BG-Primary',
|
|
139
|
+
bgSecondary: '--BG-Secondary',
|
|
140
|
+
bgQuaternary: '--BG-Quaternary',
|
|
141
|
+
strokePrimary: '--Stroke-Primary',
|
|
142
|
+
strokeSecondary: '--Stroke-Secondary',
|
|
143
|
+
statusOnSale: '--Status-OnSale',
|
|
144
|
+
statusSellingFast: '--Status-SellingFast',
|
|
145
|
+
statusSoldOut: '--Status-SoldOut',
|
|
146
|
+
todayBg: '--Today-BG',
|
|
147
|
+
todayText: '--Today-Text',
|
|
148
|
+
eventDotOnSale: '--EventDot-OnSale',
|
|
149
|
+
eventDotSellingFast: '--EventDot-SellingFast',
|
|
150
|
+
eventDotSoldOut: '--EventDot-SoldOut',
|
|
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
|
+
|
|
163
|
+
/**
|
|
164
|
+
* Generate CSS string for embedding
|
|
165
|
+
* @param {Object} theme - Theme object
|
|
166
|
+
* @returns {string} CSS string
|
|
167
|
+
*/
|
|
168
|
+
export function generateThemeCSS(theme) {
|
|
169
|
+
const cssVarMap = {
|
|
170
|
+
brandPrimary: '--Brand-Primary',
|
|
171
|
+
textPrimary: '--Text-Primary',
|
|
172
|
+
textSecondary: '--Text-Secondary',
|
|
173
|
+
textTertiary: '--Text-Tartiary',
|
|
174
|
+
bgPrimary: '--BG-Primary',
|
|
175
|
+
bgSecondary: '--BG-Secondary',
|
|
176
|
+
bgQuaternary: '--BG-Quaternary',
|
|
177
|
+
strokePrimary: '--Stroke-Primary',
|
|
178
|
+
strokeSecondary: '--Stroke-Secondary',
|
|
179
|
+
statusOnSale: '--Status-OnSale',
|
|
180
|
+
statusSellingFast: '--Status-SellingFast',
|
|
181
|
+
statusSoldOut: '--Status-SoldOut',
|
|
182
|
+
todayBg: '--Today-BG',
|
|
183
|
+
todayText: '--Today-Text',
|
|
184
|
+
eventDotOnSale: '--EventDot-OnSale',
|
|
185
|
+
eventDotSellingFast: '--EventDot-SellingFast',
|
|
186
|
+
eventDotSoldOut: '--EventDot-SoldOut',
|
|
187
|
+
hoverBg: '--Hover-BG',
|
|
188
|
+
focusRing: '--Focus-Ring',
|
|
189
|
+
};
|
|
190
|
+
|
|
191
|
+
const vars = Object.entries(theme)
|
|
192
|
+
.map(([key, value]) => {
|
|
193
|
+
const cssVar = cssVarMap[key];
|
|
194
|
+
return cssVar ? ` ${cssVar}: ${value};` : null;
|
|
195
|
+
})
|
|
196
|
+
.filter(Boolean)
|
|
197
|
+
.join('\n');
|
|
198
|
+
|
|
199
|
+
return `:root {\n${vars}\n}`;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
export default {
|
|
203
|
+
themes,
|
|
204
|
+
lightTheme,
|
|
205
|
+
darkTheme,
|
|
206
|
+
highContrastTheme,
|
|
207
|
+
applyTheme,
|
|
208
|
+
generateThemeCSS,
|
|
209
|
+
};
|