@itwin/itwinui-css 0.39.1 → 0.42.0

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

package/scss/button/split-menu.scss

@@ -11,31 +11,45 @@
     }
   }
 
-  .iui-button:first-child {
-    &.iui-borderless:hover {
-      background-color: transparent;
+  > * {
+    &:first-child {
+      > .iui-borderless:hover {
+        background-color: transparent;
+      }
     }
-  }
 
-  // Sizes
-  > .iui-button + .iui-button {
-    padding: $iui-xs;
-  }
+    // Sizes
+    &:last-child {
+      > .iui-button {
+        padding: $iui-xs;
+      }
 
-  > .iui-small + .iui-small {
-    padding: $iui-xxs;
-  }
+      > .iui-small {
+        padding: $iui-xxs;
+      }
 
-  > .iui-large + .iui-large {
-    padding: $iui-s;
-  }
+      > .iui-large {
+        padding: $iui-s;
+      }
+    }
 
-  > .iui-high-visibility + .iui-high-visibility,
-  > .iui-high-visibility + .iui-high-visibility:hover,
-  > .iui-cta + .iui-cta,
-  > .iui-cta + .iui-cta:hover {
-    @include themed {
-      border-left-color: rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-4));
+    // Border between buttons for high-visibility and cta
+    &:first-child {
+      > .iui-high-visibility,
+      > .iui-cta {
+        @include themed {
+          border-right-color: rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-4));
+        }
+      }
+    }
+
+    &:last-child {
+      > .iui-high-visibility,
+      > .iui-cta {
+        @include themed {
+          border-left-color: rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-4));
+        }
+      }
     }
   }
 
@@ -44,4 +58,9 @@
       background-color: transparent;
     }
   }
+
+  &[disabled],
+  &:disabled {
+    @include iui-button-disabled;
+  }
 }

package/scss/classes.scss

@@ -36,5 +36,6 @@
 @import './toast-notification/classes';
 @import './toggle-switch/classes';
 @import './tooltip/classes';
+@import './tree/classes';
 @import './user-icon/classes';
 @import './wizard/classes';

package/scss/code/codeblock.scss

@@ -26,6 +26,10 @@
     }
   }
 
+  .iui-button {
+    gap: 0;
+  }
+
   > .iui-codeblock-content {
     margin: 0;
     overflow-x: auto;

package/scss/header/header.scss

@@ -3,9 +3,11 @@
 @import '../style/index';
 @import '../user-icon/index';
 @import '../icon/index';
+@import '../button/index';
 
 @mixin iui-page-header {
   @include iui-reset;
+
   display: flex;
   justify-content: space-between;
   width: 100%;
@@ -123,7 +125,7 @@
             @include iui-display-none;
           }
 
-          .iui-header-button-icon + .iui-label {
+          .iui-header-button-icon + .iui-button-label {
             margin-left: 0;
           }
         }
@@ -154,7 +156,8 @@
     @include iui-header-button-icon;
   }
 
