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

package/scss/blockquote/blockquote.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-blockquote {
   @include iui-reset;
@@ -11,18 +12,12 @@
   text-align: justify;
   box-shadow: $iui-elevation-2;
   border-radius: $iui-border-radius;
-
-  @include themed {
-    background-color: t(iui-color-background-1);
-    border-left: $iui-s solid t(iui-color-foreground-primary);
-  }
+  background-color: var(--iui-color-background-1);
+  border-left: $iui-s solid var(--iui-color-foreground-primary);
 
   > footer {
     text-align: right;
-
-    @include themed {
-      color: t(iui-text-color-muted);
-    }
+    color: var(--iui-text-color-muted);
 
     > cite {
       font-style: normal;

package/scss/breadcrumbs/breadcrumbs.scss

@@ -3,12 +3,13 @@
 @import '../style/index';
 @import '../anchor/index';
 @import '../button/borderless';
-@import '../icon/index';
+@import '../utils/index';
 
-@mixin iui-breadcrumbs {
+@mixin iui-breadcrumbs($breadcrumbs-height: $iui-component-height) {
   @include iui-reset;
   display: flex;
   align-items: center;
+  height: $breadcrumbs-height;
 }
 
 @mixin iui-breadcrumbs-list {
@@ -17,13 +18,13 @@
   align-items: center;
   list-style-type: none;
   user-select: none;
+  height: 100%;
 }
 
 @mixin iui-breadcrumbs-item {
   display: flex;
   align-items: center;
-  line-height: $iui-component-height;
-  height: $iui-component-height;
+  height: 100%;
 
   > * {
     max-width: 26ch;
@@ -38,14 +39,14 @@
     text-overflow: ellipsis;
 
     &:not(.iui-button) {
-      @include themed {
-        color: t(iui-text-color);
-      }
+      color: var(--iui-text-color);
     }
   }
 
   > :any-link {
     @include iui-anchor;
+    box-sizing: border-box;
+    line-height: $iui-component-height;
 
     &:focus {
       outline-offset: -1px;
@@ -55,11 +56,10 @@
   .iui-button {
     &.iui-button {
       @include iui-button-borderless;
-      @include iui-focus;
       border: none;
     }
 
-    &-label {
+    > span {
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -80,6 +80,7 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  line-height: $iui-component-height;
 
   @at-root a#{&} {
     @include iui-anchor;
@@ -95,14 +96,10 @@
   @include iui-button-borderless;
   padding: 0;
   border: none;
-  @include themed {
-    color: t(iui-color-foreground-primary);
-  }
+  color: var(--iui-color-foreground-primary);
 
   &[aria-current] {
-    @include themed {
-      color: t(iui-text-color);
-    }
+    color: var(--iui-text-color);
   }
 }
 
@@ -114,9 +111,7 @@
     width: $iui-icons-small;
     height: $iui-icons-small;
     display: flex; // needed for vertical alignment of webcomponents
-    @include themed {
-      fill: t(iui-icons-color);
-    }
+    fill: var(--iui-icons-color);
     @media (forced-colors: active) {
       fill: CanvasText;
     }

package/scss/button/borderless.scss

@@ -2,47 +2,35 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import '../style/index';
 @import './button';
-@import './disabled';
-@import './button-icon';
 
 @mixin iui-button-borderless {
-  border-color: transparent;
-  background-color: transparent;
-
-  > .iui-button-icon:only-child {
-    margin-left: $iui-component-offset;
-    margin-right: $iui-component-offset;
-  }
+  --_iui-button-text-color: var(--iui-text-color);
+  --_iui-button-background-color: transparent;
+  --_iui-button-border-color: transparent;
+  --_iui-button-icon-margin-x: #{$iui-component-offset};
   @include iui-button-size(medium, borderless);
 
-  &:hover {
-    @include themed {
-      background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
-      border-color: transparent;
-    }
+  &:where(:hover, :active) {
+    --_iui-button-text-color: var(--iui-color-foreground-body);
+    --_iui-button-background-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
   }
 
-  &.iui-active {
-    @include themed {
-      background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
-      color: t(iui-color-foreground-primary);
-    }
-    border-color: transparent;
+  &:where(:focus) {
+    outline-offset: -1px;
+    outline-width: 1px;
   }
 
-  &[disabled],
-  &:disabled {
-    @include iui-button-disabled;
+  &:where([disabled], :disabled, [aria-disabled='true']) {
+    --_iui-button-text-color: var(--iui-text-color-placeholder);
+    --_iui-button-background-color: transparent;
+    --_iui-button-border-color: transparent;
+  }
+}
 
-    @include themed {
-      background-color: transparent;
-      border-color: transparent;
-    }
+@mixin iui-button-borderless-active {
+  --_iui-button-background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
 
-    &.iui-active {
-      @include themed {
-        background-color: rgba(t(iui-color-foreground-body-rgb), 0.05);
-      }
-    }
+  &:where([disabled], :disabled, [aria-disabled='true']) {
+    --_iui-button-background-color: rgba(var(--iui-color-foreground-body-rgb), 0.05);
   }
 }

package/scss/button/button-group.scss

@@ -9,6 +9,7 @@
   display: inline-flex;
   align-items: center;
   isolation: isolate;
+  pointer-events: none;
 
   @if $orientation != 'horizontal' {
     flex-direction: column;
@@ -16,12 +17,16 @@
   }
 
   $childZindexSelector: '.iui-input-container, .iui-button, .iui-input:where(:not(.iui-input-container .iui-input))';
-  $childBorderSelector: '.iui-input, .iui-button:where(:not(.iui-borderless))';
+  $childBorderSelector: '.iui-input, .iui-button:where(:not([data-iui-variant="borderless"]))';
   $disabledSelector: '&:disabled, &.iui-disabled, &[aria-disabled="true"]';
 
   > * {
     display: flex;
 
+    > * {
+      pointer-events: all;
+    }
+
     #{$childZindexSelector} {
       position: relative;
 
@@ -36,14 +41,17 @@
         z-index: 1;
       }
 
-      &:focus,
-      &:focus-within {
-        z-index: 2;
-      }
-
       #{$disabledSelector} {
         z-index: -1;
       }
+
+      &:focus,
+      &:focus-within {
+        &,
+        &:where([aria-disabled='true']) {
+          z-index: 2;
+        }
+      }
     }
 
     #{$childBorderSelector} {
@@ -93,7 +101,7 @@
     }
 
     // Add slight border between disabled items
-    &:not(:first-child) :where(.iui-button.iui-default) {
+    &:not(:first-child) :not([data-iui-variant='borderless']) {
       #{$disabledSelector} {
         @if $orientation == 'horizontal' {
           border-left-color: var(--iui-color-background-4);

package/scss/button/button.scss

@@ -1,18 +1,12 @@
 // 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 './disabled';
-@import './button-icon';
 
 $iui-button-padding: $iui-xs * 4;
 $iui-button-padding-small: $iui-xs * 2;
 $iui-button-padding-large: $iui-xs * 6;
 
 @mixin iui-button {
-  --_iui-button-active-stripe-inset: initial;
-  --_iui-button-text-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
-
   @include iui-reset;
   font-family: inherit;
   display: inline-flex;
@@ -20,55 +14,70 @@ $iui-button-padding-large: $iui-xs * 6;
   vertical-align: middle;
   justify-content: center;
   position: relative;
-  box-sizing: border-box;
   border-radius: $iui-border-radius;
   line-height: $iui-line-height;
-  box-shadow: none;
   font-size: $iui-font-size;
   font-weight: $iui-font-weight-normal;
-  text-decoration: none;
   user-select: none;
   cursor: pointer;
   white-space: nowrap;
-  border: 1px solid transparent;
-  @media (prefers-reduced-motion: no-preference) {
-    transition: color $iui-speed-fast ease-out, background-color $iui-speed-fast ease-out,
-      border-color $iui-speed-fast ease-out;
-  }
-
-  @include themed {
-    color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
-  }
+  border: 1px solid var(--_iui-button-border-color);
+  background: var(--_iui-button-background-color);
   color: var(--_iui-button-text-color);
-
-  &:hover {
-    --_iui-button-text-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
-
-    text-decoration: none;
-  }
-
+  gap: var(--_iui-button-gap);
+  height: var(--_iui-button-height);
+  padding-inline: var(--_iui-button-padding-inline);
+  transition: background-color $iui-speed-fast ease-out, border-color $iui-speed-fast ease-out;
+  -webkit-tap-highlight-color: transparent;
+  text-decoration: none;
+  @include iui-button-size;
   @include iui-focus;
+}
 
-  &[disabled],
-  &:disabled {
-    @include iui-button-disabled;
+@mixin iui-button-icon {
+  width: $iui-icons-default;
+  height: $iui-icons-default;
+  transition: fill $iui-speed-fast ease-out;
+  fill: currentColor;
+
+  &:only-child {
+    margin-left: var(--_iui-button-icon-margin-x);
+    margin-right: var(--_iui-button-icon-margin-x);
   }
 }
 
 @mixin iui-button-active {
+  --_iui-button-active-stripe-inset: initial;
+  --_iui-button-active-stripe-color: var(--iui-color-foreground-primary);
+  --_iui-button-text-color: var(--iui-color-foreground-primary);
+
   // Shows active stripe only if --_iui-button-active-stripe-inset is set (from outside)
   &::after {
     content: '';
     position: absolute;
     inset: var(--_iui-button-active-stripe-inset);
-    background-color: var(--iui-color-foreground-primary);
+    background-color: var(--_iui-button-active-stripe-color);
   }
 
   &[disabled],
-  &:disabled {
-    &::after {
-      background-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
-    }
+  &:disabled,
+  &[aria-disabled='true'] {
+    --_iui-button-active-stripe-color: var(--iui-text-color-placeholder);
+    --_iui-button-text-color: var(--iui-text-color-placeholder);
+  }
+}
+
+@mixin iui-button-dropdown($size: default) {
+  @if $size == default {
+    --_iui-button-padding-inline: #{$iui-button-padding} #{$iui-s};
+  }
+
+  @if $size == small {
+    --_iui-button-padding-inline: #{$iui-button-padding-small} #{$iui-xs};
+  }
+
+  @if $size == large {
+    --_iui-button-padding-inline: #{$iui-button-padding-large} #{$iui-sm};
   }
 }
 
@@ -77,21 +86,34 @@ $iui-button-padding-large: $iui-xs * 6;
 /// @arg styleType - must be one of: default, borderless
 @mixin iui-button-size($size: medium, $styleType: default) {
   @if $size == medium {
-    padding: if($styleType == 'borderless', 0 $iui-s, 0 $iui-button-padding);
-    height: $iui-component-height;
-    gap: $iui-s;
+    --_iui-button-gap: #{$iui-s};
+    --_iui-button-height: #{$iui-component-height};
+    --_iui-button-padding-inline: #{$iui-button-padding};
+
+    @if $styleType == borderless {
+      --_iui-button-padding-inline: #{$iui-s};
+    }
   }
 
   @if $size == small {
-    padding: if($styleType == 'borderless', 0 $iui-xxs, 0 $iui-button-padding-small);
-    height: $iui-component-height-small;
-    gap: $iui-xs;
+    --_iui-button-gap: #{$iui-xs};
+    --_iui-button-height: #{$iui-component-height-small};
+    --_iui-button-padding-inline: #{$iui-button-padding-small};
+
+    @if $styleType == borderless {
+      --_iui-button-padding-inline: #{$iui-xxs};
+    }
   }
 
   @if $size == large {
-    padding: if($styleType == 'borderless', 0 $iui-sm, 0 $iui-button-padding-large);
-    height: $iui-component-height-large;
     font-size: $iui-font-size-leading;
-    gap: $iui-sm;
+
+    --_iui-button-gap: #{$iui-sm};
+    --_iui-button-height: #{$iui-component-height-large};
+    --_iui-button-padding-inline: #{$iui-button-padding-large};
+
+    @if $styleType == borderless {
+      --_iui-button-padding-inline: #{$iui-sm};
+    }
   }
 }

package/scss/button/classes.scss

@@ -4,67 +4,77 @@
 
 .iui-button {
   @include iui-button;
-  @include iui-button-size;
+  @include iui-button-default;
 
-  &.iui-active {
-    @include iui-button-active;
+  &[data-iui-size='small'] {
+    @include iui-button-size(small);
   }
 
-  &.iui-default {
-    @include iui-button-default;
+  &[data-iui-size='large'] {
+    @include iui-button-size(large);
   }
 
-  &.iui-high-visibility {
-    @include iui-button-high-visibility;
+  &[data-iui-variant='borderless'] {
+    @include iui-button-borderless;
+
+    &[data-iui-size='small'] {
+      @include iui-button-size(small, borderless);
+    }
+
+    &[data-iui-size='large'] {
+      @include iui-button-size(large, borderless);
+    }
   }
 
-  &.iui-cta {
-    @include iui-button-cta;
+  &[data-iui-active='true'] {
+    @include iui-button-default-active;
+
+    &[data-iui-variant='borderless'] {
+      @include iui-button-borderless-active;
+    }
   }
 
-  &.iui-idea {
-    @include iui-button-idea;
+  &[data-iui-variant='high-visibility'] {
+    @include iui-button-variant(high-visibility);
   }
 
-  &.iui-borderless {
-    @include iui-button-borderless;
+  &[data-iui-variant='cta'] {
+    @include iui-button-variant(cta);
   }
 
-  @include iui-button-size(medium);
+  &[data-iui-variant='idea'] {
+    @include iui-button-idea;
+  }
+}
 
-  &.iui-small {
-    @include iui-button-size(small);
+.iui-button-icon {
+  @include iui-button-icon;
+}
 
-    &.iui-borderless {
-      @include iui-button-size(small, borderless);
-    }
-  }
+.iui-button-dropdown {
+  @include iui-button-dropdown;
 
-  &.iui-large {
-    @include iui-button-size(large);
+  &[data-iui-size='small'] {
+    @include iui-button-dropdown(small);
+  }
 
-    &.iui-borderless {
-      @include iui-button-size(large, borderless);
-    }
+  &[data-iui-size='large'] {
+    @include iui-button-dropdown(large);
   }
 }
 
+.iui-button-split {
+  @include iui-button-split;
+}
+
 .iui-button-group {
   @include iui-button-group;
-
-  &-vertical {
-    @include iui-button-group(vertical);
-  }
-
-  &-overflow-x {
-    @include iui-button-group-overflow-x;
-  }
 }
 
-.iui-button-split-menu {
-  @include iui-button-split-menu;
+.iui-button-group-vertical {
+  @include iui-button-group(vertical);
 }
 
-.iui-button-icon {
-  @include iui-button-icon;
+.iui-button-group-overflow-x {
+  @include iui-button-group-overflow-x;
 }

package/scss/button/default.scss

@@ -1,59 +1,51 @@
 // 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 './button';
-@import './button-icon';
-@import '../notification-marker/index';
-@import './disabled';
+@import '../utils/index';
 
 @mixin iui-button-default {
-  @include themed {
-    background-color: t(iui-color-background-1);
-    border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
-  }
-  @include iui-focus($offset: -2px, $thickness: 2px);
+  --_iui-button-text-color: var(--iui-text-color);
+  --_iui-button-background-color: var(--iui-color-background-1);
+  --_iui-button-border-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
 
   &:hover,
   &:active {
-    @include themed {
-      background-color: t(iui-color-background-1-overlay);
-      border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
-    }
+    --_iui-button-text-color: var(--iui-color-foreground-body);
+    --_iui-button-background-color: var(--iui-color-background-1-overlay);
+    --_iui-button-border-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
     @include iui-notification-marker-hover;
   }
 
-  &.iui-dropdown {
-    padding-right: $iui-s;
-
-    // Sizes
-    &.iui-small {
-      padding-right: $iui-xs;
-    }
-
-    &.iui-large {
-      padding-right: $iui-sm;
-    }
+  &:focus {
+    outline-offset: -2px;
+    outline-width: 2px;
   }
 
-  &.iui-active:enabled {
-    position: relative;
-    @include themed {
-      color: t(iui-color-foreground-primary);
-    }
-
-    // Used for combining overlay background color with base background
-    &::before {
-      content: '';
-      position: absolute;
-      inset: 0;
-      @include themed {
-        background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
-      }
-    }
+  &[disabled],
+  &:disabled,
+  &[aria-disabled='true'] {
+    --_iui-button-text-color: var(--iui-text-color-placeholder);
+    --_iui-button-background-color: var(--iui-color-background-disabled);
+    --_iui-button-border-color: var(--iui-color-background-disabled);
+
+    cursor: not-allowed;
+    outline-offset: -1px;
+    outline-width: 1px;
+    outline-color: var(--iui-color-foreground-primary);
   }
+}
+
+@mixin iui-button-default-active {
+  @include iui-button-active;
+  --_iui-button-background-color: linear-gradient(
+    rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)),
+    rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))
+  ),
+    linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
 
   &[disabled],
-  &:disabled {
-    @include iui-button-disabled;
+  &:disabled,
+  &[aria-disabled='true'] {
+    --_iui-button-background-color: var(--iui-color-background-disabled);
   }
 }

package/scss/button/idea.scss

@@ -1,8 +1,10 @@
 // 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';
+
 @mixin iui-button-idea {
-  @include iui-button-high-visibility;
-  border-radius: $iui-line-height;
+  @include iui-button-variant(high-visibility);
+  border-radius: $iui-border-radius-round;
   box-shadow: $iui-elevation-24;
   position: fixed;
   bottom: $iui-baseline;

package/scss/button/index.scss

@@ -2,11 +2,8 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import './button';
 @import './default';
-@import './cta';
-@import './high-visibility';
+@import './borderless';
+@import './variant';
 @import './idea';
 @import './button-group';
-@import './split-menu';
-@import './borderless';
-@import './disabled';
-@import './button-icon';
+@import './split-button';