@itwin/itwinui-css 0.63.1 → 1.0.0-dev.2

package/css/side-navigation.css

@@ -7,14 +7,12 @@
   flex:0 0 auto;
   flex-direction:column;
   height:100%;
-  background-color:#edeff2;
-  border-right:1px solid #c7ccd1;
   background-color:var(--iui-color-background-3);
   border-right:1px solid var(--iui-color-background-border);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-side-navigation{
-    transition:max-width 0.2s ease-out;
+    transition:max-width var(--iui-duration-1) ease-out;
   }
 }
 .iui-side-navigation > .iui-sidenav-content{
@@ -43,118 +41,97 @@
 }
 .iui-side-navigation > .iui-sidenav-content + .iui-sidenav-button.iui-expand{
   border:none;
-  border-top:1px solid #c7ccd1;
   border-top:1px solid var(--iui-color-background-border);
 }
 .iui-side-navigation.iui-collapsed{
-  min-width:72px;
-  max-width:72px;
+  box-sizing:content-box;
+  min-width:calc(1.5 * var(--iui-size-m) + 1.5 * var(--iui-size-m) * 2);
+  max-width:calc(1.5 * var(--iui-size-m) + 1.5 * var(--iui-size-m) * 2);
 }
 @supports (min-width: max(0px)){
   .iui-side-navigation.iui-collapsed{
-    min-width:max(24px * 3, 24px * 3 + env(safe-area-inset-left));
-    max-width:max(24px * 3, 24px * 3 + env(safe-area-inset-left));
+    min-width:max(calc(1.5 * var(--iui-size-m)) + calc(1.5 * var(--iui-size-m)) * 2, calc(1.5 * var(--iui-size-m)) + calc(1.5 * var(--iui-size-m)) * 2 + env(safe-area-inset-left));
+    max-width:max(calc(1.5 * var(--iui-size-m)) + calc(1.5 * var(--iui-size-m)) * 2, calc(1.5 * var(--iui-size-m)) + calc(1.5 * var(--iui-size-m)) * 2 + env(safe-area-inset-left));
   }
 }
 .iui-side-navigation.iui-expanded,
 .iui-side-navigation > .iui-sidenav-content{
-  max-width:288px;
+  max-width:calc(var(--iui-size-3xl) * 3);
 }
 .iui-side-navigation.iui-expanded > .iui-sidenav-button.iui-expand > .iui-button-icon,
 .iui-side-navigation > .iui-sidenav-content > .iui-sidenav-button.iui-expand > .iui-button-icon{
   transform:scaleX(-1);
 }
 .iui-side-navigation .iui-sidenav-button{
-  gap:24px;
+  gap:calc(1.5 * var(--iui-size-m));
   border-radius:0;
   border-left:none;
   border-right:none;
   overflow:hidden;
   justify-content:flex-start;
-  --_iui-button-active-stripe-inset:0 0 0 calc(100% - 2px);
+  --_iui-button-active-stripe-inset:0 0 0 calc(100% - var(--iui-size-3xs));
 }
 .iui-side-navigation .iui-sidenav-button:not(.iui-expand){
-  height:55px;
+  height:calc(var(--iui-size-s) * 5);
 }
 @supports (padding: max(0px)){
   .iui-side-navigation .iui-sidenav-button:not(.iui-expand){
-    padding-left:max(24px, 24px + env(safe-area-inset-left));
+    padding-left:max(calc(1.5 * var(--iui-size-m)), calc(1.5 * var(--iui-size-m)) + env(safe-area-inset-left));
   }
 }