-  .iui-header-button.iui-header-button { // boost specificity
+  // boost specificity
+  .iui-header-button.iui-header-button {
     @include iui-header-button;
   }
 
@@ -172,7 +175,7 @@
   @at-root {
     a#{&}, // rendered as anchor element
     button#{&}, // rendered as button element
-    &[role='button'] { // rendered as div with role=button
+    &[role='button'] {
       @include iui-header-button-focus;
       cursor: pointer;
 
@@ -230,13 +233,18 @@
 }
 
 @mixin iui-header-button {
+  @include iui-button-size(large, borderless);
+
+  gap: 0;
   max-width: 25vw;
+  height: 100%;
+  border-radius: 0;
   overflow: hidden;
   padding-right: $iui-s;
 
   @include iui-header-button-focus;
 
-  > .iui-label {
+  > .iui-button-label {
     text-align: left;
     font-size: $iui-font-size;
     overflow: hidden;
@@ -257,10 +265,14 @@
     }
   }
 
-  > .iui-icon {
+  > .iui-button-icon {
     flex-shrink: 0;
   }
 
+  > * + * {
+    margin-left: $iui-sm;
+  }
+
   .iui-header-button-icon {
     padding: $iui-xs;
     @include iui-header-button-icon($iui-icons-default, $iui-border-radius);
@@ -289,11 +301,11 @@
             height: $iui-icons-small;
             padding: $iui-xxs;
           }
+        }
 
-          .iui-label {
-            .iui-description {
-              @include iui-display-none;
-            }
+        .iui-button-label {
+          .iui-description {
+            @include iui-display-none;
           }
         }
       }
@@ -302,9 +314,13 @@
 }
 
 @mixin iui-header-split-button {
-  height: 100%;
-  display: flex;
-  overflow: hidden;
+  &,
+  > * {
+    height: 100%;
+    display: flex;
+    overflow: hidden;
+  }
+
   max-width: 25vw;
 
   .iui-button {
@@ -312,8 +328,10 @@
     padding: 0 $iui-xs;
   }
 
-  .iui-button:first-child {
-    padding-left: $iui-sm;
+  > *:first-child {
+    .iui-button {
+      padding-left: $iui-sm;
+    }
   }
 
   &.iui-active {
@@ -331,8 +349,10 @@
           display: none;
         }
       }
+    }
 
-      &:last-child:hover {
+    > *:last-child {
+      > .iui-button:hover {
         @include themed {
           background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
         }
@@ -376,7 +396,7 @@
   }
 
   // Blue text
-  .iui-label {
+  .iui-button-label {
     @include themed {
       color: t(iui-color-foreground-primary);
     }
@@ -403,13 +423,13 @@
       box-shadow: 0 $iui-xxs 0 0 rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
     }
 
-    .iui-label {
+    .iui-button-label {
       @include themed {
         color: t(iui-icons-color-actionable-disabled);
       }
     }
 
-    .iui-icon,
+    .iui-button-icon,
     svg {
       @include themed {
         fill: t(iui-icons-color-actionable-disabled);

package/scss/index.scss

@@ -34,5 +34,6 @@
 @import './toast-notification/index';
 @import './toggle-switch/index';
 @import './tooltip/index';
+@import './tree/index';
 @import './user-icon/index';
 @import './wizard/index';

package/scss/inputs/checkbox-radio.scss

@@ -47,9 +47,7 @@
       width: $iui-sm;
       height: $iui-sm;
 
-      > path,
-      > circle,
-      > g {
+      > * {
         opacity: 0;
         @media (prefers-reduced-motion: no-preference) {
           transition: opacity $iui-speed-fast ease;

package/scss/inputs/checkbox.scss

@@ -31,7 +31,7 @@
     // Adds hover to everything that is not disabled
     &:hover > input:enabled ~ .iui-checkbox-checkmark {
       @include themed {
-        background-color: t(iui-color-background-1-overlay);
+        background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
       }
     }
 
@@ -54,9 +54,12 @@
       opacity: 0;
     }
 
-    input ~ .iui-checkbox-checkmark > svg > .iui-uncheck {
+    input ~ .iui-checkbox-checkmark .iui-uncheck {
       opacity: 1;
       transition: opacity $iui-speed-fast ease;
+      @include themed {
+        fill: t(iui-icons-color-actionable);
+      }
     }
   }
 }

package/scss/inputs/classes.scss

@@ -9,7 +9,7 @@
     @include iui-input-container-label;
   }
 
-  .iui-input-icon {
+  > .iui-input-icon {
     @include iui-input-icon;
   }
 
@@ -24,7 +24,7 @@
   }
 
   &.iui-inline-icon {
-    .iui-input-icon {
+    > .iui-input-icon {
       @include iui-input-icon-inline;
     }
   }

package/scss/inputs/labeled-inputs.scss

@@ -13,7 +13,7 @@
     'label label'
     'inputs inputs' / auto 1fr;
 
-  &.iui-inline-icon:not(.iui-inline-label) .iui-input-icon {
+  &.iui-inline-icon:not(.iui-inline-label) > .iui-input-icon {
     // stylelint-disable -- fix position in IE
     -ms-grid-row: 2;
     -ms-grid-column: 2;
@@ -38,7 +38,7 @@
       'icon message' / auto 1fr;
 
     // add margin to the icon if it is below input
-    &:not(.iui-inline-icon) .iui-input-icon {
+    &:not(.iui-inline-icon) > .iui-input-icon {
       margin-top: $iui-component-offset;
     }
   }
@@ -105,7 +105,7 @@
         'label inputs inputs'
         '. icon message' / auto auto 1fr;
 
-      &:not(.iui-inline-icon) .iui-input-icon {
+      &:not(.iui-inline-icon) > .iui-input-icon {
         // stylelint-disable -- fix position in IE
         -ms-grid-row: 2;
         -ms-grid-column: 2;