@itwin/itwinui-css 0.59.2 → 1.0.0-dev.0

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

@@ -1,54 +1,34 @@
 // 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 '../utils/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;
-  }
+  -webkit-tap-highlight-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
 }
+
 @mixin iui-radio-tile-content {
   width: $iui-xl * 5;
   height: 100%;
-  box-sizing: border-box;
   padding: $iui-s;
   position: relative;
   z-index: 1;
+  outline: 1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+  background-color: var(--iui-color-background-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);
+    transition: outline-color $iui-speed-fast ease-out;
   }
 
   &:hover {
     z-index: 2;
-    @include themed {
-      border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
-    }
+    outline-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
 
     .iui-radio-tile-icon {
+      fill: var(--iui-icons-color-actionable);
       @media (forced-colors: active) {
         fill: CanvasText;
       }
-      @include themed {
-        fill: t(iui-icons-color-actionable);
-      }
     }
   }
 }
@@ -56,10 +36,11 @@
 @mixin iui-radio-tile-container {
   display: inline-flex;
   flex-wrap: wrap;
+  gap: 1px; // prevent overlapping from outline
   user-select: none;
   // Create stacking context
   position: relative;
-  z-index: 0;
+  isolation: isolate;
 }
 
 @mixin iui-radio-tile-input {
@@ -68,35 +49,22 @@
   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;
+    padding: $iui-s;
     z-index: 3;
+    outline: $iui-xxs solid var(--iui-color-foreground-primary);
+    outline-offset: -1px;
+
     @media (forced-colors: active) {
-      border-color: Highlight;
-    }
-    @include themed {
-      border: 2px solid t(iui-color-foreground-primary);
+      outline-color: Highlight;
     }
 
     .iui-radio-tile-icon {
+      fill: var(--iui-icons-color-primary);
       @media (forced-colors: active) {
         fill: Highlight;
       }
-      @include themed {
-        fill: t(iui-icons-color-primary);
-      }
     }
 
     &::after {
@@ -107,40 +75,36 @@
       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>');
+      background-color: var(--iui-color-foreground-primary);
       @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);
-    }
+    outline-color: var(--iui-color-background-disabled);
+    background-color: var(--iui-color-background-disabled);
 
     &::after {
+      background-color: var(--iui-icons-color-actionable-disabled);
       @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;
+      fill: var(--iui-icons-color-actionable-disabled);
       @media (forced-colors: active) {
         fill: GrayText;
       }
-      @include themed {
-        fill: t(iui-icons-color-actionable-disabled);
-      }
+    }
+
+    .iui-radio-tile-label {
+      color: var(--iui-text-color-muted);
     }
 
     .iui-radio-tile-label,
@@ -149,21 +113,24 @@
         color: GrayText;
       }
     }
-
-    .iui-radio-tile-label {
-      @include themed {
-        color: t(iui-text-color-muted);
-      }
-    }
   }
 
   &:disabled:checked + * {
     z-index: 3;
+    outline: $iui-xxs solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
     @media (forced-colors: active) {
-      border-color: GrayText;
+      outline-color: GrayText;
     }
-    @include themed {
-      border: 2px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
+  }
+
+  @include focus-visible {
+    + * { // outline for checkmark
+      z-index: 2;
+      outline-offset: -$iui-xxs;
+      outline: 3px solid var(--iui-color-foreground-primary);
+      @media (forced-colors: active) {
+        outline-color: Highlight;
+      }
     }
   }
 }
@@ -172,19 +139,14 @@
   width: $iui-icons-xl;
   height: $iui-icons-xl;
   display: block;
-  margin: 0 auto;
-  padding-top: round($iui-baseline * 0.5);
-  padding-bottom: $iui-baseline;
-
+  margin: round($iui-baseline * 0.5) auto $iui-baseline;
+  fill: var(--iui-icons-color);
   @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 {
@@ -193,9 +155,7 @@
   line-height: $iui-line-height;
   text-align: center;
   word-break: break-word;
-  @include themed {
-    color: t(iui-text-color);
-  }
+  color: var(--iui-text-color);
 }
 
 @mixin iui-radio-tile-sublabel {
@@ -203,7 +163,5 @@
   line-height: round($iui-baseline * 1.375);
   text-align: center;
   word-break: break-word;
-  @include themed {
-    color: t(iui-text-color-muted);
-  }
+  color: var(--iui-text-color-muted);
 }

