Merge "Reorganize LESS files to match ResourceLoader conventions"

.storybook/common.less

@@ -1,4 +1,4 @@
-@import '../variables.less';
+@import '../resources/common/variables.less';
 @import 'integration.less';
 @import 'icons.less';
 @import '../skinStyles/mediawiki.ui.icon.less';

.storybook/webpack.config.js

@@ -1,6 +1,25 @@
 const path = require( 'path' );
 
 module.exports = {
+	resolve: {
+		alias: {
+			// FIXME: These imports should be updated in the story files instead of here.
+			'../resources/skins.vector.styles/Footer.less': '../resources/common/components/Footer.less',
+			'../resources/skins.vector.styles/LanguageButton.less': '../resources/skins.vector.styles/components/LanguageButton.less',
+			'../resources/skins.vector.styles/skin-legacy.less': '../resources/skins.vector.styles.legacy/skin-legacy.less',
+			'../resources/skins.vector.styles/Logo.less': '../resources/skins.vector.styles/components/Logo.less',
+			'../resources/skins.vector.styles/Menu.less': '../resources/common/components/Menu.less',
+			'../.storybook/common.less': '../resources/common/common.less',
+			'../resources/skins.vector.styles/MenuDropdown.less': '../resources/common/components/MenuDropdown.less',
+			'../resources/skins.vector.styles/MenuPortal.less': '../resources/common/components/MenuPortal.less',
+			'../resources/skins.vector.styles/MenuTabs.less': '../resources/common/components/MenuTabs.less',
+			'../resources/skins.vector.styles/TabWatchstarLink.less': '../resources/common/components/TabWatchstarLink.less',
+			'../resources/skins.vector.styles/SearchBox.less': '../resources/common/components/SearchBox.less',
+			'../resources/skins.vector.styles/Sidebar.less': '../resources/skins.vector.styles/components/Sidebar.less',
+			'../resources/skins.vector.styles/SidebarLogo.less': '../resources/common/components/SidebarLogo.less',
+			'../resources/skins.vector.styles/MenuPortal.less': '../resources/common/components/MenuPortal.less'
+		}
+	},
 	module: {
 		rules: [ {
 			test: /\.js$/,
@@ -37,11 +56,17 @@ module.exports = {
 			use: [ {
 				loader: 'style-loader'
 			}, {
-				loader: 'css-loader'
+				loader: 'css-loader',
+				options: {
+					// FIXME: Disable resolving of CSS urls until Storybook is upgraded
+					// to use Webpack 5 and array values for aliases
+					// (which would cleanly resolve urls in LESS partial starting with `url(images/...)` )
+					url: false
+				}
 			}, {
 				loader: 'less-loader',
 				options: {
-					relativeUrls: false,
+					relativeUrls: true,
 					strictUnits: true,
 					paths: [
 					 	path.resolve( __dirname, 'resolve-imports' )

resources/common/common.less

@@ -0,0 +1,29 @@
+/**
+ * Common styles and components shared by both,
+ * Vector legacy and Vector modern.
+ */
+
+@import './variables.less';
+@import 'mediawiki.mixins.less';
+
+@media screen {
+	// Common styles
+	@import './normalize.less';
+	@import './typography.less';
+
+	// Components
+	@import './components/Indicators.less';
+	@import './components/SiteNotice.less';
+	@import './components/Menu.less';
+	@import './components/MenuTabs.less';
+	@import './components/TabWatchstarLink.less';
+	@import './components/MenuDropdown.less';
+	@import './components/MenuPortal.less';
+	@import './components/SearchBox.less';
+	@import './components/SidebarLogo.less';
+	@import './components/Footer.less';
+}
+
+@media print {
+	@import './print.less';
+}

resources/common/components/Footer.less

@@ -1,8 +1,7 @@
-@import '../../variables.less';
+@import '../variables.less';
 
 /* Footer */
 .mw-footer {
-	padding: 0.75em;
 	direction: ltr;
 
 	ul {

resources/common/components/Indicators.less

@@ -1,4 +1,4 @@
-@import '../../variables.less';
+@import '../variables.less';
 
 // FIXME: Is specific `.mw-body` even needed? Does `.mw-indicators` exist outside?
 .mw-body {

resources/common/components/Menu.less

@@ -1,4 +1,4 @@
-@import '../../variables.less';
+@import '../variables.less';
 @import 'mediawiki.mixins.less';
 
 /* Personal Menu */

resources/common/components/MenuDropdown.less

@@ -1,4 +1,4 @@
-@import '../../variables.less';
+@import '../variables.less';
 @import 'mediawiki.mixins.less';
 
 /* Variants and Actions */

resources/common/components/MenuPortal.less

@@ -1,4 +1,4 @@
-@import '../../variables.less';
+@import '../variables.less';
 @import 'mediawiki.mixins.less';
 
 .vector-menu-portal {

resources/common/components/MenuTabs.less

@@ -1,4 +1,4 @@
-@import '../../variables.less';
+@import '../variables.less';
 @import 'mediawiki.mixins.less';
 
 /**

resources/common/components/SearchBox.less

@@ -1,6 +1,6 @@
 @import 'mediawiki.mixins.less';
 @import 'mediawiki.ui/variables.less';
-@import '../../variables.less';
+@import '../../common/variables.less';
 
 // Search portlet.
 #p-search h3 {

resources/common/components/SidebarLogo.less

@@ -1,4 +1,4 @@
-@import '../../variables.less';
+@import '../variables.less';
 
 /* Logo */
 #p-logo {

resources/common/components/SiteNotice.less

@@ -1,4 +1,4 @@
-@import '../../variables.less';
+@import '../variables.less';
 
 /* Site Notice (includes notices from CentralNotice extension) */
 #siteNotice {

resources/common/components/TabWatchstarLink.less

@@ -1,4 +1,4 @@
-@import '../../variables.less';
+@import '../variables.less';
 @import 'mediawiki.mixins.less';
 @import 'mediawiki.mixins.rotation.less';
 

resources/common/normalize.less

@@ -4,7 +4,7 @@
  *
  */
 
-@import '../../../variables.less';
+@import './variables.less';
 
 html,
 body {

resources/common/typography.less

@@ -5,7 +5,7 @@
  *
  */
 
-@import '../../../variables.less';
+@import './variables.less';
 
 html {
 	font-size: @font-size-root;

resources/skins.vector.styles.legacy/components/MenuDropdown.less

@@ -1,5 +1,4 @@
-// Extends the dropdown menu but allows it to be opened via hover.
-@import '../MenuDropdown.less';
+// Extends the common MenuDropdown, but allows it to be opened via hover.
 
 .vector-menu-dropdown {
 	&:hover .vector-menu-content {

resources/skins.vector.styles.legacy/components/Sidebar.less

@@ -1,4 +1,4 @@
-@import '../../../variables.less';
+@import '../../common/variables.less';
 
 /* Panel */
 #mw-panel {

resources/skins.vector.styles.legacy/layouts/screen.less

@@ -1,8 +1,11 @@
-// Layout rules divide the page into sections and how VectorComponents should be arranged in the skin.
-// The rules here should only define the layout, not color or typography.
+/**
+ * Layout rules divide the page into sections and how VectorComponents should be arranged in the skin.
+ * The rules here should only define the layout, not color or typography.
+ * See '../../common/' folder for latter stylesheets.
+ */
 
 @import 'mediawiki.mixins.less';
-@import '../../../variables.less';
+@import '../../common/variables.less';
 
 body {
 	background-color: @background-color-secondary;
@@ -152,6 +155,7 @@ body {
 .mw-footer {
 	margin-left: 10em;
 	margin-top: 0;
+	padding: 0.75em;
 }
 
 /* Vector screen styles for high definition displays. These rules cross the above components and are

resources/skins.vector.styles.legacy/skin-legacy.less

@@ -0,0 +1,13 @@
+/**
+ * Vector legacy stylesheets
+ * See '../common/common.less' for common screen and print Vector stylesheets.
+ */
+
+@media screen {
+	// Layouts
+	@import './layouts/screen.less';
+
+	// Legacy specific components
+	@import './components/MenuDropdown.less';
+	@import './components/Sidebar.less';
+}

resources/skins.vector.styles/components/LanguageButton.less

@@ -1,5 +1,5 @@
 // The use of mixins.buttons requires @font-size-base to be defined for this to work in Storybook
-@import '../../variables.less';
+@import '../../common/variables.less';
 @import 'mediawiki.mixins.less';
 
 // `.mw-body-header` class can be removed when language button is the default.

resources/skins.vector.styles/components/Logo.less

@@ -1,4 +1,4 @@
-@import '../../variables.less';
+@import '../../common/variables.less';
 @import 'mediawiki.mixins.less';
 
 .mw-logo {

resources/skins.vector.styles/components/SearchBoxLoader.less

@@ -12,7 +12,7 @@
  *
  **/
 
-@import '../../variables.less';
+@import '../../common/variables.less';
 
 #simpleSearch.search-form__loader:after {
 	// Set the i18n message.

resources/skins.vector.styles/components/Sidebar.less

@@ -1,8 +1,8 @@
-@import '../../variables.less';
+@import '../../common/variables.less';
 @import 'mediawiki.mixins.less';
-@import './layout.less';
-@import 'legacy/Sidebar.less';
-@import 'checkboxHack.less';
+@import '../layouts/screen.less';
+@import '../../skins.vector.styles.legacy/components/Sidebar.less';
+@import './checkboxHack.less';
 
 .mw-sidebar-action {
 	// Align with the portal heading/links

resources/skins.vector.styles/components/VueEnhancedSearchBox.less

@@ -1,5 +1,3 @@
-@import 'SearchBox.less';
-
 /**
  * Minimal styling for initial no-JS server-rendered
  * search form, which gets replaced by WVUI on focus.

resources/skins.vector.styles/layout.less

@@ -1,124 +0,0 @@
-/**
- * Layout
- *
- * Layout rules divide the page into sections and how VectorComponents should be arranged in the skin.
- * The rules here should only define the layout, not color or typography.
- */
-
-@import '../../variables.less';
-@import 'mediawiki.mixins.less';
-
-// Header
-
-// Header sizes defined in the description of T246170 and comment T246170#5957100
-@width-grid-column-one: 11em;
-@padding-vertical-header: 0.125em;
-@margin-top-header: 0.625em;
-@margin-bottom-header: 0.3125em;
-@height-header:
-	@height-logo-icon +
-	@margin-top-header +
-	@margin-bottom-header +
-	2 * @padding-vertical-header;
-// 3.125em + 0.625em + 0.3125em + 0.25em = 4.3125em
-
-// Menu button
-@margin-horizontal-sidebar-button-icon: unit( 12px / @font-size-browser, em); // 0.75em @ 16
-
-// Logo
-
-// Logo sizes per specification in T245190.
-@height-logo-icon: 3.125em;
-
-// The logo is variable width but typically consists of:
-// - a icon (50x50)
-// - a wordmark (approx 120px)
-@min-width-logo: unit( 180px / @font-size-browser, em ); // 11.25em @ 16
-
-// Search
-
-// Canonical version of spec: T270202
-// This assumes the presence of variables inside layout.less. DO NOT import it separately.
-// Assumes various variables defined there.
-@min-width-search: unit( 150px / @font-size-browser / @font-size-base, em ); // 10.71428571em @ 16 & 0.875em
-@min-width-search-tablet: unit( 350px / @font-size-browser / @font-size-base, em ); // 25em @ 16 & 0.875em
-@max-width-search: unit( 500px / @font-size-browser / @font-size-base, em ); // 35.71428571em @ 16 & 0.875em
-@margin-horizontal-search: unit( 40px / @font-size-browser / @font-size-base, em ); // 2.85714286em @ 16 & 0.875em
-
-// Personal menu
-
-@min-width-personal-tools: unit( 300px / @font-size-browser, em ); // 18.75 @ 16
-
-// Sidebar
-
-@margin-top-sidebar: 0.5em;
-
-// Adjust the left position of the sidebar to align it with the sidebar menu button,
-// in the header, while ensuring the background gradient still extends to the edge of the screen.
-// note: the 1px comes from the transparent border of the sidebar button.
-@padding-left-sidebar:
-	@margin-horizontal-sidebar-button-icon +
-	unit( @border-width-base / @font-size-browser, em );
-
-// Layout containers
-
-// Page container
-
-@max-width-page-container: unit( 1650px / @font-size-browser, em ); // 103.125em @ 16
-@min-width-page-container--padded: @max-width-page-container + ( 2 * @padding-horizontal-page-container ); // 106.875em
-@padding-horizontal-page-container: unit( 30px / @font-size-browser, em ); // 1.875em @ 16
-
-// Content containers
-
-@max-width-workspace-container: unit( 1440px / @font-size-browser, em ); // 90em @ 16
-@max-width-content-container: unit( 960px / @font-size-browser, em ); // 60em @ 16
-
-// Note this uses variables defined in mediawiki.skin.variables so that VisualEditor can read them
-// see T259331.
-@padding-content: @padding-top-content @padding-horizontal-content 1.5em;
-// We want ~60px of space between the end of the sidebar and the start of the
-// content container for aesthetic reasons. The sidebar is already displaced
-// -30px so we simply add 30px of space to the width of the sidebar.
-@margin-start-content: @width-grid-column-one + unit( 8px / @font-size-browser, em ); // 11.5em @ 16
-
-// Tabs
-
-@height-tabs: 2.5em; // Keep in sync with .vector-menu-tabs height.
-
-// Breakpoints
-
-// This determines the maximum width breakpoint at which
-// the content will have a fixed start margin applied to it when the sidebar
-// is open. The content can shift its position when the sidebar is open/closed
-// at or below this breakpoint and will maintain its position above this breakpoint.
-@max-width-margin-start-content:
-	(2 * @margin-start-content ) +
-	( 2 * @padding-horizontal-page-container ) +
-	@max-width-content-container;
-// 23em + 3.75em + 60em = 86.75em @ 16
-
-// Defines the minimum viewport width, at which point the layout will not get any
-// smaller and will start horizontal scrolling instead.
-@min-width-supported:
-	unit( 500px / @font-size-browser, em ) -
-	( 2 * @padding-horizontal-page-container );
-// 31.25em - 3.75em = 27.5em @ 16
-
-// Width used to determine when to break the personal tools onto a separate line
-// below the search box.
-@width-comfortable:
-	( 2 * @padding-horizontal-page-container ) +
-	@size-sidebar-button +
-	@margin-horizontal-sidebar-button-icon +
-	@min-width-logo +
-	( 2 * @margin-horizontal-search ) +
-	@max-width-search +
-	@min-width-personal-tools;
-// 3.75em + 2.75em + 0.75em + 11.25em + 5.71428571em + 35.71428571em + 18.75em = 78.67857142em @ 16
-
-@border-color-sidebar: @background-color-secondary--modern;
-@background-color-secondary--modern: #f8f9fa;
-@background-color-page-container: @background-color-base;
-
-// Default layout.
-@import 'layout-default.less';

resources/skins.vector.styles/layouts/screen.less

@@ -1,6 +1,124 @@
-//
-// Default layout for Modern Vector.
-//
+/**
+ * Vector modern layout styles for screen
+ *
+ * Layout rules divide the page into sections and how VectorComponents should be arranged in the skin.
+ * The rules here should only define the layout, not color or typography.
+ */
+
+@import '../../common/variables.less';
+@import 'mediawiki.mixins.less';
+
+// Header
+
+// Header sizes defined in the description of T246170 and comment T246170#5957100
+@width-grid-column-one: 11em;
+@padding-vertical-header: 0.125em;
+@margin-top-header: 0.625em;
+@margin-bottom-header: 0.3125em;
+@height-header:
+	@height-logo-icon +
+	@margin-top-header +
+	@margin-bottom-header +
+	2 * @padding-vertical-header;
+// 3.125em + 0.625em + 0.3125em + 0.25em = 4.3125em
+
+// Menu button
+@margin-horizontal-sidebar-button-icon: unit( 12px / @font-size-browser, em); // 0.75em @ 16
+
+// Logo
+
+// Logo sizes per specification in T245190.
+@height-logo-icon: 3.125em;
+
+// The logo is variable width but typically consists of:
+// - a icon (50x50)
+// - a wordmark (approx 120px)
+@min-width-logo: unit( 180px / @font-size-browser, em ); // 11.25em @ 16
+
+// Search
+
+// Canonical version of spec: T270202
+// This assumes the presence of variables inside screen.less. DO NOT import it separately.
+// Assumes various variables defined there.
+@min-width-search: unit( 150px / @font-size-browser / @font-size-base, em ); // 10.71428571em @ 16 & 0.875em
+@min-width-search-tablet: unit( 350px / @font-size-browser / @font-size-base, em ); // 25em @ 16 & 0.875em
+@max-width-search: unit( 500px / @font-size-browser / @font-size-base, em ); // 35.71428571em @ 16 & 0.875em
+@margin-horizontal-search: unit( 40px / @font-size-browser / @font-size-base, em ); // 2.85714286em @ 16 & 0.875em
+
+// Personal menu
+
+@min-width-personal-tools: unit( 300px / @font-size-browser, em ); // 18.75 @ 16
+
+// Sidebar
+
+@margin-top-sidebar: 0.5em;
+
+// Adjust the left position of the sidebar to align it with the sidebar menu button,
+// in the header, while ensuring the background gradient still extends to the edge of the screen.
+// note: the 1px comes from the transparent border of the sidebar button.
+@padding-left-sidebar:
+	@margin-horizontal-sidebar-button-icon +
+	unit( @border-width-base / @font-size-browser, em );
+
+// Layout containers
+
+// Page container
+
+@max-width-page-container: unit( 1650px / @font-size-browser, em ); // 103.125em @ 16
+@min-width-page-container--padded: @max-width-page-container + ( 2 * @padding-horizontal-page-container ); // 106.875em
+@padding-horizontal-page-container: unit( 30px / @font-size-browser, em ); // 1.875em @ 16
+
+// Content containers
+
+@max-width-workspace-container: unit( 1440px / @font-size-browser, em ); // 90em @ 16
+@max-width-content-container: unit( 960px / @font-size-browser, em ); // 60em @ 16
+
+// Note this uses variables defined in mediawiki.skin.variables so that VisualEditor can read them
+// see T259331.
+@padding-content: @padding-top-content @padding-horizontal-content 1.5em;
+// We want ~60px of space between the end of the sidebar and the start of the
+// content container for aesthetic reasons. The sidebar is already displaced
+// -30px so we simply add 30px of space to the width of the sidebar.
+@margin-start-content: @width-grid-column-one + unit( 8px / @font-size-browser, em ); // 11.5em @ 16
+
+// Tabs
+
+@height-tabs: 2.5em; // Keep in sync with .vector-menu-tabs height.
+
+// Breakpoints
+
+// This determines the maximum width breakpoint at which
+// the content will have a fixed start margin applied to it when the sidebar
+// is open. The content can shift its position when the sidebar is open/closed
+// at or below this breakpoint and will maintain its position above this breakpoint.
+@max-width-margin-start-content:
+	(2 * @margin-start-content ) +
+	( 2 * @padding-horizontal-page-container ) +
+	@max-width-content-container;
+// 23em + 3.75em + 60em = 86.75em @ 16
+
+// Defines the minimum viewport width, at which point the layout will not get any
+// smaller and will start horizontal scrolling instead.
+@min-width-supported:
+	unit( 500px / @font-size-browser, em ) -
+	( 2 * @padding-horizontal-page-container );
+// 31.25em - 3.75em = 27.5em @ 16
+
+// Width used to determine when to break the personal tools onto a separate line
+// below the search box.
+@width-comfortable:
+	( 2 * @padding-horizontal-page-container ) +
+	@size-sidebar-button +
+	@margin-horizontal-sidebar-button-icon +
+	@min-width-logo +
+	( 2 * @margin-horizontal-search ) +
+	@max-width-search +
+	@min-width-personal-tools;
+// 3.75em + 2.75em + 0.75em + 11.25em + 5.71428571em + 35.71428571em + 18.75em = 78.67857142em @ 16
+
+@border-color-sidebar: @background-color-secondary--modern;
+@background-color-secondary--modern: #f8f9fa;
+@background-color-page-container: @background-color-base;
 
 body {
 	background-color: @background-color-secondary--modern;
@@ -162,7 +280,7 @@ body {
 
 .mw-footer {
 	border-top: @border-base;
-	padding: 32px 0 0 0;
+	padding: 0.75em;
 }
 
 // Container logic.

resources/skins.vector.styles/skin-legacy.less

@@ -1,27 +0,0 @@
-// Legacy Vector stylesheets
-
-@import '../../variables.less';
-@import 'mediawiki.mixins.less';
-
-@media screen {
-	@import 'common/normalize.less';
-	@import 'legacy/layout.less';
-	@import 'common/typography.less';
-
-	// Components
-	@import 'Indicators.less';
-	@import 'SiteNotice.less';
-	@import 'Menu.less';
-	@import 'SearchBox.less';
-	@import 'MenuTabs.less';
-	@import 'TabWatchstarLink.less';
-	@import 'legacy/MenuDropdown.less';
-	@import 'MenuPortal.less';
-	@import 'legacy/Sidebar.less';
-	@import 'SidebarLogo.less';
-	@import 'Footer.less';
-}
-
-@media print {
-	@import 'common/print.less';
-}

resources/skins.vector.styles/skin.less

@@ -1,35 +1,27 @@
-// Modern Vector stylesheets
+/**
+ * Vector modern stylesheets
+ * See '../common/common.less' for common screen and print Vector stylesheets.
+ */
 
-@import '../../variables.less';
+@import '../common/variables.less';
 @import 'mediawiki.mixins.less';
 
 @media screen {
-	@import 'common/normalize.less';
-	@import 'layout.less';
-	@import 'common/typography.less';
+	// Layouts
+	@import './layouts/screen.less';
 
 	// Components
-	@import 'Indicators.less';
-	@import 'SiteNotice.less';
-	@import 'Menu.less';
-	@import 'VueEnhancedSearchBox.less';
-	@import 'SearchBoxLoader.less';
-	@import 'MenuTabs.less';
-	@import 'TabWatchstarLink.less';
-	@import 'MenuDropdown.less';
-	@import 'MenuPortal.less';
-	@import 'LanguageButton.less';
-	@import 'Sidebar.less';
-	@import 'SidebarLogo.less';
-	@import 'Footer.less';
+	@import './components/SearchBoxLoader.less';
+	@import './components/VueEnhancedSearchBox.less';
+	@import './components/Sidebar.less';
+	@import './components/LanguageButton.less';
 }
 
 @media all {
-	// Component styles that should apply in all modes.
-	@import 'Logo.less';
+	// Component styles that should apply in all media.
+	@import './components/Logo.less';
 }
 
 @media print {
-	@import 'common/print.less';
-	@import 'layout-print.less';
+	@import './layouts/print.less';
 }

skin.json

@@ -111,7 +111,10 @@
 				"desktop",
 				"mobile"
 			],
-			"styles": [ "resources/skins.vector.styles/skin-legacy.less" ]
+			"styles": [
+				"resources/common/common.less",
+				"resources/skins.vector.styles.legacy/skin-legacy.less"
+			]
 		},
 		"skins.vector.styles": {
 			"class": "ResourceLoaderSkinModule",
@@ -127,7 +130,10 @@
 				"desktop",
 				"mobile"
 			],
-			"styles": [ "resources/skins.vector.styles/skin.less" ]
+			"styles": [
+				"resources/common/common.less",
+				"resources/skins.vector.styles/skin.less"
+			]
 		},
 		"skins.vector.icons": {
 			"selectorWithVariant": ".mw-ui-icon-wikimedia-{name}-{variant}:before",

skinStyles/mediawiki.notification.less

@@ -1,5 +1,5 @@
 @import 'mediawiki.ui/variables.less';
-@import '../variables.less';
+@import '../resources/common/variables.less';
 
 /* mediawiki.notification */
 

skinStyles/mediawiki.ui.icon.less

@@ -1,7 +1,7 @@
 // Override core's `.mw-ui-icon` which defaults to 24x24.
 // The Design Style Guide  and its icons are now set to 20x20.
 // FIXME: With core set to 20x20 this file should become obsolete, see T191021.
-@import '../variables.less';
+@import '../resources/common/variables.less';
 
 .mw-portlet-lang .mw-ui-icon:before {
 	background-size: unit( @size-icon / @font-size-base, em ) auto;

skinStyles/ooui.less

@@ -1,4 +1,4 @@
-@import '../variables.less';
+@import '../resources/common/variables.less';
 
 .oo-ui-defaultOverlay,
 .skin-vector .oo-ui-windowManager-modal > .oo-ui-dialog,