@itwin/itwinui-css 0.55.0 → 0.58.0

package/scss/button/button.scss

@@ -11,6 +11,7 @@ $iui-button-padding-large: $iui-xs * 6;
 
 @mixin iui-button {
   --_iui-button-active-stripe-inset: initial;
+  --_iui-button-text-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
 
   @include iui-reset;
   font-family: inherit;
@@ -38,12 +39,12 @@ $iui-button-padding-large: $iui-xs * 6;
   @include themed {
     color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
   }
+  color: var(--_iui-button-text-color);
 
   &:hover {
+    --_iui-button-text-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
+
     text-decoration: none;
-    @include themed {
-      color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
-    }
   }
 
   @include iui-focus;
@@ -52,21 +53,21 @@ $iui-button-padding-large: $iui-xs * 6;
   &:disabled {
     @include iui-button-disabled;
   }
+}
 
-  &.iui-active {
-    // Shows active stripe only if --_iui-button-active-stripe-inset is set (from outside)
-    &::after {
-      content: '';
-      position: absolute;
-      inset: var(--_iui-button-active-stripe-inset);
-      background-color: var(--iui-color-foreground-primary);
-    }
+@mixin iui-button-active {
+  // Shows active stripe only if --_iui-button-active-stripe-inset is set (from outside)
+  &::after {
+    content: '';
+    position: absolute;
+    inset: var(--_iui-button-active-stripe-inset);
+    background-color: var(--iui-color-foreground-primary);
+  }
 
-    &[disabled],
-    &:disabled {
-      &::after {
-        background-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
-      }
+  &[disabled],
+  &:disabled {
+    &::after {
+      background-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
     }
   }
 }

package/scss/button/classes.scss

@@ -6,6 +6,10 @@
   @include iui-button;
   @include iui-button-size;
 
+  &.iui-active {
+    @include iui-button-active;
+  }
+
   &.iui-default {
     @include iui-button-default;
   }

package/scss/button/cta.scss

@@ -6,11 +6,14 @@
 @import './disabled';
 
 @mixin iui-button-cta {
+  --_iui-button-text-color: var(--iui-color-foreground-accessory);
+
   @include themed {
     background-color: t(iui-color-background-positive);
     border-color: t(iui-color-background-positive);
     color: t(iui-color-foreground-accessory);
   }
+  color: var(--_iui-button-text-color);
   @include iui-focus($color: var(--iui-color-foreground-accessory), $offset: -3px, $thickness: 1px);
 
   &:hover,
@@ -18,7 +21,6 @@
     @include themed {
       background-color: t(iui-color-background-positive-overlay);
       border-color: t(iui-color-background-positive-overlay);
-      color: t(iui-color-foreground-accessory);
     }
   }
 

package/scss/button/default.scss

@@ -10,7 +10,6 @@
   @include themed {
     background-color: t(iui-color-background-1);
     border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
-    color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
   }
   @include iui-focus($offset: -2px, $thickness: 2px);
 
@@ -19,7 +18,6 @@
     @include themed {
       background-color: t(iui-color-background-1-overlay);
       border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
-      color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
     }
     @include iui-notification-marker-hover;
   }

package/scss/button/high-visibility.scss

@@ -6,11 +6,14 @@
 @import './button-icon';
 
 @mixin iui-button-high-visibility {
+  --_iui-button-text-color: var(--iui-color-foreground-accessory);
+
   @include themed {
     background-color: t(iui-color-background-primary);
     border-color: t(iui-color-background-primary);
     color: t(iui-color-foreground-accessory);
   }
+  color: var(--_iui-button-text-color);
   @include iui-focus($color: var(--iui-color-foreground-accessory), $offset: -3px, $thickness: 1px);
 
   &:hover,
@@ -18,7 +21,6 @@
     @include themed {
       background-color: t(iui-color-background-primary-overlay);
       border-color: t(iui-color-background-primary-overlay);
-      color: t(iui-color-foreground-accessory);
     }
   }
 

package/scss/classes.scss

@@ -12,6 +12,7 @@
 @import './code/classes';
 @import './color-picker/classes';
 @import './date-picker/classes';
+@import './dialog/classes';
 @import './expandable-block/classes';
 @import './fieldset/classes';
 @import './file-upload/classes';
@@ -23,13 +24,15 @@
 @import './keyboard/classes';
 @import './location-marker/classes';
 @import './menu/classes';
-@import './modal/classes';
 @import './non-ideal-state/classes';
 @import './notification-marker/classes';
 @import './popover/classes';
 @import './progress-indicator/classes';
+@import './radio-tile/classes';
 @import './side-navigation/classes';
+@import './skip-to-content/classes';
 @import './slider/classes';
+@import './surface/classes';
 @import './table/classes';
 @import './tabs/classes';
 @import './tag/classes';
@@ -42,5 +45,3 @@
 @import './tree/classes';
 @import './user-icon/classes';
 @import './wizard/classes';
-@import './skip-to-content/classes';
-@import './surface/classes';

package/scss/dialog/classes.scss

@@ -0,0 +1,47 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// 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 {
+  @include iui-dialog;
+}
+
+.iui-dialog-default {
+  @include iui-dialog-default;
+}
+
+.iui-dialog-full-page {
+  @include iui-dialog-full-page;
+}
+
+.iui-dialog-draggable {
+  @include iui-dialog-draggable;
+}
+
+.iui-dialog-title {
+  @include iui-dialog-title;
+}
+
+.iui-dialog-title-bar {
+  @include iui-dialog-title-bar;
+}
+
+.iui-dialog-content {
+  @include iui-dialog-content;
+}
+
+.iui-dialog-button-bar {
+  @include iui-dialog-button-bar;
+}
+
+.iui-dialog-animation {
+  @include iui-dialog-animation;
+}

