@itwin/itwinui-css 0.63.1 → 1.0.0-dev.2

package/css/workflow-diagram.css

@@ -0,0 +1,67 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.iui-workflow-diagram{
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  display:flex;
+  justify-content:space-around;
+  align-items:flex-start;
+  width:100%;
+  align-items:center;
+}
+
+.iui-workflow-diagram-step{
+  --_iui-workflow-diagram-circle-background-color:var(--iui-color-background-positive);
+  --_iui-workflow-diagram-circle-border-color:var(--iui-color-background-positive);
+  --_iui-workflow-diagram-circle-border-radius:var(--iui-border-radius-1);
+  --_iui-workflow-diagram-circle-text-color:var(--iui-color-foreground-accessory);
+  --_iui-workflow-diagram-track-before-color:var(--iui-color-foreground-positive);
+  --_iui-workflow-diagram-track-after-color:var(--iui-color-foreground-positive);
+  flex:1;
+  align-items:center;
+  display:flex;
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  font-size:var(--iui-font-size-0);
+  font-weight:var(--iui-font-weight-normal);
+  line-height:var(--iui-size-l);
+  color:var(--_iui-workflow-diagram-circle-text-color);
+}
+.iui-workflow-diagram-step:first-of-type, .iui-workflow-diagram-step:last-of-type{
+  --_iui-workflow-diagram-circle-background-color:var(--iui-color-background-1);
+  --_iui-workflow-diagram-circle-border-color:var(--iui-color-foreground-positive);
+  --_iui-workflow-diagram-circle-border-radius:var(--iui-size-s);
+  --_iui-workflow-diagram-circle-text-color:var(--iui-color-foreground-positive);
+}
+.iui-workflow-diagram-step::before, .iui-workflow-diagram-step::after{
+  content:"";
+  height:var(--iui-size-3xs);
+  flex:1 2 auto;
+}
+.iui-workflow-diagram-step::before{
+  background-color:var(--_iui-workflow-diagram-track-before-color);
+}
+.iui-workflow-diagram-step::after{
+  background-color:var(--_iui-workflow-diagram-track-after-color);
+}
+.iui-workflow-diagram-step:first-of-type{
+  --_iui-workflow-diagram-track-before-color:transparent;
+}
+.iui-workflow-diagram-step:last-of-type{
+  --_iui-workflow-diagram-track-after-color:transparent;
+}
+
+.iui-workflow-diagram-content{
+  padding:0 var(--iui-size-m);
+  font-weight:var(--iui-font-weight-normal);
+  text-align:center;
+  background-color:var(--_iui-workflow-diagram-circle-background-color);
+  border:1px solid var(--_iui-workflow-diagram-circle-border-color);
+  border-radius:var(--_iui-workflow-diagram-circle-border-radius);
+}

package/package.json

@@ -1,21 +1,18 @@
 {
   "name": "@itwin/itwinui-css",
-  "version": "0.63.1",
+  "version": "1.0.0-dev.2",
   "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/all.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\"",

package/css/icon.css

@@ -1,177 +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:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
-  display:inline-flex;
-  width:16px;
-  height:16px;
-}
-@media (forced-colors: active){
-  .iui-icons-default{
-    fill:CanvasText;
-  }
-}
-.iui-icons-default.iui-informational{
-  fill:#008ae0;
-  fill:var(--iui-icons-color-primary);
-}
-.iui-icons-default.iui-positive{
-  fill:#53a21a;
-  fill:var(--iui-icons-color-positive);
-}
-.iui-icons-default.iui-warning{
-  fill:#f18d13;
-  fill:var(--iui-icons-color-warning);
-}
-.iui-icons-default.iui-negative{
-  fill:#d10a0a;
-  fill:var(--iui-icons-color-negative);
-}
-
-.iui-icons-small{
-  fill:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
-  display:inline-flex;
-  width:12px;
-  height:12px;
-}
-@media (forced-colors: active){
-  .iui-icons-small{
-    fill:CanvasText;
-  }
-}
-.iui-icons-small.iui-informational{
-  fill:#008ae0;
-  fill:var(--iui-icons-color-primary);
-}
-.iui-icons-small.iui-positive{
-  fill:#53a21a;
-  fill:var(--iui-icons-color-positive);
-}
-.iui-icons-small.iui-warning{
-  fill:#f18d13;
-  fill:var(--iui-icons-color-warning);
-}
-.iui-icons-small.iui-negative{
-  fill:#d10a0a;
-  fill:var(--iui-icons-color-negative);
-}
-
-.iui-icons-large{
-  fill:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
-  display:inline-flex;
-  width:24px;
-  height:24px;
-}
-@media (forced-colors: active){
-  .iui-icons-large{
-    fill:CanvasText;
-  }
-}
-.iui-icons-large.iui-informational{
-  fill:#008ae0;
-  fill:var(--iui-icons-color-primary);
-}
-.iui-icons-large.iui-positive{
-  fill:#53a21a;
-  fill:var(--iui-icons-color-positive);
-}
-.iui-icons-large.iui-warning{
-  fill:#f18d13;
-  fill:var(--iui-icons-color-warning);
-}
-.iui-icons-large.iui-negative{
-  fill:#d10a0a;
-  fill:var(--iui-icons-color-negative);
-}
-
-.iui-icons-xl{
-  fill:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
-  display:inline-flex;
-  width:32px;
-  height:32px;
-}
-@media (forced-colors: active){
-  .iui-icons-xl{
-    fill:CanvasText;
-  }
-}
-.iui-icons-xl.iui-informational{
-  fill:#008ae0;
-  fill:var(--iui-icons-color-primary);
-}
-.iui-icons-xl.iui-positive{
-  fill:#53a21a;
-  fill:var(--iui-icons-color-positive);
-}
-.iui-icons-xl.iui-warning{
-  fill:#f18d13;
-  fill:var(--iui-icons-color-warning);
-}
-.iui-icons-xl.iui-negative{
-  fill:#d10a0a;
-  fill:var(--iui-icons-color-negative);
-}
-
-.iui-icons-xxl{
-  fill:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
-  display:inline-flex;
-  width:48px;
-  height:48px;
-}
-@media (forced-colors: active){
-  .iui-icons-xxl{
-    fill:CanvasText;
-  }
-}
-.iui-icons-xxl.iui-informational{
-  fill:#008ae0;
-  fill:var(--iui-icons-color-primary);
-}
-.iui-icons-xxl.iui-positive{
-  fill:#53a21a;
-  fill:var(--iui-icons-color-positive);
-}
-.iui-icons-xxl.iui-warning{
-  fill:#f18d13;
-  fill:var(--iui-icons-color-warning);
-}
-.iui-icons-xxl.iui-negative{
-  fill:#d10a0a;
-  fill:var(--iui-icons-color-negative);
-}
-
-.iui-icons-3xl{
-  fill:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
-  display:inline-flex;
-  width:64px;
-  height:64px;
-}
-@media (forced-colors: active){
-  .iui-icons-3xl{
-    fill:CanvasText;
-  }
-}
-.iui-icons-3xl.iui-informational{
-  fill:#008ae0;
-  fill:var(--iui-icons-color-primary);
-}
-.iui-icons-3xl.iui-positive{
-  fill:#53a21a;
-  fill:var(--iui-icons-color-positive);
-}
-.iui-icons-3xl.iui-warning{
-  fill:#f18d13;
-  fill:var(--iui-icons-color-warning);
-}
-.iui-icons-3xl.iui-negative{
-  fill:#d10a0a;
-  fill:var(--iui-icons-color-negative);
-}