fix: use semantic color tokens in markdown fallback styles

What does this MR do?

Fixes part of gitlab#587563 (closed) (Duo Chat markdown previews have poor contrast in dark mode).

1. Semantic color tokens in the .duo-chat-markdown fallback stylesheet

duo_chat.scss and agentic_duo_chat.scss both ship a fallback stylesheet applied when the host app does not provide its own markdown renderer or class. It used hardcoded light-mode values ($gl-text-color, $gray-100, gl-bg-gray-50, gl-bg-white, etc.) that do not adapt to dark mode.

Replaced with semantic tokens that resolve per color mode:

  • gl-text-default, gl-text-subtle for text
  • gl-bg-strong, gl-bg-subtle, gl-bg-transparent for backgrounds
  • var(--gl-border-color-default) for box-shadow-based borders on blockquotes, tables, and pre
  • Explicit gl-bg-subtle background added to pre

2. Let pre own the code block background

Highlight.js themes (a11y-light in Storybook, solarized/monokai/dracula in GitLab) set a fixed-hex background and padding on .hljs, which draws a second visible box inside the pre. Added .duo-message-pre-block code.hljs { background: transparent !important; padding: 0 !important; } in duo_chat_message.scss so the pre owns the background. !important is required because theme selectors such as .gl-dark pre code.hljs have higher specificity than ours.

pre_block.vue also receives gl-bg-subtle; its spec is updated to match.

3. Storybook dark-mode syntax highlight theme

Storybook always loaded highlight.js a11y-light, which assumes a light background and is unreadable under .gl-dark. A new .storybook/highlight-themes.scss scopes a11y-light to the default (light) context and a11y-dark under .gl-dark. It is imported from .storybook/preview.js.

Screenshots or screen recordings

Light (Storybook) Dark (Storybook)
CleanShot 2026-09-15 at 14.46.49.png CleanShot 2026-09-15 at 14.46.20.png

Integration merge requests

  • GitLab: no integration MR required (no API change).

Does this MR meet the acceptance criteria?

See template checklist.

Related to gitlab#587563 (closed)

Edited by Chaoyue Zhao

Merge request reports

Loading
Loading