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

package/scss/tabs/borderless.scss

@@ -5,8 +5,7 @@
 
 @mixin iui-tabs-borderless {
   .iui-tab {
-    height: $iui-component-height;
-    padding: 0 ($iui-component-padding-horizontal * 2);
+    padding: $iui-xs ($iui-component-padding-horizontal * 2);
     background-color: transparent;
 
     &::after {
@@ -15,24 +14,18 @@
     }
 
     &:hover {
-      @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));
     }
 
     &.iui-active {
-      @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));
     }
   }
 
   @at-root {
     .iui-horizontal & ~ .iui-tabs-content {
       margin-top: -$iui-xxs;
-      @include themed {
-        border-top: $iui-xxs solid t(iui-color-background-4);
-      }
+      border-top: $iui-xxs solid var(--iui-color-background-4);
     }
   }
 
@@ -41,32 +34,26 @@
       margin-left: -$iui-xxs;
       padding-left: $iui-sm;
       padding-right: $iui-sm;
-      @include themed {
-        border-left: $iui-xxs solid t(iui-color-background-4);
-      }
+      border-left: $iui-xxs solid var(--iui-color-background-4);
     }
   }
 
   &.iui-green .iui-active,
   &.iui-green .iui-tab:hover {
-    @include themed {
-      background-color: rgba(t(iui-color-foreground-positive-rgb), t(iui-opacity-6));
-    }
+    background-color: rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6));
   }
 
   &.iui-large {
     .iui-tab {
-      height: $iui-component-height-large;
+      min-height: $iui-component-height-large;
     }
 
     .iui-tab-description {
-      display: block;
+      display: -webkit-box; /* stylelint-disable-line */
     }
   }
 
   .iui-tab[disabled]:hover {
-    @include themed {
-      background-color: transparent;
-    }
+    background-color: transparent;
   }
 }

package/scss/tabs/classes.scss

@@ -38,3 +38,7 @@
     @include iui-tab-not-animated;
   }
 }
+
+.iui-tab-label {
+  @include iui-tab-label;
+}

package/scss/tabs/default.scss

@@ -7,13 +7,9 @@
   @include iui-tab-not-animated;
 
   .iui-tab {
-    height: $iui-component-height;
-    padding: 0 $iui-m;
-    box-sizing: border-box;
-    @include themed {
-      background-color: t(iui-color-background-2);
-      border: 1px solid t(iui-color-background-5);
-    }
+    padding: $iui-xs $iui-m;
+    background-color: var(--iui-color-background-2);
+    border: 1px solid var(--iui-color-background-5);
 
     &::after {
       top: 0;
@@ -21,21 +17,15 @@
     }
 
     &:hover {
-      @include themed {
-        background-color: t(iui-color-background-1);
-      }
+      background-color: var(--iui-color-background-1);
     }
 
     &.iui-active {
-      @include themed {
-        background-color: t(iui-color-background-1);
-      }
+      background-color: var(--iui-color-background-1);
     }
 
     &[disabled] {
-      @include themed {
-        background-color: t(iui-color-background-3);
-      }
+      background-color: var(--iui-color-background-3);
     }
 
     &:focus {
@@ -78,26 +68,22 @@
 
   &.iui-large {
     .iui-tab {
-      height: $iui-component-height-large;
+      min-height: $iui-component-height-large;
     }
 
     .iui-tab-description {
-      display: block;
+      display: -webkit-box; /* stylelint-disable-line */
     }
   }
 
   &.iui-green .iui-tab::after {
-    @include themed {
-      background-color: t(iui-color-foreground-positive);
-    }
+    background-color: var(--iui-color-foreground-positive);
   }
 
   ~ .iui-tabs-content {
     padding-left: $iui-m;
     padding-right: $iui-m;
-    @include themed {
-      background-color: t(iui-color-background-1);
-      border: 1px solid t(iui-color-background-5);
-    }
+    background-color: var(--iui-color-background-1);
+    border: 1px solid var(--iui-color-background-5);
   }
 }

package/scss/tabs/pill.scss

@@ -1,28 +1,22 @@
 // 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 './tabs';
 
 @mixin iui-tabs-pill {
   justify-content: space-evenly;
+  gap: $iui-xxs;
 
   > li {
     flex: 1 1 0;
-
-    &:not(:last-child) {
-      margin-right: $iui-xxs;
-    }
   }
 
   &.iui-green .iui-tab:hover {
-    @include themed {
-      background-color: rgba(t(iui-color-foreground-positive-rgb), t(iui-opacity-6));
-    }
+    background-color: rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6));
   }
 
   .iui-tab {
-    height: $iui-component-height;
+    padding: $iui-xs;
     background-color: transparent;
     width: 100%;
     justify-content: center;
@@ -34,15 +28,11 @@
     }
 
     &:hover {
-      @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));
     }
 
     &[disabled]:hover {
-      @include themed {
-        background-color: transparent;
-      }
+      background-color: transparent;
     }
   }
 }

