Make checkboxes use upstream mediawiki.ui.… styles

This does not fully solve the ticket, as these are not the
actual OOUI styles. But it's already much better than the
unstyled checkboxes before.

Bug: T281227
Change-Id: I9a5023482774c09aa73845ca6dfd1c4926f088e1

extension.json

@@ -223,6 +223,7 @@
 				"mediawiki.storage",
 				"mediawiki.Title",
 				"mediawiki.ui.button",
+				"mediawiki.ui.checkbox",
 				"mediawiki.ui.icon",
 				"mediawiki.Uri",
 				"mediawiki.user",

src/ui/templates/settingsDialog/settingsDialog.js

@@ -68,7 +68,7 @@ export function renderSettingsDialog( model ) {
 			<main id='mwe-popups-settings-form'>
 				<form>
 					${choices.map( ( { id, name, description, isChecked } ) => `
-					<p>
+					<p class="mw-ui-checkbox">
 						<input
 							${isChecked ? 'checked' : ''}
 							value='${id}'

src/ui/templates/settingsDialog/settingsDialog.less

@@ -50,7 +50,7 @@
 		}
 	}
 
-	main {
+	main#mwe-popups-settings-form {
 		display: block;
 		width: 350px;
 		padding: 32px 0 24px;
@@ -58,7 +58,7 @@
 
 		p {
 			color: #54595d;
-			font-size: 17px;
+			font-size: 14px;
 			margin: 16px 0 0;
 
 			&:first-child {
@@ -67,35 +67,30 @@
 		}
 
 		form {
-			img,
-			input,
-			label {
-				vertical-align: top;
-			}
-
 			img {
 				margin-right: 60px;
 			}
 
 			input {
-				display: inline-block;
-				margin: 0 10px 0 0;
-				padding: 0;
+				margin-right: 10px;
 			}
 
 			label {
 				font-size: 13px;
-				display: inline-block;
 				line-height: 16px;
 				width: 300px;
 
 				> span {
 					color: #000;
-					font-size: 18px;
+					font-size: 14px;
 					font-weight: bold;
 					display: block;
 					margin-bottom: 5px;
-					line-height: 18px;
+				}
+
+				&:before {
+					// stylelint-disable-next-line declaration-no-important
+					top: @size-input-binary / 2 !important;
 				}
 			}
 		}

webpack.config.js

@@ -112,8 +112,8 @@ module.exports = ( env, argv ) => ( {
 		// Minified uncompressed size limits for chunks / assets and entrypoints. Keep these numbers
 		// up-to-date and rounded to the nearest 10th of a kibibyte so that code sizing costs are
 		// well understood. Related to bundlesize minified, gzipped compressed file size tests.
-		maxAssetSize: 44.1 * 1024,
-		maxEntrypointSize: 44.1 * 1024,
+		maxAssetSize: 44.2 * 1024,
+		maxEntrypointSize: 44.2 * 1024,
 
 		// The default filter excludes map files but we rename ours.
 		assetFilter: ( filename ) => !filename.endsWith( srcMapExt )