@itwin/itwinui-css 0.50.1 → 0.53.0

package/scss/popover/popover.scss

@@ -1,10 +1,10 @@
+/* stylelint-disable selector-class-pattern */
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import '../style/index';
 
 // tippy.js helper class to hide Popover when it is scrolled out of view
 @mixin iui-popover {
-  /* stylelint-disable-next-line selector-class-pattern */
   &.tippy-box {
     &[data-reference-hidden] {
       visibility: visible;
@@ -16,7 +16,6 @@
   }
 
   // Resets tippy.js default stylings that interfere with our own
-  /* stylelint-disable-next-line selector-class-pattern */
   .tippy-content {
     all: revert;
   }

package/scss/progress-indicator/linear.scss

@@ -13,7 +13,7 @@
     overflow: hidden;
 
     @include themed {
-      background-color: t(iui-color-background-5);
+      background-color: t(iui-color-background-border);
     }
 
     > .iui-fill {
@@ -71,11 +71,7 @@
       }
 
       > span {
-        &::selection {
-          @include themed {
-            background-color: rgba(t(iui-color-foreground-positive-rgb), t(iui-opacity-4));
-          }
-        }
+        @include iui-text-selection(positive);
       }
     }
   }
@@ -101,11 +97,7 @@
       }
 
       > span {
-        &::selection {
-          @include themed {
-            background-color: rgba(t(iui-color-foreground-negative-rgb), t(iui-opacity-4));
-          }
-        }
+        @include iui-text-selection(negative);
       }
     }
   }

package/scss/progress-indicator/radial.scss

@@ -27,7 +27,7 @@
     animation: dash $iui-speed-slow linear infinite;
 
     @include themed {
-      border-bottom-color: t(iui-color-background-5);
+      border-bottom-color: t(iui-color-background-border);
     }
   }
 

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

@@ -14,7 +14,7 @@
   }
   @include themed {
     background-color: t(iui-color-background-3);
-    border-right: 1px solid t(iui-color-background-5);
+    border-right: 1px solid t(iui-color-background-border);
   }
 
   > .iui-sidenav-content {
@@ -51,7 +51,7 @@
     + .iui-sidenav-button.iui-expand {
       border: none;
       @include themed {
-        border-top: 1px solid t(iui-color-background-5);
+        border-top: 1px solid t(iui-color-background-border);
       }
     }
   }
@@ -105,7 +105,7 @@
     &:hover,
     &[disabled] {
       @include themed {
-        border-color: t(iui-color-background-5);
+        border-color: t(iui-color-background-border);
       }
     }
 
@@ -133,7 +133,7 @@
       justify-content: center;
       border: none;
       @include themed {
-        border-bottom: 1px solid t(iui-color-background-5);
+        border-bottom: 1px solid t(iui-color-background-border);
       }
 
       > .iui-button-icon {
@@ -157,7 +157,7 @@
   resize: horizontal;
   @include themed {
     background-color: t(iui-color-background-1);
-    border-right: 1px solid t(iui-color-background-5);
+    border-right: 1px solid t(iui-color-background-border);
   }
 
   @include iui-transition-group;

package/scss/slider/slider.scss

@@ -53,7 +53,7 @@ $tick-height: $iui-baseline; // 11px
   height: $track-height;
   top: $iui-sm;
   @include themed {
-    background-color: t(iui-color-background-4);
+    background-color: t(iui-color-background-border);
   }
 }
 
@@ -71,7 +71,7 @@ $tick-height: $iui-baseline; // 11px
   @include iui-focus($thickness: 2px);
   @include themed {
     background: t(iui-color-background-1);
-    border: 1px solid t(iui-color-background-5);
+    border: 1px solid t(iui-color-background-border);
   }
 
   &:active {

package/scss/style/elevation.scss

@@ -3,8 +3,8 @@
 /// Elevations:
 
 $iui-elevation-0: 0;
-$iui-elevation-2: 0 1px 5px rgba(0, 0, 0, 0.25);
-$iui-elevation-4: 0 1px 10px rgba(0, 0, 0, 0.25);
-$iui-elevation-8: 0 3px 14px rgba(0, 0, 0, 0.25);
-$iui-elevation-16: 0 6px 30px rgba(0, 0, 0, 0.25);
-$iui-elevation-24: 0 9px 46px rgba(0, 0, 0, 0.25);
+$iui-elevation-2: 0 1px 5px hsla(200, 12%, 0%, 0.25);
+$iui-elevation-4: 0 1px 10px hsla(200, 12%, 0%, 0.25);
+$iui-elevation-8: 0 3px 14px hsla(200, 12%, 0%, 0.25);
+$iui-elevation-16: 0 6px 30px hsla(200, 12%, 0%, 0.25);
+$iui-elevation-24: 0 9px 46px hsla(200, 12%, 0%, 0.25);

package/scss/style/global.scss

@@ -2,6 +2,38 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import './index';
 
+html {
+  @include theme-variables(light);
+
+  @media (prefers-color-scheme: dark) {
+    @include theme-variables(dark);
+  }
+
+  @media (prefers-color-scheme: light) and (prefers-contrast: more) {
+    @include theme-variables(light-hc);
+  }
+
+  @media (prefers-color-scheme: dark) and (prefers-contrast: more) {
+    @include theme-variables(dark-hc);
+  }
+
+  &.iui-theme-light {
+    @include theme-variables(light);
+  }
+
+  &.iui-theme-dark {
+    @include theme-variables(dark);
+  }
+
+  &.iui-theme-light-hc {
+    @include theme-variables(light-hc);
+  }
+
+  &.iui-theme-dark-hc {
+    @include theme-variables(dark-hc);
+  }
+}
+
 .iui-body {
   @include themed {
     background-color: t(iui-color-background-2);
@@ -26,33 +58,8 @@
 [class*='iui-'],
 [class*='iui-'] * {
   // Text highlight
-  ::selection {
-    @include themed {
-      background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-4));
-    }
-  }
+  @include iui-text-selection;
 
   // Scrollbar
   @include iui-scrollbar;
 }
-
-html {
-  &,
-  &.iui-theme-light {
-    @include theme-variables(light);
-  }
-
-  &.iui-theme-dark {
-    @include theme-variables(dark);
-  }
-
-  @media (prefers-color-scheme: light) {
-    // fall back to default - light theme variables
-  }
-
-  @media (prefers-color-scheme: dark) {
-    &:not([class*='iui-theme-']) {
-      @include theme-variables(dark);
-    }
-  }
-}

package/scss/style/mixins.scss

@@ -63,6 +63,15 @@
   }
 }
 
+@mixin iui-text-selection($status: primary) {
+  &::selection,
+  *::selection {
+    @include themed {
+      background-color: rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-5));
+    }
+  }
+}
+
 @mixin iui-scrollbar {
   @include themed {
     scrollbar-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4)) transparent;

package/scss/style/ripple.scss

@@ -13,6 +13,6 @@
   &:active {
     background-color: $rippleColor;
     background-size: 100%;
-    transition: background 0s;
+    transition: background $iui-speed-instant;
   }
 }

package/scss/style/speed.scss

@@ -2,6 +2,7 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 /// Animation speed:
 
+$iui-speed-instant: 0s;
 $iui-speed-fast: 0.2s;
 $iui-speed: 0.4s;
 $iui-speed-slow: 0.8s;