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

package/scss/tile/tile.scss

@@ -2,8 +2,9 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import '../style/index';
 @import '../button/index';
-@import '../icon/index';
 @import '../surface/index';
+@import '../utils/index';
+@import '../icon/index';
 
 @mixin iui-tile {
   @include iui-reset;
@@ -34,14 +35,12 @@
 
   &.iui-selected {
     @include iui-focus($offset: 0, $thickness: $iui-xs);
-    @include themed() {
-      outline: solid 2px t(iui-color-foreground-primary);
-      background: linear-gradient(
-        rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6)),
-        rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6))
-      ),
-        linear-gradient(t(iui-color-background-1), t(iui-color-background-1));
-    }
+    outline: solid 2px var(--iui-color-foreground-primary);
+    background: linear-gradient(
+      rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)),
+      rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))
+    ),
+      linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
   }
 
   &.iui-actionable {
@@ -71,9 +70,7 @@
       height: $iui-baseline * 10;
       flex: 1;
       border-bottom: none;
-      @include themed() {
-        border-right: 1px solid t(iui-color-background-border);
-      }
+      border-right: 1px solid var(--iui-color-background-border);
     }
 
     .iui-tile-content {
@@ -87,6 +84,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 {
@@ -104,9 +130,7 @@
     font-size: $iui-font-size-leading;
     user-select: all;
     margin-bottom: $iui-baseline * 0.5;
-    @include themed() {
-      color: t(iui-text-color);
-    }
+    color: var(--iui-text-color);
   }
 
   .iui-tile-status-icon {
@@ -127,9 +151,7 @@
     height: 100%;
     max-height: $iui-baseline * 6;
     @include iui-line-clamp(3);
-    @include themed() {
-      color: t(iui-text-color-muted);
-    }
+    color: var(--iui-text-color-muted);
   }
 
   .iui-tile-metadata {
@@ -142,9 +164,7 @@
     display: flex;
     align-items: center;
     margin-top: auto;
-    @include themed() {
-      color: t(iui-text-color-muted);
-    }
+    color: var(--iui-text-color-muted);
 
     > svg,
     .iui-tile-metadata-icon {
@@ -162,6 +182,7 @@
 }
 
 @mixin iui-tile-thumbnail {
+  box-sizing: content-box;
   width: 100%;
   height: $iui-baseline * 14;
   flex-shrink: 0;
@@ -170,10 +191,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  @include themed() {
-    background-color: t(iui-color-background-1-overlay);
-    border-bottom: 1px solid t(iui-color-background-border);
-  }
+  background-color: var(--iui-color-background-1-overlay);
+  border-bottom: 1px solid var(--iui-color-background-border);
 
   .iui-thumbnail-icon {
     @include iui-icons-3xl;
@@ -197,69 +216,56 @@
   }
 
   ~ .iui-thumbnail-icon {
-    z-index: 1;
     cursor: pointer;
     @media (prefers-reduced-motion: no-preference) {
       transition: fill $iui-speed-fast ease;
     }
-    @include themed() {
-      fill: rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-3));
-      filter: drop-shadow(0 2px 1px rgba(0, 1, 5, t(iui-opacity-5)));
-    }
+    fill: rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-3));
+    filter: drop-shadow(0 2px 1px rgba(0, 1, 5, var(--iui-opacity-5)));
 
     &:hover {
-      @include themed() {
-        fill: rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-2));
-      }
+      fill: rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-2));
     }
   }
