@itwin/itwinui-css 0.59.2 → 1.0.0-dev.0

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

@@ -1,7 +1,7 @@
 // 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';
-@import '../icon/index';
+@import '../utils/index';
 @import '../surface/index';
 
 $iui-date-picker-cell-width: 40px;
@@ -26,7 +26,6 @@ $iui-date-picker-today-circle-size: 32px;
   align-items: center;
   justify-content: space-between;
   padding: 0 $iui-xs;
-  box-sizing: border-box;
   font-weight: $iui-font-weight-bold;
   gap: $iui-xs;
 
@@ -54,9 +53,7 @@ $iui-date-picker-today-circle-size: 32px;
   display: flex;
   padding: 0 $iui-s;
   font-weight: $iui-font-weight-bold;
-  @include themed {
-    background-color: t(iui-color-background-2);
-  }
+  background-color: var(--iui-color-background-2);
 
   > div {
     white-space: nowrap;
@@ -88,10 +85,8 @@ $iui-date-picker-today-circle-size: 32px;
 @mixin iui-calendar-day-base-hover {
   &:hover {
     font-weight: $iui-font-weight-semibold;
-    @include themed {
-      color: t(iui-color-foreground-primary);
-      background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
-    }
+    color: var(--iui-color-foreground-primary);
+    background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
   }
 }
 
@@ -106,56 +101,41 @@ $iui-date-picker-today-circle-size: 32px;
     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));
-    }
+    border: 2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
   }
 
   &:hover {
     background-color: initial;
-    @include themed {
-      color: t(iui-color-foreground-primary);
-    }
+    color: var(--iui-color-foreground-primary);
   }
 
   &:hover::before {
-    @include themed {
-      background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
-    }
+    background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
   }
 }
 
 @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);
-  }
+  background-color: var(--iui-color-background-primary);
+  color: var(--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);
-    }
+    background-color: var(--iui-color-background-primary);
+    color: var(--iui-color-foreground-accessory);
 
     &::before {
-      @include themed {
-        background-color: initial;
-      }
+      background-color: initial;
     }
   }
 
   &::before {
-    @include themed {
-      border-color: rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-4));
-    }
+    border-color: rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
   }
 }
 //#endregion Helper mixins
@@ -225,17 +205,12 @@ $iui-date-picker-today-circle-size: 32px;
     @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);
-    }
+    background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
+    color: var(--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));
-      }
+      background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
     }
   }
 
@@ -243,22 +218,16 @@ $iui-date-picker-today-circle-size: 32px;
     @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);
-      }
+      background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
+      color: var(--iui-text-color);
 
       &::before {
-        @include themed {
-          background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-4));
-        }
+        background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
       }
     }
 
     &::before {
-      @include themed {
-        border-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-4));
-      }
+      border-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
     }
   }
 }
