Themeing / styling ?

[Quafadas]

This is a "discussion" rather than an issue...

Is there currently any prior art on styling / themeing? I looked at the SAP website... but it looks the theme is currently for their actual customers... which sadly... I am not!

[sherpal]

This is actually a pretty good question. I haven't looked at theming myself already. I myself is really not in position to create any custom theme, so I just go along with sap_fiori_3 the default).

What I do see is that the output of a theme looks like the thing below. This you can see if you go do node_modules/@ui5/webcomponents/dist/generated/assets/themes/sap_fiori_3.

I'll see if I can dig this a bit further.

{"_":{"packageName":"@ui5/webcomponents","fileName":"themes/sap_fiori_3/parameters-bundle.css","content":":root{--_ui5_calendar_height:24.5rem;--_ui5_calendar_width:20.5rem;--_ui5_calendar_padding:1rem;--_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;--_ui5_calendar_header_padding:0.25rem 0;--_ui5_checkbox_root_side_padding:.6875rem;--_ui5_checkbox_icon_size:1rem;--_ui5_checkbox_partially_icon_size:.75rem;--_ui5_custom_list_item_rb_min_width:2.75rem;--_ui5_day_picker_item_width:2.25rem;--_ui5_day_picker_item_height:2.875rem;--_ui5_day_picker_empty_height:3rem;--_ui5_day_picker_item_justify_content:space-between;--_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)/2 - var(--_ui5_color-palette-item-height)/2);--_ui5_color-palette-row-width:12rem;--_ui5_color-palette-swatch-container-padding:0.3125rem 0.6875rem;--_ui5_datetime_picker_width:40.0625rem;--_ui5_datetime_picker_height:25rem;--_ui5_datetime_timeview_phonemode_width:19.5rem;--_ui5_datetime_timeview_padding:1rem;--_ui5_dialog_content_min_height:2.75rem;--_ui5_input_inner_padding:0 0.625rem;--_ui5_input_inner_padding_with_icon:0 0.25rem 0 0.625rem;--_ui5_input_value_state_icon_padding:var(--_ui5-input-icon-padding);--_ui5_list_no_data_height:3rem;--_ui5_list_item_cb_margin_right:0;--_ui5_list_item_title_size:var(--sapFontLargeSize);--_ui5_list_item_img_size:3rem;--_ui5_list_item_img_top_margin:0.5rem;--_ui5_list_item_img_bottom_margin:0.5rem;--_ui5_list_item_img_hn_margin:0.75rem;--_ui5_list_item_dropdown_base_height:2.5rem;--_ui5_list_item_base_height:2.75rem;--_ui5_list_item_icon_size:1.125rem;--_ui5_group_header_list_item_height:2.75rem;--_ui5_list_busy_row_height:3rem;--_ui5_month_picker_item_height:3rem;--_ui5_popup_default_header_height:2.75rem;--_ui5-notification-overflow-popover-padding:0.25rem 0.5rem;--_ui5_year_picker_item_height:3rem;--_ui5_tokenizer_root_padding:0.1875rem;--_ui5_token_height:1.625rem;--_ui5_token_icon_padding:0.25rem 0.5rem;--_ui5_token_wrapper_right_padding:0.3125rem;--_ui5_tl_bubble_padding:1rem;--_ui5_tl_indicator_before_bottom:-1.625rem;--_ui5_tl_padding:1rem 1rem 1rem .5rem;--_ui5_tl_li_margin_bottom:1.625rem;--_ui5_switch_focus_width_size_horizon_exp:calc(100% + 4px);--_ui5_switch_focus_height_size_horizon_exp:calc(100% + 4px);--_ui5_switch_text_on_left:calc(-100% + 1.9125rem);--_ui5_switch_slide_transform:translateX(100%) translateX(-1.875rem);--_ui5_switch_rtl_transform:translateX(1.875rem) translateX(-100%);--_ui5_switch_text_right:calc(-100% + 1.9125rem);--_ui5_tc_item_text:3rem;--_ui5_tc_item_height:4.75rem;--_ui5_tc_item_text_only_height:2.75rem;--_ui5_tc_item_text_only_with_additional_text_height:3.75rem;--_ui5_tc_item_icon_circle_size:2.75rem;--_ui5_tc_item_icon_size:1.25rem;--_ui5_tc_item_add_text_margin_top:0.375rem;--_ui5_textarea_padding:0.5rem 0.625rem;--_ui5_textarea_margin:.25rem 0;--_ui5_panel_header_height:2.75rem;--_ui5_radio_button_height:2.75rem;--_ui5_radio_button_label_side_padding:.875rem;--_ui5_radio_button_focus_dist:.5rem;--_ui5_radio_button_inner_size:2.75rem;--_ui5_radio_button_svg_size:1.375rem;--_ui5_radio_button_label_width:calc(100% - 2.75rem);--_ui5_radio_button_rtl_focus_right:0.5rem;--_ui5-responsive_popover_header_height:2.75rem;--ui5_side_navigation_item_height:2.75rem;--_ui5_load_more_text_height:2.75rem;--_ui5_load_more_text_font_size:var(--sapFontMediumSize);--_ui5_load_more_desc_padding:0.375rem 2rem 0.875rem 2rem;--ui5_table_header_row_height:2.75rem;--ui5_table_row_height:2.75rem;--ui5_table_focus_outline_offset:-0.125rem;--ui5_table_group_row_height:2rem;--_ui5-tree-indent-step:1.5rem;--_ui5-tree-toggle-box-width:2.75rem;--_ui5-tree-toggle-box-height:2.25rem;--_ui5-tree-toggle-icon-size:1.0625rem;--_ui5_timeline_tli_indicator_before_bottom:-1.625rem;--_ui5_timeline_tli_indicator_before_right:-1.625rem;--_ui5_timeline_tli_indicator_before_without_icon_bottom:-1.875rem;--_ui5_timeline_tli_indicator_before_without_icon_right:-1.9375rem;--_ui5_split_button_middle_separator_height:2.25rem}.sapUiSizeCompact,.ui5-content-density-compact,:root,[data-ui5-compact-size]{--_ui5_datetime_timeview_width:17rem;--_ui5_list_item_selection_btn_margin_top:calc(var(--_ui5_checkbox_wrapper_padding)*-1);--_ui5_token_icon_size:.75rem;--_ui5_token_wrapper_left_padding:0;--_ui5_tc_item_text_line_height:1.325rem;--_ui5_split_button_middle_separator_top:0}.sapUiSizeCompact,.ui5-content-density-compact,[data-ui5-compact-size]{--_ui5_button_base_height:1.625rem;--_ui5_button_base_padding:0.4375rem;--_ui5_button_base_min_width:2rem;--_ui5_button_icon_font_size:1rem;--_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;--_ui5_checkbox_root_side_padding:var(--_ui5_checkbox_wrapped_focus_padding);--_ui5_checkbox_wrapped_content_margin_top:var(--_ui5_checkbox_compact_wrapped_label_margin_top);--_ui5_checkbox_wrapped_focus_left_top_bottom_position:var(--_ui5_checkbox_compact_focus_position);--_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_inner_width_height:var(--_ui5_checkbox_compact_inner_size);--_ui5_checkbox_icon_size:.75rem;--_ui5_checkbox_partially_icon_size:.5rem;--_ui5_color-palette-item-height:1.25rem;--_ui5_color-palette-item-focus-height:1rem;--_ui5_color-palette-item-container-sides-padding:0.1875rem;--_ui5_color-palette-item-container-rows-padding:0.8125rem;--_ui5_color-palette-item-hover-height:1.625rem;--_ui5_color-palette-item-margin:calc(var(--_ui5_color-palette-item-hover-height)/2 - 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;--_ui5_custom_list_item_rb_min_width:2rem;--_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_datetime_picker_height:17rem;--_ui5_datetime_picker_width:34.0625rem;--_ui5_datetime_timeview_phonemode_width:18.5rem;--_ui5_datetime_timeview_padding:0.5rem;--_ui5_dialog_content_min_height:2.5rem;--_ui5_input_height:var(--_ui5_input_compact_height);--_ui5_input_inner_padding:0 0.5rem;--_ui5_input_icon_min_width:var(--_ui5_input_compact_min_width);--_ui5_input_icon_padding:.25rem .4375rem;--_ui5_input_error_warning_icon_padding:.1875rem .375rem .1875rem .4375rem;--_ui5_input_information_icon_padding:.1875rem .375rem .1875rem .4375rem;--_ui5_input_custom_icon_padding:.25rem .5rem;--_ui5_input_error_warning_custom_icon_padding:.1875rem .5rem;--_ui5_input_information_custom_icon_padding:.1875rem .5rem;--_ui5_input_value_state_icon_padding:.1875rem .5rem;--_ui5-notification-overflow-popover-padding:0.25rem 0.5rem;--_ui5_popup_default_header_height:2.5rem;--_ui5_textarea_padding:.1875rem .5rem;--_ui5_textarea_margin:.1875rem 0;--_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_item_dropdown_base_height:2rem;--_ui5_list_item_base_height:2rem;--_ui5_list_item_icon_size:1rem;--_ui5_list_busy_row_height:2rem;--_ui5_month_picker_item_height:2rem;--_ui5_year_picker_item_height:2rem;--_ui5_panel_header_height:2.5rem;--_ui5_tokenizer_root_padding:0.125rem;--_ui5_token_height:1.125rem;--_ui5_token_icon_padding:0.1rem 0.25rem;--_ui5_token_wrapper_right_padding:0.25rem;--_ui5_tl_bubble_padding:.5rem;--_ui5_tl_indicator_before_bottom:-.5rem;--_ui5_tl_padding:.5rem;--_ui5_tl_li_margin_bottom:.5rem;--_ui5_wheelslider_item_width:64px;--_ui5_wheelslider_item_height:32px;--_ui5_wheelslider_height:224px;--_ui5_wheelslider_selection_frame_margin_top:calc(var(--_ui5_wheelslider_item_height)*2);--_ui5_wheelslider_arrows_visibility:visible;--_ui5_wheelslider_mobile_selection_frame_margin_top:128px;--_ui5_switch_height:var(--_ui5_switch_compact_height);--_ui5_switch_width:var(--_ui5_switch_compact_width);--_ui5_switch_handle_height:var(--_ui5_switch_handle_compact_height);--_ui5_switch_handle_width:var(--_ui5_switch_handle_compact_width);--_ui5_switch_text_on_left:calc(-100% + 1.5625rem);--_ui5_switch_slide_transform:translateX(100%) translateX(-1.5rem);--_ui5_switch_no_label_width:var(--_ui5_switch_compact_no_label_width);--_ui5_switch_rtl_transform:translateX(-100%) translateX(1.5rem);--_ui5_switch_text_right:calc(-100% + 1.5625rem);--_ui5_switch_root_outline_top_bottom:var(--_ui5_switch_compact_root_outline_top_bottom);--_ui5_switch_root_outline_left_right:var(--_ui5_switch_compact_root_outline_left_right);--_ui5_tc_item_text:2rem;--_ui5_tc_item_add_text_margin_top:0.3125rem;--_ui5_tc_header_height:var(--_ui5_tc_header_height_compact);--_ui5_tc_item_height:4rem;--_ui5_tc_item_icon_circle_size:2rem;--_ui5_tc_item_icon_size:1rem;--_ui5_radio_button_min_width:var(--_ui5_radio_button_min_width_compact);--_ui5_radio_button_height:2rem;--_ui5_radio_button_label_side_padding:.5rem;--_ui5_radio_button_focus_dist:.375rem;--_ui5_radio_button_inner_size:2rem;--_ui5_radio_button_svg_size:1rem;--_ui5_radio_button_label_width:calc(100% - 2rem + 1px);--_ui5_radio_button_rtl_focus_right:0.375rem;--_ui5-responsive_popover_header_height:2.5rem;--ui5_side_navigation_item_height:2rem;--_ui5_slider_handle_height:1.25rem;--_ui5_slider_handle_width:1.25rem;--_ui5_slider_handle_top:-0.6425rem;--_ui5_slider_handle_margin_left:-0.7825rem;--_ui5_slider_tooltip_height:1rem;--_ui5_slider_tooltip_padding:0.25rem;--_ui5_slider_tooltip_bottom:1.825rem;--_ui5_slider_progress_outline_offset:-0.625rem;--_ui5_slider_outer_height:1.3125rem;--_ui5_split_button_middle_separator_height:1.625rem;--_ui5_step_input_min_width:6rem;--_ui5_load_more_text_height:2.625rem;--_ui5_load_more_text_font_size:var(--sapFontSize);--_ui5_load_more_desc_padding:0 2rem 0.875rem 2rem;--ui5_table_header_row_height:2rem;--ui5_table_row_height:2rem;--_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;--_ui5_timeline_tli_indicator_before_bottom:-0.5rem;--_ui5_timeline_tli_indicator_before_right:-0.5rem;--_ui5_timeline_tli_indicator_before_without_icon_bottom:-0.75rem;--_ui5_timeline_tli_indicator_before_without_icon_right:-0.8125rem;--_ui5_vsd_header_container:2.5rem;--_ui5_vsd_sub_header_container_height:2rem;--_ui5_vsd_header_height:4rem;--_ui5_vsd_expand_content_height:25.4375rem}:root,[dir=ltr]{--_ui5_rotation_90deg:rotate(90deg);--_ui5_rotation_minus_90deg:rotate(-90deg);--_ui5_icon_transform_scale:none;--_ui5_panel_toggle_btn_rotation:var(--_ui5_rotation_90deg);--_ui5_li_notification_group_toggle_btn_rotation:var(--_ui5_rotation_90deg);--_ui5_timeline_scroll_container_offset:0.5rem}[dir=rtl]{--_ui5_icon_transform_scale:scale(-1,1);--_ui5_panel_toggle_btn_rotation:var(--_ui5_rotation_minus_90deg);--_ui5_li_notification_group_toggle_btn_rotation:var(--_ui5_rotation_minus_90deg);--_ui5_timeline_scroll_container_offset:-0.5rem}:root{--ui5-avatar-initials-color:var(--sapContent_ImagePlaceholderForegroundColor);--ui5-avatar-border-radius:.25rem;--ui5-avatar-initials-border:none;--ui5-avatar-accent1:var(--sapAccentColor1);--ui5-avatar-accent2:var(--sapAccentColor2);--ui5-avatar-accent3:var(--sapAccentColor3);--ui5-avatar-accent4:var(--sapAccentColor4);--ui5-avatar-accent5:var(--sapAccentColor5);--ui5-avatar-accent6:var(--sapAccentColor6);--ui5-avatar-accent7:var(--sapAccentColor7);--ui5-avatar-accent8:var(--sapAccentColor8);--ui5-avatar-accent9:var(--sapAccentColor9);--ui5-avatar-accent10:var(--sapAccentColor10);--ui5-avatar-placeholder:var(--sapContent_ImagePlaceholderBackground);--ui5-avatar-accent1-color:var(--ui5-avatar-initials-color);--ui5-avatar-accent2-color:var(--ui5-avatar-initials-color);--ui5-avatar-accent3-color:var(--ui5-avatar-initials-color);--ui5-avatar-accent4-color:var(--ui5-avatar-initials-color);--ui5-avatar-accent5-color:var(--ui5-avatar-initials-color);--ui5-avatar-accent6-color:var(--ui5-avatar-initials-color);--ui5-avatar-accent7-color:var(--ui5-avatar-initials-color);--ui5-avatar-accent8-color:var(--ui5-avatar-initials-color);--ui5-avatar-accent9-color:var(--ui5-avatar-initials-color);--ui5-avatar-accent10-color:var(--ui5-avatar-initials-color);--ui5-avatar-placeholder-color:var(--ui5-avatar-initials-color);--ui5-avatar-accent1-border-color:var(--sapField_BorderColor);--ui5-avatar-accent2-border-color:var(--sapField_BorderColor);--ui5-avatar-accent3-border-color:var(--sapField_BorderColor);--ui5-avatar-accent4-border-color:var(--sapField_BorderColor);--ui5-avatar-accent5-border-color:var(--sapField_BorderColor);--ui5-avatar-accent6-border-color:var(--sapField_BorderColor);--ui5-avatar-accent7-border-color:var(--sapField_BorderColor);--ui5-avatar-accent8-border-color:var(--sapField_BorderColor);--ui5-avatar-accent9-border-color:var(--sapField_BorderColor);--ui5-avatar-accent10-border-color:var(--sapField_BorderColor);--ui5-avatar-placeholder-border-color:var(--sapField_BorderColor);--_ui5_avatar_outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
[... very long stuff ...]

[Quafadas]

Thanks for writing back - no worries. It's not something you should feel obligated to do. I'll also do a little digging.

I did find this at some point during the day, so it's something I'll poke a little over the coming days. https://developers.sap.com/tutorials/ui5-webcomponents-react-styling.html

https://github.com/SAP/ui5-webcomponents-react/blob/main/packages/base/src/styling/ThemingParameters.ts

[Quafadas]

Note; this does something promising;

ui5-shellbar::part(root) {  
  height: 4vh;
  --_ui5_shellbar_menu_button_title_font_size: 2em;
  --sapFontSmallSize: 2em;  
} 

A couple of points; it would appear to allow us to select sutf out the "shadow dom" which apparently these components use extensively.

Some of those lines override SAP variables... but only inside that part of the DOM tree (I think because of the shadow DOM jiggy.

[sherpal]

Small trivia that I just discovered (and actually don't see where it's documented), but if you put the css class ui5-content-density-compact on the element surrounding your SAP app, then everything is a bit more densed (and more suitable for desktop apps). The default, which is apparently the "cozy" one, is more tailored for mobile apps (because touch-interactive elements are a bit bigger and easier to "tap" on).

More info here.