refactor(*): utilize custom indigo icons when indigo theme is used

projects/igniteui-angular/src/lib/checkbox/checkbox.component.html

@@ -25,9 +25,16 @@
  class="igx-checkbox__composite-wrapper"
 >
  <span #label class="igx-checkbox__composite">
- <svg class="igx-checkbox__composite-mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
- <path d="M4.1,12.7 9,17.6 20.3,6.3" />
- </svg>
+ @if (theme === 'indigo') {
+ <svg class="igx-checkbox__composite-mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+ <rect width="18" height="4" x="2" y="9" rx="1.85"/>
+ <path d="M19.033 5a1.966 1.966 0 0 0-1.418.586l-8.479 8.577-2.753-2.77a1.971 1.971 0 0 0-2.8 0 1.998 1.998 0 0 0 0 2.822l4.155 4.196a1.955 1.955 0 0 0 2.8 0l9.879-9.99a1.998 1.998 0 0 0 0-2.821 1.966 1.966 0 0 0-1.384-.6Z"/>
+ </svg>
+ } @else {
+ <svg class="igx-checkbox__composite-mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+ <path d="M4.1,12.7 9,17.6 20.3,6.3"/>
+ </svg>
+ }
  </span>
 
  <div class="igx-checkbox__ripple"></div>

projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts

@@ -20,6 +20,7 @@ import { IBaseEventArgs, mkenum } from '../core/utils';
 import { EditorProvider, EDITOR_PROVIDER } from '../core/edit-provider';
 import { noop, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { IgxTheme, ThemeService } from '../services/theme/theme.service';
 
 export const LabelPosition = /*@__PURE__*/mkenum({
  BEFORE: 'before',
@@ -428,11 +429,20 @@ export class IgxCheckboxComponent implements EditorProvider, AfterViewInit, Cont
  */
  private _required = false;
 
+ /**
+ * @hidden
+ * @internal
+ */
+ protected theme: IgxTheme = 'material';
+
  constructor(
  protected cdr: ChangeDetectorRef,
  protected renderer: Renderer2,
+ protected themeService: ThemeService,
  @Optional() @Self() public ngControl: NgControl,
  ) {
+ this.theme = this.themeService?.globalTheme;
+
  if (this.ngControl !== null) {
  this.ngControl.valueAccessor = this;
  }

projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss

@@ -303,6 +303,20 @@
  @if $variant == 'material' {
  inset-inline-start: -.5px;
  }
+
+ @if $variant == 'indigo' {
+ stroke: unset;
+ stroke-linecap: unset;
+ stroke-width: unset;
+ stroke-dasharray: unset;
+ stroke-dashoffset: unset;
+ fill: var-get($theme, 'tick-color');
+ transition: none !important;
+
+ rect {
+ fill: none;
+ }
+ }
  }
 
  %igx-checkbox--indeterminate {
@@ -363,6 +377,19 @@
  }
  }
  }
+
+ @if $variant == 'indigo' {
+ %cbx-composite-mark {
+ fill: none;
+ stroke-dashoffset: unset !important;
+ transform: none !important;
+
+ rect {
+ fill: var-get($theme, 'tick-color');
+ opacity: 1;
+ }
+ }
+ }
  }
 
  %igx-checkbox--indeterminate--invalid {

projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss

@@ -221,7 +221,7 @@
 
  @if $variant == 'indigo' {
  igx-icon {
- --component-size: 1;
+ --component-size: 2;
  }
  }
  }

projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss

