Similar to the component baseline choice (T253933), a complementing styling technical baseline should be chosen. Styling is needed for the components themselves, layout, definitions, and more. What baseline should we start with for #Vue.js Search ?
The motivations are pretty similar to T253933.
== Options
Among the options are:
- mediawiki.UI ([[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.ui/components | components ]], [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less | mediawiki.less ]])
- [[ https://phabricator.wikimedia.org/source/wikimedia-ui-base/wikimedia-ui-base.less | WikimediaUI Base stylesheet variables ]]
- OOUI ([[ https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/9f86595933211f61d424ca919e8263e619f28b47/src/styles | components ]], [[ https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/9f86595933211f61d424ca919e8263e619f28b47/src/themes/wikimediaui/ | themes ]])
- ...?
== Approaches
- File copy
- In-between: E.g., pieces of mediawiki.ui with new class names and Wikimedia UI.
- Blank slate
== Concerns
- Too much legacy code to innovate vs too little to build upon
- At least for #Vue.js-Search, efforts should be categorized as weeks, months, or years of effort.
- Naming conflicts with existing styles.
- Migration paths.
- Bandwidth consumption. #Vue.js-Search adds a significant new dependency to the main namespace, Vue.js itself. We must try especially hard to to minimize bytes shipped during this time.
- Risk loosing internationalization and accessibility measurements on the way if not done appropriately, see T249300
- Deviations from [[ https://design.wikimedia.org/style-guide/components/links.html | Wikimedia Design Style Guide component blueprints ]], resulting in a non-aligned component.
== Related concerns to consider but not necessarily resolve right now
- Surfacing theme to the top level and allowing components to be only structure.
- Enabling vs forbidding styling usage in content. E.g., if scoped styles are used this makes usage in content blocked by obfuscation.
- Grid seems useful but big. Is this something we can use for #Vue.js-Search?
- What changes are needed to the current version to use in #Vue.js-Search only? A little? A rewrite? Somewhere in between?
- Code structure and splitting strategies.
== Conclusions
- Copy CSS/Less properties from OOUI for the search use case.
- Interim CSS naming conventions should follow BEM (see T255100#6225014).
- Use [[ https://github.com/wikimedia/wikimedia-ui-base | wikimedia-ui-base ]] as variables.
- Additional guidelines in the conclusion section of T253933, the subtask acceptance criteria section of T255902, and [[ https://www.mediawiki.org/wiki/Vue.js/OOUI_migration_guide | OOUI migration guide ]].
== Acceptance criteria
- [x] A baseline option is chosen. > See above, combination of WikimediaUI Base variables as baseline design decisions, CSS properties from OOUI as best-practice application and BEM(-derived) naming convention
- [x] A task or tasks are made for creating or copying any of the existing styles over to the library. > Will be executed in new component specific tasks.