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

package/css/toast.css

@@ -14,14 +14,14 @@
 @media screen and (max-width: 400px){
   .iui-toast-wrapper{
     width:calc(100vw - 36px);
-    margin-top:11px;
+    margin-top:12px;
   }
 }
 @media screen and (min-width: 401px){
   .iui-toast-wrapper{
     min-width:400px;
     max-width:640px;
-    margin:22px 0;
+    margin:24px 0;
   }
 }
 @media (prefers-reduced-motion: no-preference){
@@ -54,7 +54,7 @@
   right:0;
 }
 .iui-toast-wrapper.iui-placement-bottom .iui-toast{
-  margin:11px 16px 0 16px;
+  margin:12px 16px 0 16px;
 }
 .iui-toast-wrapper.iui-placement-bottom-start{
   bottom:0;
@@ -62,7 +62,7 @@
   align-items:flex-start;
 }
 .iui-toast-wrapper.iui-placement-bottom-start .iui-toast{
-  margin:11px 16px 0 16px;
+  margin:12px 16px 0 16px;
 }
 .iui-toast-wrapper.iui-placement-bottom-end{
   bottom:0;
@@ -70,7 +70,7 @@
   align-items:flex-end;
 }
 .iui-toast-wrapper.iui-placement-bottom-end .iui-toast{
-  margin:11px 16px 0 16px;
+  margin:12px 16px 0 16px;
 }
 
 .iui-toast{
@@ -81,8 +81,8 @@
   display:inline-flex;
   align-items:center;
   pointer-events:all;
-  margin:0 16px 11px 16px;
-  min-height:44px;
+  margin:0 16px 12px 16px;
+  min-height:48px;
   border-radius:4px;
   background-color:var(--iui-color-background-1);
   border:1px solid var(--iui-color-foreground-body);
@@ -98,18 +98,20 @@
   background-color:var(--iui-color-background-5);
 }
 .iui-toast > .iui-status-area > .iui-icon{
-  height:16px;
+  display:flex;
+  flex-shrink:0;
   width:16px;
+  height:16px;
   fill:var(--iui-color-foreground-accessory);
 }
 .iui-toast > .iui-message{
   flex-grow:1;
   font-size:14px;
-  margin-top:5.5px;
-  margin-bottom:5.5px;
+  margin-top:6px;
+  margin-bottom:6px;
   margin-right:24px;
   margin-left:16px;
-  line-height:22px;
+  line-height:24px;
   font-weight:400;
   font-style:normal;
   color:var(--iui-text-color);

package/css/toggle-switch.css

@@ -51,7 +51,7 @@
   -webkit-appearance:none;
      -moz-appearance:none;
           appearance:none;
-  width:44px;
+  width:48px;
   border-radius:9999px;
   transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
   background-color:var(--iui-color-background-1);
@@ -76,7 +76,7 @@
   content:"";
   height:16px;
   width:16px;
-  margin:3px;
+  margin:4px;
   aspect-ratio:1/1;
   border-radius:50%;
   transition:background-color 0.2s ease-out, opacity 0.2s ease-out;
@@ -129,7 +129,7 @@
   }
 }
 .iui-toggle-switch:checked::after{
-  transform:translateX(19px);
+  transform:translateX(20px);
   background-color:var(--iui-color-foreground-accessory);
   opacity:var(--iui-opacity-2);
 }
