igniteui-angular 21.2.0-rc.0 → 21.2.0-rc.2

package/lib/core/styles/components/button-group/_button-group-theme.scss

@@ -13,8 +13,6 @@
     $outline-btn-indent: rem(2px);
 
     $variant: map.get($theme, '_meta', 'theme');
-    $bootstrap-theme: $variant == 'bootstrap';
-    $indigo-theme: $variant == 'indigo';
     $group-item-min-width: map.get((
         'material': rem(42px),
         'fluent': rem(42px),
@@ -22,18 +20,6 @@
         'indigo': rem(32px),
     ), $variant);
 
-    %item-overlay {
-        &::before {
-            content: '';
-            z-index: -1;
-            position: absolute;
-            pointer-events: none;
-            width: 100%;
-            height: 100%;
-            background: var-get($theme, 'item-focused-background');
-        }
-    }
-
     %igx-group-display {
         display: flex;
         box-shadow: var-get($theme, 'elevation');
@@ -72,7 +58,11 @@
         }
 
         &:not(:nth-child(1)) {
-            margin-inline-start: rem(-1px);
+            @if $variant != 'fluent' {
+                margin-inline-start: rem(-1px);
+            } @else {
+                border-inline-start: 0;
+            }
         }
 
         &:first-of-type {
@@ -95,47 +85,25 @@
             }
         }
 
