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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-css",
-  "version": "0.59.2",
+  "version": "1.0.0-dev.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "src/index.scss",
@@ -29,30 +29,34 @@
   ],
   "dependencies": {},
   "devDependencies": {
+    "@itwin/itwinui-icons-elements": "0.2.0",
     "autoprefixer": "^10.4.1",
     "backstopjs": "~6.0.4",
     "html-minifier": "^4.0.0",
+    "npm-run-all": "^4.1.5",
     "postcss": "^8.4.5",
     "postcss-discard-comments": "^5.0.1",
     "postcss-scss": "^4.0.3",
     "sass-embedded": "^1.49.9",
+    "serve": "^14.0.1",
     "stylelint": "^14.2.0",
-    "stylelint-config-sass-guidelines": "^9.0.1"
+    "stylelint-config-sass-guidelines": "^9.0.1",
+    "vite": "^3.0.0"
   },
   "scripts": {
     "build": "yarn clean && yarn build:scss && yarn build:css && node ../shared/copyrightLinter.js --fix css/* && yarn build:html",
     "build:scss": "cpx \"./src/**/*.scss\" ./scss",
     "build:css": "node ./scripts/generateCss.js src css",
-    "build:html": "node ./scripts/generateHtml.js backstop/tests backstop/minified",
-    "build:watch": "yarn build && concurrently -n scss,html -k \"yarn build:watch:scss\" \"yarn build:watch:html\"",
+    "build:html": "vite build backstop/tests --config vite.config.ts",
     "build:watch:scss": "chokidar \"src/**/*\" -c \"yarn build:scss && yarn build:css\"",
-    "build:watch:html": "chokidar \"backstop/tests/**/*\" -c \"yarn build:html\"",
     "createComponent": "node ./scripts/createComponent.js",
     "clean": "rimraf ./css ./scss ./backstop/results/bitmaps_test",
-    "dev": "yarn build:watch",
+    "dev": "concurrently -n scss,html -k \"yarn build:watch:scss\" \"yarn vite backstop/tests --config vite.config.ts\"",
+    "preview": "serve backstop/minified -p 3050",
     "lint": "stylelint \"src/**/*.scss\"",
     "approve": "backstop --config=./backstop/backstop.js approve",
-    "test": "backstop --config=./backstop/backstop.js test --docker",
+    "test:only": "backstop --config=./backstop/backstop.js test --docker",
+    "test": "npm-run-all -p -r \"preview\" \"test:only {1}\" --",
     "clean:images": "node scripts/removeOldTestImages.js",
     "print": "node scripts/print.js",
     "audit:ci": "audit-ci --moderate --report-type=full",

package/scss/alert/alert.scss

@@ -3,70 +3,76 @@
 @import '../style/index';
 @import '../anchor/index';
 @import '../icon/index';
-@import '../text/index';
+@import '../utils/index';
+@import '../button/index';
 
 @mixin iui-alert {
   @include iui-reset;
   border-radius: $iui-border-radius;
-  box-sizing: border-box;
   display: flex;
   align-items: center;
-  @include themed {
-    border: 1px solid t(iui-color-background-5);
-    color: t(iui-text-color);
-    background-color: t(iui-color-background-1);
-  }
-
-  &-icon {
-    @include iui-icons-default;
-    flex-shrink: 0;
-    margin-left: $iui-m;
-  }
-
-  &-message {
-    margin: $iui-baseline $iui-m;
-  }
-
-  &-link {
-    @include iui-anchor-underline('on-initial');
-    border-radius: $iui-border-radius;
-    cursor: pointer;
-    margin-left: $iui-s;
-    user-select: none;
-    white-space: nowrap;
-  }
-
-  > .iui-button {
-    margin-left: auto;
-    margin-right: $iui-s;
+  border: 1px solid var(--iui-color-background-5);
+  color: var(--iui-text-color);
+  background-color: var(--iui-color-background-1);
+  @media (forced-colors: active) {
+    background-color: Canvas;
   }
 
   &.iui-sticky {
     border-radius: 0;
-    position: absolute;
+    position: sticky;
     top: 0;
     left: 0;
-    width: 100vw;
   }
 }
 
+@mixin iui-alert-icon {
+  @include iui-icons-default;
+  flex-shrink: 0;
+  margin-left: $iui-m;
+}
+
+@mixin iui-alert-message {
+  margin: $iui-baseline $iui-m;
+}
+
+@mixin iui-alert-link {
+  @include iui-anchor-underline('on-initial');
+  border-radius: $iui-border-radius;
+  cursor: pointer;
+  margin-left: $iui-s;
+  user-select: none;
+  white-space: nowrap;
+}
+
+@mixin iui-alert-button {
+  @include iui-button;
+  @include iui-button-borderless;
+  @include iui-button-size(small, borderless);
+  margin-left: auto;
+  margin-right: $iui-s;
+}
+
+@mixin iui-alert-button-icon {
+  @include iui-button-icon;
+  margin-left: $iui-component-offset;
+  margin-right: $iui-component-offset;
+}
+
 /// Modifier mixin to categorize the alert
 /// @arg $statusColor Can be one of: positive, negative, warning, primary
 /// @arg $rootSelector Selector of the root alert element. Defaults to .iui-alert
 @mixin iui-alert-category($statusColor, $rootSelector: '.iui-alert') {
-  @include themed {
-    background: linear-gradient(
-      rgba(t(iui-color-foreground-#{$statusColor}-rgb), t(iui-opacity-6)),
-      rgba(t(iui-color-foreground-#{$statusColor}-rgb), t(iui-opacity-6))
-    ),
-      linear-gradient(t(iui-color-background-1), t(iui-color-background-1));
-    border-color: t(iui-color-foreground-#{$statusColor});
-  }
+  @include iui-alert;
+  background: linear-gradient(
+    rgba(var(--iui-color-foreground-#{$statusColor}-rgb), var(--iui-opacity-6)),
+    rgba(var(--iui-color-foreground-#{$statusColor}-rgb), var(--iui-opacity-6))
+  ),
+    linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
+  border-color: var(--iui-color-foreground-#{$statusColor});
 
   #{$rootSelector}-icon {
-    @include themed {
-      fill: t(iui-icons-color-#{$statusColor});
-    }
+    fill: var(--iui-icons-color-#{$statusColor});
   }
 
   #{$rootSelector}-message {
@@ -77,7 +83,7 @@
     @include iui-anchor-status($statusColor);
   }
 
-  > .iui-button {
+  #{$rootSelector}-button {
     outline-color: var(--iui-color-foreground-#{$statusColor});
   }
 }

package/scss/alert/classes.scss

@@ -4,10 +4,30 @@
 
 .iui-alert {
   @include iui-alert;
+}
 
-  @each $status in positive, negative, warning, informational {
-    &.iui-#{$status} {
-      @include iui-alert-category($statusColor: if($status == informational, 'primary', $status));
-    }
+@each $status in positive, negative, warning, informational {
+  .iui-alert-#{$status} {
+    @include iui-alert-category($statusColor: if($status == informational, 'primary', $status));
   }
 }
+
+.iui-alert-icon {
+  @include iui-alert-icon;
+}
+
+.iui-alert-message {
+  @include iui-alert-message;
+}
+
+.iui-alert-link {
+  @include iui-alert-link;
+}
+
+.iui-alert-button {
+  @include iui-alert-button;
+}
+
+.iui-alert-button-icon {
+  @include iui-alert-button-icon;
+}

package/scss/anchor/anchor.scss

@@ -1,3 +1,78 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
-@import '../style/anchor'; // Reimports anchor from global styles
+@import '../style/index';
+@import '../utils/index';
+
+@mixin iui-anchor {
+  @include iui-anchor-status('primary');
+  border-radius: $iui-border-radius;
+  cursor: pointer;
+
+  @include iui-anchor-underline('on-hover');
+
+  @media (prefers-contrast: more) {
+    @include iui-anchor-underline('on-initial');
+  }
+
+  @at-root {
+    .iui-theme-light &,
+    .iui-theme-dark & {
+      @include iui-anchor-underline('on-hover');
+    }
+  }
+
+  @at-root {
+    .iui-theme-light-hc &,
+    .iui-theme-dark-hc & {
+      @include iui-anchor-underline('on-initial');
+    }
+  }
+}
+
+@mixin iui-anchor-external {
+  --_iui-anchor-external-svg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m16 0v5.4l-1.9-2-8.4 8.4-1.5-1.5 8.3-8.4-1.9-1.9m5.4 16v-9h-1v8h-14v-14h8v-1h-9v16z' /></svg>");
+
+  &::after {
+    content: '';
+    display: inline-block;
+    width: 1.5ch;
+    height: 1.5ch;
+    margin-left: 0.5ch;
+    vertical-align: -0.1ch;
+    background-color: currentColor;
+    mask: var(--_iui-anchor-external-svg);
+    @media (forced-colors: active) {
+      background-color: LinkText;
+    }
+  }
+}
+
+@mixin iui-anchor-status($status: primary) {
+  @include iui-focus($color: var(--iui-color-foreground-#{$status}), $offset: 1px);
+  color: var(--iui-color-foreground-#{$status});
+  -webkit-tap-highlight-color: rgba(var(--iui-color-foreground-#{$status}-rgb), var(--iui-opacity-5));
+  @if $status != primary {
+    @include iui-text-selection($status);
+  }
+
+  &:hover {
+    color: var(--iui-color-foreground-#{$status}-overlay);
+  }
+}
+
+/// $behavior should be one of: 'on-hover' or 'on-initial'
+@mixin iui-anchor-underline($behavior: 'on-hover') {
+  @if $behavior == 'on-hover' {
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  } @else {
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}

package/scss/{user-icon/sizes.scss → avatar/avatar-sizes.scss}

@@ -1,18 +1,19 @@
 // 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';
 
-@mixin iui-user-icon-size($size: $iui-icons-xl, $font-size: $iui-font-size-leading) {
+@mixin iui-avatar-size($size: $iui-icons-xl, $font-size: $iui-font-size-leading) {
   width: $size;
   height: $size;
 
   @if ($size == $iui-icons-xl) {
-    --_iui-user-icon-status-size: #{$iui-xs * 1.5};
+    --_iui-avatar-status-size: #{$iui-xs * 1.5};
+  } @else if ($size == $iui-icons-large) {
+    --_iui-avatar-status-size: #{$iui-xs};
   } @else if ($size == $iui-icons-xxl) {
-    --_iui-user-icon-status-size: #{$iui-s};
+    --_iui-avatar-status-size: #{$iui-s};
   } @else {
-    --_iui-user-icon-status-size: #{$iui-sm};
+    --_iui-avatar-status-size: #{$iui-sm};
   }
 
   > .iui-initials {

package/scss/{user-icon/user-icon.scss → avatar/avatar.scss}

@@ -1,9 +1,10 @@
 // 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 './avatar-sizes';
 
-@mixin iui-user-icon {
+@mixin iui-avatar {
   @include iui-reset;
   display: inline-flex;
   align-items: center;
@@ -21,10 +22,7 @@
     height: 100%;
     margin: 0;
     border-radius: 50%;
-    box-sizing: border-box;
-    @include themed {
-      box-shadow: inset 0 0 0 $iui-xxs rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
-    }
+    box-shadow: inset 0 0 0 $iui-xxs rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
   }
 
   > .iui-initials {
@@ -45,9 +43,7 @@
     text-transform: uppercase;
     background-color: $iui-color-dataviz-celery;
     overflow: hidden;
-    @include themed {
-      color: t(iui-color-foreground-accessory);
-    }
+    color: var(--iui-color-foreground-accessory);
   }
 
   > .iui-icon {
@@ -55,9 +51,7 @@
     width: 50%;
     height: 50%;
     position: absolute;
-    @include themed {
-      fill: t(iui-color-foreground-accessory);
-    }
+    fill: var(--iui-color-foreground-accessory);
   }
 
   > img {
@@ -70,12 +64,11 @@
     height: 100%;
     border-width: 0;
     border-radius: 50%;
-    @include themed {
-      background-color: t(iui-color-background-1);
-    }
+    background-color: var(--iui-color-background-1);
   }
 
   > .iui-status {
+    box-sizing: content-box;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -85,86 +78,64 @@
     width: 25%;
     height: 25%;
     border-radius: 50%;
-    @include themed {
-      border: $iui-xxs solid t(iui-color-background-1);
-      background-color: t(iui-color-background-5);
-    }
+    border: $iui-xxs solid var(--iui-color-background-1);
+    background-color: var(--iui-color-background-5);
 
     &::after {
       content: '';
-      width: var(--_iui-user-icon-status-size, $iui-s);
-      height: var(--_iui-user-icon-status-size, $iui-s);
+      width: var(--_iui-avatar-status-size, $iui-s);
+      height: var(--_iui-avatar-status-size, $iui-s);
     }
 
     &.iui-online {
-      @include themed {
-        background-color: t(iui-color-background-positive);
-      }
+      background-color: var(--iui-color-background-positive);
 
       &::after {
         mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6,14L0,8l2-2l4,4l8-8l2,2L6,14z' /></svg>");
-        @include themed {
-          background-color: t(iui-color-foreground-accessory);
-        }
+        background-color: var(--iui-color-foreground-accessory);
       }
     }
 
     &.iui-away {
-      @include themed {
-        background-color: t(iui-color-background-warning);
-      }
+      background-color: var(--iui-color-background-warning);
 
       &::after {
         mask: url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m13.445 12.832-6.445-4.297v-7.535h2v6.465l5.555 3.703z' /></svg>");
-        @include themed {
-          background-color: t(iui-color-foreground-accessory);
-        }
+        background-color: var(--iui-color-foreground-accessory);
       }
     }
 
     &.iui-busy {
-      @include themed {
-        background-color: t(iui-color-background-negative);
-      }
+      background-color: var(--iui-color-background-negative);
 
       &::after {
         mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='7' width='12' height='2'></rect></svg>");
-        @include themed {
-          background-color: t(iui-color-foreground-accessory);
-        }
+        background-color: var(--iui-color-foreground-accessory);
       }
     }
 
     &.iui-offline {
-      @include themed {
-        background-color: t(iui-color-background-1);
-        box-shadow: inset 0 0 0 1px rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-3));
-      }
+      background-color: var(--iui-color-background-1);
+      box-shadow: inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
 
       &::after {
         mask: url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m12.5 2-4.5 4.5-4.5-4.5-1.5 1.5 4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5z' /></svg>");
-        @include themed {
-          background-color: t(iui-icons-color);
-        }
+        background-color: var(--iui-icons-color);
       }
     }
   }
 
-  &.iui-user-icon-count {
+  &.iui-avatar-count {
     > .iui-initials {
-      @include themed {
-        background-color: t(iui-color-background-3);
-        color: t(iui-text-color-muted);
-      }
+      background-color: var(--iui-color-background-3);
+      color: var(--iui-text-color-muted);
     }
 
     &:focus {
       outline: none;
 
       > .iui-stroke {
-        @include themed {
-          box-shadow: t(iui-focus-box-shadow);
-        }
+        box-shadow: var(--iui-focus-box-shadow);
       }
     }
 
@@ -174,37 +145,31 @@
 
     &:focus:not(:focus-visible) {
       > .iui-stroke {
-        @include themed {
-          box-shadow: inset 0 0 0 $iui-xxs rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
-        }
+        box-shadow: inset 0 0 0 $iui-xxs rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
       }
     }
   }
 }
 
-@mixin iui-user-icon-list {
+@mixin iui-avatar-list {
   display: inline-flex;
   flex-wrap: wrap;
 
-  @include iui-user-icon-margins;
+  @include iui-avatar-margins;
 
   &.iui-stacked {
-    .iui-user-icon:not(:first-child) {
+    .iui-avatar:not(:first-child) {
       margin-left: -$iui-xs;
 
       .iui-initials {
-        @include themed {
-          box-shadow: 0 0 0 $iui-xs t(iui-color-background-1);
-        }
+        box-shadow: 0 0 0 $iui-xs var(--iui-color-background-1);
       }
 
       &.iui-small {
         margin-left: -$iui-xxs;
 
         .iui-initials {
-          @include themed {
-            box-shadow: 0 0 0 $iui-xxs t(iui-color-background-1);
-          }
+          box-shadow: 0 0 0 $iui-xxs var(--iui-color-background-1);
         }
       }
 
@@ -219,20 +184,20 @@
 
     &.iui-animated {
       @media (prefers-reduced-motion: no-preference) {
-        .iui-user-icon {
+        .iui-avatar {
           transition: margin-left $iui-speed ease-out;
         }
       }
 
       &:hover {
-        @include iui-user-icon-margins;
+        @include iui-avatar-margins;
       }
     }
   }
 }
 
-@mixin iui-user-icon-margins {
-  .iui-user-icon:not(:first-child) {
+@mixin iui-avatar-margins {
+  .iui-avatar:not(:first-child) {
     margin-left: $iui-xs;
 
     &.iui-small {

package/scss/avatar/classes.scss

@@ -0,0 +1,27 @@
+// 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-avatar {
+  @include iui-avatar;
+
+  &#{&} {
+    @include iui-avatar-size;
+  }
+
+  &.iui-small {
+    @include iui-avatar-size($size: $iui-icons-large, $font-size: $iui-font-size-small);
+  }
+
+  &.iui-large {
+    @include iui-avatar-size($size: $iui-icons-xxl, $font-size: $iui-font-size-subheading);
+  }
+
+  &.iui-x-large {
+    @include iui-avatar-size($size: $iui-icons-3xl, $font-size: $iui-font-size-title);
+  }
+}
+
+.iui-avatar-list {
+  @include iui-avatar-list;
+}

package/scss/{user-icon → avatar}/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 './user-icon';
-@import './sizes';
+@import './avatar';

package/scss/backdrop/backdrop.scss

@@ -0,0 +1,27 @@
+// 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-backdrop {
+  z-index: 998;
+  isolation: isolate;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4); // IE fallback
+  background-color: rgba(0, 0, 0, var(--iui-opacity-4));
+
+  &:not(.iui-backdrop-visible) {
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  transition: visibility $iui-speed-instant linear, opacity $iui-speed-fast ease-out;
+  transition-delay: $iui-speed-fast, $iui-speed-instant;
+
+  &.iui-backdrop-visible {
+    transition-delay: $iui-speed-instant; // remove delay for entry animation
+  }
+}

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

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

package/scss/badge/badge.scss

@@ -1,12 +1,14 @@
 // 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';
 
 $iui-badge-background-default: $iui-color-background-5--light;
 $iui-badge-background-positive: $iui-color-foreground-positive--dark;
 $iui-badge-background-negative: $iui-color-foreground-negative--dark;
 $iui-badge-background-warning: $iui-color-foreground-warning--dark;
 $iui-badge-background-primary: $iui-color-foreground-primary--dark;
+$iui-badge-horizontal-padding: $iui-xs * 1.5;
 
 $iui-badge-text-color: rgba($iui-color-foreground-body--light, $iui-opacity-3--light);
 
@@ -17,14 +19,14 @@ $iui-badge-text-color: rgba($iui-color-foreground-body--light, $iui-opacity-3--l
   @include iui-reset;
   display: inline-block;
   font-size: $iui-font-size-small;
-  padding: 0 $iui-xs * 1.5;
+  padding: 0 $iui-badge-horizontal-padding;
   margin: round($iui-baseline * 0.5) 0;
   border-radius: $iui-border-radius;
   background-color: var(--iui-badge-background-color);
   color: var(--_iui-badge-text-color);
   text-transform: uppercase;
   user-select: none;
-  max-width: 20ch;
+  max-width: calc(20ch + $iui-badge-horizontal-padding * 2);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;