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

package/CHANGELOG.md

@@ -1,40 +1,6 @@
 # Change Log - @itwin/components-react
 
-This log was last generated on Wed, 20 Nov 2024 14:27:46 GMT and should not be manually modified.
-
-## 4.17.6
-Wed, 20 Nov 2024 14:27:46 GMT
-
-_Version update only_
-
-## 4.17.5
-Thu, 14 Nov 2024 08:22:04 GMT
-
-_Version update only_
-
-## 4.17.4
-Fri, 08 Nov 2024 14:41:23 GMT
-
-_Version update only_
-
-## 4.17.3
-Wed, 06 Nov 2024 09:04:20 GMT
-
-_Version update only_
-
-## 4.17.2
-Wed, 30 Oct 2024 14:46:15 GMT
-
-### Updates
-
-- Fixed `pw:` links handling in property grid.
-
-## 4.17.1
-Wed, 09 Oct 2024 10:50:47 GMT
-
-### Updates
-
-- Update FilterBuilder UI according to UX team's new specs
+This log was last generated on Thu, 19 Sep 2024 12:50:53 GMT and should not be manually modified.
 
 ## 4.17.0
 Thu, 19 Sep 2024 12:50:53 GMT

package/README.md

@@ -6,6 +6,20 @@ Copyright © Bentley Systems, Incorporated. All rights reserved. See LICENSE.md
 
 The **@itwin/components-react** package contains React components that are data-oriented, such as PropertyGrid and Tree.
 
-## Documentation
+## Usage
 
