refactor(carousel): update themes according to new design

package.json

@@ -80,7 +80,7 @@
  "@types/source-map": "0.5.2",
  "express": "^4.21.0",
  "fflate": "^0.8.1",
- "igniteui-theming": "^12.0.0",
+ "igniteui-theming": "^13.0.0-beta.1",
  "igniteui-trial-watermark": "^3.0.2",
  "lodash-es": "^4.17.21",
  "rxjs": "^7.8.0",

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

@@ -31,7 +31,7 @@
  </div>
 </div>
 
-<div *ngIf="showIndicatorsLabel" [ngClass]="indicatorsOrientationClass">
+<div *ngIf="showIndicatorsLabel" [ngClass]="indicatorsOrientationClass" class="igx-carousel-label-indicator">
  <span [id]="labelId" class="igx-carousel__label">{{getCarouselLabel}}</span>
 </div>
 

projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-component.scss

@@ -21,6 +21,10 @@
  @extend %igx-carousel-indicators--bottom !optional;
  }
  }
+
+ @include b(igx-carousel-label-indicator) {
+ @extend %igx-carousel-label-indicator !optional;
+ }
 }
 
 @mixin _igx-carousel-navigation-partial {

projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss

@@ -137,10 +137,6 @@
  @include scale-in-center();
  @include scale-out-center();
 
- $carousel-arrow-margin: 0 rem(16px);
- $carousel-indicators-margin: rem(16px) 0;
- $carousel-indicators-padding: 0;
- $carousel-indicator-margin: 0 rem(5px);
  $indicator-border-style: rem(2px) solid;
 
  $variant: map.get($theme, '_meta', 'variant');
@@ -170,24 +166,20 @@
  color: var-get($theme, 'button-arrow-color');
  background: var-get($theme, 'button-background');
  box-shadow: var-get($theme, 'button-shadow');
+ border-radius: var-get($theme, 'border-radius');
+ border: rem(1px) solid var-get($theme, 'button-border-color');
 
  igx-icon {
- --component-size: 3;
- }
-
- @if $not-bootstrap-theme {
- border-radius: border-radius(50%);
- } @else {
- border-radius: var-get($theme, 'border-radius');
+ --component-size: 1;
  }
 
  @if $variant == 'indigo' {
  width: rem(28px);
  height: rem(28px);
- border: rem(2px) solid var-get($theme, 'button-border-color');
+ border-width: rem(2px);
 
  igx-icon {
- --component-size: 1;
+ --component-size: 2;
  }
  }
  }
@@ -211,7 +203,7 @@
  }
 
  %igx-carousel-arrow {
- margin: $carousel-arrow-margin;
+ margin: 0 rem(16px);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
@@ -256,20 +248,24 @@
  display: flex;
  justify-content: center;
  align-items: center;
- margin: $carousel-indicators-margin;
- padding: $carousel-indicators-padding;
+ margin: rem(16px) 0;
+ padding: rem(4px) rem(6px);
+ gap: rem(8px);
  list-style: none;
  z-index: 10;
  inset-inline-start: 50%;
  transform: translateX(-50%);
+ background: var-get($theme, 'indicator-background');
+ box-shadow: var-get($theme, 'button-shadow');
+ border-radius: var-get($theme, 'border-radius');
 
  [dir='rtl'] & {
  transform: translateX(50%);
  }
 
  @if $variant == 'indigo' {
- gap: rem(10px);
- margin-block-start: 0;
+ gap: rem(4px);
+ padding: rem(6px);
  }
  }
 
@@ -283,20 +279,24 @@
 
  %igx-carousel-indicators-label {
  align-items: center;
- // TODO: this should be wrapped in carousel typogrpahy
- font-size: rem(16px);
+ }
+
+ %igx-carousel-label-indicator {
+ @include type-style('caption');
+
+ margin: rem(16px) 0;
+ min-width: rem(46px);
+ box-shadow: none;
+ border-radius: rem(4px);
+ color: var-get($theme, 'indicator-color');
+ background: var-get($theme, 'label-indicator-background');
  }
 
  %igx-carousel-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
- margin: $carousel-indicator-margin;
  cursor: pointer;
-
- @if $variant == 'indigo' {
- margin: 0;
- }
  }
 
  %igx-nav-dot {
@@ -308,11 +308,9 @@
  @if $variant != 'indigo' {
  border: $indicator-border-style;
  border-color: var-get($theme, 'indicator-border-color');
- box-shadow: elevation(1);
- opacity: .7;
  } @else {
- width: rem(20px);
- height: rem(20px);
+ width: rem(16px);
+ height: rem(16px);
  }
 
  border-radius: border-radius(50%);
@@ -337,7 +335,7 @@
  }
 
  &:hover {
- opacity: 1;
+ border-color: var-get($theme, 'indicator-active-border-color');
 
  @if $variant == 'indigo' {
  &::after {
@@ -347,8 +345,8 @@
  &::before {
  position: absolute;
  content: '';
- width: rem(20px);
- height: rem(20px);
+ width: inherit;
+ height: inherit;
  border: rem(2px) solid var-get($theme, 'indicator-hover-dot-color');
  inset-inline-start: 0;
  top: 0;
@@ -366,17 +364,15 @@
  &::before {
  position: absolute;
  content: '';
- width: rem(20px);
- height: rem(20px);
+ width: inherit;
+ height: inherit;
  border: rem(2px) solid var-get($theme, 'indicator-active-dot-color');
  inset-inline-start: 0;
  top: 0;
  border-radius: border-radius(50%);
  }
  }
 
- opacity: 1;
-
  &::after {
  background: var-get($theme, 'indicator-active-dot-color');
  @if $variant != 'indigo' {
@@ -403,8 +399,7 @@
  height: inherit;
  overflow: hidden;
  outline-style: none;
- border-radius: var-get($theme, 'border-radius');
- min-height: rem(300px);
+ min-height: rem(240px);
  min-width: rem(300px);
  }
 

projects/igniteui-angular/src/lib/icon/icon.references.ts

@@ -90,7 +90,7 @@ const loadIconRefs = () => [
  }),
  addIcon('carousel_prev', {
  default: {
- name: 'arrow_back',
+ name: 'keyboard_arrow_left',
  family: 'material',
  },
  indigo: {
@@ -100,7 +100,7 @@ const loadIconRefs = () => [
  }),
  addIcon('carousel_next', {
  default: {
- name: 'arrow_forward',
+ name: 'keyboard_arrow_right',
  family: 'material',
  },
  indigo: {