@itwin/itwinui-css 0.50.1 → 0.53.0

package/scss/date-picker/date-picker.scss

@@ -2,17 +2,21 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import '../style/index';
 @import '../icon/index';
-@import '../menu/index';
+@import '../surface/index';
+
+$iui-date-picker-cell-width: 40px;
+$iui-date-picker-cell-height: 36px;
+$iui-date-picker-today-circle-size: 32px;
 
 @mixin iui-date-picker {
-  @include iui-dropdown;
-  box-shadow: $iui-elevation-2;
+  @include iui-surface;
   user-select: none;
-  text-align: center;
-  height: $iui-baseline * 26;
-  display: inline-flex;
-  @include themed {
-    background-color: t(iui-color-background-1);
+  display: grid;
+  grid-template-columns: 1fr auto;
+
+  .iui-time-picker {
+    height: 0;
+    min-height: 100%;
   }
 }
 
@@ -24,12 +28,9 @@
   padding: 0 $iui-xs;
   box-sizing: border-box;
   font-weight: $iui-font-weight-bold;
-  @include themed {
-    background-color: t(iui-color-background-1);
-  }
+  gap: $iui-xs;
 
   > span {
-    margin: 0 $iui-xs;
     width: 156px;
     white-space: nowrap;
     display: inline-flex;
@@ -49,10 +50,8 @@
 }
 
 @mixin iui-calendar-weekdays {
-  line-height: $iui-baseline * 3;
+  line-height: $iui-date-picker-cell-height;
   display: flex;
-  justify-content: space-evenly;
-  align-items: center;
   padding: 0 $iui-s;
   font-weight: $iui-font-weight-bold;
   @include themed {
@@ -62,58 +61,220 @@
   > div {
     white-space: nowrap;
     overflow: hidden;
-    width: $iui-xl;
+    width: $iui-date-picker-cell-width;
     text-align: center;
   }
 }
 
 @mixin iui-calendar-week {
   white-space: nowrap;
-  height: $iui-baseline * 3;
+  line-height: $iui-date-picker-cell-height;
   display: flex;
-  align-items: center;
-  justify-content: space-evenly;
   padding: 0 $iui-s;
+  margin-bottom: $iui-xxs;
 }
 
-@mixin iui-calendar-day {
+//#region Helper mixins
+@mixin iui-calendar-day-base {
   @include iui-focus;
   cursor: pointer;
-  display: inline-block;
-  width: $iui-baseline * 3;
-  line-height: $iui-baseline * 3;
+  text-align: center;
+  width: $iui-date-picker-cell-width;
+  height: $iui-date-picker-cell-height;
   border-radius: $iui-border-radius;
+  font-variant-numeric: tabular-nums;
+}
 
-  &.iui-today {
+@mixin iui-calendar-day-base-hover {
+  &:hover {
     font-weight: $iui-font-weight-semibold;
-    border-radius: 50%;
     @include themed {
-      background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
+      color: t(iui-color-foreground-primary);
+      background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
+    }
+  }
+}
+
+@mixin iui-calendar-day-today-base {
+  position: relative;
+  font-weight: $iui-font-weight-semibold;
+
+  &::before {
+    content: '';
+    position: absolute;
+    display: block;
+    width: $iui-date-picker-today-circle-size;
+    height: $iui-date-picker-today-circle-size;
+    border-radius: $iui-border-radius-round;
+    box-sizing: border-box;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    @include themed {
+      border: 2px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-5));
     }
   }
 
   &:hover {
-    font-weight: $iui-font-weight-semibold;
+    background-color: initial;
     @include themed {
       color: t(iui-color-foreground-primary);
+    }
+  }
+
+  &:hover::before {
+    @include themed {
       background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
     }
   }
+}
 
-  &.iui-selected {
-    font-weight: $iui-font-weight-semibold;
-    border-radius: $iui-border-radius;
-    cursor: default;
+@mixin iui-calendar-day-selected-base {
+  font-weight: $iui-font-weight-semibold;
+  @include themed {
+    background-color: t(iui-color-background-primary);
+    color: t(iui-color-foreground-accessory);
+  }
+  @include iui-focus($color: var(--iui-color-foreground-accessory), $offset: -3px);
+}
+
+@mixin iui-calendar-day-selected-today-base {
+  &:hover {
     @include themed {
       background-color: t(iui-color-background-primary);
       color: t(iui-color-foreground-accessory);
     }
-    @include iui-focus($color: var(--iui-color-foreground-accessory), $offset: -3px);
+
+    &::before {
+      @include themed {
+        background-color: initial;
+      }
+    }
+  }
+
+  &::before {
+    @include themed {
+      border-color: rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-4));
+    }
+  }
+}
+//#endregion Helper mixins
+
+@mixin iui-calendar-day {
+  &,
+  &-today {
+    @include iui-calendar-day-base;
+    @include iui-calendar-day-base-hover;
+  }
+
+  &-today {
+    @include iui-calendar-day-today-base;
+  }
+}
+
+@mixin iui-calendar-day-selected {
+  &,
+  &-today {
+    @include iui-calendar-day-base;
+    @include iui-calendar-day-selected-base;
+    cursor: default;
+  }
+
+  &-today {
+    @include iui-calendar-day-today-base;
+    @include iui-calendar-day-selected-today-base;
+  }
+}
+
+@mixin iui-calendar-day-range-start {
+  &,
+  &-today {
+    @include iui-calendar-day-base;
+    @include iui-calendar-day-selected-base;
+
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    cursor: pointer;
+  }
+
+  &-today {
+    @include iui-calendar-day-today-base;
+    @include iui-calendar-day-selected-today-base;
+  }
+}
+
+@mixin iui-calendar-day-range-end {
+  &,
+  &-today {
+    @include iui-calendar-day-base;
+    @include iui-calendar-day-selected-base;
+
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  &-today {
+    @include iui-calendar-day-today-base;
+    @include iui-calendar-day-selected-today-base;
+  }
+}
+
+@mixin iui-calendar-day-range {
+  &,
+  &-today {
+    @include iui-calendar-day-base;
+
+    border-radius: 0;
+    @include themed {
+      background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-5));
+      color: t(iui-text-color);
+    }
+
+    &:hover {
+      font-weight: $iui-font-weight-semibold;
+
+      @include themed {
+        background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-4));
+      }
+    }
   }
 