-.iui-side-navigation .iui-sidenav-button > .iui-button-label{
+.iui-side-navigation .iui-sidenav-button > span{
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
 }
 .iui-side-navigation .iui-sidenav-button, .iui-side-navigation .iui-sidenav-button:hover, .iui-side-navigation .iui-sidenav-button[disabled]{
-  border-color:#c7ccd1;
   border-color:var(--iui-color-background-border);
 }
-.iui-side-navigation .iui-sidenav-button > .iui-button-icon:not(.iui-user-icon){
-  width:24px;
-  height:24px;
+.iui-side-navigation .iui-sidenav-button > .iui-button-icon:not(.iui-avatar){
+  display:flex;
   flex-shrink:0;
+  width:calc(1.5 * var(--iui-size-m));
+  height:calc(1.5 * var(--iui-size-m));
 }
 .iui-side-navigation .iui-sidenav-button.iui-submenu-open .iui-button-icon{
-  fill:#008ae0;
   fill:var(--iui-color-foreground-primary);
 }
 .iui-side-navigation .iui-sidenav-button[disabled], .iui-side-navigation .iui-sidenav-button:disabled{
-  background-color:#f9f9fb;
   background-color:var(--iui-color-background-2);
 }
 .iui-side-navigation .iui-sidenav-button.iui-expand{
-  height:22px;
+  --_iui-button-padding-block:0;
+  --_iui-button-min-height:var(--iui-size-l);
   justify-content:center;
   border:none;
-  border-bottom:1px solid #c7ccd1;
   border-bottom:1px solid var(--iui-color-background-border);
 }
 .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
-  fill:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
-  display:inline-flex;
-  width:12px;
-  height:12px;
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-s);
+  height:var(--iui-size-s);
+  fill:var(--iui-color-foreground-4);
 }
 @media (forced-colors: active){
   .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
     fill:CanvasText;
   }
 }
-.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-informational{
-  fill:#008ae0;
-  fill:var(--iui-icons-color-primary);
-}
-.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-positive{
-  fill:#53a21a;
-  fill:var(--iui-icons-color-positive);
-}
-.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-warning{
-  fill:#f18d13;
-  fill:var(--iui-icons-color-warning);
-}
-.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-negative{
-  fill:#d10a0a;
-  fill:var(--iui-icons-color-negative);
-}
 @media (prefers-reduced-motion: no-preference){
   .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
-    transition:transform 0.4s ease-out;
+    transition:transform var(--iui-duration-2) ease-out;
   }
 }
 
 .iui-side-navigation-submenu{
-  min-width:192px;
+  min-width:calc(var(--iui-size-3xl) * 2);
   max-width:50vw;
   height:100%;
-  box-sizing:border-box;
   overflow-x:hidden;
   overflow-y:auto;
   overflow-y:overlay;
   resize:horizontal;
-  background-color:white;
-  border-right:1px solid #c7ccd1;
   background-color:var(--iui-color-background-1);
   border-right:1px solid var(--iui-color-background-border);
 }
