From 9d7c2fa2044547e67a5348ed2282e1ce16131aac Mon Sep 17 00:00:00 2001 From: Ivanov Date: Tue, 25 Apr 2023 19:49:44 +0300 Subject: [PATCH 1/2] feat(ui5-checkbox): adjusted to new Horizon theme specification --- packages/main/src/themes/CheckBox.css | 34 +++++++------------ .../sap_horizon/CheckBox-parameters.css | 8 ++--- .../sap_horizon_dark/CheckBox-parameters.css | 8 ++--- .../sap_horizon_hcb/CheckBox-parameters.css | 8 ++--- .../sap_horizon_hcw/CheckBox-parameters.css | 8 ++--- 5 files changed, 20 insertions(+), 46 deletions(-) diff --git a/packages/main/src/themes/CheckBox.css b/packages/main/src/themes/CheckBox.css index c3ef5a003c52..eafcb49aa1c7 100644 --- a/packages/main/src/themes/CheckBox.css +++ b/packages/main/src/themes/CheckBox.css @@ -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..8569040675c0 100644 --- a/packages/main/src/themes/sap_horizon/CheckBox-parameters.css +++ b/packages/main/src/themes/sap_horizon/CheckBox-parameters.css @@ -11,7 +11,6 @@ --_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_inner_hover_border_color: var(--sapField_Hover_BorderColor); --_ui5_checkbox_hover_background: var(--sapField_Hover_Background); @@ -24,21 +23,18 @@ --_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..71b0f22ddd01 100644 --- a/packages/main/src/themes/sap_horizon_dark/CheckBox-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/CheckBox-parameters.css @@ -11,7 +11,6 @@ --_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_inner_hover_border_color: var(--sapField_Hover_BorderColor); --_ui5_checkbox_hover_background: var(--sapField_Hover_Background); @@ -24,21 +23,18 @@ --_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..c71ac865e320 100644 --- a/packages/main/src/themes/sap_horizon_hcb/CheckBox-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/CheckBox-parameters.css @@ -12,7 +12,6 @@ --_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); @@ -25,21 +24,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..c71ac865e320 100644 --- a/packages/main/src/themes/sap_horizon_hcw/CheckBox-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/CheckBox-parameters.css @@ -12,7 +12,6 @@ --_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); @@ -25,21 +24,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); From a350da9ab66523dfd9a87daa2905d6c720693d7f Mon Sep 17 00:00:00 2001 From: plamenivanov91 Date: Wed, 26 Apr 2023 16:36:05 +0300 Subject: [PATCH 2/2] feat(ui5-checkbox): adjusted to new Horizon theme specification #6951 - fixed review comments --- packages/main/src/themes/CheckBox.css | 2 +- packages/main/src/themes/sap_horizon/CheckBox-parameters.css | 5 ++--- .../main/src/themes/sap_horizon_dark/CheckBox-parameters.css | 5 ++--- .../main/src/themes/sap_horizon_hcb/CheckBox-parameters.css | 1 - .../main/src/themes/sap_horizon_hcw/CheckBox-parameters.css | 1 - 5 files changed, 5 insertions(+), 9 deletions(-) diff --git a/packages/main/src/themes/CheckBox.css b/packages/main/src/themes/CheckBox.css index eafcb49aa1c7..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 */ diff --git a/packages/main/src/themes/sap_horizon/CheckBox-parameters.css b/packages/main/src/themes/sap_horizon/CheckBox-parameters.css index 8569040675c0..4a86dba60bd7 100644 --- a/packages/main/src/themes/sap_horizon/CheckBox-parameters.css +++ b/packages/main/src/themes/sap_horizon/CheckBox-parameters.css @@ -11,13 +11,12 @@ --_ui5_checkbox_inner_border_radius: var(--sapField_BorderCornerRadius); --_ui5_checkbox_checkmark_color: var(--sapContent_Selected_ForegroundColor); /* hover & active */ - --_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; 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 71b0f22ddd01..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,13 +11,12 @@ --_ui5_checkbox_inner_border_radius: var(--sapField_BorderCornerRadius); --_ui5_checkbox_checkmark_color: var(--sapContent_Selected_ForegroundColor); /* hover & active */ - --_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; 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 c71ac865e320..5c3c2d0452d8 100644 --- a/packages/main/src/themes/sap_horizon_hcb/CheckBox-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/CheckBox-parameters.css @@ -14,7 +14,6 @@ /* hover & active */ --_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); 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 c71ac865e320..5c3c2d0452d8 100644 --- a/packages/main/src/themes/sap_horizon_hcw/CheckBox-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/CheckBox-parameters.css @@ -14,7 +14,6 @@ /* hover & active */ --_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);