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