@@ -166,7 +143,7 @@
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-side-navigation-submenu.iui-enter-active{
-    transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
+    transition:opacity var(--iui-duration-1) ease-out, width var(--iui-duration-1) ease-out, height var(--iui-duration-1) ease-out;
   }
 }
 .iui-side-navigation-submenu.iui-exit{
@@ -177,19 +154,18 @@
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-side-navigation-submenu.iui-exit-active{
-    transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
+    transition:opacity var(--iui-duration-1) ease-out, width var(--iui-duration-1) ease-out, height var(--iui-duration-1) ease-out;
   }
 }
 .iui-side-navigation-submenu.iui-enter-active, .iui-side-navigation-submenu.iui-exit-active{
   display:flex;
 }
 .iui-side-navigation-submenu-content{
-  padding:0 12px 11px;
+  padding:0 var(--iui-size-s) var(--iui-size-s);
   flex-shrink:0;
-  box-sizing:border-box;
 }
 .iui-side-navigation-submenu-header{
-  height:55px;
+  height:calc(var(--iui-size-s) * 5);
   display:flex;
   align-items:center;
   justify-content:space-between;
@@ -199,9 +175,9 @@
   padding:0;
   border:none;
   vertical-align:baseline;
-  font-size:24px;
-  font-weight:300;
-  line-height:33px;
+  font-size:var(--iui-font-size-4);
+  font-weight:var(--iui-font-weight-light);
+  line-height:calc(1.5 * var(--iui-size-l));
   display:flex;
   align-items:center;
   overflow:hidden;
@@ -216,7 +192,7 @@
 }
 .iui-side-navigation-submenu-header-actions{
   flex-shrink:0;
-  margin-left:8px;
+  margin-left:var(--iui-size-xs);
 }
 
 .iui-side-navigation-wrapper{

package/css/skip-to-content.css

@@ -3,29 +3,27 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .iui-skip-to-content-link{
-  background-color:rgba(0, 0, 0, 0.8);
-  background-color:rgba(0, 0, 0, var(--iui-opacity-2));
-  color:white;
+  background-color:Hsl(0 0% 0%/var(--iui-opacity-2));
   color:var(--iui-color-foreground-accessory);
-  border-radius:9999px;
+  border-radius:var(--iui-border-radius-round);
   text-decoration:none;
   -webkit-user-select:none;
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
-  padding:8.25px 16px;
+  padding:calc(var(--iui-size-s) * 0.75) var(--iui-size-m);
   position:fixed;
   text-align:center;
   left:50%;
-  top:22px;
+  top:calc(var(--iui-size-s) * 2);
   opacity:0;
   z-index:99;
   transform:translateX(-50%) translateY(-170%);
-  transition:background-color 0.2s ease-in-out;
+  transition:background-color var(--iui-duration-1) ease-in-out;
 }
 @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
   .iui-skip-to-content-link{
-    background-color:rgba(0, 0, 0, var(--iui-opacity-3));
+    background-color:Hsl(0 0% 0%/var(--iui-opacity-3));
     -webkit-backdrop-filter:blur(5px);
             backdrop-filter:blur(5px);
   }
@@ -42,16 +40,15 @@
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-skip-to-content-link{
-    transition:opacity 0.8s ease-in-out, background-color 0.8s ease-in-out, transform 0.8s ease-in-out, box-shadow 0.8s ease-in-out;
+    transition:opacity var(--iui-duration-3) ease-in-out, background-color var(--iui-duration-3) ease-in-out, transform var(--iui-duration-3) ease-in-out, box-shadow var(--iui-duration-3) ease-in-out;
   }
 }
 .iui-skip-to-content-link:hover{
-  background-color:black;
-  background-color:rgba(0, 0, 0, var(--iui-opacity-1));
+  background-color:Hsl(0 0% 0%/var(--iui-opacity-1));
 }
 @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
   .iui-skip-to-content-link:hover{
-    background-color:rgba(0, 0, 0, var(--iui-opacity-2));
+    background-color:Hsl(0 0% 0%/var(--iui-opacity-2));
     -webkit-backdrop-filter:blur(5px);
             backdrop-filter:blur(5px);
   }
@@ -59,10 +56,10 @@
 .iui-skip-to-content-link:focus{
   opacity:1;
   transform:translateX(-50%) translateY(0);
-  box-shadow:0 6px 30px rgba(0, 0, 0, 0.25);
+  box-shadow:var(--iui-shadow-4);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-skip-to-content-link:focus{
-    transition:opacity 0s ease-in-out, background-color 0.2s ease-in-out, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+    transition:opacity var(--iui-duration-0) ease-in-out, background-color var(--iui-duration-1) ease-in-out, transform var(--iui-duration-1) ease-in-out, box-shadow var(--iui-duration-1) ease-in-out;
   }
 }

package/css/slider.css

