@itwin/itwinui-css 0.56.0 → 0.57.0

package/css/global.css

@@ -583,12 +583,12 @@ html.iui-theme-dark-hc{
 }
 
 .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;
+  box-sizing:border-box;
   cursor:pointer;
   text-decoration:none;
 }
@@ -606,22 +606,6 @@ html.iui-theme-dark-hc{
   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;
 }

package/css/radio-tile.css

@@ -39,12 +39,12 @@
   border-color:rgba(0, 0, 0, 0.8);
   border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
 }
-.iui-radio-tile-content:hover svg{
+.iui-radio-tile-content:hover .iui-radio-tile-icon{
   fill:rgba(0, 0, 0, 0.8);
   fill:var(--iui-icons-color-actionable);
 }
 @media (forced-colors: active){
-  .iui-radio-tile-content:hover svg{
+  .iui-radio-tile-content:hover .iui-radio-tile-icon{
     fill:CanvasText;
   }
 }
@@ -102,12 +102,12 @@
     border-color:Highlight;
   }
 }
-.iui-radio-tile-input:checked + * svg{
+.iui-radio-tile-input:checked + * .iui-radio-tile-icon{
   fill:#008ae0;
   fill:var(--iui-icons-color-primary);
 }
 @media (forced-colors: active){
-  .iui-radio-tile-input:checked + * svg{
+  .iui-radio-tile-input:checked + * .iui-radio-tile-icon{
     fill:Highlight;
   }
 }
@@ -145,18 +145,16 @@
     background-color:GrayText;
   }
 }
