Skip to content

Commit 93c99f4

Browse files
didimmovadidimmova
committed
feat(calendar): update calendar theme functions
1 parent 861bc47 commit 93c99f4

File tree

1 file changed

+91
-31
lines changed

1 file changed

+91
-31
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss‎

Lines changed: 91 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -456,6 +456,10 @@
456456
$date-current-focus-border-color: var(--date-current-hover-border-color);
457457
}
458458

459+
@if not($date-current-foreground) and $date-current-background {
460+
$date-current-foreground: adaptive-contrast(var(--date-current-background));
461+
}
462+
459463
@if not($date-current-foreground) and $content-foreground {
460464
$date-current-foreground: var(--content-foreground);
461465
}
@@ -494,12 +498,22 @@
494498
$date-current-focus-background: var(--date-focus-background);
495499
}
496500

497-
@if not($date-current-hover-foreground) and $date-current-foreground {
498-
$date-current-hover-foreground: var(--date-current-foreground);
501+
@if $variant == 'fluent' {
502+
@if not($date-current-hover-foreground) and $date-current-background {
503+
$date-current-hover-foreground: adaptive-contrast(var(--date-current-background));
504+
}
505+
506+
@if not($date-current-focus-foreground) and $date-current-background {
507+
$date-current-focus-foreground: adaptive-contrast(var(--date-current-background));
508+
}
499509
}
500510

501-
@if not($date-current-focus-foreground) and $date-current-foreground {
502-
$date-current-focus-foreground: var(--date-current-foreground);
511+
@if not($date-current-hover-foreground) and $date-current-hover-background {
512+
$date-current-hover-foreground: adaptive-contrast(var(--date-current-hover-background));
513+
}
514+
515+
@if not($date-current-focus-foreground) and $date-current-hover-background {
516+
$date-current-focus-foreground: adaptive-contrast(var(--date-current-hover-background));
503517
}
504518
}
505519

@@ -658,10 +672,14 @@
658672
$date-special-hover-background: var(--date-hover-background);
659673
}
660674