@@ -175,7 +175,7 @@
 }
 .iui-toggle-switch:disabled ~ .iui-toggle-switch-icon{
   opacity:0;
-  fill:var(--iui-icons-color-actionable);
+  fill:var(--iui-icon-color-actionable);
 }
 @media (forced-colors: active){
   .iui-toggle-switch:disabled:checked{
@@ -202,7 +202,7 @@
   width:16px;
   height:16px;
   padding:2px;
-  margin:4px;
+  margin:5px;
   display:flex;
   z-index:1;
   transition:opacity 0.2s ease-out;

package/css/tree.css

@@ -55,33 +55,26 @@
 .iui-tree-node-content{
   display:flex;
   align-items:center;
-  min-height:33px;
-  margin-left:calc(28px * (var(--level, 0)));
+  min-height:36px;
+  margin-left:calc(30px * (var(--level, 0)));
   overflow:hidden;
   padding-left:2px;
 }
 .iui-tree-node-content-icon{
-  fill:var(--iui-icons-color);
-  display:inline-flex;
+  display:flex;
+  flex-shrink:0;
   width:16px;
   height:16px;
-  margin:0 6px;
-  flex-shrink:0;
-}
-.iui-tree-node-content-icon.iui-informational{
-  fill:var(--iui-icons-color-primary);
+  fill:var(--iui-icon-color);
+  margin:0 7px;
 }
-.iui-tree-node-content-icon.iui-positive{
-  fill:var(--iui-icons-color-positive);
-}
-.iui-tree-node-content-icon.iui-warning{
-  fill:var(--iui-icons-color-warning);
-}
-.iui-tree-node-content-icon.iui-negative{
-  fill:var(--iui-icons-color-negative);
+@media (forced-colors: active){
+  .iui-tree-node-content-icon{
+    fill:CanvasText;
+  }
 }
 .iui-tree-node-content-icon:first-child{
-  margin-left:34px;
+  margin-left:37px;
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-tree-node-content-expander-icon{
@@ -93,10 +86,10 @@
 }
 .iui-tree-node-content-label{
   min-width:0;
-  padding-left:6px;
+  padding-left:7px;
 }
 .iui-tree-node-content-label:first-child{
-  margin-left:28px;
+  margin-left:30px;
 }
 .iui-tree-node-content-title, .iui-tree-node-content-caption{
   white-space:nowrap;

package/css/utils.css

@@ -2,6 +2,73 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+[data-iui-icon-size=s]{
+  display:flex;
+  flex-shrink:0;
+  width:12px;
+  height:12px;
+}
+
+[data-iui-icon-size=m]{
+  display:flex;
+  flex-shrink:0;
+  width:16px;
+  height:16px;
+}
+
+[data-iui-icon-size=l]{
+  display:flex;
+  flex-shrink:0;
+  width:24px;
+  height:24px;
+}
+
+[data-iui-icon-size=xl]{
+  display:flex;
+  flex-shrink:0;
+  width:32px;
+  height:32px;
+}
+
+[data-iui-icon-size="2xl"]{
+  display:flex;
+  flex-shrink:0;
+  width:48px;
+  height:48px;
+}
+
+[data-iui-icon-size="3xl"]{
+  display:flex;
+  flex-shrink:0;
+  width:64px;
+  height:64px;
+}
+
+[data-iui-icon-color=default]{
+  fill:var(--iui-icon-color);
+}
+@media (forced-colors: active){
+  [data-iui-icon-color=default]{
+    fill:CanvasText;
+  }
+}
+
+[data-iui-icon-color=informational]{
+  fill:var(--iui-icon-color-primary);
+}
+
+[data-iui-icon-color=positive]{
+  fill:var(--iui-icon-color-positive);
+}
+
+[data-iui-icon-color=warning]{
+  fill:var(--iui-icon-color-warning);
+}
+
+[data-iui-icon-color=negative]{
+  fill:var(--iui-icon-color-negative);
+}
+
 .iui-input-container{
   margin:0;
   padding:0;
@@ -11,23 +78,20 @@
   grid-template:"label label" "inputs inputs"/auto 1fr;
   cursor:default;
 }
-.iui-input-container.iui-inline-icon > .iui-input,
-.iui-input-container.iui-inline-icon > .iui-textarea{
+.iui-input-container.iui-inline-icon > .iui-input{
   padding-right:40px;
 }
-.iui-input-container.iui-inline-icon > .iui-input:last-child,
-.iui-input-container.iui-inline-icon > .iui-textarea:last-child{
+.iui-input-container.iui-inline-icon > .iui-input:last-child{
   padding-right:12px;
 }
 .iui-input-container.iui-with-message{
   grid-template:"label label" "inputs inputs" "icon message"/auto 1fr;
 }
 .iui-input-container.iui-with-message:not(.iui-inline-icon) > .iui-input-icon{
-  margin-top:3px;
+  margin-top:4px;
 }
 .iui-input-container .iui-input,
 .iui-input-container .iui-input-with-icon,
-.iui-input-container .iui-textarea,
 .iui-input-container .iui-input-group{
   grid-area:inputs;
 }
@@ -46,7 +110,7 @@ label.iui-input-container.iui-disabled{
 }
 .iui-input-container .iui-checkbox-wrapper,
 .iui-input-container .iui-radio-wrapper{
-  min-height:22px;
+  min-height:24px;
 }
 .iui-input-container.iui-inline-label{
   grid-template:"label inputs icon"/auto 1fr auto;
@@ -63,7 +127,7 @@ label.iui-input-container.iui-disabled{
 }
 .iui-input-container > .iui-label{
   font-weight:600;
-  margin-bottom:3px;
+  margin-bottom:4px;
   grid-area:label;
   align-self:center;
 }
@@ -74,11 +138,17 @@ label.iui-input-container.iui-disabled{
 }
 .iui-input-container .iui-input-icon{
   display:flex;
-  grid-area:icon;
+  flex-shrink:0;
   width:16px;
   height:16px;
+  fill:var(--iui-icon-color);
+  grid-area:icon;
   align-self:center;
-  fill:var(--iui-icons-color);
+}
+@media (forced-colors: active){
+  .iui-input-container .iui-input-icon{
+    fill:CanvasText;
+  }
 }
 .iui-input-container .iui-input-icon:not(:last-child){
   margin-right:4px;
@@ -86,7 +156,7 @@ label.iui-input-container.iui-disabled{
 .iui-input-container .iui-message{
   font-size:12px;
   grid-area:message;
-  margin-top:3px;
+  margin-top:4px;
   color:var(--iui-text-color-muted);
 }
 .iui-input-container .iui-message a{
@@ -102,6 +172,8 @@ label.iui-input-container.iui-disabled{
   position:relative;
 }
 .iui-input-container.iui-inline-icon > .iui-input-icon svg{
+  display:flex;
+  flex-shrink:0;
   width:16px;
   height:16px;
 }
@@ -134,7 +206,7 @@ label.iui-input-container.iui-disabled{
   transition:background 0s;
 }
 .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable svg{
-  fill:var(--iui-icons-color-actionable);
+  fill:var(--iui-icon-color-actionable);
   transition:transform 0.2s ease-out;
 }
 .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable.iui-open svg{
@@ -144,7 +216,7 @@ label.iui-input-container.iui-disabled{
   cursor:not-allowed;
 }
 .iui-input-container.iui-inline-icon > .iui-input-icon.iui-disabled svg{
-  fill:var(--iui-icons-color-actionable-disabled);
+  fill:var(--iui-icon-color-actionable-disabled);
 }
 .iui-input-container.iui-inline-label > .iui-label{
   margin:0 16px 0 0;
@@ -173,21 +245,17 @@ label.iui-input-container.iui-disabled{
   text-decoration:none;
   color:var(--iui-color-foreground-positive-overlay);
 }
-.iui-input-container.iui-positive .iui-input,
-.iui-input-container.iui-positive .iui-textarea{
+.iui-input-container.iui-positive .iui-input{
   padding-bottom:6px;
   border-bottom:2px solid var(--iui-color-foreground-positive);
 }
-.iui-input-container.iui-positive .iui-input.iui-small,
-.iui-input-container.iui-positive .iui-textarea.iui-small{
-  padding-bottom:0.5px;
+.iui-input-container.iui-positive .iui-input.iui-small{
+  padding-bottom:0px;
 }
-.iui-input-container.iui-positive .iui-input.iui-large,
-.iui-input-container.iui-positive .iui-textarea.iui-large{
-  padding-bottom:11.5px;
+.iui-input-container.iui-positive .iui-input.iui-large{
+  padding-bottom:12px;
 }
-.iui-input-container.iui-positive .iui-input:focus,
-.iui-input-container.iui-positive .iui-textarea:focus{
+.iui-input-container.iui-positive .iui-input:focus{
   border-bottom:2px solid var(--iui-color-foreground-positive);
   outline:2px solid var(--iui-color-foreground-positive);
   outline-offset:-2px;
@@ -229,21 +297,17 @@ label.iui-input-container.iui-disabled{
   text-decoration:none;
   color:var(--iui-color-foreground-negative-overlay);
 }
-.iui-input-container.iui-negative .iui-input,
-.iui-input-container.iui-negative .iui-textarea{
+.iui-input-container.iui-negative .iui-input{
   padding-bottom:6px;
   border-bottom:2px solid var(--iui-color-foreground-negative);
 }
-.iui-input-container.iui-negative .iui-input.iui-small,
-.iui-input-container.iui-negative .iui-textarea.iui-small{
-  padding-bottom:0.5px;
+.iui-input-container.iui-negative .iui-input.iui-small{
+  padding-bottom:0px;
 }
-.iui-input-container.iui-negative .iui-input.iui-large,
-.iui-input-container.iui-negative .iui-textarea.iui-large{
-  padding-bottom:11.5px;
+.iui-input-container.iui-negative .iui-input.iui-large{
+  padding-bottom:12px;
 }
-.iui-input-container.iui-negative .iui-input:focus,
-.iui-input-container.iui-negative .iui-textarea:focus{
+.iui-input-container.iui-negative .iui-input:focus{
   border-bottom:2px solid var(--iui-color-foreground-negative);
   outline:2px solid var(--iui-color-foreground-negative);
   outline-offset:-2px;
@@ -285,21 +349,17 @@ label.iui-input-container.iui-disabled{
   text-decoration:none;
   color:var(--iui-color-foreground-warning-overlay);
 }
-.iui-input-container.iui-warning .iui-input,
-.iui-input-container.iui-warning .iui-textarea{
+.iui-input-container.iui-warning .iui-input{
   padding-bottom:6px;
   border-bottom:2px solid var(--iui-color-foreground-warning);
 }
-.iui-input-container.iui-warning .iui-input.iui-small,
-.iui-input-container.iui-warning .iui-textarea.iui-small{
-  padding-bottom:0.5px;
+.iui-input-container.iui-warning .iui-input.iui-small{
+  padding-bottom:0px;
 }
-.iui-input-container.iui-warning .iui-input.iui-large,
-.iui-input-container.iui-warning .iui-textarea.iui-large{
-  padding-bottom:11.5px;
+.iui-input-container.iui-warning .iui-input.iui-large{
+  padding-bottom:12px;
 }
-.iui-input-container.iui-warning .iui-input:focus,
-.iui-input-container.iui-warning .iui-textarea:focus{
+.iui-input-container.iui-warning .iui-input:focus{
   border-bottom:2px solid var(--iui-color-foreground-warning);
   outline:2px solid var(--iui-color-foreground-warning);
   outline-offset:-2px;
@@ -323,7 +383,7 @@ label.iui-input-container.iui-disabled{
 
 .iui-input-label{
   font-weight:600;
-  margin-bottom:3px;
+  margin-bottom:4px;
   cursor:default;
   display:block;
 }

package/css/workflow-diagram.css

@@ -30,7 +30,7 @@
   vertical-align:baseline;
   font-size:12px;
   font-weight:400;
-  line-height:22px;
+  line-height:24px;
   color:var(--_iui-workflow-diagram-circle-text-color);
 }
 .iui-workflow-diagram-step:first-of-type, .iui-workflow-diagram-step:last-of-type{

package/package.json

@@ -1,21 +1,18 @@
 {
   "name": "@itwin/itwinui-css",
-  "version": "1.0.0-dev.0",
+  "version": "1.0.0-dev.1",
   "author": "Bentley Systems",
   "license": "MIT",
-  "main": "src/index.scss",
+  "main": "css/all.css",
   "files": [
     "css",
-    "scss",
     "CHANGELOG.md",
     "LICENSE.md"
   ],
-  "description": "CSS (Sass/SCSS) library for building beautiful and well working web UI components within Bentley Systems & iTwin.js applications.",
+  "description": "CSS library for building beautiful and well working web UI components within Bentley Systems & iTwin.js applications.",
   "homepage": "https://github.com/iTwin/iTwinUI",
   "keywords": [
     "css",
-    "sass",
-    "scss",
     "html",
     "react",
     "ui",
@@ -36,7 +33,8 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.5",
     "postcss-discard-comments": "^5.0.1",
-    "postcss-scss": "^4.0.3",
+    "postcss-scss": "^4.0.4",
+    "sass": "^1.54.4",
     "sass-embedded": "^1.49.9",
     "serve": "^14.0.1",
     "stylelint": "^14.2.0",
@@ -44,11 +42,10 @@
     "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": "yarn clean && yarn build:css && node ../shared/copyrightLinter.js --fix css/* && yarn build:html",
     "build:css": "node ./scripts/generateCss.js src css",
     "build:html": "vite build backstop/tests --config vite.config.ts",
-    "build:watch:scss": "chokidar \"src/**/*\" -c \"yarn build:scss && yarn build:css\"",
+    "build:watch:scss": "sass --watch src/classes.scss css/all.css",
     "createComponent": "node ./scripts/createComponent.js",
     "clean": "rimraf ./css ./scss ./backstop/results/bitmaps_test",
     "dev": "concurrently -n scss,html -k \"yarn build:watch:scss\" \"yarn vite backstop/tests --config vite.config.ts\"",
@@ -60,6 +57,6 @@
     "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/css/icon.css

@@ -1,117 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-.iui-icons-default{
-  fill:var(--iui-icons-color);
-  display:inline-flex;
-  width:16px;
-  height:16px;
-}
-.iui-icons-default.iui-informational{
-  fill:var(--iui-icons-color-primary);
-}
-.iui-icons-default.iui-positive{
-  fill:var(--iui-icons-color-positive);
-}
-.iui-icons-default.iui-warning{
-  fill:var(--iui-icons-color-warning);
-}
-.iui-icons-default.iui-negative{
-  fill:var(--iui-icons-color-negative);
-}
-
-.iui-icons-small{
-  fill:var(--iui-icons-color);
-  display:inline-flex;
-  width:12px;
-  height:12px;
-}
-.iui-icons-small.iui-informational{
-  fill:var(--iui-icons-color-primary);
-}
-.iui-icons-small.iui-positive{
-  fill:var(--iui-icons-color-positive);
-}
-.iui-icons-small.iui-warning{
-  fill:var(--iui-icons-color-warning);
-}
-.iui-icons-small.iui-negative{
-  fill:var(--iui-icons-color-negative);
-}
-
-.iui-icons-large{
-  fill:var(--iui-icons-color);
-  display:inline-flex;
-  width:24px;
-  height:24px;
-}
-.iui-icons-large.iui-informational{
-  fill:var(--iui-icons-color-primary);
-}
-.iui-icons-large.iui-positive{
-  fill:var(--iui-icons-color-positive);
-}
-.iui-icons-large.iui-warning{
-  fill:var(--iui-icons-color-warning);
-}
-.iui-icons-large.iui-negative{
-  fill:var(--iui-icons-color-negative);
-}
-
-.iui-icons-xl{
-  fill:var(--iui-icons-color);
-  display:inline-flex;
-  width:32px;
-  height:32px;
-}
-.iui-icons-xl.iui-informational{
-  fill:var(--iui-icons-color-primary);
-}
-.iui-icons-xl.iui-positive{
-  fill:var(--iui-icons-color-positive);
-}
-.iui-icons-xl.iui-warning{
-  fill:var(--iui-icons-color-warning);
-}
-.iui-icons-xl.iui-negative{
-  fill:var(--iui-icons-color-negative);
-}
-
-.iui-icons-xxl{
-  fill:var(--iui-icons-color);
-  display:inline-flex;
-  width:48px;
-  height:48px;
-}
-.iui-icons-xxl.iui-informational{
-  fill:var(--iui-icons-color-primary);
-}
-.iui-icons-xxl.iui-positive{
-  fill:var(--iui-icons-color-positive);
-}
-.iui-icons-xxl.iui-warning{
-  fill:var(--iui-icons-color-warning);
-}
-.iui-icons-xxl.iui-negative{
-  fill:var(--iui-icons-color-negative);
-}
-
-.iui-icons-3xl{
-  fill:var(--iui-icons-color);
-  display:inline-flex;
-  width:64px;
-  height:64px;
-}
-.iui-icons-3xl.iui-informational{
-  fill:var(--iui-icons-color-primary);
-}
-.iui-icons-3xl.iui-positive{
-  fill:var(--iui-icons-color-positive);
-}
-.iui-icons-3xl.iui-warning{
-  fill:var(--iui-icons-color-warning);
-}
-.iui-icons-3xl.iui-negative{
-  fill:var(--iui-icons-color-negative);
-}