-  &.iui-outside-month {
+  &-today {
+    @include iui-calendar-day-today-base;
+
+    &:hover {
+      @include themed {
+        background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-5));
+        color: t(iui-text-color);
+      }
+
+      &::before {
+        @include themed {
+          background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-4));
+        }
+      }
+    }
+
+    &::before {
+      @include themed {
+        border-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-4));
+      }
+    }
+  }
+}
+
+@mixin iui-calendar-day-outside-month {
+  &,
+  &-today {
+    @include iui-calendar-day-base;
+    @include iui-calendar-day-base-hover;
+
     @include themed {
       color: t(iui-text-color-muted);
     }
   }
+
+  &-today {
+    @include iui-calendar-day-today-base;
+  }
 }

package/scss/fieldset/fieldset.scss

@@ -8,7 +8,7 @@
   padding: $iui-baseline $iui-sm;
   border-radius: $iui-border-radius;
   @include themed {
-    border: 1px solid t(iui-color-background-4);
+    border: 1px solid t(iui-color-background-border);
     background-color: t(iui-color-background-1);
   }
 

package/scss/header/header.scss

@@ -21,7 +21,7 @@
   }
   @include themed {
     background-color: t(iui-color-background-1);
-    border-bottom: $iui-xxs solid t(iui-color-background-5);
+    border-bottom: $iui-xxs solid t(iui-color-background-border);
     color: t(iui-text-color);
   }
 
@@ -83,7 +83,7 @@
     width: 1px;
     height: $iui-baseline * 2;
     @include themed {
-      background-color: t(iui-color-background-4);
+      background-color: t(iui-color-background-border);
     }
   }
 
@@ -252,15 +252,16 @@
       overflow: hidden;
       text-overflow: ellipsis;
     }
+  }
 
