@getmicdrop/venue-calendar 2.0.0 → 3.2.0

package/README.md

@@ -4,13 +4,16 @@ A beautiful, customizable calendar component built with Svelte for displaying co
 
 ## Features
 
-✨ **Three View Modes**: List, Gallery, and Calendar views  
-🎨 **Beautiful UI**: Modern, responsive design built with Tailwind CSS  
-📱 **Mobile-Friendly**: Fully responsive across all devices  
-🔌 **Easy Integration**: Works with React, Vue, vanilla JS, and more  
-🌐 **CDN Ready**: Use directly in HTML via JSDelivr  
-⚡ **Auto-Mount**: Automatically finds and mounts to designated containers  
+✨ **Three View Modes**: List, Gallery, and Calendar views
+🎨 **Beautiful UI**: Modern, responsive design built with Tailwind CSS
+📱 **Mobile-Friendly**: Swipe gestures, touch-optimized, responsive design
+🔌 **Easy Integration**: Works with React, Vue, vanilla JS, and more
+🌐 **CDN Ready**: Use directly in HTML via JSDelivr
+⚡ **Auto-Mount**: Automatically finds and mounts to designated containers
 🎯 **Customizable**: Configure views, navigation, and more
+🌙 **Dark Mode**: Built-in light, dark, and high-contrast themes
+♿ **Accessible**: ARIA labels, keyboard navigation, screen reader support
+🎫 **Event Status**: Visual badges for "On Sale", "Selling Fast", "Sold Out"
 
 ## Installation
 
@@ -419,6 +422,116 @@ The calendar comes with built-in styles using Tailwind CSS. If you need to custo
 }
 ```
 
+## Theming
+
+The calendar supports comprehensive theming via CSS custom properties and JavaScript utilities.
+
+### Using CSS Custom Properties
+
+Override the default theme by setting CSS custom properties:
+
+```css
+/* Custom brand colors */
+.micdrop-calendar-container {
+  --Brand-Primary: 270 76% 60%;  /* Purple */
+  --Text-Primary: 0 0% 10%;
+  --BG-Primary: 0 0% 100%;
+}
+
+/* Dark mode */
+.dark .micdrop-calendar-container,
+[data-theme="dark"] .micdrop-calendar-container {
+  --Brand-Primary: 270 76% 70%;
+  --Text-Primary: 0 0% 95%;
+  --BG-Primary: 0 0% 10%;
+}
+```
+
+### Available CSS Variables
+
+| Variable | Description | Default (Light) |
+|----------|-------------|-----------------|
+| `--Brand-Primary` | Primary brand color | `217 91% 60%` (Blue) |
+| `--Text-Primary` | Main text color | `0 0% 0%` |
+| `--Text-Secondary` | Secondary text | `0 0% 40%` |
+| `--BG-Primary` | Main background | `0 0% 100%` |
+| `--BG-Secondary` | Secondary background | `0 0% 98%` |
+| `--Stroke-Primary` | Border colors | `0 0% 80%` |
+| `--Status-OnSale` | "On Sale" badge | `217 91% 60%` |
+| `--Status-SellingFast` | "Selling Fast" badge | `38 92% 50%` |
+| `--Status-SoldOut` | "Sold Out" badge | `0 84% 60%` |
+| `--Today-BG` | Today's date background | `217 91% 97%` |
+| `--Focus-Ring` | Keyboard focus ring | `217 91% 60%` |
+
+### Using JavaScript Theme Utilities
+
+```javascript
+import { applyTheme, themes, generateThemeCSS } from '@getmicdrop/venue-calendar';
+
+// Apply a preset theme
+applyTheme(themes.dark);
+
+// Apply to a specific container
+const container = document.querySelector('.micdrop-calendar-container');
+applyTheme(themes.dark, container);
+
+// Create a custom theme
+const myTheme = {
+  brandPrimary: '270 76% 60%',  // Purple
+  textPrimary: '0 0% 10%',
+  bgPrimary: '0 0% 100%',
+  statusOnSale: '142 71% 45%',  // Green for on sale
+};
+applyTheme(myTheme);
+
+// Generate CSS string for embedding
+const cssString = generateThemeCSS(myTheme);
+console.log(cssString);
+// Output: :root { --Brand-Primary: 270 76% 60%; ... }
+```
+
+### Preset Themes
+
+Three themes are included out of the box:
+
+```javascript
+import { themes } from '@getmicdrop/venue-calendar';
+
+// Light theme (default)
+applyTheme(themes.light);
+
+// Dark theme
+applyTheme(themes.dark);
+
+// High contrast (accessibility)
+applyTheme(themes.highContrast);
+```
+
+### Automatic Dark Mode
+
+The calendar automatically respects the user's system preference:
+
+```css
+/* Automatically applied when user prefers dark mode */
+@media (prefers-color-scheme: dark) {
+  /* Dark theme variables are applied */
+}
+```
+
+You can also manually toggle dark mode:
+
+```html
+<!-- Add 'dark' class to enable dark theme -->
+<div class="dark">
+  <div class="micdrop-calendar-container" data-venue-id="123"></div>
+</div>
+
+<!-- Or use data-theme attribute -->
+<div data-theme="dark">
+  <div class="micdrop-calendar-container" data-venue-id="123"></div>
+</div>
+```
+
 ## Browser Support
 
 - Chrome (latest)