@itwin/itwinui-css 0.50.1 → 0.53.0

package/css/wizard.css

@@ -6,58 +6,65 @@
   margin:0;
   padding:0;
   border:none;
-  vertical-align:baseline; }
-  .iui-wizard > ol{
-    margin:0;
-    padding:0;
-    border:none;
-    vertical-align:baseline;
-    display:flex;
-    justify-content:space-around;
-    align-items:flex-start;
-    width:100%;
-    margin-bottom:5.5px; }
-  .iui-wizard.iui-long .iui-wizard-steps-label{
-    display:block;
-    font-size:18px;
-    text-align:center; }
-  .iui-wizard.iui-long .iui-steps-count{
-    -webkit-user-select:none;
-       -moz-user-select:none;
-        -ms-user-select:none;
-            user-select:none;
-    margin-right:8px;
-    color:rgba(0, 0, 0, 0.4);
-    color:var(--iui-text-color-muted); }
-  .iui-wizard.iui-workflow > ol{
-    align-items:center; }
-  .iui-wizard.iui-workflow .iui-wizard-step .iui-wizard-circle{
-    padding-left:16px;
-    padding-right:16px;
-    height:100%;
-    width:auto;
-    border-radius:0;
-    font-weight:400;
-    text-align:center;
-    background-color:#53A21A;
-    border-color:#53A21A;
-    color:#FFF;
-    background-color:var(--iui-color-background-positive);
-    border-color:var(--iui-color-background-positive);
-    color:var(--iui-color-foreground-accessory); }
-  .iui-wizard.iui-workflow .iui-wizard-step:first-of-type .iui-wizard-circle,
-  .iui-wizard.iui-workflow .iui-wizard-step:last-of-type .iui-wizard-circle{
-    border-radius:12px;
-    background-color:#FFF;
-    border-color:#53A21A;
-    color:#53A21A;
-    background-color:var(--iui-color-background-1);
-    border-color:var(--iui-color-foreground-positive);
-    color:var(--iui-color-foreground-positive); }
-  .iui-wizard.iui-workflow .iui-wizard-track-content::before,
-  .iui-wizard.iui-workflow .iui-wizard-track-content::after{
-    background-color:#53A21A;
-    background-color:var(--iui-color-foreground-positive); }
+  vertical-align:baseline;
+}
+.iui-wizard > ol{
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  display:flex;
+  justify-content:space-around;
+  align-items:flex-start;
+  width:100%;
+  margin-bottom:5.5px;
+}
+.iui-wizard.iui-long .iui-wizard-steps-label{
+  display:block;
+  font-size:18px;
+  text-align:center;
+}
+.iui-wizard.iui-long .iui-steps-count{
+  -webkit-user-select:none;
+     -moz-user-select:none;
+      -ms-user-select:none;
+          user-select:none;
+  margin-right:8px;
+  color:rgba(0, 0, 0, 0.4);
+  color:var(--iui-text-color-muted);
+}
+.iui-wizard.iui-workflow > ol{
+  align-items:center;
+}
+.iui-wizard.iui-workflow .iui-wizard-step .iui-wizard-circle{
+  padding-left:16px;
+  padding-right:16px;
+  height:100%;
+  width:auto;
+  border-radius:0;
+  font-weight:400;
+  text-align:center;
+  background-color:#53a21a;
+  border-color:#53a21a;
+  color:white;
+  background-color:var(--iui-color-background-positive);
+  border-color:var(--iui-color-background-positive);
+  color:var(--iui-color-foreground-accessory);
+}
+.iui-wizard.iui-workflow .iui-wizard-step:first-of-type .iui-wizard-circle, .iui-wizard.iui-workflow .iui-wizard-step:last-of-type .iui-wizard-circle{
+  border-radius:12px;
+  background-color:white;
+  border-color:#53a21a;
+  color:#53a21a;
+  background-color:var(--iui-color-background-1);
+  border-color:var(--iui-color-foreground-positive);
+  color:var(--iui-color-foreground-positive);
+}
+.iui-wizard.iui-workflow .iui-wizard-track-content::before,
+.iui-wizard.iui-workflow .iui-wizard-track-content::after{
+  background-color:#53a21a;
+  background-color:var(--iui-color-foreground-positive);
+}
 
 .iui-wizard-step{
   flex:1;
@@ -71,95 +78,113 @@
   font-size:12px;
   font-weight:400;
   line-height:22px;
-  color:#53A21A;
-  color:var(--iui-color-background-positive); }
-  .iui-wizard-step .iui-wizard-circle{
-    align-items:center;
-    border-radius:50%;
-    display:flex;
-    width:24px;
-    height:24px;
-    justify-content:center;
-    overflow-wrap:break-word;
-    -webkit-user-select:none;
-       -moz-user-select:none;
-        -ms-user-select:none;
-            user-select:none;
-    transition:background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out;
-    border:1px solid #53A21A;
-    background-color:#FFF;
-    color:#53A21A;
-    border:1px solid var(--iui-color-foreground-positive);
-    background-color:var(--iui-color-background-1);
-    color:var(--iui-color-foreground-positive); }
-  .iui-wizard-step.iui-current{
-    font-weight:600; }
-    .iui-wizard-step.iui-current .iui-wizard-step-name{
-      color:#53A21A;
-      color:var(--iui-color-foreground-positive); }
-    .iui-wizard-step.iui-current .iui-wizard-circle{
-      color:#FFF;
-      border-color:#53A21A;
-      background-color:#53A21A;
-      color:var(--iui-color-foreground-accessory);
-      border-color:var(--iui-color-background-positive);
-      background-color:var(--iui-color-background-positive); }
-    .iui-wizard-step.iui-current .iui-wizard-track-content::after{
-      background-color:#C7CCD1;
-      background-color:var(--iui-color-background-5); }
-  .iui-wizard-step.iui-current ~ .iui-wizard-step .iui-wizard-circle{
-    border:1px solid #C7CCD1;
-    background-color:#FFF;
-    color:rgba(0, 0, 0, 0.4);
-    border:1px solid var(--iui-color-background-5);
-    background-color:var(--iui-color-background-1);
-    color:var(--iui-text-color-muted); }
-  .iui-wizard-step.iui-current ~ .iui-wizard-step .iui-wizard-step-name{
-    color:rgba(0, 0, 0, 0.4);
-    color:var(--iui-text-color-muted); }
-  .iui-wizard-step.iui-current ~ .iui-wizard-step .iui-wizard-track-content::before,
-  .iui-wizard-step.iui-current ~ .iui-wizard-step:not(:last-of-type) .iui-wizard-track-content::after{
-    background-color:#C7CCD1;
-    background-color:var(--iui-color-background-5); }
+  color:#53a21a;
+  color:var(--iui-color-background-positive);
+}
+.iui-wizard-step .iui-wizard-circle{
+  align-items:center;
+  border-radius:50%;
+  display:flex;
+  width:24px;
+  height:24px;
+  justify-content:center;
+  overflow-wrap:break-word;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+      -ms-user-select:none;
+          user-select:none;
+  transition:background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out;
+  border:1px solid #53a21a;
+  background-color:white;
+  color:#53a21a;
+  border:1px solid var(--iui-color-foreground-positive);
+  background-color:var(--iui-color-background-1);
+  color:var(--iui-color-foreground-positive);
+}
+.iui-wizard-step.iui-current{
+  font-weight:600;
+}
+.iui-wizard-step.iui-current .iui-wizard-step-name{
+  color:#53a21a;
+  color:var(--iui-color-foreground-positive);
+}
+.iui-wizard-step.iui-current .iui-wizard-circle{
+  color:white;
+  border-color:#53a21a;
+  background-color:#53a21a;
+  color:var(--iui-color-foreground-accessory);
+  border-color:var(--iui-color-background-positive);
+  background-color:var(--iui-color-background-positive);
+}
+.iui-wizard-step.iui-current .iui-wizard-track-content::after{
+  background-color:#c7ccd1;
+  background-color:var(--iui-color-background-5);
+}
+.iui-wizard-step.iui-current ~ .iui-wizard-step .iui-wizard-circle{
+  border:1px solid #c7ccd1;
+  background-color:white;
+  color:rgba(0, 0, 0, 0.4);
+  border:1px solid var(--iui-color-background-border);
+  background-color:var(--iui-color-background-1);
+  color:var(--iui-text-color-muted);
+}
+.iui-wizard-step.iui-current ~ .iui-wizard-step .iui-wizard-step-name{
+  color:rgba(0, 0, 0, 0.4);
+  color:var(--iui-text-color-muted);
+}
+.iui-wizard-step.iui-current ~ .iui-wizard-step .iui-wizard-track-content::before, .iui-wizard-step.iui-current ~ .iui-wizard-step:not(:last-of-type) .iui-wizard-track-content::after{
+  background-color:#c7ccd1;
+  background-color:var(--iui-color-background-5);
+}
+.iui-wizard-step.iui-clickable .iui-wizard-circle{
+  cursor:pointer;
+}
+@media (prefers-reduced-motion: no-preference){
   .iui-wizard-step.iui-clickable .iui-wizard-circle{
-    cursor:pointer; }
-    @media (prefers-reduced-motion: no-preference){
-      .iui-wizard-step.iui-clickable .iui-wizard-circle{
-        transition:background-color 0.2s ease-out; } }
-    .iui-wizard-step.iui-clickable .iui-wizard-circle:hover{
-      color:#FFF;
-      border:1px solid #53A21A;
-      background-color:#53A21A;
-      color:var(--iui-color-foreground-accessory);
-      border:1px solid var(--iui-color-background-positive);
-      background-color:var(--iui-color-background-positive); }
-  .iui-wizard-step.iui-clickable:focus{
-    outline:0; }
-    .iui-wizard-step.iui-clickable:focus .iui-wizard-circle{
-      outline:2px solid #53A21A;
-      outline:2px solid var(--iui-color-foreground-positive);
-      outline-offset:-1px; }
-  .iui-wizard-step.iui-clickable:focus:not(:focus-visible) .iui-wizard-circle{
-    outline:none; }
-  .iui-wizard-step:first-of-type .iui-wizard-track-content::before,
-  .iui-wizard-step:last-of-type .iui-wizard-track-content::after{
-    background-color:transparent; }
+    transition:background-color 0.2s ease-out;
+  }
+}
+.iui-wizard-step.iui-clickable .iui-wizard-circle:hover{
+  color:white;
+  border:1px solid #53a21a;
+  background-color:#53a21a;
+  color:var(--iui-color-foreground-accessory);
+  border:1px solid var(--iui-color-background-positive);
+  background-color:var(--iui-color-background-positive);
+}
+.iui-wizard-step.iui-clickable:focus{
+  outline:0;
+}
+.iui-wizard-step.iui-clickable:focus .iui-wizard-circle{
+  outline:2px solid #53a21a;
+  outline:2px solid var(--iui-color-foreground-positive);
+  outline-offset:-1px;
+}
+.iui-wizard-step.iui-clickable:focus:not(:focus-visible) .iui-wizard-circle{
+  outline:none;
+}
+.iui-wizard-step:first-of-type .iui-wizard-track-content::before, .iui-wizard-step:last-of-type .iui-wizard-track-content::after{
+  background-color:transparent;
+}
 
 .iui-wizard-track-content{
   display:flex;
   align-items:center;
-  width:100%; }
-  .iui-wizard-track-content::before, .iui-wizard-track-content::after{
-    content:'';
-    height:2px;
-    flex:1 2 auto;
-    background-color:#53A21A;
-    background-color:var(--iui-color-foreground-positive); }
+  width:100%;
+}
+.iui-wizard-track-content::before, .iui-wizard-track-content::after{
+  content:"";
+  height:2px;
+  flex:1 2 auto;
+  background-color:#53a21a;
+  background-color:var(--iui-color-foreground-positive);
+}
 
 .iui-wizard-step-name{
   text-align:center;
   -webkit-user-select:all;
      -moz-user-select:all;
           user-select:all;
-  color:#53A21A;
-  color:var(--iui-color-foreground-positive); }
+  color:#53a21a;
+  color:var(--iui-color-foreground-positive);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-css",
-  "version": "0.50.1",
+  "version": "0.53.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "src/index.scss",
@@ -38,16 +38,15 @@
     ]
   },
   "scripts": {
-    "build": "yarn clean && yarn build:scss && yarn build:css && yarn build:html && yarn copy-files",
+    "build": "yarn clean && yarn build:scss && yarn build:css && yarn lint:copyright --fix lib/css/* && yarn build:html && yarn copy-files",
     "build:scss": "cpx \"./src/**/*.scss\" ./lib/scss",
-    "build:css": "node ./scripts/generateCss.js src lib/css && yarn postcss-processing && yarn lint:copyright --fix lib/css/*",
+    "build:css": "node ./scripts/generateCss.js src lib/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:watch:scss": "chokidar \"src/**/*\" -c \"yarn build:scss && yarn build:css\"",
     "build:watch:html": "chokidar \"backstop/tests/**/*\" -c \"yarn build:html\"",
     "copy-files": "cpx package.json lib && cpx README.md lib",
     "createComponent": "node ./scripts/createComponent.js",
-    "postcss-processing": "postcss lib/css -d lib/css --no-map && yarn print \"Finished post-processing CSS.\"",
     "clean": "rimraf ./lib ./backstop/results/bitmaps_test",
     "lint": "stylelint \"src/**/*.scss\"",
     "lint:copyright": "node scripts/copyrightLinter.js",
@@ -68,12 +67,12 @@
     "html-minifier": "^4.0.0",
     "husky": "=4",
     "lint-staged": "^11.2.6",
-    "node-sass": "^7.0.0",
     "postcss": "^8.4.5",
-    "postcss-cli": "^8.3.1",
     "postcss-discard-comments": "^5.0.1",
+    "postcss-scss": "^4.0.3",
     "prettier": "^2.4.1",
     "rimraf": "^3.0.2",
+    "sass-embedded": "^1.49.9",
     "stylelint": "^14.2.0",
     "stylelint-config-sass-guidelines": "^9.0.1"
   },

