kalendly 0.3.2 → 0.3.3

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.
@@ -55,6 +55,17 @@
55
55
  --calendar-today-outline: var(--kal-yellow-400);
56
56
  --calendar-event-indicator: var(--kal-blue-500);
57
57
  --calendar-input-invalid: var(--kal-red-500);
58
+ --calendar-input-invalid-rgb: 239, 68, 68;
59
+ --calendar-input-invalid-bg: rgba(var(--calendar-input-invalid-rgb), 0.1);
60
+ --calendar-nav-arrow-fg: var(--calendar-text-color);
61
+ --calendar-nav-arrow-bg: var(--calendar-background);
62
+ --calendar-nav-arrow-border: var(--calendar-border-color);
63
+ --calendar-nav-arrow-hover-fg: var(--calendar-on-accent);
64
+ --calendar-nav-arrow-hover-bg: var(--calendar-primary-color);
65
+ --calendar-popup-header-fg: var(--kal-white);
66
+ --calendar-popup-close-fg: var(--kal-white);
67
+ --calendar-popup-close-bg: rgba(255, 255, 255, 0.2);
68
+ --calendar-popup-close-hover-bg: rgba(255, 255, 255, 0.3);
58
69
  --calendar-link: var(--kal-blue-600);
59
70
  --calendar-skeleton-base: var(--kal-gray-150);
60
71
  --calendar-skeleton-highlight: var(--kal-gray-200);
@@ -201,20 +212,20 @@
201
212
  justify-content: center;
202
213
  width: 36px;
203
214
  height: 36px;
204
- border: 1px solid var(--calendar-border-color);
215
+ border: 1px solid var(--calendar-nav-arrow-border);
205
216
  border-radius: var(--calendar-radius-md);
206
- background: var(--calendar-background);
217
+ background: var(--calendar-nav-arrow-bg);
207
218
  cursor: pointer;
208
219
  font-size: var(--calendar-font-lg);
209
- color: var(--calendar-text-color);
220
+ color: var(--calendar-nav-arrow-fg);
210
221
  transition: all 0.2s ease;
211
222
  flex-shrink: 0;
212
223
  }
213
224
 
214
225
  .calendar-nav-arrow:hover {
215
- background-color: var(--calendar-primary-color);
216
- border-color: var(--calendar-primary-color);
217
- color: var(--calendar-on-accent);
226
+ background-color: var(--calendar-nav-arrow-hover-bg);
227
+ border-color: var(--calendar-nav-arrow-hover-bg);
228
+ color: var(--calendar-nav-arrow-hover-fg);
218
229
  }
219
230
 
220
231
  .calendar-picker-container {
@@ -359,7 +370,7 @@
359
370
 
360
371
  .calendar-picker-year-input.invalid {
361
372
  border-color: var(--calendar-input-invalid);
362
- background-color: rgba(239, 68, 68, 0.1);
373
+ background-color: var(--calendar-input-invalid-bg);
363
374
  }
364
375
 
365
376
  .calendar-picker-months {
@@ -647,7 +658,7 @@
647
658
  }
648
659
 
649
660
  .popup-header h2 {
650
- color: white;
661
+ color: var(--calendar-popup-header-fg);
651
662
  font-size: var(--calendar-font-lg);
652
663
  font-weight: 600;
653
664
  margin: 0;
@@ -656,10 +667,10 @@
656
667
  .popup-close {
657
668
  width: 32px;
658
669
  height: 32px;
659
- background: rgba(255, 255, 255, 0.2);
670
+ background: var(--calendar-popup-close-bg);
660
671
  border: none;
661
672
  border-radius: var(--calendar-radius-circle);
662
- color: white;
673
+ color: var(--calendar-popup-close-fg);
663
674
  font-size: var(--calendar-font-xl);
664
675
  cursor: pointer;
665
676
  display: flex;
@@ -670,7 +681,7 @@
670
681
  }
671
682
 
672
683
  .popup-close:hover {
673
- background: rgba(255, 255, 255, 0.3);
684
+ background: var(--calendar-popup-close-hover-bg);
674
685
  }
675
686
 
676
687
  .scroll-hint {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kalendly",
3
- "version": "0.3.2",
3
+ "version": "0.3.3",
4
4
  "description": "A universal calendar web component — works in React, Vue, Angular, Svelte, Solid.js, and plain HTML with no framework dependency",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",