igniteui-angular 18.2.0-beta.0 → 18.2.0-beta.1

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

@@ -243,7 +243,8 @@
         focus-selected-outline-color: $focus-selected-outline-color,
         focus-outline-color: $focus-outline-color,
         _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
+            variant: map.get($schema, '_meta', 'theme'),
+            theme-variant: map.get($schema, '_meta', 'variant')
         )),
         size: $size,
     ));
@@ -254,15 +255,15 @@
 /// @param {Map} $theme - The theme used to style the component.
 @mixin chip($theme) {
     @include css-vars($theme);
-    $transition: all 120ms $in-out-quad;
     $chip-max-width: 32ch;
 
     $variant: map.get($theme, '_meta', 'variant');
+    $theme-variant: map.get($theme, '_meta', 'theme-variant');
 
     $chip-padding: (
-        comfortable: rem(12px),
-        cosy: rem(6px),
-        compact: rem(2px)
+        comfortable: rem(if($variant != 'indigo', 12px, 7px)),
+        cosy: rem(if($variant != 'indigo', 6px, 5px)),
+        compact: rem(if($variant != 'indigo', 2px, 3px))
     );
 
     $box-shadow-focus: map.get((
@@ -288,6 +289,11 @@
         flex-wrap: wrap;
         width: 100%;
 
+        @if $variant == 'indigo' {
+            padding: rem(4px);
+            gap: rem(8px)
+        }
+
         &:empty {
             display: none;
         }
@@ -301,36 +307,14 @@
         position: relative;
         display: inline-flex;
         flex-shrink: 0;
-        transition: $transition;
-        transition-property: top, left;
 
         // Fix: The grid resizing does not autosize the filter header cells with the default filter chips
         // https://github.com/IgniteUI/igniteui-angular/pull/12770/files/efd2a274038c051e82561903f8799fd03265fd74#r1150993630
         min-width: max-content;
-
-        [dir='rtl'] & {
-            transition-property: top right;
-        }
-
         touch-action: none;
         outline: none;
 
         // The focus and hover are build that way since the host is the focusable element
-
-        &:hover {
-            %igx-chip__item {
-                color: var-get($theme, 'hover-text-color');
-                background: var-get($theme, 'hover-background');
-                border-color: var-get($theme, 'hover-border-color');
-            }
-
-            %igx-chip__item--selected {
-                color: var-get($theme, 'hover-selected-text-color');
-                background: var-get($theme, 'hover-selected-background');
-                border-color: var-get($theme, 'hover-selected-border-color');
-            }
-        }
-
         &:focus {
             %igx-chip__item {
                 outline-style: none;
@@ -344,24 +328,21 @@
                 color: var-get($theme, 'focus-selected-text-color');
                 background: var-get($theme, 'focus-selected-background');
                 border-color: var-get($theme, 'focus-selected-border-color');
-                transition: $transition;
                 box-shadow: $box-shadow-focus-selected;
             }
         }
 
-        @if $variant == 'indigo' {
-            &:focus:hover {
-                %igx-chip__item {
-                    color: var-get($theme, 'hover-text-color');
-                    background: var-get($theme, 'hover-background');
-                    border-color: var-get($theme, 'hover-border-color');
-                }
+        &:hover {
+            %igx-chip__item {
+                color: var-get($theme, 'hover-text-color');
+                background: var-get($theme, 'hover-background');
+                border-color: var-get($theme, 'hover-border-color');
+            }
 
-                %igx-chip__item--selected {
-                    color: var-get($theme, 'hover-selected-text-color');
-                    background: var-get($theme, 'hover-selected-background');
-                    border-color: var-get($theme, 'hover-selected-border-color');
-                }
+            %igx-chip__item--selected {
+                color: var-get($theme, 'hover-selected-text-color');
+                background: var-get($theme, 'hover-selected-background');
+                border-color: var-get($theme, 'hover-selected-border-color');
             }
         }
     }
@@ -378,6 +359,7 @@
             map.get($chip-padding, 'cosy'),
             map.get($chip-padding, 'comfortable')
         );
+
         gap: sizable(rem(3px), rem(6px), rem(8px));
         color: var-get($theme, 'text-color');
         background: var-get($theme, 'background');
@@ -386,10 +368,7 @@
         user-select: none;
         overflow: hidden;
         cursor: pointer;
-        // hacking `overflow: hidden` with border radius
-        // not playing nicely together
         filter: opacity(1);
-        // transition: all 120ms ease-in;
 
         igx-avatar {
             display: flex !important;
@@ -404,6 +383,12 @@
             --component-size: var(--chip-size);
         }
 
+        @if $variant == 'indigo' {
+            %igx-icon-display {
+                --size: #{sizable(rem(14px), rem(14px), rem(16px))}
+            }
+        }
+
         igx-avatar,
         igx-circular-bar {
             max-height: 100%;
@@ -427,7 +412,6 @@
         color: var-get($theme, 'selected-text-color');
         background: var-get($theme, 'selected-background');
         border-color: var-get($theme, 'selected-border-color');
-        transition: $transition;
     }
 
     %igx-chip__item--primary {
@@ -441,20 +425,6 @@
     }
 
     %igx-chip%igx-chip--primary {
-        &:hover {
-            %igx-chip__item {
-                @if $variant == 'indigo' {
-                    color: contrast-color($color: 'primary', $variant: 400);
-                    background: color($color: 'primary', $variant: 400);
-                    border-color: color($color: 'primary', $variant: 400);
-                } @else {
-                    color: contrast-color($color: 'primary', $variant: 600);
-                    background: color($color: 'primary', $variant: 600);
-                    border-color: color($color: 'primary', $variant: 600);
-                }
-            }
-        }
-
         &:focus {
             %igx-chip__item {
                 color: contrast-color($color: 'primary', $variant: 800);
@@ -462,10 +432,10 @@
                 border-color: color($color: 'primary', $variant: 800);
 
                 @if $variant == 'indigo' {
-                    color: contrast-color($color: 'primary', $variant: 500);
+                    color: contrast-color($color: 'primary', $variant: 900);
                     background: color($color: 'primary', $variant: 500);
                     border-color: color($color: 'primary', $variant: 500);
-                    box-shadow: 0 0 0 rem(3px) color($color: 'primary', $variant: 200);
+                    box-shadow: 0 0 0 rem(3px) color($color: 'primary', $variant: 400, $opacity: .5);
                 }
 
                 @if $variant == 'bootstrap' {
@@ -473,29 +443,29 @@
                 }
             }
         }
-    }
 
-    %igx-chip__item--info {
-        color: contrast-color($color: 'info', $variant: 500);
-        background: color($color: 'info', $variant: 500);
-        border-color: color($color: 'info', $variant: 500);
-    }
-
-    %igx-chip%igx-chip--info {
         &:hover {
             %igx-chip__item {
                 @if $variant == 'indigo' {
-                    color: contrast-color($color: 'info', $variant: 400);
-                    background: color($color: 'info', $variant: 400);
-                    border-color: color($color: 'info', $variant: 400);
+                    color: contrast-color($color: 'primary', $variant: 900);
+                    background: color($color: 'primary', $variant: 400);
+                    border-color: color($color: 'primary', $variant: 400);
                 } @else {
-                    color: contrast-color($color: 'info', $variant: 600);
-                    background: color($color: 'info', $variant: 600);
-                    border-color: color($color: 'info', $variant: 600);
+                    color: contrast-color($color: 'primary', $variant: 600);
+                    background: color($color: 'primary', $variant: 600);
+                    border-color: color($color: 'primary', $variant: 600);
                 }
             }
         }
+    }
 
+    %igx-chip__item--info {
+        color: contrast-color($color: 'info', $variant: 500);
+        background: color($color: 'info', $variant: 500);
+        border-color: color($color: 'info', $variant: 500);
+    }
+
+    %igx-chip%igx-chip--info {
         &:focus {
             %igx-chip__item {
                 color: contrast-color($color: 'info', $variant: 800);
@@ -506,7 +476,7 @@
                     color: contrast-color($color: 'info', $variant: 500);
                     background: color($color: 'info', $variant: 500);
                     border-color: color($color: 'info', $variant: 500);
-                    box-shadow: 0 0 0 rem(3px) color($color: 'info', $variant: 200);
+                    box-shadow: 0 0 0 rem(3px) color($color: 'info', $variant: if($theme-variant == 'light', 100, 800));
                 }
 
                 @if $variant == 'bootstrap' {
@@ -514,33 +484,33 @@
                 }
             }
         }
+
+        &:hover {
+            %igx-chip__item {
+                @if $variant == 'indigo' {
+                    color: contrast-color($color: 'info', $variant: 400);
+                    background: color($color: 'info', $variant: 400);
+                    border-color: color($color: 'info', $variant: 400);
+                } @else {
+                    color: contrast-color($color: 'info', $variant: 600);
+                    background: color($color: 'info', $variant: 600);
+                    border-color: color($color: 'info', $variant: 600);
+                }
+            }
+        }
     }
 
     %igx-chip__item--success {
         @if $variant == 'bootstrap' {
             color: contrast-color($color: 'success', $variant: 600);
         } @else {
-            color: contrast-color($color: 'success', $variant: 500);
+            color: contrast-color($color: 'success', $variant: if($variant = 'indigo', 900, 500));
         }
         background: color($color: 'success', $variant: 500);
         border-color: color($color: 'success', $variant: 500);
     }
 
     %igx-chip%igx-chip--success {
-        &:hover {
-            %igx-chip__item {
-                @if $variant == 'indigo' {
-                    color: contrast-color($color: 'success', $variant: 400);
-                    background: color($color: 'success', $variant: 400);
-                    border-color: color($color: 'success', $variant: 400);
-                } @else {
-                    color: contrast-color($color: 'success', $variant: 600);
-                    background: color($color: 'success', $variant: 600);
-                    border-color: color($color: 'success', $variant: 600);
-                }
-            }
-        }
-
         &:focus {
             %igx-chip__item {
                 color: contrast-color($color: 'success', $variant: 800);
@@ -548,10 +518,10 @@
                 border-color: color($color: 'success', $variant: 800);
 
                 @if $variant == 'indigo' {
-                    color: contrast-color($color: 'success', $variant: 500);
+                    color: contrast-color($color: 'success', $variant: 900);
                     background: color($color: 'success', $variant: 500);
                     border-color: color($color: 'success', $variant: 500);
-                    box-shadow: 0 0 0 rem(3px) color($color: 'success', $variant: 200);
+                    box-shadow: 0 0 0 rem(3px) color($color: 'success', $variant: if($theme-variant == 'light', 200, 800));
                 }
 
                 @if $variant == 'bootstrap' {
@@ -559,29 +529,29 @@
                 }
             }
         }
-    }
 
-    %igx-chip__item--warning {
-        color: contrast-color($color: 'warn', $variant: 500);
-        background: color($color: 'warn', $variant: 500);
-        border-color: color($color: 'warn', $variant: 500);
-    }
-
-    %igx-chip%igx-chip--warning {
         &:hover {
             %igx-chip__item {
                 @if $variant == 'indigo' {
-                    color: contrast-color($color: 'warn', $variant: 400);
-                    background: color($color: 'warn', $variant: 400);
-                    border-color: color($color: 'warn', $variant: 400);
+                    color: contrast-color($color: 'success', $variant: 900);
+                    background: color($color: 'success', $variant: 400);
+                    border-color: color($color: 'success', $variant: 400);
                 } @else {
-                    color: contrast-color($color: 'warn', $variant: 600);
-                    background: color($color: 'warn', $variant: 600);
-                    border-color: color($color: 'warn', $variant: 600);
+                    color: contrast-color($color: 'success', $variant: 600);
+                    background: color($color: 'success', $variant: 600);
+                    border-color: color($color: 'success', $variant: 600);
                 }
             }
         }
+    }
 
+    %igx-chip__item--warning {
+        color: contrast-color($color: 'warn', $variant: 900);
+        background: color($color: 'warn', $variant: 500);
+        border-color: color($color: 'warn', $variant: 500);
+    }
+
+    %igx-chip%igx-chip--warning {
         &:focus {
             %igx-chip__item {
                 color: contrast-color($color: 'warn', $variant: 800);
@@ -589,10 +559,10 @@
                 border-color: color($color: 'warn', $variant: 800);
 
                 @if $variant == 'indigo' {
-                    color: contrast-color($color: 'warn', $variant: 500);
+                    color: contrast-color($color: 'warn', $variant: 900);
                     background: color($color: 'warn', $variant: 500);
                     border-color: color($color: 'warn', $variant: 500);
-                    box-shadow: 0 0 0 rem(3px) color($color: 'warn', $variant: 200);
+                    box-shadow: 0 0 0 rem(3px) color($color: 'warn', $variant: if($theme-variant == 'light', 100, 900));
                 }
 
                 @if $variant == 'bootstrap' {
@@ -600,33 +570,33 @@
                 }
             }
         }
+
+        &:hover {
+            %igx-chip__item {
+                @if $variant == 'indigo' {
+                    color: contrast-color($color: 'warn', $variant: 900);
+                    background: color($color: 'warn', $variant: 400);
+                    border-color: color($color: 'warn', $variant: 400);
+                } @else {
+                    color: contrast-color($color: 'warn', $variant: 600);
+                    background: color($color: 'warn', $variant: 600);
+                    border-color: color($color: 'warn', $variant: 600);
+                }
+            }
+        }
     }
 
     %igx-chip__item--danger {
         @if $variant == 'bootstrap' {
             color: contrast-color($color: 'error', $variant: 600);
         } @else {
-            color: contrast-color($color: 'error', $variant: 500);
+            color: contrast-color($color: 'error', $variant: if($variant = 'indigo', 900, 500));
         }
         background: color($color: 'error', $variant: 500);
         border-color: color($color: 'error', $variant: 500);
     }
 
     %igx-chip%igx-chip--danger {
-        &:hover {
-            %igx-chip__item {
-                @if $variant == 'indigo' {
-                    color: contrast-color($color: 'error', $variant: 400);
-                    background: color($color: 'error', $variant: 400);
-                    border-color: color($color: 'error', $variant: 400);
-                } @else {
-                    color: contrast-color($color: 'error', $variant: 600);
-                    background: color($color: 'error', $variant: 600);
-                    border-color: color($color: 'error', $variant: 600);
-                }
-            }
-        }
-
         &:focus {
             %igx-chip__item {
                 color: contrast-color($color: 'error', $variant: 800);
@@ -634,10 +604,10 @@
                 border-color: color($color: 'error', $variant: 800);
 
                 @if $variant == 'indigo' {
-                    color: contrast-color($color: 'error', $variant: 500);
+                    color: contrast-color($color: 'error', $variant: 900);
                     background: color($color: 'error', $variant: 500);
                     border-color: color($color: 'error', $variant: 500);
-                    box-shadow: 0 0 0 rem(3px) color($color: 'error', $variant: 200);
+                    box-shadow: 0 0 0 rem(3px) color($color: 'error', $variant: if($theme-variant == 'light', 100, 900));
                 }
 
                 @if $variant == 'bootstrap' {
@@ -645,13 +615,31 @@
                 }
             }
         }
+
+        &:hover {
+            %igx-chip__item {
+                @if $variant == 'indigo' {
+                    color: contrast-color($color: 'error', $variant: 900);
+                    background: color($color: 'error', $variant: 400);
+                    border-color: color($color: 'error', $variant: 400);
+                } @else {
+                    color: contrast-color($color: 'error', $variant: 600);
+                    background: color($color: 'error', $variant: 600);
+                    border-color: color($color: 'error', $variant: 600);
+                }
+            }
+        }
     }
 
     %igx-chip__start {
         > igx-avatar,
         > igx-circular-bar {
             &:first-child {
-                margin-inline-start: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1);
+                @if $variant != 'indigo' {
+                    margin-inline-start: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1);
+                } @else {
+                    margin-inline-start: calc(#{sizable(rem(1px), rem(3px), rem(4px))} * -1);
+                }
             }
         }
 
@@ -660,7 +648,11 @@
             &:first-of-type {
                 igx-avatar,
                 igx-circular-bar {
-                    margin-inline-start: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1);
+                    @if $variant != 'indigo' {
+                        margin-inline-start: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1);
+                    } @else {
+                        margin-inline-start: calc(#{sizable(rem(1px), rem(3px), rem(4px))} * -1);
+                    }
                 }
             }
         }
