feat(core): ✨ replace breakpoint LESS variables with Codex tokens

Codex tokens are a better implementation and this should ensure consistency across the MW ecosystem. We have to keep a copy for now as they are introduced in 1.41. Related: #735
StarCitizenTools · Nov 16, 2023 · 60999eb · 60999eb
1 parent 03a23f6
commit 60999eb
Show file tree

Hide file tree

Showing 31 changed files with 84 additions and 76 deletions.
diff --git a/resources/mixins.less b/resources/mixins.less
@@ -83,7 +83,7 @@
 	.citizen-card-hide( bottom @position );
 	.citizen-card-transition();
 
-	@media ( min-width: @width-breakpoint-tablet ) {
+	@media ( min-width: @min-width-breakpoint-tablet ) {
 		& when ( @position = left ) {
 			right: unset;
 		}
@@ -93,7 +93,7 @@
 		}
 	}
 
-	@media ( min-width: @width-breakpoint-desktop ) {
+	@media ( min-width: @min-width-breakpoint-desktop ) {
 		right: unset;
 		left: 100%;
 		& when ( @position = left ) {

diff --git a/resources/skins.citizen.styles/common/common.less b/resources/skins.citizen.styles/common/common.less
@@ -145,15 +145,15 @@ video {
 	}
 }
 
-@media ( max-width: @width-breakpoint-tablet ) {
+@media ( max-width: @max-width-breakpoint-tablet ) {
 	.mw-body,
 	.parsoid-body {
 		overflow-x: hidden; // fallback if clip is not supported
 		overflow-x: clip; // avoid breaking layout in smaller screen sizes
 	}
 }
 
-@media ( min-width: @width-breakpoint-tablet ) {
+@media ( min-width: @min-width-breakpoint-tablet ) {
 	// Delay scroll animation won't happen on load
 	// Use it only for larger viewport as it is very costly
 	// on mobile devices

diff --git a/resources/skins.citizen.styles/common/cssvariables.less b/resources/skins.citizen.styles/common/cssvariables.less
@@ -159,7 +159,7 @@ html {
 	--border-color-input--hover: @dark-border-color-input--hover;
 }
 
-@media ( min-width: @width-breakpoint-tablet ) {
+@media ( min-width: @min-width-breakpoint-tablet ) {
 	:root {
 		--font-size-h1: 2rem;
 		--font-size-h2: 1.5rem;
@@ -172,7 +172,7 @@ html {
 	}
 }
 
-@media ( min-width: @width-breakpoint-desktop ) {
+@media ( min-width: @min-width-breakpoint-desktop ) {
 	html {
 		--padding-page: @padding-page * 2;
 		--header-card-maxheight: ~'calc( 100vh - var( --space-sm ) * 2 )';

diff --git a/resources/skins.citizen.styles/components/Drawer.less b/resources/skins.citizen.styles/components/Drawer.less
@@ -53,7 +53,7 @@
 	}
 }
 
-@media ( min-width: @width-breakpoint-tablet ) {
+@media ( min-width: @min-width-breakpoint-tablet ) {
 	.citizen-drawer {
 		&__logo img {
 			// Bigger logo
@@ -70,7 +70,7 @@
 	}
 }
 
-@media ( min-width: @width-breakpoint-desktop ) {
+@media ( min-width: @min-width-breakpoint-desktop ) {
 	.citizen-drawer {
 		&__header {
 			justify-content: flex-start;

diff --git a/resources/skins.citizen.styles/components/Footer.less b/resources/skins.citizen.styles/components/Footer.less
@@ -118,7 +118,7 @@
 	}
 }
 
-@media ( min-width: @width-breakpoint-desktop ) {
+@media ( min-width: @min-width-breakpoint-desktop ) {
 	.citizen-footer {
 		margin-bottom: 0;
 	}

diff --git a/resources/skins.citizen.styles/components/Header.less b/resources/skins.citizen.styles/components/Header.less
@@ -153,7 +153,7 @@
 	}
 }
 
-@media ( min-width: @width-breakpoint-desktop ) {
+@media ( min-width: @min-width-breakpoint-desktop ) {
 	.citizen-header {
 		--header-direction: column;
 		top: 0;
@@ -172,7 +172,7 @@
 }
 
 /* Hide header when scroll down on smaller screen sizes */
-@media ( max-width: @width-breakpoint-tablet ) {
+@media ( max-width: @max-width-breakpoint-tablet ) {
 	.citizen-header {
 		transition: var( --transition-menu );
 		transition-property: transform;

diff --git a/resources/skins.citizen.styles/components/Pagetools.less b/resources/skins.citizen.styles/components/Pagetools.less
@@ -238,7 +238,7 @@
 }
 
 // To avoid more menu from overflow in narrow screen
-@media ( max-width: @width-breakpoint-tablet ) {
+@media ( max-width: @max-width-breakpoint-tablet ) {
 	.page-actions {
 		&__item {
 			position: unset;
@@ -251,7 +251,7 @@
 	}
 }
 
-@media ( min-width: @width-breakpoint-desktop ) {
+@media ( min-width: @min-width-breakpoint-desktop ) {
 	.page-actions {
 		> .mw-portlet {
 			li > a {

diff --git a/resources/skins.citizen.styles/components/Search.less b/resources/skins.citizen.styles/components/Search.less
@@ -118,7 +118,7 @@
 	}
 }
 
-@media ( max-width: @width-breakpoint-desktop ) {
+@media ( max-width: @max-width-breakpoint-tablet ) {
 	.citizen-search__card {
 		z-index: 1; // So that overlay does not cover card
 		width: auto;

diff --git a/resources/skins.citizen.styles/components/StickyHeader.less b/resources/skins.citizen.styles/components/StickyHeader.less
@@ -55,7 +55,7 @@
 }
 
 // Hide sticky header on scroll down on smaller screens
-@media ( max-width: @width-breakpoint-tablet ) {
+@media ( max-width: @max-width-breakpoint-tablet ) {
 	.citizen-body-header--sticky {
 		.mw-body-header {
 			transition: var( --transition-menu );
@@ -71,7 +71,7 @@
 }
 
 // Make sticky header more compact if there are less screen estate
-@media ( max-width: @width-breakpoint-tablet ), ( max-height: 800px ) {
+@media ( max-width: @max-width-breakpoint-tablet ), ( max-height: 800px ) {
 	.citizen-body-header--sticky {
 		#siteSub {
 			display: none;

diff --git a/resources/skins.citizen.styles/components/TableOfContents.less b/resources/skins.citizen.styles/components/TableOfContents.less
@@ -224,7 +224,7 @@
 	}
 }
 
-@media ( min-width: @width-breakpoint-desktop ) {
+@media ( min-width: @min-width-breakpoint-desktop ) {
 	.citizen-toc {
 		grid-area: toc;
 

diff --git a/resources/skins.citizen.styles/layout.less b/resources/skins.citizen.styles/layout.less
@@ -51,7 +51,7 @@
 	grid-area: content;
 }
 
-@media ( min-width: @width-breakpoint-desktop ) {
+@media ( min-width: @min-width-breakpoint-desktop ) {
 	.citizen-page-container {
 		// Reserve space for header
 		margin-left: var( --header-size );
@@ -70,7 +70,7 @@
 }
 
 /* Wider page width for certain namespaces */
-@media ( min-width: @width-breakpoint-desktop-wide ) {
+@media ( min-width: @min-width-breakpoint-desktop-wide ) {
 	// 1 - Special, 6 - File, 14 - Category
 	.ns {
 		&--1,

diff --git a/resources/skins.citizen.styles/skinning/content.media-common.less b/resources/skins.citizen.styles/skinning/content.media-common.less
@@ -67,7 +67,7 @@ figure[ typeof~='mw:File/Frame' ] {
 }
 
 // Do not float content in mobile view
-@media ( min-width: @width-breakpoint-tablet ) {
+@media ( min-width: @min-width-breakpoint-tablet ) {
 	figure[ typeof~='mw:File/Thumb' ],
 	figure[ typeof~='mw:File/Frame' ] {
 		> figcaption {

diff --git a/resources/skins.citizen.styles/skinning/content.thumbnails-common.less b/resources/skins.citizen.styles/skinning/content.thumbnails-common.less
@@ -51,7 +51,7 @@ div.thumbinner {
 }
 
 // Do not float content in mobile view
-@media ( min-width: @width-breakpoint-tablet ) {
+@media ( min-width: @min-width-breakpoint-tablet ) {
 	/* @noflip */
 	div.tright,
 	div.floatright,

diff --git a/resources/variables.less b/resources/variables.less
@@ -1,33 +1,41 @@
 /*
- * Citizen - LESS variables
- * https://starcitizen.tools
- */
+ * Citizen
+ *
+ * All LESS variables used in the skin must be defined here
+ * Use CSS variables from cssvariables.less is preferrable
+ * Only import this stylesheet when LESS variables is nessecary
+ *
+ * Related files:
+ * - Citizen CSS variables: skins.citizen.styles/common/cssvariables.less
+ * - Override MW skin default variables: mediawiki.less/mediawiki.skin.variables.less
+ *
+*/
 
-// Import MediaWiki-supplied mixins
-@import 'mediawiki.mixins';
 
-/* == Breakpoints == */
-/**
- * Minimum available screen width at which a device can be considered a mobile device
- * Many older feature phones have screens smaller than this value.
+/* Imports */
+/* 
+ * MediaWiki mixins
+ * https://github.com/wikimedia/mediawiki/blob/master/resources/src/mediawiki.less/mediawiki.mixins.less
  */
-@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).
+@import 'mediawiki.mixins';
+/* 
+ * MediaWiki skin variables
+ * https://github.com/wikimedia/mediawiki/blob/master/resources/src/mediawiki.less/mediawiki.skin.defaults.less
+ * @see T349359
  */
-@width-breakpoint-tablet: 720px;
+@import 'mediawiki.skin.variables.less';
 
-/* Minimum available screen width at which a device can be considered a desktop. */
-@width-breakpoint-desktop: 1000px;
 
-/* Wider desktop breakpoint */
-@width-breakpoint-desktop-wide: 1300px;
+/* Compatiblity */
+// @since 1.41
+@min-width-breakpoint-mobile: 320px;
+@min-width-breakpoint-tablet: 640px;
+@min-width-breakpoint-desktop: 1120px;
+@min-width-breakpoint-desktop-wide: 1680px;
+@max-width-breakpoint-mobile: @min-width-breakpoint-tablet - 1px;
+@max-width-breakpoint-tablet: @min-width-breakpoint-desktop - 1px;
+@max-width-breakpoint-desktop: @min-width-breakpoint-desktop-wide - 1px;
 
-/* Extra wide desktop breakpoint */
-@width-breakpoint-desktop-extrawide: 2000px;
 
 /* == Spacing == */
 @space-unit: 1rem;

diff --git a/skinStyles/extensions/Capiunto/capiunto.infobox.main.less b/skinStyles/extensions/Capiunto/capiunto.infobox.main.less
@@ -27,7 +27,7 @@
 	}
 
 	/* Sync with floatright styles */
-	@media ( min-width: @width-breakpoint-tablet ) {
+	@media ( min-width: @min-width-breakpoint-tablet ) {
 		float: right;
 		margin-left: var( --space-lg );
 		clear: right;

diff --git a/skinStyles/extensions/CookieWarning/ext.CookieWarning.styles.less b/skinStyles/extensions/CookieWarning/ext.CookieWarning.styles.less
@@ -16,7 +16,7 @@
 	grid-template-columns: 1fr;
 	gap: var( --space-sm );
 	width: auto;
-	max-width: @width-breakpoint-tablet;
+	max-width: @max-width-breakpoint-tablet;
 	padding: var( --space-md );
 	margin: var( --space-xs );
 	font-size: 0.875rem;
@@ -26,7 +26,7 @@
 	border-radius: var( --border-radius--large );
 	box-shadow: var( --box-shadow-dialog );
 
-	@media only screen and ( min-width: @width-breakpoint-desktop ) {
+	@media only screen and ( min-width: @min-width-breakpoint-desktop ) {
 		right: unset;
 		left: var( --header-size );
 	}

diff --git a/skinStyles/extensions/Echo/ext.echo.ui.less b/skinStyles/extensions/Echo/ext.echo.ui.less
@@ -27,13 +27,13 @@
 	}
 }
 
-@media ( min-width: @width-breakpoint-tablet ) {
+@media ( min-width: @min-width-breakpoint-tablet ) {
 	.mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
 		// .citizen-header-card-tablet( right );
 	}
 }
 
-@media ( min-width: @width-breakpoint-desktop ) {
+@media ( min-width: @min-width-breakpoint-desktop ) {
 	.mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
 		bottom: 0 !important;
 		left: var( --header-size ) !important;

diff --git a/skinStyles/extensions/MediaSearch/mediasearch.styles.less b/skinStyles/extensions/MediaSearch/mediasearch.styles.less
@@ -769,7 +769,7 @@
 			border-radius: var( --border-radius--large );
 
 			// Responsive handling
-			@media screen and ( max-width: @width-breakpoint-tablet ) {
+			@media screen and ( max-width: @max-width-breakpoint-tablet ) {
 				position: fixed;
 				top: unset;
 				bottom: 0;
@@ -796,7 +796,7 @@
 
 	&__list-wrapper--collapsed {
 		// Responsive handling
-		@media screen and ( max-width: @width-breakpoint-tablet ) {
+		@media screen and ( max-width: @max-width-breakpoint-tablet ) {
 			// Since the quickview card is a modal, we don't need the right margin anymore
 			margin-right: 0;
 		}
@@ -902,7 +902,7 @@
 			color: var( --color-base--emphasized );
 			border-radius: var( --border-radius--small );
 
-			@media screen and ( min-width: @width-breakpoint-tablet ) {
+			@media screen and ( min-width: @min-width-breakpoint-tablet ) {
 				font-size: 0.875rem;
 			}
 
@@ -937,7 +937,7 @@
 	&__namespace {
 		border-radius: var( --border-radius--small );
 
-		@media screen and ( min-width: @width-breakpoint-tablet ) {
+		@media screen and ( min-width: @min-width-breakpoint-tablet ) {
 			font-size: 0.875rem;
 		}
 
@@ -966,14 +966,14 @@
 	}
 
 	.sdms-search-results-count {
-		@media screen and ( min-width: @width-breakpoint-tablet ) {
+		@media screen and ( min-width: @min-width-breakpoint-tablet ) {
 			font-size: 0.875rem;
 		}
 	}
 
 	&__clear {
 		&--no-js {
-			@media screen and ( min-width: @width-breakpoint-tablet ) {
+			@media screen and ( min-width: @min-width-breakpoint-tablet ) {
 				font-size: 0.875rem;
 			}
 		}