diff --git a/packages/core/src/BaseInput/BaseInput.styles.tsx b/packages/core/src/BaseInput/BaseInput.styles.tsx
index 674b0b126d..5da087ab9f 100644
--- a/packages/core/src/BaseInput/BaseInput.styles.tsx
+++ b/packages/core/src/BaseInput/BaseInput.styles.tsx
@@ -53,28 +53,28 @@ export const { staticClasses, useClasses } = createClasses("HvBaseInput", {
invalid: {
"&:not(.disabled)": {
"& $inputBorderContainer": {
- backgroundColor: theme.colors.negative,
+ backgroundColor: theme.colors.negative_120,
},
"&:hover $inputBorderContainer": {
- backgroundColor: theme.colors.negative,
+ backgroundColor: theme.colors.negative_120,
},
"& $inputRootMultiline": {
"& $input": {
- border: `1px solid ${theme.colors.negative}`,
+ border: `1px solid ${theme.colors.negative_120}`,
},
},
"&:hover $inputRootMultiline": {
"& $input": {
- border: `1px solid ${theme.colors.negative}`,
+ border: `1px solid ${theme.colors.negative_120}`,
},
},
"&:focus-within $inputRootMultiline": {
"& $input": {
- border: `1px solid ${theme.colors.negative}`,
+ border: `1px solid ${theme.colors.negative_120}`,
},
},
},
@@ -122,7 +122,7 @@ export const { staticClasses, useClasses } = createClasses("HvBaseInput", {
left: "2px",
backgroundColor: theme.colors.atmo4,
},
- inputRootInvalid: { borderColor: theme.colors.negative },
+ inputRootInvalid: { borderColor: theme.colors.negative_120 },
inputRootReadOnly: {
borderColor: theme.colors.secondary_60,
backgroundColor: theme.colors.atmo2,
diff --git a/packages/core/src/CheckBox/CheckBox.styles.tsx b/packages/core/src/CheckBox/CheckBox.styles.tsx
index 49a18d6ece..2427dd9cbf 100644
--- a/packages/core/src/CheckBox/CheckBox.styles.tsx
+++ b/packages/core/src/CheckBox/CheckBox.styles.tsx
@@ -33,7 +33,7 @@ export const { staticClasses, useClasses } = createClasses("HvCheckBox", {
},
},
invalidContainer: {
- borderBottom: `1px solid ${theme.colors.negative}`,
+ borderBottom: `1px solid ${theme.colors.negative_120}`,
"&:hover": {
borderBottomLeftRadius: "0px",
@@ -42,7 +42,7 @@ export const { staticClasses, useClasses } = createClasses("HvCheckBox", {
},
checkbox: { height: "32px" },
invalidCheckbox: {
- borderBottom: `1px solid ${theme.colors.negative}`,
+ borderBottom: `1px solid ${theme.colors.negative_120}`,
borderBottomLeftRadius: "0px",
borderBottomRightRadius: "0px",
},
diff --git a/packages/core/src/CheckBoxGroup/CheckBoxGroup.styles.tsx b/packages/core/src/CheckBoxGroup/CheckBoxGroup.styles.tsx
index a2661e2199..7a287d3401 100644
--- a/packages/core/src/CheckBoxGroup/CheckBoxGroup.styles.tsx
+++ b/packages/core/src/CheckBoxGroup/CheckBoxGroup.styles.tsx
@@ -28,7 +28,7 @@ export const { staticClasses, useClasses } = createClasses("HvCheckBoxGroup", {
},
invalid: {
paddingBottom: theme.space.xs,
- borderBottom: `1px solid ${theme.colors.negative}`,
+ borderBottom: `1px solid ${theme.colors.negative_120}`,
},
selectAll: {},
error: {},
diff --git a/packages/core/src/DatePicker/DatePicker.styles.tsx b/packages/core/src/DatePicker/DatePicker.styles.tsx
index 4f874b069d..ef3d7b656b 100644
--- a/packages/core/src/DatePicker/DatePicker.styles.tsx
+++ b/packages/core/src/DatePicker/DatePicker.styles.tsx
@@ -28,9 +28,9 @@ export const { staticClasses, useClasses } = createClasses("HvDatePicker", {
panel: {},
dropdownHeaderInvalid: {
- border: `1px solid ${theme.colors.negative}`,
+ border: `1px solid ${theme.colors.negative_120}`,
"&:hover": {
- border: `1px solid ${theme.colors.negative}`,
+ border: `1px solid ${theme.colors.negative_120}`,
},
},
dropdownHeaderOpen: {},
diff --git a/packages/core/src/Dropdown/Dropdown.styles.tsx b/packages/core/src/Dropdown/Dropdown.styles.tsx
index dc7e1feefb..5098e27fe5 100644
--- a/packages/core/src/Dropdown/Dropdown.styles.tsx
+++ b/packages/core/src/Dropdown/Dropdown.styles.tsx
@@ -28,7 +28,7 @@ export const { staticClasses, useClasses } = createClasses("HvDropdown", {
borderRadius: theme.radii.base,
"& $dropdownHeaderInvalid": {
- border: `1px solid ${theme.colors.negative}`,
+ border: `1px solid ${theme.colors.negative_120}`,
},
},
arrow: {},
diff --git a/packages/core/src/Forms/WarningText/WarningText.styles.tsx b/packages/core/src/Forms/WarningText/WarningText.styles.tsx
index 5127cd364e..10613faa76 100644
--- a/packages/core/src/Forms/WarningText/WarningText.styles.tsx
+++ b/packages/core/src/Forms/WarningText/WarningText.styles.tsx
@@ -2,10 +2,14 @@ import { createClasses } from "@hitachivantara/uikit-react-utils";
import { theme } from "@hitachivantara/uikit-styles";
export const { staticClasses, useClasses } = createClasses("HvWarningText", {
- root: { display: "none" },
+ root: {
+ display: "none",
+ color: theme.colors.negative_120,
+ },
defaultIcon: { minWidth: "24px", width: "24px", height: "24px" },
warningText: {
- color: theme.colors.negative_120,
+ ...theme.typography.caption1,
+ color: "inherit",
paddingRight: theme.space.xs,
},
show: { display: "flex" },
@@ -19,5 +23,5 @@ export const { staticClasses, useClasses } = createClasses("HvWarningText", {
margin: 0,
overflow: "hidden",
},
- topBorder: { borderTop: `solid 1px ${theme.colors.negative}` },
+ topBorder: { borderTop: "1px solid currentcolor" },
});
diff --git a/packages/core/src/Forms/WarningText/WarningText.tsx b/packages/core/src/Forms/WarningText/WarningText.tsx
index 98658463a4..41dacf9d4d 100644
--- a/packages/core/src/Forms/WarningText/WarningText.tsx
+++ b/packages/core/src/Forms/WarningText/WarningText.tsx
@@ -6,7 +6,6 @@ import {
} from "@hitachivantara/uikit-react-utils";
import { HvBaseProps } from "../../types/generic";
-import { HvTypography } from "../../Typography";
import { setId } from "../../utils/setId";
import { HvFormElementContext } from "../FormElement";
import { staticClasses, useClasses } from "./WarningText.styles";
@@ -40,12 +39,12 @@ export interface HvWarningTextProps extends HvBaseProps {
export const HvWarningText = (props: HvWarningTextProps) => {
const {
children,
- adornment,
- isVisible,
+ adornment: adornmentProp,
+ isVisible: isVisibleProp,
classes: classesProp,
className,
- id,
- disabled,
+ id: idProp,
+ disabled: disabledProp,
disableGutter = false,
disableBorder = false,
disableAdornment = false,
@@ -57,13 +56,12 @@ export const HvWarningText = (props: HvWarningTextProps) => {
const { elementId, elementStatus, elementDisabled } =
useContext(HvFormElementContext);
- const localDisabled = disabled || elementDisabled;
- const localVisible = isVisible ?? elementStatus === "invalid";
- const localId = id ?? setId(elementId, "error");
- const showWarning = localVisible && !localDisabled;
- const content = showWarning ? children : "";
- const localAdornment = adornment || (
-
+ const disabled = disabledProp || elementDisabled;
+ const visible = isVisibleProp ?? elementStatus === "invalid";
+ const id = idProp ?? setId(elementId, "error");
+ const showWarning = visible && !disabled;
+ const adornment = adornmentProp || (
+
);
return (
@@ -77,21 +75,20 @@ export const HvWarningText = (props: HvWarningTextProps) => {
className,
)}
>
- {!disableAdornment && localAdornment}
-
- {showWarning && content}
-
+ {showWarning && children}
+
);
};
diff --git a/packages/core/src/Radio/Radio.styles.tsx b/packages/core/src/Radio/Radio.styles.tsx
index 1985864ee6..89cfb5a9fd 100644
--- a/packages/core/src/Radio/Radio.styles.tsx
+++ b/packages/core/src/Radio/Radio.styles.tsx
@@ -20,7 +20,7 @@ export const { staticClasses, useClasses } = createClasses("HvRadio", {
},
},
invalidContainer: {
- borderBottom: `1px solid ${theme.colors.negative}`,
+ borderBottom: `1px solid ${theme.colors.negative_120}`,
"&:hover": {
borderBottomLeftRadius: "0px",
@@ -41,7 +41,7 @@ export const { staticClasses, useClasses } = createClasses("HvRadio", {
},
},
invalidRadio: {
- borderBottom: `1px solid ${theme.colors.negative}`,
+ borderBottom: `1px solid ${theme.colors.negative_120}`,
"&:hover": {
borderBottomLeftRadius: "0px",
diff --git a/packages/core/src/RadioGroup/RadioGroup.styles.tsx b/packages/core/src/RadioGroup/RadioGroup.styles.tsx
index 85abe9f337..af64e40ddb 100644
--- a/packages/core/src/RadioGroup/RadioGroup.styles.tsx
+++ b/packages/core/src/RadioGroup/RadioGroup.styles.tsx
@@ -28,7 +28,7 @@ export const { staticClasses, useClasses } = createClasses("HvRadioGroup", {
},
invalid: {
paddingBottom: theme.space.xs,
- borderBottom: `1px solid ${theme.colors.negative}`,
+ borderBottom: `1px solid ${theme.colors.negative_120}`,
},
error: {},
});
diff --git a/packages/core/src/Select/Select.styles.ts b/packages/core/src/Select/Select.styles.ts
index 269cc09c78..7ddc14a1e4 100644
--- a/packages/core/src/Select/Select.styles.ts
+++ b/packages/core/src/Select/Select.styles.ts
@@ -11,7 +11,7 @@ export const { staticClasses, useClasses } = createClasses("HvSelect", {
disabled: {},
readOnly: {},
invalid: {
- border: `1px solid ${theme.colors.negative}`,
+ border: `1px solid ${theme.colors.negative_120}`,
},
labelContainer: {
display: "flex",
diff --git a/packages/core/src/SelectionList/SelectionList.styles.tsx b/packages/core/src/SelectionList/SelectionList.styles.tsx
index 6f11dcbbe5..d029e43671 100644
--- a/packages/core/src/SelectionList/SelectionList.styles.tsx
+++ b/packages/core/src/SelectionList/SelectionList.styles.tsx
@@ -32,5 +32,5 @@ export const { staticClasses, useClasses } = createClasses("HvSelectionList", {
zIndex: 1,
},
},
- invalid: { borderBottom: `1px solid ${theme.colors.negative}` },
+ invalid: { borderBottom: `1px solid ${theme.colors.negative_120}` },
});
diff --git a/packages/core/src/Switch/Switch.styles.tsx b/packages/core/src/Switch/Switch.styles.tsx
index 95ece12710..fab787a67c 100644
--- a/packages/core/src/Switch/Switch.styles.tsx
+++ b/packages/core/src/Switch/Switch.styles.tsx
@@ -18,6 +18,6 @@ export const { staticClasses, useClasses } = createClasses("HvSwitch", {
},
invalidSwitch: {
paddingBottom: "1px",
- borderBottom: `1px solid ${theme.colors.negative}`,
+ borderBottom: `1px solid ${theme.colors.negative_120}`,
},
});
diff --git a/packages/core/src/TagsInput/TagsInput.styles.tsx b/packages/core/src/TagsInput/TagsInput.styles.tsx
index 5ac6415ef1..01a25356e3 100644
--- a/packages/core/src/TagsInput/TagsInput.styles.tsx
+++ b/packages/core/src/TagsInput/TagsInput.styles.tsx
@@ -107,11 +107,11 @@ export const { staticClasses, useClasses } = createClasses("HvTagsInput", {
},
"&$error": {
- border: `1px solid ${theme.colors.negative}`,
+ border: `1px solid ${theme.colors.negative_120}`,
},
"&$invalid": {
- border: `1px solid ${theme.colors.negative}`,
+ border: `1px solid ${theme.colors.negative_120}`,
},
},
tagInputContainerRoot: {
diff --git a/packages/core/src/TimePicker/TimePicker.styles.ts b/packages/core/src/TimePicker/TimePicker.styles.ts
index 6a3fdedac1..44ac3c6910 100644
--- a/packages/core/src/TimePicker/TimePicker.styles.ts
+++ b/packages/core/src/TimePicker/TimePicker.styles.ts
@@ -27,9 +27,9 @@ export const { useClasses, staticClasses } = createClasses("HvTimePicker", {
dropdownHeader: {},
dropdownHeaderOpen: {},
dropdownHeaderInvalid: {
- border: `1px solid ${theme.colors.negative}`,
+ border: `1px solid ${theme.colors.negative_120}`,
"&:hover": {
- border: `1px solid ${theme.colors.negative}`,
+ border: `1px solid ${theme.colors.negative_120}`,
},
},
dropdownPanel: {},
diff --git a/packages/styles/src/themes/ds3.ts b/packages/styles/src/themes/ds3.ts
index 7e87c1cd2e..a896a0b756 100644
--- a/packages/styles/src/themes/ds3.ts
+++ b/packages/styles/src/themes/ds3.ts
@@ -1422,7 +1422,7 @@ const ds3 = makeTheme((theme) => ({
classes: {
warningText: {
...theme.typography.body,
- color: theme.colors.negative,
+ color: "inherit",
},
topGutter: { paddingTop: "8px" },
defaultIcon: {