@itwin/itwinui-css 0.61.0 → 0.63.1

package/css/tile.css

@@ -102,6 +102,92 @@
   margin-bottom:0;
   -webkit-line-clamp:2;
 }
+.iui-tile.iui-progress{
+  cursor:progress;
+  font-style:italic;
+}
+.iui-tile[aria-disabled=true]{
+  cursor:not-allowed;
+}
+.iui-tile[aria-disabled=true] .iui-tile-name-label{
+  color:var(--iui-text-color-muted);
+}
+.iui-tile[aria-disabled=true] .iui-thumbnail-icon,
+.iui-tile[aria-disabled=true] .iui-tile-thumbnail-picture{
+  filter:grayscale(100%);
+}
+.iui-tile[aria-disabled=true]:hover .iui-tile-thumbnail-picture, .iui-tile[aria-disabled=true]:focus-within .iui-tile-thumbnail-picture{
+  transform:none;
+}
+.iui-tile[aria-disabled=true] .iui-tile-more-options{
+  display:none;
+}
+.iui-tile.iui-positive::-moz-selection, .iui-tile.iui-positive *::-moz-selection{
+  background-color:rgba(83, 162, 26, 0.2);
+  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
+}
+.iui-tile.iui-positive::selection,
+.iui-tile.iui-positive *::selection{
+  background-color:rgba(83, 162, 26, 0.2);
+  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
+}
+.iui-tile.iui-positive .iui-tile-thumbnail{
+  box-shadow:0 4px 0 var(--iui-color-foreground-positive);
+}
+.iui-tile.iui-positive.iui-folder .iui-tile-thumbnail{
+  box-shadow:4px 0 0 var(--iui-color-foreground-positive);
+}
+
+.iui-tile.iui-positive .iui-tile-name-label{
+  color:var(--iui-color-foreground-positive);
+}
+.iui-tile.iui-positive .iui-tile-status-icon{
+  fill:var(--iui-color-foreground-positive);
+}
+.iui-tile.iui-warning::-moz-selection, .iui-tile.iui-warning *::-moz-selection{
+  background-color:rgba(241, 141, 19, 0.2);
+  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
+}
+.iui-tile.iui-warning::selection,
+.iui-tile.iui-warning *::selection{
+  background-color:rgba(241, 141, 19, 0.2);
+  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
+}
+.iui-tile.iui-warning .iui-tile-thumbnail{
+  box-shadow:0 4px 0 var(--iui-color-foreground-warning);
+}
+.iui-tile.iui-warning.iui-folder .iui-tile-thumbnail{
+  box-shadow:4px 0 0 var(--iui-color-foreground-warning);
+}
+
+.iui-tile.iui-warning .iui-tile-name-label{
+  color:var(--iui-color-foreground-warning);
+}
+.iui-tile.iui-warning .iui-tile-status-icon{
+  fill:var(--iui-color-foreground-warning);
+}
+.iui-tile.iui-negative::-moz-selection, .iui-tile.iui-negative *::-moz-selection{
+  background-color:rgba(209, 10, 10, 0.2);
+  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
+}
+.iui-tile.iui-negative::selection,
+.iui-tile.iui-negative *::selection{
+  background-color:rgba(209, 10, 10, 0.2);
+  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
+}
+.iui-tile.iui-negative .iui-tile-thumbnail{
+  box-shadow:0 4px 0 var(--iui-color-foreground-negative);
+}
+.iui-tile.iui-negative.iui-folder .iui-tile-thumbnail{
+  box-shadow:4px 0 0 var(--iui-color-foreground-negative);
+}
+
+.iui-tile.iui-negative .iui-tile-name-label{
+  color:var(--iui-color-foreground-negative);
+}
+.iui-tile.iui-negative .iui-tile-status-icon{
+  fill:var(--iui-color-foreground-negative);
+}
 
 .iui-tile-thumbnail-type-indicator{
   border-color:transparent;
@@ -269,6 +355,11 @@
   width:64px;
   height:64px;
 }
