@itwin/itwinui-css 0.43.0 → 0.44.0

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 {

package/scss/style/mixins.scss

@@ -20,25 +20,22 @@
   }
 }
 
-@mixin iui-focus($box-shadow-value: iui-focus-box-shadow) {
-  &:focus {
-    outline: 0;
-
-    @include themed {
-      box-shadow: t($box-shadow-value);
-    }
+@mixin focus-visible {
+  &:focus-visible {
+    @content;
   }
 
-  &:focus:not(:focus-visible) {
-    box-shadow: none;
+  @supports #{'not selector(*:focus-visible)'} {
+    &:focus {
+      @content;
+    }
   }
+}
 
-  &:focus-visible {
-    outline: 0;
-
-    @include themed {
-      box-shadow: t($box-shadow-value);
-    }
+@mixin iui-focus($color: var(--iui-color-foreground-primary), $offset: -1px, $thickness: 1px) {
+  @include focus-visible {
+    outline: $thickness solid $color;
+    outline-offset: $offset;
   }
 }
 
@@ -50,7 +47,8 @@
 }
 
 @mixin iui-anchor {
-  @include iui-focus;
+  @include iui-focus($offset: 2px);
+  border-radius: $iui-border-radius;
   text-decoration: none;
   cursor: pointer;
   @include themed {

package/scss/table/classes.scss

@@ -30,6 +30,18 @@
   @include iui-paginator;
 }
 
+.iui-paginator-ellipsis {
+  @include iui-paginator-ellipsis;
+}
+
+.iui-paginator-pages-group {
+  @include iui-paginator-pages-group;
+}
+
+.iui-paginator-page-button {
+  @include iui-paginator-page-button;
+}
+
 .iui-column-filter {
   @include iui-column-filter;
 }

package/scss/table/paginator.scss

@@ -34,37 +34,6 @@
     @include themed {
       color: t(iui-text-color);
     }
-
-    .iui-button-group {
-      margin: 0 $iui-s;
-
-      > * {
-        margin-right: 0; // unset negative margin from button-group
-
-        > .iui-button,
-        > .iui-ellipsis {
-          width: $iui-component-height;
-
-          &.iui-small {
-            width: $iui-component-height-small;
-          }
-        }
-
-        > .iui-ellipsis {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          @include themed {
-            color: t(iui-text-color-muted);
-          }
-        }
-
-        > .iui-active::after {
-          top: auto;
-          bottom: $iui-xxs;
-        }
-      }
-    }
   }
 
   > .iui-right {
@@ -78,3 +47,42 @@
     text-overflow: ellipsis;
   }
 }
+
+@mixin iui-paginator-ellipsis {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: $iui-component-height;
+  @include themed {
+    color: t(iui-text-color-muted);
+  }
+
+  &-small {
+    width: $iui-component-height-small;
+  }
+}
+
+@mixin iui-paginator-pages-group {
+  @include iui-button-group;
+  margin: 0 $iui-s;
+
+  > * + * {
+    margin-left: 0; // unset negative margin from button-group
+  }
+
+  button.iui-active::after {
+    top: auto;
+    bottom: $iui-xxs;
+  }
+}
+
+@mixin iui-paginator-page-button {
+  @include iui-button;
+  @include iui-button-borderless;
+  width: $iui-component-height;
+
+  &-small {
+    @include iui-button-size(small);
+    width: $iui-component-height-small;
+  }
+}

package/scss/tabs/default.scss

@@ -37,6 +37,11 @@
         background-color: t(iui-color-background-3);
       }
     }
+
+    &:focus {
+      outline-width: 2px;
+      outline-offset: -2px;
+    }
   }
 
   @at-root {

package/scss/tabs/tabs.scss

@@ -49,14 +49,7 @@
       }
     }
 
-    &:focus {
-      outline: 1px solid t(iui-color-foreground-primary);
-      outline-offset: -1px;
-    }
-
-    &:focus:not(:focus-visible) {
-      outline: none;
-    }
+    @include iui-focus;
   }
 
   .iui-tab-icon {

package/scss/tag/tag.scss

@@ -6,7 +6,7 @@
 
 @mixin iui-tag {
   @include iui-reset;
-  @include iui-focus;
+  @include iui-focus($offset: -2px, $thickness: 2px);
   user-select: all;
   text-transform: lowercase;
   display: inline-flex;
@@ -58,6 +58,10 @@
       }
     }
   }
+
+  &.iui-basic {
+    outline-offset: 1px;
+  }
 }
 
 @mixin iui-tag-container {
@@ -65,6 +69,10 @@
     color: t(iui-text-color-muted);
   }
 
+  > a.iui-basic {
+    margin: $iui-xxs;
+  }
+
   > .iui-tag:not(:last-child) {
     margin-right: $iui-xs;
   }

package/scss/time-picker/time-picker.scss

@@ -56,6 +56,7 @@
       &.iui-selected {
         font-weight: $iui-font-weight-semibold;
         cursor: default;
+        @include iui-focus($color: var(--iui-color-foreground-accessory), $offset: -3px);
         @include themed {
           background-color: t(iui-color-background-primary);
           color: t(iui-color-foreground-accessory);

package/scss/toast-notification/categories.scss

@@ -36,9 +36,12 @@
       }
     }
 
-    > .iui-anchor,
+    > .iui-anchor {
+      outline-color: var(--iui-color-foreground-#{$category});
+    }
+
     > .iui-button {
-      @include iui-focus(iui-focus-#{$category}-box-shadow);
+      outline-color: var(--iui-color-foreground-#{$category});
     }
   }
 }

package/scss/toast-notification/toast.scss

@@ -59,7 +59,6 @@
     user-select: none;
     text-decoration: underline;
     white-space: nowrap;
-    @include iui-focus;
 
     &:hover {
       text-decoration: none;

package/scss/toggle-switch/toggle-switch.scss

@@ -109,8 +109,7 @@
         }
       }
 
-      &:hover:not(:disabled),
-      &:focus {
+      &:hover:not(:disabled) {
         ~ .iui-toggle {
           @include themed {
             border-color: t(iui-color-background-primary);
@@ -168,8 +167,13 @@
     // Focus on non-disabled toggle switch
     &:enabled:focus ~ .iui-toggle {
       @include themed {
-        box-shadow: t(iui-focus-box-shadow);
+        outline: 1px solid t(iui-color-foreground-primary);
       }
+      outline-offset: 1px;
+    }
+
+    &:enabled:focus:not(:focus-visible) ~ .iui-toggle {
+      outline: none;
     }
   }
 

package/scss/tree/tree.scss

@@ -85,9 +85,9 @@ $iui-expander-button-width: ($iui-icons-default) + ($iui-expander-inline-padding
 
   &:focus {
     @include themed {
-      outline: thin solid rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-4));
-      outline-offset: -1px;
+      outline: 1px solid t(iui-color-foreground-primary);
     }
+    outline-offset: -1px;
   }
 
   &:focus:not(:focus-visible) {

package/scss/wizard/wizard.scss

@@ -115,16 +115,16 @@
       outline: 0;
 
       .iui-wizard-circle {
-        outline: 0;
         @include themed {
-          box-shadow: t(iui-focus-positive-box-shadow);
+          outline: 2px solid t(iui-color-foreground-positive);
         }
+        outline-offset: -1px;
       }
     }
 
     &:focus:not(:focus-visible) {
       .iui-wizard-circle {
-        box-shadow: none;
+        outline: none;
       }
     }
   }