@itwin/itwinui-css 0.42.0 → 0.44.1

package/scss/button/borderless.scss

@@ -6,19 +6,20 @@
 @import './button-icon';
 
 @mixin iui-button-borderless {
-  @include iui-button-borderless-base;
-  @include iui-button-size(medium, borderless);
-
-  &:focus {
-    @include iui-button-borderless-hover-focus;
+  border-color: transparent;
+  background-color: transparent;
 
-    &:where(:not(:focus-visible)) {
-      @include iui-button-borderless-base;
-    }
+  > .iui-button-icon:only-child {
+    margin-left: $iui-component-offset;
+    margin-right: $iui-component-offset;
   }
+  @include iui-button-size(medium, borderless);
 
   &:hover {
-    @include iui-button-borderless-hover-focus;
+    @include themed {
+      background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
+      border-color: transparent;
+    }
   }
 
   &.iui-active {
@@ -45,20 +46,3 @@
     }
   }
 }
-
-@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

@@ -10,19 +10,34 @@
   $childSelector: 'input, button'; // target nested inputs and buttons
 
   > * {
+    display: flex;
+
     #{$childSelector} {
-      &:hover,
-      &:focus,
-      &:focus-within {
-        position: relative;
+      position: relative;
+
+      &:hover {
         z-index: 1;
       }
 
+      &:focus {
+        z-index: 2;
+
+        &:where(:not(:focus-visible):not(:hover)) {
+          z-index: revert;
+        }
+      }
+
       &:disabled {
-        position: relative;
         z-index: -1;
       }
 
+      transition-duration: 0ms; // disable exit animation to avoid border flicker
+
+      &:hover,
+      &:focus {
+        transition-duration: $iui-speed-fast; // re-enable enter animation
+      }
+
       // Adds stripe above active button
       &.iui-active {
         &::after {
@@ -69,8 +84,8 @@
     }
 
     // Use negative margin to make adjacent borders overlap
-    &:not(:last-child) {
-      margin-right: -1px;
+    + * {
+      margin-left: -1px;
     }
 
     // Add slight border between disabled items

package/scss/button/cta.scss

@@ -6,19 +6,20 @@
 @import './disabled';
 
 @mixin iui-button-cta {
-  @include iui-button-cta-base;
-
-  &:focus {
-    @include iui-button-cta-hover-focus;
-
-    &:where(:not(:focus-visible)) {
-      @include 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);
   }
+  @include iui-focus($color: var(--iui-color-foreground-accessory), $offset: -3px, $thickness: 1px);
 
   &:hover,
   &:active {
-    @include 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);
+    }
   }
 
   &[disabled],
@@ -26,19 +27,3 @@
     @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

@@ -7,19 +7,21 @@
 @import './disabled';
 
 @mixin iui-button-default {
-  @include iui-button-default-base;
-
-  &:focus {
-    @include iui-button-default-hover-focus;
-
-    &:where(:not(:focus-visible)) {
-      @include 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));
   }
+  @include iui-focus($offset: -2px, $thickness: 2px);
 
   &:hover,
   &:active {
-    @include 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;
   }
 
   &.iui-dropdown {
@@ -35,15 +37,20 @@
     }
   }
 
-  &.iui-active {
+  &.iui-active:enabled {
+    position: relative;
     @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);
     }
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      @include themed {
+        background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
+      }
+    }
   }
 
   &[disabled],
@@ -51,20 +58,3 @@
     @include iui-button-disabled;
   }
 }
-
-@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/high-visibility.scss

@@ -6,19 +6,20 @@
 @import './button-icon';
 
 @mixin iui-button-high-visibility {
-  @include iui-button-high-visibility-base;
-
-  &:focus {
-    @include iui-button-high-visibility-hover-focus;
-
-    &:where(:not(:focus-visible)) {
-      @include 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);
   }
+  @include iui-focus($color: var(--iui-color-foreground-accessory), $offset: -3px, $thickness: 1px);
 
   &:hover,
   &:active {
-    @include 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);
+    }
   }
 
   &[disabled],
@@ -26,19 +27,3 @@
     @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/color-picker/color-picker.scss

