@itwin/itwinui-css 0.61.0 → 1.0.0-dev.0

package/scss/button/variant.scss

@@ -0,0 +1,44 @@
+// 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';
+
+/// @arg $variant Can be one of: cta, high-visibility
+@mixin iui-button-variant($variant) {
+  @if $variant == cta {
+    --_iui-button-background-color: var(--iui-color-background-positive);
+
+    &:hover,
+    &:active {
+      --_iui-button-background-color: var(--iui-color-background-positive-overlay);
+    }
+  }
+
+  @if $variant == high-visibility {
+    --_iui-button-background-color: var(--iui-color-background-primary);
+
+    &:hover,
+    &:active {
+      --_iui-button-background-color: var(--iui-color-background-primary-overlay);
+    }
+  }
+
+  --_iui-button-text-color: var(--iui-color-foreground-accessory);
+  --_iui-button-border-color: var(--_iui-button-background-color);
+
+  &:focus {
+    outline-color: var(--iui-color-foreground-accessory);
+    outline-offset: -3px;
+    outline-width: 1px;
+  }
+
+  &[disabled],
+  &:disabled,
+  &[aria-disabled='true'] {
+    --_iui-button-background-color: var(--iui-color-background-disabled);
+    --_iui-button-text-color: var(--iui-text-color-placeholder);
+
+    outline-offset: -1px;
+    outline-width: 1px;
+    outline-color: var(--iui-color-foreground-primary);
+  }
+}

package/scss/carousel/carousel.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 '../text/index';
+@import '../utils/index';
 @import '../button/button';
 
 @mixin iui-carousel {
@@ -22,7 +22,6 @@
   &-item {
     width: 100%;
     flex-shrink: 0;
-    box-sizing: border-box;
     scroll-snap-align: center;
   }
 }
@@ -31,10 +30,7 @@
   display: flex;
   align-items: center;
   height: $iui-baseline * 3;
-  box-sizing: border-box;
-  @include themed {
-    border-top: $iui-xxs solid t(iui-color-background-4);
-  }
+  border-top: $iui-xxs solid var(--iui-color-background-4);
 
   &-left,
   &-right {
@@ -44,9 +40,7 @@
 
     button[data-pressed='true'] {
       outline-offset: -1px;
-      @include themed {
-        outline: 1px solid t(iui-color-foreground-primary);
-      }
+      outline: 1px solid var(--iui-color-foreground-primary);
     }
   }
 
@@ -65,11 +59,12 @@
     background-color: transparent;
     border: none;
     cursor: pointer;
+    height: var(--_iui-button-height);
+    padding-left: var(--_iui-button-padding-inline);
+    padding-right: var(--_iui-button-padding-inline);
 
     &:hover::after {
-      @include themed {
-        background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-3));
-      }
+      background-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
     }
 
     &::after {
@@ -78,12 +73,9 @@
       width: $iui-icons-small;
       height: $iui-icons-small;
       border-radius: 50%;
-      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);
-      }
+      background-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+      box-shadow: inset 0 0 0 0 var(--iui-color-background-1);
     }
 
     &.iui-first::after {
@@ -95,12 +87,9 @@
     }
 
     &.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);
-      }
-
+      background-color: var(--iui-color-foreground-primary);
+      border-color: var(--iui-color-foreground-primary);
+      box-shadow: inset 0 0 0 1px var(--iui-color-background-1);
       @media (forced-colors: active) {
         border-width: $iui-icons-small * 0.5;
       }

package/scss/{inputs → checkbox}/checkbox.scss

@@ -1,11 +1,59 @@
 // 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';
