Start adding color adaptations

app/soapbox/containers/soapbox.js

@@ -78,7 +78,8 @@ class SoapboxMount extends React.PureComponent {
 
   componentDidMount() {
     this.props.dispatch(setTheme(ImmutableMap({
-      'brand-color': 'green',
+      // 'brand-color': '#0482d8',
+      'brand-color': '#1ca82b',
     })));
   }
 

app/soapbox/reducers/theme.js

@@ -2,13 +2,21 @@ import {
   SET_THEME,
 } from '../actions/theme';
 import { Map as ImmutableMap } from 'immutable';
+import { brightness, hue } from 'chromatism';
 
 const initialState = ImmutableMap();
 
+const populate = themeData => {
+  const { 'brand-color': brandColor } = themeData.toObject();
+  return ImmutableMap({
+    'nav-ui-highlight-color': brightness(10, hue(-3, brandColor).hex).hex,
+  }).merge(themeData);
+};
+
 export default function theme(state = initialState, action) {
   switch(action.type) {
   case SET_THEME:
-    return action.themeData;
+    return populate(ImmutableMap(action.themeData));
   default:
     return state;
   }

app/styles/azure.scss

@@ -8,10 +8,6 @@ $ui-highlight-color: $gab-brand-default;
 $nav-ui-highlight-color: #149dfb;
 $ui-base-lighter-color: #b0c0cf;
 
-// :root {
-//   --brand-color: #0482d8;
-// }
-
 @import 'application';
 @import 'soapbox-light/diff';
 

app/styles/soapbox/components/tabs-bar.scss

@@ -120,7 +120,7 @@ $nav-ui-background-color: var(--brand-color) !default;
     height: 34px;
     margin-left: 20px;
     border-radius: 4px;
-    background-color: $nav-ui-highlight-color !important;
+    background-color: var(--nav-ui-highlight-color) !important;
     transition: background-color 0.2s;
     font-weight: bold;
     font-size: 16px;
@@ -205,7 +205,7 @@ $nav-ui-background-color: var(--brand-color) !default;
     display: block;
     width: 100%;
     height: 0;
-    background: $nav-ui-highlight-color;
+    background: var(--nav-ui-highlight-color);
     position: absolute;
     bottom: 0;
     left: 0;