igniteui-theming 10.0.0 → 10.1.0-beta.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 (3) hide show
  1. package/package.json +1 -1
  2. package/sass/themes/schemas/components/dark/_calendar.scss +99 -73
  3. package/sass/themes/schemas/components/light/_calendar.scss +207 -91
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "igniteui-theming",
3
- "version": "10.0.0",
3
+ "version": "10.1.0-beta.1",
4
4
  "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/sass/themes/schemas/components/dark/_calendar.scss CHANGED
@@ -443,10 +443,10 @@ $dark-bootstrap-calendar: extend(
443
443
  /// Generates a dark indigo calendar schema.
444
444
  /// @type {Map}
445
445
  /// @prop {Map} content-foreground [color: ('gray', 900)] - The foreground color of the days, months and years views.
446
- /// @prop {Map} date-current-focus-foreground [contrast-color: ('gray', 50)] - The :focus foreground color of the current date.
447
446
  /// @prop {Map} ym-hover-background [contrast-color: ('gray', 50, .1)] - The :hover background color of the month/year.
448
447
  /// @prop {Map} ym-current-hover-background [contrast-color: ('gray', 900, .1)] - The :hover background color of the current month/year.
449
448
  /// @prop {Map} date-selected-current-range-hover-background [contrast-color: ('gray', 50, .1)] - The :hover background color of the current date in the selected range.
449
+ /// @prop {Map} date-selected-current-range-focus-background [contrast-color: ('gray', 50, .1)] - The :focus background color of the current date in the selected range.
450
450
  /// @prop {Map} header-background [color: ('gray', 50)] - The header background color.
451
451
  /// @prop {Map} content-background [color: ('gray', 50)] - The background color of the days, months and years views.
452
452
  /// @prop {Map} picker-background [color: ('gray', 50)] - The background color of the month and year pickers.
@@ -455,22 +455,28 @@ $dark-bootstrap-calendar: extend(
455
455
  /// @prop {Map} date-hover-background [contrast-color: ('gray', 50, .1)] - The :hover background color of a date.
456
456
  /// @prop {Map} date-focus-foreground [contrast-color: ('gray', 50)] - The :focus foreground color of a date.
457
457
  /// @prop {Map} date-focus-background [contrast-color: ('gray', 50, .1)] - The :focus background color of date.
458
- /// @prop {Map} date-current-foreground [color: ('gray', 900)] - The foreground color of the current date.
459
458
  /// @prop {Map} date-disabled-foreground [color: ('gray', 500, .5)] - The foreground color of disabled dates.
460
459
  /// @prop {Map} date-disabled-range-foreground [color: ('gray', 900, .38)] - The foreground color of disabled dates.
461
- /// @prop {Map} date-current-border-color [color: ('primary', 400)] - The border color of the current date.
462
- /// @prop {Map} date-current-hover-border-color [color: ('primary', 300)] - The :hover border color of the current date.
463
- /// @prop {Map} date-current-focus-border-color [color: ('primary', 300)] - The :focus border color of the current date.
464
- /// @prop {Map} date-special-range-foreground [color: ('primary', 50)] - The foreground color of a special date in rage selection.
460
+ /// @prop {Map} date-current-foreground [color: ('gray', 900)] - The foreground color of the current date.
461
+ /// @prop {Map} date-current-background [color: ('primary', 700, .5)] - The background color of the current date.
462
+ /// @prop {Map} date-current-hover-background [color: ('primary', 700)] - The :hover background color of the current date.
463
+ /// @prop {Map} date-current-focus-background [color: ('primary', 700)] - The :focus background color of the current date.
464
+ /// @prop {Map} date-current-focus-foreground [contrast-color: ('gray', 50)] - The :focus foreground color of the current date.
465
+ /// @prop {Map} date-current-border-color [color: ('primary', 300)] - The border color of the current date.
466
+ /// @prop {Map} date-current-hover-border-color [color: ('primary', 200)] - The :hover border color of the current date.
467
+ /// @prop {Map} date-current-focus-border-color [color: ('primary', 200)] - The :focus border color of the current date.
468
+ /// @prop {Map} date-special-range-foreground [color: ('primary', 100)] - The foreground color of a special date in rage selection.
465
469
  /// @prop {Map} date-special-range-background [color: ('primary', 600, .4)] - The background color of a special date in range selection.
466
- /// @prop {Map} date-special-foreground [color: ('primary', 50)] - The foreground color of a special date.
467
- /// @prop {Map} date-special-background [color: ('primary', 600, .4)] - The background color of a special date.
468
- /// @prop {Map} date-special-hover-foreground [contrast-color: ('primary', 600)] - The foreground color of a special date.
469
- /// @prop {Map} date-special-hover-background [color: ('primary', 400, .7)] - The background color of a special date.
470
- /// @prop {Map} date-special-focus-foreground [contrast-color: ('primary', 600)] - The foreground color of a special date.
471
- /// @prop {Map} date-special-focus-background [color: ('primary', 400, .7)] - The background color of a special date.
470
+ /// @prop {Map} date-special-foreground [color: ('primary', 100)] - The foreground color of a special date.
471
+ /// @prop {Map} date-special-hover-foreground [color: ('primary', 50)] - The :hover foreground color of a special date.
472
+ /// @prop {Map} date-special-hover-background [contrast-color: ('gray', 50, .1)] - The :hover background color of a special date.
473
+ /// @prop {Map} date-special-focus-foreground [color: ('primary', 50)] - The :focus foreground color of a special date.
474
+ /// @prop {Map} date-special-focus-background [contrast-color: ('gray', 50, .1)] - The :focus background color of a special date.
472
475
  /// @prop {Map} date-special-range-hover-background [color: ('primary', 600, .7)] - The :hover background color of a special date in range selection.
473
476
  /// @prop {Map} date-special-range-focus-background [color: ('primary', 600, .7)] - The :focus background color of a special date in range selection.
477
+ /// @prop {Map} date-special-border-color [color: ('primary', 100)] - The outline color around a special date.
478
+ /// @prop {Map} date-special-hover-border-color [color: ('primary', 50)] - The outline color around a special date on hover.
479
+ /// @prop {Map} date-special-range-border-color [color: ('primary', 100)] - The outline color around a special date in range selection.
474
480
  /// @prop {Map} navigation-hover-color [color: ('primary', 300)] - The :hover color of the icon button responsible for month navigation.
475
481
  /// @prop {Map} navigation-focus-color [color: ('primary', 300)] - The :focus color of the icon button responsible for month navigation.
476
482
  /// @prop {Мап} actions-divider-color [color: ('gray', 100)] - The border color used for the date-picker actions divider.
@@ -479,13 +485,11 @@ $dark-bootstrap-calendar: extend(
479
485
  /// @prop {Map} week-number-foreground [color: ('gray', 500)] - The foreground color of the week number column.
480
486
  /// @prop {Map} week-number-background [contrast-color: ('gray', 50, .05)] - The background color of the week number column.
481
487
  /// @prop {Map} date-selected-range-background [color: ('primary', 400, .2)] - The background color of the selected range.
482
- /// @prop {Map} ym-current-outline-hover-color [color: ('primary', 300)] - The :hover outline color of the current month/year.
483
- /// @prop {Map} ym-current-outline-focus-color [color: ('primary', 300)] - The :focus outline color of the current month/year.
484
- /// @prop {Map} ym-current-outline-color [color: ('primary', 400)] - The outline color of the current month/year.
485
- /// @prop {Map} ym-selected-current-outline-color [contrast-color: ('gray', 50, .6)] - The outline color of the selected current month/year.
486
- /// @prop {Map} ym-selected-current-outline-hover-color [contrast-color: ('gray', 50, .6)] - The :hover outline color of the selected current month/year.
487
- /// @prop {Map} ym-selected-current-outline-focus-color [contrast-color: ('gray', 50, .6)] - The :focus outline color of the selected current month/year.
488
- /// @prop {Map} date-current-hover-background [contrast-color: ('gray', 50, .1)] - The :hover background color of the current date.
488
+ /// @prop {Map} ym-current-background [color: ('primary', 700, .5)] - The background color of the current month/year.
489
+ /// @prop {Map} ym-current-hover-background [color: (color: ('primary', 700)] - The :hover background color of the current month/year.
490
+ /// @prop {Map} ym-current-outline-hover-color [color: ('primary', 200)] - The :hover outline color of the current month/year.
491
+ /// @prop {Map} ym-current-outline-focus-color [color: ('primary', 200)] - The :focus outline color of the current month/year.
492
+ /// @prop {Map} ym-current-outline-color [color: ('primary', 300)] - The outline color of the current month/year.
489
493
  /// @prop {Map} date-selected-range-hover-background [contrast-color: ('gray', 50, .1)] - The :hover background color of the selected range.
490
494
  /// @prop {Map} date-selected-range-focus-background [contrast-color: ('gray', 50, .1)] - The :focus background color of the selected range.
491
495
  /// @prop {Map} date-selected-range-hover-foreground [contrast-color: ('gray', 50)] - The :hover foreground color of the selected range.
@@ -501,27 +505,21 @@ $dark-indigo-calendar: extend(
501
505
  900,
502
506
  ),
503
507
  ),
504
- date-current-hover-background: (
508
+ ym-hover-background: (
505
509
  contrast-color: (
506
510
  'gray',
507
511
  50,
508
512
  0.1,
509
513
  ),
510
514
  ),
511
- date-current-focus-foreground: (
512
- contrast-color: (
513
- 'gray',
514
- 50,
515
- ),
516
- ),
517
- ym-hover-background: (
515
+ date-selected-current-range-hover-background: (
518
516
  contrast-color: (
519
517
  'gray',
520
518
  50,
521
519
  0.1,
522
520
  ),
523
521
  ),
524
- date-selected-current-range-hover-background: (
522
+ date-selected-current-range-focus-background: (
525
523
  contrast-color: (
526
524
  'gray',
527
525
  50,
@@ -584,67 +582,85 @@ $dark-indigo-calendar: extend(
584
582
  900,
585
583
  ),
586
584
  ),
587
- date-current-border-color: (
585
+ date-current-background: (
588
586
  color: (
589
587
  'primary',
590
- 400,
588
+ 700,
589
+ 0.5,
591
590
  ),
592
591
  ),
593
- date-current-hover-border-color: (
592
+ date-current-hover-background: (
594
593
  color: (
595
594
  'primary',
596
- 300,
595
+ 700,
597
596
  ),
598
597
  ),
599
- date-current-focus-border-color: (
598
+ date-current-focus-background: (
599
+ color: (
600
+ 'primary',
601
+ 700,
602
+ ),
603
+ ),
604
+ date-current-focus-foreground: (
605
+ contrast-color: (
606
+ 'gray',
607
+ 50,
608
+ ),
609
+ ),
610
+ date-current-border-color: (
600
611
  color: (
601
612
  'primary',
602
613
  300,
603
614
  ),
604
615
  ),
605
- date-special-foreground: (
616
+ date-current-hover-border-color: (
606
617
  color: (
607
618
  'primary',
608
- 50,
619
+ 200,
609
620
  ),
610
621
  ),
611
- date-special-background: (
622
+ date-current-focus-border-color: (
612
623
  color: (
613
624
  'primary',
614
- 600,
615
- 0.4,
625
+ 200,
616
626
  ),
617
627
  ),
618
- date-special-hover-foreground: (
619
- contrast-color: (
628
+ date-special-foreground: (
629
+ color: (
620
630
  'primary',
621
- 600,
631
+ 100,
622
632
  ),
623
633
  ),
624
- date-special-hover-background: (
634
+ date-special-hover-foreground: (
625
635
  color: (
626
636
  'primary',
627
- 400,
628
- 0.7,
637
+ 50,
629
638
  ),
630
639
  ),
631
- date-special-focus-foreground: (
640
+ date-special-hover-background: (
632
641
  contrast-color: (
633
- 'primary',
634
- 600,
642
+ 'gray',
643
+ 50,
644
+ 0.1,
635
645
  ),
636
646
  ),
637
- date-special-focus-background: (
647
+ date-special-focus-foreground: (
638
648
  color: (
639
649
  'primary',
640
- 400,
641
- 0.7,
650
+ 50,
651
+ ),
652
+ ),
653
+ date-special-focus-background: (
654
+ contrast-color: (
655
+ 'gray',
656
+ 50,
657
+ 0.1,
642
658
  ),
643
659
  ),
644
660
  date-special-range-foreground: (
645
661
  color: (
646
662
  'primary',
647
- 50,
663
+ 100,
648
664
  ),
649
665
  ),
650
666
  date-special-range-background: (
@@ -668,6 +684,24 @@ $dark-indigo-calendar: extend(
668
684
  0.7,
669
685
  ),
670
686
  ),
687
+ date-special-border-color: (
688
+ color: (
689
+ 'primary',
690
+ 100,
691
+ ),
692
+ ),
693
+ date-special-hover-border-color: (
694
+ color: (
695
+ 'primary',
696
+ 50,
697
+ ),
698
+ ),
699
+ date-special-range-border-color: (
700
+ color: (
701
+ 'primary',
702
+ 100,
703
+ ),
704
+ ),
671
705
  navigation-hover-color: (
672
706
  color: (
673
707
  'primary',
@@ -718,43 +752,35 @@ $dark-indigo-calendar: extend(
718
752
  0.2,
719
753
  ),
720
754
  ),
721
- ym-current-outline-color: (
755
+ ym-current-background: (
722
756
  color: (
723
757
  'primary',
724
- 400,
725
- ),
726
- ),
727
- ym-selected-current-outline-color: (
728
- contrast-color: (
729
- 'gray',
730
- 50,
731
- 0.6,
758
+ 700,
759
+ 0.5,
732
760
  ),
733
761
  ),
734
- ym-current-outline-hover-color: (
762
+ ym-current-hover-background: (
735
763
  color: (
736
764
  'primary',
737
- 300,
765
+ 700,
738
766
  ),
739
767
  ),
740
- ym-current-outline-focus-color: (
768
+ ym-current-outline-color: (
741
769
  color: (
742
770
  'primary',
743
771
  300,
744
772
  ),
745
773
  ),
746
- ym-selected-current-outline-hover-color: (
747
- contrast-color: (
748
- 'gray',
749
- 50,
750
- 0.6,
774
+ ym-current-outline-hover-color: (
775
+ color: (
776
+ 'primary',
777
+ 200,
751
778
  ),
752
779
  ),
753
- ym-selected-current-outline-focus-color: (
754
- contrast-color: (
755
- 'gray',
756
- 50,
757
- 0.6,
780
+ ym-current-outline-focus-color: (
781
+ color: (
782
+ 'primary',
783
+ 200,
758
784
  ),
759
785
  ),
760
786
  date-disabled-foreground: (
package/sass/themes/schemas/components/light/_calendar.scss CHANGED
@@ -349,10 +349,14 @@ $light-calendar: (
349
349
  /// @prop {Map} date-special-focus-foreground [color: ('secondary', 700)] - The foreground color of a special date.
350
350
  /// @prop {Map} date-special-hover-background [color: ('gray', 100)] - The background color of a special date.
351
351
  /// @prop {Map} date-special-focus-background [color: ('gray', 100)] - The background color of a special date.
352
+ /// @prop {Map} date-special-range-foreground [color: ('secondary', 900)] - The foreground color of a special date in rage selection.
352
353
  /// @prop {Map} date-special-range-hover-background [color: ('gray', 100)] - The :hover background color of a special date in range selection.
353
354
  /// @prop {Map} date-special-range-focus-background [color: ('gray', 100)] - The :focus background color of a special date in range selection.
354
355
  /// @prop {Map} date-special-border-color [color: ('secondary', 500)] - The outline color around a special date.
355
356
  /// @prop {Map} date-special-hover-border-color [color: ('secondary', 700)] - The outline color around a special date.
357
+ /// @prop {Map} date-selected-special-border-color [contrast-color: ('secondary', 900)] - The border color of the selected special date.
358
+ /// @prop {Map} date-selected-special-hover-border-color [contrast-color: ('secondary', 900)] - The :hover border color of the selected special date.
359
+ /// @prop {Map} date-selected-special-focus-border-color [contrast-color: ('secondary', 900)] - The :focus border color of the selected special date.
356
360
  /// @prop {Map} ym-current-outline-color [color: ('gray', 900)] - The outline color of the current month/year.
357
361
  /// @prop {Map} ym-selected-current-outline-color [color: ('gray', 900)] - The outline color of the selected current month/year.
358
362
  /// @prop {Map} ym-selected-current-outline-hover-color [color: ('gray', 900)] - The :hover outline color of the selected current month/year.
@@ -365,7 +369,6 @@ $light-calendar: (
365
369
  /// @prop {Map} date-selected-current-focus-border-color [color: ('gray', 900)] - The :focus border color of the selected current date.
366
370
  /// @prop {List} week-number-border-radius [(rem(4px), rem(0), rem(8px))] - The border radius used for the week numbers column.
367
371
  /// @prop {Map} actions-divider-color [color: ('gray', 200)] - The border color used for the date-picker actions divider.
368
- /// @prop {Map} date-special-range-foreground [color: ('secondary', 900)] - The foreground color of a special date in rage selection.
369
372
  /// @requires $light-calendar
370
373
  $material-calendar: extend(
371
374
  $light-calendar,
@@ -603,6 +606,24 @@ $material-calendar: extend(
603
606
  100,
604
607
  ),
605
608
  ),
609
+ date-selected-special-border-color: (
610
+ contrast-color: (
611
+ 'secondary',
612
+ 900,
613
+ ),
614
+ ),
615
+ date-selected-special-hover-border-color: (
616
+ contrast-color: (
617
+ 'secondary',
618
+ 900,
619
+ ),
620
+ ),
621
+ date-selected-special-focus-border-color: (
622
+ contrast-color: (
623
+ 'secondary',
624
+ 900,
625
+ ),
626
+ ),
606
627
  date-special-foreground: (
607
628
  color: (
608
629
  'secondary',
@@ -753,6 +774,9 @@ $material-calendar: extend(
753
774
  /// @prop {Map} date-special-focus-background [color: ('gray', 200)] - The background color of a special date.
754
775
  /// @prop {Map} date-special-range-hover-background [color: ('gray', 200)] - The :hover background color of a special date in range selection.
755
776
  /// @prop {Map} date-special-range-focus-background [color: ('gray', 200)] - The :focus background color of a special date in range selection.
777
+ /// @prop {Map} date-selected-special-border-color [color: ('primary', 900)] - The border color of the selected special date.
778
+ /// @prop {Map} date-selected-special-hover-border-color [color: ('primary', 900)] - The :hover border color of the selected special date.
779
+ /// @prop {Map} date-selected-special-focus-border-color [color: ('primary', 900)] - The :focus border color of the selected special date.
756
780
  /// @prop {Map} date-selected-current-border-color [color: ('gray', 700)] - The border color of the selected current date.
757
781
  /// @prop {Map} date-selected-current-hover-border-color [color: ('gray', 700)] - The :hover border color of the selected current date.
758
782
  /// @prop {Map} date-selected-current-focus-border-color [color: ('gray', 700)] - The :focus border color of the selected current date.
@@ -915,6 +939,24 @@ $fluent-calendar: extend(
915
939
  700,
916
940
  ),
917
941
  ),
942
+ date-selected-special-border-color: (
943
+ color: (
944
+ 'primary',
945
+ 900,
946
+ ),
947
+ ),
948
+ date-selected-special-hover-border-color: (
949
+ color: (
950
+ 'primary',
951
+ 900,
952
+ ),
953
+ ),
954
+ date-selected-special-focus-border-color: (
955
+ color: (
956
+ 'primary',
957
+ 900,
958
+ ),
959
+ ),
918
960
  date-special-border-color: (
919
961
  color: (
920
962
  'primary',
@@ -1354,6 +1396,9 @@ $fluent-calendar: extend(
1354
1396
  /// @prop {Map} date-special-border-color [color: ('primary', 800)] - The outline color around a special date.
1355
1397
  /// @prop {Map} date-special-hover-border-color [color: ('primary', 800)] - The outline color around a special date.
1356
1398
  /// @prop {Map} date-special-range-border-color [color: ('primary', 800)] - The outline color around a special date in a range selection.
1399
+ /// @prop {Map} date-selected-special-border-color [contrast-color: ('primary', 900)] - The border color of the selected special date.
1400
+ /// @prop {Map} date-selected-special-hover-border-color [contrast-color: ('primary', 900)] - The :hover border color of the selected special date.
1401
+ /// @prop {Map} date-selected-special-focus-border-color [contrast-color: ('primary', 900)] - The :focus border color of the selected special date.
1357
1402
  /// @prop {Map} header-foreground [contrast-color: ('gray', 100)] - The header foreground color.
1358
1403
  /// @prop {Map} header-background [color: ('gray', 100)] - The header background color.
1359
1404
  /// @prop {Map} picker-foreground [color: ('gray', 900)] - The foreground color of the month and year pickers.
@@ -1709,6 +1754,24 @@ $bootstrap-calendar: extend(
1709
1754
  200,
1710
1755
  ),
1711
1756
  ),
1757
+ date-selected-special-border-color: (
1758
+ contrast-color: (
1759
+ 'primary',
1760
+ 900,
1761
+ ),
1762
+ ),
1763
+ date-selected-special-hover-border-color: (
1764
+ contrast-color: (
1765
+ 'primary',
1766
+ 900,
1767
+ ),
1768
+ ),
1769
+ date-selected-special-focus-border-color: (
1770
+ contrast-color: (
1771
+ 'primary',
1772
+ 900,
1773
+ ),
1774
+ ),
1712
1775
  date-selected-range-foreground: (
1713
1776
  color: (
1714
1777
  'gray',
@@ -1871,20 +1934,26 @@ $bootstrap-calendar: extend(
1871
1934
  /// @prop {Map} date-hover-background [color: ('gray', 900, .05)] - The :hover background color of a date.
1872
1935
  /// @prop {Map} date-focus-background [color: ('gray', 900, .05)] - The :focus background color of date.
1873
1936
  /// @prop {Map} date-current-foreground [color: ('gray', 800)] - The foreground color of the current date.
1937
+ /// @prop {Map} date-current-background [color: ('primary', 50, .5)] - The background color of the current date.
1938
+ /// @prop {Map} date-current-hover-background [color: ('primary', 50)] - The :hover background color of the current date.
1939
+ /// @prop {Map} date-current-focus-background [color: ('primary', 50)] - The :hover background color of the current date.
1874
1940
  /// @prop {Map} date-disabled-foreground [color: ('gray', 900, .2)] - The foreground color of disabled dates.
1875
1941
  /// @prop {Map} date-disabled-range-foreground [color: ('gray', 800, .38)] - The foreground color of disabled dates in range selection.
1876
- /// @prop {Map} date-current-hover-background [color: ('gray', 900, .05)] - The :hover background color of the current date.
1877
- /// @prop {Map} date-current-border-color [color: ('primary', 500)] - The border color of the current date.
1878
- /// @prop {Map} date-current-hover-border-color [color: ('primary', 400)] - The :hover border color of the current date.
1879
- /// @prop {Map} date-current-focus-border-color [color: ('primary', 400)] - The :focus border color of the current date.
1942
+ /// @prop {Map} date-current-border-color [color: ('primary', 100)] - The border color of the current date.
1943
+ /// @prop {Map} date-current-hover-border-color [color: ('primary', 200)] - The :hover border color of the current date.
1944
+ /// @prop {Map} date-current-focus-border-color [color: ('primary', 200)] - The :focus border color of the current date.
1880
1945
  /// @prop {Map} date-special-foreground [color: ('primary', 500)] - The foreground color of a special date.
1881
- /// @prop {Map} date-special-background [color: ('primary', 50, .7)] - The background color of a special date.
1882
- /// @prop {Map} date-special-hover-foreground [color: ('primary', 700)] - The foreground color of a special date.
1883
- /// @prop {Map} date-special-hover-background [color: ('primary', 50)] - The background color of a special date.
1884
- /// @prop {Map} date-special-focus-foreground [color: ('primary', 700)] - The foreground color of a special date.
1885
- /// @prop {Map} date-special-focus-background [color: ('primary', 50)] - The background color of a special date.
1886
- /// @prop {Map} date-special-range-hover-background [color: ('primary', 50)] - The :hover background color of a special date in range selection.
1887
- /// @prop {Map} date-special-range-focus-background [color: ('primary', 50)] - The :focus background color of a special date in range selection.
1946
+ /// @prop {Color} date-special-background [transparent] - The background color of a special date.
1947
+ /// @prop {Map} date-special-hover-foreground [color: ('primary', 600)] - The :hover foreground color of a special date.
1948
+ /// @prop {Map} date-special-hover-background [color: ('gray', 900, .05)] - The :hover background color of a special date.
1949
+ /// @prop {Map} date-special-focus-foreground [color: ('primary', 600)] - The :focus foreground color of a special date.
1950
+ /// @prop {Map} date-special-focus-background [color: ('gray', 900, .05)] - The :focus background color of a special date.
1951
+ /// @prop {Map} date-special-range-hover-background [color: ('gray', 900, .05)] - The :hover background color of a special date in range selection.
1952
+ /// @prop {Map} date-special-range-focus-background [color: ('gray', 900, .05)] - The :focus background color of a special date in range selection.
1953
+ /// @prop {Map} date-special-range-border-color [color: ('primary', 500)] - The outline color around a special date in range selection.
1954
+ /// @prop {Map} date-selected-special-border-color [contrast-color: ('primary', 900, .8)] - The border color of the selected special date.
1955
+ /// @prop {Map} date-selected-special-hover-border-color [contrast-color: ('primary', 900, .8)] - The :hover border color of the selected special date.
1956
+ /// @prop {Map} date-selected-special-focus-border-color [contrast-color: ('primary', 900,. 8)] - The :focus border color of the selected special date.
1888
1957
  /// @prop {Map} date-selected-foreground [contrast-color: ('primary', 500)] - The foreground color of the selected date.
1889
1958
  /// @prop {Map} date-selected-background [color: ('primary', 500)] - The background color of the selected date.
1890
1959
  /// @prop {Map} date-selected-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the selected date.
@@ -1897,28 +1966,28 @@ $bootstrap-calendar: extend(
1897
1966
  /// @prop {Map} date-selected-current-hover-background [color: ('primary', 400)] - The :hover background color of the selected current date.
1898
1967
  /// @prop {Map} date-selected-current-focus-foreground [contrast-color: ('primary', 900)] - The :focus foreground color of the selected current date.
1899
1968
  /// @prop {Map} date-selected-current-focus-background [color: ('primary', 400)] - The :focus background color of the selected current date.
1900
- /// @prop {Map} date-selected-current-border-color [contrast-color: ('primary', 900, .6)] - The border color of the selected current date.
1901
- /// @prop {Map} date-selected-current-hover-border-color [contrast-color: ('primary', 900, .6)] - The :hover border color of the selected current date.
1902
- /// @prop {Map} date-selected-current-focus-border-color [contrast-color: ('primary', 900,. 6)] - The :focus border color of the selected current date.
1969
+ /// @prop {Map} date-selected-current-border-color [contrast-color: ('primary', 900, .8)] - The border color of the selected current date.
1970
+ /// @prop {Map} date-selected-current-hover-border-color [contrast-color: ('primary', 900, .8)] - The :hover border color of the selected current date.
1971
+ /// @prop {Map} date-selected-current-focus-border-color [contrast-color: ('primary', 900,. 8)] - The :focus border color of the selected current date.
1903
1972
  /// @prop {Map} date-selected-range-foreground [color: ('gray', 800)] - The foreground color of the selected range.
1904
1973
  /// @prop {Map} date-selected-current-range-foreground [color: ('gray', 800)] - The foreground color of the current date in the selected range.
1905
1974
  /// @prop {Map} date-selected-range-background [color: ('primary', 300, .2)] - The background color of the selected range.
1906
1975
  /// @prop {Map} date-selected-range-hover-background [color: ('gray', 900, .05)] - The :hover background color of the selected range.
1907
1976
  /// @prop {Map} date-selected-range-focus-background [color: ('gray', 900, .05)] - The :focus background color of the selected range.
1908
1977
  /// @prop {Map} date-selected-current-range-background [color: ('primary', 300, .02)] - The background color of the current date in the selected range.
1909
- /// @prop {Map} date-selected-current-range-hover-background [color: ('gray', 900, .05)] - The :hover background color of the current date in the selected range.
1910
- /// @prop {Map} date-selected-current-range-focus-background [color: ('gray', 900, .05)] - The :focus background color of the current date in the selected range.
1978
+ /// @prop {Map} date-selected-current-range-hover-background [color: ('primary', 50)] - The :hover background color of the current date in the selected range.
1979
+ /// @prop {Map} date-selected-current-range-focus-background [color: ('primary', 50)] - The :focus background color of the current date in the selected range.
1911
1980
  /// @prop {Map} border-color [color: ('gray', 400)] - The calendar border color.
1912
- /// @prop {Color} date-special-border-color [transparent] - The outline color around a special date.
1913
- /// @prop {Color} date-special-hover-border-color [transparent] - The outline color around a special date.
1981
+ /// @prop {Map} date-special-border-color [color: ('primary', 500)] - The outline color around a special date.
1982
+ /// @prop {Map} date-special-hover-border-color [color: ('primary', 600)] - The :hover outline color around a special date.
1914
1983
  /// @prop {Map} ym-selected-current-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the current/selected month/year.
1915
1984
  /// @prop {Map} ym-selected-current-hover-background [color: ('primary', 400)] - The :hover background color of the current/selected month/year.
1916
1985
  /// @prop {Map} ym-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the month/year.
1917
1986
  /// @prop {Map} ym-hover-background [color: ('gray', 900, .05)] - The :hover background color of the month/year.
1918
1987
  /// @prop {Map} ym-current-foreground [color: ('gray', 900)] - The foreground color of the current month/year.
1919
- /// @prop {Color} ym-current-background [transparent] - The background color of the current month/year.
1988
+ /// @prop {Map} ym-current-background [color: ('primary', 50, .5)] - The background color of the current month/year.
1920
1989
  /// @prop {Map} ym-current-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current month/year.
1921
- /// @prop {Map} ym-current-hover-background [color: ('gray', 900, .05)] - The :hover background color of the current month/year.
1990
+ /// @prop {Map} ym-current-hover-background [color: (color: ('primary', 50)] - The :hover background color of the current month/year.
1922
1991
  /// @prop {Map} ym-selected-foreground [contrast-color: ('primary', 500)] - The foreground color of the selected month/year.
1923
1992
  /// @prop {Map} ym-selected-background [color: ('primary', 500)] - The background color of the selected month in month/year.
1924
1993
  /// @prop {Map} ym-selected-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the selected month/year.
@@ -1927,12 +1996,12 @@ $bootstrap-calendar: extend(
1927
1996
  /// @prop {Map} ym-selected-current-background [color: ('primary', 500)] - The background color of the current/selected month/year.
1928
1997
  /// @prop {Map} ym-selected-current-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the current/selected month/year.
1929
1998
  /// @prop {Map} ym-selected-current-hover-background [color: ('primary', 400)] - The :hover background color of the current/selected month/year.
1930
- /// @prop {Map} ym-current-outline-color [color: ('primary', 500)] - The outline color of the current month/year.
1931
- /// @prop {Map} ym-current-outline-hover-color [color: ('primary', 400)] - The :hover outline color of the current month/year.
1932
- /// @prop {Map} ym-current-outline-focus-color [color: ('primary', 400)] - The :focus outline color of the current month/year.
1933
- /// @prop {Map} ym-selected-current-outline-color [contrast-color: ('gray', 900, .6)] - The outline color of the selected current month/year.
1934
- /// @prop {Map} ym-selected-current-outline-hover-color [contrast-color: ('gray', 900, .6)] - The :hover outline color of the selected current month/year.
1935
- /// @prop {Map} ym-selected-current-outline-focus-color [contrast-color: ('gray', 900, .6)] - The :focus outline color of the selected current month/year.
1999
+ /// @prop {Map} ym-current-outline-color [color: ('primary', 100)] - The outline color of the current month/year.
2000
+ /// @prop {Map} ym-current-outline-hover-color [color: ('primary', 200)] - The :hover outline color of the current month/year.
2001
+ /// @prop {Map} ym-current-outline-focus-color [color: ('primary', 200)] - The :focus outline color of the current month/year.
2002
+ /// @prop {Map} ym-selected-current-outline-color [color: ('primary', 100)] - The outline color of the selected current month/year.
2003
+ /// @prop {Map} ym-selected-current-outline-hover-color [color: ('primary', 200)] - The :hover outline color of the selected current month/year.
2004
+ /// @prop {Map} ym-selected-current-outline-focus-color [color: ('primary', 200)] - The :focus outline color of the selected current month/year.
1936
2005
  /// @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)
1937
2006
  /// @prop {List} border-radius [(rem(6px), rem(0), rem(6px))] - The border radius used for calendar.
1938
2007
  /// @prop {List} week-number-border-radius [(rem(4px), rem(0), rem(4px))] - The border radius used for the week numbers column.
@@ -1956,13 +2025,6 @@ $indigo-calendar: extend(
1956
2025
  800,
1957
2026
  ),
1958
2027
  ),
1959
- date-current-hover-background: (
1960
- color: (
1961
- 'gray',
1962
- 900,
1963
- 0.05,
1964
- ),
1965
- ),
1966
2028
  weekend-color: (
1967
2029
  color: (
1968
2030
  'gray',
@@ -2076,36 +2138,41 @@ $indigo-calendar: extend(
2076
2138
  800,
2077
2139
  ),
2078
2140
  ),
2079
- date-disabled-foreground: (
2141
+ date-current-background: (
2080
2142
  color: (
2081
- 'gray',
2082
- 900,
2083
- 0.2,
2143
+ 'primary',
2144
+ 50,
2145
+ 0.5,
2084
2146
  ),
2085
2147
  ),
2086
- date-disabled-range-foreground: (
2148
+ date-current-hover-background: (
2087
2149
  color: (
2088
- 'gray',
2089
- 800,
2090
- 0.38,
2150
+ 'primary',
2151
+ 50,
2152
+ ),
2153
+ ),
2154
+ date-current-focus-background: (
2155
+ color: (
2156
+ 'primary',
2157
+ 50,
2091
2158
  ),
2092
2159
  ),
2093
2160
  date-current-border-color: (
2094
2161
  color: (
2095
2162
  'primary',
2096
- 500,
2163
+ 100,
2097
2164
  ),
2098
2165
  ),
2099
2166
  date-current-hover-border-color: (
2100
2167
  color: (
2101
2168
  'primary',
2102
- 400,
2169
+ 200,
2103
2170
  ),
2104
2171
  ),
2105
2172
  date-current-focus-border-color: (
2106
2173
  color: (
2107
2174
  'primary',
2108
- 400,
2175
+ 200,
2109
2176
  ),
2110
2177
  ),
2111
2178
  date-special-foreground: (
@@ -2114,13 +2181,7 @@ $indigo-calendar: extend(
2114
2181
  500,
2115
2182
  ),
2116
2183
  ),
2117
- date-special-background: (
2118
- color: (
2119
- 'primary',
2120
- 50,
2121
- 0.7,
2122
- ),
2123
- ),
2184
+ date-special-background: transparent,
2124
2185
  date-special-range-foreground: (
2125
2186
  color: (
2126
2187
  'primary',
@@ -2137,41 +2198,61 @@ $indigo-calendar: extend(
2137
2198
  date-special-hover-foreground: (
2138
2199
  color: (
2139
2200
  'primary',
2140
- 700,
2201
+ 600,
2141
2202
  ),
2142
2203
  ),
2143
2204
  date-special-hover-background: (
2144
2205
  color: (
2145
- 'primary',
2146
- 50,
2206
+ 'gray',
2207
+ 900,
2208
+ 0.05,
2147
2209
  ),
2148
2210
  ),
2149
2211
  date-special-focus-foreground: (
2150
2212
  color: (
2151
2213
  'primary',
2152
- 700,
2214
+ 600,
2153
2215
  ),
2154
2216
  ),
2155
2217
  date-special-focus-background: (
2156
2218
  color: (
2157
- 'primary',
2158
- 50,
2219
+ 'gray',
2220
+ 900,
2221
+ 0.05,
2159
2222
  ),
2160
2223
  ),
2161
2224
  date-special-range-hover-background: (
2162
2225
  color: (
2163
- 'primary',
2164
- 50,
2226
+ 'gray',
2227
+ 900,
2228
+ 0.05,
2165
2229
  ),
2166
2230
  ),
2167
2231
  date-special-range-focus-background: (
2232
+ color: (
2233
+ 'gray',
2234
+ 900,
2235
+ 0.05,
2236
+ ),
2237
+ ),
2238
+ date-special-border-color: (
2168
2239
  color: (
2169
2240
  'primary',
2170
- 50,
2241
+ 500,
2242
+ ),
2243
+ ),
2244
+ date-special-hover-border-color: (
2245
+ color: (
2246
+ 'primary',
2247
+ 600,
2248
+ ),
2249
+ ),
2250
+ date-special-range-border-color: (
2251
+ color: (
2252
+ 'primary',
2253
+ 500,
2171
2254
  ),
2172
2255
  ),
2173
- date-special-border-color: transparent,
2174
- date-special-hover-border-color: transparent,
2175
2256
  date-selected-foreground: (
2176
2257
  contrast-color: (
2177
2258
  'primary',
@@ -2248,21 +2329,42 @@ $indigo-calendar: extend(
2248
2329
  contrast-color: (
2249
2330
  'primary',
2250
2331
  900,
2251
- 0.6,
2332
+ 0.8,
2252
2333
  ),
2253
2334
  ),
2254
2335
  date-selected-current-hover-border-color: (
2255
2336
  contrast-color: (
2256
2337
  'primary',
2257
2338
  900,
2258
- 0.6,
2339
+ 0.8,
2259
2340
  ),
2260
2341
  ),
2261
2342
  date-selected-current-focus-border-color: (
2262
2343
  contrast-color: (
2263
2344
  'primary',
2264
2345
  900,
2265
- 0.6,
2346
+ 0.8,
2347
+ ),
2348
+ ),
2349
+ date-selected-special-border-color: (
2350
+ contrast-color: (
2351
+ 'primary',
2352
+ 900,
2353
+ 0.8,
2354
+ ),
2355
+ ),
2356
+ date-selected-special-hover-border-color: (
2357
+ contrast-color: (
2358
+ 'primary',
2359
+ 900,
2360
+ 0.8,
2361
+ ),
2362
+ ),
2363
+ date-selected-special-focus-border-color: (
2364
+ contrast-color: (
2365
+ 'primary',
2366
+ 900,
2367
+ 0.8,
2266
2368
  ),
2267
2369
  ),
2268
2370
  date-selected-current-range-foreground: (
@@ -2307,16 +2409,14 @@ $indigo-calendar: extend(
2307
2409
  ),
2308
2410
  date-selected-current-range-hover-background: (
2309
2411
  color: (
2310
- 'gray',
2311
- 900,
2312
- 0.05,
2412
+ 'primary',
2413
+ 50,
2313
2414
  ),
2314
2415
  ),
2315
2416
  date-selected-current-range-focus-background: (
2316
2417
  color: (
2317
- 'gray',
2318
- 900,
2319
- 0.05,
2418
+ 'primary',
2419
+ 50,
2320
2420
  ),
2321
2421
  ),
2322
2422
  border-color: (
@@ -2356,7 +2456,13 @@ $indigo-calendar: extend(
2356
2456
  900,
2357
2457
  ),
2358
2458
  ),
2359
- ym-current-background: transparent,
2459
+ ym-current-background: (
2460
+ color: (
2461
+ 'primary',
2462
+ 50,
2463
+ 0.5,
2464
+ ),
2465
+ ),
2360
2466
  ym-current-hover-foreground: (
2361
2467
  color: (
2362
2468
  'gray',
@@ -2365,9 +2471,8 @@ $indigo-calendar: extend(
2365
2471
  ),
2366
2472
  ym-current-hover-background: (
2367
2473
  color: (
2368
- 'gray',
2369
- 900,
2370
- 0.05,
2474
+ 'primary',
2475
+ 50,
2371
2476
  ),
2372
2477
  ),
2373
2478
  ym-selected-foreground: (
@@ -2409,40 +2514,37 @@ $indigo-calendar: extend(
2409
2514
  ym-current-outline-color: (
2410
2515
  color: (
2411
2516
  'primary',
2412
- 500,
2517
+ 100,
2413
2518
  ),
2414
2519
  ),
2415
2520
  ym-current-outline-hover-color: (
2416
2521
  color: (
2417
2522
  'primary',
2418
- 400,
2523
+ 200,
2419
2524
  ),
2420
2525
  ),
2421
2526
  ym-current-outline-focus-color: (
2422
2527
  color: (
2423
2528
  'primary',
2424
- 400,
2529
+ 200,
2425
2530
  ),
2426
2531
  ),
2427
2532
  ym-selected-current-outline-color: (
2428
- contrast-color: (
2429
- 'gray',
2430
- 900,
2431
- 0.6,
2533
+ color: (
2534
+ 'primary',
2535
+ 100,
2432
2536
  ),
2433
2537
  ),
2434
2538
  ym-selected-current-outline-hover-color: (
2435
- contrast-color: (
2436
- 'gray',
2437
- 900,
2438
- 0.6,
2539
+ color: (
2540
+ 'primary',
2541
+ 200,
2439
2542
  ),
2440
2543
  ),
2441
2544
  ym-selected-current-outline-focus-color: (
2442
- contrast-color: (
2443
- 'gray',
2444
- 900,
2445
- 0.6,
2545
+ color: (
2546
+ 'primary',
2547
+ 200,
2446
2548
  ),
2447
2549
  ),
2448
2550
  actions-divider-color: (
@@ -2451,5 +2553,19 @@ $indigo-calendar: extend(
2451
2553
  400,
2452
2554
  ),
2453
2555
  ),
2556
+ date-disabled-foreground: (
2557
+ color: (
2558
+ 'gray',
2559
+ 900,
2560
+ 0.2,
2561
+ ),
2562
+ ),
2563
+ date-disabled-range-foreground: (
2564
+ color: (
2565
+ 'gray',
2566
+ 800,
2567
+ 0.38,
2568
+ ),
2569
+ ),
2454
2570
  )
2455
2571
  );