Skip to content

Commit

Permalink
feat(ui5-checkbox): adjusted to new Horizon theme specification (#6951)
Browse files Browse the repository at this point in the history
* feat(ui5-checkbox): adjusted to new Horizon theme specification
  • Loading branch information
plamenivanov91 authored and PetyaMarkovaBogdanova committed Jun 20, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 11b7d09 commit 0fcc752
Showing 5 changed files with 25 additions and 55 deletions.
36 changes: 13 additions & 23 deletions packages/main/src/themes/CheckBox.css
Original file line number Diff line number Diff line change
@@ -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,23 +155,22 @@
/* 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 {
color: var(--_ui5_checkbox_label_color);
}

/* 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);
}
13 changes: 4 additions & 9 deletions packages/main/src/themes/sap_horizon/CheckBox-parameters.css
Original file line number Diff line number Diff line change
@@ -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);
Original file line number Diff line number Diff line change
@@ -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);
Original file line number Diff line number Diff line change
@@ -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);
Original file line number Diff line number Diff line change
@@ -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);

0 comments on commit 0fcc752

Please sign in to comment.