661-
@if not($date-special-focus-background) and $date-focus-background {
675+
@if not($date-special-focus-background) and $date-focus-background {
662676
$date-special-focus-background: var(--date-focus-background);
663677
}
664678

679+
@if not($date-special-range-focus-background) and $date-special-focus-background {
680+
$date-special-range-focus-background: var(--date-special-focus-background);
681+
}
682+
665683
@if $variant != 'fluent' {
666684
@if not($date-selected-special-border-color) and $date-selected-foreground {
667685
$date-selected-special-border-color: var(--date-selected-foreground);
@@ -786,20 +804,70 @@
786804
//calendar views end
787805

788806
//date range start
789-
@if not($date-selected-range-background) and $date-selected-background {
790-
$date-selected-range-background: hsla(from var(--date-selected-background) h s l / 0.24);
791-
}
792-
793807
@if not($date-selected-range-foreground) and $content-foreground {
794808
$date-selected-range-foreground: var(--content-foreground);
795809
}
796810

797-
@if not($date-selected-range-hover-background) and $date-selected-background {
798-
$date-selected-range-hover-background: hsla(from var(--date-selected-background) h s calc(l * 0.9) / 0.12);
811+
@if $variant == 'fluent' {
812+
@if not($date-selected-range-background) and $date-selected-background {
813+
$date-selected-range-background: var(--date-selected-background);
814+
}
815+
816+
@if not($date-selected-current-range-background) and $date-selected-range-background {
817+
$date-selected-current-range-background: var(--date-selected-range-background);
818+
}
819+
820+
@if not($date-selected-range-hover-background) and $date-selected-hover-background {
821+
$date-selected-range-hover-background: var(--date-selected-hover-background);
822+
}
823+
824+
@if not($date-selected-range-focus-background) and $date-selected-hover-background {
825+
$date-selected-range-focus-background: var(--date-selected-hover-background);
826+
}
827+
828+
@if not($date-selected-current-range-hover-foreground) and $date-current-background {
829+
$date-selected-current-range-hover-foreground: adaptive-contrast(var(--date-current-background));
830+
}
831+
832+
@if not($date-selected-current-range-focus-background) and $date-current-background {
833+
$date-selected-current-range-focus-background: adaptive-contrast(var(--date-current-background));
834+
}
835+
} @else {
836+
@if not($date-selected-range-background) and $date-selected-background {
837+
$date-selected-range-background: hsla(from var(--date-selected-background) h s l / 0.24);
838+
}
839+
840+
@if not($date-range-preview-border-color) and $date-selected-background {
841+
$date-range-preview-border-color: var(--date-selected-background);
842+
}
843+
844+
@if not($date-selected-current-range-hover-foreground) and $date-selected-current-range-hover-background {
845+
$date-selected-current-range-hover-foreground: adaptive-contrast(var(--date-selected-current-range-hover-background));
846+
}
847+
848+
@if not($date-selected-current-range-hover-foreground) and $content-foreground {
849+
$date-selected-current-range-hover-foreground: var(--content-foreground);
850+
}
851+
852+
@if not($date-selected-current-range-focus-background) and $date-selected-current-range-hover-background {
853+
$date-selected-current-range-focus-background: var(--date-selected-current-range-hover-background);
854+
}
855+
}
856+
857+
@if not($date-selected-range-hover-background) and $date-hover-background {
858+
$date-selected-range-hover-background: var(--date-hover-background);
859+
}
860+
861+
@if not($date-selected-range-focus-background) and $date-selected-range-hover-background {
862+
$date-selected-range-focus-background: var(--date-selected-range-hover-background);
799863
}
800864

801-
@if not($date-selected-range-hover-foreground) and $content-foreground {
802-
$date-selected-range-hover-foreground: var(--content-foreground);
865+
@if not($date-selected-range-hover-foreground) and $date-selected-range-hover-background {
866+
$date-selected-range-hover-foreground: adaptive-contrast(hsla(from var(--date-selected-range-hover-background) h s l / 1));
867+
}
868+
869+
@if not($date-selected-range-focus-foreground) and $date-selected-range-focus-background {
870+
$date-selected-range-focus-foreground: adaptive-contrast(hsla(from var(--date-selected-range-focus-background) h s l / 1));
803871
}
804872

805873
@if $variant == 'indigo' {
@@ -810,22 +878,18 @@
810878
@if not($date-selected-current-range-hover-background) and $date-selected-background {
811879
$date-selected-current-range-hover-background: hsla(from var(--date-selected-background) h s calc(l * 0.9) / 0.24);
812880
}
813-
}
814-
815-
@if not($date-selected-current-range-foreground) and $content-foreground {
816-
$date-selected-current-range-foreground: var(--content-foreground);
817-
}
818-
819-
@if not($date-selected-current-range-hover-background) and $date-selected-range-hover-background {
820-
$date-selected-current-range-hover-background: var(--date-selected-range-hover-background);
821-
}
822881

823-
@if not($date-selected-current-range-hover-foreground) and $content-foreground {
824-
$date-selected-current-range-hover-foreground: var(--content-foreground);
825-
}
882+
@if not($date-selected-current-range-foreground) and $date-current-background {
883+
$date-selected-current-range-foreground: adaptive-contrast(var(--date-current-background));
884+
}
885+
} @else {
886+
@if not($date-selected-current-range-foreground) and $date-current-background {
887+
$date-selected-current-range-foreground: adaptive-contrast(var(--date-current-background));
888+
}
826889

827-
@if not($date-selected-current-range-focus-background) and $date-selected-current-range-hover-background {
828-
$date-selected-current-range-focus-background: var(--date-selected-current-range-hover-background);
890+
@if not($date-selected-current-range-foreground) and $content-foreground {
891+
$date-selected-current-range-foreground: var(--content-foreground);
892+
}
829893
}
830894

831895
@if not($date-special-range-foreground) and $date-special-foreground {
@@ -839,10 +903,6 @@
839903
@if not($date-special-range-hover-background) and $date-selected-range-hover-background {
840904
$date-special-range-hover-background: var(--date-selected-range-hover-background);
841905
}
842-
843-
@if not($date-range-preview-border-color) and $date-selected-background {
844-
$date-range-preview-border-color: var(--date-selected-background);
845-
}
846906
//date range end
847907

848908
@if not($date-disabled-foreground) and $content-background {

0 commit comments

Comments
 (0)