diff --git a/src/components/filter-list.webc b/src/components/filter-list.webc
index 331389b..68d85c6 100644
--- a/src/components/filter-list.webc
+++ b/src/components/filter-list.webc
@@ -38,11 +38,16 @@
   }
 
   :host {
+    --gradient-dir: to bottom right;
+    --gradient-base: var(--clr-box-background);
+    --gradient-start: oklch(from var(--gradient-base) calc(l + 0.2) c h);
+    --gradient-end: oklch(from var(--gradient-base) l c h);
+
     position: relative;
     background: linear-gradient(
-      to bottom right,
-      var(--clr-box-gradient-start) 0%,
-      var(--clr-box-gradient-end) 50%
+      var(--gradient-dir),
+      var(--gradient-start) 0%,
+      var(--gradient-end) 50%
     );
 
     font-size: 0.75em;
@@ -61,13 +66,15 @@
   }
 
   :host::before {
+    --gradient-start: oklch(from var(--gradient-base) calc(l + 0.1) c h);
+
     content: '';
     position: absolute;
     inset: var(--border-thin);
     background: linear-gradient(
-      to bottom right,
-      var(--clr-quick-info-bg-start) 0%,
-      var(--clr-quick-info-bg-end) 50%
+      var(--gradient-dir),
+      var(--gradient-start) 0%,
+      var(--gradient-end) 50%
     );
     border-radius: inherit;
     z-index: -1;
@@ -89,18 +96,17 @@
   }
 
   :host .filter-button label {
-    --clr-box-background: var(--clr-button);
-    --clr-box-gradient-start: oklch(from var(--clr-box-background) calc(l + 0.2) c h);
-    --clr-box-gradient-end: oklch(from var(--clr-box-background) l c h);
-    --gradient-dir: to bottom right;
+    --gradient-base: var(--clr-button);
+    --gradient-start: oklch(from var(--gradient-base) calc(l + 0.2) c h);
+    --gradient-end: oklch(from var(--gradient-base) l c h);
 
     position: relative;
     display: block;
 
     background: linear-gradient(
       var(--gradient-dir),
-      var(--clr-box-gradient-start) 0%,
-      var(--clr-box-gradient-end) 50%
+      var(--gradient-start) 0%,
+      var(--gradient-end) 50%
     );
 
     color: white;
@@ -118,15 +124,21 @@
     z-index: 1;
 
     transition: all 0.2s ease-in-out;
+  }
 
