(superset) branch fix-sqllab-dark-selected-word created (now 5c37d178f80)

[jl...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

sadpandajoe pushed a change to branch fix-sqllab-dark-selected-word
in repository https://gitbox.apache.org/repos/asf/superset.git


      at 5c37d178f80 fix(sqllab): make dark-theme occurrence highlight readable

This branch includes the following new commits:

     new 5c37d178f80 fix(sqllab): make dark-theme occurrence highlight readable

The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.

(superset) 01/01: fix(sqllab): make dark-theme occurrence highlight readable

[jl...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

sadpandajoe pushed a commit to branch fix-sqllab-dark-selected-word
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 5c37d178f808c639e7462e1ef4a01e976efcdcf0
Author: sadpandajoe <jc...@gmail.com>
AuthorDate: Thu Jul 23 23:38:19 2026 +0000

    fix(sqllab): make dark-theme occurrence highlight readable
    
    The Ace editor uses the light github theme with token-based CSS overrides
    for dark mode, but .ace_selected-word (the marker on every other occurrence
    of a selected token) was left at the theme default near-white box. In dark
    mode the recolored token glyphs became unreadable on it.
    
    Override .ace_selected-word to reuse the dark-aware colorEditorSelection
    token, mirroring the existing .ace_selection and completion-highlight
    overrides. Light theme is unaffected.
    
    Co-Authored-By: Claude Opus 4.8 <no...@anthropic.com>
---
 .../components/AsyncAceEditor/AsyncAceEditor.test.tsx  | 14 ++++++++++++++
 .../src/components/AsyncAceEditor/index.tsx            | 18 ++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/superset-frontend/packages/superset-ui-core/src/components/AsyncAceEditor/AsyncAceEditor.test.tsx b/superset-frontend/packages/superset-ui-core/src/components/AsyncAceEditor/AsyncAceEditor.test.tsx
index 646c1f3bd8a..9e40c0f29cd 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/AsyncAceEditor/AsyncAceEditor.test.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/AsyncAceEditor/AsyncAceEditor.test.tsx
@@ -30,6 +30,7 @@ import {
   JsonEditor,
   ConfigEditor,
   aceCompletionHighlightStyles,
+  aceSelectedWordStyles,
 } from '.';
 
 import type { AceModule, AsyncAceEditorOptions } from './types';
@@ -55,6 +56,19 @@ test('themes the autocomplete completion highlight from the theme', () => {
   expect(styles).toContain(supersetTheme.colorPrimaryText);
 });
 
+test('themes the selected-word occurrence markers from the theme', () => {
+  // The light `github` theme hardcodes a near-white box for the markers Ace
+  // paints on every other occurrence of the selected token, which makes the
+  // recolored token glyphs unreadable in dark mode. The shared editor overrides
+  // the marker to reuse the dark-aware selection color so it stays legible.
+  const { styles } = aceSelectedWordStyles(supersetTheme);
+
+  expect(styles).toContain('.ace_selected-word');
+  expect(styles).toContain(
+    supersetTheme.colorEditorSelection ?? supersetTheme.colorPrimaryBgHover,
+  );
+});
+
 test('SQLEditor uses fontFamilyCode from theme', async () => {
   const ref = createRef<AceEditor>();
   const { container } = render(<SQLEditor ref={ref as React.Ref<never>} />);
diff --git a/superset-frontend/packages/superset-ui-core/src/components/AsyncAceEditor/index.tsx b/superset-frontend/packages/superset-ui-core/src/components/AsyncAceEditor/index.tsx
index 425db253f89..97f2fcded80 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/AsyncAceEditor/index.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/AsyncAceEditor/index.tsx
@@ -126,6 +126,22 @@ export const aceCompletionHighlightStyles = (token: SupersetTheme) => css`
   }
 `;
 
+/**
+ * Theme-aware styling for the "selected word" markers Ace paints on every other
+ * occurrence of the currently selected token. The light `github` theme hardcodes
+ * a near-white box (`rgb(250,250,255)`); in dark mode the recolored token glyphs
+ * sit on it unreadably. Reuse the same dark-aware selection color as
+ * `.ace_selection` so the markers stay legible in every theme.
+ */
+export const aceSelectedWordStyles = (token: SupersetTheme) => css`
+  .ace_editor .ace_marker-layer .ace_selected-word {
+    background-color: ${
+      token.colorEditorSelection ?? token.colorPrimaryBgHover
+    } !important;
+    border: 1px solid ${token.colorBorder} !important;
+  }
+`;
+
 /**
  * Get an async AceEditor with automatical loading of specified ace modules.
  */
@@ -394,6 +410,8 @@ export function AsyncAceEditor(
                   } !important;
                 }
 
+                ${aceSelectedWordStyles(token)}
+
                 /* Improve active line highlighting */
                 .ace_editor .ace_active-line {
                   background-color: ${token.colorPrimaryBg} !important;