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

package/scss/header/header.scss

@@ -1,443 +1,75 @@
 // 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 '../user-icon/index';
-@import '../icon/index';
-@import '../button/index';
+@import '../breadcrumbs/index';
 
 @mixin iui-page-header {
-  @include iui-reset;
+  --_iui-header-brand-label-font-size: #{$iui-font-size-leading};
+  --_iui-header-height: #{$iui-baseline * 5};
+  --_iui-header-icon-scale: none;
 
+  @include iui-reset;
   display: flex;
   justify-content: space-between;
   width: 100%;
-  height: $iui-baseline * 5 + $iui-xxs; // Remove `+ $iui-xxs` when box-sizing: border-box is applied to all elements.
+  height: var(--_iui-header-height);
   user-select: none;
-  box-sizing: border-box;
-  // iPhone notch support
-  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
+  background-color: var(--iui-color-background-1);
+  border-bottom: $iui-xxs solid var(--iui-color-background-border);
+  color: var(--iui-text-color);
+  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); // iPhone notch support
   @media (prefers-reduced-motion: no-preference) {
     transition: height $iui-speed-fast ease-out;
   }
-  @include themed {
-    background-color: t(iui-color-background-1);
-    border-bottom: $iui-xxs solid t(iui-color-background-border);
-    color: t(iui-text-color);
-  }
-
-  > .iui-left,
-  > .iui-center,
-  > .iui-right {
-    display: flex;
-    align-items: center;
-    height: 100%;
-  }
-
-  @include iui-header-buttons;
-
-  > .iui-left {
-    > nav {
-      display: flex;
-      align-items: center;
-      height: 100%;
-    }
-
-    &,
-    > nav {
-      overflow: hidden;
-      box-sizing: content-box;
-      margin-bottom: -$iui-xs;
-      padding-bottom: $iui-xs;
-    }
-
-    .iui-chevron {
-      @include iui-icons-small;
-      flex-shrink: 0;
-      margin: 0 $iui-xs;
-    }
-  }
-
-  > .iui-center {
-    justify-content: center;
-  }
-
-  > .iui-right {
-    justify-content: flex-end;
-
-    @media (prefers-reduced-motion: no-preference) {
-      .iui-user-icon {
-        &,
-        * {
-          transition: all $iui-speed-fast ease-out;
-        }
-      }
-    }
-  }
-
-  .iui-button {
-    height: 100%;
-    border-radius: 0;
-  }
-
-  .iui-divider {
-    width: 1px;
-    height: $iui-baseline * 2;
-    @include themed {
-      background-color: t(iui-color-background-border);
-    }
-  }
-
-  &.iui-slim {
-    height: round($iui-baseline * 2.5) + $iui-xxs; // Remove `+ $iui-xxs` when box-sizing: border-box is applied to all elements.
-
-    > .iui-left {
-      .iui-header-logo {
-        > .iui-label {
-          font-size: $iui-font-size;
-        }
-
-        .iui-header-button-icon {
-          margin: 0 $iui-l + $iui-xs;
-        }
-      }
-
-      .iui-header-button-icon {
-        width: $iui-icons-default;
-        height: $iui-icons-default;
-        margin: 0 $iui-xs;
-        display: inline-flex;
-      }
-    }
-
-    > .iui-right {
-      .iui-user-icon {
-        @include iui-user-icon-size($size: $iui-icons-large, $font-size: $iui-font-size-small);
-      }
-    }
-  }
-
-  @media (max-width: 768px) {
-    &,
-    &.iui-slim {
-      .iui-left {
-        .iui-button {
-          .iui-header-button-icon.iui-header-button-icon {
-            @include iui-display-none;
-          }
-
-          .iui-header-button-icon + .iui-button-label {
-            margin-left: 0;
-          }
-        }
-      }
-    }
-  }
-
-  @media (max-width: 1024px) {
-    .iui-left {
-      .iui-header-logo > .iui-label {
-        display: none;
-      }
-    }
-  }
 }
 