@@ -268,10 +237,7 @@ $iui-date-picker-today-circle-size: 32px;
   &-today {
     @include iui-calendar-day-base;
     @include iui-calendar-day-base-hover;
-
-    @include themed {
-      color: t(iui-text-color-muted);
-    }
+    color: var(--iui-text-color-muted);
   }
 
   &-today {

package/scss/dialog/classes.scss

@@ -2,12 +2,8 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import './index';
 
-.iui-dialog-backdrop {
-  @include iui-dialog-backdrop;
-
-  &.iui-dialog-backdrop-relative {
-    @include iui-dialog-backdrop-relative;
-  }
+.iui-dialog-wrapper {
+  @include iui-dialog-wrapper;
 }
 
 .iui-dialog {
@@ -16,6 +12,7 @@
 
 .iui-dialog-default {
   @include iui-dialog-default;
+  @include iui-dialog-placement;
 }
 
 .iui-dialog-full-page {
@@ -34,6 +31,10 @@
   @include iui-dialog-title-bar;
 }
 
+.iui-dialog-title-bar-filled {
+  @include iui-dialog-title-bar-filled;
+}
+
 .iui-dialog-content {
   @include iui-dialog-content;
 }

package/scss/dialog/dialog.scss

@@ -1,146 +1,135 @@
 // 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';
-@import '../icon/index';
+@import '../utils/index';
 
-@mixin iui-dialog-backdrop {
-  @include iui-reset;
-  z-index: 999;
-  isolation: isolate;
-  position: fixed;
+$iui-dialog-width: 380px;
+
+@mixin iui-dialog-wrapper {
+  position: relative;
+  overflow: hidden;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  @include themed {
-    background-color: rgba(0, 0, 0, t(iui-opacity-4));
-  }
-
-  // Small/Resizable Dialog Animations for CSS
-  visibility: hidden;
-  opacity: 0;
-  transition: visibility $iui-speed-instant linear $iui-speed-fast, opacity $iui-speed-fast ease-out;
-
-  &.iui-dialog-visible {
-    visibility: visible;
-    opacity: 1;
-    // remove delay for entry animation so dialog is instantly visible
-    transition-delay: $iui-speed-instant;
-  }
-}
-
-@mixin iui-dialog-backdrop-relative {
-  position: relative;
-  overflow: hidden;
+  pointer-events: none;
+  transform: translateX(0); // creates containing block for position: fixed
 }
 
 @mixin iui-dialog {
+  z-index: 999;
+  isolation: isolate;
   border-radius: $iui-border-radius;
   box-shadow: $iui-elevation-24;
-  box-sizing: border-box;
-  position: absolute;
-  padding: $iui-baseline $iui-m;
-  box-sizing: border-box;
+  position: fixed;
   padding: $iui-baseline $iui-m;
   overflow: hidden;
-  @include themed {
-    background-color: t(iui-color-background-1);
-  }
+  pointer-events: auto;
+  background-color: var(--iui-color-background-1);
   @media (forced-colors: active) {
     border: 1px solid;
   }
+
+  &:not(.iui-dialog-visible) {
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  transition: visibility $iui-speed-instant linear, opacity $iui-speed-fast ease-out;
+  transition-delay: $iui-speed-fast, $iui-speed-instant;
+
+  &.iui-dialog-visible {
+    transition-delay: $iui-speed-instant; // remove delay for entry animation
+  }
 }
 
 @mixin iui-dialog-default {
-  .iui-dialog {
+  max-width: Max(50%, $iui-dialog-width);
+  min-width: $iui-dialog-width;
+  max-height: 100vh;
+}
+
+@mixin iui-dialog-placement {
+  &:not([data-iui-placement]) {
     left: 50%;
     top: 33%;
     transform: translate(-50%, -33%);
-    max-width: 50%;
-    min-width: 380px;
-    max-height: 100vh;
-
-    @media screen and (max-width: 400px) {
-      max-width: 95%;
-      width: 95%;
-      min-width: 95%;
-    }
   }
-}
 
-@mixin iui-dialog-full-page {
-  @media (prefers-reduced-motion: no-preference) {
-    transition: visibility $iui-speed-instant linear $iui-speed-slow, opacity $iui-speed ease-out $iui-speed-fast;
+  &[data-iui-placement='top-left'] {
+    top: 0;
+    left: 0;
+    margin-left: $iui-baseline;
+    margin-top: $iui-m;
   }
 
-  .iui-dialog {
-    border-radius: 0;
-    height: 100vh;
-    width: 100vw;
+  &[data-iui-placement='top-right'] {
     top: 0;
+    right: 0;
+    margin-right: $iui-baseline;
+    margin-top: $iui-m;
+  }
+
+  &[data-iui-placement='bottom-left'] {
+    bottom: 0;
     left: 0;
-    max-width: initial;
-    min-width: initial;
-    display: flex;
-    flex-direction: column;
-    will-change: transform;
-    @media (prefers-reduced-motion: no-preference) {
-      transform: translateY(100%);
-      transition: visibility $iui-speed-instant linear $iui-speed, opacity $iui-speed-instant linear $iui-speed,
-        transform $iui-speed-fast ease-in;
-    }
+    margin-left: $iui-baseline;
+    margin-bottom: $iui-m;
   }
 
-  &.iui-dialog-visible .iui-dialog {
-    transform: translateY(0);
-    @media (prefers-reduced-motion: no-preference) {
+  &[data-iui-placement='bottom-right'] {
+    bottom: 0;
+    right: 0;
+    margin-right: $iui-baseline;
+    margin-bottom: $iui-m;
+  }
+}
+
+@mixin iui-dialog-full-page {
+  border-radius: 0;
+  height: 100vh;
+  height: 100dvh;
+  width: 100vw;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  will-change: transform;
+
+  &:not(.iui-dialog-visible) {
+    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-fast ease-in;
+
+    &.iui-dialog-visible {
       transition: transform $iui-speed ease-out;
     }
   }
 }
 
 @mixin iui-dialog-draggable {
-  background-color: transparent;
-  pointer-events: none;
-  z-index: 998;
-
-  .iui-dialog {
-    pointer-events: initial;
-    max-width: 100vw;
-    max-height: 100vh;
-    min-width: 380px;
-    min-height: 144px;
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-    @include themed {
-      border: 1px solid t(iui-color-background-border);
-    }
-  }
+  max-width: 100%;
+  max-height: 100vh;
+  min-width: $iui-dialog-width;
+  min-height: 144px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--iui-color-background-border);
 }
 
 @mixin iui-dialog-animation {
-  // Full Page Dialog Animations for React
-  &-enter .iui-dialog-full-page .iui-dialog {
+  &-enter {
     transform: translateY(100%);
     opacity: 0;
   }
 
-  &-enter-active .iui-dialog-full-page .iui-dialog {
+  &-enter-active {
     transform: translateY(0);
     opacity: 1;
   }
-
-  // Small Dialog Animations for React
-  &-enter .iui-dialog-backdrop {
-    visibility: hidden;
-    opacity: 0;
-  }
-
-  &-enter-active .iui-dialog-backdrop {
-    visibility: visible;
-    opacity: 1;
-  }
 }
 
 @mixin iui-dialog-title {
@@ -156,22 +145,19 @@
   align-items: center;
   margin-bottom: $iui-baseline;
   justify-content: space-between;
-  box-sizing: border-box;
   font-size: $iui-font-size-subheading;
+}
 
-  @at-root .iui-dialog-draggable & {
-    user-select: none;
-    font-size: $iui-font-size-leading;
-    padding: round($iui-baseline * 0.5) $iui-m;
-    cursor: grab;
-    @include themed {
-      background-color: t(iui-color-background-3);
-      border-bottom: 1px solid t(iui-color-background-border);
-    }
+@mixin iui-dialog-title-bar-filled {
+  font-size: $iui-font-size-leading;
+  padding: round($iui-baseline * 0.5) $iui-m;
+  margin: -#{$iui-baseline} -#{$iui-m} $iui-baseline -#{$iui-m}; // negative margin to counteract dialog padding
+  cursor: grab;
+  background-color: var(--iui-color-background-3);
+  border-bottom: 1px solid var(--iui-color-background-border);
 
-    &:active {
-      cursor: grabbing;
-    }
+  &:active {
+    cursor: grabbing;
   }
 }
 
@@ -181,10 +167,6 @@
   padding: 0 $iui-m;
   overflow-y: auto;
   overflow-y: overlay;
-
-  @at-root .iui-dialog-draggable & {
-    margin: 0;
-  }
 }
 
 @mixin iui-dialog-button-bar {
@@ -192,22 +174,5 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-
-  @at-root .iui-dialog-draggable & {
-    padding: 0 $iui-m $iui-baseline $iui-m;
-  }
-
-  // #region IE support
-  > .iui-button:not(:last-child) {
-    margin-right: $iui-s;
-  }
-
-  @supports (column-gap: $iui-s) {
-    column-gap: $iui-s;
-
-    > .iui-button:not(:last-child) {
-      margin-right: 0;
-    }
-  }
-  // #endregion IE support
+  gap: $iui-s;
 }

package/scss/expandable-block/block.scss

@@ -1,18 +1,15 @@
 // 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';
-@import '../text/mixins';
+@import '../utils/index';
 @import '../icon/index';
 
 @mixin iui-expandable-block {
   @include iui-reset;
   display: flex;
   flex-direction: column;
-  box-sizing: border-box;
   width: 100%;
-  @include themed {
-    background-color: t(iui-color-background-1);
-  }
+  background-color: var(--iui-color-background-1);
 
   > .iui-header {
     @include iui-focus;
@@ -20,16 +17,13 @@
     align-items: center;
     padding: $iui-baseline $iui-sm;
     cursor: pointer;
-    box-sizing: border-box;
     user-select: none;
     @media (prefers-reduced-motion: no-preference) {
       transition: background-color $iui-speed-fast ease-out;
     }
-    @include themed {
-      border: 1px solid t(iui-color-background-3);
-      border-bottom-color: t(iui-color-background-4);
-      background-color: t(iui-color-background-3);
-    }
+    border: 1px solid var(--iui-color-background-3);
+    border-bottom-color: var(--iui-color-background-4);
+    background-color: var(--iui-color-background-3);
 
     > .iui-icon,
     > .iui-status-icon {
@@ -43,9 +37,7 @@
       @media (prefers-reduced-motion: no-preference) {
         transition: transform $iui-speed-fast ease-out;
       }
-      @include themed {
-        fill: t(iui-icons-color-actionable);
-      }
+      fill: var(--iui-icons-color-actionable);
     }
 
     > .iui-status-icon {
@@ -62,9 +54,7 @@
       @media (prefers-reduced-motion: no-preference) {
         transition: color $iui-speed-fast ease;
       }
-      @include themed {
-        color: t(iui-text-color);
-      }
+      color: var(--iui-text-color);
     }
 
     .iui-title,
@@ -80,9 +70,7 @@
 
     .iui-caption {
       font-size: $iui-font-size-small;
-      @include themed {
-        color: t(iui-text-color-muted);
-      }
+      color: var(--iui-text-color-muted);
     }
 
     @include iui-focus;
@@ -90,13 +78,9 @@
 
   .iui-expandable-content {
     overflow: hidden;
-    box-sizing: border-box;
-
-    @include themed {
-      border-bottom: 1px solid t(iui-color-background-4);
-      border-right: 1px solid t(iui-color-background-4);
-      border-left: 1px solid t(iui-color-background-4);
-    }
+    border-bottom: 1px solid var(--iui-color-background-4);
+    border-right: 1px solid var(--iui-color-background-4);
+    border-left: 1px solid var(--iui-color-background-4);
 
     @include iui-transition-group;
 
@@ -108,21 +92,15 @@
 
   &:hover {
     > .iui-header {
-      @include themed {
-        background-color: t(iui-color-background-4);
-      }
+      background-color: var(--iui-color-background-4);
 
       > .iui-icon {
-        @include themed {
-          fill: t(iui-icons-color-actionable-hover);
-        }
+        fill: var(--iui-icons-color-actionable-hover);
       }
 
       .iui-caption,
       .iui-title {
-        @include themed {
-          color: t(iui-color-foreground-body);
-        }
+        color: var(--iui-color-foreground-body);
         @media (prefers-reduced-motion: no-preference) {
           transition: color $iui-speed-fast ease;
         }
@@ -132,17 +110,13 @@
 
   &.iui-expanded {
     > .iui-header {
-      @include themed {
-        background-color: t(iui-color-background-3);
-        border-left: 1px solid t(iui-color-background-4);
-        border-top: 1px solid t(iui-color-background-4);
-        border-right: 1px solid t(iui-color-background-4);
-
-        &:hover {
-          @include themed {
-            background-color: t(iui-color-background-4);
-          }
-        }
+      background-color: var(--iui-color-background-3);
+      border-left: 1px solid var(--iui-color-background-4);
+      border-top: 1px solid var(--iui-color-background-4);
+      border-right: 1px solid var(--iui-color-background-4);
+
+      &:hover {
+        background-color: var(--iui-color-background-4);
       }
 
       > .iui-icon {
@@ -180,9 +154,7 @@
       border-radius: $iui-border-radius;
 
       &:hover {
-        @include themed {
-          background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
-        }
+        background-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
       }
     }
 

package/scss/fieldset/fieldset.scss

@@ -1,35 +1,29 @@
 // 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';
-@import '../inputs/index';
+@import '../utils/index';
 
 @mixin iui-fieldset {
   @include iui-reset;
   padding: $iui-baseline $iui-sm;
   border-radius: $iui-border-radius;
-  @include themed {
-    border: 1px solid t(iui-color-background-border);
-    background-color: t(iui-color-background-1);
-  }
+  border: 1px solid var(--iui-color-background-border);
+  background-color: var(--iui-color-background-1);
 
   legend {
     font-size: $iui-font-size-leading;
     padding: $iui-component-padding-vertical-small $iui-s;
     border-radius: $iui-border-radius;
     user-select: none;
-    @include themed {
-      background-color: t(iui-color-background-4);
-      color: t(iui-text-color);
-    }
+    background-color: var(--iui-color-background-4);
+    color: var(--iui-text-color);
   }
 
   &[disabled] {
     cursor: not-allowed;
 
     legend {
-      @include themed {
-        color: t(iui-text-color-muted);
-      }
+      color: var(--iui-text-color-muted);
     }
   }
 }