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

package/scss/{inputs/labeled-inputs.scss → utils/input-container/input-container.scss}

@@ -1,8 +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 '../style/ripple';
+@import '../../style/index';
+@import '../mixins';
 
 /// Container for grouping inputs with a label, an icon and a status message.
 /// Supported modifiers: .iui-inline-label, .iui-inline-icon and .iui-with-message
@@ -13,13 +12,6 @@
     'label label'
     'inputs inputs' / auto 1fr;
 
-  &.iui-inline-icon:not(.iui-inline-label) > .iui-input-icon {
-    // stylelint-disable -- fix position in IE
-    -ms-grid-row: 2;
-    -ms-grid-column: 2;
-    // stylelint-enable
-  }
-
   &.iui-inline-icon {
     > .iui-input,
     > .iui-textarea {
@@ -48,11 +40,6 @@
   .iui-textarea,
   .iui-input-group {
     grid-area: inputs;
-    // stylelint-disable -- fix position in IE
-    -ms-grid-row: 2;
-    -ms-grid-column: 1;
-    -ms-grid-column-span: 2;
-    // stylelint-enable
   }
 
   .iui-input-group .iui-toggle-switch-wrapper {
@@ -78,66 +65,16 @@
   &.iui-inline-label {
     grid-template: 'label inputs icon' / auto 1fr auto;
 
-    // IE fix icon position for inline checkboxes/radios group
-    @at-root {
-      div#{&} {
-        // stylelint-disable -- fix position in IE
-        -ms-grid-columns: auto min-content auto;
-        // stylelint-enable
-      }
-    }
-
-    .iui-input,
-    .iui-input-with-icon,
-    .iui-textarea,
-    .iui-input-group {
-      // stylelint-disable -- fix position in IE
-      -ms-grid-row: 1;
-      -ms-grid-column: 2;
-      // stylelint-enable
-    }
-
-    .iui-input-icon {
-      // stylelint-disable -- fix position in IE
-      -ms-grid-row: 1;
-      -ms-grid-column: 3;
-      // stylelint-enable
-    }
-
     &.iui-with-message {
       grid-template:
         'label inputs inputs'
         '. icon message' / auto auto 1fr;
-
-      &:not(.iui-inline-icon) > .iui-input-icon {
-        // stylelint-disable -- fix position in IE
-        -ms-grid-row: 2;
-        -ms-grid-column: 2;
-        // stylelint-enable
-      }
-
-      .iui-message {
-        // stylelint-disable -- fix position in IE
-        -ms-grid-row: 2;
-        -ms-grid-column: 3;
-        // stylelint-enable
-      }
     }
 
     > .iui-input-group {
       display: flex;
       gap: $iui-m;
 
-      > .iui-checkbox-wrapper,
-      > .iui-radio-wrapper,
-      > .iui-toggle-switch-wrapper {
-        margin-right: $iui-m;
-
-        @supports (gap: $iui-m) {
-          margin-right: 0;
-        }
-      }
-
       &:not(:last-child) {
         margin-right: $iui-m;
       }
@@ -170,9 +107,7 @@
     &::after {
       content: '*';
       margin-left: $iui-xs;
-      @include themed {
-        color: t(iui-color-foreground-negative);
-      }
+      color: var(--iui-color-foreground-negative);
     }
   }
 }
@@ -180,9 +115,6 @@
 /// Modifier on iui-input-label-styling to place it inline.
 @mixin iui-input-label-inline {
   margin: 0 $iui-m 0 0;
-  // stylelint-disable -- fix position in IE
-  -ms-grid-column-span: 1;
-  // stylelint-enable
 
   &.iui-required {
     margin-right: $iui-xs * 1.5;
@@ -215,9 +147,7 @@
   font-size: $iui-font-size-small;
   grid-area: message;
   margin-top: $iui-component-offset;
-  @include themed {
-    color: t(iui-text-color-muted);
-  }
+  color: var(--iui-text-color-muted);
 
   a {
     user-select: none;
@@ -231,9 +161,7 @@
   width: $iui-icons-default;
   height: $iui-icons-default;
   align-self: center;
-  @include themed {
-    fill: t(iui-icons-color);
-  }
+  fill: var(--iui-icons-color);
 
   &:not(:last-child) {
     margin-right: $iui-xs;
@@ -242,11 +170,6 @@
 
 /// Modifier on iui-input-icon to place it at the end of input.
 @mixin iui-input-icon-inline {
-  // stylelint-disable -- fix position in IE
-  -ms-grid-row: 1;
-  -ms-grid-column: 3;
-  // stylelint-enable
-
   grid-area: inputs;
   justify-self: end;
   margin: 0 ($iui-sm + $iui-xxs) 0 0;
@@ -277,9 +200,7 @@
     @include iui-ripple(var(--iui-color-background-1), var(--iui-color-background-2));
 
     svg {
-      @include themed {
-        fill: t(iui-icons-color-actionable);
-      }
+      fill: var(--iui-icons-color-actionable);
       transition: transform $iui-speed-fast ease-out;
     }
 
@@ -292,9 +213,7 @@
     cursor: not-allowed;
 
     svg {
-      @include themed {
-        fill: t(iui-icons-color-actionable-disabled);
-      }
+      fill: var(--iui-icons-color-actionable-disabled);
     }
   }
 }
@@ -307,29 +226,19 @@
   @include iui-text-selection($status);
 
   #{$iconSelector} {
-    @include themed {
-      fill: t(iui-color-foreground-#{$status});
-    }
+    fill: var(--iui-color-foreground-#{$status});
   }
 
   #{$textSelector} {
-    @include themed {
-      color: t(iui-color-foreground-#{$status});
-    }
+    color: var(--iui-color-foreground-#{$status});
 
     a {
       text-decoration: underline;
-
-      @include themed {
-        color: t(iui-color-foreground-#{$status});
-      }
+      color: var(--iui-color-foreground-#{$status});
 
       &:hover {
         text-decoration: none;
-
-        @include themed {
-          color: t(iui-color-foreground-#{$status}-overlay);
-        }
+        color: var(--iui-color-foreground-#{$status}-overlay);
       }
     }
   }
@@ -346,16 +255,12 @@
       padding-bottom: $iui-component-padding-vertical-large - 1px;
     }
 
-    @include themed {
-      border-bottom: $iui-xxs solid t(iui-color-foreground-#{$status});
-    }
+    border-bottom: $iui-xxs solid var(--iui-color-foreground-#{$status});
 
     &:focus {
-      @include themed {
-        border-bottom: $iui-xxs solid t(iui-color-foreground-#{$status});
-        outline: 2px solid t(iui-color-foreground-#{$status});
-        outline-offset: -2px;
-      }
+      border-bottom: $iui-xxs solid var(--iui-color-foreground-#{$status});
+      outline: 2px solid var(--iui-color-foreground-#{$status});
+      outline-offset: -2px;
     }
   }
 
@@ -374,9 +279,7 @@
       bottom: 0;
       left: 0;
       height: $iui-xxs;
-      @include themed {
-        background-color: t(iui-color-foreground-#{$status});
-      }
+      background-color: var(--iui-color-foreground-#{$status});
     }
   }
 }

package/scss/{style → utils}/mixins.scss

@@ -1,24 +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 './color';
-
-@mixin no-link {
-  text-decoration: none;
-
-  @include themed {
-    color: t(iui-text-color);
-  }
-
-  &:link,
-  &:visited,
-  &:hover,
-  &:active {
-    @include themed {
-      color: t(iui-text-color);
-    }
-    text-decoration: none;
-  }
-}
+@import '../style/color';
+@import '../style/speed';
 
 @mixin focus-visible {
   &:focus-visible {
@@ -49,17 +32,13 @@
 @mixin iui-text-selection($status: primary) {
   &::selection,
   *::selection {
-    @include themed {
-      background-color: rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-5));
-    }
+    background-color: rgba(var(--iui-color-foreground-#{$status}-rgb), var(--iui-opacity-5));
   }
 }
 
 @mixin iui-scrollbar {
-  @include themed {
-    scrollbar-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4)) transparent;
-    scrollbar-width: thin;
-  }
+  scrollbar-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)) transparent;
+  scrollbar-width: thin;
 
   &::-webkit-scrollbar {
     width: $iui-s;
@@ -67,15 +46,11 @@
   }
 
   &::-webkit-scrollbar-thumb {
-    @include themed {
-      background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
-    }
+    background-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
     border-radius: $iui-s * 0.5;
 
     &:hover {
-      @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));
     }
   }
 
@@ -87,22 +62,15 @@
 
 @mixin iui-line-clamp($lines: 1) {
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
-
-  @supports (-webkit-line-clamp: 1) {
-    white-space: unset;
-    display: -webkit-box; /* stylelint-disable-line */
-    -webkit-line-clamp: $lines;
-    -webkit-box-orient: vertical; /* stylelint-disable-line */
-  }
+  display: -webkit-box; /* stylelint-disable-line */
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical; /* stylelint-disable-line */
 }
 
 @mixin iui-blur($opacity: 4) {
   // Blur fallback
-  @include themed {
-    background-color: rgba(0, 0, 0, t(iui-opacity-#{$opacity - 1}));
-  }
+  background-color: rgba(0, 0, 0, var(--iui-opacity-#{$opacity - 1}));
 
   // With blur
   @supports (backdrop-filter: $iui-blur-filter) {
@@ -186,3 +154,18 @@
     }
   }
 }
+
+@mixin iui-ripple($hoverColor, $rippleColor) {
+  background-position: center;
+  transition: background $iui-speed ease-out;
+
+  &:hover {
+    background: $hoverColor radial-gradient(circle, transparent 1%, #{$hoverColor} 1%) center/15000%;
+  }
+
+  &:active {
+    background-color: $rippleColor;
+    background-size: 100%;
+    transition: background $iui-speed-instant;
+  }
+}

package/scss/{notification-marker → utils/notification-marker}/notification-marker.scss

@@ -1,6 +1,8 @@
 // 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/index';
+
+$iui-notification-marker-border-width: $iui-xxs;
 
 @mixin iui-notification-marker($status: primary) {
   position: relative;
@@ -8,15 +10,13 @@
   &::before {
     content: '';
     position: absolute;
-    width: $iui-s;
-    height: $iui-s;
+    width: $iui-s + $iui-notification-marker-border-width * 2;
+    height: $iui-s + $iui-notification-marker-border-width * 2;
     top: $iui-sm * -0.5;
     right: $iui-sm * -0.5;
     border-radius: 100%;
-    @include themed {
-      background-color: t(iui-color-foreground-#{$status});
-      border: 2px solid t(iui-color-background-1);
-    }
+    background-color: var(--iui-color-foreground-#{$status});
+    border: $iui-notification-marker-border-width solid var(--iui-color-background-1);
     @media (prefers-reduced-motion: no-preference) {
       transition: background-color $iui-speed-fast ease-out, border-color $iui-speed-fast ease-out;
     }
@@ -31,21 +31,15 @@
   @media (prefers-reduced-motion: no-preference) {
     @keyframes pulse-#{$status} {
       0% {
-        @include themed {
-          box-shadow: 0 0 0 0 rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-1));
-        }
+        box-shadow: 0 0 0 0 rgba(var(--iui-color-foreground-#{$status}-rgb), var(--iui-opacity-1));
       }
 
       70% {
-        @include themed {
-          box-shadow: 0 0 0 7px rgba(t(iui-color-foreground-#{$status}-rgb), 0);
-        }
+        box-shadow: 0 0 0 7px rgba(var(--iui-color-foreground-#{$status}-rgb), 0);
       }
 
       100% {
-        @include themed {
-          box-shadow: 0 0 0 0 rgba(t(iui-color-foreground-#{$status}-rgb), 0);
-        }
+        box-shadow: 0 0 0 0 rgba(var(--iui-color-foreground-#{$status}-rgb), 0);
       }
     }
   }
@@ -56,8 +50,6 @@
   .iui-notification-positive::before,
   .iui-notification-warning::before,
   .iui-notification-negative::before {
-    @include themed {
-      border-color: t(iui-color-background-1-overlay);
-    }
+    border-color: var(--iui-color-background-1-overlay);
   }
 }

package/scss/{popover → utils/popover}/popover.scss

@@ -1,7 +1,6 @@
 /* stylelint-disable selector-class-pattern */
 // 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';
 
 // tippy.js helper class to hide Popover when it is scrolled out of view
 @mixin iui-popover {

package/scss/workflow-diagram/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-workflow-diagram {
+  @include iui-workflow-diagram;
+}
+
+.iui-workflow-diagram-step {
+  @include iui-workflow-diagram-step;
+}
+
+.iui-workflow-diagram-content {
+  @include iui-workflow-diagram-content;
+}

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

package/scss/workflow-diagram/workflow-diagram.scss

@@ -0,0 +1,64 @@
+// 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 '../stepper/index';
+
+@mixin iui-workflow-diagram {
+  @include iui-stepper-list;
+  align-items: center;
+}
+
+@mixin iui-workflow-diagram-step {
+  --_iui-workflow-diagram-circle-background-color: var(--iui-color-background-positive);
+  --_iui-workflow-diagram-circle-border-color: var(--iui-color-background-positive);
+  --_iui-workflow-diagram-circle-border-radius: 0;
+  --_iui-workflow-diagram-circle-text-color: var(--iui-color-foreground-accessory);
+  --_iui-workflow-diagram-track-before-color: var(--iui-color-foreground-positive);
+  --_iui-workflow-diagram-track-after-color: var(--iui-color-foreground-positive);
+
+  flex: 1;
+  align-items: center;
+  display: flex;
+  @include iui-text(small);
+  color: var(--_iui-workflow-diagram-circle-text-color);
+
+  &:first-of-type,
+  &:last-of-type {
+    --_iui-workflow-diagram-circle-background-color: var(--iui-color-background-1);
+    --_iui-workflow-diagram-circle-border-color: var(--iui-color-foreground-positive);
+    --_iui-workflow-diagram-circle-border-radius: #{$iui-sm};
+    --_iui-workflow-diagram-circle-text-color: var(--iui-color-foreground-positive);
+  }
+
+  &::before,
+  &::after {
+    content: '';
+    height: $iui-xxs;
+    flex: 1 2 auto;
+  }
+
+  &::before {
+    background-color: var(--_iui-workflow-diagram-track-before-color);
+  }
+
+  &::after {
+    background-color: var(--_iui-workflow-diagram-track-after-color);
+  }
+
+  &:first-of-type {
+    --_iui-workflow-diagram-track-before-color: transparent;
+  }
+
+  &:last-of-type {
+    --_iui-workflow-diagram-track-after-color: transparent;
+  }
+}
+
+@mixin iui-workflow-diagram-content {
+  padding: 0 $iui-m;
+  font-weight: $iui-font-weight-normal;
+  text-align: center;
+  background-color: var(--_iui-workflow-diagram-circle-background-color);
+  border: 1px solid var(--_iui-workflow-diagram-circle-border-color);
+  border-radius: var(--_iui-workflow-diagram-circle-border-radius);
+}

package/src/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';