From 9abb1a079ac305d4faa32d9668e295ce511573f0 Mon Sep 17 00:00:00 2001 From: btea <2356281422@qq.com> Date: Fri, 4 Sep 2026 12:41:02 +0800 Subject: [PATCH 1/6] fix: correct the code style in the hover status --- .../ui-components/src/Common/ChangeHistory/index.module.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/ui-components/src/Common/ChangeHistory/index.module.css b/packages/ui-components/src/Common/ChangeHistory/index.module.css index 0fbfc01add394..7e495b7f06fe5 100644 --- a/packages/ui-components/src/Common/ChangeHistory/index.module.css +++ b/packages/ui-components/src/Common/ChangeHistory/index.module.css @@ -67,6 +67,10 @@ @apply bg-brand-600 text-white!; } + + :where([data-theme='light'], [data-theme='light'] *) &:hover code { + color: var(--color-brand-900); + } } .dropdownLabel { From 98808218f767d6b63254142fcd856dc1533212cb Mon Sep 17 00:00:00 2001 From: btea <2356281422@qq.com> Date: Fri, 4 Sep 2026 12:56:17 +0800 Subject: [PATCH 2/6] Refactor hover and focus styles for light theme Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Signed-off-by: btea <2356281422@qq.com> --- .../ui-components/src/Common/ChangeHistory/index.module.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/ui-components/src/Common/ChangeHistory/index.module.css b/packages/ui-components/src/Common/ChangeHistory/index.module.css index 7e495b7f06fe5..dae4edcd6728a 100644 --- a/packages/ui-components/src/Common/ChangeHistory/index.module.css +++ b/packages/ui-components/src/Common/ChangeHistory/index.module.css @@ -68,9 +68,8 @@ text-white!; } - :where([data-theme='light'], [data-theme='light'] *) &:hover code { - color: var(--color-brand-900); - } +:where([data-theme='light'], [data-theme='light'] *) &:is(:hover, :focus-visible) code { + color: var(--color-brand-900); } .dropdownLabel { From f19b0f5d9f03971960662c3f1d514c1e5d7d2393 Mon Sep 17 00:00:00 2001 From: btea <2356281422@qq.com> Date: Fri, 4 Sep 2026 16:59:24 +0800 Subject: [PATCH 3/6] style: update --- .../src/Common/ChangeHistory/index.module.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/ui-components/src/Common/ChangeHistory/index.module.css b/packages/ui-components/src/Common/ChangeHistory/index.module.css index dae4edcd6728a..3e44d73aaa759 100644 --- a/packages/ui-components/src/Common/ChangeHistory/index.module.css +++ b/packages/ui-components/src/Common/ChangeHistory/index.module.css @@ -68,8 +68,12 @@ text-white!; } -:where([data-theme='light'], [data-theme='light'] *) &:is(:hover, :focus-visible) code { - color: var(--color-brand-900); + /* 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 { From 7cb046212027a0944e45a5f71ee1347c93efd457 Mon Sep 17 00:00:00 2001 From: btea <2356281422@qq.com> Date: Fri, 4 Sep 2026 18:45:42 +0800 Subject: [PATCH 4/6] fix: update --- packages/ui-components/.storybook/preview.tsx | 2 +- .../Common/ChangeHistory/index.stories.tsx | 23 ++++++++++++++----- 2 files changed, 18 insertions(+), 7 deletions(-) diff --git a/packages/ui-components/.storybook/preview.tsx b/packages/ui-components/.storybook/preview.tsx index e4e421bb930e0..9799d28af0615 100644 --- a/packages/ui-components/.storybook/preview.tsx +++ b/packages/ui-components/.storybook/preview.tsx @@ -16,7 +16,7 @@ const preview: Preview = { decorators: [ withThemeByDataAttribute({ - themes: { light: '', dark: 'dark' }, + themes: { light: 'light', dark: 'dark' }, defaultTheme: 'light', attributeName: 'data-theme', }), diff --git a/packages/ui-components/src/Common/ChangeHistory/index.stories.tsx b/packages/ui-components/src/Common/ChangeHistory/index.stories.tsx index 9845ff0f419d8..78c6dd786c0f8 100644 --- a/packages/ui-components/src/Common/ChangeHistory/index.stories.tsx +++ b/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: v15.0.0, v14.17.0 + + ), url: 'https://github.com/nodejs/node/pull/67890', }, { @@ -107,9 +112,13 @@ const LARGE_SAMPLE_CHANGES = [ export const Default: Story = { render: args => ( -
- -
+ // `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:85 +
+
+ +
+
), args: { changes: SAMPLE_CHANGES, @@ -118,9 +127,11 @@ export const Default: Story = { export const LargeHistory: Story = { render: args => ( -
- -
+
+
+ +
+
), args: { changes: LARGE_SAMPLE_CHANGES, From 5fc285ae72e4b4e5ea8a386fad2199cdf2b14901 Mon Sep 17 00:00:00 2001 From: btea <2356281422@qq.com> Date: Sat, 5 Sep 2026 08:28:16 +0800 Subject: [PATCH 5/6] chore: add changeset --- .changeset/crisp-socks-call.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/crisp-socks-call.md diff --git a/.changeset/crisp-socks-call.md b/.changeset/crisp-socks-call.md new file mode 100644 index 0000000000000..c5887082ccc90 --- /dev/null +++ b/.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. From 6cca73c91e63935b4015c3a6839c52b87e89a50c Mon Sep 17 00:00:00 2001 From: btea <2356281422@qq.com> Date: Sat, 5 Sep 2026 10:26:13 +0800 Subject: [PATCH 6/6] chore: update comment --- .../ui-components/src/Common/ChangeHistory/index.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-components/src/Common/ChangeHistory/index.stories.tsx b/packages/ui-components/src/Common/ChangeHistory/index.stories.tsx index 78c6dd786c0f8..62140b4ed62c2 100644 --- a/packages/ui-components/src/Common/ChangeHistory/index.stories.tsx +++ b/packages/ui-components/src/Common/ChangeHistory/index.stories.tsx @@ -113,7 +113,7 @@ const LARGE_SAMPLE_CHANGES = [ export const Default: Story = { render: args => ( // `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:85 + // `code` styles under `main`, which is what the hover fix interacts with /ui-components/src/styles/markdown.css