From e50ddbfb44e4120092ab7c5b76b206e1299f5839 Mon Sep 17 00:00:00 2001
From: David Nuescheler <david@nuescheler.ch>
Date: Thu, 9 Jul 2026 15:36:35 -0700
Subject: [PATCH 1/5] chore: primary and secondary handling

---
 blocks/hero/hero.css | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css
index 34e62e41..1e1d84ed 100644
--- a/blocks/hero/hero.css
+++ b/blocks/hero/hero.css
@@ -298,3 +298,33 @@
     max-width: 400px;
   }
 }
+
+
+.hero a.button {
+  border-color: currentcolor;
+  background-color: transparent;
+}
+
+.hero.image-dark a.button,
+.hero.image-darkest a.button,
+.hero.image-dark a.button:hover,
+.hero.image-darkest a.button:hover {
+  border-color: var(--color-white);
+  color: var(--color-white);
+}
+
+.hero a.button.emphasis,
+.hero a.button.emphasis:hover {
+  border-color: var(--color-charcoal);
+  background-color: var(--color-charcoal);
+  color: var(--color-white);  
+}
+
+.hero.image-dark a.button.emphasis,
+.hero.image-darkest a.button.emphasis,
+.hero.image-dark a.button.emphasis:hover,
+.hero.image-darkest a.button.emphasis:hover {
+  border-color: var(--color-white);
+  background-color: var(--color-white);
+  color: var(--color-charcoal);
+}
\ No newline at end of file

From 9a564ad5f128500854a4d195058e46b81e35ced7 Mon Sep 17 00:00:00 2001
From: David Nuescheler <david@nuescheler.ch>
Date: Mon, 13 Jul 2026 09:44:52 -0700
Subject: [PATCH 2/5] chore: add hover/focus

---
 blocks/hero/hero.css | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css
index 1e1d84ed..19e4d610 100644
--- a/blocks/hero/hero.css
+++ b/blocks/hero/hero.css
@@ -305,6 +305,11 @@
   background-color: transparent;
 }
 
+.hero a.button:hover,
+.hero a.button:focus {
+  background-color: rgb(from currentcolor r g b / 15%);
+}
+
 .hero.image-dark a.button,
 .hero.image-darkest a.button,
 .hero.image-dark a.button:hover,
@@ -327,4 +332,4 @@
   border-color: var(--color-white);
   background-color: var(--color-white);
   color: var(--color-charcoal);
-}
\ No newline at end of file
+}

From 9af034b7f7331b6ca42df80629099437ff7a8e04 Mon Sep 17 00:00:00 2001
From: David Nuescheler <david@nuescheler.ch>
Date: Mon, 13 Jul 2026 10:28:09 -0700
Subject: [PATCH 3/5] chore: toggle emphasis

---
 blocks/hero/hero.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/blocks/hero/hero.js b/blocks/hero/hero.js
index 74ffede8..172dcdd1 100644
--- a/blocks/hero/hero.js
+++ b/blocks/hero/hero.js
@@ -47,6 +47,7 @@ function detectLayout(block) {
 
 /** @param {Element} block */
 export default function decorate(block) {
+  block.querySelectorAll('a.button').forEach((button) => button.classList.toggle('emphasis'));
   detectLayout(block);
   buildVideo(block);
 

From 407ee8ebdc8465121abb25fa5ed91ec898b0366c Mon Sep 17 00:00:00 2001
From: David Nuescheler <david@nuescheler.ch>
Date: Mon, 13 Jul 2026 13:40:22 -0700
Subject: [PATCH 4/5] chore: slightly better browser coverage

---
 blocks/hero/hero.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css
index 19e4d610..b6d90820 100644
--- a/blocks/hero/hero.css
+++ b/blocks/hero/hero.css
@@ -307,7 +307,7 @@
 
 .hero a.button:hover,
 .hero a.button:focus {
-  background-color: rgb(from currentcolor r g b / 15%);
+  background-color: color-mix(in srgb, currentcolor 15%, transparent);
 }
 
 .hero.image-dark a.button,

From fbc8e9dec71d570f12b416b2d0a8a91a90939a4c Mon Sep 17 00:00:00 2001
From: David Nuescheler <david@nuescheler.ch>
Date: Mon, 13 Jul 2026 14:53:45 -0700
Subject: [PATCH 5/5] chore: more classes

---
 blocks/hero/hero.css | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css
index b6d90820..5ca29714 100644
--- a/blocks/hero/hero.css
+++ b/blocks/hero/hero.css
@@ -310,10 +310,8 @@
   background-color: color-mix(in srgb, currentcolor 15%, transparent);
 }
 
-.hero.image-dark a.button,
-.hero.image-darkest a.button,
-.hero.image-dark a.button:hover,
-.hero.image-darkest a.button:hover {
+.hero:is(.image-dark, .dark, .image-darkest, .darkest) a.button,
+.hero:is(.image-dark, .dark, .image-darkest, .darkest) a.button:hover {
   border-color: var(--color-white);
   color: var(--color-white);
 }
@@ -325,10 +323,8 @@
   color: var(--color-white);  
 }
 
-.hero.image-dark a.button.emphasis,
-.hero.image-darkest a.button.emphasis,
-.hero.image-dark a.button.emphasis:hover,
-.hero.image-darkest a.button.emphasis:hover {
+.hero:is(.image-dark, .dark, .image-darkest, .darkest) a.button.emphasis,
+.hero:is(.image-dark, .dark, .image-darkest, .darkest) a.button.emphasis:hover {
   border-color: var(--color-white);
   background-color: var(--color-white);
   color: var(--color-charcoal);