-    &::before {
-      content: '';
-      position: absolute;
-      inset: var(--border-thin);
-      background-color: var(--clr-box-background);
-      border-radius: inherit;
-      z-index: -1;
-    }
+  :host .filter-button label::before {
+    --gradient-start: oklch(from var(--gradient-base) calc(l + 0.1) c h);
+
+    content: '';
+    position: absolute;
+    inset: var(--border-thin);
+    background: linear-gradient(
+      var(--gradient-dir),
+      var(--gradient-start) 0%,
+      var(--gradient-end) 50%
+    );
+    border-radius: inherit;
+    z-index: -1;
   }
 
   :host .filter-button input:checked + label {
diff --git a/src/components/popup-modal.webc b/src/components/popup-modal.webc
index 04f24eb..eaa5d13 100644
--- a/src/components/popup-modal.webc
+++ b/src/components/popup-modal.webc
@@ -140,15 +140,11 @@
   }
 
   :host .positive {
-    --clr-box-background: var(--clr-yes);
-    --clr-box-gradient-start: oklch(from var(--clr-box-background) calc(l + 0.2) c h);
-    --clr-box-gradient-end: oklch(from var(--clr-box-background) l c h);
+    --gradient-base: var(--clr-yes);
   }
 
   :host .negative {
-    --clr-box-background: var(--clr-no);
-    --clr-box-gradient-start: oklch(from var(--clr-box-background) calc(l + 0.2) c h);
-    --clr-box-gradient-end: oklch(from var(--clr-box-background) l c h);
+    --gradient-base: var(--clr-no);
   }
 
   @starting-style {
diff --git a/src/components/quick-info.webc b/src/components/quick-info.webc
index c555a20..e677ae0 100644
--- a/src/components/quick-info.webc
+++ b/src/components/quick-info.webc
@@ -5,11 +5,15 @@
 
 <style webc:scoped="quick-info">
   :host {
+    --gradient-dir: to bottom right;
+    --gradient-start: var(--clr-box-gradient-start);
+    --gradient-end: var(--clr-box-gradient-end);
+
     position: relative;
     background: linear-gradient(
-      to bottom right,
-      var(--clr-box-gradient-start) 0%,
-      var(--clr-box-gradient-end) 50%
+      var(--gradient-dir),
+      var(--gradient-start) 0%,
+      var(--gradient-end) 50%
     );
 
     box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
@@ -22,13 +26,16 @@
   }
 
   :host::before {
+    --gradient-start: var(--clr-quick-info-gradient-start);
+    --gradient-end: var(--clr-quick-info-gradient-end);
+
     content: '';
     position: absolute;
     inset: var(--border-thin);
     background: linear-gradient(
-      to bottom right,
-      var(--clr-quick-info-bg-start) 0%,
-      var(--clr-quick-info-bg-end) 50%
+      var(--gradient-dir),
+      var(--gradient-start) 0%,
+      var(--gradient-end) 50%
     );
     border-radius: inherit;
     z-index: -1;
diff --git a/src/components/ref-button.webc b/src/components/ref-button.webc
index 367166c..58ad15b 100644
--- a/src/components/ref-button.webc
+++ b/src/components/ref-button.webc
@@ -3,15 +3,19 @@
 <style webc:scoped="button">
   :host {
     --gradient-dir: to bottom right;
+    --gradient-base: var(--clr-box-background);
+    --gradient-start: oklch(from var(--gradient-base) calc(l + 0.2) c h);
+    --gradient-end: oklch(from var(--gradient-base) l c h);
+
     position: relative;
 
     background: linear-gradient(
       var(--gradient-dir),
-      var(--clr-box-gradient-start) 0%,
-      var(--clr-box-gradient-end) 50%
+      var(--gradient-start) 0%,
+      var(--gradient-end) 50%
     );
 
-    color: white;
+    color: var(--clr-text);
     font-size: 1em;
     font-weight: bold;
 
@@ -26,10 +30,16 @@
   }
 
   :host::before {
+    --gradient-start: oklch(from var(--gradient-base) calc(l + 0.1) c h);
+
     content: '';
     position: absolute;
     inset: var(--border-thin);
-    background-color: var(--clr-box-background);
+    background: linear-gradient(
+      var(--gradient-dir),
+      var(--gradient-start) 0%,
+      var(--gradient-end) 50%
+    );
     border-radius: inherit;
     z-index: -1;
   }
diff --git a/src/components/ref-gallery.webc b/src/components/ref-gallery.webc
index 4dc596e..0e09101 100644
--- a/src/components/ref-gallery.webc
+++ b/src/components/ref-gallery.webc
@@ -122,6 +122,8 @@
 
   :host :where(.prev, .next, .indicator-btn) {
     --gradient-dir: to bottom right;
+    --gradient-start: var(--clr-box-gradient-start);
+    --gradient-end: var(--clr-box-gradient-end);
 
     position: relative;
 
@@ -131,8 +133,8 @@
 
     background: linear-gradient(
       var(--gradient-dir),
-      var(--clr-box-gradient-start) 0%,
-      var(--clr-box-gradient-end) 50%
+      var(--gradient-start) 0%,
+      var(--gradient-end) 50%
     );
 
     box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
@@ -150,14 +152,16 @@
 
   :host :where(.prev, .next, .indicator-btn)::after {
     --gradient-dir: to bottom right;
+    --gradient-start: var(--clr-quick-info-gradient-start);
+    --gradient-end: var(--clr-quick-info-gradient-end);
 
     content: '';
     position: absolute;
     inset: var(--border-thin);
     background: linear-gradient(
       var(--gradient-dir),
-      var(--clr-quick-info-bg-start) 0%,
-      var(--clr-quick-info-bg-end) 50%
+      var(--gradient-start) 0%,
+      var(--gradient-end) 50%
     );
     border-radius: inherit;
     z-index: -1;