Store branding: Add complementing text and accent colors (#4746)

BTCPayServer/ColorPalette.cs

@@ -59,5 +59,44 @@ namespace BTCPayServer
                     return Labels[num % Labels.Length];
             }
         }
+        
+        /// https://gist.github.com/zihotki/09fc41d52981fb6f93a81ebf20b35cd5
+        /// <summary>
+        /// Creates color with corrected brightness.
+        /// </summary>
+        /// <param name="color">Color to correct.</param>
+        /// <param name="correctionFactor">The brightness correction factor. Must be between -1 and 1. 
+        /// Negative values produce darker colors.</param>
+        /// <returns>
+        /// Corrected <see cref="Color"/> structure.
+        /// </returns>
+        public Color AdjustBrightness(Color color, float correctionFactor)
+        {
+            float red = color.R;
+            float green = color.G;
+            float blue = color.B;
+
+            if (correctionFactor < 0)
+            {
+                correctionFactor = 1 + correctionFactor;
+                red *= correctionFactor;
+                green *= correctionFactor;
+                blue *= correctionFactor;
+            }
+            else
+            {
+                red = (255 - red) * correctionFactor + red;
+                green = (255 - green) * correctionFactor + green;
+                blue = (255 - blue) * correctionFactor + blue;
+            }
+
+            return Color.FromArgb(color.A, (int)red, (int)green, (int)blue);
+        }
+        
+        public string AdjustBrightness(string html, float correctionFactor)
+        {
+            var color = AdjustBrightness(ColorTranslator.FromHtml(html), correctionFactor);
+            return ColorTranslator.ToHtml(color);
+        }
     }
 }

BTCPayServer/Views/Shared/LayoutHeadStoreBranding.cshtml

@@ -10,13 +10,20 @@
 }
 @if (!string.IsNullOrEmpty(Model.BrandColor))
 {
+    var brandColor = Model.BrandColor;
+    var accentColor = ColorPalette.Default.AdjustBrightness(brandColor, (float)-0.15);
+    var complement = ColorPalette.Default.TextColor(brandColor).ToLowerInvariant();
+    var complementColor = $"var(--btcpay-{(complement == "black" ? "black" : "white")})";
     <style>
         :root {
-            --btcpay-primary: @Model.BrandColor;
-            --btcpay-primary-bg-hover: @Model.BrandColor;
-            --btcpay-primary-bg-active: @Model.BrandColor;
-            --btcpay-primary-shadow: @Model.BrandColor;
-            --btcpay-body-link-accent: @Model.BrandColor;
+            --btcpay-primary: @brandColor;
+            --btcpay-primary-shadow: @brandColor;
+            --btcpay-primary-bg-hover: @accentColor;
+            --btcpay-primary-bg-active: @accentColor;
+            --btcpay-body-link-accent: @accentColor;
+            --btcpay-primary-text: @complementColor;
+            --btcpay-primary-text-hover: @complementColor;
+            --btcpay-primary-text-active: @complementColor;
         }
     </style>
 }

BTCPayServer/Views/UIStores/GeneralSettings.cshtml

@@ -38,7 +38,7 @@
                 <label asp-for="BrandColor" class="form-label"></label>
                 <div class="input-group">
                     <input id="BrandColorInput" class="form-control form-control-color flex-grow-0" type="color" style="width:3rem" aria-describedby="BrandColorValue" value="@Model.BrandColor" />
-                    <input asp-for="BrandColor" class="form-control form-control-color flex-grow-0 font-monospace" pattern="@ColorPalette.Pattern" style="width:5.5rem" />
+                    <input asp-for="BrandColor" class="form-control form-control-color flex-grow-0 font-monospace" pattern="@ColorPalette.Pattern" style="width:5.5rem;font-size:0.9rem" />
                 </div>
                 <span asp-validation-for="BrandColor" class="text-danger"></span>
             </div>