@@ -80,9 +80,13 @@
  cursor: pointer;
 
  igx-icon {
- width: var(--igx-icon-size, #{rem(15px)});
- height: var(--igx-icon-size, #{rem(15px)});
- font-size: var(--igx-icon-size, #{rem(15px)});
+ @if $variant == 'indigo' {
+ --component-size: 2;
+ } @else {
+ width: var(--igx-icon-size, #{rem(15px)});
+ height: var(--igx-icon-size, #{rem(15px)});
+ font-size: var(--igx-icon-size, #{rem(15px)});
+ }
  }
  }
 
@@ -227,10 +231,12 @@
  }
 
  igx-icon {
+ --component-size: #{if($variant == 'indigo', 2, var(--grid-size))};
+
  display: initial;
- width: var(--igx-icon-size, #{rem(18px)});
- height: var(--igx-icon-size, #{rem(18px)});
- font-size: var(--igx-icon-size, #{rem(18px)});
+ width: var(--size) !important;
+ height: var(--size) !important;
+ font-size: var(--size) !important;
  }
  }
 
@@ -297,8 +303,10 @@
  color: var-get($theme, 'excel-filtering-actions-hover-foreground');
  }
 
- igx-icon {
- --component-size: 3;
+ @if $variant == 'indigo' {
+ igx-icon {
+ --component-size: 2;
+ }
  }
 
  [dir='rtl'] & {

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -691,7 +691,7 @@
  compact: rem(12px)
  );
 
- $hierarchical-action-icon: rem(24px);
+ $hierarchical-action-icon: if($variant == 'indigo', rem(16px), rem(24px));
 
  $hierarchical-indent: (
  comfortable: calc(2 * #{map.get($hierarchical-grid-indent, 'comfortable')} + #{$hierarchical-action-icon}),
@@ -723,7 +723,13 @@
  compact: rem(12px)
  );
 
- $indicator-icon-width: rem(24px);
+ $indicator-icon-width: map.get((
+ 'material': rem(24px),
+ 'fluent': rem(24px),
+ 'bootstrap': rem(24px),
+ 'indigo': rem(16px),
+ ), $variant);
+
  $drag-icon-size: rem(24px);
  $grouping-padding-right: rem(12px);
 
@@ -1126,10 +1132,7 @@
 
  %igx-grid__header-indentation {
  igx-icon {
- --component-size: var(--ig-size, var(--ig-size-large));
- font-size: rem(24px);
- width: rem(24px);
- height: rem(24px);
+ --component-size: #{if($variant == 'indigo', 2, 3)};
  }
  }
 
@@ -1391,18 +1394,14 @@
  );
  padding-block: 0;
  flex: 1 0 auto;
- // Fix for IE 11
- min-width: calc(#{$drag-icon-size} + #{$cell-padding-comfortable});
  background: inherit;
  z-index: 4;
  cursor: move;
  border-inline-end: rem(1px) solid transparent;
  background-clip: border-box;
 
  igx-icon {
- width: var(--igx-icon-size, #{$drag-icon-size});
- height: var(--igx-icon-size, #{$drag-icon-size});
- font-size: var(--igx-icon-size, #{$drag-icon-size});
+ --component-size: #{if($variant == 'indigo', 2, 3)};
  }
  }
 
@@ -1458,9 +1457,7 @@
 
  %igx-grid__td--bool {
  igx-icon {
- width: var(--igx-icon-size, #{rem(18px)});
- height: var(--igx-icon-size, #{rem(18px)});
- font-size: var(--igx-icon-size, #{rem(18px)});
+ --component-size: #{if($variant == 'indigo', 2, 1)};
  }
 
  %igx-icon--error {
@@ -1521,6 +1518,10 @@
  %igx-grid__tr--header {
  display: flex;
  align-items: center;
+
+ igx-icon {
+ --component-size: #{if($variant == 'indigo', 2, 3)};
+ }
  }
 
  %igx-grid__tr--add-animate {
@@ -1626,7 +1627,7 @@
  }
 
  igx-icon {
- --component-size: 3;
+ --component-size: #{if($variant == 'indigo', 2, 3)};;
  }
  }
 
@@ -1687,6 +1688,10 @@
  %grid-cell--fixed-width {
  flex-grow: 0;
  outline-style: none;
+
+ igx-icon {
+ --component-size: #{if($variant == 'indigo', 2, 3)};
+ }
  }
 
  %grid-cell--active {
@@ -1924,9 +1929,13 @@
  display: flex;
 
  igx-icon {
- width: var(--igx-icon-size, #{rem(15px)});
- height: var(--igx-icon-size, #{rem(15px)});
- font-size: var(--igx-icon-size, #{rem(15px)});
+ @if $variant == 'indigo' {
+ --component-size: 2;
+ } @else {
+ width: var(--igx-icon-size, #{rem(15px)});
+ height: var(--igx-icon-size, #{rem(15px)});
+ font-size: var(--igx-icon-size, #{rem(15px)});
+ }
  }
 
  &::after {
@@ -1951,6 +1960,10 @@
  cursor: pointer;
 
  igx-icon {
+ @if $variant == 'indigo' {
+ --component-size: 2;
+ }
+
  color: var-get($theme, 'expand-icon-color');
  }
 
@@ -2357,13 +2370,11 @@
  }
 
  %igx-group-label__icon {
- user-select: none;
+ &.igx-icon {
+ --component-size: #{if($variant == 'indigo', 2, 1)};
 
- igx-icon {
  color: var-get($theme, 'group-label-icon');
- width: var(--igx-icon-size, #{rem(16px)});
- height: var(--igx-icon-size, #{rem(16px)});
- font-size: var(--igx-icon-size, #{rem(16px)});
+ user-select: none;
  }
  }
 
@@ -2574,10 +2585,9 @@
  min-height: var(--header-size);
 
  igx-icon {
+ --component-size: #{if($variant == 'indigo', 2, 3)};
+
  color: var-get($theme, 'expand-icon-color');
- width: var(--igx-icon-size, #{$indicator-icon-width});
- height: var(--igx-icon-size, #{$indicator-icon-width});
- font-size: var(--igx-icon-size, #{$indicator-icon-width});
  }
 
  &:hover,
@@ -2606,30 +2616,26 @@
  z-index: 4;
 
  igx-icon {
- --component-size: var(--grid-size);
+ --component-size: #{if($variant == 'indigo', 2, 3)};
  }
  }
 
  %igx-grid__group-expand-btn {
  position: absolute;
  cursor: pointer;
  user-select: none;
- inset-block-start: calc(50% - 12px);
- inset-inline-start: sizable(
- map.get($grid-grouping-indicator-padding, 'compact'),
- map.get($grid-grouping-indicator-padding, 'cosy'),
- map.get($grid-grouping-indicator-padding, 'comfortable')
- );
+ inset-block-start: calc(50% - #{$indicator-icon-width} / 2);
+ inset-inline-start: var(--indicator-inline-inset);
 
  &:hover {
  color: var-get($theme, 'expand-icon-hover-color');
  }
 
  &%igx-grid__group-expand-btn--push {
  inset-block-start: sizable(
- math.div(map.get($grid-header-height, 'compact') - rem(24px), 2),
- math.div(map.get($grid-header-height, 'cosy') - rem(24px), 2),
- math.div(map.get($grid-header-height, 'comfortable') - rem(24px), 2)
+ math.div(map.get($grid-header-height, 'compact') - $indicator-icon-width, 2),
+ math.div(map.get($grid-header-height, 'cosy') - $indicator-icon-width, 2),
+ math.div(map.get($grid-header-height, 'comfortable') - $indicator-icon-width, 2)
  );
  }
  }
@@ -2646,6 +2652,11 @@
  $level--compact: map-get($row-indentation-level, 'compact');
 
  %igx-grid__row-indentation--level-#{$i} {
+ --indicator-inline-inset: #{sizable(
+ map.get($grid-grouping-indicator-padding, 'compact'),
+ map.get($grid-grouping-indicator-padding, 'cosy'),
+ map.get($grid-grouping-indicator-padding, 'comfortable')
+ )};
  padding-inline-start: pad-inline($level--compact, $level--cosy, $level--comfortable);
  }
 
@@ -2741,9 +2752,7 @@
  visibility: visible;
 
  igx-icon {
- width: var(--igx-icon-size, #{rem(18px)});
- height: var(--igx-icon-size, #{rem(18px)});
- font-size: var(--igx-icon-size, #{rem(18px)});
+ --component-size: #{if($variant == 'indigo', 2, 1)};
  }
 
  %igx-badge-display {
@@ -2961,11 +2970,11 @@
  }
 
  igx-icon {
- --component-size: 3;
+ --component-size: #{if($variant == 'indigo', 2, 3)};;
 
  color: var-get($theme, 'expand-icon-color');
  max-width: $hierarchical-action-icon;
- min-width: $hierarchical-action-icon;
+ min-width: min-content;
  }
 
  [dir='rtl'] & {

projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss

@@ -314,6 +314,12 @@
  @include ripple($button-ripple-theme);
  @include css-vars($button-ripple-theme);
 
+ @if $variant == 'indigo' {
+ igx-icon {
+ --component-size: 2;
+ }
+ }
+
  [dir='rtl'] & {
  transform: scaleX(-1);
  }