@itwin/itwinui-css 0.41.1 → 0.44.0

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));
         }
@@ -314,9 +313,13 @@
 }
 
 @mixin iui-header-split-button {
-  height: 100%;
-  display: flex;
-  overflow: hidden;
+  &,
+  > * {
+    height: 100%;
+    display: flex;
+    overflow: hidden;
+  }
+
   max-width: 25vw;
 
   .iui-button {
@@ -324,8 +327,10 @@
     padding: 0 $iui-xs;
   }
 
-  .iui-button:first-child {
-    padding-left: $iui-sm;
+  > *:first-child {
+    .iui-button {
+      padding-left: $iui-sm;
+    }
   }
 
   &.iui-active {
@@ -343,8 +348,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));
         }
@@ -394,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 {
@@ -415,13 +409,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/inputs/checkbox-radio.scss

@@ -11,7 +11,6 @@
   user-select: none;
   position: relative;
   cursor: pointer;
-
   @include themed {
     color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
   }
@@ -30,37 +29,52 @@
 
   .iui-checkbox-checkmark,
   .iui-radio-dot {
-    box-sizing: border-box;
     width: $iui-icons-default;
     height: $iui-icons-default;
     margin: 0;
     display: flex;
+    flex-shrink: 0;
     justify-content: center;
     align-items: center;
-
+    position: relative;
+    isolation: isolate;
     @include themed {
-      border: 1px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
+      border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
       background-color: t(iui-color-background-1);
     }
 
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+      transition: border-color $iui-speed-fast ease-out;
+      border-radius: inherit;
+      border-style: solid;
+      border-width: 1px;
+      border-color: inherit;
+    }
+
     svg:not(.iui-radial) {
-      width: $iui-sm;
-      height: $iui-sm;
+      width: 100%;
+      height: 100%;
+      @include themed {
+        fill: t(iui-icons-color-primary);
+      }
 
       > * {
         opacity: 0;
         @media (prefers-reduced-motion: no-preference) {
           transition: opacity $iui-speed-fast ease;
         }
-        @include themed {
-          fill: t(iui-icons-color-primary);
-        }
       }
     }
   }
 
   > .iui-label {
     margin-right: $iui-s;
+    display: flex;
+    align-items: center;
 
     svg {
       width: $iui-icons-default;
@@ -85,9 +99,6 @@
     @include themed {
       border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
     }
-    @media (prefers-reduced-motion: no-preference) {
-      transition: all $iui-speed-fast ease-out;
-    }
   }
 
   // Selected checkboxes & radios border opacity increase
@@ -115,15 +126,16 @@
       ~ .iui-checkbox-checkmark,
       ~ .iui-radio-dot {
         @include themed {
-          box-shadow: t(iui-focus-box-shadow);
+          outline: 2px solid t(iui-color-foreground-primary);
         }
+        outline-offset: -1px;
       }
     }
 
     &:focus:not(:focus-visible) {
       ~ .iui-checkbox-checkmark,
       ~ .iui-radio-dot {
-        box-shadow: none;
+        outline: none;
       }
     }
   }
@@ -132,7 +144,6 @@
   input:disabled ~ .iui-checkbox-checkmark,
   input:disabled ~ .iui-radio-dot {
     cursor: not-allowed;
-
     @include themed {
       background-color: t(iui-color-background-disabled);
       border-color: t(iui-color-background-disabled);
@@ -140,9 +151,8 @@
   }
 
   // Styles disabled checks
-  input:disabled ~ .iui-checkbox-checkmark path,
-  input:disabled ~ .iui-checkbox-checkmark g,
-  input:disabled ~ .iui-radio-dot circle {
+  input:disabled ~ .iui-checkbox-checkmark svg,
+  input:disabled ~ .iui-radio-dot svg {
     @include themed {
       fill: t(iui-icons-color-actionable-disabled);
     }

package/scss/inputs/checkbox.scss

@@ -14,7 +14,7 @@
     cursor: wait;
 
     input ~ .iui-checkbox-checkmark {
-      border: none;
+      border-color: transparent;
       background-color: transparent;
     }
 
@@ -35,8 +35,8 @@
       }
     }
 
-    input ~ .iui-checkbox-checkmark,
-    &:hover > input:enabled ~ .iui-checkbox-checkmark {
+    input ~ .iui-checkbox-checkmark::after,
+    &:hover > input:enabled ~ .iui-checkbox-checkmark::after {
       border: none;
     }
 
@@ -44,11 +44,6 @@
       background-color: transparent;
     }
 
-    .iui-checkbox-checkmark svg:not(.iui-radial) {
-      width: $iui-icons-default;
-      height: $iui-icons-default;
-    }
-
     input:checked ~ .iui-checkbox-checkmark .iui-uncheck,
     input:indeterminate ~ .iui-checkbox-checkmark .iui-uncheck {
       opacity: 0;
@@ -61,5 +56,11 @@
         fill: t(iui-icons-color-actionable);
       }
     }