+@media (forced-colors: active){
+  .iui-tile-thumbnail .iui-thumbnail-icon{
+    fill:CanvasText;
+  }
+}
 .iui-tile-thumbnail .iui-thumbnail-icon.iui-informational{
   fill:#008ae0;
   fill:var(--iui-icons-color-primary);
@@ -386,6 +477,11 @@ div.iui-tile-thumbnail-picture{
   margin-right:8px;
   flex-shrink:0;
 }
+@media (forced-colors: active){
+  .iui-tile-content .iui-tile-status-icon{
+    fill:CanvasText;
+  }
+}
 .iui-tile-content .iui-tile-status-icon.iui-informational{
   fill:#008ae0;
   fill:var(--iui-icons-color-primary);
@@ -449,6 +545,12 @@ div.iui-tile-thumbnail-picture{
   margin-right:8px;
   flex-shrink:0;
 }
+@media (forced-colors: active){
+  .iui-tile-content .iui-tile-metadata > svg,
+.iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon{
+    fill:CanvasText;
+  }
+}
 .iui-tile-content .iui-tile-metadata > svg.iui-informational,
 .iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon.iui-informational{
   fill:#008ae0;

package/css/tree.css

@@ -70,6 +70,11 @@
   margin:0 6px;
   flex-shrink:0;
 }
+@media (forced-colors: active){
+  .iui-tree-node-content-icon{
+    fill:CanvasText;
+  }
+}
 .iui-tree-node-content-icon.iui-informational{
   fill:#008ae0;
   fill:var(--iui-icons-color-primary);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-css",
-  "version": "0.61.0",
+  "version": "0.63.1",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "src/index.scss",
@@ -29,33 +29,37 @@
   ],
   "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",
-    "build-docker": "node scripts/buildDocker.js"
+    "push-docker": "node scripts/pushDocker.js"
   }
 }

package/scss/code/codeblock.scss

