refactor: ♻️ modularize button gradients

This allows for more flexibility when recoloring buttons

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(--gradient-dir),
-      var(--clr-box-gradient-start) 0%,
+      var(--gradient-start) 0%,
-      var(--clr-box-gradient-end) 50%
+      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(--gradient-dir),
-      var(--clr-quick-info-bg-start) 0%,
+      var(--gradient-start) 0%,
-      var(--clr-quick-info-bg-end) 50%
+      var(--gradient-end) 50%
     );
     border-radius: inherit;
     z-index: -1;
@@ -89,18 +96,17 @@
   }
 
   :host .filter-button label {
-    --clr-box-background: var(--clr-button);
+    --gradient-base: var(--clr-button);
-    --clr-box-gradient-start: oklch(from var(--clr-box-background) calc(l + 0.2) c h);
+    --gradient-start: oklch(from var(--gradient-base) calc(l + 0.2) c h);
-    --clr-box-gradient-end: oklch(from var(--clr-box-background) l c h);
+    --gradient-end: oklch(from var(--gradient-base) l c h);
-    --gradient-dir: to bottom right;
 
     position: relative;
     display: block;
 
     background: linear-gradient(
       var(--gradient-dir),
-      var(--clr-box-gradient-start) 0%,
+      var(--gradient-start) 0%,
-      var(--clr-box-gradient-end) 50%
+      var(--gradient-end) 50%
     );
 
     color: white;
@@ -118,15 +124,21 @@
     z-index: 1;
 
     transition: all 0.2s ease-in-out;
+  }
 
-    &::before {
+  :host .filter-button label::before {
-      content: '';
+    --gradient-start: oklch(from var(--gradient-base) calc(l + 0.1) c h);
-      position: absolute;
+
-      inset: var(--border-thin);
+    content: '';
-      background-color: var(--clr-box-background);
+    position: absolute;
-      border-radius: inherit;
+    inset: var(--border-thin);
-      z-index: -1;
+    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 {

src/components/popup-modal.webc

@@ -140,15 +140,11 @@
   }
 
   :host .positive {
-    --clr-box-background: var(--clr-yes);
+    --gradient-base: 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);
   }
 
   :host .negative {
-    --clr-box-background: var(--clr-no);
+    --gradient-base: 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);
   }
 
   @starting-style {

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(--gradient-dir),
-      var(--clr-box-gradient-start) 0%,
+      var(--gradient-start) 0%,
-      var(--clr-box-gradient-end) 50%
+      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(--gradient-dir),
-      var(--clr-quick-info-bg-start) 0%,
+      var(--gradient-start) 0%,
-      var(--clr-quick-info-bg-end) 50%
+      var(--gradient-end) 50%
     );
     border-radius: inherit;
     z-index: -1;

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(--gradient-start) 0%,
-      var(--clr-box-gradient-end) 50%
+      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;
   }

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(--gradient-start) 0%,
-      var(--clr-box-gradient-end) 50%
+      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(--gradient-start) 0%,
-      var(--clr-quick-info-bg-end) 50%
+      var(--gradient-end) 50%
     );
     border-radius: inherit;
     z-index: -1;