package/scss/select/classes.scss

@@ -0,0 +1,27 @@
+// 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-select-button {
+  @include iui-select-button;
+}
+
+.iui-select-tag-container {
+  @include iui-select-tag-container;
+}
+
+.iui-select-tag {
+  @include iui-select-tag;
+}
+
+.iui-select-tag-label {
+  @include iui-select-tag-label;
+}
+
+.iui-select-tag-button {
+  @include iui-select-tag-button;
+}
+
+.iui-select-tag-button-icon {
+  @include iui-select-tag-button-icon;
+}

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

package/scss/select/select.scss

@@ -0,0 +1,124 @@
+// 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 '../menu/index';
+@import '../utils/index';
+@import '../tag/index';
+@import '../button/index';
+
+@mixin iui-select-button {
+  @include iui-focus($offset: -2px, $thickness: 2px);
+  width: 100%;
+  margin: 0;
+  border-radius: $iui-border-radius;
+  padding: $iui-component-padding-vertical $iui-component-padding-horizontal;
+  min-height: $iui-component-height;
+  transition: border-color $iui-speed-fast ease-out;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  position: relative;
+  overflow: hidden;
+  color: var(--iui-text-color);
+  background-color: var(--iui-color-background-1);
+  border: 1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+
+  &.iui-small {
+    padding-top: $iui-component-padding-vertical-small;
+    padding-bottom: $iui-component-padding-vertical-small;
+    min-height: $iui-component-height-small;
+  }
+
+  &.iui-large {
+    padding-top: $iui-component-padding-vertical-large;
+    padding-bottom: $iui-component-padding-vertical-large;
+    min-height: $iui-component-height-large;
+    font-size: $iui-font-size-leading;
+  }
+
+  &.iui-disabled {
+    background-color: var(--iui-color-background-disabled);
+    border-color: var(--iui-color-background-disabled);
+    --_hover-color: var(--iui-color-background-disabled);
+    cursor: not-allowed;
+  }
+
+  .iui-icon {
+    @include iui-menu-icon;
+    fill: currentColor;
+  }
+
+  .iui-content {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &.iui-placeholder {
+    color: var(--iui-text-color-placeholder);
+  }
+}
+
+@mixin iui-select-tag-container {
+  position: absolute;
+  // align wth Select's padding
+  inset: 0 $iui-icons-default + $iui-l 0 $iui-sm;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  gap: $iui-xs;
+  overflow: hidden;
+
+  > * + * {
+    margin-left: $iui-xs;
+    @supports (gap: $iui-xs) {
+      margin-left: 0;
+    }
+  }
+}
+
+@mixin iui-select-tag {
+  @include iui-tag;
+  // Override hardcoded Tag margin
+  margin-top: 0;
+  margin-bottom: 0;
+  display: inline-flex;
+  align-items: center;
+  height: 80%;
+  max-height: $iui-baseline * 3;
+}
+
+@mixin iui-select-tag-label {
+  @include iui-tag-label;
+  display: inline-flex;
+  align-items: center;
+
+  @at-root .iui-select-button.iui-small & {
+    font-size: $iui-font-size-small;
+    line-height: floor($iui-baseline * 1.5);
+  }
+}
+
+@mixin iui-select-tag-button {
+  @include iui-button;
+  @include iui-button-borderless;
+  @include iui-tag-button;
+  padding: 0 $iui-xs;
+  height: 100%;
+  aspect-ratio: 1 / 1;
+
+  @at-root .iui-select-button.iui-small & {
+    font-size: $iui-font-size-small;
+    line-height: floor($iui-baseline * 1.5);
+  }
+}
+
+@mixin iui-select-tag-button-icon {
+  @include iui-button-icon;
+  flex-shrink: 0;
+
+  @at-root .iui-select-button.iui-small & {
+    width: $iui-icons-small;
+    height: $iui-icons-small;
+  }
+}

package/scss/side-navigation/side-navigation.scss

@@ -1,21 +1,20 @@
 // 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 '../utils/index';
+@import '../text/mixins';
 @import '../icon/index';
-@import '../text/index';
 
 @mixin iui-side-navigation {
   display: inline-flex;
   flex: 0 0 auto;
   flex-direction: column;
   height: 100%;
+  background-color: var(--iui-color-background-3);
+  border-right: 1px solid var(--iui-color-background-border);
   @media (prefers-reduced-motion: no-preference) {
     transition: max-width $iui-speed-fast ease-out;
   }
-  @include themed {
-    background-color: t(iui-color-background-3);
-    border-right: 1px solid t(iui-color-background-border);
-  }
 
   > .iui-sidenav-content {
     display: flex;
@@ -50,20 +49,23 @@
 
     + .iui-sidenav-button.iui-expand {
       border: none;
-      @include themed {
-        border-top: 1px solid t(iui-color-background-border);
-      }
+      border-top: 1px solid var(--iui-color-background-border);
     }
   }
 
   &.iui-collapsed {
-    min-width: $iui-icons-large * 3;
-    max-width: $iui-icons-large * 3;
+    box-sizing: content-box;
+    min-width: $iui-icons-large + $iui-side-navigation-icon-margins * 2;
+    max-width: $iui-icons-large + $iui-side-navigation-icon-margins * 2;
 
     // iPhone notch support
     @supports (min-width: unquote('max(0px)')) {
-      min-width: unquote('max(#{$iui-icons-large} * 3, #{$iui-icons-large} * 3 + env(safe-area-inset-left))');
-      max-width: unquote('max(#{$iui-icons-large} * 3, #{$iui-icons-large} * 3 + env(safe-area-inset-left))');
+      min-width: unquote(
+        'max(#{$iui-icons-large} + #{$iui-side-navigation-icon-margins} * 2, #{$iui-icons-large} + #{$iui-side-navigation-icon-margins} * 2 + env(safe-area-inset-left))'
+      );
+      max-width: unquote(
+        'max(#{$iui-icons-large} + #{$iui-side-navigation-icon-margins} * 2, #{$iui-icons-large} + #{$iui-side-navigation-icon-margins} * 2 + env(safe-area-inset-left))'
+      );
     }
   }
 
@@ -77,7 +79,7 @@
   }
 
   .iui-sidenav-button {
-    gap: $iui-icons-large;
+    gap: $iui-side-navigation-icon-margins;
     border-radius: 0;
     border-left: none;
     border-right: none;
@@ -91,11 +93,13 @@
       height: $iui-baseline * 5;
       // iPhone notch support
       @supports (padding: unquote('max(0px)')) {
-        padding-left: unquote('max(#{$iui-icons-large}, #{$iui-icons-large} + env(safe-area-inset-left))');
+        padding-left: unquote(
+          'max(#{$iui-side-navigation-icon-margins}, #{$iui-side-navigation-icon-margins} + env(safe-area-inset-left))'
+        );
       }
     }
 
-    > .iui-button-label {
+    > span {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -104,37 +108,29 @@
     &,
     &:hover,
     &[disabled] {
-      @include themed {
-        border-color: t(iui-color-background-border);
-      }
+      border-color: var(--iui-color-background-border);
     }
 
-    > .iui-button-icon:not(.iui-user-icon) {
+    > .iui-button-icon:not(.iui-avatar) {
       width: $iui-icons-large;
       height: $iui-icons-large;
       flex-shrink: 0;
     }
 
     &.iui-submenu-open .iui-button-icon {
-      @include themed {
-        fill: t(iui-color-foreground-primary);
-      }
+      fill: var(--iui-color-foreground-primary);
     }
 
     &[disabled],
     &:disabled {
-      @include themed {
-        background-color: t(iui-color-background-2);
-      }
+      background-color: var(--iui-color-background-2);
     }
 
     &.iui-expand {
       height: $iui-line-height;
       justify-content: center;
       border: none;
-      @include themed {
-        border-bottom: 1px solid t(iui-color-background-border);
-      }
+      border-bottom: 1px solid var(--iui-color-background-border);
 
       > .iui-button-icon {
         @include iui-icons-small;
@@ -150,15 +146,12 @@
   min-width: $iui-3xl * 2;
   max-width: 50vw;
   height: 100%;
-  box-sizing: border-box;
   overflow-x: hidden;
   overflow-y: auto;
   overflow-y: overlay;
   resize: horizontal;
-  @include themed {
-    background-color: t(iui-color-background-1);
-    border-right: 1px solid t(iui-color-background-border);
-  }
+  background-color: var(--iui-color-background-1);
+  border-right: 1px solid var(--iui-color-background-border);
 
   @include iui-transition-group;
 
@@ -170,7 +163,6 @@
   &-content {
     padding: 0 $iui-sm $iui-baseline;
     flex-shrink: 0;
-    box-sizing: border-box;
   }
 
   &-header {

package/scss/skip-to-content/skip-to-content.scss

@@ -1,13 +1,12 @@
 // 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 '../utils/index';
 
 @mixin iui-skip-to-content-link {
   @include iui-blur($opacity: 3);
   @include iui-focus($offset: 2px, $thickness: 2px);
-  @include themed {
-    color: t(iui-color-foreground-accessory);
-  }
+  color: var(--iui-color-foreground-accessory);
   border-radius: $iui-border-radius-round;
   text-decoration: none;
   user-select: none;

package/scss/slider/slider.scss

@@ -2,6 +2,7 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import '../style/index';
 @import '../icon/index';
+@import '../utils/index';
 
 $thumb-height: $iui-m; // 16px
 $track-height: $iui-xs; // 4px
@@ -41,6 +42,7 @@ $tick-height: $iui-baseline; // 11px
   flex-grow: 1;
   cursor: pointer;
   touch-action: pan-y;
+  isolation: isolate;
 
   &.iui-grabbing {
     cursor: grabbing;
@@ -52,12 +54,11 @@ $tick-height: $iui-baseline; // 11px
   width: 100%;
   height: $track-height;
   top: $iui-sm;
-  @include themed {
-    background-color: t(iui-color-background-border);
-  }
+  background-color: var(--iui-color-background-border);
 }
 
 @mixin iui-slider-thumb {
+  box-sizing: content-box;
   position: absolute;
   height: $thumb-height;
   width: $thumb-height;
@@ -69,10 +70,8 @@ $tick-height: $iui-baseline; // 11px
   z-index: 1;
   cursor: grab;
   @include iui-focus($thickness: 2px);
-  @include themed {
-    background: t(iui-color-background-1);
-    border: 1px solid t(iui-color-background-border);
-  }
+  background: var(--iui-color-background-1);
+  border: 1px solid var(--iui-color-background-border);
 
   &:active {
     cursor: grabbing;
@@ -85,9 +84,7 @@ $tick-height: $iui-baseline; // 11px
   height: $track-height;
   left: 0;
   top: $iui-sm;
-  @include themed {
-    background-color: t(iui-color-foreground-primary);
-  }
+  background-color: var(--iui-color-foreground-primary);
 }
 
 @mixin iui-slider-ticks {
@@ -107,9 +104,7 @@ $tick-height: $iui-baseline; // 11px
     height: $tick-height;
     line-height: $tick-height * 4;
     margin-bottom: $tick-height * 2;
-    @include themed {
-      background-color: t(iui-color-background-4);
-    }
+    background-color: var(--iui-color-background-4);
   }
 }
 
@@ -123,24 +118,18 @@ $tick-height: $iui-baseline; // 11px
 
   .iui-slider-thumb {
     cursor: not-allowed;
-    @include themed {
-      background-color: t(iui-color-background-4);
-      border-color: t(iui-color-background-4);
-    }
+    background-color: var(--iui-color-background-4);
+    border-color: var(--iui-color-background-4);
   }
 
   .iui-slider-track {
-    @include themed {
-      background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
-    }
+    background-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
   }
 
   .iui-slider-min,
   .iui-slider-max,
   .iui-slider-tick {
     user-select: none;
-    @include themed {
-      color: t(iui-text-color-muted);
-    }
+    color: var(--iui-text-color-muted);
   }
 }

package/scss/stepper/classes.scss

@@ -0,0 +1,32 @@
+// 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-stepper {
+  @include iui-stepper;
+}
+
+.iui-stepper-step {
+  @include iui-stepper-step;
+  @include iui-stepper-step-modifiers;
+}
+
+.iui-stepper-circle {
+  @include iui-stepper-circle;
+}
+
+.iui-stepper-track-content {
+  @include iui-stepper-track-content;
+}
+
+.iui-stepper-step-name {
+  @include iui-stepper-step-name;
+}
+
+.iui-stepper-steps-label {
+  @include iui-stepper-steps-label;
+}
+
+.iui-stepper-steps-label-count {
+  @include iui-stepper-steps-label-count;
+}

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