-.iui-radio-tile-input:disabled + * svg{
+.iui-radio-tile-input:disabled + * .iui-radio-tile-icon{
+  filter:grayscale(100%);
   fill:rgba(0, 0, 0, 0.2);
   fill:var(--iui-icons-color-actionable-disabled);
 }
 @media (forced-colors: active){
-  .iui-radio-tile-input:disabled + * svg{
+  .iui-radio-tile-input:disabled + * .iui-radio-tile-icon{
     fill:GrayText;
   }
 }
-.iui-radio-tile-input:disabled + * .iui-radio-tile-icon{
-  filter:grayscale(100%);
-}
 @media (forced-colors: active){
   .iui-radio-tile-input:disabled + * .iui-radio-tile-label,
 .iui-radio-tile-input:disabled + * .iui-radio-tile-sublabel{
@@ -185,18 +183,16 @@
   margin:0 auto;
   padding-top:6px;
   padding-bottom:11px;
-}
-.iui-radio-tile-icon svg{
   fill:rgba(0, 0, 0, 0.4);
   fill:var(--iui-icons-color);
 }
 @media (prefers-reduced-motion: no-preference){
-  .iui-radio-tile-icon svg{
+  .iui-radio-tile-icon{
     transition:fill 0.2s ease-out;
   }
 }
 @media (forced-colors: active){
-  .iui-radio-tile-icon svg{
+  .iui-radio-tile-icon{
     fill:CanvasText;
   }
 }

package/css/table.css

@@ -533,6 +533,7 @@
 
 .iui-paginator-page-button{
   --_iui-button-active-stripe-inset:initial;
+  --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
   margin:0;
   padding:0;
   border:none;
@@ -559,6 +560,7 @@
   border:1px solid transparent;
   color:rgba(0, 0, 0, 0.8);
   color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
+  color:var(--_iui-button-text-color);
   border-color:transparent;
   background-color:transparent;
   padding:0 8px;
@@ -573,9 +575,8 @@
   }
 }
 .iui-paginator-page-button:hover{
+  --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
   text-decoration:none;
-  color:black;
-  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
 }
 .iui-paginator-page-button:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
@@ -596,15 +597,6 @@
   border-color:var(--iui-color-background-disabled);
   color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
 }
-.iui-paginator-page-button.iui-active::after{
-  content:"";
-  position:absolute;
-  inset:var(--_iui-button-active-stripe-inset);
-  background-color:var(--iui-color-foreground-primary);
-}
-.iui-paginator-page-button.iui-active[disabled]::after, .iui-paginator-page-button.iui-active:disabled::after{
-  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
-}
 .iui-paginator-page-button > .iui-button-icon:only-child{
   margin-left:3px;
   margin-right:3px;
@@ -639,6 +631,15 @@
   background-color:rgba(0, 0, 0, 0.05);
   background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
 }
+.iui-paginator-page-button.iui-active::after{
+  content:"";
+  position:absolute;
+  inset:var(--_iui-button-active-stripe-inset);
+  background-color:var(--iui-color-foreground-primary);
+}
+.iui-paginator-page-button.iui-active[disabled]::after, .iui-paginator-page-button.iui-active:disabled::after{
+  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
+}
 .iui-paginator-page-button-small{
   padding:0 8px;
   height:27px;

package/css/tag.css

@@ -73,12 +73,12 @@
 }
 
 a.iui-tag-basic{
-  --_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;
+  box-sizing:border-box;
   cursor:pointer;
   text-decoration:none;
 }
@@ -96,22 +96,6 @@ a.iui-tag-basic:hover{
   color:#006bad;
   color:var(--iui-color-foreground-primary-overlay);
 }
-a.iui-tag-basic-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){
-  a.iui-tag-basic-external::after{
-    background-color:LinkText;
-  }
-}
 a.iui-tag-basic:hover{
   text-decoration:underline;
 }

package/package.json

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

package/scss/anchor/classes.scss

@@ -4,4 +4,8 @@
 
 .iui-anchor {
   @include iui-anchor;
+
+  &-external {
+    @include iui-anchor-external;
+  }
 }

package/scss/breadcrumbs/breadcrumbs.scss

@@ -21,45 +21,101 @@
 
 @mixin iui-breadcrumbs-item {
   display: flex;
+  align-items: center;
   line-height: $iui-component-height;
   height: $iui-component-height;
-  max-width: $iui-3xl * 2;
-  margin: 0 $iui-sm;
 
-  a {
-    @include iui-anchor;
-  }
-
-  .iui-button {
-    @include iui-button-borderless;
-    margin: 0 (-$iui-s - 1);
+  > * {
+    max-width: 26ch;
   }
+}
 
-  > *,
-  .iui-button-label {
+@mixin iui-breadcrumbs-item-overrides {
+  > * {
+    padding: 0 $iui-s;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+    @include themed {
+      color: t(iui-text-color);
+    }
   }
 
-  &:not(.iui-current) > .iui-button {
-    @include themed {
-      color: t(iui-color-foreground-primary);
+  > :any-link {
+    @include iui-anchor;
+
+    &:focus {
+      outline-offset: -1px;
+    }
+  }
+
+  .iui-button {
+    &.iui-button {
+      @include iui-button-borderless;
+      @include iui-focus;
+      border: none;
+    }
+
+    &-label {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
     }
 
-    &:hover {
-      @include themed {
-        color: t(iui-color-foreground-primary-overlay);
+    &:not([aria-current]) {
+      &,
+      &:hover,
+      &:active {
+        --_iui-button-text-color: var(--iui-color-foreground-primary);
       }
     }
   }
 }
 
+@mixin iui-breadcrumbs-text {
+  padding: 0 $iui-s;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  @at-root a#{&} {
+    @include iui-anchor;
+
+    &:focus {
+      outline-offset: -1px;
+    }
+  }
+}
+
+@mixin iui-breadcrumbs-button {
+  @include iui-button;
+  @include iui-button-borderless;
+  padding: 0;
+  border: none;
+  @include themed {
+    color: t(iui-color-foreground-primary);
+  }
+
+  &[aria-current] {
+    @include themed {
+      color: t(iui-text-color);
+    }
+  }
+}
+
 @mixin iui-breadcrumbs-separator {
   display: flex;
+  margin: 0 $iui-xxs;
 
   svg {
-    @include iui-icons-small;
+    width: $iui-icons-small;
+    height: $iui-icons-small;
     display: flex; // needed for vertical alignment of webcomponents
+    @include themed {
+      fill: t(iui-icons-color);
+    }
+    @media (forced-colors: active) {
+      fill: CanvasText;
+    }
   }
 }

package/scss/breadcrumbs/classes.scss

@@ -12,6 +12,15 @@
 
 .iui-breadcrumbs-item {
   @include iui-breadcrumbs-item;
+  @include iui-breadcrumbs-item-overrides;
+}
+
+.iui-breadcrumbs-text {
+  @include iui-breadcrumbs-text;
+}
+
+.iui-breadcrumbs-button {
+  @include iui-breadcrumbs-button;
 }
 
 .iui-breadcrumbs-separator {

package/scss/button/button.scss

@@ -11,6 +11,7 @@ $iui-button-padding-large: $iui-xs * 6;
 
 @mixin iui-button {
   --_iui-button-active-stripe-inset: initial;
+  --_iui-button-text-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
 
   @include iui-reset;
   font-family: inherit;
@@ -38,12 +39,12 @@ $iui-button-padding-large: $iui-xs * 6;
   @include themed {
     color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
   }
+  color: var(--_iui-button-text-color);
 
   &:hover {
+    --_iui-button-text-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
+
     text-decoration: none;
-    @include themed {
-      color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
-    }
   }
 
   @include iui-focus;
@@ -52,21 +53,21 @@ $iui-button-padding-large: $iui-xs * 6;
   &:disabled {
     @include iui-button-disabled;
   }
+}
 
-  &.iui-active {
-    // Shows active stripe only if --_iui-button-active-stripe-inset is set (from outside)
-    &::after {
-      content: '';
-      position: absolute;
-      inset: var(--_iui-button-active-stripe-inset);
-      background-color: var(--iui-color-foreground-primary);
-    }
+@mixin iui-button-active {
+  // Shows active stripe only if --_iui-button-active-stripe-inset is set (from outside)
+  &::after {
+    content: '';
+    position: absolute;
+    inset: var(--_iui-button-active-stripe-inset);
+    background-color: var(--iui-color-foreground-primary);
+  }
 
-    &[disabled],
-    &:disabled {
-      &::after {
-        background-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
-      }
+  &[disabled],
+  &:disabled {
+    &::after {
+      background-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
     }
   }
 }

package/scss/button/classes.scss

@@ -6,6 +6,10 @@
   @include iui-button;
   @include iui-button-size;
 
+  &.iui-active {
+    @include iui-button-active;
+  }
+
   &.iui-default {
     @include iui-button-default;
   }

package/scss/button/cta.scss

@@ -6,11 +6,14 @@
 @import './disabled';
 
 @mixin iui-button-cta {
+  --_iui-button-text-color: var(--iui-color-foreground-accessory);
+
   @include themed {
     background-color: t(iui-color-background-positive);
     border-color: t(iui-color-background-positive);
     color: t(iui-color-foreground-accessory);
   }
+  color: var(--_iui-button-text-color);
   @include iui-focus($color: var(--iui-color-foreground-accessory), $offset: -3px, $thickness: 1px);
 
   &:hover,
@@ -18,7 +21,6 @@
     @include themed {
       background-color: t(iui-color-background-positive-overlay);
       border-color: t(iui-color-background-positive-overlay);
-      color: t(iui-color-foreground-accessory);
     }
   }
 

package/scss/button/default.scss

@@ -10,7 +10,6 @@
   @include themed {
     background-color: t(iui-color-background-1);
     border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
-    color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
   }
   @include iui-focus($offset: -2px, $thickness: 2px);
 
@@ -19,7 +18,6 @@
     @include themed {
       background-color: t(iui-color-background-1-overlay);
       border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
-      color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
     }
     @include iui-notification-marker-hover;
   }

package/scss/button/high-visibility.scss

@@ -6,11 +6,14 @@
 @import './button-icon';
 
 @mixin iui-button-high-visibility {
+  --_iui-button-text-color: var(--iui-color-foreground-accessory);
+
   @include themed {
     background-color: t(iui-color-background-primary);
     border-color: t(iui-color-background-primary);
     color: t(iui-color-foreground-accessory);
   }
+  color: var(--_iui-button-text-color);
   @include iui-focus($color: var(--iui-color-foreground-accessory), $offset: -3px, $thickness: 1px);
 
   &:hover,
@@ -18,7 +21,6 @@
     @include themed {
       background-color: t(iui-color-background-primary-overlay);
       border-color: t(iui-color-background-primary-overlay);
-      color: t(iui-color-foreground-accessory);
     }
   }
 

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

@@ -42,7 +42,7 @@
       border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
     }
 
-    svg {
+    .iui-radio-tile-icon {
       @media (forced-colors: active) {
         fill: CanvasText;
       }
@@ -90,7 +90,7 @@
       border: 2px solid t(iui-color-foreground-primary);
     }
 
-    svg {
+    .iui-radio-tile-icon {
       @media (forced-colors: active) {
         fill: Highlight;
       }
@@ -133,7 +133,8 @@
       }
     }
 
-    svg {
+    .iui-radio-tile-icon {
+      filter: $iui-icons-color-multicolor-disabled;
       @media (forced-colors: active) {
         fill: GrayText;
       }
@@ -142,10 +143,6 @@
       }
     }
 
-    .iui-radio-tile-icon {
-      filter: $iui-icons-color-multicolor-disabled;
-    }
-
     .iui-radio-tile-label,
     .iui-radio-tile-sublabel {
       @media (forced-colors: active) {
@@ -179,16 +176,14 @@
   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);
-    }
+  @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);
   }
 }
 

package/scss/style/anchor.scss

@@ -3,26 +3,11 @@
 @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;
+  box-sizing: border-box;
   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) {
@@ -44,6 +29,24 @@
   }
 }
 
+@mixin iui-anchor-external {
+  --_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>");
+
+  &::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;
+    }
+  }
+}
+
 @mixin iui-anchor-status($status: primary) {
   @include iui-focus($color: var(--iui-color-foreground-#{$status}), $offset: 1px);
   @include themed {

package/scss/table/paginator.scss

@@ -73,6 +73,10 @@
   @include iui-button-borderless;
   width: $iui-component-height;
 
+  &.iui-active {
+    @include iui-button-active;
+  }
+
   // Adds stripe above active button
   --_iui-button-active-stripe-inset: calc(100% - #{$iui-xs}) #{$iui-xxs} #{$iui-xxs};