-        &:hover {
+        &:hover,
+        &:active {
             color: var-get($theme, 'item-hover-text-color');
-            background: var-get($theme, 'item-hover-background');
-            border-color: var-get($theme, 'item-hover-border-color');
 
             igx-icon {
                 color: var-get($theme, 'item-hover-icon-color');
             }
         }
 
-        @if $variant != 'fluent' {
-            &:active {
-                color: var-get($theme, 'item-hover-text-color');
-                background: var-get($theme, 'item-hover-background');
-                border-color: var-get($theme, 'item-hover-border-color');
-
-                igx-icon {
-                    color: var-get($theme, 'item-hover-icon-color');
-                }
-            }
+        &:hover {
+            z-index: 1;
+            background: var-get($theme, 'item-hover-background');
+            border-color: var-get($theme, 'item-hover-border-color');
         }
 
-        @if $variant == 'material' {
-            &:hover,
-            &:active {
-                @extend %item-overlay;
-
-                background: var-get($theme, 'item-background');
-            }
-
-            &:hover {
-                &::before {
-                    background: var-get($theme, 'item-hover-background');
-                }
-            }
-        }
-
-        @if $variant == 'bootstrap' {
-            &:active {
-                @extend %item-overlay;
-            }
+        &:active {
+            z-index: 2;
+            background: var-get($theme, 'item-active-background');
+            border-color: var-get($theme, 'item-active-border-color');
         }
 
         @if $variant == 'fluent' {
@@ -144,11 +112,6 @@
 
                 --ig-icon-size: #{$icon-size};
             }
-
-            &:active {
-                background: var-get($theme, 'item-focused-background');
-                color: var-get($theme, 'item-text-color');
-            }
         }
 
         @if $variant == 'indigo' {
@@ -159,93 +122,28 @@
 
                 --ig-icon-size: #{$icon-size};
             }
-
-            &:hover {
-                border-color: var-get($theme, 'item-hover-border-color');
-                z-index: 1;
-            }
-
-            &:active {
-                color: var-get($theme, 'item-hover-text-color');
-                background: var-get($theme, 'item-hover-background');
-                border-color: var-get($theme, 'item-hover-border-color');
-                z-index: 2;
-            }
         }
 
         &[igxButton].igx-button--focused {
-            &:hover {
-                color: var-get($theme, 'item-hover-text-color');
-                background: var-get($theme, 'item-hover-background');
-
-                igx-icon {
-                    color: var-get($theme, 'item-hover-icon-color');
-                }
-            }
-
-            @if $variant != 'fluent' {
-                color: var-get($theme, 'item-hover-text-color');
-                background: var-get($theme, 'item-hover-background');
-                border-color: var-get($theme, 'item-hover-border-color');
-
-                igx-icon {
-                    color: var-get($theme, 'item-hover-icon-color');
-                }
-            }
-
-            @if $variant == 'material' {
-                @extend %item-overlay;
-
-                background: var-get($theme, 'item-background');
-
-                &::before {
-                    background: var-get($theme, 'item-hover-background');
-                }
-
-                &:hover {
-                    background: var-get($theme, 'item-background');
-
-                    &::before {
-                        background: var-get($theme, 'item-focused-hover-background');
-                    }
-                }
-
-                &:active {
-                    background: var-get($theme, 'item-background');
-                    color: var-get($theme, 'item-hover-text-color');
-
-                    igx-icon {
-                        color: var-get($theme, 'item-hover-icon-color');
-                    }
+            z-index: 2;
+            color: var-get($theme, 'item-focused-text-color');
+            background: var-get($theme, 'item-focused-background');
+            border-color: var-get($theme, 'item-focused-border-color');
 
-                    &::before {
-                        background: var-get($theme, 'item-focused-background');
-                    }
+            igx-icon {
+                @if $variant == 'indigo' {
+                    color: var-get($theme, 'item-icon-color');
+                } @else {
+                    color: var-get($theme, 'item-focused-text-color');
                 }
             }
 
             @if $variant == 'bootstrap' {
-                background: var-get($theme, 'item-background');
-                z-index: 1;
                 box-shadow: 0 0 0 rem(4px) var-get($theme, 'idle-shadow-color');
-
-                &:active {
-                    background: var-get($theme, 'item-hover-background');
-                    color: var-get($theme, 'item-hover-text-color');
-
-                    igx-icon {
-                        color: var-get($theme, 'item-hover-icon-color');
-                    }
-                }
             }
 
             @if $variant == 'fluent' {
-                background: var-get($theme, 'item-background');
-                color: var-get($theme, 'item-text-color');
-
-                igx-icon {
-                    color: var-get($theme, 'item-icon-color');
-                }
+                border-color: var-get($theme, 'item-border-color');
 
                 &::after {
                     content: '';
@@ -257,37 +155,36 @@
                     height: calc(100% - (#{$outline-btn-indent} * 2));
                     box-shadow: 0 0 0 rem(1px) var-get($theme, 'item-focused-border-color');
                 }
-
-                &:active {
-                    background: var-get($theme, 'item-focused-background');
-                }
             }
 
             @if $variant == 'indigo' {
-                color: var-get($theme, 'item-focused-text-color');
-                background: var-get($theme, 'item-focused-background');
-                border-color: var-get($theme, 'item-focused-border-color');
                 box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color');
-                z-index: 2;
+            }
 
-                igx-icon {
-                    color: var-get($theme, 'item-icon-color');
-                }
+            &:hover,
+            &:active {
+                color: var-get($theme, 'item-focused-hover-text-color');
 
-                &:hover {
-                    border-color: var-get($theme, 'item-hover-border-color');
+                igx-icon {
+                    color: var-get($theme, 'item-focused-hover-text-color');
                 }
 
-                &:active {
-                    color: var-get($theme, 'item-hover-text-color');
-                    background: var-get($theme, 'item-hover-background');
-                    border-color: var-get($theme, 'item-hover-border-color');
-
+                @if $variant == 'indigo' {
                     igx-icon {
                         color: var-get($theme, 'item-hover-icon-color');
                     }
                 }
             }
+
+            &:hover {
+                background: var-get($theme, 'item-focused-hover-background');
+                border-color: var-get($theme, 'item-focused-hover-border-color');
+            }
+
+            &:active {
+                background: var-get($theme, 'item-active-background');
+                border-color: var-get($theme, 'item-active-border-color');
+            }
         }
     }
 
@@ -313,11 +210,11 @@
     }
 
     %igx-group-item-selected {
+        z-index: 2;
         color: var-get($theme, 'item-selected-text-color');
         background: var-get($theme, 'item-selected-background');
         border-color: var-get($theme, 'item-selected-border-color');
         position: relative;
-        z-index: 1;
 
         &[igxButton] {
             border-color: var-get($theme, 'item-selected-border-color');
@@ -327,229 +224,86 @@
             color: var-get($theme, 'item-selected-icon-color');
         }
 
-        &:hover {
-            border-color: var-get($theme, 'item-selected-hover-border-color');
+        &:hover,
+        &:active {
             color: var-get($theme, 'item-selected-hover-text-color');
-            background: var-get($theme, 'item-selected-hover-background');
 
             igx-icon {
                 color: var-get($theme, 'item-selected-hover-icon-color');
             }
         }
 
-        @if $variant == 'material' {
-            &:hover {
-                @extend %item-overlay;
-
-                background: var-get($theme, 'item-selected-background');
-
-                &::before {
-                    background: var-get($theme, 'item-selected-hover-background');
-                }
-            }
-
-            &:active {
-                @extend %item-overlay;
-
-                color: var-get($theme, 'item-selected-hover-text-color');
-                background: var-get($theme, 'item-selected-background');
-                border-color: var-get($theme, 'item-selected-border-color');
-
-                igx-icon {
-                    color: var-get($theme, 'item-selected-hover-icon-color');
-                }
-
-                &::before {
-                    background: var-get($theme, 'item-selected-focus-background');
-                }
-            }
-        }
-
-        @if $variant == 'bootstrap' {
-            &:active {
-                @extend %item-overlay;
-
-                color: var-get($theme, 'item-selected-text-color');
-                border-color: var-get($theme, 'item-selected-border-color');
-                background: var-get($theme, 'item-selected-hover-background');
-
-                &::before {
-                    background: var-get($theme, 'item-selected-focus-background');
-                }
-            }
-        }
-
-        @if $variant == 'fluent' {
-            &:hover {
-                background: var-get($theme, 'item-selected-background');
-                color: var-get($theme, 'item-selected-text-color');
-
-                @extend %item-overlay;
-
-                &::before {
-                    background: var-get($theme, 'item-selected-hover-background');
-                }
-            }
-
-            &:active {
-                background: var-get($theme, 'item-selected-focus-background');
-                color: var-get($theme, 'item-selected-text-color');
-
-                igx-icon {
-                    color: var-get($theme, 'item-selected-icon-color');
-                }
-            }
+        &:hover {
+            border-color: var-get($theme, 'item-selected-hover-border-color');
+            background: var-get($theme, 'item-selected-hover-background');
         }
 
-        @if $variant == 'indigo' {
-            &:active {
-                background: var-get($theme, 'item-selected-hover-background');
-                color: var-get($theme, 'item-selected-hover-text-color');
-                border-color: var-get($theme, 'item-selected-hover-border-color');
-
-                igx-icon {
-                    color: var-get($theme, 'item-selected-hover-icon-color');
-                }
-            }
+        &:active {
+            border-color: var-get($theme, 'item-selected-active-border-color');
+            background: var-get($theme, 'item-selected-active-background');
         }
 
         &[igxButton].igx-button--focused {
-            @if $variant != 'fluent' {
-                &:hover {
-                    color: var-get($theme, 'item-selected-hover-text-color');
-                    background: var-get($theme, 'item-selected-hover-background');
-                    border-color: var-get($theme, 'item-selected-hover-border-color');
-                }
-
-                &:active {
-                    background: var-get($theme, 'item-selected-hover-background');
-                    color: var-get($theme, 'item-selected-hover-text-color');
-
-                    &::before {
-                        background: var-get($theme, 'item-selected-focus-background');
-                    }
-
-                    igx-icon {
-                        color: var-get($theme, 'item-selected-hover-icon-color');
-                    }
-                }
-            }
-
-            @if $variant == 'material' or $variant == 'fluent' {
-                &:hover {
-                    @extend %item-overlay;
+            background: var-get($theme, 'item-selected-focus-background');
+            border-color: var-get($theme, 'item-selected-hover-border-color');
+            color: var-get($theme, 'item-selected-text-color');
 
-                    &::before {
-                        background: var-get($theme, 'item-selected-focus-hover-background');
-                    }
-                }
+            igx-icon {
+                color: var-get($theme, 'item-selected-icon-color');
             }
 
             @if $variant == 'material' {
-                background: var-get($theme, 'item-selected-background');
                 color: var-get($theme, 'item-selected-hover-text-color');
-                border-color: var-get($theme, 'item-selected-hover-border-color');
-
-                &::before {
-                    background: var-get($theme, 'item-selected-hover-background');
-                }
 
                 igx-icon {
                     color: var-get($theme, 'item-selected-hover-icon-color');
                 }
+            }
 
-                &:hover {
-                    background: var-get($theme, 'item-selected-background');
-
-                    igx-icon {
-                        color: var-get($theme, 'item-selected-hover-icon-color');
-                    }
-                }
-
-                &:active {
-                    background: var-get($theme, 'item-selected-background');
-                }
+            @if $variant == 'indigo' {
+                border-color: var-get($theme, 'item-selected-border-color');
+                box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color');
             }
 
             @if $variant == 'bootstrap' {
-                color: var-get($theme, 'item-selected-text-color');
-                border-color: var-get($theme, 'item-selected-border-color');
-                background: var-get($theme, 'item-selected-background');
                 box-shadow: 0 0 0 rem(4px) var-get($theme, 'selected-shadow-color');
-
-                igx-icon {
-                    color: var-get($theme, 'item-selected-icon-color');
-                }
             }
 
-            @if $variant == 'fluent' {
-                background: var-get($theme, 'item-selected-background');
-                color: var-get($theme, 'item-selected-text-color');
+            &:hover,
+            &:active {
+                color: var-get($theme, 'item-selected-hover-text-color');
 
                 igx-icon {
-                    color: var-get($theme, 'item-selected-icon-color');
-                }
-
-                &:hover {
-                    background: var-get($theme, 'item-selected-background');
-                    color: var-get($theme, 'item-selected-text-color');
-
-                    igx-icon {
-                        color: var-get($theme, 'item-selected-hover-icon-color');
-                    }
+                    color: var-get($theme, 'item-selected-hover-icon-color');
                 }
 
-                &:active {
-                    background: var-get($theme, 'item-selected-focus-background');
+                @if $variant == 'indigo' {
+                    border-color: var-get($theme, 'item-selected-hover-border-color');
                 }
             }
 
-            @if $variant == 'indigo' {
-                box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color');
+            &:hover {
+                background: var-get($theme, 'item-selected-focus-hover-background');
                 border-color: var-get($theme, 'item-selected-border-color');
-                background: var-get($theme, 'item-selected-background');
-                color: var-get($theme, 'item-selected-text-color');
-
-                igx-icon {
-                    color: var-get($theme, 'item-selected-icon-color');
-                }
-
-                &:hover,
-                &:active {
-                    border-color: var-get($theme, 'item-selected-hover-border-color');
+            }
 
-                    igx-icon {
-                        color: var-get($theme, 'item-selected-hover-icon-color');
-                    }
-                }
+            &:active {
+                border-color: var-get($theme, 'item-selected-active-border-color');
+                background: var-get($theme, 'item-selected-active-background');
             }
         }
 
         &[igxButton][disabled='true'] {
-            position: relative;
-
-            &::before {
-                position: absolute;
-                content: '';
-                top: 0;
-                bottom: 0;
-                inset-inline-end: 0;
-                inset-inline-start: 0;
-                background: var-get($theme, 'disabled-selected-background');
+            color: var-get($theme, 'disabled-selected-text-color');
+            background: var-get($theme, 'disabled-selected-background');
+            border-color: var-get($theme, 'disabled-selected-border-color');
+
+            igx-icon {
+                color: var-get($theme, 'disabled-selected-icon-color');
             }
 
             @if $variant == 'indigo' {
-                color: var-get($theme, 'disabled-selected-text-color');
-                background: var-get($theme, 'disabled-selected-background');
                 border: none;
-
-                igx-icon {
-                    color: var-get($theme, 'disabled-selected-icon-color');
-                }
-
-                &::before {
-                    display: none;
-                }
             }
         }
     }

package/lib/core/styles/components/chip/_chip-theme.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable max-nesting-depth */
 @use 'sass:map';
 @use '../../base' as *;
 @use 'igniteui-theming/sass/animations/easings' as *;
@@ -115,7 +116,6 @@
             )
         );
 
-        gap: sizable(rem(3px), rem(6px), rem(8px));
         color: var-get($theme, 'text-color');
         background: var-get($theme, 'background');
         border: $border-size solid var-get($theme, 'border-color');
@@ -410,6 +410,8 @@
     }
 
     %igx-chip__start {
+        gap: sizable(rem(3px), rem(6px), rem(8px));
+
         > igx-avatar,
         > igx-circular-bar {
             &:first-child {
@@ -437,6 +439,8 @@
     }
 
     %igx-chip__end {
+        gap: sizable(rem(3px), rem(6px), rem(8px));
+
         > igx-avatar,
         > igx-circular-bar {
             &:last-child {
@@ -490,6 +494,7 @@
     %igx-chip__content {
         @include ellipsis();
 
+        padding-inline: pad-inline(rem(3px), rem(6px), rem(8px));
         max-width: $chip-max-width;
 
         &:empty {
@@ -578,7 +583,6 @@
 
             &%igx-chip--primary {
                 %igx-chip__item {
-                    /* stylelint-disable max-nesting-depth */
                     @if $theme-variant == 'light' {
                         color: contrast-color($color: 'primary', $variant: 900, $opacity: .4);
                     } @else {