@itwin/itwinui-css 0.52.0 → 0.53.0

package/css/wizard.css

@@ -44,25 +44,25 @@
   border-radius:0;
   font-weight:400;
   text-align:center;
-  background-color:#53A21A;
-  border-color:#53A21A;
-  color:#FFF;
+  background-color:#53a21a;
+  border-color:#53a21a;
+  color:white;
   background-color:var(--iui-color-background-positive);
   border-color:var(--iui-color-background-positive);
   color:var(--iui-color-foreground-accessory);
 }
 .iui-wizard.iui-workflow .iui-wizard-step:first-of-type .iui-wizard-circle, .iui-wizard.iui-workflow .iui-wizard-step:last-of-type .iui-wizard-circle{
   border-radius:12px;
-  background-color:#FFF;
-  border-color:#53A21A;
-  color:#53A21A;
+  background-color:white;
+  border-color:#53a21a;
+  color:#53a21a;
   background-color:var(--iui-color-background-1);
   border-color:var(--iui-color-foreground-positive);
   color:var(--iui-color-foreground-positive);
 }
 .iui-wizard.iui-workflow .iui-wizard-track-content::before,
 .iui-wizard.iui-workflow .iui-wizard-track-content::after{
-  background-color:#53A21A;
+  background-color:#53a21a;
   background-color:var(--iui-color-foreground-positive);
 }
 
@@ -78,7 +78,7 @@
   font-size:12px;
   font-weight:400;
   line-height:22px;
-  color:#53A21A;
+  color:#53a21a;
   color:var(--iui-color-background-positive);
 }
 .iui-wizard-step .iui-wizard-circle{
@@ -94,9 +94,9 @@
       -ms-user-select:none;
           user-select:none;
   transition:background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out;
-  border:1px solid #53A21A;
-  background-color:#FFF;
-  color:#53A21A;
+  border:1px solid #53a21a;
+  background-color:white;
+  color:#53a21a;
   border:1px solid var(--iui-color-foreground-positive);
   background-color:var(--iui-color-background-1);
   color:var(--iui-color-foreground-positive);
@@ -105,26 +105,26 @@
   font-weight:600;
 }
 .iui-wizard-step.iui-current .iui-wizard-step-name{
-  color:#53A21A;
+  color:#53a21a;
   color:var(--iui-color-foreground-positive);
 }
 .iui-wizard-step.iui-current .iui-wizard-circle{
-  color:#FFF;
-  border-color:#53A21A;
-  background-color:#53A21A;
+  color:white;
+  border-color:#53a21a;
+  background-color:#53a21a;
   color:var(--iui-color-foreground-accessory);
   border-color:var(--iui-color-background-positive);
   background-color:var(--iui-color-background-positive);
 }
 .iui-wizard-step.iui-current .iui-wizard-track-content::after{
-  background-color:#C7CCD1;
+  background-color:#c7ccd1;
   background-color:var(--iui-color-background-5);
 }
 .iui-wizard-step.iui-current ~ .iui-wizard-step .iui-wizard-circle{
-  border:1px solid #C7CCD1;
-  background-color:#FFF;
+  border:1px solid #c7ccd1;
+  background-color:white;
   color:rgba(0, 0, 0, 0.4);
-  border:1px solid var(--iui-color-background-5);
+  border:1px solid var(--iui-color-background-border);
   background-color:var(--iui-color-background-1);
   color:var(--iui-text-color-muted);
 }
@@ -133,7 +133,7 @@
   color:var(--iui-text-color-muted);
 }
 .iui-wizard-step.iui-current ~ .iui-wizard-step .iui-wizard-track-content::before, .iui-wizard-step.iui-current ~ .iui-wizard-step:not(:last-of-type) .iui-wizard-track-content::after{
-  background-color:#C7CCD1;
+  background-color:#c7ccd1;
   background-color:var(--iui-color-background-5);
 }
 .iui-wizard-step.iui-clickable .iui-wizard-circle{
@@ -145,9 +145,9 @@
   }
 }
 .iui-wizard-step.iui-clickable .iui-wizard-circle:hover{
-  color:#FFF;
-  border:1px solid #53A21A;
-  background-color:#53A21A;
+  color:white;
+  border:1px solid #53a21a;
+  background-color:#53a21a;
   color:var(--iui-color-foreground-accessory);
   border:1px solid var(--iui-color-background-positive);
   background-color:var(--iui-color-background-positive);
@@ -156,7 +156,7 @@
   outline:0;
 }
 .iui-wizard-step.iui-clickable:focus .iui-wizard-circle{
-  outline:2px solid #53A21A;
+  outline:2px solid #53a21a;
   outline:2px solid var(--iui-color-foreground-positive);
   outline-offset:-1px;
 }
