Improve Component Themes (#15729)

Author: didimmova

CHANGELOG.md

@@ -2,6 +2,17 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 20.0.2
+
+### New Features
+- **Separating Button and Icon Button Themes** - The `button-theme` and `icon-button-theme` functions are still available, but for more targeted customization, you can now use the specific theme function for each button type.
+- **Component Themes Enchancements** - Component themes have been improved to automatically calculate all necessary states (e.g., hover, focus, active) based on just a few key values. For example, customizing a contained button requires only a background color:
+```scss
+    $custom-contained-button: contained-button-theme(
+        $background: #09f;
+    );
+```
+
 ## 20.0.0
 
 ### General

projects/igniteui-angular-elements/src/app/wrapper/wrapper.component.ts

@@ -16,7 +16,6 @@ export class TemplateWrapperComponent {
 
     public templateFunctions: TemplateFunction[] = [];
     public templateRendered = new Subject<HTMLElement>();
-
     private childParts: WeakMap<HTMLElement, RootPart> = new WeakMap();
 
     /**
@@ -28,7 +27,7 @@ export class TemplateWrapperComponent {
     public templateRefs: QueryList<TemplateRef<any>>;
 
     constructor(private cdr: ChangeDetectorRef) { }
-
+  
     protected litRender(container: HTMLElement, templateFunc: (arg: any) => TemplateResult, arg: any) {
         const part = render(templateFunc(arg), container);
 

projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss

@@ -41,10 +41,9 @@
     }
 
     $theme: digest-schema($action-strip-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($icon-color) and $actions-background {
-        $icon-color: text-contrast($actions-background);
+        $icon-color: adaptive-contrast(var(--actions-background));
     }
 
     @if not($actions-border-radius) {
@@ -58,10 +57,6 @@
         icon-color: $icon-color,
         delete-action: $delete-action,
         actions-border-radius: $actions-border-radius,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -71,7 +66,7 @@
 @mixin action-strip($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
     $icon-button-size: map.get((
         'material': rem(36px),
         'fluent': rem(32px),

projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss

@@ -41,10 +41,13 @@
     }
 
     $theme: digest-schema($avatar-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($color) and $background {
-        $color: text-contrast($background);
+        $color: adaptive-contrast(var(--background));
+    }
+
+    @if not($icon-color) and $background {
+        $icon-color: adaptive-contrast(var(--background));
     }
 
     @return extend($theme, (
@@ -54,10 +57,6 @@
         icon-color: $icon-color,
         border-radius: $border-radius,
         size: $size,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -67,8 +66,8 @@
 @mixin avatar($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
- 
+    $variant: map.get($theme, '_meta', 'theme');
+
     %igx-avatar-display {
         @include sizable();
 

projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss

@@ -48,14 +48,13 @@
     }
 
     $theme: digest-schema($badge-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($icon-color) and $background-color {
-        $icon-color: text-contrast($background-color);
+        $icon-color: adaptive-contrast(var(--background-color));
     }
 
     @if not($text-color) and $background-color {
-        $text-color: text-contrast($background-color);
+        $text-color: adaptive-contrast(var(--background-color));
     }
 
     @if not($shadow) {
@@ -71,10 +70,6 @@
         border-radius: $border-radius,
         background-color: $background-color,
         shadow: $shadow,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme'),
-        )),
     ));
 }
 
@@ -84,7 +79,7 @@
 @mixin badge($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     %igx-badge-display {
         --size: #{rem(22px)};

projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss

@@ -43,10 +43,13 @@
     }
 
     $theme: digest-schema($banner-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($banner-message-color) and $banner-background {
-        $banner-message-color: text-contrast($banner-background);
+        $banner-message-color: adaptive-contrast(var(--banner-background));
+    }
+
+    @if not($banner-illustration-color) and $banner-background {
+        $banner-illustration-color: adaptive-contrast(var(--banner-background));
     }
 
     @return extend($theme, (
@@ -57,10 +60,6 @@
         banner-border-color: $banner-border-color,
         banner-illustration-color: $banner-illustration-color,
         border-radius: $border-radius,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -69,7 +68,7 @@
 /// @param {Map} $theme - The theme used to style the component.
 @mixin banner($theme) {
     @include css-vars($theme);
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     %igx-banner-host {
         igx-expansion-panel-body {

projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss

@@ -51,42 +51,36 @@
 
     $theme: digest-schema($bottom-nav-schema);
 
-    $meta: map.get($theme, '_meta');
-
-    @if not($label-color) and $background {
-        @if meta.type-of($background) == 'color' {
-            $label-color: text-contrast($background);
-        }
+    @if not($label-color) and not($icon-color) and $background {
+        $label-color: adaptive-contrast(var(--background));
     }
 
     @if not($icon-color) and $label-color {
-        @if meta.type-of($label-color) == 'color' {
-            $icon-color: $label-color;
-        }
+        $icon-color: $label-color;
+    }
+
+    @if not($label-color) and $icon-color {
+        $label-color: $icon-color;
+    }
+
+    @if not($icon-disabled-color) and not($label-disabled-color) and $label-color {
+        $label-disabled-color: adaptive-contrast(var(--background));
     }
 
     @if not($icon-disabled-color) and $label-disabled-color {
-        @if meta.type-of($label-disabled-color) == 'color' {
-            $icon-disabled-color: $label-disabled-color;
-        }
+        $icon-disabled-color: $label-disabled-color;
     }
 
     @if not($label-disabled-color) and $icon-disabled-color {
-        @if meta.type-of($icon-disabled-color) == 'color' {
-            $label-disabled-color: $icon-disabled-color;
-        }
+        $label-disabled-color: $icon-disabled-color;
     }
 
     @if not($icon-selected-color) and $label-selected-color {
-        @if meta.type-of($background) == 'color' {
-            $icon-selected-color: $label-selected-color;
-        }
+        $icon-selected-color: $label-selected-color;
     }
 
-    @if not($icon-color) and $background {
-        @if meta.type-of($background) == 'color' {
-            $icon-color: text-contrast($background);
-        }
+    @if not($label-selected-color) and $icon-selected-color {
+        $label-selected-color: $icon-selected-color;
     }
 
     @if not($shadow) {
@@ -105,11 +99,6 @@
         label-disabled-color: $label-disabled-color,
         border-color: $border-color,
         shadow: $shadow,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme'),
-            theme-variant: map.get($schema, '_meta', 'variant')
-        )),
     ));
 }
 
@@ -119,7 +108,7 @@
 @mixin bottom-nav($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
     $menu-height: rem(56px);
     $item-min-width: rem(80px);
     $item-max-width: rem(168px);