Indigo Themes: Updates to Toast, Tooltip, Stepper, Rating

package.json

@@ -71,7 +71,7 @@
     "@types/source-map": "0.5.2",
     "express": "^4.19.2",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^9.0.0",
+    "igniteui-theming": "^10.0.0",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.0",
@@ -118,7 +118,7 @@
     "ig-typedoc-theme": "^5.0.4",
     "igniteui-dockmanager": "^1.14.2",
     "igniteui-sassdoc-theme": "^1.2.3",
-    "igniteui-webcomponents": "^4.7.0",
+    "igniteui-webcomponents": "^4.11.0",
     "jasmine": "^5.1.0",
     "jasmine-core": "~5.1.2",
     "karma": "^6.4.2",

projects/igniteui-angular/package.json

@@ -74,7 +74,7 @@
         "igniteui-trial-watermark": "^3.0.2",
         "lodash-es": "^4.17.21",
         "uuid": "^9.0.0",
-        "igniteui-theming": "^9.0.0",
+        "igniteui-theming": "^10.0.0",
         "@igniteui/material-icons-extended": "^3.0.0"
     },
     "peerDependencies": {

projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss

@@ -11,6 +11,7 @@
 
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
 ///
+/// @param {Color} $content-foreground [null] - The foreground of the step content.
 /// @param {Color} $step-background [null] - The background of the step header.
 /// @param {Color} $step-hover-background [null] - The background of the step header on hover.
 /// @param {Color} $step-focus-background [null] - The background of the step header on focus.
@@ -86,6 +87,8 @@
 @function stepper-theme(
     $schema: $light-material-schema,
 
+    $content-foreground: null,
+
     $step-background: null,
     $step-hover-background: null,
     $step-focus-background: null,
@@ -241,6 +244,8 @@
         name: $name,
         selector: $selector,
 
+        content-foreground: $content-foreground,
+
         // Incomplete
         step-background: $step-background,
         step-hover-background: $step-hover-background,
@@ -338,7 +343,7 @@
         material: rem(24px),
         fluent: rem(8px),
         bootstrap: rem(24px),
-        indigo-design: rem(16px)
+        indigo-design: rem(8px)
     ), $variant);
 
     $step-header-padding-simple: map.get((
@@ -348,7 +353,6 @@
         indigo-design: rem(8px)
     ), $variant);
 
-    $step-body-padding: rem(16px);
     $title-gap: rem(8px);
     $indicator-gap: rem(4px);
     $indicator-padding: rem(2px);
@@ -366,7 +370,7 @@
         material: rem(1px),
         fluent: rem(1px),
         bootstrap: rem(8px),
