== Goal
MediaWiki skins should be able to render MediaWiki own widgets and possibly also OOUI or other UI components in skin-specific styles.
Imagine a widget with WikimediaUI theme styles for Vector and MinervaNeue and Apex theme style for MonoBook.
== Problem statement
I would like it if there was a way to provide OOUI-theme-specific styles in regular ResourceLoader modules shipped with MediaWiki.
My use case is the DateInputWidget. It is styled specifically for the default WikimediaUI theme, and while it looks neat there, it looks out of place elsewhere:
| WikimediaUI themed default look in Vector | Apex-theme using skin Monobook
| {F2609658} | {F2609662}
(That is actually not quite as awful as I was afraid, but still.)
== Proposed solution
See also T112747#4093591, this is just the short summary of implemented path:
[x] 1. Add a MediaWiki core solution that will offer sane defaults for all design-approved, naming convention following variables (and require them to be defined) – //defined in core's 'resources/src/mediawiki.less/mediawiki.skin.defaults.less'//
[x] 2. Add skin-specific `@import` feature that offers to redefine values accordingly in all Wikimedia Foundation deployed skins – //defined in skin's 'resources/mediawiki.less/mediawiki.skin.variables.less'//
==== Instructions for skins
``` lang=less
// In skin.json, add:
// "SkinLessImportPaths": {
// "skinname": "resources/mediawiki.less"
// }
//
// Create a file called resources/mediawiki.less/mediawiki.skin.variables.less, which starts with:
// @import 'mediawiki.skin.default.less';
// followed by any overrides for these variables, e.g.:
// @width-breakpoint-desktop: 1234px;
```
=== In follow-ups to this task
3. Bring mediawiki.skin.variables to all Wikimedia
4. Import WikimediaUI Base variables in Vector's 'mediawiki.skin.variables.less' file
5. Import WikimediaUI Base variables in MinervaNeue's
6. Use OOUI's Apex theme variables in Monobook's import