@itwin/itwinui-css 0.54.0 → 0.56.0

package/scss/popover/popover.scss

@@ -7,8 +7,8 @@
 @mixin iui-popover {
   &.tippy-box {
     &[data-reference-hidden] {
-      visibility: visible;
-      pointer-events: auto;
+      visibility: hidden;
+      pointer-events: none;
     }
 
     // Resets tippy.js default stylings that interfere with our own

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';

package/scss/radio-tile/radio-tile.scss

@@ -0,0 +1,214 @@
+// 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-radio-tile {
+  cursor: pointer;
+  @include themed {
+    -webkit-tap-highlight-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
+  }
+
+  &:first-of-type > .iui-radio-tile-content {
+    border-radius: $iui-border-radius 0 0 $iui-border-radius;
+  }
+
+  &:last-of-type > .iui-radio-tile-content {
+    border-radius: 0 $iui-border-radius $iui-border-radius 0;
+  }
+
+  &:not(:first-of-type) > .iui-radio-tile-content {
+    margin-left: -1px;
+  }
+}
+@mixin iui-radio-tile-content {
+  width: $iui-xl * 5;
+  height: 100%;
+  box-sizing: border-box;
+  padding: $iui-s;
+  position: relative;
+  z-index: 1;
+  @media (prefers-reduced-motion: no-preference) {
+    transition: border-color $iui-speed-fast ease-out;
+  }
+  @include themed {
+    border: 1px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
+    background-color: t(iui-color-background-1);
+  }
+
+  &:hover {
+    z-index: 2;
+    @include themed {
+      border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
+    }
+
+    svg {
+      @media (forced-colors: active) {
+        fill: CanvasText;
+      }
+      @include themed {
+        fill: t(iui-icons-color-actionable);
+      }
+    }
+  }
+}
+
+@mixin iui-radio-tile-container {
+  display: inline-flex;
+  flex-wrap: wrap;
+  user-select: none;
+  // Create stacking context
+  position: relative;
+  z-index: 0;
+}
+
+@mixin iui-radio-tile-input {
+  width: 0;
+  height: 0;
+  appearance: none;
+  opacity: 0;
+  position: absolute;
+  @include focus-visible {
+    + * {
+      outline-offset: -4px;
+      @media (forced-colors: active) {
+        outline-color: Highlight;
+      }
+      @include themed {
+        outline: 2px solid t(iui-color-foreground-primary);
+      }
+    }
+  }
+
+  &:checked + * {
+    padding: $iui-s - 1;
+    z-index: 3;
+    @media (forced-colors: active) {
+      border-color: Highlight;
+    }
+    @include themed {
+      border: 2px solid t(iui-color-foreground-primary);
+    }
+
+    svg {
+      @media (forced-colors: active) {
+        fill: Highlight;
+      }
+      @include themed {
+        fill: t(iui-icons-color-primary);
+      }
+    }
+
+    &::after {
+      content: '';
+      width: $iui-icons-default;
+      height: $iui-icons-default;
+      position: absolute;
+      top: $iui-s;
+      right: $iui-s;
+      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6,14L0,8l2-2l4,4l8-8l2,2L6,14z" /></svg>');
+      @media (forced-colors: active) {
+        background-color: Highlight;
+      }
+      @include themed {
+        background-color: t(iui-color-foreground-primary);
+      }
+    }
+  }
+
+  &:disabled + * {
+    cursor: not-allowed;
+    z-index: 0;
+    @include themed {
+      border-color: t(iui-color-background-disabled);
+      background-color: t(iui-color-background-disabled);
+    }
+
+    &::after {
+      @media (forced-colors: active) {
+        background-color: GrayText;
+      }
+      @include themed {
+        background-color: t(iui-icons-color-actionable-disabled);
+      }
+    }
+
+    svg {
+      @media (forced-colors: active) {
+        fill: GrayText;
+      }
+      @include themed {
+        fill: t(iui-icons-color-actionable-disabled);
+      }
+    }
+
+    .iui-radio-tile-icon {
+      filter: $iui-icons-color-multicolor-disabled;
+    }
+
+    .iui-radio-tile-label,
+    .iui-radio-tile-sublabel {
+      @media (forced-colors: active) {
+        color: GrayText;
+      }
+    }
+
+    .iui-radio-tile-label {
+      @include themed {
+        color: t(iui-text-color-muted);
+      }
+    }
+  }
+
+  &:disabled:checked + * {
+    z-index: 3;
+    @media (forced-colors: active) {
+      border-color: GrayText;
+    }
+    @include themed {
+      border: 2px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
+    }
+  }
+}
+
+@mixin iui-radio-tile-icon {
+  width: $iui-icons-xl;
+  height: $iui-icons-xl;
+  display: block;
+  margin: 0 auto;
+  padding-top: round($iui-baseline * 0.5);
+  padding-bottom: $iui-baseline;
+
+  svg {
+    @media (prefers-reduced-motion: no-preference) {
+      transition: fill $iui-speed-fast ease-out;
+    }
+    @media (forced-colors: active) {
+      fill: CanvasText;
+    }
+    @include themed {
+      fill: t(iui-icons-color);
+    }
+  }
+}
+
+@mixin iui-radio-tile-label {
+  font-size: $iui-font-size;
+  font-weight: $iui-font-weight-semibold;
+  line-height: $iui-line-height;
+  text-align: center;
+  word-break: break-word;
+  @include themed {
+    color: t(iui-text-color);
+  }
+}
+
+@mixin iui-radio-tile-sublabel {
+  font-size: $iui-font-size-small;
+  line-height: round($iui-baseline * 1.375);
+  text-align: center;
+  word-break: break-word;
+  @include themed {
+    color: t(iui-text-color-muted);
+  }
+}

package/scss/style/anchor.scss

@@ -0,0 +1,79 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@import './index';
+
+@mixin iui-anchor {
+  --_iui-anchor-external-svg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m16 0v5.4l-1.9-2-8.4 8.4-1.5-1.5 8.3-8.4-1.9-1.9m5.4 16v-9h-1v8h-14v-14h8v-1h-9v16z' /></svg>");
+
+  @include iui-anchor-status('primary');
+  border-radius: $iui-border-radius;
+  cursor: pointer;
+
+  &-external::after {
+    content: '';
+    display: inline-block;
+    width: 1.5ch;
+    height: 1.5ch;
+    margin-left: 0.5ch;
+    vertical-align: -0.1ch;
+    background-color: currentColor;
+    mask: var(--_iui-anchor-external-svg);
+    @media (forced-colors: active) {
+      background-color: LinkText;
+    }
+  }
+
+  @include iui-anchor-underline('on-hover');
+
+  @media (prefers-contrast: more) {
+    @include iui-anchor-underline('on-initial');
+  }
+
+  @at-root {
+    .iui-theme-light &,
+    .iui-theme-dark & {
+      @include iui-anchor-underline('on-hover');
+    }
+  }
+
+  @at-root {
+    .iui-theme-light-hc &,
+    .iui-theme-dark-hc & {
+      @include iui-anchor-underline('on-initial');
+    }
+  }
+}
+
+@mixin iui-anchor-status($status: primary) {
+  @include iui-focus($color: var(--iui-color-foreground-#{$status}), $offset: 1px);
+  @include themed {
+    color: t(iui-color-foreground-#{$status});
+    -webkit-tap-highlight-color: rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-5));
+  }
+  @if $status != primary {
+    @include iui-text-selection($status);
+  }
+
+  &:hover {
+    @include themed {
+      color: t(iui-color-foreground-#{$status}-overlay);
+    }
+  }
+}
+
+/// $behavior should be one of: 'on-hover' or 'on-initial'
+@mixin iui-anchor-underline($behavior: 'on-hover') {
+  @if $behavior == 'on-hover' {
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  } @else {
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}

package/scss/style/global.scss

@@ -1,6 +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 './index';
+@import './anchor';
 
 html {
   @include theme-variables(light);
@@ -51,6 +52,14 @@ html {
   }
 }
 
+.iui-anchor {
+  @include iui-anchor;
+}
+
+.iui-visually-hidden {
+  @include visually-hidden;
+}
+
 [class*='iui-'],
 [class*='iui-'] * {
   // Text highlight

package/scss/tabs/tabs.scss

@@ -34,6 +34,12 @@
           fill: t(iui-icons-color-primary);
         }
       }
+
+      .iui-tab-description {
+        @include themed {
+          opacity: t(iui-opacity-1);
+        }
+      }
     }
 
     &[disabled] {

package/scss/tag/classes.scss

@@ -7,8 +7,21 @@
   @include iui-tag;
 }
 
-a.iui-tag {
+.iui-tag-basic {
+  @include iui-tag-basic;
+}
+
+.iui-tag-label {
+  @include iui-tag-label;
+}
+
+.iui-tag-button {
+  @include iui-tag-button;
+}
+
+a.iui-tag-basic {
   @include iui-anchor;
+  @include iui-focus($offset: 1px);
 }
 
 .iui-tag-container {

package/scss/tag/tag.scss

@@ -1,67 +1,66 @@
 // 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 '../text/mixins';
+@import '../button/index';
 
-@mixin iui-tag {
+@mixin iui-tag-base {
   @include iui-reset;
-  @include iui-focus($offset: -2px, $thickness: 2px);
   user-select: all;
   text-transform: lowercase;
   display: inline-flex;
+}
+
+@mixin iui-tag-basic {
+  @include iui-tag-base;
 
   &:not(a) {
     @include themed {
       color: t(iui-text-color-muted);
     }
   }
+}
 
-  &:not(.iui-basic) {
-    height: $iui-baseline * 3;
-    margin: $iui-component-offset 0;
-    border-radius: ($iui-baseline * 3) * 0.5;
-    box-sizing: border-box;
-    padding: 0 $iui-xxs;
-    align-items: center;
-    @media (prefers-reduced-motion: no-preference) {
-      transition: border $iui-speed-fast ease-out;
-    }
-    font-size: $iui-font-size;
-    text-transform: none;
-    cursor: default;
-    @include themed {
-      border: 1px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
-      background-color: t(iui-color-background-1);
-      color: t(iui-text-color);
-    }
-
-    > .iui-label {
-      @include iui-text;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      margin: 0 $iui-xs 0 $iui-s;
+@mixin iui-tag {
+  @include iui-tag-base;
+  height: $iui-baseline * 3;
+  margin: $iui-component-offset 0;
+  border-radius: $iui-border-radius-round;
+  box-sizing: border-box;
+  padding: 0 $iui-xxs;
+  align-items: center;
+  transition: border-color $iui-speed-fast ease-out;
+  font-size: $iui-font-size;
+  text-transform: none;
+  cursor: default;
+  -webkit-tap-highlight-color: transparent;
+  @include themed {
+    border: 1px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
+    background-color: t(iui-color-background-1);
+    color: t(iui-text-color);
+  }
 
-      &:only-child {
-        margin: 0 $iui-s;
-      }
+  &:hover {
+    @include themed {
+      border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
     }
+  }
+}
 
-    > .iui-button {
-      border-radius: 50%;
-    }
+@mixin iui-tag-label {
+  @include iui-text;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  margin: 0 $iui-xs 0 $iui-s;
 
-    &:hover {
-      @include themed {
-        border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
-      }
-    }
+  &:only-child {
+    margin: 0 $iui-s;
   }
+}
 
-  &.iui-basic {
-    outline-offset: 1px;
-  }
+@mixin iui-tag-button {
+  border-radius: 50%;
 }
 
 @mixin iui-tag-container {
@@ -69,15 +68,15 @@
     color: t(iui-text-color-muted);
   }
 
-  > a.iui-basic {
+  > a.iui-tag-basic {
     margin: $iui-xxs;
   }
 
-  > .iui-tag:not(:last-child) {
+  > *:not(last-child) {
     margin-right: $iui-xs;
   }
 
-  > .iui-basic:not(:last-child)::after {
+  > .iui-tag-basic:not(:last-child)::after {
     content: ',';
   }
 
@@ -94,7 +93,7 @@
     border-radius: $iui-border-radius;
     padding: $iui-component-offset $iui-sm;
     @include themed {
-      background-color: t(iui-color-background-2);
+      background-color: t(iui-color-background-3);
     }
   }
 }

package/scss/text/skeleton.scss

@@ -7,17 +7,23 @@
   user-select: none;
   color: transparent;
   border-radius: $iui-border-radius;
+  cursor: progress;
 
   @include themed {
     background: linear-gradient(
-      270deg,
-      t(iui-color-background-3),
-      t(iui-color-background-3),
-      t(iui-color-background-2),
-      t(iui-color-background-3),
-      t(iui-color-background-3)
+      292deg,
+      t(iui-text-color-muted),
+      t(iui-text-color-muted),
+      t(iui-text-color-placeholder),
+      t(iui-text-color-muted),
+      t(iui-text-color-muted)
     );
-    background-size: 200% 100%;
+  }
+  background-size: 200% 100%;
+
+  @media (forced-colors: active) {
+    forced-color-adjust: none;
+    background: linear-gradient(292deg, CanvasText, CanvasText, Canvas, CanvasText, CanvasText);
   }
 
   @media (prefers-reduced-motion: no-preference) {

package/scss/tile/tile.scss

@@ -1,21 +1,17 @@
 // 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 '../button/index';
+@import '../icon/index';
+@import '../surface/index';
 
 @mixin iui-tile {
   @include iui-reset;
+  @include iui-surface;
   display: inline-flex;
   flex-direction: column;
   width: $iui-3xl * 3;
-  box-shadow: $iui-elevation-2;
   backface-visibility: hidden;
-  @include iui-focus($offset: $iui-xxs, $thickness: $iui-xxs);
-  @include themed() {
-    background-color: t(iui-color-background-1);
-    color: t(iui-text-color);
-  }
 
   &:hover,
   &:focus-within {
@@ -27,10 +23,6 @@
     .iui-tile-metadata:not(:last-child) {
       width: calc(100% - #{$iui-xl});
     }
-
-    .iui-tile-thumbnail-picture {
-      transform: translateZ(0) scale(1.1);
-    }
   }
 
   &.iui-new {
@@ -50,9 +42,23 @@
       ),
         linear-gradient(t(iui-color-background-1), t(iui-color-background-1));
     }
+  }
+
+  &.iui-actionable {
+    @include iui-focus($offset: $iui-xxs, $thickness: $iui-xxs);
+    cursor: pointer;
+    transition: box-shadow $iui-speed-fast ease-in-out;
+
+    &:hover {
+      box-shadow: $iui-elevation-8;
+    }
 
-    .iui-tile-thumbnail-picture {
-      transform: translateZ(0) scale(1.1);
+    &:hover,
+    &:focus-within,
+    &.iui-selected {
+      .iui-tile-thumbnail-picture {
+        transform: translateZ(0) scale(1.1);
+      }
     }
   }
 

package/scss/toast-notification/classes.scss

@@ -17,7 +17,7 @@
   align-items: center;
   flex-direction: column;
   justify-content: center;
-  z-index: 1070;
+  z-index: 99999;
 
   @media screen and (max-width: 400px) {
     width: calc(100vw - 36px);