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

package/css/workflow-diagram.css

@@ -17,7 +17,7 @@
 .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:0;
+  --_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);
@@ -28,20 +28,20 @@
   padding:0;
   border:none;
   vertical-align:baseline;
-  font-size:12px;
-  font-weight:400;
-  line-height:22px;
+  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:12px;
+  --_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:2px;
+  height:var(--iui-size-3xs);
   flex:1 2 auto;
 }
 .iui-workflow-diagram-step::before{
@@ -58,8 +58,8 @@
 }
 
 .iui-workflow-diagram-content{
-  padding:0 16px;
-  font-weight:400;
+  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);

package/package.json

@@ -1,21 +1,18 @@
 {
   "name": "@itwin/itwinui-css",
-  "version": "1.0.0-dev.0",
+  "version": "1.0.0-dev.10",
   "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\"",
@@ -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);
-}

package/css/textarea.css

@@ -1,96 +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-textarea{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  width:100%;
-  font-family:inherit;
-  font-size:14px;
-  font-weight:400;
-  line-height:22px;
-  border-radius:4px;
-  -webkit-appearance:none;
-     -moz-appearance:none;
-          appearance:none;
-  padding:7px 12px;
-  min-height:38px;
-  color:var(--iui-text-color);
-  background-color:var(--iui-color-background-1);
-  border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
-  resize:vertical;
-  min-height:38px;
-}
-.iui-textarea:focus-visible{
-  outline:2px solid var(--iui-color-foreground-primary);
-  outline-offset:-2px;
-}
-@supports not selector(*:focus-visible){
-  .iui-textarea:focus{
-    outline:2px solid var(--iui-color-foreground-primary);
-    outline-offset:-2px;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-textarea{
-    transition:border-color 0.2s ease-out;
-  }
-}
-.iui-textarea.iui-small{
-  padding-top:1.5px;
-  padding-bottom:1.5px;
-  min-height:27px;
-}
-.iui-textarea.iui-large{
-  padding-top:12.5px;
-  padding-bottom:12.5px;
-  min-height:49px;
-  font-size:16px;
-}
-.iui-textarea::-moz-placeholder{
-  -moz-user-select:none;
-       user-select:none;
-  color:var(--iui-text-color-placeholder);
-}
-.iui-textarea:-ms-input-placeholder{
-  -ms-user-select:none;
-      user-select:none;
-  color:var(--iui-text-color-placeholder);
-}
-.iui-textarea::placeholder{
-  -webkit-user-select:none;
-     -moz-user-select:none;
-      -ms-user-select:none;
-          user-select:none;
-  color:var(--iui-text-color-placeholder);
-}
-.iui-textarea:-webkit-autofill{
-  border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
-  color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
-  background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
-}
-.iui-textarea:autofill{
-  border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
-  color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
-  background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
-}
-.iui-textarea:hover{
-  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-textarea:hover{
-    transition:border-color 0.2s ease-out;
-  }
-}
-.iui-textarea[disabled]{
-  background-color:var(--iui-color-background-disabled);
-  border-color:var(--iui-color-background-disabled);
-  cursor:not-allowed;
-  --_hover-color:var(--iui-color-background-disabled);
-}
-.iui-textarea[disabled], .iui-textarea[readonly]{
-  resize:none;
-}

package/scss/alert/alert.scss

@@ -1,89 +0,0 @@
-// 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 '../anchor/index';
-@import '../icon/index';
-@import '../utils/index';
-@import '../button/index';
-
-@mixin iui-alert {
-  @include iui-reset;
-  border-radius: $iui-border-radius;
-  display: flex;
-  align-items: center;
-  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: sticky;
-    top: 0;
-    left: 0;
-  }
-}
-
-@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 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 {
-    fill: var(--iui-icons-color-#{$statusColor});
-  }
-
-  #{$rootSelector}-message {
-    @include iui-text-selection($statusColor);
-  }
-
-  #{$rootSelector}-link {
-    @include iui-anchor-status($statusColor);
-  }
-
-  #{$rootSelector}-button {
-    outline-color: var(--iui-color-foreground-#{$statusColor});
-  }
-}

package/scss/alert/classes.scss

@@ -1,33 +0,0 @@
-// 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-alert {
-  @include iui-alert;
-}
-
-@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/alert/index.scss

@@ -1,3 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@import './alert';

package/scss/anchor/anchor.scss

@@ -1,78 +0,0 @@
-// 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';
-
-@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/anchor/classes.scss

@@ -1,11 +0,0 @@
-// 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-anchor {
-  @include iui-anchor;
-
-  &-external {
-    @include iui-anchor-external;
-  }
-}

package/scss/anchor/index.scss

@@ -1,3 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@import './anchor';

package/scss/avatar/avatar-sizes.scss

@@ -1,23 +0,0 @@
-// 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-avatar-size($size: $iui-icons-xl, $font-size: $iui-font-size-leading) {
-  width: $size;
-  height: $size;
-
-  @if ($size == $iui-icons-xl) {
-    --_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-avatar-status-size: #{$iui-s};
-  } @else {
-    --_iui-avatar-status-size: #{$iui-sm};
-  }
-
-  > .iui-initials {
-    line-height: $size;
-    font-size: $font-size;
-  }
-}