package/scss/tabs/tabs.scss

@@ -1,11 +1,11 @@
 // 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-tabs {
   @include iui-reset;
   position: relative;
-  align-items: center;
   list-style: none;
   user-select: none;
 
@@ -16,42 +16,30 @@
     display: flex;
     align-items: center;
     font-size: $iui-font-size;
+    min-height: $iui-component-height;
+    height: 100%;
     cursor: pointer;
-    @media (prefers-reduced-motion: no-preference) {
-      transition: background-color $iui-speed-fast ease-out;
-    }
-    @include themed {
-      color: t(iui-text-color);
-    }
+    color: var(--iui-text-color);
+    transition: background-color $iui-speed-fast ease-out;
 
     &.iui-active {
-      @include themed {
-        color: t(iui-color-foreground-primary);
-      }
+      color: var(--iui-color-foreground-primary);
 
       .iui-tab-icon {
-        @include themed {
-          fill: t(iui-icons-color-primary);
-        }
+        fill: var(--iui-icons-color-primary);
       }
 
       .iui-tab-description {
-        @include themed {
-          opacity: t(iui-opacity-1);
-        }
+        opacity: var(--iui-opacity-1);
       }
     }
 
     &[disabled] {
       cursor: not-allowed;
-      @include themed {
-        color: t(iui-text-color-muted);
-      }
+      color: var(--iui-text-color-muted);
 
       .iui-tab-icon {
-        @include themed {
-          fill: t(iui-icons-color-actionable-disabled);
-        }
+        fill: var(--iui-icons-color-actionable-disabled);
       }
     }
 
@@ -61,44 +49,31 @@
   .iui-tab-icon {
     width: $iui-icons-default;
     height: $iui-icons-default;
-    @media (prefers-reduced-motion: no-preference) {
-      transition: fill $iui-speed-fast ease-out;
-    }
-    @include themed {
-      fill: t(iui-icons-color-actionable);
-    }
+    flex-shrink: 0;
+    fill: var(--iui-icons-color-actionable);
+    transition: fill $iui-speed-fast ease-out;
 
     + .iui-tab-label {
       margin-left: $iui-s;
     }
   }
 
-  .iui-tab-label {
-    text-align: left;
-  }
-
   .iui-tab-description {
     display: none;
     font-size: $iui-font-size-small;
-    @include themed {
-      opacity: t(iui-opacity-3);
-    }
+    opacity: var(--iui-opacity-3);
   }
 
   &.iui-green .iui-tab {
     &:focus {
-      outline-color: t(iui-color-foreground-positive);
+      outline-color: var(--iui-color-foreground-positive);
     }
 
     &.iui-active {
-      @include themed {
-        color: t(iui-color-foreground-positive);
-      }
+      color: var(--iui-color-foreground-positive);
 
       .iui-tab-icon {
-        @include themed {
-          fill: t(iui-icons-color-positive);
-        }
+        fill: var(--iui-icons-color-positive);
       }
     }
   }
@@ -106,7 +81,15 @@
   ~ .iui-tabs-content {
     padding-top: $iui-baseline;
     padding-bottom: $iui-baseline;
-    box-sizing: border-box;
+  }
+}
+
+@mixin iui-tab-label {
+  text-align: left;
+  max-width: 60ch;
+
+  > * {
+    @include iui-line-clamp(3);
   }
 }
 
