@itwin/itwinui-css 0.55.0 → 0.58.0

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

@@ -0,0 +1,209 @@
+// 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));
+    }
+
+    .iui-radio-tile-icon {
+      @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);
+    }
+
+    .iui-radio-tile-icon {
+      @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);
+      }
+    }
+
+    .iui-radio-tile-icon {
+      filter: $iui-icons-color-multicolor-disabled;
+      @media (forced-colors: active) {
+        fill: GrayText;
+      }
+      @include themed {
+        fill: t(iui-icons-color-actionable-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;
+
+  @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/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/classes.scss

@@ -18,6 +18,10 @@
   @include iui-table-header;
 }
 
+.iui-table-header-actions-container {
+  @include iui-table-header-actions-container;
+}
+
 .iui-table-body {
   @include iui-table-body;
 }

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

package/scss/table/table.scss

@@ -37,6 +37,8 @@
 
   .iui-cell:not(.iui-slot) {
     @include iui-focus;
+    flex-wrap: wrap;
+    column-gap: $iui-xs;
 
     &.iui-actionable {
       cursor: pointer;
@@ -46,8 +48,7 @@
       cursor: grabbing;
     }
 
-    > .iui-filter-button {
-      margin-left: $iui-xs;
+    .iui-filter-button {
       margin-right: $iui-s;
 
       &:not(.iui-active) {
@@ -155,6 +156,12 @@
   }
 }
 
+@mixin iui-table-header-actions-container {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+}
+
 @mixin iui-table-body {
   overflow-y: scroll;
   overflow: overlay;

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/css/modal.css

@@ -1,132 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-.iui-modal{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  z-index:999;
-  position:fixed;
-  top:0;
-  left:0;
-  width:100%;
-  height:100%;
-  background-color:rgba(0, 0, 0, 0.4);
-  background-color:rgba(0, 0, 0, var(--iui-opacity-4));
-  visibility:hidden;
-  opacity:0;
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-modal{
-    transition:visibility 0s linear 0.2s, opacity 0.2s ease-out;
-  }
-}
-.iui-modal.iui-modal-visible{
-  visibility:visible;
-  opacity:1;
-  transition-delay:0s;
-}
-.iui-modal > .iui-modal-dialog{
-  position:absolute;
-  left:50%;
-  top:33%;
-  transform:translate(-50%, -33%);
-  z-index:1000;
-  max-width:50%;
-  min-width:380px;
-  max-height:100vh;
-  border-radius:3px;
-  box-shadow:0 9px 46px rgba(0, 0, 0, 0.25);
-  padding:11px 16px;
-  box-sizing:border-box;
-  background-color:white;
-  background-color:var(--iui-color-background-1);
-}
-@media screen and (max-width: 400px){
-  .iui-modal > .iui-modal-dialog{
-    max-width:95%;
-    width:95%;
-    min-width:95%;
-  }
-}
-.iui-modal > .iui-modal-dialog .iui-title-bar{
-  display:flex;
-  align-items:center;
-  margin-bottom:11px;
-  justify-content:space-between;
-}
-.iui-modal > .iui-modal-dialog .iui-title-bar > .iui-title{
-  font-size:18px;
-  white-space:nowrap;
-  overflow:hidden;
-  text-overflow:ellipsis;
-  line-height:1.5;
-}
-.iui-modal > .iui-modal-dialog .iui-button-bar{
-  margin-top:11px;
-  display:flex;
-  align-items:center;
-  justify-content:flex-end;
-}
-.iui-modal > .iui-modal-dialog .iui-button-bar > .iui-button:not(:last-child){
-  margin-right:8px;
-}
-.iui-modal > .iui-modal-dialog .iui-modal-content{
-  flex-grow:2;
-  margin:0 -16px;
-  padding:0 16px;
-  overflow-y:auto;
-  overflow-y:overlay;
-}
-.iui-modal-full-page > .iui-modal-dialog{
-  display:flex;
-  flex-direction:column;
-  height:100vh;
-  width:100vw;
-  left:0;
-  top:0;
-  transform:none;
-  max-width:initial;
-  min-width:initial;
-  border-radius:0;
-  will-change:transform;
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-modal-full-page{
-    transition:visibility 0s linear 0.8s, opacity 0.4s ease-out 0.2s;
-  }
-}
-.iui-modal-full-page > .iui-modal-dialog{
-  transform:translateY(100%);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-modal-full-page > .iui-modal-dialog{
-    transition:visibility 0s linear 0.4s, opacity 0s linear 0.4s, transform 0.25s ease-in;
-  }
-}
-.iui-modal-full-page.iui-modal-visible > .iui-modal-dialog{
-  transform:translateY(0);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-modal-full-page.iui-modal-visible > .iui-modal-dialog{
-    transition:transform 0.3s ease-out;
-  }
-}
-.iui-modal-animation-enter .iui-modal-full-page .iui-modal-dialog{
-  transform:translateY(100%);
-  opacity:0;
-}
-.iui-modal-animation-enter-active .iui-modal-full-page .iui-modal-dialog{
-  transform:translateY(0);
-  opacity:1;
-}
-.iui-modal-animation-enter .iui-modal{
-  visibility:hidden;
-  opacity:0;
-}
-.iui-modal-animation-enter-active .iui-modal{
-  visibility:visible;
-  opacity:1;
-}