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

package/scss/stepper/stepper.scss

@@ -0,0 +1,151 @@
+// 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';
+@import '../text/mixins';
+
+@mixin iui-stepper {
+  display: flex;
+  flex-direction: column;
+  row-gap: $iui-baseline * 0.5;
+
+  > ol {
+    @include iui-stepper-list;
+  }
+}
+
+@mixin iui-stepper-list {
+  @include iui-reset;
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-start;
+  width: 100%;
+}
+
+@mixin iui-stepper-step {
+  --_iui-stepper-step-background-color: var(--iui-color-background-1);
+  --_iui-stepper-step-border-color: var(--iui-color-foreground-positive);
+  --_iui-stepper-step-number-color: var(--iui-color-foreground-positive);
+  --_iui-stepper-step-text-color: var(--iui-color-foreground-positive);
+  --_iui-stepper-step-track-before-color: var(--iui-color-foreground-positive);
+  --_iui-stepper-step-track-after-color: var(--iui-color-foreground-positive);
+
+  flex: 1;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  @include iui-text(small);
+  color: var(--_iui-stepper-step-text-color);
+
+  &:first-of-type {
+    --_iui-stepper-step-track-before-color: transparent;
+  }
+
+  &:last-of-type {
+    --_iui-stepper-step-track-after-color: transparent;
+  }
+}
+
+@mixin iui-stepper-step-modifiers {
+  // Current step
+  &.iui-current {
+    --_iui-stepper-step-background-color: var(--iui-color-background-positive);
+    --_iui-stepper-step-border-color: var(--iui-color-background-positive);
+    --_iui-stepper-step-number-color: var(--iui-color-foreground-accessory);
+    --_iui-stepper-step-track-after-color: var(--iui-color-background-border);
+
+    font-weight: $iui-font-weight-semibold;
+  }
+
+  // Future steps
+  &.iui-current ~ & {
+    --_iui-stepper-step-background-color: var(--iui-color-background-1);
+    --_iui-stepper-step-border-color: var(--iui-color-background-border);
+    --_iui-stepper-step-number-color: var(--iui-text-color-muted);
+    --_iui-stepper-step-text-color: var(--iui-text-color-muted);
+    --_iui-stepper-step-track-before-color: var(--iui-color-background-5);
+
+    &:not(:last-of-type) {
+      --_iui-stepper-step-track-after-color: var(--iui-color-background-5);
+    }
+  }
+
+  // Clickable steps
+  &.iui-clickable:focus {
+    outline: 0;
+  }
+}
+
+@mixin iui-stepper-circle {
+  align-items: center;
+  border-radius: $iui-border-radius-round;
+  display: flex;
+  width: $iui-l;
+  height: $iui-l;
+  justify-content: center;
+  overflow-wrap: break-word;
+  user-select: none;
+  border: 1px solid var(--_iui-stepper-step-border-color);
+  background-color: var(--_iui-stepper-step-background-color);
+  color: var(--_iui-stepper-step-number-color);
+
+  @at-root .iui-clickable & {
+    cursor: pointer;
+    transition: background-color $iui-speed-fast ease-out, border-color $iui-speed-fast ease-out,
+      color $iui-speed-fast ease-out;
+
+    &:hover {
+      --_iui-stepper-step-background-color: var(--iui-color-background-positive);
+      --_iui-stepper-step-border-color: var(--iui-color-background-positive);
+      --_iui-stepper-step-number-color: var(--iui-color-foreground-accessory);
+    }
+  }
+
+  @at-root .iui-clickable:focus & {
+    outline: 2px solid var(--iui-color-foreground-positive);
+    outline-offset: -1px;
+  }
+
+  @at-root .iui-clickable:focus:not(:focus-visible) & {
+    outline: none;
+  }
+}
+
+@mixin iui-stepper-track-content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    height: $iui-xxs;
+    flex: 1 2 auto;
+  }
+
+  &::before {
+    background-color: var(--_iui-stepper-step-track-before-color);
+  }
+
+  &::after {
+    background-color: var(--_iui-stepper-step-track-after-color);
+  }
+}
+
+@mixin iui-stepper-step-name {
+  text-align: center;
+  user-select: all;
+  color: var(--_iui-stepper-step-text-color);
+}
+
+@mixin iui-stepper-steps-label {
+  display: block;
+  font-size: $iui-font-size-subheading;
+  text-align: center;
+}
+
+@mixin iui-stepper-steps-label-count {
+  user-select: none;
+  margin-right: $iui-s;
+  color: var(--iui-text-color-muted);
+}

