Use ForeignResourceManager to download wikimedia-ui-base.less

Bug: T296379 Change-Id: I133439d58c28bcb12622de5746b17d261923af2f
2021-11-26 11:26:59 +01:00 · 2021-11-26 11:26:59 +01:00 · 47da3bee8f
--- a/.stylelintignore
+++ b/.stylelintignore
@ -0,0 +1 @@
+modules/lib
--- a/maintenance/manageForeignResources.php
+++ b/maintenance/manageForeignResources.php
@ -0,0 +1,48 @@
+<?php
+namespace GrowthExperiments\Maintenance;
+
+use ForeignResourceManager;
+use Maintenance;
+
+// Security: Disable all stream wrappers and reenable individually as needed
+foreach ( stream_get_wrappers() as $wrapper ) {
+	stream_wrapper_unregister( $wrapper );
+}
+// Needed by the Guzzle library for some reason
+stream_wrapper_restore( 'php' );
+// Needed by ForeignResourceManager to unpack TAR files
+stream_wrapper_restore( 'phar' );
+stream_wrapper_restore( 'file' );
+$basePath = getenv( 'MW_INSTALL_PATH' );
+if ( $basePath ) {
+	if ( !is_dir( $basePath )
+		|| strpos( $basePath, '.' ) !== false
+		|| strpos( $basePath, '~' ) !== false
+	) {
+		die( "Bad MediaWiki install path: $basePath\n" );
+	}
+} else {
+	$basePath = __DIR__ . '/../../..';
+}
+require_once "$basePath/maintenance/Maintenance.php";
+class ManageForeignResources extends Maintenance {
+	public function __construct() {
+		parent::__construct();
+		$this->requireExtension( 'GrowthExperiments' );
+	}
+
+	public function execute() {
+		$frm = new ForeignResourceManager(
+			__DIR__ . '/../modules/lib/foreign-resources.yaml',
+			__DIR__ . '/../modules/lib'
+		);
+		return $frm->run( 'update', 'all' );
+	}
+}
+$maintClass = ManageForeignResources::class;
+$doMaintenancePath = RUN_MAINTENANCE_IF_MAIN;
+if ( !( file_exists( $doMaintenancePath ) &&
+	realpath( $doMaintenancePath ) === realpath( "$basePath/maintenance/doMaintenance.php" ) ) ) {
+	die( "Bad maintenance script location: $basePath\n" );
+}
+require_once RUN_MAINTENANCE_IF_MAIN;
--- a/modules/ext.growthExperiments.MentorDashboard/BaseModule.less
+++ b/modules/ext.growthExperiments.MentorDashboard/BaseModule.less
@ -1,5 +1,5 @@
@import 'mediawiki.ui/variables';
-@import 'resources/lib/ooui/wikimedia-ui-base.less';
+@import '../lib/wikimedia-ui-base/wikimedia-ui-base.less';
@import '../homepage/ext.growthExperiments.mixins.less';
@import 'variables.less';

--- a/modules/ext.growthExperiments.MentorDashboard/MenteeOverview/MenteeOverview.less
+++ b/modules/ext.growthExperiments.MentorDashboard/MenteeOverview/MenteeOverview.less
@ -1,5 +1,5 @@
@import 'mediawiki.ui/variables';
-@import 'resources/lib/ooui/wikimedia-ui-base.less';
+@import '../../lib/wikimedia-ui-base/wikimedia-ui-base.less';
@import '../../homepage/ext.growthExperiments.mixins.less';

 // .growthexperiments-mentor-dashboard-container is here only to make the resulting selector
--- a/modules/ext.growthExperiments.MentorDashboard/MentorTools/MentorTools.less
+++ b/modules/ext.growthExperiments.MentorDashboard/MentorTools/MentorTools.less
@ -1,4 +1,4 @@
-@import 'resources/lib/ooui/wikimedia-ui-base.less';
+@import '../../lib/wikimedia-ui-base/wikimedia-ui-base.less';
@import '../../homepage/ext.growthExperiments.mixins.less';
@import '../variables.less';

--- a/modules/ext.growthExperiments.StructuredTask.PreEdit/StructuredTaskOnboardingContent.less
+++ b/modules/ext.growthExperiments.StructuredTask.PreEdit/StructuredTaskOnboardingContent.less
@ -1,4 +1,4 @@
-@import 'resources/lib/ooui/wikimedia-ui-base.less';
+@import '../lib/wikimedia-ui-base/wikimedia-ui-base.less';
@import '../homepage/ext.growthExperiments.variables.less';
@import '../homepage/ext.growthExperiments.mixins.less';

--- a/modules/ext.growthExperiments.StructuredTask.PreEdit/StructuredTaskOnboardingDialog.less
+++ b/modules/ext.growthExperiments.StructuredTask.PreEdit/StructuredTaskOnboardingDialog.less
@ -1,4 +1,4 @@
-@import 'resources/lib/ooui/wikimedia-ui-base.less';
+@import '../lib/wikimedia-ui-base/wikimedia-ui-base.less';
@import '../homepage/ext.growthExperiments.variables.less';
@import '../homepage/ext.growthExperiments.mixins.less';

