@ui5/webcomponents 2.19.0-rc.2 → 2.19.0-rc.3

package/src/themes/base/sizes-parameters.css

@@ -1,8 +1,8 @@
-:root {
+:host {
 	/* Calendar */
 	--_ui5_calendar_height: 24.5rem;
 	--_ui5_calendar_width: 20rem;
-	--_ui5_calendar_left_right_padding:  0.5rem;
+	--_ui5_calendar_left_right_padding: 0.5rem;
 	--_ui5_calendar_top_bottom_padding: 1rem;
 	--_ui5_calendar_header_height: 3rem;
 	--_ui5_calendar_header_arrow_button_width: 2.5rem;
@@ -18,7 +18,7 @@
 	--_ui5_day_picker_item_justify_content: space-between;
 	--_ui5_daypicker_item_now_selected_two_calendar_focus_special_day_top: 2rem;
 	--_ui5_daypicker_item_now_selected_two_calendar_focus_special_day_right: 1.4375rem;
-    --_ui5_dp_two_calendar_item_secondary_text_height: 1rem;
+	--_ui5_dp_two_calendar_item_secondary_text_height: 1rem;
 	--_ui5_dp_two_calendar_item_text_padding_top: 0.4375rem;
 	--_ui5_dp_two_calendar_item_secondary_text_padding_block: 0 0.5rem;
 	--_ui5_dp_two_calendar_item_secondary_text_padding: 0 0.5rem;
@@ -50,13 +50,13 @@
 	--_ui5-color_channel_margin_top: 0.25rem;
 
 	/* ColorPalette */
-	 --_ui5_color-palette-item-height: 1.75rem;
-	 --_ui5_color-palette-item-hover-height: 2.375rem;
-	 --_ui5_color-palette-item-margin: calc((var(--_ui5_color-palette-item-hover-height) - var(--_ui5_color-palette-item-height)) / 2);
-	 --_ui5_color-palette-row-width: 12rem;
-	 --_ui5_color-palette-swatch-container-padding: 0.3125rem 0.6875rem;
+	--_ui5_color-palette-item-height: 1.75rem;
+	--_ui5_color-palette-item-hover-height: 2.375rem;
+	--_ui5_color-palette-item-margin: calc((var(--_ui5_color-palette-item-hover-height) - var(--_ui5_color-palette-item-height)) / 2);
+	--_ui5_color-palette-row-width: 12rem;
+	--_ui5_color-palette-swatch-container-padding: 0.3125rem 0.6875rem;
 
-	 /* DateTimePicker */
+	/* DateTimePicker */
 	--_ui5_datetime_picker_width: 40.0625rem;
 	--_ui5_datetime_picker_height: 25rem;
 	--_ui5_datetime_timeview_width: 17rem;
@@ -95,7 +95,7 @@
 
 	/* Form */
 	--_ui5_form_item_min_height: 2.813rem;
-	--_ui5_form_item_padding:  0.65rem;
+	--_ui5_form_item_padding: 0.65rem;
 	--_ui5-form-group-heading-height: 2.75rem;
 
 	/* Popup subclasses */
@@ -149,210 +149,214 @@
 
 	/* ShellBar */
 	--_ui5-shellbar-separator-height: 2rem;
-}
-
-[data-ui5-compact-size],
-.ui5-content-density-compact,
-.sapUiSizeCompact {
-	--_ui5_bar_base_height: 2.5rem;
-	--_ui5_bar_subheader_height: 2.25rem;
-
-	--_ui5_button_base_height: var(--sapElement_Compact_Height);
-	--_ui5_button_base_padding: 0.4375rem;
-	--_ui5_button_base_min_width: 2rem;
-	--_ui5-button-badge-diameter: 0.625rem;
-
-	/* Calendar */
-	--_ui5_calendar_height: 18rem;
-	--_ui5_calendar_width: 17.75rem;
-	--_ui5_calendar_left_right_padding: 0.25rem;
-	--_ui5_calendar_top_bottom_padding: 0.5rem;
-	--_ui5_calendar_header_height: 2rem;
-	--_ui5_calendar_header_arrow_button_width: 2rem;
-	--_ui5_calendar_header_padding: 0;
-
-	/* Calendar Legend */
-	--_ui5-calendar-legend-root-padding: 0.5rem;
-	--_ui5-calendar-legend-root-width: 16.75rem;
-
-	/* CheckBox */
-	--_ui5_checkbox_root_side_padding: var(--_ui5_checkbox_wrapped_focus_padding);
-	--_ui5_checkbox_width_height: var(--_ui5_checkbox_compact_width_height);
-	--_ui5_checkbox_wrapper_padding: var(--_ui5_checkbox_compact_wrapper_padding);
-	--_ui5_checkbox_focus_position: var(--_ui5_checkbox_compact_focus_position);
-	--_ui5_checkbox_wrapped_focus_inset_block: var(--_ui5_checkbox_focus_position);
-	--_ui5_checkbox_inner_width_height: var(--_ui5_checkbox_compact_inner_size);
-	--_ui5_checkbox_icon_size: .75rem;
-	--_ui5_checkbox_partially_icon_size: .5rem;
 
-	/* ColorPicker */
-	--_ui5_color_picker_slider_progress_container_height: 1.125rem;
-	--_ui5_color_picker_slider_container_margin_top: -0.375rem;
-	--_ui5_color_picker_slider_handle_height: 1.5rem;
-	--_ui5_color_picker_slider_handle_width: 0.9375rem;
-	--_ui5_color_picker_slider_handle_after_height: 1.25rem;
-	--_ui5_color_picker_slider_handle_focus_height: 1.625rem;
-	--_ui5_color_picker_colors_wrapper_height: 1.5rem;
-	--_ui5_color_picker_sliders_height: 2.25rem;
-	--_ui5_color_picker_main_color_margin_bottom: 0.75rem;
-	--_ui5_color_picker_slider_spacing: 0.8125rem;
-	--_ui5_color_channel_toggle_button_width: 1.375rem;
-	--_ui5_color_channel_toggle_button_margin-top: -0.9375rem;
-	--_ui5_color_channel_hex_input_width: 4.625rem;
-	--_ui5-color_channel_margin_top: 0rem;
-
-	/* ColorPalette */
-	--_ui5_color-palette-item-height: 1.25rem;
-	--_ui5_color-palette-item-hover-height: 1.625rem;
-	--_ui5_color-palette-item-margin: calc((var(--_ui5_color-palette-item-hover-height) - var(--_ui5_color-palette-item-height)) / 2);
-	--_ui5_color-palette-row-width: 8.125rem;
-	--_ui5_color-palette-swatch-container-padding: 0.1875rem 0.8125rem;
-	--_ui5_color-palette-item-hover-margin: 0;
-	--_ui5_color-palette-row-height: 7.5rem;
-	--_ui5_color-palette-button-height: 2rem;
-
-	/* Custom List Item */
-	--_ui5_custom_list_item_rb_min_width: 2rem;
-
-	/* DayPicker */
-	--_ui5_daypicker_weeknumbers_container_padding_top: 2rem;
-	--_ui5_day_picker_item_width: 2rem;
-	--_ui5_day_picker_item_height: 2rem;
-	--_ui5_day_picker_empty_height: 2.125rem;
-	--_ui5_day_picker_item_justify_content: flex-end;
-	--_ui5_dp_two_calendar_item_secondary_text_height: 0.75rem;
-	--_ui5_dp_two_calendar_item_text_padding_top: 0.5rem;
-
-	--_ui5_daypicker_selected_item_now_special_day_top: 1.5625rem;
-	--_ui5_daypicker_specialday_focused_top: 1.5rem;
-	--_ui5_daypicker_special_day_top: 1.625rem;
-	--_ui5_daypicker_item_now_specialday_top: 1.5rem;
-	--_ui5_daypicker_twocalendar_item_special_day_top: 1.25rem;
-	--_ui5_daypicker_twocalendar_item_special_day_right: 1.25rem;
-	--_ui5_daypicker_two_calendar_item_margin_bottom: 0;
-	--_ui5_dp_two_calendar_item_secondary_text_padding_block: 0 0.625rem;
-	--_ui5_daypicker_item_now_selected_two_calendar_focus_special_day_top: 1.125rem;
-	--_ui5_daypicker_item_now_selected_two_calendar_focus_special_day_right: 1.125rem;
-	--_ui5_dp_two_calendar_item_secondary_text_padding: 0 0.375rem;
-	--_ui5_daypicker_item_now_selected_two_calendar_focus_secondary_text_padding_block: 0 1rem;
-	--_ui5_daypicker_two_calendar_item_selected_focus_margin_bottom: -0.25rem;
-	--_ui5_daypicker_two_calendar_item_selected_focus_padding_right: 0.4375rem;
-
-	/* DateTimePicker */
-	--_ui5_datetime_picker_height: 20.5rem;
-	--_ui5_datetime_picker_width: 35.5rem;
-	--_ui5_datetime_timeview_width: 17rem;
-	--_ui5_datetime_timeview_phonemode_width: 18.5rem;
-	--_ui5_datetime_timeview_phonemode_clocks_width: 21.125rem;
-	--_ui5_datetime_dateview_phonemode_margin_bottom: 3.125rem;
-
-	/* Popup */
-	--_ui5_popup_footer_height: 2.5rem;
-
-	/* Dialog */
-	--_ui5_dialog_content_min_height: 2.5rem;
-
-	/* Form */
-	--_ui5_form_item_min_height: 2rem;
-	--_ui5_form_item_padding:  0.25rem;
-	--_ui5-form-group-heading-height: 2rem;
-
-	/* Input */
-	--_ui5_input_height: var(--sapElement_Compact_Height);
-	--_ui5_input_inner_padding: 0 0.5rem;
-	--_ui5_input_inner_padding_with_icon: 0 0.2rem 0 0.5rem;
-	--_ui5_input_inner_space_to_tokenizer: 0.125rem;
-	--_ui5_input_inner_space_to_n_more_text: 0.125rem;
-	--_ui5_input_icon_min_width: var(--_ui5_input_compact_min_width);
-
-	/* Menu */
-	--_ui5_menu_item_padding: 0 0.75rem 0 0.5rem;
-	--_ui5_menu_item_submenu_icon_right: 0.75rem;
-
-	/* Popup subclasses */
-	--_ui5_popup_default_header_height: 2.5rem;
-
-	/* TextArea */
-	--_ui5_textarea_margin: .1875rem 0;
-
-	/* List */
-	--_ui5_list_no_data_height: 2rem;
-	--_ui5_list_item_cb_margin_right: .5rem;
-	--_ui5_list_item_title_size: var(--sapFontSize);
-	--_ui5_list_item_img_top_margin: 0.55rem;
-	--_ui5_list_no_data_font_size: var(--sapFontSize);
-	--_ui5_list_item_dropdown_base_height: 2rem;
-	--_ui5_list_item_base_height: 2rem;
-	--_ui5_list_item_base_padding: 0 1rem;
-	--_ui5_list_item_icon_size: 1rem;
-	--_ui5_list_item_selection_btn_margin_top: calc(-1 * var(--_ui5_checkbox_wrapper_padding));
-	--_ui5_list_item_content_vertical_offset: calc((var(--_ui5_list_item_base_height) - var(--_ui5_list_item_title_size)) / 2);
-	--_ui5_list_buttons_left_space: 0.125rem;
-
-	--_ui5_month_picker_item_height: 2rem;
-	--_ui5_year_picker_item_height: 2rem;
-	--_ui5_panel_header_height: 2rem;
-	--_ui5_panel_button_root_height: 2rem;
-	--_ui5_panel_button_root_width: 2.75rem;
-
-	--_ui5_token_height: 1.25rem;
-	--_ui5_token_right_margin: 0.25rem;
-	--_ui5_token_left_padding: 0.25rem;
-	--_ui5_token_readonly_padding: 0.125rem 0.25rem;
-	--_ui5_token_focus_offset: -0.125rem;
-	--_ui5_token_icon_size: .75rem;
-	--_ui5_token_icon_padding: 0.375rem 0.375rem;
-	--_ui5_token_outline_offset: -0.125rem;
-
-	--_ui5_tc_item_text: 2rem;
-	--_ui5_tc_item_text_line_height: 1.325rem;
-	--_ui5_tc_item_icon_size: 1rem;
-	--_ui5_tc_item_add_text_margin_top: 0.3125rem;
-	--_ui5_tc_item_height: 4rem;
-	--_ui5_tc_header_height: var(--_ui5_tc_item_height);
-	--_ui5_tc_item_icon_circle_size: 2rem;
-	--_ui5_tc_item_icon_size: 1rem;
-
-	/* Radio Button */
-	--_ui5_radio_button_height: 2rem;
-	--_ui5_radio_button_label_side_padding: .5rem;
-	--_ui5_radio_button_inner_size: 2rem;
-	--_ui5_radio_button_svg_size: 1rem;
-
-	/* Responsive Popover */
-	--_ui5-responsive_popover_header_height: 2.5rem;
-
-	/* Slider */
-	--_ui5_slider_handle_height: 1.25rem;
-	--_ui5_slider_handle_width: 1.5rem;
-	--_ui5_slider_handle_top: -.5rem;
-	--_ui5_slider_tooltip_height: 1rem;
-	--_ui5_slider_tooltip_padding: 0.25rem;
-	/* --_ui5_slider_tooltip_bottom: 1.875rem; */
-	--_ui5_slider_progress_outline_offset: -0.625rem;
-	--_ui5_slider_outer_height: 1.3125rem;
-
-	/* SplitButton */
-	--_ui5_split_button_middle_separator_height: 1.625rem;
-
-	/* StepInput */
-	--_ui5_step_input_min_width: 6rem;
-	--_ui5_step_input_padding: 2rem;
-
-	/* Tree */
-	--_ui5-tree-indent-step: 0.5rem;
-	--_ui5-tree-toggle-box-width: 2rem;
-	--_ui5-tree-toggle-box-height: 1.5rem;
-	--_ui5-tree-toggle-icon-size: 0.8125rem;
-
-	/* Toolbar */
-	--_ui5-toolbar-separator-height: 1.5rem;
-	--_ui5-toolbar-height: 2rem;
-	--_ui5_toolbar_overflow_padding: 0.1875rem 0.375rem;
-
-	/* DynamicPageTitle */
-	--_ui5_dynamic_page_title_actions_separator_height: var(--_ui5-toolbar-separator-height);
-
-	/* ShellBar */
-	--_ui5-shellbar-separator-height: 2rem;
+	--___ui5-test-cozy-only: red;
+	--___ui5-test-both: red;
 }
+
+@container style(--ui5_content_density: compact) {
+	:host {
+		--___ui5-test-both: blue;
+		--___ui5-test-compact-only: blue;
+
+		--_ui5_bar_base_height: 2.5rem;
+		--_ui5_bar_subheader_height: 2.25rem;
+
+		--_ui5_button_base_height: var(--sapElement_Compact_Height);
+		--_ui5_button_base_padding: 0.4375rem;
+		--_ui5_button_base_min_width: 2rem;
+		--_ui5-button-badge-diameter: 0.625rem;
+
+		/* Calendar */
+		--_ui5_calendar_height: 18rem;
+		--_ui5_calendar_width: 17.75rem;
+		--_ui5_calendar_left_right_padding: 0.25rem;
+		--_ui5_calendar_top_bottom_padding: 0.5rem;
+		--_ui5_calendar_header_height: 2rem;
+		--_ui5_calendar_header_arrow_button_width: 2rem;
+		--_ui5_calendar_header_padding: 0;
+
+		/* Calendar Legend */
+		--_ui5-calendar-legend-root-padding: 0.5rem;
+		--_ui5-calendar-legend-root-width: 16.75rem;
+
+		/* CheckBox */
+		--_ui5_checkbox_root_side_padding: var(--_ui5_checkbox_wrapped_focus_padding);
+		--_ui5_checkbox_width_height: var(--_ui5_checkbox_compact_width_height);
+		--_ui5_checkbox_wrapper_padding: var(--_ui5_checkbox_compact_wrapper_padding);
+		--_ui5_checkbox_focus_position: var(--_ui5_checkbox_compact_focus_position);
+		--_ui5_checkbox_wrapped_focus_inset_block: var(--_ui5_checkbox_focus_position);
+		--_ui5_checkbox_inner_width_height: var(--_ui5_checkbox_compact_inner_size);
+		--_ui5_checkbox_icon_size: .75rem;
+		--_ui5_checkbox_partially_icon_size: .5rem;
+
+		/* ColorPicker */
+		--_ui5_color_picker_slider_progress_container_height: 1.125rem;
+		--_ui5_color_picker_slider_container_margin_top: -0.375rem;
+		--_ui5_color_picker_slider_handle_height: 1.5rem;
+		--_ui5_color_picker_slider_handle_width: 0.9375rem;
+		--_ui5_color_picker_slider_handle_after_height: 1.25rem;
+		--_ui5_color_picker_slider_handle_focus_height: 1.625rem;
+		--_ui5_color_picker_colors_wrapper_height: 1.5rem;
+		--_ui5_color_picker_sliders_height: 2.25rem;
+		--_ui5_color_picker_main_color_margin_bottom: 0.75rem;
+		--_ui5_color_picker_slider_spacing: 0.8125rem;
+		--_ui5_color_channel_toggle_button_width: 1.375rem;
+		--_ui5_color_channel_toggle_button_margin-top: -0.9375rem;
+		--_ui5_color_channel_hex_input_width: 4.625rem;
+		--_ui5-color_channel_margin_top: 0rem;
+
+		/* ColorPalette */
+		--_ui5_color-palette-item-height: 1.25rem;
+		--_ui5_color-palette-item-hover-height: 1.625rem;
+		--_ui5_color-palette-item-margin: calc((var(--_ui5_color-palette-item-hover-height) - var(--_ui5_color-palette-item-height)) / 2);
+		--_ui5_color-palette-row-width: 8.125rem;
+		--_ui5_color-palette-swatch-container-padding: 0.1875rem 0.8125rem;
+		--_ui5_color-palette-item-hover-margin: 0;
+		--_ui5_color-palette-row-height: 7.5rem;
+		--_ui5_color-palette-button-height: 2rem;
+
+		/* Custom List Item */
+		--_ui5_custom_list_item_rb_min_width: 2rem;
+
+		/* DayPicker */
+		--_ui5_daypicker_weeknumbers_container_padding_top: 2rem;
+		--_ui5_day_picker_item_width: 2rem;
+		--_ui5_day_picker_item_height: 2rem;
+		--_ui5_day_picker_empty_height: 2.125rem;
+		--_ui5_day_picker_item_justify_content: flex-end;
+		--_ui5_dp_two_calendar_item_secondary_text_height: 0.75rem;
+		--_ui5_dp_two_calendar_item_text_padding_top: 0.5rem;
+
+		--_ui5_daypicker_selected_item_now_special_day_top: 1.5625rem;
+		--_ui5_daypicker_specialday_focused_top: 1.5rem;
+		--_ui5_daypicker_special_day_top: 1.625rem;
+		--_ui5_daypicker_item_now_specialday_top: 1.5rem;
+		--_ui5_daypicker_twocalendar_item_special_day_top: 1.25rem;
+		--_ui5_daypicker_twocalendar_item_special_day_right: 1.25rem;
+		--_ui5_daypicker_two_calendar_item_margin_bottom: 0;
+		--_ui5_dp_two_calendar_item_secondary_text_padding_block: 0 0.625rem;
+		--_ui5_daypicker_item_now_selected_two_calendar_focus_special_day_top: 1.125rem;
+		--_ui5_daypicker_item_now_selected_two_calendar_focus_special_day_right: 1.125rem;
+		--_ui5_dp_two_calendar_item_secondary_text_padding: 0 0.375rem;
+		--_ui5_daypicker_item_now_selected_two_calendar_focus_secondary_text_padding_block: 0 1rem;
+		--_ui5_daypicker_two_calendar_item_selected_focus_margin_bottom: -0.25rem;
+		--_ui5_daypicker_two_calendar_item_selected_focus_padding_right: 0.4375rem;
+
+		/* DateTimePicker */
+		--_ui5_datetime_picker_height: 20.5rem;
+		--_ui5_datetime_picker_width: 35.5rem;
+		--_ui5_datetime_timeview_width: 17rem;
+		--_ui5_datetime_timeview_phonemode_width: 18.5rem;
+		--_ui5_datetime_timeview_phonemode_clocks_width: 21.125rem;
+		--_ui5_datetime_dateview_phonemode_margin_bottom: 3.125rem;
+
+		/* Popup */
+		--_ui5_popup_footer_height: 2.5rem;
+
+		/* Dialog */
+		--_ui5_dialog_content_min_height: 2.5rem;
+
+		/* Form */
+		--_ui5_form_item_min_height: 2rem;
+		--_ui5_form_item_padding: 0.25rem;
+		--_ui5-form-group-heading-height: 2rem;
+
+		/* Input */
+		--_ui5_input_height: var(--sapElement_Compact_Height);
+		--_ui5_input_inner_padding: 0 0.5rem;
+		--_ui5_input_inner_padding_with_icon: 0 0.2rem 0 0.5rem;
+		--_ui5_input_inner_space_to_tokenizer: 0.125rem;
+		--_ui5_input_inner_space_to_n_more_text: 0.125rem;
+		--_ui5_input_icon_min_width: var(--_ui5_input_compact_min_width);
+
+		/* Menu */
+		--_ui5_menu_item_padding: 0 0.75rem 0 0.5rem;
+		--_ui5_menu_item_submenu_icon_right: 0.75rem;
+
+		/* Popup subclasses */
+		--_ui5_popup_default_header_height: 2.5rem;
+
+		/* TextArea */
+		--_ui5_textarea_margin: .1875rem 0;
+
+		/* List */
+		--_ui5_list_no_data_height: 2rem;
+		--_ui5_list_item_cb_margin_right: .5rem;
+		--_ui5_list_item_title_size: var(--sapFontSize);
+		--_ui5_list_item_img_top_margin: 0.55rem;
+		--_ui5_list_no_data_font_size: var(--sapFontSize);
+		--_ui5_list_item_dropdown_base_height: 2rem;
+		--_ui5_list_item_base_height: 2rem;
+		--_ui5_list_item_base_padding: 0 1rem;
+		--_ui5_list_item_icon_size: 1rem;
+		--_ui5_list_item_selection_btn_margin_top: calc(-1 * var(--_ui5_checkbox_wrapper_padding));
+		--_ui5_list_item_content_vertical_offset: calc((var(--_ui5_list_item_base_height) - var(--_ui5_list_item_title_size)) / 2);
+		--_ui5_list_buttons_left_space: 0.125rem;
+
+		--_ui5_month_picker_item_height: 2rem;
+		--_ui5_year_picker_item_height: 2rem;
+		--_ui5_panel_header_height: 2rem;
+		--_ui5_panel_button_root_height: 2rem;
+		--_ui5_panel_button_root_width: 2.75rem;
+
+		--_ui5_token_height: 1.25rem;
+		--_ui5_token_right_margin: 0.25rem;
+		--_ui5_token_left_padding: 0.25rem;
+		--_ui5_token_readonly_padding: 0.125rem 0.25rem;
+		--_ui5_token_focus_offset: -0.125rem;
+		--_ui5_token_icon_size: .75rem;
+		--_ui5_token_icon_padding: 0.375rem 0.375rem;
+		--_ui5_token_outline_offset: -0.125rem;
+
+		--_ui5_tc_item_text: 2rem;
+		--_ui5_tc_item_text_line_height: 1.325rem;
+		--_ui5_tc_item_icon_size: 1rem;
+		--_ui5_tc_item_add_text_margin_top: 0.3125rem;
+		--_ui5_tc_item_height: 4rem;
+		--_ui5_tc_header_height: var(--_ui5_tc_item_height);
+		--_ui5_tc_item_icon_circle_size: 2rem;
+		--_ui5_tc_item_icon_size: 1rem;
+
+		/* Radio Button */
+		--_ui5_radio_button_height: 2rem;
+		--_ui5_radio_button_label_side_padding: .5rem;
+		--_ui5_radio_button_inner_size: 2rem;
+		--_ui5_radio_button_svg_size: 1rem;
+
+		/* Responsive Popover */
+		--_ui5-responsive_popover_header_height: 2.5rem;
+
+		/* Slider */
+		--_ui5_slider_handle_width: 1.5rem;
+		--_ui5_slider_tooltip_height: 1rem;
+		--_ui5_slider_tooltip_padding: 0.25rem;
+		/* --_ui5_slider_tooltip_bottom: 1.875rem; */
+		--_ui5_slider_progress_outline_offset: -0.625rem;
+		--_ui5_slider_outer_height: 1.3125rem;
+
+		/* SplitButton */
+		--_ui5_split_button_middle_separator_height: 1.625rem;
+
+		/* StepInput */
+		--_ui5_step_input_min_width: 6rem;
+		--_ui5_step_input_padding: 2rem;
+
+		/* Tree */
+		--_ui5-tree-indent-step: 0.5rem;
+		--_ui5-tree-toggle-box-width: 2rem;
+		--_ui5-tree-toggle-box-height: 1.5rem;
+		--_ui5-tree-toggle-icon-size: 0.8125rem;
+
+		/* Toolbar */
+		--_ui5-toolbar-separator-height: 1.5rem;
+		--_ui5-toolbar-height: 2rem;
+		--_ui5_toolbar_overflow_padding: 0.1875rem 0.375rem;
+
+		/* DynamicPageTitle */
+		--_ui5_dynamic_page_title_actions_separator_height: var(--_ui5-toolbar-separator-height);
+
+		/* ShellBar */
+		--_ui5-shellbar-separator-height: 2rem;
+	}
+}

package/src/themes/sap_fiori_3/Avatar-parameters.css

@@ -1,6 +1,6 @@
 @import "../base/Avatar-parameters.css";
 
-:root {
+:host {
 	--_ui5_avatar_fontsize_XS: 1rem;
 	--_ui5_avatar_fontsize_S: 1.125rem;
 	--_ui5_avatar_fontsize_M: 1.5rem;

package/src/themes/sap_fiori_3/Button-parameters.css

@@ -1,6 +1,6 @@
 @import "../base/Button-parameters.css";
 
-:root {
+:host {
 	--_ui5_button_base_min_width: 2.25rem;
 	--_ui5_button_base_padding: 0.5625rem;
 	--_ui5_button_base_icon_margin: 0.375rem;

package/src/themes/sap_fiori_3/CalendarHeader-parameters.css

@@ -1,6 +1,6 @@
 @import "../base/CalendarHeader-parameters";
 
-:root {
+:host {
 	--_ui5_calendar_header_middle_button_focus_after_width: calc(100% - 0.375rem);
 	--_ui5_calendar_header_middle_button_focus_after_height: calc(100% - 0.375rem);
 	--_ui5_calendar_header_middle_button_focus_after_top_offset: 0.125rem;

package/src/themes/sap_fiori_3/CheckBox-parameters.css

@@ -1,6 +1,6 @@
 @import "../base/CheckBox-parameters.css";
 
-:root {
+:host {
 	--_ui5_checkbox_wrapper_padding: .6875rem;
 	--_ui5_checkbox_width_height: 2.75rem;
 	--_ui5_checkbox_inner_border: .0625rem solid var(--sapField_BorderColor);

package/src/themes/sap_fiori_3/DayPicker-parameters.css

@@ -1,6 +1,6 @@
 @import "../base/DayPicker-parameters.css";
 
-:root {
+:host {
 	--_ui5_daypicker_item_selected_background: var(--sapContent_Selected_Background);
 	--_ui5_daypicker_dayname_color: var(--sapContent_LabelColor);
 	--_ui5_daypicker_weekname_color: var(--sapContent_LabelColor);

package/src/themes/sap_fiori_3/Input-parameters.css

@@ -1,6 +1,6 @@
 @import "../base/Input-parameters.css";
 
-:root {
+:host {
 	--_ui5-input-border: 1px solid var(--sapField_BorderColor);
 	--_ui5_input_readonly_border: var(--sapElement_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);
 }

package/src/themes/sap_fiori_3/Link-parameters.css

@@ -1,6 +1,6 @@
 @import "../base/Link-parameters.css";
 
-:root {
+:host {
 	--_ui5_link_text_decoration: none;
 	--_ui5_link_hover_text_decoration: underline;
 }

package/src/themes/sap_fiori_3/List-parameters.css

@@ -1,5 +1,5 @@
 @import "../base/List-parameters.css";
 
-:root {
+:host {
 	--ui5_list_footer_text_color: var(--sapTextColor);
 }

package/src/themes/sap_fiori_3/MessageStrip-parameters.css

@@ -1,6 +1,6 @@
 @import "../base/MessageStrip-parameters.css";
 
-:root{
+:host{
 	--_ui5_message_strip_close_button_color_set_1_background: var(--sapMessage_Button_Hover_Background);
 	--_ui5_message_strip_close_button_color_set_2_background: var(--sapMessage_Button_Hover_Background);
 }

package/src/themes/sap_fiori_3/MonthPicker-parameters.css

@@ -1,5 +1,5 @@
 @import "../base/MonthPicker-parameters.css";
 
-:root {
+:host {
 	--_ui5_monthpicker_item_border_radius: 0.25rem;
 }

package/src/themes/sap_fiori_3/SliderBase-parameters.css

@@ -1,9 +1,9 @@
 @import "../base/SliderBase-parameters.css";
 
-:root {
+:host {
 	--_ui5_slider_inner_min_width: 4rem;
 	--_ui5_range_slider_handle_background_focus: transparent;
-	--_ui5_slider_handle_top: -.875rem;
+	--_ui5_slider_track_total_height: var(--_ui5_slider_inner_height);
 	--_ui5_range_slider_handle_background: transparent;
 	--_ui5_range_slider_handle_active_background: transparent;
 	--_ui5_slider_handle_background: var(--sapButton_Background);
@@ -12,13 +12,20 @@
 	--_ui5_range_slider_root_active_handle_icon_display: none;
 	--_ui5_slider_handle_width: 1.875rem;
 	--_ui5_slider_handle_height: 1.875rem;
+	--_ui5_slider_handle_border: 0.125rem solid var(--sapField_BorderColor);
+	--_ui5_slider_handle_border_radius: 1rem;
+	--_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2);
 	--_ui5_slider_handle_box_sizing: border-box;
-	--_ui5_slider_tickmark_top: -.34375rem;
+	--_ui5_slider_tickmark_height: 1rem;
+	--_ui5_slider_tickmark_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_tickmark_height)) / 2);
 }
 
-[data-ui5-compact-size],
-.ui5-content-density-compact,
-.sapUiSizeCompact {
---_ui5_slider_handle_width: 1.25rem;
---_ui5_slider_handle_height: 1.25rem;
-}
+@container style(--ui5_content_density: compact) {
+	:host {
+		--_ui5_slider_handle_width: 1.5rem;
+		--_ui5_slider_handle_height: 1.5rem;
+		--_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2);
+		--_ui5_slider_tickmark_height: 0.75rem;
+		--_ui5_slider_tickmark_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_tickmark_height)) / 2);
+	}
+}

package/src/themes/sap_fiori_3/TabContainer-parameters.css

@@ -1,6 +1,6 @@
 @import "../base/TabContainer-parameters.css";
 
-:root {
+:host {
 	--_ui5_tc_header_border_bottom: 0.0625rem solid var(--sapObjectHeader_Background);
 
 	--_ui5_tc_overflowItem_default_color: var(--sapNeutralTextColor);

package/src/themes/sap_fiori_3/Tag-parameters.css

@@ -1,5 +1,5 @@
-@import "../base/Tag-parameters.css";
-
-:root {
-	--ui5-tag-information-text-shadow: var(--sapContent_ContrastTextShadow);
+@import "../base/Tag-parameters.css";
+
+:host {
+	--ui5-tag-information-text-shadow: var(--sapContent_ContrastTextShadow);
 }

package/src/themes/sap_fiori_3/Token-parameters.css

@@ -1,6 +1,6 @@
 @import "../base/Token-parameters.css";
 
-:root {
+:host {
 	--_ui5_token_focus_outline_width: 0.0625rem;
 	--_ui5_token_text_color: var(--sapTextColor);
 	--_ui5_token_icon_padding: 0.325rem 0.25rem;

package/src/themes/sap_fiori_3/YearPicker-parameters.css

@@ -1,5 +1,5 @@
 @import "../base/YearPicker-parameters.css";
 
-:root {
+:host {
 	--_ui5_yearpicker_item_border_radius: 0.25rem;
 }

package/src/themes/sap_fiori_3/sizes-parameters.css

@@ -1,6 +1,6 @@
 @import "../base/sizes-parameters.css";
 
-:root {
+:host {
 	/* CalendarLegend */
 	--_ui5-calendar-legend-item-root-focus-offset: -0.0625rem;
 
@@ -8,13 +8,9 @@
 	--_ui5_color_picker_slider_handle_container_margin_top: 0.25rem;
 }
 
-[data-ui5-compact-size],
-.ui5-content-density-compact,
-.sapUiSizeCompact {
-	/* ColorPicker */
-	--_ui5_color_picker_slider_handle_container_margin_top: none;
-
-	/* Slider, Range Slider */
-	--_ui5_slider_handle_width: 1.25rem;
-	--_ui5_slider_handle_height: 1.25rem;
-}
+@container style(--ui5_content_density: compact) {
+	:host {
+		/* ColorPicker */
+		--_ui5_color_picker_slider_handle_container_margin_top: none;
+	}
+}

package/src/themes/sap_fiori_3_dark/Avatar-parameters.css

@@ -1,6 +1,6 @@
 @import "../base/Avatar-parameters.css";
 
-:root {
+:host {
 	--_ui5_avatar_fontsize_XS: 1rem;
 	--_ui5_avatar_fontsize_S: 1.125rem;
 	--_ui5_avatar_fontsize_M: 1.5rem;

package/src/themes/sap_fiori_3_dark/Button-parameters.css

@@ -1,6 +1,6 @@
 @import "../base/Button-parameters.css";
 
-:root {
+:host {
 	--_ui5_button_base_min_width: 2.25rem;
 	--_ui5_button_base_padding: 0.5625rem;
 	--_ui5_button_base_icon_margin: 0.375rem;