@itwin/itwinui-css 0.55.0 → 0.56.0

package/scss/inputs/checkbox.scss

@@ -66,6 +66,13 @@
 
   @include iui-focus($thickness: 2px);
 
+  &:disabled {
+    --_iui-checkbox-svg-color: var(--iui-icons-color-actionable-disabled);
+    --_iui-checkbox-border-color: var(--iui-color-background-border);
+    --_iui-checkbox-background-color: var(--iui-color-background-disabled);
+    cursor: not-allowed;
+  }
+
   &.iui-checkbox-visibility {
     --_iui-checkbox-checkmark-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 2.99051a8.81883 8.81883 0 0 0 -8 4.95062 8.74664 8.74664 0 0 0 8 5.06836 8.63266 8.63266 0 0 0 8-5.06836 8.83631 8.83631 0 0 0 -8-4.95062zm-1.31445 1.86981a1.47663 1.47663 0 1 1 -1.47663 1.47668 1.47665 1.47665 0 0 1 1.47663-1.47668zm1.31445 6.64917a7.17486 7.17486 0 0 1 -6.30475-3.55237 7.4952 7.4952 0 0 1 2.81475-2.6336 3.83956 3.83956 0 1 0 6.98126.00244 7.522 7.522 0 0 1 2.81774 2.63916 7.09785 7.09785 0 0 1 -6.309 3.54437z" /></svg>');
     --_iui-checkbox-indeterminate-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 3v7.9a4.01179 4.01179 0 0 0 4-4 6.7509 6.7509 0 0 0 -.2-1.4l.1.1a6.89429 6.89429 0 0 1 2.4 2.4 8.39088 8.39088 0 0 1 -2.3 2.3 6.89412 6.89412 0 0 1 -3.9 1.2c-.03345 0-.06653-.00677-.1-.0072v1.5072a8.90686 8.90686 0 0 0 8-5 8.90686 8.90686 0 0 0 -8-5z" opacity=".33" /><path d="m8 0a1 1 0 0 0 -1 1v2.07135a8.91637 8.91637 0 0 0 -7 4.92865 8.91637 8.91637 0 0 0 7 4.92865v2.07135a1 1 0 0 0 2 0v-14a1 1 0 0 0 -1-1zm-1.5 4.9a1.55426 1.55426 0 0 1 .5.087v2.81451a1.40746 1.40746 0 0 1 -.5.09849 1.538 1.538 0 0 1 -1.5-1.5 1.53794 1.53794 0 0 1 1.5-1.5zm-2.3 5.4a6.97279 6.97279 0 0 1 -2.5-2.3 6.89429 6.89429 0 0 1 2.4-2.4c.1 0 .1-.1.2-.1a3.194 3.194 0 0 0 -.3 1.4 4.0047 4.0047 0 0 0 3 3.857v.65289a6.37491 6.37491 0 0 1 -2.8-1.10989z" /></svg>');
@@ -82,13 +89,11 @@
       --_iui-checkbox-border-color: transparent;
       --_iui-checkbox-background-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
     }
-  }
 
-  &:disabled {
-    --_iui-checkbox-svg-color: var(--iui-icons-color-actionable-disabled);
-    --_iui-checkbox-border-color: var(--iui-color-background-disabled);
-    --_iui-checkbox-background-color: var(--iui-color-background-disabled);
-    cursor: not-allowed;
+    &:where(:disabled) {
+      --_iui-checkbox-svg-color: var(--iui-icons-color-actionable-disabled);
+      --_iui-checkbox-background-color: var(--iui-color-background-disabled);
+    }
   }
 
   &.iui-loading {

package/scss/inputs/classes.scss

@@ -65,7 +65,3 @@
 .iui-radio {
   @include iui-radio;
 }
-
-.iui-radio-tile-container {
-  @include iui-radio-tile;
-}

package/scss/inputs/index.scss

@@ -8,4 +8,3 @@
 @import './checkbox-radio';
 @import './checkbox';
 @import './radio';
-@import './radio-tile';

package/scss/inputs/labeled-inputs.scss

@@ -278,7 +278,7 @@
 
     svg {
       @include themed {
-        fill: t(iui-icons-color);
+        fill: t(iui-icons-color-actionable);
       }
       transition: transform $iui-speed-fast ease-out;
     }

package/scss/radio-tile/classes.scss

@@ -0,0 +1,31 @@
+// 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-radio-tile {
+  @include iui-radio-tile;
+}
+
+.iui-radio-tile-content {
+  @include iui-radio-tile-content;
+}
+
+.iui-radio-tile-container {
+  @include iui-radio-tile-container;
+}
+
+.iui-radio-tile-input {
+  @include iui-radio-tile-input;
+}
+
+.iui-radio-tile-icon {
+  @include iui-radio-tile-icon;
+}
+
+.iui-radio-tile-label {
+  @include iui-radio-tile-label;
+}
+
+.iui-radio-tile-sublabel {
+  @include iui-radio-tile-sublabel;
+}