package/scss/style/{variables.scss → global-variables.scss}

@@ -2,7 +2,7 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import './space';
 @import './baseline';
-@import '../icon/variables';
+@import './icon-sizes';
 
 $iui-border-radius: 4px;
 $iui-border-radius-round: 9999px;
@@ -19,3 +19,5 @@ $iui-component-padding-horizontal: $iui-sm; // 12px
 $iui-component-padding-vertical: (($iui-component-height - $iui-line-height) * 0.5) - 1; // 12.5px
 $iui-component-padding-vertical-small: (($iui-component-height-small - $iui-line-height) * 0.5) - 1; // 7px
 $iui-component-padding-vertical-large: (($iui-component-height-large - $iui-line-height) * 0.5) - 1; // 18px
+
+$iui-side-navigation-icon-margins: $iui-icons-large; // Used to align header brand button & side navigation spacing

package/scss/style/global.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 './index';
-@import './anchor';
+@import '../utils/index';
 
 html {
   @include theme-variables(light);
@@ -36,11 +36,8 @@ html {
 }
 
 .iui-body {
-  @include themed {
-    background-color: t(iui-color-background-2);
-    color: t(iui-text-color);
-  }
-
+  background-color: var(--iui-color-background-2);
+  color: var(--iui-text-color);
   font-size: $iui-font-size;
   line-height: $iui-line-height;
 
@@ -52,10 +49,6 @@ html {
   }
 }
 
-.iui-anchor {
-  @include iui-anchor;
-}
-
 .iui-visually-hidden {
   @include visually-hidden;
 }
@@ -68,3 +61,9 @@ html {
   // Scrollbar
   @include iui-scrollbar;
 }
+
+[class*=iui-]:where(:not(.iui-body)),
+[class*=iui-]:where(:not(.iui-body))::before,
+[class*=iui-]:where(:not(.iui-body))::after {
+  box-sizing: border-box;
+}

package/scss/{icon/variables.scss → style/icon-sizes.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.
 
-/// Sizes
+/// Icon sizes
 
 $iui-icons-default: 16px;
 

package/scss/style/index.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 './theme';
 @import './baseline';
-@import './mixins';
-@import './space';
-@import './typography';
-@import './variables';
 @import './color';
-@import './speed';
 @import './elevation';
+@import './global-variables';
+@import './icon-sizes';
+@import './space';
+@import './speed';
+@import './theme';
+@import './typography';

package/scss/style/theme.scss

@@ -415,20 +415,6 @@ $cssVariables: (
   iui-icons-color-actionable-disabled: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)),
 );
 
-@function getfallbackvars() {
-  $theme: map-get($themes, light);
-
-  @each $var, $value in $theme {
-    @if (type-of($value) == color) {
-      $theme: map-merge($theme, (#{$var}-rgb: $value));
-    }
-  }
-
-  @return $theme;
-}
-
-$fallbackvars: getfallbackvars();
-
 @function hextorgb($hex) {
   @return red($hex), green($hex), blue($hex);
 }
@@ -455,28 +441,3 @@ $fallbackvars: getfallbackvars();
     }
   }
 }
