@itwin/itwinui-css 0.53.3 → 0.55.0

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/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/categories.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 '../style/index';
+@import '../anchor/index';
 @import './toast';
 
 /// category must be one of: positive, negative, primary (informational), warning
@@ -19,25 +20,7 @@
     }
   }
 
-  @if $category != primary {
-    > .iui-anchor {
-      @include themed {
-        color: t(iui-color-foreground-#{$category});
-      }
-
-      &:hover {
-        @include themed {
-          color: t(iui-color-foreground-#{$category}-overlay);
-        }
-      }
-    }
-
-    > .iui-anchor {
-      outline-color: var(--iui-color-foreground-#{$category});
-    }
-
-    > .iui-button {
-      outline-color: var(--iui-color-foreground-#{$category});
-    }
+  > .iui-toast-anchor {
+    @include iui-anchor-status($category);
   }
 }

package/scss/toast-notification/toast.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 '../style/index';
+@import '../anchor/index';
 @import '../icon/index';
 
 @mixin iui-toast {
@@ -53,16 +54,14 @@
     }
   }
 
-  > .iui-anchor {
+  &-anchor {
+    @include iui-anchor-underline('on-initial');
+    border-radius: $iui-border-radius;
+    cursor: pointer;
     font-size: $iui-font-size-small;
     margin-right: $iui-m;
     user-select: none;
-    text-decoration: underline;
     white-space: nowrap;
-
-    &:hover {
-      text-decoration: none;
-    }
   }
 
   > .iui-button {