@@ -131,8 +114,6 @@
 
 @mixin iui-tabs-vertical {
   .iui-tabs {
-    flex-direction: column;
-
     li,
     .iui-tab {
       width: 100%;
@@ -160,9 +141,7 @@
   .iui-tab::after {
     content: '';
     position: absolute;
-    @include themed {
-      background-color: t(iui-color-foreground-primary);
-    }
+    background-color: var(--iui-color-foreground-primary);
   }
 
   .iui-active::after {
@@ -172,9 +151,7 @@
   }
 
   &.iui-green .iui-tab::after {
-    @include themed {
-      background-color: t(iui-color-foreground-positive);
-    }
+    background-color: var(--iui-color-foreground-positive);
   }
 }
 
@@ -182,15 +159,11 @@
   &::after {
     position: absolute;
     content: ' ';
-    @include themed {
-      background-color: t(iui-color-foreground-primary);
-    }
+    background-color: var(--iui-color-foreground-primary);
   }
 
   &.iui-green::after {
-    @include themed {
-      background-color: t(iui-color-foreground-positive);
-    }
+    background-color: var(--iui-color-foreground-positive);
   }
 
   @at-root {

package/scss/tag/classes.scss

@@ -2,6 +2,7 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import './tag';
 @import '../anchor/index';
+@import '../utils/index';
 
 .iui-tag {
   @include iui-tag;

package/scss/tag/tag.scss

@@ -1,11 +1,11 @@
 // 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/mixins';
+@import '../utils/index';
 @import '../button/index';
+@import '../text/mixins';
 
 @mixin iui-tag-base {
-  @include iui-reset;
   user-select: all;
   text-transform: lowercase;
   display: inline-flex;
@@ -15,18 +15,16 @@
   @include iui-tag-base;
 
   &:not(a) {
-    @include themed {
-      color: t(iui-text-color-muted);
-    }
+    color: var(--iui-text-color-muted);
   }
 }
 
 @mixin iui-tag {
   @include iui-tag-base;
   height: $iui-baseline * 3;
-  margin: $iui-component-offset 0;
+  margin-top: $iui-component-offset;
+  margin-bottom: $iui-component-offset;
   border-radius: $iui-border-radius-round;
-  box-sizing: border-box;
   padding: 0 $iui-xxs;
   align-items: center;
   transition: border-color $iui-speed-fast ease-out;
@@ -34,16 +32,12 @@
   text-transform: none;
   cursor: default;
   -webkit-tap-highlight-color: transparent;
-  @include themed {
-    border: 1px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
-    background-color: t(iui-color-background-1);
-    color: t(iui-text-color);
-  }
+  border: 1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+  background-color: var(--iui-color-background-1);
+  color: var(--iui-text-color);
 
   &:hover {
-    @include themed {
-      border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
-    }
+    border-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
   }
 }
 
@@ -64,9 +58,7 @@
 }
 
 @mixin iui-tag-container {
-  @include themed {
-    color: t(iui-text-color-muted);
-  }
+  color: var(--iui-text-color-muted);
 
   > a.iui-tag-basic {
     margin: $iui-xxs;
@@ -92,8 +84,6 @@
   &.iui-visible {
     border-radius: $iui-border-radius;
     padding: $iui-component-offset $iui-sm;
-    @include themed {
-      background-color: t(iui-color-background-3);
-    }
+    background-color: var(--iui-color-background-3);
   }
 }

package/scss/text/mixins.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-text-block-spacing {
   padding: 0;

package/scss/text/muted.scss

@@ -1,9 +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 '../style/theme';
 
 @mixin iui-text-muted {
-  @include themed {
-    color: t(iui-text-color-muted);
-  }
+  color: var(--iui-text-color-muted);
 }

package/scss/text/skeleton.scss

@@ -8,17 +8,14 @@
   color: transparent;
   border-radius: $iui-border-radius;
   cursor: progress;
-
-  @include themed {
-    background: linear-gradient(
-      292deg,
-      t(iui-text-color-muted),
-      t(iui-text-color-muted),
-      t(iui-text-color-placeholder),
-      t(iui-text-color-muted),
-      t(iui-text-color-muted)
-    );
-  }
+  background: linear-gradient(
+    292deg,
+    var(--iui-text-color-muted),
+    var(--iui-text-color-muted),
+    var(--iui-text-color-placeholder),
+    var(--iui-text-color-muted),
+    var(--iui-text-color-muted)
+  );
   background-size: 200% 100%;
 
   @media (forced-colors: active) {

package/scss/textarea/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-textarea {
+  @include iui-textarea;
+}

package/scss/textarea/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 './textarea';

package/scss/{inputs → textarea}/textarea.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 '../style/global-variables';
+@import '../input/index';
 
 @mixin iui-textarea {
   @include iui-input;

package/scss/tile/classes.scss

@@ -4,14 +4,26 @@
 
 .iui-tile {
   @include iui-tile;
+
+  &.iui-positive {
+    @include iui-tile-status(positive);
+  }
+
+  &.iui-warning {
+    @include iui-tile-status(warning);
+  }
+
+  &.iui-negative {
+    @include iui-tile-status(negative);
+  }
 }
 
 .iui-tile-thumbnail-type-indicator {
-  @include iui-tile-thumbnail-type-indicator;
+  @include iui-tile-thumbnail-button(type-indicator);
 }
 
 .iui-tile-thumbnail-quick-action {
-  @include iui-tile-thumbnail-quick-action;
+  @include iui-tile-thumbnail-button(quick-action);
 }
 
 .iui-tile-thumbnail-badge-container {