@itwin/itwinui-css 0.54.1 → 0.57.0

package/css/tag.css

@@ -12,31 +12,17 @@
           user-select:all;
   text-transform:lowercase;
   display:inline-flex;
-}
-.iui-tag:focus-visible{
-  outline:2px solid var(--iui-color-foreground-primary);
-  outline-offset:-2px;
-}
-@supports not selector(*:focus-visible){
-  .iui-tag:focus{
-    outline:2px solid var(--iui-color-foreground-primary);
-    outline-offset:-2px;
-  }
-}
-.iui-tag:not(a){
-  color:rgba(0, 0, 0, 0.4);
-  color:var(--iui-text-color-muted);
-}
-.iui-tag:not(.iui-basic){
   height:33px;
   margin:3px 0;
-  border-radius:16.5px;
+  border-radius:9999px;
   box-sizing:border-box;
   padding:0 2px;
   align-items:center;
+  transition:border-color 0.2s ease-out;
   font-size:14px;
   text-transform:none;
   cursor:default;
+  -webkit-tap-highlight-color:transparent;
   border:1px solid rgba(0, 0, 0, 0.4);
   background-color:white;
   color:rgba(0, 0, 0, 0.8);
@@ -44,12 +30,28 @@
   background-color:var(--iui-color-background-1);
   color:var(--iui-text-color);
 }
