From 178e8a3c03a70551f978210850ba52a332b6d2fe Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Mon, 25 May 2026 04:13:58 +0200
Subject: [PATCH] refactor(frontend): switch shared components CSS to AntD CSS
 variables

Replace body.dark / html[data-theme] forks with AntD CSS variables
in shared components (work in both light and dark, scale to ultra):
- SettingListItem: borders + text colours via
  `--ant-color-border-secondary`, `--ant-color-text`,
  `--ant-color-text-tertiary`.
- InputAddon: bg/border/text via `--ant-color-fill-tertiary`,
  `--ant-color-border`, `--ant-color-text`.
- JsonEditor: host border/bg via `--ant-color-border`,
  `--ant-color-bg-container`; focus border via `--ant-color-primary`.
- Sparkline (SVG): grid/text colours via `--ant-color-text*`
  and `--ant-color-border-secondary`; only the tooltip drop-shadow
  retains a body.dark fork (filter opacity needs explicit value).
---
 frontend/src/components/InputAddon.css      | 13 +++----------
 frontend/src/components/JsonEditor.css      | 16 +++-------------
 frontend/src/components/SettingListItem.css | 21 +++------------------
 frontend/src/components/Sparkline.css       | 19 +++----------------
 4 files changed, 12 insertions(+), 57 deletions(-)

diff --git a/frontend/src/components/InputAddon.css b/frontend/src/components/InputAddon.css
index e8544941..10a6dca0 100644
--- a/frontend/src/components/InputAddon.css
+++ b/frontend/src/components/InputAddon.css
@@ -5,22 +5,15 @@
   height: 32px;
   font-size: 14px;
   line-height: 30px;
-  background-color: rgba(0, 0, 0, 0.02);
-  border: 1px solid #d9d9d9;
+  background-color: var(--ant-color-fill-tertiary);
+  border: 1px solid var(--ant-color-border);
   border-radius: 6px;
   position: relative;
   z-index: 1;
-  color: rgba(0, 0, 0, 0.88);
+  color: var(--ant-color-text);
   white-space: nowrap;
 }
 
-body.dark .input-addon,
-html[data-theme='ultra-dark'] .input-addon {
-  background-color: rgba(255, 255, 255, 0.04);
-  border-color: #424242;
-  color: rgba(255, 255, 255, 0.85);
-}
-
 .ant-space-compact > .input-addon:not(:first-child) {
   margin-inline-start: -1px;
 }
diff --git a/frontend/src/components/JsonEditor.css b/frontend/src/components/JsonEditor.css
index e7e0c320..cfff28d3 100644
--- a/frontend/src/components/JsonEditor.css
+++ b/frontend/src/components/JsonEditor.css
@@ -1,8 +1,8 @@
 .json-editor-host {
-  border: 1px solid var(--ant-color-border, #d9d9d9);
+  border: 1px solid var(--ant-color-border);
   border-radius: 6px;
   overflow: hidden;
-  background: var(--ant-color-bg-container, #fff);
+  background: var(--ant-color-bg-container);
 }
 
 .json-editor-host .cm-editor,
@@ -11,16 +11,6 @@
 }
 
 .json-editor-host:focus-within {
-  border-color: var(--ant-color-primary, #1677ff);
+  border-color: var(--ant-color-primary);
   box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1);
 }
-
-body.dark .json-editor-host {
-  border-color: #3a3a3c;
-  background: #1e1e1e;
-}
-
-html[data-theme="ultra-dark"] .json-editor-host {
-  border-color: #1f1f1f;
-  background: #0a0a0a;
-}
diff --git a/frontend/src/components/SettingListItem.css b/frontend/src/components/SettingListItem.css
index 2f024eda..df9b4dfe 100644
--- a/frontend/src/components/SettingListItem.css
+++ b/frontend/src/components/SettingListItem.css
@@ -2,18 +2,13 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-bottom: 1px solid rgba(5, 5, 5, 0.06);
+  border-bottom: 1px solid var(--ant-color-border-secondary);
 }
 
 .setting-list-item:last-child {
   border-bottom: 0;
 }
 
-body.dark .setting-list-item,
-html[data-theme='ultra-dark'] .setting-list-item {
-  border-bottom-color: rgba(255, 255, 255, 0.08);
-}
-
 .setting-list-meta {
   display: flex;
   flex-direction: column;
@@ -22,22 +17,12 @@ html[data-theme='ultra-dark'] .setting-list-item {
 
 .setting-list-title {
   font-size: 14px;
-  color: rgba(0, 0, 0, 0.88);
+  color: var(--ant-color-text);
   font-weight: 500;
 }
 
 .setting-list-description {
   font-size: 14px;
-  color: rgba(0, 0, 0, 0.45);
+  color: var(--ant-color-text-tertiary);
   line-height: 1.5715;
 }
-
-body.dark .setting-list-title,
-html[data-theme='ultra-dark'] .setting-list-title {
-  color: rgba(255, 255, 255, 0.85);
-}
-
-body.dark .setting-list-description,
-html[data-theme='ultra-dark'] .setting-list-description {
-  color: rgba(255, 255, 255, 0.45);
-}
diff --git a/frontend/src/components/Sparkline.css b/frontend/src/components/Sparkline.css
index ad0e012c..51c91ee0 100644
--- a/frontend/src/components/Sparkline.css
+++ b/frontend/src/components/Sparkline.css
@@ -5,17 +5,17 @@
 
 .sparkline-svg .cpu-grid-y-text,
 .sparkline-svg .cpu-grid-x-text {
-  fill: rgba(0, 0, 0, 0.55);
+  fill: var(--ant-color-text-tertiary);
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   letter-spacing: 0.2px;
 }
 
 .sparkline-svg .cpu-grid-text {
-  fill: rgba(0, 0, 0, 0.88);
+  fill: var(--ant-color-text);
 }
 
 .sparkline-svg .cpu-grid-line {
-  stroke: rgba(0, 0, 0, 0.08);
+  stroke: var(--ant-color-border-secondary);
 }
 
 .sparkline-svg .cpu-tooltip-text {
@@ -26,19 +26,6 @@
   filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
 }
 
-body.dark .sparkline-svg .cpu-grid-y-text,
-body.dark .sparkline-svg .cpu-grid-x-text {
-  fill: rgba(255, 255, 255, 0.7);
-}
-
-body.dark .sparkline-svg .cpu-grid-text {
-  fill: rgba(255, 255, 255, 0.95);
-}
-
-body.dark .sparkline-svg .cpu-grid-line {
-  stroke: rgba(255, 255, 255, 0.10);
-}
-
 body.dark .sparkline-svg .cpu-tooltip-pill {
   filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
 }