From 763694b5abb1ab3177ac3c89e18867bfe2aa2c1a Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Sat, 25 Apr 2020 13:00:51 -0400
Subject: [PATCH] Progress

---
 .../gabsocial/assets/loading_icon.js          |  16 +-
 app/javascript/gabsocial/base_polyfills.js    |   3 +
 .../gabsocial/components/account.js           |   2 +-
 .../components/autosuggest_textbox.js         |   2 +-
 app/javascript/gabsocial/components/button.js |   6 +-
 .../gabsocial/components/comment.js           |   4 +-
 .../gabsocial/components/display_name.js      |   2 +-
 .../gabsocial/components/divider.js           |   2 +-
 .../components/group_collection_item.js       |   9 +-
 .../gabsocial/components/group_list_item.js   |   2 +-
 .../gabsocial/components/hashtag_item.js      |   2 +-
 app/javascript/gabsocial/components/image.js  |   2 +-
 app/javascript/gabsocial/components/input.js  |   4 +-
 .../gabsocial/components/link_footer.js       |   2 +-
 .../gabsocial/components/list_item.js         |   4 +-
 .../gabsocial/components/media_gallery.js     |   2 +-
 .../gabsocial/components/media_item.js        |   6 +-
 .../gabsocial/components/modal/embed_modal.js |   2 +-
 .../gabsocial/components/modal/modal_base.js  |   2 +-
 .../gabsocial/components/notification.js      |   4 +-
 .../components/panel/panel_layout.js          |   2 +-
 .../gabsocial/components/panel/user_panel.js  |   2 +-
 app/javascript/gabsocial/components/poll.js   |   9 +-
 .../components/popover/popover_base.js        |   2 +-
 .../popover/status_visibility_popover.js      |   2 +-
 .../gabsocial/components/profile_header.js    |   2 +-
 .../gabsocial/components/progress_bar.js      |   4 +-
 .../components/rich_text_editor_bar.js        |   2 +-
 .../components/sensitive_media_item.js        |   2 +-
 .../components/sidebar_section_item.js        |   2 +-
 app/javascript/gabsocial/components/status.js |   2 +-
 .../gabsocial/components/status_action_bar.js |   1 +
 .../components/status_action_bar_item.js      |   2 +-
 .../gabsocial/components/status_card.js       |   8 +-
 .../gabsocial/components/status_content.js    |   2 +-
 app/javascript/gabsocial/components/switch.js |   2 +-
 .../gabsocial/components/tab_bar_item.js      |   2 +-
 .../components/timeline_compose_block.js      |   2 +-
 .../gabsocial/components/trends_item.js       |   2 +-
 app/javascript/gabsocial/components/video.js  |  10 +-
 .../components/compose_extra_button.js        |   2 +-
 .../compose/components/compose_form.js        |   2 +-
 .../compose/components/media_upload_item.js   |   3 +-
 app/javascript/gabsocial/layouts/layout.js    |   4 +-
 .../gabsocial/layouts/search_layout.js        |   4 +-
 .../gabsocial/layouts/settings_layout.js      |   4 +-
 app/javascript/styles/global.css              | 985 +++++-------------
 package.json                                  |   1 +
 yarn.lock                                     |   5 +
 49 files changed, 356 insertions(+), 794 deletions(-)

