As part of the strategy outlined in https://phabricator.wikimedia.org/T346363#9176155 we would like to keep the CSS refactors that Zebra introduced, but remove it's visual distinction until we do further testing.
To do this, we should update the Zebra CSS module so that visually, it looks the same as the current Vector 2022 design.
###Technical notes
The styles responsible for the Zebra design are actually a very small part of the Zebra code, encapsulated in a mixin called [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/skins/Vector/+/refs/heads/master/resources/skins.vector.zebra.styles/mixins.less#38 | .mixin-vector-content-box() ]]. Modifying that mixin that will remove the background colors and will roughly match the current design, however padding and alignment will have to be adjusted throughout the layout. Design should be consulted in changes to alignment and sizing.
POC Patch: https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/958529
| {F37730785, width=500} | {F37730783, width=500}
| Current styles | Zebra with current styles
Updating these styles **should** resolve (or invalidate) the following issues:
- T339058 Zebra: VE surface widgets have too much padding on Vector Zebra
- T343250 Zebra: Empty table of contents shows in VE edit mode
- T336048 Zebra: You have new message toolbar is too small and too close to the toolbar in zebra design