Skip to content

Commit be9e6bc

Browse files
nnaydenownnaydenow
authored
fix(ui5-checkbox): align to latest sap_horizon specification (#4972)
1 parent 839ddf8 commit be9e6bc

File tree

7 files changed

+182
-70
lines changed

7 files changed

+182
-70
lines changed

‎packages/main/src/themes/CheckBox.css

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
}
2121

2222
:host([disabled]) .ui5-checkbox-root {
23-
opacity: .5;
23+
opacity: var(--_ui5_checkbox_disabled_opacity);
2424
}
2525

2626
:host([disabled]) .ui5-checkbox-inner {
@@ -78,7 +78,7 @@
7878
:host([value-state="Warning"]) .ui5-checkbox--hoverable .ui5-checkbox-inner:hover {
7979
background: var(--sapField_WarningBackground);
8080
border: var(--_ui5_checkbox_inner_warning_border);
81-
color: var(--sapField_WarningColor);
81+
color: var(--_ui5_checkbox_inner_warning_color);
8282
}
8383

8484
:host([value-state="Warning"]) .ui5-checkbox--hoverable .ui5-checkbox-inner:hover {
@@ -90,6 +90,7 @@
9090
:host([value-state="Information"]) .ui5-checkbox--hoverable .ui5-checkbox-inner:hover {
9191
background: var(--sapField_InformationBackground);
9292
border: var(--_ui5_checkbox_inner_information_border);
93+
color: var(--_ui5_checkbox_inner_information_color);
9394
}
9495

9596
:host([value-state="Information"]) .ui5-checkbox--hoverable .ui5-checkbox-inner:hover {
@@ -121,7 +122,7 @@
121122
}
122123

123124
:host([text]) .ui5-checkbox-root {
124-
padding-right: 0;
125+
padding-right: var(--_ui5_checkbox_right_focus_distance);
125126
}
126127

127128
:host([text]) .ui5-checkbox-root:focus::before {
@@ -274,7 +275,7 @@ https://github.com/philipwalton/flexbugs/issues/231
274275

275276
/* RTL */
276277
:host([text]) [dir="rtl"].ui5-checkbox-root {
277-
padding-left: 0;
278+
padding-left: var(--_ui5_checkbox_right_focus_distance);
278279
padding-right: var(--_ui5_checkbox_wrapper_padding);
279280
}
280281

‎packages/main/src/themes/base/CheckBox-parameters.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,13 @@
44
--_ui5_checkbox_box_shadow: none;
55
--_ui5_checkbox_transition: unset;
66
--_ui5_checkbox_focus_border: none;
7+
--_ui5_checkbox_disabled_opacity: .5;
78
--_ui5_checkbox_border_radius: 0;
89
--_ui5_checkbox_hover_background: var(--sapField_Hover_Background);
910
--_ui5_checkbox_active_background: var(--sapField_Hover_Background);
1011
--_ui5_checkbox_checkmark_warning_color: var(--sapField_TextColor);
12+
--_ui5_checkbox_inner_warning_color: var(--sapField_WarningColor);
13+
--_ui5_checkbox_inner_information_color: currentColor;
1114
--_ui5_checkbox_checkmark_color: var(--sapSelectedColor);
1215
--_ui5_checkbox_focus_position: .6875rem;
1316
--_ui5_checkbox_focus_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
@@ -50,4 +53,5 @@
5053
--_ui5_checkbox_disabled_label_color: var(--sapContent_LabelColor);
5154
--_ui5_checkbox_default_focus_border: none;
5255
--_ui5_checkbox_focus_outline_display: block;
56+
--_ui5_checkbox_right_focus_distance: 0;
5357
}

‎packages/main/src/themes/sap_horizon/CheckBox-parameters.css

Lines changed: 38 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,47 @@
33
:root {
44
--_ui5_checkbox_wrapper_padding: .6875rem;
55
--_ui5_checkbox_width_height: 2.75rem;
6-
--_ui5_checkbox_wrapped_content_margin_top: 0;
7-
--_ui5_checkbox_wrapped_focus_padding: .5rem;
8-
9-
--_ui5_checkbox_inner_border: solid .0625rem var(--sapField_BorderColor);
10-
--_ui5_checkbox_compact_wrapped_label_margin_top: -0.125rem;
11-
--_ui5_checkbox_inner_readonly_border: 1px dotted var(--sapField_ReadOnly_BorderColor);
6+
--_ui5_checkbox_icon_size: 1rem;
7+
/* default checkbox*/
8+
--_ui5_checkbox_inner_border: solid var(--sapField_BorderWidth) var(--sapField_BorderColor);
9+
--_ui5_checkbox_inner_active_border_color: var(--sapField_BorderColor);
10+
--_ui5_checkbox_active_background: var(--sapField_Background);
1211
--_ui5_checkbox_inner_border_radius: var(--sapField_BorderCornerRadius);
13-
--_ui5_checkbox_label_color: var(--sapField_TextColor);
14-
--_ui5_checkbox_label_offset_right: 0.3125rem;
15-
--_ui5_checkbox_focus_position: 0.3125rem;
16-
--_ui5_checkbox_focus_border_radius: var(--sapField_BorderCornerRadius);
17-
--_ui5_checkbox_checkmark_warning_color: var(--sapCriticalTextColor);
18-
--_ui5_checkbox_inner_warning_background_hover: var(--sapField_Hover_Background);
19-
--_ui5_checkbox_inner_error_background_hover: var(--sapField_Hover_Background);
20-
--_ui5_checkbox_inner_success_background_hover: var(--sapField_Hover_Background);
21-
--_ui5_checkbox_inner_information_background_hover: var(--sapField_Hover_Background);
12+
--_ui5_checkbox_checkmark_color: var(--sapContent_Selected_ForegroundColor);
13+
/* hover & active */
14+
--_ui5_checkbox_inner_default_box_shadow: var(--sapContent_Interaction_Shadow);
2215
--_ui5_checkbox_hover_background: var(--sapField_Hover_Background);
16+
--_ui5_checkbox_inner_hover_border_color: var(--sapField_Hover_BorderColor);
17+
--_ui5_checkbox_hover_background: var(--sapField_Hover_Background);
18+
--_ui5_checkbox_inner_hover_checked_border_color: var(--sapField_Hover_BorderColor);
19+
--_ui5_checkbox_inner_selected_border_color: var(--sapField_Hover_BorderColor);
20+
--_ui5_checkbox_inner_active_border_color: var(--sapField_Hover_BorderColor);
2321
--_ui5_checkbox_active_background: var(--sapField_Hover_Background);
24-
--_ui5_checkbox_inner_hover_border_color: var(--sapField_BorderColor);
25-
--_ui5_checkbox_inner_hover_checked_border_color: var(--sapField_BorderColor);
26-
--_ui5_checkbox_inner_selected_border_color: var(--sapField_BorderColor);
27-
--_ui5_checkbox_inner_active_border_color: var(--sapField_BorderColor);
28-
--_ui5_checkbox_inner_selected_border_color: var(--sapField_BorderColor);
29-
--_ui5_checkbox_inner_information_box_shadow: var(--sapContent_Informative_Shadow);
30-
--_ui5_checkbox_inner_warning_box_shadow: var(--sapContent_Critical_Shadow);
22+
--_ui5_checkbox_inner_selected_border_color: var(--sapField_Hover_BorderColor);
23+
/* readonly */
24+
--_ui5_checkbox_inner_readonly_border: var(--sapElement_BorderWidth) var(--sapField_ReadOnly_BorderColor) dashed;
25+
/* error state */
26+
--_ui5_checkbox_inner_error_border: var(--sapField_InvalidBorderWidth) solid var(--sapField_InvalidColor);
3127
--_ui5_checkbox_inner_error_box_shadow: var(--sapContent_Negative_Shadow);
28+
--_ui5_checkbox_inner_error_background_hover: var(--sapField_Hover_Background);
29+
/* warning state */
30+
--_ui5_checkbox_inner_warning_border: var(--sapField_WarningBorderWidth) solid var(--sapField_WarningColor);
31+
--_ui5_checkbox_inner_warning_color: var(--sapField_TextColor);
32+
--_ui5_checkbox_inner_warning_box_shadow: var(--sapContent_Critical_Shadow);
33+
--_ui5_checkbox_inner_warning_background_hover: var(--sapField_Hover_Background);
34+
/* success state */
35+
--_ui5_checkbox_inner_success_border: var(--sapField_SuccessBorderWidth) solid var(--sapField_SuccessColor);
3236
--_ui5_checkbox_inner_success_box_shadow: var(--sapContent_Positive_Shadow);
33-
--_ui5_checkbox_inner_default_box_shadow: var(--sapContent_Interaction_Shadow);
37+
--_ui5_checkbox_inner_success_background_hover: var(--sapField_Hover_Background);
38+
/* information state */
39+
--_ui5_checkbox_inner_information_color: var(--sapField_InformationColor);
40+
--_ui5_checkbox_inner_information_border: var(--sapField_InformationBorderWidth) solid var(--sapField_InformationColor);
41+
--_ui5_checkbox_inner_information_box_shadow: var(--sapContent_Informative_Shadow);
42+
--_ui5_checkbox_inner_information_background_hover: var(--sapField_Hover_Background);
43+
/* disabled */
44+
--_ui5_checkbox_disabled_opacity: var(--sapContent_DisabledOpacity);
45+
/* focus */
46+
--_ui5_checkbox_focus_position: 0.3125rem;
47+
--_ui5_checkbox_focus_border_radius: 0.5rem;
48+
--_ui5_checkbox_right_focus_distance: var(--_ui5_checkbox_focus_position);
3449
}

‎packages/main/src/themes/sap_horizon_dark/CheckBox-parameters.css

Lines changed: 38 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,47 @@
33
:root {
44
--_ui5_checkbox_wrapper_padding: .6875rem;
55
--_ui5_checkbox_width_height: 2.75rem;
6-
--_ui5_checkbox_wrapped_content_margin_top: 0;
7-
--_ui5_checkbox_wrapped_focus_padding: .5rem;
8-
9-
--_ui5_checkbox_inner_border: solid .0625rem var(--sapField_BorderColor);
10-
--_ui5_checkbox_compact_wrapped_label_margin_top: -0.125rem;
11-
--_ui5_checkbox_inner_readonly_border: 1px dotted var(--sapField_ReadOnly_BorderColor);
6+
--_ui5_checkbox_icon_size: 1rem;
7+
/* default checkbox*/
8+
--_ui5_checkbox_inner_border: solid var(--sapField_BorderWidth) var(--sapField_BorderColor);
9+
--_ui5_checkbox_inner_active_border_color: var(--sapField_BorderColor);
10+
--_ui5_checkbox_active_background: var(--sapField_Background);
1211
--_ui5_checkbox_inner_border_radius: var(--sapField_BorderCornerRadius);
13-
--_ui5_checkbox_label_color: var(--sapField_TextColor);
14-
--_ui5_checkbox_label_offset_right: 0.3125rem;
15-
--_ui5_checkbox_focus_position: 0.3125rem;
16-
--_ui5_checkbox_focus_border_radius: var(--sapField_BorderCornerRadius);
17-
--_ui5_checkbox_checkmark_warning_color: var(--sapCriticalTextColor);
18-
--_ui5_checkbox_inner_warning_background_hover: var(--sapField_Hover_Background);
19-
--_ui5_checkbox_inner_error_background_hover: var(--sapField_Hover_Background);
20-
--_ui5_checkbox_inner_success_background_hover: var(--sapField_Hover_Background);
21-
--_ui5_checkbox_inner_information_background_hover: var(--sapField_Hover_Background);
12+
--_ui5_checkbox_checkmark_color: var(--sapContent_Selected_ForegroundColor);
13+
/* hover & active */
14+
--_ui5_checkbox_inner_default_box_shadow: var(--sapContent_Interaction_Shadow);
2215
--_ui5_checkbox_hover_background: var(--sapField_Hover_Background);
16+
--_ui5_checkbox_inner_hover_border_color: var(--sapField_Hover_BorderColor);
17+
--_ui5_checkbox_hover_background: var(--sapField_Hover_Background);
18+
--_ui5_checkbox_inner_hover_checked_border_color: var(--sapField_Hover_BorderColor);
19+
--_ui5_checkbox_inner_selected_border_color: var(--sapField_Hover_BorderColor);
20+
--_ui5_checkbox_inner_active_border_color: var(--sapField_Hover_BorderColor);
2321
--_ui5_checkbox_active_background: var(--sapField_Hover_Background);
24-
--_ui5_checkbox_inner_hover_border_color: var(--sapField_BorderColor);
25-
--_ui5_checkbox_inner_hover_checked_border_color: var(--sapField_BorderColor);
26-
--_ui5_checkbox_inner_selected_border_color: var(--sapField_BorderColor);
27-
--_ui5_checkbox_inner_active_border_color: var(--sapField_BorderColor);
28-
--_ui5_checkbox_inner_selected_border_color: var(--sapField_BorderColor);
29-
--_ui5_checkbox_inner_information_box_shadow: var(--sapContent_Informative_Shadow);
30-
--_ui5_checkbox_inner_warning_box_shadow: var(--sapContent_Critical_Shadow);
22+
--_ui5_checkbox_inner_selected_border_color: var(--sapField_Hover_BorderColor);
23+
/* readonly */
24+
--_ui5_checkbox_inner_readonly_border: var(--sapElement_BorderWidth) var(--sapField_ReadOnly_BorderColor) dashed;
25+
/* error state */
26+
--_ui5_checkbox_inner_error_border: var(--sapField_InvalidBorderWidth) solid var(--sapField_InvalidColor);
3127
--_ui5_checkbox_inner_error_box_shadow: var(--sapContent_Negative_Shadow);
28+
--_ui5_checkbox_inner_error_background_hover: var(--sapField_Hover_Background);
29+
/* warning state */
30+
--_ui5_checkbox_inner_warning_border: var(--sapField_WarningBorderWidth) solid var(--sapField_WarningColor);
31+
--_ui5_checkbox_inner_warning_color: var(--sapField_TextColor);
32+
--_ui5_checkbox_inner_warning_box_shadow: var(--sapContent_Critical_Shadow);
33+
--_ui5_checkbox_inner_warning_background_hover: var(--sapField_Hover_Background);
34+
/* success state */
35+
--_ui5_checkbox_inner_success_border: var(--sapField_SuccessBorderWidth) solid var(--sapField_SuccessColor);
3236
--_ui5_checkbox_inner_success_box_shadow: var(--sapContent_Positive_Shadow);
33-
--_ui5_checkbox_inner_default_box_shadow: var(--sapContent_Interaction_Shadow);
37+
--_ui5_checkbox_inner_success_background_hover: var(--sapField_Hover_Background);
38+
/* information state */
39+
--_ui5_checkbox_inner_information_color: var(--sapField_InformationColor);
40+
--_ui5_checkbox_inner_information_border: var(--sapField_InformationBorderWidth) solid var(--sapField_InformationColor);
41+
--_ui5_checkbox_inner_information_box_shadow: var(--sapContent_Informative_Shadow);
42+
--_ui5_checkbox_inner_information_background_hover: var(--sapField_Hover_Background);
43+
/* disabled */
44+
--_ui5_checkbox_disabled_opacity: var(--sapContent_DisabledOpacity);
45+
/* focus */
46+
--_ui5_checkbox_focus_position: 0.3125rem;
47+
--_ui5_checkbox_focus_border_radius: 0.5rem;
48+
--_ui5_checkbox_right_focus_distance: var(--_ui5_checkbox_focus_position);
3449
}

‎packages/main/src/themes/sap_horizon_hcb/CheckBox-parameters.css

Lines changed: 46 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,49 @@
1-
21
@import "../base/CheckBox-parameters.css";
32

43
:root {
5-
--_ui5_checkbox_inner_border_radius: 0;
6-
--_ui5_checkbox_checkmark_color: var(--sapContent_IconColor);
7-
--_ui5_checkbox_inner_error_border: 0.125rem dashed var(--sapField_InvalidColor);
8-
--_ui5_checkbox_inner_warning_border: 0.125rem dashed var(--sapField_WarningColor);
9-
--_ui5_checkbox_inner_information_border: var(--sapField_BorderWidth) dashed var(--sapField_InformationColor);
10-
--_ui5_checkbox_checkmark_warning_color: var(--sapField_WarningColor);
11-
--_ui5_checkbox_hover_background: var(--sapSelectedColor);
12-
--_ui5_checkbox_focus_outline: 0.125rem dotted var(--sapContent_FocusColor);
13-
}
4+
--_ui5_checkbox_wrapper_padding: .6875rem;
5+
--_ui5_checkbox_width_height: 2.75rem;
6+
--_ui5_checkbox_icon_size: 1rem;
7+
/* default checkbox*/
8+
--_ui5_checkbox_inner_border: solid var(--sapField_BorderWidth) var(--sapField_BorderColor);
9+
--_ui5_checkbox_inner_active_border_color: var(--sapField_BorderColor);
10+
--_ui5_checkbox_active_background: var(--sapField_Background);
11+
--_ui5_checkbox_inner_border_radius: var(--sapField_BorderCornerRadius);
12+
--_ui5_checkbox_checkmark_color: var(--sapContent_Selected_ForegroundColor);
13+
/* hover & active */
14+
--_ui5_checkbox_inner_default_box_shadow: var(--sapContent_Interaction_Shadow);
15+
--_ui5_checkbox_hover_background: var(--sapSelectedColor);
16+
--_ui5_checkbox_inner_hover_border_color: var(--sapField_Hover_BorderColor);
17+
--_ui5_checkbox_hover_background: var(--sapSelectedColor);
18+
--_ui5_checkbox_inner_hover_checked_border_color: var(--sapField_Hover_BorderColor);
19+
--_ui5_checkbox_inner_selected_border_color: var(--sapField_Hover_BorderColor);
20+
--_ui5_checkbox_inner_active_border_color: var(--sapField_Hover_BorderColor);
21+
--_ui5_checkbox_active_background: var(--sapSelectedColor);
22+
--_ui5_checkbox_inner_selected_border_color: var(--sapField_Hover_BorderColor);
23+
/* readonly */
24+
--_ui5_checkbox_inner_readonly_border: var(--sapElement_BorderWidth) var(--sapField_ReadOnly_BorderColor) solid;
25+
/* error state */
26+
--_ui5_checkbox_inner_error_border: var(--sapField_InvalidBorderWidth) dashed var(--sapField_InvalidColor);
27+
--_ui5_checkbox_inner_error_box_shadow: var(--sapContent_Negative_Shadow);
28+
--_ui5_checkbox_inner_error_background_hover: var(--sapField_Hover_Background);
29+
/* warning state */
30+
--_ui5_checkbox_inner_warning_border: var(--sapField_WarningBorderWidth) dashed var(--sapField_WarningColor);
31+
--_ui5_checkbox_inner_warning_color: var(--sapField_TextColor);
32+
--_ui5_checkbox_inner_warning_box_shadow: var(--sapContent_Critical_Shadow);
33+
--_ui5_checkbox_inner_warning_background_hover: var(--sapField_Hover_Background);
34+
/* success state */
35+
--_ui5_checkbox_inner_success_border: var(--sapField_SuccessBorderWidth) solid var(--sapField_SuccessColor);
36+
--_ui5_checkbox_inner_success_box_shadow: var(--sapContent_Positive_Shadow);
37+
--_ui5_checkbox_inner_success_background_hover: var(--sapField_Hover_Background);
38+
/* information state */
39+
--_ui5_checkbox_inner_information_color: var(--sapField_InformationColor);
40+
--_ui5_checkbox_inner_information_border: var(--sapField_InformationBorderWidth) dashed var(--sapField_InformationColor);
41+
--_ui5_checkbox_inner_information_box_shadow: var(--sapContent_Informative_Shadow);
42+
--_ui5_checkbox_inner_information_background_hover: var(--sapField_Hover_Background);
43+
/* disabled */
44+
--_ui5_checkbox_disabled_opacity: var(--sapContent_DisabledOpacity);
45+
/* focus */
46+
--_ui5_checkbox_focus_position: 0.3125rem;
47+
--_ui5_checkbox_focus_border_radius: 0.5rem;
48+
--_ui5_checkbox_right_focus_distance: var(--_ui5_checkbox_focus_position);
49+
}

‎packages/main/src/themes/sap_horizon_hcw/CheckBox-parameters.css

Lines changed: 46 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,49 @@
1-
21
@import "../base/CheckBox-parameters.css";
32

43
:root {
5-
--_ui5_checkbox_inner_border_radius: 0;
6-
--_ui5_checkbox_checkmark_color: var(--sapContent_IconColor);
7-
--_ui5_checkbox_inner_error_border: 0.125rem dashed var(--sapField_InvalidColor);
8-
--_ui5_checkbox_inner_warning_border: 0.125rem dashed var(--sapField_WarningColor);
9-
--_ui5_checkbox_inner_information_border: var(--sapField_BorderWidth) dashed var(--sapField_InformationColor);
10-
--_ui5_checkbox_checkmark_warning_color: var(--sapField_WarningColor);
11-
--_ui5_checkbox_hover_background: var(--sapSelectedColor);
12-
--_ui5_checkbox_focus_outline: 0.125rem dotted var(--sapContent_FocusColor);
13-
}
4+
--_ui5_checkbox_wrapper_padding: .6875rem;
5+
--_ui5_checkbox_width_height: 2.75rem;
6+
--_ui5_checkbox_icon_size: 1rem;
7+
/* default checkbox*/
8+
--_ui5_checkbox_inner_border: solid var(--sapField_BorderWidth) var(--sapField_BorderColor);
9+
--_ui5_checkbox_inner_active_border_color: var(--sapField_BorderColor);
10+
--_ui5_checkbox_active_background: var(--sapField_Background);
11+
--_ui5_checkbox_inner_border_radius: var(--sapField_BorderCornerRadius);
12+
--_ui5_checkbox_checkmark_color: var(--sapContent_Selected_ForegroundColor);
13+
/* hover & active */
14+
--_ui5_checkbox_inner_default_box_shadow: var(--sapContent_Interaction_Shadow);
15+
--_ui5_checkbox_hover_background: var(--sapSelectedColor);
16+
--_ui5_checkbox_inner_hover_border_color: var(--sapField_Hover_BorderColor);
17+
--_ui5_checkbox_hover_background: var(--sapSelectedColor);
18+
--_ui5_checkbox_inner_hover_checked_border_color: var(--sapField_Hover_BorderColor);
19+
--_ui5_checkbox_inner_selected_border_color: var(--sapField_Hover_BorderColor);
20+
--_ui5_checkbox_inner_active_border_color: var(--sapField_Hover_BorderColor);
21+
--_ui5_checkbox_active_background: var(--sapSelectedColor);
22+
--_ui5_checkbox_inner_selected_border_color: var(--sapField_Hover_BorderColor);
23+
/* readonly */
24+
--_ui5_checkbox_inner_readonly_border: var(--sapElement_BorderWidth) var(--sapField_ReadOnly_BorderColor) solid;
25+
/* error state */
26+
--_ui5_checkbox_inner_error_border: var(--sapField_InvalidBorderWidth) dashed var(--sapField_InvalidColor);
27+
--_ui5_checkbox_inner_error_box_shadow: var(--sapContent_Negative_Shadow);
28+
--_ui5_checkbox_inner_error_background_hover: var(--sapField_Hover_Background);
29+
/* warning state */
30+
--_ui5_checkbox_inner_warning_border: var(--sapField_WarningBorderWidth) dashed var(--sapField_WarningColor);
31+
--_ui5_checkbox_inner_warning_color: var(--sapField_TextColor);
32+
--_ui5_checkbox_inner_warning_box_shadow: var(--sapContent_Critical_Shadow);
33+
--_ui5_checkbox_inner_warning_background_hover: var(--sapField_Hover_Background);
34+
/* success state */
35+
--_ui5_checkbox_inner_success_border: var(--sapField_SuccessBorderWidth) solid var(--sapField_SuccessColor);
36+
--_ui5_checkbox_inner_success_box_shadow: var(--sapContent_Positive_Shadow);
37+
--_ui5_checkbox_inner_success_background_hover: var(--sapField_Hover_Background);
38+
/* information state */
39+
--_ui5_checkbox_inner_information_color: var(--sapField_InformationColor);
40+
--_ui5_checkbox_inner_information_border: var(--sapField_InformationBorderWidth) dashed var(--sapField_InformationColor);
41+
--_ui5_checkbox_inner_information_box_shadow: var(--sapContent_Informative_Shadow);
42+
--_ui5_checkbox_inner_information_background_hover: var(--sapField_Hover_Background);
43+
/* disabled */
44+
--_ui5_checkbox_disabled_opacity: var(--sapContent_DisabledOpacity);
45+
/* focus */
46+
--_ui5_checkbox_focus_position: 0.3125rem;
47+
--_ui5_checkbox_focus_border_radius: 0.5rem;
48+
--_ui5_checkbox_right_focus_distance: var(--_ui5_checkbox_focus_position);
49+
}