diff --git a/app/javascript/gabsocial/assets/loading_icon.js b/app/javascript/gabsocial/assets/loading_icon.js
index 4f0b9eda..5b403151 100644
--- a/app/javascript/gabsocial/assets/loading_icon.js
+++ b/app/javascript/gabsocial/assets/loading_icon.js
@@ -13,7 +13,7 @@ const LoadingIcon = ({
   >
     <g transform='translate(82,50)'>
       <g transform='rotate(0)'>
-        <circle cx='0' cy='0' r='6' fill='#30ce7d' fillOpacity='1' transform='scale(1.03405 1.03405)'>
+        <circle cx='0' cy='0' r='6' className={_s.fillColorSecondary} fillOpacity='1' transform='scale(1.03405 1.03405)'>
           <animateTransform attributeName='transform' type='scale' begin='-1.0294117647058822s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform>
           <animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-1.0294117647058822s'></animate>
         </circle>
@@ -21,7 +21,7 @@ const LoadingIcon = ({
     </g>
     <g transform='translate(72.62741699796952,72.62741699796952)'>
       <g transform='rotate(45)'>
-        <circle cx='0' cy='0' r='6' fill='#30ce7d' fillOpacity='0.875' transform='scale(1.09655 1.09655)'>
+        <circle cx='0' cy='0' r='6' className={_s.fillColorSecondary} fillOpacity='0.875' transform='scale(1.09655 1.09655)'>
           <animateTransform attributeName='transform' type='scale' begin='-0.8823529411764705s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform>
           <animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.8823529411764705s'></animate>
         </circle>
@@ -29,7 +29,7 @@ const LoadingIcon = ({
     </g>
     <g transform='translate(50,82)'>
       <g transform='rotate(90)'>
-        <circle cx='0' cy='0' r='6' fill='#30ce7d' fillOpacity='0.75' transform='scale(1.15905 1.15905)'>
+        <circle cx='0' cy='0' r='6' className={_s.fillColorSecondary} fillOpacity='0.75' transform='scale(1.15905 1.15905)'>
           <animateTransform attributeName='transform' type='scale' begin='-0.7352941176470588s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform>
           <animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.7352941176470588s'></animate>
         </circle>
@@ -37,7 +37,7 @@ const LoadingIcon = ({
     </g>
     <g transform='translate(27.37258300203048,72.62741699796952)'>
       <g transform='rotate(135)'>
-        <circle cx='0' cy='0' r='6' fill='#30ce7d' fillOpacity='0.625' transform='scale(1.22155 1.22155)'>
+        <circle cx='0' cy='0' r='6' className={_s.fillColorSecondary} fillOpacity='0.625' transform='scale(1.22155 1.22155)'>
           <animateTransform attributeName='transform' type='scale' begin='-0.588235294117647s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform>
           <animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.588235294117647s'></animate>
         </circle>
@@ -45,7 +45,7 @@ const LoadingIcon = ({
     </g>
     <g transform='translate(18,50)'>
       <g transform='rotate(180)'>
-        <circle cx='0' cy='0' r='6' fill='#30ce7d' fillOpacity='0.5' transform='scale(1.28405 1.28405)'>
+        <circle cx='0' cy='0' r='6' className={_s.fillColorSecondary} fillOpacity='0.5' transform='scale(1.28405 1.28405)'>
           <animateTransform attributeName='transform' type='scale' begin='-0.4411764705882352s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform>
           <animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.4411764705882352s'></animate>
         </circle>
@@ -53,7 +53,7 @@ const LoadingIcon = ({
     </g>
     <g transform='translate(27.372583002030474,27.37258300203048)'>
       <g transform='rotate(225)'>
-        <circle cx='0' cy='0' r='6' fill='#30ce7d' fillOpacity='0.375' transform='scale(1.34655 1.34655)'>
+        <circle cx='0' cy='0' r='6' className={_s.fillColorSecondary} fillOpacity='0.375' transform='scale(1.34655 1.34655)'>
           <animateTransform attributeName='transform' type='scale' begin='-0.2941176470588235s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform>
           <animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.2941176470588235s'></animate>
         </circle>
@@ -61,7 +61,7 @@ const LoadingIcon = ({
     </g>
     <g transform='translate(50,18)'>
       <g transform='rotate(270)'>
-        <circle cx='0' cy='0' r='6' fill='#30ce7d' fillOpacity='0.25' transform='scale(1.40905 1.40905)'>
+        <circle cx='0' cy='0' r='6' className={_s.fillColorSecondary} fillOpacity='0.25' transform='scale(1.40905 1.40905)'>
           <animateTransform attributeName='transform' type='scale' begin='-0.14705882352941174s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform>
           <animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.14705882352941174s'></animate>
         </circle>
@@ -69,7 +69,7 @@ const LoadingIcon = ({
     </g>
     <g transform='translate(72.62741699796952,27.372583002030474)'>
       <g transform='rotate(315)'>
-        <circle cx='0' cy='0' r='6' fill='#30ce7d' fillOpacity='0.125' transform='scale(1.47155 1.47155)'>
+        <circle cx='0' cy='0' r='6' className={_s.fillColorSecondary} fillOpacity='0.125' transform='scale(1.47155 1.47155)'>
           <animateTransform attributeName='transform' type='scale' begin='0s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform>
           <animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='0s'></animate>
         </circle>
diff --git a/app/javascript/gabsocial/base_polyfills.js b/app/javascript/gabsocial/base_polyfills.js
index d54ed977..b2780077 100644
--- a/app/javascript/gabsocial/base_polyfills.js
+++ b/app/javascript/gabsocial/base_polyfills.js
@@ -8,6 +8,9 @@ import assign from 'object-assign';
 import values from 'object.values';
 import isNaN from 'is-nan';
 import { decode as decodeBase64 } from './utils/base64';
+import cssVars from 'css-vars-ponyfill';
+
+cssVars()
 
 if (!Array.prototype.includes) {
   includes.shim();
diff --git a/app/javascript/gabsocial/components/account.js b/app/javascript/gabsocial/components/account.js
index 3399b680..85f3cd7d 100644
--- a/app/javascript/gabsocial/components/account.js
+++ b/app/javascript/gabsocial/components/account.js
@@ -151,7 +151,7 @@ class Account extends ImmutablePureComponent {
     )
 
     return (
-      <div className={[_s.default, _s.px15, _s.py5, _s.backgroundSubtle_onHover, _s.mb5].join(' ')}>
+      <div className={[_s.default, _s.px15, _s.py5, _s.backgroundColorSubtle_onHover, _s.mb5].join(' ')}>
         <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
 
           <NavLink
diff --git a/app/javascript/gabsocial/components/autosuggest_textbox.js b/app/javascript/gabsocial/components/autosuggest_textbox.js
index 1a960af1..76b226d9 100644
--- a/app/javascript/gabsocial/components/autosuggest_textbox.js
+++ b/app/javascript/gabsocial/components/autosuggest_textbox.js
@@ -234,7 +234,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
       displayBlock: 1,
       outlineNone: 1,
       backgroundColorPrimary: !small,
-      backgroundSubtle: small,
+      backgroundColorSubtle: small,
       py15: !small,
       py10: small,
       fontSize16PX: !small,
diff --git a/app/javascript/gabsocial/components/button.js b/app/javascript/gabsocial/components/button.js
index 59056270..e905b143 100644
--- a/app/javascript/gabsocial/components/button.js
+++ b/app/javascript/gabsocial/components/button.js
@@ -140,8 +140,8 @@ export default class Button extends PureComponent {
       backgroundColorBlack: backgroundColor === COLORS.black,
       backgroundColorBrand: backgroundColor === COLORS.brand,
       backgroundTransparent: backgroundColor === COLORS.none,
-      backgroundSubtle2: backgroundColor === COLORS.tertiary,
-      backgroundSubtle: backgroundColor === COLORS.secondary,
+      backgroundColorSubtle2: backgroundColor === COLORS.tertiary,
+      backgroundColorSubtle: backgroundColor === COLORS.secondary,
       backgroundColorDanger: backgroundColor === COLORS.danger,
       
       colorPrimary: !!children && color === COLORS.primary,
@@ -164,7 +164,7 @@ export default class Button extends PureComponent {
 
       underline_onHover: underlineOnHover,
 
-      backgroundSubtle2Dark_onHover: backgroundColor === COLORS.tertiary || backgroundColor === COLORS.secondary,
+      backgroundColorSubtle2Dark_onHover: backgroundColor === COLORS.tertiary || backgroundColor === COLORS.secondary,
       backgroundColorBlackOpaque_onHover: backgroundColor === COLORS.black,
       backgroundColorBrandDark_onHover: backgroundColor === COLORS.brand,
       backgroundColorDangerDark_onHover: backgroundColor === COLORS.danger,
diff --git a/app/javascript/gabsocial/components/comment.js b/app/javascript/gabsocial/components/comment.js
index 9b0678af..d58ef82a 100644
--- a/app/javascript/gabsocial/components/comment.js
+++ b/app/javascript/gabsocial/components/comment.js
@@ -61,7 +61,7 @@ class Comment extends ImmutablePureComponent {
             </NavLink>
 
             <div className={[_s.default, _s.flexNormal].join(' ')}>
-              <div className={[_s.default, _s.px10, _s.pt5, _s.pb10, _s.radiusSmall, _s.backgroundSubtle].join(' ')}>
+              <div className={[_s.default, _s.px10, _s.pt5, _s.pb10, _s.radiusSmall, _s.backgroundColorSubtle].join(' ')}>
                 <CommentHeader status={status} />
                 <StatusContent
                   status={status}
@@ -103,7 +103,7 @@ class CommentButton extends PureComponent {
         radiusSmall
         backgroundColor='none'
         color='tertiary'
-        className={[_s.px5, _s.backgroundSubtle_onHover, _s.py2, _s.mr5].join(' ')}
+        className={[_s.px5, _s.backgroundColorSubtle_onHover, _s.py2, _s.mr5].join(' ')}
         onClick={onClick}
       >
         <Text size='extraSmall' color='inherit' weight='bold'>
diff --git a/app/javascript/gabsocial/components/display_name.js b/app/javascript/gabsocial/components/display_name.js
index b56cba41..18c37d04 100644
--- a/app/javascript/gabsocial/components/display_name.js
+++ b/app/javascript/gabsocial/components/display_name.js
@@ -180,7 +180,7 @@ class DisplayName extends ImmutablePureComponent {
                   size='extraSmall'
                   isBadge
                   color='tertiary'
-                  className={[_s.backgroundSubtle2, _s.py2].join(' ')}
+                  className={[_s.backgroundColorSubtle2, _s.py2].join(' ')}
                 >
                   {relationshipLabel}
                 </Text>
diff --git a/app/javascript/gabsocial/components/divider.js b/app/javascript/gabsocial/components/divider.js
index 0d48090c..7af4fce2 100644
--- a/app/javascript/gabsocial/components/divider.js
+++ b/app/javascript/gabsocial/components/divider.js
@@ -21,7 +21,7 @@ export default class Divider extends PureComponent {
     const classes = cx({
       default: 1,
       borderBottom1PX: !isInvisible,
-      borderColorSecondary2: !isInvisible,
+      borderColorSecondary: !isInvisible,
       width100PC: 1,
       mb15: !isSmall,
       my10: isSmall || isInvisible,
diff --git a/app/javascript/gabsocial/components/group_collection_item.js b/app/javascript/gabsocial/components/group_collection_item.js
index a9c7ff12..f86dd34a 100644
--- a/app/javascript/gabsocial/components/group_collection_item.js
+++ b/app/javascript/gabsocial/components/group_collection_item.js
@@ -60,13 +60,14 @@ class GroupCollectionItem extends ImmutablePureComponent {
       noUnderline: 1,
       overflowHidden: 1,
       borderColorSecondary: 1,
+      boxShadowBlock: 1,
       radiusSmall: 1,
-      border1PX: 1,
+      borderTop1PX: 1,
       mb10: 1,
       ml5: 1,
       mr5: 1,
       backgroundColorPrimary: 1,
-      backgroundSubtle_onHover: isMember,
+      backgroundColorSubtle_onHover: isMember,
     })
 
     return (
@@ -86,7 +87,7 @@ class GroupCollectionItem extends ImmutablePureComponent {
 
           {
             !coverSrc && (isMember || isAdmin) &&
-            <div className={[_s.default, _s.height40PX, _s.backgroundSubtle, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')} />
+            <div className={[_s.default, _s.height40PX, _s.backgroundColorSubtle, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')} />
           }
 
           {
@@ -122,7 +123,7 @@ class GroupCollectionItem extends ImmutablePureComponent {
               {group.get('title')}
             </Text>
 
-            <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.my5].join(' ')}>
+            <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.mt5, _s.mb5].join(' ')}>
               <Text color='secondary' size='small'>
                 {shortNumberFormat(group.get('member_count'))}
                 &nbsp;
diff --git a/app/javascript/gabsocial/components/group_list_item.js b/app/javascript/gabsocial/components/group_list_item.js
index eb5f6f3a..77d779a3 100644
--- a/app/javascript/gabsocial/components/group_list_item.js
+++ b/app/javascript/gabsocial/components/group_list_item.js
@@ -57,7 +57,7 @@ class GroupListItem extends ImmutablePureComponent {
       default: 1,
       noUnderline: 1,
       overflowHidden: 1,
-      backgroundSubtle_onHover: 1,
+      backgroundColorSubtle_onHover: 1,
       borderColorSecondary: 1,
       radiusSmall: !slim,
       mt5: !slim,
diff --git a/app/javascript/gabsocial/components/hashtag_item.js b/app/javascript/gabsocial/components/hashtag_item.js
index 622d2733..21811a86 100644
--- a/app/javascript/gabsocial/components/hashtag_item.js
+++ b/app/javascript/gabsocial/components/hashtag_item.js
@@ -23,7 +23,7 @@ export default class HashtagItem extends ImmutablePureComponent {
     return (
       <NavLink
         to={`/tags/${hashtag.get('name')}`}
-        className={[_s.default, _s.noUnderline, _s.backgroundSubtle_onHover, _s.px15, _s.py5].join(' ')}
+        className={[_s.default, _s.noUnderline, _s.backgroundColorSubtle_onHover, _s.px15, _s.py5].join(' ')}
       >
         <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
           <div>
diff --git a/app/javascript/gabsocial/components/image.js b/app/javascript/gabsocial/components/image.js
index b5816d5b..ce109dd1 100644
--- a/app/javascript/gabsocial/components/image.js
+++ b/app/javascript/gabsocial/components/image.js
@@ -50,7 +50,7 @@ export default class Image extends PureComponent {
     const classes = cx(className, {
       default: 1,
       objectFitCover: !!src && fit === 'cover',
-      backgroundSubtle2: 1,
+      backgroundColorSubtle2: 1,
     })
 
     //If error and not our own image
diff --git a/app/javascript/gabsocial/components/input.js b/app/javascript/gabsocial/components/input.js
index b574ca8a..7af3b122 100644
--- a/app/javascript/gabsocial/components/input.js
+++ b/app/javascript/gabsocial/components/input.js
@@ -54,7 +54,7 @@ export default class Input extends PureComponent {
       py10: !small,
       py5: small,
       backgroundTransparent: !readOnly,
-      backgroundSubtle2: readOnly,
+      backgroundColorSubtle2: readOnly,
       colorSecondary: readOnly,
       fontSize15PX: !small,
       fontSize13PX: small,
@@ -91,7 +91,7 @@ export default class Input extends PureComponent {
         <div className={[_s.default, _s.backgroundColorPrimary, _s.border1PX, _s.borderColorSecondary, _s.flexRow, _s.circle, _s.alignItemsCenter].join(' ')}>
           {
             !!prependIcon &&
-            <Icon id={prependIcon} size='16px' className={[_s.ml15, _s.mr5].join(' ')} />
+            <Icon id={prependIcon} size='16px' className={[_s.fillColorPrimary, _s.ml15, _s.mr5].join(' ')} />
           }
 
           <input
diff --git a/app/javascript/gabsocial/components/link_footer.js b/app/javascript/gabsocial/components/link_footer.js
index 6eca6bfa..4fec79e3 100644
--- a/app/javascript/gabsocial/components/link_footer.js
+++ b/app/javascript/gabsocial/components/link_footer.js
@@ -112,7 +112,7 @@ class LinkFooter extends PureComponent {
                   href={linkFooterItem.to}
                   data-method={linkFooterItem.logout ? 'delete' : null}
                   onClick={linkFooterItem.onClick || null}
-                  className={[_s.my5, _s.pr15].join(' ')}
+                  className={[_s.mt5, _s.mb5, _s.pr15].join(' ')}
                 >
                   <Text size='small' color='tertiary'>
                     {linkFooterItem.text}
diff --git a/app/javascript/gabsocial/components/list_item.js b/app/javascript/gabsocial/components/list_item.js
index abc41bbb..fd38d862 100644
--- a/app/javascript/gabsocial/components/list_item.js
+++ b/app/javascript/gabsocial/components/list_item.js
@@ -45,7 +45,7 @@ export default class ListItem extends PureComponent {
       flexRow: 1,
       alignItemsCenter: 1,
       width100PC: 1,
-      backgroundSubtle_onHover: 1,
+      backgroundColorSubtle_onHover: 1,
       borderColorSecondary: !isLast,
       borderBottom1PX: !isLast,
     })
@@ -53,7 +53,7 @@ export default class ListItem extends PureComponent {
     const iconClasses = cx({
       mr10: !large,
       mr15: large,
-      fillColorBlack: 1,
+      fillColorPrimary: 1,
     })
 
     const textSize = small ? 'small' : large ? 'medium' : 'normal'
diff --git a/app/javascript/gabsocial/components/media_gallery.js b/app/javascript/gabsocial/components/media_gallery.js
index aed09ea5..ab49fd67 100644
--- a/app/javascript/gabsocial/components/media_gallery.js
+++ b/app/javascript/gabsocial/components/media_gallery.js
@@ -216,7 +216,7 @@ class Item extends ImmutablePureComponent {
             playsInline
           />
 
-          <div className={[_s.default, _s.posAbs, _s.z2, _s.radiusSmall, _s.backgroundColorOpaque, _s.px5, _s.py5, _s.mr10, _s.mb10, _s.bottom0, _s.right0].join(' ')}>
+          <div className={[_s.default, _s.posAbs, _s.z2, _s.radiusSmall, _s.backgroundColorBlackOpaque, _s.px5, _s.py5, _s.mr10, _s.mb10, _s.bottom0, _s.right0].join(' ')}>
             <Text size='extraSmall' color='white' weight='medium'>GIF</Text>
           </div>
         </div>
diff --git a/app/javascript/gabsocial/components/media_item.js b/app/javascript/gabsocial/components/media_item.js
index 1d253091..dd195742 100644
--- a/app/javascript/gabsocial/components/media_item.js
+++ b/app/javascript/gabsocial/components/media_item.js
@@ -91,8 +91,8 @@ export default class MediaItem extends ImmutablePureComponent {
       height100PC: 1,
       overflowHidden: 1,
       border1PX: 1,
-      borderColorSecondary: !small,
-      borderColorWhite: small,
+      borderColorPrimary: !small,
+      borderColorPrimary: small,
     })
 
     return (
@@ -137,7 +137,7 @@ export default class MediaItem extends ImmutablePureComponent {
 
               {
                 !!badge &&
-                <div className={[_s.default, _s.posAbs, _s.radiusSmall, _s.backgroundColorOpaque, _s.px5, _s.py5, _s.mr5, _s.my5, _s.bottom0, _s.right0].join(' ')}>
+                <div className={[_s.default, _s.posAbs, _s.radiusSmall, _s.backgroundColorBlackOpaque, _s.px5, _s.py5, _s.mr5, _s.mt5, _s.mb5, _s.bottom0, _s.right0].join(' ')}>
                   <Text size='extraSmall' color='white'>
                     {badge}
                   </Text>
diff --git a/app/javascript/gabsocial/components/modal/embed_modal.js b/app/javascript/gabsocial/components/modal/embed_modal.js
index af75a4d3..d6571a00 100644
--- a/app/javascript/gabsocial/components/modal/embed_modal.js
+++ b/app/javascript/gabsocial/components/modal/embed_modal.js
@@ -89,7 +89,7 @@ class EmbedModal extends ImmutablePureComponent {
             {intl.formatMessage(messages.preview)}
           </Text>
 
-          <div className={[_s.default, _s.width100PC, _s.backgroundSubtle, _s.height220PX, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+          <div className={[_s.default, _s.width100PC, _s.backgroundColorSubtle, _s.height220PX, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
             <iframe
               className={[_s.default, _s.width100PC, _s.height100PC, _s.z2].join(' ')}
               frameBorder='0'
diff --git a/app/javascript/gabsocial/components/modal/modal_base.js b/app/javascript/gabsocial/components/modal/modal_base.js
index a76c736a..66a9fd59 100644
--- a/app/javascript/gabsocial/components/modal/modal_base.js
+++ b/app/javascript/gabsocial/components/modal/modal_base.js
@@ -137,7 +137,7 @@ class ModalBase extends PureComponent {
           <Fragment>
             <div
               role='presentation'
-              className={[_s.default, _s.backgroundColorOpaque, _s.posFixed, _s.z3, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')}
+              className={[_s.default, _s.backgroundColorBlackOpaque, _s.posFixed, _s.z3, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')}
             />
             <div
               ref={this.setDialog}
diff --git a/app/javascript/gabsocial/components/notification.js b/app/javascript/gabsocial/components/notification.js
index f8df5e9c..2bfda25b 100644
--- a/app/javascript/gabsocial/components/notification.js
+++ b/app/javascript/gabsocial/components/notification.js
@@ -84,11 +84,11 @@ class Notification extends ImmutablePureComponent {
     }
 
     return (
-      <div className={[_s.default, _s.px10, _s.cursorPointer, _s.backgroundSubtle_onHover].join(' ')}>
+      <div className={[_s.default, _s.px10, _s.cursorPointer, _s.backgroundColorSubtle_onHover].join(' ')}>
         <div className={[_s.default, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
           <div className={[_s.default, _s.flexRow, _s.my10, _s.py10, _s.px10].join(' ')}>
 
-            <Icon id={icon} size='20px' className={_s.mt5} />
+            <Icon id={icon} size='20px' className={[_s.fillColorPrimary, _s.mt5].join(' ')} />
 
             <div className={[_s.default, _s.ml15, _s.flexNormal].join(' ')}>
               <div className={[_s.default, _s.flexRow].join(' ')}>
diff --git a/app/javascript/gabsocial/components/panel/panel_layout.js b/app/javascript/gabsocial/components/panel/panel_layout.js
index 4a1c36a5..80b6325d 100644
--- a/app/javascript/gabsocial/components/panel/panel_layout.js
+++ b/app/javascript/gabsocial/components/panel/panel_layout.js
@@ -87,7 +87,7 @@ export default class PanelLayout extends PureComponent {
                 backgroundColor='none'
                 to={footerButtonTo}
                 onClick={footerButtonAction}
-                className={[_s.px15, _s.py15, _s.backgroundSubtle_onHover].join(' ')}
+                className={[_s.px15, _s.py15, _s.backgroundColorSubtle_onHover].join(' ')}
               >
                 <Text color='brand' size='medium'>
                   {footerButtonTitle}
diff --git a/app/javascript/gabsocial/components/panel/user_panel.js b/app/javascript/gabsocial/components/panel/user_panel.js
index 3bb759b5..40fc0fdc 100644
--- a/app/javascript/gabsocial/components/panel/user_panel.js
+++ b/app/javascript/gabsocial/components/panel/user_panel.js
@@ -106,7 +106,7 @@ class UserPanel extends ImmutablePureComponent {
           className={[_s.default, _s.flexRow, _s.py10, _s.px15, _s.noUnderline].join(' ')}
           to={`/${acct}`}
         >
-          <div className={[_s.default, _s.mtNeg32PX, _s.circle, _s.borderColorWhite, _s.border6PX].join(' ')}>
+          <div className={[_s.default, _s.mtNeg32PX, _s.circle, _s.borderColorPrimary, _s.border6PX].join(' ')}>
             <Avatar account={account} size={62} noHover />
           </div>
           <div className={[_s.default, _s.ml15].join(' ')}>
diff --git a/app/javascript/gabsocial/components/poll.js b/app/javascript/gabsocial/components/poll.js
index 7e4bfdc6..319a954d 100644
--- a/app/javascript/gabsocial/components/poll.js
+++ b/app/javascript/gabsocial/components/poll.js
@@ -92,7 +92,7 @@ class Poll extends ImmutablePureComponent {
       left0: 1,
       radiusSmall: 1,
       height100PC: 1,
-      backgroundSubtle2: !leading,
+      backgroundColorSubtle2: !leading,
       backgroundColorBrandLight: leading,
     })
 
@@ -107,11 +107,11 @@ class Poll extends ImmutablePureComponent {
       py10: showResults,
       mb10: 1,
       border1PX: !showResults,
-      borderColorSecondary: !showResults,
+      fillColorSecondary: !showResults,
       circle: !showResults,
       cursorPointer: !showResults,
-      backgroundSubtle_onHover: !showResults,
-      backgroundSubtle: !showResults && active,
+      backgroundColorSubtle_onHover: !showResults,
+      backgroundColorSubtle: !showResults && active,
     })
 
     const textContainerClasses = cx({
@@ -156,6 +156,7 @@ class Poll extends ImmutablePureComponent {
             }
 
             {
+              /* : todo : */
               !showResults && <span className={inputClasses} />
             }
 
diff --git a/app/javascript/gabsocial/components/popover/popover_base.js b/app/javascript/gabsocial/components/popover/popover_base.js
index cb78b524..aa11b3f7 100644
--- a/app/javascript/gabsocial/components/popover/popover_base.js
+++ b/app/javascript/gabsocial/components/popover/popover_base.js
@@ -134,7 +134,7 @@ class PopoverBase extends ImmutablePureComponent {
           referenceElement={targetRef}
         >
           {({ ref, style, placement, arrowProps }) => (
-            <div ref={ref} style={style} data-placement={placement} className={[_s.my5, _s.boxShadow2].join(' ')}>
+            <div ref={ref} style={style} data-placement={placement} className={[_s.mt5, _s.mb5, _s.boxShadowPopover].join(' ')}>
               <div ref={arrowProps.ref} style={arrowProps.style} />
               <div ref={innerRef} data-popover='true' onKeyDown={this.handleKeyDown} className={containerClasses}>
                 {children}
diff --git a/app/javascript/gabsocial/components/popover/status_visibility_popover.js b/app/javascript/gabsocial/components/popover/status_visibility_popover.js
index 6d2e6c31..d76bf736 100644
--- a/app/javascript/gabsocial/components/popover/status_visibility_popover.js
+++ b/app/javascript/gabsocial/components/popover/status_visibility_popover.js
@@ -90,7 +90,7 @@ class StatusVisibilityDropdown extends PureComponent {
                 cursorPointer: 1,
                 borderBottom1PX: !isLast,
                 borderColorSecondary: !isLast,
-                backgroundSubtle_onHover: !isActive,
+                backgroundColorSubtle_onHover: !isActive,
                 backgroundColorBrand: isActive,
               })
 
diff --git a/app/javascript/gabsocial/components/profile_header.js b/app/javascript/gabsocial/components/profile_header.js
index 7a325d39..6064ca22 100644
--- a/app/javascript/gabsocial/components/profile_header.js
+++ b/app/javascript/gabsocial/components/profile_header.js
@@ -131,7 +131,7 @@ class ProfileHeader extends ImmutablePureComponent {
           </div>
         }
 
-        <div className={[_s.default, _s.borderBottom1PX, _s.borderColorSecondary, _s.width100PC].join(' ')}>
+        <div className={[_s.default, _s.width100PC].join(' ')}>
 
           <div className={[_s.default, _s.flexRow, _s.pr15, _s.pl25, _s.mb5].join(' ')}>
             <div className={avatarContainerClasses}>
diff --git a/app/javascript/gabsocial/components/progress_bar.js b/app/javascript/gabsocial/components/progress_bar.js
index 5f9093c3..9997318b 100644
--- a/app/javascript/gabsocial/components/progress_bar.js
+++ b/app/javascript/gabsocial/components/progress_bar.js
@@ -26,8 +26,8 @@ export default class ProgressBar extends PureComponent {
 
     const containerClassName = cx({
       default: 1,
-      backgroundPanel: !small,
-      backgroundSubtle2: small,
+      backgroundColorLoading: !small,
+      backgroundColorSubtle2: small,
       noUnderline: 1,
       circle: 1,
       overflowHidden: 1,
diff --git a/app/javascript/gabsocial/components/rich_text_editor_bar.js b/app/javascript/gabsocial/components/rich_text_editor_bar.js
index f793e396..cf5434d3 100644
--- a/app/javascript/gabsocial/components/rich_text_editor_bar.js
+++ b/app/javascript/gabsocial/components/rich_text_editor_bar.js
@@ -179,7 +179,7 @@ class StyleButton extends PureComponent {
       px10: 1,
       mr5: 1,
       noSelect: 1,
-      backgroundSubtle2Dark_onHover: 1,
+      backgroundColorSubtle2Dark_onHover: 1,
       backgroundColorBrandLight: active,
       // py10: !small,
       // py5: small,
diff --git a/app/javascript/gabsocial/components/sensitive_media_item.js b/app/javascript/gabsocial/components/sensitive_media_item.js
index f8567711..b883507b 100644
--- a/app/javascript/gabsocial/components/sensitive_media_item.js
+++ b/app/javascript/gabsocial/components/sensitive_media_item.js
@@ -35,7 +35,7 @@ class SensitiveMediaItem extends PureComponent {
               onClick={onClick}
               color='tertiary'
               backgroundColor='none'
-              className={_s.backgroundSubtle2Dark_onHover}
+              className={_s.backgroundColorSubtle2Dark_onHover}
             >
               <Text color='inherit' weight='bold' size='medium'>
                 {intl.formatMessage(messages.view)}
diff --git a/app/javascript/gabsocial/components/sidebar_section_item.js b/app/javascript/gabsocial/components/sidebar_section_item.js
index 9c1cc644..ea67d0c1 100644
--- a/app/javascript/gabsocial/components/sidebar_section_item.js
+++ b/app/javascript/gabsocial/components/sidebar_section_item.js
@@ -83,7 +83,7 @@ export default class SidebarSectionItem extends PureComponent {
     })
 
     const iconClasses = cx({
-      fillColorBlack: 1,
+      fillColorPrimary: 1,
     })
 
     const countClasses = cx({
diff --git a/app/javascript/gabsocial/components/status.js b/app/javascript/gabsocial/components/status.js
index 12911e5e..57a3bbb9 100644
--- a/app/javascript/gabsocial/components/status.js
+++ b/app/javascript/gabsocial/components/status.js
@@ -465,7 +465,7 @@ class Status extends ImmutablePureComponent {
       pb10: isChild && status.get('media_attachments').size === 0,
       pb5: isChild && status.get('media_attachments').size > 1,
       cursorPointer: isChild,
-      backgroundSubtle_onHover: isChild,
+      backgroundColorSubtle_onHover: isChild,
     })
 
     return (
diff --git a/app/javascript/gabsocial/components/status_action_bar.js b/app/javascript/gabsocial/components/status_action_bar.js
index 673aacb8..2f4260ed 100644
--- a/app/javascript/gabsocial/components/status_action_bar.js
+++ b/app/javascript/gabsocial/components/status_action_bar.js
@@ -112,6 +112,7 @@ class StatusActionBar extends ImmutablePureComponent {
       fontWeightNormal: 1,
       noUnderline: 1,
       underline_onHover: 1,
+      backgroundTransparent: 1,
       mr10: 1,
       py5: 1,
     })
diff --git a/app/javascript/gabsocial/components/status_action_bar_item.js b/app/javascript/gabsocial/components/status_action_bar_item.js
index 02295993..8aa91006 100644
--- a/app/javascript/gabsocial/components/status_action_bar_item.js
+++ b/app/javascript/gabsocial/components/status_action_bar_item.js
@@ -34,7 +34,7 @@ export default class StatusActionBarItem extends PureComponent {
       justifyContentCenter: 1,
       alignItemsCenter: 1,
       px10: 1,
-      backgroundSubtle_onHover: !disabled,
+      backgroundColorSubtle_onHover: !disabled,
     })
 
     const color = active ? 'brand' : 'secondary'
diff --git a/app/javascript/gabsocial/components/status_card.js b/app/javascript/gabsocial/components/status_card.js
index 6d7eeb46..fccb7d59 100644
--- a/app/javascript/gabsocial/components/status_card.js
+++ b/app/javascript/gabsocial/components/status_card.js
@@ -159,7 +159,7 @@ export default class Card extends ImmutablePureComponent {
     const description = (
       <div className={[_s.default, _s.flexNormal, _s.px10, _s.py10, _s.borderColorSecondary, _s.borderLeft1PX].join(' ')}>
         {title}
-        <p className={[_s.default, _s.displayFlex, _s.text, _s.my5, _s.overflowWrapBreakWord, _s.colorSecondary, _s.fontSize13PX, _s.fontWeightNormal].join(' ')}>
+        <p className={[_s.default, _s.displayFlex, _s.text, _s.mt5, _s.mb5, _s.overflowWrapBreakWord, _s.colorSecondary, _s.fontSize13PX, _s.fontWeightNormal].join(' ')}>
           {trim(card.get('description') || '', maxDescription)}
         </p>
         <span className={[_s.default, _s.mtAuto, _s.flexRow, _s.alignItemsCenter, _s.colorSecondary, _s.text, _s.displayFlex, _s.textOverflowEllipsis, _s.fontSize13PX].join(' ')}>
@@ -189,7 +189,7 @@ export default class Card extends ImmutablePureComponent {
 
       return (
         <div className={[_s.default, _s.width100PC, _s.px10].join(' ')}>
-          <div className={[_s.default, _s.overflowHidden, _s.width100PC, _s.borderColorSecondary2, _s.border1PX, _s.radiusSmall].join(' ')}>
+          <div className={[_s.default, _s.overflowHidden, _s.width100PC, _s.borderColorSecondary, _s.border1PX, _s.radiusSmall].join(' ')}>
             <div className={[_s.default, _s.width100PC].join(' ')}>
               <div className={[_s.default, _s.width100PC, _s.pt5625PC].join(' ')}>
                 { !!embed && embed}
@@ -197,7 +197,7 @@ export default class Card extends ImmutablePureComponent {
                 { !embed &&
                   <div className={[_s.default, _s.posAbs, _s.top0, _s.right0, _s.left0, _s.bottom0, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
                     <button
-                      className={[_s.default, _s.cursorPointer, _s.backgroundColorOpaque, _s.radiusSmall, _s.py15, _s.px15].join(' ')}
+                      className={[_s.default, _s.cursorPointer, _s.backgroundColorBlackOpaque, _s.radiusSmall, _s.py15, _s.px15].join(' ')}
                       onClick={this.handleEmbedClick}
                     >
                       <Icon id={iconVariant} size='22px' className={[_s.fillColorWhite].join(' ')} />
@@ -228,7 +228,7 @@ export default class Card extends ImmutablePureComponent {
       <div className={[_s.default, _s.width100PC, _s.px10].join(' ')}>
         <a
           href={card.get('url')}
-          className={[_s.default, _s.cursorPointer, _s.flexRow, _s.overflowHidden, _s.noUnderline, _s.width100PC, _s.backgroundSubtle_onHover, _s.borderColorSecondary2, _s.border1PX, _s.radiusSmall].join(' ')}
+          className={[_s.default, _s.cursorPointer, _s.flexRow, _s.overflowHidden, _s.noUnderline, _s.width100PC, _s.backgroundColorSubtle_onHover, _s.borderColorSecondary, _s.border1PX, _s.radiusSmall].join(' ')}
           rel='noopener noreferrer'
           ref={this.setRef}
         >
diff --git a/app/javascript/gabsocial/components/status_content.js b/app/javascript/gabsocial/components/status_content.js
index c6c04485..d8141b25 100644
--- a/app/javascript/gabsocial/components/status_content.js
+++ b/app/javascript/gabsocial/components/status_content.js
@@ -254,7 +254,7 @@ class StatusContent extends ImmutablePureComponent {
 
           <div className={spoilerContainerClasses}>
             <div className={[_s.default, _s.flexRow, _s.mr5].join(' ')}>
-              <Icon id='warning' size='14px' className={[_s.fillColorBlack, _s.mt2, _s.mr5].join(' ')}/>
+              <Icon id='warning' size='14px' className={[_s.fillColorPrimary, _s.mt2, _s.mr5].join(' ')}/>
               <div
                 className={_s.statusContent}
                 dangerouslySetInnerHTML={spoilerContent}
diff --git a/app/javascript/gabsocial/components/switch.js b/app/javascript/gabsocial/components/switch.js
index 0d9e7af4..970c8783 100644
--- a/app/javascript/gabsocial/components/switch.js
+++ b/app/javascript/gabsocial/components/switch.js
@@ -46,7 +46,7 @@ export default class Switch extends PureComponent {
       width20PX: 1,
       circle: 1,
       posAbs: 1,
-      backgroundSubtle2: !checked,
+      backgroundColorSubtle2: !checked,
       backgroundColorPrimary: checked,
       left0: !checked,
       right0: checked,
diff --git a/app/javascript/gabsocial/components/tab_bar_item.js b/app/javascript/gabsocial/components/tab_bar_item.js
index e92b2750..84aa3a49 100644
--- a/app/javascript/gabsocial/components/tab_bar_item.js
+++ b/app/javascript/gabsocial/components/tab_bar_item.js
@@ -89,7 +89,7 @@ class TabBarItem extends PureComponent {
       radiusSmall: 1,
       px10: !isLarge,
       px15: isLarge,
-      backgroundSubtle2Dark_onHover: !active,
+      backgroundColorSubtle2Dark_onHover: !active,
     })
 
     const textOptions = {
diff --git a/app/javascript/gabsocial/components/timeline_compose_block.js b/app/javascript/gabsocial/components/timeline_compose_block.js
index 1a300c07..b60449c2 100644
--- a/app/javascript/gabsocial/components/timeline_compose_block.js
+++ b/app/javascript/gabsocial/components/timeline_compose_block.js
@@ -53,7 +53,7 @@ class TimelineComposeBlock extends ImmutablePureComponent {
     return (
       <section className={[_s.default, _s.mb15].join(' ')}>
         <Block>
-          <div className={[_s.default, _s.backgroundSubtle, _s.borderTop1PX, _s.borderBottom1PX, _s.borderColorSecondary, _s.px15, _s.py2, _s.alignItemsCenter, _s.flexRow].join(' ')}>
+          <div className={[_s.default, _s.backgroundColorSubtle, _s.borderTop1PX, _s.borderBottom1PX, _s.borderColorSecondary, _s.px15, _s.py2, _s.alignItemsCenter, _s.flexRow].join(' ')}>
             <div className={_s.mr10}>
               <Avatar account={account} size={20} noHover />
             </div>
diff --git a/app/javascript/gabsocial/components/trends_item.js b/app/javascript/gabsocial/components/trends_item.js
index 54cbfb5c..bdb33809 100644
--- a/app/javascript/gabsocial/components/trends_item.js
+++ b/app/javascript/gabsocial/components/trends_item.js
@@ -62,7 +62,7 @@ export default class TrendingItem extends PureComponent {
       pb5: 1,
       borderColorSecondary: !isLast,
       borderBottom1PX: !isLast,
-      backgroundSubtle_onHover: 1,
+      backgroundColorSubtle_onHover: 1,
     })
 
     const subtitleClasses = cx({
diff --git a/app/javascript/gabsocial/components/video.js b/app/javascript/gabsocial/components/video.js
index 38872853..27d62c0d 100644
--- a/app/javascript/gabsocial/components/video.js
+++ b/app/javascript/gabsocial/components/video.js
@@ -461,7 +461,7 @@ class Video extends PureComponent {
       px10: 1,
       py10: 1,
       backgroundColorBrand: 1,
-      marginLeftNeg5PX: 1,
+      mlNeg5PX: 1,
       z3: 1,
       boxShadow1: 1,
       opacity0: !dragging,
@@ -479,7 +479,7 @@ class Video extends PureComponent {
     const volumeControlClasses = cx({
       default: 1,
       posAbs: 1,
-      backgroundColorOpaque: 1,
+      backgroundColorBlackOpaque: 1,
       videoPlayerVolume: 1,
       height122PX: 1,
       circle: 1,
@@ -562,7 +562,7 @@ class Video extends PureComponent {
             }}
           />
           <span
-            className={[_s.default, _s.cursorPointer, _s.posAbs, _s.circle, _s.px5, _s.boxShadow1, _s.marginBottomNeg5PX, _s.py5, _s.backgroundColorPrimary, _s.z3].join(' ')}
+            className={[_s.default, _s.cursorPointer, _s.posAbs, _s.circle, _s.px5, _s.boxShadow1, _s.mbNeg5PX, _s.py5, _s.backgroundColorPrimary, _s.z3].join(' ')}
             tabIndex='0'
             style={{
               marginLeft: '7px',
@@ -579,8 +579,8 @@ class Video extends PureComponent {
             ref={this.setSeekRef}
           >
 
-            <div className={[progressClasses, _s.backgroundPanel, _s.width100PC].join(' ')} />
-            <div className={[progressClasses, _s.backgroundSubtle].join(' ')} style={{ width: `${buffer}%` }} />
+            <div className={[progressClasses, _s.backgroundColorLoading, _s.width100PC].join(' ')} />
+            <div className={[progressClasses, _s.backgroundColorSubtle].join(' ')} style={{ width: `${buffer}%` }} />
             <div className={[progressClasses, _s.backgroundColorBrand].join(' ')} style={{ width: `${progress}%` }} />
 
             <span
diff --git a/app/javascript/gabsocial/features/compose/components/compose_extra_button.js b/app/javascript/gabsocial/features/compose/components/compose_extra_button.js
index 84b4a535..a5b76eb2 100644
--- a/app/javascript/gabsocial/features/compose/components/compose_extra_button.js
+++ b/app/javascript/gabsocial/features/compose/components/compose_extra_button.js
@@ -27,7 +27,7 @@ export default class ComposeExtraButton extends PureComponent {
     } = this.props
 
     const btnClasses = cx({
-      backgroundSubtle_onHover: !active,
+      backgroundColorSubtle_onHover: !active,
       backgroundColorBrandLight: active,
       py10: !small,
       px10: !small,
diff --git a/app/javascript/gabsocial/features/compose/components/compose_form.js b/app/javascript/gabsocial/features/compose/components/compose_form.js
index adab51fe..3e59844a 100644
--- a/app/javascript/gabsocial/features/compose/components/compose_form.js
+++ b/app/javascript/gabsocial/features/compose/components/compose_form.js
@@ -257,7 +257,7 @@ class ComposeForm extends ImmutablePureComponent {
       alignItemsEnd: shouldCondense,
       flexRow: shouldCondense,
       radiusSmall: shouldCondense,
-      backgroundSubtle: shouldCondense,
+      backgroundColorSubtle: shouldCondense,
       px5: shouldCondense,
     })
 
diff --git a/app/javascript/gabsocial/features/compose/components/media_upload_item.js b/app/javascript/gabsocial/features/compose/components/media_upload_item.js
index 7ca859a4..cad11549 100644
--- a/app/javascript/gabsocial/features/compose/components/media_upload_item.js
+++ b/app/javascript/gabsocial/features/compose/components/media_upload_item.js
@@ -121,7 +121,8 @@ class Upload extends ImmutablePureComponent {
       right0: 1,
       bottom0: 1,
       left0: 1,
-      my5: 1,
+      mt5: 1,
+      mb5: 1,
       ml5: 1,
       mr5: 1,
       displayNone: !active,
diff --git a/app/javascript/gabsocial/layouts/layout.js b/app/javascript/gabsocial/layouts/layout.js
index 2a159cc3..a564e459 100644
--- a/app/javascript/gabsocial/layouts/layout.js
+++ b/app/javascript/gabsocial/layouts/layout.js
@@ -45,11 +45,11 @@ export default class Layout extends PureComponent {
           </Responsive>
         }
 
-        <main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary2, _s.borderLeft1PX].join(' ')}>
+        <main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary, _s.borderLeft1PX].join(' ')}>
 
           {
             !noHeader &&
-            <div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary2, _s.backgroundColorSecondary3, _s.z3, _s.top0, _s.posFixed].join(' ')}>
+            <div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary, _s.backgroundColorSecondary3, _s.z3, _s.top0, _s.posFixed].join(' ')}>
               <div className={[_s.default, _s.height53PX, _s.pl15, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
                 <div className={[_s.default, _s.width645PX].join(' ')}>
                   <ColumnHeader
diff --git a/app/javascript/gabsocial/layouts/search_layout.js b/app/javascript/gabsocial/layouts/search_layout.js
index e6b6afc3..a2b2382c 100644
--- a/app/javascript/gabsocial/layouts/search_layout.js
+++ b/app/javascript/gabsocial/layouts/search_layout.js
@@ -42,9 +42,9 @@ export default class SearchLayout extends PureComponent {
 
         <Sidebar />
 
-        <main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary2, _s.borderLeft1PX].join(' ')}>
+        <main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary, _s.borderLeft1PX].join(' ')}>
 
-          <div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary2, _s.backgroundColorSecondary3, _s.z3, _s.top0, _s.posFixed].join(' ')}>
+          <div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary, _s.backgroundColorSecondary3, _s.z3, _s.top0, _s.posFixed].join(' ')}>
             <div className={[_s.default, _s.height53PX, _s.pl15, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
               <div className={[_s.default, _s.width645PX].join(' ')}>
                 <ColumnHeader
diff --git a/app/javascript/gabsocial/layouts/settings_layout.js b/app/javascript/gabsocial/layouts/settings_layout.js
index d07b92ab..34c7c886 100644
--- a/app/javascript/gabsocial/layouts/settings_layout.js
+++ b/app/javascript/gabsocial/layouts/settings_layout.js
@@ -18,9 +18,9 @@ export default class SettingsLayout extends PureComponent {
 
         <Sidebar />
 
-        <main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary2, _s.borderLeft1PX].join(' ')}>
+        <main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary, _s.borderLeft1PX].join(' ')}>
 
-          <div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary2, _s.backgroundColorSecondary3, _s.z3, _s.top0, _s.posFixed].join(' ')}>
+          <div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary, _s.backgroundColorSecondary3, _s.z3, _s.top0, _s.posFixed].join(' ')}>
             <div className={[_s.default, _s.height53PX, _s.pl15, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
               <div className={[_s.default, _s.width100PC].join(' ')}>
                 <ColumnHeader
diff --git a/app/javascript/styles/global.css b/app/javascript/styles/global.css
index 822a8f78..33ff9020 100644
--- a/app/javascript/styles/global.css
+++ b/app/javascript/styles/global.css
@@ -1,3 +1,62 @@
+:root {
+  --radius: 8px;
+
+  --color_brand-dark: #38a16b;
+  --color_brand-light: #36e991;
+  --color_brand-light-opaque: rgb(54, 233, 145, .125);
+  --color_brand: #21cf7a;
+
+  --color_white: #fff;
+  --color_black: #2d3436;
+  --color_black-opaque: rgba(0, 0, 0, .8);
+  --color_black-opaquer: rgba(0, 0, 0, .4);
+  --color_gold: #ffd700;
+  --color_red: #de2960;
+  --color_red-dark: #c72c5b;
+
+  /* LIGHT THEME */
+  /* --solid_color_primary: #fff;
+  --solid_color_primary-opaque:rgba(255, 255, 255,.6);
+  --solid_color_secondary: #e2e8ec;
+  --solid_color_secondary-dark: #d9e0e5;
+  --solid_color_tertiary: #f6f6f9;
+  --solid_color_block: #f5f8fa;
+
+  --text_color_primary: #2d3436;
+  --text_color_secondary: #4b4f55;
+  --text_color_tertiary: #777;
+
+  --border_color_secondary: #ececed; */
+
+  /* MUTED THEME */
+  /* --solid_color_primary: #222;
+  --solid_color_primary-opaque:rgba(34, 34, 34, .6);
+  --solid_color_secondary: #4f5050;
+  --solid_color_secondary-dark: #424343;
+  --solid_color_tertiary: #333;
+  --solid_color_block: #3d3d3d;
+
+  --text_color_primary: #fff;
+  --text_color_secondary: #7b7b7b;
+  --text_color_tertiary: #656565;
+
+  --border_color_secondary: #424141;*/
+
+  /* BLACK THEME */
+  --solid_color_primary: #13171b;
+  --solid_color_primary-opaque:rgba(19, 23, 27, .6);
+  --solid_color_secondary: #4f5050;
+  --solid_color_secondary-dark: #424343;
+  --solid_color_tertiary: #000;
+  --solid_color_block: #202327;
+
+  --text_color_primary: #cccbcb;
+  --text_color_secondary: #61686E;
+  --text_color_tertiary: #656565;
+
+  --border_color_secondary: #212020;
+}
+
 html,
 body {
   height: 100%;
@@ -21,6 +80,7 @@ body {
   margin-bottom: 0;
   font-size: 15px;
   overflow-wrap: break-word;
+  color: var(--text_color_primary);
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
 }
 
@@ -61,12 +121,13 @@ body {
   margin-bottom: 0;
   font-size: 14px;
   overflow-wrap: break-word;
+  color: var(--text_color_primary);
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
 }
 
 .statusContent a,
 .dangerousContent a {
-  color: #21cf7a;
+  color: var(--color_brand);
   text-decoration: none;
 }
 
@@ -86,7 +147,7 @@ body {
   flex-direction: column;
   align-items: stretch;
   flex-shrink: 0;
-  border: 0 solid #2d3436;
+  border: 0 solid var(--color_black);
   z-index: 0;
   margin: 0;
   padding: 0;
@@ -98,11 +159,11 @@ body {
   display: inline;
   white-space: pre-wrap;
   word-wrap: break-word;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, Roboto, Ubuntu, "Helvetica Neue", sans-serif;
 }
 
 .font {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, Roboto, Ubuntu, "Helvetica Neue", sans-serif;
 }
 
 .wrap {
@@ -120,13 +181,7 @@ body {
   white-space: inherit;
 }
 
-.inheritFill {
-  fill: inherit;
-}
-
-.flex1 {
-  flex: 1;
-}
+.inheritFill { fill: inherit; }
 
 .flexNormal {
   flex-basis: 0%;
@@ -134,50 +189,26 @@ body {
   flex-shrink: 1;
 }
 
-.flexGrow1 {
-  flex-grow: 1;
-}
+.flex1 { flex: 1; }
+.flexGrow1 { flex-grow: 1; }
+.flexShrink1 { flex-shrink: 1; }
 
-.flexShrink1 {
-  flex-shrink: 1;
-}
+.flexRow { flex-direction: row; }
+.flexWrap { flex-wrap: wrap; }
 
-.flexRow {
-  flex-direction: row;
-}
+.alignItemsEnd { align-items: flex-end; }
+.alignItemsStart { align-items: flex-start; }
+.alignItemsCenter { align-items: center; }
 
-.flexWrap {
-  flex-wrap: wrap;
-}
-
-.alignItemsEnd {
-  align-items: flex-end;
-}
-
-.alignItemsStart {
-  align-items: flex-start;
-}
-
-.alignItemsCenter {
-  align-items: center;
-}
-
-.justifyContentSpaceBetween {
-  justify-content: space-between;
-}
-
-.justifyContentCenter {
-  justify-content: center;
-}
+.justifyContentSpaceBetween { justify-content: space-between; }
+.justifyContentCenter { justify-content: center; }
 
 .overflowHidden {
   overflow-x: hidden;
   overflow-y: hidden;
 }
 
-.overflowYHidden {
-  overflow-y: hidden;
-}
+.overflowYHidden { overflow-y: hidden; }
 
 .textOverflowEllipsis {
   max-width: 100%;
@@ -187,133 +218,41 @@ body {
   white-space: nowrap;
 }
 
-.whiteSpaceNoWrap {
-  white-space: nowrap;
-}
+.whiteSpaceNoWrap { white-space: nowrap; }
 
-.outlineNone {
-  outline: none;
-}
+.outlineNone { outline: none; }
 
-.resizeNone {
-  resize: none;
-}
+.resizeNone { resize: none; }
 
-.circle {
-  border-radius: 9999px;
-}
+.circle { border-radius: 9999px; }
+.radiusSmall { border-radius: var(--radius); }
 
-.radiusSmall {
-  border-radius: 8px;
-}
+.borderColorPrimary { border-color: var(--solid_color_primary); }
+.borderColorSecondary { border-color: var(--border_color_secondary); }
+.borderColorBrand { border-color: var(--color_brand); }
+.borderColorTransparent { border-color: transparent; }
 
-.borderColorSecondary3 {
-  border-color: #F6F6F9;
-}
+.borderRight1PX { border-right-width: 1px; }
+.borderBottom1PX { border-bottom-width: 1px; }
+.borderLeft1PX { border-left-width: 1px; }
+.borderTop1PX { border-top-width: 1px; }
 
-.borderColorSecondary2 {
-  border-color: #e5e9ed;
-}
+.border1PX { border-width: 1px; }
+.border2PX { border-width: 2px; }
+.border6PX { border-width: 6px; }
 
-.borderColorSecondary {
-  border-color: #ECECED;
-}
+.borderBottom2PX { border-bottom-width: 2px; }
 
-.borderColorWhite {
-  border-color: #fff;
-}
+.borderDashed { border-style: dashed; }
 
-.borderColorBrand {
-  border-color: #21cf7a;
-}
+.displayNone { display: none; }
+.displayBlock { display: block; }
+.displayInline { display: inline; }
+.displayFlex { display: flex !important; }
 
-.borderColorTransparent {
-  border-color: transparent;
-}
-
-.borderRight1PX {
-  border-right-width: 1px;
-}
-
-.borderBottom1PX {
-  border-bottom-width: 1px;
-}
-
-.borderLeft1PX {
-  border-left-width: 1px;
-}
-
-.borderTop1PX {
-  border-top-width: 1px;
-}
-
-.border1PX {
-  border-width: 1px;
-}
-
-.border2PX {
-  border-width: 2px;
-}
-
-.border6PX {
-  border-width: 6px;
-}
-
-.borderBottom2PX {
-  border-bottom-width: 2px;
-}
-
-.borderDashed {
-  border-style: dashed;
-}
-
-.marginAuto {
-  margin: auto;
-}
-
-.margin1PX {
-  margin: 1px;
-}
-
-.displayNone {
-  display: none;
-}
-
-.displayBlock {
-  display: block;
-}
-
-.displayInline {
-  display: inline;
-}
-
-.displayFlex {
-  display: flex !important;
-}
-
-.displayInlineBlock {
-  display: inline-block;
-}
-
-.cursorText {
-  cursor: text;
-}
-
-.cursorPointer {
-  cursor: pointer
-}
-
-.cursorNotAllowed {
-  cursor: not-allowed;
-}
-
-.pointerEventsAuto>* {
-  pointer-events: auto;
-}
-
-.pointerEventsNone {
-  pointer-events: none !important;
-}
+.cursorText { cursor: text; }
+.cursorPointer { cursor: pointer; }
+.cursorNotAllowed { cursor: not-allowed; }
 
 .backgroundCandy {
   background-image: linear-gradient(-45deg, 
@@ -339,349 +278,141 @@ body {
   );
 }
 
-.backgroundTransparent {
-  background-color: transparent;
-}
+.backgroundTransparent { background-color: transparent; }
 
-.backgroundPanel {
-  background-color: #ccc;
-}
+.backgroundColorLoading { background-color: #ccc; }
 
-.backgroundSubtle {
-  background-color: #F5F8FA;
-}
+.backgroundColorSubtle { background-color: var(--solid_color_block); }
+.backgroundColorSubtle_onHover:hover { background-color: var(--solid_color_block); }
 
-.backgroundSubtle_onHover:hover {
-  background-color: #F5F8FA;
-}
+.backgroundColorSubtle2 { background-color: var(--solid_color_secondary); }
+.backgroundColorSubtle2Dark_onHover:hover { background-color: var(--solid_color_secondary-dark); }
 
-.backgroundSubtle2 {
-  background-color: #e2e8ec;
-}
+.backgroundColorSecondary3 { background-color: var(--solid_color_tertiary); }
 
-.backgroundSubtle2Dark_onHover:hover {
-  background-color: #d9e0e5;
-}
+.backgroundColorPrimary { background-color: var(--solid_color_primary); }
+.backgroundColorPrimaryOpaque { background-color: var(--solid_color_primary-opaque) }
 
-.backgroundColorSecondary3 {
-  background-color: #F6F6F9;
-}
+.backgroundColorWhite { background-color: var(--color_white); }
 
-.backgroundColorPrimary {
-  background-color: #fff;
-}
+.backgroundColorBlack { background-color: var(--color_black); }
+.backgroundColorBlackOpaque { background-color: var(--color_black-opaquer); }
+.backgroundColorBlackOpaque_onHover:hover { background-color: var(--color_black-opaque); }
 
-.backgroundColorWhite {
-  background-color: #fff;
-}
+.backgroundColorBrand { background-color: var(--color_brand); }
+.backgroundColorBrand_onHover:hover { background-color: var(--color_brand); }
 
-.backgroundColorPrimaryOpaque {
-  background-color: rgba(255, 255, 255, 0.6);
-}
+.backgroundColorBrandLight { background-color: var(--color_brand-light); }
+.backgroundColorBrandLightOpaque { background-color: var(--color_brand-light-opaque); }
+.backgroundColorBrandLightOpaque_onHover:hover { background-color: var(--color_brand-light-opaque); }
 
-.backgroundColorBrandLightOpaque {
-  background-color: rgba(54, 233, 145, 0.1);
-}
+.backgroundColorBrandDark { background-color: var(--color_brand-dark); }
+.backgroundColorBrandDark_onHover:hover { background-color: var(--color_brand-dark); }
 
-.backgroundColorBlack {
-  background-color: #2d3436;
-}
+.backgroundColorDanger { background-color: var(--color_red); }
+.backgroundColorDangerDark_onHover:hover { background-color: var(--color_red-dark); }
 
-.backgroundColorBlackOpaque_onHover:hover {
-  background-color: rgba(59, 59, 59, 0.8);
-}
+/*  */
 
-.backgroundColorOpaque {
-  background-color: rgba(0, 0, 0, 0.4);
-}
+.colorPrimary { color: var(--text_color_primary); }
 
-.backgroundColorBrandLight {
-  background-color: #36e991;
-}
+.colorWhite { color: var(--color_white); }
+.colorWhite_onHover:hover { color: var(--color_white); }
 
-.backgroundColorBrandLightOpaque_onHover:hover {
-  background-color: rgba(54,233,145, 0.125)
-}
+.colorTertiary { color: var(--text_color_tertiary); }
+.colorSecondary { color: var(--text_color_secondary); }
 
-.backgroundColorBrand {
-  background-color: #21cf7a;
-}
+.colorBrand { color: var(--color_brand); }
+.colorGabPro { color: var(--color_gold); }
 
-.backgroundColorBrand_onHover:hover {
-  background-color: #21cf7a;
-}
+/*  */
 
-.backgroundColorBrandDark {
-  background-color: #38A16B;
-}
+.fillColorPrimary { fill: var(--text_color_primary); }
+.fillColorSecondary { fill: var(--text_color_secondary); }
 
-.backgroundColorBrandDark_onHover:hover {
-  background-color: #38A16B;
-}
+.fillColorWhite { fill: var(--color_white); }
+.fillColorWhite_onHover:hover { fill: var(--color_white); }
 
-.backgroundColorDanger {
-  background-color: #DE2960;
-}
+.fillColorBrand { fill: var(--color_brand); }
+.fillColorBrand_onHover:hover { fill: var(--color_brand);}
 
-.backgroundColorDangerDark_onHover:hover {
-  background-color: #c72c5b;
-}
+.fillColorGabPro { fill: var(--color_gold); }
 
-.colorPrimary {
-  color: #2d3436;
-}
+/*  */
 
-.colorWhite {
-  color: #fff;
-}
+.top0 { top: 0; }
+.top80PX { top: 80px; }
+.top60PC { top: 60%; }
 
-.colorWhite_onHover:hover {
-  color: #fff;
-}
+.bottom0 { bottom: 0; }
+.bottomAuto { bottom: auto; }
 
-.colorTertiary {
-  color: #777;
-}
+.left0 { left: 0px; }
 
-.colorSecondary {
-  color: #4B4F55;
-}
+.right0 { right: 0px; }
+.rightAuto { right: auto; }
 
-.colorBrand {
-  color: #21cf7a
-}
+/*  */
 
-.colorGabPro {
-  color: #ffd700;
-}
+.lineHeight125 { line-height: 1.25em; }
+.lineHeight15 { line-height: 1.5em; }
+.lineHeight2 { line-height: 2em; }
 
-.fillColorBlack {
-  fill: #2d3436;
-}
+/*  */
 
-.fillColorWhite {
-  fill: #fff;
-}
+.posFixed { position: fixed; }
+.posAbs { position: absolute; }
 
-.fillColorWhite_onHover:hover {
-  fill: #fff;
-}
+.noSelect { user-select: none; }
 
-.fillColorBrand {
-  fill: #21cf7a;
-}
-
-.fillColorBrand_onHover:hover {
-  fill: #21cf7a;
-}
-
-.fillColorSecondary {
-  fill: #666;
-}
-
-.fillColorGabPro {
-  fill: #ffd700;
-}
-
-.bottom0 {
-  bottom: 0;
-}
-
-.bottomAuto {
-  bottom: auto;
-}
-
-.left0 {
-  left: 0px;
-}
-
-.right0 {
-  right: 0px;
-}
-
-.rightAuto {
-  right: auto;
-}
-
-.lineHeight125 {
-  line-height: 1.25em;
-}
-
-.lineHeight15 {
-  line-height: 1.5em;
-}
-
-.lineHeight2 {
-  line-height: 2em;
-}
-
-.posFixed {
-  position: fixed;
-}
-
-.posAbs {
-  position: absolute;
-}
-
-.noSelect {
-  user-select: none;
-}
-
-.resizeVertical {
-  resize: vertical;
-}
-
-.heightMax100VH {
-  max-height: 100vh;
-}
-
-.heightMin100VH {
-  min-height: 100vh;
-}
-
-.heightMax80VH {
-  max-height: 80vh;
-}
-
-.heightMax56PX {
-  max-height: 56px;
-}
-
-.heightMin50VH {
-  min-height: 50vh;
-}
-
-.heightMin50PX {
-  min-height: 50px;
-}
-
-.height100VH {
-  height: 100vh;
-}
-
-.height100PC {
-  height: 100%;
-}
-
-.height24PX {
-  height: 24px;
-}
-
-.height22PX {
-  height: 22px;
-}
-
-.height20PX {
-  height: 20px;
-}
-
-.height4PX {
-  height: 4px;
-}
-
-.height1PX {
-  height: 1px;
-}
-
-.height40PX {
-  height: 40px;
-}
-
-.height50PX {
-  height: 50px;
-}
-
-.height53PX {
-  height: 53px;
-}
-
-.height72PX {
-  height: 72px;
-}
-
-.height122PX {
-  height: 122px;
-}
-
-.height158PX {
-  height: 158px;
-}
-
-.height220PX {
-  height: 220px;
-}
-
-.height260PX {
-  height: 260px;
-}
-
-.height350PX {
-  height: 350px;
-}
-
-.width1015PX {
-  width: 1015px;
-}
-
-.width645PX {
-  width: 645px;
-}
-
-.width340PX {
-  width: 340px;
-}
-
-.width330PX {
-  width: 330px;
-}
-
-.width250PX {
-  width: 240px;
-}
-
-.width240PX {
-  width: 240px;
-}
-
-.width160PX {
-  width: 160px;
-}
+.resizeVertical { resize: vertical; }
 
 .center160PX {
   left: calc(100vw / 2 - 80px);
 }
 
-.width72PX {
-  width: 72px;
-}
+.heightMax100VH { max-height: 100vh; }
+.heightMax80VH { max-height: 80vh; }
+.heightMax56PX { max-height: 56px; }
 
-.width50PX {
-  width: 50px;
-}
+.heightMin100VH { min-height: 100vh; }
+.heightMin50VH { min-height: 50vh; }
+.heightMin50PX { min-height: 50px; }
 
-.width20PX {
-  width: 20px;
-}
+.height100VH { height: 100vh; }
+.height100PC { height: 100%; }
+.height350PX { height: 350px; }
+.height260PX { height: 260px; }
+.height220PX { height: 220px; }
+.height158PX { height: 158px; }
+.height122PX { height: 122px; }
+.height72PX { height: 72px; }
+.height53PX { height: 53px; }
+.height50PX { height: 50px; }
+.height40PX { height: 40px; }
+.height24PX { height: 24px; }
+.height22PX { height: 22px; }
+.height20PX { height: 20px; }
+.height4PX { height: 4px; }
+.height1PX { height: 1px; }
 
-.width100PC {
-  width: 100%;
-}
+.maxWidth100PC { max-width: 100%; }
 
-.width50PC {
-  width: 50%;
-}
+.width100PC { width: 100%; }
+.width50PC { width: 50%; }
+.width25PC { width: 25%; }
+.width1015PX { width: 1015px; }
+.width645PX { width: 645px; }
+.width340PX { width: 340px; }
+.width330PX { width: 330px; }
+.width250PX { width: 240px; }
+.width240PX { width: 240px; }
+.width160PX { width: 160px; }
+.width72PX { width: 72px; }
+.width50PX { width: 50px; }
+.width20PX { width: 20px; }
+.width4PX { width: 4px; }
 
-.width25PC {
-  width: 25%;
-}
-
-.width4PX {
-  width: 4px;
-}
-
-.maxWidth100PC {
-  max-width: 100%;
-}
 
 @media (min-width: 1480px) {
   .width1015PX {
@@ -775,257 +506,95 @@ body {
   }
 }
 
-.top0 {
-  top: 0;
-}
+.textAlignLeft { text-align: left; }
+.textAlignCenter { text-align: center; }
 
-.top80PX {
-  top: 80px;
-}
+.fontSize24PX { font-size: 24px; }
+.fontSize19PX { font-size: 19px; }
+.fontSize16PX { font-size: 16px; }
+.fontSize15PX { font-size: 15px; }
+.fontSize14PX { font-size: 14px; }
+.fontSize13PX { font-size: 13px; }
+.fontSize12PX { font-size: 12px; }
+.fontSize0 { font-size: 0; }
 
-.top60PC {
-  top: 60%;
-}
+.fontWeightNormal { font-weight: 400; }
+.fontWeightMedium { font-weight: 500; }
+.fontWeightBold { font-weight: 600; }
+.fontWeightExtraBold { font-weight: 800; }
 
-.textAlignLeft {
-  text-align: left;
-}
-
-.textAlignCenter {
-  text-align: center;
-}
-
-.fontSize24PX {
-  font-size: 24px;
-}
-
-.fontSize19PX {
-  font-size: 19px;
-}
-
-.fontSize16PX {
-  font-size: 16px;
-}
-
-.fontSize15PX {
-  font-size: 15px;
-}
-
-.fontSize14PX {
-  font-size: 14px;
-}
-
-.fontSize13PX {
-  font-size: 13px;
-}
-
-.fontSize12PX {
-  font-size: 12px;
-}
-
-.fontSize0 {
-  font-size: 0;
-}
-
-.fontWeightNormal {
-  font-weight: 400;
-}
-
-.fontWeightMedium {
-  font-weight: 500;
-}
-
-.fontWeightBold {
-  font-weight: 600;
-}
-
-.fontWeightExtraBold {
-  font-weight: 800;
-}
-
-.noUnderline {
-  text-decoration: none;
-}
-
-.underline {
-  text-decoration: underline;
-}
-
-.underline_onHover:hover {
-  text-decoration: underline;
-}
+.noUnderline { text-decoration: none; }
+.underline { text-decoration: underline; }
+.underline_onHover:hover { text-decoration: underline; }
 
 .objectFitCover {
   object-fit: cover;
 }
 
 .textShadow {
-  text-shadow: 0 0 5px #000;
+  text-shadow: 0 0 5px var(--color_black);
 }
 
-.z1 {
-  z-index: 1;
-}
-
-.z2 {
-  z-index: 2;
-}
-
-.z3 {
-  z-index: 3;
-}
-
-.z4 {
-  z-index: 4;
-}
-
-.my5 {
-  margin-top: 5px;
-  margin-bottom: 5px;
-}
-
-.ml5 {
-  margin-left: 5px;
-}
-
-.marginLeftNeg5PX {
-  margin-left: -5px;
-}
-
-.marginBottomNeg5PX {
-  margin-bottom: -5px;
-}
-
-.mt2 {
-  margin-top: 2px;
-}
-
-.mr2 {
-  margin-right: 2px;
-}
-
-.mr5 {
-  margin-right: 5px;
-}
+.z1 { z-index: 1; }
+.z2 { z-index: 2; }
+.z3 { z-index: 3; }
+.z4 { z-index: 4; }
 
 .my10 {
   margin-top: 10px;
   margin-bottom: 10px;
 }
 
-.mr10 {
-  margin-right: 10px;
-}
+.margin1PX { margin: 1px; }
 
-.mr15 {
-  margin-right: 15px;
-}
+.mr15 { margin-right: 15px; }
+.mr10 { margin-right: 10px; }
+.mr5 { margin-right: 5px; }
+.mr2 { margin-right: 2px; }
+.mrAuto { margin-right: auto; }
 
-.ml15 {
-  margin-left: 15px;
-}
+.ml15 { margin-left: 15px; }
+.ml10 { margin-left: 10px; }
+.ml5 { margin-left: 5px; }
+.mlAuto { margin-left: auto; }
+.mlNeg5PX { margin-left: -5px; }
 
-.ml10 {
-  margin-left: 10px;
-}
+.mb15 { margin-bottom: 15px; }
+.mb10 { margin-bottom: 10px; }
+.mb5 { margin-bottom: 5px; }
+.mbNeg5PX { margin-bottom: -5px; }
 
-.mlAuto {
-  margin-left: auto;
-}
+.mt10 { margin-top: 10px; }
+.mt5 { margin-top: 5px; }
+.mt2 { margin-top: 2px; }
+.mtAuto { margin-top: auto; }
+.mtNeg32PX { margin-top: -32px; }
+.mtNeg75PX { margin-top: -75px; }
 
-.mrAuto {
-  margin-right: auto;
-}
+.pt5625PC { padding-top: 56.25%; }
+.pt25PC { padding-top: 25%; }
 
-.mb15 {
-  margin-bottom: 15px;
-}
+.pt15 { padding-top: 15px; }
+.pt10 { padding-top: 10px; }
+.pt5 { padding-top: 5px; }
+.pt2 { padding-top: 2px; }
 
-.mb10 {
-  margin-bottom: 10px;
-}
+.pb15 { padding-bottom: 15px; }
+.pb10 { padding-bottom: 10px; }
+.pb5 { padding-bottom: 5px; }
 
-.mb5 {
-  margin-bottom: 5px;
-}
+.pl25 { padding-left: 25px; }
+.pl15 { padding-left: 15px; }
+.pl0 { padding-left: 0; }
 
-.mt10 {
-  margin-top: 10px;
-}
-
-.mt5 {
-  margin-top: 5px;
-}
-
-.mtAuto {
-  margin-top: auto;
-}
-
-.mtNeg32PX {
-  margin-top: -32px;
-}
-
-.mtNeg75PX {
-  margin-top: -75px;
-}
-
-.pt5625PC {
-  padding-top: 56.25%;
-}
-
-.pt25PC {
-  padding-top: 25%;
-}
-
-.pt15 {
-  padding-top: 15px;
-}
-
-.pt10 {
-  padding-top: 10px;
-}
-
-.pt5 {
-  padding-top: 5px;
-}
-
-.pt2 {
-  padding-top: 2px;
-}
-
-.pb10 {
-  padding-bottom: 10px;
-}
-
-.pb5 {
-  padding-bottom: 5px;
-}
+.pr15 { padding-right: 15px; }
+.pr0 { padding-right: 0; }
 
 .px15 {
   padding-left: 15px;
   padding-right: 15px;
 }
 
-.pl15 {
-  padding-left: 15px;
-}
-
-.pl0 {
-  padding-left: 0;
-}
-
-.pl25 {
-  padding-left: 25px;
-}
-
-.pr0 {
-  padding-right: 0;
-}
-
-.pr15 {
-  padding-right: 15px;
-}
-
 .py5 {
   padding-top: 5px;
   padding-bottom: 5px;
@@ -1051,10 +620,6 @@ body {
   padding-right: 2px;
 }
 
-.pb15 {
-  padding-bottom: 15px;
-}
-
 .px5 {
   padding-left: 5px;
   padding-right: 5px;
@@ -1065,36 +630,20 @@ body {
   padding-right: 10px;
 }
 
-.opacity0 {
-  opacity: 0;
-}
+.opacity0 { opacity: 0; }
+.opacity05 { opacity: 0.5; }
+.opacity1 { opacity: 1; }
 
-.opacity05 {
-  opacity: 0.5;
-}
-
-.opacity1 {
-  opacity: 1;
-}
-
-.boxShadow1 {
-  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .25);
-}
-
-.boxShadow2 {
-  box-shadow: 0 0 15px -5px rgba(0,0,0,0.15);
-}
-
-.boxShadowBlock {
-  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-}
+.boxShadow1 { box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .25); }
+.boxShadowPopover { box-shadow: 0 0 15px -5px rgba(0,0,0,0.15); }
+.boxShadowBlock { box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
 
 .boxShadowNone .boxShadowBlock {
   box-shadow: none !important;
 }
 
 .boxShadowAvatarPro {
-  box-shadow: 0 0 0 2px #F7D230;
+  box-shadow: 0 0 0 2px var(--color_gold);
 }
 
 .boxShadowProfileAvatar {
@@ -1106,7 +655,7 @@ body {
 }
 
 .videoPlayerControlsBackground {
-  background: linear-gradient(0deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, .45) 60%, transparent);
+  background: linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,.45) 60%, transparent);
 }
 
 .videoPlayerSeek:before {
@@ -1163,15 +712,15 @@ body {
 } */
 
 :global(.RichEditor-blockquote) {
-  border-left: 5px solid #eee;
-  color: #666;
+  border-left: 5px solid var(--border_color_secondary);
+  color: var(--text_color_secondary);
   font-style: italic;
   margin: 16px 0;
   padding: 10px 20px;
 }
 
 :global(.public-DraftStyleDefault-pre) {
-  background-color: rgba(0, 0, 0, 0.05);
+  background-color: rgba(0,0,0,.05);
   font-family: 'Inconsolata', 'Menlo', 'Consolas', monospace;
   font-size: 16px;
   padding: 10px 20px;
@@ -1192,15 +741,15 @@ body {
 
 :global(.react-datepicker__header) {
   background-color: transparent !important;
-  border-color: #E5E9ED !important;
+  border-color: var(--border_color_secondary) !important;
 }
 
 :global(.react-datepicker__month-container) {
-  border-color: #E5E9ED !important;
+  border-color: var(--border_color_secondary) !important;
 }
 
 :global(.react-datepicker__time-container) {
-  border-color: #E5E9ED !important;
+  border-color: var(--border_color_secondary) !important;
   min-height: 230px !important;
 }
 
@@ -1229,5 +778,5 @@ body {
 :global(.react-datepicker__quarter-text--selected),
 :global(.react-datepicker__quarter-text--in-selecting-range),
 :global(.react-datepicker__quarter-text--in-range) {
-  background-color: #30CE7D !important;
+  background-color: var(--color_brand) !important;
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index b889e170..7ebf6211 100644
--- a/package.json
+++ b/package.json
@@ -86,6 +86,7 @@
     "cron": "^1.8.2",
     "cross-env": "^5.1.4",
     "css-loader": "^2.1.1",
+    "css-vars-ponyfill": "^2.2.1",
     "cssnano": "^4.1.10",
     "detect-passive-events": "^1.0.2",
     "dotenv": "^8.0.0",
diff --git a/yarn.lock b/yarn.lock
index cdf1e070..e3e5a8b2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2792,6 +2792,11 @@ css-tree@1.0.0-alpha.39:
     mdn-data "2.0.6"
     source-map "^0.6.1"
 
+css-vars-ponyfill@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/css-vars-ponyfill/-/css-vars-ponyfill-2.2.1.tgz#c97dcfb3efc93b479661af58afa04cb0ef5b97e6"
+  integrity sha512-bFdKEQbCtwoDl4/iPaqjGDMZRgnVn6k7c6XUlOrW+OzMIweWV6b5YbajR99dUiAsB1WpfbGGiiE9T1cnSh2pgA==
+
 css-what@2.1:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"