fix: palette hover text contrast

Replace inline platformColor styles with CSS custom properties and fix hover text color regression.

Author: samson1299

css/activities.css

@@ -1210,7 +1210,6 @@ table {
     color: var(--color-text-inverse);
     font-size: 1.1em;
     text-align: center;
-    height: 55px;
 }
 
 .close-button {
@@ -2050,9 +2049,20 @@ table {
     border: 0;
 }
 
-#palette th:hover,
-#palette tr:hover {
-    background-color: rgba(211, 211, 211, 0.7);
+#palette tr.palette-row {
+    background-color: var(--color-palette-bg);
+}
+
+#palette tr.palette-row .palette-row-label {
+    color: var(--color-palette-text);
+}
+
+#palette tr.palette-row.palette-row--hover {
+    background-color: var(--color-palette-hover-bg);
+}
+
+#palette tr.palette-row.palette-row--hover .palette-row-label {
+    color: var(--color-palette-text-hover);
 }
 
 #printText {

css/tokens.css

@@ -7,6 +7,11 @@
     /* =========================================================================
      Base Colors (Light Theme Default)
      ========================================================================= */
+    --color-palette-bg: #ffffff;
+    --color-palette-text: #666666;
+    --color-palette-hover-bg: #e0e0e0;
+    --color-palette-text-hover: #000000;
+
     --color-bg-primary: #ffffff;
     --color-bg-secondary: #f3f4f6;
     --color-bg-tertiary: #e5e7eb;
@@ -41,12 +46,18 @@
     /* =========================================================================
      Spacing (Base 4px scale)
      ========================================================================= */
-    --spacing-xs: 0.25rem; /* 4px */
-    --spacing-sm: 0.5rem; /* 8px */
-    --spacing-md: 1rem; /* 16px */
-    --spacing-lg: 1.5rem; /* 24px */
-    --spacing-xl: 2rem; /* 32px */
-    --spacing-2xl: 3rem; /* 48px */
+    --spacing-xs: 0.25rem;
+    /* 4px */
+    --spacing-sm: 0.5rem;
+    /* 8px */
+    --spacing-md: 1rem;
+    /* 16px */
+    --spacing-lg: 1.5rem;
+    /* 24px */
+    --spacing-xl: 2rem;
+    /* 32px */
+    --spacing-2xl: 3rem;
+    /* 48px */
 
     /* =========================================================================
      Typography
@@ -58,12 +69,18 @@
         ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
         monospace;
 
-    --font-size-xs: 0.75rem; /* 12px */
-    --font-size-sm: 0.875rem; /* 14px */
-    --font-size-md: 1rem; /* 16px */
-    --font-size-lg: 1.125rem; /* 18px */
-    --font-size-xl: 1.25rem; /* 20px */
-    --font-size-2xl: 1.5rem; /* 24px */
+    --font-size-xs: 0.75rem;
+    /* 12px */
+    --font-size-sm: 0.875rem;
+    /* 14px */
+    --font-size-md: 1rem;
+    /* 16px */
+    --font-size-lg: 1.125rem;
+    /* 18px */
+    --font-size-xl: 1.25rem;
+    /* 20px */
+    --font-size-2xl: 1.5rem;
+    /* 24px */
 
     --font-weight-normal: 400;
     --font-weight-medium: 500;
@@ -77,11 +94,16 @@
     /* =========================================================================
      Border Radius
      ========================================================================= */
-    --radius-sm: 0.25rem; /* 4px */
-    --radius-md: 0.375rem; /* 6px */
-    --radius-lg: 0.5rem; /* 8px */
-    --radius-xl: 0.75rem; /* 12px */
-    --radius-full: 9999px; /* Pill shape */
+    --radius-sm: 0.25rem;
+    /* 4px */
+    --radius-md: 0.375rem;
+    /* 6px */
+    --radius-lg: 0.5rem;
+    /* 8px */
+    --radius-xl: 0.75rem;
+    /* 12px */
+    --radius-full: 9999px;
+    /* Pill shape */
 
     /* =========================================================================
      Shadows
@@ -96,6 +118,11 @@
    Dark Theme
    ========================================================================== */
 body.dark {
+    --color-palette-bg: #1c1c1c;
+    --color-palette-text: #bdbdbd;
+    --color-palette-hover-bg: #808080;
+    --color-palette-text-hover: #ffffff;
+
     --color-bg-primary: #111827;
     --color-bg-secondary: #1f2937;
     --color-bg-tertiary: #374151;
@@ -132,6 +159,11 @@ body.dark {
    High-Contrast Theme
    ========================================================================== */
 body.highcontrast {
+    --color-palette-bg: #000000;
+    --color-palette-text: #ffffff;
+    --color-palette-hover-bg: #666666;
+    --color-palette-text-hover: #ffffff;
+
     --color-bg-primary: #000000;
     --color-bg-secondary: #000000;
     --color-bg-tertiary: #000000;

js/palette.js

@@ -888,33 +888,31 @@ class Palettes {
         const row = listBody.insertRow(-1);
         const img = row.insertCell(-1);
         const label = row.insertCell(-1);
+        row.classList.add("palette-row");
+        label.classList.add("palette-row-label");
         img.appendChild(icon);
         img.style.padding = "4px";
         img.style.boxSizing = "content-box";
         img.style.width = `${this.cellSize}px`;
         img.style.height = `${this.cellSize}px`;
         label.textContent = toTitleCase(_(name));
-        label.style.color = platformColor.paletteText;
         row.style.borderBottom = "1px solid #0CAFFF";
         label.style.fontSize = localStorage.kanaPreference === "kana" ? "12px" : "16px";
         label.style.padding = "4px";
         row.style.display = "flex";
         row.style.flexDirection = "row";
         row.style.alignItems = "center";
         row.style.width = "126px";
-        row.style.backgroundColor = platformColor.paletteBackground;
 
         // Mouse hover - only work if not in keyboard navigation mode
         row.addEventListener("mouseover", () => {
             if (!this._keyboardNavActive && !row.dataset.keyboardFocus) {
-                row.style.backgroundColor = platformColor.hoverColor;
-                label.style.color = platformColor.hoverText;
+                row.classList.add("palette-row--hover");
             }
         });
         row.addEventListener("mouseout", () => {
             if (!row.dataset.keyboardFocus) {
-                row.style.backgroundColor = platformColor.paletteBackground;
-                label.style.color = platformColor.paletteText;
+                row.classList.remove("palette-row--hover");
             }
         });
 
@@ -931,6 +929,8 @@ class Palettes {
         const row = listBody.insertRow(-1);
         const img = row.insertCell(-1);
         const label = row.insertCell(-1);
+        row.classList.add("palette-row");
+        label.classList.add("palette-row-label");
         img.appendChild(icon);
         img.style.padding = "4px";
         img.style.boxSizing = "content-box";
@@ -943,17 +943,16 @@ class Palettes {
         row.style.flexDirection = "row";
         row.style.alignItems = "center";
         row.style.width = "126px";
-        row.style.backgroundColor = platformColor.paletteBackground;
 
         // Mouse hover - only work if not in keyboard navigation mode
         row.addEventListener("mouseover", () => {
             if (!this._keyboardNavActive && !row.dataset.keyboardFocus) {
-                row.style.backgroundColor = platformColor.hoverColor;
+                row.classList.add("palette-row--hover");
             }
         });
         row.addEventListener("mouseout", () => {
             if (!row.dataset.keyboardFocus) {
-                row.style.backgroundColor = platformColor.paletteBackground;
+                row.classList.remove("palette-row--hover");
             }
         });