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

package/scss/dialog/dialog.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 '../icon/index';
+@import '../utils/index';
 
 $iui-dialog-width: 380px;
 
@@ -21,14 +21,10 @@ $iui-dialog-width: 380px;
   isolation: isolate;
   border-radius: $iui-border-radius;
   box-shadow: $iui-elevation-24;
-  box-sizing: border-box;
   position: fixed;
   padding: $iui-baseline $iui-m;
-  box-sizing: border-box;
-  padding: $iui-baseline $iui-m;
   overflow: hidden;
   pointer-events: auto;
-  background-color: #FFF; // IE fallback
   background-color: var(--iui-color-background-1);
   @media (forced-colors: active) {
     border: 1px solid;
@@ -149,7 +145,6 @@ $iui-dialog-width: 380px;
   align-items: center;
   margin-bottom: $iui-baseline;
   justify-content: space-between;
-  box-sizing: border-box;
   font-size: $iui-font-size-subheading;
 }
 

package/scss/expandable-block/block.scss

@@ -1,18 +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 '../style/index';
-@import '../text/mixins';
+@import '../utils/index';
 @import '../icon/index';
 
 @mixin iui-expandable-block {
   @include iui-reset;
   display: flex;
   flex-direction: column;
-  box-sizing: border-box;
   width: 100%;
-  @include themed {
-    background-color: t(iui-color-background-1);
-  }
+  background-color: var(--iui-color-background-1);
 
   > .iui-header {
     @include iui-focus;
@@ -20,16 +17,13 @@
     align-items: center;
     padding: $iui-baseline $iui-sm;
     cursor: pointer;
-    box-sizing: border-box;
     user-select: none;
     @media (prefers-reduced-motion: no-preference) {
       transition: background-color $iui-speed-fast ease-out;
     }
-    @include themed {
-      border: 1px solid t(iui-color-background-3);
-      border-bottom-color: t(iui-color-background-4);
-      background-color: t(iui-color-background-3);
-    }
+    border: 1px solid var(--iui-color-background-3);
+    border-bottom-color: var(--iui-color-background-4);
+    background-color: var(--iui-color-background-3);
 
     > .iui-icon,
     > .iui-status-icon {
@@ -43,9 +37,7 @@
       @media (prefers-reduced-motion: no-preference) {
         transition: transform $iui-speed-fast ease-out;
       }
-      @include themed {
-        fill: t(iui-icons-color-actionable);
-      }
+      fill: var(--iui-icons-color-actionable);
     }
 
     > .iui-status-icon {
@@ -62,9 +54,7 @@
       @media (prefers-reduced-motion: no-preference) {
         transition: color $iui-speed-fast ease;
       }
-      @include themed {
-        color: t(iui-text-color);
-      }
+      color: var(--iui-text-color);
     }
 
     .iui-title,
@@ -80,9 +70,7 @@
 
     .iui-caption {
       font-size: $iui-font-size-small;
-      @include themed {
-        color: t(iui-text-color-muted);
-      }
+      color: var(--iui-text-color-muted);
     }
 
     @include iui-focus;
@@ -90,13 +78,9 @@
 
   .iui-expandable-content {
     overflow: hidden;
-    box-sizing: border-box;
-
-    @include themed {
-      border-bottom: 1px solid t(iui-color-background-4);
-      border-right: 1px solid t(iui-color-background-4);
-      border-left: 1px solid t(iui-color-background-4);
-    }
+    border-bottom: 1px solid var(--iui-color-background-4);
+    border-right: 1px solid var(--iui-color-background-4);
+    border-left: 1px solid var(--iui-color-background-4);
 
     @include iui-transition-group;
 
@@ -108,21 +92,15 @@
 
   &:hover {
     > .iui-header {
-      @include themed {
-        background-color: t(iui-color-background-4);
-      }
+      background-color: var(--iui-color-background-4);
 
       > .iui-icon {
-        @include themed {
-          fill: t(iui-icons-color-actionable-hover);
-        }
+        fill: var(--iui-icons-color-actionable-hover);
       }
 
       .iui-caption,
       .iui-title {
-        @include themed {
-          color: t(iui-color-foreground-body);
-        }
+        color: var(--iui-color-foreground-body);
         @media (prefers-reduced-motion: no-preference) {
           transition: color $iui-speed-fast ease;
         }
@@ -132,17 +110,13 @@
 
   &.iui-expanded {
     > .iui-header {
-      @include themed {
-        background-color: t(iui-color-background-3);
-        border-left: 1px solid t(iui-color-background-4);
-        border-top: 1px solid t(iui-color-background-4);
-        border-right: 1px solid t(iui-color-background-4);
-
-        &:hover {
-          @include themed {
-            background-color: t(iui-color-background-4);
-          }
-        }
+      background-color: var(--iui-color-background-3);
+      border-left: 1px solid var(--iui-color-background-4);
+      border-top: 1px solid var(--iui-color-background-4);
+      border-right: 1px solid var(--iui-color-background-4);
+
+      &:hover {
+        background-color: var(--iui-color-background-4);
       }
 
       > .iui-icon {
@@ -180,9 +154,7 @@
       border-radius: $iui-border-radius;
 
       &:hover {
-        @include themed {
-          background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
-        }
+        background-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
       }
     }
 

package/scss/fieldset/fieldset.scss

@@ -1,35 +1,29 @@
 // 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/index';
+@import '../utils/index';
 
 @mixin iui-fieldset {
   @include iui-reset;
   padding: $iui-baseline $iui-sm;
   border-radius: $iui-border-radius;
-  @include themed {
-    border: 1px solid t(iui-color-background-border);
-    background-color: t(iui-color-background-1);
-  }
+  border: 1px solid var(--iui-color-background-border);
+  background-color: var(--iui-color-background-1);
 
   legend {
     font-size: $iui-font-size-leading;
     padding: $iui-component-padding-vertical-small $iui-s;
     border-radius: $iui-border-radius;
     user-select: none;
-    @include themed {
-      background-color: t(iui-color-background-4);
-      color: t(iui-text-color);
-    }
+    background-color: var(--iui-color-background-4);
+    color: var(--iui-text-color);
   }
 
   &[disabled] {
     cursor: not-allowed;
 
     legend {
-      @include themed {
-        color: t(iui-text-color-muted);
-      }
+      color: var(--iui-text-color-muted);
     }
   }
 }

package/scss/file-upload/file-upload.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 '../text/index';
+@import '../utils/index';
 @import '../icon/index';
 
 @mixin iui-file-upload {
@@ -22,13 +22,10 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    box-sizing: border-box;
     user-select: none;
     padding: round($iui-baseline * 0.5) $iui-sm;
-    @include themed {
-      background-color: t(iui-color-background-2);
-      border: 1px solid t(iui-color-background-2);
-    }
+    background-color: var(--iui-color-background-2);
+    border: 1px solid var(--iui-color-background-2);
 
     .iui-browse-input {
       width: 0.1px;
@@ -36,7 +33,6 @@
       opacity: 0;
       overflow: hidden;
       position: absolute;
-      z-index: -1;
     }
 
     > svg,
@@ -52,10 +48,8 @@
       flex-direction: row;
 
       &:focus-within {
-        @include themed {
-          outline: 2px solid t(iui-color-foreground-primary);
-          outline-offset: -2px;
-        }
+        outline: 2px solid var(--iui-color-foreground-primary);
+        outline-offset: -2px;
       }
     }
 
@@ -69,22 +63,18 @@
   }
 
   &.iui-drag > .iui-content {
-    @include themed {
-      background: linear-gradient(
-        rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6)),
-        rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6))
-      ),
-        linear-gradient(t(iui-color-background-1), t(iui-color-background-1));
-      border-color: t(iui-color-foreground-primary);
-      color: t(iui-color-foreground-primary);
-    }
+    background: 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));
+    border-color: var(--iui-color-foreground-primary);
+    color: var(--iui-color-foreground-primary);
     visibility: visible;
 
     > svg,
     .iui-template-icon {
-      @include themed {
-        fill: t(iui-icons-color-primary);
-      }
+      fill: var(--iui-icons-color-primary);
     }
   }
 }

package/scss/footer/footer.scss

@@ -2,6 +2,7 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import '../style/index';
 @import '../anchor/index';
+@import '../utils/index';
 
 @mixin iui-legal-footer {
   @include iui-reset;
@@ -25,20 +26,14 @@
       user-select: none;
       white-space: nowrap;
       word-break: keep-all;
-
-      @include themed {
-        color: t(iui-text-color-muted);
-      }
+      color: var(--iui-text-color-muted);
 
       .iui-separator {
         margin: 0 $iui-s;
         width: 1px;
         height: $iui-baseline;
         display: inline-table;
-
-        @include themed {
-          background-color: t(iui-text-color-muted);
-        }
+        background-color: var(--iui-text-color-muted);
       }
 
       > a {
@@ -46,9 +41,7 @@
 
         &,
         &:hover {
-          @include themed {
-            color: t(iui-text-color-muted);
-          }
+          color: var(--iui-text-color-muted);
         }
       }
     }
@@ -57,9 +50,6 @@
   > .iui-legal-footer-developer {
     display: block;
     user-select: all;
-
-    @include themed {
-      color: t(iui-text-color-muted);
-    }
+    color: var(--iui-text-color-muted);
   }
 }

