kalendly 0.2.2 → 0.3.1

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 (17) hide show
  1. package/README.md +303 -45
  2. package/dist/core/index.d.mts +57 -10
  3. package/dist/core/index.d.ts +57 -10
  4. package/dist/core/index.js +159 -31
  5. package/dist/core/index.js.map +1 -1
  6. package/dist/core/index.mjs +147 -30
  7. package/dist/core/index.mjs.map +1 -1
  8. package/dist/index.d.mts +86 -10
  9. package/dist/index.d.ts +86 -10
  10. package/dist/index.js +525 -178
  11. package/dist/index.js.map +1 -1
  12. package/dist/index.mjs +513 -177
  13. package/dist/index.mjs.map +1 -1
  14. package/dist/index.umd.js +499 -174
  15. package/dist/index.umd.js.map +1 -1
  16. package/dist/styles/calendar.css +457 -392
  17. package/package.json +1 -1
package/dist/styles/calendar.css CHANGED
@@ -1,31 +1,142 @@
1
1
  :root {
2
- --calendar-primary-color: #fc8917;
2
+ /* Primitives — raw palette. The semantic tokens below are the API. */
3
+ --kal-white: #fff;
4
+ --kal-gray-50: #f8f9fa;
5
+ --kal-gray-100: #f3f4f6;
6
+ --kal-gray-150: #f0f0f0;
7
+ --kal-gray-200: #e8e8e8;
8
+ --kal-gray-300: #dee2e6;
9
+ --kal-gray-500: #6b7280;
10
+ --kal-gray-600: #4b5563;
11
+ --kal-slate-800: #2c3e50;
12
+ --kal-red-100: #fee2e2;
13
+ --kal-red-500: #ef4444;
14
+ --kal-red-600: #dc2626;
15
+ --kal-green-100: #dcfce7;
16
+ --kal-green-200: #bbf7d0;
17
+ --kal-green-300: #86efac;
18
+ --kal-green-600: #16a34a;
19
+ --kal-green-700: #15803d;
20
+ --kal-emerald-100: #d1fae5;
21
+ --kal-emerald-600: #059669;
22
+ --kal-amber-100: #fef3c7;
23
+ --kal-amber-600: #d97706;
24
+ --kal-yellow-400: #f7db04;
25
+ --kal-blue-50: #eff6ff;
26
+ --kal-blue-100: #dbeafe;
27
+ --kal-blue-500: #1890ff;
28
+ --kal-blue-600: #2563eb;
29
+ --kal-indigo-100: #e0e7ff;
30
+ --kal-indigo-600: #4f46e5;
31
+ --kal-orange-300: #fdb873;
32
+ --kal-orange-400: #fca045;
33
+ --kal-orange-500: #fc8917;
34
+
35
+ /* Brand */
36
+ --calendar-primary-color: var(--kal-orange-500);
3
37
  --calendar-primary-color-rgb: 252, 137, 23;
4
- --calendar-secondary-color: #fca045;
38
+ --calendar-secondary-color: var(--kal-orange-400);
5
39
  --calendar-secondary-color-rgb: 252, 160, 69;
6
- --calendar-tertiary-color: #fdb873;
7
- --calendar-text-color: #2c3e50;
8
- --calendar-border-color: #dee2e6;
9
- --calendar-today-outline: #f7db04;
10
- --calendar-event-indicator: #1890ff;
11
- --calendar-background: #fff;
40
+ --calendar-tertiary-color: var(--kal-orange-300);
41
+
42
+ /* Surfaces and text */
43
+ --calendar-text-color: var(--kal-slate-800);
44
+ --calendar-text-light: var(--kal-gray-500);
45
+ --calendar-on-accent: var(--kal-white);
46
+ --calendar-background: var(--kal-white);
47
+ --calendar-border-color: var(--kal-gray-300);
48
+ --calendar-cell-hover: var(--kal-gray-100);
49
+ --calendar-header-bg: var(--kal-gray-50);
50
+ --calendar-selected-bg: var(--kal-blue-50);
51
+ --calendar-popup-bg: var(--kal-white);
52
+ --calendar-picker-bg: var(--kal-white);
53
+ --calendar-today-outline: var(--kal-yellow-400);
54
+ --calendar-event-indicator: var(--kal-blue-500);
55
+ --calendar-input-invalid: var(--kal-red-500);
56
+ --calendar-link: var(--kal-blue-600);
57
+ --calendar-skeleton-base: var(--kal-gray-150);
58
+ --calendar-skeleton-highlight: var(--kal-gray-200);
59
+
60
+ /* Availability — traffic light */
61
+ --availability-color: transparent;
62
+ --calendar-open-bg: var(--kal-green-100);
63
+ --calendar-open-fg: var(--kal-green-600);
64
+ --calendar-conditional-bg: var(--kal-amber-100);
65
+ --calendar-conditional-fg: var(--kal-amber-600);
66
+ --calendar-blocked-bg: var(--kal-red-100);
67
+ --calendar-blocked-fg: var(--kal-red-600);
68
+ --calendar-range-bg: var(--kal-green-600);
69
+ --calendar-range-outline: var(--kal-green-700);
70
+ --calendar-in-range-bg: var(--kal-green-200);
71
+ --calendar-in-range-outline: var(--kal-green-300);
72
+
73
+ /* Badges */
74
+ --calendar-badge-bg: var(--kal-gray-100);
75
+ --calendar-badge-text: var(--kal-gray-600);
76
+ --calendar-badge-success-bg: var(--kal-emerald-100);
77
+ --calendar-badge-success-text: var(--kal-emerald-600);
78
+ --calendar-badge-info-bg: var(--kal-blue-100);
79
+ --calendar-badge-info-text: var(--kal-blue-600);
80
+ --calendar-badge-warning-bg: var(--kal-amber-100);
81
+ --calendar-badge-warning-text: var(--kal-amber-600);
82
+ --calendar-badge-danger-bg: var(--kal-red-100);
83
+ --calendar-badge-danger-text: var(--kal-red-600);
84
+ --calendar-badge-neutral-bg: var(--kal-gray-100);
85
+ --calendar-badge-neutral-text: var(--kal-gray-500);
86
+ --calendar-badge-positive-bg: var(--kal-green-100);
87
+ --calendar-badge-positive-text: var(--kal-green-600);
88
+ --calendar-badge-tentative-bg: var(--kal-indigo-100);
89
+ --calendar-badge-tentative-text: var(--kal-indigo-600);
90
+
91
+ /* Shadows */
12
92
  --calendar-card-shadow:
13
93
  0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
14
- --calendar-picker-bg: #ffffff;
15
94
  --calendar-picker-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
95
+
16
96
  --calendar-btn-disabled-opacity: 0.5;
17
- --calendar-input-invalid: #ef4444;
18
- --calendar-text-light: #6b7280;
19
- --calendar-cell-hover: #f3f4f6;
20
- --calendar-header-bg: #f8f9fa;
21
- --calendar-selected-bg: #eff6ff;
22
- --calendar-popup-bg: #ffffff;
23
- --calendar-skeleton-base: #f0f0f0;
24
- --calendar-skeleton-highlight: #e8e8e8;
25
97
 
26
- --primary-color: #fc8917;
27
- --secondary-color: #fca045;
28
- --tertiary-color: #fdb873;
98
+ --primary-color: var(--kal-orange-500);
99
+ --secondary-color: var(--kal-orange-400);
100
+ --tertiary-color: var(--kal-orange-300);
101
+
102
+ /* Type scale */
103
+ --calendar-font-3xs: 0.5rem;
104
+ --calendar-font-2xs: 0.625rem;
105
+ --calendar-font-xs: 0.75rem;
106
+ --calendar-font-sm: 0.875rem;
107
+ --calendar-font-base: 1rem;
108
+ --calendar-font-lg: 1.125rem;
109
+ --calendar-font-xl: 1.25rem;
110
+ --calendar-font-2xl: 2rem;
111
+
112
+ /* Radius scale */
113
+ --calendar-radius-sm: 4px;
114
+ --calendar-radius-md: 6px;
115
+ --calendar-radius-lg: 8px;
116
+ --calendar-radius-xl: 12px;
117
+ --calendar-radius-full: 999px;
118
+ --calendar-radius-circle: 50%;
119
+
120
+ /* Elevation */
121
+ --calendar-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
122
+ --calendar-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
123
+ --calendar-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.12);
124
+ --calendar-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
125
+ --calendar-shadow-primary: 0 2px 8px
126
+ rgba(var(--calendar-primary-color-rgb), 0.2);
127
+ /* Spacing scale — rem so padding tracks the type scale */
128
+ --calendar-space-0-5: 0.125rem;
129
+ --calendar-space-1: 0.25rem;
130
+ --calendar-space-1-5: 0.375rem;
131
+ --calendar-space-2: 0.5rem;
132
+ --calendar-space-2-5: 0.625rem;
133
+ --calendar-space-3: 0.75rem;
134
+ --calendar-space-3-5: 0.875rem;
135
+ --calendar-space-4: 1rem;
136
+ --calendar-space-5: 1.25rem;
137
+ --calendar-space-6: 1.5rem;
138
+ --calendar-space-8: 2rem;
139
+ --calendar-space-12: 3rem;
29
140
  }