+}
+
+/// @arg $variant Can be either: type-indicator, quick-action
+@mixin iui-tile-thumbnail-button($variant) {
+  @include iui-button-borderless;
+  @include iui-button-size(small, borderless);
+  position: absolute;
+  border-radius: 50%;
+  top: round($iui-baseline * 0.5);
+
+  @if $variant == type-indicator {
+    left: $iui-s;
+  }
+  @if $variant == quick-action {
+    right: $iui-s;
+  }
+
+  &[data-iui-active='true'] {
+    --_iui-button-text-color: var(--iui-color-foreground-primary);
+    --_iui-button-background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
+  }
 
-  ~ .iui-tile-thumbnail-type-indicator,
-  ~ .iui-tile-thumbnail-quick-action {
+  @at-root .iui-tile-thumbnail-picture ~ & {
     @include iui-blur($opacity: 5);
+    --_iui-button-text-color: var(--iui-color-foreground-accessory);
 
     > .iui-button-icon {
-      @include themed() {
-        fill: t(iui-color-foreground-accessory);
-        filter: drop-shadow(0 2px 1px rgba(0, 0, 0, t(iui-opacity-5)));
-      }
+      filter: drop-shadow(0 2px 1px rgba(0, 0, 0, var(--iui-opacity-5)));
     }
 
     &:hover,
-    &.iui-active:enabled,
-    &.iui-active:enabled:hover,
-    &.iui-active:active {
-      @include themed() {
-        background-color: rgba(0, 0, 0, t(iui-opacity-4));
-      }
-
-      .iui-button-icon {
-        @include themed() {
-          fill: t(iui-color-foreground-accessory);
-        }
-      }
+    &[data-iui-active='true']:enabled,
+    &[data-iui-active='true']:enabled:hover,
+    &[data-iui-active='true']:active {
+      background-color: rgba(0, 0, 0, var(--iui-opacity-4));
     }
   }
 }
 
-@mixin iui-tile-thumbnail-type-indicator {
-  @include iui-button-borderless;
-  @include iui-button-size(small, borderless);
-  position: absolute;
-  border-radius: 50%;
-  top: round($iui-baseline * 0.5);
-  left: $iui-s;
-}
-
-@mixin iui-tile-thumbnail-quick-action {
-  @include iui-button-borderless;
-  @include iui-button-size(small, borderless);
-  position: absolute;
-  border-radius: 50%;
-  top: round($iui-baseline * 0.5);
-  right: $iui-s;
-}
-
 @mixin iui-tile-thumbnail-badge {
   position: absolute;
   bottom: round($iui-baseline * 0.5);
@@ -269,10 +275,7 @@
   display: flex;
   justify-content: flex-end;
   overflow: hidden;
-
-  > .iui-badge:not(:last-child) {
-    margin-right: $iui-xs;
-  }
+  gap: $iui-xs;
 }
 
 @mixin iui-tile-buttons {
@@ -296,17 +299,13 @@
 
     &,
     &:hover {
-      @include themed() {
-        border-top: 1px solid t(iui-color-background-border);
-        border-color: t(iui-color-background-border);
-      }
+      border-top: 1px solid var(--iui-color-background-border);
+      border-color: var(--iui-color-background-border);
     }
   }
 
   > button:not(:last-child) {
-    @include themed() {
-      border-right: 1px solid t(iui-color-background-border);
-    }
+    border-right: 1px solid var(--iui-color-background-border);
   }
 }
 
@@ -319,3 +318,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});
+  }
+}

package/scss/time-picker/time-picker.scss

@@ -2,6 +2,7 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import '../style/index';
 @import '../menu/index';
