@itwin/itwinui-css 0.52.0 → 0.53.2

package/scss/information-panel/information-panel.scss

@@ -11,6 +11,7 @@
 @mixin iui-information-panel {
   position: absolute;
   opacity: 0;
+  visibility: hidden;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -18,7 +19,8 @@
   max-height: 100%;
   z-index: 2; // Needs to be higher than table's column resizers.
   @media (prefers-reduced-motion: no-preference) {
-    transition: transform $iui-speed-fast ease-out, opacity $iui-speed-fast ease;
+    transition: visibility $iui-speed-instant $iui-speed-fast ease-in, transform $iui-speed-fast ease-out,
+      opacity $iui-speed-fast ease;
   }
 
   @include themed {
@@ -32,7 +34,7 @@
 
     > .iui-resizer-bar {
       @include themed {
-        background-color: t(iui-color-background-5);
+        background-color: t(iui-color-background-border);
       }
     }
 
@@ -100,7 +102,7 @@
 
     > hr {
       @include themed {
-        border-color: t(iui-color-background-4);
+        border-color: t(iui-color-background-border);
       }
     }
   }
@@ -108,8 +110,13 @@
 
 @mixin iui-information-panel-visible {
   opacity: 1;
+  visibility: visible;
   transform: translate(0);
 
+  @media (prefers-reduced-motion: no-preference) {
+    transition: transform $iui-speed-fast ease-out, opacity $iui-speed-fast ease;
+  }
+
   > .iui-resizer {
     display: flex;
   }

package/scss/menu/classes.scss

@@ -1,9 +1,10 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import './index';
+@import '../surface/index';
 
 .iui-menu {
-  @include iui-dropdown;
+  @include iui-surface;
   @include iui-list-menu;
 }
 

package/scss/menu/menu.scss

@@ -5,16 +5,8 @@
 
 $iui-active-outline: thin solid t(iui-color-foreground-primary);
 
-@mixin iui-dropdown {
-  @include iui-reset;
-  box-shadow: $iui-elevation-2;
-  @include themed {
-    background-color: t(iui-color-background-1);
-    color: t(iui-text-color);
-  }
-}
-
 @mixin iui-list-menu {
+  @include iui-reset;
   list-style-type: none;
   user-select: none;
   width: 100%;
@@ -111,12 +103,17 @@ $iui-active-outline: thin solid t(iui-color-foreground-primary);
     &,
     &:hover {
       @include themed {
-        background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-5));
+        background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
+        color: t(iui-color-foreground-primary);
         outline: $iui-active-outline;
         outline-offset: -1px;
       }
     }
 
+    .iui-menu-description {
+      opacity: 1;
+    }
+
     > .iui-icon {
       @include themed {
         fill: t(iui-icons-color-primary);
@@ -163,7 +160,7 @@ $iui-active-outline: thin solid t(iui-color-foreground-primary);
   width: calc(100% - #{$iui-l});
   margin: 1px auto;
   @include themed {
-    background-color: t(iui-color-background-4);
+    background-color: t(iui-color-background-border);
   }
 }
 

package/scss/modal/classes.scss

@@ -8,4 +8,8 @@
   &-full-page {
     @include iui-modal-full-page;
   }
+
+  &-animation {
+    @include iui-modal-animation;
+  }
 }

package/scss/modal/modal.scss

@@ -30,18 +30,6 @@
   }
   // #endregion Small Modal Animations for CSS
 
-  // #region Small Modal Animations for React
-  &.iui-modal-animation-enter {
-    visibility: hidden;
-    opacity: 0;
-  }
-
-  &.iui-modal-animation-enter-active {
-    visibility: visible;
-    opacity: 1;
-  }
-  // #endregion Full Page Modal Animations for React
-
   > .iui-modal-dialog {
     position: absolute;
     left: 50%;
@@ -103,6 +91,9 @@
 }
 
 @mixin iui-modal-full-page {
+  $iui-full-page-modal-slide-in-speed: 0.3s;
+  $iui-full-page-modal-slide-out-speed: 0.25s;
+
   > .iui-modal-dialog {
     display: flex;
     flex-direction: column;
@@ -119,33 +110,46 @@
 
   // #region Full Page Modal Animations for CSS
   @media (prefers-reduced-motion: no-preference) {
-    transition: visibility $iui-speed-instant linear $iui-speed, opacity $iui-speed ease-out $iui-speed-fast;
+    transition: visibility $iui-speed-instant linear $iui-speed-slow, opacity $iui-speed ease-out $iui-speed-fast;
   }
 
   > .iui-modal-dialog {
     transform: translateY(100%);
     @media (prefers-reduced-motion: no-preference) {
-      transition: visibility $iui-speed-instant linear $iui-speed, opacity $iui-speed-instant linear $iui-speed, transform $iui-speed ease-in;
+      transition: visibility $iui-speed-instant linear $iui-speed, opacity $iui-speed-instant linear $iui-speed,
+        transform $iui-full-page-modal-slide-out-speed ease-in;
     }
   }
 
   &.iui-modal-visible > .iui-modal-dialog {
     transform: translateY(0);
     @media (prefers-reduced-motion: no-preference) {
-      transition: transform $iui-speed ease-out;
+      transition: transform $iui-full-page-modal-slide-in-speed ease-out;
     }
   }
   // #endregion Full Page Modal Animations for CSS
+}
 
-  // #region Full Page Modal Animations for React
-  &.iui-modal-animation-enter > .iui-modal-dialog {
+@mixin iui-modal-animation {
+  // Full Page Modal Animations for React
+  &-enter .iui-modal-full-page .iui-modal-dialog {
     transform: translateY(100%);
     opacity: 0;
   }
 
-  &.iui-modal-animation-enter-active > .iui-modal-dialog {
+  &-enter-active .iui-modal-full-page .iui-modal-dialog {
     transform: translateY(0);
     opacity: 1;
   }
-  // #endregion Full Page Modal Animations for React
+
+  // Small Modal Animations for React
+  &-enter .iui-modal {
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  &-enter-active .iui-modal {
+    visibility: visible;
+    opacity: 1;
+  }
 }

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 {

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/skip-to-content/skip-to-content.scss

@@ -15,12 +15,13 @@
   position: fixed;
   text-align: center;
   left: 50%;
+  opacity: 0;
   top: $iui-baseline * 2;
   transform: translateX(-50%) translateY(-170%);
   transition: background-color $iui-speed-fast ease-in-out;
   @media (prefers-reduced-motion: no-preference) {
-    transition: background-color $iui-speed-fast ease-in-out, transform $iui-speed-slow ease-in-out,
-      box-shadow $iui-speed-fast ease-in-out;
+    transition: opacity $iui-speed-slow ease-in-out, background-color $iui-speed-slow ease-in-out,
+      transform $iui-speed-slow ease-in-out, box-shadow $iui-speed-slow ease-in-out;
   }
 
   &:hover {
@@ -28,10 +29,12 @@
   }
 
   &:focus {
+    opacity: 1;
     transform: translateX(-50%) translateY(0);
     box-shadow: $iui-elevation-16;
     @media (prefers-reduced-motion: no-preference) {
-      transition: transform $iui-speed-fast ease-in-out;
+      transition: opacity $iui-speed-instant ease-in-out, background-color $iui-speed-fast ease-in-out,
+        transform $iui-speed-fast ease-in-out, box-shadow $iui-speed-fast ease-in-out;
     }
   }
 }

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);
@@ -31,24 +63,3 @@
   // 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

@@ -67,7 +67,7 @@
   &::selection,
   *::selection {
     @include themed {
-      background-color: rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-4));
+      background-color: rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-5));
     }
   }
 }