From 8d21f557c1c519292f20dafc3eb0d0f682f6da19 Mon Sep 17 00:00:00 2001
From: Volker E <volker.e@wikimedia.org>
Date: Tue, 19 Jul 2022 05:08:01 -0700
Subject: [PATCH] styles: Use default `border-width` and `border-style` vars

Bug: T313243
Change-Id: I8e40fbcff3d739318f6a53104128ed52ef8f294f
---
 resources/skins.vector.styles/components/MenuTabs.less     | 5 +++--
 resources/skins.vector.styles/components/Sidebar.less      | 2 +-
 resources/skins.vector.styles/components/StickyHeader.less | 4 ++--
 resources/skins.vector.styles/components/UserLinks.less    | 4 ++--
 resources/skins.vector.styles/layouts/screen.less          | 6 +++---
 5 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/resources/skins.vector.styles/components/MenuTabs.less b/resources/skins.vector.styles/components/MenuTabs.less
index 78a3f770f..4e7bc5930 100644
--- a/resources/skins.vector.styles/components/MenuTabs.less
+++ b/resources/skins.vector.styles/components/MenuTabs.less
@@ -56,8 +56,9 @@
 			cursor: pointer;
 
 			&:hover {
+				// FIXME: Those need a color to be set in order to not show user choice in certain OS.
+				border-bottom: @border-width-base @border-style-base;
 				text-decoration: none;
-				border-bottom: 1px solid;
 			}
 		}
 	}
@@ -71,7 +72,7 @@
 
 	.selected {
 		a {
-			border-bottom: 1px solid;
+			border-bottom: @border-width-base @border-style-base;
 		}
 
 		a,
diff --git a/resources/skins.vector.styles/components/Sidebar.less b/resources/skins.vector.styles/components/Sidebar.less
index 85ee687fe..c4941a378 100644
--- a/resources/skins.vector.styles/components/Sidebar.less
+++ b/resources/skins.vector.styles/components/Sidebar.less
@@ -159,7 +159,7 @@ body:not( .vector-toc-enabled ) .mw-sidebar {
 @media ( min-width: ( @max-width-workspace-container + ( 2 * @padding-horizontal-page-container ) ) ) {
 	.mw-sidebar {
 		background: @background-color-page-container;
-		border-right: 1px solid @border-color-sidebar;
+		border-right: @border-width-base @border-style-base @border-color-sidebar;
 	}
 }
 
diff --git a/resources/skins.vector.styles/components/StickyHeader.less b/resources/skins.vector.styles/components/StickyHeader.less
index 2a80d8cd9..e4ecd315e 100644
--- a/resources/skins.vector.styles/components/StickyHeader.less
+++ b/resources/skins.vector.styles/components/StickyHeader.less
@@ -15,7 +15,7 @@
 	margin: 0 auto;
 	background: @background-color-base;
 	background-color: #fffffff7;
-	border-bottom: 1px solid @colorGray14;
+	border-bottom: @border-width-base @border-style-base @colorGray14;
 	// FIXME: Should this adapt to different thresholds? Ask Alex!
 	padding: 6px 8px 6px 10px;
 	justify-content: space-between;
@@ -70,7 +70,7 @@
 	// Components
 	//
 	&-context-bar {
-		border-left: 1px solid #c8c8c8;
+		border-left: @border-width-base @border-style-base #c8c8c8;
 		margin: 0 15px;
 		padding-left: 30px;
 		white-space: nowrap;
diff --git a/resources/skins.vector.styles/components/UserLinks.less b/resources/skins.vector.styles/components/UserLinks.less
index 4fbbc5e8e..421d3973b 100644
--- a/resources/skins.vector.styles/components/UserLinks.less
+++ b/resources/skins.vector.styles/components/UserLinks.less
@@ -133,7 +133,7 @@
 		}
 
 		.vector-menu-content-item-login {
-			border-bottom: 1px solid @border-color-base;
+			border-bottom: @border-width-base @border-style-base @border-color-base;
 		}
 
 		.vector-user-menu-anon-editor {
@@ -157,7 +157,7 @@
 		}
 
 		.vector-menu-content-item-logout {
-			border-top: 1px solid @border-color-base;
+			border-top: @border-width-base @border-style-base @border-color-base;
 		}
 
 		#pt-tmpuserpage {
diff --git a/resources/skins.vector.styles/layouts/screen.less b/resources/skins.vector.styles/layouts/screen.less
index d99c0fbd1..c72cd3976 100644
--- a/resources/skins.vector.styles/layouts/screen.less
+++ b/resources/skins.vector.styles/layouts/screen.less
@@ -102,7 +102,7 @@ body {
 	// The total of margin-top and height should be 16px. Since we're using relative units 1em=14px
 	// We need to set both height and margin so that the margin is not ignored.
 	margin-top: 1em;
-	border-bottom: solid 2px transparent;
+	border-bottom: 2px @border-style-base transparent;
 }
 
 .mw-header {
@@ -333,8 +333,8 @@ body {
 // Responsive overrides.
 @media ( min-width: @min-width-page-container--padded ) {
 	.mw-page-container {
-		border-left: 1px solid @border-color-sidebar;
-		border-right: 1px solid @border-color-sidebar;
+		border-left: @border-width-base @border-style-base @border-color-sidebar;
+		border-right: @border-width-base @border-style-base @border-color-sidebar;
 	}
 }