+@import '../utils/index';
 
 @mixin iui-time-picker {
   @include iui-reset;
@@ -9,14 +10,10 @@
   text-align: center;
   height: $iui-baseline * 26;
   display: inline-flex;
-  @include themed {
-    background-color: t(iui-color-background-1);
-  }
+  background-color: var(--iui-color-background-1);
 
   &:not(:first-child) {
-    @include themed {
-      border-left: 1px solid t(iui-color-background-border);
-    }
+    border-left: 1px solid var(--iui-color-background-border);
   }
 
   &:first-child {
@@ -31,9 +28,7 @@
   scrollbar-width: none;
 
   &:not(:first-child) {
-    @include themed {
-      border-left: 1px solid t(iui-color-background-border);
-    }
+    border-left: 1px solid var(--iui-color-background-border);
   }
 
   > ol {
@@ -47,20 +42,16 @@
 
       &:hover {
         cursor: pointer;
-        @include themed {
-          color: t(iui-color-foreground-primary);
-          background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
-        }
+        color: var(--iui-color-foreground-primary);
+        background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
       }
 
       &.iui-selected {
         font-weight: $iui-font-weight-semibold;
         cursor: default;
         @include iui-focus($color: var(--iui-color-foreground-accessory), $offset: -3px);
-        @include themed {
-          background-color: t(iui-color-background-primary);
-          color: t(iui-color-foreground-accessory);
-        }
+        background-color: var(--iui-color-background-primary);
+        color: var(--iui-color-foreground-accessory);
       }
     }
   }

package/scss/{toast-notification → toast}/categories.scss

@@ -1,23 +1,19 @@
 // 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 '../style/theme';
 @import '../anchor/index';
 @import './toast';
 
 /// category must be one of: positive, negative, primary (informational), warning
 @mixin iui-toast-category($category) {
-  @include themed {
-    border-color: t(iui-color-foreground-#{$category});
-  }
+  border-color: var(--iui-color-foreground-#{$category});
 
   > .iui-message {
     @include iui-text-selection($category);
   }
 
   > .iui-status-area {
-    @include themed {
-      background-color: t(iui-color-background-#{$category});
-    }
+    background-color: var(--iui-color-background-#{$category});
   }
 
   > .iui-toast-anchor {

package/scss/{toast-notification → toast}/toast.scss

@@ -2,22 +2,19 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import '../style/index';
 @import '../anchor/index';
-@import '../icon/index';
+@import '../utils/index';
 
 @mixin iui-toast {
   @include iui-reset;
   display: inline-flex;
   align-items: center;
-  box-sizing: border-box;
   pointer-events: all;
   margin: 0 $iui-m $iui-baseline $iui-m;
   min-height: $iui-baseline * 4;
   border-radius: $iui-border-radius;
-  @include themed {
-    background-color: t(iui-color-background-1);
-    border: 1px solid t(iui-color-foreground-body);
-    box-shadow: 0 0 0 1px rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-4)), $iui-elevation-24;
-  }
+  background-color: var(--iui-color-background-1);
+  border: 1px solid var(--iui-color-foreground-body);
+  box-shadow: 0 0 0 1px rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4)), $iui-elevation-24;
 
   > .iui-status-area {
     display: flex;
@@ -26,16 +23,12 @@
     align-items: center;
     width: $iui-l * 2;
     flex-shrink: 0;
-    @include themed {
-      background-color: t(iui-color-background-5);
-    }
+    background-color: var(--iui-color-background-5);
 
     > .iui-icon {
       height: $iui-icons-default;
       width: $iui-icons-default;
-      @include themed {
-        fill: t(iui-color-foreground-accessory);
-      }
+      fill: var(--iui-color-foreground-accessory);
     }
   }
 
@@ -49,9 +42,7 @@
     line-height: $iui-line-height;
     font-weight: $iui-font-weight-normal;
     font-style: normal;
-    @include themed {
-      color: t(iui-text-color);
-    }
+    color: var(--iui-text-color);
   }
 
   &-anchor {

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

@@ -1,6 +1,7 @@
 // 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-toggle-switch-wrapper {
   @include iui-reset;
@@ -13,23 +14,12 @@
   user-select: none;
   cursor: pointer;
   isolation: isolate;
-  @include themed {
-    color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
-  }
-
-  > * + * {
-    margin-left: $iui-s;
-    @supports (gap: $iui-s) {
-      margin-left: 0;
-    }
-  }
+  color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
 
   // Disabled
   &.iui-disabled {
     cursor: not-allowed;
-    @include themed {
-      color: t(iui-text-color-muted);
-    }
+    color: var(--iui-text-color-muted);
     @media (forced-colors: active) {
       color: GrayText;
     }
@@ -57,21 +47,12 @@
   display: flex;
   position: relative;
   cursor: pointer;
-
-  // #region IE solution
-  width: $iui-toggle-switch-handle-size;
-  height: $iui-toggle-switch-handle-size;
-  @supports (appearance: none) {
-    appearance: none;
-    width: ($iui-toggle-switch-handle-size + ($iui-toggle-switch-handle-offset * 2)) * 2;
-    height: auto;
-    border-radius: $iui-border-radius-round;
-    box-sizing: border-box;
-    transition: background-color $iui-speed-fast ease-out, border-color $iui-speed-fast ease-out;
-    background-color: var(--iui-color-background-1);
-    border: $iui-toggle-switch-border-thickness solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
-  }
-  // #endregion IE solution
+  appearance: none;
+  width: ($iui-toggle-switch-handle-size + ($iui-toggle-switch-handle-offset * 2)) * 2;
+  border-radius: $iui-border-radius-round;
+  transition: background-color $iui-speed-fast ease-out, border-color $iui-speed-fast ease-out;
+  background-color: var(--iui-color-background-1);
+  border: $iui-toggle-switch-border-thickness solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
 
   &-label {
     grid-area: label;
@@ -206,8 +187,8 @@
   &-icon {
     opacity: 0;
     grid-area: toggle;
-    width: $iui-toggle-switch-handle-size * 0.75;
-    height: $iui-toggle-switch-handle-size * 0.75;
+    width: $iui-toggle-switch-handle-size;
+    height: $iui-toggle-switch-handle-size;
     padding: $iui-toggle-switch-handle-size * 0.125;
     margin: $iui-toggle-switch-handle-offset + $iui-toggle-switch-border-thickness;
     display: flex;

package/scss/tooltip/tooltip.scss

@@ -1,6 +1,7 @@
 // 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-tooltip {
   @include iui-reset;
@@ -17,11 +18,9 @@
   z-index: 999;
   box-shadow: $iui-elevation-8;
   pointer-events: none;
-  @include themed {
-    background-color: rgba(0, 0, 0, t(iui-opacity-3));
-    color: t(iui-color-foreground-accessory);
-    border: 1px solid rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-4));
-  }
+  background-color: rgba(0, 0, 0, var(--iui-opacity-3));
+  color: var(--iui-color-foreground-accessory);
+  border: 1px solid rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
 }
 
 @mixin iui-tooltip-hidden {

package/scss/tree/tree.scss

@@ -2,8 +2,9 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import '../style/index';
 @import '../icon/index';
+@import '../utils/index';
 
-$iui-active-outline: thin solid t(iui-color-foreground-primary);
+$iui-active-outline: thin solid var(--iui-color-foreground-primary);
 $iui-expander-inline-padding: $iui-component-offset + $iui-xxs + 1px; // margin + padding + border
 $iui-expander-button-width: ($iui-icons-default) + ($iui-expander-inline-padding * 2); // icon width + inline padding on both sides
 
@@ -46,7 +47,6 @@ $iui-expander-button-width: ($iui-icons-default) + ($iui-expander-inline-padding
   &-content {
     display: flex;
     align-items: center;
-    box-sizing: border-box;
     min-height: $iui-baseline * 3;
     margin-left: calc(#{$iui-expander-button-width} * (var(--level, 0)));
     overflow: hidden;
@@ -94,45 +94,33 @@ $iui-expander-button-width: ($iui-icons-default) + ($iui-expander-inline-padding
 
     &-caption {
       font-size: $iui-font-size-small;
-      @include themed {
-        color: t(iui-text-color-muted);
-      }
+      color: var(--iui-text-color-muted);
     }
   }
 
   &:hover {
-    @include themed {
-      background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
-    }
+    background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
 
     .iui-tree-node-content-caption {
-      @include themed {
-        color: t(iui-color-foreground-body);
-      }
+      color: var(--iui-color-foreground-body);
       transition: color $iui-speed-fast ease;
     }
   }
 
   &.iui-active {
-    @include themed {
-      background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-5));
-      outline: $iui-active-outline;
-      outline-offset: -1px;
-    }
+    background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
+    outline: $iui-active-outline;
+    outline-offset: -1px;
   }
 
   &.iui-disabled {
     cursor: not-allowed;
     outline: none;
     background-color: transparent;
-    @include themed {
-      color: t(iui-text-color-placeholder);
-    }
+    color: var(--iui-text-color-placeholder);
 
     .iui-tree-node-content-caption {
-      @include themed {
-        color: t(iui-text-color-placeholder);
-      }
+      color: var(--iui-text-color-placeholder);
     }
   }
 }

package/scss/utils/classes.scss

@@ -0,0 +1,6 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@import './index';
+@import './input-container/classes';
+@import './notification-marker/classes';
+@import './popover/classes';

package/scss/utils/index.scss

@@ -0,0 +1,6 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@import './input-container/index';
+@import './mixins';
+@import './notification-marker/index';
+@import './popover/index';

package/scss/{inputs → utils/input-container}/classes.scss

@@ -37,31 +37,3 @@
 .iui-input-label {
   @include iui-input-label;
 }
-
-.iui-input {
-  @include iui-input;
-}
-
-.iui-select-button {
-  @include iui-select-button;
-}
-
-.iui-textarea {
-  @include iui-textarea;
-}
-
-.iui-input-with-icon {
-  @include iui-input-with-icon;
-}
-
-.iui-end-icon {
-  @include iui-end-icon;
-}
-
-.iui-checkbox {
-  @include iui-checkbox;
-}
-
-.iui-radio {
-  @include iui-radio;
-}

package/scss/utils/input-container/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 './input-container';