-See the [iTwin.js](https://www.itwinjs.org/learning/ui/components/) documentation for more information.
+To get started with the `@itwin/components-react` package, simply import the necessary components and utilities:
+
+```tsx
+import { Panel, Title } from "@itwin/components-react";
+
+function ListPanel() {
+  return (
+    <Panel>
+      <Title>Panel title</Title>
+    </Panel>
+  );
+}
+```
+
+For more details, check out the [@itwin/components-react documentation](https://www.itwinjs.org/reference/components-react/).

package/lib/cjs/components-react/datepicker/DateField.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 "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-@import "~@itwin/core-react/lib/cjs/core-react/inputs/variables";
+@use "~@itwin/core-react/lib/core-react/inputs/variables" as *;
 
 .components-date-input {
   width: auto;
@@ -14,7 +13,7 @@
   }
 
   &[disabled] {
-    color: var(--buic-foreground-body);
+    color: var(--iui-color-text);
     opacity: 0.65;
   }
 }

package/lib/cjs/components-react/datepicker/DatePicker.scss

@@ -2,25 +2,21 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-@import "~@itwin/core-react/lib/cjs/core-react/style/opacity";
-@import "~@itwin/core-react/lib/cjs/core-react/icons/variables";
-
 $date-picker-m: 16px;
 $date-picker-icons-color-actionable: rgba(
-  $buic-foreground-body,
-  $uicore-opacity-2
+  var(--iui-color-text),
+  var(--iui-opacity-2)
 );
 $date-picker-icons-color-actionable-hover: rgba(
-  $buic-foreground-body,
-  $uicore-opacity-1
+  var(--iui-color-text),
+  var(--iui-opacity-1)
 );
 $date-picker-outside-month-color: var(--iui-color-text-disabled);
 $outline-size: 2px;
 
 .components-date-picker-calendar {
   border-radius: var(--iui-border-radius-1) var(--iui-border-radius-1) 0 0;
-  background-color: $buic-background-control;
+  background-color: var(--iui-color-background);
   color: var(--iui-color-text);
   font-size: 14px;
 
@@ -37,7 +33,7 @@ $outline-size: 2px;
 
     button.components-previous-month,
     button.components-next-month {
-      background-color: $buic-background-control;
+      background-color: var(--iui-color-background);
       border: none;
       cursor: pointer;
       padding: 5px;
@@ -53,9 +49,11 @@ $outline-size: 2px;
           outline: 0px;
           border: 0px solid var(--iui-color-border-foreground);
           border-radius: var(--iui-border-radius-1);
-          border-color: var(--buic-foreground-focus-border);
-          box-shadow: var(--buic-focus-boxshadow-gradient1) 0px 1px 1px,
-            var(--buic-focus-boxshadow-gradient2) 0px 0px 0px 2px;
+          border-color: hsl(
+            var(--iui-color-foreground-hsl) / var(--iui-opacity-4)
+          );
+          box-shadow: hsl(var(--iui-color-accent-hsl) / 0) 0px 1px 1px,
+            hsl(var(--iui-color-accent-hsl) / 0.65) 0px 0px 0px 2px;
         }
       }
 
@@ -77,7 +75,7 @@ $outline-size: 2px;
 
   .components-date-picker-calendar-header-weekdays {
     display: grid;
-    background-color: $buic-background-2;
+    background-color: var(--iui-color-background-hover);
     padding-inline-start: 8px;
     padding-inline-end: 8px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
@@ -111,17 +109,21 @@ $outline-size: 2px;
       &.showFocusOutline {
         border: 0px solid var(--iui-color-border-foreground);
         border-radius: var(--iui-border-radius-1);
-        border-color: var(--buic-foreground-focus-border);
-        box-shadow: var(--buic-focus-boxshadow-gradient1) 0px 1px 1px,
-          var(--buic-focus-boxshadow-gradient2) 0px 0px 0px 2px;
+        border-color: hsl(
+          var(--iui-color-foreground-hsl) / var(--iui-opacity-4)
+        );
+        box-shadow: hsl(var(--iui-color-accent-hsl) / 0) 0px 1px 1px,
+          hsl(var(--iui-color-accent-hsl) / 0.65) 0px 0px 0px 2px;
 
         .components-date-picker-calendar-day.focused {
           outline: 0px;
           border: 1px solid var(--iui-color-border-foreground);
           border-radius: var(--iui-border-radius-1);
-          border-color: var(--buic-foreground-focus-border);
-          box-shadow: var(--buic-focus-boxshadow-gradient1) 0px 1px 1px,
-            var(--buic-focus-boxshadow-gradient2) 0px 0px 0px 2px;
+          border-color: hsl(
+            var(--iui-color-foreground-hsl) / var(--iui-opacity-4)
+          );
+          box-shadow: hsl(var(--iui-color-accent-hsl) / 0) 0px 1px 1px,
+            hsl(var(--iui-color-accent-hsl) / 0.65) 0px 0px 0px 2px;
           z-index: 1;
         }
       }
@@ -143,25 +145,25 @@ $outline-size: 2px;
       }
 
       &:hover:not(.selected) {
-        background-color: $buic-row-hover;
+        background-color: var(--iui-color-background-hover);
         border-radius: var(--iui-border-radius-1);
         font-weight: var(--iui-font-weight-semibold);
       }
 
       &.selected {
-        background-color: $buic-background-primary;
+        background-color: var(--iui-color-background-accent);
         color: var(--iui-color-white);
         font-weight: var(--iui-font-weight-semibold);
         border-radius: var(--iui-border-radius-1);
 
         &:hover {
-          background-color: $buic-row-hover;
+          background-color: var(--iui-color-background-hover);
           color: var(--iui-color-text);
         }
       }
 
       &.today {
-        background-color: rgba($buic-foreground-body, $uicore-opacity-6);
+        background-color: rgba(var(--iui-color-text), var(--iui-opacity-6));
         font-weight: var(--iui-font-weight-semibold);
         border-radius: 50%;
       }

package/lib/cjs/components-react/datepicker/DatePickerPopupButton.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 "~@itwin/core-react/lib/cjs/core-react/index";
-
 .components-date-picker-calendar-popup-button {
   color: var(--iui-color-text);
   font-size: var(--iui-font-size-1);
@@ -26,12 +24,13 @@
     cursor: auto;
 
     svg {
-      fill: $buic-foreground-primary-tone;
+      fill: var(--iui-color-text-accent-hover);
     }
   }
 
   &:focus {
-    box-shadow: $buic-focus-boxshadow 0px 0px 0px 2px;
+    box-shadow: hsl(var(--iui-color-accent-hsl) / var(--iui-opacity-4)) 0px 0px
+      0px 2px;
     outline: none;
   }
 }