package/scss/alert/alert.scss

@@ -79,11 +79,7 @@
   }
 
   #{$rootSelector}-message {
-    &::selection {
-      @include themed {
-        background-color: rgba(t(iui-color-foreground-#{$statusColor}-rgb), t(iui-opacity-4));
-      }
-    }
+    @include iui-text-selection($statusColor);
   }
 
   #{$rootSelector}-link {

package/scss/carousel/carousel.scss

@@ -16,18 +16,8 @@
   list-style: none;
   margin: 0;
   padding: 0;
-  overflow-x: auto;
-  overflow-x: overlay;
   scroll-snap-type: x mandatory;
-  @media (prefers-reduced-motion: no-preference) {
-    scroll-behavior: smooth;
-  }
-
-  // hide scrollbar
-  &::-webkit-scrollbar {
-    display: none;
-  }
-  scrollbar-width: none;
+  @include hide-scrollbar;
 
   &-item {
     width: 100%;
@@ -46,7 +36,6 @@
     border-top: $iui-xxs solid t(iui-color-background-4);
   }
 
-  &-dots,
   &-left,
   &-right {
     display: flex;
@@ -64,11 +53,11 @@
   &-dots {
     @include iui-reset;
     @include iui-focus;
+    flex: 2;
+    max-width: $iui-xxl * 4;
     border-radius: $iui-border-radius;
     white-space: nowrap;
-    overflow: hidden;
-    justify-content: center;
-    list-style: none;
+    @include hide-scrollbar;
   }
 
   &-dot {
@@ -83,22 +72,17 @@
       }
     }
 
-    &.iui-invisible {
-      @include visually-hidden;
-    }
-
     &::after {
       content: '';
       display: block;
       width: $iui-icons-small;
       height: $iui-icons-small;
       border-radius: 50%;
-      transition: background-color $iui-speed-fast ease;
-      @media (prefers-reduced-motion: no-preference) {
-        transition: background-color $iui-speed-fast $iui-speed-fast ease, transform $iui-speed ease;
-      }
+      box-sizing: border-box;
+      border: 1px solid transparent;
       @include themed {
         background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
+        box-shadow: inset 0 0 0 0 t(iui-color-background-1);
       }
     }
 
@@ -110,13 +94,15 @@
       transform: scale(0.75);
     }
 
