diff --git a/packages/main/src/themes/CheckBox.css b/packages/main/src/themes/CheckBox.css index c3ef5a003c52..3dee8dcd3bff 100644 --- a/packages/main/src/themes/CheckBox.css +++ b/packages/main/src/themes/CheckBox.css @@ -35,7 +35,7 @@ :host([readonly]:not([value-state="Warning"]):not([value-state="Error"])) .ui5-checkbox-inner { background: var(--sapField_ReadOnly_Background); border: var(--_ui5_checkbox_inner_readonly_border); - color: var(--sapContent_NonInteractiveIconColor); + color: var(--sapField_TextColor); } /* wrap */ @@ -63,59 +63,50 @@ /* value states */ :host([value-state="Error"]) .ui5-checkbox-inner, -:host([value-state="Error"]) .ui5-checkbox--hoverable .ui5-checkbox-inner:hover { +:host([value-state="Error"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner { background: var(--sapField_InvalidBackground); border: var(--_ui5_checkbox_inner_error_border); color: var(--sapField_InvalidColor); } -:host([value-state="Error"]) .ui5-checkbox--hoverable .ui5-checkbox-inner:hover { - box-shadow: var(--_ui5_checkbox_inner_error_box_shadow); +:host([value-state="Error"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner { background: var(--_ui5_checkbox_inner_error_background_hover); } :host([value-state="Warning"]) .ui5-checkbox-inner, -:host([value-state="Warning"]) .ui5-checkbox--hoverable .ui5-checkbox-inner:hover { +:host([value-state="Warning"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner { background: var(--sapField_WarningBackground); border: var(--_ui5_checkbox_inner_warning_border); color: var(--_ui5_checkbox_inner_warning_color); } -:host([value-state="Warning"]) .ui5-checkbox--hoverable .ui5-checkbox-inner:hover { - box-shadow: var(--_ui5_checkbox_inner_warning_box_shadow); +:host([value-state="Warning"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner { background: var(--_ui5_checkbox_inner_warning_background_hover); } :host([value-state="Information"]) .ui5-checkbox-inner, -:host([value-state="Information"]) .ui5-checkbox--hoverable .ui5-checkbox-inner:hover { +:host([value-state="Information"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner { background: var(--sapField_InformationBackground); border: var(--_ui5_checkbox_inner_information_border); color: var(--_ui5_checkbox_inner_information_color); } -:host([value-state="Information"]) .ui5-checkbox--hoverable .ui5-checkbox-inner:hover { - box-shadow: var(--_ui5_checkbox_inner_information_box_shadow); +:host([value-state="Information"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner { background: var(--_ui5_checkbox_inner_information_background_hover); } :host([value-state="Success"]) .ui5-checkbox-inner, -:host([value-state="Success"]) .ui5-checkbox--hoverable .ui5-checkbox-inner:hover { +: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="Success"]) .ui5-checkbox--hoverable .ui5-checkbox-inner:hover { - box-shadow: var(--_ui5_checkbox_inner_success_box_shadow); +:host([value-state="Success"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner { background: var(--_ui5_checkbox_inner_success_background_hover); } -:host(:not([value-state])) .ui5-checkbox--hoverable .ui5-checkbox-inner:hover, -:host([value-state="None"]) .ui5-checkbox--hoverable .ui5-checkbox-inner:hover { - box-shadow: var(--_ui5_checkbox_inner_default_box_shadow); -} - :host([value-state="Warning"]) .ui5-checkbox-icon, :host([value-state="Warning"][indeterminate]) .ui5-checkbox-inner::after { color: var(--_ui5_checkbox_checkmark_warning_color); @@ -164,7 +155,6 @@ /* hover */ :host(:hover:not([disabled])) { background: var(--_ui5_checkbox_outer_hover_background); - box-shadow: var(--_ui5_checkbox_box_shadow); } .ui5-checkbox--hoverable .ui5-checkbox-label:hover { @@ -172,15 +162,15 @@ } /* hover, not active, not checked */ -:host(:not([active]):not([checked]):not([value-state])) .ui5-checkbox--hoverable .ui5-checkbox-inner:hover, -:host(:not([active]):not([checked])[value-state="None"]) .ui5-checkbox--hoverable .ui5-checkbox-inner:hover { +:host(:not([active]):not([checked]):not([value-state])) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner, +:host(:not([active]):not([checked])[value-state="None"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner { background: var(--_ui5_checkbox_hover_background); border-color: var(--_ui5_checkbox_inner_hover_border_color); } /* hover, not active, checked */ -:host(:not([active])[checked]:not([value-state])) .ui5-checkbox--hoverable .ui5-checkbox-inner:hover, -:host(:not([active])[checked][value-state="None"]) .ui5-checkbox--hoverable .ui5-checkbox-inner:hover { +:host(:not([active])[checked]:not([value-state])) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner, +:host(:not([active])[checked][value-state="None"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner { background: var(--_ui5_checkbox_hover_background); border-color: var(--_ui5_checkbox_inner_hover_checked_border_color); } diff --git a/packages/main/src/themes/sap_horizon/CheckBox-parameters.css b/packages/main/src/themes/sap_horizon/CheckBox-parameters.css index 6a9c90123215..4a86dba60bd7 100644 --- a/packages/main/src/themes/sap_horizon/CheckBox-parameters.css +++ b/packages/main/src/themes/sap_horizon/CheckBox-parameters.css @@ -11,34 +11,29 @@ --_ui5_checkbox_inner_border_radius: var(--sapField_BorderCornerRadius); --_ui5_checkbox_checkmark_color: var(--sapContent_Selected_ForegroundColor); /* hover & active */ - --_ui5_checkbox_inner_default_box_shadow: var(--sapContent_Interaction_Shadow); - --_ui5_checkbox_hover_background: var(--sapField_Hover_Background); + --_ui5_checkbox_hover_background: var(--sapContent_Selected_Hover_Background); --_ui5_checkbox_inner_hover_border_color: var(--sapField_Hover_BorderColor); - --_ui5_checkbox_hover_background: var(--sapField_Hover_Background); --_ui5_checkbox_inner_hover_checked_border_color: var(--sapField_Hover_BorderColor); --_ui5_checkbox_inner_selected_border_color: var(--sapField_Hover_BorderColor); --_ui5_checkbox_inner_active_border_color: var(--sapField_Hover_BorderColor); - --_ui5_checkbox_active_background: var(--sapField_Hover_Background); + --_ui5_checkbox_active_background: var(--sapContent_Selected_Hover_Background); --_ui5_checkbox_inner_selected_border_color: var(--sapField_Hover_BorderColor); /* readonly */ --_ui5_checkbox_inner_readonly_border: var(--sapElement_BorderWidth) var(--sapField_ReadOnly_BorderColor) dashed; /* error state */ --_ui5_checkbox_inner_error_border: var(--sapField_InvalidBorderWidth) solid var(--sapField_InvalidColor); - --_ui5_checkbox_inner_error_box_shadow: var(--sapContent_Negative_Shadow); --_ui5_checkbox_inner_error_background_hover: var(--sapField_Hover_Background); /* warning state */ --_ui5_checkbox_inner_warning_border: var(--sapField_WarningBorderWidth) solid var(--sapField_WarningColor); - --_ui5_checkbox_inner_warning_color: var(--sapField_TextColor); - --_ui5_checkbox_inner_warning_box_shadow: var(--sapContent_Critical_Shadow); + --_ui5_checkbox_inner_warning_color: var(--sapField_WarningColor); --_ui5_checkbox_inner_warning_background_hover: var(--sapField_Hover_Background); + --_ui5_checkbox_checkmark_warning_color: var(--sapField_WarningColor); /* success state */ --_ui5_checkbox_inner_success_border: var(--sapField_SuccessBorderWidth) solid var(--sapField_SuccessColor); - --_ui5_checkbox_inner_success_box_shadow: var(--sapContent_Positive_Shadow); --_ui5_checkbox_inner_success_background_hover: var(--sapField_Hover_Background); /* information state */ --_ui5_checkbox_inner_information_color: var(--sapField_InformationColor); --_ui5_checkbox_inner_information_border: var(--sapField_InformationBorderWidth) solid var(--sapField_InformationColor); - --_ui5_checkbox_inner_information_box_shadow: var(--sapContent_Informative_Shadow); --_ui5_checkbox_inner_information_background_hover: var(--sapField_Hover_Background); /* disabled */ --_ui5_checkbox_disabled_opacity: var(--sapContent_DisabledOpacity); diff --git a/packages/main/src/themes/sap_horizon_dark/CheckBox-parameters.css b/packages/main/src/themes/sap_horizon_dark/CheckBox-parameters.css index 6fa22b919fea..755aca223bb6 100644 --- a/packages/main/src/themes/sap_horizon_dark/CheckBox-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/CheckBox-parameters.css @@ -11,34 +11,29 @@ --_ui5_checkbox_inner_border_radius: var(--sapField_BorderCornerRadius); --_ui5_checkbox_checkmark_color: var(--sapContent_Selected_ForegroundColor); /* hover & active */ - --_ui5_checkbox_inner_default_box_shadow: var(--sapContent_Interaction_Shadow); - --_ui5_checkbox_hover_background: var(--sapField_Hover_Background); + --_ui5_checkbox_hover_background: var(--sapContent_Selected_Hover_Background); --_ui5_checkbox_inner_hover_border_color: var(--sapField_Hover_BorderColor); - --_ui5_checkbox_hover_background: var(--sapField_Hover_Background); --_ui5_checkbox_inner_hover_checked_border_color: var(--sapField_Hover_BorderColor); --_ui5_checkbox_inner_selected_border_color: var(--sapField_Hover_BorderColor); --_ui5_checkbox_inner_active_border_color: var(--sapField_Hover_BorderColor); - --_ui5_checkbox_active_background: var(--sapField_Hover_Background); + --_ui5_checkbox_active_background: var(--sapContent_Selected_Hover_Background); --_ui5_checkbox_inner_selected_border_color: var(--sapField_Hover_BorderColor); /* readonly */ --_ui5_checkbox_inner_readonly_border: var(--sapElement_BorderWidth) var(--sapField_ReadOnly_BorderColor) dashed; /* error state */ --_ui5_checkbox_inner_error_border: var(--sapField_InvalidBorderWidth) solid var(--sapField_InvalidColor); - --_ui5_checkbox_inner_error_box_shadow: var(--sapContent_Negative_Shadow); --_ui5_checkbox_inner_error_background_hover: var(--sapField_Hover_Background); /* warning state */ --_ui5_checkbox_inner_warning_border: var(--sapField_WarningBorderWidth) solid var(--sapField_WarningColor); - --_ui5_checkbox_inner_warning_color: var(--sapField_TextColor); - --_ui5_checkbox_inner_warning_box_shadow: var(--sapContent_Critical_Shadow); + --_ui5_checkbox_inner_warning_color: var(--sapField_WarningColor); --_ui5_checkbox_inner_warning_background_hover: var(--sapField_Hover_Background); + --_ui5_checkbox_checkmark_warning_color: var(--sapField_WarningColor); /* success state */ --_ui5_checkbox_inner_success_border: var(--sapField_SuccessBorderWidth) solid var(--sapField_SuccessColor); - --_ui5_checkbox_inner_success_box_shadow: var(--sapContent_Positive_Shadow); --_ui5_checkbox_inner_success_background_hover: var(--sapField_Hover_Background); /* information state */ --_ui5_checkbox_inner_information_color: var(--sapField_InformationColor); --_ui5_checkbox_inner_information_border: var(--sapField_InformationBorderWidth) solid var(--sapField_InformationColor); - --_ui5_checkbox_inner_information_box_shadow: var(--sapContent_Informative_Shadow); --_ui5_checkbox_inner_information_background_hover: var(--sapField_Hover_Background); /* disabled */ --_ui5_checkbox_disabled_opacity: var(--sapContent_DisabledOpacity); diff --git a/packages/main/src/themes/sap_horizon_hcb/CheckBox-parameters.css b/packages/main/src/themes/sap_horizon_hcb/CheckBox-parameters.css index ccf96c23d26b..5c3c2d0452d8 100644 --- a/packages/main/src/themes/sap_horizon_hcb/CheckBox-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/CheckBox-parameters.css @@ -12,10 +12,8 @@ --_ui5_checkbox_inner_border_radius: var(--sapField_BorderCornerRadius); --_ui5_checkbox_checkmark_color: var(--sapContent_Selected_ForegroundColor); /* hover & active */ - --_ui5_checkbox_inner_default_box_shadow: var(--sapContent_Interaction_Shadow); --_ui5_checkbox_hover_background: var(--sapSelectedColor); --_ui5_checkbox_inner_hover_border_color: var(--sapField_Hover_BorderColor); - --_ui5_checkbox_hover_background: var(--sapSelectedColor); --_ui5_checkbox_inner_hover_checked_border_color: var(--sapField_Hover_BorderColor); --_ui5_checkbox_inner_selected_border_color: var(--sapField_Hover_BorderColor); --_ui5_checkbox_inner_active_border_color: var(--sapField_Hover_BorderColor); @@ -25,21 +23,18 @@ --_ui5_checkbox_inner_readonly_border: var(--sapElement_BorderWidth) var(--sapField_ReadOnly_BorderColor) solid; /* error state */ --_ui5_checkbox_inner_error_border: var(--sapField_InvalidBorderWidth) dashed var(--sapField_InvalidColor); - --_ui5_checkbox_inner_error_box_shadow: var(--sapContent_Negative_Shadow); --_ui5_checkbox_inner_error_background_hover: var(--sapField_Hover_Background); /* warning state */ --_ui5_checkbox_inner_warning_border: var(--sapField_WarningBorderWidth) dashed var(--sapField_WarningColor); - --_ui5_checkbox_inner_warning_color: var(--sapField_TextColor); - --_ui5_checkbox_inner_warning_box_shadow: var(--sapContent_Critical_Shadow); + --_ui5_checkbox_inner_warning_color: var(--sapField_WarningColor); --_ui5_checkbox_inner_warning_background_hover: var(--sapField_Hover_Background); + --_ui5_checkbox_checkmark_warning_color: var(--sapField_WarningColor); /* success state */ --_ui5_checkbox_inner_success_border: var(--sapField_SuccessBorderWidth) solid var(--sapField_SuccessColor); - --_ui5_checkbox_inner_success_box_shadow: var(--sapContent_Positive_Shadow); --_ui5_checkbox_inner_success_background_hover: var(--sapField_Hover_Background); /* information state */ --_ui5_checkbox_inner_information_color: var(--sapField_InformationColor); --_ui5_checkbox_inner_information_border: var(--sapField_InformationBorderWidth) dashed var(--sapField_InformationColor); - --_ui5_checkbox_inner_information_box_shadow: var(--sapContent_Informative_Shadow); --_ui5_checkbox_inner_information_background_hover: var(--sapField_Hover_Background); /* disabled */ --_ui5_checkbox_disabled_opacity: var(--sapContent_DisabledOpacity); diff --git a/packages/main/src/themes/sap_horizon_hcw/CheckBox-parameters.css b/packages/main/src/themes/sap_horizon_hcw/CheckBox-parameters.css index ccf96c23d26b..5c3c2d0452d8 100644 --- a/packages/main/src/themes/sap_horizon_hcw/CheckBox-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/CheckBox-parameters.css @@ -12,10 +12,8 @@ --_ui5_checkbox_inner_border_radius: var(--sapField_BorderCornerRadius); --_ui5_checkbox_checkmark_color: var(--sapContent_Selected_ForegroundColor); /* hover & active */ - --_ui5_checkbox_inner_default_box_shadow: var(--sapContent_Interaction_Shadow); --_ui5_checkbox_hover_background: var(--sapSelectedColor); --_ui5_checkbox_inner_hover_border_color: var(--sapField_Hover_BorderColor); - --_ui5_checkbox_hover_background: var(--sapSelectedColor); --_ui5_checkbox_inner_hover_checked_border_color: var(--sapField_Hover_BorderColor); --_ui5_checkbox_inner_selected_border_color: var(--sapField_Hover_BorderColor); --_ui5_checkbox_inner_active_border_color: var(--sapField_Hover_BorderColor); @@ -25,21 +23,18 @@ --_ui5_checkbox_inner_readonly_border: var(--sapElement_BorderWidth) var(--sapField_ReadOnly_BorderColor) solid; /* error state */ --_ui5_checkbox_inner_error_border: var(--sapField_InvalidBorderWidth) dashed var(--sapField_InvalidColor); - --_ui5_checkbox_inner_error_box_shadow: var(--sapContent_Negative_Shadow); --_ui5_checkbox_inner_error_background_hover: var(--sapField_Hover_Background); /* warning state */ --_ui5_checkbox_inner_warning_border: var(--sapField_WarningBorderWidth) dashed var(--sapField_WarningColor); - --_ui5_checkbox_inner_warning_color: var(--sapField_TextColor); - --_ui5_checkbox_inner_warning_box_shadow: var(--sapContent_Critical_Shadow); + --_ui5_checkbox_inner_warning_color: var(--sapField_WarningColor); --_ui5_checkbox_inner_warning_background_hover: var(--sapField_Hover_Background); + --_ui5_checkbox_checkmark_warning_color: var(--sapField_WarningColor); /* success state */ --_ui5_checkbox_inner_success_border: var(--sapField_SuccessBorderWidth) solid var(--sapField_SuccessColor); - --_ui5_checkbox_inner_success_box_shadow: var(--sapContent_Positive_Shadow); --_ui5_checkbox_inner_success_background_hover: var(--sapField_Hover_Background); /* information state */ --_ui5_checkbox_inner_information_color: var(--sapField_InformationColor); --_ui5_checkbox_inner_information_border: var(--sapField_InformationBorderWidth) dashed var(--sapField_InformationColor); - --_ui5_checkbox_inner_information_box_shadow: var(--sapContent_Informative_Shadow); --_ui5_checkbox_inner_information_background_hover: var(--sapField_Hover_Background); /* disabled */ --_ui5_checkbox_disabled_opacity: var(--sapContent_DisabledOpacity);