Description
Overview
Although there are a few element here that have missing styles, I think it makes sense to group them into this 1 issue since they are all suffering the same problem.
Part of #1174
Thoughts on cause of issue
I believe that the majority of these issue are because the CSS custom properties on the editor web component (used for theming) are currently unset when the web component is used (like on the projects site). However, being unset should not cause the styles to break - possibly this is because the custom properties have not been set with default fallbacks? Or the value that is being set is being lost in in build.
For example, --sidebar-border is set to var(--rpf-grey-150) in the editor here. In the projects site, this is unset.
Some of these issues do present usability / accessibility issues. Such as the lack of hover states.
Solution
- All themable custom properties should have a default fallback, so that if the consuming site not setting this custom properties, it will appear in the default theme.