-    &.iui-invisible::after {
-      transform: scale(0);
-    }
-
     &.iui-active::after {
       @include themed {
         background-color: t(iui-color-foreground-primary);
+        border-color: t(iui-color-foreground-primary);
+        box-shadow: inset 0 0 0 1px t(iui-color-background-1);
+      }
+
+      @media (forced-colors: active) {
+        border-width: $iui-icons-small * 0.5;
       }
     }
   }
@@ -125,3 +111,14 @@
     justify-content: flex-end;
   }
 }
+
+@mixin hide-scrollbar {
+  overflow-x: auto;
+  overflow-x: overlay;
+
+  // hide scrollbar
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  scrollbar-width: none;
+}

package/scss/classes.scss

@@ -42,3 +42,4 @@
 @import './user-icon/classes';
 @import './wizard/classes';
 @import './skip-to-content/classes';
+@import './surface/classes';

package/scss/code/codeblock.scss

@@ -5,7 +5,7 @@
 
 @mixin iui-codeblock {
   @include iui-reset;
-  margin: round($iui-baseline/2) 0;
+  margin: round($iui-baseline * 0.5) 0;
 
   > .iui-title-bar {
     display: flex;

package/scss/color-picker/color-picker.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 '../menu/index';
+@import '../surface/index';
 @import '../button/borderless';
 
 $iui-color-picker-content-width: ($iui-l * 9) + ($iui-s * 8); // (9 swatches per row) + (gaps)
@@ -14,7 +14,7 @@ $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(var(--iui-color-foreground-body
 @mixin iui-color-picker {
   --iui-color-picker-selected-color: initial;
 
-  @include iui-dropdown;
+  @include iui-surface;
   box-sizing: border-box;
   border-radius: $iui-border-radius;
   display: inline-flex;

package/scss/date-picker/classes.scss

@@ -25,3 +25,23 @@
 .iui-calendar-day {
   @include iui-calendar-day;
 }
+
+.iui-calendar-day-selected {
+  @include iui-calendar-day-selected;
+}
+
+.iui-calendar-day-outside-month {
+  @include iui-calendar-day-outside-month;
+}
+
+.iui-calendar-day-range-start {
+  @include iui-calendar-day-range-start;
+}
+
+.iui-calendar-day-range-end {
+  @include iui-calendar-day-range-end;
+}
+
+.iui-calendar-day-range {
+  @include iui-calendar-day-range;
+}