@itwin/itwinui-css 0.54.1 → 0.57.0

package/scss/tag/tag.scss

@@ -1,67 +1,66 @@
 // 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 '../text/mixins';
+@import '../button/index';
 
-@mixin iui-tag {
+@mixin iui-tag-base {
   @include iui-reset;
-  @include iui-focus($offset: -2px, $thickness: 2px);
   user-select: all;
   text-transform: lowercase;
   display: inline-flex;
+}
+
+@mixin iui-tag-basic {
+  @include iui-tag-base;
 
   &:not(a) {
     @include themed {
       color: t(iui-text-color-muted);
     }
   }
+}
 
-  &:not(.iui-basic) {
-    height: $iui-baseline * 3;
-    margin: $iui-component-offset 0;
-    border-radius: ($iui-baseline * 3) * 0.5;
-    box-sizing: border-box;
-    padding: 0 $iui-xxs;
-    align-items: center;
-    @media (prefers-reduced-motion: no-preference) {
-      transition: border $iui-speed-fast ease-out;
-    }
-    font-size: $iui-font-size;
-    text-transform: none;
-    cursor: default;
-    @include themed {
-      border: 1px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
-      background-color: t(iui-color-background-1);
-      color: t(iui-text-color);
-    }
-
-    > .iui-label {
-      @include iui-text;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      margin: 0 $iui-xs 0 $iui-s;
+@mixin iui-tag {
+  @include iui-tag-base;
+  height: $iui-baseline * 3;
+  margin: $iui-component-offset 0;
+  border-radius: $iui-border-radius-round;
+  box-sizing: border-box;
+  padding: 0 $iui-xxs;
+  align-items: center;
+  transition: border-color $iui-speed-fast ease-out;
+  font-size: $iui-font-size;
+  text-transform: none;
+  cursor: default;
+  -webkit-tap-highlight-color: transparent;
+  @include themed {
+    border: 1px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
+    background-color: t(iui-color-background-1);
+    color: t(iui-text-color);
+  }
 
-      &:only-child {
-        margin: 0 $iui-s;
-      }
+  &:hover {
+    @include themed {
+      border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
     }
+  }
+}
 
-    > .iui-button {
-      border-radius: 50%;
-    }
+@mixin iui-tag-label {
+  @include iui-text;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  margin: 0 $iui-xs 0 $iui-s;
 
-    &:hover {
-      @include themed {
-        border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
-      }
-    }
+  &:only-child {
+    margin: 0 $iui-s;
   }
+}
 
-  &.iui-basic {
-    outline-offset: 1px;
-  }
+@mixin iui-tag-button {
+  border-radius: 50%;
 }
 
 @mixin iui-tag-container {
@@ -69,15 +68,15 @@
     color: t(iui-text-color-muted);
   }
 
-  > a.iui-basic {
+  > a.iui-tag-basic {
     margin: $iui-xxs;
   }
 
-  > .iui-tag:not(:last-child) {
+  > *:not(last-child) {
     margin-right: $iui-xs;
   }
 
-  > .iui-basic:not(:last-child)::after {
+  > .iui-tag-basic:not(:last-child)::after {
     content: ',';
   }
 
@@ -94,7 +93,7 @@
     border-radius: $iui-border-radius;
     padding: $iui-component-offset $iui-sm;
     @include themed {
-      background-color: t(iui-color-background-2);
+      background-color: t(iui-color-background-3);
     }
   }
 }

package/scss/text/skeleton.scss

@@ -7,17 +7,23 @@
   user-select: none;
   color: transparent;
   border-radius: $iui-border-radius;
+  cursor: progress;
 
   @include themed {
     background: linear-gradient(
-      270deg,
-      t(iui-color-background-3),
-      t(iui-color-background-3),
-      t(iui-color-background-2),
-      t(iui-color-background-3),
-      t(iui-color-background-3)
+      292deg,
+      t(iui-text-color-muted),
+      t(iui-text-color-muted),
+      t(iui-text-color-placeholder),
+      t(iui-text-color-muted),
+      t(iui-text-color-muted)
     );
-    background-size: 200% 100%;
+  }
+  background-size: 200% 100%;
+
+  @media (forced-colors: active) {
+    forced-color-adjust: none;
+    background: linear-gradient(292deg, CanvasText, CanvasText, Canvas, CanvasText, CanvasText);
   }
 
   @media (prefers-reduced-motion: no-preference) {

package/scss/tile/tile.scss

@@ -1,21 +1,17 @@
 // 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 '../button/index';
+@import '../icon/index';
+@import '../surface/index';
 
 @mixin iui-tile {
   @include iui-reset;
+  @include iui-surface;
   display: inline-flex;
   flex-direction: column;
   width: $iui-3xl * 3;
-  box-shadow: $iui-elevation-2;
   backface-visibility: hidden;
-  @include iui-focus($offset: $iui-xxs, $thickness: $iui-xxs);
-  @include themed() {
-    background-color: t(iui-color-background-1);
-    color: t(iui-text-color);
-  }
 
   &:hover,
   &:focus-within {
@@ -27,10 +23,6 @@
     .iui-tile-metadata:not(:last-child) {
       width: calc(100% - #{$iui-xl});
     }
-
-    .iui-tile-thumbnail-picture {
-      transform: translateZ(0) scale(1.1);
-    }
   }
 
   &.iui-new {
@@ -50,9 +42,23 @@
       ),
         linear-gradient(t(iui-color-background-1), t(iui-color-background-1));
     }
+  }
+
+  &.iui-actionable {
+    @include iui-focus($offset: $iui-xxs, $thickness: $iui-xxs);
+    cursor: pointer;
+    transition: box-shadow $iui-speed-fast ease-in-out;
+
+    &:hover {
+      box-shadow: $iui-elevation-8;
+    }
 
-    .iui-tile-thumbnail-picture {
-      transform: translateZ(0) scale(1.1);
+    &:hover,
+    &:focus-within,
+    &.iui-selected {
+      .iui-tile-thumbnail-picture {
+        transform: translateZ(0) scale(1.1);
+      }
     }
   }
 

package/scss/toast-notification/classes.scss

@@ -17,7 +17,7 @@
   align-items: center;
   flex-direction: column;
   justify-content: center;
-  z-index: 1070;
+  z-index: 99999;
 
   @media screen and (max-width: 400px) {
     width: calc(100vw - 36px);

package/scss/toggle-switch/toggle-switch.scss

@@ -30,6 +30,9 @@
     @include themed {
       color: t(iui-text-color-muted);
     }
+    @media (forced-colors: active) {
+      color: GrayText;
+    }
   }
 
   // For labels on the left
@@ -92,14 +95,24 @@
   // #region Unchecked toggle switch
   background-color: var(--iui-color-background-1);
   border-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+  @media (forced-colors: active) {
+    border-color: CanvasText;
+  }
 
   &::after {
     background-color: var(--iui-color-foreground-body);
     opacity: var(--iui-opacity-2);
+    @media (forced-colors: active) {
+      background-color: CanvasText;
+      opacity: 1;
+    }
   }
 
   &:hover {
     border-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
+    @media (forced-colors: active) {
+      border-color: CanvasText;
+    }
   }
 
   @include focus-visible {
@@ -111,11 +124,19 @@
   &:checked {
     background-color: var(--iui-color-background-primary);
     border-color: var(--iui-color-background-primary);
+    @media (forced-colors: active) {
+      background-color: Highlight;
+      border-color: Highlight;
+    }
 
     &::after {
       transform: translateX($iui-toggle-switch-handle-size + $iui-toggle-switch-handle-offset);
       background-color: var(--iui-color-foreground-accessory);
       opacity: var(--iui-opacity-2);
+      @media (forced-colors: active) {
+        background-color: HighlightText;
+        opacity: 1;
+      }
     }
 
     ~ .iui-toggle-switch-icon {
@@ -141,10 +162,18 @@
     cursor: not-allowed;
     background-color: var(--iui-color-background-disabled);
     border-color: var(--iui-color-background-disabled);
+    @media (forced-colors: active) {
+      border-color: GrayText;
+    }
 
     &::after {
       background-color: var(--iui-color-foreground-body);
       opacity: var(--iui-opacity-5);
+
+      @media (forced-colors: active) {
+        background-color: GrayText;
+        opacity: 0.75;
+      }
     }
 
     ~ .iui-toggle-switch-icon {
@@ -152,8 +181,24 @@
       fill: var(--iui-icons-color-actionable);
     }
 
-    &:checked ~ .iui-toggle-switch-icon {
-      opacity: var(--iui-opacity-5);
+    &:checked {
+      @media (forced-colors: active) {
+        background-color: GrayText;
+      }
+
+      &::after {
+        @media (forced-colors: active) {
+          background-color: Canvas;
+        }
+      }
+
+      ~ .iui-toggle-switch-icon {
+        opacity: var(--iui-opacity-5);
+        @media (forced-colors: active) {
+          fill: Canvas;
+          opacity: 0.75;
+        }
+      }
     }
   }
   // #endregion Disabled toggle switch
@@ -170,5 +215,8 @@
     transition: opacity $iui-speed-fast ease-out;
     pointer-events: none;
     fill: var(--iui-color-foreground-accessory);
+    @media (forced-colors: active) {
+      fill: HighlightText;
+    }
   }
 }

package/scss/inputs/radio-tile.scss

@@ -1,200 +0,0 @@
-// 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';
-
-@mixin iui-radio-tile {
-  display: inline-flex;
-  flex-wrap: wrap;
-  width: fit-content;
-  user-select: none;
-  // Create stacking context
-  position: relative;
-  z-index: 0;
-
-  > label {
-    cursor: pointer;
-
-    > input {
-      width: 0;
-      height: 0;
-      appearance: none;
-      opacity: 0;
-      position: absolute;
-    }
-
-    // Radio tile styling
-    > .iui-radio-tile {
-      width: $iui-xl * 5;
-      height: 100%;
-      box-sizing: border-box;
-      padding: $iui-s;
-      position: relative;
-      z-index: 1;
-      @media (prefers-reduced-motion: no-preference) {
-        transition: border-color $iui-speed-fast ease-out;
-      }
-
-      @include themed {
-        border: 1px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
-        background-color: t(iui-color-background-1);
-      }
-
-      > .iui-icon {
-        width: $iui-icons-xl;
-        height: $iui-icons-xl;
-        display: block;
-        margin: 0 auto;
-        margin-top: round($iui-baseline * 0.5);
-        margin-bottom: $iui-baseline;
-        @media (prefers-reduced-motion: no-preference) {
-          transition: fill $iui-speed-fast ease-out;
-        }
-        @include themed {
-          fill: t(iui-icons-color);
-        }
-      }
-
-      > .iui-checkmark {
-        display: none;
-        width: $iui-icons-default;
-        height: $iui-icons-default;
-        position: absolute;
-        right: $iui-s;
-
-        @include themed {
-          fill: t(iui-icons-color-primary);
-        }
-      }
-
-      > .iui-label {
-        font-size: $iui-font-size;
-        font-weight: $iui-font-weight-semibold;
-        line-height: $iui-line-height;
-        text-align: center;
-
-        @include themed {
-          color: t(iui-text-color);
-        }
-      }
-
-      > .iui-description {
-        font-size: $iui-font-size-small;
-        line-height: round($iui-baseline * 1.375);
-        text-align: center;
-
-        @include themed {
-          color: t(iui-text-color-muted);
-        }
-      }
-    }
-
-    // Rounded corners on first tile
-    &:first-child > .iui-radio-tile {
-      border-radius: $iui-border-radius 0 0 $iui-border-radius;
-    }
-
-    // Rounded corners on last tile
-    &:last-child > .iui-radio-tile {
-      border-radius: 0 $iui-border-radius $iui-border-radius 0;
-    }
-
-    // All tiles shift 1px left so we don't have 2px thick dividers
-    &:not(:first-child) > .iui-radio-tile {
-      margin-left: -1px;
-    }
-
-    // Adds focus to enabled radio tiles
-    input:enabled {
-      &:focus ~ .iui-radio-tile {
-        @include themed {
-          outline: 2px solid t(iui-color-foreground-primary);
-          outline-offset: -4px;
-        }
-      }
-
-      &:focus:not(:focus-visible) ~ .iui-radio-tile {
-        outline: none;
-      }
-    }
-
-    // Adds hover to everything that is not checked or  disabled
-    &:hover > input:enabled:not(:checked) ~ .iui-radio-tile {
-      z-index: 2;
-      @include themed {
-        border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
-      }
-      @media (prefers-reduced-motion: no-preference) {
-        transition: border-color $iui-speed-fast ease-out;
-      }
-
-      > .iui-icon {
-        @include themed {
-          fill: t(iui-icons-color-actionable);
-        }
-        @media (prefers-reduced-motion: no-preference) {
-          transition: fill $iui-speed-fast ease-out;
-        }
-      }
-    }
-
-    // Styles checked radio tile
-    input:checked ~ .iui-radio-tile {
-      padding: $iui-s - 1;
-      z-index: 3;
-
-      @include themed {
-        border: 2px solid t(iui-color-foreground-primary);
-      }
-
-      > .iui-icon {
-        @include themed {
-          fill: t(iui-icons-color-primary);
-        }
-      }
-
-      > .iui-checkmark {
-        display: inline-block;
-      }
-    }
-
-    // Styles disabled radio tile
-    input:disabled ~ .iui-radio-tile {
-      cursor: not-allowed;
-      z-index: 0;
-
-      @include themed {
-        border-color: t(iui-color-background-disabled);
-        background-color: t(iui-color-background-disabled);
-      }
-
-      > .iui-checkmark {
-        @include themed {
-          fill: t(iui-icons-color-actionable-disabled);
-        }
-      }
-
-      > .iui-icon {
-        @include themed {
-          fill: t(iui-icons-color-actionable-disabled);
-        }
-        filter: $iui-icons-color-multicolor-disabled;
-      }
-
-      > .iui-label {
-        @include themed {
-          color: t(iui-text-color-muted);
-        }
-      }
-    }
-
-    // Styles disabled checked radio tile
-    input:disabled:checked ~ .iui-radio-tile {
-      z-index: 3;
-
-      @include themed {
-        border: 2px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
-      }
-    }
-  }
-}