@@ -10,7 +10,6 @@ $iui-color-swatch-border-radius: 5px;
 $iui-inset-box-shadow: inset 0 0 0 1px rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-5));
 $iui-active-box-shadow: 0 0 0 $iui-xxs rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-3));
 $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-5));
-$iui-focus-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-4));
 
 @mixin iui-color-picker {
   @include iui-dropdown;
@@ -61,12 +60,7 @@ $iui-focus-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-primary-
     }
   }
 
-  &:focus {
-    outline: 0;
-    @include themed {
-      box-shadow: $iui-focus-box-shadow, $iui-inset-box-shadow;
-    }
-  }
+  @include iui-focus($offset: 0, $thickness: 2px);
 
   &.iui-active {
     @include themed {
@@ -78,18 +72,6 @@ $iui-focus-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-primary-
         box-shadow: $iui-hover-box-shadow, $iui-inset-box-shadow, $iui-active-box-shadow;
       }
     }
-
-    &:focus {
-      @include themed {
-        box-shadow: $iui-focus-box-shadow, $iui-inset-box-shadow, $iui-active-box-shadow;
-      }
-    }
-
-    &:focus:not(:focus-visible) {
-      @include themed {
-        box-shadow: $iui-inset-box-shadow, $iui-active-box-shadow;
-      }
-    }
   }
 }
 
@@ -273,10 +255,5 @@ $iui-focus-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-primary-
     }
   }
 
-  &:focus {
-    outline: 0;
-    @include themed {
-      box-shadow: $iui-focus-box-shadow;
-    }
-  }
+  @include iui-focus($offset: 0, $thickness: 2px);
 }

package/scss/date-picker/classes.scss

@@ -5,3 +5,23 @@
 .iui-date-picker {
   @include iui-date-picker;
 }
+
+.iui-calendar-month-year {
+  @include iui-calendar-month-year;
+}
+
+.iui-calendar-month {
+  @include iui-calendar-month;
+}
+
+.iui-calendar-weekdays {
+  @include iui-calendar-weekdays;
+}
+
+.iui-calendar-week {
+  @include iui-calendar-week;
+}
+
+.iui-calendar-day {
+  @include iui-calendar-day;
+}

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

@@ -14,118 +14,106 @@
   @include themed {
     background-color: t(iui-color-background-1);
   }
-
-  @include iui-calendar;
 }
 
