diff --git a/packages/main/src/CheckBox.js b/packages/main/src/CheckBox.js
index 89baaabba0ca..f5e3ab8bdc78 100644
--- a/packages/main/src/CheckBox.js
+++ b/packages/main/src/CheckBox.js
@@ -9,7 +9,11 @@ import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
import "@ui5/webcomponents-icons/dist/accept.js";
import Icon from "./Icon.js";
import Label from "./Label.js";
-import { VALUE_STATE_ERROR, VALUE_STATE_WARNING } from "./generated/i18n/i18n-defaults.js";
+import {
+ VALUE_STATE_ERROR,
+ VALUE_STATE_WARNING,
+ VALUE_STATE_SUCCESS,
+} from "./generated/i18n/i18n-defaults.js";
// Template
import CheckBoxTemplate from "./generated/templates/CheckBoxTemplate.lit.js";
@@ -88,8 +92,8 @@ const metadata = {
*
Warning
* Error
* None
(default)
- * Negative
- * Transparent
+ * Success
+ * Information
*
*
* @type {ValueState}
@@ -321,6 +325,7 @@ class CheckBox extends UI5Element {
return {
"Error": i18nBundle.getText(VALUE_STATE_ERROR),
"Warning": i18nBundle.getText(VALUE_STATE_WARNING),
+ "Success": i18nBundle.getText(VALUE_STATE_SUCCESS),
};
}
diff --git a/packages/main/src/themes/CheckBox.css b/packages/main/src/themes/CheckBox.css
index be0857e337b0..3a911f28bda9 100644
--- a/packages/main/src/themes/CheckBox.css
+++ b/packages/main/src/themes/CheckBox.css
@@ -67,6 +67,13 @@
color: var(--sapField_InformationColor);
}
+:host([value-state="Success"]) .ui5-checkbox-inner,
+:host([value-state="Success"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner {
+ background: var(--sapField_SuccessBackground);
+ border: var(--_ui5_checkbox_inner_success_border);
+ color: var(--sapField_SuccessColor);
+}
+
:host([value-state="Warning"]) .ui5-checkbox-icon {
color: var(--_ui5_checkbox_checkmark_warning_color);
}
diff --git a/packages/main/src/themes/base/CheckBox-parameters.css b/packages/main/src/themes/base/CheckBox-parameters.css
index 8aeb20b7662a..a94862fc11ef 100644
--- a/packages/main/src/themes/base/CheckBox-parameters.css
+++ b/packages/main/src/themes/base/CheckBox-parameters.css
@@ -8,6 +8,7 @@
--_ui5_checkbox_inner_error_border: 0.125rem solid var(--sapField_InvalidColor);
--_ui5_checkbox_inner_warning_border: 0.125rem solid var(--sapField_WarningColor);
--_ui5_checkbox_inner_information_border: 0.125rem solid var(--sapField_InformationColor);
+--_ui5_checkbox_inner_success_border: var(--sapField_BorderWidth) solid var(--sapField_SuccessColor);
--_ui5_checkbox_inner_readonly_border: 0.125rem solid var(--sapField_ReadOnly_BorderColor);
--_ui5_checkbox_checkmark_warning_color: var(--sapField_TextColor);
--_ui5_checkbox_checkmark_color: var(--sapSelectedColor);