From 38cbb6fed69e614177526086796fbe317c5bbf28 Mon Sep 17 00:00:00 2001
From: Siddharth VP <siddharthvp@gmail.com>
Date: Sat, 28 Sep 2024 21:05:43 +0530
Subject: [PATCH] copy button: use Codex colors for dark mode compatibility

Bug: T40932
Change-Id: I9a809954f64c6d3a14cc3e2b3c2fd38824f803f3
---
 includes/SyntaxHighlight.php                  |  2 +-
 .../{pygments.copy.css => pygments.copy.less} | 19 +++++++++++--------
 2 files changed, 12 insertions(+), 9 deletions(-)
 rename modules/{pygments.copy.css => pygments.copy.less} (57%)

diff --git a/includes/SyntaxHighlight.php b/includes/SyntaxHighlight.php
index 690c0c0c..dacec2d2 100644
--- a/includes/SyntaxHighlight.php
+++ b/includes/SyntaxHighlight.php
@@ -674,7 +674,7 @@ class SyntaxHighlight extends ExtensionTagHandler implements
 				'pygments.links.scribunto.js'
 			] : [] ),
 			'styles' => [
-				'pygments.copy.css'
+				'pygments.copy.less'
 			],
 			'messages' => [
 				'syntaxhighlight-button-copy',
diff --git a/modules/pygments.copy.css b/modules/pygments.copy.less
similarity index 57%
rename from modules/pygments.copy.css
rename to modules/pygments.copy.less
index fa22188b..63bbf2de 100644
--- a/modules/pygments.copy.css
+++ b/modules/pygments.copy.less
@@ -1,3 +1,5 @@
+@import 'mediawiki.skin.variables.less';
+
 /**
  * Adapted from https://www.mediawiki.org/wiki/MediaWiki:Gadget-site-tpl-copy.css
  * Original author: Krinkle
@@ -18,19 +20,20 @@
 	box-sizing: border-box;
 	padding: 5px 7px;
 	border-radius: 2px;
-	background: #fff;
-	color: #36c;
-	border: 1px solid #eaecf0;
+	background: @background-color-base;
+	color: @color-progressive;
+	border: 1px solid @border-color-muted;
 }
 
 .mw-highlight-copy--bound button:hover {
 	cursor: pointer;
-	background: #fff;
-	border: 1px solid #447ff5;
+	color: @color-progressive--hover;
+	background: @background-color-interactive-subtle;
+	border-color: @border-color-progressive--hover;
 }
 
 .mw-highlight-copy--bound button:active {
-	background: #eff3fa;
-	color: #2a4b8d;
-	border-color: #2a4b8d;
+	color: @color-progressive--active;
+	background: @background-color-interactive;
+	border-color: @border-color-progressive--active;
 }