+@import '../utils/index';
 
 @mixin iui-checkbox {
   &-wrapper {
-    @include iui-inputs-checkbox-radio;
+    @include iui-reset;
+    display: flex;
+    align-items: center;
+    font-size: $iui-font-size;
+    width: fit-content;
+    user-select: none;
+    position: relative;
+    cursor: pointer;
+    color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
+    gap: $iui-s;
+
+    &.iui-loading {
+      cursor: wait;
+      color: var(--iui-text-color-muted);
+    }
+
+    > .iui-checkbox-label,
+    > .iui-radio-label {
+      display: flex;
+      align-items: center;
+
+      svg {
+        width: $iui-icons-default;
+        height: $iui-icons-default;
+        vertical-align: middle;
+        fill: currentColor;
+      }
+    }
+
+    &.iui-disabled {
+      cursor: not-allowed;
+      color: var(--iui-text-color-muted);
+
+      svg {
+        fill: var(--iui-icons-color-actionable-disabled);
+      }
+    }
+
+    &.iui-positive {
+      color: var(--iui-color-foreground-positive);
+    }
+
+    &.iui-warning {
+      color: var(--iui-color-foreground-warning);
+    }
+
+    &.iui-negative {
+      color: var(--iui-color-foreground-negative);
+    }
   }
 
   --_iui-checkbox-checkmark-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m6.5 12.5-4.5-4.5 1.5-1.5 3 3 6-6 1.5 1.5z" /></svg>');

package/scss/checkbox/classes.scss

@@ -0,0 +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 './index';
+
+.iui-checkbox {
+  @include iui-checkbox;
+}

package/scss/checkbox/index.scss

@@ -0,0 +1,3 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@import './checkbox';

package/scss/classes.scss

@@ -4,12 +4,14 @@
 @import './style/global';
 @import './alert/classes';
 @import './anchor/classes';
+@import './avatar/classes';
 @import './badge/classes';
 @import './backdrop/classes';
 @import './blockquote/classes';
 @import './breadcrumbs/classes';
 @import './button/classes';
 @import './carousel/classes';
+@import './checkbox/classes';
 @import './code/classes';
 @import './color-picker/classes';
 @import './date-picker/classes';
@@ -21,28 +23,30 @@
 @import './header/classes';
 @import './icon/classes';
 @import './information-panel/classes';
-@import './inputs/classes';
+@import './input/classes';
 @import './keyboard/classes';
 @import './location-marker/classes';
 @import './menu/classes';
 @import './non-ideal-state/classes';
-@import './notification-marker/classes';
-@import './popover/classes';
 @import './progress-indicator/classes';
+@import './radio/classes';
 @import './radio-tile/classes';
+@import './select/classes';
 @import './side-navigation/classes';
 @import './skip-to-content/classes';
 @import './slider/classes';
+@import './stepper/classes';
 @import './surface/classes';
 @import './table/classes';
 @import './tabs/classes';
 @import './tag/classes';
 @import './text/classes';
+@import './textarea/classes';
 @import './tile/classes';
 @import './time-picker/classes';
-@import './toast-notification/classes';
+@import './toast/classes';
 @import './toggle-switch/classes';
 @import './tooltip/classes';
 @import './tree/classes';
-@import './user-icon/classes';
-@import './wizard/classes';
+@import './utils/classes';
+@import './workflow-diagram/classes';

package/scss/code/code.scss

@@ -1,6 +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 '../utils/index';
 
 @mixin iui-code {
   @include iui-reset;
@@ -10,9 +11,6 @@
   padding: 0 $iui-xs;
   border-radius: $iui-border-radius;
   user-select: all;
-
-  @include themed {
-    background-color: t(iui-color-background-3);
-    color: t(iui-text-color);
-  }
+  background-color: var(--iui-color-background-3);
+  color: var(--iui-text-color);
 }

package/scss/code/codeblock.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 '../icon/index';
+@import '../utils/index';
 
 @mixin iui-codeblock {
   @include iui-reset;
@@ -11,10 +11,7 @@
     display: flex;
     align-items: center;
     border-radius: $iui-border-radius $iui-border-radius 0 0;
-
-    @include themed {
-      background-color: t(iui-color-background-3);
-    }
+    background-color: var(--iui-color-background-3);
 
     > .iui-title {
       margin-left: $iui-sm;
@@ -32,13 +29,9 @@
     overflow-y: auto;
     border-radius: 0 0 $iui-border-radius $iui-border-radius;
     white-space: normal;
-
+    border: 1px solid var(--iui-color-background-3);
     @include iui-focus;
 
-    @include themed {
-      border: 1px solid t(iui-color-background-3);
-    }
-
     > code {
       display: block;
       width: 100%;
@@ -46,14 +39,10 @@
       hyphens: auto;
       counter-increment: section;
       font-family: $iui-monospace;
-      @include themed {
-        background-color: t(iui-color-background-1);
-      }
+      background-color: var(--iui-color-background-1);
 
       &:nth-child(even) {
-        @include themed {
-          background: rgba(t(iui-color-foreground-body-rgb), 0.02);
-        }
+        background: rgba(var(--iui-color-foreground-body-rgb), 0.02);
       }
 
       &::before {
@@ -62,11 +51,8 @@
         display: inline-block;
         padding: 0 $iui-s;
         width: $iui-l;
-
-        @include themed {
-          background-color: t(iui-color-background-2);
-          color: t(iui-text-color-muted);
-        }
+        background-color: var(--iui-color-background-2);
+        color: var(--iui-text-color-muted);
       }
     }
   }

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

@@ -3,6 +3,7 @@
 @import '../style/index';
 @import '../surface/index';
 @import '../button/borderless';
+@import '../utils/index';
 
 $iui-color-picker-content-width: ($iui-l * 9) + ($iui-s * 8); // (9 swatches per row) + (gaps)
 $iui-color-picker-max-width: ($iui-l * 10) + ($iui-s * 9); // (10 swatches per row) + (gaps)
@@ -15,7 +16,6 @@ $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(var(--iui-color-foreground-body
   --iui-color-picker-selected-color: initial;
 
   @include iui-surface;
-  box-sizing: border-box;
   border-radius: $iui-border-radius;
   display: inline-flex;
   padding: $iui-baseline $iui-sm;
@@ -26,16 +26,7 @@ $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(var(--iui-color-foreground-body
   @supports (overflow-y: overlay) {
     overflow-y: overlay;
   }
-  @supports (row-gap: $iui-baseline) {
-    row-gap: $iui-baseline;
-  }
-
-  > div:not(:last-child) {
-    margin-bottom: $iui-baseline;
-    @supports (row-gap: $iui-baseline) {
-      margin-bottom: 0;
-    }
-  }
+  row-gap: $iui-baseline;
 }
 
 @mixin iui-color-swatch {
@@ -45,16 +36,10 @@ $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(var(--iui-color-foreground-body
   width: $iui-l;
   cursor: pointer;
   border-radius: $iui-color-swatch-border-radius;
-  margin-bottom: $iui-xs;
-  margin-right: $iui-xs;
   position: relative;
   background-color: var(--iui-color-swatch-background);
   forced-color-adjust: none;
   @include iui-transparent-background;
-  @supports (gap: $iui-s) {
-    margin-bottom: 0;
-    margin-right: 0;
-  }
 
   &::after {
     content: '';
@@ -90,14 +75,11 @@ $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(var(--iui-color-foreground-body
   align-content: flex-start;
   min-height: $iui-l;
   min-width: $iui-l;
-  @supports (gap: $iui-s) {
-    gap: $iui-s;
-  }
+  gap: $iui-s;
 
-  button.iui-button.iui-borderless {
-    height: $iui-l;
-    width: $iui-l;
-    padding: 0;
+  button[data-iui-variant='borderless'] {
+    --_iui-button-height: #{$iui-l};
+    --_iui-button-padding-inline: 0;
   }
 
   &-wrapper {
@@ -130,13 +112,6 @@ $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(var(--iui-color-foreground-body
       flex-grow: 1;
     }
 
-    > *:not(:last-child) {
-      margin-right: $iui-xxs;
-      @supports (gap: $iui-xxs) {
-        margin-right: 0;
-      }
-    }
-
     input {
       text-transform: uppercase;
     }
@@ -186,18 +161,16 @@ $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(var(--iui-color-foreground-body
   .iui-slider-rail {
     height: $iui-s;
     forced-color-adjust: none;
-    @include themed {
-      background: linear-gradient(
-        to right,
-        $iui-color-system-red 0%,
-        $iui-color-system-yellow 17%,
-        rgb(0, 255, 0) 33%,
-        rgb(0, 255, 255) 50%,
-        $iui-color-system-blue 67%,
-        $iui-color-system-magenta 83%,
-        $iui-color-system-red 100%
-      );
-    }
+    background: linear-gradient(
+      to right,
+      $iui-color-system-red 0%,
+      $iui-color-system-yellow 17%,
+      rgb(0, 255, 0) 33%,
+      rgb(0, 255, 255) 50%,
+      $iui-color-system-blue 67%,
+      $iui-color-system-magenta 83%,
+      $iui-color-system-red 100%
+    );
   }
 
   .iui-slider-thumb {
@@ -249,22 +222,20 @@ $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(var(--iui-color-foreground-body
 @mixin iui-transparent-background($size: $iui-m) {
   background-position: 0 0, ($size * 0.5) ($size * 0.5);
   background-size: $size $size;
-  @include themed {
-    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,
+    var(--iui-color-background-3) 25%,
+    transparent 25%,
+    transparent 75%,
+    var(--iui-color-background-3) 75%,
+    var(--iui-color-background-3)
+  ),
+    repeating-linear-gradient(
+    45deg,
+    var(--iui-color-background-3) 25%,
+    var(--iui-color-background-5) 25%,
+    var(--iui-color-background-5) 75%,
+    var(--iui-color-background-3) 75%,
+    var(--iui-color-background-3)
+  );
 }

package/scss/date-picker/date-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 '../icon/index';
+@import '../utils/index';
 @import '../surface/index';
 
 $iui-date-picker-cell-width: 40px;
@@ -26,7 +26,6 @@ $iui-date-picker-today-circle-size: 32px;
   align-items: center;
   justify-content: space-between;
   padding: 0 $iui-xs;
-  box-sizing: border-box;
   font-weight: $iui-font-weight-bold;
   gap: $iui-xs;
 
@@ -54,9 +53,7 @@ $iui-date-picker-today-circle-size: 32px;
   display: flex;
   padding: 0 $iui-s;
   font-weight: $iui-font-weight-bold;
-  @include themed {
-    background-color: t(iui-color-background-2);
-  }
+  background-color: var(--iui-color-background-2);
 
   > div {
     white-space: nowrap;
@@ -88,10 +85,8 @@ $iui-date-picker-today-circle-size: 32px;
 @mixin iui-calendar-day-base-hover {
   &: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));
-    }
+    color: var(--iui-color-foreground-primary);
+    background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
   }
 }
 
@@ -106,56 +101,41 @@ $iui-date-picker-today-circle-size: 32px;
     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));
-    }
+    border: 2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
   }
 
   &:hover {
     background-color: initial;
-    @include themed {
-      color: t(iui-color-foreground-primary);
-    }
+    color: var(--iui-color-foreground-primary);
   }
 
   &:hover::before {
-    @include themed {
-      background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
-    }
+    background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
   }
 }
 
 @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);
-  }
+  background-color: var(--iui-color-background-primary);
+  color: var(--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);
-    }
+    background-color: var(--iui-color-background-primary);
+    color: var(--iui-color-foreground-accessory);
 
     &::before {
-      @include themed {
-        background-color: initial;
-      }
+      background-color: initial;
     }
   }
 
   &::before {
-    @include themed {
-      border-color: rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-4));
-    }
+    border-color: rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
   }
 }
 //#endregion Helper mixins
@@ -225,17 +205,12 @@ $iui-date-picker-today-circle-size: 32px;
     @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);
-    }
+    background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
+    color: var(--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));
-      }
+      background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
     }
   }
 
@@ -243,22 +218,16 @@ $iui-date-picker-today-circle-size: 32px;
     @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);
-      }
+      background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
+      color: var(--iui-text-color);
 
       &::before {
-        @include themed {
-          background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-4));
-        }
+        background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
       }
     }
 
     &::before {
-      @include themed {
-        border-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-4));
-      }
+      border-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
     }
   }
 }
@@ -268,10 +237,7 @@ $iui-date-picker-today-circle-size: 32px;
   &-today {
     @include iui-calendar-day-base;
     @include iui-calendar-day-base-hover;
-
-    @include themed {
-      color: t(iui-text-color-muted);
-    }
+    color: var(--iui-text-color-muted);
   }
 
   &-today {