+
+    input:disabled ~ .iui-checkbox-checkmark .iui-uncheck {
+      @include themed {
+        fill: t(iui-icons-color-actionable-disabled);
+      }
+    }
   }
 }

package/scss/inputs/input.scss

@@ -4,6 +4,7 @@
 
 @mixin iui-input {
   @include iui-reset;
+  @include iui-focus($offset: -2px, $thickness: 2px);
   width: 100%;
   font-family: inherit;
   font-size: $iui-font-size;
@@ -43,11 +44,6 @@
     }
   }
 
-  &:-webkit-autofill {
-    @include iui-input-autofill;
-  }
-
-  // stylelint-disable-next-line selector-pseudo-class-no-unknown
   &:autofill {
     @include iui-input-autofill;
   }
@@ -68,15 +64,6 @@
     }
     cursor: not-allowed;
   }
-
-  &:focus {
-    outline: 0;
-
-    @include themed {
-      border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
-      box-shadow: t(iui-focus-box-shadow);
-    }
-  }
 }
 
 @mixin iui-input-autofill {

package/scss/inputs/labeled-inputs.scss

@@ -339,7 +339,8 @@
     &:focus {
       @include themed {
         border-bottom: $iui-xxs solid t(iui-color-foreground-#{$status});
-        box-shadow: rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-5)) 0 0 0 $iui-xxs;
+        outline: 2px solid t(iui-color-foreground-#{$status});
+        outline-offset: -2px;
       }
     }
   }

package/scss/inputs/radio-tile.scss

@@ -105,11 +105,16 @@
     }
 
     // Adds focus to enabled radio tiles
-    input:enabled:focus ~ .iui-radio-tile {
-      outline: 0;
+    input:enabled {
+      &:focus ~ .iui-radio-tile {
+        @include themed {
+          outline: 2px solid t(iui-color-foreground-primary);
+          outline-offset: -4px;
+        }
+      }
 
-      @include themed {
-        box-shadow: t(iui-focus-box-shadow);
+      &:focus:not(:focus-visible) ~ .iui-radio-tile {
+        outline: none;
       }
     }
 

package/scss/inputs/select.scss

@@ -14,7 +14,7 @@ $iui-after-border: 5px solid;
 
   > .iui-select-button {
     @include iui-input;
-    @include iui-focus;
+    @include iui-focus($offset: -2px, $thickness: 2px);
     display: flex;
     align-items: center;
     min-height: $iui-component-height;

package/scss/side-navigation/side-navigation.scss

@@ -100,15 +100,7 @@
 
     &,
     &:hover,
-    &[disabled],
-    &:focus {
-      @include themed {
-        border-color: t(iui-color-background-5);
-      }
-    }
-
-    // Overriding border from default button
-    &:focus:not(:focus-visible) {
+    &[disabled] {
       @include themed {
         border-color: t(iui-color-background-5);
       }
@@ -130,19 +122,6 @@
       @include themed {
         box-shadow: inset $iui-xxs 0 0 0 t(iui-icons-color-primary);
       }
-
-      &:focus {
-        @include themed {
-          box-shadow: inset 0 0 $iui-xs rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-3)),
-            inset $iui-xxs 0 0 0 t(iui-icons-color-primary);
-        }
-      }
-
-      &:focus:not(:focus-visible) {
-        @include themed {
-          box-shadow: inset $iui-xxs 0 0 0 t(iui-icons-color-primary);
-        }
-      }
     }
 
     &[disabled],
@@ -152,17 +131,6 @@
       }
     }
 
-    &:focus {
-      outline: 0;
-      @include themed {
-        box-shadow: inset 0 0 $iui-xs rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-3));
-      }
-    }
-
-    &:focus:not(:focus-visible) {
-      box-shadow: none;
-    }
-
     &.iui-expand {
       height: $iui-line-height;
       justify-content: center;

package/scss/slider/slider.scss

@@ -68,6 +68,7 @@ $tick-height: $iui-baseline; // 11px
   ); // Adjust the left (set in code) by radius of thumb so thumb center is at value position
   z-index: 1;
   cursor: grab;
+  @include iui-focus($thickness: 2px);
   @include themed {
     background: t(iui-color-background-1);
     border: 1px solid t(iui-color-background-5);
@@ -76,8 +77,6 @@ $tick-height: $iui-baseline; // 11px
   &:active {
     cursor: grabbing;
   }
-
-  @include iui-focus();
 }
 
 @mixin iui-slider-track {