From 971d08ed6bf50af2960f4a9d47d9da9d8f5926b7 Mon Sep 17 00:00:00 2001
From: Rafid Aslam <rafid.aslam@stackguardian.io>
Date: Thu, 13 Aug 2026 21:00:41 +0700
Subject: [PATCH] docs: recolour the Get started button to the StackGuardian
 blue

The hero button used the site primary. It now uses the blue from the
StackGuardian icon, scoped to that one button by overriding the --ifm-button-*
properties on a CSS-module class -- deliberately not by changing
--ifm-color-primary, which also drives links, sidebar highlights and
admonitions across every page.

The icon's exact blue is #007aff, which gives only 4.02:1 against white and so
fails WCAG AA for normal text. The fill is the same hue darkened to #006ee6
(4.80:1), and darker again on hover. The label is pinned to opaque white rather
than left to --ifm-button-color, which resolves per theme -- the same variable
whose light-mode value made this button's text invisible once already.
---
 documentation/src/pages/index.js         |  8 ++++++--
 documentation/src/pages/index.module.css | 19 +++++++++++++++++++
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/documentation/src/pages/index.js b/documentation/src/pages/index.js
index 4cdf434..a23dd1d 100644
--- a/documentation/src/pages/index.js
+++ b/documentation/src/pages/index.js
@@ -148,9 +148,13 @@ const content = {
 // Uses Docusaurus's own button classes rather than hand-rolled ones: they carry
 // a readable foreground in both light and dark mode. A custom rule here had set
 // the label to var(--ifm-background-color), which is #0000 in light mode -- so
-// the text was transparent on a purple fill.
+// the text was transparent on a purple fill. The primary button additionally
+// takes a CSS-module class that recolours it to the StackGuardian icon blue by
+// overriding the --ifm-button-* custom properties (see index.module.css).
 function Action({label, to, href, primary}) {
-  const className = `button button--lg ${primary ? 'button--primary' : 'button--secondary'}`;
+  const className = primary
+    ? `button button--lg button--primary ${styles.heroPrimary}`
+    : 'button button--lg button--secondary';
   return to ? (
     <Link className={className} to={to}>
       {label}
diff --git a/documentation/src/pages/index.module.css b/documentation/src/pages/index.module.css
index 6154747..0240103 100644
--- a/documentation/src/pages/index.module.css
+++ b/documentation/src/pages/index.module.css
@@ -53,6 +53,25 @@
   margin-top: 1.5rem;
 }
 
+/*
+ * The primary hero button uses the StackGuardian icon blue rather than the
+ * site primary. The icon's #007aff fails 4.5:1 against white (4.02:1), so the
+ * fill is the same hue darkened to #006ee6 (4.80:1), and darker again on
+ * hover. The label is pinned to opaque white because --ifm-button-color
+ * resolves differently per theme.
+ */
+.heroPrimary {
+  --ifm-button-background-color: #006ee6;
+  --ifm-button-border-color: #006ee6;
+  --ifm-button-color: #fff;
+}
+
+.heroPrimary:hover,
+.heroPrimary:active {
+  --ifm-button-background-color: #0062cc;
+  --ifm-button-border-color: #0062cc;
+}
+
 @media screen and (max-width: 996px) {
   .page {
     padding: 2rem 1rem 3rem;