@@ -176,7 +176,7 @@
   content:"";
   height:2px;
   flex:1 2 auto;
-  background-color:#53A21A;
+  background-color:#53a21a;
   background-color:var(--iui-color-foreground-positive);
 }
 
@@ -185,6 +185,6 @@
   -webkit-user-select:all;
      -moz-user-select:all;
           user-select:all;
-  color:#53A21A;
+  color:#53a21a;
   color:var(--iui-color-foreground-positive);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-css",
-  "version": "0.52.0",
+  "version": "0.53.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "src/index.scss",

package/scss/carousel/carousel.scss

@@ -16,18 +16,8 @@
   list-style: none;
   margin: 0;
   padding: 0;
-  overflow-x: auto;
-  overflow-x: overlay;
   scroll-snap-type: x mandatory;
-  @media (prefers-reduced-motion: no-preference) {
-    scroll-behavior: smooth;
-  }
-
-  // hide scrollbar
-  &::-webkit-scrollbar {
-    display: none;
-  }
-  scrollbar-width: none;
+  @include hide-scrollbar;
 
   &-item {
     width: 100%;
@@ -63,15 +53,11 @@
   &-dots {
     @include iui-reset;
     @include iui-focus;
-    display: flex;
-    align-items: center;
     flex: 2;
     max-width: $iui-xxl * 4;
     border-radius: $iui-border-radius;
     white-space: nowrap;
-    overflow: hidden;
-    justify-content: center;
-    list-style: none;
+    @include hide-scrollbar;
   }
 
   &-dot {
@@ -86,22 +72,17 @@
       }
     }
 
-    &.iui-invisible {
-      @include visually-hidden;
-    }
-
     &::after {
       content: '';
       display: block;
       width: $iui-icons-small;
       height: $iui-icons-small;
       border-radius: 50%;
-      transition: background-color $iui-speed-fast ease;
-      @media (prefers-reduced-motion: no-preference) {
-        transition: background-color $iui-speed-fast $iui-speed-fast ease, transform $iui-speed ease;
-      }
+      box-sizing: border-box;
+      border: 1px solid transparent;
       @include themed {
         background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
+        box-shadow: inset 0 0 0 0 t(iui-color-background-1);
       }
     }
 
@@ -113,13 +94,15 @@
       transform: scale(0.75);
     }
 
-    &.iui-invisible::after {
-      transform: scale(0);
-    }
-
     &.iui-active::after {
       @include themed {
         background-color: t(iui-color-foreground-primary);
+        border-color: t(iui-color-foreground-primary);
+        box-shadow: inset 0 0 0 1px t(iui-color-background-1);
+      }
+
+      @media (forced-colors: active) {
+        border-width: $iui-icons-small * 0.5;
       }
     }
   }
@@ -128,3 +111,14 @@
     justify-content: flex-end;
   }
 }
+
+@mixin hide-scrollbar {
+  overflow-x: auto;
+  overflow-x: overlay;
+
+  // hide scrollbar
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  scrollbar-width: none;
+}

package/scss/classes.scss

@@ -42,3 +42,4 @@
 @import './user-icon/classes';
 @import './wizard/classes';
 @import './skip-to-content/classes';
+@import './surface/classes';

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

@@ -1,7 +1,7 @@
 // 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 '../menu/index';
+@import '../surface/index';
 @import '../button/borderless';
 
 $iui-color-picker-content-width: ($iui-l * 9) + ($iui-s * 8); // (9 swatches per row) + (gaps)
