@itwin/itwinui-css 0.53.1 → 0.54.0

package/scss/alert/alert.scss

@@ -1,8 +1,9 @@
 // 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/index';
+@import '../anchor/index';
 @import '../icon/index';
+@import '../text/index';
 
 @mixin iui-alert {
   @include iui-reset;
@@ -27,22 +28,12 @@
   }
 
   &-link {
+    @include iui-anchor-underline('on-initial');
+    border-radius: $iui-border-radius;
     cursor: pointer;
     margin-left: $iui-s;
-    text-decoration: underline;
     user-select: none;
     white-space: nowrap;
-    @include iui-focus;
-    @include themed {
-      color: t(iui-color-foreground-primary);
-    }
-
-    &:hover {
-      text-decoration: none;
-      @include themed {
-        color: t(iui-color-foreground-primary-overlay);
-      }
-    }
   }
 
   > .iui-button {
@@ -83,18 +74,7 @@
   }
 
   #{$rootSelector}-link {
-    border-radius: $iui-border-radius;
-    @include themed {
-      color: t(iui-color-foreground-#{$statusColor});
-    }
-
-    &:hover {
-      @include themed {
-        color: t(iui-color-foreground-#{$statusColor}-overlay);
-      }
-    }
-
-    @include iui-focus($color: var(--iui-color-foreground-#{$statusColor}), $offset: 2px);
+    @include iui-anchor-status($statusColor);
   }
 
   > .iui-button {

package/scss/anchor/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 '../style/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/anchor/classes.scss

@@ -0,0 +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';
+
+.iui-anchor {
+  @include iui-anchor;
+}

package/scss/anchor/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 './anchor';

package/scss/breadcrumbs/breadcrumbs.scss

@@ -1,8 +1,9 @@
 // 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 '../anchor/index';
 @import '../button/borderless';
+@import '../icon/index';
 
 @mixin iui-breadcrumbs {
   @include iui-reset;

package/scss/classes.scss

@@ -3,6 +3,7 @@
 @import './style/index';
 @import './style/global';
 @import './alert/classes';
+@import './anchor/classes';
 @import './badge/classes';
 @import './blockquote/classes';
 @import './breadcrumbs/classes';

package/scss/color-picker/color-picker.scss

@@ -49,6 +49,7 @@ $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(var(--iui-color-foreground-body
   margin-right: $iui-xs;
   position: relative;
   background-color: var(--iui-color-swatch-background);
+  forced-color-adjust: none;
   @include iui-transparent-background;
   @supports (gap: $iui-s) {
     margin-bottom: 0;
@@ -172,6 +173,7 @@ $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(var(--iui-color-foreground-body
   cursor: crosshair;
   width: 100%;
   height: $iui-baseline * 19;
+  forced-color-adjust: none;
   background-image: linear-gradient(0deg, rgb(0, 0, 0), transparent),
     linear-gradient(90deg, rgb(255, 255, 255), var(--iui-color-field-hue));
 
@@ -183,6 +185,7 @@ $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(var(--iui-color-foreground-body
 @mixin iui-hue-slider {
   .iui-slider-rail {
     height: $iui-s;
+    forced-color-adjust: none;
     @include themed {
       background: linear-gradient(
         to right,
@@ -205,6 +208,7 @@ $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(var(--iui-color-foreground-body
 @mixin iui-opacity-slider {
   .iui-slider-rail {
     height: $iui-s;
+    forced-color-adjust: none;
     @include iui-transparent-background($size: $iui-s);
 
     &::before {

package/scss/footer/footer.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';
 
 @mixin iui-legal-footer {
   @include iui-reset;

package/scss/index.scss

@@ -2,6 +2,7 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import './style/index';
 @import './alert/index';
+@import './anchor/index';
 @import './badge/index';
 @import './blockquote/index';
 @import './breadcrumbs/index';

package/scss/modal/modal.scss

@@ -91,6 +91,9 @@
 }
 
 @mixin iui-modal-full-page {
+  $iui-full-page-modal-slide-in-speed: 0.3s;
+  $iui-full-page-modal-slide-out-speed: 0.25s;
+
   > .iui-modal-dialog {
     display: flex;
     flex-direction: column;
@@ -107,21 +110,21 @@
 
   // #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;
+    transition: visibility $iui-speed-instant linear $iui-speed-slow, 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;
+        transform $iui-full-page-modal-slide-out-speed ease-in;
     }
   }
 
   &.iui-modal-visible > .iui-modal-dialog {
     transform: translateY(0);
     @media (prefers-reduced-motion: no-preference) {
-      transition: transform $iui-speed ease-out;
+      transition: transform $iui-full-page-modal-slide-in-speed ease-out;
     }
   }
   // #endregion Full Page Modal Animations for CSS
@@ -129,12 +132,12 @@
 
 @mixin iui-modal-animation {
   // Full Page Modal Animations for React
-  &-enter .iui-modal .iui-modal-dialog {
+  &-enter .iui-modal-full-page .iui-modal-dialog {
     transform: translateY(100%);
     opacity: 0;
   }
 
-  &-enter-active .iui-modal .iui-modal-dialog {
+  &-enter-active .iui-modal-full-page .iui-modal-dialog {
     transform: translateY(0);
     opacity: 1;
   }

package/scss/skip-to-content/skip-to-content.scss

@@ -16,11 +16,13 @@
   text-align: center;
   left: 50%;
   top: $iui-baseline * 2;
+  opacity: 0;
+  z-index: 99;
   transform: translateX(-50%) translateY(-170%);
   transition: background-color $iui-speed-fast ease-in-out;
   @media (prefers-reduced-motion: no-preference) {
-    transition: background-color $iui-speed-fast ease-in-out, transform $iui-speed-slow ease-in-out,
-      box-shadow $iui-speed-fast ease-in-out;
+    transition: opacity $iui-speed-slow ease-in-out, background-color $iui-speed-slow ease-in-out,
+      transform $iui-speed-slow ease-in-out, box-shadow $iui-speed-slow ease-in-out;
   }
 
   &:hover {
@@ -28,10 +30,12 @@
   }
 
   &:focus {
+    opacity: 1;
     transform: translateX(-50%) translateY(0);
     box-shadow: $iui-elevation-16;
     @media (prefers-reduced-motion: no-preference) {
-      transition: transform $iui-speed-fast ease-in-out;
+      transition: opacity $iui-speed-instant ease-in-out, background-color $iui-speed-fast ease-in-out,
+        transform $iui-speed-fast ease-in-out, box-shadow $iui-speed-fast ease-in-out;
     }
   }
 }

package/scss/style/global.scss

@@ -51,10 +51,6 @@ html {
   }
 }
 
-.iui-anchor {
-  @include iui-anchor;
-}
-
 [class*='iui-'],
 [class*='iui-'] * {
   // Text highlight

package/scss/style/mixins.scss

@@ -46,23 +46,6 @@
   vertical-align: baseline;
 }
 
-@mixin iui-anchor {
-  @include iui-focus($offset: 2px);
-  border-radius: $iui-border-radius;
-  text-decoration: none;
-  cursor: pointer;
-  @include themed {
-    color: t(iui-color-foreground-primary);
-  }
-
-  &:hover {
-    @include themed {
-      color: t(iui-color-foreground-primary-overlay);
-    }
-    text-decoration: underline;
-  }
-}
-
 @mixin iui-text-selection($status: primary) {
   &::selection,
   *::selection {

package/scss/table/table.scss

@@ -196,12 +196,12 @@
         }
       }
 
-      > .iui-slot > .iui-more-options {
+      > .iui-slot:not(.iui-disabled) > .iui-more-options {
         visibility: visible;
       }
     }
 
-    &:not(.iui-disabled):focus-within > .iui-slot > .iui-more-options {
+    &:focus-within > .iui-slot:not(.iui-disabled) > .iui-more-options {
       visibility: visible;
     }
 
@@ -295,15 +295,15 @@
       }
     }
 
-    &.iui-disabled,
-    &.iui-disabled + .iui-expanded-content {
+    .iui-cell.iui-disabled,
+    &.iui-expanded-content.iui-disabled {
       font-style: italic;
       cursor: not-allowed;
       @include themed {
         color: t(iui-text-color-muted);
       }
 
-      &:hover > .iui-slot > .iui-more-options {
+      &.iui-slot:hover > .iui-more-options {
         visibility: hidden;
       }
 

package/scss/tag/classes.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 './tag';
+@import '../anchor/index';
 
 .iui-tag {
   @include iui-tag;

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 {

package/scss/tree/tree.scss

@@ -54,11 +54,11 @@ $iui-expander-button-width: ($iui-icons-default) + ($iui-expander-inline-padding
 
     &-icon {
       @include iui-icons-default;
-      padding: 0 $iui-expander-inline-padding;
+      margin: 0 $iui-expander-inline-padding;
       flex-shrink: 0;
 
       &:first-child {
-        margin-left: $iui-expander-button-width;
+        margin-left: $iui-expander-button-width + $iui-expander-inline-padding;
       }
     }