-@mixin iui-calendar {
-  > .iui-calendar {
-    > .iui-header {
-      border: none;
-      padding: 0;
-      position: relative;
-      font-weight: $iui-font-weight-bold;
-      @include themed {
-        background-color: t(iui-color-background-1);
-      }
-
-      > .iui-month-year {
-        display: inline-flex;
-        width: 100%;
-        align-items: center;
-        justify-content: space-between;
-        padding: 0 $iui-xs;
-        box-sizing: border-box;
+@mixin iui-calendar-month-year {
+  display: inline-flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 $iui-xs;
+  box-sizing: border-box;
+  font-weight: $iui-font-weight-bold;
+  @include themed {
+    background-color: t(iui-color-background-1);
+  }
 
-        > span {
-          margin: 0 $iui-xs;
-          width: 156px;
-          white-space: nowrap;
-          display: inline-flex;
-          flex-shrink: 0;
-          align-items: center;
-          justify-content: center;
-          line-height: $iui-baseline * 4;
-        }
+  > span {
+    margin: 0 $iui-xs;
+    width: 156px;
+    white-space: nowrap;
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    line-height: $iui-baseline * 4;
+  }
+}
 
-        .iui-month {
-          overflow: hidden;
-          max-width: 15ch;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          flex-shrink: 0;
-        }
-      }
+@mixin iui-calendar-month {
+  overflow: hidden;
+  max-width: 15ch;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
 
-      > .iui-weekdays {
-        line-height: $iui-baseline * 3;
-        display: flex;
-        justify-content: space-evenly;
-        align-items: center;
-        padding: 0 $iui-s;
-        @include themed {
-          background-color: t(iui-color-background-2);
-        }
+@mixin iui-calendar-weekdays {
+  line-height: $iui-baseline * 3;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  padding: 0 $iui-s;
+  font-weight: $iui-font-weight-bold;
+  @include themed {
+    background-color: t(iui-color-background-2);
+  }
 
-        > div {
-          white-space: nowrap;
-          overflow: hidden;
-          width: $iui-xl;
-          text-align: center;
-        }
-      }
-    }
+  > div {
+    white-space: nowrap;
+    overflow: hidden;
+    width: $iui-xl;
+    text-align: center;
+  }
+}
 
-    > .iui-dates {
-      > .iui-week {
-        white-space: nowrap;
-        height: $iui-baseline * 3;
-        display: flex;
-        align-items: center;
-        justify-content: space-evenly;
-        padding: 0 $iui-s;
+@mixin iui-calendar-week {
+  white-space: nowrap;
+  height: $iui-baseline * 3;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  padding: 0 $iui-s;
+}
 
-        > .iui-date {
-          @include iui-focus;
-          cursor: pointer;
-          display: inline-block;
-          width: $iui-baseline * 3;
-          line-height: $iui-baseline * 3;
+@mixin iui-calendar-day {
+  @include iui-focus;
+  cursor: pointer;
+  display: inline-block;
+  width: $iui-baseline * 3;
+  line-height: $iui-baseline * 3;
+  border-radius: $iui-border-radius;
 
-          &:hover:not(.iui-selected) {
-            border-radius: $iui-border-radius;
-            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));
-            }
-          }
+  &.iui-today {
+    font-weight: $iui-font-weight-semibold;
+    border-radius: 50%;
+    @include themed {
+      background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
+    }
+  }
 
-          &.iui-today {
-            font-weight: $iui-font-weight-semibold;
-            border-radius: 50%;
-            @include themed {
-              background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
-            }
-          }
+  &:hover {
+    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));
+    }
+  }
 
-          &.iui-selected {
-            font-weight: $iui-font-weight-semibold;
-            border-radius: $iui-border-radius;
-            cursor: default;
-            @include themed {
-              background-color: t(iui-color-background-primary);
-              color: t(iui-color-foreground-accessory);
-            }
-          }
+  &.iui-selected {
+    font-weight: $iui-font-weight-semibold;
+    border-radius: $iui-border-radius;
+    cursor: default;
+    @include themed {
+      background-color: t(iui-color-background-primary);
+      color: t(iui-color-foreground-accessory);
+    }
+    @include iui-focus($color: var(--iui-color-foreground-accessory), $offset: -3px);
+  }
 
-          &.iui-outside-month {
-            @include themed {
-              color: t(iui-text-color-muted);
-            }
-          }
-        }
-      }
+  &.iui-outside-month {
+    @include themed {
+      color: t(iui-text-color-muted);
     }
   }
 }

package/scss/expandable-block/block.scss

@@ -15,6 +15,7 @@
   }
 
   > .iui-header {
+    @include iui-focus;
     display: flex;
     align-items: center;
     padding: $iui-baseline $iui-sm;

package/scss/file-upload/file-upload.scss

@@ -52,9 +52,9 @@
       flex-direction: row;
 
       &:focus-within {
-        outline: 0;
         @include themed {
-          box-shadow: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-5)) 0 0 0 2px;
+          outline: 2px solid t(iui-color-foreground-primary);
+          outline-offset: -2px;
         }
       }
     }

package/scss/footer/footer.scss

@@ -14,7 +14,6 @@
     list-style-type: none;
     margin: 0 auto;
     padding: 0;
-    overflow: hidden;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -43,7 +42,6 @@
 
       > a {
         @include iui-anchor;
-        @include iui-focus;
 
         &,
         &:hover {

package/scss/header/header.scss

@@ -186,8 +186,7 @@
       color: unset;
       // #endregion
 
-      &:hover,
-      &:focus {
+      &:hover {
         @include themed {
           background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
         }
@@ -402,19 +401,6 @@
     }
   }
 
-  // Focus styling - blue outline
-  &:focus {
-    @include themed {
-      box-shadow: t(iui-focus-box-shadow), 0 $iui-xxs 0 0 t(iui-color-foreground-primary);
-    }
-  }
-
-  &:focus:not(:focus-visible) {
-    @include themed {
-      box-shadow: 0 $iui-xxs 0 0 t(iui-color-foreground-primary);
-    }
-  }
-
   // Disabled state
   &.iui-disabled,
   &:disabled {