-    .iui-description {
-      height: $iui-baseline * 2;
-      @media (prefers-reduced-motion: no-preference) {
-        transition: all $iui-speed-fast ease;
-      }
-      @include themed {
-        opacity: t(iui-opacity-3);
-      }
+  .iui-description {
+    height: $iui-baseline * 2;
+    font-size: $iui-font-size-small;
+    @media (prefers-reduced-motion: no-preference) {
+      transition: all $iui-speed-fast ease;
+    }
+    @include themed {
+      opacity: t(iui-opacity-3);
     }
   }
 
@@ -378,6 +379,10 @@
     }
   }
 
+  .iui-description {
+    opacity: 1;
+  }
+
   &,
   &:hover {
     // Blue background and darker blue bottom line

package/scss/index.scss

@@ -40,3 +40,4 @@
 @import './user-icon/index';
 @import './wizard/index';
 @import './skip-to-content/index';
+@import './surface/index';

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/inputs/checkbox.scss

@@ -24,6 +24,7 @@
   position: relative;
   border-radius: $iui-border-radius;
   background-color: var(--_iui-checkbox-background-color);
+  flex-shrink: 0;
   cursor: pointer;
 
   &::before {

package/scss/inputs/labeled-inputs.scss

@@ -55,6 +55,10 @@
     // stylelint-enable
   }
 
+  .iui-input-group .iui-toggle-switch-wrapper {
+    padding: round($iui-baseline * 0.5) 0;
+  }
+
   // #region Cursors
   @include iui-input-label-cursor;
 
@@ -124,9 +128,9 @@
       display: flex;
       gap: $iui-m;
 
-      > .iui-checkbox,
-      > .iui-radio,
-      > .iui-toggle-switch {
+      > .iui-checkbox-wrapper,
+      > .iui-radio-wrapper,
+      > .iui-toggle-switch-wrapper {
         margin-right: $iui-m;
 
         @supports (gap: $iui-m) {
@@ -300,11 +304,7 @@
 /// @arg iconSelector - selector to apply status fill on. Defaults to .iui-input-icon
 /// @arg textSelector - selector to apply text color on. Defaults to .iui-message
 @mixin iui-input-status($status, $iconSelector: '.iui-input-icon', $textSelector: '.iui-message') {
-  *::selection {
-    @include themed {
-      background-color: rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-4));
-    }
-  }
+  @include iui-text-selection($status);
 
   #{$iconSelector} {
     @include themed {

package/scss/inputs/radio.scss

@@ -3,10 +3,6 @@
 @import '../style/index';
 
 @mixin iui-radio {
-  &-wrapper {
-    @include iui-inputs-checkbox-radio;
-  }
-
   @include iui-checkbox;
 
   border-radius: 50%;

package/scss/location-marker/data-rich.scss

@@ -12,7 +12,7 @@
     border-radius: $iui-border-radius;
     text-align: center;
     font-size: $iui-font-size-leading;
-    padding: round($iui-baseline/4) $iui-s;
+    padding: round($iui-baseline * 0.25) $iui-s;
     filter: drop-shadow($iui-elevation-2);
     box-sizing: border-box;
     position: relative;

package/scss/location-marker/me.scss

@@ -20,11 +20,11 @@
   }
 
   > .iui-location-marker-me-dot {
-    width: $iui-icons-large/2;
-    height: $iui-icons-large/2;
+    width: $iui-icons-large * 0.5;
+    height: $iui-icons-large * 0.5;
     position: absolute;
-    top: $iui-icons-large/4;
-    left: $iui-icons-large/4;
+    top: $iui-icons-large * 0.25;
+    left: $iui-icons-large * 0.25;
     border-radius: 50%;
     box-sizing: border-box;
 

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,8 @@
 
 .iui-modal {
   @include iui-modal;
+
+  &-full-page {
+    @include iui-modal-full-page;
+  }
 }

package/scss/modal/modal.scss

@@ -11,15 +11,37 @@
   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
+
+  // #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%;
@@ -27,10 +49,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 +91,62 @@
         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 {
-    visibility: 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
+
+  // #region Full Page Modal Animations for React
+  &.iui-modal-animation-enter > .iui-modal-dialog {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+
+  &.iui-modal-animation-enter-active > .iui-modal-dialog {
+    transform: translateY(0);
     opacity: 1;
-    transition-delay: 0s;
   }
+  // #endregion Full Page Modal Animations for React
 }