@elyra/canvas 12.44.0 → 13.0.0-alpha.0

package/src/common-properties/controls/dropdown/dropdown.jsx

@@ -17,7 +17,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { SelectItem, Select, Dropdown, ComboBox } from "carbon-components-react";
+import { SelectItem, Select, Dropdown, ComboBox, Layer } from "@carbon/react";
 import { isEqual, isEmpty } from "lodash";
 import * as ControlUtils from "./../../util/control-utils";
 import ValidationMessage from "./../../components/validation-message";
@@ -219,47 +219,56 @@ class DropDown extends React.Component {
 			for (const option of dropDown.options) {
 				options.push(<SelectItem text={option.label} key={this.id + "-" + option.value} value={option.value} />);
 			}
-			dropdownComponent = (<Select
-				id={this.id}
-				hideLabel
-				inline
-				labelText={this.props.control.label ? this.props.control.label.text : ""}
-				disabled={this.props.state === STATES.DISABLED || this.disableEmptyListDropdown}
-				onChange={this.handleChange}
-				value={selection}
-				light={this.props.controller.getLight() && this.props.control.light}
-			>
-				{ options }
-			</Select>);
+			dropdownComponent = (
+				<Layer level={this.props.controller.getLight() && this.props.control.light ? 1 : 0}>
+					<Select
+						id={this.id}
+						hideLabel
+						inline
+						labelText={this.props.control.label ? this.props.control.label.text : ""}
+						disabled={this.props.state === STATES.DISABLED || this.disableEmptyListDropdown}
+						onChange={this.handleChange}
+						value={selection}
+					>
+						{ options }
+					</Select>
+				</Layer>
+			);
 		} else if (this.props.control.customValueAllowed) { // combobox dropdown not allowed in tables
-			dropdownComponent = (<ComboBox
-				{...validationProps}
-				ariaLabel={this.props.control.label ? this.props.control.label.text : ""}
-				id={`${ControlUtils.getDataId(this.props.propertyId)}-dropdown`}
-				disabled={this.props.state === STATES.DISABLED || this.disableEmptyListDropdown}
-				placeholder={dropDown.selectedOption.label}
-				selectedItem={dropDown.selectedOption.label}
-				items={dropDown.options}
-				onChange={this.handleComboOnChange}
-				onInputChange={this.handleOnInputChange}
-				light={this.props.controller.getLight() && this.props.control.light}
-				translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
-				titleText={this.props.controlItem}
-			/>);
+			dropdownComponent = (
+				<Layer level={this.props.controller.getLight() && this.props.control.light ? 1 : 0}>
+					<ComboBox
+						{...validationProps}
+						aria-label={this.props.control.label ? this.props.control.label.text : ""}
+						id={`${ControlUtils.getDataId(this.props.propertyId)}-dropdown`}
+						disabled={this.props.state === STATES.DISABLED || this.disableEmptyListDropdown}
+						placeholder={dropDown.selectedOption.label}
+						selectedItem={dropDown.selectedOption.label}
+						items={dropDown.options}
+						onChange={this.handleComboOnChange}
+						onInputChange={this.handleOnInputChange}
+						translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
+						titleText={this.props.controlItem}
+					/>
+				</Layer>
+			);
 		} else {
-			dropdownComponent = (<Dropdown
-				{...validationProps}
-				id={`${ControlUtils.getDataId(this.props.propertyId)}-dropdown`}
-				disabled={this.props.state === STATES.DISABLED || this.disableEmptyListDropdown}
-				type="default"
-				items={dropDown.options}
-				onChange={this.handleChange}
-				selectedItem={dropDown.selectedOption}
-				label={this.emptyLabel}
-				light={this.props.controller.getLight() && this.props.control.light}
-				translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
-				titleText={this.props.controlItem}
-			/>);
+			dropdownComponent = (
+				<Layer level={this.props.controller.getLight() && this.props.control.light ? 1 : 0}>
+					<Dropdown
+						{...validationProps}
+						id={`${ControlUtils.getDataId(this.props.propertyId)}-dropdown`}
+						disabled={this.props.state === STATES.DISABLED || this.disableEmptyListDropdown}
+						type="default"
+						items={dropDown.options}
+						onChange={this.handleChange}
+						selectedItem={dropDown.selectedOption}
+						label={this.emptyLabel}
+						translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
+						titleText={this.props.controlItem}
+					/>
+				</Layer>
+			);
 		}
 
 		return (

package/src/common-properties/controls/dropdown/dropdown.scss

@@ -15,7 +15,7 @@
  */
 
 .properties-dropdown {
-	.bx--list-box--expanded .bx--list-box__menu {
+	.cds--list-box--expanded .cds--list-box__menu {
 		margin-bottom: 1px; // Show dropdown menu border above Save/Cancel buttons
 	}
 	&.hide {
@@ -25,37 +25,32 @@
 }
 .properties-table-cell-control {
 	>.properties-dropdown {
-		width: 100%;
-		.bx--select.bx--select--inline {
-			width: 100%;
-			.bx--select-input--inline__wrapper {
+		.cds--select.cds--select--inline {
+			.cds--select-input--inline__wrapper {
 				width: 100%;
 			}
 			svg {
 				right: 0;
 			}
 		}
-		.bx--select-input {
+		.cds--select-input {
 			width: inherit; // Override carbon default width: auto
 			background-color: transparent; // Override carbon default background-color: #f4f4f4;
 			padding: 0 1.25rem 0 0;
-			box-shadow: 0 2px 0 0 $interactive-01;
-			&:hover {
-				background: unset;
-			}
+			box-shadow: 0 2px 0 0 $button-primary;
 			&:focus {
 				outline: unset;
 			}
 
 		}
 		&.error {
-			.bx--select-input {
-				box-shadow: 0 2px 0 0 $support-01;
+			.cds--select-input {
+				box-shadow: 0 2px 0 0 $support-error;
 			}
 		}
 		&.warning {
-			.bx--select-input {
-				box-shadow: 0 2px 0 0 $support-03;
+			.cds--select-input {
+				box-shadow: 0 2px 0 0 $support-warning;
 			}
 		}
 	}

package/src/common-properties/controls/expression/expression-builder/expression-builder.scss

@@ -105,7 +105,7 @@ $operator-margin: 50%;
 		width: $operator-width;
 		padding: 0;
 		.properties-operator-button-label {
-			margin: 0 auto;
+			margin: auto;
 		}
 	}
 }
@@ -123,10 +123,10 @@ $operator-margin: 50%;
 	padding-bottom: $spacing-06;
 }
 .properties-expression-table-dropdown-header {
-	@include carbon--type-style("label-01");
+	@include type-style("label-01");
 	padding-bottom: $spacing-02;
 }
 
-.properties-primaryTabs .bx--tabs-trigger {
+.properties-primaryTabs .cds--tabs-trigger {
 	margin-bottom: 5px;
 }

package/src/common-properties/controls/expression/expression-builder/expression-select-field-function.jsx

@@ -16,9 +16,9 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import { Add16 } from "@carbon/icons-react";
-import { Button } from "carbon-components-react";
-import { Switch, ContentSwitcher, Dropdown } from "carbon-components-react";
+import { Add } from "@carbon/react/icons";
+import { Button } from "@carbon/react";
+import { Switch, ContentSwitcher, Dropdown } from "@carbon/react";
 import FlexibleTable from "./../../../components/flexible-table/flexible-table";
 import TruncatedContentTooltip from "./../../../components/truncated-content-tooltip";
 import { MESSAGE_KEYS, EXPRESSION_TABLE_ROWS, SORT_DIRECTION, ROW_SELECTION } from "./../../../constants/constants";
@@ -276,9 +276,9 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 				className="expression-add-field-button properties-expr-table-cell"
 				onClick={this.handleAddButtonClick.bind(this, index, tableType)}
 				kind="ghost"
-				size="small"
+				size="sm"
 			>
-				<Add16 aria-label={formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_ADD_COLUMN)} />
+				<Add aria-label={formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_ADD_COLUMN)} />
 			</Button>
 		);
 		return addValueButtonContent;

package/src/common-properties/controls/expression/expression-builder/expression-select-operator.jsx

@@ -16,7 +16,7 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import { Button } from "carbon-components-react";
+import { Button } from "@carbon/react";
 
 import Tooltip from "./../../../../tooltip/tooltip";
 import classNames from "classnames";
@@ -50,7 +50,7 @@ export default class ExpressionSelectOperator extends React.Component {
 							<Button
 								className={classNames("properties-operator-button", { "first": (index % 2 === 0),
 									"second": !(index % 2 === 0) })}
-								size="small"
+								size="sm"
 								kind="tertiary"
 								onClick={this.onOperatorClick.bind(this, operator.value)}
 							>

package/src/common-properties/controls/expression/expression-toggle/expression-toggle.jsx

@@ -18,8 +18,8 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { injectIntl } from "react-intl";
-import { Button } from "carbon-components-react";
-import { Maximize16, Minimize16 } from "@carbon/icons-react";
+import { Button } from "@carbon/react";
+import { Maximize, Minimize } from "@carbon/react/icons";
 import { formatMessage } from "../../../util/property-utils";
 import { MESSAGE_KEYS } from "../../../constants/constants";
 
@@ -36,9 +36,9 @@ class ExpressionToggle extends React.Component {
 					{this.props.enableMaximize ? (<Button
 						className="maximize"
 						type="button"
-						size="small"
+						size="sm"
 						kind="ghost"
-						renderIcon={Maximize16}
+						renderIcon={Maximize}
 						hasIconOnly
 						iconDescription={formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_MAXIMIZE_LABEL)}
 						onClick={() => {
@@ -53,16 +53,17 @@ class ExpressionToggle extends React.Component {
 					/>) : (<Button
 						type="button"
 						className="minimize"
-						size="small"
+						size="sm"
 						kind="ghost"
 						hasIconOnly
-						renderIcon={Minimize16}
+						renderIcon={Minimize}
 						iconDescription={formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_MINIMIZE_LABEL)}
 						onClick={() => this.props.controller.clearActiveTearsheet()}
 					/>)
 					}
 				</div>
-			</div>);
+			</div>
+		);
 	}
 }
 ExpressionToggle.propTypes = {

package/src/common-properties/controls/expression/expression-toggle/expression-toggle.scss

@@ -4,7 +4,7 @@
 	.properties-expression-toggle-absolute {
 		position: absolute;
 		width: 100%;
-		button.bx--btn.bx--btn--icon-only {
+		button.cds--btn.cds--btn--icon-only {
 			position: absolute;
 			right: 0;
 		}

package/src/common-properties/controls/expression/expression.jsx

@@ -20,7 +20,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import Icon from "./../../../icons/icon.jsx";
-import { Button } from "carbon-components-react";
+import { Button } from "@carbon/react";
 import classNames from "classnames";
 import { isEqual, concat } from "lodash";
 import ValidationMessage from "./../../components/validation-message";
@@ -28,7 +28,7 @@ import WideFlyout from "./../../components/wide-flyout";
 import { formatMessage } from "./../../util/property-utils";
 import ExpressionBuilder from "./expression-builder/expression-builder";
 import { MESSAGE_KEYS, CONDITION_MESSAGE_TYPE, DEFAULT_VALIDATION_MESSAGE } from "./../../constants/constants";
-import { Calculator24 } from "@carbon/icons-react";
+import { Calculator } from "@carbon/react/icons";
 import * as ControlUtils from "./../../util/control-utils";
 import { STATES } from "./../../constants/constants";
 import { get } from "lodash";
@@ -319,9 +319,10 @@ class ExpressionControl extends React.Component {
 		}
 
 		const reactIntl = this.props.controller.getReactIntl();
+		const Calculator24 = React.forwardRef((props, ref) => <Calculator ref={ref} size={24} {...props} />);
 
 		const button = this._showBuilderButton() ? (
-			<Button kind="ghost" size="small"
+			<Button kind="ghost" size="sm"
 				className="properties-expression-button"
 				disabled={this.props.state === STATES.DISABLED}
 				onClick={this.showExpressionBuilder}

package/src/common-properties/controls/expression/expression.scss

@@ -22,7 +22,7 @@
 		height: inherit;
 		width: 100%;
 		background: $field-02;
-		color: $text-01;
+		color: $text-primary;
 
 		.cm-gutters {
 			border-right: none;
@@ -32,16 +32,16 @@
 		.cm-content {
 			.cm-line {
 				padding-left: $spacing-03;
-				@include carbon--type-style("code-02");
+				@include type-style("code-02");
 			}
 			.cm-placeholder {
-				@include carbon--type-style("code-02");
+				@include type-style("code-02");
 			}
 			.cm-cursor {
-				border-left: 1px solid $text-01;
+				border-left: 1px solid $text-primary;
 			}
 			.cm-lineNumbers .cm-gutterElement {
-				@include carbon--type-style("body-short-01");
+				@include type-style("body-short-01");
 			}
 		}
 
@@ -53,24 +53,24 @@
 		}
 	}
 
-	.cm-line .cm-keyword { color: $link-01; }
+	.cm-line .cm-keyword { color: $link-primary; }
 
-	.cm-line .cm-number { color: $text-02; }
+	.cm-line .cm-number { color: $text-secondary; }
 
-	.cm-line .cm-def { color: $support-01; }
+	.cm-line .cm-def { color: $support-error; }
 
-	.cm-line .cm-comment { color: $support-02; }
+	.cm-line .cm-comment { color: $support-success; }
 
 	.cm-line .cm-variable,
 	.cm-line .cm-punctuation,
 	.cm-line .cm-property,
 	.cm-line .cm-operator {
-		color: $text-01;
+		color: $text-primary;
 	}
 
 	.cm-line .cm-string { color: $text-error; }
 
-	.cm-line .cm-meta { color: $ui-01; }
+	.cm-line .cm-meta { color: $layer-01; }
 }
 
 .elyra-CodeMirror.disabled {
@@ -81,18 +81,18 @@
 
 .elyra-CodeMirror.warning {
 	.cm-editor {
-		border: $spacing-01 solid $support-03;
+		border: $spacing-01 solid $support-warning;
 	}
 }
 
 .elyra-CodeMirror.error {
 	.cm-editor {
-		border: $spacing-01 solid $support-01;
+		border: $spacing-01 solid $support-error;
 	}
 }
 
 .properties-expression-editor {
-	border: 1px solid $ui-03;
+	border: 1px solid $layer-accent-01;
 	&.disabled {
 		opacity: 0.5;
 	}
@@ -132,7 +132,7 @@
 	position: relative;
 	height: $spacing-07;
 	.properties-expression-title {
-		@include carbon--type-style("label-01");
+		@include type-style("label-01");
 		position: absolute;
 		bottom: 5px;
 		left: 0;
@@ -144,11 +144,10 @@
 	}
 }
 
-.properties-expression-button.bx--btn--sm.bx--btn--ghost {
+.properties-expression-button {
 	padding: $spacing-02;
 	svg {
 		height: 20px;
 		width: 20px;
-		margin-left: 0;
 	}
 }

package/src/common-properties/controls/multiselect/multiselect.jsx

@@ -17,7 +17,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { MultiSelect, FilterableMultiSelect } from "carbon-components-react";
+import { MultiSelect, FilterableMultiSelect, Layer } from "@carbon/react";
 import * as ControlUtils from "./../../util/control-utils";
 import ValidationMessage from "./../../components/validation-message";
 import classNames from "classnames";
@@ -109,7 +109,7 @@ class MultiSelectControl extends React.Component {
 
 	handleOnChange(evt) {
 		const controlValues = [];
-		for (let i = 0; i < evt.selectedItems.length; i++) {
+		for (let i = 0; i < evt?.selectedItems?.length; i++) {
 			controlValues.push(evt.selectedItems[i].id);
 		}
 		this.props.controller.updatePropertyValue(this.props.propertyId, controlValues);
@@ -144,31 +144,37 @@ class MultiSelectControl extends React.Component {
 
 		let dropdownComponent = null;
 		if (this.props.control.filterable) {
-			dropdownComponent = (<FilterableMultiSelect
-				{...validationProps}
-				id={`${ControlUtils.getDataId(this.props.propertyId)}-multiselect-filterable`}
-				disabled={this.props.state === STATES.DISABLED}
-				translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
-				items={multiSelectDropdown.options}
-				initialSelectedItems={multiSelectDropdown.selectedOptions}
-				onChange={this.handleOnChange}
-				placeholder={label}
-				titleText={this.props.tableControl ? null : this.props.controlItem}
-				light={this.props.controller.getLight() && this.props.control.light}
-			/>);
+			dropdownComponent = (
+				<Layer level={this.props.controller.getLight() && this.props.control.light ? 1 : 0}>
+					<FilterableMultiSelect
+						{...validationProps}
+						id={`${ControlUtils.getDataId(this.props.propertyId)}-multiselect-filterable`}
+						disabled={this.props.state === STATES.DISABLED}
+						translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
+						items={multiSelectDropdown.options}
+						initialSelectedItems={multiSelectDropdown.selectedOptions}
+						onChange={this.handleOnChange}
+						placeholder={label}
+						titleText={this.props.tableControl ? null : this.props.controlItem}
+					/>
+				</Layer>
+			);
 		} else {
-			dropdownComponent = (<MultiSelect
-				{...validationProps}
-				id={`${ControlUtils.getDataId(this.props.propertyId)}-multiselect`}
-				disabled={this.props.state === STATES.DISABLED}
-				translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
-				items={multiSelectDropdown.options}
-				selectedItems={multiSelectDropdown.selectedOptions}
-				onChange={this.handleOnChange}
-				label={label}
-				titleText={this.props.tableControl ? null : this.props.controlItem}
-				light={this.props.controller.getLight() && this.props.control.light}
-			/>);
+			dropdownComponent = (
+				<Layer level={this.props.controller.getLight() && this.props.control.light ? 1 : 0}>
+					<MultiSelect
+						{...validationProps}
+						id={`${ControlUtils.getDataId(this.props.propertyId)}-multiselect`}
+						disabled={this.props.state === STATES.DISABLED}
+						translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
+						items={multiSelectDropdown.options}
+						selectedItems={multiSelectDropdown.selectedOptions}
+						onChange={this.handleOnChange}
+						label={label}
+						titleText={this.props.tableControl ? null : this.props.controlItem}
+					/>
+				</Layer>
+			);
 		}
 
 		return (

package/src/common-properties/controls/multiselect/multiselect.scss

@@ -17,7 +17,7 @@
 
 .properties-table-cell-control { // overrides when in a table cell
 	.properties-dropdown {
-		.bx--multi-select__wrapper > label { // hidden label should not take any space in table cell
+		.cds--multi-select__wrapper > label { // hidden label should not take any space in table cell
 			display: none;
 		}
 	}

package/src/common-properties/controls/numberfield/numberfield.jsx

@@ -17,14 +17,14 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { NumberInput, Button } from "carbon-components-react";
+import { NumberInput, Button, Layer } from "@carbon/react";
 import ValidationMessage from "./../../components/validation-message";
 import * as ControlUtils from "./../../util/control-utils";
 import { formatMessage } from "./../../util/property-utils";
 import { STATES, MESSAGE_KEYS } from "./../../constants/constants.js";
 import classNames from "classnames";
 import { ControlType } from "./../../constants/form-constants";
-import { Shuffle16 } from "@carbon/icons-react";
+import { Shuffle } from "@carbon/react/icons";
 import { has } from "lodash";
 
 class NumberfieldControl extends React.Component {
@@ -69,8 +69,8 @@ class NumberfieldControl extends React.Component {
 		}
 	}
 
-	handleChange(evt, direction) {
-		if (typeof direction === "string") {
+	handleChange(evt, { value, direction }) {
+		if (this.props.control.controlType !== ControlType.NUMBERFIELD && typeof direction === "string") {
 			this.onDirection(direction);
 			return;
 		}
@@ -107,7 +107,7 @@ class NumberfieldControl extends React.Component {
 			this.props.controller.updateErrorMessage(this.props.propertyId, null);
 		}
 
-		const actualValue = evt.target.value;
+		const actualValue = value;
 		if (typeof actualValue === "undefined" || actualValue === null || actualValue === "") {
 			this.props.controller.updatePropertyValue(this.props.propertyId, null);
 		} else {
@@ -139,7 +139,8 @@ class NumberfieldControl extends React.Component {
 				onClick={this.generateNumber}
 				disabled={disabled}
 				kind="tertiary"
-				renderIcon={Shuffle16}
+				size="md"
+				renderIcon={Shuffle}
 				tooltipPosition="bottom"
 				tooltipAlignment="end"
 				iconDescription={this.props.control.label.numberGenerator.text}
@@ -155,22 +156,23 @@ class NumberfieldControl extends React.Component {
 		const validationProps = ControlUtils.getValidationProps(this.props.messageInfo, this.props.tableControl);
 		return (
 			<div className={className} data-id={ControlUtils.getDataId(this.props.propertyId)}>
-				<NumberInput
-					{...validationProps}
-					ref= { (ref) => (this.numberInput = ref)}
-					id={this.id}
-					onChange={this.handleChange.bind(this)}
-					disabled={disabled}
-					step={this.props.control.increment}
-					value={controlValue}
-					placeholder={this.props.control.additionalText}
-					label={this.props.controlItem}
-					hideLabel={this.props.tableControl}
-					allowEmpty
-					light={this.props.controller.getLight() && this.props.control.light}
-					hideSteppers={this.props.tableControl || (this.props.control.controlType === ControlType.NUMBERFIELD)}
-					onInput={this.onInput.bind(this)}
-				/>
+				<Layer className="properties-numberfield-layer" level={this.props.controller.getLight() && this.props.control.light ? 1 : 0}>
+					<NumberInput
+						{...validationProps}
+						ref= { (ref) => (this.numberInput = ref)}
+						id={this.id}
+						onChange={this.handleChange.bind(this)}
+						disabled={disabled}
+						step={this.props.control.increment}
+						value={controlValue}
+						placeholder={this.props.control.additionalText}
+						label={this.props.controlItem}
+						hideLabel={this.props.tableControl}
+						allowEmpty
+						hideSteppers={this.props.tableControl || (this.props.control.controlType === ControlType.NUMBERFIELD)}
+						onInput={this.onInput.bind(this)}
+					/>
+				</Layer>
 				{numberGenerator}
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />
 			</div>

package/src/common-properties/controls/numberfield/numberfield.scss

@@ -16,18 +16,11 @@
 
 
 .properties-numberfield {
-	.bx--form-item { // carbon overrides
-		margin-right: 0;
-		margin-bottom: 0;
+	.properties-numberfield-layer {
+		inline-size: 100%;
 	}
 	.properties-number-generator {
 		margin-left: $spacing-05;
-		right: $spacing-01;
-		// Button dimensions 40x40 px
-		width: $spacing-08;
-		min-height: $spacing-08;
-		padding-left: $spacing-04;
-		padding-right: $spacing-04;
 	}
 	&.numberfield-with-number-generator {
 		width: 100%;
@@ -44,19 +37,19 @@
 
 .properties-table-cell-control { // overrides when in a table cell
 	.properties-numberfield {
-		.bx--number[data-invalid] { // carbon override to not display error
-			.bx--form-requirement { // carbon override to not display error
+		.cds--number[data-invalid] { // carbon override to not display error
+			.cds--form-requirement { // carbon override to not display error
 				display: none;
 			}
 		}
 		&.error {
 			input[type="number"]:not([disabled]), input[type="number"]:focus:not([disabled]) {
-				box-shadow: 0 2px 0 0 $support-01;
+				box-shadow: 0 2px 0 0 $support-error;
 			}
 		}
 		&.warning {
 			input[type="number"]:not([disabled]), input[type="number"]:focus:not([disabled]) {
-				box-shadow: 0 2px 0 0 $support-03;
+				box-shadow: 0 2px 0 0 $support-warning;
 			}
 		}
 		input[type="number"] { //override styling from carbon
@@ -64,7 +57,7 @@
 			padding: 0;
 			height: 1.5rem;
 		}
-		.bx--number input[type="number"] {
+		.cds--number input[type="number"] {
 			min-width: 0;
 		}
 	}