package/scss/dialog/dialog.scss

@@ -0,0 +1,213 @@
+// 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';
+
+@mixin iui-dialog-backdrop {
+  @include iui-reset;
+  z-index: 999;
+  isolation: isolate;
+  position: fixed;
+  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;
+}
+
+@mixin iui-dialog {
+  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;
+  padding: $iui-baseline $iui-m;
+  overflow: hidden;
+  @include themed {
+    background-color: t(iui-color-background-1);
+  }
+  @media (forced-colors: active) {
+    border: 1px solid;
+  }
+}
+
+@mixin iui-dialog-default {
+  .iui-dialog {
+    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;
+  }
+
+  .iui-dialog {
+    border-radius: 0;
+    height: 100vh;
+    width: 100vw;
+    top: 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;
+    }
+  }
+
+  &.iui-dialog-visible .iui-dialog {
+    transform: translateY(0);
+    @media (prefers-reduced-motion: no-preference) {
+      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);
+    }
+  }
+}
+
+@mixin iui-dialog-animation {
+  // Full Page Dialog Animations for React
+  &-enter .iui-dialog-full-page .iui-dialog {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+
+  &-enter-active .iui-dialog-full-page .iui-dialog {
+    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 {
+  font-size: inherit;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.5;
+}
+
+@mixin iui-dialog-title-bar {
+  display: flex;
+  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);
+    }
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+}
+
+@mixin iui-dialog-content {
+  flex-grow: 2;
+  margin: 0 -#{$iui-m};
+  padding: 0 $iui-m;
+  overflow-y: auto;
+  overflow-y: overlay;
+
+  @at-root .iui-dialog-draggable & {
+    margin: 0;
+  }
+}
+
+@mixin iui-dialog-button-bar {
+  margin-top: $iui-baseline;
+  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
+}

package/scss/{modal → dialog}/index.scss

@@ -1,3 +1,3 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
-@import './modal';
+@import './dialog';

package/scss/index.scss

@@ -11,6 +11,7 @@
 @import './code/index';
 @import './color-picker/index';
 @import './date-picker/index';
+@import './dialog/index';
 @import './expandable-block/index';
 @import './file-upload/index';
 @import './footer/index';
@@ -21,13 +22,15 @@
 @import './keyboard/index';
 @import './location-marker/index';
 @import './menu/index';
-@import './modal/index';
 @import './non-ideal-state/index';
 @import './notification-marker/index';
 @import './popover/index';
 @import './progress-indicator/index';
+@import './radio-tile/index';
 @import './side-navigation/index';
+@import './skip-to-content/index';
 @import './slider/index';
+@import './surface/index';
 @import './table/index';
 @import './tabs/index';
 @import './tag/index';
@@ -40,5 +43,3 @@
 @import './tree/index';
 @import './user-icon/index';
 @import './wizard/index';
-@import './skip-to-content/index';
-@import './surface/index';

package/scss/inputs/checkbox.scss

@@ -66,6 +66,13 @@
 
   @include iui-focus($thickness: 2px);
 
+  &:disabled {
+    --_iui-checkbox-svg-color: var(--iui-icons-color-actionable-disabled);
+    --_iui-checkbox-border-color: var(--iui-color-background-border);
+    --_iui-checkbox-background-color: var(--iui-color-background-disabled);
+    cursor: not-allowed;
+  }
+
   &.iui-checkbox-visibility {
     --_iui-checkbox-checkmark-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 2.99051a8.81883 8.81883 0 0 0 -8 4.95062 8.74664 8.74664 0 0 0 8 5.06836 8.63266 8.63266 0 0 0 8-5.06836 8.83631 8.83631 0 0 0 -8-4.95062zm-1.31445 1.86981a1.47663 1.47663 0 1 1 -1.47663 1.47668 1.47665 1.47665 0 0 1 1.47663-1.47668zm1.31445 6.64917a7.17486 7.17486 0 0 1 -6.30475-3.55237 7.4952 7.4952 0 0 1 2.81475-2.6336 3.83956 3.83956 0 1 0 6.98126.00244 7.522 7.522 0 0 1 2.81774 2.63916 7.09785 7.09785 0 0 1 -6.309 3.54437z" /></svg>');
     --_iui-checkbox-indeterminate-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 3v7.9a4.01179 4.01179 0 0 0 4-4 6.7509 6.7509 0 0 0 -.2-1.4l.1.1a6.89429 6.89429 0 0 1 2.4 2.4 8.39088 8.39088 0 0 1 -2.3 2.3 6.89412 6.89412 0 0 1 -3.9 1.2c-.03345 0-.06653-.00677-.1-.0072v1.5072a8.90686 8.90686 0 0 0 8-5 8.90686 8.90686 0 0 0 -8-5z" opacity=".33" /><path d="m8 0a1 1 0 0 0 -1 1v2.07135a8.91637 8.91637 0 0 0 -7 4.92865 8.91637 8.91637 0 0 0 7 4.92865v2.07135a1 1 0 0 0 2 0v-14a1 1 0 0 0 -1-1zm-1.5 4.9a1.55426 1.55426 0 0 1 .5.087v2.81451a1.40746 1.40746 0 0 1 -.5.09849 1.538 1.538 0 0 1 -1.5-1.5 1.53794 1.53794 0 0 1 1.5-1.5zm-2.3 5.4a6.97279 6.97279 0 0 1 -2.5-2.3 6.89429 6.89429 0 0 1 2.4-2.4c.1 0 .1-.1.2-.1a3.194 3.194 0 0 0 -.3 1.4 4.0047 4.0047 0 0 0 3 3.857v.65289a6.37491 6.37491 0 0 1 -2.8-1.10989z" /></svg>');
@@ -82,13 +89,11 @@
       --_iui-checkbox-border-color: transparent;
       --_iui-checkbox-background-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
     }
-  }
 