--- a/modules/ext.growthExperiments.StructuredTask.PreEdit/addimage/AddImageOnboardingContent.less
+++ b/modules/ext.growthExperiments.StructuredTask.PreEdit/addimage/AddImageOnboardingContent.less
@ -1,4 +1,4 @@
-@import 'resources/lib/ooui/wikimedia-ui-base.less';
+@import '../../lib/wikimedia-ui-base/wikimedia-ui-base.less';
@import '../../homepage/ext.growthExperiments.mixins';

 .addimage-onboarding-content {
--- a/modules/ext.growthExperiments.StructuredTask.PreEdit/addlink/AddLinkOnboardingContent.less
+++ b/modules/ext.growthExperiments.StructuredTask.PreEdit/addlink/AddLinkOnboardingContent.less
@ -1,4 +1,4 @@
-@import 'resources/lib/ooui/wikimedia-ui-base.less';
+@import '../../lib/wikimedia-ui-base/wikimedia-ui-base.less';
@import '../../homepage/ext.growthExperiments.mixins.less';

 .addlink-onboarding-content {
--- a/modules/ext.growthExperiments.StructuredTask/MachineSuggestionsMode.less
+++ b/modules/ext.growthExperiments.StructuredTask/MachineSuggestionsMode.less
@ -1,4 +1,4 @@
-@import 'resources/lib/ooui/wikimedia-ui-base.less';
+@import '../lib/wikimedia-ui-base/wikimedia-ui-base.less';

 .ve-ui-surface-machineSuggestions {
 	z-index: 1;
--- a/modules/ext.growthExperiments.StructuredTask/StructuredTaskSaveDialog.less
+++ b/modules/ext.growthExperiments.StructuredTask/StructuredTaskSaveDialog.less
@ -1,4 +1,4 @@
-@import 'resources/lib/ooui/wikimedia-ui-base.less';
+@import '../lib/wikimedia-ui-base/wikimedia-ui-base.less';
@import '../homepage/ext.growthExperiments.mixins.less';

 .ge-structuredTask-mwSaveDialog {
--- a/modules/ext.growthExperiments.StructuredTask/StructuredTaskToolbarDialog.less
+++ b/modules/ext.growthExperiments.StructuredTask/StructuredTaskToolbarDialog.less
@ -1,4 +1,4 @@
-@import 'resources/lib/ooui/wikimedia-ui-base.less';
+@import '../lib/wikimedia-ui-base/wikimedia-ui-base.less';
@import '../homepage/ext.growthExperiments.variables.less';

 .mw-ge-structuredTaskToolbarDialog {
--- a/modules/ext.growthExperiments.StructuredTask/addimage/AddImageDetailsDialog.less
+++ b/modules/ext.growthExperiments.StructuredTask/addimage/AddImageDetailsDialog.less
@ -1,5 +1,5 @@
@import 'mediawiki.ui/variables.less';
-@import 'resources/lib/ooui/wikimedia-ui-base.less';
+@import '../../lib/wikimedia-ui-base/wikimedia-ui-base.less';
@import '../../homepage/ext.growthExperiments.mixins.less';

 .mw-ge-addImageDetailsDialog {
--- a/modules/ext.growthExperiments.StructuredTask/addimage/AddImageSaveDialog.less
+++ b/modules/ext.growthExperiments.StructuredTask/addimage/AddImageSaveDialog.less
@ -1,4 +1,4 @@
-@import 'resources/lib/ooui/wikimedia-ui-base.less';
+@import '../../lib/wikimedia-ui-base/wikimedia-ui-base.less';
@import '../../homepage/ext.growthExperiments.mixins.less';

 .mw-ge-addImageSaveDialog {
--- a/modules/ext.growthExperiments.StructuredTask/addimage/RecommendedImageRejectionDialog.less
+++ b/modules/ext.growthExperiments.StructuredTask/addimage/RecommendedImageRejectionDialog.less
@ -1,4 +1,4 @@
-@import 'resources/lib/ooui/wikimedia-ui-base.less';
+@import '../../lib/wikimedia-ui-base/wikimedia-ui-base.less';
@import 'mediawiki.ui/variables.less';
@import '../../homepage/ext.growthExperiments.mixins.less';

--- a/modules/ext.growthExperiments.StructuredTask/addimage/RecommendedImageToolbarDialog.less
+++ b/modules/ext.growthExperiments.StructuredTask/addimage/RecommendedImageToolbarDialog.less
@ -1,4 +1,4 @@
-@import 'resources/lib/ooui/wikimedia-ui-base.less';
+@import '../../lib/wikimedia-ui-base/wikimedia-ui-base.less';
@import '../../homepage/ext.growthExperiments.variables.less';
@import '../../homepage/ext.growthExperiments.mixins';

--- a/modules/ext.growthExperiments.StructuredTask/addimage/ceRecommendedImageCaptionNode.less
+++ b/modules/ext.growthExperiments.StructuredTask/addimage/ceRecommendedImageCaptionNode.less
@ -1,4 +1,4 @@
-@import 'resources/lib/ooui/wikimedia-ui-base.less';
+@import '../../lib/wikimedia-ui-base/wikimedia-ui-base.less';
@paragraphPadding: 7px 8px 27px 8px; // adding bottom padding for help button

 .mw-ge-recommendedImageCaption {
--- a/modules/ext.growthExperiments.StructuredTask/addimage/ceRecommendedImageNode.less
+++ b/modules/ext.growthExperiments.StructuredTask/addimage/ceRecommendedImageNode.less
@ -1,4 +1,4 @@
-@import 'resources/lib/ooui/wikimedia-ui-base.less';
+@import '../../lib/wikimedia-ui-base/wikimedia-ui-base.less';
@import '../../homepage/ext.growthExperiments.mixins';

 .mw-ge-recommendedImage {
--- a/modules/ext.growthExperiments.StructuredTask/addlink/AddLinkSaveDialog.less
+++ b/modules/ext.growthExperiments.StructuredTask/addlink/AddLinkSaveDialog.less
@ -1,4 +1,4 @@
-@import 'resources/lib/ooui/wikimedia-ui-base.less';
+@import '../../lib/wikimedia-ui-base/wikimedia-ui-base.less';
@import '../../homepage/ext.growthExperiments.mixins.less';

 .ge-addlink-mwSaveDialog {
--- a/modules/ext.growthExperiments.StructuredTask/addlink/RecommendedLinkRejectionDialog.less
+++ b/modules/ext.growthExperiments.StructuredTask/addlink/RecommendedLinkRejectionDialog.less
@ -1,4 +1,4 @@
-@import 'resources/lib/ooui/wikimedia-ui-base.less';
+@import '../../lib/wikimedia-ui-base/wikimedia-ui-base.less';
@import 'mediawiki.ui/variables.less';
@import '../../homepage/ext.growthExperiments.mixins.less';

--- a/modules/ext.growthExperiments.StructuredTask/addlink/RecommendedLinkToolbarDialog.less
+++ b/modules/ext.growthExperiments.StructuredTask/addlink/RecommendedLinkToolbarDialog.less
@ -1,6 +1,6 @@
@import 'mediawiki.ui/variables.less';
@import 'mediawiki.mixins.less';
-@import 'resources/lib/ooui/wikimedia-ui-base.less';
+@import '../../lib/wikimedia-ui-base/wikimedia-ui-base.less';
@import '../../homepage/ext.growthExperiments.variables.less';
@import '../../homepage/ext.growthExperiments.mixins.less';

--- a/modules/ext.growthExperiments.StructuredTask/addlink/ceRecommendedLinkAnnotation.less
+++ b/modules/ext.growthExperiments.StructuredTask/addlink/ceRecommendedLinkAnnotation.less
@ -1,4 +1,4 @@
-@import 'resources/lib/ooui/wikimedia-ui-base.less';
+@import '../../lib/wikimedia-ui-base/wikimedia-ui-base.less';
@import '../../homepage/ext.growthExperiments.mixins';
@import '../../homepage/ext.growthExperiments.variables';

--- a/modules/help/ext.growthExperiments.PostEdit.less
+++ b/modules/help/ext.growthExperiments.PostEdit.less
@ -1,5 +1,5 @@
@import 'mediawiki.mixins';
-@import 'resources/lib/ooui/wikimedia-ui-base.less';
+@import '../lib/wikimedia-ui-base/wikimedia-ui-base.less';
@import '../homepage/ext.growthExperiments.variables.less';

 // The message box should float a fixed height above the window. Putting it inside the window
--- a/modules/homepage/ext.growthExperiments.BannerModule.less
+++ b/modules/homepage/ext.growthExperiments.BannerModule.less
@ -1,4 +1,4 @@
-@import 'resources/lib/ooui/wikimedia-ui-base.less';
+@import '../lib/wikimedia-ui-base/wikimedia-ui-base.less';

 .growthexperiments-homepage-module-banner {
 	width: 100%;
--- a/modules/homepage/ext.growthExperiments.Homepage.StartEditing.less
+++ b/modules/homepage/ext.growthExperiments.Homepage.StartEditing.less
@ -1,5 +1,5 @@

-@import 'resources/lib/ooui/wikimedia-ui-base.less';
+@import '../lib/wikimedia-ui-base/wikimedia-ui-base.less';
@import 'ext.growthExperiments.variables.less';

@startediting-suggested-edits-background: fade( @wmui-color-accent90, 50% );
--- a/modules/homepage/ext.growthExperiments.ImpactModule.less
+++ b/modules/homepage/ext.growthExperiments.ImpactModule.less
@ -1,6 +1,6 @@
@import 'mediawiki.ui/variables';
@import 'mediawiki.mixins';
-@import 'resources/lib/ooui/wikimedia-ui-base.less';
+@import '../lib/wikimedia-ui-base/wikimedia-ui-base.less';
@import './ext.growthExperiments.mixins.less';

 .growthexperiments-homepage-module-impact {
--- a/modules/homepage/suggestededits/ext.growthExperiments.Homepage.SuggestedEdits.less
+++ b/modules/homepage/suggestededits/ext.growthExperiments.Homepage.SuggestedEdits.less
@ -1,6 +1,6 @@
@import 'mediawiki.ui/variables.less';
@import 'mediawiki.mixins.less';
-@import 'resources/lib/ooui/wikimedia-ui-base.less';
+@import '../../lib/wikimedia-ui-base/wikimedia-ui-base.less';
@import '../ext.growthExperiments.variables.less';
@import '../ext.growthExperiments.mixins.less';

--- a/modules/homepage/suggestededits/ext.growthExperiments.SuggestedEdits.SmallTaskCard.less
+++ b/modules/homepage/suggestededits/ext.growthExperiments.SuggestedEdits.SmallTaskCard.less
@ -1,5 +1,5 @@
@import 'mediawiki.mixins';
-@import 'resources/lib/ooui/wikimedia-ui-base.less';
+@import '../../lib/wikimedia-ui-base/wikimedia-ui-base.less';
@import '../ext.growthExperiments.variables.less';
@import '../ext.growthExperiments.mixins.less';

--- a/modules/lib/.foreign/cache/wikimedia_ui_base_0_19_0_tgz_vDNJNsVvkQ.data
+++ b/modules/lib/.foreign/cache/wikimedia_ui_base_0_19_0_tgz_vDNJNsVvkQ.data
--- a/modules/lib/foreign-resources.yaml
+++ b/modules/lib/foreign-resources.yaml
@ -0,0 +1,8 @@
+wikimedia-ui-base:
+  type: tar
+  src: https://registry.npmjs.org/wikimedia-ui-base/-/wikimedia-ui-base-0.19.0.tgz
+  integrity: sha512-JMK4Ax/96lo9KuVeQ4avoehgOmJivDIE3pXgQRdtVShi3JksU2XrL7F4v2K2kQfx3OiqSjoCkr1fvDNJNsVvkQ==
+  dest:
+    package/wikimedia-ui-base.less:
+    package/README.md:
+    package/History.md:
--- a/modules/lib/wikimedia-ui-base/History.md
+++ b/modules/lib/wikimedia-ui-base/History.md
@ -0,0 +1,164 @@
+# WikimediaUI Base Variables Release History
+## v0.19.0 (2020-06-28)
+* Add `background-color-base--read-only` var (Volker E)
+* Add `border-radius-input-radio` var (Volker E)
+* Add `color-accessory` variable (Volker E)
+* Add `padding-vertical-menu` var (Volker E)
+* Add 'offset-input-radio-focus' var (Volker E)
+* Rename offset variable to `position-offset-input-radio-focus` (Volker E)
+* Add `size-full` variable (Volker E)
+* build: Replace Grunt with npm scripts & remove obsolete dependencies (Volker E)
+* build: Update 'stylelint-config-wikimedia' to latest (Volker E)
+
+## v0.18.1 (2020-12-03)
+* build: Update devDependencies (Volker E)
+* docs: Fix CSS comments (Volker E)
+
+## v0.18.0 (2020-11-16)
+* Add `background-color-quiet*` vars (Volker E)
+* Add `border-color-input--hover` variable (Volker E)
+* Add `border-color-primary*` and `border-color-destructive*` state vars (Volker E)
+* Add `box-shadow-destructive--focus` variable (Volker E)
+* Add `font-weight-light` variable (Volker E)
+* Add `opacity-icon-accessory` variable (Volker E)
+* Add system message `border-color*` variables (Volker E)
+* Amend `line-height-heading` slightly to mirror production values (Volker E)
+* build: Update dependencies (Volker E)
+
+## v0.17.0 (2020-08-25)
+* Add `border-color-base--focus` variables (Volker E)
+* Add `box-shadow-base` variable (Volker E)
+* Add `outline-base--focus` variable (Volker E)
+* Add `padding-base*` and input-text variables (Volker E)
+* Add modifier color variable definitions (Volker E)
+* Remove unused IE 8 `background-color-highlight` fallback variable (Volker E)
+* docs: Clarify “Highlight colors” to be solely for text highlighting (Volker E)
+* docs: Use shorter /g/ URL for Gitiles (Timo Tijhof)
+
+## v0.16.0 (2020-07-09)
+* Add WikimediaUI binary input variables (Volker E)
+* Add `border-color-divider` variable (Volker E)
+* Add `border-radius-circle` variable (Volker E)
+* Add `font-weight*` variables (Volker E)
+* Add `min-size-base` variable (Volker E)
+* Remove .arcconfig (Volker E)
+* Replace primary active border values with correct design template ones (Volker E)
+* docs: Add Gitiles repo URL into header and README.md (Volker E)
+* docs: Add download options like npm and clarify usage (Volker E)
+* docs: Fix markdown syntax (Volker E)
+
+## v0.15.0 (2020-04-13)
+* Add 'z-index-overlay' variable (Volker E)
+* Amend Base10 color and hover derivative (Volker E)
+* Remove 'Nimbus Sans L' from `font-family-sans` value (Volker E)
+* Remove obsolete IE 6 & 7 specific comments (Volker E)
+* docs: Add Design Style Guide links to certain sections (Volker E)
+* build: Bump devDependencies to latest (Volker E)
+
+## v0.14.0 (2019-06-17)
+* Add user system message variables (Volker E)
+* Amend monospace system font stack (Volker E)
+* Bump devDependencies to latest and commit package-lock.json (Volker E)
+* Remove 'Helvetica Neue' from system font stack (Volker E)
+* package-lock.json: Bump js-yaml for WS-2019-0063 (Volker E)
+
+## v0.13.0 (2018-12-05)
+* Add `font-family-system-sans` font stack (Volker E)
+* Add monospace font stack (Volker E)
+* build: Update dependencies (Volker E)
+
+## v0.12.0 (2018-08-16)
+* Add `background-color-base--hover` variable (Volker E)
+* Add general `size`, `min-size` & `max-size` variables (Volker E)
+
+## v0.11.0 (2018-08-14)
+* Add `background-color-base--disabled` & `background-color-filled--disabled` variables (Volker E.)
+* Add `border-style-base` variable (Volker E)
+* Add `toolbar` and `tool` variables (Volker E)
+* Fix typo in `breakpoint` variable name (Timo Tijhof)
+* Rename non-base `transition` variable & add `transition-ease-out-medium` variable (Volker E)
+* Replace repetitive comment about breakpoint values with single one (Prateek Saxena)
+* build: Bump dependencies to latest (Volker E)
+
+## v0.10.0 (2017-11-08)
+* Add mobile and desktop thresholds (Volker E)
+* Add `border-color-wikitable` variable (Volker E)
+* Add `box-shadow-card` variable (Volker E)
+* Add `font-family-monospace` variable (Volker E)
+* Replace wrong `border-color-base--disabled` value (Volker E)
+* Clarify referencing color palette vars & use LESS style comments (Volker E)
+* README: Use clearer and more consistent description (Volker E)
+* build: Bump dependencies to latest (Volker E)
+
+## v0.9.2 (2017-05-25)
+* build: Remove `private` flag from package.json (Volker E)
+
+## v0.9.1 (2017-05-25)
+* Unify color variables reference and fix `@background-color-primary` (Volker E)
+* build: Add `npm test` script (Prateek Saxena)
+* build: Remove composer.lock from .gitignore (Prateek Saxena)
+* build: Remove npm grunt-jsonlint package & bump others (Volker E)
+
+## v0.9.0 (2017-03-28)
+* [BREAKING CHANGE] Rename "wmui-base.*" files to "wikimedia-ui-base.*"
+* Add generic `font-family` fallback variables
+* build: Bump grunt-exec to latest (Volker E)
+
+## v0.8.0 (2017-02-24)
+* Add further properties and adapt `box-shadow-dialog` var (Volker E)
+* Adapt `color-destructive--hover` to brighter red (Volker E)
+* build: Bump various dev dependencies to latest (Volker E)
+* build: Bump stylelint and make pass (Volker E)
+
+## v0.7.1 (2016-11-22)
+* Fix CSS variable notations on WikimediaUI color labels (Volker E)
+
+## v0.7.0 (2016-11-21)
+* [BREAKING CHANGE] Turn `*highlight` variable to appropriate property (Volker E)
+* [BREAKING CHANGE] Refine variable naming (Volker E)
+* Introduce WikimediaUI color labels (Volker E)
+* Add `background-color-framed--active` color (Julien Girault)
+* Update “destructive” colors to tweaked color palette (Volker E)
+* Increase contrast of `background-color-framed--active` color (Volker E)
+* Replace abandoned color from early palette iteration (Volker E)
+* Set placeholder text to WCAG 2.0 level AA compliant color (Volker E)
+
+## v0.6.1 (2016-09-19)
+* build: Remove obsolete local `string-quotes` stylelint rule
+
+## v0.6.0 (2016-09-17)
+* Add colors, `border*` and `box-shadow*` variables
+* Replace value with corresponding `border-width-base` variable
+* Add `color-base-hover` variable
+* Align `opacity-base-disabled` to overhauled color palette
+* Add primary and destructive `background-color-*` variables
+* Align colors to overhauled, WCAG 2.0 level AA compliant color palette
+* Add and refine variables
+* Quote all non-generic `font-family` values
+* Replace fixed text-shadow color with variable
+* Remove obsolete `box-shadow-popup` variable
+* build: Align quotes to stylelint-config-wikimedia
+* build: Update devDependencies to latest releases
+
+## v0.5.0 (2016-07-19)
+* Use non-abbreviated variable names to ensure easy utilization
+* Add `opacity-base` variable
+* Change `transition-duration` values according to findings in T77949
+
+## v0.4.0 (2016-07-11)
+* Rename "base.*" files to "wmui-base.*" files for easier utilization in other repositories
+
+## v0.3.1 (2016-07-08)
+* Add `maw-input-inline` for inlined inputs
+* Align indentation to stylelint-config-wikimedia default
+* Add History.md and .gitignore files
+* Minor comment clarifications and cleanups
+* build: Replace csslint with stylelint
+
+## v0.3.0 (2016-06-30)
+* Include versioning information
+* Cleanup Gruntfile.js
+
+## v0.2.0 (2016-03-30)
+* Add package.json
+* Add `--c-highlighted-fallback` for IE 6/7/8
--- a/modules/lib/wikimedia-ui-base/README.md
+++ b/modules/lib/wikimedia-ui-base/README.md
@ -0,0 +1,32 @@
+# WikimediaUI Base stylesheet variables
+
+<https://gerrit.wikimedia.org/g/wikimedia-ui-base/>
+
+WikimediaUI Base repository provides stylesheets with variables containing
+[Wikimedia Foundation basic user interface style values](https://design.wikimedia.org/style-guide/).
+We are providing:
+ - `wikimedia-ui-base.css` file containing the variables in CSS Custom Properties syntax,
+ preferably used with PostCSS
+ - `wikimedia-ui-base.less` file containing the variables in LESS syntax
+
+## Install
+Install the WikimediaUI Base variables in your project with one of these options:
+- Clone the repo: `git clone "https://gerrit.wikimedia.org/r/wikimedia-ui-base"`
+- Install via npm: `npm install wikimedia-ui-base`
+- [Download the latest release](https://gerrit.wikimedia.org/g/wikimedia-ui-base/+archive/refs/heads/master.tar.gz)
+
+
+## Use
+It is recommended that you include `wikimedia-ui-base.css` or
+`wikimedia-ui-base.less` file as untouched library code at top of
+central stylesheet file and – if necessary – add changes by overwriting
+the variable later in your code.
+
+### Example LESS import
+```
+@import ( reference ) 'lib/wikimedia-ui-base.less';`
+```
+
+## Contribute
+Found a bug or missing a feature? Please report it in the [issue tracker](
+https://phabricator.wikimedia.org/maniphest/task/create/?projects=UI-Standardization)!
--- a/modules/lib/wikimedia-ui-base/wikimedia-ui-base.less
+++ b/modules/lib/wikimedia-ui-base/wikimedia-ui-base.less
@ -0,0 +1,307 @@
+/**
+ * WikimediaUI Base v0.19.0
+ * Wikimedia Foundation user interface base variables
+ * https://gerrit.wikimedia.org/g/wikimedia-ui-base/
+ *
+ * See also https://design.wikimedia.org/style-guide/
+ */
+
+// == Breakpoints ==
+// The following numbers are prone to change with new information.
+
+// Minimum available screen width at which a device can be considered a mobile device
+// Many older feature phones have screens smaller than this value.
+@width-breakpoint-mobile: 320px;
+
+// Minimum available screen width at which a device can be considered a tablet
+// The number is currently based on the device width of a Samsung Galaxy S5 mini and is low
+// enough to cover iPad (768px).
+@width-breakpoint-tablet: 720px;
+
+// Minimum available screen width at which a device can be considered a desktop.
+@width-breakpoint-desktop: 1000px;
+
+// Wider desktop breakpoint, currently used in Flow.
+@width-breakpoint-desktop-wide: 1200px;
+
+// Extra wide desktop breakpoint
+@width-breakpoint-desktop-extrawide: 2000px;
+
+
+// == Colors ==
+// WikimediaUI (`wmui`) color palette
+// See https://design.wikimedia.org/style-guide/visual-style_colors.html
+// Don't use those variables directly, instead define your vars
+// referring to them as applied further below.
+
+@wmui-color-base0:    #000;    // = HSB 0°, 0%, 0%
+@wmui-color-base10:   #202122; // = HSB 210°, 6%, 13%
+@wmui-color-base20:   #54595d; // = HSB 207°, 10%, 36%; WCAG 2.0 level AAA 7.09:1 contrast ratio on `#fff`
+@wmui-color-base30:   #72777d; // = HSB 210°, 9%, 49%; WCAG 2.0 level AA at 4.52:1 contrast ratio on `#fff`
+@wmui-color-base50:   #a2a9b1; // = HSB 212°, 8%, 69%
+@wmui-color-base70:   #c8ccd1; // = HSB 213°, 4%, 82%
+@wmui-color-base80:   #eaecf0; // = HSB 220°, 3%, 94%
+@wmui-color-base90:   #f8f9fa; // = HSB 210°, 1%, 98%
+@wmui-color-base100:  #fff;    // = HSB 0°, 0%, 100%
+
+@wmui-color-accent30: #2a4b8d; // = HSB 220°, 70%, 55%
+@wmui-color-accent50: #36c;    // = HSB 220°, 75%, 80%
+@wmui-color-accent90: #eaf3ff; // = HSB 214°, 8%, 100%
+
+@wmui-color-red30:    #b32424; // = HSB 360°, 80%, 70%
+@wmui-color-red50:    #d33;    // = HSB 360°, 77%, 87%
+@wmui-color-red90:    #fee7e6; // = HSB 3°, 9%, 100%
+
+@wmui-color-yellow30: #ac6600; // = HSB 36°, 100%, 67%
+@wmui-color-yellow50: #fc3;    // = HSB 45°, 80%, 100%
+@wmui-color-yellow90: #fef6e7; // = HSB 39°, 9%, 100%
+
+@wmui-color-green30:  #14866d; // = HSB 167°, 85%, 53%
+@wmui-color-green50:  #00af89; // = HSB 167°, 100%, 69%
+@wmui-color-green90:  #d5fdf4; // = HSB 166°, 16%, 99%
+
+// Modifier colors, not part of official palette, limited to interaction state usage.
+@wmui-color-base10--lighten: #404244;
+@wmui-color-accent50--lighten: #447ff5; // = `lighten( @color-primary, 3 )`
+@wmui-color-red50--lighten: #ff4242; // ~= `filter: brightness( 120% )`
+@wmui-color-green50--lighten: #1c6665;
+@wmui-color-purple50: #6b4ba1;
+
+// From here on no static color values, only variable references.
+// Background Colors
+@background-color-base:           @wmui-color-base100;
+@background-color-base--hover:    @wmui-color-base80;
+@background-color-base--disabled: @wmui-color-base80;
+@background-color-base--read-only: @wmui-color-base90;
+@background-color-code:           @wmui-color-base90;
+// 'Framed' UI elements (Framed Buttons, Dropdowns, ToggleSwitches…)
+@background-color-framed:         @wmui-color-base90;
+@background-color-framed--hover:  @wmui-color-base100;
+@background-color-framed--active: @wmui-color-base70;
+// 'Filled' UI elements (Checkboxes, Radios, ProgressBars…)
+@background-color-filled--disabled: @wmui-color-base70;
+// Binary Input elements (Checkboxes, Radios, Toggle Switches)
+@background-color-input-binary--active: @color-primary--active;
+@background-color-input-binary--checked: @color-primary;
+// Quiet Buttons
+@background-color-quiet:          @background-color-base;
+// Use `rgba()` values here as the quiet buttons need to blend in with background.
+@background-color-quiet--hover:   rgba( 0, 24, 73, 7/255 ); // = `@wmui-color-base90` on white.
+@background-color-quiet--active:  rgba( 0, 36, 73, 21/255 ); // = `@wmui-color-base80` on white.
+// Toolbar and Tools
+@background-color-toolbar:        @background-color-base;
+@background-color-tool--hover:    @background-color-base--hover;
+@background-color-tool--active:   @background-color-primary;
+@background-color-tool--active-hover: @background-color-primary--hover;
+// Tabs Navigation Background Color
+@background-color-tabs:           @wmui-color-base80;
+// User system messages (errors, warnings, successes, notices)
+@background-color-error--framed: @wmui-color-red90;
+@background-color-warning--framed: @wmui-color-yellow90;
+@background-color-success--framed: @wmui-color-green90;
+@background-color-notice--framed: @wmui-color-base80;
+// Highlight Colors for text highlighting, think metaphorically text marker
+@background-color-highlight:      rgba( 255, 182, 13, 0.4 ); // Equals to `#ffe29e` on `#fff` background.
+
+// Foreground Colors
+@color-base:                      @wmui-color-base10;
+@color-base--hover:               @wmui-color-base10--lighten;
+@color-base--active:              @wmui-color-base0;
+@color-base--inverted:            @wmui-color-base100;
+@color-base--emphasized:          @wmui-color-base0;
+@color-base--subtle:              @wmui-color-base30;
+@color-base--disabled:            @wmui-color-base30;
+@color-filled--disabled:          @color-base--inverted;
+@color-accessory:                 @wmui-color-base20;
+@color-placeholder:               @wmui-color-base30;
+// Primary 'Progressive' Color, Background Color and states
+@background-color-primary:        @wmui-color-accent90;
+@background-color-primary--hover: rgba( 41, 98, 204, 0.1 );
+@color-primary:                   @wmui-color-accent50;
+@color-primary--hover:            @wmui-color-accent50--lighten;
+@color-primary--active:           @wmui-color-accent30;
+@color-primary--focus:            @color-primary;
+// 'Destructive' Color, Background Color and states
+@background-color-destructive:    @wmui-color-red90;
+@color-destructive:               @wmui-color-red50;
+@color-destructive--hover:        @wmui-color-red50--lighten;
+@color-destructive--active:       @wmui-color-red30;
+@color-destructive--focus:        @color-destructive;
+// Secondary Color and states (links only)
+@color-secondary:                 @wmui-color-green50;
+@color-secondary--hover:          @wmui-color-green50--lighten;
+@color-secondary--active:         @wmui-color-green30;
+@color-secondary--focus:          @color-secondary;
+// User system messages (errors, warnings, successes, notices)
+@color-error:                     @wmui-color-red50;
+@color-warning:                   @wmui-color-base0;
+@color-success:                   @wmui-color-green30;
+@color-success--framed:           @wmui-color-base0;
+@color-notice:                    @wmui-color-base0;
+// Toolbar and Tools
+@color-tool--hover:               @color-base--emphasized; // Used here in combination with `:hover` background-color turning light grey
+@color-tool--active:              @color-primary;
+
+
+// Opacity
+@opacity-base:                    1;
+@opacity-base--disabled:          0.51; // = `#7d7d7d` on `background-color: #fff`; HSB 0°, 0%, 49%
+@opacity-icon-base:               0.87; // = `#222` on `background-color: #fff`, closest to `#202122`
+@opacity-icon-base--hover:        0.74; // = `#424242` on `background-color: #fff`, closest to `#404244`
+@opacity-icon-base--selected:     1;
+@opacity-icon-accessory:          0.67; // = `#555`, closest to `#54595d` on background-color `#fff`.
+
+
+// == Positioning ==
+// Positioning Model
+// Use `px` unit to prevent pixel rounding error when using `@size-input-binary / 4`.
+// Works with different sizes on mobile and desktop as it negatively offsets from outside.
+@position-offset-input-radio-focus: -4px;
+
+// Z-Index
+@z-index-base:                    0;
+@z-index-overlay:                 101;
+
+
+// == Box Model properties ==
+// `@*size` variables are used for `*width` & `*height` properties.
+@min-size-base:                   32px; // Values used for `min-*` are defined in `px`, see T130691.
+@size-base:                       32px;
+@size-full:                       100%;
+
+@min-size-icon:                   20px;
+@size-icon:                       20px;
+@min-size-indicator:              12px;
+@size-indicator:                  12px;
+@size-input-binary:               20px;
+@size-tool:                       42px;
+
+// Max Widths
+@max-width-base:                  50em;
+@max-width-button:                28.75em; // = `460px` at `16px` base, see T95367
+@max-width-input:                 @max-width-base;
+@max-width-input-inline:          100%;
+
+// Border
+@border-base:                     @border-width-base @border-style-base @border-color-base;
+@border-dialog:                   @border-base;
+@border-menu:                     @border-base;
+@border-input-binary:             @border-width-base @border-style-base @border-color-input-binary;
+// User system messages (errors, warnings, successes, notices)
+@border-error:                    @border-width-base @border-style-base @border-color-error;
+@border-warning:                  @border-width-base @border-style-base @border-color-warning;
+@border-success:                  @border-width-base @border-style-base @border-color-success;
+@border-notice:                   @border-base;
+// Border Colors
+@border-color-base:               @wmui-color-base50;
+@border-color-base--hover:        @wmui-color-base50;
+@border-color-base--active:       @wmui-color-base30;
+@border-color-base--focus:        @color-primary--focus;
+@border-color-base--disabled:     @wmui-color-base70;
+
+@border-color-filled--disabled:   @color-filled--disabled;
+// Border Colors primary buttons
+@border-color-primary:            @color-primary;
+@border-color-primary--hover:     @color-primary--hover;
+@border-color-primary--active:    @color-primary--active;
+@border-color-primary--focus:     @border-color-primary;
+@border-color-destructive:        @color-destructive;
+@border-color-destructive--hover: @color-destructive--hover;
+@border-color-destructive--active: @color-destructive--active;
+@border-color-destructive--focus: @border-color-destructive;
+@border-color-inset--focus:       @color-base--inverted;
+@border-color-input--hover:       @border-color-base--active;
+@border-color-input-binary:       @border-color-base--active;
+@border-color-input-binary--active: @color-primary--active;
+@border-color-input-binary--checked: @color-primary;
+@border-color-heading:            @wmui-color-base70;
+@border-color-divider:            @wmui-color-base50;
+@border-color-wikitable:          rgba( 84, 89, 93, 0.3 ); // See T168029
+// Border Colors user system messages
+@border-color-error:              @color-error;
+@border-color-warning:            @wmui-color-yellow50;
+@border-color-success:            @color-success;
+@border-color-notice:             @border-color-base;
+// Border Styles
+@border-style-base:               solid;
+// Border Widths
+@border-width-base:               1px;
+// Border Radius
+@border-radius-base:              2px;
+@border-radius-circle:            50%;
+@border-radius-input-radio:       @border-radius-circle;
+
+// Paddings
+@padding-base:                    @padding-vertical-base @padding-horizontal-base;
+@padding-input-text:              @padding-vertical-base @padding-horizontal-input-text;
+@padding-horizontal-base:         12px;
+// Must be < `8` as it cuts off scripts like Burmese. Directly connected to `line-height` further down.
+@padding-vertical-base:           5px;
+@padding-horizontal-input-text:   8px;
+// Menu items don't have a border. So add it to padding.
+@padding-vertical-menu:           @padding-vertical-base + @border-width-base;
+
+// Box Shadows
+// Base `box-shadow` set to `transparent` for transition purpose.
+@box-shadow-base:                 inset 0 0 0 1px transparent;
+@box-shadow-base--focus:          inset 0 0 0 1px @wmui-color-accent50;
+@box-shadow-primary--focus:       inset 0 0 0 1px @color-primary, inset 0 0 0 2px @color-base--inverted;
+@box-shadow-destructive--focus:   inset 0 0 0 1px @color-destructive, inset 0 0 0 2px @color-base--inverted;
+@box-shadow-inset--inverted:      inset 0 0 0 1px @color-base--inverted;
+@box-shadow-filled--disabled:     inset 0 0 0 1px @color-filled--disabled;
+@box-shadow-card:                 0 1px 1px rgba( 0, 0, 0, 0.15 );
+@box-shadow-dialog:               0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
+@box-shadow-menu:                 @box-shadow-dialog;
+
+// Outlines
+// Enable Windows high contrast mode on certain widgets, that have default outlines overridden.
+@outline-base--focus:             @border-width-base @border-style-base transparent;
+
+
+// == Typography incl. print properties ==
+// See https://design.wikimedia.org/style-guide/visual-style_typography.html
+// Font Families
+@font-family-base:                @font-family-sans;
+@font-family-heading-main:        @font-family-serif;
+// To be deprecated, see T247166.
+@font-family-sans:                'Helvetica Neue', 'Helvetica', 'Liberation Sans', 'Arial', sans-serif;
+@font-family-sans--fallback:      sans-serif;
+// Provide better operating system-specific readability, see T175877.
+// `system-ui` is currently not an option due to OS/language combination issues, see T175877#4776576.
+@font-family-system-sans:         -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif;
+@font-family-serif:               'Linux Libertine', 'Georgia', 'Times', serif;
+@font-family-serif--fallback:     serif;
+// Provide better operating system-specific monospace stack, see T209915.
+@font-family-monospace:           'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
+@font-family-monospace--fallback: monospace, monospace; // See T176636.
+// Font Weights
+@font-weight-base:                @font-weight-normal;
+// See https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#Common_weight_name_mapping
+@font-weight-hairline:            100;
+@font-weight-light:               300;
+@font-weight-normal:              400;
+@font-weight-semi-bold:           600;
+@font-weight-bold:                700;
+// Line Heights
+@line-height-base:                1.6;
+@line-height-heading:             1.3;
+@text-decoration-link--hover:     none;
+// Text Shadows
+@text-shadow-base:                0 1px 1px @color-base--inverted; // 'coined' effect
+@text-shadow-base--disabled:      @text-shadow-base;
+
+
+// == Other Properties ==
+// Cursors
+@cursor-base--disabled:           default;
+
+
+// == Animation & Transition ==
+// Transitions
+@transition-base:                 @transition-duration-base; // `ease` is the initial value
+@transition-ease-medium:          @transition-duration-medium;
+// `ease-out` is preferably used on human initiated transitions, for example dialogs
+@transition-ease-out-medium:      ease-out @transition-duration-medium;
+// Transitions > Durations
+@transition-duration-base:        100ms;
+@transition-duration-medium:      250ms;
--- a/modules/signup/campaign.less
+++ b/modules/signup/campaign.less
@ -3,7 +3,7 @@
 // - ext.growthExperiments.icons
 // (ResourceLoader does not seem to allow expressing dependencies for style modules.)

-@import 'resources/lib/ooui/wikimedia-ui-base.less';
+@import '../lib/wikimedia-ui-base/wikimedia-ui-base.less';
@import '../homepage/ext.growthExperiments.mixins.less';

 .watermark {
--- a/modules/ui-components/HelpPanelButton.less
+++ b/modules/ui-components/HelpPanelButton.less
@ -1,4 +1,4 @@
-@import 'resources/lib/ooui/wikimedia-ui-base.less';
+@import '../lib/wikimedia-ui-base/wikimedia-ui-base.less';
@import 'mediawiki.mixins';
@import '../homepage/ext.growthExperiments.variables.less';

--- a/modules/ui-components/MultiPaneDialog.less
+++ b/modules/ui-components/MultiPaneDialog.less
@ -1,4 +1,4 @@
-@import 'resources/lib/ooui/wikimedia-ui-base.less';
+@import '../lib/wikimedia-ui-base/wikimedia-ui-base.less';
@import '../homepage/ext.growthExperiments.variables.less';
@import '../homepage/ext.growthExperiments.mixins.less';