@itwin/imodel-components-react 4.0.0-dev.9 → 4.0.0

package/lib/esm/imodel-components-react/editors/ColorEditor.js

@@ -1,125 +1,125 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module PropertyEditors
- */
-import "./ColorEditor.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { ColorDef } from "@itwin/core-common";
-import { PropertyEditorParamTypes, PropertyValueFormat, StandardEditorNames, StandardTypeNames, } from "@itwin/appui-abstract";
-import { PropertyEditorBase, PropertyEditorManager } from "@itwin/components-react";
-import { ColorPickerButton } from "../color/ColorPickerButton";
-/** ColorEditor React component that is a property editor with text input
- * @beta
- */
-export class ColorEditor extends React.PureComponent {
-    constructor() {
-        super(...arguments);
-        this._buttonElement = React.createRef();
-        /** @internal */
-        this.state = {
-            colorValue: 0,
-            readonly: false,
-            numColumns: 4,
-            availableColors: [],
-        };
-        this._onColorPick = (color) => {
-            const propertyRecord = this.props.propertyRecord;
-            this.setState({
-                colorValue: color.tbgr,
-            }, async () => {
-                // istanbul ignore else
-                if (propertyRecord && this.props.onCommit) {
-                    const propertyValue = await this.getPropertyValue();
-                    // istanbul ignore else
-                    if (propertyValue !== undefined) {
-                        this.props.onCommit({ propertyRecord, newValue: propertyValue });
-                    }
-                }
-            });
-        };
-    }
-    async getPropertyValue() {
-        const record = this.props.propertyRecord;
-        let propertyValue;
-        // istanbul ignore else
-        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
-            propertyValue = {
-                valueFormat: PropertyValueFormat.Primitive,
-                value: this.state.colorValue,
-                displayValue: "",
-            };
-        }
-        return propertyValue;
-    }
-    get htmlElement() {
-        return this._buttonElement.current;
-    }
-    get hasFocus() {
-        return document.activeElement === this._buttonElement.current;
-    }
-    setFocus() {
-        // istanbul ignore else
-        if (this._buttonElement && this._buttonElement.current && !this.state.isDisabled) {
-            this._buttonElement.current.focus();
-        }
-    }
-    /** @internal */
-    componentDidMount() {
-        this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
-    }
-    /** @internal */
-    componentDidUpdate(prevProps) {
-        if (this.props.propertyRecord !== prevProps.propertyRecord) {
-            this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
-        }
-    }
-    async setStateFromProps() {
-        const record = this.props.propertyRecord;
-        // istanbul ignore else
-        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
-            const colorValue = record.value.value;
-            let numColumns = 4;
-            const availableColors = new Array();
-            const readonly = record && undefined !== record.isReadonly ? record.isReadonly : /* istanbul ignore next */ false;
-            const isDisabled = record ? record.isDisabled : /* istanbul ignore next */ undefined;
-            if (record.property.editor && record.property.editor.params) {
-                const colorParams = record.property.editor.params.find((param) => param.type === PropertyEditorParamTypes.ColorData);
-                // istanbul ignore else
-                if (colorParams) {
-                    colorParams.colorValues.forEach((colorNumber) => {
-                        availableColors.push(ColorDef.create(colorNumber));
-                    });
-                    // istanbul ignore else
-                    if (colorParams.numColumns)
-                        numColumns = colorParams.numColumns;
-                }
-            }
-            this.setState({ colorValue, readonly, isDisabled, numColumns, availableColors }, () => {
-                if (this.props.setFocus) {
-                    this.setFocus();
-                }
-            });
-        }
-    }
-    /** @internal */
-    render() {
-        const colorDef = ColorDef.create(this.state.colorValue);
-        return (React.createElement("div", { className: classnames("components-color-editor", this.props.className), style: this.props.style },
-            React.createElement(ColorPickerButton, { ref: this._buttonElement, initialColor: colorDef, colorDefs: this.state.availableColors.length > 0 ? this.state.availableColors : [colorDef], numColumns: this.state.numColumns, disabled: this.state.isDisabled ? true : false, readonly: this.state.readonly, onColorPick: this._onColorPick, "data-testid": "components-color-editor" })));
-    }
-}
-/** Color Property Editor registered for the "number" type name and "color-picker" editor name.
- * It uses the [[ColorEditor]] React component.
- * @beta
- */
-export class ColorPropertyEditor extends PropertyEditorBase {
-    get reactNode() {
-        return React.createElement(ColorEditor, null);
-    }
-}
-PropertyEditorManager.registerEditor(StandardTypeNames.Number, ColorPropertyEditor, StandardEditorNames.ColorPicker);
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+import "./ColorEditor.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { ColorDef } from "@itwin/core-common";
+import { PropertyEditorParamTypes, PropertyValueFormat, StandardEditorNames, StandardTypeNames, } from "@itwin/appui-abstract";
+import { PropertyEditorBase, PropertyEditorManager } from "@itwin/components-react";
+import { ColorPickerButton } from "../color/ColorPickerButton";
+/** ColorEditor React component that is a property editor with text input
+ * @beta
+ */
+export class ColorEditor extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this._buttonElement = React.createRef();
+        /** @internal */
+        this.state = {
+            colorValue: 0,
+            readonly: false,
+            numColumns: 4,
+            availableColors: [],
+        };
+        this._onColorPick = (color) => {
+            const propertyRecord = this.props.propertyRecord;
+            this.setState({
+                colorValue: color.tbgr,
+            }, async () => {
+                // istanbul ignore else
+                if (propertyRecord && this.props.onCommit) {
+                    const propertyValue = await this.getPropertyValue();
+                    // istanbul ignore else
+                    if (propertyValue !== undefined) {
+                        this.props.onCommit({ propertyRecord, newValue: propertyValue });
+                    }
+                }
+            });
+        };
+    }
+    async getPropertyValue() {
+        const record = this.props.propertyRecord;
+        let propertyValue;
+        // istanbul ignore else
+        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
+            propertyValue = {
+                valueFormat: PropertyValueFormat.Primitive,
+                value: this.state.colorValue,
+                displayValue: "",
+            };
+        }
+        return propertyValue;
+    }
+    get htmlElement() {
+        return this._buttonElement.current;
+    }
+    get hasFocus() {
+        return document.activeElement === this._buttonElement.current;
+    }
+    setFocus() {
+        // istanbul ignore else
+        if (this._buttonElement && this._buttonElement.current && !this.state.isDisabled) {
+            this._buttonElement.current.focus();
+        }
+    }
+    /** @internal */
+    componentDidMount() {
+        this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
+    }
+    /** @internal */
+    componentDidUpdate(prevProps) {
+        if (this.props.propertyRecord !== prevProps.propertyRecord) {
+            this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
+        }
+    }
+    async setStateFromProps() {
+        const record = this.props.propertyRecord;
+        // istanbul ignore else
+        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
+            const colorValue = record.value.value;
+            let numColumns = 4;
+            const availableColors = new Array();
+            const readonly = record && undefined !== record.isReadonly ? record.isReadonly : /* istanbul ignore next */ false;
+            const isDisabled = record ? record.isDisabled : /* istanbul ignore next */ undefined;
+            if (record.property.editor && record.property.editor.params) {
+                const colorParams = record.property.editor.params.find((param) => param.type === PropertyEditorParamTypes.ColorData);
+                // istanbul ignore else
+                if (colorParams) {
+                    colorParams.colorValues.forEach((colorNumber) => {
+                        availableColors.push(ColorDef.create(colorNumber));
+                    });
+                    // istanbul ignore else
+                    if (colorParams.numColumns)
+                        numColumns = colorParams.numColumns;
+                }
+            }
+            this.setState({ colorValue, readonly, isDisabled, numColumns, availableColors }, () => {
+                if (this.props.setFocus) {
+                    this.setFocus();
+                }
+            });
+        }
+    }
+    /** @internal */
+    render() {
+        const colorDef = ColorDef.create(this.state.colorValue);
+        return (React.createElement("div", { className: classnames("components-color-editor", this.props.className), style: this.props.style },
+            React.createElement(ColorPickerButton, { ref: this._buttonElement, initialColor: colorDef, colorDefs: this.state.availableColors.length > 0 ? this.state.availableColors : [colorDef], numColumns: this.state.numColumns, disabled: this.state.isDisabled ? true : false, readonly: this.state.readonly, onColorPick: this._onColorPick, "data-testid": "components-color-editor" })));
+    }
+}
+/** Color Property Editor registered for the "number" type name and "color-picker" editor name.
+ * It uses the [[ColorEditor]] React component.
+ * @beta
+ */
+export class ColorPropertyEditor extends PropertyEditorBase {
+    get reactNode() {
+        return React.createElement(ColorEditor, null);
+    }
+}
+PropertyEditorManager.registerEditor(StandardTypeNames.Number, ColorPropertyEditor, StandardEditorNames.ColorPicker);
 //# sourceMappingURL=ColorEditor.js.map

