From 0ad854d92f81c7ef7eded3e36d21d18f05ee23b3 Mon Sep 17 00:00:00 2001
From: kyuketski <qt.ireuo@yandex.com>
Date: Sun, 31 Aug 2025 22:56:36 +0300
Subject: [PATCH] fix(ui): ensure number inputs are visible in light theme

- Replace `wplace-random-batch-input` and `wplace-block-size-input` classes with `wplace-settings-number-input`.
- Update CSS to consolidate styles under `wplace-settings-number-input`.
- Refactor theme variables for background and border colors to use explicit hex values, fixing visibility issue in light theme.
- Remove redundant `.wplace-block-size-input` styles.

Benefits:
- Number inputs are now correctly visible in all themes, including light.
- Reduces duplication in CSS by consolidating input styles.
- Improves consistency across input elements in the UI.
- Enhances clarity of theme variable usage with explicit naming.

Note:
- Ensure all components previously using `wplace-random-batch-input` or `wplace-block-size-input` are tested for visual consistency.
---
 Auto-Image.js            |  8 ++++----
 auto-image-styles.css    | 15 ++-------------
 themes/classic-light.css | 22 +++++++++++-----------
 3 files changed, 17 insertions(+), 28 deletions(-)

diff --git a/Auto-Image.js b/Auto-Image.js
index 3e80dcd..96eefee 100644
--- a/Auto-Image.js
+++ b/Auto-Image.js
@@ -3744,14 +3744,14 @@
                   <i class="fas fa-arrow-down wplace-icon-min"></i>
                   Minimum Batch Size
                 </label>
-                <input type="number" id="randomBatchMin" min="1" max="1000" value="${CONFIG.RANDOM_BATCH_RANGE.MIN}" class="wplace-random-batch-input">
+                <input type="number" id="randomBatchMin" min="1" max="1000" value="${CONFIG.RANDOM_BATCH_RANGE.MIN}" class="wplace-settings-number-input">
               </div>
               <div>
                 <label class="wplace-random-batch-label">
                   <i class="fas fa-arrow-up wplace-icon-max"></i>
                   Maximum Batch Size
                 </label>
-                <input type="number" id="randomBatchMax" min="1" max="1000" value="${CONFIG.RANDOM_BATCH_RANGE.MAX}" class="wplace-random-batch-input">
+                <input type="number" id="randomBatchMax" min="1" max="1000" value="${CONFIG.RANDOM_BATCH_RANGE.MAX}" class="wplace-settings-number-input">
               </div>
             </div>
             <p class="wplace-random-batch-description">
@@ -3832,14 +3832,14 @@
                   <i class="fas fa-arrows-alt-h wplace-icon-width"></i>
                   Block Width
                 </label>
-                <input type="number" id="blockWidthInput" min="1" max="50" value="6" class="wplace-block-size-input">
+                <input type="number" id="blockWidthInput" min="1" max="50" value="6" class="wplace-settings-number-input">
               </div>
               <div>
                 <label style="display: block; color: rgba(255,255,255,0.8); font-size: 12px; margin-bottom: 8px;">
                   <i class="fas fa-arrows-alt-v wplace-icon-height"></i>
                   Block Height
                 </label>
-                <input type="number" id="blockHeightInput" min="1" max="50" value="2" class="wplace-block-size-input">
+                <input type="number" id="blockHeightInput" min="1" max="50" value="2" class="wplace-settings-number-input">
               </div>
             </div>
             <p class="wplace-block-size-description">
diff --git a/auto-image-styles.css b/auto-image-styles.css
index 896ade6..480c805 100644
--- a/auto-image-styles.css
+++ b/auto-image-styles.css
@@ -1289,10 +1289,10 @@
   margin-right: 4px;
 }
 
-.wplace-random-batch-input {
+.wplace-settings-number-input {
   width: 100%;
   padding: 10px 12px;
-  background: var(--wplace-bg-subtle);
+  background: var(--wplace-bg-input);
   color: var(--wplace-text);
   border: 1px solid var(--wplace-border-subtle);
   border-radius: 8px;
@@ -1883,17 +1883,6 @@
   margin-right: 4px;
 }
 
-.wplace-block-size-input {
-  width: 100%;
-  padding: 10px 12px;
-  background: var(--wplace-bg-subtle);
-  color: var(--wplace-text);
-  border: 1px solid var(--wplace-border-subtle);
-  border-radius: 8px;
-  font-size: 13px;
-  outline: none;
-}
-
 .wplace-block-size-description {
   font-size: 11px;
   color: var(--wplace-text-dim);
diff --git a/themes/classic-light.css b/themes/classic-light.css
index 4f4fbcb..3761527 100644
--- a/themes/classic-light.css
+++ b/themes/classic-light.css
@@ -41,19 +41,19 @@
   --wplace-text-muted: rgb(33 37 41 / 70%);
   --wplace-text-dim: rgb(33 37 41 / 60%);
   --wplace-text-faded: rgb(33 37 41 / 80%);
-  
+
   /* Background variants */
-  --wplace-bg-input: rgb(0 0 0 / 8%);
-  --wplace-bg-subtle: rgb(0 0 0 / 5%);
-  --wplace-bg-faint: rgb(0 0 0 / 3%);
-  --wplace-bg-ghost: rgb(0 0 0 / 2%);
-  --wplace-bg-whisper: rgb(0 0 0 / 1%);
-  
+  --wplace-bg-input:     #f3f3f3; /* neutral-100 */
+  --wplace-bg-subtle:    #f3f3f3; /* neutral-100 — hover */
+  --wplace-bg-faint:     #e0e0e0; /* neutral-200 */
+  --wplace-bg-ghost:     #d1d1d1; /* neutral-300 */
+  --wplace-bg-whisper:   #e0e0e0; /* can be used as whisper on hover */
+
   /* Border variants */
-  --wplace-border-subtle: rgb(0 0 0 / 20%);
-  --wplace-border-faint: rgb(0 0 0 / 15%);
-  --wplace-border-ghost: rgb(0 0 0 / 10%);
-  --wplace-border-ultra-faint: rgb(0 0 0 / 5%);
+  --wplace-border-subtle:      #d1d1d1; /* neutral-300 */
+  --wplace-border-faint:       #e0e0e0; /* neutral-200 */
+  --wplace-border-ghost:       #e0e0e0; /* neutral-200 */
+  --wplace-border-ultra-faint: #e0e0e0; /* neutral-200 — very faint */
   
   /* Shadow variants */
   --wplace-shadow-drag: 0 12px 40px rgb(0 0 0 / 20%), 0 0 0 2px rgb(111 66 193 / 30%);