@itwin/itwinui-css 0.61.0 → 0.63.1

package/scss/slider/slider.scss

@@ -9,30 +9,18 @@ $tick-height: $iui-baseline; // 11px
 
 @mixin iui-slider-component-container {
   display: flex;
-  min-height: $iui-baseline * 2;
-
-  .iui-slider-min,
-  .iui-slider-max {
-    user-select: all;
-    margin-top: $iui-xxs;
 
-    svg {
-      @include iui-icons-default;
-      margin-top: $iui-xs;
-    }
-  }
-
-  .iui-slider-min {
-    margin-right: $iui-sm;
-    text-align: right;
+  &.iui-disabled {
+    @include iui-slider-disabled;
   }
+}
 
-  .iui-slider-max {
-    margin-left: $iui-sm;
-  }
+@mixin iui-slider-endpoints {
+  user-select: all;
 
-  &.iui-disabled {
-    @include iui-slider-disabled;
+  svg {
+    @include iui-icons-default;
+    margin-top: $iui-xs;
   }
 }
 
@@ -49,12 +37,12 @@ $tick-height: $iui-baseline; // 11px
 
 @mixin iui-slider-rail {
   position: absolute;
-  width: 100%;
-  height: $track-height;
-  top: $iui-sm;
   @include themed {
     background-color: t(iui-color-background-border);
   }
+  @media (forced-colors: active) {
+    background-color: CanvasText;
+  }
 }
 
 @mixin iui-slider-thumb {
@@ -62,10 +50,6 @@ $tick-height: $iui-baseline; // 11px
   height: $thumb-height;
   width: $thumb-height;
   border-radius: 100%;
-  top: $track-height + 1; // position center of thumb in center of track
-  transform: translateX(
-    (-$thumb-height - 2) * 0.5
-  ); // Adjust the left (set in code) by radius of thumb so thumb center is at value position
   z-index: 1;
   cursor: grab;
   @include iui-focus($thickness: 2px);
@@ -73,6 +57,10 @@ $tick-height: $iui-baseline; // 11px
     background: t(iui-color-background-1);
     border: 1px solid t(iui-color-background-border);
   }
+  @media (forced-colors: active) {
+    background: Canvas;
+    border: 1px solid CanvasText;
+  }
 
   &:active {
     cursor: grabbing;
@@ -82,17 +70,17 @@ $tick-height: $iui-baseline; // 11px
 @mixin iui-slider-track {
   pointer-events: none;
   position: absolute;
-  height: $track-height;
-  left: 0;
   top: $iui-sm;
   @include themed {
     background-color: t(iui-color-foreground-primary);
   }
+  @media (forced-colors: active) {
+    background-color: Highlight;
+  }
 }
 
 @mixin iui-slider-ticks {
   position: relative;
-  padding-top: $iui-m;
   display: flex;
   pointer-events: none;
   justify-content: space-between;
@@ -103,12 +91,15 @@ $tick-height: $iui-baseline; // 11px
     display: flex;
     pointer-events: none;
     justify-content: center;
-    width: 1px;
-    height: $tick-height;
-    line-height: $tick-height * 4;
-    margin-bottom: $tick-height * 2;
-    @include themed {
-      background-color: t(iui-color-background-4);
+    align-items: center;
+
+    &::before {
+      @include themed {
+        background-color: t(iui-color-background-4);
+      }
+      @media (forced-colors: active) {
+        background-color: CanvasText;
+      }
     }
   }
 }
@@ -127,12 +118,19 @@ $tick-height: $iui-baseline; // 11px
       background-color: t(iui-color-background-4);
       border-color: t(iui-color-background-4);
     }
+    @media (forced-colors: active) {
+      background-color: GrayText;
+      border-color: GrayText;
+    }
   }
 
   .iui-slider-track {
     @include themed {
       background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
     }
+    @media (forced-colors: active) {
+      background-color: GrayText;
+    }
   }
 
   .iui-slider-min,
@@ -142,5 +140,117 @@ $tick-height: $iui-baseline; // 11px
     @include themed {
       color: t(iui-text-color-muted);
     }
+    @media (forced-colors: active) {
+      color: GrayText;
+    }
+  }
+}
+
+@mixin iui-slider-horizontal {
+  min-height: $iui-baseline * 2;
+
+  .iui-slider-rail {
+    width: 100%;
+    height: $track-height;
+    top: $iui-sm;
+  }
+
+  .iui-slider-thumb {
+    top: $track-height + 1; // position center of thumb in center of track
+    transform: translateX(
+      -50%
+    ); // Adjust the left (set in code) by radius of thumb so thumb center is at value position
+  }
+
+  .iui-slider-track {
+    height: $track-height;
+    left: 0;
+  }
+
+  .iui-slider-ticks {
+    padding-top: $iui-m;
+
+    .iui-slider-tick {
+      flex-direction: column;
+      width: 1px;
+
+      &::before {
+        content: '';
+        width: 1px;
+        height: $tick-height;
+      }
+    }
+  }
+
+  .iui-slider-min,
+  .iui-slider-max {
+    margin-top: $iui-xxs;
+  }
+
+  .iui-slider-min {
+    margin-right: $iui-sm;
+    text-align: right;
+  }
+
+  .iui-slider-max {
+    margin-left: $iui-sm;
+  }
+}
+
+@mixin iui-slider-vertical {
+  flex-direction: column-reverse;
+  min-width: $iui-baseline * 2;
+  height: 100%;
+
+  .iui-slider-rail {
+    width: $track-height;
+    height: 100%;
+    left: $iui-sm;
+  }
+
+  .iui-slider-thumb {
+    transform: translateY(
+      50%
+    ); // Adjust the bottom (set in code) by radius of thumb so thumb center is at value position
+    left: $track-height + 1;
+  }
+
+  .iui-slider-track {
+    width: $track-height;
+    bottom: 0;
+    left: $iui-sm;
+  }
+
+  .iui-slider-ticks {
+    padding-left: $iui-m;
+    flex-direction: column-reverse;
+    align-items: flex-start;
+    height: 100%;
+
+    .iui-slider-tick {
+      flex: row;
+      height: 1px;
+
+      &::before {
+        content: '';
+        width: $tick-height;
+        height: 1px;
+        margin-right: $tick-height * 1;
+      }
+    }
+  }
+
+  .iui-slider-min,
+  .iui-slider-max {
+    margin-left: $iui-xxs;
+    text-align: center;
+  }
+
+  .iui-slider-min {
+    margin-top: $iui-sm;
+  }
+
+  .iui-slider-max {
+    margin-bottom: $iui-sm;
   }
 }