@@ -670,7 +662,11 @@
         > igx-avatar,
         > igx-circular-bar {
             &:last-child {
-                margin-inline-end: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1);
+                @if $variant != 'indigo' {
+                    margin-inline-end: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1);
+                } @else {
+                    margin-inline-end: calc(#{sizable(rem(1px), rem(3px), rem(4px))} * -1);
+                }
             }
         }
 
@@ -679,7 +675,11 @@
             &:first-of-type {
                 igx-avatar,
                 igx-circular-bar {
-                    margin-inline-end: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1);
+                    @if $variant != 'indigo' {
+                        margin-inline-end: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1);
+                    } @else {
+                        margin-inline-end: calc(#{sizable(rem(1px), rem(3px), rem(4px))} * -1);
+                    }
                 }
             }
         }
@@ -698,7 +698,9 @@
 
     %igx-chip__prefix,
     %igx-chip__suffix {
-        display: inline-flex;
+        @include ellipsis();
+
+        display: inline-block;
         vertical-align: middle;
         max-width: $chip-max-width;
 
@@ -744,12 +746,15 @@
     %igx-chip__select {
         display: inline-flex;
         align-items: center;
+        max-width: rem(24px);
         opacity: 1;
         z-index: 1;
-        transition: opacity 120ms $out-quad, width 120ms $out-quad;
+        transition: max-width .12s $in-out-quad, opacity .12s $in-out-quad .06s;
+        transition-behavior: allow-discrete;
 
-        > * {
-            width: inherit !important;
+        @starting-style {
+            max-width: 0;
+            opacity: 0;
         }
     }
 
@@ -777,58 +782,79 @@
         }
     }
 
