From 3b350cc844603e0daa7b254222c6ba7fa954f96b Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Thu, 3 Feb 2022 08:56:08 -0500
Subject: [PATCH] Limit saturation of accent color for button surface

---
 src/css/themes/default.css | 16 +++++++---------
 src/js/udom.js             | 20 +++++++++++++++++---
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/css/themes/default.css b/src/css/themes/default.css
index d88a46992..4ba88ad8a 100644
--- a/src/css/themes/default.css
+++ b/src/css/themes/default.css
@@ -221,6 +221,9 @@
     --accent-ink-3: var(--ink-1);
     --accent-surface-1: rgb(var(--primary-40));
 
+    /* buttons */
+    --button-surface-rgb: var(--gray-80);
+
     /* popup panel */
     --popup-cell-cname-ink: #0054d7; /* h260 S:100 Luv:40 */;
     --popup-cell-label-mixed-surface: #c29100; /* TODO: fix */
@@ -298,6 +301,9 @@
 
     --accent-surface-1: rgb(var(--primary-70));
 
+    /* buttons */
+    --button-surface-rgb: var(--gray-30);
+
     /* popup panel */
     --popup-cell-cname-ink: #93a6ff; /* h260 S:100 Luv:70 */;
     --popup-cell-label-mixed-surface: hsla(45, 100%, 38%, 1); /* TODO: fix */
@@ -363,7 +369,7 @@
     --fieldset-header-ink: var(--ink-2);
 
     --button-ink: var(--ink-1);
-    --button-surface: var(--surface-3);
+    --button-surface: rgb(var(--button-surface-rgb));
     --button-border-radius: 5px;
     --button-preferred-ink: var(--accent-ink-1);
     --button-preferred-surface: var(--accent-surface-1);
@@ -433,14 +439,6 @@
     --popup-cell-noop-surface-rgb:       94  94  94; /* h:0     S:0   Luv:40 */
 }
 
-:root.accented {
-    --button-surface: rgb(var(--primary-80));
-}
-
-:root.dark.accented {
-    --button-surface: rgb(var(--primary-30));
-}
-
 /*
  * Source for color-blind color scheme:
  * https://davidmathlogic.com/colorblind/
diff --git a/src/js/udom.js b/src/js/udom.js
index b9187ea7d..cfb33ed48 100644
--- a/src/js/udom.js
+++ b/src/js/udom.js
@@ -100,6 +100,7 @@ DOMListFactory.setTheme = function(theme) {
 
 DOMListFactory.setAccentColor = function(accentEnabled, accentColor, stylesheet = '') {
     if ( accentEnabled && stylesheet === '' && self.hsluv !== undefined ) {
+        const toRGB = hsl => self.hsluv.hsluvToRgb(hsl).map(a => Math.round(a * 255)).join(' ');
         // Normalize first
         const hsl = self.hsluv.hexToHsluv(accentColor);
         hsl[0] = Math.round(hsl[0] * 10) / 10;
@@ -110,10 +111,23 @@ DOMListFactory.setAccentColor = function(accentEnabled, accentColor, stylesheet
         text.push(':root.accented {');
         for ( const shade of shades ) {
             hsl[2] = shade;
-            const rgb = self.hsluv.hsluvToRgb(hsl).map(a => Math.round(a * 255));
-            text.push(`   --primary-${shade}: ${rgb.join(' ')};`);
+            text.push(`   --primary-${shade}: ${toRGB(hsl)};`);
         }
-        text.push('}', '');
+        text.push('}');
+        hsl[1] = Math.min(25, hsl[1]);
+        hsl[2] = 80;
+        text.push(
+            ':root.light.accented {',
+            `    --button-surface-rgb: ${toRGB(hsl)};`,
+            '}',
+        );
+        hsl[2] = 30;
+        text.push(
+            ':root.dark.accented {',
+            `    --button-surface-rgb: ${toRGB(hsl)};`,
+            '}',
+        );
+        text.push('');
         stylesheet = text.join('\n');
         vAPI.messaging.send('uDom', { what: 'uiAccentStylesheet', stylesheet });
     }