From ef20e29b20cd72ec61ee42893c28872cc848943e Mon Sep 17 00:00:00 2001
From: Sami Mazouz <sychocouldy@gmail.com>
Date: Mon, 16 Aug 2021 10:17:48 +0100
Subject: [PATCH] [1.x] Custom Colorising with CSS Custom Properties (#3001)

* Start of conversion to CSS variables
* Use variable for Badge colors
* Use variable for avatar bg
* Use variable for user card bg
* Use css variables for hero
* Use css variables for buttons
* Use css variables for sidenav links
* Cleaner style attr

Co-authored-by: David Wheatley <hi@davwheat.dev>
---
 js/src/admin/components/EditGroupModal.js |  2 +-
 js/src/common/components/Badge.js         |  5 ++++-
 js/src/common/components/GroupBadge.js    |  2 +-
 js/src/common/helpers/avatar.tsx          |  2 +-
 js/src/forum/components/UserCard.js       |  2 +-
 less/admin/DashboardPage.less             |  2 +-
 less/common/Avatar.less                   |  2 +-
 less/common/Badge.less                    |  4 ++--
 less/common/Button.less                   | 20 +++++++++++---------
 less/common/common.less                   |  1 +
 less/common/root.less                     | 18 ++++++++++++++++++
 less/common/scaffolding.less              | 11 -----------
 less/common/sideNav.less                  |  6 +++---
 less/forum/Hero.less                      |  4 ++--
 less/forum/Post.less                      |  4 ++--
 less/forum/UserCard.less                  |  2 +-
 16 files changed, 50 insertions(+), 37 deletions(-)
 create mode 100644 less/common/root.less

diff --git a/js/src/admin/components/EditGroupModal.js b/js/src/admin/components/EditGroupModal.js
index 70d3c65fd8..129af73a91 100644
--- a/js/src/admin/components/EditGroupModal.js
+++ b/js/src/admin/components/EditGroupModal.js
@@ -32,7 +32,7 @@ export default class EditGroupModal extends Modal {
       this.color() || this.icon()
         ? Badge.component({
             icon: this.icon(),
-            style: { backgroundColor: this.color() },
+            color: this.color(),
           })
         : '',
       ' ',
diff --git a/js/src/common/components/Badge.js b/js/src/common/components/Badge.js
index 885f69d7ff..39f63e16b1 100644
--- a/js/src/common/components/Badge.js
+++ b/js/src/common/components/Badge.js
@@ -18,15 +18,18 @@ import classList from '../utils/classList';
  */
 export default class Badge extends Component {
   view() {
-    const { type, icon: iconName, label, ...attrs } = this.attrs;
+    const { type, icon: iconName, label, color, style = {}, ...attrs } = this.attrs;
 
     const className = classList('Badge', [type && `Badge--${type}`], attrs.className);
 
     const iconChild = iconName ? icon(iconName, { className: 'Badge-icon' }) : m.trust('&nbsp;');
 
+    const newStyle = { ...style, '--badge-bg': color };
+
     const badgeAttrs = {
       ...attrs,
       className,
+      style: newStyle,
     };
 
     const badgeNode = <div {...badgeAttrs}>{iconChild}</div>;
diff --git a/js/src/common/components/GroupBadge.js b/js/src/common/components/GroupBadge.js
index 07af8e223c..5479f7db08 100644
--- a/js/src/common/components/GroupBadge.js
+++ b/js/src/common/components/GroupBadge.js
@@ -6,7 +6,7 @@ export default class GroupBadge extends Badge {
 
     if (attrs.group) {
       attrs.icon = attrs.group.icon();
-      attrs.style = { backgroundColor: attrs.group.color() };
+      attrs.color = attrs.group.color();
       attrs.label = typeof attrs.label === 'undefined' ? attrs.group.nameSingular() : attrs.label;
       attrs.type = 'group--' + attrs.group.id();
 
diff --git a/js/src/common/helpers/avatar.tsx b/js/src/common/helpers/avatar.tsx
index a60872b43c..4262abc757 100644
--- a/js/src/common/helpers/avatar.tsx
+++ b/js/src/common/helpers/avatar.tsx
@@ -31,7 +31,7 @@ export default function avatar(user: User, attrs: Object = {}): Mithril.Vnode {
     }
 
     content = username.charAt(0).toUpperCase();
-    attrs.style = { background: user.color() };
+    attrs.style = { '--avatar-bg': user.color() };
   }
 
   return <span {...attrs}>{content}</span>;
diff --git a/js/src/forum/components/UserCard.js b/js/src/forum/components/UserCard.js
index 4b1003a605..e1c71de78d 100644
--- a/js/src/forum/components/UserCard.js
+++ b/js/src/forum/components/UserCard.js
@@ -30,7 +30,7 @@ export default class UserCard extends Component {
     const badges = user.badges().toArray();
 
     return (
-      <div className={'UserCard ' + (this.attrs.className || '')} style={color ? { backgroundColor: color } : ''}>
+      <div className={'UserCard ' + (this.attrs.className || '')} style={color && { '--usercard-bg': color }}>
         <div className="darkenBackground">
           <div className="container">
             {controls.length
diff --git a/less/admin/DashboardPage.less b/less/admin/DashboardPage.less
index f8ca72e0af..5e7c771e7b 100644
--- a/less/admin/DashboardPage.less
+++ b/less/admin/DashboardPage.less
@@ -13,7 +13,7 @@
   margin-bottom: 20px;
 
   .Button {
-    .Button--color(@control-color, @body-bg)
+    .Button--color(@control-color, @body-bg, 'button-alternate')
   }
 }
 
diff --git a/less/common/Avatar.less b/less/common/Avatar.less
index 5fe5054c8f..5df0db6bf0 100644
--- a/less/common/Avatar.less
+++ b/less/common/Avatar.less
@@ -4,7 +4,7 @@
   color: #fff;
   text-align: center;
   vertical-align: top;
-  background-color: @control-bg;
+  background-color: var(--avatar-bg);
   font-weight: normal;
   .Avatar--size(48px);
 
diff --git a/less/common/Badge.less b/less/common/Badge.less
index eb886a630e..a43c97baab 100644
--- a/less/common/Badge.less
+++ b/less/common/Badge.less
@@ -1,7 +1,7 @@
 .Badge {
   .Badge--size(22px);
-  background: @muted-color;
-  color: #fff;
+  background: var(--badge-bg);
+  color: var(--badge-color);
   display: inline-block;
   vertical-align: middle;
   text-align: center;
diff --git a/less/common/Button.less b/less/common/Button.less
index 852d18ff87..2b6890e068 100644
--- a/less/common/Button.less
+++ b/less/common/Button.less
@@ -53,7 +53,7 @@
   padding: 8px 13px;
   border-radius: @border-radius;
   .user-select(none);
-  .Button--color(@control-color, @control-bg);
+  .Button--color(@control-color, @control-bg, 'button');
   border: 0;
 
   &:hover {
@@ -98,26 +98,28 @@
   }
 }
 
-.Button--color(@color; @background) {
-  color: @color;
-  background: @background;
+.Button--color(@color; @background; @name: 'button') {
+  color: var(~"--@{name}-color", ~"@{color}");
+  background: var(~"--@{name}-bg", ~"@{background}");
+  @bg-hover: darken(fadein(@background, 5%), 5%);
+  @bg-active: darken(fadein(@background, 10%), 10%);
 
   &:hover,
   &:focus,
   &.focus {
-    background-color: darken(fadein(@background, 5%), 5%);
+    background-color: var(~"--@{name}-bg-hover", ~"@{bg-hover}");
   }
 
   &:active,
   &.active,
   .open > .Dropdown-toggle& {
-    background-color: darken(fadein(@background, 10%), 10%);
+    background-color: var(~"--@{name}-bg-active", ~"@{bg-active}");
   }
 
   &.disabled,
   &[disabled],
   fieldset[disabled] & {
-    background: @background;
+    background: var(~"--@{name}-bg-disabled", ~"@{background}");
   }
 }
 
@@ -166,7 +168,7 @@
   }
 }
 .Button--primary {
-  .Button--color(@body-bg, @primary-color);
+  .Button--color(@body-bg, @primary-color, 'button-primary');
   font-weight: bold;
   padding-left: 20px;
   padding-right: 20px;
@@ -176,7 +178,7 @@
   }
 }
 .Button--danger {
-  .Button--color(@control-danger-color, @control-danger-bg);
+  .Button--color(@control-danger-color, @control-danger-bg, 'control-danger');
 }
 .Button--more {
   padding: 2px 4px;
diff --git a/less/common/common.less b/less/common/common.less
index 6b530e0c08..39b6bbb794 100644
--- a/less/common/common.less
+++ b/less/common/common.less
@@ -6,6 +6,7 @@
 
 @import "normalize";
 @import "print";
+@import "root";
 @import "scaffolding";
 @import "sideNav";
 
diff --git a/less/common/root.less b/less/common/root.less
new file mode 100644
index 0000000000..3df86817df
--- /dev/null
+++ b/less/common/root.less
@@ -0,0 +1,18 @@
+:root {
+  // Component colors
+  --avatar-bg: @control-bg;
+  --badge-bg: @muted-color;
+  --badge-color: #fff;
+  --usercard-bg: @control-bg;
+  --hero-bg: @hero-bg;
+  --hero-color: @hero-color;
+
+  // Store the current responsive screen mode in a CSS variable, to make it
+  // available to the JS code.
+  --flarum-screen: none;
+
+  @media @phone { --flarum-screen: phone; }
+  @media @tablet { --flarum-screen: tablet; }
+  @media @desktop { --flarum-screen: desktop; }
+  @media @desktop-hd { --flarum-screen: desktop-hd; }
+}
diff --git a/less/common/scaffolding.less b/less/common/scaffolding.less
index facfa6f432..87ae507924 100644
--- a/less/common/scaffolding.less
+++ b/less/common/scaffolding.less
@@ -1,14 +1,3 @@
-// Store the current responsive screen mode in a CSS variable, to make it
-// available to the JS code.
-:root {
-  --flarum-screen: none;
-
-  @media @phone { --flarum-screen: phone; }
-  @media @tablet { --flarum-screen: tablet; }
-  @media @desktop { --flarum-screen: desktop; }
-  @media @desktop-hd { --flarum-screen: desktop-hd; }
-}
-
 * {
   &,
   &:before,
diff --git a/less/common/sideNav.less b/less/common/sideNav.less
index dc33857e22..c37e92e0ab 100644
--- a/less/common/sideNav.less
+++ b/less/common/sideNav.less
@@ -19,11 +19,11 @@
       & .Dropdown-menu {
         & > li > a {
           padding: 8px 0 8px 30px;
-          color: @muted-color;
+          color: var(--sidenav-color, @muted-color);
 
           &:hover {
             background: none;
-            color: @link-color;
+            color: var(--sidenav-color-hover, @link-color);
             text-decoration: none;
           }
 
@@ -35,7 +35,7 @@
         }
         & > li.active > a {
           background: none;
-          color: @primary-color;
+          color: var(--sidenav-color-active, @primary-color);
           font-weight: bold;
         }
         & > .Dropdown-separator {
diff --git a/less/forum/Hero.less b/less/forum/Hero.less
index 5ffaa43971..9f39aa1a07 100644
--- a/less/forum/Hero.less
+++ b/less/forum/Hero.less
@@ -1,8 +1,8 @@
 .Hero {
   margin-top: -1px;
-  background: @hero-bg;
+  background: var(--hero-bg);
   text-align: center;
-  color: @hero-color;
+  color: var(--hero-color);
 
   h2 {
     margin: 0;
diff --git a/less/forum/Post.less b/less/forum/Post.less
index 93bba10d86..f063cad048 100644
--- a/less/forum/Post.less
+++ b/less/forum/Post.less
@@ -201,7 +201,7 @@
     opacity: 0.5;
   }
   .Post-header .Button--more {
-    .Button--color(@muted-more-color, fade(@muted-more-color, 30%));
+    .Button--color(@muted-more-color, fade(@muted-more-color, 30%), 'muted-more');
   }
 }
 .Post--loading {
@@ -287,7 +287,7 @@
     font-size: 14px;
     margin-right: 5px;
   }
-  
+
   &:empty {
     display: none;
   }
diff --git a/less/forum/UserCard.less b/less/forum/UserCard.less
index c1e0d8c1bf..29b4d4f0f6 100644
--- a/less/forum/UserCard.less
+++ b/less/forum/UserCard.less
@@ -1,5 +1,5 @@
 .UserCard {
-  background: @control-bg;
+  background: var(--usercard-bg);
   .light-contents();
   background-size: 100% 100%;
 }