From bd5738afe86615e913be0fe273b3af0e6b10e709 Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Fri, 15 Nov 2024 19:29:58 -0500
Subject: [PATCH] feat: use Codex CSS variable directly

---
 .../ext.tabberNeue.init.less                  | 38 ++++++++++---------
 modules/ext.tabberNeue/ext.tabberNeue.less    | 22 +++--------
 2 files changed, 26 insertions(+), 34 deletions(-)

diff --git a/modules/ext.tabberNeue.init/ext.tabberNeue.init.less b/modules/ext.tabberNeue.init/ext.tabberNeue.init.less
index 76ba762..f1ae659 100644
--- a/modules/ext.tabberNeue.init/ext.tabberNeue.init.less
+++ b/modules/ext.tabberNeue.init/ext.tabberNeue.init.less
@@ -15,10 +15,17 @@
 
 	&__tab {
 		padding: 0.5em 0.75em;
-		color: var( --color-base, #202122 );
-		font-weight: 700;
+		font-weight: bold;
 		white-space: nowrap;
 
+		&,
+		&:hover,
+		&:active,
+		&:focus {
+			text-decoration: none;
+		}
+
+		/* stylelint-disable-next-line no-descending-specificity */
 		&,
 		&:visited {
 			color: var( --color-base, #202122 );
@@ -26,8 +33,8 @@
 
 		&:hover {
 			@media ( hover: hover ) {
-				color: var( --color-progressive--hover, #447ff5 );
 				box-shadow: inset 0 -2px 0 0 var( --box-shadow-color-progressive-selected--hover, #447ff5 );
+				color: var( --color-progressive--hover, #447ff5 );
 			}
 		}
 
@@ -36,13 +43,6 @@
 				color: var( --color-progressive--active, #2a4b8d );
 			}
 		}
-
-		&,
-		&:hover,
-		&:active,
-		&:focus {
-			text-decoration: none;
-		}
 	}
 
 	&__section {
@@ -67,8 +67,18 @@
 	}
 }
 
+// Basic nojs support
+/* stylelint-disable-next-line selector-class-pattern */
+.client-nojs {
+	.tabber__panel {
+		height: auto;
+		scroll-padding-top: 3rem;
+	}
+}
+
 // Set tabber height to the height of first tabpanel by
 // setting subsequent tabpanels to have 0 height
+/* stylelint-disable-next-line selector-class-pattern */
 .client-js {
 	.tabber {
 		&__tabs {
@@ -87,11 +97,3 @@
 		}
 	}
 }
-
-// Basic nojs support
-.client-nojs {
-	.tabber__panel {
-		scroll-padding-top: 3rem;
-		height: auto;
-	}
-}
\ No newline at end of file
diff --git a/modules/ext.tabberNeue/ext.tabberNeue.less b/modules/ext.tabberNeue/ext.tabberNeue.less
index 63e3bd4..0b0d9fd 100644
--- a/modules/ext.tabberNeue/ext.tabberNeue.less
+++ b/modules/ext.tabberNeue/ext.tabberNeue.less
@@ -1,22 +1,11 @@
 .tabber {
-	// Codex tokens aren't avaliable in older MW version
-	--tabber-color-progressive: var( --color-progressive, #36c ); // @color-progressive
-	--tabber-color-progressive--hover: var( --color-progressive--hover, #447ff5 ); // @color-progressive--hover
-	--tabber-color-progressive--active: var( --color-progressive--active, #2a4b8d ); // @color-progressive--active
-	--tabber-color-base: var( --color-base, #202122 ); // @color-base
-	--tabber-color-subtle: var( --color-subtle, #54595d ); // @color-subtle
-	--tabber-background-color-button-quiet--hover: var( --background-color-button-quiet--hover, rgba( 0, 24, 73, 0.027 ) ); // @background-color-button-quiet--hover
-	--tabber-background-color-button-quiet--active: var( --background-color-button-quiet--active, rgba( 0, 24, 73, 0.082 ) ); // @background-color-button-quiet--active
-	--tabber-border-color-base: var( --border-color-base, #a2a9b1 ); // @border-color-base
-	--tabber-height-indicator: 2px;
-
 	&__header {
 		position: relative;
 		display: flex;
 		flex-direction: column;
 		/* defend against <section> needing 100% */
 		flex-shrink: 0;
-		box-shadow: inset 0 -1px 0 0 var( --tabber-border-color-base );
+		box-shadow: inset 0 -1px 0 0 var( --border-color-base, #a2a9b1 );
 		/* fixes cross browser quarks */
 		min-block-size: fit-content;
 
@@ -37,10 +26,10 @@
 		& &__prev,
 		& &__next {
 			position: absolute;
-			display: none; // Required as all:unset also unset display:none
 			z-index: 1;
 			top: 0;
 			bottom: 0;
+			display: none; // Required as all:unset also unset display:none
 			width: 20px;
 			border-radius: 4px;
 			cursor: pointer;
@@ -110,7 +99,7 @@
 					animation-name: skeletonload;
 					animation-timing-function: linear;
 					background: #000;
-					background: linear-gradient( to right, var( --tabber-color-base ) 8%, var( --tabber-color-subtle ) 18%, var( --tabber-color-base ) 33% );
+					background: linear-gradient( to right, var( --color-base, #202122 ) 8%, var( --color-subtle, #54595d ) 18%, var( --color-base, #202122 ) 33% );
 				}
 
 				&::before,
@@ -133,6 +122,7 @@
 			scroll-behavior: smooth;
 		}
 
+		/* stylelint-disable-next-line no-descending-specificity */
 		&__section,
 		&__tabs {
 			@media ( min-width: 720px ) {
@@ -164,11 +154,11 @@
 			&__prev,
 			&__next {
 				&:hover {
-					background-color: var( --tabber-background-color-button-quiet--hover );
+					background-color: var( --background-color-button-quiet--hover, rgba( 0, 24, 73, 0.027 ) );
 				}
 
 				&:active {
-					background-color: var( --tabber-background-color-button-quiet--active );
+					background-color: var( --background-color-button-quiet--active, rgba( 0, 24, 73, 0.082 ) );
 				}
 			}
 		}