From db431f563ee087bd5f0a1a92e6a8cffc2bdda8f4 Mon Sep 17 00:00:00 2001
From: Carlos Fernandez <cfern1990@gmail.com>
Date: Tue, 26 May 2026 19:04:44 -0400
Subject: [PATCH] Rename custom color variables

---
 styles/less/global/elements.less |  6 +++---
 styles/less/utils/colors.less    | 15 ++++++++-------
 styles/less/utils/mixin.less     |  2 +-
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/styles/less/global/elements.less b/styles/less/global/elements.less
index 3d913b3b..7af8becd 100755
--- a/styles/less/global/elements.less
+++ b/styles/less/global/elements.less
@@ -12,8 +12,8 @@
         box-shadow: 0 4px 30px @soft-shadow;
         backdrop-filter: blur(9.5px);
         outline: 2px solid transparent;
-        color: @input-text-color;
-        border: 1px solid @input-border-color;
+        color: @input-color-text;
+        border: 1px solid @input-color-border;
         transition: all 0.3s ease;
 
         &::placeholder {
@@ -28,7 +28,7 @@
         &:focus[type='number'] {
             background: light-dark(@soft-shadow, @semi-transparent-dark-blue);
             box-shadow: none;
-            outline: 2px solid @input-border-color;
+            outline: 2px solid @input-color-border;
         }
 
         &:disabled[type='text'],
diff --git a/styles/less/utils/colors.less b/styles/less/utils/colors.less
index 80752577..f8ce4849 100755
--- a/styles/less/utils/colors.less
+++ b/styles/less/utils/colors.less
@@ -88,7 +88,8 @@
 /** 
  * Override core foundry color variables in theme scopes, and add some new theme specific variants.
  * These are intended to be more representative of its use case, so avoid naming these after the color.
- * Heavily scoped foundry variables (such as input-border-color, which is defined inside input) instead get a prefix.
+ * Some foundry variables are heavily scoped and we need to redefine them (https://github.com/foundryvtt/foundryvtt/issues/12893)
+ * Convention for the redefined ones is --dh-{element}-color-{thing}
  */
 @scope (.theme-light) to (.themed) {
     .dh-style :scope,
@@ -100,8 +101,8 @@
         --color-text-emphatic: @dark-blue;
         --color-text-subtle: #555;
 
-        --dh-input-border-color: @dark;
-        --dh-input-text-color: @dark;
+        --dh-input-color-border: @dark;
+        --dh-input-color-text: @dark;
     }
 }
 @scope (.theme-dark) to (.themed) {  
@@ -114,8 +115,8 @@
         --color-text-emphatic: @golden;
         --color-text-subtle: #a29086;
 
-        --dh-input-border-color: @beige;
-        --dh-input-text-color: @beige;
+        --dh-input-color-border: @beige;
+        --dh-input-color-text: @beige;
     }
 }
 
@@ -231,5 +232,5 @@
 @color-text-emphatic: var(--color-text-emphatic);
 @color-text-primary: var(--color-text-primary);
 @color-text-subtle: var(--color-text-subtle);
-@input-border-color: var(--dh-input-border-color);
-@input-text-color: var(--dh-input-text-color);
\ No newline at end of file
+@input-color-border: var(--dh-input-color-border);
+@input-color-text: var(--dh-input-color-text);
\ No newline at end of file
diff --git a/styles/less/utils/mixin.less b/styles/less/utils/mixin.less
index a8527e68..f2d31232 100644
--- a/styles/less/utils/mixin.less
+++ b/styles/less/utils/mixin.less
@@ -50,7 +50,7 @@
  */
 .dh-typography() {
     h1 {
-        --dh-input-text-color: @color-text-emphatic;
+        --dh-input-color-text: @color-text-emphatic;
         font-family: @font-title;
         margin: 0;
         border: none;