@itwin/itwinui-css 0.37.2 → 0.40.0

package/scss/button/borderless.scss

@@ -2,65 +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;
-
-  // Sizes
-  &.iui-small {
-    padding: 0 $iui-xxs;
-  }
+  @include iui-button-borderless-base;
+  @include iui-button-size(medium, borderless);
 
-  &.iui-large {
-    padding: 0 $iui-sm;
-  }
-
-  // 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;
-  }
-
-  &:enabled:hover,
-  &:enabled:active,
-  &:focus-visible {
+  &:hover,
+  &:focus {
     @include themed {
-      background-color: rgba(
-        t(iui-color-foreground-body-rgb),
-        t(iui-opacity-6)
-      );
+      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;
+  &:focus:not(:focus-visible) {
+    @include iui-button-borderless-base;
+  }
+
+  &.iui-active {
+    @include themed {
+      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 {
@@ -70,3 +45,13 @@
     }
   }
 }
+
+@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,19 +21,16 @@
       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)
-            );
+            border-left-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
           }
         }
 
@@ -41,10 +38,7 @@
         &:active + .iui-button,
         &:focus-visible + .iui-button {
           @include themed {
-            border-left-color: rgba(
-              t(iui-color-foreground-body-rgb),
-              t(iui-opacity-1)
-            );
+            border-left-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
           }
         }
       }
@@ -76,10 +70,7 @@
     &:disabled {
       &::after {
         @include themed {
-          background-color: rgba(
-            t(iui-color-foreground-body-rgb),
-            t(iui-opacity-5)
-          );
+          background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-5));
         }
       }
     }

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;
@@ -28,58 +30,49 @@ $iui-button-padding-large: $iui-xs * 6;
   white-space: nowrap;
   border: 1px solid transparent;
   @media (prefers-reduced-motion: no-preference) {
-    transition: color $iui-speed-fast ease-out,
-      background-color $iui-speed-fast ease-out,
+    transition: color $iui-speed-fast ease-out, background-color $iui-speed-fast ease-out,
       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,36 @@
 // 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;
 
-  > .iui-icon {
-    @include themed {
-      fill: t(iui-color-foreground-accessory);
-    }
-  }
-
-  &:enabled:hover,
-  &:enabled:active,
-  &:focus-visible {
+  &:hover,
+  &:active,
+  &: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);
     }
+  }
 
-    > .iui-icon {
-      @include themed {
-        fill: t(iui-color-foreground-accessory);
-      }
-    }
+  &:focus:not(:focus-visible) {
+    @include iui-button-cta-base;
+  }
+
+  &[disabled],
+  &:disabled {
+    @include iui-button-disabled;
+  }
+}
+
+@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,26 @@
 // 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);
-    }
-  }
-
-  &:enabled:hover,
-  &:enabled:active,
-  &:focus-visible {
+  &:hover,
+  &:active,
+  &: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;
+  }
 
-    > .iui-icon {
-      @include themed {
-        fill: t(iui-icons-color-actionable-hover);
-      }
-    }
+  &:focus:not(:focus-visible) {
+    @include iui-button-default-base;
   }
 
   &.iui-dropdown {
@@ -47,29 +37,27 @@
     }
   }
 
-  &.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-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,36 @@
 // 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;
 
-  > .iui-icon {
-    @include themed {
-      fill: t(iui-color-foreground-accessory);
-    }
-  }
-
-  &:enabled:hover,
-  &:enabled:active,
-  &:focus-visible {
+  &:hover,
+  &:active,
+  &: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);
     }
+  }
 
-    > .iui-icon {
-      @include themed {
-        fill: t(iui-color-foreground-accessory);
-      }
-    }
+  &:focus:not(:focus-visible) {
+    @include iui-button-high-visibility-base;
+  }
+
+  &[disabled],
+  &:disabled {
+    @include iui-button-disabled;
+  }
+}
+
+@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

@@ -7,10 +7,7 @@
 
   &:hover {
     @include themed {
-      background-color: rgba(
-        t(iui-color-foreground-body-rgb),
-        t(iui-opacity-6)
-      );
+      background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
     }
   }
 
@@ -38,10 +35,7 @@
   > .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-left-color: rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-4));
     }
   }
 
@@ -50,4 +44,9 @@
       background-color: transparent;
     }
   }
+
+  &[disabled],
+  &:disabled {
+    @include iui-button-disabled;
+  }
 }

package/scss/code/codeblock.scss

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

package/scss/color-picker/color-picker.scss

@@ -218,7 +218,22 @@ $iui-focus-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-primary-
     height: $iui-s;
     @include themed {
       // Checkered transparency background pattern.
-      background-image: repeating-linear-gradient(45deg, t(iui-color-background-3) 25%, transparent 25%, transparent 75%, t(iui-color-background-3) 75%, t(iui-color-background-3)), repeating-linear-gradient(45deg, t(iui-color-background-3) 25%, t(iui-color-background-5) 25%, t(iui-color-background-5) 75%, t(iui-color-background-3) 75%, t(iui-color-background-3));
+      background-image: repeating-linear-gradient(
+        45deg,
+        t(iui-color-background-3) 25%,
+        transparent 25%,
+        transparent 75%,
+        t(iui-color-background-3) 75%,
+        t(iui-color-background-3)
+      ),
+        repeating-linear-gradient(
+        45deg,
+        t(iui-color-background-3) 25%,
+        t(iui-color-background-5) 25%,
+        t(iui-color-background-5) 75%,
+        t(iui-color-background-3) 75%,
+        t(iui-color-background-3)
+      );
       background-position: 0 0, ($iui-s * 0.5) ($iui-s * 0.5);
       background-size: $iui-s $iui-s;
     }

package/scss/date-picker/date-picker.scss

@@ -97,10 +97,7 @@
             font-weight: $iui-font-weight-semibold;
             @include themed {
               color: t(iui-color-foreground-primary);
-              background-color: rgba(
-                t(iui-color-foreground-primary-rgb),
-                t(iui-opacity-6)
-              );
+              background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
             }
           }
 
@@ -108,10 +105,7 @@
             font-weight: $iui-font-weight-semibold;
             border-radius: 50%;
             @include themed {
-              background-color: rgba(
-                t(iui-color-foreground-body-rgb),
-                t(iui-opacity-6)
-              );
+              background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
             }
           }
 

package/scss/header/classes.scss

@@ -5,3 +5,7 @@
 .iui-page-header {
   @include iui-page-header;
 }
+
+.iui-header-logo {
+  @include iui-header-logo;
+}