package/scss/header/classes.scss

@@ -4,8 +4,76 @@
 
 .iui-page-header {
   @include iui-page-header;
+
+  &[data-iui-size='slim'] {
+    @include iui-page-header-slim;
+  }
+}
+
+.iui-page-header-left,
+.iui-page-header-center,
+.iui-page-header-right {
+  @include iui-page-header-zone;
+}
+
+.iui-page-header-right {
+  @include iui-page-header-right;
+}
+
+.iui-page-header-divider {
+  @include iui-page-header-divider;
+}
+
+.iui-header-breadcrumbs {
+  @include iui-page-header-breadcrumbs;
+}
+
+.iui-header-brand {
+  @include iui-header-brand;
+}
+
+.iui-header-brand-icon {
+  @include iui-header-brand-icon;
+}
+
+.iui-header-brand-label {
+  @include iui-header-brand-label;
+}
+
+.iui-header-breadcrumbs-list {
+  @include iui-breadcrumbs-list;
+}
+
+.iui-page-header-left,
+.iui-header-breadcrumbs,
+.iui-header-breadcrumbs-list {
+  @include iui-page-header-left;
+}
+
+.iui-header-breadcrumb-button {
+  @include iui-header-breadcrumb-button;
+}
+
+.iui-header-breadcrumb-button-split {
+  @include iui-header-breadcrumb-button-split;
+}
+
+.iui-header-breadcrumb-item {
+  @include iui-header-breadcrumb-item;
+}
+
+.iui-header-breadcrumb-button-wrapper {
+  @include iui-header-breadcrumb-button-wrapper;
+}
+
+.iui-header-breadcrumb-button-icon {
+  @include iui-header-breadcrumb-button-icon;
+}
+
+.iui-header-breadcrumb-button-dropdown-icon {
+  @include iui-header-breadcrumb-button-dropdown-icon;
 }
 
-.iui-header-logo {
-  @include iui-header-logo;
+.iui-header-breadcrumb-button-text {
+  @include iui-header-breadcrumb-button-text;
 }