-@media (prefers-reduced-motion: no-preference){
-  .iui-tag:not(.iui-basic){
-    transition:border 0.2s ease-out;
-  }
+.iui-tag:hover{
+  border-color:black;
+  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
+}
+
+.iui-tag-basic{
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  -webkit-user-select:all;
+     -moz-user-select:all;
+          user-select:all;
+  text-transform:lowercase;
+  display:inline-flex;
 }
-.iui-tag:not(.iui-basic) > .iui-label{
+.iui-tag-basic:not(a){
+  color:rgba(0, 0, 0, 0.4);
+  color:var(--iui-text-color-muted);
+}
+
+.iui-tag-label{
   margin:0;
   padding:0;
   border:none;
@@ -62,96 +64,85 @@
   overflow:hidden;
   margin:0 4px 0 8px;
 }
-.iui-tag:not(.iui-basic) > .iui-label:only-child{
+.iui-tag-label:only-child{
   margin:0 8px;
 }
-.iui-tag:not(.iui-basic) > .iui-button{
+
+.iui-tag-button{
   border-radius:50%;
 }
-.iui-tag:not(.iui-basic):hover{
-  border-color:black;
-  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
-}
-.iui-tag.iui-basic{
-  outline-offset:1px;
-}
 
-a.iui-tag{
-  --_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>");
+a.iui-tag-basic{
   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;
 }
-a.iui-tag:focus-visible{
+a.iui-tag-basic:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
   outline-offset:1px;
 }
 @supports not selector(*:focus-visible){
-  a.iui-tag:focus{
+  a.iui-tag-basic:focus{
     outline:1px solid var(--iui-color-foreground-primary);
     outline-offset:1px;
   }
 }
-a.iui-tag:hover{
+a.iui-tag-basic:hover{
   color:#006bad;
   color:var(--iui-color-foreground-primary-overlay);
 }
-a.iui-tag-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-external::after{
-    background-color:LinkText;
-  }
-}
-a.iui-tag:hover{
+a.iui-tag-basic:hover{
   text-decoration:underline;
 }
 @media (prefers-contrast: more){
-  a.iui-tag{
+  a.iui-tag-basic{
     text-decoration:underline;
   }
-  a.iui-tag:hover{
+  a.iui-tag-basic:hover{
     text-decoration:none;
   }
 }
-.iui-theme-light a.iui-tag, .iui-theme-dark a.iui-tag{
+.iui-theme-light a.iui-tag-basic, .iui-theme-dark a.iui-tag-basic{
   text-decoration:none;
 }
-.iui-theme-light a.iui-tag:hover, .iui-theme-dark a.iui-tag:hover{
+.iui-theme-light a.iui-tag-basic:hover, .iui-theme-dark a.iui-tag-basic:hover{
   text-decoration:underline;
 }
 
-.iui-theme-light-hc a.iui-tag, .iui-theme-dark-hc a.iui-tag{
+.iui-theme-light-hc a.iui-tag-basic, .iui-theme-dark-hc a.iui-tag-basic{
   text-decoration:underline;
 }
-.iui-theme-light-hc a.iui-tag:hover, .iui-theme-dark-hc a.iui-tag:hover{
+.iui-theme-light-hc a.iui-tag-basic:hover, .iui-theme-dark-hc a.iui-tag-basic:hover{
   text-decoration:none;
 }
 
+a.iui-tag-basic:focus-visible{
+  outline:1px solid var(--iui-color-foreground-primary);
+  outline-offset:1px;
+}
+@supports not selector(*:focus-visible){
+  a.iui-tag-basic:focus{
+    outline:1px solid var(--iui-color-foreground-primary);
+    outline-offset:1px;
+  }
+}
+
 .iui-tag-container{
   color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
-.iui-tag-container > a.iui-basic{
+.iui-tag-container > a.iui-tag-basic{
   margin:2px;
 }
-.iui-tag-container > .iui-tag:not(:last-child){
+.iui-tag-container > *:not(last-child){
   margin-right:4px;
 }
-.iui-tag-container > .iui-basic:not(:last-child)::after{
+.iui-tag-container > .iui-tag-basic:not(:last-child)::after{
   content:",";
 }
 .iui-tag-container.iui-truncate{
@@ -174,6 +165,6 @@ a.iui-tag:hover{
 .iui-tag-container.iui-visible{
   border-radius:3px;
   padding:3px 12px;
-  background-color:#f9f9fb;
-  background-color:var(--iui-color-background-2);
+  background-color:#edeff2;
+  background-color:var(--iui-color-background-3);
 }

package/css/text.css

@@ -75,11 +75,17 @@
           user-select:none;
   color:transparent;
   border-radius:3px;
-  background:linear-gradient(270deg, #edeff2, #edeff2, #f9f9fb, #edeff2, #edeff2);
-  background-size:200% 100%;
-  background:linear-gradient(270deg, var(--iui-color-background-3), var(--iui-color-background-3), var(--iui-color-background-2), var(--iui-color-background-3), var(--iui-color-background-3));
+  cursor:progress;
+  background:linear-gradient(292deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
+  background:linear-gradient(292deg, var(--iui-text-color-muted), var(--iui-text-color-muted), var(--iui-text-color-placeholder), var(--iui-text-color-muted), var(--iui-text-color-muted));
   background-size:200% 100%;
 }
+@media (forced-colors: active){
+  .iui-skeleton{
+    forced-color-adjust:none;
+    background:linear-gradient(292deg, CanvasText, CanvasText, Canvas, CanvasText, CanvasText);
+  }
+}
 @media (prefers-reduced-motion: no-preference){
   .iui-skeleton{
     -webkit-animation:skeleton-shimmer 0.8s linear infinite;

package/css/tile.css

@@ -7,25 +7,23 @@
   padding:0;
   border:none;
   vertical-align:baseline;
+  --iui-surface-background-color:var(--iui-color-background-1);
+  --iui-surface-border-radius:0;
+  --iui-surface-elevation:0 1px 5px rgba(0, 0, 0, 0.25);
+  background-color:var(--iui-surface-background-color);
+  border-radius:var(--iui-surface-border-radius);
+  box-shadow:var(--iui-surface-elevation);
+  box-sizing:border-box;
+  color:var(--iui-text-color);
   display:inline-flex;
   flex-direction:column;
   width:288px;
-  box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
   -webkit-backface-visibility:hidden;
           backface-visibility:hidden;
-  background-color:white;
-  color:rgba(0, 0, 0, 0.8);
-  background-color:var(--iui-color-background-1);
-  color:var(--iui-text-color);
-}
-.iui-tile:focus-visible{
-  outline:2px solid var(--iui-color-foreground-primary);
-  outline-offset:2px;
 }
-@supports not selector(*:focus-visible){
-  .iui-tile:focus{
-    outline:2px solid var(--iui-color-foreground-primary);
-    outline-offset:2px;
+@media (forced-colors: active){
+  .iui-tile{
+    border:1px solid transparent;
   }
 }
 .iui-tile:hover .iui-tile-more-options, .iui-tile:focus-within .iui-tile-more-options{
@@ -43,9 +41,6 @@
 .iui-tile:hover .iui-tile-metadata:not(:last-child), .iui-tile:focus-within .iui-tile-metadata:not(:last-child){
   width:calc(100% - 32px);
 }
-.iui-tile:hover .iui-tile-thumbnail-picture, .iui-tile:focus-within .iui-tile-thumbnail-picture{
-  transform:translateZ(0) scale(1.1);
-}
 .iui-tile.iui-new .iui-tile-name,
 .iui-tile.iui-new .iui-tile-description{
   font-weight:600;
@@ -66,7 +61,24 @@
     outline-offset:0;
   }
 }
-.iui-tile.iui-selected .iui-tile-thumbnail-picture{
+.iui-tile.iui-actionable{
+  cursor:pointer;
+  transition:box-shadow 0.2s ease-in-out;
+}
+.iui-tile.iui-actionable:focus-visible{
+  outline:2px solid var(--iui-color-foreground-primary);
+  outline-offset:2px;
+}
+@supports not selector(*:focus-visible){
+  .iui-tile.iui-actionable:focus{
+    outline:2px solid var(--iui-color-foreground-primary);
+    outline-offset:2px;
+  }
+}
+.iui-tile.iui-actionable:hover{
+  box-shadow:0 3px 14px rgba(0, 0, 0, 0.25);
+}
+.iui-tile.iui-actionable:hover .iui-tile-thumbnail-picture, .iui-tile.iui-actionable:focus-within .iui-tile-thumbnail-picture, .iui-tile.iui-actionable.iui-selected .iui-tile-thumbnail-picture{
   transform:translateZ(0) scale(1.1);
 }
 .iui-tile.iui-folder{

package/css/toast-notification.css

@@ -9,7 +9,7 @@
   align-items:center;
   flex-direction:column;
   justify-content:center;
-  z-index:1070;
+  z-index:99999;
 }
 @media screen and (max-width: 400px){
   .iui-toast-wrapper{

package/css/toggle-switch.css

@@ -38,6 +38,11 @@
   color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
+@media (forced-colors: active){
+  .iui-toggle-switch-wrapper.iui-disabled{
+    color:GrayText;
+  }
+}
 .iui-toggle-switch-wrapper.iui-label-on-left{
       grid-template-areas:"label toggle";
 }
@@ -119,13 +124,29 @@
     transition:transform 0.2s ease-out, background-color 0.2s ease-out, opacity 0.2s ease-out;
   }
 }
+@media (forced-colors: active){
+  .iui-toggle-switch{
+    border-color:CanvasText;
+  }
+}
 .iui-toggle-switch::after{
   background-color:var(--iui-color-foreground-body);
   opacity:var(--iui-opacity-2);
 }
+@media (forced-colors: active){
+  .iui-toggle-switch::after{
+    background-color:CanvasText;
+    opacity:1;
+  }
+}
 .iui-toggle-switch:hover{
   border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
 }
+@media (forced-colors: active){
+  .iui-toggle-switch:hover{
+    border-color:CanvasText;
+  }
+}
 .iui-toggle-switch:focus-visible{
   border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
 }
@@ -138,11 +159,23 @@
   background-color:var(--iui-color-background-primary);
   border-color:var(--iui-color-background-primary);
 }
+@media (forced-colors: active){
+  .iui-toggle-switch:checked{
+    background-color:Highlight;
+    border-color:Highlight;
+  }
+}
 .iui-toggle-switch:checked::after{
   transform:translateX(19px);
   background-color:var(--iui-color-foreground-accessory);
   opacity:var(--iui-opacity-2);
 }
+@media (forced-colors: active){
+  .iui-toggle-switch:checked::after{
+    background-color:HighlightText;
+    opacity:1;
+  }
+}
 .iui-toggle-switch:checked ~ .iui-toggle-switch-icon{
   opacity:var(--iui-opacity-1);
 }
@@ -162,17 +195,44 @@
   background-color:var(--iui-color-background-disabled);
   border-color:var(--iui-color-background-disabled);
 }
+@media (forced-colors: active){
+  .iui-toggle-switch:disabled{
+    border-color:GrayText;
+  }
+}
 .iui-toggle-switch:disabled::after{
   background-color:var(--iui-color-foreground-body);
   opacity:var(--iui-opacity-5);
 }
+@media (forced-colors: active){
+  .iui-toggle-switch:disabled::after{
+    background-color:GrayText;
+    opacity:0.75;
+  }
+}
 .iui-toggle-switch:disabled ~ .iui-toggle-switch-icon{
   opacity:0;
   fill:var(--iui-icons-color-actionable);
 }
+@media (forced-colors: active){
+  .iui-toggle-switch:disabled:checked{
+    background-color:GrayText;
+  }
+}
+@media (forced-colors: active){
+  .iui-toggle-switch:disabled:checked::after{
+    background-color:Canvas;
+  }
+}
 .iui-toggle-switch:disabled:checked ~ .iui-toggle-switch-icon{
   opacity:var(--iui-opacity-5);
 }
+@media (forced-colors: active){
+  .iui-toggle-switch:disabled:checked ~ .iui-toggle-switch-icon{
+    fill:Canvas;
+    opacity:0.75;
+  }
+}
 .iui-toggle-switch-icon{
   -ms-grid-row:1;
   -ms-grid-column:1;
@@ -195,4 +255,9 @@
 .iui-toggle-switch-wrapper.iui-label-on-right > .iui-toggle-switch-icon{
   -ms-grid-row:1;
   -ms-grid-column:1;
+}
+@media (forced-colors: active){
+  .iui-toggle-switch-icon{
+    fill:HighlightText;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-css",
-  "version": "0.54.1",
+  "version": "0.57.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "src/index.scss",
@@ -55,7 +55,8 @@
     "test:ci": "backstop --config=./backstop/backstop.js test --docker",
     "clean:images": "node scripts/removeOldTestImages.js",
     "print": "node scripts/print.js",
-    "audit:ci": "audit-ci --moderate --report-type=full"
+    "audit:ci": "audit-ci --moderate --report-type=full",
+    "build-docker": "node scripts/buildDocker.js"
   },
   "devDependencies": {
     "audit-ci": "^4.0.0",
@@ -85,6 +86,7 @@
     "jpeg-js": "^0.4.3",
     "set-value": "^4.1.0",
     "ansi-regex": "^5.0.1",
-    "node-fetch": "^2.6.7"
+    "node-fetch": "^2.6.7",
+    "async": "^3.2.2"
   }
 }

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);
     }
   }