Indigo Themes: Updates to Toast, Stepper, Rating

package.json

@@ -78,7 +78,7 @@
     "globby": "^14.0.2",
     "husky": "^9.0.11",
     "ig-typedoc-theme": "^5.0.4",
-    "igniteui-theming": "^9.0.0",
+    "igniteui-theming": "^10.0.0-beta.4",
     "keep-a-changelog": "^2.5.3",
     "lint-staged": "^15.2.7",
     "lit-analyzer": "^2.0.3",

src/components/rating/themes/rating-symbol.base.scss

@@ -2,8 +2,6 @@
 @use 'styles/utilities' as *;
 
 :host {
-    --symbol-size: #{sizable(rem(18px), rem(24px), rem(36px))};
-
     display: flex;
     justify-content: center;
     align-items: center;

src/components/rating/themes/rating.base.scss

@@ -17,6 +17,8 @@
 }
 
 [part~='symbols'] {
+    --symbol-size: #{sizable(rem(18px), rem(24px), rem(36px))};
+
     position: relative;
     display: flex;
     justify-content: center;

src/components/rating/themes/shared/rating.indigo.scss

@@ -4,16 +4,26 @@
 $theme: $indigo;
 
 :host {
-    --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
+    --default-size: 2;
+    --component-size: var(--ig-size, #{var-get($theme, 'default-size')}) !important;
 
-    gap: rem(5px);
+    gap: rem(4px);
 }
 
 [part='base'] {
     gap: rem(8px);
 }
 
-[part~='label'],
 [part~='value-label'] {
-    @include type-style('body-1');
+    @include type-style('caption');
+}
+
+[part~='label'] {
+    padding-inline-start: rem(2px);
+}
+
+[part~='symbols'] {
+    --symbol-size: #{sizable(rem(18px), rem(24px), rem(30px))};
+
+    padding-inline-end: 0;
 }

src/components/stepper/themes/step/shared/step.common.scss

@@ -84,6 +84,18 @@ $theme: $material;
 }
 
 :host([complete]) {
+	[part~='header'] {
+		&:hover {
+			background: var-get($theme, 'complete-step-hover-background');
+		}
+
+		&:focus,
+		&:focus-within,
+		&:active {
+			background: var-get($theme, 'complete-step-focus-background');
+		}
+	}
+
     [part~='body'] {
         &::before {
             border-inline-start-style: var-get($theme, 'complete-step-separator-style');
@@ -113,13 +125,28 @@ $theme: $material;
         box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'invalid-indicator-outline');
     }
 
-    [part~='title'],
-    [part~='subtitle'] {
+    [part~='title'] {
         color: var-get($theme, 'invalid-title-color');
     }
+
+    [part~='subtitle'] {
+        color: var-get($theme, 'invalid-subtitle-color')
+    }
 }
 
 :host([active]) {
+	[part~='header'] {
+		&:hover {
+			background: var-get($theme, 'current-step-hover-background');
+		}
+
+		&:focus,
+		&:focus-within,
+		&:active {
+			background: var-get($theme, 'current-step-focus-background');
+		}
+	}
+
     [part~='indicator'] {
         background: var-get($theme, 'current-indicator-background');
         color: var-get($theme, 'current-indicator-color');

src/components/stepper/themes/step/shared/step.indigo.scss

@@ -4,6 +4,8 @@
 $theme: $indigo;
 
 [part~='indicator'] {
+    @include type-style('button');
+
     box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'indicator-outline');
 }
 
@@ -14,11 +16,21 @@ $theme: $indigo;
 }
 
 :host([active]) {
+    [part~='title'] {
+        @include type-style('subtitle-2');
+    }
+
     [part~='indicator'] {
         box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'current-indicator-outline');
     }
 }
 
+[part~='content'] {
+    @include type-style('body-2');
+
+    color: var-get($theme, 'content-foreground');
+}
+
 [part~='disabled'] {
     [part~='indicator'] {
         box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'disabled-indicator-outline');

src/components/stepper/themes/stepper/stepper.indigo.scss

@@ -3,6 +3,11 @@
 
 // STEPPER
 :host {
-    --indicator-box-shadow-size: #{rem(2px)};
-    --separator-size: #{rem(2px)};
+    --indicator-box-shadow-size: #{rem(1px)};
+    --separator-size: #{rem(1px)};
+}
+
+:host([orientation='horizontal']) {
+    --separator-min-width : #{rem(40px)};
+    --horizontal-body-padding: #{rem(16px)};
 }

src/components/toast/themes/shared/toast.bootstrap.scss

@@ -1,5 +1,5 @@
 @use 'styles/utilities' as *;
 
 :host {
-    padding: rem(11px);
+    padding: rem(12px);
 }

src/components/toast/themes/shared/toast.common.scss

@@ -7,7 +7,10 @@ $theme: $material;
     padding: rem(10px) rem(16px);
     color: var-get($theme, 'text-color');
     background: var-get($theme, 'background');
-    border: #{rem(1px)} solid var-get($theme, 'border-color');
     box-shadow: var-get($theme, 'elevation');
     border-radius: var-get($theme, 'border-radius');
+
+    &::after {
+        box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color');
+    }
 }

src/components/toast/themes/shared/toast.fluent.scss

@@ -4,4 +4,6 @@
     @include type-style('caption');
 
     padding: rem(8px) rem(12px);
+    margin-block: rem(42px);
+    margin-inline: auto;
 }

src/components/toast/themes/toast.base.scss

@@ -13,6 +13,15 @@
     transform: translateX(calc(-50% + .5px));
     margin: rem(42px) auto;
     min-width: rem(52px);
+
+    &::after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        border-radius: inherit;
+        inset-inline: 0;
+    }
 }
 
 :host([position='bottom']) {

stories/stepper.stories.ts

@@ -145,8 +145,9 @@ const BasicTemplate = ({
       .verticalAnimation=${verticalAnimation}
       .horizontalAnimation=${horizontalAnimation}
     >
-      <igc-step>
+      <igc-step complete>
         <span slot="title">Step1</span>
+        <span slot="subtitle">(completed)</span>
         <label for="first-name">First Name:</label>
         <input type="text" id="first-name" name="first-name" required />
         <br /><br />
@@ -155,6 +156,7 @@ const BasicTemplate = ({
 
       <igc-step>
         <span slot="title">Step 2</span>
+        <span slot="subtitle">(default)</span>
         <label for="last-name">Last Name:</label>
         <input type="text" id="last-name" name="last-name" required />
         <br /><br />
@@ -174,8 +176,9 @@ const BasicTemplate = ({
         <igc-button @click=${next}>Next</igc-button>
       </igc-step>
 
-      <igc-step>
+      <igc-step disabled>
         <span slot="title">Step 4</span>
+        <span slot="subtitle">(disabled)</span>
         <div tabindex="0">
           Tabbable content
           <br />