kalendly 0.2.2 → 0.3.0

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 +202 -29
  2. package/dist/core/index.d.mts +48 -10
  3. package/dist/core/index.d.ts +48 -10
  4. package/dist/core/index.js +60 -26
  5. package/dist/core/index.js.map +1 -1
  6. package/dist/core/index.mjs +56 -25
  7. package/dist/core/index.mjs.map +1 -1
  8. package/dist/index.d.mts +74 -10
  9. package/dist/index.d.ts +74 -10
  10. package/dist/index.js +373 -162
  11. package/dist/index.js.map +1 -1
  12. package/dist/index.mjs +369 -161
  13. package/dist/index.mjs.map +1 -1
  14. package/dist/index.umd.js +363 -158
  15. package/dist/index.umd.js.map +1 -1
  16. package/dist/styles/calendar.css +445 -395
  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;
407
+ }
408
+
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);
299
415
  }
300
416
 
301
- .calendar--table {
417
+ .calendar-table {
302
418
  width: 100%;
303
419
  max-width: 100%;
304
420
  margin-bottom: 0;
@@ -306,45 +422,45 @@
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: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-other-month {
334
450
  color: var(--calendar-text-light);
335
451
  background-color: var(--calendar-header-bg);
336
452
  }
337
453
 
338
- .calendar--table td.other-month:hover {
454
+ .calendar-table td.calendar-cell-other-month:hover {
339
455
  background-color: var(--calendar-cell-hover);
340
456
  }
341
457
 
342
- .calendar--table td.has--event {
458
+ .calendar-table td.calendar-cell-has-event {
343
459
  background-color: rgba(var(--calendar-secondary-color-rgb), 0.3);
344
460
  position: relative;
345
461
  }
346
462
 
347
- .calendar--table td.has--event::after {
463
+ .calendar-table td.calendar-cell-has-event::after {
348
464
  content: '';
349
465
  position: absolute;
350
466
  bottom: 2px;
@@ -353,172 +469,120 @@
353
469
  width: 4px;
354
470
  height: 4px;
355
471
  background-color: var(--calendar-event-indicator);
356
- border-radius: 50%;
472
+ border-radius: var(--calendar-radius-circle);
357
473
  }
358
474
 
359
475
  /* Time grid (availability-mode="time") */
360
476
  .time-grid {
361
477
  display: flex;
362
478
  flex-direction: column;
363
- gap: 4px;
479
+ gap: var(--calendar-space-1);
364
480
  }
365
481
 
366
- .time-grid__slot {
482
+ .time-grid-slot {
367
483
  display: flex;
368
484
  align-items: center;
369
485
  justify-content: space-between;
370
- padding: 8px 12px;
371
- border-radius: 6px;
372
- font-size: 13px;
486
+ padding: var(--calendar-space-2) var(--calendar-space-3);
487
+ border-radius: var(--calendar-radius-md);
488
+ font-size: var(--calendar-font-sm);
373
489
  }
374
490
 
375
- .time-grid__label {
491
+ .time-grid-label {
376
492
  font-weight: 600;
377
493
  color: inherit;
378
494
  min-width: 48px;
379
495
  }
380
496
 
381
- .time-grid__status {
497
+ .time-grid-status {
382
498
  font-weight: 500;
383
499
  }
384
500
 
385
- .time-grid__slot--booked {
386
- background-color: #fee2e2;
387
- color: #dc2626;
501
+ .time-grid-slot-blocked {
502
+ background-color: var(--calendar-blocked-bg);
503
+ color: var(--calendar-blocked-fg);
388
504
  }
389
505
 
390
- .time-grid__slot--free {
391
- background-color: #dcfce7;
392
- color: #16a34a;
506
+ .time-grid-slot-open {
507
+ background-color: var(--calendar-open-bg);
508
+ color: var(--calendar-open-fg);
393
509
  }
394
510
 
395
511
  /* Availability mode */
396
- .calendar--table td.availability--booked {
397
- background-color: #fee2e2;
398
- cursor: not-allowed;
512
+ .calendar-table td.availability-open {
513
+ background-color: var(--calendar-open-bg);
399
514
  }
400
515
 
401
- .calendar--table td.availability--booked::after {
402
- background-color: #dc2626;
516
+ .calendar-table td.availability-open::after {
517
+ background-color: var(--calendar-open-fg);
403
518
  }
404
519
 
405
- .calendar--table td.availability--free {
406
- background-color: #dcfce7;
520
+ .calendar-table td.availability-conditional {
521
+ background-color: var(--calendar-conditional-bg);
407
522
  }
408
523
 
409
- .calendar--table td.availability--range-start,
410
- .calendar--table td.availability--range-end {
411
- background-color: #16a34a;
412
- color: #fff;
524
+ .calendar-table td.availability-conditional::after {
525
+ background-color: var(--calendar-conditional-fg);
526
+ }
527
+
528
+ .calendar-table td.availability-blocked {
529
+ background-color: var(--calendar-blocked-bg);
530
+ }
531
+
532
+ .calendar-table td.availability-blocked::after {
533
+ background-color: var(--calendar-blocked-fg);
534
+ }
535
+
536
+ /* Caller-defined buckets paint from an inline custom property */
537
+ .calendar-table td.availability-status {
538
+ background-color: var(--availability-color);
539
+ }
540
+
541
+ .calendar-table td.availability-unselectable {
542
+ cursor: not-allowed;
543
+ }
544
+
545
+ .calendar-table td.availability-range-start,
546
+ .calendar-table td.availability-range-end {
547
+ background-color: var(--calendar-range-bg);
548
+ color: var(--calendar-on-accent);
413
549
  font-weight: 700;
414
- outline: 2px solid #15803d;
550
+ outline: 2px solid var(--calendar-range-outline);
415
551
  outline-offset: -2px;
416
552
  }
417
553
 
418
- .calendar--table td.availability--in-range {
419
- background-color: #bbf7d0;
420
- outline: 1px solid #86efac;
554
+ .calendar-table td.availability-in-range {
555
+ background-color: var(--calendar-in-range-bg);
556
+ outline: 1px solid var(--calendar-in-range-outline);
421
557
  outline-offset: -1px;
422
558
  }
423
559
 
424
- .time-grid__slot--range-start,
425
- .time-grid__slot--range-end {
426
- background-color: #16a34a;
427
- color: #fff;
560
+ .time-grid-slot-range-start,
561
+ .time-grid-slot-range-end {
562
+ background-color: var(--calendar-range-bg);
563
+ color: var(--calendar-on-accent);
428
564
  font-weight: 700;
429
565
  }
430
566
 
431
- .time-grid__slot--in-range {
432
- background-color: #bbf7d0;
433
- color: #15803d;
567
+ .time-grid-slot-in-range {
568
+ background-color: var(--calendar-in-range-bg);
569
+ color: var(--calendar-range-outline);
434
570
  }
435
571
 
436
- .calendar--table thead th {
572
+ .calendar-table thead th {
437
573
  vertical-align: bottom;
438
574
  border-bottom: 2px solid var(--calendar-border-color);
439
575
  font-weight: 600;
440
576
  background-color: var(--calendar-header-bg);
441
- padding: 0.75rem;
577
+ padding: var(--calendar-space-3);
442
578
  }
443
579
 
444
- .schedule--current--exam {
580
+ .calendar-cell-today {
445
581
  outline: 3px solid var(--calendar-today-outline);
446
582
  outline-offset: -3px;
447
583
  font-weight: bold;
448
584
  }
449
585
 
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;
456
- }
457
-
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;
480
- }
481
-
482
- .calendar--navigation--btn:hover {
483
- background-color: var(--calendar-primary-color);
484
- color: #000000;
485
- }
486
-
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);
492
- }
493
-
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;
501
- }
502
-
503
- .calendar--lead {
504
- font-size: 1.25rem;
505
- font-weight: 300;
506
- }
507
-
508
- .calendar--form--jump--item {
509
- margin-right: 0.5rem;
510
- margin-left: 0.5rem;
511
- }
512
-
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;
520
- }
521
-
522
586
  /* RESPONSIVE POPUP DESIGN */
523
587
  .date-popup {
524
588
  position: absolute;
@@ -526,8 +590,8 @@
526
590
  background-color: var(--calendar-popup-bg);
527
591
  width: 500px;
528
592
  max-width: 90vw;
529
- border-radius: 8px;
530
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
593
+ border-radius: var(--calendar-radius-lg);
594
+ box-shadow: var(--calendar-shadow-lg);
531
595
  overflow: hidden;
532
596
  left: 50%;
533
597
  top: 50%;
@@ -543,7 +607,7 @@
543
607
  var(--calendar-primary-color),
544
608
  var(--calendar-secondary-color)
545
609
  );
546
- padding: 15px 20px;
610
+ padding: var(--calendar-space-4) var(--calendar-space-5);
547
611
  display: flex;
548
612
  justify-content: space-between;
549
613
  align-items: center;
@@ -552,7 +616,7 @@
552
616
 
553
617
  .popup-header h2 {
554
618
  color: white;
555
- font-size: 18px;
619
+ font-size: var(--calendar-font-lg);
556
620
  font-weight: 600;
557
621
  margin: 0;
558
622
  }
@@ -562,9 +626,9 @@
562
626
  height: 32px;
563
627
  background: rgba(255, 255, 255, 0.2);
564
628
  border: none;
565
- border-radius: 50%;
629
+ border-radius: var(--calendar-radius-circle);
566
630
  color: white;
567
- font-size: 20px;
631
+ font-size: var(--calendar-font-xl);
568
632
  cursor: pointer;
569
633
  display: flex;
570
634
  align-items: center;
@@ -579,16 +643,16 @@
579
643
 
580
644
  .scroll-hint {
581
645
  background: rgba(var(--calendar-primary-color-rgb), 0.1);
582
- padding: 10px 20px;
646
+ padding: var(--calendar-space-2-5) var(--calendar-space-5);
583
647
  text-align: center;
584
648
  color: var(--calendar-primary-color);
585
- font-size: 13px;
649
+ font-size: var(--calendar-font-sm);
586
650
  font-weight: 500;
587
651
  flex-shrink: 0;
588
652
  }
589
653
 
590
654
  .events-container {
591
- padding: 15px 20px;
655
+ padding: var(--calendar-space-4) var(--calendar-space-5);
592
656
  overflow-y: auto;
593
657
  flex: 1;
594
658
  }
@@ -603,7 +667,7 @@
603
667
 
604
668
  .events-container::-webkit-scrollbar-thumb {
605
669
  background: var(--calendar-text-light);
606
- border-radius: 3px;
670
+ border-radius: var(--calendar-radius-sm);
607
671
  }
608
672
 
609
673
  .events-container::-webkit-scrollbar-thumb:hover {
@@ -614,10 +678,10 @@
614
678
  background: var(--calendar-popup-bg);
615
679
  border: 1px solid var(--calendar-border-color);
616
680
  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);
681
+ border-radius: var(--calendar-radius-md);
682
+ padding: var(--calendar-space-3-5);
683
+ margin-bottom: var(--calendar-space-3);
684
+ box-shadow: var(--calendar-shadow-xs);
621
685
  }
622
686
 
623
687
  .event-card:last-child {
@@ -628,12 +692,12 @@
628
692
  display: flex;
629
693
  justify-content: space-between;
630
694
  align-items: flex-start;
631
- margin-bottom: 10px;
632
- gap: 10px;
695
+ margin-bottom: var(--calendar-space-2-5);
696
+ gap: var(--calendar-space-2-5);
633
697
  }
634
698
 
635
699
  .event-title {
636
- font-size: 16px;
700
+ font-size: var(--calendar-font-base);
637
701
  font-weight: 600;
638
702
  color: var(--calendar-text-color);
639
703
  flex: 1;
@@ -642,86 +706,95 @@
642
706
 
643
707
  .event-badges {
644
708
  display: flex;
645
- gap: 6px;
709
+ gap: var(--calendar-space-1-5);
646
710
  flex-shrink: 0;
647
711
  flex-wrap: wrap;
648
712
  }
649
713
 
650
714
  .badge {
651
- padding: 3px 8px;
652
- border-radius: 10px;
653
- font-size: 10px;
715
+ padding: var(--calendar-space-1) var(--calendar-space-2);
716
+ border-radius: var(--calendar-radius-full);
717
+ font-size: var(--calendar-font-2xs);
654
718
  font-weight: 600;
655
719
  text-transform: uppercase;
656
720
  letter-spacing: 0.3px;
657
721
  white-space: nowrap;
658
722
  }
659
723
 
724
+ /* Fallback for caller-defined values. Same specificity as the rules below,
725
+ so this must stay above them. */
726
+ .badge.category,
727
+ .badge.priority,
728
+ .badge.status {
729
+ background: var(--calendar-badge-bg);
730
+ color: var(--calendar-badge-text);
731
+ }
732
+
660
733
  .badge.category-meeting {
661
- background: #d1fae5;
662
- color: #059669;
734
+ background: var(--calendar-badge-success-bg);
735
+ color: var(--calendar-badge-success-text);
663
736
  }
664
737
 
665
738
  .badge.category-work {
666
- background: #dbeafe;
667
- color: #2563eb;
739
+ background: var(--calendar-badge-info-bg);
740
+ color: var(--calendar-badge-info-text);
668
741
  }
669
742
 
670
743
  .badge.category-personal {
671
- background: #fef3c7;
672
- color: #d97706;
744
+ background: var(--calendar-badge-warning-bg);
745
+ color: var(--calendar-badge-warning-text);
673
746
  }
674
747
 
675
748
  .badge.category-deadline {
676
- background: #fee2e2;
677
- color: #dc2626;
749
+ background: var(--calendar-badge-danger-bg);
750
+ color: var(--calendar-badge-danger-text);
678
751
  }
679
752
 
680
753
  .badge.category-appointment {
681
- background: #fef3c7;
682
- color: #d97706;
754
+ background: var(--calendar-badge-warning-bg);
755
+ color: var(--calendar-badge-warning-text);
683
756
  }
684
757
 
685
758
  .badge.category-other {
686
- background: #f3f4f6;
687
- color: #6b7280;
759
+ background: var(--calendar-badge-neutral-bg);
760
+ color: var(--calendar-badge-neutral-text);
688
761
  }
689
762
 
690
763
  .badge.priority-high {
691
- background: #fee2e2;
692
- color: #dc2626;
764
+ background: var(--calendar-badge-danger-bg);
765
+ color: var(--calendar-badge-danger-text);
693
766
  }
694
767
 
695
768
  .badge.priority-medium {
696
- background: #fef3c7;
697
- color: #d97706;
769
+ background: var(--calendar-badge-warning-bg);
770
+ color: var(--calendar-badge-warning-text);
698
771
  }
699
772
 
700
773
  .badge.priority-low {
701
- background: #dcfce7;
702
- color: #16a34a;
774
+ background: var(--calendar-badge-positive-bg);
775
+ color: var(--calendar-badge-positive-text);
703
776
  }
704
777
 
705
778
  .badge.status-completed {
706
- background: #d1fae5;
707
- color: #059669;
779
+ background: var(--calendar-badge-success-bg);
780
+ color: var(--calendar-badge-success-text);
708
781
  }
709
782
 
710
783
  .badge.status-cancelled {
711
- background: #fee2e2;
712
- color: #dc2626;
784
+ background: var(--calendar-badge-danger-bg);
785
+ color: var(--calendar-badge-danger-text);
713
786
  }
714
787
 
715
788
  .badge.status-tentative {
716
- background: #e0e7ff;
717
- color: #4f46e5;
789
+ background: var(--calendar-badge-tentative-bg);
790
+ color: var(--calendar-badge-tentative-text);
718
791
  }
719
792
 
720
793
  .event-time {
721
794
  display: flex;
722
- gap: 8px;
723
- margin-bottom: 6px;
724
- font-size: 13px;
795
+ gap: var(--calendar-space-2);
796
+ margin-bottom: var(--calendar-space-1-5);
797
+ font-size: var(--calendar-font-sm);
725
798
  }
726
799
 
727
800
  .event-time-label {
@@ -741,23 +814,23 @@
741
814
  .event-description {
742
815
  display: block;
743
816
  color: var(--calendar-text-light);
744
- font-size: 13px;
817
+ font-size: var(--calendar-font-sm);
745
818
  line-height: 1.6;
746
- margin-top: 10px;
747
- margin-bottom: 10px;
748
- padding: 8px 12px;
819
+ margin-top: var(--calendar-space-2-5);
820
+ margin-bottom: var(--calendar-space-2-5);
821
+ padding: var(--calendar-space-2) var(--calendar-space-3);
749
822
  background: var(--calendar-header-bg);
750
823
  border-left: 2px solid var(--calendar-border-color);
751
- border-radius: 4px;
824
+ border-radius: var(--calendar-radius-sm);
752
825
  word-break: break-word;
753
826
  text-align: left;
754
827
  }
755
828
 
756
829
  .event-link {
757
- color: #2563eb;
830
+ color: var(--calendar-link);
758
831
  text-decoration: none;
759
832
  font-weight: 500;
760
- font-size: 13px;
833
+ font-size: var(--calendar-font-sm);
761
834
  }
762
835
 
763
836
  .event-link:hover {
@@ -767,97 +840,79 @@
767
840
  .event-tags {
768
841
  display: flex;
769
842
  flex-wrap: wrap;
770
- gap: 6px;
771
- margin-top: 8px;
843
+ gap: var(--calendar-space-1-5);
844
+ margin-top: var(--calendar-space-2);
772
845
  }
773
846
 
774
847
  .event-tag {
775
848
  display: inline-block;
776
- padding: 3px 10px;
849
+ padding: var(--calendar-space-1) var(--calendar-space-2-5);
777
850
  background-color: rgba(var(--calendar-primary-color-rgb), 0.1);
778
851
  color: var(--calendar-primary-color);
779
- border-radius: 12px;
780
- font-size: 11px;
852
+ border-radius: var(--calendar-radius-xl);
853
+ font-size: var(--calendar-font-xs);
781
854
  font-weight: 500;
782
855
  }
783
856
 
784
857
  .no-events-message {
785
858
  background: var(--calendar-popup-bg);
786
- padding: 30px 20px;
859
+ padding: var(--calendar-space-8) var(--calendar-space-5);
787
860
  text-align: center;
788
861
  color: var(--calendar-text-light);
789
- font-size: 14px;
862
+ font-size: var(--calendar-font-sm);
790
863
  }
791
864
 
792
865
  /* Responsive design */
793
866
  @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;
867
+ .calendar-content {
868
+ padding-right: var(--calendar-space-4);
869
+ padding-left: var(--calendar-space-4);
804
870
  }
805
871
  }
806
872
 
807
873
  @media (max-width: 768px) {
808
- .calendar--content {
809
- margin-top: 1rem;
810
- padding: 0 0.5rem;
874
+ .calendar-panes {
875
+ flex-direction: column;
876
+ }
877
+
878
+ .calendar-content {
879
+ margin-top: var(--calendar-space-4);
880
+ padding: 0 var(--calendar-space-2);
811
881
  }
812
882
 
813
- .calendar--table td,
814
- .calendar--table th {
815
- padding: 0.5rem 0.25rem;
816
- font-size: 0.9rem;
883
+ .calendar-table td,
884
+ .calendar-table th {
885
+ padding: var(--calendar-space-2) var(--calendar-space-1);
886
+ font-size: var(--calendar-font-sm);
817
887
  }
818
888
 
819
- .calendar--nav-header {
820
- gap: 6px;
821
- padding: 10px 12px;
889
+ .calendar-nav-header {
890
+ gap: var(--calendar-space-1-5);
891
+ padding: var(--calendar-space-2-5) var(--calendar-space-3);
822
892
  }
823
893
 
824
- .calendar--nav-arrow {
894
+ .calendar-nav-arrow {
825
895
  width: 32px;
826
896
  height: 32px;
827
- font-size: 16px;
897
+ font-size: var(--calendar-font-base);
828
898
  }
829
899
 
830
- .calendar--picker-btn {
831
- padding: 6px 12px;
900
+ .calendar-picker-btn {
901
+ padding: var(--calendar-space-1-5) var(--calendar-space-3);
832
902
  min-width: 140px;
833
903
  height: 32px;
834
- font-size: 0.875rem;
904
+ font-size: var(--calendar-font-sm);
835
905
  }
836
906
 
837
- .calendar--today-btn {
838
- padding: 6px 12px;
907
+ .calendar-today-btn {
908
+ padding: var(--calendar-space-1-5) var(--calendar-space-3);
839
909
  height: 32px;
840
- font-size: 0.75rem;
910
+ font-size: var(--calendar-font-xs);
841
911
  }
842
912
 
843
- .calendar--picker-dropdown {
913
+ .calendar-picker-dropdown {
844
914
  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;
915
+ padding: var(--calendar-space-3);
861
916
  }
862
917
 
863
918
  .date-popup {
@@ -866,39 +921,39 @@
866
921
  }
867
922
 
868
923
  .popup-header h2 {
869
- font-size: 16px;
924
+ font-size: var(--calendar-font-base);
870
925
  }
871
926
 
872
927
  .popup-close {
873
928
  width: 28px;
874
929
  height: 28px;
875
- font-size: 18px;
930
+ font-size: var(--calendar-font-lg);
876
931
  }
877
932
 
878
933
  .scroll-hint {
879
- font-size: 12px;
880
- padding: 8px 15px;
934
+ font-size: var(--calendar-font-xs);
935
+ padding: var(--calendar-space-2) var(--calendar-space-4);
881
936
  }
882
937
 
883
938
  .events-container {
884
- padding: 12px 15px;
939
+ padding: var(--calendar-space-3) var(--calendar-space-4);
885
940
  }
886
941
 
887
942
  .event-card {
888
- padding: 12px;
943
+ padding: var(--calendar-space-3);
889
944
  }
890
945
 
891
946
  .event-title {
892
- font-size: 15px;
947
+ font-size: var(--calendar-font-base);
893
948
  }
894
949
 
895
950
  .badge {
896
- font-size: 9px;
897
- padding: 2px 6px;
951
+ font-size: var(--calendar-font-2xs);
952
+ padding: var(--calendar-space-0-5) var(--calendar-space-1-5);
898
953
  }
899
954
 
900
955
  .event-time {
901
- font-size: 12px;
956
+ font-size: var(--calendar-font-xs);
902
957
  }
903
958
 
904
959
  .event-time-label {
@@ -906,78 +961,73 @@
906
961
  }
907
962
 
908
963
  .event-description {
909
- font-size: 12px;
964
+ font-size: var(--calendar-font-xs);
910
965
  }
911
966
  }
912
967
 
913
968
  @media (max-width: 480px) {
914
- .calendar--table td {
969
+ .calendar-table td {
915
970
  height: 40px;
916
- padding: 0.25rem;
917
- }
918
-
919
- .calendar--table td,
920
- .calendar--table th {
921
- font-size: 0.8rem;
971
+ padding: var(--calendar-space-1);
922
972
  }
923
973
 
924
- .calendar--card--header {
925
- font-size: 1rem;
926
- padding: 0.5rem 1rem;
974
+ .calendar-table td,
975
+ .calendar-table th {
976
+ font-size: var(--calendar-font-xs);
927
977
  }
928
978
 
929
- .calendar--nav-header {
930
- gap: 4px;
931
- padding: 8px;
979
+ .calendar-nav-header {
980
+ gap: var(--calendar-space-1);
981
+ padding: var(--calendar-space-2);
932
982
  }
933
983
 
934
- .calendar--nav-arrow {
984
+ .calendar-nav-arrow {
935
985
  width: 28px;
936
986
  height: 28px;
937
- font-size: 14px;
987
+ font-size: var(--calendar-font-sm);
938
988
  }
939
989
 
940
- .calendar--picker-btn {
941
- padding: 4px 8px;
990
+ .calendar-picker-btn {
991
+ padding: var(--calendar-space-1) var(--calendar-space-2);
942
992
  min-width: 110px;
943
993
  height: 28px;
944
- font-size: 0.75rem;
945
- gap: 4px;
994
+ font-size: var(--calendar-font-xs);
995
+ gap: var(--calendar-space-1);
946
996
  }
947
997
 
948
- .calendar--picker-chevron {
949
- font-size: 8px;
998
+ .calendar-picker-chevron {
999
+ font-size: var(--calendar-font-3xs);
950
1000
  }
951
1001
 
952
- .calendar--today-btn {
953
- padding: 4px 8px;
1002
+ .calendar-today-btn {
1003
+ padding: var(--calendar-space-1) var(--calendar-space-2);
954
1004
  height: 28px;
955
- font-size: 0.7rem;
1005
+ font-size: var(--calendar-font-xs);
956
1006
  }
957
1007
 
958
- .calendar--picker-dropdown {
1008
+ .calendar-picker-dropdown {
959
1009
  min-width: 240px;
960
- padding: 10px;
1010
+ padding: var(--calendar-space-2-5);
961
1011
  }
962
1012
 
963
- .calendar--picker-year-row {
964
- gap: 8px;
965
- margin-bottom: 12px;
966
- padding-bottom: 10px;
1013
+ .calendar-picker-year-row {
1014
+ gap: var(--calendar-space-2);
1015
+ margin-bottom: var(--calendar-space-3);
1016
+ padding-bottom: var(--calendar-space-2-5);
967
1017
  }
968
1018
 
969
- .calendar--picker-year-input {
1019
+ .calendar-picker-year-input {
970
1020
  width: 70px;
971
- font-size: 1rem;
1021
+ font-size: var(--calendar-font-base);
972
1022
  }
973
1023
 
974
- .calendar--picker-months {
975
- gap: 6px;
1024
+ .calendar-picker-months {
1025
+ gap: var(--calendar-space-1-5);
976
1026
  }
977
1027
 
978
- .calendar--picker-month {
979
- padding: 8px 6px;
980
- font-size: 0.75rem;
1028
+ .calendar-picker-month {
1029
+ padding: var(--calendar-space-2) var(--calendar-space-1-5);
1030
+ font-size: var(--calendar-font-xs);
981
1031
  }
982
1032
 
983
1033
  .date-popup {
@@ -987,36 +1037,36 @@
987
1037
  }
988
1038
 
989
1039
  .popup-header {
990
- padding: 12px 15px;
1040
+ padding: var(--calendar-space-3) var(--calendar-space-4);
991
1041
  }
992
1042
 
993
1043
  .popup-header h2 {
994
- font-size: 15px;
1044
+ font-size: var(--calendar-font-base);
995
1045
  }
996
1046
 
997
1047
  .popup-close {
998
1048
  width: 26px;
999
1049
  height: 26px;
1000
- font-size: 16px;
1050
+ font-size: var(--calendar-font-base);
1001
1051
  }
1002
1052
 
1003
1053
  .scroll-hint {
1004
- font-size: 11px;
1005
- padding: 8px 12px;
1054
+ font-size: var(--calendar-font-xs);
1055
+ padding: var(--calendar-space-2) var(--calendar-space-3);
1006
1056
  }
1007
1057
 
1008
1058
  .events-container {
1009
- padding: 10px 12px;
1059
+ padding: var(--calendar-space-2-5) var(--calendar-space-3);
1010
1060
  }
1011
1061
 
1012
1062
  .event-card {
1013
- padding: 10px;
1014
- margin-bottom: 10px;
1063
+ padding: var(--calendar-space-2-5);
1064
+ margin-bottom: var(--calendar-space-2-5);
1015
1065
  }
1016
1066
 
1017
1067
  .event-header {
1018
1068
  flex-direction: column;
1019
- gap: 6px;
1069
+ gap: var(--calendar-space-1-5);
1020
1070
  }
1021
1071
 
1022
1072
  .event-badges {
@@ -1024,17 +1074,17 @@
1024
1074
  }
1025
1075
 
1026
1076
  .event-title {
1027
- font-size: 14px;
1077
+ font-size: var(--calendar-font-sm);
1028
1078
  }
1029
1079
 
1030
1080
  .badge {
1031
- font-size: 9px;
1081
+ font-size: var(--calendar-font-2xs);
1032
1082
  }
1033
1083
 
1034
1084
  .event-time {
1035
1085
  flex-direction: column;
1036
- gap: 2px;
1037
- font-size: 11px;
1086
+ gap: var(--calendar-space-0-5);
1087
+ font-size: var(--calendar-font-xs);
1038
1088
  }
1039
1089
 
1040
1090
  .event-time-label {
@@ -1042,12 +1092,12 @@
1042
1092
  }
1043
1093
 
1044
1094
  .event-description {
1045
- font-size: 11px;
1095
+ font-size: var(--calendar-font-xs);
1046
1096
  }
1047
1097
 
1048
1098
  .event-tag {
1049
- font-size: 10px;
1050
- padding: 2px 8px;
1099
+ font-size: var(--calendar-font-2xs);
1100
+ padding: var(--calendar-space-0-5) var(--calendar-space-2);
1051
1101
  }
1052
1102
  }
1053
1103
 
@@ -1062,7 +1112,7 @@
1062
1112
  }
1063
1113
  }
1064
1114
 
1065
- .calendar--table td.calendar--skeleton {
1115
+ .calendar-table td.calendar-skeleton {
1066
1116
  background: linear-gradient(
1067
1117
  90deg,
1068
1118
  var(--calendar-skeleton-base) 25%,
@@ -1071,6 +1121,6 @@
1071
1121
  );
1072
1122
  background-size: 200% 100%;
1073
1123
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
1074
- border-radius: 4px;
1124
+ border-radius: var(--calendar-radius-sm);
1075
1125
  pointer-events: none;
1076
1126
  }