@itwin/itwinui-css 0.51.0 → 0.53.1

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

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

package/scss/modal/modal.scss

@@ -11,14 +11,24 @@
   left: 0;
   width: 100%;
   height: 100%;
+  @include themed {
+    background-color: rgba(0, 0, 0, t(iui-opacity-4));
+  }
+
+  // #region Small Modal Animations for CSS
   visibility: hidden;
   opacity: 0;
   @media (prefers-reduced-motion: no-preference) {
-    transition: visibility 0s linear $iui-speed-fast, opacity $iui-speed-fast ease-out;
+    transition: visibility $iui-speed-instant linear $iui-speed-fast, opacity $iui-speed-fast ease-out;
   }
-  @include themed {
-    background-color: rgba(0, 0, 0, t(iui-opacity-4));
+
+  &.iui-modal-visible {
+    visibility: visible;
+    opacity: 1;
+    // remove delay for entry animation so it's instantly visible
+    transition-delay: $iui-speed-instant;
   }
+  // #endregion Small Modal Animations for CSS
 
   > .iui-modal-dialog {
     position: absolute;
@@ -27,10 +37,12 @@
     transform: translate(-50%, -33%);
     z-index: 1000;
     max-width: 50%;
-    min-width: 400px;
+    min-width: 380px;
+    max-height: 100vh;
     border-radius: $iui-border-radius;
     box-shadow: $iui-elevation-24;
     padding: $iui-baseline $iui-m;
+    box-sizing: border-box;
 
     @include themed {
       background-color: t(iui-color-background-1);
@@ -67,11 +79,74 @@
         margin-right: $iui-s;
       }
     }
+
+    .iui-modal-content {
+      flex-grow: 2;
+      margin: 0 -#{$iui-m};
+      padding: 0 $iui-m;
+      overflow-y: auto;
+      overflow-y: overlay;
+    }
   }
+}
 
-  &.iui-modal-visible {
+@mixin iui-modal-full-page {
+  > .iui-modal-dialog {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    width: 100vw;
+    left: 0;
+    top: 0;
+    transform: none;
+    max-width: initial;
+    min-width: initial;
+    border-radius: 0;
+    will-change: transform;
+  }
+
+  // #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;
+  }
+
+  > .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;
+    }
+  }
+
+  &.iui-modal-visible > .iui-modal-dialog {
+    transform: translateY(0);
+    @media (prefers-reduced-motion: no-preference) {
+      transition: transform $iui-speed ease-out;
+    }
+  }
+  // #endregion Full Page Modal Animations for CSS
+}
+
+@mixin iui-modal-animation {
+  // Full Page Modal Animations for React
+  &-enter .iui-modal .iui-modal-dialog {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+
+  &-enter-active .iui-modal .iui-modal-dialog {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  // Small Modal Animations for React
+  &-enter .iui-modal {
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  &-enter-active .iui-modal {
     visibility: visible;
     opacity: 1;
-    transition-delay: 0s;
   }
 }

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/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));
     }
   }
 }

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;