package/scss/radio-tile/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 './radio-tile';

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

@@ -0,0 +1,214 @@
+// 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 {
+  cursor: pointer;
+  @include themed {
+    -webkit-tap-highlight-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
+  }
+
+  &:first-of-type > .iui-radio-tile-content {
+    border-radius: $iui-border-radius 0 0 $iui-border-radius;
+  }
+
+  &:last-of-type > .iui-radio-tile-content {
+    border-radius: 0 $iui-border-radius $iui-border-radius 0;
+  }
+
+  &:not(:first-of-type) > .iui-radio-tile-content {
+    margin-left: -1px;
+  }
+}
+@mixin iui-radio-tile-content {
+  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);
+  }
+
+  &:hover {
+    z-index: 2;
+    @include themed {
+      border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
+    }
+
+    svg {
+      @media (forced-colors: active) {
+        fill: CanvasText;
+      }
+      @include themed {
+        fill: t(iui-icons-color-actionable);
+      }
+    }
+  }
+}
+
+@mixin iui-radio-tile-container {
+  display: inline-flex;
+  flex-wrap: wrap;
+  user-select: none;
+  // Create stacking context
+  position: relative;
+  z-index: 0;
+}
+
+@mixin iui-radio-tile-input {
+  width: 0;
+  height: 0;
+  appearance: none;
+  opacity: 0;
+  position: absolute;
+  @include focus-visible {
+    + * {
+      outline-offset: -4px;
+      @media (forced-colors: active) {
+        outline-color: Highlight;
+      }
+      @include themed {
+        outline: 2px solid t(iui-color-foreground-primary);
+      }
+    }
+  }
+
+  &:checked + * {
+    padding: $iui-s - 1;
+    z-index: 3;
+    @media (forced-colors: active) {
+      border-color: Highlight;
+    }
+    @include themed {
+      border: 2px solid t(iui-color-foreground-primary);
+    }
+
+    svg {
+      @media (forced-colors: active) {
+        fill: Highlight;
+      }
+      @include themed {
+        fill: t(iui-icons-color-primary);
+      }
+    }
+
+    &::after {
+      content: '';
+      width: $iui-icons-default;
+      height: $iui-icons-default;
+      position: absolute;
+      top: $iui-s;
+      right: $iui-s;
+      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6,14L0,8l2-2l4,4l8-8l2,2L6,14z" /></svg>');
+      @media (forced-colors: active) {
+        background-color: Highlight;
+      }
+      @include themed {
+        background-color: t(iui-color-foreground-primary);
+      }
+    }
+  }
+
+  &:disabled + * {
+    cursor: not-allowed;
+    z-index: 0;
+    @include themed {
+      border-color: t(iui-color-background-disabled);
+      background-color: t(iui-color-background-disabled);
+    }
+
+    &::after {
+      @media (forced-colors: active) {
+        background-color: GrayText;
+      }
+      @include themed {
+        background-color: t(iui-icons-color-actionable-disabled);
+      }
+    }
+
+    svg {
+      @media (forced-colors: active) {
+        fill: GrayText;
+      }
+      @include themed {
+        fill: t(iui-icons-color-actionable-disabled);
+      }
+    }
+
+    .iui-radio-tile-icon {
+      filter: $iui-icons-color-multicolor-disabled;
+    }
+
+    .iui-radio-tile-label,
+    .iui-radio-tile-sublabel {
+      @media (forced-colors: active) {
+        color: GrayText;
+      }
+    }
+
+    .iui-radio-tile-label {
+      @include themed {
+        color: t(iui-text-color-muted);
+      }
+    }
+  }
+
+  &:disabled:checked + * {
+    z-index: 3;
+    @media (forced-colors: active) {
+      border-color: GrayText;
+    }
+    @include themed {
+      border: 2px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
+    }
+  }
+}
+
+@mixin iui-radio-tile-icon {
+  width: $iui-icons-xl;
+  height: $iui-icons-xl;
+  display: block;
+  margin: 0 auto;
+  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);
+    }
+  }
+}
+
+@mixin iui-radio-tile-label {
+  font-size: $iui-font-size;
+  font-weight: $iui-font-weight-semibold;
+  line-height: $iui-line-height;
+  text-align: center;
+  word-break: break-word;
+  @include themed {
+    color: t(iui-text-color);
+  }
+}
+
+@mixin iui-radio-tile-sublabel {
+  font-size: $iui-font-size-small;
+  line-height: round($iui-baseline * 1.375);
+  text-align: center;
+  word-break: break-word;
+  @include themed {
+    color: t(iui-text-color-muted);
+  }
+}

package/scss/tabs/tabs.scss

@@ -34,6 +34,12 @@
           fill: t(iui-icons-color-primary);
         }
       }
+
+      .iui-tab-description {
+        @include themed {
+          opacity: t(iui-opacity-1);
+        }
+      }
     }
 
     &[disabled] {

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