-@mixin iui-header-button-icon($size: $iui-icons-large, $border-radius: $iui-border-radius) {
-  width: $size;
-  height: $size;
-  border-radius: $border-radius;
-  @media (prefers-reduced-motion: no-preference) {
-    transition: width $iui-speed-fast ease-out, height $iui-speed-fast ease-out, margin $iui-speed-fast ease-out;
-  }
-}
-
-@mixin iui-header-buttons {
-  .iui-header-button-icon {
-    @include iui-header-button-icon;
-  }
-
-  // boost specificity
-  .iui-header-button.iui-header-button {
-    @include iui-header-button;
-  }
-
-  .iui-header-dropdown-button.iui-header-dropdown-button {
-    @include iui-header-dropdown-button;
-  }
-
-  .iui-header-split-button {
-    @include iui-header-split-button;
-  }
+@mixin iui-page-header-slim {
+  --_iui-header-brand-label-font-size: #{$iui-font-size};
+  --_iui-header-height: #{$iui-baseline * 3};
+  --_iui-header-icon-scale: scale(0.66666);
 }
 
-@mixin iui-header-logo {
-  display: inline-flex;
+@mixin iui-page-header-zone {
+  display: flex;
   align-items: center;
-  white-space: nowrap;
-  height: 100%;
-
-  @at-root {
-    a#{&}, // rendered as anchor element
-    button#{&}, // rendered as button element
-    &[role='button'] {
-      @include iui-header-button-focus;
-      cursor: pointer;
-
-      // #region resets for button
-      @include iui-reset;
-      font-family: inherit;
-      background-color: unset;
-      color: unset;
-      // #endregion
-
-      &:hover {
-        @include themed {
-          background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
-        }
-
-        &:not(:focus-visible):not(:hover) {
-          @include themed {
-            background-color: t(iui-color-background-1);
-          }
-        }
-      }
-    }
-  }
-
-  .iui-header-button-icon {
-    margin: 0 $iui-l;
-    @include themed {
-      fill: t(iui-icons-color-actionable);
-    }
-  }
-
-  > .iui-label {
-    margin-right: $iui-sm;
-    font-size: $iui-font-size-leading;
-    @media (prefers-reduced-motion: no-preference) {
-      transition: font-size $iui-speed-fast ease-out;
-    }
-  }
 }
 
-@mixin iui-header-button-focus {
-  &:focus {
-    box-shadow: none;
-    outline-offset: -1px;
-
-    @include themed {
-      outline: 1px solid t(iui-color-foreground-primary);
-    }
-  }
-
-  &:focus:not(:focus-visible) {
-    outline: 0;
-  }
-}
-
-@mixin iui-header-button {
-  @include iui-button-size(large, borderless);
-
-  gap: 0;
-  max-width: 25vw;
-  height: 100%;
-  border-radius: 0;
+@mixin iui-page-header-left {
   overflow: hidden;
-
-  @include iui-header-button-focus;
-
-  > .iui-button-label {
-    text-align: left;
-    font-size: $iui-font-size;
-    overflow: hidden;
-
-    > div {
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  .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);
-    }
-  }
-
-  > .iui-button-icon {
-    flex-shrink: 0;
-  }
-
-  > * + * {
-    margin-left: $iui-sm;
-  }
-
-  .iui-header-button-icon {
-    padding: $iui-xs;
-    @include iui-header-button-icon($iui-icons-default, $iui-border-radius);
-    @include themed {
-      background-color: t(iui-color-background-3);
-      fill: t(iui-icons-color);
-    }
-  }
-
-  &.iui-active {
-    @include iui-header-button-active;
-  }
-
-  &:disabled {
-    .iui-header-button-icon {
-      filter: grayscale(1) opacity(0.7);
-    }
-  }
-
-  @at-root {
-    .iui-page-header.iui-slim {
-      > .iui-left {
-        .iui-button {
-          .iui-header-button-icon.iui-header-button-icon {
-            width: $iui-icons-small;
-            height: $iui-icons-small;
-            padding: $iui-xxs;
-          }
-        }
-
-        .iui-button-label {
-          .iui-description {
-            @include iui-display-none;
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin iui-header-dropdown-button {
-  padding-right: $iui-s;
+  box-sizing: content-box;
+  margin-bottom: -$iui-xs;
+  padding-bottom: $iui-xs;
 }
 
-@mixin iui-header-split-button {
-  &,
-  > * {
-    height: 100%;
-    display: flex;
-    overflow: hidden;
-  }
-
-  max-width: 25vw;
-
+@mixin iui-page-header-right {
   .iui-button {
-    @include iui-header-button;
-    padding: 0 $iui-xs;
-  }
-
-  > *:first-child {
-    .iui-button {
-      padding-left: $iui-sm;
+    height: 100%;
+    border-radius: 0;
+    flex-shrink: 0;
+    @media (forced-colors: active) {
+      border-top-width: 0;
+      border-bottom-width: 0;
     }
   }
 
-  &.iui-active {
-    @include iui-header-button-active;
-
-    // Removing button hovers and backgrounds and adding last child hover
-    .iui-button {
-      &.iui-borderless {
-        &,
-        &:hover {
-          background-color: transparent;
-        }
-
-        &::after {
-          display: none;
-        }
-      }
-    }
-
-    > *:last-child {
-      > .iui-button:hover {
-        @include themed {
-          background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
-        }
-      }
-    }
-
-    &.iui-disabled {
-      .iui-button {
-        &:last-child:hover {
-          @include themed {
-            background-color: transparent;
-          }
-        }
+  @media (prefers-reduced-motion: no-preference) {
+    .iui-avatar {
+      &,
+      * {
+        transition: width $iui-speed-fast ease-out, height $iui-speed-fast ease-out, font-size $iui-speed-fast ease-out;
       }
     }
   }
 }
 
-@mixin iui-header-button-active {
-  // Blue icons
-  svg {
-    @include themed {
-      fill: t(iui-icons-color-primary);
-    }
-  }
-
-  .iui-description {
-    opacity: 1;
-  }
-
-  &,
-  &:hover {
-    // Blue background and darker blue bottom line
-    @include themed {
-      box-shadow: 0 $iui-xxs 0 0 t(iui-color-foreground-primary);
-      background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
-    }
-
-    .iui-header-button-icon {
-      @include themed {
-        fill: t(iui-icons-color-primary);
-        background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
-      }
-    }
-  }
-
-  // Blue text
-  .iui-button-label {
-    @include themed {
-      color: t(iui-color-foreground-primary);
-    }
+@mixin iui-page-header-divider {
+  height: $iui-baseline * 2;
+  border-left: 1px solid var(--iui-color-background-border);
+  @media (forced-colors: active) {
+    display: none;
   }
+}
 
-  // Disabled state
-  &.iui-disabled,
-  &:disabled {
-    @include themed {
-      background-color: rgba(t(iui-color-foreground-body-rgb), 0.05);
-      box-shadow: 0 $iui-xxs 0 0 rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
-    }
-
-    .iui-button-label {
-      @include themed {
-        color: t(iui-icons-color-actionable-disabled);
-      }
-    }
-
-    .iui-button-icon,
-    svg {
-      @include themed {
-        fill: t(iui-icons-color-actionable-disabled);
-      }
-    }
-
-    .iui-header-button-icon {
-      @include themed {
-        background-color: rgba(t(iui-color-foreground-body-rgb), 0.05);
-      }
-    }
-  }
+@mixin iui-page-header-breadcrumbs {
+  @include iui-breadcrumbs($breadcrumbs-height: 100%);
 }

package/scss/header/index.scss

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

package/scss/icon/{mixins.scss → icon.scss}

@@ -45,31 +45,21 @@
 }
 
 @mixin iui-icons-color {
-  @include themed {
-    fill: t(iui-icons-color);
-  }
+  fill: var(--iui-icons-color);
 
   &.iui-informational {
-    @include themed {
-      fill: t(iui-icons-color-primary);
-    }
+    fill: var(--iui-icons-color-primary);
   }
 
   &.iui-positive {
-    @include themed {
-      fill: t(iui-icons-color-positive);
-    }
+    fill: var(--iui-icons-color-positive);
   }
 
   &.iui-warning {
-    @include themed {
-      fill: t(iui-icons-color-warning);
-    }
+    fill: var(--iui-icons-color-warning);
   }
 
   &.iui-negative {
-    @include themed {
-      fill: t(iui-icons-color-negative);
-    }
+    fill: var(--iui-icons-color-negative);
   }
 }

package/scss/icon/index.scss

@@ -1,4 +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 './variables';
-@import './mixins';
+@import './icon';

package/scss/index.scss

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

package/scss/information-panel/information-panel.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 '../inputs/labeled-inputs';
+@import '../utils/index';
 
 @mixin iui-information-panel-wrapper {
   position: relative;
@@ -14,34 +14,25 @@
   visibility: hidden;
   display: flex;
   flex-direction: column;
-  box-sizing: border-box;
   max-width: 100%;
   max-height: 100%;
-  z-index: 2; // Needs to be higher than table's column resizers.
+  background-color: var(--iui-color-background-1);
   @media (prefers-reduced-motion: no-preference) {
     transition: visibility $iui-speed-instant $iui-speed-fast ease-in, transform $iui-speed-fast ease-out,
       opacity $iui-speed-fast ease;
   }
 
-  @include themed {
-    background-color: t(iui-color-background-1);
-  }
-
   > .iui-resizer {
     display: none;
     position: absolute;
     touch-action: none;
 
     > .iui-resizer-bar {
-      @include themed {
-        background-color: t(iui-color-background-border);
-      }
+      background-color: var(--iui-color-background-border);
     }
 
     &:hover > .iui-resizer-bar {
-      @include themed {
-        background-color: t(iui-color-foreground-primary);
-      }
+      background-color: var(--iui-color-foreground-primary);
     }
   }
 
@@ -49,7 +40,6 @@
   .iui-information-body {
     padding-left: $iui-sm;
     padding-right: $iui-sm;
-    box-sizing: border-box;
   }
 
   .iui-information-header {
@@ -58,9 +48,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    @include themed {
-      background-color: t(iui-color-background-3);
-    }
+    background-color: var(--iui-color-background-3);
 
     .iui-information-header-label {
       display: flex;
@@ -80,9 +68,7 @@
         height: $iui-icons-large;
         margin-right: $iui-s;
         flex-shrink: 0;
-        @include themed {
-          fill: t(iui-icons-color);
-        }
+        fill: var(--iui-icons-color);
       }
     }
 
@@ -101,9 +87,7 @@
     overflow-y: overlay;
 
     > hr {
-      @include themed {
-        border-color: t(iui-color-background-border);
-      }
+      border-color: var(--iui-color-background-border);
     }
   }
 }
@@ -206,9 +190,7 @@
 
   .iui-input-label {
     font-weight: $iui-font-weight-normal;
-    @include themed {
-      color: t(iui-text-color-muted);
-    }
+    color: var(--iui-text-color-muted);
   }
 
   &:not(.iui-inline) {

package/scss/input/classes.scss

@@ -0,0 +1,15 @@
+// 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-input {
+  @include iui-input;
+}
+
+.iui-input-with-icon.iui-input-with-icon {
+  @include iui-input-with-icon;
+}
+
+.iui-end-icon {
+  @include iui-end-icon;
+}

package/scss/input/index.scss

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