vaadin
Make component styling easier
This is a broad issue, listing multiple loosely related things, which I noted down when I was working on the custom design system demo, Hedge (live demo, theme source code)
All issues are based on using Lumo as the parent theme.
Sharing styles across components
The Vaadin "custom theme" feature is a nice convenience over the registerStyles() API, allowing the use of regular .css files. But it is cumbersome to add the same styles into multiple components ("shared styles"). As an example, having shared field styles (label, helper, input field, etc), you need to need to create multiple files which might just contain one import statement.
This applies to "lumo-menu-overlay" styles as well. You need to include the same styles for select-overlay, combobox-overlay, menubar-overlay, contextmenu-overlay, etc.
You always need to restart the app when you add a style sheet file for a new component, which can slow development as you work on components one by one.
It feels both of these cases (generic field features and generic popup menu features) would benefit from cleaner "componentization", that there’s an easy way to target them in a unified way.
Confirm dialog styling
Basically the same as #503, just venting some more frustration:
- It’s odd that the correct component name is “vaadin-confirm-dialog” and not “vaadin-confirm-dialog-overlay” (inconsistent with other overlays)
- Lumo theme uses unsupported selectors (or just a different style of API than we should) like
.header, .cancel|reject|confirm-button - The small viewport styles are a mess by default (button sizing/alignment)
Notification button styles
It is too easy to override button colors in Notification theme variants, and hard to figure out how to fix. Example
I would suggest we redesign the Notification theme variants to not override button colors (basically not use colored backgrounds, other than "dark mode" for which we can have suitable colors).
Inconsistencies
- To style the CRUD editor dialog we need to style vaadin-dialog-layout
- Login Overlay styling is done with vaadin-login-overlay, but Login Form with vaadin-login-form-wrapper
Misc
- Customizing tab selection indicator is tricky because of the hardcoded transform