-        indigo-design: rem(2px)
+        indigo-design: rem(1px)
     ), $variant);
 
     $separator-title-top: calc(100% - ((#{$indicator-size} / 2) + #{$step-header-padding} + (#{$separator-size} / 2)));
@@ -392,6 +396,7 @@
     }
 
     %igx-stepper__body {
+        color: var-get($theme, 'content-foreground');
         position: relative;
         flex-direction: column;
         flex: 1 1 auto;
@@ -525,19 +530,25 @@
         background: var-get($theme, 'indicator-background');
         box-shadow: 0 0 0 $outline-width var-get($theme, 'indicator-outline');
 
-        @if $variant != 'bootstrap' {
+        @if $variant == 'bootstrap' {
+            > igx-icon {
+                width: var(--igx-icon-size, #{rem(18px)});
+                height: var(--igx-icon-size, #{rem(18px)});
+                font-size: var(--igx-icon-size, #{rem(18px)});
+            }
+        } @else if $variant == 'indigo-design' {
+            > igx-icon {
+                width: var(--igx-icon-size, #{rem(14px)});
+                height: var(--igx-icon-size, #{rem(14px)});
+                font-size: var(--igx-icon-size, #{rem(14px)});
+            }
+        } @else {
             > igx-icon {
                 width: var(--igx-icon-size, #{calc(#{$indicator-size} - #{rem(6px)})});
                 height: var(--igx-icon-size, #{calc(#{$indicator-size} - #{rem(6px)})});
                 font-size: var(--igx-icon-size, #{calc(#{$indicator-size} - #{rem(6px)})});
                 color: inherit;
             }
-        } @else if $variant == 'bootstrap' {
-            > igx-icon {
-                width: var(--igx-icon-size, #{rem(18px)});
-                height: var(--igx-icon-size, #{rem(18px)});
-                font-size: var(--igx-icon-size, #{rem(18px)});
-            }
         }
 
         div > igx-icon,
@@ -559,6 +570,12 @@
         }
 
         %igx-stepper__step-title {
+            @if $variant == 'indigo-design' {
+                /* stylelint-disable scss/at-extend-no-missing-placeholder */
+                @extend .ig-typography__subtitle-2;
+                /* stylelint-enable scss/at-extend-no-missing-placeholder */
+            }
+
             color: var-get($theme, 'current-title-color');
         }
 
@@ -643,7 +660,7 @@
 
     %igx-stepper__step-content-wrapper,
     %igx-stepper__body-content {
-        padding: $step-body-padding;
+        padding: rem(16px);
     }
 
     %igx-stepper__body-content--active {
@@ -654,7 +671,7 @@
     %igx-stepper__step-content-wrapper {
         margin-inline-start: $v-line-indent;
         position: relative;
-        min-height: rem(32px);
+        min-height: if($variant == 'indigo-design', rem(24px), rem(32px));
 
         &::before {
             content: '';
@@ -667,6 +684,22 @@
         }
     }
 
+    @if $variant == 'indigo-design' {
+        [aria-selected='true'] {
+            %igx-stepper__step-content-wrapper {
+                padding-block: rem(16px);
+                padding-inline-start: $v-line-indent;
+                padding-inline-end: rem(16px);
+            }
+        }
+
+        [aria-selected='false'] {
+            %igx-stepper__step-content-wrapper {
+                padding-block: 0;
+            }
+        }
+    }
+
     %igx-stepper__step-title-wrapper {
         white-space: nowrap;
         text-overflow: ellipsis;
@@ -802,7 +835,7 @@
             &::before {
                 content: '';
                 width: auto;
-                min-width: rem(10px);
+                min-width: if($variant == 'indigo-design', rem(40px), rem(10px));
                 height: $separator-size;
                 flex: 1;
                 position: relative;
@@ -813,7 +846,7 @@
 
             &:first-of-type {
                 flex-grow: 0;
-                min-width: 0;
+                min-width: fit-content;
 
                 &::before {
                     display: none;
@@ -968,11 +1001,22 @@
 @mixin stepper-typography(
     $categories: (
         title: 'body-2',
-        subtitle: 'caption'
+        subtitle: 'caption',
+        indicator: 'caption',
+        body-content: 'body-2'
     )
 ) {
     $title: map.get($categories, 'title');
     $subtitle: map.get($categories, 'subtitle');
+    $indicator: map.get($categories, 'indicator');
+    $body-content: map.get($categories, 'body-content');
+
+    %igx-stepper__step-indicator {
+        @include type-style($indicator) {
+            margin-top: 0;
+            margin-bottom: 0;
+        }
+    }
 
     %igx-stepper__step-title {
         @include type-style($title) {
@@ -993,4 +1037,12 @@
             font-weight: 600;
         }
     }
+
+    %igx-stepper__step-content-wrapper,
+    %igx-stepper__body-content {
+        @include type-style($body-content) {
+            margin-top: 0;
+            margin-bottom: 0;
+        }
+    }
 }

projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss

@@ -82,25 +82,34 @@
     $margin: rem(42px) auto;
 
     $padding: map.get((
-        'material': rem(16px) rem(24px),
-        'fluent': rem(16px) rem(24px),
+        'material': rem(10px) rem(16px),
+        'fluent': rem(8px) rem(12px),
         'bootstrap': rem(12px),
-        'indigo-design': rem(14px) rem(24px)
+        'indigo-design': rem(10px) rem(16px)
     ), $variant);
 
     %igx-toast-display {
         display: inline-flex;
         justify-content: center;
         align-items: center;
-        margin: $margin;
+        // !important is needed to override the typography styles
+        margin: $margin !important;
         padding: $padding;
         min-width: $width;
         color: var-get($theme, 'text-color');
         background: var-get($theme, 'background');
-        border: rem(1px) solid var-get($theme, 'border-color');
         border-radius: var-get($theme, 'border-radius');
         box-shadow: map.get($theme, 'shadow');
         backdrop-filter: blur(10px);
+
+        &::after {
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            border-radius: inherit;
+            box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color');
+        }
     }
 }
 

projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-component.scss

@@ -10,18 +10,8 @@
 
         @extend %tooltip-display !optional;
 
-        @include m(desktop) {
-            @extend %tooltip-display !optional;
-            @extend %tooltip--desktop !optional;
-        }
-
-        @include m(mobile) {
-            @extend %tooltip-display !optional;
-            @extend %tooltip--mobile !optional;
-        }
-
-        @include m(disabled) {
-            @extend %tooltip--disabled !optional;
+        @include m(hidden) {
+            @extend %tooltip--hidden !optional;
         }
     }
 }