Merge branch '21.0.x' into didimmova/fix-badge-proj-content-21.0.x

Author: simeonoff

projects/igniteui-angular/core/src/core/styles/components/chip/_chip-theme.scss

@@ -115,7 +115,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 +409,8 @@
     }
 
     %igx-chip__start {
+        gap: sizable(rem(3px), rem(6px), rem(8px));
+
         > igx-avatar,
         > igx-circular-bar {
             &:first-child {
@@ -437,6 +438,8 @@
     }
 
     %igx-chip__end {
+        gap: sizable(rem(3px), rem(6px), rem(8px));
+
         > igx-avatar,
         > igx-circular-bar {
             &:last-child {
@@ -490,6 +493,7 @@
     %igx-chip__content {
         @include ellipsis();
 
+        padding-inline: pad-inline(rem(3px), rem(6px), rem(8px));
         max-width: $chip-max-width;
 
         &:empty {

projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-theme.scss

@@ -257,11 +257,11 @@
 
 			@if $variant == 'fluent' {
 				--background: transparent;
-				--focus-hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
+				--focus-hover-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-hover});
 				--focus-visible-background: transparent;
-				--focus-background: transparent;
-				--active-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
-				--hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
+				--focus-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus});
+				--active-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus});
+				--hover-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-hover});
 			}
 
 			--foreground: #{var-get($theme, 'color-expression-group-and')};
@@ -307,11 +307,11 @@
 
 			@if $variant == 'fluent' {
 				--background: transparent;
-				--focus-hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
+				--focus-hover-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-hover});
 				--focus-visible-background: transparent;
-				--focus-background: transparent;
-				--active-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
-				--hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
+				--focus-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus});
+				--active-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus});
+				--hover-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-hover});
 			}
 
 			--foreground: #{var-get($theme, 'color-expression-group-or')};