+    %igx-chip__item--disabled {
+        color: var-get($theme, 'disabled-text-color');
+        background: var-get($theme, 'disabled-background');
+        border-color: var-get($theme, 'disabled-border-color');
+    }
+
     %igx-chip--disabled {
         cursor: default;
         pointer-events: none;
 
-
         @if $variant == 'indigo' {
+            %igx-chip__item--selected {
+                background: color($color: 'primary', $variant: 400, $opacity: .5);
+                border-color: transparent;
+                color: contrast-color($color: 'primary', $variant: 900, $opacity: if($theme-variant == 'light', .4, .2));
+            }
+
             &%igx-chip--primary {
                 %igx-chip__item {
-                    color: contrast-color($color: 'primary', $variant: 400);
-                    background: color($color: 'primary', $variant: 200);
-                    border-color: color($color: 'primary', $variant: 200);
+                    /* stylelint-disable max-nesting-depth */
+                    @if $theme-variant == 'light' {
+                        color: contrast-color($color: 'primary', $variant: 900, $opacity: .4);
+                    } @else {
+                        color: contrast-color($color: 'primary', $variant: 900, $opacity: .2);
+                    }
+
+                    background: color($color: 'primary', $variant: 400, $opacity: .5);
+                    border-color: transparent;
+                    /* stylelint-enable max-nesting-depth */
                 }
             }
 
             &%igx-chip--info {
                 %igx-chip__item {
-                    color: contrast-color($color: 'info', $variant: 400);
-                    background: color($color: 'info', $variant: 200);
-                    border-color: color($color: 'info', $variant: 200);
+                    color: contrast-color($color: 'info', $variant: 900);
+                    background: color($color: 'info', $variant: 500);
+                    border-color: color($color: 'info', $variant: 500);
                 }
             }
 
             &%igx-chip--success {
                 %igx-chip__item {
-                    color: contrast-color($color: 'success', $variant: 800);
-                    background: color($color: 'success', $variant: 200);
-                    border-color: color($color: 'success', $variant: 200);
+                    color: contrast-color($color: 'success', $variant: 900);
+                    background: color($color: 'success', $variant: 500);
+                    border-color: color($color: 'success', $variant: 500);
                 }
             }
 
             &%igx-chip--warning {
                 %igx-chip__item {
                     color: contrast-color($color: 'warn', $variant: 900);
-                    background: color($color: 'warn', $variant: 200);
-                    border-color: color($color: 'warn', $variant: 200);
+                    background: color($color: 'warn', $variant: 500);
+                    border-color: color($color: 'warn', $variant: 500);
                 }
             }
 
             &%igx-chip--danger {
                 %igx-chip__item {
-                    color: contrast-color($color: 'error', $variant: 400);
-                    background: color($color: 'error', $variant: 200);
-                    border-color: color($color: 'error', $variant: 200);
+                    color: contrast-color($color: 'error', $variant: 900);
+                    background: color($color: 'error', $variant: 500);
+                    border-color: color($color: 'error', $variant: 500);
                 }
             }
-        }
-    }
 
-    %igx-chip__item--disabled {
-        color: var-get($theme, 'disabled-text-color');
-        background: var-get($theme, 'disabled-background');
-        border-color: var-get($theme, 'disabled-border-color');
+            &%igx-chip--info,
+            &%igx-chip--success,
+            &%igx-chip--warning,
+            &%igx-chip--danger {
+                %igx-chip__item {
+                    opacity: .4;
+                }
+            }
+        }
     }
 }
 

package/lib/core/styles/components/drop-down/_drop-down-theme.scss

@@ -282,7 +282,11 @@
 
         igx-icon {
             justify-content: center;
-            --component-size: var(--dropdown-size);
+            --component-size: 1;
+
+            @if $variant == 'fluent' {
+                --component-size: 3;
+            }
 
             @if $variant == 'indigo' {
                 $icon-size: sizable(rem(14px), rem(16px), rem(16px));