@itwin/itwinui-css 0.53.3 → 0.54.0

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/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/skip-to-content/skip-to-content.scss

@@ -15,8 +15,9 @@
   position: fixed;
   text-align: center;
   left: 50%;
-  opacity: 0;
   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) {

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 {