package/lib/esm/imodel-components-react/editors/ColorEditor.scss

@@ -9,7 +9,7 @@ $components-color-editor-item-height: 100%;
 .components-color-editor {
   font-family: var(--iui-font-sans);
   font-size: var(--iui-font-size-1);
-  color: $buic-foreground-body;
+  color: var(--iui-color-text);
   border: none;
   box-sizing: border-box;
   height: $components-color-editor-item-height;

package/lib/esm/imodel-components-react/editors/WeightEditor.d.ts

@@ -1,48 +1,48 @@
-/** @packageDocumentation
- * @module PropertyEditors
- */
-import "./WeightEditor.scss";
-import * as React from "react";
-import { PropertyValue } from "@itwin/appui-abstract";
-import { PropertyEditorBase, PropertyEditorProps, TypeEditor } from "@itwin/components-react";
-/** @internal */
-interface WeightEditorState {
-    weightValue: number;
-    readonly: boolean;
-    isDisabled?: boolean;
-}
-/** WeightEditor React component that is a property editor for picking a weight using a [[WeightPickerButton]] component
- * @public
- */
-export declare class WeightEditor extends React.PureComponent<PropertyEditorProps, WeightEditorState> implements TypeEditor {
-    private _control;
-    private _isMounted;
-    private _availableWeights;
-    private _divElement;
-    /** @internal */
-    readonly state: Readonly<WeightEditorState>;
-    constructor(props: PropertyEditorProps);
-    getPropertyValue(): Promise<PropertyValue | undefined>;
-    get htmlElement(): HTMLElement | null;
-    get hasFocus(): boolean;
-    private setFocus;
-    private _onLineWeightPick;
-    /** @internal */
-    componentDidMount(): void;
-    /** @internal */
-    componentWillUnmount(): void;
-    /** @internal */
-    componentDidUpdate(prevProps: PropertyEditorProps): void;
-    private setStateFromProps;
-    /** @internal */
-    render(): JSX.Element;
-}
-/** Weight Property Editor registered for the "number" type name and "weight-picker" editor name.
- * It uses the [[WeightEditor]] React component.
- * @public
- */
-export declare class WeightPropertyEditor extends PropertyEditorBase {
-    get reactNode(): React.ReactNode;
-}
-export {};
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+import "./WeightEditor.scss";
+import * as React from "react";
+import { PropertyValue } from "@itwin/appui-abstract";
+import { PropertyEditorBase, PropertyEditorProps, TypeEditor } from "@itwin/components-react";
+/** @internal */
+interface WeightEditorState {
+    weightValue: number;
+    readonly: boolean;
+    isDisabled?: boolean;
+}
+/** WeightEditor React component that is a property editor for picking a weight using a [[WeightPickerButton]] component
+ * @public
+ */
+export declare class WeightEditor extends React.PureComponent<PropertyEditorProps, WeightEditorState> implements TypeEditor {
+    private _control;
+    private _isMounted;
+    private _availableWeights;
+    private _divElement;
+    /** @internal */
+    readonly state: Readonly<WeightEditorState>;
+    constructor(props: PropertyEditorProps);
+    getPropertyValue(): Promise<PropertyValue | undefined>;
+    get htmlElement(): HTMLElement | null;
+    get hasFocus(): boolean;
+    private setFocus;
+    private _onLineWeightPick;
+    /** @internal */
+    componentDidMount(): void;
+    /** @internal */
+    componentWillUnmount(): void;
+    /** @internal */
+    componentDidUpdate(prevProps: PropertyEditorProps): void;
+    private setStateFromProps;
+    /** @internal */
+    render(): JSX.Element;
+}
+/** Weight Property Editor registered for the "number" type name and "weight-picker" editor name.
+ * It uses the [[WeightEditor]] React component.
+ * @public
+ */
+export declare class WeightPropertyEditor extends PropertyEditorBase {
+    get reactNode(): React.ReactNode;
+}
+export {};
 //# sourceMappingURL=WeightEditor.d.ts.map

package/lib/esm/imodel-components-react/editors/WeightEditor.js

@@ -1,134 +1,134 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module PropertyEditors
- */
-import "./WeightEditor.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { PropertyValueFormat, StandardEditorNames, StandardTypeNames } from "@itwin/appui-abstract";
-import { PropertyEditorBase, PropertyEditorManager } from "@itwin/components-react";
-import { WeightPickerButton } from "../lineweight/WeightPickerButton";
-/** WeightEditor React component that is a property editor for picking a weight using a [[WeightPickerButton]] component
- * @public
- */
-export class WeightEditor extends React.PureComponent {
-    constructor(props) {
-        super(props);
-        this._control = null;
-        this._isMounted = false;
-        this._availableWeights = [];
-        this._divElement = React.createRef();
-        /** @internal */
-        this.state = {
-            weightValue: 0,
-            readonly: false,
-        };
-        this._onLineWeightPick = (weight) => {
-            const propertyRecord = this.props.propertyRecord;
-            this.setState({
-                weightValue: weight,
-            }, async () => {
-                // istanbul ignore else
-                if (propertyRecord && this.props.onCommit) {
-                    const propertyValue = await this.getPropertyValue();
-                    // istanbul ignore else
-                    if (propertyValue !== undefined) {
-                        this.props.onCommit({ propertyRecord, newValue: propertyValue });
-                    }
-                }
-            });
-        };
-        // TODO: add support for following if we need to specify set of weights to display
-        //  const record = this.props.propertyRecord;
-        //  if (record && record.property && record.property.editor && record.property.editor.params) {
-        //    const weightParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.ColorData) as WeightEditorParams;
-        //    // istanbul ignore else
-        //    if (weightParams) {
-        //      weightParams.weightValues.forEach((weight: number) => {
-        //        this._availableWeights.push(weight);
-        //      });
-        //    }
-        //   }
-    }
-    async getPropertyValue() {
-        const record = this.props.propertyRecord;
-        let propertyValue;
-        // istanbul ignore else
-        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
-            propertyValue = {
-                valueFormat: PropertyValueFormat.Primitive,
-                value: this.state.weightValue,
-                displayValue: "",
-            };
-        }
-        return propertyValue;
-    }
-    get htmlElement() {
-        return this._divElement.current;
-    }
-    get hasFocus() {
-        let containsFocus = false;
-        // istanbul ignore else
-        if (this._divElement.current)
-            containsFocus = this._divElement.current.contains(document.activeElement);
-        return containsFocus;
-    }
-    setFocus() {
-        // istanbul ignore else
-        if (this._control && !this.state.isDisabled) {
-            this._control.setFocus();
-        }
-    }
-    /** @internal */
-    componentDidMount() {
-        this._isMounted = true;
-        this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
-    }
-    /** @internal */
-    componentWillUnmount() {
-        this._isMounted = false;
-    }
-    /** @internal */
-    componentDidUpdate(prevProps) {
-        if (this.props.propertyRecord !== prevProps.propertyRecord) {
-            this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
-        }
-    }
-    async setStateFromProps() {
-        const record = this.props.propertyRecord;
-        let initialValue = 0;
-        // istanbul ignore else
-        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
-            initialValue = record.value.value;
-        }
-        const readonly = record && undefined !== record.isReadonly ? record.isReadonly : false;
-        const isDisabled = record ? record.isDisabled : undefined;
-        // istanbul ignore else
-        if (this._isMounted)
-            this.setState({ weightValue: initialValue, readonly, isDisabled }, () => {
-                if (this.props.setFocus) {
-                    this.setFocus();
-                }
-            });
-    }
-    /** @internal */
-    render() {
-        return (React.createElement("div", { className: classnames("components-weight-editor", this.props.className), style: this.props.style, ref: this._divElement },
-            React.createElement(WeightPickerButton, { ref: (control) => this._control = control, activeWeight: this.state.weightValue, weights: this._availableWeights.length > 0 ? /* istanbul ignore next */ this._availableWeights : undefined, disabled: this.state.isDisabled ? true : false, readonly: this.state.readonly, onLineWeightPick: this._onLineWeightPick, "data-testid": "components-weight-editor" })));
-    }
-}
-/** Weight Property Editor registered for the "number" type name and "weight-picker" editor name.
- * It uses the [[WeightEditor]] React component.
- * @public
- */
-export class WeightPropertyEditor extends PropertyEditorBase {
-    // istanbul ignore next
-    get reactNode() {
-        return React.createElement(WeightEditor, null);
-    }
-}
-PropertyEditorManager.registerEditor(StandardTypeNames.Number, WeightPropertyEditor, StandardEditorNames.WeightPicker);
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+import "./WeightEditor.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { PropertyValueFormat, StandardEditorNames, StandardTypeNames } from "@itwin/appui-abstract";
+import { PropertyEditorBase, PropertyEditorManager } from "@itwin/components-react";
+import { WeightPickerButton } from "../lineweight/WeightPickerButton";
+/** WeightEditor React component that is a property editor for picking a weight using a [[WeightPickerButton]] component
+ * @public
+ */
+export class WeightEditor extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this._control = null;
+        this._isMounted = false;
+        this._availableWeights = [];
+        this._divElement = React.createRef();
+        /** @internal */
+        this.state = {
+            weightValue: 0,
+            readonly: false,
+        };
+        this._onLineWeightPick = (weight) => {
+            const propertyRecord = this.props.propertyRecord;
+            this.setState({
+                weightValue: weight,
+            }, async () => {
+                // istanbul ignore else
+                if (propertyRecord && this.props.onCommit) {
+                    const propertyValue = await this.getPropertyValue();
+                    // istanbul ignore else
+                    if (propertyValue !== undefined) {
+                        this.props.onCommit({ propertyRecord, newValue: propertyValue });
+                    }
+                }
+            });
+        };
+        // TODO: add support for following if we need to specify set of weights to display
+        //  const record = this.props.propertyRecord;
+        //  if (record && record.property && record.property.editor && record.property.editor.params) {
+        //    const weightParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.ColorData) as WeightEditorParams;
+        //    // istanbul ignore else
+        //    if (weightParams) {
+        //      weightParams.weightValues.forEach((weight: number) => {
+        //        this._availableWeights.push(weight);
+        //      });
+        //    }
+        //   }
+    }
+    async getPropertyValue() {
+        const record = this.props.propertyRecord;
+        let propertyValue;
+        // istanbul ignore else
+        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
+            propertyValue = {
+                valueFormat: PropertyValueFormat.Primitive,
+                value: this.state.weightValue,
+                displayValue: "",
+            };
+        }
+        return propertyValue;
+    }
+    get htmlElement() {
+        return this._divElement.current;
+    }
+    get hasFocus() {
+        let containsFocus = false;
+        // istanbul ignore else
+        if (this._divElement.current)
+            containsFocus = this._divElement.current.contains(document.activeElement);
+        return containsFocus;
+    }
+    setFocus() {
+        // istanbul ignore else
+        if (this._control && !this.state.isDisabled) {
+            this._control.setFocus();
+        }
+    }
+    /** @internal */
+    componentDidMount() {
+        this._isMounted = true;
+        this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
+    }
+    /** @internal */
+    componentWillUnmount() {
+        this._isMounted = false;
+    }
+    /** @internal */
+    componentDidUpdate(prevProps) {
+        if (this.props.propertyRecord !== prevProps.propertyRecord) {
+            this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
+        }
+    }
+    async setStateFromProps() {
+        const record = this.props.propertyRecord;
+        let initialValue = 0;
+        // istanbul ignore else
+        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
+            initialValue = record.value.value;
+        }
+        const readonly = record && undefined !== record.isReadonly ? record.isReadonly : false;
+        const isDisabled = record ? record.isDisabled : undefined;
+        // istanbul ignore else
+        if (this._isMounted)
+            this.setState({ weightValue: initialValue, readonly, isDisabled }, () => {
+                if (this.props.setFocus) {
+                    this.setFocus();
+                }
+            });
+    }
+    /** @internal */
+    render() {
+        return (React.createElement("div", { className: classnames("components-weight-editor", this.props.className), style: this.props.style, ref: this._divElement },
+            React.createElement(WeightPickerButton, { ref: (control) => this._control = control, activeWeight: this.state.weightValue, weights: this._availableWeights.length > 0 ? /* istanbul ignore next */ this._availableWeights : undefined, disabled: this.state.isDisabled ? true : false, readonly: this.state.readonly, onLineWeightPick: this._onLineWeightPick, "data-testid": "components-weight-editor" })));
+    }
+}
+/** Weight Property Editor registered for the "number" type name and "weight-picker" editor name.
+ * It uses the [[WeightEditor]] React component.
+ * @public
+ */
+export class WeightPropertyEditor extends PropertyEditorBase {
+    // istanbul ignore next
+    get reactNode() {
+        return React.createElement(WeightEditor, null);
+    }
+}
+PropertyEditorManager.registerEditor(StandardTypeNames.Number, WeightPropertyEditor, StandardEditorNames.WeightPicker);
 //# sourceMappingURL=WeightEditor.js.map

package/lib/esm/imodel-components-react/editors/WeightEditor.scss

@@ -9,7 +9,7 @@ $components-weight-editor-item-height: 100%;
 .components-weight-editor {
   font-family: var(--iui-font-sans);
   font-size: var(--iui-font-size-1);
-  color: $buic-foreground-body;
+  color: var(--iui-color-text);
   border: none;
   box-sizing: border-box;
   height: $components-weight-editor-item-height;