package/scss/table/table.scss

@@ -195,7 +195,11 @@
 
   &.iui-zebra-striping .iui-row:nth-child(even):not(.iui-selected) .iui-cell {
     @include themed {
-      background-color: rgba(t(iui-color-foreground-body-rgb), 0.02);
+      background: linear-gradient(
+        rgba(t(iui-color-foreground-body-rgb), 0.02),
+        rgba(t(iui-color-foreground-body-rgb), 0.02)
+      ),
+        linear-gradient(t(iui-color-background-1), t(iui-color-background-1));
     }
   }
 

package/scss/tabs/default.scss

@@ -56,6 +56,10 @@
       ~ .iui-tabs-content {
         margin-top: -1px;
       }
+
+      :where(.iui-button) {
+        height: 100%;
+      }
     }
   }
 
@@ -72,6 +76,10 @@
       ~ .iui-tabs-content {
         margin-left: -1px;
       }
+
+      :where(.iui-button) {
+        width: 100%;
+      }
     }
   }
 

package/scss/tile/classes.scss

@@ -4,6 +4,18 @@
 
 .iui-tile {
   @include iui-tile;
+
+  &.iui-positive {
+    @include iui-tile-status(positive);
+  }
+
+  &.iui-warning {
+    @include iui-tile-status(warning);
+  }
+
+  &.iui-negative {
+    @include iui-tile-status(negative);
+  }
 }
 
 .iui-tile-thumbnail-type-indicator {

package/scss/tile/tile.scss

@@ -87,6 +87,35 @@
       -webkit-line-clamp: 2;
     }
   }
+
+  //#region Statuses
+  &.iui-progress {
+    cursor: progress;
+    font-style: italic;
+  }
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+
+    .iui-tile-name-label {
+      color: var(--iui-text-color-muted);
+    }
+
+    .iui-thumbnail-icon,
+    .iui-tile-thumbnail-picture {
+      filter: grayscale(100%);
+    }
+
+    &:hover .iui-tile-thumbnail-picture,
+    &:focus-within .iui-tile-thumbnail-picture {
+      transform: none;
+    }
+
+    .iui-tile-more-options {
+      display: none;
+    }
+  }
+  //#endregion Statuses
 }
 
 @mixin iui-tile-content {
@@ -319,3 +348,23 @@
     @include visually-hidden;
   }
 }
+
+@mixin iui-tile-status($status) {
+  @include iui-text-selection($status);
+
+  .iui-tile-thumbnail {
+    box-shadow: 0 $iui-xs 0 var(--iui-color-foreground-#{$status});
+  }
+
+  @at-root &.iui-folder .iui-tile-thumbnail {
+    box-shadow: $iui-xs 0 0 var(--iui-color-foreground-#{$status});
+  }
+
+  .iui-tile-name-label {
+    color: var(--iui-color-foreground-#{$status});
+  }
+
+  .iui-tile-status-icon {
+    fill: var(--iui-color-foreground-#{$status});
+  }
+}