@@ -14,7 +14,7 @@ $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(var(--iui-color-foreground-body
 @mixin iui-color-picker {
   --iui-color-picker-selected-color: initial;
 
-  @include iui-dropdown;
+  @include iui-surface;
   box-sizing: border-box;
   border-radius: $iui-border-radius;
   display: inline-flex;

package/scss/date-picker/classes.scss

@@ -25,3 +25,23 @@
 .iui-calendar-day {
   @include iui-calendar-day;
 }
+
+.iui-calendar-day-selected {
+  @include iui-calendar-day-selected;
+}
+
+.iui-calendar-day-outside-month {
+  @include iui-calendar-day-outside-month;
+}
+
+.iui-calendar-day-range-start {
+  @include iui-calendar-day-range-start;
+}
+
+.iui-calendar-day-range-end {
+  @include iui-calendar-day-range-end;
+}
+
+.iui-calendar-day-range {
+  @include iui-calendar-day-range;
+}

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

@@ -2,17 +2,21 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import '../style/index';
 @import '../icon/index';
-@import '../menu/index';
+@import '../surface/index';
+
+$iui-date-picker-cell-width: 40px;
+$iui-date-picker-cell-height: 36px;
+$iui-date-picker-today-circle-size: 32px;
 
 @mixin iui-date-picker {
-  @include iui-dropdown;
-  box-shadow: $iui-elevation-2;
+  @include iui-surface;
   user-select: none;
-  text-align: center;
-  height: $iui-baseline * 26;
-  display: inline-flex;
-  @include themed {
-    background-color: t(iui-color-background-1);
+  display: grid;
+  grid-template-columns: 1fr auto;
+
+  .iui-time-picker {
+    height: 0;
+    min-height: 100%;
   }
 }
 
@@ -24,12 +28,9 @@
   padding: 0 $iui-xs;
   box-sizing: border-box;
   font-weight: $iui-font-weight-bold;
-  @include themed {
-    background-color: t(iui-color-background-1);
-  }
+  gap: $iui-xs;
 
   > span {
-    margin: 0 $iui-xs;
     width: 156px;
     white-space: nowrap;
     display: inline-flex;
@@ -49,10 +50,8 @@
 }
 
 @mixin iui-calendar-weekdays {
-  line-height: $iui-baseline * 3;
+  line-height: $iui-date-picker-cell-height;
   display: flex;
-  justify-content: space-evenly;
-  align-items: center;
   padding: 0 $iui-s;
   font-weight: $iui-font-weight-bold;
   @include themed {
@@ -62,58 +61,220 @@
   > div {
     white-space: nowrap;
     overflow: hidden;
-    width: $iui-xl;
+    width: $iui-date-picker-cell-width;
     text-align: center;
   }
 }
 
 @mixin iui-calendar-week {
   white-space: nowrap;
-  height: $iui-baseline * 3;
+  line-height: $iui-date-picker-cell-height;
   display: flex;
-  align-items: center;
-  justify-content: space-evenly;
   padding: 0 $iui-s;
+  margin-bottom: $iui-xxs;
 }
 
-@mixin iui-calendar-day {
+//#region Helper mixins
+@mixin iui-calendar-day-base {
   @include iui-focus;
   cursor: pointer;
-  display: inline-block;
-  width: $iui-baseline * 3;
-  line-height: $iui-baseline * 3;
+  text-align: center;
+  width: $iui-date-picker-cell-width;
+  height: $iui-date-picker-cell-height;
   border-radius: $iui-border-radius;
+  font-variant-numeric: tabular-nums;
+}
 
-  &.iui-today {
+@mixin iui-calendar-day-base-hover {
+  &:hover {
     font-weight: $iui-font-weight-semibold;
-    border-radius: 50%;
     @include themed {
-      background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
+      color: t(iui-color-foreground-primary);
+      background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
+    }
+  }
+}
+
+@mixin iui-calendar-day-today-base {
+  position: relative;
+  font-weight: $iui-font-weight-semibold;
+
+  &::before {
+    content: '';
+    position: absolute;
+    display: block;
+    width: $iui-date-picker-today-circle-size;
+    height: $iui-date-picker-today-circle-size;
+    border-radius: $iui-border-radius-round;
+    box-sizing: border-box;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    @include themed {
+      border: 2px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-5));
     }
   }
 
   &:hover {
-    font-weight: $iui-font-weight-semibold;
+    background-color: initial;
     @include themed {
       color: t(iui-color-foreground-primary);
+    }
+  }
+
+  &:hover::before {
+    @include themed {
       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;
+@mixin iui-calendar-day-selected-base {
+  font-weight: $iui-font-weight-semibold;
+  @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);
+}
+
+@mixin iui-calendar-day-selected-today-base {
+  &:hover {
     @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);
+
+    &::before {
+      @include themed {
+        background-color: initial;
+      }
+    }
+  }
+
+  &::before {
+    @include themed {
+      border-color: rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-4));
+    }
+  }
+}
+//#endregion Helper mixins
+
+@mixin iui-calendar-day {
+  &,
+  &-today {
+    @include iui-calendar-day-base;
+    @include iui-calendar-day-base-hover;
+  }
+
+  &-today {
+    @include iui-calendar-day-today-base;
+  }
+}
+
+@mixin iui-calendar-day-selected {
+  &,
+  &-today {
+    @include iui-calendar-day-base;
+    @include iui-calendar-day-selected-base;
+    cursor: default;
+  }
+
+  &-today {
+    @include iui-calendar-day-today-base;
+    @include iui-calendar-day-selected-today-base;
+  }
+}
+
+@mixin iui-calendar-day-range-start {
+  &,
+  &-today {
+    @include iui-calendar-day-base;
+    @include iui-calendar-day-selected-base;
+
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    cursor: pointer;
+  }
+
+  &-today {
+    @include iui-calendar-day-today-base;
+    @include iui-calendar-day-selected-today-base;
+  }
+}
+
+@mixin iui-calendar-day-range-end {
+  &,
+  &-today {
+    @include iui-calendar-day-base;
+    @include iui-calendar-day-selected-base;
+
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  &-today {
+    @include iui-calendar-day-today-base;
+    @include iui-calendar-day-selected-today-base;
+  }
+}
+
+@mixin iui-calendar-day-range {
+  &,
+  &-today {
+    @include iui-calendar-day-base;
+
+    border-radius: 0;
+    @include themed {
+      background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-5));
+      color: t(iui-text-color);
+    }
+
+    &:hover {
+      font-weight: $iui-font-weight-semibold;
+
+      @include themed {
+        background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-4));
+      }
+    }
   }
 
-  &.iui-outside-month {
+  &-today {
+    @include iui-calendar-day-today-base;
+
+    &:hover {
+      @include themed {
+        background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-5));
+        color: t(iui-text-color);
+      }
+
+      &::before {
+        @include themed {
+          background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-4));
+        }
+      }
+    }
+
+    &::before {
+      @include themed {
+        border-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-4));
+      }
+    }
+  }
+}
+
+@mixin iui-calendar-day-outside-month {
+  &,
+  &-today {
+    @include iui-calendar-day-base;
+    @include iui-calendar-day-base-hover;
+
     @include themed {
       color: t(iui-text-color-muted);
     }
   }
+
+  &-today {
+    @include iui-calendar-day-today-base;
+  }
 }