@@ -28,6 +28,7 @@
 
   > .iui-codeblock-content {
     margin: 0;
+    display: grid;
     overflow-x: auto;
     overflow-y: auto;
     border-radius: 0 0 $iui-border-radius $iui-border-radius;

package/scss/color-picker/color-picker.scss

@@ -183,45 +183,49 @@ $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(var(--iui-color-foreground-body
 }
 
 @mixin iui-hue-slider {
-  .iui-slider-rail {
-    height: $iui-s;
-    forced-color-adjust: none;
-    @include themed {
-      background: linear-gradient(
-        to right,
-        $iui-color-system-red 0%,
-        $iui-color-system-yellow 17%,
-        rgb(0, 255, 0) 33%,
-        rgb(0, 255, 255) 50%,
-        $iui-color-system-blue 67%,
-        $iui-color-system-magenta 83%,
-        $iui-color-system-red 100%
-      );
+  .iui-slider-container {
+    .iui-slider-rail {
+      height: $iui-s;
+      forced-color-adjust: none;
+      @include themed {
+        background: linear-gradient(
+          to right,
+          $iui-color-system-red 0%,
+          $iui-color-system-yellow 17%,
+          rgb(0, 255, 0) 33%,
+          rgb(0, 255, 255) 50%,
+          $iui-color-system-blue 67%,
+          $iui-color-system-magenta 83%,
+          $iui-color-system-red 100%
+        );
+      }
     }
-  }
 
-  .iui-slider-thumb {
-    top: 7px;
+    .iui-slider-thumb {
+      top: 7px;
+    }
   }
 }
 
 @mixin iui-opacity-slider {
-  .iui-slider-rail {
-    height: $iui-s;
-    forced-color-adjust: none;
-    @include iui-transparent-background($size: $iui-s);
-
-    &::before {
-      display: block;
-      content: '';
-      width: 100%;
-      height: 100%;
-      background-image: linear-gradient(to right, transparent 0%, var(--iui-color-picker-selected-color) 100%);
+  .iui-slider-container {
+    .iui-slider-rail {
+      height: $iui-s;
+      forced-color-adjust: none;
+      @include iui-transparent-background($size: $iui-s);
+
+      &::before {
+        display: block;
+        content: '';
+        width: 100%;
+        height: 100%;
+        background-image: linear-gradient(to right, transparent 0%, var(--iui-color-picker-selected-color) 100%);
+      }
     }
-  }
 
-  .iui-slider-thumb {
-    top: 7px;
+    .iui-slider-thumb {
+      top: 7px;
+    }
   }
 }
 

package/scss/dialog/dialog.scss

@@ -137,18 +137,20 @@ $iui-dialog-width: 380px;
 }
 
 @mixin iui-dialog-title {
+  display: flex;
+  align-items: center;
   font-size: inherit;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: 1.5;
+  margin-right: auto;
 }
 
 @mixin iui-dialog-title-bar {
   display: flex;
   align-items: center;
   margin-bottom: $iui-baseline;
-  justify-content: space-between;
   box-sizing: border-box;
   font-size: $iui-font-size-subheading;
 }

package/scss/footer/classes.scss

@@ -5,3 +5,19 @@
 .iui-legal-footer {
   @include iui-legal-footer;
 }
+
+.iui-legal-footer-list {
+  @include iui-legal-footer-list;
+}
+
+.iui-legal-footer-item {
+  @include iui-legal-footer-item;
+}
+
+.iui-legal-footer-separator {
+  @include iui-legal-footer-separator;
+}
+
+.iui-legal-footer-developer {
+  @include iui-legal-footer-developer;
+}

package/scss/footer/footer.scss

@@ -10,56 +10,53 @@
   width: 100%;
   padding: $iui-baseline 0;
   font-size: $iui-font-size-small;
+}
 
-  > ul {
-    list-style-type: none;
-    margin: 0 auto;
-    padding: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
-
-    > li {
-      display: inline-block;
-      user-select: none;
-      white-space: nowrap;
-      word-break: keep-all;
-
-      @include themed {
-        color: t(iui-text-color-muted);
-      }
+@mixin iui-legal-footer-list {
+  list-style-type: none;
+  margin: 0 auto;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}
 
-      .iui-separator {
-        margin: 0 $iui-s;
-        width: 1px;
-        height: $iui-baseline;
-        display: inline-table;
+@mixin iui-legal-footer-item {
+  display: flex;
+  align-items: center;
+  user-select: none;
+  white-space: nowrap;
+  word-break: keep-all;
 
-        @include themed {
-          background-color: t(iui-text-color-muted);
-        }
-      }
+  @include themed {
+    color: t(iui-text-color-muted);
+  }
 
-      > a {
-        @include iui-anchor;
+  > a {
+    @include iui-anchor;
 
-        &,
-        &:hover {
-          @include themed {
-            color: t(iui-text-color-muted);
-          }
-        }
+    &,
+    &:hover {
+      @include themed {
+        color: t(iui-text-color-muted);
       }
     }
   }
+}
 
-  > .iui-legal-footer-developer {
-    display: block;
-    user-select: all;
+@mixin iui-legal-footer-separator {
+  margin: 0 $iui-s;
+  width: 1px;
+  height: $iui-baseline;
 
-    @include themed {
-      color: t(iui-text-color-muted);
-    }
+  @include themed {
+    background-color: t(iui-text-color-muted);
+  }
+}
+
+@mixin iui-legal-footer-developer {
+  @include themed {
+    color: t(iui-text-color-muted);
   }
 }

package/scss/icon/mixins.scss

@@ -48,6 +48,9 @@
   @include themed {
     fill: t(iui-icons-color);
   }
+  @media (forced-colors: active) {
+    fill: CanvasText;
+  }
 
   &.iui-informational {
     @include themed {

package/scss/slider/classes.scss

@@ -2,6 +2,14 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import './index';
 
+.iui-slider-horizontal {
+  @include iui-slider-horizontal;
+}
+
+.iui-slider-vertical {
+  @include iui-slider-vertical;
+}
+
 .iui-slider-component-container {
   @include iui-slider-component-container;
 }
@@ -25,3 +33,8 @@
 .iui-slider-track {
   @include iui-slider-track;
 }
+
+.iui-slider-min,
+.iui-slider-max {
+  @include iui-slider-endpoints;
+}