@@ -39,7 +38,7 @@
 .components-date-picker-calendar-popup-panel {
   display: flex;
   flex-direction: column;
-  background-color: $buic-background-control;
+  background-color: var(--iui-color-background);
 
   .time-container {
     display: flex;

package/lib/cjs/components-react/datepicker/TimeField.scss

@@ -2,18 +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 "~@itwin/core-react/lib/cjs/core-react/inputs/variables";
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+@use "~@itwin/core-react/lib/core-react/inputs/variables" as *;
 
 .components-time {
   display: inline-flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
-  background-color: $buic-background-control;
+  background-color: var(--iui-color-background);
   border: 1px solid var(--iui-color-border-foreground);
   border-radius: var(--iui-border-radius-1);
-  box-shadow: var(--buic-inputs-boxshadow) 0px 1px 1px inset;
+  box-shadow: var(--iui-focus-box-shadow) 0px 1px 1px inset;
   box-sizing: border-box;
 
   &.has-error {
@@ -34,9 +33,9 @@
       outline: 0px;
       border: 1px solid var(--iui-color-border-foreground);
       border-radius: var(--iui-border-radius-1);
-      border-color: var(--buic-foreground-focus-border);
-      box-shadow: var(--buic-focus-boxshadow-gradient1) 0px 1px 1px,
-        var(--buic-focus-boxshadow-gradient2) 0px 0px 0px 2px;
+      border-color: hsl(var(--iui-color-foreground-hsl) / var(--iui-opacity-4));
+      box-shadow: hsl(var(--iui-color-accent-hsl) / 0) 0px 1px 1px,
+        hsl(var(--iui-color-accent-hsl) / 0.65) 0px 0px 0px 2px;
       z-index: 1;
       /* bump z-index so drop shadow in not cut off by AM/PM */
     }
@@ -56,9 +55,9 @@
       outline: 0px;
       border: 1px solid var(--iui-color-border-foreground);
       border-radius: var(--iui-border-radius-1);
-      border-color: var(--buic-foreground-focus-border);
-      box-shadow: var(--buic-focus-boxshadow-gradient1) 0px 1px 1px,
-        var(--buic-focus-boxshadow-gradient2) 0px 0px 0px 2px;
+      border-color: hsl(var(--iui-color-foreground-hsl) / var(--iui-opacity-4));
+      box-shadow: hsl(var(--iui-color-accent-hsl) / 0) 0px 1px 1px,
+        hsl(var(--iui-color-accent-hsl) / 0.65) 0px 0px 0px 2px;
     }
   }
 

package/lib/cjs/components-react/editors/CustomNumberEditor.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 *;
 
 .components-customnumber-editor {
   width: 100%;

package/lib/cjs/components-react/editors/EnumEditor.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 *;
 
 .components-enum-editor {
   width: 100%;

package/lib/cjs/components-react/editors/IconEditor.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 "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-
 $components-color-editor-item-height: 100%;
 
 .components-icon-editor {

package/lib/cjs/components-react/editors/NumericInputEditor.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 *;
 
 .components-smallEditor-host {
   .components-numeric-input-editor {

package/lib/cjs/components-react/editors/PopupButton.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 "~@itwin/core-react/lib/cjs/core-react/icons/variables";
-@import "~@itwin/core-react/lib/cjs/core-react/inputs/variables";
-@import "~@itwin/core-react/lib/cjs/core-react/style/baseline";
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-@import "./variables.scss";
+@use "~@itwin/core-react/lib/core-react/inputs/variables" as *;
+@use "./variables" as *;
 
 .components-popup-button {
   min-width: 100%;
@@ -14,10 +11,10 @@
   height: 100%;
   margin: 0;
   padding: 0;
-  background-color: $buic-background-control;
+  background-color: var(--iui-color-background);
   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;
   cursor: pointer;
 
@@ -39,7 +36,7 @@
   }
 
   > .components-popup-button-arrow {
-    background-color: $buic-background-control;
+    background-color: var(--iui-color-background);
     width: var(--iui-size-l);
     height: var(--iui-size-l);
 
@@ -57,7 +54,7 @@
 
   &:focus,
   &.components-popup-expanded {
-    border-color: $buic-foreground-focus;
+    border-color: var(--iui-color-text-accent-hover);
     outline: 0px;
     box-shadow: $uicore-inputs-focus-boxshadow;
 

package/lib/cjs/components-react/editors/SliderEditor.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 *;
 
 .components-slider-editor {
   min-width: 100%;

package/lib/cjs/components-react/editors/TextEditor.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 *;
 
 .components-text-editor {
   min-width: 100%;

package/lib/cjs/components-react/editors/TextareaEditor.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 "~@itwin/core-react/lib/cjs/core-react/style/colors";
-
 .components-textarea-editor {
   min-width: 100%;
   margin: 0;

package/lib/cjs/components-react/editors/variables.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 "~@itwin/core-react/lib/cjs/core-react/inputs/variables";
+@use "~@itwin/core-react/lib/core-react/inputs/variables";
+
+@forward "~@itwin/core-react/lib/core-react/inputs/variables";
 
 $editor-component-height-small: 24px;
-$editor-iui-input-padding: $uicore-iui-input-padding;
+$editor-iui-input-padding: variables.$uicore-iui-input-padding;

package/lib/cjs/components-react/filtering/FilteringInput.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 "~@itwin/core-react/lib/cjs/core-react/inputs/variables";
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+@use "~@itwin/core-react/lib/core-react/inputs/variables" as *;
 
 .components-filtering-input {
   display: flex;

package/lib/cjs/components-react/filtering/ResultSelector.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 "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-
 .components-result-selector {
   display: flex;
   align-items: center;
@@ -47,7 +45,7 @@
 }
 
 .components-result-selector-button:hover {
-  background-color: $buic-row-hover;
+  background-color: var(--iui-color-background-hover);
   border-radius: 2px;
 }
 
@@ -63,6 +61,6 @@
 
 .components-result-selector-button:disabled,
 .components-result-selector-button[disabled]:hover {
-  background-color: $buic-background-control-disabled;
+  background-color: var(--iui-color-background-backdrop);
   cursor: default;
 }

package/lib/cjs/components-react/iconpicker/IconPickerButton.scss

@@ -2,12 +2,11 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-@import "~@itwin/core-react/lib/cjs/core-react/z-index";
+@use "~@itwin/core-react/lib/core-react/z-index" as *;
 
 .components-iconpicker-button {
   color: var(--iui-color-text);
-  background: $buic-background-control;
+  background: var(--iui-color-background);
   box-sizing: border-box;
   border: 1px solid var(--iui-color-border-foreground);
   border-radius: var(--iui-border-radius-1);
@@ -42,7 +41,7 @@
 
   .components-iconpicker-popup-container {
     color: var(--iui-color-text);
-    background: $buic-background-control;
+    background: var(--iui-color-background);
 
     .components-iconpicker-popup-icons {
       display: grid;
@@ -57,7 +56,7 @@
         border-radius: var(--iui-border-radius-1);
         border-style: solid;
         border-color: rgba(0, 0, 0, 0.2);
-        background: $buic-background-control;
+        background: var(--iui-color-background);
         transition: scale 0.2s ease;
         cursor: pointer;
         outline: none;

package/lib/cjs/components-react/inputs/ParsedInput.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 "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-@import "~@itwin/core-react/lib/cjs/core-react/inputs/variables";
+@use "~@itwin/core-react/lib/core-react/inputs/variables" as *;
 
 .components-parsed-input {
   width: auto;

package/lib/cjs/components-react/properties/renderers/NonPrimitivePropertyRenderer.scss

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 
-@import "~@itwin/core-react/lib/cjs/core-react/style/colors";
+@use "~@itwin/core-react/lib/core-react/style/colors" as *;
 
 .components-nonprimitive-property {
   padding: 10px;

package/lib/cjs/components-react/properties/renderers/PropertyView.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 "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-
 $text-font-size: var(--iui-font-size-1);
 $text-font-color: var(--iui-color-text);
 
@@ -97,7 +95,7 @@ $text-font-color: var(--iui-color-text);
     white-space: nowrap;
     border: none;
     background: none;
-    color: var(--buic-foreground-primary);
+    color: var(--iui-color-icon-accent);
     font-size: 12px;
     cursor: pointer;
 

package/lib/cjs/components-react/properties/renderers/label/PropertyLabelRenderer.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 "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-
 @mixin rotate($amount) {
   -webkit-transform: rotate($amount);
   -ms-transform: rotate($amount);
@@ -33,7 +31,7 @@
   display: flex;
 
   .components-label-popup {
-    background: $buic-background-window;
+    background: var(--iui-color-background-hover);
     width: max-content;
     padding: 5px;
   }

package/lib/cjs/components-react/propertygrid/component/PropertyGrid.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 "~@itwin/core-react/lib/cjs/core-react/scrollbar";
+@use "~@itwin/core-react/lib/core-react/scrollbar" as *;
 
 .components-property-grid-loader {
   position: relative;

package/lib/cjs/components-react/propertygrid/component/VirtualizedPropertyGrid.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 "~@itwin/core-react/lib/cjs/core-react/scrollbar";
+@use "~@itwin/core-react/lib/core-react/scrollbar" as *;
 
 .components-virtualized-property-grid-loader {
   height: 100%;

package/lib/cjs/components-react/toolbar/Item.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 *;
 
 .components-toolbar-button-item {
   box-sizing: border-box;

package/lib/cjs/components-react/toolbar/Items.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 *;
 
 $separator-color: var(--iui-color-border-subtle);
 

package/lib/cjs/components-react/toolbar/Overflow.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 "~@itwin/core-react/lib/cjs/core-react/z-index";
-@import "variables";
+@use "~@itwin/core-react/lib/core-react/z-index" as *;
+@use "variables" as *;
 
 .components-toolbar-button-item.components-ellipsis-icon {
   position: relative;

package/lib/cjs/components-react/toolbar/OverflowPanel.scss

@@ -2,10 +2,10 @@
  * 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 *;
 
 .components-toolbar-overflow-panel {
-  background: $buic-background-1;
+  background: var(--iui-color-background);
   border-radius: var(--iui-border-radius-1);
   display: flex;
   height: unset;

package/lib/cjs/components-react/toolbar/PopupItem.scss

@@ -2,9 +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 "~@itwin/core-react/lib/cjs/core-react/z-index";
-@import "~@itwin/core-react/lib/cjs/core-react/geometry";
-@import "variables";
+@use "~@itwin/core-react/lib/core-react/z-index" as *;
+@use "~@itwin/core-react/lib/core-react/geometry" as *;
+@use "variables" as *;
 
 .components-toolbar-expandable-button {
   $triangle-width: 4px;
@@ -25,7 +25,7 @@
     @include triangle-bottom-right(
       $width: $triangle-width,
       $height: $triangle-height,
-      $color: $buic-icon-color
+      $color: var(--iui-color-text)
     );
   }
 
@@ -65,8 +65,8 @@
 .components-toolbar-popupItem_popupItemPopup {
   @include uicore-z-index(toolbar-panels);
   width: fit-content;
-  background: $buic-background-1;
-  border-color: $buic-background-5;
+  background: var(--iui-color-background);
+  border-color: var(--iui-color-background-disabled);
   border-width: 1px;
   border-style: solid;
   border-radius: var(--iui-border-radius-1);