package/scss/fieldset/fieldset.scss

@@ -8,7 +8,7 @@
   padding: $iui-baseline $iui-sm;
   border-radius: $iui-border-radius;
   @include themed {
-    border: 1px solid t(iui-color-background-4);
+    border: 1px solid t(iui-color-background-border);
     background-color: t(iui-color-background-1);
   }
 

package/scss/header/header.scss

@@ -21,7 +21,7 @@
   }
   @include themed {
     background-color: t(iui-color-background-1);
-    border-bottom: $iui-xxs solid t(iui-color-background-5);
+    border-bottom: $iui-xxs solid t(iui-color-background-border);
     color: t(iui-text-color);
   }
 
@@ -83,7 +83,7 @@
     width: 1px;
     height: $iui-baseline * 2;
     @include themed {
-      background-color: t(iui-color-background-4);
+      background-color: t(iui-color-background-border);
     }
   }
 
@@ -252,15 +252,16 @@
       overflow: hidden;
       text-overflow: ellipsis;
     }
+  }
 
-    .iui-description {
-      height: $iui-baseline * 2;
-      @media (prefers-reduced-motion: no-preference) {
-        transition: all $iui-speed-fast ease;
-      }
-      @include themed {
-        opacity: t(iui-opacity-3);
-      }
+  .iui-description {
+    height: $iui-baseline * 2;
+    font-size: $iui-font-size-small;
+    @media (prefers-reduced-motion: no-preference) {
+      transition: all $iui-speed-fast ease;
+    }
+    @include themed {
+      opacity: t(iui-opacity-3);
     }
   }
 
@@ -378,6 +379,10 @@
     }
   }
 
+  .iui-description {
+    opacity: 1;
+  }
+
   &,
   &:hover {
     // Blue background and darker blue bottom line

package/scss/index.scss

@@ -40,3 +40,4 @@
 @import './user-icon/index';
 @import './wizard/index';
 @import './skip-to-content/index';
+@import './surface/index';

package/scss/information-panel/information-panel.scss

@@ -11,6 +11,7 @@
 @mixin iui-information-panel {
   position: absolute;
   opacity: 0;
+  visibility: hidden;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -18,7 +19,8 @@
   max-height: 100%;
   z-index: 2; // Needs to be higher than table's column resizers.
   @media (prefers-reduced-motion: no-preference) {
-    transition: transform $iui-speed-fast ease-out, opacity $iui-speed-fast ease;
+    transition: visibility $iui-speed-instant $iui-speed-fast ease-in, transform $iui-speed-fast ease-out,
+      opacity $iui-speed-fast ease;
   }
 
   @include themed {
@@ -32,7 +34,7 @@
 
     > .iui-resizer-bar {
       @include themed {
-        background-color: t(iui-color-background-5);
+        background-color: t(iui-color-background-border);
       }
     }
 
@@ -100,7 +102,7 @@
 
     > hr {
       @include themed {
-        border-color: t(iui-color-background-4);
+        border-color: t(iui-color-background-border);
       }
     }
   }
@@ -108,8 +110,13 @@
 
 @mixin iui-information-panel-visible {
   opacity: 1;
+  visibility: visible;
   transform: translate(0);
 
+  @media (prefers-reduced-motion: no-preference) {
+    transition: transform $iui-speed-fast ease-out, opacity $iui-speed-fast ease;
+  }
+
   > .iui-resizer {
     display: flex;
   }