30
141
 
31
142
  .kalendly-calendar {
@@ -35,27 +146,27 @@
35
146
  margin: 0;
36
147
  }
37
148
 
38
- .page--title {
149
+ .calendar-title {
39
150
  text-align: center;
40
- margin-bottom: 1rem;
151
+ margin-bottom: var(--calendar-space-4);
41
152
  }
42
153
 
43
- .page--title h1 {
44
- font-size: 2rem;
154
+ .calendar-title h1 {
155
+ font-size: var(--calendar-font-2xl);
45
156
  font-weight: 600;
46
157
  color: var(--calendar-text-color);
47
158
  margin: 0;
48
159
  }
49
160
 
50
- .calendar--content {
161
+ .calendar-content {
51
162
  font-family: Avenir, Helvetica, Arial, sans-serif;
52
163
  position: relative;
53
164
  width: 100%;
54
165
  min-height: 1px;
55
- margin-top: 3rem;
166
+ margin-top: var(--calendar-space-12);
56
167
  }
57
168
 
58
- .calendar--card {
169
+ .calendar-card {
59
170
  position: relative;
60
171
  display: flex;
61
172
  flex-direction: column;
@@ -71,122 +182,112 @@
71
182
  overflow: visible;
72
183
  }
73
184
 
74
- .calendar--card--header {
75
- padding: 1rem 1.25rem;
76
- margin-bottom: 0;
77
- background-color: var(--calendar-header-bg);
78
- border-bottom: 2px solid var(--calendar-border-color);
79
- font-size: 1.5rem;
80
- font-weight: 600;
81
- text-align: center;
82
- }
83
-
84
185
  /* New Navigation Header */
85
- .calendar--nav-header {
186
+ .calendar-nav-header {
86
187
  display: flex;
87
188
  align-items: center;
88
189
  justify-content: center;
89
- gap: 8px;
90
- padding: 12px 16px;
190
+ gap: var(--calendar-space-2);
191
+ padding: var(--calendar-space-3) var(--calendar-space-4);
91
192
  background-color: var(--calendar-header-bg);
92
193
  border-bottom: 2px solid var(--calendar-border-color);
93
194
  }
94
195
 
95
- .calendar--nav-arrow {
196
+ .calendar-nav-arrow {
96
197
  display: flex;
97
198
  align-items: center;
98
199
  justify-content: center;
99
200
  width: 36px;
100
201
  height: 36px;
101
202
  border: 1px solid var(--calendar-border-color);
102
- border-radius: 6px;
203
+ border-radius: var(--calendar-radius-md);
103
204
  background: var(--calendar-background);
104
205
  cursor: pointer;
105
- font-size: 18px;
206
+ font-size: var(--calendar-font-lg);
106
207
  color: var(--calendar-text-color);
107
208
  transition: all 0.2s ease;
108
209
  flex-shrink: 0;
109
210
  }
110
211
 
111
- .calendar--nav-arrow:hover {
212
+ .calendar-nav-arrow:hover {
112
213
  background-color: var(--calendar-primary-color);
113
214
  border-color: var(--calendar-primary-color);
114
- color: #fff;
215
+ color: var(--calendar-on-accent);
115
216
  }
116
217
 
117
- .calendar--picker-container {
218
+ .calendar-picker-container {
118
219
  position: relative;
119
220
  }
120
221
 
121
- .calendar--picker-btn {
222
+ .calendar-picker-btn {
122
223
  display: flex;
123
224
  align-items: center;
124
225
  justify-content: center;
125
- gap: 8px;
126
- padding: 8px 16px;
226
+ gap: var(--calendar-space-2);
227
+ padding: var(--calendar-space-2) var(--calendar-space-4);
127
228
  min-width: 160px;
128
229
  height: 36px;
129
230
  border: 1px solid var(--calendar-border-color);
130
- border-radius: 6px;
231
+ border-radius: var(--calendar-radius-md);
131
232
  background: var(--calendar-background);
132
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
233
+ box-shadow: var(--calendar-shadow-sm);
133
234
  cursor: pointer;
134
- font-size: 1rem;
235
+ font-size: var(--calendar-font-base);
135
236
  font-weight: 600;
136
237
  color: var(--calendar-text-color);
137
238
  transition: all 0.2s ease;
138
239
  }
139
240
 
140
- .calendar--picker-btn:hover {
241
+ .calendar-picker-btn:hover {
141
242
  border-color: var(--calendar-primary-color);
142
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
243
+ box-shadow: var(--calendar-shadow-md);
143
244
  }
144
245
 
145
- .calendar--picker-btn[aria-expanded='true'] {
246
+ .calendar-picker-btn[aria-expanded='true'] {
146
247
  border-color: var(--calendar-primary-color);
147
- box-shadow: 0 2px 8px rgba(252, 137, 23, 0.2);
248
+ box-shadow: var(--calendar-shadow-primary);
148
249
  }
149
250
 
150
- .calendar--picker-chevron {
251
+ .calendar-picker-chevron {
151
252
  display: inline-block;
152
- font-size: 10px;
253
+ font-size: var(--calendar-font-2xs);
153
254
  transition: transform 0.2s ease;
154
255
  }
155
256
 
156
- .calendar--picker-btn[aria-expanded='true'] .calendar--picker-chevron {
257
+ .calendar-picker-btn[aria-expanded='true'] .calendar-picker-chevron {
157
258
  transform: rotate(180deg);
158
259
  }
159
260
 
160
- .calendar--today-btn {
261
+ .calendar-today-btn {
161
262
  display: flex;
162
263
  align-items: center;
163
264
  justify-content: center;
164
- padding: 8px 16px;
265
+ padding: var(--calendar-space-2) var(--calendar-space-4);
165
266
  height: 36px;
166
267
  border: 1px solid var(--calendar-border-color);
167
- border-radius: 6px;
268
+ border-radius: var(--calendar-radius-md);
168
269
  background: var(--calendar-background);
169
270
  cursor: pointer;
170
- font-size: 0.875rem;
271
+ font-size: var(--calendar-font-sm);
171
272
  font-weight: 500;
172
273
  color: var(--calendar-text-color);
173
274
  transition: all 0.2s ease;
174
275
  flex-shrink: 0;
175
276
  }
176
277
 
177
- .calendar--today-btn:hover:not(:disabled) {
278
+ .calendar-today-btn:hover:not(:disabled) {
178
279
  background-color: var(--calendar-primary-color);
179
280
  border-color: var(--calendar-primary-color);
180
- color: #fff;
281
+ color: var(--calendar-on-accent);
181
282
  }
182
283
 
183
- .calendar--today-btn:disabled {
284
+ .calendar-today-btn:disabled {
184
285
  opacity: var(--calendar-btn-disabled-opacity);
185
286
  cursor: not-allowed;
186
287
  }
187
288
 
188
289
  /* Month/Year Picker Dropdown */
189
- .calendar--picker-dropdown {
290
+ .calendar-picker-dropdown {
190
291
  position: absolute;
191
292
  top: calc(100% + 8px);
192
293
  left: 50%;
@@ -194,111 +295,126 @@
194
295
  z-index: 100;
195
296
  background: var(--calendar-picker-bg);
196
297
  border: 1px solid var(--calendar-border-color);
197
- border-radius: 12px;
298
+ border-radius: var(--calendar-radius-xl);
198
299
  box-shadow: var(--calendar-picker-shadow);
199
- padding: 16px;
300
+ padding: var(--calendar-space-4);
200
301
  min-width: 280px;
201
302
  }
202
303
 
203
- .calendar--picker-year-row {
304
+ .calendar-picker-year-row {
204
305
  display: flex;
205
306
  align-items: center;
206
307
  justify-content: center;
207
- gap: 12px;
208
- margin-bottom: 16px;
209
- padding-bottom: 12px;
308
+ gap: var(--calendar-space-3);
309
+ margin-bottom: var(--calendar-space-4);
310
+ padding-bottom: var(--calendar-space-3);
210
311
  border-bottom: 1px solid var(--calendar-border-color);
211
312
  }
212
313
 
213
- .calendar--picker-year-arrow {
314
+ .calendar-picker-year-arrow {
214
315
  display: flex;
215
316
  align-items: center;
216
317
  justify-content: center;
217
318
  width: 32px;
218
319
  height: 32px;
219
320
  border: none;
220
- border-radius: 6px;
321
+ border-radius: var(--calendar-radius-md);
221
322
  background: var(--calendar-cell-hover);
222
323
  cursor: pointer;
223
- font-size: 16px;
324
+ font-size: var(--calendar-font-base);
224
325
  font-weight: 600;
225
326
  color: var(--calendar-text-color);
226
327
  transition: all 0.2s ease;
227
328
  }
228
329
 
229
- .calendar--picker-year-arrow:hover:not(:disabled) {
330
+ .calendar-picker-year-arrow:hover:not(:disabled) {
230
331
  background-color: var(--calendar-primary-color);
231
- color: #fff;
332
+ color: var(--calendar-on-accent);
232
333
  }
233
334
 
234
- .calendar--picker-year-arrow:disabled {
335
+ .calendar-picker-year-arrow:disabled {
235
336
  opacity: 0.3;
236
337
  cursor: not-allowed;
237
338
  }
238
339
 
239
- .calendar--picker-year-input {
340
+ .calendar-picker-year-input {
240
341
  width: 80px;
241
- padding: 6px 8px;
342
+ padding: var(--calendar-space-1-5) var(--calendar-space-2);
242
343
  border: 1px solid var(--calendar-border-color);
243
- border-radius: 6px;
344
+ border-radius: var(--calendar-radius-md);
244
345
  text-align: center;
245
- font-size: 1.125rem;
346
+ font-size: var(--calendar-font-lg);
246
347
  font-weight: 600;
247
348
  color: var(--calendar-text-color);
248
349
  background: var(--calendar-background);
249
350
  transition: border-color 0.2s ease;
250
351
  }
251
352
 
252
- .calendar--picker-year-input:focus {
353
+ .calendar-picker-year-input:focus {
253
354
  outline: none;
254
355
  border-color: var(--calendar-primary-color);
255
356
  }
256
357
 
257
- .calendar--picker-year-input.invalid {
358
+ .calendar-picker-year-input.invalid {
258
359
  border-color: var(--calendar-input-invalid);
259
360
  background-color: rgba(239, 68, 68, 0.1);
260
361
  }
261
362
 
262
- .calendar--picker-months {
363
+ .calendar-picker-months {
263
364
  display: grid;
264
365
  grid-template-columns: repeat(3, 1fr);
265
- gap: 8px;
366
+ gap: var(--calendar-space-2);
266
367
  }
267
368
 
268
- .calendar--picker-month {
269
- padding: 10px 8px;
369
+ .calendar-picker-month {
370
+ padding: var(--calendar-space-2-5) var(--calendar-space-2);
270
371
  border: 1px solid transparent;
271
- border-radius: 6px;
372
+ border-radius: var(--calendar-radius-md);
272
373
  background: var(--calendar-cell-hover);
273
374
  cursor: pointer;
274
- font-size: 0.875rem;
375
+ font-size: var(--calendar-font-sm);
275
376
  font-weight: 500;
276
377
  color: var(--calendar-text-color);
277
378
  transition: all 0.15s ease;
278
379
  }
279
380
 
280
- .calendar--picker-month:hover {
381
+ .calendar-picker-month:hover {
281
382
  background-color: var(--calendar-tertiary-color);
282
383
  }
283
384
 
284
- .calendar--picker-month.selected {
385
+ .calendar-picker-month.selected {
285
386
  background-color: var(--calendar-primary-color);
286
- color: #fff;
387
+ color: var(--calendar-on-accent);
287
388
  font-weight: 600;
288
389
  }
289
390
 
290
- .calendar--picker-month.current-month {
391
+ .calendar-picker-month.current-month {
291
392
  border-color: var(--calendar-primary-color);
292
393
  }
293
394
 
294
395
  /* Picker overlay for click-outside */
295
- .calendar--picker-overlay {
296
- position: fixed;
297
- inset: 0;
298
- z-index: 50;
396
+ .calendar-panes {
397
+ display: flex;
398
+ flex-wrap: wrap;
399
+ gap: var(--calendar-space-4);
400
+ align-items: flex-start;
401
+ justify-content: center;
402
+ }
403
+
404
+ .calendar-pane {
405
+ flex: 1 1 280px;
406
+ min-width: 0;
299
407
  }
300
408
 
301
- .calendar--table {
409
+ .calendar-pane-caption {
410
+ padding: var(--calendar-space-2) 0;
411
+ font-size: var(--calendar-font-sm);
412
+ font-weight: 600;
413
+ text-align: center;
414
+ color: var(--calendar-text-color);
415
+ }
416
+
417
+ .calendar-table {
302
418
  width: 100%;
303
419
  max-width: 100%;
304
420
  margin-bottom: 0;
@@ -306,45 +422,52 @@
306
422
  border-collapse: collapse;
307
423
  }
308
424
 
309
- .calendar--table--bordered {
425
+ .calendar-table-bordered {
310
426
  border: none;
311
427
  }
312
428
 
313
- .calendar--table td,
314
- .calendar--table th {
315
- padding: 1rem;
429
+ .calendar-table td,
430
+ .calendar-table th {
431
+ padding: var(--calendar-space-4);
316
432
  vertical-align: middle;
317
433
  border: 1px solid var(--calendar-border-color);
318
434
  text-align: center;
319
- font-size: 1rem;
435
+ font-size: var(--calendar-font-base);
320
436
  }
321
437
 
322
- .calendar--table td {
438
+ .calendar-table td {
323
439
  height: 60px;
324
440
  position: relative;
325
441
  cursor: pointer;
326
442
  transition: background-color 0.2s ease;
327
443
  }
328
444
 
329
- .calendar--table td:hover {
445
+ .calendar-table td[data-clickable]:hover {
330
446
  background-color: rgba(var(--calendar-primary-color-rgb), 0.1);
331
447
  }
332
448
 
333
- .calendar--table td.other-month {
449
+ .calendar-table td.calendar-cell-selected {
450
+ background-color: var(--calendar-selected-bg);
451
+ outline: 2px solid var(--calendar-primary-color);
452
+ outline-offset: -2px;
453
+ font-weight: 700;
454
+ }
455
+
456
+ .calendar-table td.calendar-cell-other-month {
334
457
  color: var(--calendar-text-light);
335
458
  background-color: var(--calendar-header-bg);
336
459
  }
337
460
 
338
- .calendar--table td.other-month:hover {
461
+ .calendar-table td.calendar-cell-other-month:hover {
339
462
  background-color: var(--calendar-cell-hover);
340
463
  }
341
464
 
342
- .calendar--table td.has--event {
465
+ .calendar-table td.calendar-cell-has-event {
343
466
  background-color: rgba(var(--calendar-secondary-color-rgb), 0.3);
344
467
  position: relative;
345
468
  }
346
469
 
347
- .calendar--table td.has--event::after {
470
+ .calendar-table td.calendar-cell-has-event::after {
348
471
  content: '';
349
472
  position: absolute;
350
473
  bottom: 2px;
@@ -353,170 +476,126 @@
353
476
  width: 4px;
354
477
  height: 4px;
355
478
  background-color: var(--calendar-event-indicator);
356
- border-radius: 50%;
479
+ border-radius: var(--calendar-radius-circle);
357
480
  }
358
481
 
359
482
  /* Time grid (availability-mode="time") */
360
483
  .time-grid {
361
484
  display: flex;
362
485
  flex-direction: column;
363
- gap: 4px;
486
+ gap: var(--calendar-space-1);
364
487
  }
365
488
 
366
- .time-grid__slot {
489
+ .time-grid-slot {
367
490
  display: flex;
368
491
  align-items: center;
369
492
  justify-content: space-between;
370
- padding: 8px 12px;
371
- border-radius: 6px;
372
- font-size: 13px;
493
+ padding: var(--calendar-space-2) var(--calendar-space-3);
494
+ border-radius: var(--calendar-radius-md);
495
+ font-size: var(--calendar-font-sm);
373
496
  }
374
497
 
375
- .time-grid__label {
498
+ .time-grid-label {
376
499
  font-weight: 600;
377
500
  color: inherit;
378
501
  min-width: 48px;
379
502
  }
380
503
 
381
- .time-grid__status {
504
+ .time-grid-status {
382
505
  font-weight: 500;
383
506
  }
384
507
 
385
- .time-grid__slot--booked {
386
- background-color: #fee2e2;
387
- color: #dc2626;
388
- }
389
-
390
- .time-grid__slot--free {
391
- background-color: #dcfce7;
392
- color: #16a34a;
508
+ .time-grid-selectable .time-grid-slot-open {
509
+ cursor: pointer;
393
510
  }
394
511
 
395
- /* Availability mode */
396
- .calendar--table td.availability--booked {
397
- background-color: #fee2e2;
512
+ .time-grid-selectable .time-grid-slot-blocked {
398
513
  cursor: not-allowed;
399
514
  }
400
515
 
401
- .calendar--table td.availability--booked::after {
402
- background-color: #dc2626;
516
+ .time-grid-slot-blocked {
517
+ background-color: var(--calendar-blocked-bg);
518
+ color: var(--calendar-blocked-fg);
403
519
  }
404
520
 
405
- .calendar--table td.availability--free {
406
- background-color: #dcfce7;
521
+ .time-grid-slot-open {
522
+ background-color: var(--calendar-open-bg);
523
+ color: var(--calendar-open-fg);
407
524
  }
408
525
 
409
- .calendar--table td.availability--range-start,
410
- .calendar--table td.availability--range-end {
411
- background-color: #16a34a;
412
- color: #fff;
413
- font-weight: 700;
414
- outline: 2px solid #15803d;
415
- outline-offset: -2px;
526
+ /* Availability mode */
527
+ .calendar-table td.availability-open {
528
+ background-color: var(--calendar-open-bg);
416
529
  }
417
530
 
418
- .calendar--table td.availability--in-range {
419
- background-color: #bbf7d0;
420
- outline: 1px solid #86efac;
421
- outline-offset: -1px;
531
+ .calendar-table td.availability-open::after {
532
+ background-color: var(--calendar-open-fg);
422
533
  }
423
534
 
424
- .time-grid__slot--range-start,
425
- .time-grid__slot--range-end {
426
- background-color: #16a34a;
427
- color: #fff;
428
- font-weight: 700;
535
+ .calendar-table td.availability-conditional {
536
+ background-color: var(--calendar-conditional-bg);
429
537
  }
430
538
 
431
- .time-grid__slot--in-range {
432
- background-color: #bbf7d0;
433
- color: #15803d;
539
+ .calendar-table td.availability-conditional::after {
540
+ background-color: var(--calendar-conditional-fg);
434
541
  }
435
542
 
436
- .calendar--table thead th {
437
- vertical-align: bottom;
438
- border-bottom: 2px solid var(--calendar-border-color);
439
- font-weight: 600;
440
- background-color: var(--calendar-header-bg);
441
- padding: 0.75rem;
543
+ .calendar-table td.availability-blocked {
544
+ background-color: var(--calendar-blocked-bg);
442
545
  }
443
546
 
444
- .schedule--current--exam {
445
- outline: 3px solid var(--calendar-today-outline);
446
- outline-offset: -3px;
447
- font-weight: bold;
547
+ .calendar-table td.availability-blocked::after {
548
+ background-color: var(--calendar-blocked-fg);
448
549
  }
449
550
 
450
- .calendar--navigation--buttons {
451
- display: flex;
452
- flex-flow: row wrap;
453
- align-items: center;
454
- justify-content: space-evenly;
455
- padding: 1rem 0;
551
+ /* Caller-defined buckets paint from an inline custom property */
552
+ .calendar-table td.availability-status {
553
+ background-color: var(--availability-color);
456
554
  }
457
555
 
458
- .calendar--navigation--btn {
459
- width: 45%;
460
- display: inline-block;
461
- font-weight: 400;
462
- text-align: center;
463
- white-space: nowrap;
464
- vertical-align: middle;
465
- -webkit-user-select: none;
466
- -moz-user-select: none;
467
- -ms-user-select: none;
468
- user-select: none;
469
- border: 1px solid transparent;
470
- padding: 0.375rem 0.75rem;
471
- font-size: 1rem;
472
- line-height: 1.5;
473
- border-radius: 0.25rem;
474
- transition:
475
- color 0.15s ease-in-out,
476
- background-color 0.15s ease-in-out,
477
- border-color 0.15s ease-in-out,
478
- box-shadow 0.15s ease-in-out;
479
- cursor: pointer;
556
+ .calendar-table td.availability-unselectable {
557
+ cursor: not-allowed;
480
558
  }
481
559
 
482
- .calendar--navigation--btn:hover {
483
- background-color: var(--calendar-primary-color);
484
- color: #000000;
560
+ .calendar-table td.availability-range-start,
561
+ .calendar-table td.availability-range-end {
562
+ background-color: var(--calendar-range-bg);
563
+ color: var(--calendar-on-accent);
564
+ font-weight: 700;
565
+ outline: 2px solid var(--calendar-range-outline);
566
+ outline-offset: -2px;
485
567
  }
486
568
 
487
- .schedule--outline--primary {
488
- color: var(--calendar-primary-color);
489
- background-color: transparent;
490
- background-image: none;
491
- box-shadow: var(--calendar-card-shadow);
569
+ .calendar-table td.availability-in-range {
570
+ background-color: var(--calendar-in-range-bg);
571
+ outline: 1px solid var(--calendar-in-range-outline);
572
+ outline-offset: -1px;
492
573
  }
493
574
 
494
- .calendar--form--jump {
495
- display: flex;
496
- flex-flow: row wrap;
497
- align-items: center;
498
- justify-content: center;
499
- padding-bottom: 1rem;
500
- gap: 0.5rem;
575
+ .time-grid-slot-range-start,
576
+ .time-grid-slot-range-end {
577
+ background-color: var(--calendar-range-bg);
578
+ color: var(--calendar-on-accent);
579
+ font-weight: 700;
501
580
  }
502
581
 
503
- .calendar--lead {
504
- font-size: 1.25rem;
505
- font-weight: 300;
582
+ .time-grid-slot-in-range {
583
+ background-color: var(--calendar-in-range-bg);
584
+ color: var(--calendar-range-outline);
506
585
  }
507
586
 
508
- .calendar--form--jump--item {
509
- margin-right: 0.5rem;
510
- margin-left: 0.5rem;
587
+ .calendar-table thead th {
588
+ vertical-align: bottom;
589
+ border-bottom: 2px solid var(--calendar-border-color);
590
+ font-weight: 600;
591
+ background-color: var(--calendar-header-bg);
592
+ padding: var(--calendar-space-3);
511
593
  }
512
594
 
513
- .calendar--form--jump--item select {
514
- padding: 0.25rem 0.5rem;
515
- border: 1px solid var(--calendar-border-color);
516
- border-radius: 0.25rem;
517
- background-color: var(--calendar-background);
518
- color: var(--calendar-text-color);
519
- font-size: 1rem;
595
+ .calendar-cell-today {
596
+ outline: 3px solid var(--calendar-today-outline);
597
+ outline-offset: -3px;
598
+ font-weight: bold;
520
599
  }
521
600
 
522
601
  /* RESPONSIVE POPUP DESIGN */
@@ -526,8 +605,8 @@
526
605
  background-color: var(--calendar-popup-bg);
527
606
  width: 500px;
528
607
  max-width: 90vw;
529
- border-radius: 8px;
530
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
608
+ border-radius: var(--calendar-radius-lg);
609
+ box-shadow: var(--calendar-shadow-lg);
531
610
  overflow: hidden;
532
611
  left: 50%;
533
612
  top: 50%;
@@ -543,7 +622,7 @@
543
622
  var(--calendar-primary-color),
544
623
  var(--calendar-secondary-color)
545
624
  );
546
- padding: 15px 20px;
625
+ padding: var(--calendar-space-4) var(--calendar-space-5);
547
626
  display: flex;
548
627
  justify-content: space-between;
549
628
  align-items: center;
@@ -552,7 +631,7 @@
552
631
 
553
632
  .popup-header h2 {
554
633
  color: white;
555
- font-size: 18px;
634
+ font-size: var(--calendar-font-lg);
556
635
  font-weight: 600;
557
636
  margin: 0;
558
637
  }
@@ -562,9 +641,9 @@
562
641
  height: 32px;
563
642
  background: rgba(255, 255, 255, 0.2);
564
643
  border: none;
565
- border-radius: 50%;
644
+ border-radius: var(--calendar-radius-circle);
566
645
  color: white;
567
- font-size: 20px;
646
+ font-size: var(--calendar-font-xl);
568
647
  cursor: pointer;
569
648
  display: flex;
570
649
  align-items: center;
@@ -579,16 +658,16 @@
579
658
 
580
659
  .scroll-hint {
581
660
  background: rgba(var(--calendar-primary-color-rgb), 0.1);
582
- padding: 10px 20px;
661
+ padding: var(--calendar-space-2-5) var(--calendar-space-5);
583
662
  text-align: center;
584
663
  color: var(--calendar-primary-color);
585
- font-size: 13px;
664
+ font-size: var(--calendar-font-sm);
586
665
  font-weight: 500;
587
666
  flex-shrink: 0;
588
667
  }
589
668
 
590
669
  .events-container {
591
- padding: 15px 20px;
670
+ padding: var(--calendar-space-4) var(--calendar-space-5);
592
671
  overflow-y: auto;
593
672
  flex: 1;
594
673
  }
@@ -603,7 +682,7 @@
603
682
 
604
683
  .events-container::-webkit-scrollbar-thumb {
605
684
  background: var(--calendar-text-light);
606
- border-radius: 3px;
685
+ border-radius: var(--calendar-radius-sm);
607
686
  }
608
687
 
609
688
  .events-container::-webkit-scrollbar-thumb:hover {
@@ -614,10 +693,10 @@
614
693
  background: var(--calendar-popup-bg);
615
694
  border: 1px solid var(--calendar-border-color);
616
695
  border-left: 4px solid var(--calendar-primary-color);
617
- border-radius: 6px;
618
- padding: 14px;
619
- margin-bottom: 12px;
620
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
696
+ border-radius: var(--calendar-radius-md);
697
+ padding: var(--calendar-space-3-5);
698
+ margin-bottom: var(--calendar-space-3);
699
+ box-shadow: var(--calendar-shadow-xs);
621
700
  }
622
701
 
623
702
  .event-card:last-child {
@@ -628,12 +707,12 @@
628
707
  display: flex;
629
708
  justify-content: space-between;
630
709
  align-items: flex-start;
631
- margin-bottom: 10px;
632
- gap: 10px;
710
+ margin-bottom: var(--calendar-space-2-5);
711
+ gap: var(--calendar-space-2-5);
633
712
  }
634
713
 
635
714
  .event-title {
636
- font-size: 16px;
715
+ font-size: var(--calendar-font-base);
637
716
  font-weight: 600;
638
717
  color: var(--calendar-text-color);
639
718
  flex: 1;
@@ -642,86 +721,95 @@
642
721
 
643
722
  .event-badges {
644
723
  display: flex;
645
- gap: 6px;
724
+ gap: var(--calendar-space-1-5);
646
725
  flex-shrink: 0;
647
726
  flex-wrap: wrap;
648
727
  }
649
728
 
650
729
  .badge {
651
- padding: 3px 8px;
652
- border-radius: 10px;
653
- font-size: 10px;
730
+ padding: var(--calendar-space-1) var(--calendar-space-2);
731
+ border-radius: var(--calendar-radius-full);
732
+ font-size: var(--calendar-font-2xs);
654
733
  font-weight: 600;
655
734
  text-transform: uppercase;
656
735
  letter-spacing: 0.3px;
657
736
  white-space: nowrap;
658
737
  }
659
738
 
739
+ /* Fallback for caller-defined values. Same specificity as the rules below,
740
+ so this must stay above them. */
741
+ .badge.category,
742
+ .badge.priority,
743
+ .badge.status {
744
+ background: var(--calendar-badge-bg);
745
+ color: var(--calendar-badge-text);
746
+ }
747
+
660
748
  .badge.category-meeting {
661
- background: #d1fae5;
662
- color: #059669;
749
+ background: var(--calendar-badge-success-bg);
750
+ color: var(--calendar-badge-success-text);
663
751
  }
664
752
 
665
753
  .badge.category-work {
666
- background: #dbeafe;
667
- color: #2563eb;
754
+ background: var(--calendar-badge-info-bg);
755
+ color: var(--calendar-badge-info-text);
668
756
  }
669
757
 
670
758
  .badge.category-personal {
671
- background: #fef3c7;
672
- color: #d97706;
759
+ background: var(--calendar-badge-warning-bg);
760
+ color: var(--calendar-badge-warning-text);
673
761
  }
674
762
 
675
763
  .badge.category-deadline {
676
- background: #fee2e2;
677
- color: #dc2626;
764
+ background: var(--calendar-badge-danger-bg);
765
+ color: var(--calendar-badge-danger-text);
678
766
  }
679
767
 
680
768
  .badge.category-appointment {
681
- background: #fef3c7;
682
- color: #d97706;
769
+ background: var(--calendar-badge-warning-bg);
770
+ color: var(--calendar-badge-warning-text);
683
771
  }
684
772
 
685
773
  .badge.category-other {
686
- background: #f3f4f6;
687
- color: #6b7280;
774
+ background: var(--calendar-badge-neutral-bg);
775
+ color: var(--calendar-badge-neutral-text);
688
776
  }
689
777
 
690
778
  .badge.priority-high {
691
- background: #fee2e2;
692
- color: #dc2626;
779
+ background: var(--calendar-badge-danger-bg);
780
+ color: var(--calendar-badge-danger-text);
693
781
  }
694
782
 
695
783
  .badge.priority-medium {
696
- background: #fef3c7;
697
- color: #d97706;
784
+ background: var(--calendar-badge-warning-bg);
785
+ color: var(--calendar-badge-warning-text);
698
786
  }
699
787
 
700
788
  .badge.priority-low {
701
- background: #dcfce7;
702
- color: #16a34a;
789
+ background: var(--calendar-badge-positive-bg);
790
+ color: var(--calendar-badge-positive-text);
703
791
  }
704
792
 
705
793
  .badge.status-completed {
706
- background: #d1fae5;
707
- color: #059669;
794
+ background: var(--calendar-badge-success-bg);
795
+ color: var(--calendar-badge-success-text);
708
796
  }
709
797
 
710
798
  .badge.status-cancelled {
711
- background: #fee2e2;
712
- color: #dc2626;
799
+ background: var(--calendar-badge-danger-bg);
800
+ color: var(--calendar-badge-danger-text);
713
801
  }
714
802
 
715
803
  .badge.status-tentative {
716
- background: #e0e7ff;
717
- color: #4f46e5;
804
+ background: var(--calendar-badge-tentative-bg);
805
+ color: var(--calendar-badge-tentative-text);
718
806
  }
719
807
 
720
808
  .event-time {
721
809
  display: flex;
722
- gap: 8px;
723
- margin-bottom: 6px;
724
- font-size: 13px;
810
+ gap: var(--calendar-space-2);
811
+ margin-bottom: var(--calendar-space-1-5);
812
+ font-size: var(--calendar-font-sm);
725
813
  }
726
814
 
727
815
  .event-time-label {
@@ -741,23 +829,23 @@
741
829
  .event-description {
742
830
  display: block;
743
831
  color: var(--calendar-text-light);
744
- font-size: 13px;
832
+ font-size: var(--calendar-font-sm);
745
833
  line-height: 1.6;
746
- margin-top: 10px;
747
- margin-bottom: 10px;
748
- padding: 8px 12px;
834
+ margin-top: var(--calendar-space-2-5);
835
+ margin-bottom: var(--calendar-space-2-5);
836
+ padding: var(--calendar-space-2) var(--calendar-space-3);
749
837
  background: var(--calendar-header-bg);
750
838
  border-left: 2px solid var(--calendar-border-color);
751
- border-radius: 4px;
839
+ border-radius: var(--calendar-radius-sm);
752
840
  word-break: break-word;
753
841
  text-align: left;
754
842
  }
755
843
 
756
844
  .event-link {
757
- color: #2563eb;
845
+ color: var(--calendar-link);
758
846
  text-decoration: none;
759
847
  font-weight: 500;
760
- font-size: 13px;
848
+ font-size: var(--calendar-font-sm);
761
849
  }
762
850
 
763
851
  .event-link:hover {
@@ -767,97 +855,79 @@
767
855
  .event-tags {
768
856
  display: flex;
769
857
  flex-wrap: wrap;
770
- gap: 6px;
771
- margin-top: 8px;
858
+ gap: var(--calendar-space-1-5);
859
+ margin-top: var(--calendar-space-2);
772
860
  }
773
861
 
774
862
  .event-tag {
775
863
  display: inline-block;
776
- padding: 3px 10px;
864
+ padding: var(--calendar-space-1) var(--calendar-space-2-5);
777
865
  background-color: rgba(var(--calendar-primary-color-rgb), 0.1);
778
866
  color: var(--calendar-primary-color);
779
- border-radius: 12px;
780
- font-size: 11px;
867
+ border-radius: var(--calendar-radius-xl);
868
+ font-size: var(--calendar-font-xs);
781
869
  font-weight: 500;
782
870
  }
783
871
 
784
872
  .no-events-message {
785
873
  background: var(--calendar-popup-bg);
786
- padding: 30px 20px;
874
+ padding: var(--calendar-space-8) var(--calendar-space-5);
787
875
  text-align: center;
788
876
  color: var(--calendar-text-light);
789
- font-size: 14px;
877
+ font-size: var(--calendar-font-sm);
790
878
  }
791
879
 
792
880
  /* Responsive design */
793
881
  @media (min-width: 576px) {
794
- .calendar--content {
795
- padding-right: 15px;
796
- padding-left: 15px;
797
- }
798
-
799
- .calendar--form--jump label {
800
- display: flex;
801
- align-items: center;
802
- justify-content: center;
803
- margin-bottom: 0;
882
+ .calendar-content {
883
+ padding-right: var(--calendar-space-4);
884
+ padding-left: var(--calendar-space-4);
804
885
  }
805
886
  }
806
887
 
807
888
  @media (max-width: 768px) {
808
- .calendar--content {
809
- margin-top: 1rem;
810
- padding: 0 0.5rem;
889
+ .calendar-panes {
890
+ flex-direction: column;
891
+ }
892
+
893
+ .calendar-content {
894
+ margin-top: var(--calendar-space-4);
895
+ padding: 0 var(--calendar-space-2);
811
896
  }
812
897
 
813
- .calendar--table td,
814
- .calendar--table th {
815
- padding: 0.5rem 0.25rem;
816
- font-size: 0.9rem;
898
+ .calendar-table td,
899
+ .calendar-table th {
900
+ padding: var(--calendar-space-2) var(--calendar-space-1);
901
+ font-size: var(--calendar-font-sm);
817
902
  }
818
903
 
819
- .calendar--nav-header {
820
- gap: 6px;
821
- padding: 10px 12px;
904
+ .calendar-nav-header {
905
+ gap: var(--calendar-space-1-5);
906
+ padding: var(--calendar-space-2-5) var(--calendar-space-3);
822
907
  }
823
908
 
824
- .calendar--nav-arrow {
909
+ .calendar-nav-arrow {
825
910
  width: 32px;
826
911
  height: 32px;
827
- font-size: 16px;
912
+ font-size: var(--calendar-font-base);
828
913
  }
829
914
 
830
- .calendar--picker-btn {
831
- padding: 6px 12px;
915
+ .calendar-picker-btn {
916
+ padding: var(--calendar-space-1-5) var(--calendar-space-3);
832
917
  min-width: 140px;
833
918
  height: 32px;
834
- font-size: 0.875rem;
919
+ font-size: var(--calendar-font-sm);
835
920
  }
836
921
 
837
- .calendar--today-btn {
838
- padding: 6px 12px;
922
+ .calendar-today-btn {
923
+ padding: var(--calendar-space-1-5) var(--calendar-space-3);
839
924
  height: 32px;
840
- font-size: 0.75rem;
925
+ font-size: var(--calendar-font-xs);
841
926
  }
842
927
 
843
- .calendar--picker-dropdown {
928
+ .calendar-picker-dropdown {
844
929
  min-width: 260px;
845
- padding: 12px;
846
- }
847
-
848
- .calendar--navigation--buttons {
849
- flex-direction: column;
850
- gap: 0.5rem;
851
- }
852
-
853
- .calendar--navigation--btn {
854
- width: 100%;
855
- max-width: none;
856
- }
857
-
858
- .calendar--form--jump {
859
- flex-direction: column;
860
- gap: 0.5rem;
930
+ padding: var(--calendar-space-3);
861
931
  }
862
932
 
863
933
  .date-popup {
@@ -866,39 +936,39 @@
866
936
  }
867
937
 
868
938
  .popup-header h2 {
869
- font-size: 16px;
939
+ font-size: var(--calendar-font-base);
870
940
  }
871
941
 
872
942
  .popup-close {
873
943
  width: 28px;
874
944
  height: 28px;
875
- font-size: 18px;
945
+ font-size: var(--calendar-font-lg);
876
946
  }
877
947
 
878
948
  .scroll-hint {
879
- font-size: 12px;
880
- padding: 8px 15px;
949
+ font-size: var(--calendar-font-xs);
950
+ padding: var(--calendar-space-2) var(--calendar-space-4);
881
951
  }
882
952
 
883
953
  .events-container {
884
- padding: 12px 15px;
954
+ padding: var(--calendar-space-3) var(--calendar-space-4);
885
955
  }
886
956
 
887
957
  .event-card {
888
- padding: 12px;
958
+ padding: var(--calendar-space-3);
889
959
  }
890
960
 
891
961
  .event-title {
892
- font-size: 15px;
962
+ font-size: var(--calendar-font-base);
893
963
  }
894
964
 
895
965
  .badge {
896
- font-size: 9px;
897
- padding: 2px 6px;
966
+ font-size: var(--calendar-font-2xs);
967
+ padding: var(--calendar-space-0-5) var(--calendar-space-1-5);
898
968
  }
899
969
 
900
970
  .event-time {
901
- font-size: 12px;
971
+ font-size: var(--calendar-font-xs);
902
972
  }
903
973
 
904
974
  .event-time-label {
@@ -906,78 +976,73 @@
906
976
  }
907
977
 
908
978
  .event-description {
909
- font-size: 12px;
979
+ font-size: var(--calendar-font-xs);
910
980
  }
911
981
  }
912
982
 
913
983
  @media (max-width: 480px) {
914
- .calendar--table td {
984
+ .calendar-table td {
915
985
  height: 40px;
916
- padding: 0.25rem;
917
- }
918
-
919
- .calendar--table td,
920
- .calendar--table th {
921
- font-size: 0.8rem;
986
+ padding: var(--calendar-space-1);
922
987
  }
923
988
 
924
- .calendar--card--header {
925
- font-size: 1rem;
926
- padding: 0.5rem 1rem;
989
+ .calendar-table td,
990
+ .calendar-table th {
991
+ font-size: var(--calendar-font-xs);
927
992
  }
928
993
 
929
- .calendar--nav-header {
930
- gap: 4px;
931
- padding: 8px;
994
+ .calendar-nav-header {
995
+ gap: var(--calendar-space-1);
996
+ padding: var(--calendar-space-2);
932
997
  }
933
998
 
934
- .calendar--nav-arrow {
999
+ .calendar-nav-arrow {
935
1000
  width: 28px;
936
1001
  height: 28px;
937
- font-size: 14px;
1002
+ font-size: var(--calendar-font-sm);
938
1003
  }
939
1004
 
940
- .calendar--picker-btn {
941
- padding: 4px 8px;
1005
+ .calendar-picker-btn {
1006
+ padding: var(--calendar-space-1) var(--calendar-space-2);
942
1007
  min-width: 110px;
943
1008
  height: 28px;
944
- font-size: 0.75rem;
945
- gap: 4px;
1009
+ font-size: var(--calendar-font-xs);
1010
+ gap: var(--calendar-space-1);
946
1011
  }
947
1012
 
948
- .calendar--picker-chevron {
949
- font-size: 8px;
1013
+ .calendar-picker-chevron {
1014
+ font-size: var(--calendar-font-3xs);
950
1015
  }
951
1016
 
952
- .calendar--today-btn {
953
- padding: 4px 8px;
1017
+ .calendar-today-btn {
1018
+ padding: var(--calendar-space-1) var(--calendar-space-2);
954
1019
  height: 28px;
955
- font-size: 0.7rem;
1020
+ font-size: var(--calendar-font-xs);
956
1021
  }
957
1022
 
958
- .calendar--picker-dropdown {
1023
+ .calendar-picker-dropdown {
959
1024
  min-width: 240px;
960
- padding: 10px;
1025
+ padding: var(--calendar-space-2-5);
961
1026
  }
962
1027
 
963
- .calendar--picker-year-row {
964
- gap: 8px;
965
- margin-bottom: 12px;
966
- padding-bottom: 10px;
1028
+ .calendar-picker-year-row {
1029
+ gap: var(--calendar-space-2);
1030
+ margin-bottom: var(--calendar-space-3);
1031
+ padding-bottom: var(--calendar-space-2-5);
967
1032
  }
968
1033
 
969
- .calendar--picker-year-input {
1034
+ .calendar-picker-year-input {
970
1035
  width: 70px;
971
- font-size: 1rem;
1036
+ font-size: var(--calendar-font-base);
972
1037
  }
973
1038
 
974
- .calendar--picker-months {
975
- gap: 6px;
1039
+ .calendar-picker-months {
1040
+ gap: var(--calendar-space-1-5);
976
1041
  }
977
1042
 
978
- .calendar--picker-month {
979
- padding: 8px 6px;
980
- font-size: 0.75rem;
1043
+ .calendar-picker-month {
1044
+ padding: var(--calendar-space-2) var(--calendar-space-1-5);
1045
+ font-size: var(--calendar-font-xs);
981
1046
  }
982
1047
 
983
1048
  .date-popup {
@@ -987,36 +1052,36 @@
987
1052
  }
988
1053
 
989
1054
  .popup-header {
990
- padding: 12px 15px;
1055
+ padding: var(--calendar-space-3) var(--calendar-space-4);
991
1056
  }
992
1057
 
993
1058
  .popup-header h2 {
994
- font-size: 15px;
1059
+ font-size: var(--calendar-font-base);
995
1060
  }
996
1061
 
997
1062
  .popup-close {
998
1063
  width: 26px;
999
1064
  height: 26px;
1000
- font-size: 16px;
1065
+ font-size: var(--calendar-font-base);
1001
1066
  }
1002
1067
 
1003
1068
  .scroll-hint {
1004
- font-size: 11px;
1005
- padding: 8px 12px;
1069
+ font-size: var(--calendar-font-xs);
1070
+ padding: var(--calendar-space-2) var(--calendar-space-3);
1006
1071
  }
1007
1072
 
1008
1073
  .events-container {
1009
- padding: 10px 12px;
1074
+ padding: var(--calendar-space-2-5) var(--calendar-space-3);
1010
1075
  }
1011
1076
 
1012
1077
  .event-card {
1013
- padding: 10px;
1014
- margin-bottom: 10px;
1078
+ padding: var(--calendar-space-2-5);
1079
+ margin-bottom: var(--calendar-space-2-5);
1015
1080
  }
1016
1081
 
1017
1082
  .event-header {
1018
1083
  flex-direction: column;
1019
- gap: 6px;
1084
+ gap: var(--calendar-space-1-5);
1020
1085
  }
1021
1086
 
1022
1087
  .event-badges {
@@ -1024,17 +1089,17 @@
1024
1089
  }
1025
1090
 
1026
1091
  .event-title {
1027
- font-size: 14px;
1092
+ font-size: var(--calendar-font-sm);
1028
1093
  }
1029
1094
 
1030
1095
  .badge {
1031
- font-size: 9px;
1096
+ font-size: var(--calendar-font-2xs);
1032
1097
  }
1033
1098
 
1034
1099
  .event-time {
1035
1100
  flex-direction: column;
1036
- gap: 2px;
1037
- font-size: 11px;
1101
+ gap: var(--calendar-space-0-5);
1102
+ font-size: var(--calendar-font-xs);
1038
1103
  }
1039
1104
 
1040
1105
  .event-time-label {
@@ -1042,12 +1107,12 @@
1042
1107
  }
1043
1108
 
1044
1109
  .event-description {
1045
- font-size: 11px;
1110
+ font-size: var(--calendar-font-xs);
1046
1111
  }
1047
1112
 
1048
1113
  .event-tag {
1049
- font-size: 10px;
1050
- padding: 2px 8px;
1114
+ font-size: var(--calendar-font-2xs);
1115
+ padding: var(--calendar-space-0-5) var(--calendar-space-2);
1051
1116
  }
1052
1117
  }
1053
1118
 
@@ -1062,7 +1127,7 @@
1062
1127
  }
1063
1128
  }
1064
1129
 
1065
- .calendar--table td.calendar--skeleton {
1130
+ .calendar-table td.calendar-skeleton {
1066
1131
  background: linear-gradient(
1067
1132
  90deg,
1068
1133
  var(--calendar-skeleton-base) 25%,
@@ -1071,6 +1136,6 @@
1071
1136
  );
1072
1137
  background-size: 200% 100%;
1073
1138
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
1074
- border-radius: 4px;
1139
+ border-radius: var(--calendar-radius-sm);
1075
1140
  pointer-events: none;
1076
1141
  }