-  &:disabled {
-    --_iui-checkbox-svg-color: var(--iui-icons-color-actionable-disabled);
-    --_iui-checkbox-border-color: var(--iui-color-background-disabled);
-    --_iui-checkbox-background-color: var(--iui-color-background-disabled);
-    cursor: not-allowed;
+    &:where(:disabled) {
+      --_iui-checkbox-svg-color: var(--iui-icons-color-actionable-disabled);
+      --_iui-checkbox-background-color: var(--iui-color-background-disabled);
+    }
   }
 
   &.iui-loading {

package/scss/inputs/classes.scss

@@ -65,7 +65,3 @@
 .iui-radio {
   @include iui-radio;
 }
-
-.iui-radio-tile-container {
-  @include iui-radio-tile;
-}

package/scss/inputs/index.scss

@@ -8,4 +8,3 @@
 @import './checkbox-radio';
 @import './checkbox';
 @import './radio';
-@import './radio-tile';

package/scss/inputs/labeled-inputs.scss

@@ -278,7 +278,7 @@
 
     svg {
       @include themed {
-        fill: t(iui-icons-color);
+        fill: t(iui-icons-color-actionable);
       }
       transition: transform $iui-speed-fast ease-out;
     }

package/scss/radio-tile/classes.scss

@@ -0,0 +1,31 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@import './index';
+
+.iui-radio-tile {
+  @include iui-radio-tile;
+}
+
+.iui-radio-tile-content {
+  @include iui-radio-tile-content;
+}
+
+.iui-radio-tile-container {
+  @include iui-radio-tile-container;
+}
+
+.iui-radio-tile-input {
+  @include iui-radio-tile-input;
+}
+
+.iui-radio-tile-icon {
+  @include iui-radio-tile-icon;
+}
+
+.iui-radio-tile-label {
+  @include iui-radio-tile-label;
+}
+
+.iui-radio-tile-sublabel {
+  @include iui-radio-tile-sublabel;
+}

package/scss/radio-tile/index.scss

@@ -0,0 +1,3 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@import './radio-tile';