@itwin/itwinui-css 0.39.0 → 0.41.1

package/css/tree.css

@@ -0,0 +1,107 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.iui-tree{
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  list-style:none; }
+
+.iui-sub-tree{
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  list-style:none; }
+
+.iui-tree-node{
+  display:flex;
+  cursor:pointer;
+  padding:0 8px; }
+  .iui-tree-node-checkbox{
+    margin-right:8px; }
+  .iui-tree-node-content{
+    display:flex;
+    align-items:center;
+    box-sizing:border-box;
+    min-height:33px;
+    margin-left:calc(28px * (var(--level, 0)));
+    overflow:hidden;
+    padding-left:2px; }
+    .iui-tree-node-content-icon{
+      fill:rgba(0, 0, 0, 0.4);
+      fill:var(--iui-icons-color);
+      display:inline-flex;
+      width:16px;
+      height:16px;
+      padding:0 6px;
+      flex-shrink:0; }
+      .iui-tree-node-content-icon.iui-informational{
+        fill:#008BE1;
+        fill:var(--iui-icons-color-primary); }
+      .iui-tree-node-content-icon.iui-positive{
+        fill:#53A21A;
+        fill:var(--iui-icons-color-positive); }
+      .iui-tree-node-content-icon.iui-warning{
+        fill:#F18B12;
+        fill:var(--iui-icons-color-warning); }
+      .iui-tree-node-content-icon.iui-negative{
+        fill:#D30A0A;
+        fill:var(--iui-icons-color-negative); }
+      .iui-tree-node-content-icon:first-child{
+        margin-left:28px; }
+    @media (prefers-reduced-motion: no-preference){
+      .iui-tree-node-content-expander-icon{
+        transition:transform 0.2s ease-out; } }
+    .iui-tree-node-content-expander-icon-expanded{
+      transform:rotate(90deg); }
+    .iui-tree-node-content-label{
+      min-width:0;
+      padding-left:6px; }
+      .iui-tree-node-content-label:first-child{
+        margin-left:28px; }
+    .iui-tree-node-content-title, .iui-tree-node-content-caption{
+      white-space:nowrap;
+      overflow:hidden;
+      text-overflow:ellipsis; }
+    .iui-tree-node-content-title{
+      font-size:14px; }
+    .iui-tree-node-content-caption{
+      font-size:12px;
+      color:rgba(0, 0, 0, 0.4);
+      color:var(--iui-text-color-muted); }
+  .iui-tree-node:focus{
+    outline:thin solid rgba(0, 139, 225, 0.4);
+    outline-offset:-1px;
+    outline:thin solid rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
+    outline-offset:-1px; }
+  .iui-tree-node:focus:not(:focus-visible){
+    outline-offset:-2px; }
+  .iui-tree-node:hover{
+    background-color:rgba(0, 139, 225, 0.1);
+    background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
+    .iui-tree-node:hover .iui-tree-node-content-caption{
+      color:#000;
+      color:var(--iui-color-foreground-body);
+      transition:color 0.2s ease; }
+  .iui-tree-node.iui-active{
+    background-color:rgba(0, 139, 225, 0.2);
+    outline:thin solid var(--iui-color-foreground-primary);
+    outline-offset:-1px;
+    background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
+    outline:thin solid var(--iui-color-foreground-primary);
+    outline-offset:-1px; }
+    .iui-tree-node.iui-active:focus{
+      outline-width:2px;
+      outline-offset:-2px; }
+  .iui-tree-node.iui-disabled{
+    cursor:not-allowed;
+    outline:none;
+    background-color:transparent;
+    color:rgba(0, 0, 0, 0.2);
+    color:var(--iui-text-color-placeholder); }
+    .iui-tree-node.iui-disabled .iui-tree-node-content-caption{
+      color:rgba(0, 0, 0, 0.2);
+      color:var(--iui-text-color-placeholder); }

package/css/user-icon.css

@@ -65,7 +65,9 @@
     width:100%;
     height:100%;
     border-width:0;
-    border-radius:50%; }
+    border-radius:50%;
+    background-color:#FFF;
+    background-color:var(--iui-color-background-1); }
   .iui-user-icon > .iui-status{
     display:flex;
     align-items:center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-css",
-  "version": "0.39.0",
+  "version": "0.41.1",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "src/index.scss",

package/scss/breadcrumbs/breadcrumbs.scss

@@ -35,7 +35,7 @@
   }
 
   > *,
