From 28201bfe30b7f70c3bd4a139917798c32aecdf78 Mon Sep 17 00:00:00 2001
From: Aaron Powell <me@aaron-powell.com>
Date: Mon, 17 Aug 2026 14:12:23 +1000
Subject: [PATCH] style(website): soften catalog filter list scrollbars

The filter option lists only set scrollbar-width: thin, so they rendered
the platform default scrollbar. They now use the same muted, transparent
track treatment as the article sidebar, which resolves through
--brand-color-border-muted in both colour modes.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 80686fef-efe3-4cdd-8cd6-bfa61a5d0af6
---
 .../components/brand/styles/agents.module.css    | 16 ++++++++++++++++
 .../brand/styles/extensions.module.css           | 16 ++++++++++++++++
 .../brand/styles/instructions.module.css         | 16 ++++++++++++++++
 .../components/brand/styles/plugins.module.css   | 16 ++++++++++++++++
 .../components/brand/styles/skills.module.css    | 16 ++++++++++++++++
 5 files changed, 80 insertions(+)

diff --git a/website/src/components/brand/styles/agents.module.css b/website/src/components/brand/styles/agents.module.css
index 3a2c0ccb..9feb1106 100644
--- a/website/src/components/brand/styles/agents.module.css
+++ b/website/src/components/brand/styles/agents.module.css
@@ -686,7 +686,23 @@
   max-block-size: 480px;
   overflow-y: auto;
   padding-inline-end: var(--base-size-4);
+  /* Matches the muted, low-contrast scrollbar used by the article sidebar so
+     the filter list does not read as a heavy chrome element. */
   scrollbar-width: thin;
+  scrollbar-color: var(--brand-color-border-muted) transparent;
+}
+
+.filterOptions::-webkit-scrollbar {
+  width: 6px;
+}
+
+.filterOptions::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.filterOptions::-webkit-scrollbar-thumb {
+  background-color: var(--brand-color-border-muted);
+  border-radius: var(--brand-borderRadius-medium, 6px);
 }
 
 .showMoreButton {
diff --git a/website/src/components/brand/styles/extensions.module.css b/website/src/components/brand/styles/extensions.module.css
index 8589985a..38df1bce 100644
--- a/website/src/components/brand/styles/extensions.module.css
+++ b/website/src/components/brand/styles/extensions.module.css
@@ -749,7 +749,23 @@
   max-block-size: 480px;
   overflow-y: auto;
   padding-inline-end: var(--base-size-4);
+  /* Matches the muted, low-contrast scrollbar used by the article sidebar so
+     the filter list does not read as a heavy chrome element. */
   scrollbar-width: thin;
+  scrollbar-color: var(--brand-color-border-muted) transparent;
+}
+
+.filterOptions::-webkit-scrollbar {
+  width: 6px;
+}
+
+.filterOptions::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.filterOptions::-webkit-scrollbar-thumb {
+  background-color: var(--brand-color-border-muted);
+  border-radius: var(--brand-borderRadius-medium, 6px);
 }
 
 .showMoreButton {
diff --git a/website/src/components/brand/styles/instructions.module.css b/website/src/components/brand/styles/instructions.module.css
index 60c731ca..31dc10e0 100644
--- a/website/src/components/brand/styles/instructions.module.css
+++ b/website/src/components/brand/styles/instructions.module.css
@@ -672,7 +672,23 @@
   max-block-size: 480px;
   overflow-y: auto;
   padding-inline-end: var(--base-size-4);
+  /* Matches the muted, low-contrast scrollbar used by the article sidebar so
+     the filter list does not read as a heavy chrome element. */
   scrollbar-width: thin;
+  scrollbar-color: var(--brand-color-border-muted) transparent;
+}
+
+.filterOptions::-webkit-scrollbar {
+  width: 6px;
+}
+
+.filterOptions::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.filterOptions::-webkit-scrollbar-thumb {
+  background-color: var(--brand-color-border-muted);
+  border-radius: var(--brand-borderRadius-medium, 6px);
 }
 
 .showMoreButton {
diff --git a/website/src/components/brand/styles/plugins.module.css b/website/src/components/brand/styles/plugins.module.css
index 8fd1eb87..4d0d3a41 100644
--- a/website/src/components/brand/styles/plugins.module.css
+++ b/website/src/components/brand/styles/plugins.module.css
@@ -770,7 +770,23 @@
   max-block-size: 480px;
   overflow-y: auto;
   padding-inline-end: var(--base-size-4);
+  /* Matches the muted, low-contrast scrollbar used by the article sidebar so
+     the filter list does not read as a heavy chrome element. */
   scrollbar-width: thin;
+  scrollbar-color: var(--brand-color-border-muted) transparent;
+}
+
+.filterOptions::-webkit-scrollbar {
+  width: 6px;
+}
+
+.filterOptions::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.filterOptions::-webkit-scrollbar-thumb {
+  background-color: var(--brand-color-border-muted);
+  border-radius: var(--brand-borderRadius-medium, 6px);
 }
 
 .showMoreButton {
diff --git a/website/src/components/brand/styles/skills.module.css b/website/src/components/brand/styles/skills.module.css
index 60c68bd8..32845cb7 100644
--- a/website/src/components/brand/styles/skills.module.css
+++ b/website/src/components/brand/styles/skills.module.css
@@ -679,7 +679,23 @@
   max-block-size: 480px;
   overflow-y: auto;
   padding-inline-end: var(--base-size-4);
+  /* Matches the muted, low-contrast scrollbar used by the article sidebar so
+     the filter list does not read as a heavy chrome element. */
   scrollbar-width: thin;
+  scrollbar-color: var(--brand-color-border-muted) transparent;
+}
+
+.filterOptions::-webkit-scrollbar {
+  width: 6px;
+}
+
+.filterOptions::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.filterOptions::-webkit-scrollbar-thumb {
+  background-color: var(--brand-color-border-muted);
+  border-radius: var(--brand-borderRadius-medium, 6px);
 }
 
 .showMoreButton {