diff --git a/extension.json b/extension.json
index 1d4db0f2..27cb30b3 100644
--- a/extension.json
+++ b/extension.json
@@ -13,7 +13,7 @@
 	"license-name": "GPL-2.0-or-later",
 	"type": "editor",
 	"requires": {
-		"MediaWiki": ">= 1.39.0"
+		"MediaWiki": ">= 1.41.0"
 	},
 	"MessagesDirs": {
 		"WikiEditor": [
diff --git a/modules/insertlink/TitleInputField.less b/modules/insertlink/TitleInputField.less
index 03cbd516..5c468970 100644
--- a/modules/insertlink/TitleInputField.less
+++ b/modules/insertlink/TitleInputField.less
@@ -1,6 +1,6 @@
-@import 'mediawiki.ui/variables.less';
+@import 'mediawiki.skin.variables.less';
 
 .mw-wikiEditor-InsertLink-TitleInputField .oo-ui-messageWidget {
-	color: @color-base--subtle;
-	font-weight: normal;
+	color: @color-subtle;
+	font-weight: @font-weight-normal;
 }
diff --git a/modules/realtimepreview/ErrorLayout.less b/modules/realtimepreview/ErrorLayout.less
index ca1ac7a5..6c2519fc 100644
--- a/modules/realtimepreview/ErrorLayout.less
+++ b/modules/realtimepreview/ErrorLayout.less
@@ -1,11 +1,13 @@
-@import 'mediawiki.ui/variables.less';
+@import 'mediawiki.skin.variables.less';
 
 .ext-WikiEditor-realtimepreview-ErrorLayout {
 	display: flex;
 	align-items: center;
 	flex-direction: column;
 	justify-content: center;
-	background-color: @colorGray15;
+	// TODO: Currently, `#f8f9fa` is only available as `@background-color-interactive-subtle`,
+	// which would be wrongly applied here. Revisit with appropriate Codex token.
+	background-color: #f8f9fa;
 	height: 100%;
 	width: 100%;
 	text-align: center;
diff --git a/modules/realtimepreview/ManualWidget.less b/modules/realtimepreview/ManualWidget.less
index 57341249..c3dd110b 100644
--- a/modules/realtimepreview/ManualWidget.less
+++ b/modules/realtimepreview/ManualWidget.less
@@ -1,13 +1,15 @@
-@import 'mediawiki.ui/variables';
+@import 'mediawiki.skin.variables.less';
 
 .ext-WikiEditor-ManualWidget {
-	background-color: @colorGray14;
+	// TODO: The only background-color token carrying `#eaecf0` right now is
+	// `@background-color-interactive`, which shouldn't be used here.
+	background-color: #eaecf0;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	border-color: @colorGray12;
-	border-width: 1px 0;
-	border-style: solid;
+	border-color: @border-color-subtle;
+	border-width: @border-width-base 0;
+	border-style: @border-style-base;
 	padding: 14px 24px;
 	position: relative;
 	color: inherit;
@@ -23,12 +25,12 @@
 
 	.ext-WikiEditor-realtimepreview-manual-reload {
 		margin-left: auto;
-		font-weight: bolder;
-		color: @color-primary;
+		font-weight: @font-weight-bold;
+		color: @color-progressive;
 	}
 
 	&.oo-ui-widget-disabled .ext-WikiEditor-realtimepreview-manual-reload {
-		color: @colorDisabledText;
+		color: @color-disabled;
 	}
 
 	&.oo-ui-widget-disabled:active {
diff --git a/modules/realtimepreview/RealtimePreview.less b/modules/realtimepreview/RealtimePreview.less
index 6ad2bfe7..8183c85c 100644
--- a/modules/realtimepreview/RealtimePreview.less
+++ b/modules/realtimepreview/RealtimePreview.less
@@ -1,11 +1,11 @@
-@import 'mediawiki.ui/variables.less';
+@import 'mediawiki.skin.variables.less';
 
 .ext-WikiEditor-realtimepreview-button:hover {
-	background-color: @colorGray14;
+	background-color: @background-color-interactive;
 }
 
 .ext-WikiEditor-realtimepreview-button.oo-ui-toggleWidget-on .oo-ui-labelElement-label {
-	color: @color-primary;
+	color: @color-progressive;
 }
 
 /* stylelint-disable selector-max-id */
@@ -27,10 +27,10 @@
 }
 
 .ext-WikiEditor-ResizingDragBar-ns {
-	border-top: 1px solid @colorGray12;
+	border-top: @border-width-base @border-style-base @border-color-subtle;
 }
 
-@loadingbar-width: 20%;
+@width-loading-bar: 20%;
 
 .ext-WikiEditor-realtimepreview-loadingbar div {
 	position: absolute;
@@ -38,22 +38,22 @@
 	display: block;
 	opacity: 1;
 	content: ' ';
-	background-color: @color-primary;
-	width: @loadingbar-width;
+	background-color: @background-color-progressive;
+	width: @width-loading-bar;
 	height: 4px;
 	// Hide the loading bar to start with; it'll be shown if the loading state persists for more than 1s.
 	visibility: hidden;
-	animation: loadingbar 1.5s 1s infinite linear alternate;
+	animation: loading-bar 1.5s 1s infinite linear alternate;
 }
 
-@keyframes loadingbar {
+@keyframes loading-bar {
 	0% {
 		visibility: visible;
 		left: 0;
 	}
 
 	100% {
-		left: calc( 100% - @loadingbar-width );
+		left: calc( 100% - @width-loading-bar );
 	}
 }
 
diff --git a/modules/realtimepreview/ResizingDragBar.less b/modules/realtimepreview/ResizingDragBar.less
index 059f467b..310af49d 100644
--- a/modules/realtimepreview/ResizingDragBar.less
+++ b/modules/realtimepreview/ResizingDragBar.less
@@ -1,11 +1,18 @@
-@import 'mediawiki.ui/variables.less';
+@import 'mediawiki.skin.variables.less';
+
+// TODO: Replace static color values as soon as a drag bar and its design tokens
+// have been defined in Codex.
 
 // The dimensions of the UI affordance (the little line in the draggable area).
 @affordance-width: 4px;
 @affordance-length: 52px;
+@background-color-wikieditor-resizing-dragbar: #eaecf0;
+@background-color-wikieditor-resizing-dragbar-ew: #f8f9fa;
+@background-color-wikieditor-resizing-dragbar-drag: #c8ccd1;
+@background-color-wikieditor-resizing-dragbar-drag--hover: #54595d;
 
 .ext-WikiEditor-ResizingDragBar {
-	background-color: @colorGray14;
+	background-color: @background-color-wikieditor-resizing-dragbar;
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -17,24 +24,24 @@
 
 .ext-WikiEditor-ResizingDragBar-ew {
 	cursor: ew-resize;
-	background-color: @colorGray15;
+	background-color: @background-color-wikieditor-resizing-dragbar-ew;
 }
 
 .ext-WikiEditor-ResizingDragBar span {
 	width: @affordance-length;
 	height: @affordance-width;
-	background-color: @colorGray12;
-	border-radius: 2px;
+	background-color: @background-color-wikieditor-resizing-dragbar-drag;
+	border-radius: @border-radius-base;
 	display: block;
 	margin: 2px;
 }
 
 .ext-WikiEditor-ResizingDragBar:hover span {
-	background-color: @colorGray5;
+	background-color: @background-color-wikieditor-resizing-dragbar-drag--hover;
 }
 
 .ext-WikiEditor-ResizingDragBar-ew span {
 	height: @affordance-length;
 	width: @affordance-width;
-	border-width: 0 1px;
+	border-width: 0 @border-width-base;
 }
diff --git a/modules/realtimepreview/TwoPaneLayout.less b/modules/realtimepreview/TwoPaneLayout.less
index 39e18aa1..2434a7bb 100644
--- a/modules/realtimepreview/TwoPaneLayout.less
+++ b/modules/realtimepreview/TwoPaneLayout.less
@@ -1,19 +1,21 @@
-@import 'mediawiki.ui/variables.less';
+@import 'mediawiki.skin.variables.less';
 
 .ext-WikiEditor-twopanes-TwoPaneLayout {
 	display: flex;
 
 	.ext-WikiEditor-twopanes-pane1 {
-		border: 1px solid @colorGray12;
-		border-width: 0 1px 0 0;
+		border-color: @border-color-subtle;
+		border-style: @border-style-base;
+		border-width: 0 @border-width-base 0 0;
 		// Offset by half the difference in padding and the UI affordance.
 		width: ~'calc( 50% - 9px )';
 	}
 
 	.ext-WikiEditor-twopanes-pane2 {
 		position: relative;
-		border: 1px solid @colorGray12;
-		border-width: 0 0 0 1px;
+		border-color: @border-color-subtle;
+		border-style: @border-style-base;
+		border-width: 0 0 0 @border-width-base;
 		flex: 1 1 0;
 		padding: 0;
 		display: flex;