@@ -3,23 +3,23 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .iui-slider-horizontal{
-  min-height:22px;
+  min-height:calc(var(--iui-size-s) * 2);
 }
 .iui-slider-horizontal .iui-slider-rail{
   width:100%;
-  height:4px;
-  top:12px;
+  height:var(--iui-size-2xs);
+  top:var(--iui-size-s);
 }
 .iui-slider-horizontal .iui-slider-thumb{
-  top:5px;
+  top:calc(var(--iui-size-2xs) + 1px);
   transform:translateX(-50%);
 }
 .iui-slider-horizontal .iui-slider-track{
-  height:4px;
+  height:var(--iui-size-2xs);
   left:0;
 }
 .iui-slider-horizontal .iui-slider-ticks{
-  padding-top:16px;
+  padding-top:var(--iui-size-m);
 }
 .iui-slider-horizontal .iui-slider-ticks .iui-slider-tick{
   flex-direction:column;
@@ -28,41 +28,41 @@
 .iui-slider-horizontal .iui-slider-ticks .iui-slider-tick::before{
   content:"";
   width:1px;
-  height:11px;
+  height:var(--iui-size-s);
 }
 .iui-slider-horizontal .iui-slider-min,
 .iui-slider-horizontal .iui-slider-max{
-  margin-top:2px;
+  margin-top:var(--iui-size-3xs);
 }
 .iui-slider-horizontal .iui-slider-min{
-  margin-right:12px;
+  margin-right:var(--iui-size-s);
   text-align:right;
 }
 .iui-slider-horizontal .iui-slider-max{
-  margin-left:12px;
+  margin-left:var(--iui-size-s);
 }
 
 .iui-slider-vertical{
   flex-direction:column-reverse;
-  min-width:22px;
+  min-width:calc(var(--iui-size-s) * 2);
   height:100%;
 }
 .iui-slider-vertical .iui-slider-rail{
-  width:4px;
+  width:var(--iui-size-2xs);
   height:100%;
-  left:12px;
+  left:var(--iui-size-s);
 }
 .iui-slider-vertical .iui-slider-thumb{
   transform:translateY(50%);
-  left:5px;
+  left:calc(var(--iui-size-2xs) + 1px);
 }
 .iui-slider-vertical .iui-slider-track{
-  width:4px;
+  width:var(--iui-size-2xs);
   bottom:0;
-  left:12px;
+  left:var(--iui-size-s);
 }
 .iui-slider-vertical .iui-slider-ticks{
-  padding-left:16px;
+  padding-left:var(--iui-size-m);
   flex-direction:column-reverse;
   align-items:flex-start;
   height:100%;
@@ -73,20 +73,20 @@
 }
 .iui-slider-vertical .iui-slider-ticks .iui-slider-tick::before{
   content:"";
-  width:11px;
+  width:var(--iui-size-s);
   height:1px;
-  margin-right:11px;
+  margin-right:var(--iui-size-s);
 }
 .iui-slider-vertical .iui-slider-min,
 .iui-slider-vertical .iui-slider-max{
-  margin-left:2px;
+  margin-left:var(--iui-size-3xs);
   text-align:center;
 }
 .iui-slider-vertical .iui-slider-min{
-  margin-top:12px;
+  margin-top:var(--iui-size-s);
 }
 .iui-slider-vertical .iui-slider-max{
-  margin-bottom:12px;
+  margin-bottom:var(--iui-size-s);
 }
 
 .iui-slider-component-container{
@@ -101,8 +101,6 @@
 }
 .iui-slider-component-container.iui-disabled .iui-slider-thumb{
   cursor:not-allowed;
-  background-color:#dde1e4;
-  border-color:#dde1e4;
   background-color:var(--iui-color-background-4);
   border-color:var(--iui-color-background-4);
 }
@@ -113,13 +111,7 @@
   }
 }
 .iui-slider-component-container.iui-disabled .iui-slider-track{
-  background-color:rgba(0, 0, 0, 0.4);
-  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
-}
-@media (forced-colors: active){
-  .iui-slider-component-container.iui-disabled .iui-slider-track{
-    background-color:GrayText;
-  }
+  background-color:var(--iui-color-foreground-4);
 }
 .iui-slider-component-container.iui-disabled .iui-slider-min,
 .iui-slider-component-container.iui-disabled .iui-slider-max,