-
-$fallback: null;
-
-//  Adds a CSS variable with a fallback value.
-//
-//  Usage example:
-//  @include themed {
-//    color: rgba(t(iui-color-background-1-rgb), t(iui-opacity-4));
-//    background-color: t(iui-color-background-2);
-//  }
-@mixin themed($property: null, $var: null) {
-  $fallback: true !global;
-  @content;
-  $fallback: false !global;
-  @content;
-}
-
-// Returns a CSS variable or a fallback value. Can only be used in a `themed` mixin content.
-@function t($var) {
-  @if ($fallback) {
-    @return map-get($fallbackvars, $var);
-  }
-
-  @return var(--#{unquote($var)});
-}

package/scss/style/typography.scss

@@ -4,10 +4,11 @@
 @import './theme';
 
 /// Constants ------------------------------------------------------------------
-
-$iui-sans-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
-$iui-sans: 'Open Sans';
-$iui-monospace: ui-monospace, Menlo, 'Segoe UI Mono', Consolas, 'Roboto Mono', 'Courier New', monospace;
+$iui-sans-fallback: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial,
+  sans-serif;
+$iui-sans: 'Noto Sans';
+$iui-monospace: 'Noto Sans Mono', ui-monospace, Menlo, 'Segoe UI Mono', Consolas, 'Roboto Mono', 'Courier New',
+  monospace;
 
 $iui-font-family: $iui-sans, $iui-sans-fallback;
 

package/scss/surface/surface.scss

@@ -10,7 +10,6 @@
   background-color: var(--iui-surface-background-color);
   border-radius: var(--iui-surface-border-radius);
   box-shadow: var(--iui-surface-elevation);
-  box-sizing: border-box;
   color: var(--iui-text-color);
   @media (forced-colors: active) {
     border: 1px solid transparent;

package/scss/table/classes.scss

@@ -4,14 +4,7 @@
 
 .iui-table {
   @include iui-table;
-
-  &.iui-condensed {
-    @include iui-table-condensed;
-  }
-
-  &.iui-extra-condensed {
-    @include iui-table-extra-condensed;
-  }
+  @include iui-table-sizes;
 }
 
 .iui-table-header-wrapper {
@@ -22,6 +15,10 @@
   @include iui-table-header;
 }
 
+.iui-table-row {
+  @include iui-table-row;
+}
+
 .iui-table-header-actions-container {
   @include iui-table-header-actions-container;
 }
@@ -30,34 +27,38 @@
   @include iui-table-body;
 }
 
-.iui-cell {
+.iui-table-cell {
   @include iui-table-cell;
 }
 
-.iui-cell-shadow-left {
-  @include iui-table-cell-shadow-left;
+.iui-table-cell-shadow-left {
+  @include iui-table-cell-shadow(left);
+}
+
+.iui-table-cell-shadow-right {
+  @include iui-table-cell-shadow(right);
 }
 
-.iui-cell-shadow-right {
-  @include iui-table-cell-shadow-right;
+.iui-table-paginator {
+  @include iui-table-paginator;
 }
 
-.iui-paginator {
-  @include iui-paginator;
+.iui-table-paginator-page-size-label {
+  @include iui-table-paginator-page-size-label;
 }
 
-.iui-paginator-ellipsis {
-  @include iui-paginator-ellipsis;
+.iui-table-paginator-ellipsis {
+  @include iui-table-paginator-ellipsis;
 }
 
-.iui-paginator-pages-group {
-  @include iui-paginator-pages-group;
+.iui-table-paginator-pages-group {
+  @include iui-table-paginator-pages-group;
 }
 
-.iui-paginator-page-button {
-  @include iui-paginator-page-button;
+.iui-table-paginator-page-button {
+  @include iui-table-paginator-page-button;
 }
 
-.iui-column-filter {
-  @include iui-column-filter;
+.iui-table-column-filter {
+  @include iui-table-column-filter;
 }

package/scss/table/column-filter.scss

@@ -3,7 +3,7 @@
 @import '../style/index';
 @import '../surface/index';
 
-@mixin iui-column-filter {
+@mixin iui-table-column-filter {
   @include iui-surface;
   padding: $iui-baseline $iui-sm;
   display: inline-flex;
@@ -23,15 +23,12 @@
     display: flex;
     width: 100%;
     align-content: center;
+    gap: $iui-s;
 
     > .iui-button {
       &:first-of-type {
         margin-left: auto;
       }
-
-      &:not(:last-child) {
-        margin-right: $iui-s;
-      }
     }
   }
 }

package/scss/table/index.scss

@@ -1,7 +1,6 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import './table';
-@import './condensed';
-@import './extra-condensed';
 @import './column-filter';
 @import './paginator';
+@import './sizes';

package/scss/table/paginator.scss

@@ -1,22 +1,18 @@
 // 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 '../button/index';
-@import '../text/index';
-@import './variables';
+@import '../text/muted';
 
-@mixin iui-paginator {
+@mixin iui-table-paginator {
   @include iui-reset;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  min-height: $iui-baseline * 5;
   padding: 0 $iui-m;
   user-select: none;
-  @include themed {
-    background-color: t(iui-color-background-3);
-  }
+  background-color: var(--iui-color-background-3);
 
   > .iui-left,
   > .iui-center,
@@ -31,57 +27,53 @@
   > .iui-center {
     justify-content: center;
     flex: 2 1;
-    @include themed {
-      color: t(iui-text-color);
-    }
+    color: var(--iui-text-color);
   }
 
   > .iui-right {
     justify-content: flex-end;
   }
+}
 
-  &-page-size-label {
-    @include iui-text-muted;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+@mixin iui-table-paginator-page-size-label {
+  @include iui-text-muted;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-@mixin iui-paginator-ellipsis {
+@mixin iui-table-paginator-ellipsis {
   display: flex;
   justify-content: center;
   align-items: center;
   width: $iui-component-height;
-  @include themed {
-    color: t(iui-text-color-muted);
-  }
+  color: var(--iui-text-color-muted);
 
   &-small {
     width: $iui-component-height-small;
   }
 }
 
-@mixin iui-paginator-pages-group {
+@mixin iui-table-paginator-pages-group {
   display: inline-flex;
   align-items: center;
   margin: 0 $iui-s;
 }
 
-@mixin iui-paginator-page-button {
+@mixin iui-table-paginator-page-button {
   @include iui-button;
   @include iui-button-borderless;
   width: $iui-component-height;
 
-  &.iui-active {
-    @include iui-button-active;
-  }
-
-  // Adds stripe above active button
-  --_iui-button-active-stripe-inset: calc(100% - #{$iui-xs}) #{$iui-xxs} #{$iui-xxs};
-
   &-small {
     @include iui-button-size(small);
     width: $iui-component-height-small;
   }
+
+  &[data-iui-active='true'] {
+    @include iui-button-default-active;
+    @include iui-button-borderless-active;
+    // Adds stripe above active button
+    --_iui-button-active-stripe-inset: calc(100% - #{$iui-xs}) #{$iui-xxs} #{$iui-xxs};
+  }
 }

package/scss/table/sizes.scss

@@ -0,0 +1,31 @@
+// 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-table-sizes {
+  --_iui-table-header-size: #{$iui-baseline * 5};
+  --_iui-table-row-size: #{$iui-baseline * 5 + 2px};
+
+  &[data-iui-size='condensed'] {
+    --_iui-table-header-size: #{$iui-baseline * 4};
+    --_iui-table-row-size: #{$iui-baseline * 4 + 2px};
+  }
+
+  &[data-iui-size='extra-condensed'] {
+    --_iui-table-header-size: #{$iui-baseline * 3};
+    --_iui-table-row-size: #{$iui-baseline * 3 + 2px};
+
+    .iui-table-header .iui-table-cell {
+      padding-block: $iui-baseline * 0.25;
+    }
+  }
+
+  .iui-table-header .iui-table-cell,
+  .iui-table-paginator {
+    min-height: var(--_iui-table-header-size);
+  }
+
+  .iui-table-cell {
+    min-height: var(--_iui-table-row-size);
+  }
+}

package/scss/table/{variables.scss → table-densities.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/baseline';
+@import '../style/space';
 
 $iui-table-density-vertical: $iui-baseline * 1.5;
 $iui-table-density-vertical-condensed: $iui-baseline;