‎packages/theming/css-vars-usage.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,27 +171,32 @@
171171
"--sapField_Background",
172172
"--sapField_BorderColor",
173173
"--sapField_BorderCornerRadius",
174+
"--sapField_BorderStyle",
174175
"--sapField_BorderWidth",
175176
"--sapField_Focus_Background",
176177
"--sapField_Focus_BorderColor",
177178
"--sapField_Hover_Background",
178179
"--sapField_Hover_BorderColor",
179180
"--sapField_HoverBorderColor",
180181
"--sapField_InformationBackground",
182+
"--sapField_InformationBorderStyle",
181183
"--sapField_InformationBorderWidth",
182184
"--sapField_InformationColor",
183185
"--sapField_InvalidBackground",
186+
"--sapField_InvalidBorderStyle",
184187
"--sapField_InvalidBorderWidth",
185188
"--sapField_InvalidColor",
186189
"--sapField_PlaceholderTextColor",
187190
"--sapField_ReadOnly_Background",
188191
"--sapField_ReadOnly_BorderColor",
189192
"--sapField_RequiredColor",
190193
"--sapField_SuccessBackground",
194+
"--sapField_SuccessBorderStyle",
191195
"--sapField_SuccessBorderWidth",
192196
"--sapField_SuccessColor",
193197
"--sapField_TextColor",
194198
"--sapField_WarningBackground",
199+
"--sapField_WarningBorderStyle",
195200
"--sapField_WarningBorderWidth",
196201
"--sapField_WarningColor",
197202
"--sapFontBoldFamily",

0 commit comments

Comments
 (0)