@@ -128,8 +120,7 @@
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
-  color:rgba(0, 0, 0, 0.4);
-  color:var(--iui-text-color-muted);
+  color:var(--iui-color-foreground-4);
 }
 @media (forced-colors: active){
   .iui-slider-component-container.iui-disabled .iui-slider-min,
@@ -144,6 +135,7 @@
   flex-grow:1;
   cursor:pointer;
   touch-action:pan-y;
+  isolation:isolate;
 }
 .iui-slider-container.iui-grabbing{
   cursor:-webkit-grabbing;
@@ -168,7 +160,6 @@
   align-items:center;
 }
 .iui-slider-ticks .iui-slider-tick::before{
-  background-color:#dde1e4;
   background-color:var(--iui-color-background-4);
 }
 @media (forced-colors: active){
@@ -179,7 +170,6 @@
 
 .iui-slider-rail{
   position:absolute;
-  background-color:#c7ccd1;
   background-color:var(--iui-color-background-border);
 }
 @media (forced-colors: active){
@@ -189,15 +179,14 @@
 }
 
 .iui-slider-thumb{
+  box-sizing:content-box;
   position:absolute;
-  height:16px;
-  width:16px;
+  height:var(--iui-size-m);
+  width:var(--iui-size-m);
   border-radius:100%;
   z-index:1;
   cursor:-webkit-grab;
   cursor:grab;
-  background:white;
-  border:1px solid #c7ccd1;
   background:var(--iui-color-background-1);
   border:1px solid var(--iui-color-background-border);
 }
@@ -225,8 +214,7 @@
 .iui-slider-track{
   pointer-events:none;
   position:absolute;
-  top:12px;
-  background-color:#008ae0;
+  top:var(--iui-size-s);
   background-color:var(--iui-color-foreground-primary);
 }
 @media (forced-colors: active){
@@ -243,36 +231,16 @@
 }
 .iui-slider-min svg,
 .iui-slider-max svg{
-  fill:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
-  display:inline-flex;
-  width:16px;
-  height:16px;
-  margin-top:4px;
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-m);
+  height:var(--iui-size-m);
+  fill:var(--iui-color-foreground-4);
+  margin-top:var(--iui-size-2xs);
 }
 @media (forced-colors: active){
   .iui-slider-min svg,
 .iui-slider-max svg{
     fill:CanvasText;
   }
-}
-.iui-slider-min svg.iui-informational,
-.iui-slider-max svg.iui-informational{
-  fill:#008ae0;
-  fill:var(--iui-icons-color-primary);
-}
-.iui-slider-min svg.iui-positive,
-.iui-slider-max svg.iui-positive{
-  fill:#53a21a;
-  fill:var(--iui-icons-color-positive);
-}
-.iui-slider-min svg.iui-warning,
-.iui-slider-max svg.iui-warning{
-  fill:#f18d13;
-  fill:var(--iui-icons-color-warning);
-}
-.iui-slider-min svg.iui-negative,
-.iui-slider-max svg.iui-negative{
-  fill:#d10a0a;
-  fill:var(--iui-icons-color-negative);
 }

package/css/stepper.css

