@itwin/core-react 4.17.6 → 5.0.0-dev.3

package/lib/esm/core-react/autosuggest/AutoSuggest.scss

@@ -2,8 +2,8 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "../scrollbar";
-@import "../inputs/variables";
+@use "../scrollbar" as *;
+@use "../inputs/variables" as *;
 
 .uicore-autosuggest__container {
   position: relative;
@@ -65,7 +65,7 @@
 }
 
 .uicore-autosuggest__section-container {
-  border-top: 1px dashed $buic-background-divider;
+  border-top: 1px dashed var(--iui-color-background-backdrop-hover);
 }
 
 .uicore-autosuggest__section-container--first {
@@ -75,5 +75,5 @@
 .uicore-autosuggest__section-title {
   padding: 10px 0 0 10px;
   font-size: var(--iui-font-size-0);
-  color: $buic-background-table-header;
+  color: var(--iui-color-background-backdrop-hover);
 }

package/lib/esm/core-react/base/base.scss

@@ -2,7 +2,9 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "../_scrollbar";
+@use "../_scrollbar";
+
+@forward "../_scrollbar";
 
 @mixin uicore-centered {
   display: flex;
@@ -32,8 +34,8 @@
   @include uicore-full-size;
   overflow-y: auto;
 
-  @include uicore-touch-scrolling;
-  @include uicore-scrollbar();
+  @include scrollbar.uicore-touch-scrolling;
+  @include scrollbar.uicore-scrollbar();
 }
 
 @mixin uicore-flex-wrap-container {

package/lib/esm/core-react/base/classes.scss

@@ -2,7 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "./index";
+@use "./index" as *;
 
 .uicore-centered {
   @include uicore-centered;

package/lib/esm/core-react/base/index.scss

@@ -2,4 +2,4 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "./base";
+@forward "./base";

package/lib/esm/core-react/button/UnderlinedButton.scss

@@ -2,11 +2,8 @@
  * 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.scss";
-@import "../inputs/index.scss";
-
-$color: $buic-foreground-primary;
-$hoverColor: $buic-foreground-primary-tone;
+$color: var(--iui-color-icon-accent);
+$hoverColor: var(--iui-color-text-accent-hover);
 
 .core-underlined-button {
   background: transparent;
@@ -26,7 +23,7 @@ $hoverColor: $buic-foreground-primary-tone;
   &:focus {
     color: $hoverColor;
     border-color: $hoverColor;
-    background-color: $buic-background-focus-overlay;
+    background-color: hsl(var(--iui-opacity-6));
     outline: none;
   }
 }

package/lib/esm/core-react/classes.scss

@@ -2,9 +2,8 @@
  * 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 "./base/classes";
-@import "./icons/classes";
-@import "./inputs/classes";
-@import "./tabs/classes";
-@import "./text/classes";
+@use "./base/classes" as *;
+@use "./icons/classes" as *;
+@use "./inputs/classes" as *;
+@use "./tabs/classes" as *;
+@use "./text/classes" as *;

package/lib/esm/core-react/contextmenu/ContextMenu.scss

@@ -2,14 +2,9 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "../icons/variables";
-@import "../style/baseline";
-@import "../style/colors";
-@import "../style/opacity";
-@import "../style/themecolors";
-@import "../z-index";
-
-// cspell:ignore themecolors unbordered
+@use "../icons/variables" as *;
+@use "../style/baseline" as *;
+@use "../z-index" as *;
 
 $uicore-menu-padding: $uicore-bordered-padding;
 $uicore-menu-top-bottom-padding: calc(#{$uicore-menu-padding} * 0.6667);
@@ -129,7 +124,7 @@ $uicore-menu-top-bottom-padding: calc(#{$uicore-menu-padding} * 0.6667);
         line-height: var(--iui-size-l);
         text-align: center;
         margin-right: $uicore-unbordered-padding;
-        opacity: $uicore-opacity-2;
+        opacity: var(--iui-opacity-2);
         display: flex;
         align-items: center;
 
@@ -158,14 +153,14 @@ $uicore-menu-top-bottom-padding: calc(#{$uicore-menu-padding} * 0.6667);
     }
 
     &:focus {
-      border: 1px solid $buic-background-divider;
+      border: 1px solid var(--iui-color-background-backdrop-hover);
       box-shadow: var(--iui-shadow-1);
       outline: 0px;
 
       > .core-context-menu-item.is-selected,
       > .context-submenu > .core-context-menu-item.is-selected {
         // .is-selected being applied on hover, overriding with hover color
-        background-color: $buic-row-hover;
+        background-color: var(--iui-color-background-hover);
       }
     }
 

package/lib/esm/core-react/dialog/Dialog.scss

@@ -2,7 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "../z-index";
+@use "../z-index" as *;
 
 .core-dialog {
   @include uicore-z-index(dialog);

package/lib/esm/core-react/elementseparator/ElementSeparator.scss

@@ -2,9 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "../style/themecolors";
-@import "../z-index";
-
 @function background-line($orientation) {
   @return linear-gradient(
     $orientation,

package/lib/esm/core-react/icons/IconComponent.scss

@@ -2,7 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "./variables";
+@use "./variables" as *;
 
 .core-svg-icon {
   width: $uicore-icons-small;

package/lib/esm/core-react/icons/WebFontIcon.scss

@@ -2,8 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "./index";
-
 .bui-webfont-icon {
   font-family: bentley-icons-generic-webfont !important;
   speak: none;

package/lib/esm/core-react/icons/classes.scss

@@ -2,7 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "./index";
+@use "./index" as *;
 
 .uicore-icons-large {
   @include uicore-icons-large;

package/lib/esm/core-react/icons/index.scss

@@ -2,5 +2,5 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "./variables";
-@import "./mixins";
+@forward "./variables";
+@forward "./mixins";

package/lib/esm/core-react/icons/mixins.scss

@@ -2,24 +2,26 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "./variables";
+@use "./variables";
+
+@forward "./variables";
 
 @mixin uicore-icons-small {
-  width: $uicore-icons-small;
-  height: $uicore-icons-small;
+  width: variables.$uicore-icons-small;
+  height: variables.$uicore-icons-small;
 }
 
 @mixin uicore-icons-medium {
-  width: $uicore-icons-medium;
-  height: $uicore-icons-medium;
+  width: variables.$uicore-icons-medium;
+  height: variables.$uicore-icons-medium;
 }
 
 @mixin uicore-icons-large {
-  width: $uicore-icons-large;
-  height: $uicore-icons-large;
+  width: variables.$uicore-icons-large;
+  height: variables.$uicore-icons-large;
 }
 
 @mixin uicore-icons-x-large {
-  width: $uicore-icons-x-large;
-  height: $uicore-icons-x-large;
+  width: variables.$uicore-icons-x-large;
+  height: variables.$uicore-icons-x-large;
 }

package/lib/esm/core-react/imagecheckbox/ImageCheckBox.scss

@@ -2,9 +2,6 @@
  * 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.scss";
-@import "../icons/variables.scss";
-
 .core-image-checkbox {
   display: inline-block;
   font-size: 16px;
@@ -47,8 +44,8 @@
   }
 }
 .image-checkbox-border {
-  border: 1px solid $buic-foreground-disabled;
-  background-color: $buic-background-control;
+  border: 1px solid var(--iui-color-text-disabled);
+  background-color: var(--iui-color-background);
   border-radius: var(--iui-border-radius-1);
   padding: 1px 3px 0 2px;
 }

package/lib/esm/core-react/index.scss

@@ -2,19 +2,17 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@use "sass:math";
+@forward "./style/index";
 
-@import "./style/index";
+@forward "./_scrollbar";
+@forward "./_z-index";
+@forward "./_geometry";
+@forward "./_math";
+@forward "./_typography";
 
-@import "./_scrollbar";
-@import "./_z-index";
-@import "./_geometry";
-@import "./_math";
-@import "./_typography";
-
-@import "./base/index";
-@import "./icons/index";
-@import "./inputs/index";
-@import "./loading/index";
-@import "./tabs/index";
-@import "./text/index";
+@forward "./base/index";
+@forward "./icons/index";
+@forward "./inputs/index";
+@forward "./loading/index";
+@forward "./tabs/index";
+@forward "./text/index";

package/lib/esm/core-react/inputs/classes.scss

@@ -2,7 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "./index";
+@use "./index" as *;
 
 .uicore-inputs-input {
   @include uicore-inputs-input;

package/lib/esm/core-react/inputs/iconinput/IconInput.scss

@@ -2,8 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "../../base/base";
-@import "../variables";
+@use "../../base/base" as *;
 
 .core-iconInput-container {
   position: relative;

package/lib/esm/core-react/inputs/index.scss

@@ -2,8 +2,8 @@
  * 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";
+@forward "../style/index";
 
-@import "./variables";
-@import "./input";
-@import "./input-label";
+@forward "./variables";
+@forward "./input";
+@forward "./input-label";

package/lib/esm/core-react/inputs/input-label.scss

@@ -2,12 +2,14 @@
  * 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";
+@use "../style/baseline";
+
+@forward "../style/index";
 
 @mixin uicore-inputs-labeled-input {
   display: block;
   padding: 0;
-  margin: 0 0 $uicore-unbordered-padding;
+  margin: 0 0 baseline.$uicore-unbordered-padding;
   text-align: left;
   font-size: var(--iui-font-size-1);
   font-weight: var(--iui-font-weight-normal);
@@ -33,8 +35,12 @@
 
     &.with-icon {
       > input {
-        padding-right: calc(#{$uicore-bordered-padding} + var(--iui-size-l));
-        margin-right: calc(#{$uicore-bordered-padding} + var(--iui-size-l));
+        padding-right: calc(
+          #{baseline.$uicore-bordered-padding} + var(--iui-size-l)
+        );
+        margin-right: calc(
+          #{baseline.$uicore-bordered-padding} + var(--iui-size-l)
+        );
       }
     }
 
@@ -45,7 +51,7 @@
       right: 0;
       top: 0;
       bottom: 0;
-      padding: $uicore-bordered-padding;
+      padding: baseline.$uicore-bordered-padding;
 
       font-size: var(--iui-font-size-1);
       font-weight: normal;
@@ -62,9 +68,9 @@
   /// Status colors ----------------------------------------------------------
 
   $status-colors: (
-    success: $buic-foreground-positive-rgb,
-    warning: $buic-foreground-warning-rgb,
-    error: $buic-foreground-negative-rgb,
+    success: var(--iui-color-positive-hsl),
+    warning: var(--iui-color-warning-hsl),
+    error: var(--iui-color-negative-hsl),
   );
 
   @each $status, $color in $status-colors {
@@ -77,11 +83,11 @@
       > input,
       > .uicore-inputs-input {
         border-color: rgb($color);
-        box-shadow: $buic-inputs-boxshadow 0px 1px 1px inset;
+        box-shadow: var(--iui-focus-box-shadow) 0px 1px 1px inset;
 
         &:focus {
           border-color: rgb($color);
-          box-shadow: rgba($color, $uicore-opacity-boxshadow) 0px 0px 0px 2px;
+          box-shadow: rgba($color, var(--iui-opacity-4)) 0px 0px 0px 2px;
         }
       }
     }

package/lib/esm/core-react/inputs/input.scss

@@ -2,23 +2,25 @@
  * 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 "./variables";
+@use "./variables";
+
+@forward "../style/index";
+@forward "./variables";
 
 @mixin uicore-inputs-input {
   display: block;
   width: 100%;
-  padding: $uicore-iui-input-padding;
-  margin: $uicore-inputs-margin 0;
+  padding: variables.$uicore-iui-input-padding;
+  margin: variables.$uicore-inputs-margin 0;
   font-family: var(--iui-font-sans);
   font-size: var(--iui-font-size-1);
   line-height: normal;
   color: var(--iui-color-text);
-  background-color: $buic-background-control;
+  background-color: var(--iui-color-background);
   background-image: none;
   border: 1px solid var(--iui-color-border-foreground);
   border-radius: var(--iui-border-radius-1);
-  box-shadow: $buic-inputs-boxshadow 0px 1px 1px inset;
+  box-shadow: var(--iui-focus-box-shadow) 0px 1px 1px inset;
   box-sizing: border-box;
   transition: border-color var(--iui-duration-1) ease-in-out,
     box-shadow var(--iui-duration-1) ease-in-out;
@@ -34,11 +36,11 @@
   }
 
   &[disabled] {
-    background-color: $buic-background-control-disabled;
-    border-color: $buic-foreground-disabled;
+    background-color: var(--iui-color-background-backdrop);
+    border-color: var(--iui-color-text-disabled);
     color: var(--iui-color-text-disabled);
     cursor: not-allowed;
-    opacity: $uicore-opacity-disabled;
+    opacity: var(--iui-opacity-4);
   }
 
   &[readonly] {
@@ -48,7 +50,7 @@
 
   &:focus {
     outline: 0px;
-    border-color: $buic-foreground-focus-border;
-    box-shadow: $uicore-inputs-focus-boxshadow;
+    border-color: hsl(var(--iui-color-foreground-hsl) / var(--iui-opacity-4));
+    box-shadow: variables.$uicore-inputs-focus-boxshadow;
   }
 }

package/lib/esm/core-react/inputs/numberinput/NumberInput.scss

@@ -2,8 +2,8 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "../../base/base";
-@import "../variables";
+@use "../../base/base" as *;
+@use "../variables" as *;
 
 .core-number-input-container {
   position: relative;

package/lib/esm/core-react/inputs/variables.scss

@@ -2,8 +2,8 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "../style/baseline";
-@import "../style/themecolors";
+@forward "../style/baseline";
+@forward "../style/themecolors";
 
 // cspell:ignore unbordered
 
@@ -29,8 +29,13 @@ $uicore-inputs-margin-large: calc(
   (#{$uicore-line-height} * 3 - #{$uicore-inputs-height-large}) * 0.5
 );
 
-$uicore-inputs-border-color: $buic-inputs-border;
+$uicore-inputs-border-color: hsl(
+  var(--iui-color-foreground-hsl) / var(--iui-opacity-4)
+);
 
-$uicore-inputs-focus-boxshadow: $buic-focus-boxshadow 0px 0px 0px 2px;
+$uicore-inputs-focus-boxshadow: hsl(
+    var(--iui-color-accent-hsl) / var(--iui-opacity-4)
+  )
+  0px 0px 0px 2px;
 
 $uicore-iui-input-padding: var(--iui-size-3xs) var(--iui-size-xs);

package/lib/esm/core-react/layout-variables.scss

@@ -2,7 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "./z-index";
+@use "./z-index" as *;
 
 :root {
   /** Default Widget Opacity */

package/lib/esm/core-react/listbox/Listbox.scss

@@ -2,7 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "../index";
+@use "../index" as *;
 
 $uicore-list-item-height: calc(var(--iui-size-s) * 2);
 

package/lib/esm/core-react/loading/LoadingBar.scss

@@ -2,19 +2,17 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "../style/themecolors";
-
 .core-lb {
   display: flex;
   align-items: center;
 
   > .lb-container {
-    background-color: $buic-background-5;
+    background-color: var(--iui-color-background-disabled);
     flex: 1;
 
     > .fill {
       height: 100%;
-      background-color: $buic-foreground-primary;
+      background-color: var(--iui-color-icon-accent);
       transition: width 0.3s linear;
     }
   }

package/lib/esm/core-react/loading/LoadingPrompt.scss

@@ -2,10 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "../style/themecolors";
-
-// cspell:ignore loadingprompt
-
 .core-loadingprompt {
   height: 100%;
   display: flex;

package/lib/esm/core-react/loading/LoadingSpinner.scss

@@ -2,8 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "../style/themecolors";
-
 .core-ls {
   display: flex;
   align-items: center;

package/lib/esm/core-react/loading/index.scss

@@ -2,4 +2,4 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "./mixins";
+@forward "./mixins";

package/lib/esm/core-react/loading/mixins.scss

@@ -2,12 +2,12 @@
  * 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";
+@forward "../style/index";
 
 @mixin uicore-spinner(
   $size,
   $borderSize: $size * 0.125,
-  $activeColor: $buic-foreground-primary,
+  $activeColor: var(--iui-color-icon-accent),
   $selector: "&::after",
   $time: 1.5s
 ) {
@@ -38,7 +38,7 @@
     height: $size;
     width: $size;
 
-    border: solid $borderSize $buic-background-control-stroke;
+    border: solid $borderSize var(--iui-color-background-disabled);
     border-bottom-color: #{$activeColor};
     border-radius: 50%;
     box-sizing: border-box;

package/lib/esm/core-react/messagebox/MessageBox.scss

@@ -2,9 +2,8 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "../icons/variables";
-@import "../style/colors";
-@import "../style/baseline";
+@use "../icons/variables" as *;
+@use "../style/baseline" as *;
 
 .core-message-box-container {
   display: flex;

package/lib/esm/core-react/popup/Popup.scss

@@ -2,8 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "../inputs/variables";
-@import "../z-index";
+@use "../z-index" as *;
 
 .core-popup {
   top: 0;