@itwin/itwinui-css 0.54.0 → 0.54.1

package/css/all.css

@@ -583,6 +583,71 @@ html.iui-theme-dark-hc{
   font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
 }
 
+.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>");
+  color:#008ae0;
+  -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
+  color:var(--iui-color-foreground-primary);
+  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
+  border-radius:3px;
+  cursor:pointer;
+  text-decoration:none;
+}
+.iui-anchor:focus-visible{
+  outline:1px solid var(--iui-color-foreground-primary);
+  outline-offset:1px;
+}
+@supports not selector(*:focus-visible){
+  .iui-anchor:focus{
+    outline:1px solid var(--iui-color-foreground-primary);
+    outline-offset:1px;
+  }
+}
+.iui-anchor:hover{
+  color:#006bad;
+  color:var(--iui-color-foreground-primary-overlay);
+}
+.iui-anchor-external::after{
+  content:"";
+  display:inline-block;
+  width:1.5ch;
+  height:1.5ch;
+  margin-left:0.5ch;
+  vertical-align:-0.1ch;
+  background-color:currentColor;
+  -webkit-mask:var(--_iui-anchor-external-svg);
+          mask:var(--_iui-anchor-external-svg);
+}
+@media (forced-colors: active){
+  .iui-anchor-external::after{
+    background-color:LinkText;
+  }
+}
+.iui-anchor:hover{
+  text-decoration:underline;
+}
+@media (prefers-contrast: more){
+  .iui-anchor{
+    text-decoration:underline;
+  }
+  .iui-anchor:hover{
+    text-decoration:none;
+  }
+}
+.iui-theme-light .iui-anchor, .iui-theme-dark .iui-anchor{
+  text-decoration:none;
+}
+.iui-theme-light .iui-anchor:hover, .iui-theme-dark .iui-anchor:hover{
+  text-decoration:underline;
+}
+
+.iui-theme-light-hc .iui-anchor, .iui-theme-dark-hc .iui-anchor{
+  text-decoration:underline;
+}
+.iui-theme-light-hc .iui-anchor:hover, .iui-theme-dark-hc .iui-anchor:hover{
+  text-decoration:none;
+}
+
 [class*=iui-],
 [class*=iui-] *{
   scrollbar-color:rgba(0, 0, 0, 0.4) transparent;

package/css/global.css

@@ -582,6 +582,71 @@ html.iui-theme-dark-hc{
   font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
 }
 
+.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>");
+  color:#008ae0;
+  -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
+  color:var(--iui-color-foreground-primary);
+  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
+  border-radius:3px;
+  cursor:pointer;
+  text-decoration:none;
+}
+.iui-anchor:focus-visible{
+  outline:1px solid var(--iui-color-foreground-primary);
+  outline-offset:1px;
+}
+@supports not selector(*:focus-visible){
+  .iui-anchor:focus{
+    outline:1px solid var(--iui-color-foreground-primary);
+    outline-offset:1px;
+  }
+}
+.iui-anchor:hover{
+  color:#006bad;
+  color:var(--iui-color-foreground-primary-overlay);
+}
+.iui-anchor-external::after{
+  content:"";
+  display:inline-block;
+  width:1.5ch;
+  height:1.5ch;
+  margin-left:0.5ch;
+  vertical-align:-0.1ch;
+  background-color:currentColor;
+  -webkit-mask:var(--_iui-anchor-external-svg);
+          mask:var(--_iui-anchor-external-svg);
+}
+@media (forced-colors: active){
+  .iui-anchor-external::after{
+    background-color:LinkText;
+  }
+}
+.iui-anchor:hover{
+  text-decoration:underline;
+}
+@media (prefers-contrast: more){
+  .iui-anchor{
+    text-decoration:underline;
+  }
+  .iui-anchor:hover{
+    text-decoration:none;
+  }
+}
+.iui-theme-light .iui-anchor, .iui-theme-dark .iui-anchor{
+  text-decoration:none;
+}
+.iui-theme-light .iui-anchor:hover, .iui-theme-dark .iui-anchor:hover{
+  text-decoration:underline;
+}
+
+.iui-theme-light-hc .iui-anchor, .iui-theme-dark-hc .iui-anchor{
+  text-decoration:underline;
+}
+.iui-theme-light-hc .iui-anchor:hover, .iui-theme-dark-hc .iui-anchor:hover{
+  text-decoration:none;
+}
+
 [class*=iui-],
 [class*=iui-] *{
   scrollbar-color:rgba(0, 0, 0, 0.4) transparent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-css",
-  "version": "0.54.0",
+  "version": "0.54.1",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "src/index.scss",

package/scss/anchor/anchor.scss

@@ -1,79 +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 '../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;
-    }
-  }
-}
+@import '../style/anchor'; // Reimports anchor from global styles

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,10 @@ html {
   }
 }
 
+.iui-anchor {
+  @include iui-anchor;
+}
+
 [class*='iui-'],
 [class*='iui-'] * {
   // Text highlight