igniteui-theming 6.0.0 → 6.0.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 (8) hide show
  1. package/package.json +1 -1
  2. package/sass/color/presets/dark/_material.scss +1 -1
  3. package/sass/color/presets/light/_material.scss +1 -1
  4. package/sass/themes/schemas/components/dark/_calendar.scss +393 -163
  5. package/sass/themes/schemas/components/light/_button.scss +10 -10
  6. package/sass/themes/schemas/components/light/_calendar.scss +504 -397
  7. package/sass/themes/schemas/components/light/_drop-down.scss +4 -4
  8. package/sass/themes/schemas/components/light/_switch.scss +2 -0
package/sass/themes/schemas/components/light/_calendar.scss CHANGED
@@ -12,25 +12,21 @@
12
12
  /// @prop {Map} content-foreground [color: ('gray', 900)] - The foreground color of the days, months and years views.
13
13
  /// @prop {Map} content-background [color: 'surface'] - The background color of the days, months and years views.
14
14
  /// @prop {Map} picker-background [color: 'surface'] - The background color of the month and year pickers.
15
- /// @prop {Map} picker-hover-foreground [color: 'secondary' 500] - The :hover foreground color of the month and year pickers.
16
- /// @prop {Map} picker-focus-foreground [color: 'secondary' 500] - The :focus foreground color of the month and year pickers.
15
+ /// @prop {Map} picker-hover-foreground [color: ('secondary', 500)] - The :hover foreground color of the month and year pickers.
16
+ /// @prop {Map} picker-focus-foreground [color: ('secondary', 500)] - The :focus foreground color of the month and year pickers.
17
17
  /// @prop {Map} weekday-color [color: ('gray', 500)] - The foreground color of the weekday labels.
18
- /// @prop {Map} weekend-color [contrast-color: 'surface'] - The foreground color of the weekend days.
18
+ /// @prop {Map} weekend-color [color: ('gray', 900)] - The foreground color of the weekend days.
19
19
  /// @prop {Map} inactive-color [color: ('gray', 500)] - The foreground color of the previous and next month dates.
20
20
  /// @prop {Map} week-number-foreground [color: ('gray', 500)] - The foreground color of the week number column.
21
21
  /// @prop {Map} week-number-background [color: ('gray', 200)] - The background color of the week number column.
22
- /// @prop {Map} year-hover-foreground [contrast-color: ('gray', 200)] - The :hover foreground color of the year in years view.
23
- /// @prop {Map} year-hover-background [color: ('grey', 200)]- The :hover background color of the year in years view.
22
+ /// @prop {Map} year-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the year in years view.
24
23
  /// @prop {Map} navigation-color [color: ('gray', 800)] - the color of the buttons responsible for navigation.
25
24
  /// @prop {Map} navigation-hover-color [color: ('secondary', 500)] - The :hover color of the buttons responsible for navigation.
26
25
  /// @prop {Map} navigation-focus-color [color: ('secondary', 500)] - The :focus color of the buttons responsible for navigation.
27
- /// @prop {Map} month-hover-foreground [contrast-color: ('gray', 200)] - The :hover foreground color of the month inside the months view.
28
- /// @prop {Map} month-hover-background [color: ('gray', 200)] - The :hover background color of the month inside the months view.
29
- /// @prop {Map} date-hover-foreground [color: 'gray', 900] - The :hover foreground color of a date.
30
- /// @prop {Map} date-focus-foreground [color: 'gray', 900] - The :focus foreground color of a date.
26
+ /// @prop {Map} date-hover-foreground [color: ('gray', 900)] - The :hover foreground color of a date.
27
+ /// @prop {Map} date-focus-foreground [color: ('gray', 900)] - The :focus foreground color of a date.
31
28
  /// @prop {Color} date-current-background [transparent] - The background color of the current date.
32
29
  /// @prop {Map} date-current-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current date.
33
- /// @prop {Map} date-current-hover-background [color: ('gray', 100)] - The :hover background color of the current date.
34
30
  /// @prop {Map} date-current-focus-foreground [color: ('gray', 900)] - The :focus foreground color of the current date.
35
31
  /// @prop {Map} date-current-focus-background [color: ('gray', 100)] - The :focus background color of the current date.
36
32
  /// @prop {Map} date-selected-range-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the selected range.
@@ -39,21 +35,15 @@
39
35
  /// @prop {Map} date-selected-current-range-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current date in the selected range.
40
36
  /// @prop {Map} date-selected-current-range-focus-foreground [color: ('gray', 900)] - The :focus foreground color of the current date in the selected range.
41
37
  /// @prop {Color} date-special-background [transparent] - The background color of a special date.
42
- /// @prop {Map} date-special-hover-background [color: ('gray', 100)] - The background color of a special date.
43
- /// @prop {Map} date-special-focus-background [color: ('gray', 100)] - The background color of a special date.
44
- /// @prop {Map} date-special-range-foreground [color: ('secondary', 900)] - The foreground color of a special date in rage selection.
45
- /// @prop {Color} date-special-range-background [transparent] - The background color of a special date in range selection.
46
38
  /// @prop {Map} date-special-range-border-color [color: ('secondary', 900)] - The outline color around a special date in range selection.
47
39
  /// @prop {Color} date-selected-current-outline [transparent] - The outline color of the current selected date.
48
40
  /// @prop {Color} date-selected-current-hover-outline [transparent] - The :hover outline color of the current selected date.
49
41
  /// @prop {Color} date-selected-current-focus-outline [transparent] - The :focus outline color of the current selected date.
50
- /// @prop {Map} current-outline-hover-color [color: ('gray', 600)] - The :hover outline color of the current year/month in year/month views.
51
- /// @prop {Map} current-outline-focus-color [color: ('secondary', 500)] - The :focus outline color of the current year/month in year/month views.
42
+ /// @prop {Map} current-outline-hover-color [color: ('gray', 900)] - The :hover outline color of the current year/month in year/month views.
43
+ /// @prop {Map} current-outline-focus-color [color: ('gray', 900)] - The :focus outline color of the current year/month in year/month views.
52
44
  /// @prop {Color} selected-outline-color [transparent] - The outline color of the selected year/month in year/month views.
53
45
  /// @prop {Color} selected-hover-outline-color [transparent] - The :hover outline color of the selected year/month in year/month views.
54
46
  /// @prop {Color} selected-focus-outline-color [transparent] - The :focus outline color of the selected year/month in year/month views.
55
- /// @prop {Map} selected-current-hover-outline-color [color: ('gray', 600)] - The :hover outline color of the selected current year/month in year/month views.
56
- /// @prop {Map} selected-current-focus-outline-color [color: ('secondary', 500)] - The :focus outline color of the selected current year/month in year/month views.
57
47
  /// @prop {Color} border-color [transparent] - The calendar border color.
58
48
  /// @prop {Color} date-border-color [transparent] - The border color around a date.
59
49
  /// @prop {Color} date-hover-border-color [transparent] - The :hover border color around a date.
@@ -63,7 +53,8 @@
63
53
  /// @prop {Color} date-selected-focus-border-color [transparent] - The :focus border color of the selected date.
64
54
  /// @prop {Color} date-range-border-color [transparent] - The border color of range selection.
65
55
  /// @prop {Map} date-range-preview-border-color [color: ('gray', 300)] - The border color of the range selection in preview state(visible before selecting the end of the range).
66
- /// @prop {Map} date-disabled-foreground [color: ('gray', 500)] - The foreground color of disabled dates.
56
+ /// @prop {Map} date-disabled-foreground [color: ('gray', 500, .5)] - The foreground color of disabled dates.
57
+ /// @prop {Map} date-disabled-range-foreground [color: ('gray', 900, .38)] - The foreground color of disabled dates in range selection.
67
58
  /// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for calendar.
68
59
  /// @prop {List} date-border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for the date.
69
60
  /// @prop {List} date-range-border-radius [(rem(20px), rem(0), rem(20px))] -The border radius used for the date in range selection.
@@ -113,15 +104,9 @@ $light-calendar: (
113
104
  ),
114
105
  ),
115
106
  year-hover-foreground: (
116
- contrast-color: (
117
- 'gray',
118
- 200,
119
- ),
120
- ),
121
- year-hover-background: (
122
107
  color: (
123
108
  'gray',
124
- 200,
109
+ 900,
125
110
  ),
126
111
  ),
127
112
  navigation-color: (
@@ -142,18 +127,6 @@ $light-calendar: (
142
127
  500,
143
128
  ),
144
129
  ),
