refactor(*): component themes accept any value (#9248)

SisIvanova · simeonoff · web-flow · commit 673a2e2db42b · 2021-04-02T15:12:10.000+03:00
* refactor(*): component themes accept any value

Co-authored-by: Simeon Simeonoff &lt;sim.simeonoff@gmail.com&gt;
diff --git a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss
@@ -488,8 +488,7 @@ $p-test: igx-palette(#fff, #000);
             }
         }
     } @else {
-        @warn 'Expected color for $background/$foreground but got #{$background}/#{$foreground}. The contrast color can\'t be calculated automatically.';
-        @return #fff;
+        @return $background;
     }
 }
 
@@ -824,7 +823,7 @@ $p-test: igx-palette(#fff, #000);
     @if type-of($value) == 'number' and unitless($value) {
 
         @if $value < 0 or $value > 1 {
-            @error 'Roundness factor should be between 0 and 1';
+            @return $value;
         }
 
         @return round(fraction-clamp($value, $min, $max));
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss
@@ -107,31 +107,31 @@
     }
 
     @if not($item-text-color) and $item-background {
-        @if type_of($item-background) == 'color' {
+        @if type-of($item-background) == 'color' {
             $item-text-color: text-contrast($item-background);
         }
     }
 
     @if not($item-hover-text-color) and $item-hover-background {
-        @if type_of($item-hover-background) == 'color' {
+        @if type-of($item-hover-background) == 'color' {
             $item-hover-text-color: text-contrast($item-hover-background);
         }
     }
 
     @if not($item-selected-background) and $item-background {
-        @if type_of($item-background) == 'color' {
+        @if type-of($item-background) == 'color' {
             $item-selected-text-color: text-contrast($item-background);
         }
     }
 
     @if not($item-selected-text-color) and $item-selected-background {
-        @if type_of($item-selected-background) == 'color' {
+        @if type-of($item-selected-background) == 'color' {
             $item-selected-text-color: text-contrast($item-selected-background);
         }
     }
 
     @if not($disabled-text-color) and $disabled-background-color {
-        @if type_of($disabled-background-color) == 'color' {
+        @if type-of($disabled-background-color) == 'color' {
             $disabled-text-color: rgba(text-contrast($item-background), .3);
         }
     }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
@@ -261,7 +261,9 @@
     }
 
     @if not($date-disabled-text-color) and $date-disabled-background {
-        $date-disabled-color: rgba(text-contrast($date-disabled-background), .38);
+        @if type-of($date-disabled-background) == 'color' {
+            $date-disabled-color: rgba(text-contrast($date-disabled-background), .38);
+        }
     }
 
     @if not($week-number-color) and $week-number-background {
@@ -795,7 +797,11 @@
     %cal-value--selected--hover {
         %cal-value-content {
             ::after {
-                background: rgba($selected-hover-color, .18);
+                @if type-of($selected-hover-color) == 'color' {
+                    background: rgba($selected-hover-color, .18);
+                } @else {
+                    background: $selected-hover-color;
+                }
             }
         }
     }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss
@@ -90,7 +90,9 @@
     }
 
     @if not($button-disabled-arrow-color) and $button-disabled-background {
-        $button-disabled-arrow-color: rgba(text-contrast($button-disabled-background), .3);
+        @if type-of($button-disabled-background) == 'color' {
+            $button-disabled-arrow-color: rgba(text-contrast($button-disabled-background), .3);
+        }
     }
 
     @return extend($theme, (
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss
@@ -62,11 +62,15 @@
     }
 
     @if not($border-color) and $background-color {
-        $border-color: rgba(text-contrast($background-color), .26);
+        @if type-of($background-color) == 'color' {
+            $border-color: rgba(text-contrast($background-color), .26);
+        }
     }
 
     @if not($pinned-border-color) and $background-color {
-        $pinned-border-color: rgba(text-contrast($background-color), .26);
+        @if type-of($background-color) == 'color' {
+            $pinned-border-color: rgba(text-contrast($background-color), .26);
+        }
     }
 
     @return extend($theme, (
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
@@ -260,7 +260,7 @@
         $ghost-header-text-color: text-contrast($ghost-header-background);
     }
 
-    @if $header-background and type-of($header-background) == 'color' and alpha($header-background) < 1 {
+    @if $header-background and type-of($header-background) == 'color' {
         $header-background: to-opaque($header-background, igx-color($palette, 'surface'));
     }
 
@@ -391,11 +391,15 @@
     }
 
     @if not($grouparea-color) and $grouparea-background {
-        $grouparea-color: rgba(text-contrast($grouparea-background), .8)
+        @if type-of($grouparea-background) == 'color' {
+            $grouparea-color: rgba(text-contrast($grouparea-background), .8)
+        }
     }
 
     @if not($grouparea-color) and $header-background {
-        $grouparea-color: rgba(text-contrast($header-background), .8)
+        @if type-of($header-background) == 'color' {
+            $grouparea-color: rgba(text-contrast($header-background), .8)
+        }
     }
 
     @if not($drop-area-background) and $grouparea-background {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
@@ -159,15 +159,15 @@
     $success-shadow-color: rgba(map-get($theme, 'success-secondary-color'), .5);
     $error-shadow-color: rgba(map-get($theme, 'error-secondary-color'), .5);
 
-    @if $focused-secondary-color {
+    @if $focused-secondary-color and type-of($focused-secondary-color) == 'color' {
         $focused-shadow-color: rgba($focused-secondary-color, .5);
     }
 
-    @if $success-secondary-color {
+    @if $success-secondary-color and type-of($success-secondary-color) == 'color' {
         $success-shadow-color: rgba($success-secondary-color, .5);
     }
 
-    @if $error-secondary-color {
+    @if $error-secondary-color and type-of($error-secondary-color) == 'color' {
         $error-shadow-color: rgba($error-secondary-color, .5);
     }
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss
@@ -156,7 +156,9 @@
     }
 
     @if not($item-subtitle-color) and $item-background {
-        $item-subtitle-color: rgba(text-contrast($item-background), .74);
+        @if type-of($item-background) == 'color' {
+            $item-subtitle-color: rgba(text-contrast($item-background), .74);
+        }
     }
 
     @if not($item-subtitle-color) and $item-text-color {
@@ -180,7 +182,9 @@
     }
 
     @if not($item-subtitle-color-hover) and $item-background-hover {
-        $item-subtitle-color-hover: rgba(text-contrast($item-background-hover), .74);
+        @if type-of($item-background-hover) == 'color' {
+            $item-subtitle-color-hover: rgba(text-contrast($item-background-hover), .74);
+        }
     }
 
     @if not($item-subtitle-color-hover) and $item-text-color-hover {
@@ -204,7 +208,9 @@
     }
 
     @if not($item-subtitle-color-active) and $item-background-active {
-        $item-subtitle-color-active: rgba(text-contrast($item-background-active), .74);
+        @if type-of($item-background-active) == 'color' {
+            $item-subtitle-color-active: rgba(text-contrast($item-background-active), .74);
+        }
     }
 
     @if not($item-subtitle-color-active) and $item-text-color-active {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
@@ -183,9 +183,9 @@
         &::before {
             @extend %igx-splitter-hitbox;
             top: calc(100% - #{map-get($theme, 'size')});
-            left: calc(100% - #{map-get($theme, 'size') * 2});
-            width: #{map-get($theme, 'size') * 4};
-            height: #{map-get($theme, 'size') * 3};
+            left: calc(100% - (#{map-get($theme, 'size')} * 2));
+            width: calc(#{map-get($theme, 'size')} * 4);
+            height: calc(#{map-get($theme, 'size')} * 3);
         }
     }
 
@@ -195,10 +195,10 @@
 
         &::before {
             @extend %igx-splitter-hitbox;
-            top: calc(100% - #{map-get($theme, 'size') * 2});
-            left: calc(100% - #{map-get($theme, 'size') * 2});
-            width: #{map-get($theme, 'size') * 4};
-            height: #{map-get($theme, 'size') * 3};
+            top: calc(100% - (#{map-get($theme, 'size')} * 2));
+            left: calc(100% - (#{map-get($theme, 'size')} * 2));
+            width: calc(#{map-get($theme, 'size')} * 4);
+            height: calc(#{map-get($theme, 'size')} * 3);
         }
     }
 
@@ -210,10 +210,10 @@
 
         &::before {
             @extend %igx-splitter-hitbox;
-            top: calc(100% - #{map-get($theme, 'size') * 2});
-            left: calc(100% - #{map-get($theme, 'size')});
-            width: #{map-get($theme, 'size') * 3};
-            height: #{map-get($theme, 'size') * 4};
+            top: calc(100% - (#{map-get($theme, 'size')} * 2));
+            left: calc(100% - (#{map-get($theme, 'size')} * 2));
+            width: calc(#{map-get($theme, 'size')} * 3);
+            height: calc(#{map-get($theme, 'size')} * 4);
         }
     }
 
@@ -225,10 +225,10 @@
 
         &::before {
             @extend %igx-splitter-hitbox;
-            left: calc(100% - #{map-get($theme, 'size') * 2});
-            top: calc(100% - #{map-get($theme, 'size') * 2});
-            height: #{map-get($theme, 'size') * 4};
-            width: #{map-get($theme, 'size') * 3};
+            left: calc(100% - (#{map-get($theme, 'size')} * 2));
+            top: calc(100% - (#{map-get($theme, 'size')} * 2));
+            height: calc(#{map-get($theme, 'size')} * 4);
+            width: calc(#{map-get($theme, 'size')} * 3);
         }
     }
 }

Original file line number	Diff line number	Diff line change
`@@ -488,8 +488,7 @@ $p-test: igx-palette(#fff, #000);`
`488`	`488`	`}`
`489`	`489`	`}`
`490`	`490`	`} @else {`
`491`		`- @warn 'Expected color for $background/$foreground but got #{$background}/#{$foreground}. The contrast color can\'t be calculated automatically.';`
`492`		`- @return #fff;`
	`491`	`+ @return $background;`
`493`	`492`	`}`
`494`	`493`	`}`
`495`	`494`
`@@ -824,7 +823,7 @@ $p-test: igx-palette(#fff, #000);`
`824`	`823`	`@if type-of($value) == 'number' and unitless($value) {`
`825`	`824`
`826`	`825`	`@if $value < 0 or $value > 1 {`
`827`		`- @error 'Roundness factor should be between 0 and 1';`
	`826`	`+ @return $value;`
`828`	`827`	`}`
`829`	`828`
`830`	`829`	`@return round(fraction-clamp($value, $min, $max));`
Original file line number	Diff line number	Diff line change
`@@ -107,31 +107,31 @@`
`107`	`107`	`}`
`108`	`108`
`109`	`109`	`@if not($item-text-color) and $item-background {`
`110`		`- @if type_of($item-background) == 'color' {`
	`110`	`+ @if type-of($item-background) == 'color' {`
`111`	`111`	`$item-text-color: text-contrast($item-background);`
`112`	`112`	`}`
`113`	`113`	`}`
`114`	`114`
`115`	`115`	`@if not($item-hover-text-color) and $item-hover-background {`
`116`		`- @if type_of($item-hover-background) == 'color' {`
	`116`	`+ @if type-of($item-hover-background) == 'color' {`
`117`	`117`	`$item-hover-text-color: text-contrast($item-hover-background);`
`118`	`118`	`}`
`119`	`119`	`}`
`120`	`120`
`121`	`121`	`@if not($item-selected-background) and $item-background {`
`122`		`- @if type_of($item-background) == 'color' {`
	`122`	`+ @if type-of($item-background) == 'color' {`
`123`	`123`	`$item-selected-text-color: text-contrast($item-background);`
`124`	`124`	`}`
`125`	`125`	`}`
`126`	`126`
`127`	`127`	`@if not($item-selected-text-color) and $item-selected-background {`
`128`		`- @if type_of($item-selected-background) == 'color' {`
	`128`	`+ @if type-of($item-selected-background) == 'color' {`
`129`	`129`	`$item-selected-text-color: text-contrast($item-selected-background);`
`130`	`130`	`}`
`131`	`131`	`}`
`132`	`132`
`133`	`133`	`@if not($disabled-text-color) and $disabled-background-color {`
`134`		`- @if type_of($disabled-background-color) == 'color' {`
	`134`	`+ @if type-of($disabled-background-color) == 'color' {`
`135`	`135`	`$disabled-text-color: rgba(text-contrast($item-background), .3);`
`136`	`136`	`}`
`137`	`137`	`}`
Original file line number	Diff line number	Diff line change
`@@ -261,7 +261,9 @@`
`261`	`261`	`}`
`262`	`262`
`263`	`263`	`@if not($date-disabled-text-color) and $date-disabled-background {`
`264`		`- $date-disabled-color: rgba(text-contrast($date-disabled-background), .38);`
	`264`	`+ @if type-of($date-disabled-background) == 'color' {`
	`265`	`+ $date-disabled-color: rgba(text-contrast($date-disabled-background), .38);`
	`266`	`+ }`
`265`	`267`	`}`
`266`	`268`
`267`	`269`	`@if not($week-number-color) and $week-number-background {`
`@@ -795,7 +797,11 @@`
`795`	`797`	`%cal-value--selected--hover {`
`796`	`798`	`%cal-value-content {`
`797`	`799`	`::after {`
`798`		`- background: rgba($selected-hover-color, .18);`
	`800`	`+ @if type-of($selected-hover-color) == 'color' {`
	`801`	`+ background: rgba($selected-hover-color, .18);`
	`802`	`+ } @else {`
	`803`	`+ background: $selected-hover-color;`
	`804`	`+ }`
`799`	`805`	`}`
`800`	`806`	`}`
`801`	`807`	`}`
Original file line number	Diff line number	Diff line change
`@@ -90,7 +90,9 @@`
`90`	`90`	`}`
`91`	`91`
`92`	`92`	`@if not($button-disabled-arrow-color) and $button-disabled-background {`
`93`		`- $button-disabled-arrow-color: rgba(text-contrast($button-disabled-background), .3);`
	`93`	`+ @if type-of($button-disabled-background) == 'color' {`
	`94`	`+ $button-disabled-arrow-color: rgba(text-contrast($button-disabled-background), .3);`
	`95`	`+ }`
`94`	`96`	`}`
`95`	`97`
`96`	`98`	`@return extend($theme, (`
Original file line number	Diff line number	Diff line change
`@@ -62,11 +62,15 @@`
`62`	`62`	`}`
`63`	`63`
`64`	`64`	`@if not($border-color) and $background-color {`
`65`		`- $border-color: rgba(text-contrast($background-color), .26);`
	`65`	`+ @if type-of($background-color) == 'color' {`
	`66`	`+ $border-color: rgba(text-contrast($background-color), .26);`
	`67`	`+ }`
`66`	`68`	`}`
`67`	`69`
`68`	`70`	`@if not($pinned-border-color) and $background-color {`
`69`		`- $pinned-border-color: rgba(text-contrast($background-color), .26);`
	`71`	`+ @if type-of($background-color) == 'color' {`
	`72`	`+ $pinned-border-color: rgba(text-contrast($background-color), .26);`
	`73`	`+ }`
`70`	`74`	`}`
`71`	`75`
`72`	`76`	`@return extend($theme, (`
Original file line number	Diff line number	Diff line change
`@@ -260,7 +260,7 @@`
`260`	`260`	`$ghost-header-text-color: text-contrast($ghost-header-background);`
`261`	`261`	`}`
`262`	`262`
`263`		`- @if $header-background and type-of($header-background) == 'color' and alpha($header-background) < 1 {`
	`263`	`+ @if $header-background and type-of($header-background) == 'color' {`
`264`	`264`	`$header-background: to-opaque($header-background, igx-color($palette, 'surface'));`
`265`	`265`	`}`
`266`	`266`
`@@ -391,11 +391,15 @@`
`391`	`391`	`}`
`392`	`392`
`393`	`393`	`@if not($grouparea-color) and $grouparea-background {`
`394`		`- $grouparea-color: rgba(text-contrast($grouparea-background), .8)`
	`394`	`+ @if type-of($grouparea-background) == 'color' {`
	`395`	`+ $grouparea-color: rgba(text-contrast($grouparea-background), .8)`
	`396`	`+ }`
`395`	`397`	`}`
`396`	`398`
`397`	`399`	`@if not($grouparea-color) and $header-background {`
`398`		`- $grouparea-color: rgba(text-contrast($header-background), .8)`
	`400`	`+ @if type-of($header-background) == 'color' {`
	`401`	`+ $grouparea-color: rgba(text-contrast($header-background), .8)`
	`402`	`+ }`
`399`	`403`	`}`
`400`	`404`
`401`	`405`	`@if not($drop-area-background) and $grouparea-background {`
Original file line number	Diff line number	Diff line change
`@@ -159,15 +159,15 @@`
`159`	`159`	`$success-shadow-color: rgba(map-get($theme, 'success-secondary-color'), .5);`
`160`	`160`	`$error-shadow-color: rgba(map-get($theme, 'error-secondary-color'), .5);`
`161`	`161`
`162`		`- @if $focused-secondary-color {`
	`162`	`+ @if $focused-secondary-color and type-of($focused-secondary-color) == 'color' {`
`163`	`163`	`$focused-shadow-color: rgba($focused-secondary-color, .5);`
`164`	`164`	`}`
`165`	`165`
`166`		`- @if $success-secondary-color {`
	`166`	`+ @if $success-secondary-color and type-of($success-secondary-color) == 'color' {`
`167`	`167`	`$success-shadow-color: rgba($success-secondary-color, .5);`
`168`	`168`	`}`
`169`	`169`
`170`		`- @if $error-secondary-color {`
	`170`	`+ @if $error-secondary-color and type-of($error-secondary-color) == 'color' {`
`171`	`171`	`$error-shadow-color: rgba($error-secondary-color, .5);`
`172`	`172`	`}`
`173`	`173`
Original file line number	Diff line number	Diff line change
`@@ -156,7 +156,9 @@`
`156`	`156`	`}`
`157`	`157`
`158`	`158`	`@if not($item-subtitle-color) and $item-background {`
`159`		`- $item-subtitle-color: rgba(text-contrast($item-background), .74);`
	`159`	`+ @if type-of($item-background) == 'color' {`
	`160`	`+ $item-subtitle-color: rgba(text-contrast($item-background), .74);`
	`161`	`+ }`
`160`	`162`	`}`
`161`	`163`
`162`	`164`	`@if not($item-subtitle-color) and $item-text-color {`
`@@ -180,7 +182,9 @@`
`180`	`182`	`}`
`181`	`183`
`182`	`184`	`@if not($item-subtitle-color-hover) and $item-background-hover {`
`183`		`- $item-subtitle-color-hover: rgba(text-contrast($item-background-hover), .74);`
	`185`	`+ @if type-of($item-background-hover) == 'color' {`
	`186`	`+ $item-subtitle-color-hover: rgba(text-contrast($item-background-hover), .74);`
	`187`	`+ }`
`184`	`188`	`}`
`185`	`189`
`186`	`190`	`@if not($item-subtitle-color-hover) and $item-text-color-hover {`
`@@ -204,7 +208,9 @@`
`204`	`208`	`}`
`205`	`209`
`206`	`210`	`@if not($item-subtitle-color-active) and $item-background-active {`
`207`		`- $item-subtitle-color-active: rgba(text-contrast($item-background-active), .74);`
	`211`	`+ @if type-of($item-background-active) == 'color' {`
	`212`	`+ $item-subtitle-color-active: rgba(text-contrast($item-background-active), .74);`
	`213`	`+ }`
`208`	`214`	`}`
`209`	`215`
`210`	`216`	`@if not($item-subtitle-color-active) and $item-text-color-active {`
Original file line number	Diff line number	Diff line change
`@@ -183,9 +183,9 @@`
`183`	`183`	`&::before {`
`184`	`184`	`@extend %igx-splitter-hitbox;`
`185`	`185`	`top: calc(100% - #{map-get($theme, 'size')});`
`186`		`- left: calc(100% - #{map-get($theme, 'size') * 2});`
`187`		`- width: #{map-get($theme, 'size') * 4};`
`188`		`- height: #{map-get($theme, 'size') * 3};`
	`186`	`+ left: calc(100% - (#{map-get($theme, 'size')} * 2));`
	`187`	`+ width: calc(#{map-get($theme, 'size')} * 4);`
	`188`	`+ height: calc(#{map-get($theme, 'size')} * 3);`
`189`	`189`	`}`
`190`	`190`	`}`
`191`	`191`
`@@ -195,10 +195,10 @@`
`195`	`195`
`196`	`196`	`&::before {`
`197`	`197`	`@extend %igx-splitter-hitbox;`
`198`		`- top: calc(100% - #{map-get($theme, 'size') * 2});`
`199`		`- left: calc(100% - #{map-get($theme, 'size') * 2});`
`200`		`- width: #{map-get($theme, 'size') * 4};`
`201`		`- height: #{map-get($theme, 'size') * 3};`
	`198`	`+ top: calc(100% - (#{map-get($theme, 'size')} * 2));`
	`199`	`+ left: calc(100% - (#{map-get($theme, 'size')} * 2));`
	`200`	`+ width: calc(#{map-get($theme, 'size')} * 4);`
	`201`	`+ height: calc(#{map-get($theme, 'size')} * 3);`
`202`	`202`	`}`
`203`	`203`	`}`
`204`	`204`
`@@ -210,10 +210,10 @@`
`210`	`210`
`211`	`211`	`&::before {`
`212`	`212`	`@extend %igx-splitter-hitbox;`
`213`		`- top: calc(100% - #{map-get($theme, 'size') * 2});`
`214`		`- left: calc(100% - #{map-get($theme, 'size')});`
`215`		`- width: #{map-get($theme, 'size') * 3};`
`216`		`- height: #{map-get($theme, 'size') * 4};`
	`213`	`+ top: calc(100% - (#{map-get($theme, 'size')} * 2));`
	`214`	`+ left: calc(100% - (#{map-get($theme, 'size')} * 2));`
	`215`	`+ width: calc(#{map-get($theme, 'size')} * 3);`
	`216`	`+ height: calc(#{map-get($theme, 'size')} * 4);`
`217`	`217`	`}`
`218`	`218`	`}`
`219`	`219`
`@@ -225,10 +225,10 @@`
`225`	`225`
`226`	`226`	`&::before {`
`227`	`227`	`@extend %igx-splitter-hitbox;`
`228`		`- left: calc(100% - #{map-get($theme, 'size') * 2});`
`229`		`- top: calc(100% - #{map-get($theme, 'size') * 2});`
`230`		`- height: #{map-get($theme, 'size') * 4};`
`231`		`- width: #{map-get($theme, 'size') * 3};`
	`228`	`+ left: calc(100% - (#{map-get($theme, 'size')} * 2));`
	`229`	`+ top: calc(100% - (#{map-get($theme, 'size')} * 2));`
	`230`	`+ height: calc(#{map-get($theme, 'size')} * 4);`
	`231`	`+ width: calc(#{map-get($theme, 'size')} * 3);`
`232`	`232`	`}`
`233`	`233`	`}`
`234`	`234`	`}`