fix: correct the code style in the hover status (#9142)

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Claudio Wunder <cwunder@gnome.org>
Signed-off-by: btea <2356281422@qq.com>

Author: 3 people

.changeset/crisp-socks-call.md

@@ -0,0 +1,5 @@
+---
+'@node-core/ui-components': patch
+---
+
+In the light theme, the background color of items in the history change component that contain code elements is incorrect when hovering.

packages/ui-components/.storybook/preview.tsx

@@ -16,7 +16,7 @@ const preview: Preview = {
 
   decorators: [
     withThemeByDataAttribute<ReactRenderer>({
-      themes: { light: '', dark: 'dark' },
+      themes: { light: 'light', dark: 'dark' },
       defaultTheme: 'light',
       attributeName: 'data-theme',
     }),

packages/ui-components/src/Common/ChangeHistory/index.module.css

@@ -68,6 +68,13 @@
     @apply bg-brand-600
       text-white!;
   }
+
+  /* Keep inline `code` readable in light theme, where hover/focus turns text white */
+  :where([data-theme='light'], [data-theme='light'] *)
+    &:is(:hover, :focus-visible)
+    code {
+    @apply text-brand-900;
+  }
 }
 
 .dropdownLabel {

packages/ui-components/src/Common/ChangeHistory/index.stories.tsx

@@ -14,6 +14,11 @@ const SAMPLE_CHANGES = [
   {
     versions: ['v15.0.0', 'v14.17.0'],
     label: 'Added in v15.0.0, v14.17.0',
+    content: (
+      <>
+        Added in: <code>v15.0.0</code>, <code>v14.17.0</code>
+      </>
+    ),
     url: 'https://github.com/nodejs/node/pull/67890',
   },
   {
@@ -107,9 +112,13 @@ const LARGE_SAMPLE_CHANGES = [
 
 export const Default: Story = {
   render: args => (
-    <div className="right-0 flex justify-end">
-      <ChangeHistory {...args} />
-    </div>
+    // `main` reproduces the docs page context: markdown.css scopes inline
+    // `code` styles under `main`, which is what the hover fix interacts with /ui-components/src/styles/markdown.css
+    <main>
+      <div className="flex justify-end">
+        <ChangeHistory {...args} />
+      </div>
+    </main>
   ),
   args: {
     changes: SAMPLE_CHANGES,
@@ -118,9 +127,11 @@ export const Default: Story = {
 
 export const LargeHistory: Story = {
   render: args => (
-    <div className="right-0 flex justify-end">
-      <ChangeHistory {...args} />
-    </div>
+    <main>
+      <div className="flex justify-end">
+        <ChangeHistory {...args} />
+      </div>
+    </main>
   ),
   args: {
     changes: LARGE_SAMPLE_CHANGES,