145
- month-hover-foreground: (
146
- contrast-color: (
147
- 'gray',
148
- 200,
149
- ),
150
- ),
151
- month-hover-background: (
152
- color: (
153
- 'gray',
154
- 200,
155
- ),
156
- ),
157
130
  current-outline-hover-color: (
158
131
  color: (
159
132
  'gray',
@@ -169,24 +142,6 @@ $light-calendar: (
169
142
  selected-outline-color: transparent,
170
143
  selected-hover-outline-color: transparent,
171
144
  selected-focus-outline-color: transparent,
172
- selected-current-outline-color: (
173
- color: (
174
- 'gray',
175
- 900,
176
- ),
177
- ),
178
- selected-current-outline-hover-color: (
179
- color: (
180
- 'gray',
181
- 900,
182
- ),
183
- ),
184
- selected-current-outline-focus-color: (
185
- color: (
186
- 'gray',
187
- 900,
188
- ),
189
- ),
190
145
  date-hover-foreground: (
191
146
  color: (
192
147
  'gray',
@@ -236,12 +191,6 @@ $light-calendar: (
236
191
  900,
237
192
  ),
238
193
  ),
239
- date-current-hover-background: (
240
- color: (
241
- 'gray',
242
- 100,
243
- ),
244
- ),
245
194
  date-current-focus-foreground: (
246
195
  color: (
247
196
  'gray',
@@ -255,24 +204,6 @@ $light-calendar: (
255
204
  ),
256
205
  ),
257
206
  date-special-background: transparent,
258
- date-special-hover-background: (
259
- color: (
260
- 'gray',
261
- 100,
262
- ),
263
- ),
264
- date-special-focus-background: (
265
- color: (
266
- 'gray',
267
- 100,
268
- ),
269
- ),
270
- date-special-range-foreground: (
271
- color: (
272
- 'secondary',
273
- 900,
274
- ),
275
- ),
276
207
  date-special-range-background: transparent,
277
208
  date-special-range-border-color: (
278
209
  color: (
@@ -286,28 +217,6 @@ $light-calendar: (
286
217
  500,
287
218
  ),
288
219
  ),
289
- date-disabled-background: transparent,
290
- date-disabled-current-foreground: (
291
- color: (
292
- 'gray',
293
- 500,
294
- ),
295
- ),
296
- date-disabled-current-background: transparent,
297
- date-disabled-range-foreground: (
298
- color: (
299
- 'gray',
300
- 500,
301
- ),
302
- ),
303
- date-disabled-range-background: transparent,
304
- date-disabled-current-range-foreground: (
305
- color: (
306
- 'gray',
307
- 500,
308
- ),
309
- ),
310
- date-disabled-current-range-background: transparent,
311
220
  week-number-foreground: (
312
221
  color: (
313
222
  'gray',
@@ -333,7 +242,10 @@ $light-calendar: (
333
242
  ),
334
243
  ),
335
244
  weekend-color: (
336
- contrast-color: 'surface',
245
+ color: (
246
+ 'gray',
247
+ 900,
248
+ ),
337
249
  ),
338
250
  border-radius: (
339
251
  border-radius: (
@@ -383,6 +295,14 @@ $light-calendar: (
383
295
  color: (
384
296
  'gray',
385
297
  500,
298
+ 0.5,
299
+ ),
300
+ ),
301
+ date-disabled-range-foreground: (
302
+ color: (
303
+ 'gray',
304
+ 900,
305
+ 0.38,
386
306
  ),
387
307
  ),
388
308
  );
@@ -391,35 +311,34 @@ $light-calendar: (
391
311
  /// @type {Map}
392
312
  /// @prop {Map} header-foreground [contrast-color: ('secondary', 900)] - The header foreground color.
393
313
  /// @prop {Map} header-background [color: ('secondary', 500)] - The header background color.
394
- /// @prop {Map} picker-foreground [color: 'gray' 900] - The foreground color of the month and year pickers.
395
- /// @prop {Map} year-focus-foreground [contrast-color: ('secondary', 500)]- The :focus foreground color of the focused year in years view.
396
- /// @prop {Map} year-focus-background [color: ('secondary', 500)]- The :focus background color of the focused year on in years view.
397
- /// @prop {Map} year-current-foreground [contrast-color: ('surface')] - The foreground color of the current year.
398
- /// @prop {Map} year-current-background [color: ('surface')]- The background color of the current year in years view.
399
- /// @prop {Map} year-current-hover-foreground [contrast-color: ('gray', 200)] - The :hover foreground color of the current year in years view.
400
- /// @prop {Map} year-current-hover-background [color: ('gray' 200)] - The :hover background color of the current year in years view.
314
+ /// @prop {Map} picker-foreground [color: ('gray', 900)] - The foreground color of the month and year pickers.
315
+ /// @prop {Map} year-hover-background [color: ('gray', 100)] - The :hover background color of the year in years view.
316
+ /// @prop {Map} year-current-foreground [color: ('gray', 900)] - The foreground color of the current year.
317
+ /// @prop {Map} year-current-background [color: ('surface')] - The background color of the current year in years view.
318
+ /// @prop {Map} year-current-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current year in years view.
319
+ /// @prop {Map} year-current-hover-background [color: ('gray', 100)] - The :hover background color of the current year in years view.
401
320
  /// @prop {Map} year-selected-foreground [contrast-color: ('secondary', 600)] - The foreground color of the selected year.
402
- /// @prop {Map} year-selected-background [color: ('secondary', 500)]- The background color of the selected year in years view.
403
- /// @prop {Map} year-selected-hover-foreground [contrast-color: ('secondary', 600)] - The :hover foreground color of the selected year in years view.
404
- /// @prop {Map} year-selected-hover-background [color: ('secondary' 600)] - The :hover background color of the selected year in years view.
321
+ /// @prop {Map} year-selected-background [color: ('secondary', 500)] - The background color of the selected year in years view.
322
+ /// @prop {Map} year-selected-hover-foreground [contrast-color: ('secondary', 700)] - The :hover foreground color of the selected year in years view.
323
+ /// @prop {Map} year-selected-hover-background [color: ('secondary', 700)] - The :hover background color of the selected year in years view.
405
324
  /// @prop {Map} year-selected-current-foreground [contrast-color: ('secondary', 600)] - The foreground color of the current/selected year.
406
325
  /// @prop {Map} year-selected-current-background [color: ('secondary', 500)] - The foreground color of the current/selected year.
407
- /// @prop {Map} year-selected-current-hover-foreground [contrast-color: ('secondary', 600)] - The :hover foreground color of the current/selected year.
408
- /// @prop {Map} year-selected-current-hover-background [color: ('secondary', 600)] - The :hover background color of the current/selected year.
409
- /// @prop {Map} month-focus-foreground [contrast-color: ('secondary', 500)] - The :focus foreground color of the month inside the months view.
410
- /// @prop {Map} month-focus-background [color: ('secondary', 500)] - The :focus background color of the month inside the months view.
326
+ /// @prop {Map} year-selected-current-hover-foreground [contrast-color: ('secondary', 700)] - The :hover foreground color of the current/selected year.
327
+ /// @prop {Map} year-selected-current-hover-background [color: ('secondary', 700)] - The :hover background color of the current/selected year.
328
+ /// @prop {Map} month-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the month inside the months view.
329
+ /// @prop {Map} month-hover-background [color: ('gray', 100)] - The :hover background color of the month inside the months view.
411
330
  /// @prop {Map} month-current-foreground [contrast-color: ('gray', 200)] - The foreground color of the current month in month view.
412
331
  /// @prop {Map} month-current-background [color: ('surface')] - The background color of the current month in month view.
413
- /// @prop {Map} month-current-hover-foreground [contrast-color: ('gray', 200)]- The :hover foreground color of the current month in month view.
414
- /// @prop {Map} month-current-hover-background [color: ('gray', 200)]- The :hover background color of the current month in month view.
332
+ /// @prop {Map} month-current-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current month in month view.
333
+ /// @prop {Map} month-current-hover-background [color: ('gray', 100)] - The :hover background color of the current month in month view.
415
334
  /// @prop {Map} month-selected-foreground [contrast-color: ('secondary', 600)] - The foreground color of the selected month in month view.
416
335
  /// @prop {Map} month-selected-background [color: ('secondary', 500)] - The background color of the selected month in month view.
417
- /// @prop {Map} month-selected-hover-foreground [contrast-color: ('secondary', 600)]- The :hover foreground color of the selected month in month view.
418
- /// @prop {Map} month-selected-hover-background [color: ('secondary', 600)]- The :hover background color of the selected month in month view.
336
+ /// @prop {Map} month-selected-hover-foreground [contrast-color: ('secondary', 700)] - The :hover foreground color of the selected month in month view.
337
+ /// @prop {Map} month-selected-hover-background [color: ('secondary', 700)] - The :hover background color of the selected month in month view.
419
338
  /// @prop {Map} month-selected-current-foreground [contrast-color: ('secondary', 500)] - The foreground color of the current/selected month in month view.
420
- /// @prop {Map} month-selected-current-background [color: ('secondary', 500)]- The background color of the current/selected month in month view.
421
- /// @prop {Map} month-selected-current-hover-foreground [contrast-color: ('secondary', 600)] - The :hover foreground color of the current/selected month in month view.
422
- /// @prop {Map} month-selected-current-hover-background [color: ('secondary', 600)] - The :hover background color of the current/selected month in month view.
339
+ /// @prop {Map} month-selected-current-background [color: ('secondary', 500)] - The background color of the current/selected month in month view.
340
+ /// @prop {Map} month-selected-current-hover-foreground [contrast-color: ('secondary', 700)] - The :hover foreground color of the current/selected month in month view.
341
+ /// @prop {Map} month-selected-current-hover-background [color: ('secondary', 700)] - The :hover background color of the current/selected month in month view.
423
342
  /// @prop {Map} date-hover-background [color: ('gray', 100)] - The :hover background color of a date.
424
343
  /// @prop {Map} date-focus-background [color: ('gray', 100)] - The :focus background color of date.
425
344
  /// @prop {Map} date-current-foreground [color: ('gray', 900)] - The foreground color of the current date.
@@ -429,6 +348,7 @@ $light-calendar: (
429
348
  /// @prop {Map} date-selected-hover-background [color: ('secondary', 700)] - The :hover background color of the selected date.
430
349
  /// @prop {Map} date-selected-focus-foreground [contrast-color: ('secondary', 700)] - The :focus foreground color of the selected date.
431
350
  /// @prop {Map} date-selected-focus-background [color: ('secondary', 700)] - The :focus background color of the selected date.
351
+ /// @prop {Map} date-current-hover-background [color: ('gray', 100)] - The :hover background color of the current date.
432
352
  /// @prop {Map} date-selected-current-foreground [contrast-color: ('secondary', 900)] - The foreground color of the selected current date.
433
353
  /// @prop {Map} date-selected-current-background [color: ('secondary', 500)] - The background color of the selected current date.
434
354
  /// @prop {Map} date-selected-current-hover-foreground [contrast-color: ('secondary', 700)] - The :hover foreground color of the selected current date.
@@ -436,7 +356,7 @@ $light-calendar: (
436
356
  /// @prop {Map} date-selected-current-focus-foreground [contrast-color: ('secondary', 700)] - The :focus foreground color of the selected current date.
437
357
  /// @prop {Map} date-selected-current-focus-background [color: ('secondary', 700)] - The :focus background color of the selected current date.
438
358
  /// @prop {Map} date-selected-range-foreground [color: ('gray', 900)] - The foreground color of the selected range.
439
- /// @prop {Map} date-selected-range-background [color: ('secondary', 50)] - The background color of the selected range.
359
+ /// @prop {Map} date-selected-range-background [color: ('secondary', 500, .24)] - The background color of the selected range.
440
360
  /// @prop {Map} date-selected-range-hover-background [color: ('gray', 100)] - The :hover background color of the selected range.
441
361
  /// @prop {Map} date-selected-range-focus-background [color: ('gray', 100)] - The :focus background color of the selected range.
442
362
  /// @prop {Color} date-selected-current-range-background [transparent] - The background color of the current date in the selected range.
@@ -445,9 +365,16 @@ $light-calendar: (
445
365
  /// @prop {Map} date-special-foreground [color: ('secondary', 500)] - The foreground color of a special date.
446
366
  /// @prop {Map} date-special-hover-foreground [color: ('secondary', 700)] - The foreground color of a special date.
447
367
  /// @prop {Map} date-special-focus-foreground [color: ('secondary', 700)] - The foreground color of a special date.
368
+ /// @prop {Map} date-special-hover-background [color: ('gray', 100)] - The background color of a special date.
369
+ /// @prop {Map} date-special-focus-background [color: ('gray', 100)] - The background color of a special date.
370
+ /// @prop {Map} date-special-range-hover-background [color: ('gray', 100)] - The :hover background color of a special date in range selection.
371
+ /// @prop {Map} date-special-range-focus-background [color: ('gray', 100)] - The :focus background color of a special date in range selection.
448
372
  /// @prop {Map} date-special-border-color [color: ('secondary', 500)] - The outline color around a special date.
373
+ /// @prop {Map} date-special-hover-border-color [color: ('secondary', 700)] - The outline color around a special date.
449
374
  /// @prop {Map} current-outline-color [color: ('gray', 900)] - The outline color of the current year/month in year/month views.
450
- /// @prop {Map} selected-current-outline-color [color: ('gray', 600)] - The outline color of the selected current year/month in year/month views.
375
+ /// @prop {Map} selected-current-outline-color [color: ('gray', 900)] - The outline color of the selected current year/month in year/month views.
376
+ /// @prop {Map} selected-current-outline-hover-color [color: ('gray', 900)] - The :hover outline color of the selected current year/month in year/month views.
377
+ /// @prop {Map} selected-current-outline-focus-color [color: ('gray', 900)] - The :focus outline color of the selected current year/month in year/month views.
451
378
  /// @prop {Map} date-current-border-color [color: ('gray', 900)] - The border color of the current date.
452
379
  /// @prop {Map} date-current-hover-border-color [color: ('gray', 900)] - The :hover border color of the current date.
453
380
  /// @prop {Map} date-current-focus-border-color [color: ('gray', 900)] - The :focus border color of the current date.
@@ -455,7 +382,8 @@ $light-calendar: (
455
382
  /// @prop {Map} date-selected-current-hover-border-color [color: ('gray', 900)] - The :hover border color of the selected current date.
456
383
  /// @prop {Map} date-selected-current-focus-border-color [color: ('gray', 900)] - The :focus border color of the selected current date.
457
384
  /// @prop {List} week-number-border-radius [(rem(4px), rem(0), rem(8px))] - The border radius used for the week numbers column.
458
- /// @prop {List} actions-divider-color [color: ('gray', 200)] - The border color used for the date-picker actions divider.
385
+ /// @prop {Map} actions-divider-color [color: ('gray', 200)] - The border color used for the date-picker actions divider.
386
+ /// @prop {Map} date-special-range-foreground [color: ('secondary', 900)] - The foreground color of a special date in rage selection.
459
387
  /// @requires $light-calendar
460
388
  $material-calendar: extend(
461
389
  $light-calendar,
@@ -478,24 +406,31 @@ $material-calendar: extend(
478
406
  900,
479
407
  ),
480
408
  ),
409
+ year-hover-background: (
410
+ color: (
411
+ 'gray',
412
+ 100,
413
+ ),
414
+ ),
481
415
  year-current-foreground: (
482
- contrast-color: (
483
- 'surface',
416
+ color: (
417
+ 'gray',
418
+ 900,
484
419
  ),
485
420
  ),
486
421
  year-current-background: (
487
422
  color: 'surface',
488
423
  ),
489
424
  year-current-hover-foreground: (
490
- contrast-color: (
425
+ color: (
491
426
  'gray',
492
- 200,
427
+ 900,
493
428
  ),
494
429
  ),
495
430
  year-current-hover-background: (
496
431
  color: (
497
432
  'gray',
498
- 200,
433
+ 100,
499
434
  ),
500
435
  ),
501
436
  year-selected-foreground: (
@@ -513,13 +448,13 @@ $material-calendar: extend(
513
448
  year-selected-hover-foreground: (
514
449
  contrast-color: (
515
450
  'secondary',
516
- 600,
451
+ 700,
517
452
  ),
518
453
  ),
519
454
  year-selected-hover-background: (
520
455
  color: (
521
456
  'secondary',
522
- 600,
457
+ 700,
523
458
  ),
524
459
  ),
525
460
  year-selected-current-foreground: (
@@ -537,13 +472,25 @@ $material-calendar: extend(
537
472
  year-selected-current-hover-foreground: (
538
473
  contrast-color: (
539
474
  'secondary',
540
- 600,
475
+ 700,
541
476
  ),
542
477
  ),
543
478
  year-selected-current-hover-background: (
544
479
  color: (
545
480
  'secondary',
546
- 600,
481
+ 700,
482
+ ),
483
+ ),
484
+ month-hover-foreground: (
485
+ color: (
486
+ 'gray',
487
+ 900,
488
+ ),
489
+ ),
490
+ month-hover-background: (
491
+ color: (
492
+ 'gray',
493
+ 100,
547
494
  ),
548
495
  ),
549
496
  month-current-foreground: (
@@ -556,15 +503,15 @@ $material-calendar: extend(
556
503
  color: 'surface',
557
504
  ),
558
505
  month-current-hover-foreground: (
559
- contrast-color: (
506
+ color: (
560
507
  'gray',
561
- 200,
508
+ 900,
562
509
  ),
563
510
  ),
564
511
  month-current-hover-background: (
565
512
  color: (
566
513
  'gray',
567
- 200,
514
+ 100,
568
515
  ),
569
516
  ),
570
517
  month-selected-foreground: (
@@ -582,13 +529,13 @@ $material-calendar: extend(
582
529
  month-selected-hover-foreground: (
583
530
  contrast-color: (
584
531
  'secondary',
585
- 600,
532
+ 700,
586
533
  ),
587
534
  ),
588
535
  month-selected-hover-background: (
589
536
  color: (
590
537
  'secondary',
591
- 600,
538
+ 700,
592
539
  ),
593
540
  ),
594
541
  month-selected-current-foreground: (
@@ -606,13 +553,13 @@ $material-calendar: extend(
606
553
  month-selected-current-hover-foreground: (
607
554
  contrast-color: (
608
555
  'secondary',
609
- 600,
556
+ 700,
610
557
  ),
611
558
  ),
612
559
  month-selected-current-hover-background: (
613
560
  color: (
614
561
  'secondary',
615
- 600,
562
+ 700,
616
563
  ),
617
564
  ),
618
565
  date-hover-background: (
@@ -669,6 +616,12 @@ $material-calendar: extend(
669
616
  700,
670
617
  ),
671
618
  ),
619
+ date-current-hover-background: (
620
+ color: (
621
+ 'gray',
622
+ 100,
623
+ ),
624
+ ),
672
625
  date-selected-current-foreground: (
673
626
  contrast-color: (
674
627
  'secondary',
@@ -714,7 +667,8 @@ $material-calendar: extend(
714
667
  date-selected-range-background: (
715
668
  color: (
716
669
  'secondary',
717
- 50,
670
+ 500,
671
+ 0.24,
718
672
  ),
719
673
  ),
720
674
  date-selected-range-hover-background: (
@@ -760,18 +714,66 @@ $material-calendar: extend(
760
714
  700,
761
715
  ),
762
716
  ),
717
+ date-special-hover-background: (
718
+ color: (
719
+ 'gray',
720
+ 100,
721
+ ),
722
+ ),
723
+ date-special-focus-background: (
724
+ color: (
725
+ 'gray',
726
+ 100,
727
+ ),
728
+ ),
729
+ date-special-range-hover-background: (
730
+ color: (
731
+ 'gray',
732
+ 100,
733
+ ),
734
+ ),
735
+ date-special-range-focus-background: (
736
+ color: (
737
+ 'gray',
738
+ 100,
739
+ ),
740
+ ),
763
741
  date-special-border-color: (
764
742
  color: (
765
743
  'secondary',
766
744
  500,
767
745
  ),
768
746
  ),
747
+ date-special-hover-border-color: (
748
+ color: (
749
+ 'secondary',
750
+ 700,
751
+ ),
752
+ ),
753
+ selected-current-outline-color: (
754
+ color: (
755
+ 'gray',
756
+ 900,
757
+ ),
758
+ ),
769
759
  current-outline-color: (
770
760
  color: (
771
761
  'gray',
772
762
  900,
773
763
  ),
774
764
  ),
765
+ selected-current-outline-hover-color: (
766
+ color: (
767
+ 'gray',
768
+ 900,
769
+ ),
770
+ ),
771
+ selected-current-outline-focus-color: (
772
+ color: (
773
+ 'gray',
774
+ 900,
775
+ ),
776
+ ),
775
777
  date-current-border-color: (
776
778
  color: (
777
779
  'gray',
@@ -821,62 +823,77 @@ $material-calendar: extend(
821
823
  200,
822
824
  ),
823
825
  ),
826
+ date-special-range-foreground: (
827
+ color: (
828
+ 'secondary',
829
+ 900,
830
+ ),
831
+ ),
824
832
  )
825
833
  );
826
834
 
827
835
  /// Generates a fluent calendar schema.
828
836
  /// @type {Map}
837
+ /// @prop {Map} month-hover-background [color: ('gray', 200)] - The :hover background color of the month inside the months view.
838
+ /// @prop {Map} year-hover-background [color: ('gray', 200)] - The :hover background color of the year in years view.
839
+ /// @prop {Map} picker-hover-foreground [color: ('primary', 500)] - The :hover foreground color of the month and year pickers.
840
+ /// @prop {Map} picker-focus-foreground [color: ('primary', 500)] - The :focus foreground color of the month and year pickers.
841
+ /// @prop {Map} navigation-hover-color [color: ('primary', 500)] - The :hover color of the buttons responsible for navigation.
842
+ /// @prop {Map} navigation-focus-color [color: ('primary', 500)] - The :focus color of the buttons responsible for navigation.
829
843
  /// @prop {Map} date-special-foreground [color: ('gray', 900)] - The foreground color of a special date.
830
844
  /// @prop {Map} date-special-hover-foreground [color: ('gray', 900)] - The foreground color of a special date.
831
845
  /// @prop {Map} date-special-focus-foreground [color: ('gray', 900)] - The foreground color of a special date.
846
+ /// @prop {Map} date-special-hover-background [color: ('gray', 200)] - The background color of a special date.
847
+ /// @prop {Map} date-special-focus-background [color: ('gray', 200)] - The background color of a special date.
848
+ /// @prop {Map} date-special-range-hover-background [color: ('gray', 200)] - The :hover background color of a special date in range selection.
849
+ /// @prop {Map} date-special-range-focus-background [color: ('gray', 200)] - The :focus background color of a special date in range selection.
832
850
  /// @prop {Map} date-selected-current-border-color [color: ('gray', 700)] - The border color of the selected current date.
833
851
  /// @prop {Map} date-selected-current-hover-border-color [color: ('gray', 700)] - The :hover border color of the selected current date.
834
852
  /// @prop {Map} date-selected-current-focus-border-color [color: ('gray', 700)] - The :focus border color of the selected current date.
835
- /// @prop {Map} year-current-foreground [contrast-color: ('gray', 100)] - The foreground color of the current year.
836
- /// @prop {Map} year-current-background [color: 'gray', 100) ]- The background color of the current year in years view.
837
- /// @prop {Map} year-current-hover-foreground [contrast-color: ('gray', 200)] - The :hover foreground color of the current year in years view.
838
- /// @prop {Map} year-current-hover-background [color: ('gray' 200)] - The :hover background color of the current year in years view.
839
- /// @prop {Map} year-selected-foreground [contrast-color: ('primary', 50)] - The foreground color of the selected year.
853
+ /// @prop {Map} year-current-foreground [color: ('gray', 900)] - The foreground color of the current year.
854
+ /// @prop {Map} year-current-background [color: ('gray', 100)] - The background color of the current year in years view.
855
+ /// @prop {Map} year-current-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current year in years view.
856
+ /// @prop {Map} year-current-hover-background [color: ('gray', 200)] - The :hover background color of the current year in years view.
857
+ /// @prop {Map} year-selected-foreground [color: ('gray', 900)] - The foreground color of the selected year.
840
858
  /// @prop {Map} year-selected-background [color: ('primary', 50, .3)] - The background color of the selected year.
841
- /// @prop {Map} year-selected-hover-foreground [contrast-color: ('primary', 100)] - The foreground color of the selected year on :hover.
859
+ /// @prop {Map} year-selected-hover-foreground [color: ('gray', 900)] - The foreground color of the selected year on :hover.
842
860
  /// @prop {Map} year-selected-hover-background [color: ('primary', 100, .5)] - The background color of the selected year on :hover.
843
- /// @prop {Map} year-selected-current-foreground [contrast-color: ('primary', 50)] - The foreground color of the current/selected year.
861
+ /// @prop {Map} year-selected-current-foreground [color: ('gray', 900)] - The foreground color of the current/selected year.
844
862
  /// @prop {Map} year-selected-current-background [color: ('primary', 50, .3)] - The background color of the current/selected year.
845
- /// @prop {Map} year-selected-current-hover-foreground [contrast-color: ('primary', 100)] - The foreground color of the current/selected year on :hover.
863
+ /// @prop {Map} year-selected-current-hover-foreground [color: ('gray', 900)] - The foreground color of the current/selected year on :hover.
846
864
  /// @prop {Map} year-selected-current-hover-background [color: ('primary', 100, .5)] - The background color of the current/selected year on :hover.
847
- /// @prop {Map} month-current-foreground [contrast-color: ('gray', 100)] - The foreground color of the current month in month view.
865
+ /// @prop {Map} month-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the month inside the months view.
866
+ /// @prop {Map} month-current-foreground [color: ('gray', 900)] - The foreground color of the current month in month view.
848
867
  /// @prop {Map} month-current-background [color: ('gray', 100)] - The background color of the current month in month view.
849
- /// @prop {Map} month-current-hover-foreground [contrast-color: ('gray', 200)]- The :hover foreground color of the current month in month view.
850
- /// @prop {Map} month-current-hover-background [color: ('gray', 200)]- The :hover background color of the current month in month view.
851
- /// @prop {Map} month-selected-foreground [contrast-color: ('primary', 50)] - The foreground color of the selected month in month view.
868
+ /// @prop {Map} month-current-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current month in month view.
869
+ /// @prop {Map} month-current-hover-background [color: ('gray', 200)] - The :hover background color of the current month in month view.
870
+ /// @prop {Map} month-selected-foreground [color: ('gray', 900)] - The foreground color of the selected month in month view.
852
871
  /// @prop {Map} month-selected-background [color: ('primary', 50, .3)] - The background color of the selected month in month view.
853
- /// @prop {Map} month-selected-hover-foreground [contrast-color: ('gray', 100)]- The :hover foreground color of the selected month in month view.
854
- /// @prop {Map} month-selected-hover-background [color: ('gray', 100, .5)]- The :hover background color of the selected month in month view.
855
- /// @prop {Map} month-selected-current-foreground [contrast-color: ('primary', 50)] - The foreground color of the current/selected month in month view.
856
- /// @prop {Map} month-selected-current-background [color: ('primary', 50, .3)]- The background color of the current/selected month in month view.
857
- /// @prop {Map} month-selected-current-hover-foreground [contrast-color: ('primary', 100)] - The :hover foreground color of the current/selected month in month view.
872
+ /// @prop {Map} month-selected-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the selected month in month view.
873
+ /// @prop {Map} month-selected-hover-background [color: ('gray', 100, .5)] - The :hover background color of the selected month in month view.
874
+ /// @prop {Map} month-selected-current-foreground [color: ('gray', 900)] - The foreground color of the current/selected month in month view.
875
+ /// @prop {Map} month-selected-current-background [color: ('primary', 50, .3)] - The background color of the current/selected month in month view.
876
+ /// @prop {Map} month-selected-current-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current/selected month in month view.
858
877
  /// @prop {Map} month-selected-current-hover-background [color: ('primary', 100, .5)] - The :hover background color of the current/selected month in month view.
859
- /// @prop {Map} date-hover-foreground [contrast-color: ('gray', 200)] - The :hover foreground color of a date.
860
- /// @prop {Map} date-hover-background [color: ('gray', 200)] - The :hover background color of adate.
861
- /// @prop {Map} date-focus-foreground [contrast-color: ('gray', 200)] - The :focus foreground color of a date.
878
+ /// @prop {Map} date-hover-background [color: ('gray', 900)] - The :hover background color of date.
862
879
  /// @prop {Map} date-focus-background [color: ('gray', 200)] - The :focus background color of a date.
863
- /// @prop {Map} picker-foreground [color: ('gray', 900)]- The foreground color of the month and year pickers.
880
+ /// @prop {Map} picker-foreground [color: ('gray', 900)] - The foreground color of the month and year pickers.
864
881
  /// @prop {Map} header-foreground [contrast-color: ('primary', 600)] - The header foreground color.
865
882
  /// @prop {Map} header-background [color: ('primary', 500)] - The background color of the month and year pickers.
866
- /// @prop {Map} date-selected-foreground [contrast-color: ('gray', 100)] - The foreground color of the selected date.
883
+ /// @prop {Map} date-selected-foreground [color: ('gray', 900)] - The foreground color of the selected date.
867
884
  /// @prop {Map} date-selected-background [color: ('gray', 100)] - The background color of the selected date.
868
- /// @prop {Map} date-selected-hover-foreground [contrast-color: ('gray', 200)] - The :hover foreground color of the selected date.
885
+ /// @prop {Map} date-selected-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the selected date.
869
886
  /// @prop {Map} date-selected-hover-background [color: ('gray', 200)] - The :hover background color of the selected date.
870
- /// @prop {Map} date-selected-focus-foreground [contrast-color: ('gray', 200)] - The :hover foreground color of the selected date.
887
+ /// @prop {Map} date-selected-focus-foreground [color: ('gray', 900)] - The :hover foreground color of the selected date.
871
888
  /// @prop {Map} date-selected-focus-background [color: ('gray', 200)] - The :hover background color of the selected date.
872
- /// @prop {Map} date-current-foreground [contrast-color: ('primary', 900] - The foreground color of the current date.
889
+ /// @prop {Map} date-current-foreground [contrast-color: ('primary', 900)] - The foreground color of the current date.
873
890
  /// @prop {Map} date-current-background [color: ('primary', 500)] - The background color of the current date.
874
891
  /// @prop {Map} date-current-hover-foreground [contrast-color: ('primary', 600)] - The :hover foreground color of the current date.
875
892
  /// @prop {Map} date-current-hover-background [color: ('gray', 200)] - The :hover background color of the current date.
876
893
  /// @prop {Map} date-current-focus-foreground [contrast-color: ('primary', 600)] - The :focus foreground color of the current date.
877
894
  /// @prop {Map} date-current-focus-background [color: ('gray', 200)] - The :focus background color of the current date.
878
895
  /// @prop {Map} date-selected-current-foreground [contrast-color: ('primary', 600)] - The foreground color of the selected current date.
879
- /// @prop {Color} date-selected-current-background [transparent] - The background color of the selected current date.
896
+ /// @prop {Map} date-selected-current-background [color: ('gray', 100)] - The background color of the selected current date.
880
897
  /// @prop {Map} date-selected-current-hover-foreground [contrast-color: ('primary', 600)] - The :hover foreground color of the selected current date.
881
898
  /// @prop {Map} date-selected-current-hover-background [color: ('gray', 200)] - The :hover background color of the selected current date.
882
899
  /// @prop {Map} date-selected-current-focus-foreground [contrast-color: ('primary', 600)] - The :focus foreground color of the selected current date.
@@ -891,21 +908,21 @@ $material-calendar: extend(
891
908
  /// @prop {Map} date-selected-hover-border-color [color: ('gray', 700)] - The :hover border color of the selected date.
892
909
  /// @prop {Map} date-selected-focus-border-color [color: ('gray', 700)] - The :focus border color of the selected date.
893
910
  /// @prop {Color} current-outline-color [transparent] - The outline color of the current year/month in year/month views.
911
+ /// @prop {Color} current-outline-hover-color [transparent] - The :hover outline color of the current year/month in year/month views.
912
+ /// @prop {Color} current-outline-focus-color [transparent] - The :focus outline color of the current year/month in year/month views.
894
913
  /// @prop {Color} current-hover-outline-color [transparent] - The :hover outline color of the current year/month in year/month views.
895
914
  /// @prop {Color} current-focus-outline-color [transparent] - The :focus outline color of the current year/month in year/month views.
896
- /// @prop {Color} selected-outline-color [transparent] - The outline color of the selected year/month in year/month views.
897
- /// @prop {Color} selected-hover-outline-color [transparent] - The :hover outline color of the selected year/month in year/month views.
898
- /// @prop {Color} selected-focus-outline-color [transparent] - The :focus outline color of the selected year/month in year/month views.
899
915
  /// @prop {Map} selected-current-outline-color [color: ('gray', 700)] - The outline color of the selected current year/month in year/month views.
900
- /// @prop {Map} selected-current-hover-outline-color [color: ('gray', 700)] - The :hover outline color of the selected current year/month in year/month views.
901
- /// @prop {Map} selected-current-focus-outline-color [color: ('gray', 700)] - The :focus outline color of the selected current year/month in year/month views.
902
- /// @prop {Map} date-selected-range-foreground [contrast-color: ('gray', 100)] - The foreground color of the selected range.
916
+ /// @prop {Map} selected-current-outline-hover-color [color: ('gray', 700)] - The :hover outline color of the selected current year/month in year/month views.
917
+ /// @prop {Map} selected-current-outline-focus-color [color: ('gray', 700)] - The :focus outline color of the selected current year/month in year/month views.
918
+ /// @prop {Map} date-selected-range-foreground [color: ('gray', 900)] - The foreground color of the selected range.
903
919
  /// @prop {Map} date-selected-range-background [color: ('gray', 100)] - The background color of the selected range.
904
920
  /// @prop {Map} date-selected-range-hover-background [color: ('gray', 200)] - The :hover background color of the selected range.
905
921
  /// @prop {Map} date-selected-range-focus-background [color: ('gray', 200)] - The :focus background color of the selected range.
906
922
  /// @prop {Map} date-range-border-color [color: ('gray', 700)] - The border color of the selected date.
907
923
  /// @prop {Map} date-range-preview-border-color [color: ('gray', 700)] - The border color of the selected date.
908
924
  /// @prop {Map} date-special-border-color [color: ('primary', 900)] - The outline color around a special date.
925
+ /// @prop {Map} date-special-hover-border-color [color: ('primary', 900)] - The outline color around a special date.
909
926
  /// @prop {Map} date-special-range-border-color [color: ('primary', 900)] - The outline color around a special date in a range selection.
910
927
  /// @prop {Color} date-special-current-border-color [transparent] - The outline color around a special date.
911
928
  /// @prop {Color} date-current-border-color [transparent] - The border color of the current date.
@@ -918,7 +935,8 @@ $material-calendar: extend(
918
935
  /// @prop {List} week-number-border-radius [(rem(0), rem(0), rem(8px))] - The border radius used for the week numbers column.
919
936
  /// @prop {List} size [(rem(28px), rem(32px), rem(40px))] - The size of the days, months, and years views.
920
937
  /// @prop {List} inner-size [(rem(24px), rem(28px), rem(32px))] - The size of the inner element of a date(often used to outline the special date)
921
- /// @prop {List} actions-divider-color [color: ('gray', 200)] - The border color used for the date-picker actions divider.
938
+ /// @prop {Map} actions-divider-color [color: ('gray', 200)] - The border color used for the date-picker actions divider.
939
+ /// @prop {Map} date-special-range-foreground [color: ('gray', 900)] - The foreground color of a special date in rage selection.
922
940
  /// @requires {Map} $light-calendar
923
941
  $fluent-calendar: extend(
924
942
  $light-calendar,
@@ -937,6 +955,42 @@ $fluent-calendar: extend(
937
955
  rem(32px),
938
956
  ),
939
957
  ),
958
+ year-hover-background: (
959
+ color: (
960
+ 'gray',
961
+ 200,
962
+ ),
963
+ ),
964
+ month-hover-background: (
965
+ color: (
966
+ 'gray',
967
+ 200,
968
+ ),
969
+ ),
970
+ picker-hover-foreground: (
971
+ color: (
972
+ 'primary',
973
+ 500,
974
+ ),
975
+ ),
976
+ picker-focus-foreground: (
977
+ color: (
978
+ 'primary',
979
+ 500,
980
+ ),
981
+ ),
982
+ navigation-hover-color: (
983
+ color: (
984
+ 'primary',
985
+ 500,
986
+ ),
987
+ ),
988
+ navigation-focus-color: (
989
+ color: (
990
+ 'primary',
991
+ 500,
992
+ ),
993
+ ),
940
994
  date-special-foreground: (
941
995
  color: (
942
996
  'gray',
@@ -979,6 +1033,12 @@ $fluent-calendar: extend(
979
1033
  900,
980
1034
  ),
981
1035
  ),
1036
+ date-special-hover-border-color: (
1037
+ color: (
1038
+ 'primary',
1039
+ 900,
1040
+ ),
1041
+ ),
982
1042
  date-special-range-border-color: (
983
1043
  color: (
984
1044
  'primary',
@@ -986,6 +1046,30 @@ $fluent-calendar: extend(
986
1046
  ),
987
1047
  ),
988
1048
  date-special-current-border-color: transparent,
1049
+ date-special-hover-background: (
1050
+ color: (
1051
+ 'gray',
1052
+ 200,
1053
+ ),
1054
+ ),
1055
+ date-special-focus-background: (
1056
+ color: (
1057
+ 'gray',
1058
+ 200,
1059
+ ),
1060
+ ),
1061
+ date-special-range-hover-background: (
1062
+ color: (
1063
+ 'gray',
1064
+ 200,
1065
+ ),
1066
+ ),
1067
+ date-special-range-focus-background: (
1068
+ color: (
1069
+ 'gray',
1070
+ 200,
1071
+ ),
1072
+ ),
989
1073
  header-foreground: (
990
1074
  contrast-color: (
991
1075
  'primary',
@@ -1005,9 +1089,9 @@ $fluent-calendar: extend(
1005
1089
  ),
1006
1090
  ),
1007
1091
  year-current-foreground: (
1008
- contrast-color: (
1092
+ color: (
1009
1093
  'gray',
1010
- 100,
1094
+ 900,
1011
1095
  ),
1012
1096
  ),
1013
1097
  year-current-background: (
@@ -1017,9 +1101,9 @@ $fluent-calendar: extend(
1017
1101
  ),
1018
1102
  ),
1019
1103
  year-current-hover-foreground: (
1020
- contrast-color: (
1104
+ color: (
1021
1105
  'gray',
1022
- 200,
1106
+ 900,
1023
1107
  ),
1024
1108
  ),
1025
1109
  year-current-hover-background: (
@@ -1029,9 +1113,9 @@ $fluent-calendar: extend(
1029
1113
  ),
1030
1114
  ),
1031
1115
  year-selected-foreground: (
1032
- contrast-color: (
1033
- 'primary',
1034
- 50,
1116
+ color: (
1117
+ 'gray',
1118
+ 900,
1035
1119
  ),
1036
1120
  ),
1037
1121
  year-selected-background: (
@@ -1042,9 +1126,9 @@ $fluent-calendar: extend(
1042
1126
  ),
1043
1127
  ),
1044
1128
  year-selected-hover-foreground: (
1045
- contrast-color: (
1046
- 'primary',
1047
- 100,
1129
+ color: (
1130
+ 'gray',
1131
+ 900,
1048
1132
  ),
1049
1133
  ),
1050
1134
  year-selected-hover-background: (
@@ -1055,9 +1139,9 @@ $fluent-calendar: extend(
1055
1139
  ),
1056
1140
  ),
1057
1141
  year-selected-current-foreground: (
1058
- contrast-color: (
1059
- 'primary',
1060
- 50,
1142
+ color: (
1143
+ 'gray',
1144
+ 900,
1061
1145
  ),
1062
1146
  ),
1063
1147
  year-selected-current-background: (
@@ -1068,9 +1152,9 @@ $fluent-calendar: extend(
1068
1152
  ),
1069
1153
  ),
1070
1154
  year-selected-current-hover-foreground: (
1071
- contrast-color: (
1072
- 'primary',
1073
- 100,
1155
+ color: (
1156
+ 'gray',
1157
+ 900,
1074
1158
  ),
1075
1159
  ),
1076
1160
  year-selected-current-hover-background: (
@@ -1080,10 +1164,16 @@ $fluent-calendar: extend(
1080
1164
  0.5,
1081
1165
  ),
1082
1166
  ),
1167
+ month-hover-foreground: (
1168
+ color: (
1169
+ 'gray',
1170
+ 900,
1171
+ ),
1172
+ ),
1083
1173
  month-current-foreground: (
1084
- contrast-color: (
1174
+ color: (
1085
1175
  'gray',
1086
- 100,
1176
+ 900,
1087
1177
  ),
1088
1178
  ),
1089
1179
  month-current-background: (
@@ -1093,9 +1183,9 @@ $fluent-calendar: extend(
1093
1183
  ),
1094
1184
  ),
1095
1185
  month-current-hover-foreground: (
1096
- contrast-color: (
1186
+ color: (
1097
1187
  'gray',
1098
- 200,
1188
+ 900,
1099
1189
  ),
1100
1190
  ),
1101
1191
  month-current-hover-background: (
@@ -1105,9 +1195,9 @@ $fluent-calendar: extend(
1105
1195
  ),
1106
1196
  ),
1107
1197
  month-selected-foreground: (
1108
- contrast-color: (
1109
- 'primary',
1110
- 50,
1198
+ color: (
1199
+ 'gray',
1200
+ 900,
1111
1201
  ),
1112
1202
  ),
1113
1203
  month-selected-background: (
@@ -1118,9 +1208,9 @@ $fluent-calendar: extend(
1118
1208
  ),
1119
1209
  ),
1120
1210
  month-selected-hover-foreground: (
1121
- contrast-color: (
1122
- 'primary',
1123
- 100,
1211
+ color: (
1212
+ 'gray',
1213
+ 900,
1124
1214
  ),
1125
1215
  ),
1126
1216
  month-selected-hover-background: (
@@ -1131,9 +1221,9 @@ $fluent-calendar: extend(
1131
1221
  ),
1132
1222
  ),
1133
1223
  month-selected-current-foreground: (
1134
- contrast-color: (
1135
- 'primary',
1136
- 50,
1224
+ color: (
1225
+ 'gray',
1226
+ 900,
1137
1227
  ),
1138
1228
  ),
1139
1229
  month-selected-current-background: (
@@ -1144,9 +1234,9 @@ $fluent-calendar: extend(
1144
1234
  ),
1145
1235
  ),
1146
1236
  month-selected-current-hover-foreground: (
1147
- contrast-color: (
1148
- 'primary',
1149
- 100,
1237
+ color: (
1238
+ 'gray',
1239
+ 900,
1150
1240
  ),
1151
1241
  ),
1152
1242
  month-selected-current-hover-background: (
@@ -1162,7 +1252,12 @@ $fluent-calendar: extend(
1162
1252
  600,
1163
1253
  ),
1164
1254
  ),
1165
- date-selected-current-background: transparent,
1255
+ date-selected-current-background: (
1256
+ color: (
1257
+ 'gray',
1258
+ 100,
1259
+ ),
1260
+ ),
1166
1261
  date-selected-current-hover-foreground: (
1167
1262
  contrast-color: (
1168
1263
  'primary',
@@ -1224,9 +1319,9 @@ $fluent-calendar: extend(
1224
1319
  ),
1225
1320
  ),
1226
1321
  date-selected-range-foreground: (
1227
- contrast-color: (
1322
+ color: (
1228
1323
  'gray',
1229
- 100,
1324
+ 900,
1230
1325
  ),
1231
1326
  ),
1232
1327
  date-selected-range-background: (
@@ -1247,12 +1342,6 @@ $fluent-calendar: extend(
1247
1342
  200,
1248
1343
  ),
1249
1344
  ),
1250
- date-hover-foreground: (
1251
- contrast-color: (
1252
- 'gray',
1253
- 200,
1254
- ),
1255
- ),
1256
1345
  date-hover-background: (
1257
1346
  color: (
1258
1347
  'gray',
@@ -1265,12 +1354,6 @@ $fluent-calendar: extend(
1265
1354
  200,
1266
1355
  ),
1267
1356
  ),
1268
- date-focus-foreground: (
1269
- contrast-color: (
1270
- 'gray',
1271
- 200,
1272
- ),
1273
- ),
1274
1357
  date-current-foreground: (
1275
1358
  contrast-color: (
1276
1359
  'primary',
@@ -1308,9 +1391,9 @@ $fluent-calendar: extend(
1308
1391
  ),
1309
1392
  ),
1310
1393
  date-selected-foreground: (
1311
- contrast-color: (
1394
+ color: (
1312
1395
  'gray',
1313
- 100,
1396
+ 900,
1314
1397
  ),
1315
1398
  ),
1316
1399
  date-selected-background: (
@@ -1320,9 +1403,9 @@ $fluent-calendar: extend(
1320
1403
  ),
1321
1404
  ),
1322
1405
  date-selected-hover-foreground: (
1323
- contrast-color: (
1406
+ color: (
1324
1407
  'gray',
1325
- 200,
1408
+ 900,
1326
1409
  ),
1327
1410
  ),
1328
1411
  date-selected-hover-background: (
@@ -1332,9 +1415,9 @@ $fluent-calendar: extend(
1332
1415
  ),
1333
1416
  ),
1334
1417
  date-selected-focus-foreground: (
1335
- contrast-color: (
1418
+ color: (
1336
1419
  'gray',
1337
- 200,
1420
+ 900,
1338
1421
  ),
1339
1422
  ),
1340
1423
  date-selected-focus-background: (
@@ -1346,9 +1429,6 @@ $fluent-calendar: extend(
1346
1429
  current-outline-color: transparent,
1347
1430
  current-outline-hover-color: transparent,
1348
1431
  current-outline-focus-color: transparent,
1349
- selected-outline-color: transparent,
1350
- selected-hover-outline-color: transparent,
1351
- selected-focus-outline-color: transparent,
1352
1432
  selected-current-outline-color: (
1353
1433
  color: (
1354
1434
  'gray',
@@ -1441,26 +1521,36 @@ $fluent-calendar: extend(
1441
1521
  200,
1442
1522
  ),
1443
1523
  ),
1524
+ date-special-range-foreground: (
1525
+ color: (
1526
+ 'gray',
1527
+ 900,
1528
+ ),
1529
+ ),
1444
1530
  )
1445
1531
  );
1446
1532
 
1447
1533
  /// Generates a bootstrap calendar schema.
1448
1534
  /// @type {Map}
1535
+ /// @prop {Map} date-special-hover-background [color: ('gray', 200)] - The background color of a special date.
1536
+ /// @prop {Map} date-special-focus-background [color: ('gray', 200)] - The background color of a special date.
1537
+ /// @prop {Map} date-special-range-hover-background [color: ('gray', 200)] - The :hover background color of a special date in range selection.
1538
+ /// @prop {Map} date-special-range-focus-background [color: ('gray', 200)] - The :focus background color of a special date in range selection.
1449
1539
  /// @prop {Map} date-special-foreground [color: ('gray', 900)] - The foreground color of a special date.
1450
1540
  /// @prop {Map} date-special-focus-foreground [color: ('gray', 900)] - The foreground color of a special date.
1451
1541
  /// @prop {Map} date-special-hover-foreground [color: ('gray', 900)] - The foreground color of a special date.
1452
1542
  /// @prop {Map} date-special-border-color [color: ('primary', 800)] - The outline color around a special date.
1543
+ /// @prop {Map} date-special-hover-border-color [color: ('primary', 800)] - The outline color around a special date.
1453
1544
  /// @prop {Map} date-special-range-border-color [color: ('primary', 800)] - The outline color around a special date in a range selection.
1454
1545
  /// @prop {Map} header-foreground [contrast-color: ('gray', 100)] - The header foreground color.
1455
1546
  /// @prop {Map} header-background [color: ('gray', 100)] - The header background color.
1456
- /// @prop {Map} navigation-hover-color [color: ('secondary', 500)] - The :hover color of the icon button responsible for month navigation.
1457
- /// @prop {Map} navigation-focus-color [color: ('secondary', 500)] - The :focus color of the icon button responsible for month navigation.
1458
- /// @prop {Map} picker-foreground [color: ('gray', 900)]- The foreground color of the month and year pickers.
1547
+ /// @prop {Map} picker-foreground [color: ('gray', 900)] - The foreground color of the month and year pickers.
1459
1548
  /// @prop {Map} picker-background [color: ('gray', 100)] - The background color of the month and year pickers.
1460
1549
  /// @prop {Map} year-current-foreground [color: ('gray', 900)] - The foreground color of the current year.
1461
- /// @prop {Color} year-current-background [transparent]- The background color of the current year in years view.
1462
- /// @prop {Map} year-current-hover-foreground [contrast-color: ('gray', 200)] - The :hover foreground color of the current year in years view.
1463
- /// @prop {Map} year-current-hover-background [color: ('gray' 200)] - The :hover background color of the current year in years view.
1550
+ /// @prop {Color} year-current-background [transparent] - The background color of the current year in years view.
1551
+ /// @prop {Map} year-hover-background [color: ('gray', 200)] - The :hover background color of the year in years view.
1552
+ /// @prop {Map} year-current-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current year in years view.
1553
+ /// @prop {Map} year-current-hover-background [color: ('gray', 200)] - The :hover background color of the current year in years view.
1464
1554
  /// @prop {Map} year-selected-foreground [contrast-color: ('primary', 900)] - The foreground color of the selected year.
1465
1555
  /// @prop {Map} year-selected-background [color: ('primary', 500)] - The background color of the selected year.
1466
1556
  /// @prop {Map} year-selected-hover-foreground [contrast-color: ('primary', 900)] - The foreground color of the selected year on :hover.
@@ -1469,67 +1559,55 @@ $fluent-calendar: extend(
1469
1559
  /// @prop {Map} year-selected-current-background [color: ('primary', 500)] - The foreground color of the current/selected year.
1470
1560
  /// @prop {Map} year-selected-current-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the current/selected year.
1471
1561
  /// @prop {Map} year-selected-current-hover-background [color: ('primary', 600)] - The :hover background color of the current/selected year.
1562
+ /// @prop {Map} month-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the month in months view.
1563
+ /// @prop {Map} month-hover-background [color: ('gray', 200)] - The :hover background color of the month in months view.
1472
1564
  /// @prop {Map} month-current-foreground [color: ('gray', 900)] - The foreground color of the current selected month.
1473
1565
  /// @prop {Color} month-current-background [transparent] - The background color of the current selected month.
1474
- /// @prop {Map} month-current-hover-foreground [contrast-color: ('gray', 200)] - The :hover foreground color of the current month in months view.
1566
+ /// @prop {Map} month-current-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current month in months view.
1475
1567
  /// @prop {Map} month-current-hover-background [color: ('gray', 200)] - The :hover background color of the current month in months view.
1476
1568
  /// @prop {Map} month-selected-foreground [contrast-color: ('primary', 900)] - The foreground color of the selected month in month view.
1477
1569
  /// @prop {Map} month-selected-background [color: ('primary', 500)] - The background color of the selected month in month view.
1478
- /// @prop {Map} month-selected-hover-foreground [contrast-color: ('primary', 900)]- The :hover foreground color of the selected month in month view.
1479
- /// @prop {Map} month-selected-hover-background [color: ('primary', 600)]- The :hover background color of the selected month in month view.
1570
+ /// @prop {Map} month-selected-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the selected month in month view.
1571
+ /// @prop {Map} month-selected-hover-background [color: ('primary', 600)] - The :hover background color of the selected month in month view.
1480
1572
  /// @prop {Map} month-selected-current-foreground [contrast-color: ('primary', 900)] - The foreground color of the current/selected month in month view.
1481
- /// @prop {Map} month-selected-current-background [color: ('primary', 500)]- The background color of the current/selected month in month view.
1573
+ /// @prop {Map} month-selected-current-background [color: ('primary', 500)] - The background color of the current/selected month in month view.
1482
1574
  /// @prop {Map} month-selected-current-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the current/selected month in month view.
1483
1575
  /// @prop {Map} month-selected-current-hover-background [color: ('primary', 600] - The :hover background color of the current/selected month in month view.
1484
- /// @prop {Map} date-hover-foreground [contrast-color: 'gray', 200] - The :hover foreground color of a date.
1485
1576
  /// @prop {Map} date-hover-background [color: ('gray', 200)] - The :hover background color of a date.
1486
- /// @prop {Map} date-focus-foreground [contrast-color: ('gray', 200)] - The :focus foreground color of a date.
1487
1577
  /// @prop {Map} date-focus-background [color: ('gray', 200)] - The :focus background color of a date.
1488
- /// @prop {Map} date-selected-foreground [contrast-color: ('primary', '900')] - The foreground color of the selected date.
1578
+ /// @prop {Map} date-selected-foreground [contrast-color: ('primary', 900)] - The foreground color of the selected date.
1489
1579
  /// @prop {Map} date-selected-background [color: ('primary', 500)] - The background color of the selected date.
1490
- /// @prop {Map} date-selected-hover-foreground [contrast-color: ('primary', '900')] - The :hover foreground color of the selected date.
1580
+ /// @prop {Map} date-selected-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the selected date.
1491
1581
  /// @prop {Map} date-selected-hover-background [color: ('primary', 600)] - The :hover background color of the selected date.
1492
- /// @prop {Map} date-selected-focus-foreground [contrast-color: ('primary', '900')] - The :focus foreground color of the selected date.
1582
+ /// @prop {Map} date-selected-focus-foreground [contrast-color: ('primary', 900)] - The :focus foreground color of the selected date.
1493
1583
  /// @prop {Map} date-selected-focus-background [color: ('primary', 600)] - The :focus background color of the selected date.
1494
- /// @prop {Map} date-selected-current-foreground [color: ('primary', 900)] - The foreground color of the selected current date.
1584
+ /// @prop {Map} date-selected-current-foreground [contrast-color: ('primary', 900)] - The foreground color of the selected current date.
1495
1585
  /// @prop {Map} date-selected-current-background [color: ('primary', 500)] - The background color of the selected current date.
1496
- /// @prop {Map} date-selected-current-hover-foreground [color: ('primary', 900)] - The :hover foreground color of the selected current date.
1586
+ /// @prop {Map} date-selected-current-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the selected current date.
1497
1587
  /// @prop {Map} date-selected-current-hover-background [color: ('primary', 600)] - The :hover background color of the selected current date.
1498
- /// @prop {Map} date-selected-current-focus-foreground [color: ('primary', 900)] - The :focus foreground color of the selected current date.
1499
- /// @prop {Map} date-selected-current-focus-background [color: ('primary', 500)] - The :focus background color of the selected current date.
1500
- /// @prop {Map} date-selected-current-range-foreground [color: ('gray', 900)] - The foreground color of the current date in the selected range.
1588
+ /// @prop {Map} date-selected-current-focus-foreground [date-selected-current-focus-foreground: ('primary', 900)] - The :focus foreground color of the selected current date.
1589
+ /// @prop {Map} date-selected-current-focus-background [color: ('primary', 600)] - The :focus background color of the selected current date.
1501
1590
  /// @prop {Color} date-selected-current-range-background [transparent] - The background color of the current date in the selected range.
1502
- /// @prop {Map} date-selected-current-range-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current date in the selected range.
1503
1591
  /// @prop {Map} date-selected-current-range-hover-background [color: ('gray', 200)] - The :hover background color of the current date in the selected range.
1504
- /// @prop {Map} date-selected-current-range-focus-foreground [color: ('gray', 900)] - The :focus foreground color of the current date in the selected range.
1505
1592
  /// @prop {Map} date-selected-current-range-focus-background [color: ('gray', 200)] - The :focus background color of the current date in the selected range.
1506
1593
  /// @prop {Map} date-selected-range-background [color: ('primary', 500, .24)] - The background color of the selected range.
1507
1594
  /// @prop {Map} date-selected-range-foreground [color: ('gray', 900)] - The foreground color of the selected range.
1508
- /// @prop {Map} date-selected-range-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the selected range.
1509
1595
  /// @prop {Map} date-selected-range-hover-background [color: ('gray', 200)] - The :hover background color of the selected range.
1510
- /// @prop {Map} date-selected-range-focus-foreground [color: ('gray', 900)] - The :focus foreground color of the selected range.
1511
1596
  /// @prop {Map} date-selected-range-focus-background [color: ('gray', 200)] - The :focus background color of the selected range.
1512
1597
  /// @prop {Map} date-current-foreground [color: ('gray', 900)] - The foreground color of the current date.
1513
- /// @prop {Color} date-current-background [transparent] - The background color of the current date.
1514
- /// @prop {Map} date-current-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current date.
1515
1598
  /// @prop {Map} date-current-hover-background [color: ('gray', 200)] - The :hover background color of the current date.
1516
- /// @prop {Map} date-current-focus-foreground [color: ('gray', 900)] - The :focus foreground color of the current date.
1517
1599
  /// @prop {Map} date-current-focus-background [color: ('gray', 200)] - The :focus background color of the current date.
1518
1600
  /// @prop {Map} current-outline-color [color: ('gray', 900)] - The outline color of the current year/month in year/month views.
1519
1601
  /// @prop {Map} current-hover-outline-color [color: ('gray', 900)] - The :hover outline color of the current year/month in year/month views.
1520
1602
  /// @prop {Map} current-focus-outline-color [color: ('gray', 900)] - The :focus outline color of the current year/month in year/month views.
1521
- /// @prop {Color} selected-outline-color [transparent] - The outline color of the selected year/month in year/month views.
1522
- /// @prop {Color} selected-hover-outline-color [transparent] - The :hover outline color of the selected year/month in year/month views.
1523
- /// @prop {Color} selected-focus-outline-color [transparent] - The :focus outline color of the selected year/month in year/month views.
1524
1603
  /// @prop {Map} selected-current-outline-color [color: ('gray', 900)] - The outline color of the selected current year/month in year/month views.
1525
- /// @prop {Map} selected-current-hover-outline-color [color: ('gray', 900)] - The :hover outline color of the selected current year/month in year/month views.
1526
- /// @prop {Map} selected-current-focus-outline-color [color: ('gray', 900)] - The :focus outline color of the selected current year/month in year/month views.
1604
+ /// @prop {Map} selected-current-outline-hover-color [color: ('gray', 900)] - The :hover outline color of the selected current year/month in year/month views.
1605
+ /// @prop {Map} selected-current-outline-focus-color [color: ('gray', 900)] - The :focus outline color of the selected current year/month in year/month views.
1527
1606
  /// @prop {Map} border-color [color: ('gray', 300)] - The calendar border color.
1528
- /// @prop {Map} weekday-color [color: 'info', 300] - The foreground color for weekday labels.
1529
- /// @prop {Map} weekend-color [color: ('gray', 900)] - The foreground color of the weekend days.
1607
+ /// @prop {Map} weekday-color [color: ('info', 300)] - The foreground color for weekday labels.
1530
1608
  /// @prop {Color} week-number-background [transparent] - The background color of the week number column.
1531
1609
  /// @prop {List} date-border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for the date outline.
1532
- /// @prop {List} date-range-border-radius [(rem(0), rem(0), rem(0))] - The border radius used for the date outline in range selection.
1610
+ /// @prop {List} date-range-border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for the date outline in range selection.
1533
1611
  /// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for the calendar.
1534
1612
  /// @prop {List} month-year-border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for the month/year in month/year view.
1535
1613
  /// @prop {List} week-number-border-radius [(rem(0), rem(0), rem(8px))] - The border radius used for the week numbers column.
@@ -1540,11 +1618,36 @@ $fluent-calendar: extend(
1540
1618
  /// @prop {Map} date-selected-current-border-color [color: ('gray', 900)] - The border color of the selected current date.
1541
1619
  /// @prop {Map} date-selected-current-hover-border-color [color: ('gray', 900)] - The :hover border color of the selected current date.
1542
1620
  /// @prop {Map} date-selected-current-focus-border-color [color: ('gray', 900)] - The :focus border color of the selected current date.
1543
- /// @prop {List} actions-divider-color [color: ('gray', 300)] - The border color used for the date-picker actions divider.
1621
+ /// @prop {Map} actions-divider-color [color: ('gray', 300)] - The border color used for the date-picker actions divider.
1622
+ /// @prop {Map} date-special-range-foreground [color: ('gray', 900)] - The foreground color of a special date in rage selection.
1544
1623
  /// @requires {Map} $light-calendar
1545
1624
  $bootstrap-calendar: extend(
1546
1625
  $light-calendar,
1547
1626
  (
1627
+ date-special-hover-background: (
1628
+ color: (
1629
+ 'gray',
1630
+ 200,
1631
+ ),
1632
+ ),
1633
+ date-special-focus-background: (
1634
+ color: (
1635
+ 'gray',
1636
+ 200,
1637
+ ),
1638
+ ),
1639
+ date-special-range-hover-background: (
1640
+ color: (
1641
+ 'gray',
1642
+ 200,
1643
+ ),
1644
+ ),
1645
+ date-special-range-focus-background: (
1646
+ color: (
1647
+ 'gray',
1648
+ 200,
1649
+ ),
1650
+ ),
1548
1651
  date-special-foreground: (
1549
1652
  color: (
1550
1653
  'gray',
@@ -1569,6 +1672,12 @@ $bootstrap-calendar: extend(
1569
1672
  800,
1570
1673
  ),
1571
1674
  ),
1675
+ date-special-hover-border-color: (
1676
+ color: (
1677
+ 'primary',
1678
+ 800,
1679
+ ),
1680
+ ),
1572
1681
  date-special-range-border-color: (
1573
1682
  color: (
1574
1683
  'primary',
@@ -1605,16 +1714,10 @@ $bootstrap-calendar: extend(
1605
1714
  100,
1606
1715
  ),
1607
1716
  ),
1608
- navigation-hover-color: (
1609
- color: (
1610
- 'secondary',
1611
- 500,
1612
- ),
1613
- ),
1614
- navigation-focus-color: (
1717
+ year-hover-background: (
1615
1718
  color: (
1616
- 'secondary',
1617
- 500,
1719
+ 'gray',
1720
+ 200,
1618
1721
  ),
1619
1722
  ),
1620
1723
  year-current-foreground: (
@@ -1625,9 +1728,9 @@ $bootstrap-calendar: extend(
1625
1728
  ),
1626
1729
  year-current-background: transparent,
1627
1730
  year-current-hover-foreground: (
1628
- contrast-color: (
1731
+ color: (
1629
1732
  'gray',
1630
- 200,
1733
+ 900,
1631
1734
  ),
1632
1735
  ),
1633
1736
  year-current-hover-background: (
@@ -1684,6 +1787,18 @@ $bootstrap-calendar: extend(
1684
1787
  600,
1685
1788
  ),
1686
1789
  ),
1790
+ month-hover-foreground: (
1791
+ color: (
1792
+ 'gray',
1793
+ 900,
1794
+ ),
1795
+ ),
1796
+ month-hover-background: (
1797
+ color: (
1798
+ 'gray',
1799
+ 200,
1800
+ ),
1801
+ ),
1687
1802
  month-current-foreground: (
1688
1803
  color: (
1689
1804
  'gray',
@@ -1692,9 +1807,9 @@ $bootstrap-calendar: extend(
1692
1807
  ),
1693
1808
  month-current-background: transparent,
1694
1809
  month-current-hover-foreground: (
1695
- contrast-color: (
1810
+ color: (
1696
1811
  'gray',
1697
- 200,
1812
+ 900,
1698
1813
  ),
1699
1814
  ),
1700
1815
  month-current-hover-background: (
@@ -1751,24 +1866,12 @@ $bootstrap-calendar: extend(
1751
1866
  600,
1752
1867
  ),
1753
1868
  ),
1754
- date-hover-foreground: (
1755
- contrast-color: (
1756
- 'gray',
1757
- 200,
1758
- ),
1759
- ),
1760
1869
  date-hover-background: (
1761
1870
  color: (
1762
1871
  'gray',
1763
1872
  200,
1764
1873
  ),
1765
1874
  ),
1766
- date-focus-foreground: (
1767
- contrast-color: (
1768
- 'gray',
1769
- 200,
1770
- ),
1771
- ),
1772
1875
  date-focus-background: (
1773
1876
  color: (
1774
1877
  'gray',
@@ -1817,25 +1920,12 @@ $bootstrap-calendar: extend(
1817
1920
  900,
1818
1921
  ),
1819
1922
  ),
1820
- date-current-background: transparent,
1821
- date-current-hover-foreground: (
1822
- color: (
1823
- 'gray',
1824
- 900,
1825
- ),
1826
- ),
1827
1923
  date-current-hover-background: (
1828
1924
  color: (
1829
1925
  'gray',
1830
1926
  200,
1831
1927
  ),
1832
1928
  ),
1833
- date-current-focus-foreground: (
1834
- color: (
1835
- 'gray',
1836
- 900,
1837
- ),
1838
- ),
1839
1929
  date-current-focus-background: (
1840
1930
  color: (
1841
1931
  'gray',
@@ -1878,31 +1968,13 @@ $bootstrap-calendar: extend(
1878
1968
  600,
1879
1969
  ),
1880
1970
  ),
1881
- date-selected-current-range-foreground: (
1882
- color: (
1883
- 'gray',
1884
- 900,
1885
- ),
1886
- ),
1887
1971
  date-selected-current-range-background: transparent,
1888
- date-selected-current-range-hover-foreground: (
1889
- color: (
1890
- 'gray',
1891
- 900,
1892
- ),
1893
- ),
1894
1972
  date-selected-current-range-hover-background: (
1895
1973
  color: (
1896
1974
  'gray',
1897
1975
  200,
1898
1976
  ),
1899
1977
  ),
1900
- date-selected-current-range-focus-foreground: (
1901
- color: (
1902
- 'gray',
1903
- 900,
1904
- ),
1905
- ),
1906
1978
  date-selected-current-range-focus-background: (
1907
1979
  color: (
1908
1980
  'gray',
@@ -1922,24 +1994,12 @@ $bootstrap-calendar: extend(
1922
1994
  0.24,
1923
1995
  ),
1924
1996
  ),
1925
- date-selected-range-hover-foreground: (
1926
- color: (
1927
- 'gray',
1928
- 900,
1929
- ),
1930
- ),
1931
1997
  date-selected-range-hover-background: (
1932
1998
  color: (
1933
1999
  'gray',
1934
2000
  200,
1935
2001
  ),
1936
2002
  ),
1937
- date-selected-range-focus-foreground: (
1938
- color: (
1939
- 'gray',
1940
- 900,
1941
- ),
1942
- ),
1943
2003
  date-selected-range-focus-background: (
1944
2004
  color: (
1945
2005
  'gray',
@@ -1988,21 +2048,6 @@ $bootstrap-calendar: extend(
1988
2048
  900,
1989
2049
  ),
1990
2050
  ),
1991
- current-outline-hover-color: (
1992
- color: (
1993
- 'gray',
1994
- 900,
1995
- ),
1996
- ),
1997
- current-outline-focus-color: (
1998
- color: (
1999
- 'gray',
2000
- 900,
2001
- ),
2002
- ),
2003
- selected-outline-color: transparent,
2004
- selected-hover-outline-color: transparent,
2005
- selected-focus-outline-color: transparent,
2006
2051
  selected-current-outline-color: (
2007
2052
  color: (
2008
2053
  'gray',
@@ -2027,12 +2072,6 @@ $bootstrap-calendar: extend(
2027
2072
  300,
2028
2073
  ),
2029
2074
  ),
2030
- weekend-color: (
2031
- color: (
2032
- 'gray',
2033
- 900,
2034
- ),
2035
- ),
2036
2075
  week-number-background: transparent,
2037
2076
  month-year-border-radius: (
2038
2077
  border-radius: (
@@ -2076,29 +2115,37 @@ $bootstrap-calendar: extend(
2076
2115
  300,
2077
2116
  ),
2078
2117
  ),
2118
+ date-special-range-foreground: (
2119
+ color: (
2120
+ 'gray',
2121
+ 900,
2122
+ ),
2123
+ ),
2079
2124
  )
2080
2125
  );
2081
2126
 
2082
2127
  /// Generates an indigo calendar schema.
2083
2128
  /// @type {Map}
2084
2129
  /// @prop {Map} content-foreground [color: ('gray', 800)] - The foreground color of the days, months and years views.
2130
+ /// @prop {Map} weekend-color [color: ('gray', 800)] - The foreground color of the weekend days.
2085
2131
  /// @prop {Map} content-background [contrast-color: ('gray', 900)] - The background color of the days, months and years views.
2086
2132
  /// @prop {Map} header-foreground [color: ('gray', 800)] - The header foreground color.
2087
2133
  /// @prop {Map} header-background [contrast-color: ('gray', 900)] - The header background color.
2088
- /// @prop {Map} picker-foreground [color: 'gray' 700] - The foreground color of the month and year pickers.
2134
+ /// @prop {Map} picker-foreground [color: ('gray', 700)] - The foreground color of the month and year pickers.
2089
2135
  /// @prop {Map} picker-background [contrast-color: ('gray', 900)] - The background color of the month and year pickers.
2090
- /// @prop {Map} picker-hover-foreground [color: 'gray' 900] - The :hover foreground color of the month and year pickers.
2091
- /// @prop {Map} picker-focus-foreground [color: 'gray' 900] - The :focus foreground color of the month and year pickers.
2136
+ /// @prop {Map} picker-hover-foreground [color: ('primary', 500)] - The :hover foreground color of the month and year pickers.
2137
+ /// @prop {Map} picker-focus-foreground [color: ('primary', 500)] - The :focus foreground color of the month and year pickers.
2092
2138
  /// @prop {Map} navigation-color [color: ('gray', 600)] - the color of the buttons responsible for navigation.
2093
2139
  /// @prop {Map} navigation-hover-color [color: ('primary', 500)] - The :hover color of the icon button responsible for month navigation.
2094
2140
  /// @prop {Map} navigation-focus-color [color: ('primary', 500)] - The :focus color of the icon button responsible for month navigation.
2095
2141
  /// @prop {Map} week-number-foreground [color: ('gray', 600)] - The foreground color of the week number column.
2096
2142
  /// @prop {Map} week-number-background [color: ('gray', 900, .05)] - The background color of the week number column.
2097
- /// @prop {List} week-number-border-radius [(rem(4px), rem(0), rem(8px))] - The border radius used for the week numbers column.
2098
2143
  /// @prop {Map} date-hover-background [color: ('gray', 900, .05)] - The :hover background color of a date.
2099
2144
  /// @prop {Map} date-focus-background [color: ('gray', 900, .05)] - The :focus background color of date.
2100
2145
  /// @prop {Map} date-current-foreground [color: ('gray', 800)] - The foreground color of the current date.
2101
2146
  /// @prop {Map} date-disabled-foreground [color: ('gray', 900, .2)] - The foreground color of disabled dates.
2147
+ /// @prop {Map} date-disabled-range-foreground [color: ('gray', 800, .38)] - The foreground color of disabled dates in range selection.
2148
+ /// @prop {Map} date-current-hover-background [color: ('gray', 900, .05)] - The :hover background color of the current date.
2102
2149
  /// @prop {Map} date-current-border-color [color: ('primary', 500)] - The border color of the current date.
2103
2150
  /// @prop {Map} date-current-hover-border-color [color: ('primary', 400)] - The :hover border color of the current date.
2104
2151
  /// @prop {Map} date-current-focus-border-color [color: ('primary', 400)] - The :focus border color of the current date.
@@ -2108,6 +2155,8 @@ $bootstrap-calendar: extend(
2108
2155
  /// @prop {Map} date-special-hover-background [color: ('primary', 50)] - The background color of a special date.
2109
2156
  /// @prop {Map} date-special-focus-foreground [color: ('primary', 700)] - The foreground color of a special date.
2110
2157
  /// @prop {Map} date-special-focus-background [color: ('primary', 50)] - The background color of a special date.
2158
+ /// @prop {Map} date-special-range-hover-background [color: ('primary', 50)] - The :hover background color of a special date in range selection.
2159
+ /// @prop {Map} date-special-range-focus-background [color: ('primary', 50)] - The :focus background color of a special date in range selection.
2111
2160
  /// @prop {Map} date-selected-foreground [contrast-color: ('primary', 500)] - The foreground color of the selected date.
2112
2161
  /// @prop {Map} date-selected-background [color: ('primary', 500)] - The background color of the selected date.
2113
2162
  /// @prop {Map} date-selected-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the selected date.
@@ -2116,32 +2165,33 @@ $bootstrap-calendar: extend(
2116
2165
  /// @prop {Map} date-selected-focus-background [color: ('primary', 400)] - The :focus background color of the selected date.
2117
2166
  /// @prop {Map} date-selected-current-foreground [contrast-color: ('primary', 500)] - The foreground color of the selected current date.
2118
2167
  /// @prop {Map} date-selected-current-background [color: ('primary', 500)] - The background color of the selected current date.
2119
- /// @prop {Map} date-selected-current-hover-foreground [contrast-color: ('primary', 400)] - The :hover foreground color of the selected current date.
2168
+ /// @prop {Map} date-selected-current-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the selected current date.
2120
2169
  /// @prop {Map} date-selected-current-hover-background [color: ('primary', 400)] - The :hover background color of the selected current date.
2121
- /// @prop {Map} date-selected-current-focus-foreground [contrast-color: ('primary', 400)] - The :focus foreground color of the selected current date.
2170
+ /// @prop {Map} date-selected-current-focus-foreground [contrast-color: ('primary', 900)] - The :focus foreground color of the selected current date.
2122
2171
  /// @prop {Map} date-selected-current-focus-background [color: ('primary', 400)] - The :focus background color of the selected current date.
2123
2172
  /// @prop {Map} date-selected-current-border-color [contrast-color: ('primary', 900, .6)] - The border color of the selected current date.
2124
2173
  /// @prop {Map} date-selected-current-hover-border-color [contrast-color: ('primary', 900, .6)] - The :hover border color of the selected current date.
2125
2174
  /// @prop {Map} date-selected-current-focus-border-color [contrast-color: ('primary', 900,. 6)] - The :focus border color of the selected current date.
2126
2175
  /// @prop {Map} date-selected-range-foreground [color: ('gray', 800)] - The foreground color of the selected range.
2127
- /// @prop {Map} date-selected-range-background [color: ('secondary', 50)] - The background color of the selected range.
2128
- /// @prop {Map} date-selected-range-hover-background [color: ('secondary', 100)] - The :hover background color of the selected range.
2129
- /// @prop {Map} date-selected-range-focus-background [color: ('secondary', 100)] - The :focus background color of the selected range.
2130
- /// @prop {Color} date-selected-current-range-background [transparent] - The background color of the current date in the selected range.
2131
- /// @prop {Map} date-selected-current-range-hover-background [color: ('gray', 100)] - The :hover background color of the current date in the selected range.
2132
- /// @prop {Map} date-selected-current-range-focus-background [color: ('gray', 900)] - The :focus background color of the current date in the selected range.
2176
+ /// @prop {Map} date-selected-current-range-foreground [color: ('gray', 800)] - The foreground color of the current date in the selected range.
2177
+ /// @prop {Map} date-selected-range-background [color: ('primary', 300, .2)] - The background color of the selected range.
2178
+ /// @prop {Map} date-selected-range-hover-background [color: ('gray', 900, .05)] - The :hover background color of the selected range.
2179
+ /// @prop {Map} date-selected-range-focus-background [color: ('gray', 900, .05)] - The :focus background color of the selected range.
2180
+ /// @prop {Map} date-selected-current-range-background [color: ('primary', 300, .02)] - The background color of the current date in the selected range.
2181
+ /// @prop {Map} date-selected-current-range-hover-background [color: ('gray', 900, .05)] - The :hover background color of the current date in the selected range.
2182
+ /// @prop {Map} date-selected-current-range-focus-background [color: ('gray', 900, .05)] - The :focus background color of the current date in the selected range.
2133
2183
  /// @prop {Map} border-color [color: ('gray', 400)] - The calendar border color.
2134
2184
  /// @prop {Color} date-special-border-color [transparent] - The outline color around a special date.
2135
- /// @prop {Map} year-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the year in years view.
2136
- /// @prop {Map} year-hover-background [color: ('grey', 900, .05)] - The :hover background color of the year in years view.
2185
+ /// @prop {Color} date-special-hover-border-color [transparent] - The outline color around a special date.
2186
+ /// @prop {Map} year-hover-background [color: ('gray', 900, .05)] - The :hover background color of the year in years view.
2137
2187
  /// @prop {Map} year-current-foreground [color: ('gray', 900)] - The foreground color of the current year.
2138
- /// @prop {Color} year-current-background [transparent]- The background color of the current year in years view.
2188
+ /// @prop {Color} year-current-background [transparent] - The background color of the current year in years view.
2139
2189
  /// @prop {Map} year-current-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current year in years view.
2140
- /// @prop {Map} year-current-hover-background [color: ('grey', 900, .05)] - The :hover background color of the current year in years view.
2141
- /// @prop {Map} year-selected-foreground [contrast-color: ('primary', 900)] - The foreground color of the selected year.
2142
- /// @prop {Map} year-selected-background [color: ('primary', 500)]- The background color of the selected year in years view.
2190
+ /// @prop {Map} year-current-hover-background [color: ('gray', 900, .05)] - The :hover background color of the current year in years view.
2191
+ /// @prop {Map} year-selected-foreground [contrast-color: ('primary', 500)] - The foreground color of the selected year.
2192
+ /// @prop {Map} year-selected-background [color: ('primary', 500)] - The background color of the selected year in years view.
2143
2193
  /// @prop {Map} year-selected-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the selected year in years view.
2144
- /// @prop {Map} year-selected-hover-background [color: ('primary' 400)] - The :hover background color of the selected year in years view.
2194
+ /// @prop {Map} year-selected-hover-background [color: ('primary', 400)] - The :hover background color of the selected year in years view.
2145
2195
  /// @prop {Map} year-selected-current-foreground [contrast-color: ('primary', 500)] - The foreground color of the current/selected year.
2146
2196
  /// @prop {Map} year-selected-current-background [color: ('primary', 500)] - The foreground color of the current/selected year.
2147
2197
  /// @prop {Map} year-selected-current-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the current/selected year.
@@ -2150,24 +2200,28 @@ $bootstrap-calendar: extend(
2150
2200
  /// @prop {Map} month-hover-background [color: ('gray', 900, .05)] - The :hover background color of the month inside the months view.
2151
2201
  /// @prop {Map} month-current-foreground [color: ('gray', 900)] - The foreground color of the current month in month view.
2152
2202
  /// @prop {Color} month-current-background [transparent] - The background color of the current month in month view.
2153
- /// @prop {Map} month-current-hover-foreground [color: ('gray', 900)]- The :hover foreground color of the current month in month view.
2154
- /// @prop {Map} month-current-hover-background [color: ('gray', 900, .05)]- The :hover background color of the current month in month view.
2203
+ /// @prop {Map} month-current-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current month in month view.
2204
+ /// @prop {Map} month-current-hover-background [color: ('gray', 900, .05)] - The :hover background color of the current month in month view.
2155
2205
  /// @prop {Map} month-selected-foreground [contrast-color: ('primary', 500)] - The foreground color of the selected month in month view.
2156
2206
  /// @prop {Map} month-selected-background [color: ('primary', 500)] - The background color of the selected month in month view.
2157
- /// @prop {Map} month-selected-hover-foreground [contrast-color: ('primary', 900)]- The :hover foreground color of the selected month in month view.
2158
- /// @prop {Map} month-selected-hover-background [color: ('primary', 400)]- The :hover background color of the selected month in month view.
2207
+ /// @prop {Map} month-selected-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the selected month in month view.
2208
+ /// @prop {Map} month-selected-hover-background [color: ('primary', 400)] - The :hover background color of the selected month in month view.
2159
2209
  /// @prop {Map} month-selected-current-foreground [contrast-color: ('primary', 500)] - The foreground color of the current/selected month in month view.
2160
- /// @prop {Map} month-selected-current-background [color: ('primary', 500)]- The background color of the current/selected month in month view.
2210
+ /// @prop {Map} month-selected-current-background [color: ('primary', 500)] - The background color of the current/selected month in month view.
2161
2211
  /// @prop {Map} month-selected-current-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the current/selected month in month view.
2162
2212
  /// @prop {Map} month-selected-current-hover-background [color: ('primary', 400)] - The :hover background color of the current/selected month in month view.
2163
2213
  /// @prop {Map} current-outline-color [color: ('primary', 500)] - The outline color of the current year/month in year/month views.
2164
2214
  /// @prop {Map} current-outline-hover-color [color: ('primary', 400)] - The :hover outline color of the current year/month in year/month views.
2165
2215
  /// @prop {Map} current-outline-focus-color [color: ('primary', 400)] - The :focus outline color of the current year/month in year/month views.
2166
2216
  /// @prop {Map} selected-current-outline-color [contrast-color: ('gray', 900, .6)] - The outline color of the selected current year/month in year/month views.
2167
- /// @prop {Map} selected-current-hover-outline-color [contrast-color: ('gray', 900, .6)] - The :hover outline color of the selected current year/month in year/month views.
2168
- /// @prop {Map} selected-current-focus-outline-color [contrast-color: ('gray', 900, .6)] - The :focus outline color of the selected current year/month in year/month views.
2217
+ /// @prop {Map} selected-current-outline-hover-color [contrast-color: ('gray', 900, .6)] - The :hover outline color of the selected current year/month in year/month views.
2218
+ /// @prop {Map} selected-current-outline-focus-color [contrast-color: ('gray', 900, .6)] - The :focus outline color of the selected current year/month in year/month views.
2169
2219
  /// @prop {List} inner-size [(rem(24px), rem(28px), rem(32px))] - The size of the inner element of a date(often used to outline the special date)
2170
- /// @prop {List} actions-divider-color [color: ('gray', 400)] - The border color used for the date-picker actions divider.
2220
+ /// @prop {List} border-radius [(rem(6px), rem(0), rem(6px))] - The border radius used for calendar.
2221
+ /// @prop {List} week-number-border-radius [(rem(4px), rem(0), rem(4px))] - The border radius used for the week numbers column.
2222
+ /// @prop {Map} actions-divider-color [color: ('gray', 400)] - The border color used for the date-picker actions divider.
2223
+ /// @prop {Map} date-special-range-foreground [color: ('primary', 500)] - The foreground color of a special date in rage selection.
2224
+ /// @prop {Map} date-special-range-background [color: ('primary', 50, .7)] - The background color of a special date in range selection.
2171
2225
  /// @requires {Map} $light-calendar
2172
2226
  $indigo-calendar: extend(
2173
2227
  $light-calendar,
@@ -2185,6 +2239,19 @@ $indigo-calendar: extend(
2185
2239
  800,
2186
2240
  ),
2187
2241
  ),
2242
+ date-current-hover-background: (
2243
+ color: (
2244
+ 'gray',
2245
+ 900,
2246
+ 0.05,
2247
+ ),
2248
+ ),
2249
+ weekend-color: (
2250
+ color: (
2251
+ 'gray',
2252
+ 800,
2253
+ ),
2254
+ ),
2188
2255
  content-background: (
2189
2256
  contrast-color: (
2190
2257
  'gray',
@@ -2217,14 +2284,14 @@ $indigo-calendar: extend(
2217
2284
  ),
2218
2285
  picker-hover-foreground: (
2219
2286
  color: (
2220
- 'gray',
2221
- 900,
2287
+ 'primary',
2288
+ 500,
2222
2289
  ),
2223
2290
  ),
2224
2291
  picker-focus-foreground: (
2225
2292
  color: (
2226
- 'gray',
2227
- 900,
2293
+ 'primary',
2294
+ 500,
2228
2295
  ),
2229
2296
  ),
2230
2297
  navigation-color: (
@@ -2262,7 +2329,14 @@ $indigo-calendar: extend(
2262
2329
  border-radius: (
2263
2330
  rem(4px),
2264
2331
  rem(0),
2265
- rem(8px),
2332
+ rem(4px),
2333
+ ),
2334
+ ),
2335
+ border-radius: (
2336
+ border-radius: (
2337
+ rem(6px),
2338
+ rem(0),
2339
+ rem(6px),
2266
2340
  ),
2267
2341
  ),
2268
2342
  date-hover-background: (
@@ -2292,6 +2366,13 @@ $indigo-calendar: extend(
2292
2366
  0.2,
2293
2367
  ),
2294
2368
  ),
2369
+ date-disabled-range-foreground: (
2370
+ color: (
2371
+ 'gray',
2372
+ 800,
2373
+ 0.38,
2374
+ ),
2375
+ ),
2295
2376
  date-current-border-color: (
2296
2377
  color: (
2297
2378
  'primary',
@@ -2323,6 +2404,19 @@ $indigo-calendar: extend(
2323
2404
  0.7,
2324
2405
  ),
2325
2406
  ),
2407
+ date-special-range-foreground: (
2408
+ color: (
2409
+ 'primary',
2410
+ 500,
2411
+ ),
2412
+ ),
2413
+ date-special-range-background: (
2414
+ color: (
2415
+ 'primary',
2416
+ 50,
2417
+ 0.7,
2418
+ ),
2419
+ ),
2326
2420
  date-special-hover-foreground: (
2327
2421
  color: (
2328
2422
  'primary',
@@ -2347,7 +2441,20 @@ $indigo-calendar: extend(
2347
2441
  50,
2348
2442
  ),
2349
2443
  ),
2444
+ date-special-range-hover-background: (
2445
+ color: (
2446
+ 'primary',
2447
+ 50,
2448
+ ),
2449
+ ),
2450
+ date-special-range-focus-background: (
2451
+ color: (
2452
+ 'primary',
2453
+ 50,
2454
+ ),
2455
+ ),
2350
2456
  date-special-border-color: transparent,
2457
+ date-special-hover-border-color: transparent,
2351
2458
  date-selected-foreground: (
2352
2459
  contrast-color: (
2353
2460
  'primary',
@@ -2374,7 +2481,7 @@ $indigo-calendar: extend(
2374
2481
  ),
2375
2482
  date-selected-focus-foreground: (
2376
2483
  contrast-color: (
2377
- 'secondary',
2484
+ 'primary',
2378
2485
  900,
2379
2486
  ),
2380
2487
  ),
@@ -2441,6 +2548,12 @@ $indigo-calendar: extend(
2441
2548
  0.6,
2442
2549
  ),
2443
2550
  ),
2551
+ date-selected-current-range-foreground: (
2552
+ color: (
2553
+ 'gray',
2554
+ 800,
2555
+ ),
2556
+ ),
2444
2557
  date-selected-range-foreground: (
2445
2558
  color: (
2446
2559
  'gray',
@@ -2495,12 +2608,6 @@ $indigo-calendar: extend(
2495
2608
  400,
2496
2609
  ),
2497
2610
  ),
2498
- year-hover-foreground: (
2499
- color: (
2500
- 'gray',
2501
- 900,
2502
- ),
2503
- ),
2504
2611
  year-hover-background: (
2505
2612
  color: (
2506
2613
  'gray',