@itwin/itwinui-css 0.37.2 → 0.40.0

package/scss/progress-indicator/overlay.scss

@@ -16,19 +16,13 @@
 
   // Blur fallback
   @include themed {
-    background-color: rgba(
-      t(iui-color-background-1-rgb),
-      t(iui-opacity-2)
-    );
+    background-color: rgba(t(iui-color-background-1-rgb), t(iui-opacity-2));
   }
 
   // With blur
-  @supports(backdrop-filter: $iui-blur-filter) {
+  @supports (backdrop-filter: $iui-blur-filter) {
     @include themed {
-      background-color: rgba(
-        t(iui-color-background-1-rgb),
-        t(iui-opacity-3)
-      );
+      background-color: rgba(t(iui-color-background-1-rgb), t(iui-opacity-3));
       backdrop-filter: $iui-blur-filter;
     }
   }

package/scss/progress-indicator/radial.scss

@@ -45,7 +45,7 @@
 @mixin iui-progress-indicator-radial {
   position: relative;
   display: inline-block;
-  @include iui-progress-indicator-radial-size($size:$iui-icons-xl);
+  @include iui-progress-indicator-radial-size($size: $iui-icons-xl);
 
   > .iui-radial {
     height: 100%;
@@ -167,7 +167,7 @@
   }
 
   &.iui-x-small {
-    @include iui-progress-indicator-radial-size($size:$iui-icons-default);
+    @include iui-progress-indicator-radial-size($size: $iui-icons-default);
 
     .iui-inner-content {
       display: none;
@@ -175,11 +175,11 @@
   }
 
   &.iui-small {
-    @include iui-progress-indicator-radial-size($size:$iui-icons-large);
+    @include iui-progress-indicator-radial-size($size: $iui-icons-large);
   }
 
   &.iui-large {
-    @include iui-progress-indicator-radial-size($size:$iui-icons-xxl);
+    @include iui-progress-indicator-radial-size($size: $iui-icons-xxl);
 
     .iui-inner-content {
       font-size: $iui-font-size-leading;

package/scss/side-navigation/side-navigation.scss

@@ -61,7 +61,7 @@
     max-width: $iui-icons-large * 3;
 
     // iPhone notch support
-    @supports(min-width: unquote('max(0px)')) {
+    @supports (min-width: unquote('max(0px)')) {
       min-width: unquote('max(#{$iui-icons-large} * 3, #{$iui-icons-large} * 3 + env(safe-area-inset-left))');
       max-width: unquote('max(#{$iui-icons-large} * 3, #{$iui-icons-large} * 3 + env(safe-area-inset-left))');
     }
@@ -71,12 +71,13 @@
   > .iui-sidenav-content {
     max-width: $iui-3xl * 3;
 
-    > .iui-sidenav-button.iui-expand > .iui-icon {
+    > .iui-sidenav-button.iui-expand > .iui-button-icon {
       transform: scaleX(-1);
     }
   }
 
   .iui-sidenav-button {
+    gap: $iui-icons-large;
     border-radius: 0;
     border-left: none;
     border-right: none;
@@ -86,49 +87,57 @@
     &:not(.iui-expand) {
       height: $iui-baseline * 5;
       // iPhone notch support
-      @supports(padding: unquote('max(0px)')) {
+      @supports (padding: unquote('max(0px)')) {
         padding-left: unquote('max(#{$iui-icons-large}, #{$iui-icons-large} + env(safe-area-inset-left))');
       }
     }
 
+    > .iui-button-label {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
     &,
-    &:enabled:hover,
+    &:hover,
     &[disabled],
-    &:focus-visible {
+    &:focus {
       @include themed {
         border-color: t(iui-color-background-5);
       }
     }
 
-    > .iui-icon:not(.iui-user-icon) {
+    // Overriding border from default button
+    &:focus:not(:focus-visible) {
+      @include themed {
+        border-color: t(iui-color-background-5);
+      }
+    }
+
+    > .iui-button-icon:not(.iui-user-icon) {
       width: $iui-icons-large;
       height: $iui-icons-large;
       flex-shrink: 0;
-
-      + .iui-label {
-        margin-left: $iui-icons-large;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
     }
 
-    &.iui-submenu-open .iui-icon {
+    &.iui-submenu-open .iui-button-icon {
       @include themed {
         fill: t(iui-color-foreground-primary);
       }
     }
 
     &.iui-active {
-      &:focus,
-      &:focus-visible {
+      @include themed {
+        box-shadow: inset $iui-xxs 0 0 0 t(iui-icons-color-primary);
+      }
+
+      &:focus {
         @include themed {
-          box-shadow: inset 0 0 $iui-xs
-            rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-3)), inset $iui-xxs 0 0 0 t(iui-icons-color-primary);
+          box-shadow: inset 0 0 $iui-xs rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-3)),
+            inset $iui-xxs 0 0 0 t(iui-icons-color-primary);
         }
       }
 
-      &,
       &:focus:not(:focus-visible) {
         @include themed {
           box-shadow: inset $iui-xxs 0 0 0 t(iui-icons-color-primary);
@@ -136,7 +145,8 @@
       }
     }
 
-    &[disabled] {
+    &[disabled],
+    &:disabled {
       @include themed {
         background-color: t(iui-color-background-2);
       }
@@ -145,8 +155,7 @@
     &:focus {
       outline: 0;
       @include themed {
-        box-shadow: inset 0 0 $iui-xs
-          rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-3));
+        box-shadow: inset 0 0 $iui-xs rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-3));
       }
     }
 
@@ -154,12 +163,6 @@
       box-shadow: none;
     }
 
-    &:focus-visible {
-      outline: 0;
-      box-shadow: inset 0 0 $iui-xs
-        rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-3));
-    }
-
     &.iui-expand {
       height: $iui-line-height;
       justify-content: center;
@@ -168,7 +171,7 @@
         border-bottom: 1px solid t(iui-color-background-5);
       }
 
-      > .iui-icon {
+      > .iui-button-icon {
         @include iui-icons-small;
         @media (prefers-reduced-motion: no-preference) {
           transition: transform $iui-speed ease-out;

package/scss/slider/slider.scss

@@ -3,8 +3,8 @@
 @import '../style/index';
 @import '../icon/index';
 
-$thumb-height: $iui-m;  // 16px
-$track-height: $iui-xs;  // 4px
+$thumb-height: $iui-m; // 16px
+$track-height: $iui-xs; // 4px
 $tick-height: $iui-baseline; // 11px
 
 @mixin iui-slider-component-container {
@@ -63,7 +63,9 @@ $tick-height: $iui-baseline; // 11px
   width: $thumb-height;
   border-radius: 100%;
   top: $track-height + 1; // position center of thumb in center of track
-  transform: translateX((-$thumb-height - 2) * 0.5); // Adjust the left (set in code) by radius of thumb so thumb center is at value position
+  transform: translateX(
+    (-$thumb-height - 2) * 0.5
+  ); // Adjust the left (set in code) by radius of thumb so thumb center is at value position
   z-index: 1;
   cursor: grab;
   @include themed {

package/scss/style/global.scss

@@ -28,10 +28,7 @@
   // Text highlight
   ::selection {
     @include themed {
-      background-color: rgba(
-        t(iui-color-foreground-primary-rgb),
-        t(iui-opacity-4)
-      );
+      background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-4));
     }
   }
 

package/scss/style/mixins.scss

@@ -67,8 +67,7 @@
 
 @mixin iui-scrollbar {
   @include themed {
-    scrollbar-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4))
-      transparent;
+    scrollbar-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4)) transparent;
     scrollbar-width: thin;
   }
 
@@ -79,19 +78,13 @@
 
   &::-webkit-scrollbar-thumb {
     @include themed {
-      background-color: rgba(
-        t(iui-color-foreground-body-rgb),
-        t(iui-opacity-4)
-      );
+      background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
     }
     border-radius: $iui-s * 0.5;
 
     &:hover {
       @include themed {
-        background-color: rgba(
-          t(iui-color-foreground-body-rgb),
-          t(iui-opacity-3)
-        );
+        background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-3));
       }
     }
   }
@@ -107,7 +100,7 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 
-  @supports(-webkit-line-clamp: 1) {
+  @supports (-webkit-line-clamp: 1) {
     white-space: unset;
     display: -webkit-box; /* stylelint-disable-line */
     -webkit-line-clamp: $lines;
@@ -122,7 +115,7 @@
   }
 
   // With blur
-  @supports(backdrop-filter: $iui-blur-filter) {
+  @supports (backdrop-filter: $iui-blur-filter) {
     @include themed() {
       background-color: rgba(0, 0, 0, t(iui-opacity-#{$opacity}));
       backdrop-filter: $iui-blur-filter;
@@ -166,3 +159,15 @@
     }
   }
 }
+
+/// Adds the ability to toggle vertical scroll snapping by setting `.iui-scroll-snapping` as a modifier (if used inside a class) or at root level.
+/// @arg $selector - selector to apply `scroll-snap-align: start` on. Defaults to '> *'
+@mixin iui-scroll-snapping($selector: '> *') {
+  #{if(&, '&.iui-scroll-snapping', '.iui-scroll-snapping')} {
+    scroll-snap-type: y mandatory;
+
+    #{$selector} {
+      scroll-snap-align: start;
+    }
+  }
+}

package/scss/style/theme.scss

@@ -23,34 +23,13 @@ $iui-color-foreground-negative--light: #D30A0A;
 $iui-color-foreground-warning--light: #F18B12;
 
 // Light theme > Overlays
-$iui-color-background-1-overlay--light: darken(
-  $iui-color-background-1--light,
-  5%
-);
-$iui-color-background-primary-overlay--light: darken(
-  $iui-color-background-primary--light,
-  10%
-);
-$iui-color-background-positive-overlay--light: darken(
-  $iui-color-background-positive--light,
-  10%
-);
-$iui-color-foreground-primary-overlay--light: darken(
-  $iui-color-foreground-primary--light,
-  10%
-);
-$iui-color-foreground-positive-overlay--light: darken(
-  $iui-color-foreground-positive--light,
-  10%
-);
-$iui-color-foreground-warning-overlay--light: darken(
-  $iui-color-foreground-warning--light,
-  10%
-);
-$iui-color-foreground-negative-overlay--light: darken(
-  $iui-color-foreground-negative--light,
-  10%
-);
+$iui-color-background-1-overlay--light: darken($iui-color-background-1--light, 5%);
+$iui-color-background-primary-overlay--light: darken($iui-color-background-primary--light, 10%);
+$iui-color-background-positive-overlay--light: darken($iui-color-background-positive--light, 10%);
+$iui-color-foreground-primary-overlay--light: darken($iui-color-foreground-primary--light, 10%);
+$iui-color-foreground-positive-overlay--light: darken($iui-color-foreground-positive--light, 10%);
+$iui-color-foreground-warning-overlay--light: darken($iui-color-foreground-warning--light, 10%);
+$iui-color-foreground-negative-overlay--light: darken($iui-color-foreground-negative--light, 10%);
 
 // Light theme > Opacity stops
 $iui-opacity-1--light: 1;
@@ -61,58 +40,21 @@ $iui-opacity-5--light: 0.2;
 $iui-opacity-6--light: 0.1;
 
 // Light theme > Text colors
-$iui-text-color--light: rgba(
-  $iui-color-foreground-body--light,
-  $iui-opacity-2--light
-);
-$iui-text-color-muted--light: rgba(
-  $iui-color-foreground-body--light,
-  $iui-opacity-4--light
-);
-$iui-text-color-placeholder--light: rgba(
-  $iui-color-foreground-body--light,
-  $iui-opacity-5--light
-);
+$iui-text-color--light: rgba($iui-color-foreground-body--light, $iui-opacity-2--light);
+$iui-text-color-muted--light: rgba($iui-color-foreground-body--light, $iui-opacity-4--light);
+$iui-text-color-placeholder--light: rgba($iui-color-foreground-body--light, $iui-opacity-5--light);
 
 // Light theme > Focus color
-$iui-focus-box-shadow--light: rgba(
-  $iui-color-foreground-primary--light,
-  $iui-opacity-5--light
-)
-  0 0 0 2px;
-$iui-focus-positive-box-shadow--light: rgba(
-  $iui-color-foreground-positive--light,
-  $iui-opacity-5--light
-)
-  0 0 0 2px;
-$iui-focus-warning-box-shadow--light: rgba(
-  $iui-color-foreground-warning--light,
-  $iui-opacity-5--light
-)
-  0 0 0 2px;
-$iui-focus-negative-box-shadow--light: rgba(
-  $iui-color-foreground-negative--light,
-  $iui-opacity-5--light
-)
-  0 0 0 2px;
+$iui-focus-box-shadow--light: rgba($iui-color-foreground-primary--light, $iui-opacity-5--light) 0 0 0 2px;
+$iui-focus-positive-box-shadow--light: rgba($iui-color-foreground-positive--light, $iui-opacity-5--light) 0 0 0 2px;
+$iui-focus-warning-box-shadow--light: rgba($iui-color-foreground-warning--light, $iui-opacity-5--light) 0 0 0 2px;
+$iui-focus-negative-box-shadow--light: rgba($iui-color-foreground-negative--light, $iui-opacity-5--light) 0 0 0 2px;
 
 // Light theme > Icon colors
-$iui-icons-color--light: rgba(
-  $iui-color-foreground-body--light,
-  $iui-opacity-4--light
-);
-$iui-icons-color-actionable--light: rgba(
-  $iui-color-foreground-body--light,
-  $iui-opacity-2--light
-);
-$iui-icons-color-actionable-hover--light: rgba(
-  $iui-color-foreground-body--light,
-  $iui-opacity-1--light
-);
-$iui-icons-color-actionable-disabled--light: rgba(
-  $iui-color-foreground-body--light,
-  $iui-opacity-5--light
-);
+$iui-icons-color--light: rgba($iui-color-foreground-body--light, $iui-opacity-4--light);
+$iui-icons-color-actionable--light: rgba($iui-color-foreground-body--light, $iui-opacity-2--light);
+$iui-icons-color-actionable-hover--light: rgba($iui-color-foreground-body--light, $iui-opacity-1--light);
+$iui-icons-color-actionable-disabled--light: rgba($iui-color-foreground-body--light, $iui-opacity-5--light);
 $iui-icons-color-primary--light: $iui-color-foreground-primary--light;
 $iui-icons-color-positive--light: $iui-color-foreground-positive--light;
 $iui-icons-color-negative--light: $iui-color-foreground-negative--light;
@@ -141,34 +83,13 @@ $iui-color-foreground-negative--dark: #EFA9A9;
 $iui-color-foreground-warning--dark: #F9D7AB;
 
 // Dark theme > Overlays
-$iui-color-background-1-overlay--dark: lighten(
-  $iui-color-background-1--dark,
-  5%
-);
-$iui-color-background-primary-overlay--dark: lighten(
-  $iui-color-background-primary--dark,
-  5%
-);
-$iui-color-background-positive-overlay--dark: lighten(
-  $iui-color-background-positive--dark,
-  5%
-);
-$iui-color-foreground-primary-overlay--dark: lighten(
-  $iui-color-foreground-primary--dark,
-  10%
-);
-$iui-color-foreground-positive-overlay--dark: lighten(
-  $iui-color-foreground-positive--dark,
-  10%
-);
-$iui-color-foreground-warning-overlay--dark: lighten(
-  $iui-color-foreground-warning--dark,
-  10%
-);
-$iui-color-foreground-negative-overlay--dark: lighten(
-  $iui-color-foreground-negative--dark,
-  10%
-);
+$iui-color-background-1-overlay--dark: lighten($iui-color-background-1--dark, 5%);
+$iui-color-background-primary-overlay--dark: lighten($iui-color-background-primary--dark, 5%);
+$iui-color-background-positive-overlay--dark: lighten($iui-color-background-positive--dark, 5%);
+$iui-color-foreground-primary-overlay--dark: lighten($iui-color-foreground-primary--dark, 10%);
+$iui-color-foreground-positive-overlay--dark: lighten($iui-color-foreground-positive--dark, 10%);
+$iui-color-foreground-warning-overlay--dark: lighten($iui-color-foreground-warning--dark, 10%);
+$iui-color-foreground-negative-overlay--dark: lighten($iui-color-foreground-negative--dark, 10%);
 
 // Dark theme > Opacity stops
 $iui-opacity-1--dark: 1;
@@ -179,57 +100,20 @@ $iui-opacity-5--dark: 0.25;
 $iui-opacity-6--dark: 0.1;
 
 // Dark theme > Text colors
-$iui-text-color--dark: rgba(
-  $iui-color-foreground-body--dark,
-  $iui-opacity-2--dark
-);
-$iui-text-color-muted--dark: rgba(
-  $iui-color-foreground-body--dark,
-  $iui-opacity-4--dark
-);
-$iui-text-color-placeholder--dark: rgba(
-  $iui-color-foreground-body--dark,
-  $iui-opacity-5--dark
-);
+$iui-text-color--dark: rgba($iui-color-foreground-body--dark, $iui-opacity-2--dark);
+$iui-text-color-muted--dark: rgba($iui-color-foreground-body--dark, $iui-opacity-4--dark);
+$iui-text-color-placeholder--dark: rgba($iui-color-foreground-body--dark, $iui-opacity-5--dark);
 
 // Dark theme > Focus color
-$iui-focus-box-shadow--dark: rgba(
-  $iui-color-foreground-primary--dark,
-  $iui-opacity-5--dark
-)
-  0 0 0 2px;
-$iui-focus-positive-box-shadow--dark: rgba(
-  $iui-color-foreground-positive--dark,
-  $iui-opacity-5--dark
-)
-  0 0 0 2px;
-$iui-focus-warning-box-shadow--dark: rgba(
-  $iui-color-foreground-warning--dark,
-  $iui-opacity-5--dark
-)
-  0 0 0 2px;
-$iui-focus-negative-box-shadow--dark: rgba(
-  $iui-color-foreground-negative--dark,
-  $iui-opacity-5--dark
-)
-  0 0 0 2px;
+$iui-focus-box-shadow--dark: rgba($iui-color-foreground-primary--dark, $iui-opacity-5--dark) 0 0 0 2px;
+$iui-focus-positive-box-shadow--dark: rgba($iui-color-foreground-positive--dark, $iui-opacity-5--dark) 0 0 0 2px;
+$iui-focus-warning-box-shadow--dark: rgba($iui-color-foreground-warning--dark, $iui-opacity-5--dark) 0 0 0 2px;
+$iui-focus-negative-box-shadow--dark: rgba($iui-color-foreground-negative--dark, $iui-opacity-5--dark) 0 0 0 2px;
 // Dark theme > Icon colors
-$iui-icons-color--dark: rgba(
-  $iui-color-foreground-body--dark,
-  $iui-opacity-4--dark
-);
-$iui-icons-color-actionable--dark: rgba(
-  $iui-color-foreground-body--dark,
-  $iui-opacity-2--dark
-);
-$iui-icons-color-actionable-hover--dark: rgba(
-  $iui-color-foreground-body--dark,
-  $iui-opacity-1--dark
-);
-$iui-icons-color-actionable-disabled--dark: rgba(
-  $iui-color-foreground-body--dark,
-  $iui-opacity-5--dark
-);
+$iui-icons-color--dark: rgba($iui-color-foreground-body--dark, $iui-opacity-4--dark);
+$iui-icons-color-actionable--dark: rgba($iui-color-foreground-body--dark, $iui-opacity-2--dark);
+$iui-icons-color-actionable-hover--dark: rgba($iui-color-foreground-body--dark, $iui-opacity-1--dark);
+$iui-icons-color-actionable-disabled--dark: rgba($iui-color-foreground-body--dark, $iui-opacity-5--dark);
 $iui-icons-color-primary--dark: $iui-color-foreground-primary--dark;
 $iui-icons-color-positive--dark: $iui-color-foreground-positive--dark;
 $iui-icons-color-negative--dark: $iui-color-foreground-negative--dark;
@@ -256,18 +140,12 @@ $themes: (
     iui-color-foreground-negative: $iui-color-foreground-negative--light,
     iui-color-foreground-warning: $iui-color-foreground-warning--light,
     iui-color-background-1-overlay: $iui-color-background-1-overlay--light,
-    iui-color-background-primary-overlay:
-    $iui-color-background-primary-overlay--light,
-    iui-color-background-positive-overlay:
-    $iui-color-background-positive-overlay--light,
-    iui-color-foreground-primary-overlay:
-    $iui-color-foreground-primary-overlay--light,
-    iui-color-foreground-positive-overlay:
-    $iui-color-foreground-positive-overlay--light,
-    iui-color-foreground-warning-overlay:
-    $iui-color-foreground-warning-overlay--light,
-    iui-color-foreground-negative-overlay:
-    $iui-color-foreground-negative-overlay--light,
+    iui-color-background-primary-overlay: $iui-color-background-primary-overlay--light,
+    iui-color-background-positive-overlay: $iui-color-background-positive-overlay--light,
+    iui-color-foreground-primary-overlay: $iui-color-foreground-primary-overlay--light,
+    iui-color-foreground-positive-overlay: $iui-color-foreground-positive-overlay--light,
+    iui-color-foreground-warning-overlay: $iui-color-foreground-warning-overlay--light,
+    iui-color-foreground-negative-overlay: $iui-color-foreground-negative-overlay--light,
     iui-opacity-1: $iui-opacity-1--light,
     iui-opacity-2: $iui-opacity-2--light,
     iui-opacity-3: $iui-opacity-3--light,
@@ -284,12 +162,11 @@ $themes: (
     iui-icons-color: $iui-icons-color--light,
     iui-icons-color-actionable: $iui-icons-color-actionable--light,
     iui-icons-color-actionable-hover: $iui-icons-color-actionable-hover--light,
-    iui-icons-color-actionable-disabled:
-    $iui-icons-color-actionable-disabled--light,
+    iui-icons-color-actionable-disabled: $iui-icons-color-actionable-disabled--light,
     iui-icons-color-primary: $iui-icons-color-primary--light,
     iui-icons-color-positive: $iui-icons-color-positive--light,
     iui-icons-color-negative: $iui-icons-color-negative--light,
-    iui-icons-color-warning: $iui-icons-color-warning--light
+    iui-icons-color-warning: $iui-icons-color-warning--light,
   ),
   dark: (
     iui-color-background-1: $iui-color-background-1--dark,
@@ -310,18 +187,12 @@ $themes: (
     iui-color-foreground-negative: $iui-color-foreground-negative--dark,
     iui-color-foreground-warning: $iui-color-foreground-warning--dark,
     iui-color-background-1-overlay: $iui-color-background-1-overlay--dark,
-    iui-color-background-primary-overlay:
-    $iui-color-background-primary-overlay--dark,
-    iui-color-background-positive-overlay:
-    $iui-color-background-positive-overlay--dark,
-    iui-color-foreground-primary-overlay:
-    $iui-color-foreground-primary-overlay--dark,
-    iui-color-foreground-positive-overlay:
-    $iui-color-foreground-positive-overlay--dark,
-    iui-color-foreground-warning-overlay:
-    $iui-color-foreground-warning-overlay--dark,
-    iui-color-foreground-negative-overlay:
-    $iui-color-foreground-negative-overlay--dark,
+    iui-color-background-primary-overlay: $iui-color-background-primary-overlay--dark,
+    iui-color-background-positive-overlay: $iui-color-background-positive-overlay--dark,
+    iui-color-foreground-primary-overlay: $iui-color-foreground-primary-overlay--dark,
+    iui-color-foreground-positive-overlay: $iui-color-foreground-positive-overlay--dark,
+    iui-color-foreground-warning-overlay: $iui-color-foreground-warning-overlay--dark,
+    iui-color-foreground-negative-overlay: $iui-color-foreground-negative-overlay--dark,
     iui-opacity-1: $iui-opacity-1--dark,
     iui-opacity-2: $iui-opacity-2--dark,
     iui-opacity-3: $iui-opacity-3--dark,
@@ -338,47 +209,31 @@ $themes: (
     iui-icons-color: $iui-icons-color--dark,
     iui-icons-color-actionable: $iui-icons-color-actionable--dark,
     iui-icons-color-actionable-hover: $iui-icons-color-actionable-hover--dark,
-    iui-icons-color-actionable-disabled:
-    $iui-icons-color-actionable-disabled--dark,
+    iui-icons-color-actionable-disabled: $iui-icons-color-actionable-disabled--dark,
     iui-icons-color-primary: $iui-icons-color-primary--dark,
     iui-icons-color-positive: $iui-icons-color-positive--dark,
     iui-icons-color-negative: $iui-icons-color-negative--dark,
-    iui-icons-color-warning: $iui-icons-color-warning--dark
+    iui-icons-color-warning: $iui-icons-color-warning--dark,
   ),
 );
 
 // Overrides of $themes used when creating CSS variables
 $cssVariables: (
-  iui-text-color:
-  rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)),
-  iui-text-color-muted:
-  rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)),
-  iui-text-color-placeholder:
-  rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)),
-  iui-focus-box-shadow:
-  rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5)) 0 0 0
-  2px,
-  iui-focus-positive-box-shadow:
-  rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5)) 0 0 0
-  2px,
-  iui-focus-warning-box-shadow:
-  rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5)) 0 0 0
-  2px,
-  iui-focus-negative-box-shadow:
-  rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5)) 0 0 0
-  2px,
+  iui-text-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)),
+  iui-text-color-muted: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)),
+  iui-text-color-placeholder: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)),
+  iui-focus-box-shadow: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5)) 0 0 0 2px,
+  iui-focus-positive-box-shadow: rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5)) 0 0 0 2px,
+  iui-focus-warning-box-shadow: rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5)) 0 0 0 2px,
+  iui-focus-negative-box-shadow: rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5)) 0 0 0 2px,
   iui-icons-color-primary: var(--iui-color-foreground-primary),
   iui-icons-color-positive: var(--iui-color-foreground-positive),
   iui-icons-color-negative: var(--iui-color-foreground-negative),
   iui-icons-color-warning: var(--iui-color-foreground-warning),
-  iui-icons-color:
-  rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)),
-  iui-icons-color-actionable:
-  rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)),
-  iui-icons-color-actionable-hover:
-  rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)),
-  iui-icons-color-actionable-disabled:
-  rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5))
+  iui-icons-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)),
+  iui-icons-color-actionable: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)),
+  iui-icons-color-actionable-hover: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)),
+  iui-icons-color-actionable-disabled: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)),
 );
 
 @function getfallbackvars() {