@@ -0,0 +1,141 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.iui-stepper{
+  display:flex;
+  flex-direction:column;
+  row-gap:calc(var(--iui-size-s) * 0.5);
+}
+.iui-stepper > ol{
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  display:flex;
+  justify-content:space-around;
+  align-items:flex-start;
+  width:100%;
+}
+
+.iui-stepper-step{
+  --_iui-stepper-step-background-color:var(--iui-color-background-1);
+  --_iui-stepper-step-border-color:var(--iui-color-foreground-positive);
+  --_iui-stepper-step-number-color:var(--iui-color-foreground-positive);
+  --_iui-stepper-step-text-color:var(--iui-color-foreground-positive);
+  --_iui-stepper-step-track-before-color:var(--iui-color-foreground-positive);
+  --_iui-stepper-step-track-after-color:var(--iui-color-foreground-positive);
+  flex:1;
+  align-items:center;
+  display:flex;
+  flex-direction:column;
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  font-size:var(--iui-font-size-0);
+  font-weight:var(--iui-font-weight-normal);
+  line-height:var(--iui-size-l);
+  color:var(--_iui-stepper-step-text-color);
+}
+.iui-stepper-step:first-of-type{
+  --_iui-stepper-step-track-before-color:transparent;
+}
+.iui-stepper-step:last-of-type{
+  --_iui-stepper-step-track-after-color:transparent;
+}
+.iui-stepper-step.iui-current{
+  --_iui-stepper-step-background-color:var(--iui-color-background-positive);
+  --_iui-stepper-step-border-color:var(--iui-color-background-positive);
+  --_iui-stepper-step-number-color:var(--iui-color-foreground-accessory);
+  --_iui-stepper-step-track-after-color:var(--iui-color-background-border);
+  font-weight:var(--iui-font-weight-semibold);
+}
+.iui-stepper-step.iui-current ~ .iui-stepper-step{
+  --_iui-stepper-step-background-color:var(--iui-color-background-1);
+  --_iui-stepper-step-border-color:var(--iui-color-background-border);
+  --_iui-stepper-step-number-color:var(--iui-color-foreground-4);
+  --_iui-stepper-step-text-color:var(--iui-color-foreground-4);
+  --_iui-stepper-step-track-before-color:var(--iui-color-background-border);
+}
+.iui-stepper-step.iui-current ~ .iui-stepper-step:not(:last-of-type){
+  --_iui-stepper-step-track-after-color:var(--iui-color-background-border);
+}
+.iui-stepper-step.iui-clickable:focus{
+  outline:0;
+}
+
+.iui-stepper-circle{
+  align-items:center;
+  border-radius:var(--iui-border-radius-round);
+  display:flex;
+  width:var(--iui-size-l);
+  height:var(--iui-size-l);
+  justify-content:center;
+  overflow-wrap:break-word;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+      -ms-user-select:none;
+          user-select:none;
+  border:1px solid var(--_iui-stepper-step-border-color);
+  background-color:var(--_iui-stepper-step-background-color);
+  color:var(--_iui-stepper-step-number-color);
+}
+.iui-clickable .iui-stepper-circle{
+  cursor:pointer;
+  transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out, color var(--iui-duration-1) ease-out;
+}
+.iui-clickable .iui-stepper-circle:hover{
+  --_iui-stepper-step-background-color:var(--iui-color-background-positive);
+  --_iui-stepper-step-border-color:var(--iui-color-background-positive);
+  --_iui-stepper-step-number-color:var(--iui-color-foreground-accessory);
+}
+
+.iui-clickable:focus .iui-stepper-circle{
+  outline:2px solid var(--iui-color-foreground-positive);
+  outline-offset:-1px;
+}
+
+.iui-clickable:focus:not(:focus-visible) .iui-stepper-circle{
+  outline:none;
+}
+
+.iui-stepper-track-content{
+  display:flex;
+  align-items:center;
+  width:100%;
+}
+.iui-stepper-track-content::before, .iui-stepper-track-content::after{
+  content:"";
+  height:var(--iui-size-3xs);
+  flex:1 2 auto;
+}
+.iui-stepper-track-content::before{
+  background-color:var(--_iui-stepper-step-track-before-color);
+}
+.iui-stepper-track-content::after{
+  background-color:var(--_iui-stepper-step-track-after-color);
+}
+
+.iui-stepper-step-name{
+  text-align:center;
+  -webkit-user-select:all;
+     -moz-user-select:all;
+          user-select:all;
+  color:var(--_iui-stepper-step-text-color);
+}
+
+.iui-stepper-steps-label{
+  display:block;
+  font-size:var(--iui-font-size-3);
+  text-align:center;
+}
+
+.iui-stepper-steps-label-count{
+  -webkit-user-select:none;
+     -moz-user-select:none;
+      -ms-user-select:none;
+          user-select:none;
+  margin-right:var(--iui-size-xs);
+  color:var(--iui-color-foreground-4);
+}

package/css/surface.css

@@ -5,12 +5,11 @@
 .iui-surface{
   --iui-surface-background-color:var(--iui-color-background-1);
   --iui-surface-border-radius:0;
-  --iui-surface-elevation:0 1px 5px rgba(0, 0, 0, 0.25);
+  --iui-surface-elevation:var(--iui-shadow-1);
   background-color:var(--iui-surface-background-color);
   border-radius:var(--iui-surface-border-radius);
   box-shadow:var(--iui-surface-elevation);
-  box-sizing:border-box;
-  color:var(--iui-text-color);
+  color:var(--iui-color-foreground-2);
 }
 @media (forced-colors: active){
   .iui-surface{