-  .iui-label {
+  .iui-button-label {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;

package/scss/button/borderless.scss

@@ -2,59 +2,40 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import '../style/index';
 @import './button';
+@import './disabled';
+@import './button-icon';
 
 @mixin iui-button-borderless {
-  background-color: transparent;
-  border-color: transparent;
-  padding: 0 $iui-s;
+  @include iui-button-borderless-base;
+  @include iui-button-size(medium, borderless);
 
-  // Sizes
-  &.iui-small {
-    padding: 0 $iui-xxs;
-  }
+  &:focus {
+    @include iui-button-borderless-hover-focus;
 
-  &.iui-large {
-    padding: 0 $iui-sm;
+    &:where(:not(:focus-visible)) {
+      @include iui-button-borderless-base;
+    }
   }
 
-  // If icon is by itself, button takes 1:1 size ratio
-  > .iui-icon:only-child {
-    margin-left: $iui-component-offset;
-    margin-right: $iui-component-offset;
+  &:hover {
+    @include iui-button-borderless-hover-focus;
   }
 
-  &:enabled:hover,
-  &:enabled:active,
-  &:focus-visible {
+  &.iui-active {
     @include themed {
-      background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
-      border-color: transparent;
-    }
-  }
-
-  &.iui-active:not(.iui-high-visibility):not(.iui-cta) {
-    &:enabled,
-    &:enabled:hover,
-    &:enabled:active {
-      background: transparent;
-      @include themed {
-        background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
-      }
-      border-color: transparent;
+      background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
+      color: t(iui-color-foreground-primary);
     }
+    border-color: transparent;
   }
 
   &[disabled],
-  &[disabled]:hover,
-  &[disabled]:active,
-  &[disabled]:focus {
-    background-color: transparent;
-    border-color: transparent;
+  &:disabled {
+    @include iui-button-disabled;
 
-    > .iui-icon {
-      @include themed {
-        fill: t(iui-icons-color-actionable-disabled);
-      }
+    @include themed {
+      background-color: transparent;
+      border-color: transparent;
     }
 
     &.iui-active {
@@ -64,3 +45,20 @@
     }
   }
 }
+
+@mixin iui-button-borderless-hover-focus {
+  @include themed {
+    background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
+    border-color: transparent;
+  }
+}
+
+@mixin iui-button-borderless-base {
+  border-color: transparent;
+  background-color: transparent;
+
+  > .iui-button-icon:only-child {
+    margin-left: $iui-component-offset;
+    margin-right: $iui-component-offset;
+  }
+}

package/scss/button/button-group.scss

@@ -21,13 +21,13 @@
       border-bottom-right-radius: $iui-border-radius;
     }
 
-    &:not(.iui-borderless):not(.iui-cta):not(.iui-high-visibility):not(:last-of-type) {
+    &.iui-default:not(:last-of-type) {
       border-right: none;
     }
 
-    &:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless) {
+    &.iui-default {
       // Border trick for grouped default & disabled buttons
-      &:enabled {
+      &:not(:disabled) {
         + :disabled {
           @include themed {
             border-left-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));

package/scss/button/button-icon.scss

@@ -0,0 +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 '../icon/index';
+
+/// Mixin for button icons
+@mixin iui-button-icon {
+  width: $iui-icons-default;
+  height: $iui-icons-default;
+  transition: fill $iui-speed-fast ease-out;
+  fill: currentColor;
+}

package/scss/button/button.scss

@@ -2,6 +2,8 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import '../style/index';
 @import '../icon/index';
+@import './disabled';
+@import './button-icon';
 
 $iui-button-padding: $iui-xs * 4;
 $iui-button-padding-small: $iui-xs * 2;
@@ -32,52 +34,45 @@ $iui-button-padding-large: $iui-xs * 6;
       border-color $iui-speed-fast ease-out;
   }
 
-  > .iui-icon:not(.iui-user-icon) {
-    width: $iui-icons-default;
-    height: $iui-icons-default;
-    @media (prefers-reduced-motion: no-preference) {
-      transition: fill $iui-speed-fast ease-out;
-    }
+  @include themed {
+    color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
   }
 
-  &:enabled:hover {
+  &:hover {
     text-decoration: none;
+    @include themed {
+      color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
+    }
   }
 
   @include iui-focus;
-  @include iui-button-sizes;
-}
 
-@mixin iui-button-sizes {
-  padding: 0 $iui-button-padding;
-  height: $iui-component-height;
+  &[disabled],
+  &:disabled {
+    @include iui-button-disabled;
+  }
+}
 
-  > .iui-icon + .iui-label,
-  > .iui-label + .iui-icon,
-  > .iui-icon + .iui-icon {
-    margin-left: $iui-s;
+/// Mixin for applying padding and margins to various button sizes.
+/// @arg size - must be one of: small, medium, large
+/// @arg styleType - must be one of: default, borderless
+@mixin iui-button-size($size: medium, $styleType: default) {
+  @if $size == medium {
+    padding: if($styleType == 'borderless', 0 $iui-s, 0 $iui-button-padding);
+    height: $iui-component-height;
+    gap: $iui-s;
   }
 
-  &.iui-small {
-    padding: 0 $iui-button-padding-small;
+  @if $size == small {
+    padding: if($styleType == 'borderless', 0 $iui-xxs, 0 $iui-button-padding-small);
     height: $iui-component-height-small;
-
-    > .iui-icon + .iui-label,
-    > .iui-label + .iui-icon,
-    > .iui-icon + .iui-icon {
-      margin-left: $iui-xs;
-    }
+    gap: $iui-xs;
   }
 
-  &.iui-large {
-    padding: 0 $iui-button-padding-large;
+  @if $size == large {
+    padding: if($styleType == 'borderless', 0 $iui-sm, 0 $iui-button-padding-large);
     height: $iui-component-height-large;
     font-size: $iui-font-size-leading;
-
-    > .iui-icon + .iui-label,
-    > .iui-label + .iui-icon,
-    > .iui-icon + .iui-icon {
-      margin-left: $iui-sm;
-    }
+    gap: $iui-sm;
   }
 }

package/scss/button/classes.scss

@@ -4,7 +4,11 @@
 
 .iui-button {
   @include iui-button;
-  @include iui-button-default;
+  @include iui-button-size;
+
+  &.iui-default {
+    @include iui-button-default;
+  }
 
   &.iui-high-visibility {
     @include iui-button-high-visibility;
@@ -22,8 +26,22 @@
     @include iui-button-borderless;
   }
 
-  &[disabled] {
-    @include iui-button-disabled;
+  @include iui-button-size(medium);
+
+  &.iui-small {
+    @include iui-button-size(small);
+
+    &.iui-borderless {
+      @include iui-button-size(small, borderless);
+    }
+  }
+
+  &.iui-large {
+    @include iui-button-size(large);
+
+    &.iui-borderless {
+      @include iui-button-size(large, borderless);
+    }
   }
 }
 
@@ -35,3 +53,7 @@
   @include iui-button-group;
   @include iui-button-split-menu;
 }
+
+.iui-button-icon {
+  @include iui-button-icon;
+}

package/scss/button/cta.scss

@@ -2,33 +2,43 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import '../style/index';
 @import './button';
+@import './button-icon';
+@import './disabled';
 
 @mixin iui-button-cta {
-  @include themed {
-    background-color: t(iui-color-background-positive);
-    border-color: t(iui-color-background-positive);
-    color: t(iui-color-foreground-accessory);
-  }
+  @include iui-button-cta-base;
+
+  &:focus {
+    @include iui-button-cta-hover-focus;
 
-  > .iui-icon {
-    @include themed {
-      fill: t(iui-color-foreground-accessory);
+    &:where(:not(:focus-visible)) {
+      @include iui-button-cta-base;
     }
   }
 
-  &:enabled:hover,
-  &:enabled:active,
-  &:focus-visible {
-    @include themed {
-      background-color: t(iui-color-background-positive-overlay);
-      border-color: t(iui-color-background-positive-overlay);
-      color: t(iui-color-foreground-accessory);
-    }
+  &:hover,
+  &:active {
+    @include iui-button-cta-hover-focus;
+  }
 
-    > .iui-icon {
-      @include themed {
-        fill: t(iui-color-foreground-accessory);
-      }
-    }
+  &[disabled],
+  &:disabled {
+    @include iui-button-disabled;
+  }
+}
+
+@mixin iui-button-cta-hover-focus {
+  @include themed {
+    background-color: t(iui-color-background-positive-overlay);
+    border-color: t(iui-color-background-positive-overlay);
+    color: t(iui-color-foreground-accessory);
+  }
+}
+
+@mixin iui-button-cta-base {
+  @include themed {
+    background-color: t(iui-color-background-positive);
+    border-color: t(iui-color-background-positive);
+    color: t(iui-color-foreground-accessory);
   }
 }

package/scss/button/default.scss

@@ -2,36 +2,24 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import '../style/index';
 @import './button';
+@import './button-icon';
 @import '../notification-marker/index';
+@import './disabled';
 
 @mixin iui-button-default {
-  @include themed {
-    background-color: t(iui-color-background-1);
-    border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
-    color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
-  }
+  @include iui-button-default-base;
 
-  > .iui-icon {
-    @include themed {
-      fill: t(iui-icons-color-actionable);
-    }
-  }
+  &:focus {
+    @include iui-button-default-hover-focus;
 
-  &:enabled:hover,
-  &:enabled:active,
-  &:focus-visible {
-    @include themed {
-      background-color: t(iui-color-background-1-overlay);
-      border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
-      color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
+    &:where(:not(:focus-visible)) {
+      @include iui-button-default-base;
     }
-    @include iui-notification-marker-hover;
+  }
 
-    > .iui-icon {
-      @include themed {
-        fill: t(iui-icons-color-actionable-hover);
-      }
-    }
+  &:hover,
+  &:active {
+    @include iui-button-default-hover-focus;
   }
 
   &.iui-dropdown {
@@ -47,29 +35,36 @@
     }
   }
 
-  &.iui-active:not(.iui-high-visibility):not(.iui-cta) {
-    &:enabled,
-    &:enabled:hover,
-    &:enabled:active {
-      @include themed {
-        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));
-      }
+  &.iui-active {
+    @include themed {
+      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));
+      color: t(iui-color-foreground-primary);
+    }
+  }
 
-      > .iui-label {
-        @include themed {
-          color: t(iui-color-foreground-primary);
-        }
-      }
+  &[disabled],
+  &:disabled {
+    @include iui-button-disabled;
+  }
+}
 
-      > .iui-icon {
-        @include themed {
-          fill: t(iui-icons-color-primary);
-        }
-      }
-    }
+@mixin iui-button-default-hover-focus {
+  @include themed {
+    background-color: t(iui-color-background-1-overlay);
+    border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
+    color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
+  }
+  @include iui-notification-marker-hover;
+}
+
+@mixin iui-button-default-base {
+  @include themed {
+    background-color: t(iui-color-background-1);
+    border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
+    color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
   }
 }

package/scss/button/disabled.scss

@@ -1,24 +1,13 @@
 // 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 './button';
+@import './button-icon';
 
 @mixin iui-button-disabled {
   cursor: not-allowed;
   @include themed {
-    background-color: t(iui-color-background-disabled);
+    background: t(iui-color-background-disabled);
     border-color: t(iui-color-background-disabled);
-  }
-
-  > .iui-label {
-    @include themed {
-      color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-5));
-    }
-  }
-
-  > .iui-icon {
-    @include themed {
-      fill: t(iui-icons-color-actionable-disabled);
-    }
+    color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-5));
   }
 }

package/scss/button/high-visibility.scss

@@ -2,33 +2,43 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import '../style/index';
 @import './button';
+@import './disabled';
+@import './button-icon';
 
 @mixin iui-button-high-visibility {
-  @include themed {
-    background-color: t(iui-color-background-primary);
-    border-color: t(iui-color-background-primary);
-    color: t(iui-color-foreground-accessory);
-  }
+  @include iui-button-high-visibility-base;
+
+  &:focus {
+    @include iui-button-high-visibility-hover-focus;
 
-  > .iui-icon {
-    @include themed {
-      fill: t(iui-color-foreground-accessory);
+    &:where(:not(:focus-visible)) {
+      @include iui-button-high-visibility-base;
     }
   }
 
-  &:enabled:hover,
-  &:enabled:active,
-  &:focus-visible {
-    @include themed {
-      background-color: t(iui-color-background-primary-overlay);
-      border-color: t(iui-color-background-primary-overlay);
-      color: t(iui-color-foreground-accessory);
-    }
+  &:hover,
+  &:active {
+    @include iui-button-high-visibility-hover-focus;
+  }
 
-    > .iui-icon {
-      @include themed {
-        fill: t(iui-color-foreground-accessory);
-      }
-    }
+  &[disabled],
+  &:disabled {
+    @include iui-button-disabled;
+  }
+}
+
+@mixin iui-button-high-visibility-hover-focus {
+  @include themed {
+    background-color: t(iui-color-background-primary-overlay);
+    border-color: t(iui-color-background-primary-overlay);
+    color: t(iui-color-foreground-accessory);
+  }
+}
+
+@mixin iui-button-high-visibility-base {
+  @include themed {
+    background-color: t(iui-color-background-primary);
+    border-color: t(iui-color-background-primary);
+    color: t(iui-color-foreground-accessory);
   }
 }

package/scss/button/index.scss

@@ -9,3 +9,4 @@
 @import './split-menu';
 @import './borderless';
 @import './disabled';
+@import './button-icon';