From d5ad398d5386c2a6b9a5b38ce7bf3058d6b58000 Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Tue, 18 Aug 2020 15:43:06 -0500
Subject: [PATCH] Updated all long style names to be more compact
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• Updated:
- all long style names to be more compact
---
 .../gabsocial/components/about_sidebar.js     | 20 ++---
 .../gabsocial/components/account.js           | 20 ++---
 .../components/account_action_button.js       |  2 +-
 .../components/autosuggest_account.js         |  2 +-
 .../gabsocial/components/autosuggest_emoji.js |  2 +-
 .../components/autosuggest_textbox.js         | 20 ++---
 app/javascript/gabsocial/components/avatar.js |  2 +-
 .../gabsocial/components/back_button.js       |  8 +-
 app/javascript/gabsocial/components/block.js  |  2 +-
 .../gabsocial/components/block_heading.js     |  4 +-
 .../components/bundle_column_error.js         | 24 +++---
 app/javascript/gabsocial/components/button.js | 16 ++--
 .../gabsocial/components/character_counter.js |  2 +-
 .../gabsocial/components/column_indicator.js  |  2 +-
 .../gabsocial/components/comment.js           | 16 ++--
 .../gabsocial/components/comment_header.js    | 10 +--
 .../gabsocial/components/comment_list.js      |  4 +-
 .../gabsocial/components/composer.js          |  8 +-
 .../gabsocial/components/display_name.js      | 24 +++---
 .../gabsocial/components/divider.js           |  4 +-
 .../gabsocial/components/error_boundary.js    | 24 +++---
 .../components/extended_video_player.js       |  4 +-
 .../gabsocial/components/file_input.js        | 16 ++--
 .../components/floating_action_button.js      |  2 +-
 .../gabsocial/components/footer_bar.js        | 18 ++--
 app/javascript/gabsocial/components/form.js   |  4 +-
 .../gabsocial/components/global_footer.js     | 38 ++++-----
 .../components/group_collection_item.js       | 14 ++--
 .../gabsocial/components/group_header.js      | 40 ++++-----
 .../gabsocial/components/group_list_item.js   | 18 ++--
 .../gabsocial/components/hashtag_item.js      |  6 +-
 .../gabsocial/components/heading.js           | 10 +--
 app/javascript/gabsocial/components/image.js  |  2 +-
 .../gabsocial/components/image_loader.js      |  8 +-
 app/javascript/gabsocial/components/input.js  | 12 +--
 .../gabsocial/components/link_footer.js       |  4 +-
 .../gabsocial/components/list_item.js         | 16 ++--
 .../gabsocial/components/load_more.js         |  2 +-
 .../components/logged_out_navigation_bar.js   | 26 +++---
 .../components/logged_out_sidebar.js          | 14 ++--
 .../gabsocial/components/media_gallery.js     | 22 ++---
 .../gabsocial/components/media_item.js        | 22 ++---
 .../gabsocial/components/modal/boost_modal.js |  6 +-
 .../community_timeline_settings_modal.js      |  4 +-
 .../components/modal/confirmation_modal.js    | 10 +--
 .../components/modal/display_options_modal.js | 24 +++---
 .../components/modal/edit_profile_modal.js    | 18 ++--
 .../gabsocial/components/modal/embed_modal.js |  8 +-
 .../components/modal/gif_picker_modal.js      | 22 ++---
 .../modal/group_timeline_settings_modal.js    |  6 +-
 .../modal/hashtag_timeline_settings_modal.js  |  4 +-
 .../modal/home_timeline_settings_modal.js     |  4 +-
 .../components/modal/hotkeys_modal.js         |  2 +-
 .../components/modal/list_add_user_modal.js   |  4 +-
 .../modal/list_timeline_settings_modal.js     |  4 +-
 .../components/modal/loading_modal.js         |  6 +-
 .../gabsocial/components/modal/media_modal.js | 10 +--
 .../gabsocial/components/modal/modal_base.js  | 20 ++---
 .../components/modal/modal_layout.js          |  8 +-
 .../components/modal/pro_upgrade_modal.js     | 18 ++--
 .../components/modal/report_modal.js          | 14 ++--
 .../modal/status_revisions_modal.js           |  8 +-
 .../components/modal/unauthorized_modal.js    |  4 +-
 .../gabsocial/components/navigation_bar.js    | 44 +++++-----
 .../components/navigation_bar_button.js       | 12 +--
 .../gabsocial/components/notification.js      | 18 ++--
 .../gabsocial/components/pagination.js        | 10 +--
 .../components/panel/group_info_panel.js      | 12 +--
 .../components/panel/list_details_panel.js    |  8 +-
 .../gabsocial/components/panel/lists_panel.js |  2 +-
 .../components/panel/media_gallery_panel.js   |  4 +-
 .../components/panel/panel_layout.js          | 12 +--
 .../gabsocial/components/panel/pro_panel.js   | 14 ++--
 .../components/panel/profile_info_panel.js    | 12 +--
 .../components/panel/profile_stats_panel.js   |  4 +-
 .../gabsocial/components/panel/shop_panel.js  |  2 +-
 .../components/panel/sign_up_log_in_panel.js  | 18 ++--
 .../components/panel/sign_up_panel.js         |  4 +-
 .../panel/status_promotion_panel.js           | 18 ++--
 .../gabsocial/components/panel/user_panel.js  | 12 +--
 .../panel/verified_accounts_panel.js          |  2 +-
 .../components/panel/who_to_follow_panel.js   |  2 +-
 .../gabsocial/components/pill_item.js         | 14 ++--
 app/javascript/gabsocial/components/pills.js  |  4 +-
 .../placeholder/account_placeholder.js        |  2 +-
 .../placeholder/comment_placeholder.js        |  2 +-
 .../group_list_item_placeholder.js            |  2 +-
 .../placeholder/list_item_placeholder.js      |  4 +-
 .../media_gallery_panel_placeholder.js        |  2 +-
 .../placeholder/media_gallery_placeholder.js  |  2 +-
 .../placeholder/notification_placeholder.js   |  8 +-
 .../profile_header_xs_placeholder.js          |  2 +-
 .../profile_info_panel_placeholder.js         |  2 +-
 .../profile_stats_panel_placeholder.js        |  2 +-
 .../placeholder/status_placeholder.js         |  4 +-
 .../placeholder/trends_item_placeholder.js    |  2 +-
 app/javascript/gabsocial/components/poll.js   | 22 ++---
 .../components/popover/date_picker_popover.js |  4 +-
 .../components/popover/error_popover.js       |  4 +-
 .../components/popover/loading_popover.js     |  4 +-
 .../components/popover/popover_base.js        |  2 +-
 .../components/popover/popover_layout.js      |  8 +-
 .../popover/status_visibility_popover.js      | 10 +--
 .../components/popover/user_info_popover.js   | 16 ++--
 .../components/popover/video_stats_popover.js |  6 +-
 .../gabsocial/components/profile_header.js    | 84 +++++++++----------
 .../components/profile_navigation_bar.js      | 10 +--
 .../gabsocial/components/progress_bar.js      | 10 +--
 .../gabsocial/components/pull_to_refresher.js |  4 +-
 .../components/rich_text_editor_bar.js        |  6 +-
 app/javascript/gabsocial/components/search.js | 10 +--
 app/javascript/gabsocial/components/select.js |  6 +-
 .../components/sensitive_media_item.js        |  8 +-
 .../gabsocial/components/settings_sidebar.js  | 14 ++--
 .../gabsocial/components/shop_item.js         |  4 +-
 .../gabsocial/components/sidebar.js           | 24 +++---
 .../components/sidebar_section_item.js        | 24 +++---
 .../components/sidebar_section_title.js       |  2 +-
 .../gabsocial/components/sidebar_xs.js        | 22 ++---
 .../gabsocial/components/sort_block.js        | 12 +--
 app/javascript/gabsocial/components/status.js | 20 ++---
 .../gabsocial/components/status_action_bar.js | 18 ++--
 .../components/status_action_bar_item.js      |  8 +-
 .../gabsocial/components/status_card.js       | 52 ++++++------
 .../gabsocial/components/status_check_box.js  |  6 +-
 .../gabsocial/components/status_content.js    | 16 ++--
 .../gabsocial/components/status_header.js     | 24 +++---
 .../gabsocial/components/status_prepend.js    |  8 +-
 app/javascript/gabsocial/components/switch.js | 14 ++--
 .../gabsocial/components/tab_bar.js           |  4 +-
 .../gabsocial/components/tab_bar_item.js      | 16 ++--
 app/javascript/gabsocial/components/text.js   | 20 ++---
 .../gabsocial/components/textarea.js          | 10 +--
 .../components/timeline_compose_block.js      | 12 +--
 .../timeline_queue_button_header.js           |  6 +-
 .../gabsocial/components/trends_item.js       | 10 +--
 .../gabsocial/components/upload_area.js       |  8 +-
 .../gabsocial/components/user_stat.js         |  2 +-
 app/javascript/gabsocial/components/video.js  | 66 +++++++--------
 .../gabsocial/components/zoomable_image.js    |  4 +-
 .../gabsocial/features/about/about.js         |  6 +-
 .../gabsocial/features/about/dmca.js          |  8 +-
 .../gabsocial/features/about/investors.js     |  4 +-
 .../features/about/privacy_policy.js          | 26 +++---
 .../gabsocial/features/about/terms_of_sale.js |  6 +-
 .../features/about/terms_of_service.js        | 22 ++---
 .../gabsocial/features/account_gallery.js     |  4 +-
 .../components/compose_extra_button.js        |  8 +-
 .../compose/components/compose_form.js        | 48 +++++------
 .../features/compose/components/gif_form.js   |  6 +-
 .../compose/components/media_upload_item.js   | 10 +--
 .../features/compose/components/poll_form.js  | 20 ++---
 .../components/sensitive_media_button.js      |  2 +-
 .../compose/components/upload_form.js         |  4 +-
 .../gabsocial/features/compose/compose.js     |  2 +-
 .../gabsocial/features/follow_requests.js     |  2 +-
 .../gabsocial/features/group_about.js         |  2 +-
 .../features/group_collection_timeline.js     |  4 +-
 .../gabsocial/features/group_create.js        |  2 +-
 .../gabsocial/features/group_members.js       |  4 +-
 .../gabsocial/features/groups_collection.js   |  8 +-
 .../gabsocial/features/introduction.js        | 50 +++++------
 .../gabsocial/features/list_create.js         |  2 +-
 .../gabsocial/features/list_edit.js           | 26 +++---
 .../gabsocial/features/list_timeline.js       |  2 +-
 app/javascript/gabsocial/features/news.js     | 24 +++---
 app/javascript/gabsocial/features/search.js   | 10 +--
 app/javascript/gabsocial/features/ui/ui.js    |  2 +-
 .../gabsocial/layouts/about_layout.js         | 22 ++---
 .../gabsocial/layouts/explore_layout.js       | 20 ++---
 .../gabsocial/layouts/group_layout.js         | 16 ++--
 .../gabsocial/layouts/introduction_layout.js  | 22 ++---
 app/javascript/gabsocial/layouts/layout.js    | 28 +++----
 .../gabsocial/layouts/profile_layout.js       | 36 ++++----
 .../gabsocial/layouts/settings_layout.js      | 22 ++---
 app/javascript/gabsocial/pages/modal_page.js  |  2 +-
 app/javascript/gabsocial/pages/search_page.js |  2 +-
 177 files changed, 1052 insertions(+), 1052 deletions(-)

diff --git a/app/javascript/gabsocial/components/about_sidebar.js b/app/javascript/gabsocial/components/about_sidebar.js
index 32f1bdf3..b3e32c77 100644
--- a/app/javascript/gabsocial/components/about_sidebar.js
+++ b/app/javascript/gabsocial/components/about_sidebar.js
@@ -20,21 +20,21 @@ class AboutSidebar extends ImmutablePureComponent {
     } = this.props
 
     return (
-      <header role='banner' className={[_s.default, _s.flexGrow1, _s.z3, _s.alignItemsEnd].join(' ')}>
+      <header role='banner' className={[_s._, _s.flexGrow1, _s.z3, _s.aiEnd].join(' ')}>
         <ResponsiveClassesComponent
-          classNames={[_s.default, _s.width240PX].join(' ')}
-          classNamesXS={[_s.default, _s.width100PC].join(' ')}
+          classNames={[_s._, _s.w240PX].join(' ')}
+          classNamesXS={[_s._, _s.w100PC].join(' ')}
         >
           <ResponsiveClassesComponent
-            classNames={[_s.default, _s.posFixed, _s.heightCalc53PX, _s.bottom0].join(' ')}
-            classNamesXS={[_s.default, _s.px15].join(' ')}
+            classNames={[_s._, _s.posFixed, _s.calcH53PX, _s.bottom0].join(' ')}
+            classNamesXS={[_s._, _s.px15].join(' ')}
           >
             <ResponsiveClassesComponent
-              classNames={[_s.default, _s.height100PC, _s.alignItemsStart, _s.width240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}
-              classNamesXS={[_s.default,  _s.alignItemsStart, _s.width100PC, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}
+              classNames={[_s._, _s.h100PC, _s.aiStart, _s.w240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}
+              classNamesXS={[_s._,  _s.aiStart, _s.w100PC, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}
             >
-              <div className={[_s.default, _s.width100PC].join(' ')}>
-                <div className={[_s.default, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
+              <div className={[_s._, _s.w100PC].join(' ')}>
+                <div className={[_s._, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
                   {
                     me && <BackButton icon='arrow-left' toHome />
                   }
@@ -44,7 +44,7 @@ class AboutSidebar extends ImmutablePureComponent {
                 </div>
 
               </div>
-              <nav aria-label='Primary' role='navigation' className={[_s.default, _s.width100PC, _s.mb15].join(' ')}>
+              <nav aria-label='Primary' role='navigation' className={[_s._, _s.w100PC, _s.mb15].join(' ')}>
                 <SidebarSectionTitle>{intl.formatMessage(messages.menu)}</SidebarSectionTitle>
                 {
                   items.map((menuItem, i) => (
diff --git a/app/javascript/gabsocial/components/account.js b/app/javascript/gabsocial/components/account.js
index bd420640..be200cac 100644
--- a/app/javascript/gabsocial/components/account.js
+++ b/app/javascript/gabsocial/components/account.js
@@ -65,7 +65,7 @@ class Account extends ImmutablePureComponent {
         isOutline={true}
         color='brand'
         backgroundColor='none'
-        className={[_s.px10, _s.flexRow, _s.alignItemsCenter].join(' ')}
+        className={[_s.px10, _s.flexRow, _s.aiCenter].join(' ')}
         icon={actionIcon}
         iconSize='10px'
       >
@@ -83,40 +83,40 @@ class Account extends ImmutablePureComponent {
       <Button
         isNarrow
         backgroundColor='none'
-        className={[_s.alignItemsEnd, _s.px5]}
+        className={[_s.aiEnd, _s.px5]}
         onClick={dismissAction}
         icon='close'
         iconSize='8px'
-        iconClassName={_s.colorSecondary}
+        iconClassName={_s.cSecondary}
       />
     )
 
     const content = { __html: account.get('note_emojified') }
 
     return (
-      <div className={[_s.default, _s.px15, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary, _s.bgSubtle_onHover].join(' ')}>
-        <div className={[_s.default, _s.flexRow, _s.alignItemsStart].join(' ')}>
+      <div className={[_s._, _s.px15, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary, _s.bgSubtle_onHover].join(' ')}>
+        <div className={[_s._, _s.flexRow, _s.aiStart].join(' ')}>
 
           <NavLink
-            className={[_s.default, _s.noUnderline].join(' ')}
+            className={[_s._, _s.noUnderline].join(' ')}
             title={account.get('acct')}
             to={`/${account.get('acct')}`}
           >
             <Avatar account={account} size={avatarSize} />
           </NavLink>
 
-          <div className={[_s.default, _s.px10, _s.overflowHidden, _s.flexNormal].join(' ')}>
-            <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
+          <div className={[_s._, _s.px10, _s.overflowHidden, _s.flexNormal].join(' ')}>
+            <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
               <NavLink
                 title={account.get('acct')}
                 to={`/${account.get('acct')}`}
-                className={[_s.default, _s.alignItemsStart, _s.pt2, _s.pr5, _s.noUnderline, _s.overflowHidden, _s.flexNormal].join(' ')}
+                className={[_s._, _s.aiStart, _s.pt2, _s.pr5, _s.noUnderline, _s.overflowHidden, _s.flexNormal].join(' ')}
               >
                 <DisplayName account={account} isMultiline={compact} />
                 {!compact && actionButton}
               </NavLink>
 
-              <div className={[_s.default].join(' ')}>
+              <div className={[_s._].join(' ')}>
                 {dismissBtn}
                 {compact && actionButton}
               </div>
diff --git a/app/javascript/gabsocial/components/account_action_button.js b/app/javascript/gabsocial/components/account_action_button.js
index fe8cda7b..ad32eae3 100644
--- a/app/javascript/gabsocial/components/account_action_button.js
+++ b/app/javascript/gabsocial/components/account_action_button.js
@@ -104,7 +104,7 @@ class AccountActionButton extends ImmutablePureComponent {
       <Button
         {...buttonOptions}
         isNarrow
-        className={[_s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
+        className={[_s.jcCenter, _s.aiCenter].join(' ')}
       >
         <Text
           color='inherit'
diff --git a/app/javascript/gabsocial/components/autosuggest_account.js b/app/javascript/gabsocial/components/autosuggest_account.js
index c17ad35e..bc984b14 100644
--- a/app/javascript/gabsocial/components/autosuggest_account.js
+++ b/app/javascript/gabsocial/components/autosuggest_account.js
@@ -14,7 +14,7 @@ class AutosuggestAccount extends ImmutablePureComponent {
 
     return (
       <div
-        className={[_s.default, _s.cursorPointer, _s.bgSubtle_onHover, _s.flexRow, _s.py10, _s.alignItemsCenter, _s.px10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}
+        className={[_s._, _s.cursorPointer, _s.bgSubtle_onHover, _s.flexRow, _s.py10, _s.aiCenter, _s.px10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}
         title={account.get('acct')}
       >
         <Avatar account={account} size={26} />
diff --git a/app/javascript/gabsocial/components/autosuggest_emoji.js b/app/javascript/gabsocial/components/autosuggest_emoji.js
index bd48ad7a..6f00556e 100644
--- a/app/javascript/gabsocial/components/autosuggest_emoji.js
+++ b/app/javascript/gabsocial/components/autosuggest_emoji.js
@@ -22,7 +22,7 @@ class AutosuggestEmoji extends React.PureComponent {
     }
 
     return (
-      <div className={[_s.default, _s.cursorPointer, _s.bgSubtle_onHover, _s.flexRow, _s.py10, _s.alignItemsCenter, _s.px10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+      <div className={[_s._, _s.cursorPointer, _s.bgSubtle_onHover, _s.flexRow, _s.py10, _s.aiCenter, _s.px10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
         <img className='emojione' src={url} alt={emoji.native || emoji.colons} />
         <Text className={_s.ml10}>
           {emoji.colons}
diff --git a/app/javascript/gabsocial/components/autosuggest_textbox.js b/app/javascript/gabsocial/components/autosuggest_textbox.js
index b998ac2a..cf6e0599 100644
--- a/app/javascript/gabsocial/components/autosuggest_textbox.js
+++ b/app/javascript/gabsocial/components/autosuggest_textbox.js
@@ -194,32 +194,32 @@ class AutosuggestTextbox extends ImmutablePureComponent {
     const { suggestionsHidden } = this.state
 
     const textareaContainerClasses = CX({
-      default: 1,
-      maxWidth100PC: 1,
+      _: 1,
+      maxW100PC: 1,
       flexGrow1: small,
-      justifyContentCenter: small,
+      jcCenter: small,
       py5: small,
     })
 
     const textareaClasses = CX({
-      default: 1,
+      _: 1,
       font: 1,
       wrap: 1,
       resizeNone: 1,
       bgTransparent: 1,
       outlineNone: 1,
       lineHeight125: 1,
-      colorPrimary: 1,
-      width100PC: !small,
+      cPrimary: 1,
+      w100PC: !small,
       pt15: !small,
       px15: !small,
       px10: small,
       pb10: !small,
       fs16PX: !small,
       fs14PX: small,
-      heightMax200PX: small,
-      heightMax80VH: !small,
-      heightMin80PX: !small,
+      maxH200PX: small,
+      maxH80VH: !small,
+      minH80PX: !small,
     })
 
     return (
@@ -272,7 +272,7 @@ class AutosuggestTextbox extends ImmutablePureComponent {
 
         {
           !small && !suggestionsHidden && !suggestions.isEmpty() &&
-          <div className={[_s.default].join(' ')}>
+          <div className={[_s._].join(' ')}>
             {suggestions.map(this.renderSuggestion)}
           </div>
         }
diff --git a/app/javascript/gabsocial/components/avatar.js b/app/javascript/gabsocial/components/avatar.js
index c673164f..590ff502 100644
--- a/app/javascript/gabsocial/components/avatar.js
+++ b/app/javascript/gabsocial/components/avatar.js
@@ -89,7 +89,7 @@ class Avatar extends ImmutablePureComponent {
 
     const isPro = !!account ? account.get('is_pro') : false
     const alt = !account ? '' : `${account.get('display_name')} ${isPro ? '(PRO)' : ''}`.trim()
-    const classes = [_s.default, _s.circle, _s.overflowHidden]
+    const classes = [_s._, _s.circle, _s.overflowHidden]
     if (isPro) {
       classes.push(_s.boxShadowAvatarPro)
     }
diff --git a/app/javascript/gabsocial/components/back_button.js b/app/javascript/gabsocial/components/back_button.js
index fafc8378..9819455d 100644
--- a/app/javascript/gabsocial/components/back_button.js
+++ b/app/javascript/gabsocial/components/back_button.js
@@ -30,13 +30,13 @@ class BackButton extends React.PureComponent {
     } = this.props
 
     const classes = CX(className, {
-       alignItemsCenter: 1,
+       aiCenter: 1,
        bgTransparent: 1,
        mr5: 1,
        cursorPointer: 1,
        outlineNone: 1,
-       default: 1,
-       justifyContentCenter: 1,
+       _: 1,
+       jcCenter: 1,
     })
 
     return (
@@ -47,7 +47,7 @@ class BackButton extends React.PureComponent {
         className={classes}
         icon={icon || 'angle-left'}
         iconSize={iconSize || '24px'}
-        iconClassName={iconClassName || [_s.mr5, _s.colorPrimary].join(' ')}
+        iconClassName={iconClassName || [_s.mr5, _s.cPrimary].join(' ')}
         onClick={this.handleBackClick}
       />
     )
diff --git a/app/javascript/gabsocial/components/block.js b/app/javascript/gabsocial/components/block.js
index fbce312c..8204b569 100644
--- a/app/javascript/gabsocial/components/block.js
+++ b/app/javascript/gabsocial/components/block.js
@@ -10,7 +10,7 @@ class Block extends React.PureComponent {
     const { children } = this.props
 
     return (
-      <div className={[_s.default, _s.boxShadowBlock, _s.bgPrimary, _s.overflowHidden, _s.radiusSmall].join(' ')}>
+      <div className={[_s._, _s.boxShadowBlock, _s.bgPrimary, _s.overflowHidden, _s.radiusSmall].join(' ')}>
         {children}
       </div>
     )
diff --git a/app/javascript/gabsocial/components/block_heading.js b/app/javascript/gabsocial/components/block_heading.js
index 42c76913..fdef3eef 100644
--- a/app/javascript/gabsocial/components/block_heading.js
+++ b/app/javascript/gabsocial/components/block_heading.js
@@ -8,8 +8,8 @@ class BlockHeading extends React.PureComponent {
     const { title } = this.props
 
     return (
-      <div className={[_s.default, _s.px15, _s.py10].join(' ')}>
-        <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
+      <div className={[_s._, _s.px15, _s.py10].join(' ')}>
+        <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
           <Heading size='h2'>{title}</Heading>
         </div>
       </div>
diff --git a/app/javascript/gabsocial/components/bundle_column_error.js b/app/javascript/gabsocial/components/bundle_column_error.js
index 003fa671..69ad69e9 100644
--- a/app/javascript/gabsocial/components/bundle_column_error.js
+++ b/app/javascript/gabsocial/components/bundle_column_error.js
@@ -24,15 +24,15 @@ class BundleColumnError extends React.PureComponent {
     const { intl: { formatMessage } } = this.props
 
     return (
-      <div className={[_s.default, _s.heightMin100VH, _s.width100PC, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
-        <div className={[_s.default, _s.heightMin53PX, _s.bgBrand, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
-          <div className={[_s.default, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.width1255PX].join(' ')}>
+      <div className={[_s._, _s.minH100VH, _s.w100PC, _s.aiCenter, _s.jcCenter].join(' ')}>
+        <div className={[_s._, _s.minH53PX, _s.bgBrand, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
+          <div className={[_s._, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.w1255PX].join(' ')}>
 
-            <div className={[_s.default, _s.flexRow].join(' ')}>
+            <div className={[_s._, _s.flexRow].join(' ')}>
 
-              <h1 className={[_s.default, _s.mr15].join(' ')}>
-                <Button href='/' isText aria-label='Gab' className={[_s.default, _s.justifyContentCenter, _s.noSelect, _s.noUnderline, _s.height53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}>
-                  <Icon id='logo' className={_s.colorWhite} />
+              <h1 className={[_s._, _s.mr15].join(' ')}>
+                <Button href='/' isText aria-label='Gab' className={[_s._, _s.jcCenter, _s.noSelect, _s.noUnderline, _s.h53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}>
+                  <Icon id='logo' className={_s.cWhite} />
                 </Button>
               </h1>
 
@@ -40,20 +40,20 @@ class BundleColumnError extends React.PureComponent {
           </div>
         </div>
 
-        <div className={[_s.default, _s.maxWidth640PX, _s.px15, _s.py10].join(' ')}>
+        <div className={[_s._, _s.maxW640PX, _s.px15, _s.py10].join(' ')}>
 
-          <Icon id='warning' size='28px' className={[_s.default, _s.colorSecondary, _s.mb15].join(' ')} />
+          <Icon id='warning' size='28px' className={[_s._, _s.cSecondary, _s.mb15].join(' ')} />
 
           <Text size='medium' className={_s.pt15}>
             {formatMessage(messages.body)}
           </Text>
 
-          <div className={[_s.default, _s.py10, _s.my10].join(' ')}>
+          <div className={[_s._, _s.py10, _s.my10].join(' ')}>
             <Text>
               {APP_NAME} ({version})
             </Text>
 
-            <div className={[_s.default, _s.flexRow, _s.mt10, _s.alignItemsCenter].join(' ')}>
+            <div className={[_s._, _s.flexRow, _s.mt10, _s.aiCenter].join(' ')}>
               <Button
                 isText
                 href={source_url}
@@ -77,7 +77,7 @@ class BundleColumnError extends React.PureComponent {
 
           <Divider />
 
-          <div className={[_s.default, _s.flexRow].join(' ')}>
+          <div className={[_s._, _s.flexRow].join(' ')}>
             <Button
               icon='repost'
               onClick={this.handleRetry} size={64}
diff --git a/app/javascript/gabsocial/components/button.js b/app/javascript/gabsocial/components/button.js
index 4900f60a..b62303a8 100644
--- a/app/javascript/gabsocial/components/button.js
+++ b/app/javascript/gabsocial/components/button.js
@@ -109,7 +109,7 @@ class Button extends React.PureComponent {
 
     // Style the component according to props
     const classes = noClasses ? className : cx(className, {
-      default: 1,
+      _: 1,
       noUnderline: 1,
       font: 1,
       cursorPointer: 1,
@@ -129,11 +129,11 @@ class Button extends React.PureComponent {
       bgSubtle: backgroundColor === COLORS.secondary,
       bgDanger: backgroundColor === COLORS.danger,
       
-      colorPrimary: color === COLORS.primary,
-      colorSecondary: color === COLORS.secondary,
-      colorTertiary: color === COLORS.tertiary,
-      colorWhite: color === COLORS.white,
-      colorBrand: color === COLORS.brand,
+      cPrimary: color === COLORS.primary,
+      cSecondary: color === COLORS.secondary,
+      cTertiary: color === COLORS.tertiary,
+      cWhite: color === COLORS.white,
+      cBrand: color === COLORS.brand,
 
       borderColorBrand: color === COLORS.brand && isOutline,
       border1PX: isOutline,
@@ -145,7 +145,7 @@ class Button extends React.PureComponent {
       py10: !isText && !isNarrow,
       px15: !isText,
 
-      width100PC: isBlock,
+      w100PC: isBlock,
 
       underline_onHover: underlineOnHover,
 
@@ -155,7 +155,7 @@ class Button extends React.PureComponent {
       bgDangerDark_onHover: backgroundColor === COLORS.danger && !isDisabled,
 
       bgBrand_onHover: color === COLORS.brand && isOutline && !isDisabled,
-      colorWhite_onHover: color === COLORS.brand && isOutline && !isDisabled,
+      cWhite_onHover: color === COLORS.brand && isOutline && !isDisabled,
     })
 
     const tagName = !!href ? 'a' : !!to ? 'NavLink' : 'button'
diff --git a/app/javascript/gabsocial/components/character_counter.js b/app/javascript/gabsocial/components/character_counter.js
index c58782eb..b5d6fb2b 100644
--- a/app/javascript/gabsocial/components/character_counter.js
+++ b/app/javascript/gabsocial/components/character_counter.js
@@ -19,7 +19,7 @@ class CharacterCounter extends React.PureComponent {
     const dashoffset = circumference * (1 - diff)
 
     return (
-      <div className={[_s.default, _s.mr10, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}>
+      <div className={[_s._, _s.mr10, _s.jcCenter, _s.aiCenter].join(' ')}>
         <svg
           width={actualRadius * 2}
           height={actualRadius * 2}
diff --git a/app/javascript/gabsocial/components/column_indicator.js b/app/javascript/gabsocial/components/column_indicator.js
index cc64f937..df9f9e22 100644
--- a/app/javascript/gabsocial/components/column_indicator.js
+++ b/app/javascript/gabsocial/components/column_indicator.js
@@ -12,7 +12,7 @@ class ColumnIndicator extends React.PureComponent {
     const title = type !== 'error' && !message ? intl.formatMessage(messages[type]) : message
 
     return (
-      <div className={[_s.default, _s.width100PC, _s.justifyContentCenter, _s.alignItemsCenter, _s.py15].join(' ')}>
+      <div className={[_s._, _s.w100PC, _s.jcCenter, _s.aiCenter, _s.py15].join(' ')}>
         <Icon id={type} size='30px' />
         {
           type !== 'loading' &&
diff --git a/app/javascript/gabsocial/components/comment.js b/app/javascript/gabsocial/components/comment.js
index 6cd8f07c..12a4060f 100644
--- a/app/javascript/gabsocial/components/comment.js
+++ b/app/javascript/gabsocial/components/comment.js
@@ -85,7 +85,7 @@ class Comment extends ImmutablePureComponent {
     }
 
     const contentClasses = CX({
-      default: 1,
+      _: 1,
       px10: 1,
       pt5: 1,
       pb10: 1,
@@ -95,19 +95,19 @@ class Comment extends ImmutablePureComponent {
     })
 
     return (
-      <div className={[_s.default, _s.px15, _s.mb10, _s.py5].join(' ')} data-comment={status.get('id')}>
-        <div className={_s.default} style={style}>
+      <div className={[_s._, _s.px15, _s.mb10, _s.py5].join(' ')} data-comment={status.get('id')}>
+        <div className={_s._} style={style}>
 
-          <div className={[_s.default, _s.flexRow].join(' ')}>
+          <div className={[_s._, _s.flexRow].join(' ')}>
             <NavLink
               to={`/${status.getIn(['account', 'acct'])}`}
               title={status.getIn(['account', 'acct'])}
-              className={[_s.default, _s.mr10, _s.pt5].join(' ')}
+              className={[_s._, _s.mr10, _s.pt5].join(' ')}
             >
               <Avatar account={status.get('account')} size={32} />
             </NavLink>
 
-            <div className={[_s.default, _s.flexShrink1, _s.maxWidth100PC42PX].join(' ')}>
+            <div className={[_s._, _s.flexShrink1, _s.maxW100PC42PX].join(' ')}>
               <div className={contentClasses}>
                 <CommentHeader
                   ancestorAccountId={ancestorAccountId}
@@ -122,7 +122,7 @@ class Comment extends ImmutablePureComponent {
                   isComment
                   collapsable
                 />
-                <div className={[_s.default, _s.mt5].join(' ')}>
+                <div className={[_s._, _s.mt5].join(' ')}>
                   <StatusMedia
                     isComment
                     status={status}
@@ -136,7 +136,7 @@ class Comment extends ImmutablePureComponent {
                 </div>
               </div>
 
-              <div className={[_s.default, _s.flexRow, _s.mt5].join(' ')}>
+              <div className={[_s._, _s.flexRow, _s.mt5].join(' ')}>
                 <CommentButton
                   title={intl.formatMessage(status.get('favourited') ? messages.unlike : messages.like)}
                   onClick={this.handleOnFavorite}
diff --git a/app/javascript/gabsocial/components/comment_header.js b/app/javascript/gabsocial/components/comment_header.js
index 2080578e..3d7ad383 100644
--- a/app/javascript/gabsocial/components/comment_header.js
+++ b/app/javascript/gabsocial/components/comment_header.js
@@ -43,11 +43,11 @@ class CommentHeader extends ImmutablePureComponent {
     const myComment = status.getIn(['account', 'id']) === me
 
     return (
-      <div className={[_s.default, _s.alignItemsStart, _s.py2, _s.maxWidth100PC, _s.flexGrow1].join(' ')}>
+      <div className={[_s._, _s.aiStart, _s.py2, _s.maxW100PC, _s.flexGrow1].join(' ')}>
 
-        <div className={[_s.default, _s.flexRow, _s.flexWrap, _s.overflowHidden, _s.width100PC, _s.maxWidth100PC, _s.alignItemsCenter].join(' ')}>
+        <div className={[_s._, _s.flexRow, _s.flexWrap, _s.overflowHidden, _s.w100PC, _s.maxW100PC, _s.aiCenter].join(' ')}>
           <NavLink
-            className={[_s.default, _s.flexRow, _s.alignItemsStart, _s.noUnderline].join(' ')}
+            className={[_s._, _s.flexRow, _s.aiStart, _s.noUnderline].join(' ')}
             to={`/${status.getIn(['account', 'acct'])}`}
             title={status.getIn(['account', 'acct'])}
           >
@@ -60,11 +60,11 @@ class CommentHeader extends ImmutablePureComponent {
 
           {
             isOwner &&
-            <div className={[_s.default, _s.alignItemsCenter, _s.ml5].join(' ')}>
+            <div className={[_s._, _s.aiCenter, _s.ml5].join(' ')}>
               <span className={_s.visiblyHidden}>
                 {intl.formatMessage(messages.original)}
               </span>
-              <Icon id='mic' size='10px' className={_s.colorBrand} />
+              <Icon id='mic' size='10px' className={_s.cBrand} />
             </div>
           }
 
diff --git a/app/javascript/gabsocial/components/comment_list.js b/app/javascript/gabsocial/components/comment_list.js
index 157287d3..767e0fc6 100644
--- a/app/javascript/gabsocial/components/comment_list.js
+++ b/app/javascript/gabsocial/components/comment_list.js
@@ -41,7 +41,7 @@ class CommentList extends ImmutablePureComponent {
         </Wrapper>
         {
           size > 0 && size > max && commentsLimited &&
-          <div className={[_s.default, _s.flexRow, _s.px15, _s.pb5, _s.mb10, _s.alignItemsCenter].join(' ')}>
+          <div className={[_s._, _s.flexRow, _s.px15, _s.pb5, _s.mb10, _s.aiCenter].join(' ')}>
             <Button
               isText
               backgroundColor='none'
@@ -52,7 +52,7 @@ class CommentList extends ImmutablePureComponent {
                 View more comments
               </Text>
             </Button>
-            <div className={[_s.default, _s.mlAuto].join(' ')}>
+            <div className={[_s._, _s.mlAuto].join(' ')}>
               <Text color='tertiary'>
                 {max}
                 &nbsp;of&nbsp;
diff --git a/app/javascript/gabsocial/components/composer.js b/app/javascript/gabsocial/components/composer.js
index d675c6e3..ba7f9b09 100644
--- a/app/javascript/gabsocial/components/composer.js
+++ b/app/javascript/gabsocial/components/composer.js
@@ -72,7 +72,7 @@ const findWithRegex = (regex, contentBlock, callback) => {
 const HighlightedSpan = (props) => {
   return (
     <span
-      className={_s.colorBrand}
+      className={_s.cBrand}
       data-offset-key={props.offsetKey}
     >
       {props.children}
@@ -238,10 +238,10 @@ class Composer extends React.PureComponent {
     const { editorState } = this.state
 
     const editorContainerClasses = cx({
-      default: 1,
+      _: 1,
       cursorText: 1,
       text: 1,
-      colorPrimary: 1,
+      cPrimary: 1,
       fs16PX: !small,
       fs14PX: small,
       pt15: !small,
@@ -251,7 +251,7 @@ class Composer extends React.PureComponent {
     })
 
     return (
-      <div className={_s.default}>
+      <div className={_s._}>
 
         {
           !small && isPro &&
diff --git a/app/javascript/gabsocial/components/display_name.js b/app/javascript/gabsocial/components/display_name.js
index be71f981..d244c9ff 100644
--- a/app/javascript/gabsocial/components/display_name.js
+++ b/app/javascript/gabsocial/components/display_name.js
@@ -80,20 +80,20 @@ class DisplayName extends ImmutablePureComponent {
     if (!account) return null
 
     const containerClassName = CX({
-      default: 1,
-      maxWidth100PC: 1,
-      alignItemsCenter: !isMultiline,
+      _: 1,
+      maxW100PC: 1,
+      aiCenter: !isMultiline,
       flexRow: !isMultiline,
       cursorPointer: !noHover,
-      alignItemsCenter: isCentered,
+      aiCenter: isCentered,
     })
 
     const displayNameClasses = CX({
       text: 1,
       overflowWrapBreakWord: 1,
       whiteSpaceNoWrap: 1,
-      fontWeightBold: 1,
-      colorPrimary: 1,
+      fw600: 1,
+      cPrimary: 1,
       mr2: 1,
       lineHeight125: !isSmall,
       fs14PX: isSmall,
@@ -108,8 +108,8 @@ class DisplayName extends ImmutablePureComponent {
       flexShrink1: 1,
       overflowWrapBreakWord: 1,
       textOverflowEllipsis: 1,
-      colorSecondary: 1,
-      fontWeightNormal: 1,
+      cSecondary: 1,
+      fw400: 1,
       lineHeight15: isMultiline,
       lineHeight125: !isMultiline,
       ml5: !isMultiline,
@@ -147,7 +147,7 @@ class DisplayName extends ImmutablePureComponent {
         onMouseLeave={noHover ? undefined : this.handleMouseLeave}
         ref={this.setRef}
       >
-        <span className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.maxWidth100PC].join(' ')}>
+        <span className={[_s._, _s.flexRow, _s.aiCenter, _s.maxW100PC].join(' ')}>
           <bdi className={[_s.text, _s.whiteSpaceNoWrap, _s.textOverflowEllipsis].join(' ')}>
             <strong
               className={displayNameClasses}
@@ -155,12 +155,12 @@ class DisplayName extends ImmutablePureComponent {
             />
             {
               account.get('locked') &&
-              <Icon id='lock-filled' size={`${iconSize - 3}px`} className={[_s.colorPrimary, _s.ml5].join(' ')} />
+              <Icon id='lock-filled' size={`${iconSize - 3}px`} className={[_s.cPrimary, _s.ml5].join(' ')} />
             }
           </bdi>
           {
             account.get('is_verified') &&
-            <Icon id='verified' size={`${iconSize}px`} className={[_s.ml5, _s.default].join(' ')} />
+            <Icon id='verified' size={`${iconSize}px`} className={[_s.ml5, _s._].join(' ')} />
           }
         </span>
         {
@@ -169,7 +169,7 @@ class DisplayName extends ImmutablePureComponent {
             @{account.get('acct')}
             {
               !noRelationship && !!relationshipLabel &&
-              <span className={[_s.default, _s.ml5, _s.justifyContentCenter].join(' ')}>
+              <span className={[_s._, _s.ml5, _s.jcCenter].join(' ')}>
                 <Text
                   size='extraSmall'
                   isBadge
diff --git a/app/javascript/gabsocial/components/divider.js b/app/javascript/gabsocial/components/divider.js
index 46020827..e83a8f74 100644
--- a/app/javascript/gabsocial/components/divider.js
+++ b/app/javascript/gabsocial/components/divider.js
@@ -13,10 +13,10 @@ class Divider extends React.PureComponent {
     const { isSmall, isInvisible } = this.props
 
     const classes = CX({
-      default: 1,
+      _: 1,
       borderBottom1PX: !isInvisible,
       borderColorSecondary: !isInvisible,
-      width100PC: 1,
+      w100PC: 1,
       mb15: !isSmall,
       my10: isSmall || isInvisible,
     })
diff --git a/app/javascript/gabsocial/components/error_boundary.js b/app/javascript/gabsocial/components/error_boundary.js
index 793f228c..27900e92 100644
--- a/app/javascript/gabsocial/components/error_boundary.js
+++ b/app/javascript/gabsocial/components/error_boundary.js
@@ -61,15 +61,15 @@ class ErrorBoundary extends React.PureComponent {
     if (!hasError) return this.props.children
 
     return (
-      <div className={[_s.default, _s.heightMin100VH, _s.width100PC, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
-        <div className={[_s.default, _s.heightMin53PX, _s.bgBrand, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
-          <div className={[_s.default, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.width1255PX].join(' ')}>
+      <div className={[_s._, _s.minH100VH, _s.w100PC, _s.aiCenter, _s.jcCenter].join(' ')}>
+        <div className={[_s._, _s.minH53PX, _s.bgBrand, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
+          <div className={[_s._, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.w1255PX].join(' ')}>
 
-            <div className={[_s.default, _s.flexRow].join(' ')}>
+            <div className={[_s._, _s.flexRow].join(' ')}>
 
-              <h1 className={[_s.default, _s.mr15].join(' ')}>
-                <Button href='/' isText aria-label='Gab' className={[_s.default, _s.justifyContentCenter, _s.noSelect, _s.noUnderline, _s.height53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}>
-                  <Icon id='logo' className={_s.colorWhite} />
+              <h1 className={[_s._, _s.mr15].join(' ')}>
+                <Button href='/' isText aria-label='Gab' className={[_s._, _s.jcCenter, _s.noSelect, _s.noUnderline, _s.h53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}>
+                  <Icon id='logo' className={_s.cWhite} />
                 </Button>
               </h1>
 
@@ -77,9 +77,9 @@ class ErrorBoundary extends React.PureComponent {
           </div>
         </div>
 
-        <div className={[_s.default, _s.maxWidth640PX, _s.px15, _s.py10].join(' ')}>
+        <div className={[_s._, _s.maxW640PX, _s.px15, _s.py10].join(' ')}>
 
-          <Icon id='warning' size='28px' className={[_s.default, _s.colorSecondary, _s.mb15].join(' ')} />
+          <Icon id='warning' size='28px' className={[_s._, _s.cSecondary, _s.mb15].join(' ')} />
 
           <Text size='medium' className={_s.pt15}>
             <FormattedMessage
@@ -95,12 +95,12 @@ class ErrorBoundary extends React.PureComponent {
             />
           </Text>
 
-          <div className={[_s.default, _s.py10, _s.my10].join(' ')}>
+          <div className={[_s._, _s.py10, _s.my10].join(' ')}>
             <Text>
               {APP_NAME} ({version})
             </Text>
 
-            <div className={[_s.default, _s.flexRow, _s.mt10, _s.alignItemsCenter].join(' ')}>
+            <div className={[_s._, _s.flexRow, _s.mt10, _s.aiCenter].join(' ')}>
               <Button
                 isText
                 href={source_url}
@@ -141,7 +141,7 @@ class ErrorBoundary extends React.PureComponent {
 
           <Divider />
 
-          <div className={[_s.default, _s.flexRow].join(' ')}>
+          <div className={[_s._, _s.flexRow].join(' ')}>
             <Button href='/home'>
               <Text align='center' color='inherit'>
                 <FormattedMessage
diff --git a/app/javascript/gabsocial/components/extended_video_player.js b/app/javascript/gabsocial/components/extended_video_player.js
index 525f89f2..ff48b160 100644
--- a/app/javascript/gabsocial/components/extended_video_player.js
+++ b/app/javascript/gabsocial/components/extended_video_player.js
@@ -31,9 +31,9 @@ class ExtendedVideoPlayer extends React.PureComponent {
     const { src, muted, controls, alt } = this.props
 
     return (
-      <div className={[_s.default, _s.width100PC, _s.height100PC, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+      <div className={[_s._, _s.w100PC, _s.h100PC, _s.aiCenter, _s.jcCenter].join(' ')}>
         <video
-          className={[_s.default, _s.maxWidth100PC, _s.heightMax100PC].join(' ')}
+          className={[_s._, _s.maxW100PC, _s.maxH100PC].join(' ')}
           playsInline
           ref={this.setRef}
           src={src}
diff --git a/app/javascript/gabsocial/components/file_input.js b/app/javascript/gabsocial/components/file_input.js
index 33471b05..226abe67 100644
--- a/app/javascript/gabsocial/components/file_input.js
+++ b/app/javascript/gabsocial/components/file_input.js
@@ -41,10 +41,10 @@ class FileInput extends React.PureComponent {
     const { file, hovering } = this.state
 
     const containerClasses = CX(className, {
-      default: 1,
-      alignItemsCenter: 1,
+      _: 1,
+      aiCenter: 1,
       cursorPointer: 1,
-      justifyContentCenter: 1,
+      jcCenter: 1,
       overflowHidden: true,
       radiusSmall: isBordered,
       px10: isBordered,
@@ -55,8 +55,8 @@ class FileInput extends React.PureComponent {
     })
 
     const iconClasses = CX({
-      colorSecondary: !hovering,
-      colorWhite: hovering,
+      cSecondary: !hovering,
+      cWhite: hovering,
     })
 
     return (
@@ -66,7 +66,7 @@ class FileInput extends React.PureComponent {
       >
         {
           !!title &&
-          <div className={[_s.default, _s.mb10, _s.pl15].join(' ')}>
+          <div className={[_s._, _s.mb10, _s.pl15].join(' ')}>
             <Text size='small' weight='medium' color='secondary'>
               {title}
             </Text>
@@ -83,12 +83,12 @@ class FileInput extends React.PureComponent {
         >
           <Image
             alt={title || id}
-            className={[_s.height100PC, _s.width100PC].join(' ')}
+            className={[_s.h100PC, _s.w100PC].join(' ')}
             src={fileType === 'image' ? file : null}
           />
           {
             (!file || hovering) &&
-            <div className={[_s.default, _s.posAbs, _s.cursorPointer, _s.top0, _s.bottom0, _s.left0, _s.right0, _s.alignItemsCenter, _s.justifyContentCenter, _s.bgBlackOpaquest_onHover].join(' ')}>
+            <div className={[_s._, _s.posAbs, _s.cursorPointer, _s.top0, _s.bottom0, _s.left0, _s.right0, _s.aiCenter, _s.jcCenter, _s.bgBlackOpaquest_onHover].join(' ')}>
               <Icon id='add-image' size='32px' className={iconClasses} />
             </div>
           }
diff --git a/app/javascript/gabsocial/components/floating_action_button.js b/app/javascript/gabsocial/components/floating_action_button.js
index 5b249a44..b2de7475 100644
--- a/app/javascript/gabsocial/components/floating_action_button.js
+++ b/app/javascript/gabsocial/components/floating_action_button.js
@@ -39,7 +39,7 @@ class FloatingActionButton extends React.PureComponent {
         <Button
           to={isDesktop ? undefined : '/compose'}
           onClick={isDesktop ? onOpenCompose : undefined}
-          className={[_s.py15, _s.height60PX, _s.saveAreaInsetMR, _s.saveAreaInsetMB, _s.width60PX, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
+          className={[_s.py15, _s.h60PX, _s.saveAreaInsetMR, _s.saveAreaInsetMB, _s.w60PX, _s.jcCenter, _s.aiCenter].join(' ')}
           title={message}
           aria-label={message}
           icon='pencil'
diff --git a/app/javascript/gabsocial/components/footer_bar.js b/app/javascript/gabsocial/components/footer_bar.js
index f7ce5212..f59997f6 100644
--- a/app/javascript/gabsocial/components/footer_bar.js
+++ b/app/javascript/gabsocial/components/footer_bar.js
@@ -57,9 +57,9 @@ class FooterBar extends React.PureComponent {
     ]
 
     return (
-      <div className={[_s.default, _s.z4, _s.heightMin58PX, _s.width100PC].join(' ')}>
-        <div className={[_s.default, _s.posFixed, _s.left0, _s.right0, _s.bottom0, _s.heightMin58PX, _s.width100PC, _s.bgPrimary, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}>
-          <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.height100PC, _s.heightMin58PX, _s.saveAreaInsetPB, _s.justifyContentSpaceAround].join(' ')}>
+      <div className={[_s._, _s.z4, _s.minH58PX, _s.w100PC].join(' ')}>
+        <div className={[_s._, _s.posFixed, _s.left0, _s.right0, _s.bottom0, _s.minH58PX, _s.w100PC, _s.bgPrimary, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}>
+          <div className={[_s._, _s.flexRow, _s.aiCenter, _s.h100PC, _s.minH58PX, _s.saveAreaInsetPB, _s.jcSpaceAround].join(' ')}>
             {
               buttons.map((props) => {
                 if (props.isHidden) return null
@@ -68,12 +68,12 @@ class FooterBar extends React.PureComponent {
                   borderTop2PX: 1,
                   borderColorTransparent: !props.active,
                   borderColorBrand: props.active,
-                  height100PC: 1,
-                  heightMin58PX: 1,
+                  h100PC: 1,
+                  minH58PX: 1,
                   px15: 1,
                   flexGrow1: 1,
-                  alignItemsCenter: 1,
-                  justifyContentCenter: 1,
+                  aiCenter: 1,
+                  jcCenter: 1,
                 })
                 
                 const color = props.active ? 'brand' : 'secondary'
@@ -81,7 +81,7 @@ class FooterBar extends React.PureComponent {
                 if (props.to === '/notifications' && notificationCount > 0) {
                   childIcon = (
                     <div className={[_s.posAbs, _s.ml5, _s.top0, _s.pt5, _s.pl20].join(' ')}>
-                      <span className={[_s.bgRed, _s.colorWhite, _s.circle, _s.py2, _s.px2, _s.minWidth14PX, _s.displayBlock].join(' ')} style={{fontSize: '12px'}}>
+                      <span className={[_s.bgRed, _s.cWhite, _s.circle, _s.py2, _s.px2, _s.minW14PX, _s.displayBlock].join(' ')} style={{fontSize: '12px'}}>
                         {notificationCount}
                       </span>
                     </div>
@@ -89,7 +89,7 @@ class FooterBar extends React.PureComponent {
                 } else if (props.to === '/home' && homeItemsQueueCount > 0) {
                   childIcon = (
                     <div className={[_s.posAbs, _s.ml5, _s.top0, _s.pt2, _s.pl20].join(' ')}>
-                      <span className={[_s.colorBrand, _s.circle, _s.py2, _s.px2, _s.minWidth14PX, _s.displayBlock].join(' ')} style={{fontSize: '18px'}}>
+                      <span className={[_s.cBrand, _s.circle, _s.py2, _s.px2, _s.minW14PX, _s.displayBlock].join(' ')} style={{fontSize: '18px'}}>
                         •
                       </span>
                     </div>
diff --git a/app/javascript/gabsocial/components/form.js b/app/javascript/gabsocial/components/form.js
index bc63ac4c..8ff46d81 100644
--- a/app/javascript/gabsocial/components/form.js
+++ b/app/javascript/gabsocial/components/form.js
@@ -12,14 +12,14 @@ class Form extends React.PureComponent {
     } = this.props
 
     return (
-      <form onSubmit={onSubmit} className={_s.default}>
+      <form onSubmit={onSubmit} className={_s._}>
         {
           !!errorMessage &&
           <Text color='danger' className={_s.my10}>
             {errorMessage}
           </Text>
         }
-        <div className={_s.default}>
+        <div className={_s._}>
           {children}
         </div>
       </form>
diff --git a/app/javascript/gabsocial/components/global_footer.js b/app/javascript/gabsocial/components/global_footer.js
index 8d406a99..4de5cc8d 100644
--- a/app/javascript/gabsocial/components/global_footer.js
+++ b/app/javascript/gabsocial/components/global_footer.js
@@ -11,30 +11,30 @@ export default class GlobalFooter extends React.PureComponent {
   render() {
 
     return (
-      <div className={[_s.default, _s.z4, _s.width100PC].join(' ')}>
-        <div className={[_s.default, _s.left0, _s.right0, _s.bottom0, _s.width100PC, _s.bgSubtle, _s.borderTop1PX, _s.alignItemsCenter, _s.borderColorSecondary].join(' ')}>
+      <div className={[_s._, _s.z4, _s.w100PC].join(' ')}>
+        <div className={[_s._, _s.left0, _s.right0, _s.bottom0, _s.w100PC, _s.bgSubtle, _s.borderTop1PX, _s.aiCenter, _s.borderColorSecondary].join(' ')}>
 
-          <div className={[_s.default, _s.mt15, _s.mb15].join(' ')}>
+          <div className={[_s._, _s.mt15, _s.mb15].join(' ')}>
             <ResponsiveClassesComponent
-              classNames={[_s.default, _s.width1255PX, _s.flexRow, _s.py15, _s.mt15, _s.mb15].join(' ')}
-              classNamesSmall={[_s.default, _s.width1255PX, _s.alignItemsCenter, _s.pt15, _s.px15, _s.mt15].join(' ')}
+              classNames={[_s._, _s.w1255PX, _s.flexRow, _s.py15, _s.mt15, _s.mb15].join(' ')}
+              classNamesSmall={[_s._, _s.w1255PX, _s.aiCenter, _s.pt15, _s.px15, _s.mt15].join(' ')}
             >
 
               <ResponsiveClassesComponent
-                classNames={[_s.default, _s.width330PX].join(' ')}
-                classNamesSmall={[_s.default, _s.alignItemsCenter].join(' ')}
+                classNames={[_s._, _s.w330PX].join(' ')}
+                classNamesSmall={[_s._, _s.aiCenter].join(' ')}
               >
-                <div className={[_s.default, _s.mb10].join(' ')}>
+                <div className={[_s._, _s.mb10].join(' ')}>
                   <Icon id='logo' />
                 </div>
-                <div className={[_s.default, _s.pr15, _s.maxWidth640PX].join(' ')}>
+                <div className={[_s._, _s.pr15, _s.maxW640PX].join(' ')}>
                   <Text size='medium'>We build Freedom Of Speech Software. We champion free speech, individual liberty and the free flow of information online. All are welcome.</Text>
                 </div>
               </ResponsiveClassesComponent>
 
               <ResponsiveClassesComponent
-                classNames={[_s.default, _s.flexRow, _s.flexGrow1, _s.pl15].join(' ')}
-                classNamesSmall={[_s.default, _s.py15, _s.width100PC, _s.px15].join(' ')}
+                classNames={[_s._, _s.flexRow, _s.flexGrow1, _s.pl15].join(' ')}
+                classNamesSmall={[_s._, _s.py15, _s.w100PC, _s.px15].join(' ')}
               >
 
                 <GlobalFooterColumn
@@ -117,13 +117,13 @@ export default class GlobalFooter extends React.PureComponent {
             </ResponsiveClassesComponent>
           </div>
 
-          <div className={[_s.default, _s.alignItemsCenter, _s.bgSecondary, _s.height100PC, _s.heightMin58PX, _s.width100PC, _s.saveAreaInsetPB, _s.justifyContentSpaceAround].join(' ')}>
+          <div className={[_s._, _s.aiCenter, _s.bgSecondary, _s.h100PC, _s.minH58PX, _s.w100PC, _s.saveAreaInsetPB, _s.jcSpaceAround].join(' ')}>
             <ResponsiveClassesComponent
-              classNames={[_s.default, _s.width1255PX, _s.flexRow, _s.alignItemsCenter].join(' ')}
-              classNamesXS={[_s.default, _s.width1255PX, _s.alignItemsCenter, _s.px15, _s.pt15].join(' ')}
+              classNames={[_s._, _s.w1255PX, _s.flexRow, _s.aiCenter].join(' ')}
+              classNamesXS={[_s._, _s.w1255PX, _s.aiCenter, _s.px15, _s.pt15].join(' ')}
             >
 
-              <div classNames={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
+              <div classNames={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
                 <Text weight='bold'>
                   © 2020
                 </Text>
@@ -142,8 +142,8 @@ export default class GlobalFooter extends React.PureComponent {
               </div>
                 
               <ResponsiveClassesComponent
-                classNames={[_s.default, _s.alignItemsCenter, _s.mlAuto].join(' ')}
-                classNamesXS={[_s.default, _s.alignItemsCenter, _s.py15].join(' ')}
+                classNames={[_s._, _s.aiCenter, _s.mlAuto].join(' ')}
+                classNamesXS={[_s._, _s.aiCenter, _s.py15].join(' ')}
               >
                 <Text>
                   Made in USA 🇺🇸
@@ -181,8 +181,8 @@ class GlobalFooterColumn extends React.PureComponent {
 
     return (
       <ResponsiveClassesComponent
-        classNames={[_s.default, _s.flexNormal].join(' ')}
-        classNamesSmall={[_s.default, _s.width100PC, _s.alignItemsCenter, _s.mt15, _s.mb5, _s.pt15, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}
+        classNames={[_s._, _s.flexNormal].join(' ')}
+        classNamesSmall={[_s._, _s.w100PC, _s.aiCenter, _s.mt15, _s.mb5, _s.pt15, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}
       >
         <div className={_s.mb10}>
           <Heading size='h3'>{title}</Heading>
diff --git a/app/javascript/gabsocial/components/group_collection_item.js b/app/javascript/gabsocial/components/group_collection_item.js
index d134f071..93bce788 100644
--- a/app/javascript/gabsocial/components/group_collection_item.js
+++ b/app/javascript/gabsocial/components/group_collection_item.js
@@ -42,7 +42,7 @@ class GroupCollectionItem extends ImmutablePureComponent {
     }
 
     const navLinkClasses = cx({
-      default: 1,
+      _: 1,
       noUnderline: 1,
       overflowHidden: 1,
       borderColorSecondary: 1,
@@ -57,7 +57,7 @@ class GroupCollectionItem extends ImmutablePureComponent {
     })
 
     return (
-      <div className={_s.default}>
+      <div className={_s._}>
         <NavLink
           to={`/groups/${group.get('id')}`}
           className={navLinkClasses}
@@ -67,18 +67,18 @@ class GroupCollectionItem extends ImmutablePureComponent {
             <Image
               src={coverSrc}
               alt={group.get('title')}
-              className={_s.height158PX}
+              className={_s.h158PX}
             />
           }
 
           {
             (!coverSrc || coverMissing) && (isMember || isAdmin) &&
-            <div className={[_s.default, _s.height40PX, _s.bgSubtle, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')} />
+            <div className={[_s._, _s.h40PX, _s.bgSubtle, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')} />
           }
 
           {
             (isMember || isAdmin) &&
-            <div className={[_s.default, _s.flexRow, _s.posAbs, _s.top0, _s.right0, _s.pt10, _s.mr10].join(' ')}>
+            <div className={[_s._, _s.flexRow, _s.posAbs, _s.top0, _s.right0, _s.pt10, _s.mr10].join(' ')}>
               {
                 isMember &&
                 <Text
@@ -104,12 +104,12 @@ class GroupCollectionItem extends ImmutablePureComponent {
             </div>
           }
 
-          <div className={[_s.default, _s.px10, _s.my10].join(' ')}>
+          <div className={[_s._, _s.px10, _s.my10].join(' ')}>
             <Text color='primary' size='medium' weight='bold'>
               {group.get('title')}
             </Text>
 
-            <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.mt5, _s.mb5].join(' ')}>
+            <div className={[_s._, _s.flexRow, _s.aiCenter, _s.mt5, _s.mb5].join(' ')}>
               <Text color='secondary' size='small'>
                 {shortNumberFormat(group.get('member_count'))}
                 &nbsp;
diff --git a/app/javascript/gabsocial/components/group_header.js b/app/javascript/gabsocial/components/group_header.js
index a68bca60..d2869b71 100644
--- a/app/javascript/gabsocial/components/group_header.js
+++ b/app/javascript/gabsocial/components/group_header.js
@@ -97,25 +97,25 @@ class GroupHeader extends ImmutablePureComponent {
     // {group.get('archived') && <Icon id='lock' title={intl.formatMessage(messages.group_archived)} />}
 
     return (
-      <div className={[_s.default, _s.z1, _s.width100PC, _s.mb15].join(' ')}>
+      <div className={[_s._, _s.z1, _s.w100PC, _s.mb15].join(' ')}>
         <Responsive max={BREAKPOINT_EXTRA_SMALL}>
-          <div className={[_s.default, _s.boxShadowBlock, _s.bgPrimary].join(' ')}>
-            <div className={[_s.default, _s.width100PC].join(' ')}>
+          <div className={[_s._, _s.boxShadowBlock, _s.bgPrimary].join(' ')}>
+            <div className={[_s._, _s.w100PC].join(' ')}>
 
               {
                 coverSrc && !coverSrcMissing &&
-                <Image className={_s.height200PX} src={coverSrc} alt={title} />
+                <Image className={_s.h200PX} src={coverSrc} alt={title} />
               }
 
-              <div className={[_s.default, _s.width100PC].join(' ')}>
+              <div className={[_s._, _s.w100PC].join(' ')}>
 
-                <div className={[_s.default, _s.width100PC, _s.px15, _s.mt10, _s.py10].join(' ')}>
+                <div className={[_s._, _s.w100PC, _s.px15, _s.mt10, _s.py10].join(' ')}>
                   {children}
                 </div>
 
                 {
                   !!me &&
-                  <div className={[_s.default, _s.flexRow, _s.justifyContentCenter, _s.alignItemsCenter, _s.mt5, _s.pb15, _s.pt5, _s.height100PC, _s.borderBottom1PX, _s.borderColorSecondary, _s.px15].join(' ')}>
+                  <div className={[_s._, _s.flexRow, _s.jcCenter, _s.aiCenter, _s.mt5, _s.pb15, _s.pt5, _s.h100PC, _s.borderBottom1PX, _s.borderColorSecondary, _s.px15].join(' ')}>
                     {
                       !!actionButtonTitle &&
                       <Button
@@ -140,7 +140,7 @@ class GroupHeader extends ImmutablePureComponent {
                   </div>
                 }
 
-                <div className={[_s.default, _s.flexRow, _s.height100PC, _s.mt5, _s.pt10, _s.pb5, _s.mb5, _s.px10].join(' ')}>
+                <div className={[_s._, _s.flexRow, _s.h100PC, _s.mt5, _s.pt10, _s.pb5, _s.mb5, _s.px10].join(' ')}>
 
                   <Pills pills={tabs} />
 
@@ -152,20 +152,20 @@ class GroupHeader extends ImmutablePureComponent {
 
         { /** desktop */}
         <Responsive min={BREAKPOINT_EXTRA_SMALL}>
-          <div className={[_s.default, _s.boxShadowBlock, _s.bgPrimary, _s.bottomLeftRadiusSmall, _s.bottomRightRadiusSmall].join(' ')}>
-            <div className={[_s.default, _s.width100PC].join(' ')}>
+          <div className={[_s._, _s.boxShadowBlock, _s.bgPrimary, _s.bottomLeftRadiusSmall, _s.bottomRightRadiusSmall].join(' ')}>
+            <div className={[_s._, _s.w100PC].join(' ')}>
 
               {
                 coverSrc && !coverSrcMissing &&
-                <Image className={_s.height350PX} src={coverSrc} alt={title} />
+                <Image className={_s.h350PX} src={coverSrc} alt={title} />
               }
               
-              <div className={[_s.default].join(' ')}>
-                <div className={[_s.default, _s.flexRow, _s.py10, _s.px10].join(' ')}>
-                  <div className={[_s.default, _s.width100PC].join(' ')}>
-                    <div className={[_s.default, _s.flexRow].join(' ')}>
+              <div className={[_s._].join(' ')}>
+                <div className={[_s._, _s.flexRow, _s.py10, _s.px10].join(' ')}>
+                  <div className={[_s._, _s.w100PC].join(' ')}>
+                    <div className={[_s._, _s.flexRow].join(' ')}>
                       <Icon id='group' size='28px' />
-                      <div className={[_s.default, _s.ml7, _s.flexNormal].join(' ')}>
+                      <div className={[_s._, _s.ml7, _s.flexNormal].join(' ')}>
                         <Heading>
                           {title}
                         </Heading>
@@ -179,15 +179,15 @@ class GroupHeader extends ImmutablePureComponent {
                     </div>
                   </div>
                 </div>
-                <div className={[_s.default, _s.height53PX, _s.width100PC].join(' ')}>
-                  <div className={[_s.default, _s.flexRow, _s.height100PC, _s.px10].join(' ')}>
+                <div className={[_s._, _s.h53PX, _s.w100PC].join(' ')}>
+                  <div className={[_s._, _s.flexRow, _s.h100PC, _s.px10].join(' ')}>
                     
                     <TabBar tabs={tabs} isLarge />
 
-                    <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.height100PC, _s.mlAuto].join(' ')}>
+                    <div className={[_s._, _s.flexRow, _s.aiCenter, _s.h100PC, _s.mlAuto].join(' ')}>
                       {
                         !!me &&
-                        <div className={[_s.default, _s.flexRow, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}>
+                        <div className={[_s._, _s.flexRow, _s.jcCenter, _s.aiCenter].join(' ')}>
                           <Button
                             iconSize='18px'
                             color='brand'
diff --git a/app/javascript/gabsocial/components/group_list_item.js b/app/javascript/gabsocial/components/group_list_item.js
index 7e055433..4f3ac29b 100644
--- a/app/javascript/gabsocial/components/group_list_item.js
+++ b/app/javascript/gabsocial/components/group_list_item.js
@@ -56,22 +56,22 @@ class GroupListItem extends ImmutablePureComponent {
     }
     
     const containerClasses = CX({
-      default: 1,
+      _: 1,
       overflowHidden: 1,
       bgSubtle_onHover: 1,
       borderColorSecondary: 1,
       borderBottom1PX: !isLast,
       flexRow: 1,
       py5: 1,
-      width100PC: 1,
+      w100PC: 1,
     })
 
     const containerLinkClasses = CX({
-      default: 1,
+      _: 1,
       flexRow: 1,
       noUnderline: 1,
-      width100PC: 1,
-      maxWidth100PC86PX: isAddable,
+      w100PC: 1,
+      maxW100PC86PX: isAddable,
     })
 
     const coverSrc = group.get('cover_image_url') || ''
@@ -94,11 +94,11 @@ class GroupListItem extends ImmutablePureComponent {
             <Image
               src={coverSrc}
               alt={group.get('title')}
-              className={[_s.radiusSmall, _s.height53PX, _s.width84PX, _s.ml15].join(' ')}
+              className={[_s.radiusSmall, _s.h53PX, _s.w84PX, _s.ml15].join(' ')}
             />
           }
 
-          <div className={[_s.default, _s.px10, _s.mt5, _s.flexShrink1].join(' ')}>
+          <div className={[_s._, _s.px10, _s.mt5, _s.flexShrink1].join(' ')}>
             <Text color='brand' weight='bold'>
               {group.get('title')}
             </Text>
@@ -113,13 +113,13 @@ class GroupListItem extends ImmutablePureComponent {
         </Wrapper>
         {
           isAddable &&
-          <div className={[_s.default, _s.justifyContentCenter, _s.flexGrow1].join(' ')}>
+          <div className={[_s._, _s.jcCenter, _s.flexGrow1].join(' ')}>
             {
               relationships &&
               <Button
                 isNarrow
                 color='white'
-                className={[_s.px10, _s.width76PX].join(' ')}
+                className={[_s.px10, _s.w76PX].join(' ')}
                 backgroundColor={addButtonColor}
                 onClick={this.handleOnToggleMembership}
                 onMouseEnter={this.handleOnMouseEnter}
diff --git a/app/javascript/gabsocial/components/hashtag_item.js b/app/javascript/gabsocial/components/hashtag_item.js
index 0ca18f3f..a9c7e3f0 100644
--- a/app/javascript/gabsocial/components/hashtag_item.js
+++ b/app/javascript/gabsocial/components/hashtag_item.js
@@ -19,9 +19,9 @@ class HashtagItem extends ImmutablePureComponent {
     return (
       <NavLink
         to={`/tags/${hashtag.get('name')}`}
-        className={[_s.default, _s.noUnderline, _s.bgSubtle_onHover, _s.px15, _s.py5].join(' ')}
+        className={[_s._, _s.noUnderline, _s.bgSubtle_onHover, _s.px15, _s.py5].join(' ')}
       >
-        <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
+        <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
           <div>
             <Text color='brand' size='medium' weight='bold' className={[_s.py2, _s.lineHeight15].join(' ')}>
               #{hashtag.get('name')}
@@ -36,7 +36,7 @@ class HashtagItem extends ImmutablePureComponent {
               title='Remove'
               icon='close'
               iconSize='8px'
-              iconClassName={_s.colorSecondary}
+              iconClassName={_s.cSecondary}
               className={_s.mlAuto}
             />
           }
diff --git a/app/javascript/gabsocial/components/heading.js b/app/javascript/gabsocial/components/heading.js
index 3666f126..6cf81984 100644
--- a/app/javascript/gabsocial/components/heading.js
+++ b/app/javascript/gabsocial/components/heading.js
@@ -36,12 +36,12 @@ class Heading extends React.PureComponent {
 
     // Each size has it's own custom style
     const classes = cx({
-      default: 1,
+      _: 1,
       text: 1,
       textAlignCenter: isCentered,
 
-      colorPrimary: [SIZES.h1, SIZES.h2].indexOf(size) > -1,
-      colorSecondary: [SIZES.h3, SIZES.h4, SIZES.h5].indexOf(size) > -1,
+      cPrimary: [SIZES.h1, SIZES.h2].indexOf(size) > -1,
+      cSecondary: [SIZES.h3, SIZES.h4, SIZES.h5].indexOf(size) > -1,
 
       fs24PX: size === SIZES.h1,
       fs19PX: size === SIZES.h2,
@@ -54,8 +54,8 @@ class Heading extends React.PureComponent {
       lineHeight2: size === SIZES.h5,
       py2: size === SIZES.h5,
 
-      fontWeightMedium: [SIZES.h1, SIZES.h3, SIZES.h5].indexOf(size) > -1,
-      fontWeightBold: [SIZES.h2, SIZES.h4].indexOf(size) > -1,
+      fw500: [SIZES.h1, SIZES.h3, SIZES.h5].indexOf(size) > -1,
+      fw600: [SIZES.h2, SIZES.h4].indexOf(size) > -1,
     })
 
     return React.createElement(
diff --git a/app/javascript/gabsocial/components/image.js b/app/javascript/gabsocial/components/image.js
index 8b6f628d..84b3ee41 100644
--- a/app/javascript/gabsocial/components/image.js
+++ b/app/javascript/gabsocial/components/image.js
@@ -28,7 +28,7 @@ class Image extends React.PureComponent {
     const { error } = this.state
 
     const classes = cx(className, {
-      default: 1,
+      _: 1,
       objectFitCover: !!src && fit === 'cover',
       bgSecondary: !src,
     })
diff --git a/app/javascript/gabsocial/components/image_loader.js b/app/javascript/gabsocial/components/image_loader.js
index 9a09342a..72637c20 100644
--- a/app/javascript/gabsocial/components/image_loader.js
+++ b/app/javascript/gabsocial/components/image_loader.js
@@ -142,9 +142,9 @@ class ImageLoader extends React.PureComponent {
     // }
 
     const className = CX({
-      default: 1,
-      width100PC: 1,
-      height100PC: 1,
+      _: 1,
+      w100PC: 1,
+      h100PC: 1,
       // 'image-loader--loading': loading,
       // 'image-loader--amorphous': !this.hasSize(),
     });
@@ -154,7 +154,7 @@ class ImageLoader extends React.PureComponent {
         <LoadingBar loading={loading ? 1 : 0} className='loading-bar' style={{ width: this.state.width || width }} />
         {loading ? (
           <canvas
-            className={[_s.default, _s.objectFitCover].join(' ')}
+            className={[_s._, _s.objectFitCover].join(' ')}
             ref={this.setCanvasRef}
             width={width}
             height={height}
diff --git a/app/javascript/gabsocial/components/input.js b/app/javascript/gabsocial/components/input.js
index bb7c986f..3a1908df 100644
--- a/app/javascript/gabsocial/components/input.js
+++ b/app/javascript/gabsocial/components/input.js
@@ -34,7 +34,7 @@ class Input extends React.PureComponent {
     } = this.props
 
     const inputClasses = cx({
-      default: 1,
+      _: 1,
       text: 1,
       outlineNone: 1,
       lineHeight125: !small,
@@ -44,8 +44,8 @@ class Input extends React.PureComponent {
       py5: small,
       bgTransparent: !readOnly,
       bgSecondary: readOnly,
-      colorPrimary: !readOnly,
-      colorSecondary: readOnly,
+      cPrimary: !readOnly,
+      cSecondary: readOnly,
       fs15PX: !small,
       fs13PX: small,
       flexGrow1: 1,
@@ -65,16 +65,16 @@ class Input extends React.PureComponent {
       <React.Fragment>
         {
           !!title && !hideLabel &&
-          <div className={[_s.default, _s.mb10, _s.pl15].join(' ')}>
+          <div className={[_s._, _s.mb10, _s.pl15].join(' ')}>
             <Text htmlFor={id} size='small' weight='medium' color='secondary' tagName='label'>
               {title}
             </Text>
           </div>
         }
-        <div className={[_s.default, _s.flexGrow1, _s.bgPrimary, _s.border1PX, _s.borderColorSecondary, _s.flexRow, _s.circle, _s.alignItemsCenter].join(' ')}>
+        <div className={[_s._, _s.flexGrow1, _s.bgPrimary, _s.border1PX, _s.borderColorSecondary, _s.flexRow, _s.circle, _s.aiCenter].join(' ')}>
           {
             !!prependIcon &&
-            <Icon id={prependIcon} size='16px' className={[_s.colorPrimary, _s.ml15, _s.mr5].join(' ')} />
+            <Icon id={prependIcon} size='16px' className={[_s.cPrimary, _s.ml15, _s.mr5].join(' ')} />
           }
 
           {
diff --git a/app/javascript/gabsocial/components/link_footer.js b/app/javascript/gabsocial/components/link_footer.js
index 1215eede..02101b43 100644
--- a/app/javascript/gabsocial/components/link_footer.js
+++ b/app/javascript/gabsocial/components/link_footer.js
@@ -72,14 +72,14 @@ class LinkFooter extends React.PureComponent {
     ]
 
     const containerClasses = CX({
-      default: 1,
+      _: 1,
       px10: !noPadding,
       mb15: 1,
     })
 
     return (
       <div className={containerClasses}>
-        <nav aria-label='Footer' role='navigation' className={[_s.default, _s.flexWrap, _s.flexRow].join(' ')}>
+        <nav aria-label='Footer' role='navigation' className={[_s._, _s.flexWrap, _s.flexRow].join(' ')}>
           {
             linkFooterItems.map((linkFooterItem, i) => {
               if (linkFooterItem.requiresUser && !me) return null
diff --git a/app/javascript/gabsocial/components/list_item.js b/app/javascript/gabsocial/components/list_item.js
index 8b0a321b..cee748fe 100644
--- a/app/javascript/gabsocial/components/list_item.js
+++ b/app/javascript/gabsocial/components/list_item.js
@@ -35,7 +35,7 @@ class ListItem extends React.PureComponent {
 
     if (!title) {
       return (
-        <div className={[_s.default, _s.bgSecondary, _s.width100PC, _s.height4PX].join(' ')} />
+        <div className={[_s._, _s.bgSecondary, _s.w100PC, _s.h4PX].join(' ')} />
       )
     }
 
@@ -56,7 +56,7 @@ class ListItem extends React.PureComponent {
     const showActive = isActive !== undefined
 
     const containerClasses = cx({
-      default: 1,
+      _: 1,
       cursorPointer: 1,
       noUnderline: 1,
       px15: !small,
@@ -64,8 +64,8 @@ class ListItem extends React.PureComponent {
       px10: small,
       py10: small,
       flexRow: 1,
-      alignItemsCenter: 1,
-      width100PC: 1,
+      aiCenter: 1,
+      w100PC: 1,
       outlineNone: 1,
       bgTransparent: 1,
       bgSubtle_onHover: 1,
@@ -76,14 +76,14 @@ class ListItem extends React.PureComponent {
     const iconClasses = cx({
       mr10: !large,
       mr15: large,
-      colorPrimary: !!icon,
+      cPrimary: !!icon,
       circle: !icon && !!image,
     })
 
     const textContainerClasses = cx({
-      default: 1,
+      _: 1,
       pr5: 1,
-      maxWidth100PC42PX: !hideArrow || showActive,
+      maxW100PC42PX: !hideArrow || showActive,
     })
 
     return (
@@ -132,7 +132,7 @@ class ListItem extends React.PureComponent {
           <Icon
             id={!!actionIcon ? actionIcon : 'angle-right'}
             size='10px'
-            className={[_s.mlAuto, _s.colorSecondary, _s.flexShrink1].join(' ')}
+            className={[_s.mlAuto, _s.cSecondary, _s.flexShrink1].join(' ')}
           />
         }
 
diff --git a/app/javascript/gabsocial/components/load_more.js b/app/javascript/gabsocial/components/load_more.js
index 8217bee9..06d7d378 100644
--- a/app/javascript/gabsocial/components/load_more.js
+++ b/app/javascript/gabsocial/components/load_more.js
@@ -20,7 +20,7 @@ class LoadMore extends React.PureComponent {
     if (!visible || disabled) return null
 
     return (
-      <div className={[_s.default, _s.py15, _s.px10].join(' ')}>
+      <div className={[_s._, _s.py15, _s.px10].join(' ')}>
         <Button
           isBlock
           radiusSmall
diff --git a/app/javascript/gabsocial/components/logged_out_navigation_bar.js b/app/javascript/gabsocial/components/logged_out_navigation_bar.js
index 1873ab7c..668a2564 100644
--- a/app/javascript/gabsocial/components/logged_out_navigation_bar.js
+++ b/app/javascript/gabsocial/components/logged_out_navigation_bar.js
@@ -15,19 +15,19 @@ class LoggedOutNavigationBar extends React.PureComponent {
 
     return (
       <ResponsiveClassesComponent
-        classNames={[_s.default, _s.z4, _s.heightMin53PX, _s.width100PC].join(' ')}
-        classNamesXS={[_s.default, _s.z4, _s.heightMin98PX, _s.width100PC].join(' ')}
+        classNames={[_s._, _s.z4, _s.minH53PX, _s.w100PC].join(' ')}
+        classNamesXS={[_s._, _s.z4, _s.minH98PX, _s.w100PC].join(' ')}
       >
         <ResponsiveClassesComponent
-          classNames={[_s.default, _s.heightMin53PX, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')}
-          classNamesXS={[_s.default, _s.heightMin98PX, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')}
+          classNames={[_s._, _s.minH53PX, _s.bgNavigation, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')}
+          classNamesXS={[_s._, _s.minH98PX, _s.bgNavigation, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')}
         >
 
-          <div className={[_s.default, _s.width1255PX, _s.flexRow, _s.flexWrap, _s.height100PC].join(' ')}>
+          <div className={[_s._, _s.w1255PX, _s.flexRow, _s.flexWrap, _s.h100PC].join(' ')}>
           
             <ResponsiveClassesComponent
-              classNames={[_s.default, _s.alignItemsCenter, _s.justifyContentCenter, _s.flexRow, _s.flexGrow1, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR].join(' ')}
-              classNamesXS={[_s.default, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.width100PC].join(' ')}
+              classNames={[_s._, _s.aiCenter, _s.jcCenter, _s.flexRow, _s.flexGrow1, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR].join(' ')}
+              classNamesXS={[_s._, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.w100PC].join(' ')}
             >
 
               <Button
@@ -41,7 +41,7 @@ class LoggedOutNavigationBar extends React.PureComponent {
               {
                 isProfile &&
                 <ResponsiveComponent min={BREAKPOINT_EXTRA_SMALL}>
-                  <div className={[_s.default, _s.flexRow, _s.mr15].join(' ')}>
+                  <div className={[_s._, _s.flexRow, _s.mr15].join(' ')}>
                     <NavigationBarButton title='Home' icon='home' href='/home' />
                     <NavigationBarButton title='Explore' icon='explore' to='/explore' />
                     <NavigationBarButton title='News' icon='news' to='/news' />
@@ -49,15 +49,15 @@ class LoggedOutNavigationBar extends React.PureComponent {
                 </ResponsiveComponent>
               }
 
-              <div className={[_s.default, _s.flexGrow1, _s.pr10, _s.mrAuto, _s.maxWidth640PX].join(' ')}>
+              <div className={[_s._, _s.flexGrow1, _s.pr10, _s.mrAuto, _s.maxW640PX].join(' ')}>
                 <Search isInNav />
               </div>
 
             </ResponsiveClassesComponent>
 
             <ResponsiveClassesComponent
-              classNames={[_s.default, _s.flexRow, _s.py5, _s.px10, _s.width330PX, _s.mlAuto].join(' ')}
-              classNamesXS={[_s.default, _s.flexRow, _s.pb5, _s.px10, _s.width100PC].join(' ')}
+              classNames={[_s._, _s.flexRow, _s.py5, _s.px10, _s.w330PX, _s.mlAuto].join(' ')}
+              classNamesXS={[_s._, _s.flexRow, _s.pb5, _s.px10, _s.w100PC].join(' ')}
             >
 
               <Button
@@ -66,7 +66,7 @@ class LoggedOutNavigationBar extends React.PureComponent {
                 color='white'
                 backgroundColor='none'
                 href='/auth/sign_in'
-                className={[_s.borderColorWhite, _s.mr5, _s.flexGrow1, _s.alignItemsCenter, _s.justifyContentCenter, _s.py7].join(' ')}
+                className={[_s.borderColorWhite, _s.mr5, _s.flexGrow1, _s.aiCenter, _s.jcCenter, _s.py7].join(' ')}
               >
                 <Text color='inherit' weight='medium' align='center'>
                   Log in
@@ -78,7 +78,7 @@ class LoggedOutNavigationBar extends React.PureComponent {
                 color='brand'
                 backgroundColor='white'
                 href='/auth/sign_up'
-                className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.ml5, _s.flexGrow1, _s.py7].join(' ')}
+                className={[_s.jcCenter, _s.aiCenter, _s.ml5, _s.flexGrow1, _s.py7].join(' ')}
               >
                 <Text color='inherit' weight='bold' align='center'>
                   Sign up
diff --git a/app/javascript/gabsocial/components/logged_out_sidebar.js b/app/javascript/gabsocial/components/logged_out_sidebar.js
index ca04d93f..5ac7461c 100644
--- a/app/javascript/gabsocial/components/logged_out_sidebar.js
+++ b/app/javascript/gabsocial/components/logged_out_sidebar.js
@@ -65,21 +65,21 @@ class Sidebar extends React.PureComponent {
     ]
 
     return (
-      <header role='banner' className={[_s.default, _s.flexGrow1, _s.z3, _s.alignItemsEnd].join(' ')}>
-        <div className={[_s.default, _s.width240PX].join(' ')}>
-          <div className={[_s.default, _s.posFixed, _s.heightCalc53PX, _s.bottom0].join(' ')}>
-            <div className={[_s.default, _s.height100PC, _s.alignItemsStart, _s.width240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}>
-              <div className={[_s.default, _s.width100PC].join(' ')}>
+      <header role='banner' className={[_s._, _s.flexGrow1, _s.z3, _s.aiEnd].join(' ')}>
+        <div className={[_s._, _s.w240PX].join(' ')}>
+          <div className={[_s._, _s.posFixed, _s.calcH53PX, _s.bottom0].join(' ')}>
+            <div className={[_s._, _s.h100PC, _s.aiStart, _s.w240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}>
+              <div className={[_s._, _s.w100PC].join(' ')}>
                 {
                   !!title &&
-                  <div className={[_s.default, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
+                  <div className={[_s._, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
                     <Heading size='h1'>
                       {title}
                     </Heading>
                   </div>
                 }
               </div>
-              <nav aria-label='Primary' role='navigation' className={[_s.default, _s.width100PC, _s.mb15].join(' ')}>
+              <nav aria-label='Primary' role='navigation' className={[_s._, _s.w100PC, _s.mb15].join(' ')}>
                 <SidebarSectionTitle>{intl.formatMessage(messages.menu)}</SidebarSectionTitle>
                 {
                   menuItems.map((menuItem, i) => {
diff --git a/app/javascript/gabsocial/components/media_gallery.js b/app/javascript/gabsocial/components/media_gallery.js
index 5fb36c51..6cd391a8 100644
--- a/app/javascript/gabsocial/components/media_gallery.js
+++ b/app/javascript/gabsocial/components/media_gallery.js
@@ -130,9 +130,9 @@ class Item extends ImmutablePureComponent {
 
     if (attachment.get('type') === 'unknown') {
       return (
-        <div className={[_s.default, _s.posAbs].join(' ')} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, borderRadius, width: `${width}%` }}>
-          <a className={[_s.default, _s.heigh100PC, _s.width100PC, _s.cursorPointer].join(' ')} href={attachment.get('remote_url')} target='_blank' rel='noreferrer noopener'>
-            <canvas width={32} height={32} ref={this.setCanvasRef} className={[_s.default, _s.heigh100PC, _s.width100PC].join(' ')} />
+        <div className={[_s._, _s.posAbs].join(' ')} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, borderRadius, width: `${width}%` }}>
+          <a className={[_s._, _s.heigh100PC, _s.w100PC, _s.cursorPointer].join(' ')} href={attachment.get('remote_url')} target='_blank' rel='noreferrer noopener'>
+            <canvas width={32} height={32} ref={this.setCanvasRef} className={[_s._, _s.heigh100PC, _s.w100PC].join(' ')} />
           </a>
         </div>
       )
@@ -155,7 +155,7 @@ class Item extends ImmutablePureComponent {
 
       thumbnail = (
         <a
-          className={[_s.default, _s.overflowHidden, _s.height100PC, _s.width100PC, _s.cursorPointer].join(' ')}
+          className={[_s._, _s.overflowHidden, _s.h100PC, _s.w100PC, _s.cursorPointer].join(' ')}
           href={attachment.get('remote_url') || originalUrl}
           onClick={this.handleClick}
           target='_blank'
@@ -166,7 +166,7 @@ class Item extends ImmutablePureComponent {
             src={previewUrl}
             srcSet={srcSet}
             sizes={sizes}
-            className={[_s.height100PC, _s.width100PC, _s.objectFitCover].join(' ')}
+            className={[_s.h100PC, _s.w100PC, _s.objectFitCover].join(' ')}
             alt={attachment.get('description')}
             title={attachment.get('description')}
             style={{ objectPosition: `${x}% ${y}%` }}
@@ -178,9 +178,9 @@ class Item extends ImmutablePureComponent {
       const autoPlay = !isIOS() && autoPlayGif !== false;
 
       thumbnail = (
-        <div className={[_s.default, _s.overflowHidden, _s.heigh100PC, _s.width100PC].join(' ')}>
+        <div className={[_s._, _s.overflowHidden, _s.heigh100PC, _s.w100PC].join(' ')}>
           <video
-            className={[_s.default, _s.cursorPointer, _s.objectFitCover, _s.width100PC, _s.height100PC, _s.z1].join(' ')}
+            className={[_s._, _s.cursorPointer, _s.objectFitCover, _s.w100PC, _s.h100PC, _s.z1].join(' ')}
             aria-label={attachment.get('description')}
             title={attachment.get('description')}
             role='application'
@@ -196,7 +196,7 @@ class Item extends ImmutablePureComponent {
             playsInline
           />
 
-          <div className={[_s.default, _s.posAbs, _s.z2, _s.radiusSmall, _s.bgBlackOpaque, _s.px5, _s.py5, _s.mr10, _s.mb10, _s.bottom0, _s.right0].join(' ')}>
+          <div className={[_s._, _s.posAbs, _s.z2, _s.radiusSmall, _s.bgBlackOpaque, _s.px5, _s.py5, _s.mr10, _s.mb10, _s.bottom0, _s.right0].join(' ')}>
             <Text size='extraSmall' color='white' weight='medium'>GIF</Text>
           </div>
         </div>
@@ -207,7 +207,7 @@ class Item extends ImmutablePureComponent {
       <div className={[_s.defeault, _s.posAbs].join(' ')} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
         {
           !visible && !this.state.loaded &&
-          <canvas width={32} height={32} ref={this.setCanvasRef} className={[_s.default, _s.heigh100PC, _s.width100PC].join(' ')} />
+          <canvas width={32} height={32} ref={this.setCanvasRef} className={[_s._, _s.heigh100PC, _s.w100PC].join(' ')} />
         }
         {visible && thumbnail}
       </div>
@@ -515,7 +515,7 @@ class MediaGallery extends React.PureComponent {
     ))
 
     const containerClasses = cx({
-      default: 1,
+      _: 1,
       displayBlock: 1,
       overflowHidden: 1,
       borderColorSecondary: size === 1 && visible,
@@ -538,7 +538,7 @@ class MediaGallery extends React.PureComponent {
 
         {
           visible &&
-          <div className={[_s.default, _s.displayBlock, _s.width100PC, _s.height100PC, _s.overflowHidden].join(' ')}>
+          <div className={[_s._, _s.displayBlock, _s.w100PC, _s.h100PC, _s.overflowHidden].join(' ')}>
             {children}
           </div>
         }
diff --git a/app/javascript/gabsocial/components/media_item.js b/app/javascript/gabsocial/components/media_item.js
index 1ad652a1..4ad396dd 100644
--- a/app/javascript/gabsocial/components/media_item.js
+++ b/app/javascript/gabsocial/components/media_item.js
@@ -77,19 +77,19 @@ class MediaItem extends ImmutablePureComponent {
     }
 
     const containerClasses = cx({
-      default: 1,
+      _: 1,
       posAbs: 1,
       top0: 1,
-      height100PC: 1,
-      width100PC: 1,
+      h100PC: 1,
+      w100PC: 1,
       py2: !isSmall,
       px2: !isSmall,
     })
 
     const linkClasses = cx({
-      default: 1,
-      width100PC: 1,
-      height100PC: 1,
+      _: 1,
+      w100PC: 1,
+      h100PC: 1,
       overflowHidden: 1,
       border1PX: 1,
       borderColorPrimary: 1,
@@ -98,7 +98,7 @@ class MediaItem extends ImmutablePureComponent {
     const statusUrl = `/${account.getIn(['acct'])}/posts/${status.get('id')}`;
 
     return (
-      <div className={[_s.default, _s.width25PC, _s.pt25PC].join(' ')}>
+      <div className={[_s._, _s.w25PC, _s.pt25PC].join(' ')}>
         <div className={containerClasses}>
           <NavLink
             to={statusUrl}
@@ -111,7 +111,7 @@ class MediaItem extends ImmutablePureComponent {
                 height='100%'
                 width='100%'
                 ref={this.setCanvasRef}
-                className={[_s.default, _s.width100PC, _s.height100PC, _s.z2].join(' ')}
+                className={[_s._, _s.w100PC, _s.h100PC, _s.z2].join(' ')}
               />
             }
 
@@ -127,19 +127,19 @@ class MediaItem extends ImmutablePureComponent {
               />
             }
 
-            <div className={[_s.default, _s.alignItemsCenter, _s.justifyContentCenter, _s.height100PC, _s.width100PC, _s.z3, _s.posAbs].join(' ')}>
+            <div className={[_s._, _s.aiCenter, _s.jcCenter, _s.h100PC, _s.w100PC, _s.z3, _s.posAbs].join(' ')}>
               {
                 !visible &&
                 <Icon
                   id='hidden'
                   size='22px'
-                  className={[_s.colorWhite].join('')}
+                  className={[_s.cWhite].join('')}
                 />
               }
 
               {
                 !!badge &&
-                <div className={[_s.default, _s.posAbs, _s.radiusSmall, _s.bgBlackOpaque, _s.px5, _s.py5, _s.mr5, _s.mt5, _s.mb5, _s.bottom0, _s.right0].join(' ')}>
+                <div className={[_s._, _s.posAbs, _s.radiusSmall, _s.bgBlackOpaque, _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/boost_modal.js b/app/javascript/gabsocial/components/modal/boost_modal.js
index dfa2399e..d8aa85f4 100644
--- a/app/javascript/gabsocial/components/modal/boost_modal.js
+++ b/app/javascript/gabsocial/components/modal/boost_modal.js
@@ -40,7 +40,7 @@ class BoostModal extends ImmutablePureComponent {
         onClose={onClose}
       >
       
-      <div className={[_s.default, _s.px15, _s.py10, _s.mt5].join(' ')}>
+      <div className={[_s._, _s.px15, _s.py10, _s.mt5].join(' ')}>
         <StatusContainer
           contextType='boost-modal'
           id={status.get('id')}
@@ -48,11 +48,11 @@ class BoostModal extends ImmutablePureComponent {
         />
       </div>
 
-        <div className={[_s.default, _s.justifyContentCenter, _s.px15, _s.mt5, _s.mb15].join(' ')}>
+        <div className={[_s._, _s.jcCenter, _s.px15, _s.mt5, _s.mb15].join(' ')}>
           <Text align='center'>
             {intl.formatMessage(messages.combo)}
           </Text>
-          <div className={[_s.default, _s.flexRow, _s.justifyContentCenter, _s.my10, _s.pt15, _s.pb5].join(' ')}>
+          <div className={[_s._, _s.flexRow, _s.jcCenter, _s.my10, _s.pt15, _s.pb5].join(' ')}>
             <Button onClick={this.handleRepost} buttonRef={this.setRef}>
               <Text color='inherit' className={_s.px15}>
                 {intl.formatMessage(buttonText)}
diff --git a/app/javascript/gabsocial/components/modal/community_timeline_settings_modal.js b/app/javascript/gabsocial/components/modal/community_timeline_settings_modal.js
index 507f6de5..a0b6183c 100644
--- a/app/javascript/gabsocial/components/modal/community_timeline_settings_modal.js
+++ b/app/javascript/gabsocial/components/modal/community_timeline_settings_modal.js
@@ -31,7 +31,7 @@ class CommunityTimelineSettingsModal extends ImmutablePureComponent {
         title={intl.formatMessage(messages.title)}
       >
       
-        <div className={[_s.default, _s.pb10].join(' ')}>
+        <div className={[_s._, _s.pb10].join(' ')}>
           <SettingSwitch
             prefix='community_timeline'
             settings={settings}
@@ -44,7 +44,7 @@ class CommunityTimelineSettingsModal extends ImmutablePureComponent {
         <Button
           backgroundColor='brand'
           color='white'
-          className={_s.justifyContentCenter}
+          className={_s.jcCenter}
           onClick={this.handleSaveAndClose}
         >
           <Text color='inherit' weight='bold' align='center'>
diff --git a/app/javascript/gabsocial/components/modal/confirmation_modal.js b/app/javascript/gabsocial/components/modal/confirmation_modal.js
index d20253b1..53bbef56 100644
--- a/app/javascript/gabsocial/components/modal/confirmation_modal.js
+++ b/app/javascript/gabsocial/components/modal/confirmation_modal.js
@@ -35,21 +35,21 @@ class ConfirmationModal extends React.PureComponent {
     } = this.props
 
     return (
-      <div className={_s.width330PX}>
+      <div className={_s.w330PX}>
         <Block>
-          <div className={[_s.default, _s.px15, _s.py15].join(' ')}>
-            <div className={[_s.default, _s.px15, _s.py15].join(' ')}>
+          <div className={[_s._, _s.px15, _s.py15].join(' ')}>
+            <div className={[_s._, _s.px15, _s.py15].join(' ')}>
 
               <Heading size='h1' isCentered>
                 {title}
               </Heading>
 
-              <div className={[_s.default, _s.mt10].join(' ')}>
+              <div className={[_s._, _s.mt10].join(' ')}>
                 <Text align='center' color='secondary'>
                   {message}
                 </Text>
 
-                <div className={[_s.default, _s.flexRow, _s.mt10, _s.pt10].join(' ')}>
+                <div className={[_s._, _s.flexRow, _s.mt10, _s.pt10].join(' ')}>
                   <Button
                     backgroundColor='tertiary'
                     color='primary'
diff --git a/app/javascript/gabsocial/components/modal/display_options_modal.js b/app/javascript/gabsocial/components/modal/display_options_modal.js
index c9e53d90..98b2a38e 100644
--- a/app/javascript/gabsocial/components/modal/display_options_modal.js
+++ b/app/javascript/gabsocial/components/modal/display_options_modal.js
@@ -51,19 +51,19 @@ class DisplayOptionsModal extends ImmutablePureComponent {
         title={intl.formatMessage(messages.title)}
       >
 
-        <div className={[_s.default, _s.mb15].join(' ')}>
+        <div className={[_s._, _s.mb15].join(' ')}>
           <Text align='center' color='secondary' size='medium'>
             {intl.formatMessage(messages.message)}
           </Text>
         </div>
 
-        <div className={[_s.default, _s.mb15].join(' ')}>
+        <div className={[_s._, _s.mb15].join(' ')}>
           <Text weight='bold' size='small' color='secondary'>
             Font Size
           </Text>
-          <div className={[_s.default, _s.radiusSmall, _s.mt10, _s.py15, _s.px15, _s.bgTertiary].join(' ')}>
-            <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
-              <span className={[_s.default, _s.text, _s.colorPrimary].join(' ')} style={{fontSize: '12px'}}>
+          <div className={[_s._, _s.radiusSmall, _s.mt10, _s.py15, _s.px15, _s.bgTertiary].join(' ')}>
+            <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
+              <span className={[_s._, _s.text, _s.cPrimary].join(' ')} style={{fontSize: '12px'}}>
                 Aa
               </span>
               <input
@@ -75,18 +75,18 @@ class DisplayOptionsModal extends ImmutablePureComponent {
                 onChange={this.handleOnFontSizeChange}
                 className={[_s.flexGrow1, _s.outlineNone, _s.ml15, _s.mr15].join(' ')}
               />
-              <span className={[_s.default, _s.text, _s.colorPrimary].join(' ')} style={{fontSize: '18px'}}>
+              <span className={[_s._, _s.text, _s.cPrimary].join(' ')} style={{fontSize: '18px'}}>
                 Aa
               </span>
             </div>
           </div>
         </div>
 
-        <div className={[_s.default, _s.mb15].join(' ')}>
+        <div className={[_s._, _s.mb15].join(' ')}>
           <Text weight='bold' size='small' color='secondary'>
             Rounded
           </Text>
-          <div className={[_s.default, _s.radiusSmall, _s.mt10, _s.py15, _s.px15, _s.bgTertiary].join(' ')}>
+          <div className={[_s._, _s.radiusSmall, _s.mt10, _s.py15, _s.px15, _s.bgTertiary].join(' ')}>
             <SettingSwitch
               prefix='displayOptions'
               settings={displayOptionsSettings}
@@ -105,11 +105,11 @@ class DisplayOptionsModal extends ImmutablePureComponent {
           </div>
         </div>
 
-        <div className={[_s.default, _s.mb10].join(' ')}>
+        <div className={[_s._, _s.mb10].join(' ')}>
           <Text weight='bold' size='small' color='secondary'>
             Theme
           </Text>
-          <div className={[_s.default, _s.radiusSmall, _s.flexRow, _s.mt10, _s.py10, _s.bgTertiary].join(' ')}>
+          <div className={[_s._, _s.radiusSmall, _s.flexRow, _s.mt10, _s.py10, _s.bgTertiary].join(' ')}>
 
             <ThemeBlock
               title='Light'
@@ -186,9 +186,9 @@ class ThemeBlock extends React.PureComponent {
     const id = `theme-${value}`
 
     return (
-      <label className={[_s.default, _s.px10, _s.flexGrow1].join(' ')} htmlFor={id}>
+      <label className={[_s._, _s.px10, _s.flexGrow1].join(' ')} htmlFor={id}>
         <div
-          className={[_s.default, _s.borderBottom6PX, _s.alignItemsCenter, _s.flexRow, _s.py10, _s.px15, _s.radiusSmall].join(' ')}
+          className={[_s._, _s.borderBottom6PX, _s.aiCenter, _s.flexRow, _s.py10, _s.px15, _s.radiusSmall].join(' ')}
           style={style}
         >
           <input
diff --git a/app/javascript/gabsocial/components/modal/edit_profile_modal.js b/app/javascript/gabsocial/components/modal/edit_profile_modal.js
index 553ee672..64bb6053 100644
--- a/app/javascript/gabsocial/components/modal/edit_profile_modal.js
+++ b/app/javascript/gabsocial/components/modal/edit_profile_modal.js
@@ -115,13 +115,13 @@ class EditProfileModal extends ImmutablePureComponent {
     const isVerified = account.get('is_verified')
 
     return (
-      <div style={{ width: '440px' }} className={[_s.default, _s.modal].join(' ')}>
+      <div style={{ width: '440px' }} className={[_s._, _s.modal].join(' ')}>
         <Block>
-          <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX, _s.px15].join(' ')}>
+          <div className={[_s._, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.h53PX, _s.px15].join(' ')}>
             <Button
               backgroundColor='none'
               title={intl.formatMessage(messages.close)}
-              className={[_s.mrAuto, _s.width60PX, _s.pl0].join(' ')}
+              className={[_s.mrAuto, _s.w60PX, _s.pl0].join(' ')}
               onClick={this.handleOnClose}
               color='secondary'
               icon='close'
@@ -132,14 +132,14 @@ class EditProfileModal extends ImmutablePureComponent {
             </Heading>
             <Button
               title={intl.formatMessage(messages.save)}
-              className={[_s.mlAuto, _s.width60PX].join(' ')}
+              className={[_s.mlAuto, _s.w60PX].join(' ')}
               onClick={this.handleOnSave}
             >
               {intl.formatMessage(messages.save)}
             </Button>
           </div>
-          <div className={[_s.default, _s.heightMax80VH, _s.overflowYScroll].join(' ')}>
-            <div className={[_s.default, _s.width100PC, _s.alignItemsCenter].join(' ')}>
+          <div className={[_s._, _s.maxH80VH, _s.overflowYScroll].join(' ')}>
+            <div className={[_s._, _s.w100PC, _s.aiCenter].join(' ')}>
               <FileInput
                 width='440px'
                 height='180px'
@@ -147,7 +147,7 @@ class EditProfileModal extends ImmutablePureComponent {
                 onChange={this.handleCoverPhotoChange}
                 file={headerSrc}
               />
-              <div className={[_s.default, _s.mtNeg50PX, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+              <div className={[_s._, _s.mtNeg50PX, _s.aiCenter, _s.jcCenter].join(' ')}>
                 <FileInput
                   width='132px'
                   height='132px'
@@ -157,7 +157,7 @@ class EditProfileModal extends ImmutablePureComponent {
                   onChange={this.handleProfilePhotoChange}
                 />
               </div>
-              <div className={[_s.default, _s.py5, _s.px15, _s.mt5, _s.mb15, _s.width100PC].join(' ')}>
+              <div className={[_s._, _s.py5, _s.px15, _s.mt5, _s.mb15, _s.w100PC].join(' ')}>
                 {
                   !isVerified &&
                   <React.Fragment>
@@ -182,7 +182,7 @@ class EditProfileModal extends ImmutablePureComponent {
 
                 <Divider isInvisible />
 
-                <div className={[_s.default, _s.px10].join(' ')}>
+                <div className={[_s._, _s.px10].join(' ')}>
                   <Switch
                     label='Private account'
                     checked={locked}
diff --git a/app/javascript/gabsocial/components/modal/embed_modal.js b/app/javascript/gabsocial/components/modal/embed_modal.js
index a2bfe390..40e14437 100644
--- a/app/javascript/gabsocial/components/modal/embed_modal.js
+++ b/app/javascript/gabsocial/components/modal/embed_modal.js
@@ -55,12 +55,12 @@ class EmbedModal extends ImmutablePureComponent {
         title={intl.formatMessage(messages.embed)}
         onClose={onClose}
       >
-        <div className={_s.default}>
+        <div className={_s._}>
           <Text className={_s.my10}>
             {intl.formatMessage(messages.instructions)}
           </Text>
 
-          <div className={[_s.default, _s.mb10].join(' ')}>
+          <div className={[_s._, _s.mb10].join(' ')}>
             <Input
               readOnly
               type='text'
@@ -76,9 +76,9 @@ class EmbedModal extends ImmutablePureComponent {
             {intl.formatMessage(messages.preview)}
           </Text>
 
-          <div className={[_s.default, _s.width100PC, _s.bgSubtle, _s.height220PX, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+          <div className={[_s._, _s.w100PC, _s.bgSubtle, _s.h220PX, _s.aiCenter, _s.jcCenter].join(' ')}>
             <iframe
-              className={[_s.default, _s.width100PC, _s.height100PC, _s.z2].join(' ')}
+              className={[_s._, _s.w100PC, _s.h100PC, _s.z2].join(' ')}
               frameBorder='0'
               ref={this.setIframeRef}
               sandbox='allow-same-origin'
diff --git a/app/javascript/gabsocial/components/modal/gif_picker_modal.js b/app/javascript/gabsocial/components/modal/gif_picker_modal.js
index 18610abe..5e467359 100644
--- a/app/javascript/gabsocial/components/modal/gif_picker_modal.js
+++ b/app/javascript/gabsocial/components/modal/gif_picker_modal.js
@@ -55,8 +55,8 @@ class GifPickerModal extends React.PureComponent {
     return (
       <div style={{ width: '560px' }}>
         <Block>
-          <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX, _s.px15].join(' ')}>
-            <div className={[_s.default, _s.flexGrow1, _s.mr5].join(' ')}>
+          <div className={[_s._, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.h53PX, _s.px15].join(' ')}>
+            <div className={[_s._, _s.flexGrow1, _s.mr5].join(' ')}>
               <Input
                 onChange={this.onChange}
                 value={searchText}
@@ -74,7 +74,7 @@ class GifPickerModal extends React.PureComponent {
               iconSize='10px'
             />
           </div>
-          <div className={[_s.default, _s.heightMin50VH, _s.heightMax80VH, _s.overflowYScroll].join(' ')}>
+          <div className={[_s._, _s.minH50VH, _s.maxH80VH, _s.overflowYScroll].join(' ')}>
             {
               error &&
               <ColumnIndicator type='error' />
@@ -86,7 +86,7 @@ class GifPickerModal extends React.PureComponent {
 
             {
               (results.length > 0 || categories.length > 0) &&
-              <div className={[_s.default, _s.width100PC, _s.height100PC].join(' ')}>
+              <div className={[_s._, _s.w100PC, _s.h100PC].join(' ')}>
                 {
                   results.length === 0 && categories.length > 0 &&
                   <GifCategoriesCollection categories={categories} handleSelectCategory={this.handleSelectCategory} />
@@ -119,13 +119,13 @@ class GifResultsCollectionColumn extends React.PureComponent {
     const { results } = this.props
 
     return (
-      <div className={[_s.default, _s.flexNormal].join(' ')}>
+      <div className={[_s._, _s.flexNormal].join(' ')}>
       {
         results.map((result, i) => (
           <button
             key={`gif-result-item-${i}`}
             onClick={() => this.onClick(result)}
-            className={[_s.default, _s.outlineNone, _s.bgTransparent, _s.cursorPointer, _s.px2, _s.py2].join(' ')}
+            className={[_s._, _s.outlineNone, _s.bgTransparent, _s.cursorPointer, _s.px2, _s.py2].join(' ')}
           >
             <Image
               height={result.media[0].tinygif.dims[1]}
@@ -155,7 +155,7 @@ class GifResultsCollection extends React.PureComponent {
     const columnIndex = 10
 
     return (
-      <div className={[_s.default, _s.height100PC, _s.flexRow, _s.width100PC].join(' ')}>
+      <div className={[_s._, _s.h100PC, _s.flexRow, _s.w100PC].join(' ')}>
         <GifResultsCollectionColumn
           results={results.slice(0, columnIndex)}
           handleSelectGifResult={handleSelectGifResult}
@@ -187,20 +187,20 @@ class GifCategoriesCollection extends React.PureComponent {
     const { categories } = this.props
 
     return (
-      <div className={[_s.default, _s.height100PC, _s.width100PC, _s.flexRow, _s.flexWrap].join(' ')}>
+      <div className={[_s._, _s.h100PC, _s.w100PC, _s.flexRow, _s.flexWrap].join(' ')}>
         {
           categories.map((category, i) => (
             <button
               key={`gif-category-${i}`}
               onClick={() => this.onClick(category.searchterm)}
-              className={[_s.default, _s.outlineNone, _s.bgTransparent, _s.px2, _s.py2, _s.width50PC].join(' ')}
+              className={[_s._, _s.outlineNone, _s.bgTransparent, _s.px2, _s.py2, _s.w50PC].join(' ')}
             >
-              <div className={[_s.default, _s.cursorPointer].join(' ')}>
+              <div className={[_s._, _s.cursorPointer].join(' ')}>
                 <Image
                   height={150}
                   src={category.image}
                 />
-                <div className={[_s.default, _s.posAbs, _s.videoPlayerControlsBackground, _s.right0, _s.bottom0, _s.left0, _s.py10, _s.px10].join(' ')}>
+                <div className={[_s._, _s.posAbs, _s.videoPlayerControlsBackground, _s.right0, _s.bottom0, _s.left0, _s.py10, _s.px10].join(' ')}>
                   <Text color='white' weight='bold' size='extraLarge'>
                     {category.searchterm}
                   </Text>
diff --git a/app/javascript/gabsocial/components/modal/group_timeline_settings_modal.js b/app/javascript/gabsocial/components/modal/group_timeline_settings_modal.js
index 2315636e..dd411464 100644
--- a/app/javascript/gabsocial/components/modal/group_timeline_settings_modal.js
+++ b/app/javascript/gabsocial/components/modal/group_timeline_settings_modal.js
@@ -20,7 +20,7 @@ class HomeTimelineSettingsModal extends ImmutablePureComponent {
           {intl.formatMessage(messages.benefits)}
         </Text>
 
-        <div className={[_s.default, _s.my10].join(' ')}>
+        <div className={[_s._, _s.my10].join(' ')}>
           <Text>• Schedule Posts</Text>
           <Text>• Get Verified</Text>
           <Text>• Create Groups</Text>
@@ -34,8 +34,8 @@ class HomeTimelineSettingsModal extends ImmutablePureComponent {
           color='white'
           icon='pro'
           href='https://pro.gab.com'
-          className={_s.justifyContentCenter}
-          iconClassName={[_s.mr5, _s.colorWhite].join(' ')}
+          className={_s.jcCenter}
+          iconClassName={[_s.mr5, _s.cWhite].join(' ')}
         >
           <Text color='inherit' weight='bold' align='center'>
             {intl.formatMessage(messages.title)}
diff --git a/app/javascript/gabsocial/components/modal/hashtag_timeline_settings_modal.js b/app/javascript/gabsocial/components/modal/hashtag_timeline_settings_modal.js
index f121e73b..c1fc01e5 100644
--- a/app/javascript/gabsocial/components/modal/hashtag_timeline_settings_modal.js
+++ b/app/javascript/gabsocial/components/modal/hashtag_timeline_settings_modal.js
@@ -28,7 +28,7 @@ class HashtagTimelineSettingsModal extends ImmutablePureComponent {
         onClose={onClose}
       >
 
-        <div className={[_s.default, _s.pb10].join(' ')}>
+        <div className={[_s._, _s.pb10].join(' ')}>
           <SettingSwitch
             prefix='community_timeline'
             settings={settings}
@@ -41,7 +41,7 @@ class HashtagTimelineSettingsModal extends ImmutablePureComponent {
         <Button
           backgroundColor='brand'
           color='white'
-          className={_s.justifyContentCenter}
+          className={_s.jcCenter}
           onClick={this.handleSaveAndClose}
         >
           <Text color='inherit' weight='bold' align='center'>
diff --git a/app/javascript/gabsocial/components/modal/home_timeline_settings_modal.js b/app/javascript/gabsocial/components/modal/home_timeline_settings_modal.js
index f0d65e63..626e18de 100644
--- a/app/javascript/gabsocial/components/modal/home_timeline_settings_modal.js
+++ b/app/javascript/gabsocial/components/modal/home_timeline_settings_modal.js
@@ -26,7 +26,7 @@ class HomeTimelineSettingsModal extends ImmutablePureComponent {
         onClose={onClose}
       >
       
-        <div className={[_s.default, _s.pb10].join(' ')}>
+        <div className={[_s._, _s.pb10].join(' ')}>
           {
             /*
             <SettingSwitch
@@ -75,7 +75,7 @@ class HomeTimelineSettingsModal extends ImmutablePureComponent {
         <Button
           backgroundColor='brand'
           color='white'
-          className={_s.justifyContentCenter}
+          className={_s.jcCenter}
           onClick={this.handleSaveAndClose}
         >
           <Text color='inherit' weight='bold' align='center'>
diff --git a/app/javascript/gabsocial/components/modal/hotkeys_modal.js b/app/javascript/gabsocial/components/modal/hotkeys_modal.js
index 5c51794d..77e4f8ef 100644
--- a/app/javascript/gabsocial/components/modal/hotkeys_modal.js
+++ b/app/javascript/gabsocial/components/modal/hotkeys_modal.js
@@ -16,7 +16,7 @@ class HotkeysModal extends ImmutablePureComponent {
         title={intl.formatMessage(messages.heading)}
         onClose={onClose}
       >
-        <div className={[_s.default, _s.flexRow].join(' ')}>
+        <div className={[_s._, _s.flexRow].join(' ')}>
           <table>
             <thead>
               <tr>
diff --git a/app/javascript/gabsocial/components/modal/list_add_user_modal.js b/app/javascript/gabsocial/components/modal/list_add_user_modal.js
index 151fa470..e5e6ded7 100644
--- a/app/javascript/gabsocial/components/modal/list_add_user_modal.js
+++ b/app/javascript/gabsocial/components/modal/list_add_user_modal.js
@@ -42,12 +42,12 @@ class ListAddUserModal extends ImmutablePureComponent {
         title={title}
         onClose={onClose}
       >
-        <div className={[_s.default, _s.boxShadowNone].join(' ')}>
+        <div className={[_s._, _s.boxShadowNone].join(' ')}>
           <div>
             {
               lists && lists.map((list) => {
                 return (
-                  <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.py10, _s.px15, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}>
+                  <div className={[_s._, _s.flexRow, _s.aiCenter, _s.py10, _s.px15, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}>
                     <Text color='primary' size='large' className={[_s.overflowHidden, _s.flexNormal, _s.pr5, _s.textOverflowEllipsis].join(' ')}>
                       {list.get('title')}
                     </Text>
diff --git a/app/javascript/gabsocial/components/modal/list_timeline_settings_modal.js b/app/javascript/gabsocial/components/modal/list_timeline_settings_modal.js
index 5f42f489..5c63311f 100644
--- a/app/javascript/gabsocial/components/modal/list_timeline_settings_modal.js
+++ b/app/javascript/gabsocial/components/modal/list_timeline_settings_modal.js
@@ -26,7 +26,7 @@ class ListTimelineSettingsModal extends ImmutablePureComponent {
         onClose={onClose}
       >
       
-        <div className={[_s.default, _s.pb10].join(' ')}>
+        <div className={[_s._, _s.pb10].join(' ')}>
           <SettingSwitch
             prefix='list_timeline'
             settings={settings}
@@ -71,7 +71,7 @@ class ListTimelineSettingsModal extends ImmutablePureComponent {
         <Button
           backgroundColor='brand'
           color='white'
-          className={_s.justifyContentCenter}
+          className={_s.jcCenter}
           onClick={this.handleSaveAndClose}
         >
           <Text color='inherit' weight='bold' align='center'>
diff --git a/app/javascript/gabsocial/components/modal/loading_modal.js b/app/javascript/gabsocial/components/modal/loading_modal.js
index 84a59ca0..8e0fc88d 100644
--- a/app/javascript/gabsocial/components/modal/loading_modal.js
+++ b/app/javascript/gabsocial/components/modal/loading_modal.js
@@ -3,10 +3,10 @@ import Block from '../block'
 import ColumnIndicator from '../column_indicator'
 
 const LoadingModal = () => (
-  <div className={_s.width330PX}>
+  <div className={_s.w330PX}>
     <Block>
-      <div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15].join(' ')}>
-        <div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+      <div className={[_s._, _s.px15, _s.py15, _s.mt15, _s.mb15].join(' ')}>
+        <div className={[_s._, _s.px15, _s.py15, _s.mt15, _s.mb15, _s.aiCenter, _s.jcCenter].join(' ')}>
           <ColumnIndicator type='loading' />
         </div>
       </div>
diff --git a/app/javascript/gabsocial/components/modal/media_modal.js b/app/javascript/gabsocial/components/modal/media_modal.js
index 479e7c16..01c37063 100644
--- a/app/javascript/gabsocial/components/modal/media_modal.js
+++ b/app/javascript/gabsocial/components/modal/media_modal.js
@@ -173,14 +173,14 @@ class MediaModal extends ImmutablePureComponent {
     }
 
     const navigationClasses = CX({
-      default: 1,
+      _: 1,
       displayNone: navigationHidden,
     })
 
     return (
-      <div className={[_s.default, _s.width100PC, _s.height100PC, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+      <div className={[_s._, _s.w100PC, _s.h100PC, _s.aiCenter, _s.jcCenter].join(' ')}>
         <div
-          className={[_s.default, _s.posAbs, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')}
+          className={[_s._, _s.posAbs, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')}
           role='presentation'
           onClick={onClose}
         >
@@ -254,8 +254,8 @@ class MediaModal extends ImmutablePureComponent {
 
         {
           media.size > 1 &&
-          <div className={[_s.default, _s.posAbs, _s.bottom0, _s.mb15].join(' ')}>
-            <div className={[_s.default, _s.saveAreaInsetMB, _s.bgBlackOpaque, _s.circle, _s.py10, _s.px15].join(' ')}>
+          <div className={[_s._, _s.posAbs, _s.bottom0, _s.mb15].join(' ')}>
+            <div className={[_s._, _s.saveAreaInsetMB, _s.bgBlackOpaque, _s.circle, _s.py10, _s.px15].join(' ')}>
               <Pagination
                 count={media.size}
                 activeIndex={index}
diff --git a/app/javascript/gabsocial/components/modal/modal_base.js b/app/javascript/gabsocial/components/modal/modal_base.js
index 6a3c0688..ad7903e7 100644
--- a/app/javascript/gabsocial/components/modal/modal_base.js
+++ b/app/javascript/gabsocial/components/modal/modal_base.js
@@ -109,22 +109,22 @@ class ModalBase extends React.PureComponent {
     const visible = !!children
 
     const containerClasses = CX({
-      default: 1,
+      _: 1,
       z4: 1,
-      height100PC: visible,
-      width100PC: visible,
+      h100PC: visible,
+      w100PC: visible,
       displayNone: !visible,
     })
 
     const dialogClasses = CX({
-      default: 1,
+      _: 1,
       posFixed: 1,
-      alignItemsCenter: 1,
-      justifyContentCenter: !isXS || isCenteredXS,
-      justifyContentEnd: isXS && !isCenteredXS,
+      aiCenter: 1,
+      jcCenter: !isXS || isCenteredXS,
+      jcEnd: isXS && !isCenteredXS,
       z4: 1,
-      width100PC: 1,
-      height100PC: 1,
+      w100PC: 1,
+      h100PC: 1,
       top0: 1,
       rightAuto: 1,
       bottomAuto: 1,
@@ -138,7 +138,7 @@ class ModalBase extends React.PureComponent {
           <React.Fragment>
             <div
               role='presentation'
-              className={[_s.default, _s.bgBlackOpaque, _s.posFixed, _s.z3, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')}
+              className={[_s._, _s.bgBlackOpaque, _s.posFixed, _s.z3, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')}
             />
             <div
               ref={this.setDialog}
diff --git a/app/javascript/gabsocial/components/modal/modal_layout.js b/app/javascript/gabsocial/components/modal/modal_layout.js
index 136493cf..308d0eb7 100644
--- a/app/javascript/gabsocial/components/modal/modal_layout.js
+++ b/app/javascript/gabsocial/components/modal/modal_layout.js
@@ -26,17 +26,17 @@ class ModalLayout extends React.PureComponent {
     } = this.props
 
     const childrenContainerClasses = cx({
-      default: 1,
-      heightMax80VH: 1,
+      _: 1,
+      maxH80VH: 1,
       overflowYScroll: 1,
       px15: !noPadding,
       py10: !noPadding,
     })
 
     return (
-      <div style={{width: `${width}px`}} className={[_s.default, _s.modal].join(' ')}>
+      <div style={{width: `${width}px`}} className={[_s._, _s.modal].join(' ')}>
         <Block>
-          <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX, _s.px15].join(' ')}>
+          <div className={[_s._, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.h53PX, _s.px15].join(' ')}>
             <Heading size='h2'>
               {title}
             </Heading>
diff --git a/app/javascript/gabsocial/components/modal/pro_upgrade_modal.js b/app/javascript/gabsocial/components/modal/pro_upgrade_modal.js
index 711297ba..4cb13002 100644
--- a/app/javascript/gabsocial/components/modal/pro_upgrade_modal.js
+++ b/app/javascript/gabsocial/components/modal/pro_upgrade_modal.js
@@ -25,11 +25,11 @@ class ProUpgradeModal extends ImmutablePureComponent {
     const imgSuffix = (theme === 'light' || !theme) ? 'light' : 'dark'
 
     const title = (
-      <span className={[_s.default, _s.flexRow, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}>
-        <span className={[_s.default, _s.mr2].join(' ')}>
+      <span className={[_s._, _s.flexRow, _s.jcCenter, _s.aiCenter].join(' ')}>
+        <span className={[_s._, _s.mr2].join(' ')}>
           Upgrade to Gab
         </span>
-        <span className={[_s.bgPro, _s.colorBlack, _s.radiusSmall, _s.px5, _s.py5].join(' ')}>PRO</span>
+        <span className={[_s.bgPro, _s.cBlack, _s.radiusSmall, _s.px5, _s.py5].join(' ')}>PRO</span>
       </span>
     )
 
@@ -46,23 +46,23 @@ class ProUpgradeModal extends ImmutablePureComponent {
           {intl.formatMessage(messages.benefits)}
         </Text>
 
-        <div className={[_s.default, _s.my10].join(' ')}>
+        <div className={[_s._, _s.my10].join(' ')}>
           <Image
             src={`/headers/pro-features-${imgSuffix}.png`}
             width='100%'
             height='auto'
             fit='cover'
-            className={[_s.heightMax340PX, _s.heightMin200PX].join(' ')}
+            className={[_s.maxH340PX, _s.minH200PX].join(' ')}
           />
         </div>
 
-        <div className={[_s.default, _s.flexRow, _s.py10].join(' ')}>
+        <div className={[_s._, _s.flexRow, _s.py10].join(' ')}>
           <Button
             isOutline
             color='brand'
             backgroundColor='none'
             href={URL_GAB_PRO}
-            className={[_s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.mr10].join(' ')}
+            className={[_s.flexRow, _s.aiCenter, _s.jcCenter, _s.mr10].join(' ')}
           >
             <Text color='inherit' weight='medium' align='center'>
               {intl.formatMessage(messages.learnMore)}
@@ -70,12 +70,12 @@ class ProUpgradeModal extends ImmutablePureComponent {
           </Button>
           <Button
             href={URL_GAB_PRO}
-            className={[_s.flexRow, _s.flexGrow1, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}
+            className={[_s.flexRow, _s.flexGrow1, _s.aiCenter, _s.jcCenter].join(' ')}
           >
             <Text color='inherit' size='large' weight='bold' align='center'>
               {intl.formatMessage(messages.upgrade)}
             </Text>
-            <Icon id='arrow-right' size='20px' className={[_s.colorWhite, _s.ml5].join(' ')} />
+            <Icon id='arrow-right' size='20px' className={[_s.cWhite, _s.ml5].join(' ')} />
           </Button>
         </div>
 
diff --git a/app/javascript/gabsocial/components/modal/report_modal.js b/app/javascript/gabsocial/components/modal/report_modal.js
index 1ff23f4d..41356367 100644
--- a/app/javascript/gabsocial/components/modal/report_modal.js
+++ b/app/javascript/gabsocial/components/modal/report_modal.js
@@ -63,12 +63,12 @@ class ReportModal extends ImmutablePureComponent {
       >
 
         <ResponsiveClassesComponent
-          classNames={[_s.default, _s.flexRow].join(' ')}
-          classNamesSmall={[_s.default, _s.flexColumnReverse].join(' ')}
+          classNames={[_s._, _s.flexRow].join(' ')}
+          classNamesSmall={[_s._, _s.flexColumnReverse].join(' ')}
         >
           <ResponsiveClassesComponent
-            classNames={[_s.default, _s.width50PC, _s.py10, _s.px15, _s.borderRight1PX, _s.borderColorSecondary].join(' ')}
-            classNamesSmall={[_s.default, _s.width100PC, _s.py10, _s.px15, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}
+            classNames={[_s._, _s.w50PC, _s.py10, _s.px15, _s.borderRight1PX, _s.borderColorSecondary].join(' ')}
+            classNamesSmall={[_s._, _s.w100PC, _s.py10, _s.px15, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}
           >
             <Text color='secondary' size='small'>
               {intl.formatMessage(messages.hint)}
@@ -95,10 +95,10 @@ class ReportModal extends ImmutablePureComponent {
           </ResponsiveClassesComponent>
 
           <ResponsiveClassesComponent
-            classNames={[_s.default, _s.width50PC, _s.heightMax80VH].join(' ')}
-            classNamesSmall={[_s.default, _s.width100PC, _s.height260PX].join(' ')}
+            classNames={[_s._, _s.w50PC, _s.maxH80VH].join(' ')}
+            classNamesSmall={[_s._, _s.w100PC, _s.h260PX].join(' ')}
           >
-            <div className={[_s.default, _s.height100PC, _s.overflowYScroll, _s.pr15, _s.py10].join(' ')}>
+            <div className={[_s._, _s.h100PC, _s.overflowYScroll, _s.pr15, _s.py10].join(' ')}>
               {
                 statusIds.map(statusId => (
                   <StatusCheckBox id={statusId} key={statusId} disabled={isSubmitting} />
diff --git a/app/javascript/gabsocial/components/modal/status_revisions_modal.js b/app/javascript/gabsocial/components/modal/status_revisions_modal.js
index 9ff40d7a..70555c33 100644
--- a/app/javascript/gabsocial/components/modal/status_revisions_modal.js
+++ b/app/javascript/gabsocial/components/modal/status_revisions_modal.js
@@ -32,14 +32,14 @@ class StatusRevisionsModal extends ImmutablePureComponent {
         width={480}
         onClose={onClose}
       >
-        <div className={[_s.default]}>
+        <div className={[_s._]}>
           {
             revisions.map((revision, i) => {
               const isFirst = i === 0
               const isLast = i === revisions.size - 1
 
               const containerClasses = cx({
-                default: 1,
+                _: 1,
                 pt5: 1,
                 pb10: 1,
                 mt5: !isFirst,
@@ -49,12 +49,12 @@ class StatusRevisionsModal extends ImmutablePureComponent {
 
               return (
                 <div key={`status-revision-${i}`} className={containerClasses}>
-                  <div className={[_s.default, _s.pb5].join(' ')}>
+                  <div className={[_s._, _s.pb5].join(' ')}>
                     <Text size='medium'>
                       {revision.get('text')}
                     </Text>
                   </div>
-                  <div className={[_s.default]}>
+                  <div className={[_s._]}>
                     <Text size='small' color='secondary'>
                       Edited on <RelativeTimestamp timestamp={revision.get('created_at')} />
                     </Text>
diff --git a/app/javascript/gabsocial/components/modal/unauthorized_modal.js b/app/javascript/gabsocial/components/modal/unauthorized_modal.js
index 6a3020f0..cdb2d735 100644
--- a/app/javascript/gabsocial/components/modal/unauthorized_modal.js
+++ b/app/javascript/gabsocial/components/modal/unauthorized_modal.js
@@ -18,8 +18,8 @@ class UnauthorizedModal extends ImmutablePureComponent {
         onClose={onClose}
         width={480}
       >
-        <div className={[_s.default, _s.mt15, _s.mb15, _s.px15, _s.pb15].join(' ')}>
-          <div className={[_s.default, _s.px15, _s.py15].join(' ')}>
+        <div className={[_s._, _s.mt15, _s.mb15, _s.px15, _s.pb15].join(' ')}>
+          <div className={[_s._, _s.px15, _s.py15].join(' ')}>
             <Text className={[_s.px15, _s.py15, _s.mb15]} size='medium' weight='medium' align='center'>
               {intl.formatMessage(messages.text)}
             </Text>
diff --git a/app/javascript/gabsocial/components/navigation_bar.js b/app/javascript/gabsocial/components/navigation_bar.js
index c9408f36..be801ea7 100644
--- a/app/javascript/gabsocial/components/navigation_bar.js
+++ b/app/javascript/gabsocial/components/navigation_bar.js
@@ -45,17 +45,17 @@ class NavigationBar extends ImmutablePureComponent {
     } = this.props
 
     return (
-      <div className={[_s.default, _s.z4, _s.heightMin53PX, _s.width100PC].join(' ')}>
-        <div className={[_s.default, _s.heightMin53PX, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
+      <div className={[_s._, _s.z4, _s.minH53PX, _s.w100PC].join(' ')}>
+        <div className={[_s._, _s.minH53PX, _s.bgNavigation, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
 
-          <div className={[_s.default, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.flexRow, _s.width1255PX].join(' ')}>
+          <div className={[_s._, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.flexRow, _s.w1255PX].join(' ')}>
 
             { /** Default */}
             <Responsive min={BREAKPOINT_EXTRA_SMALL}>
 
-              <div className={[_s.default, _s.flexRow].join(' ')}>
+              <div className={[_s._, _s.flexRow].join(' ')}>
 
-                <h1 className={[_s.default, _s.mr15].join(' ')}>
+                <h1 className={[_s._, _s.mr15].join(' ')}>
                   <Button
                     to='/'
                     isText
@@ -63,7 +63,7 @@ class NavigationBar extends ImmutablePureComponent {
                     aria-label='Gab'
                     color='none'
                     backgroundColor='none'
-                    className={[_s.default, _s.justifyContentCenter, _s.noSelect, _s.noUnderline, _s.height53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}
+                    className={[_s._, _s.jcCenter, _s.noSelect, _s.noUnderline, _s.h53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}
                   >
                     <Icon id='logo' className={_s.fillNavigationBrand} />
                   </Button>
@@ -71,28 +71,28 @@ class NavigationBar extends ImmutablePureComponent {
 
                 {
                   !noSearch &&
-                  <div className={[_s.default, _s.width340PX, _s.mr10].join(' ')}>
+                  <div className={[_s._, _s.w340PX, _s.mr10].join(' ')}>
                     <Search isInNav />
                   </div>
                 }
 
               </div>
 
-              <div className={[_s.default, _s.mlAuto].join(' ')}>
+              <div className={[_s._, _s.mlAuto].join(' ')}>
                 {
                   !noActions &&
-                  <div className={[_s.default, _s.height53PX, _s.pl15, _s.flexRow, _s.alignItemsCenter, _s.justifyContentSpaceBetween].join(' ')}>
+                  <div className={[_s._, _s.h53PX, _s.pl15, _s.flexRow, _s.aiCenter, _s.jcSpaceBetween].join(' ')}>
 
                     <NavigationBarButton title='Home' icon='home' to='/home' />
                     <NavigationBarButton title='Explore' icon='explore' to='/explore' />
                     <NavigationBarButton title='News' icon='news' to='/news' />
 
-                    <div className={[_s.default, _s.height20PX, _s.width1PX, _s.mr10, _s.ml10, _s.bgNavigationBlend].join(' ')} />
+                    <div className={[_s._, _s.h20PX, _s.w1PX, _s.mr10, _s.ml10, _s.bgNavigationBlend].join(' ')} />
 
                     <NavigationBarButton attrTitle='Notifications' icon='notifications' to='/notifications' />
                     <NavigationBarButton attrTitle='Settings' icon='cog' href='/settings/preferences' />
 
-                    <div className={[_s.default, _s.height20PX, _s.width1PX, _s.mr10, _s.ml10, _s.bgNavigationBlend].join(' ')} />
+                    <div className={[_s._, _s.h20PX, _s.w1PX, _s.mr10, _s.ml10, _s.bgNavigationBlend].join(' ')} />
                   
                     {
                       !!account &&
@@ -100,7 +100,7 @@ class NavigationBar extends ImmutablePureComponent {
                         ref={this.setAvatarNode}
                         title={account.get('display_name')}
                         onClick={this.handleOnOpenNavSettingsPopover}
-                        className={[_s.height53PX, _s.bgTransparent, _s.outlineNone, _s.cursorPointer, _s.default, _s.justifyContentCenter, _s.ml15].join(' ')}
+                        className={[_s.h53PX, _s.bgTransparent, _s.outlineNone, _s.cursorPointer, _s._, _s.jcCenter, _s.ml15].join(' ')}
                       >
                         <Avatar account={account} size={32} noHover />
                       </button>
@@ -113,13 +113,13 @@ class NavigationBar extends ImmutablePureComponent {
             
             { /** Mobile */}
             <Responsive max={BREAKPOINT_EXTRA_SMALL}>
-              <div className={[_s.default, _s.width84PX, _s.alignItemsStart, _s.pl10].join(' ')}>
+              <div className={[_s._, _s.w84PX, _s.aiStart, _s.pl10].join(' ')}>
                 {
                   !!account && !showBackBtn && !noActions &&
                   <button
                     title={account.get('display_name')}
                     onClick={onOpenSidebar}
-                    className={[_s.height53PX, _s.bgTransparent, _s.outlineNone, _s.cursorPointer, _s.default, _s.justifyContentCenter].join(' ')}
+                    className={[_s.h53PX, _s.bgTransparent, _s.outlineNone, _s.cursorPointer, _s._, _s.jcCenter].join(' ')}
                   >
                     <Avatar account={account} size={32} noHover />
                   </button>
@@ -127,7 +127,7 @@ class NavigationBar extends ImmutablePureComponent {
                 {
                   showBackBtn &&
                   <BackButton
-                    className={_s.height53PX}
+                    className={_s.h53PX}
                     icon='angle-left'
                     iconSize='18px'
                     iconClassName={[_s.mr5, _s.fillNavigation].join(' ')}
@@ -135,7 +135,7 @@ class NavigationBar extends ImmutablePureComponent {
                 }
                 {
                   noActions &&
-                  <h1 className={[_s.default, _s.mr15].join(' ')}>
+                  <h1 className={[_s._, _s.mr15].join(' ')}>
                     <Button
                       to='/'
                       isText
@@ -143,7 +143,7 @@ class NavigationBar extends ImmutablePureComponent {
                       aria-label='Gab'
                       color='none'
                       backgroundColor='none'
-                      className={[_s.default, _s.justifyContentCenter, _s.noSelect, _s.noUnderline, _s.height53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}
+                      className={[_s._, _s.jcCenter, _s.noSelect, _s.noUnderline, _s.h53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}
                     >
                       <Icon id='logo' className={_s.fillNavigationBrand} />
                     </Button>
@@ -151,7 +151,7 @@ class NavigationBar extends ImmutablePureComponent {
                 }
               </div>
               
-              <div className={[_s.default, _s.height53PX, _s.justifyContentCenter, _s.mlAuto, _s.mrAuto].join(' ')}>
+              <div className={[_s._, _s.h53PX, _s.jcCenter, _s.mlAuto, _s.mrAuto].join(' ')}>
                 <Heading size='h1'>
                   <span className={_s.colorNavigation}>
                     {title}
@@ -159,8 +159,8 @@ class NavigationBar extends ImmutablePureComponent {
                 </Heading>
               </div>
 
-              <div className={[_s.default, _s.width84PX, _s.pr15].join(' ')}>
-                <div className={[_s.default, _s.bgTransparent, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.mlAuto].join(' ')}>
+              <div className={[_s._, _s.w84PX, _s.pr15].join(' ')}>
+                <div className={[_s._, _s.bgTransparent, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.mlAuto].join(' ')}>
                   {
                     actions && actions.map((action, i) => (
                       <Button
@@ -170,7 +170,7 @@ class NavigationBar extends ImmutablePureComponent {
                         to={action.to || undefined}
                         onClick={action.onClick ? () => action.onClick() : undefined}
                         key={`action-btn-${i}`}
-                        className={[_s.ml5, _s.height53PX, _s.justifyContentCenter, _s.px5].join(' ')}
+                        className={[_s.ml5, _s.h53PX, _s.jcCenter, _s.px5].join(' ')}
                         icon={action.icon}
                         iconClassName={_s.fillNavigation}
                         iconSize='18px'
@@ -185,7 +185,7 @@ class NavigationBar extends ImmutablePureComponent {
                       color='primary'
                       to='/search'
                       key={`action-btn-search`}
-                      className={[_s.ml5, _s.height53PX, _s.justifyContentCenter, _s.px5].join(' ')}
+                      className={[_s.ml5, _s.h53PX, _s.jcCenter, _s.px5].join(' ')}
                       icon='search'
                       iconClassName={_s.fillNavigation}
                       iconSize='18px'
diff --git a/app/javascript/gabsocial/components/navigation_bar_button.js b/app/javascript/gabsocial/components/navigation_bar_button.js
index f424515a..874e291f 100644
--- a/app/javascript/gabsocial/components/navigation_bar_button.js
+++ b/app/javascript/gabsocial/components/navigation_bar_button.js
@@ -19,11 +19,11 @@ class NavigationBarButton extends React.PureComponent {
     const active = false
 
     const classes = CX({
-      default: 1,
-      height53PX: 1,
+      _: 1,
+      h53PX: 1,
       flexRow: 1,
-      alignItemsCenter: 1,
-      justifyContentCenter: 1,
+      aiCenter: 1,
+      jcCenter: 1,
       outlineNone: 1,
       cursorPointer: 1,
       bgTransparent: 1,
@@ -31,9 +31,9 @@ class NavigationBarButton extends React.PureComponent {
       colorNavigation: 1,
       px10: !!title,
       px5: !title,
-      colorWhite: !!title,
+      cWhite: !!title,
       fs13PX: !!title,
-      fontWeightNormal: !!title,
+      fw400: !!title,
     })
 
     const iconClasses = CX({
diff --git a/app/javascript/gabsocial/components/notification.js b/app/javascript/gabsocial/components/notification.js
index 2cfc01c8..bf317995 100644
--- a/app/javascript/gabsocial/components/notification.js
+++ b/app/javascript/gabsocial/components/notification.js
@@ -91,7 +91,7 @@ class Notification extends ImmutablePureComponent {
     }
 
     const containerClasses = CX({
-      default: 1,
+      _: 1,
       px10: 1,
       cursorPointer: 1,
       bgSubtle_onHover: !isUnread,
@@ -104,15 +104,15 @@ class Notification extends ImmutablePureComponent {
         tabIndex='0'
         aria-label={`${message} ${createdAt}`}
       >
-        <div className={[_s.default, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
-          <div className={[_s.default, _s.flexRow, _s.my10, _s.py10, _s.px10].join(' ')}>
+        <div className={[_s._, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+          <div className={[_s._, _s.flexRow, _s.my10, _s.py10, _s.px10].join(' ')}>
 
             <Responsive min={BREAKPOINT_EXTRA_SMALL}>
-              <Icon id={icon} size='20px' className={[_s.colorPrimary, _s.minWidth20PX, _s.mt5, _s.mr15].join(' ')} />
+              <Icon id={icon} size='20px' className={[_s.cPrimary, _s.minW20PX, _s.mt5, _s.mr15].join(' ')} />
             </Responsive>
 
-            <div className={[_s.default, _s.flexNormal].join(' ')}>
-              <div className={[_s.default, _s.flexRow, _s.flexWrap].join(' ')}>
+            <div className={[_s._, _s.flexNormal].join(' ')}>
+              <div className={[_s._, _s.flexRow, _s.flexWrap].join(' ')}>
                 {
                   accounts && accounts.map((account, i) => (
                     <NavLink
@@ -125,8 +125,8 @@ class Notification extends ImmutablePureComponent {
                   ))
                 }
               </div>
-              <div className={[_s.default, _s.pt5].join(' ')}>
-                <div className={[_s.default, _s.flexRow, _s.alignItemsEnd].join(' ')}>
+              <div className={[_s._, _s.pt5].join(' ')}>
+                <div className={[_s._, _s.flexRow, _s.aiEnd].join(' ')}>
                   <div className={_s.text}>
                     {
                       accounts && accounts.slice(0, 1).map((account, i) => (
@@ -151,7 +151,7 @@ class Notification extends ImmutablePureComponent {
               </div>
               {
                 !!statusId &&
-                <div className={[_s.default, _s.pt10, _s.mt5].join(' ')}>
+                <div className={[_s._, _s.pt10, _s.mt5].join(' ')}>
                   <StatusContainer
                     contextType='notification'
                     id={statusId}
diff --git a/app/javascript/gabsocial/components/pagination.js b/app/javascript/gabsocial/components/pagination.js
index 802f2a7c..b49eeead 100644
--- a/app/javascript/gabsocial/components/pagination.js
+++ b/app/javascript/gabsocial/components/pagination.js
@@ -23,15 +23,15 @@ class Pagination extends React.PureComponent {
     if (isNaN(count)) return
 
     return (
-      <ul className={[_s.default, _s.flexRow, _s.listStyleNone].join(' ')}>
+      <ul className={[_s._, _s.flexRow, _s.listStyleNone].join(' ')}>
         {
           Array.apply(null, {
             length: count
           }).map((_, i) => {
             const btnClasses = CX({
-              default: 1,
-              width10PX: 1,
-              height10PX: 1,
+              _: 1,
+              w10PX: 1,
+              h10PX: 1,
               outlineNone: 1,
               circle: 1,
               cursorPointer: 1,
@@ -43,7 +43,7 @@ class Pagination extends React.PureComponent {
             })
 
             return (
-              <li className={[_s.default, _s.px5].join(' ')} key={`pagination-${i}`}>
+              <li className={[_s._, _s.px5].join(' ')} key={`pagination-${i}`}>
                 <button
                   tabIndex='0'
                   className={btnClasses}
diff --git a/app/javascript/gabsocial/components/panel/group_info_panel.js b/app/javascript/gabsocial/components/panel/group_info_panel.js
index d7eb9e2b..c1cf9036 100644
--- a/app/javascript/gabsocial/components/panel/group_info_panel.js
+++ b/app/javascript/gabsocial/components/panel/group_info_panel.js
@@ -71,7 +71,7 @@ class GroupInfoPanel extends ImmutablePureComponent {
 
     if (noPanel) {
       return (
-        <div className={[_s.default].join(' ')}>
+        <div className={[_s._].join(' ')}>
           {
             !!group &&
             <React.Fragment>
@@ -87,12 +87,12 @@ class GroupInfoPanel extends ImmutablePureComponent {
               <Text className={[_s.mt10, _s.py2].join(' ')} color='secondary' size='small' align='center'>
                 {group.get('description')}
               </Text>
-              <div className={[_s.default, _s.mt10, _s.flexRow, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}>
+              <div className={[_s._, _s.mt10, _s.flexRow, _s.jcCenter, _s.aiCenter].join(' ')}>
                 <Text color='secondary' size='small' align='center'>
                   <Icon
                     id={isPrivate ? 'lock-filled' : 'globe'}
                     size='10px'
-                    className={_s.colorSecondary}
+                    className={_s.cSecondary}
                   />
                   <span className={_s.ml5}>
                     {intl.formatMessage(isPrivate ? messages.privateGroup : messages.publicGroup)}
@@ -190,7 +190,7 @@ class GroupInfoPanel extends ImmutablePureComponent {
               <React.Fragment>
                 <Divider isSmall />
                 <GroupInfoPanelRow title={intl.formatMessage(messages.tags)} icon='shop'>
-                  <div className={[_s.default, _s.flexRow, _s.justifyContentEnd, _s.flexWrap, _s.pl5].join(' ')}>
+                  <div className={[_s._, _s.flexRow, _s.jcEnd, _s.flexWrap, _s.pl5].join(' ')}>
                     {
                       tags.map((tag) => (
                         <div className={[_s.mr5, _s.mb5].join(' ')}>
@@ -223,8 +223,8 @@ class GroupInfoPanelRow extends React.PureComponent {
     const { icon, title } = this.props
 
     return (
-      <div className={[_s.default, _s.flexRow, _s.py2].join(' ')}>
-        <div className={[_s.default, _s.flexRow, _s.justifyContentCenter].join(' ')}>
+      <div className={[_s._, _s.flexRow, _s.py2].join(' ')}>
+        <div className={[_s._, _s.flexRow, _s.jcCenter].join(' ')}>
           <Icon id={icon} size='16px' />
           <Text weight='bold' size='medium' className={_s.ml10}>
             {title}
diff --git a/app/javascript/gabsocial/components/panel/list_details_panel.js b/app/javascript/gabsocial/components/panel/list_details_panel.js
index 8850b8b8..c6e770f7 100644
--- a/app/javascript/gabsocial/components/panel/list_details_panel.js
+++ b/app/javascript/gabsocial/components/panel/list_details_panel.js
@@ -47,9 +47,9 @@ class ListDetailsPanel extends ImmutablePureComponent {
         }
         {
           title && createdAt &&
-          <div className={_s.default}>
+          <div className={_s._}>
 
-            <div className={_s.default}>
+            <div className={_s._}>
               <Text weight='medium'>
                 {title}
               </Text>
@@ -57,8 +57,8 @@ class ListDetailsPanel extends ImmutablePureComponent {
 
             <Divider isSmall />
 
-            <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
-              <Icon id='calendar' size='12px' className={_s.colorSecondary} />
+            <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
+              <Icon id='calendar' size='12px' className={_s.cSecondary} />
               <Text
                 size='small'
                 color='secondary'
diff --git a/app/javascript/gabsocial/components/panel/lists_panel.js b/app/javascript/gabsocial/components/panel/lists_panel.js
index 60cccec4..3fdda64d 100644
--- a/app/javascript/gabsocial/components/panel/lists_panel.js
+++ b/app/javascript/gabsocial/components/panel/lists_panel.js
@@ -85,7 +85,7 @@ class ListsPanel extends ImmutablePureComponent {
         footerButtonTo={count > maxCount ? '/lists' : undefined}
         noPadding
       >
-        <div className={[_s.default, _s.boxShadowNone].join(' ')}>
+        <div className={[_s._, _s.boxShadowNone].join(' ')}>
           <List
             scrollKey='lists_sidebar_panel'
             items={listItems}
diff --git a/app/javascript/gabsocial/components/panel/media_gallery_panel.js b/app/javascript/gabsocial/components/panel/media_gallery_panel.js
index 56ed0587..6666b667 100644
--- a/app/javascript/gabsocial/components/panel/media_gallery_panel.js
+++ b/app/javascript/gabsocial/components/panel/media_gallery_panel.js
@@ -70,7 +70,7 @@ class MediaGalleryPanel extends ImmutablePureComponent {
         headerButtonTitle={!!account ? intl.formatMessage(messages.show_all) : undefined}
         headerButtonTo={!!account ? `/${account.get('acct')}/media` : undefined}
       > 
-        <div className={[_s.default, _s.flexRow, _s.flexWrap, _s.px10, _s.py10].join(' ')}>
+        <div className={[_s._, _s.flexRow, _s.flexWrap, _s.px10, _s.py10].join(' ')}>
           {
             !!account && attachments.size > 0 &&
             attachments.slice(0, 16).map((attachment, i) => (
@@ -84,7 +84,7 @@ class MediaGalleryPanel extends ImmutablePureComponent {
           }
           {
             !account || (attachments.size === 0 && isLoading) &&
-            <div className={[_s.default, _s.width100PC].join(' ')}>
+            <div className={[_s._, _s.w100PC].join(' ')}>
               <MediaGalleryPanelPlaceholder />
             </div>
           }
diff --git a/app/javascript/gabsocial/components/panel/panel_layout.js b/app/javascript/gabsocial/components/panel/panel_layout.js
index 79bcc0b6..0482fa2f 100644
--- a/app/javascript/gabsocial/components/panel/panel_layout.js
+++ b/app/javascript/gabsocial/components/panel/panel_layout.js
@@ -37,18 +37,18 @@ export default class PanelLayout extends React.PureComponent {
     } = this.props
 
     return (
-      <aside className={[_s.default, _s.mb15].join(' ')}>
+      <aside className={[_s._, _s.mb15].join(' ')}>
         <Block>
           {
             (title || subtitle) &&
-            <div className={[_s.default, _s.px15, _s.py10].join(' ')}>
-              <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
+            <div className={[_s._, _s.px15, _s.py10].join(' ')}>
+              <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
                 <Heading size='h2'>
                   {title}
                 </Heading>
                 {
                   (!!headerButtonTitle && (!!headerButtonAction || !!headerButtonTo)) &&
-                  <div className={[_s.default, _s.mlAuto].join(' ')}>
+                  <div className={[_s._, _s.mlAuto].join(' ')}>
                     <Button
                       isText
                       backgroundColor='none'
@@ -74,7 +74,7 @@ export default class PanelLayout extends React.PureComponent {
 
           {
             !noPadding &&
-            <div className={[_s.default, _s.px15, _s.py10].join(' ')}>
+            <div className={[_s._, _s.px15, _s.py10].join(' ')}>
               {children}
             </div>
           }
@@ -85,7 +85,7 @@ export default class PanelLayout extends React.PureComponent {
 
           {
             (!!footerButtonTitle && (!!footerButtonAction || !!footerButtonTo || !!footerButtonHref)) &&
-            <div className={_s.default}>
+            <div className={_s._}>
               <Button
                 isText
                 color='none'
diff --git a/app/javascript/gabsocial/components/panel/pro_panel.js b/app/javascript/gabsocial/components/panel/pro_panel.js
index a4f1ca0c..8f1790af 100644
--- a/app/javascript/gabsocial/components/panel/pro_panel.js
+++ b/app/javascript/gabsocial/components/panel/pro_panel.js
@@ -27,11 +27,11 @@ class ProPanel extends React.PureComponent {
     if (isPro) return null
 
     const title = (
-      <span className={[_s.default, _s.flexRow, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}>
-        <span className={[_s.default, _s.mr2].join(' ')}>
+      <span className={[_s._, _s.flexRow, _s.jcCenter, _s.aiCenter].join(' ')}>
+        <span className={[_s._, _s.mr2].join(' ')}>
           Upgrade to Gab
         </span>
-        <span className={[_s.bgPro, _s.colorBlack, _s.radiusSmall, _s.px5, _s.py5].join(' ')}>PRO</span>
+        <span className={[_s.bgPro, _s.cBlack, _s.radiusSmall, _s.px5, _s.py5].join(' ')}>PRO</span>
       </span>
     )
 
@@ -41,13 +41,13 @@ class ProPanel extends React.PureComponent {
         subtitle={intl.formatMessage(messages.text)}
       >
 
-        <div className={[_s.default, _s.flexRow, _s.pb5].join(' ')}>
+        <div className={[_s._, _s.flexRow, _s.pb5].join(' ')}>
           <Button
             isOutline
             color='brand'
             backgroundColor='none'
             href={URL_GAB_PRO}
-            className={[_s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.mr10].join(' ')}
+            className={[_s.flexRow, _s.aiCenter, _s.jcCenter, _s.mr10].join(' ')}
           >
             <Text color='inherit' weight='medium' align='center'>
               Learn more
@@ -55,12 +55,12 @@ class ProPanel extends React.PureComponent {
           </Button>
           <Button
             href={URL_GAB_PRO}
-            className={[_s.flexRow, _s.flexGrow1, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}
+            className={[_s.flexRow, _s.flexGrow1, _s.aiCenter, _s.jcCenter].join(' ')}
           >
             <Text color='inherit' size='large' weight='bold' align='center'>
               Upgrade
             </Text>
-            <Icon id='arrow-right' size='20px' className={[_s.colorWhite, _s.ml5].join(' ')} />
+            <Icon id='arrow-right' size='20px' className={[_s.cWhite, _s.ml5].join(' ')} />
           </Button>
         </div>
 
diff --git a/app/javascript/gabsocial/components/panel/profile_info_panel.js b/app/javascript/gabsocial/components/panel/profile_info_panel.js
index d5f3be77..515f7c4f 100644
--- a/app/javascript/gabsocial/components/panel/profile_info_panel.js
+++ b/app/javascript/gabsocial/components/panel/profile_info_panel.js
@@ -58,7 +58,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
 
     return (
       <Wrapper title={intl.formatMessage(messages.title)}>
-        <div className={[_s.default].join(' ')}>
+        <div className={[_s._].join(' ')}>
           {
             hasNote &&
             <React.Fragment>
@@ -67,8 +67,8 @@ class ProfileInfoPanel extends ImmutablePureComponent {
             </React.Fragment>
           }
 
-          <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
-            <Icon id='calendar' size='12px' className={_s.colorSecondary} />
+          <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
+            <Icon id='calendar' size='12px' className={_s.cSecondary} />
             <Text
               size='small'
               color='secondary'
@@ -86,7 +86,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
             hasBadges &&
             <React.Fragment>
               <Divider isSmall />
-              <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
+              <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
                 { 
                   isPro &&
                   <div className={[_s.mr5, _s.radiusSmall, _s.bgPro, _s.py2, _s.px5].join(' ')}>
@@ -111,12 +111,12 @@ class ProfileInfoPanel extends ImmutablePureComponent {
 
           {
             fields.size > 0 && 
-            <div className={[_s.default]}>
+            <div className={[_s._]}>
               {
                 fields.map((pair, i) => (
                   <React.Fragment>
                     <Divider isSmall />
-                    <dl className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')} key={`profile-field-${i}`}>
+                    <dl className={[_s._, _s.flexRow, _s.aiCenter].join(' ')} key={`profile-field-${i}`}>
                       <dt
                         className={[_s.text, _s.dangerousContent, _s.pr5].join(' ')}
                         dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }}
diff --git a/app/javascript/gabsocial/components/panel/profile_stats_panel.js b/app/javascript/gabsocial/components/panel/profile_stats_panel.js
index 05d7dddb..96e575b4 100644
--- a/app/javascript/gabsocial/components/panel/profile_stats_panel.js
+++ b/app/javascript/gabsocial/components/panel/profile_stats_panel.js
@@ -46,8 +46,8 @@ class ProfileStatsPanel extends ImmutablePureComponent {
         {
           !!account &&
           <ResponsiveClassesComponent
-            classNames={[_s.default, _s.flexRow].join(' ')}
-            classNamesXS={[_s.default, _s.flexRow, _s.mt15, _s.pt10].join(' ')}
+            classNames={[_s._, _s.flexRow].join(' ')}
+            classNamesXS={[_s._, _s.flexRow, _s.mt15, _s.pt10].join(' ')}
           >
             <UserStat
               title={intl.formatMessage(messages.gabs)}
diff --git a/app/javascript/gabsocial/components/panel/shop_panel.js b/app/javascript/gabsocial/components/panel/shop_panel.js
index 69ac6c0a..a95aeb9c 100644
--- a/app/javascript/gabsocial/components/panel/shop_panel.js
+++ b/app/javascript/gabsocial/components/panel/shop_panel.js
@@ -74,7 +74,7 @@ class ShopPanel extends React.PureComponent {
         footerButtonTitle={intl.formatMessage(messages.shop_now)}
         footerButtonHref={URL_DISSENTER_SHOP}
       >
-        <div className={[_s.default, _s.flexRow, _s.flexWrap, _s.pl5, _s.pt5].join(' ')}>
+        <div className={[_s._, _s.flexRow, _s.flexWrap, _s.pl5, _s.pt5].join(' ')}>
           {
             items.map((block, i) => (
               <ShopItem
diff --git a/app/javascript/gabsocial/components/panel/sign_up_log_in_panel.js b/app/javascript/gabsocial/components/panel/sign_up_log_in_panel.js
index bb15be9a..b32c3ed4 100644
--- a/app/javascript/gabsocial/components/panel/sign_up_log_in_panel.js
+++ b/app/javascript/gabsocial/components/panel/sign_up_log_in_panel.js
@@ -28,23 +28,23 @@ class SignUpLogInPanel extends React.PureComponent {
     if (me) return null
 
     const containerClasses = CX({
-      default: 1,
+      _: 1,
       radiusSmall: 1,
       overflowHidden: 1,
       bgPrimary: 1,
       boxShadowBlock: 1,
       py15: 1,
-      justifyContentCenter: 1,
+      jcCenter: 1,
       heigh315PX: !isXS,
-      height158PX: isXS,
+      h158PX: isXS,
     })
 
     return (
-      <aside className={[_s.default, _s.mb15].join(' ')}>
+      <aside className={[_s._, _s.mb15].join(' ')}>
         <div className={containerClasses}>
-          <div className={[_s.default]}>
-            <div className={[_s.default, _s.px15, _s.py10].join(' ')}>
-              <div className={[_s.default].join(' ')}>
+          <div className={[_s._]}>
+            <div className={[_s._, _s.px15, _s.py10].join(' ')}>
+              <div className={[_s._].join(' ')}>
                 <Text color='primary' size='extraExtraLarge' weight='bold' align='center' tag='h2'>
                   {intl.formatMessage(messages.title)}
                 </Text>
@@ -57,8 +57,8 @@ class SignUpLogInPanel extends React.PureComponent {
 
           {
             !isXS &&
-            <div className={[_s.default, _s.px15, _s.py10].join(' ')}>
-              <div className={[_s.default, _s.pb5].join(' ')}>
+            <div className={[_s._, _s.px15, _s.py10].join(' ')}>
+              <div className={[_s._, _s.pb5].join(' ')}>
                 <Button
                   isOutline
                   color='white'
diff --git a/app/javascript/gabsocial/components/panel/sign_up_panel.js b/app/javascript/gabsocial/components/panel/sign_up_panel.js
index 52c9ef65..5fbb9cd6 100644
--- a/app/javascript/gabsocial/components/panel/sign_up_panel.js
+++ b/app/javascript/gabsocial/components/panel/sign_up_panel.js
@@ -31,13 +31,13 @@ class SignUpPanel extends React.PureComponent {
         title={intl.formatMessage(messages.title)}
         subtitle={intl.formatMessage(messages.subtitle)}
       >
-        <div className={[_s.default, _s.flexRow, _s.pb5].join(' ')}>
+        <div className={[_s._, _s.flexRow, _s.pb5].join(' ')}>
           <Button
             isOutline
             color='brand'
             backgroundColor='none'
             href='/auth/sign_in'
-            className={[_s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.mr10].join(' ')}
+            className={[_s.flexRow, _s.aiCenter, _s.jcCenter, _s.mr10].join(' ')}
           >
             <Text color='inherit' weight='medium' align='center' className={_s.px10}>
               {intl.formatMessage(messages.login)}
diff --git a/app/javascript/gabsocial/components/panel/status_promotion_panel.js b/app/javascript/gabsocial/components/panel/status_promotion_panel.js
index d5808bee..b863ade9 100644
--- a/app/javascript/gabsocial/components/panel/status_promotion_panel.js
+++ b/app/javascript/gabsocial/components/panel/status_promotion_panel.js
@@ -56,7 +56,7 @@ class StatusPromotionPanel extends ImmutablePureComponent {
     const { status } = this.props
 
     const containerClasses = CX({
-      default: 1,
+      _: 1,
       pb10: !!status ? status.get('media_attachments').size === 0 : false,
     })
 
@@ -67,23 +67,23 @@ class StatusPromotionPanel extends ImmutablePureComponent {
         }
         {
           !!status &&
-          <div className={_s.default}>
-            <div className={[_s.default, _s.px15, _s.py10].join(' ')}>
-              <div className={[_s.default, _s.flexRow, _s.mt5].join(' ')}>
+          <div className={_s._}>
+            <div className={[_s._, _s.px15, _s.py10].join(' ')}>
+              <div className={[_s._, _s.flexRow, _s.mt5].join(' ')}>
 
                 <NavLink
                   to={`/${status.getIn(['account', 'acct'])}`}
                   title={status.getIn(['account', 'acct'])}
-                  className={[_s.default, _s.mr10].join(' ')}
+                  className={[_s._, _s.mr10].join(' ')}
                 >
                   <Avatar account={status.get('account')} size={28} />
                 </NavLink>
 
-                <div className={[_s.default, _s.alignItemsStart, _s.flexGrow1, _s.mt5].join(' ')}>
+                <div className={[_s._, _s.aiStart, _s.flexGrow1, _s.mt5].join(' ')}>
 
-                  <div className={[_s.default, _s.flexRow, _s.width100PC, _s.alignItemsStart].join(' ')}>
+                  <div className={[_s._, _s.flexRow, _s.w100PC, _s.aiStart].join(' ')}>
                     <NavLink
-                      className={[_s.default, _s.flexRow, _s.alignItemsStart, _s.noUnderline].join(' ')}
+                      className={[_s._, _s.flexRow, _s.aiStart, _s.noUnderline].join(' ')}
                       to={`/${status.getIn(['account', 'acct'])}`}
                       title={status.getIn(['account', 'acct'])}
                     >
@@ -96,7 +96,7 @@ class StatusPromotionPanel extends ImmutablePureComponent {
                       color='none'
                       icon='ellipsis'
                       iconSize='20px'
-                      iconClassName={_s.colorSecondary}
+                      iconClassName={_s.cSecondary}
                       className={_s.mlAuto}
                       onClick={() => {}}
                       // buttonRef={this.setStatusOptionsButton}
diff --git a/app/javascript/gabsocial/components/panel/user_panel.js b/app/javascript/gabsocial/components/panel/user_panel.js
index 5354765e..5c7c2e0b 100644
--- a/app/javascript/gabsocial/components/panel/user_panel.js
+++ b/app/javascript/gabsocial/components/panel/user_panel.js
@@ -91,13 +91,13 @@ class UserPanel extends ImmutablePureComponent {
     return (
       <PanelLayout noPadding>
         <div
-          className={[_s.default, _s.height122PX].join(' ')}
+          className={[_s._, _s.h122PX].join(' ')}
           onMouseEnter={this.handleOnMouseEnter}
           onMouseLeave={this.handleOnMouseLeave}
         >
           <Image
             alt={intl.formatMessage(messages.headerPhoto)}
-            className={_s.height122PX}
+            className={_s.h122PX}
             src={account.get('header_static')}
           />
           <Button
@@ -112,18 +112,18 @@ class UserPanel extends ImmutablePureComponent {
         </div>
 
         <NavLink
-          className={[_s.default, _s.flexRow, _s.py10, _s.px15, _s.noUnderline].join(' ')}
+          className={[_s._, _s.flexRow, _s.py10, _s.px15, _s.noUnderline].join(' ')}
           to={`/${acct}`}
         >
-          <div className={[_s.default, _s.mtNeg32PX, _s.circle, _s.borderColorPrimary, _s.border6PX].join(' ')}>
+          <div className={[_s._, _s.mtNeg32PX, _s.circle, _s.borderColorPrimary, _s.border6PX].join(' ')}>
             <Avatar account={account} size={62} noHover />
           </div>
-          <div className={[_s.default, _s.ml15].join(' ')}>
+          <div className={[_s._, _s.ml15].join(' ')}>
             <DisplayName account={account} isMultiline noRelationship noHover />
           </div>
         </NavLink>
 
-        <div className={[_s.default, _s.mb15, _s.mt5, _s.flexRow, _s.px15].join(' ')}>
+        <div className={[_s._, _s.mb15, _s.mt5, _s.flexRow, _s.px15].join(' ')}>
           <UserStat
             to={`/${acct}`}
             title={intl.formatMessage(messages.gabs)}
diff --git a/app/javascript/gabsocial/components/panel/verified_accounts_panel.js b/app/javascript/gabsocial/components/panel/verified_accounts_panel.js
index a119d050..064bb36c 100644
--- a/app/javascript/gabsocial/components/panel/verified_accounts_panel.js
+++ b/app/javascript/gabsocial/components/panel/verified_accounts_panel.js
@@ -76,7 +76,7 @@ class VerifiedAccountsPanel extends ImmutablePureComponent {
         // footerButtonTitle={intl.formatMessage(messages.show_more)}
         // footerButtonTo='/explore'
       >
-        <div className={_s.default}>
+        <div className={_s._}>
           {
             suggestions.map(accountId => (
               <Account
diff --git a/app/javascript/gabsocial/components/panel/who_to_follow_panel.js b/app/javascript/gabsocial/components/panel/who_to_follow_panel.js
index a77a2201..22b1fd2d 100644
--- a/app/javascript/gabsocial/components/panel/who_to_follow_panel.js
+++ b/app/javascript/gabsocial/components/panel/who_to_follow_panel.js
@@ -88,7 +88,7 @@ class WhoToFollowPanel extends ImmutablePureComponent {
         footerButtonTitle={intl.formatMessage(messages.show_more)}
         footerButtonTo='/explore'
       >
-        <div className={_s.default}>
+        <div className={_s._}>
           {
             arr.map((accountId) => (
               <Child
diff --git a/app/javascript/gabsocial/components/pill_item.js b/app/javascript/gabsocial/components/pill_item.js
index 4e40e9f1..814f9400 100644
--- a/app/javascript/gabsocial/components/pill_item.js
+++ b/app/javascript/gabsocial/components/pill_item.js
@@ -46,11 +46,11 @@ class PillItem extends React.PureComponent {
     const active = isActive || (to === location.pathname && !location.search) || isCurrent
 
     const containerClasses = CX({
-      default: 1,
+      _: 1,
       noUnderline: 1,
       text: 1,
-      alignItemsCenter: 1,
-      justifyContentCenter: 1,
+      aiCenter: 1,
+      jcCenter: 1,
       py5: 1,
       outlineNone: 1,
       cursorPointer: 1,
@@ -63,10 +63,10 @@ class PillItem extends React.PureComponent {
     })
 
     const textParentClasses = CX({
-      default: 1,
-      height100PC: 1,
-      alignItemsCenter: 1,
-      justifyContentCenter: 1,
+      _: 1,
+      h100PC: 1,
+      aiCenter: 1,
+      jcCenter: 1,
       py2: 1,
       px15: 1,
     })
diff --git a/app/javascript/gabsocial/components/pills.js b/app/javascript/gabsocial/components/pills.js
index 53aa4d32..bb2cb89c 100644
--- a/app/javascript/gabsocial/components/pills.js
+++ b/app/javascript/gabsocial/components/pills.js
@@ -14,8 +14,8 @@ class Pills extends React.PureComponent {
 
     return (
       <ResponsiveClassesComponent
-        classNames={[_s.default, _s.flexWrap, _s.px5, _s.flexRow].join(' ')}
-        classNamesXS={[_s.default, _s.overflowYHidden, _s.overflowXScroll, _s.noScrollbar, _s.pl10, _s.pr15, _s.flexRow].join(' ')}
+        classNames={[_s._, _s.flexWrap, _s.px5, _s.flexRow].join(' ')}
+        classNamesXS={[_s._, _s.overflowYHidden, _s.overflowXScroll, _s.noScrollbar, _s.pl10, _s.pr15, _s.flexRow].join(' ')}
       >
         {
           !!pills &&
diff --git a/app/javascript/gabsocial/components/placeholder/account_placeholder.js b/app/javascript/gabsocial/components/placeholder/account_placeholder.js
index 7477e2c2..2984e541 100644
--- a/app/javascript/gabsocial/components/placeholder/account_placeholder.js
+++ b/app/javascript/gabsocial/components/placeholder/account_placeholder.js
@@ -10,7 +10,7 @@ class AccountPlaceholder extends React.PureComponent {
     const { isLast, isSmall } = this.props
 
     const classes = CX({
-      default: 1,
+      _: 1,
       px15: 1,
       py7: 1,
       borderColorSecondary: !isLast,
diff --git a/app/javascript/gabsocial/components/placeholder/comment_placeholder.js b/app/javascript/gabsocial/components/placeholder/comment_placeholder.js
index 1c4907e0..d5735fff 100644
--- a/app/javascript/gabsocial/components/placeholder/comment_placeholder.js
+++ b/app/javascript/gabsocial/components/placeholder/comment_placeholder.js
@@ -8,7 +8,7 @@ export default class CommentPlaceholder extends React.PureComponent {
   
   render() {
     const classes = CX({
-      default: 1,
+      _: 1,
       px15: 1,
       py10: 1,
     })
diff --git a/app/javascript/gabsocial/components/placeholder/group_list_item_placeholder.js b/app/javascript/gabsocial/components/placeholder/group_list_item_placeholder.js
index 6b035051..88f85060 100644
--- a/app/javascript/gabsocial/components/placeholder/group_list_item_placeholder.js
+++ b/app/javascript/gabsocial/components/placeholder/group_list_item_placeholder.js
@@ -10,7 +10,7 @@ class GroupListItemPlaceholder extends React.PureComponent {
     const { isLast } = this.props
 
     const classes = CX({
-      default: 1,
+      _: 1,
       px15: 1,
       py7: 1,
       borderColorSecondary: !isLast,
diff --git a/app/javascript/gabsocial/components/placeholder/list_item_placeholder.js b/app/javascript/gabsocial/components/placeholder/list_item_placeholder.js
index c80bfb62..224b0961 100644
--- a/app/javascript/gabsocial/components/placeholder/list_item_placeholder.js
+++ b/app/javascript/gabsocial/components/placeholder/list_item_placeholder.js
@@ -11,7 +11,7 @@ class ListItemPlaceholder extends React.PureComponent {
     const { isLast } = this.props
 
     const classes = CX({
-      default: 1,
+      _: 1,
       px15: 1,
       py15: 1,
       borderColorSecondary: !isLast,
@@ -19,7 +19,7 @@ class ListItemPlaceholder extends React.PureComponent {
     })
 
     const classesXS = CX({
-      default: 1,
+      _: 1,
       px15: 1,
       py7: 1,
       borderColorSecondary: !isLast,
diff --git a/app/javascript/gabsocial/components/placeholder/media_gallery_panel_placeholder.js b/app/javascript/gabsocial/components/placeholder/media_gallery_panel_placeholder.js
index c49f05ae..9f96b7ab 100644
--- a/app/javascript/gabsocial/components/placeholder/media_gallery_panel_placeholder.js
+++ b/app/javascript/gabsocial/components/placeholder/media_gallery_panel_placeholder.js
@@ -6,7 +6,7 @@ export default class MediaGalleryPanelPlaceholder extends React.PureComponent {
   
   render() {
     return (
-      <div className={_s.default}>
+      <div className={_s._}>
         <PlaceholderLayout viewBox='0 0 334 164'>
           <rect x='0' y='0' rx='4' ry='4' width='76' height='76' /> 
           <rect x='86' y='0' rx='4' ry='4' width='76' height='76' /> 
diff --git a/app/javascript/gabsocial/components/placeholder/media_gallery_placeholder.js b/app/javascript/gabsocial/components/placeholder/media_gallery_placeholder.js
index e4f5fcc1..dbb7825d 100644
--- a/app/javascript/gabsocial/components/placeholder/media_gallery_placeholder.js
+++ b/app/javascript/gabsocial/components/placeholder/media_gallery_placeholder.js
@@ -6,7 +6,7 @@ export default class MediaGalleryPlaceholder extends React.PureComponent {
 
   render() {
     return (
-      <div className={[_s.default, _s.px5, _s.py5].join(' ')}>
+      <div className={[_s._, _s.px5, _s.py5].join(' ')}>
         <PlaceholderLayout viewBox='0 0 400 196'>
           <rect x='0' y='0' rx='0' ry='0' width='96' height='96' /> 
           <rect x='100' y='0' rx='0' ry='0' width='96' height='96' /> 
diff --git a/app/javascript/gabsocial/components/placeholder/notification_placeholder.js b/app/javascript/gabsocial/components/placeholder/notification_placeholder.js
index f2430e64..6ef33b4f 100644
--- a/app/javascript/gabsocial/components/placeholder/notification_placeholder.js
+++ b/app/javascript/gabsocial/components/placeholder/notification_placeholder.js
@@ -14,7 +14,7 @@ class NotificationPlaceholder extends React.PureComponent {
     const { isLast } = this.props
 
     const classes = CX({
-      default: 1,
+      _: 1,
       px15: 1,
       py15: 1,
       borderColorSecondary: !isLast,
@@ -22,7 +22,7 @@ class NotificationPlaceholder extends React.PureComponent {
     })
 
     const classesXS = CX({
-      default: 1,
+      _: 1,
       px15: 1,
       py15: 1,
       borderColorSecondary: !isLast,
@@ -37,7 +37,7 @@ class NotificationPlaceholder extends React.PureComponent {
       <React.Fragment>
         <ResponsiveComponent min={BREAKPOINT_EXTRA_SMALL}>
           <div className={classes}>
-            <div className={[_s.default, _s.py2, _s.px2].join(' ')}>
+            <div className={[_s._, _s.py2, _s.px2].join(' ')}>
               <PlaceholderLayout viewBox='0 0 400 170'>
                 <rect x='24' y='34' rx='4' ry='4' width={width2} height='8' />
                 <rect x={left} y='34' rx='4' ry='4' width='12' height='8' />
@@ -61,7 +61,7 @@ class NotificationPlaceholder extends React.PureComponent {
         </ResponsiveComponent>
         <ResponsiveComponent max={BREAKPOINT_EXTRA_SMALL}>
           <div className={classesXS}>
-            <div className={[_s.default, _s.py2, _s.px2].join(' ')}>
+            <div className={[_s._, _s.py2, _s.px2].join(' ')}>
               <PlaceholderLayout viewBox='0 0 380 200'>
                 <circle cx='20' cy='20' r='20' />
                 <rect x='0' y='54' rx='5' ry='5' width={width1} height='10' />
diff --git a/app/javascript/gabsocial/components/placeholder/profile_header_xs_placeholder.js b/app/javascript/gabsocial/components/placeholder/profile_header_xs_placeholder.js
index 2476723e..77d7a812 100644
--- a/app/javascript/gabsocial/components/placeholder/profile_header_xs_placeholder.js
+++ b/app/javascript/gabsocial/components/placeholder/profile_header_xs_placeholder.js
@@ -6,7 +6,7 @@ export default class ProfileHeaderXSPlaceholder extends React.PureComponent {
   
   render() {
     return (
-      <div className={[_s.default, _s.px10, _s.py10].join(' ')}>
+      <div className={[_s._, _s.px10, _s.py10].join(' ')}>
         <PlaceholderLayout viewBox='0 0 400 660'>
           <rect x='0' y='0' rx='0' ry='0' width='400' height='202' /> 
           <circle cx='200' cy='200' r='54' /> 
diff --git a/app/javascript/gabsocial/components/placeholder/profile_info_panel_placeholder.js b/app/javascript/gabsocial/components/placeholder/profile_info_panel_placeholder.js
index aff7c887..4a3cf2ec 100644
--- a/app/javascript/gabsocial/components/placeholder/profile_info_panel_placeholder.js
+++ b/app/javascript/gabsocial/components/placeholder/profile_info_panel_placeholder.js
@@ -6,7 +6,7 @@ export default class ProfileInfoPanelPlaceholder extends React.PureComponent {
   
   render() {
     return (
-      <div className={_s.default}>
+      <div className={_s._}>
         <PlaceholderLayout viewBox='0 0 340 108'>
           <rect x='0' y='0' rx='4' ry='4' width='330' height='8' /> 
           <rect x='0' y='18' rx='4' ry='4' width='314' height='8' /> 
diff --git a/app/javascript/gabsocial/components/placeholder/profile_stats_panel_placeholder.js b/app/javascript/gabsocial/components/placeholder/profile_stats_panel_placeholder.js
index 6e9fc5fb..b14923c7 100644
--- a/app/javascript/gabsocial/components/placeholder/profile_stats_panel_placeholder.js
+++ b/app/javascript/gabsocial/components/placeholder/profile_stats_panel_placeholder.js
@@ -6,7 +6,7 @@ export default class ProfileStatsPanelPlaceholder extends React.PureComponent {
 
   render() {
     return (
-      <div className={_s.default}>
+      <div className={_s._}>
         <PlaceholderLayout viewBox='0 0 178 20'>
           <rect x='2' y='2' rx='4' ry='4' width='24' height='6' /> 
           <rect x='2' y='12' rx='4' ry='4' width='38' height='6' /> 
diff --git a/app/javascript/gabsocial/components/placeholder/status_placeholder.js b/app/javascript/gabsocial/components/placeholder/status_placeholder.js
index 3e5ebcce..2541f0e3 100644
--- a/app/javascript/gabsocial/components/placeholder/status_placeholder.js
+++ b/app/javascript/gabsocial/components/placeholder/status_placeholder.js
@@ -12,7 +12,7 @@ export default class StatusPlaceholder extends React.PureComponent {
 
   render() {
     const containerClasses = CX({
-      default: 1,
+      _: 1,
       px15: 1,
       mt5: 1,
       mb15: 1,
@@ -23,7 +23,7 @@ export default class StatusPlaceholder extends React.PureComponent {
     })
 
     const containerClassesXS = CX({
-      default: 1,
+      _: 1,
       bgPrimary: 1,
       boxShadowBlock: 1,
       borderTop1PX: 1,
diff --git a/app/javascript/gabsocial/components/placeholder/trends_item_placeholder.js b/app/javascript/gabsocial/components/placeholder/trends_item_placeholder.js
index 4001ee54..5a203e4c 100644
--- a/app/javascript/gabsocial/components/placeholder/trends_item_placeholder.js
+++ b/app/javascript/gabsocial/components/placeholder/trends_item_placeholder.js
@@ -14,7 +14,7 @@ export default class TrendsItemPlaceholder extends React.PureComponent {
     const subtitle3Width = getRandomInt(120, 225)
 
     return (
-      <div className={[_s.default, _s.px15, _s.py10, _s.pb5, _s.mb5].join(' ')}>
+      <div className={[_s._, _s.px15, _s.py10, _s.pb5, _s.mb5].join(' ')}>
         <PlaceholderLayout viewBox='0 0 340 138'>
           <rect x='0' y='0' rx='3' ry='3' width={title1Width} height='12' />
           <rect x='0' y='23' rx='3' ry='3' width={title2Width} height='12' />
diff --git a/app/javascript/gabsocial/components/poll.js b/app/javascript/gabsocial/components/poll.js
index b61582c5..72b9be4c 100644
--- a/app/javascript/gabsocial/components/poll.js
+++ b/app/javascript/gabsocial/components/poll.js
@@ -71,12 +71,12 @@ class Poll extends ImmutablePureComponent {
     }
 
     const chartClasses = cx({
-      default: 1,
+      _: 1,
       posAbs: 1,
       top0: 1,
       left0: 1,
       radiusSmall: 1,
-      height100PC: 1,
+      h100PC: 1,
       bgSecondary: !leading && !optionHasNoVotes,
       bgTertiary: !leading && optionHasNoVotes,
       bgBrandLight: leading,
@@ -89,7 +89,7 @@ class Poll extends ImmutablePureComponent {
     })
 
     const listItemClasses = cx({
-      default: 1,
+      _: 1,
       flexRow: 1,
       py10: showResults,
       mb10: 1,
@@ -102,12 +102,12 @@ class Poll extends ImmutablePureComponent {
     })
 
     const textContainerClasses = cx({
-      default: 1,
-      width100PC: 1,
+      _: 1,
+      w100PC: 1,
       px15: 1,
       py10: !showResults,
       cursorPointer: !showResults,
-      alignItemsCenter: !showResults,
+      aiCenter: !showResults,
     })
 
     return (
@@ -127,7 +127,7 @@ class Poll extends ImmutablePureComponent {
             size='medium'
             color='primary'
             weight={(leading && showResults) ? 'bold' : 'normal'}
-            className={[_s.displayFlex, _s.flexRow, _s.width100PC, _s.alignItemsCenter].join(' ')}
+            className={[_s.displayFlex, _s.flexRow, _s.w100PC, _s.aiCenter].join(' ')}
           >
             {
               !showResults &&
@@ -138,7 +138,7 @@ class Poll extends ImmutablePureComponent {
                 checked={active}
                 onChange={this.handleOptionChange}
                 disabled={disabled}
-                className={[_s.default, _s.mr10].join(' ')}
+                className={[_s._, _s.mr10].join(' ')}
               />
             }
 
@@ -176,14 +176,14 @@ class Poll extends ImmutablePureComponent {
     const disabled = this.props.disabled || Object.entries(this.state.selected).every(item => !item)
 
     return (
-      <div className={[_s.default, _s.px15, _s.py10].join(' ')}>
-        <ul className={[_s.default, _s.listStyleNone].join(' ')}>
+      <div className={[_s._, _s.px15, _s.py10].join(' ')}>
+        <ul className={[_s._, _s.listStyleNone].join(' ')}>
           {
             poll.get('options').map((option, i) => this.renderOption(option, i))
           }
         </ul>
 
-        <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
+        <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
           {
             !showResults && me &&
             <Button
diff --git a/app/javascript/gabsocial/components/popover/date_picker_popover.js b/app/javascript/gabsocial/components/popover/date_picker_popover.js
index 0ae12af7..b46e0a2b 100644
--- a/app/javascript/gabsocial/components/popover/date_picker_popover.js
+++ b/app/javascript/gabsocial/components/popover/date_picker_popover.js
@@ -73,7 +73,7 @@ class DatePickerPopover extends React.PureComponent {
         isXS={isXS}
         onClose={this.handleOnClosePopover}
       >
-        <div className={[_s.default, _s.bgSubtle].join(' ')}>
+        <div className={[_s._, _s.bgSubtle].join(' ')}>
           <DatePicker
             inline
             target={this}
@@ -102,7 +102,7 @@ class DatePickerPopover extends React.PureComponent {
         </div>
         {
           date &&
-          <div className={[_s.default, _s.alignItemsCenter, _s.flexRow, _s.px10, _s.py10, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}>
+          <div className={[_s._, _s.aiCenter, _s.flexRow, _s.px10, _s.py10, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}>
             <Text size='extraSmall' color='secondary'>
               <FormattedMessage id='scheduled_for_datetime' defaultMessage='Scheduled for {datetime}' values={{
                 datetime: moment.utc(date).format('lll'),
diff --git a/app/javascript/gabsocial/components/popover/error_popover.js b/app/javascript/gabsocial/components/popover/error_popover.js
index a28a6ac6..38a93aaa 100644
--- a/app/javascript/gabsocial/components/popover/error_popover.js
+++ b/app/javascript/gabsocial/components/popover/error_popover.js
@@ -19,8 +19,8 @@ export default class ErrorPopover extends React.PureComponent {
         isXS={isXS}
         onClose={this.props.onClose}
       >
-          <div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15].join(' ')}>
-            <div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+          <div className={[_s._, _s.px15, _s.py15, _s.mt15, _s.mb15].join(' ')}>
+            <div className={[_s._, _s.px15, _s.py15, _s.mt15, _s.mb15, _s.aiCenter, _s.jcCenter].join(' ')}>
               <ColumnIndicator type='error' message='Error loading popover' />
             </div>
           </div>
diff --git a/app/javascript/gabsocial/components/popover/loading_popover.js b/app/javascript/gabsocial/components/popover/loading_popover.js
index d1e3a708..e27338fb 100644
--- a/app/javascript/gabsocial/components/popover/loading_popover.js
+++ b/app/javascript/gabsocial/components/popover/loading_popover.js
@@ -19,8 +19,8 @@ export default class LoadingPopover extends React.PureComponent {
         isXS={isXS}
         onClose={this.props.onClose}
       >
-          <div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15].join(' ')}>
-            <div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+          <div className={[_s._, _s.px15, _s.py15, _s.mt15, _s.mb15].join(' ')}>
+            <div className={[_s._, _s.px15, _s.py15, _s.mt15, _s.mb15, _s.aiCenter, _s.jcCenter].join(' ')}>
               <ColumnIndicator type='loading' />
             </div>
           </div>
diff --git a/app/javascript/gabsocial/components/popover/popover_base.js b/app/javascript/gabsocial/components/popover/popover_base.js
index 00102dd1..5246a7c5 100644
--- a/app/javascript/gabsocial/components/popover/popover_base.js
+++ b/app/javascript/gabsocial/components/popover/popover_base.js
@@ -130,7 +130,7 @@ class PopoverBase extends ImmutablePureComponent {
     } = this.props
 
     const containerClasses = CX({
-      default: 1,
+      _: 1,
       z4: 1,
       boxShadowPopover: visible,
       displayNone: !visible,
diff --git a/app/javascript/gabsocial/components/popover/popover_layout.js b/app/javascript/gabsocial/components/popover/popover_layout.js
index 964aaeff..c08f1501 100644
--- a/app/javascript/gabsocial/components/popover/popover_layout.js
+++ b/app/javascript/gabsocial/components/popover/popover_layout.js
@@ -33,17 +33,17 @@ export default class PopoverLayout extends React.PureComponent {
 
     if (isXS) {
       return (
-        <div className={[_s.default, _s.modal, _s.px10, _s.pb10].join(' ')}>
-          <div className={[_s.default, _s.bgPrimary, _s.radiusSmall, _s.overflowHidden, _s.mb10].join(' ')}>
+        <div className={[_s._, _s.modal, _s.px10, _s.pb10].join(' ')}>
+          <div className={[_s._, _s.bgPrimary, _s.radiusSmall, _s.overflowHidden, _s.mb10].join(' ')}>
             {
               !!title &&
-              <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX, _s.px15].join(' ')}>
+              <div className={[_s._, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.h53PX, _s.px15].join(' ')}>
                 <Heading size='2'>
                   {title}
                 </Heading>
               </div>
             }
-            <div className={[_s.default, _s.heightMax80VH, _s.radiusSmall, _s.overflowYScroll].join(' ')}>
+            <div className={[_s._, _s.maxH80VH, _s.radiusSmall, _s.overflowYScroll].join(' ')}>
               {children}
             </div>
           </div>
diff --git a/app/javascript/gabsocial/components/popover/status_visibility_popover.js b/app/javascript/gabsocial/components/popover/status_visibility_popover.js
index ab3a5b95..1a7699e9 100644
--- a/app/javascript/gabsocial/components/popover/status_visibility_popover.js
+++ b/app/javascript/gabsocial/components/popover/status_visibility_popover.js
@@ -85,14 +85,14 @@ class StatusVisibilityDropdown extends React.PureComponent {
         isXS={isXS}
         onClose={this.handleOnClosePopover}
       >
-        <div className={[_s.default].join(' ')}>
+        <div className={[_s._].join(' ')}>
           {
             options.map((option, i) => {
               const isActive = option.value === value
               const isLast = i === options.length - 1
 
               const containerClasses = cx({
-                default: 1,
+                _: 1,
                 flexRow: 1,
                 py10: 1,
                 cursorPointer: 1,
@@ -105,8 +105,8 @@ class StatusVisibilityDropdown extends React.PureComponent {
               const iconClasses = cx({
                 ml10: 1,
                 mt2: 1,
-                colorPrimary: !isActive,
-                colorWhite: isActive,
+                cPrimary: !isActive,
+                cWhite: isActive,
               })
 
               return (
@@ -116,7 +116,7 @@ class StatusVisibilityDropdown extends React.PureComponent {
                   className={containerClasses}
                 >
                   <Icon id={option.icon} size='16px' className={iconClasses} />
-                  <div className={[_s.default, _s.px10, _s.pt2].join(' ')}>
+                  <div className={[_s._, _s.px10, _s.pt2].join(' ')}>
                     <Text size='medium' color={isActive ? 'white' : 'primary'}>
                       {option.title}
                     </Text>
diff --git a/app/javascript/gabsocial/components/popover/user_info_popover.js b/app/javascript/gabsocial/components/popover/user_info_popover.js
index 33dce32f..6ff1956d 100644
--- a/app/javascript/gabsocial/components/popover/user_info_popover.js
+++ b/app/javascript/gabsocial/components/popover/user_info_popover.js
@@ -38,30 +38,30 @@ class UserInfoPopover extends ImmutablePureComponent {
 
     return (
       <PopoverLayout width={280}>
-        <div className={[_s.default, _s.width100PC, _s.px15, _s.py15].join(' ')} id='user-info-popover'>
+        <div className={[_s._, _s.w100PC, _s.px15, _s.py15].join(' ')} id='user-info-popover'>
           
-          <div className={[_s.default, _s.flexRow].join(' ')}>
+          <div className={[_s._, _s.flexRow].join(' ')}>
             <NavLink
               to={to}
-              className={[_s.default, _s.noUnderline, _s.flexGrow1].join(' ')}
+              className={[_s._, _s.noUnderline, _s.flexGrow1].join(' ')}
             >
               <Avatar account={account} size={42} noHover />
               <DisplayName account={account} isMultiline noHover />
             </NavLink>
 
-            <div className={[_s.default, _s.mlAuto, _s.right0, _s.posAbs, _s.mt5].join(' ')}>
+            <div className={[_s._, _s.mlAuto, _s.right0, _s.posAbs, _s.mt5].join(' ')}>
               <AccountActionButton account={account} />
             </div>
           </div>
 
-          <div className={[_s.default, _s.mt10].join(' ')}>
+          <div className={[_s._, _s.mt10].join(' ')}>
             <div className={_s.dangerousContent} dangerouslySetInnerHTML={content} />
           </div>
 
-          <div className={[_s.default, _s.flexRow, _s.mt10].join(' ')}>
+          <div className={[_s._, _s.flexRow, _s.mt10].join(' ')}>
             <NavLink
               to={`${to}/followers`}
-              className={[_s.default, _s.flexRow, _s.mr10, _s.noUnderline, _s.colorPrimary, _s.underline_onHover].join(' ')}
+              className={[_s._, _s.flexRow, _s.mr10, _s.noUnderline, _s.cPrimary, _s.underline_onHover].join(' ')}
             >
               <Text weight='extraBold' color='primary'>
                 {shortNumberFormat(account.get('followers_count'))}&nbsp;
@@ -72,7 +72,7 @@ class UserInfoPopover extends ImmutablePureComponent {
             </NavLink>
             <NavLink
               to={`${to}/following`}
-              className={[_s.default, _s.flexRow, _s.noUnderline, _s.colorPrimary, _s.underline_onHover].join(' ')}
+              className={[_s._, _s.flexRow, _s.noUnderline, _s.cPrimary, _s.underline_onHover].join(' ')}
             >
               <Text weight='extraBold' color='primary'>
                 {shortNumberFormat(account.get('following_count'))}&nbsp;
diff --git a/app/javascript/gabsocial/components/popover/video_stats_popover.js b/app/javascript/gabsocial/components/popover/video_stats_popover.js
index 9c776c8a..9ca9fd97 100644
--- a/app/javascript/gabsocial/components/popover/video_stats_popover.js
+++ b/app/javascript/gabsocial/components/popover/video_stats_popover.js
@@ -72,7 +72,7 @@ class VideoStatsPopover extends ImmutablePureComponent {
     ]
 
     const containerClasses = CX({
-      default: 1,
+      _: 1,
       bgBlack: !isXS,
       bgPrimary: !isXS,
       px10: 1,
@@ -137,8 +137,8 @@ class VideoStatLine extends React.PureComponent {
     const color = isXS ? 'primary' : 'white'
 
     return (
-      <div className={[_s.default, _s.flexRow, _s.pt2].join(' ')}>
-        <div className={[_s.default, _s.width115PX, _s.alignItemsEnd, _s.mr5].join(' ')}>
+      <div className={[_s._, _s.flexRow, _s.pt2].join(' ')}>
+        <div className={[_s._, _s.w115PX, _s.aiEnd, _s.mr5].join(' ')}>
           <Text size='extraSmall' weight='medium' color={color}>
             {title}
           </Text>
diff --git a/app/javascript/gabsocial/components/profile_header.js b/app/javascript/gabsocial/components/profile_header.js
index 1c02939d..335ad6be 100644
--- a/app/javascript/gabsocial/components/profile_header.js
+++ b/app/javascript/gabsocial/components/profile_header.js
@@ -69,9 +69,9 @@ class ProfileHeader extends ImmutablePureComponent {
 
     if (isXS && !account) {
       return (
-        <div className={[_s.default, _s.z1, _s.width100PC].join(' ')}>
-          <div className={[_s.default, _s.z1, _s.width100PC, _s.boxShadowBlock, _s.bgPrimary].join(' ')}>
-            <div className={[_s.default, _s.width100PC].join(' ')}>
+        <div className={[_s._, _s.z1, _s.w100PC].join(' ')}>
+          <div className={[_s._, _s.z1, _s.w100PC, _s.boxShadowBlock, _s.bgPrimary].join(' ')}>
+            <div className={[_s._, _s.w100PC].join(' ')}>
               <ProfileHeaderXSPlaceholder />
             </div>
           </div>
@@ -112,35 +112,35 @@ class ProfileHeader extends ImmutablePureComponent {
     const top = headerMissing ? -46 : -380
 
     const avatarContainerClasses = CX({
-      default: 1,
+      _: 1,
       circle: 1,
       mtNeg75PX: !headerMissing,
       boxShadowProfileAvatar: !headerMissing,
     })
 
     const stickyBarContainerClasses = CX({
-      default: 1,
+      _: 1,
       flexRow: 1,
       px15: 1,
-      alignItemsCenter: 1,
+      aiCenter: 1,
       displayNone: !stickied,
     })
 
     const tabBarContainerClasses = CX({
-      default: 1,
+      _: 1,
       displayNone: stickied,
     })
 
     const mobileAvatarContainerClasses = CX({
-      default: 1,
+      _: 1,
       circle: 1,
       boxShadowProfileAvatar: 1,
       mtNeg50PX: !headerMissing,
     })
 
     const mobileDescriptionContainerClasses = CX({
-      default: 1,
-      width100PC: 1,
+      _: 1,
+      w100PC: 1,
       px15: 1,
       mt5: !!me,
       mb10: 1,
@@ -149,34 +149,34 @@ class ProfileHeader extends ImmutablePureComponent {
     })
 
     return (
-      <div className={[_s.default, _s.z1, _s.width100PC].join(' ')}>
+      <div className={[_s._, _s.z1, _s.w100PC].join(' ')}>
         <Responsive max={BREAKPOINT_EXTRA_SMALL}>
-          <div className={[_s.default, _s.z1, _s.width100PC, _s.alignItemsCenter, _s.boxShadowBlock, _s.bgPrimary].join(' ')}>
+          <div className={[_s._, _s.z1, _s.w100PC, _s.aiCenter, _s.boxShadowBlock, _s.bgPrimary].join(' ')}>
 
-            <div className={[_s.default, _s.width100PC].join(' ')}>
+            <div className={[_s._, _s.w100PC].join(' ')}>
               {
                 !headerMissing &&
-                <div className={[_s.default, _s.height200PX, _s.px10, _s.width100PC, _s.mt10, _s.overflowHidden].join(' ')}>
+                <div className={[_s._, _s.h200PX, _s.px10, _s.w100PC, _s.mt10, _s.overflowHidden].join(' ')}>
                   <Image
                     alt={intl.formatMessage(messages.headerPhoto)}
-                    className={[_s.topRightRadiusSmall, _s.topLeftRadiusSmall, _s.height100PC].join(' ')}
+                    className={[_s.topRightRadiusSmall, _s.topLeftRadiusSmall, _s.h100PC].join(' ')}
                     src={headerSrc}
                   />
                 </div>
               }
               {
                 headerMissing &&
-                <div className={[_s.default, _s.height20PX, _s.width100PC].join(' ')} />
+                <div className={[_s._, _s.h20PX, _s.w100PC].join(' ')} />
               }
 
-              <div className={[_s.default, _s.width100PC].join(' ')}>
+              <div className={[_s._, _s.w100PC].join(' ')}>
 
-                <div className={[_s.default, _s.alignItemsCenter, _s.px15, _s.mb5].join(' ')}>
+                <div className={[_s._, _s.aiCenter, _s.px15, _s.mb5].join(' ')}>
                   <div className={mobileAvatarContainerClasses}>
                     <Avatar size={100} account={account} noHover />
                   </div>
 
-                  <div className={[_s.default, _s.flexRow, _s.flexNormal, _s.py10].join(' ')}>
+                  <div className={[_s._, _s.flexRow, _s.flexNormal, _s.py10].join(' ')}>
                     <DisplayName
                       account={account}
                       isMultiline
@@ -188,15 +188,15 @@ class ProfileHeader extends ImmutablePureComponent {
                 </div>
 
 
-                <div className={[_s.default, _s.bgPrimary, _s.alignItemsCenter].join(' ')}>
+                <div className={[_s._, _s.bgPrimary, _s.aiCenter].join(' ')}>
                   {
                     account && account.get('id') === me &&
-                    <div className={[_s.default,_s.py5].join(' ')}>
+                    <div className={[_s._,_s.py5].join(' ')}>
                       <Button
                         isOutline
                         backgroundColor='none'
                         color='brand'
-                        className={[_s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
+                        className={[_s.jcCenter, _s.aiCenter].join(' ')}
                         onClick={this.handleOnEditProfile}
                       >
                         <Text color='inherit' weight='bold' size='medium' className={_s.px15}>
@@ -208,9 +208,9 @@ class ProfileHeader extends ImmutablePureComponent {
 
                   {
                     account && account.get('id') !== me && !!me &&
-                    <div className={[_s.default, _s.flexRow, _s.py5].join(' ')}>
+                    <div className={[_s._, _s.flexRow, _s.py5].join(' ')}>
                       
-                      <div className={[_s.default, _s.flexRow, _s.mr10].join(' ')}>
+                      <div className={[_s._, _s.flexRow, _s.mr10].join(' ')}>
                         <AccountActionButton account={account} />
                       </div>
 
@@ -222,7 +222,7 @@ class ProfileHeader extends ImmutablePureComponent {
                           iconClassName={_s.inheritFill}
                           color='brand'
                           backgroundColor='none'
-                          className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.px10].join(' ')}
+                          className={[_s.jcCenter, _s.aiCenter, _s.px10].join(' ')}
                           onClick={this.handleOpenMore}
                           buttonRef={this.setOpenMoreNodeRef}
                         />
@@ -235,7 +235,7 @@ class ProfileHeader extends ImmutablePureComponent {
                     {children}
                   </div>
 
-                  <div className={[_s.default, _s.mt10, _s.mb10, _s.pt5, _s.width100PC, _s.pr10].join(' ')}>
+                  <div className={[_s._, _s.mt10, _s.mb10, _s.pt5, _s.w100PC, _s.pr10].join(' ')}>
                     <Pills pills={tabs} />
                   </div>
                 </div>
@@ -248,27 +248,27 @@ class ProfileHeader extends ImmutablePureComponent {
         { /** desktop */ }
         <Responsive min={BREAKPOINT_EXTRA_SMALL}>
           <Sticky top={top} enabled onStateChange={this.onStickyStateChange}>
-            <div className={[_s.default, _s.z1, _s.width100PC, _s.alignItemsCenter, _s.boxShadowBlock, _s.bgPrimary].join(' ')}>
+            <div className={[_s._, _s.z1, _s.w100PC, _s.aiCenter, _s.boxShadowBlock, _s.bgPrimary].join(' ')}>
 
-              <div className={[_s.default, _s.width1015PX].join(' ')}>
+              <div className={[_s._, _s.w1015PX].join(' ')}>
                 {
                   !headerMissing &&
-                  <div className={[_s.default, _s.height350PX, _s.width100PC, _s.bottomRightRadiusSmall, _s.bottomLeftRadiusSmall, _s.overflowHidden].join(' ')}>
+                  <div className={[_s._, _s.h350PX, _s.w100PC, _s.bottomRightRadiusSmall, _s.bottomLeftRadiusSmall, _s.overflowHidden].join(' ')}>
                     <Image
                       alt={intl.formatMessage(messages.headerPhoto)}
-                      className={_s.height100PC}
+                      className={_s.h100PC}
                       src={headerSrc}
                     />
                   </div>
                 }
                 {
                   headerMissing &&
-                  <div className={[_s.default, _s.height20PX, _s.width100PC].join(' ')} />
+                  <div className={[_s._, _s.h20PX, _s.w100PC].join(' ')} />
                 }
 
-                <div className={[_s.default, _s.width100PC].join(' ')}>
+                <div className={[_s._, _s.w100PC].join(' ')}>
 
-                  <div className={[_s.default, _s.flexRow, _s.pr15, _s.pl25, _s.mb5].join(' ')}>
+                  <div className={[_s._, _s.flexRow, _s.pr15, _s.pl25, _s.mb5].join(' ')}>
                     <div className={avatarContainerClasses}>
                       {
                         account &&
@@ -277,7 +277,7 @@ class ProfileHeader extends ImmutablePureComponent {
                       {
                         !account &&
                         <div
-                          className={[_s.default, _s.circle, _s.overflowHidden, _s.bgSecondary].join(' ')}
+                          className={[_s._, _s.circle, _s.overflowHidden, _s.bgSecondary].join(' ')}
                           style={{
                             width: `${avatarSize}px`,
                             height: `${avatarSize}px`,
@@ -286,32 +286,32 @@ class ProfileHeader extends ImmutablePureComponent {
                       }
                     </div>
 
-                    <div className={[_s.default, _s.flexRow, _s.px15, _s.flexNormal, _s.py10].join(' ')}>
+                    <div className={[_s._, _s.flexRow, _s.px15, _s.flexNormal, _s.py10].join(' ')}>
                       <DisplayName account={account} isMultiline isLarge noHover />
                     </div>
                   </div>
 
 
-                  <div className={[_s.default, _s.flexRow, _s.bgPrimary, _s.height53PX].join(' ')}>
+                  <div className={[_s._, _s.flexRow, _s.bgPrimary, _s.h53PX].join(' ')}>
                     <div className={tabBarContainerClasses}>
                       <TabBar tabs={tabs} isLarge />
                     </div>
 
                     <div className={stickyBarContainerClasses}>
                       <Avatar size={36} account={account} noHover />
-                      <div className={[_s.default, _s.ml10].join(' ')}>
+                      <div className={[_s._, _s.ml10].join(' ')}>
                         <DisplayName account={account} noUsername noRelationship noHover isLarge />
                       </div>
                     </div>
 
                     {
                       account && account.get('id') === me &&
-                      <div className={[_s.default, _s.flexRow, _s.mlAuto, _s.py5].join(' ')}>
+                      <div className={[_s._, _s.flexRow, _s.mlAuto, _s.py5].join(' ')}>
                         <Button
                           isOutline
                           backgroundColor='none'
                           color='brand'
-                          className={[_s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
+                          className={[_s.jcCenter, _s.aiCenter].join(' ')}
                           onClick={this.handleOnEditProfile}
                         >
                           <Text color='inherit' weight='bold' size='medium' className={_s.px15}>
@@ -323,7 +323,7 @@ class ProfileHeader extends ImmutablePureComponent {
 
                     {
                       account && account.get('id') !== me &&
-                      <div className={[_s.default, _s.flexRow, _s.mlAuto, _s.py5].join(' ')}>
+                      <div className={[_s._, _s.flexRow, _s.mlAuto, _s.py5].join(' ')}>
                         {
                           !!me &&
                           <div>
@@ -334,14 +334,14 @@ class ProfileHeader extends ImmutablePureComponent {
                               iconClassName={_s.inheritFill}
                               color='brand'
                               backgroundColor='none'
-                              className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.mr10, _s.px10].join(' ')}
+                              className={[_s.jcCenter, _s.aiCenter, _s.mr10, _s.px10].join(' ')}
                               onClick={this.handleOpenMore}
                               buttonRef={this.setOpenMoreNodeRef}
                             />
                           </div>
                         }
 
-                        <div className={[_s.default, _s.flexRow, _s.pb3].join(' ')}>
+                        <div className={[_s._, _s.flexRow, _s.pb3].join(' ')}>
                           <AccountActionButton account={account} />
                         </div>
 
diff --git a/app/javascript/gabsocial/components/profile_navigation_bar.js b/app/javascript/gabsocial/components/profile_navigation_bar.js
index 206a8063..eed527c7 100644
--- a/app/javascript/gabsocial/components/profile_navigation_bar.js
+++ b/app/javascript/gabsocial/components/profile_navigation_bar.js
@@ -9,18 +9,18 @@ class ProfileNavigationBar extends React.PureComponent {
     const { titleHTML } = this.props
 
     return (
-      <div className={[_s.default, _s.z4, _s.heightMin53PX, _s.width100PC].join(' ')}>
-        <div className={[_s.default, _s.heightMin53PX, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
+      <div className={[_s._, _s.z4, _s.minH53PX, _s.w100PC].join(' ')}>
+        <div className={[_s._, _s.minH53PX, _s.bgNavigation, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
 
-          <div className={[_s.default, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.width100PC].join(' ')}>
+          <div className={[_s._, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.w100PC].join(' ')}>
 
             <BackButton
-              className={[_s.heightMin53PX, _s.pl10, _s.pr10].join(' ')}
+              className={[_s.minH53PX, _s.pl10, _s.pr10].join(' ')}
               iconSize='18px'
               iconClassName={[_s.mr5, _s.fillNavigation].join(' ')}
             />
 
-            <div className={[_s.default, _s.heightMin53PX, _s.justifyContentCenter, _s.mrAuto].join(' ')}>
+            <div className={[_s._, _s.minH53PX, _s.jcCenter, _s.mrAuto].join(' ')}>
               <Heading size='h1'>
                 <span className={[_s.textOverflowEllipsis, _s.colorNavigation].join(' ')}>
                   <div dangerouslySetInnerHTML={{ __html: titleHTML }} />
diff --git a/app/javascript/gabsocial/components/progress_bar.js b/app/javascript/gabsocial/components/progress_bar.js
index deafed6d..b6a45918 100644
--- a/app/javascript/gabsocial/components/progress_bar.js
+++ b/app/javascript/gabsocial/components/progress_bar.js
@@ -20,15 +20,15 @@ class ProgressBar extends React.PureComponent {
     }
 
     const containerClassName = CX({
-      default: 1,
+      _: 1,
       bgLoading: !small,
       bgSecondary: small,
       noUnderline: 1,
       circle: 1,
       overflowHidden: 1,
       cursorPointer: 1,
-      height22PX: !small,
-      height4PX: small,
+      h22PX: !small,
+      h4PX: small,
     })
 
     return (
@@ -37,8 +37,8 @@ class ProgressBar extends React.PureComponent {
         noClasses
         className={containerClassName}
       >
-        <div className={[_s.default, _s.bgBrand, _s.circle, _s.height100PC, _s.backgroundCandy].join(' ')} style={style} />
-        <div className={[_s.default, _s.posAbs,  _s.width100PC, _s.height100PC, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+        <div className={[_s._, _s.bgBrand, _s.circle, _s.h100PC, _s.backgroundCandy].join(' ')} style={style} />
+        <div className={[_s._, _s.posAbs,  _s.w100PC, _s.h100PC, _s.aiCenter, _s.jcCenter].join(' ')}>
           {
             !!title &&
             <Text size='small' weight='bold' color='white' className={_s.textShadow}>
diff --git a/app/javascript/gabsocial/components/pull_to_refresher.js b/app/javascript/gabsocial/components/pull_to_refresher.js
index 8c2055c1..ab8d8344 100644
--- a/app/javascript/gabsocial/components/pull_to_refresher.js
+++ b/app/javascript/gabsocial/components/pull_to_refresher.js
@@ -8,8 +8,8 @@ export default class PullToRefresher extends React.PureComponent {
   render() {
     return (
       <Responsive max={BREAKPOINT_EXTRA_SMALL}>
-        <div className={[_s.default, _s.height53PX, _s.width100PC, _s.alignItemsCenter, _s.posAbs, _s.left0, _s.right0, _s.topNeg50PX].join(' ')}>
-          <div className={[_s.default, _s.width100PC, _s.alignItemsCenter].join(' ')}>
+        <div className={[_s._, _s.h53PX, _s.w100PC, _s.aiCenter, _s.posAbs, _s.left0, _s.right0, _s.topNeg50PX].join(' ')}>
+          <div className={[_s._, _s.w100PC, _s.aiCenter].join(' ')}>
             <Icon id='loading' size='24px' />
           </div>
         </div>
diff --git a/app/javascript/gabsocial/components/rich_text_editor_bar.js b/app/javascript/gabsocial/components/rich_text_editor_bar.js
index ed1811c8..c1b8f055 100644
--- a/app/javascript/gabsocial/components/rich_text_editor_bar.js
+++ b/app/javascript/gabsocial/components/rich_text_editor_bar.js
@@ -92,7 +92,7 @@ class RichTextEditorBar extends React.PureComponent {
     if (!rteControlsVisible || !isPro) return null
 
     return (
-      <div className={[_s.default, _s.bgPrimary, _s.borderBottom1PX, _s.borderColorSecondary, _s.py5, _s.px15, _s.alignItemsCenter, _s.flexRow].join(' ')}>
+      <div className={[_s._, _s.bgPrimary, _s.borderBottom1PX, _s.borderColorSecondary, _s.py5, _s.px15, _s.aiCenter, _s.flexRow].join(' ')}>
         {
           RTE_ITEMS.map((item, i) => (
             <StyleButton
@@ -149,10 +149,10 @@ class StyleButton extends React.PureComponent {
     const blockType = editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType()
 
     const active = type === 'block' ? style === blockType : currentStyle.has(style)
-    const iconColor = active ? 'colorWhite' : 'colorSecondary'
+    const iconColor = active ? 'cWhite' : 'cSecondary'
 
     const btnClasses = cx({
-      default: 1,
+      _: 1,
       noUnderline: 1,
       cursorPointer: 1,
       px10: 1,
diff --git a/app/javascript/gabsocial/components/search.js b/app/javascript/gabsocial/components/search.js
index 91bf5769..847a71f9 100644
--- a/app/javascript/gabsocial/components/search.js
+++ b/app/javascript/gabsocial/components/search.js
@@ -84,14 +84,14 @@ class Search extends React.PureComponent {
     const highlighted = focused || `${value}`.length > 0
 
     const inputClasses = CX({
-      default: 1,
+      _: 1,
       text: 1,
       outlineNone: 1,
       lineHeight125: 1,
       displayBlock: 1,
       py7: 1,
       bgTransparent: 1,
-      colorPrimary: 1,
+      cPrimary: 1,
       fs14PX: 1,
       flexGrow1: 1,
       radiusSmall: 1,
@@ -100,13 +100,13 @@ class Search extends React.PureComponent {
     })
 
     const containerClasses = CX({
-      default: 1,
+      _: 1,
       searchNavigation: (!highlighted && isInNav && theme === 'light') || (isInNav && theme !== 'light'),
       bgWhite: (highlighted && isInNav && theme === 'light'),
       bgPrimary: !isInNav,
       flexRow: 1,
       radiusSmall: 1,
-      alignItemsCenter: 1,
+      aiCenter: 1,
     })
 
     const prependIconColor = (highlighted || !isInNav) ? 'brand' : 'white'
@@ -114,7 +114,7 @@ class Search extends React.PureComponent {
     const id = 'nav-search'
       
     return (
-      <div className={[_s.default, _s.justifyContentCenter, _s.height53PX].join(' ')}>
+      <div className={[_s._, _s.jcCenter, _s.h53PX].join(' ')}>
         <div className={containerClasses}>
           <label className={_s.visiblyHidden} htmlFor={id}>Search</label>
 
diff --git a/app/javascript/gabsocial/components/select.js b/app/javascript/gabsocial/components/select.js
index 8683b334..42441327 100644
--- a/app/javascript/gabsocial/components/select.js
+++ b/app/javascript/gabsocial/components/select.js
@@ -25,9 +25,9 @@ class Select extends ImmutablePureComponent {
     } = this.props
 
     return (
-      <div className={_s.default}>
+      <div className={_s._}>
         <select
-          className={[_s.default, _s.outlineNone, _s.text, _s.border1PX, _s.borderColorSecondary, _s.px15, _s.select, _s.fs14PX].join(' ')}
+          className={[_s._, _s.outlineNone, _s.text, _s.border1PX, _s.borderColorSecondary, _s.px15, _s.select, _s.fs14PX].join(' ')}
           value={value}
           onChange={onChange}
         >
@@ -42,7 +42,7 @@ class Select extends ImmutablePureComponent {
         <Icon
           id='select'
           size='14px'
-          className={[_s.colorSecondary, _s.posAbs, _s.right0, _s.mr10, _s.bottom0, _s.mb15].join(' ')}
+          className={[_s.cSecondary, _s.posAbs, _s.right0, _s.mr10, _s.bottom0, _s.mb15].join(' ')}
         />
       </div>
     )
diff --git a/app/javascript/gabsocial/components/sensitive_media_item.js b/app/javascript/gabsocial/components/sensitive_media_item.js
index 075b2df4..1f357416 100644
--- a/app/javascript/gabsocial/components/sensitive_media_item.js
+++ b/app/javascript/gabsocial/components/sensitive_media_item.js
@@ -13,14 +13,14 @@ class SensitiveMediaItem extends React.PureComponent {
     } = this.props
 
     return (
-      <div className={[_s.default, _s.px15, _s.pt5].join(' ')}>
-        <div className={[_s.default, _s.flexRow, _s.radiusSmall, _s.bgTertiary, _s.py10, _s.px15, _s.height100PC, _s.width100PC].join(' ')}>
-          <div className={[_s.default, _s.justifyContentCenter, _s.flexNormal].join(' ')}>
+      <div className={[_s._, _s.px15, _s.pt5].join(' ')}>
+        <div className={[_s._, _s.flexRow, _s.radiusSmall, _s.bgTertiary, _s.py10, _s.px15, _s.h100PC, _s.w100PC].join(' ')}>
+          <div className={[_s._, _s.jcCenter, _s.flexNormal].join(' ')}>
             <Text color='secondary'>
               {intl.formatMessage(messages.warning)}
             </Text>
           </div>
-          <div className={[_s.default, _s.justifyContentCenter, _s.mlAuto].join(' ')}>
+          <div className={[_s._, _s.jcCenter, _s.mlAuto].join(' ')}>
             <Button
               onClick={onClick}
               color='tertiary'
diff --git a/app/javascript/gabsocial/components/settings_sidebar.js b/app/javascript/gabsocial/components/settings_sidebar.js
index 53a617e6..b28ef263 100644
--- a/app/javascript/gabsocial/components/settings_sidebar.js
+++ b/app/javascript/gabsocial/components/settings_sidebar.js
@@ -38,12 +38,12 @@ class Sidebar extends ImmutablePureComponent {
     ]
 
     return (
-      <header role='banner' className={[_s.default, _s.flexGrow1, _s.z3, _s.alignItemsEnd].join(' ')}>
-        <div className={[_s.default, _s.width240PX].join(' ')}>
-          <div className={[_s.default, _s.posFixed, _s.heightCalc53PX, _s.bottom0].join(' ')}>
-            <div className={[_s.default, _s.height100PC, _s.alignItemsStart, _s.width240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}>
-              <div className={[_s.default, _s.width100PC].join(' ')}>
-                <div className={[_s.default, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
+      <header role='banner' className={[_s._, _s.flexGrow1, _s.z3, _s.aiEnd].join(' ')}>
+        <div className={[_s._, _s.w240PX].join(' ')}>
+          <div className={[_s._, _s.posFixed, _s.calcH53PX, _s.bottom0].join(' ')}>
+            <div className={[_s._, _s.h100PC, _s.aiStart, _s.w240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}>
+              <div className={[_s._, _s.w100PC].join(' ')}>
+                <div className={[_s._, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
                   <BackButton
                     icon='arrow-left'
                     toHome
@@ -54,7 +54,7 @@ class Sidebar extends ImmutablePureComponent {
                 </div>
 
               </div>
-              <nav aria-label='Primary' role='navigation' className={[_s.default, _s.width100PC, _s.mb15].join(' ')}>
+              <nav aria-label='Primary' role='navigation' className={[_s._, _s.w100PC, _s.mb15].join(' ')}>
                 <SidebarSectionTitle>{intl.formatMessage(messages.menu)}</SidebarSectionTitle>
                 {
                   menuItems.map((menuItem, i) => {
diff --git a/app/javascript/gabsocial/components/shop_item.js b/app/javascript/gabsocial/components/shop_item.js
index 5c67904e..fdb6798a 100644
--- a/app/javascript/gabsocial/components/shop_item.js
+++ b/app/javascript/gabsocial/components/shop_item.js
@@ -16,7 +16,7 @@ class ShopItem extends React.PureComponent {
 
     return (
       <a
-        className={[_s.default, _s.width50PC, _s.noUnderline, _s.overflowHidden, _s.cursorPointer, _s.pb15, _s.pr5].join(' ')}
+        className={[_s._, _s.w50PC, _s.noUnderline, _s.overflowHidden, _s.cursorPointer, _s.pb15, _s.pr5].join(' ')}
         target='_blank'
         rel={DEFAULT_REL}
         href={link}
@@ -24,7 +24,7 @@ class ShopItem extends React.PureComponent {
       >
         <Image
           src={image}
-          className={[_s.width100PC, _s.height122PX].join(' ')}
+          className={[_s.w100PC, _s.h122PX].join(' ')}
         />
 
         <Text
diff --git a/app/javascript/gabsocial/components/sidebar.js b/app/javascript/gabsocial/components/sidebar.js
index 9c37e964..ea2ef1f5 100644
--- a/app/javascript/gabsocial/components/sidebar.js
+++ b/app/javascript/gabsocial/components/sidebar.js
@@ -160,14 +160,14 @@ class Sidebar extends ImmutablePureComponent {
     ]
 
     return (
-      <header role='banner' className={[_s.default, _s.flexGrow1, _s.z3, _s.alignItemsEnd].join(' ')}>
-        <div className={[_s.default, _s.width240PX].join(' ')}>
-          <div className={[_s.default, _s.posFixed, _s.heightCalc53PX, _s.bottom0].join(' ')}>
-            <div className={[_s.default, _s.height100PC, _s.alignItemsStart, _s.width240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}>
-              <div className={[_s.default, _s.width100PC].join(' ')}>
+      <header role='banner' className={[_s._, _s.flexGrow1, _s.z3, _s.aiEnd].join(' ')}>
+        <div className={[_s._, _s.w240PX].join(' ')}>
+          <div className={[_s._, _s.posFixed, _s.calcH53PX, _s.bottom0].join(' ')}>
+            <div className={[_s._, _s.h100PC, _s.aiStart, _s.w240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}>
+              <div className={[_s._, _s.w100PC].join(' ')}>
                 {
                   !!title &&
-                  <div className={[_s.default, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
+                  <div className={[_s._, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
                     {
                       showBackBtn &&
                       <BackButton
@@ -179,7 +179,7 @@ class Sidebar extends ImmutablePureComponent {
                     </Heading>
                     {
                       !!actions &&
-                      <div className={[_s.default, _s.bgTransparent, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.mlAuto].join(' ')}>
+                      <div className={[_s._, _s.bgTransparent, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.mlAuto].join(' ')}>
                         {
                           actions.map((action, i) => (
                             <Button
@@ -191,7 +191,7 @@ class Sidebar extends ImmutablePureComponent {
                               key={`action-btn-${i}`}
                               className={[_s.ml5, _s.px5].join(' ')}
                               icon={action.icon}
-                              iconClassName={_s.colorPrimary}
+                              iconClassName={_s.cPrimary}
                               iconSize='14px'
                             />
                           ))
@@ -202,12 +202,12 @@ class Sidebar extends ImmutablePureComponent {
                 }
                 {
                   !!tabs &&
-                  <div className={[_s.default, _s.mt10, _s.pb15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+                  <div className={[_s._, _s.mt10, _s.pb15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
                     <Pills pills={tabs} />
                   </div>
                 }
               </div>
-              <nav aria-label='Primary' role='navigation' className={[_s.default, _s.width100PC, _s.mb15].join(' ')}>
+              <nav aria-label='Primary' role='navigation' className={[_s._, _s.w100PC, _s.mb15].join(' ')}>
                 <SidebarSectionTitle>{intl.formatMessage(messages.menu)}</SidebarSectionTitle>
                 {
                   menuItems.map((menuItem, i) => {
@@ -223,7 +223,7 @@ class Sidebar extends ImmutablePureComponent {
                   <React.Fragment>
                     <SidebarSectionTitle>
                       <div
-                        className={[_s.displayFlex, _s.alignItemsCenter, _s.flexRow].join(' ')}
+                        className={[_s.displayFlex, _s.aiCenter, _s.flexRow].join(' ')}
                         onMouseEnter={this.handleMouseEnterShortcuts}
                         onMouseLeave={this.handleMouseLeaveShortcuts}
                       >
@@ -265,7 +265,7 @@ class Sidebar extends ImmutablePureComponent {
                 <Button
                   isBlock
                   onClick={this.handleOpenComposeModal}
-                  className={[_s.py15, _s.fs15PX, _s.fontWeightBold].join(' ')}
+                  className={[_s.py15, _s.fs15PX, _s.fw600].join(' ')}
                 >
                   Gab
                 </Button>
diff --git a/app/javascript/gabsocial/components/sidebar_section_item.js b/app/javascript/gabsocial/components/sidebar_section_item.js
index 78fccc99..58c225c8 100644
--- a/app/javascript/gabsocial/components/sidebar_section_item.js
+++ b/app/javascript/gabsocial/components/sidebar_section_item.js
@@ -48,13 +48,13 @@ class SidebarSectionItem extends React.PureComponent {
     const isNotifications = to === '/notifications'
 
     const containerClasses = CX({
-      default: 1,
-      maxWidth100PC: 1,
-      width100PC: 1,
+      _: 1,
+      maxW100PC: 1,
+      w100PC: 1,
       flexRow: 1,
       py5: 1,
       px10: 1,
-      alignItemsCenter: 1,
+      aiCenter: 1,
       radiusSmall: 1,
       border1PX: 1,
       outlineNone: 1,
@@ -65,7 +65,7 @@ class SidebarSectionItem extends React.PureComponent {
     })
 
     const countClasses = CX({
-      default: 1,
+      _: 1,
       text: 1,
       mlAuto: 1,
       fs12PX: 1,
@@ -73,8 +73,8 @@ class SidebarSectionItem extends React.PureComponent {
       mr2: 1,
       lineHeight15: 1,
       ml5: 1,
-      colorSecondary: !isNotifications,
-      colorWhite: isNotifications,
+      cSecondary: !isNotifications,
+      cWhite: isNotifications,
       bgBrand: isNotifications,
       radiusSmall: isNotifications,
     })
@@ -88,12 +88,12 @@ class SidebarSectionItem extends React.PureComponent {
         buttonRef={buttonRef}
         onMouseEnter={() => this.handleOnMouseEnter()}
         onMouseLeave={() => this.handleOnMouseLeave()}
-        className={[_s.default, _s.noUnderline, _s.outlineNone, _s.cursorPointer, _s.width100PC, _s.bgTransparent].join(' ')}
+        className={[_s._, _s.noUnderline, _s.outlineNone, _s.cursorPointer, _s.w100PC, _s.bgTransparent].join(' ')}
       >
         <div className={containerClasses}>
           {
             icon && 
-            <Icon id={icon} className={_s.colorPrimary} size={iconSize} />
+            <Icon id={icon} className={_s.cPrimary} size={iconSize} />
           }
           
           {
@@ -107,10 +107,10 @@ class SidebarSectionItem extends React.PureComponent {
             />
           }
           
-          <div className={[_s.default, _s.flexNormal, _s.px10, _s.textOverflowEllipsis, _s.overflowWrapBreakWord, _s.flexRow, _s.width100PC].join(' ')}>
+          <div className={[_s._, _s.flexNormal, _s.px10, _s.textOverflowEllipsis, _s.overflowWrapBreakWord, _s.flexRow, _s.w100PC].join(' ')}>
             <ResponsiveClassesComponent
-              classNames={[_s.default, _s.fontWeightNormal, _s.fs15PX, _s.text, _s.textOverflowEllipsis, _s.colorPrimary].join(' ')}
-              classNamesSmall={[_s.default, _s.fontWeightNormal, _s.fs13PX, _s.text, _s.textOverflowEllipsis, _s.colorPrimary].join(' ')}
+              classNames={[_s._, _s.fw400, _s.fs15PX, _s.text, _s.textOverflowEllipsis, _s.cPrimary].join(' ')}
+              classNamesSmall={[_s._, _s.fw400, _s.fs13PX, _s.text, _s.textOverflowEllipsis, _s.cPrimary].join(' ')}
             >
               {title}
             </ResponsiveClassesComponent>
diff --git a/app/javascript/gabsocial/components/sidebar_section_title.js b/app/javascript/gabsocial/components/sidebar_section_title.js
index e4d82bb4..bee8a9c7 100644
--- a/app/javascript/gabsocial/components/sidebar_section_title.js
+++ b/app/javascript/gabsocial/components/sidebar_section_title.js
@@ -8,7 +8,7 @@ class SidebarSectionTitle extends React.PureComponent {
     const { children } = this.props
 
     return (
-      <div className={[_s.default, _s.py5, _s.px10, _s.mt10].join(' ')}>
+      <div className={[_s._, _s.py5, _s.px10, _s.mt10].join(' ')}>
         <Text color='tertiary'>
           {children}
         </Text>
diff --git a/app/javascript/gabsocial/components/sidebar_xs.js b/app/javascript/gabsocial/components/sidebar_xs.js
index e302d367..93c7e1ec 100644
--- a/app/javascript/gabsocial/components/sidebar_xs.js
+++ b/app/javascript/gabsocial/components/sidebar_xs.js
@@ -135,7 +135,7 @@ class SidebarXS extends ImmutablePureComponent {
     ]
 
     const containerClasses = CX({
-      default: 1,
+      _: 1,
       posFixed: 1,
       top0: 1,
       left0: 1,
@@ -147,10 +147,10 @@ class SidebarXS extends ImmutablePureComponent {
         
     return (
       <div className={containerClasses}>
-        <div className={[_s.default, _s.posFixed, _s.top0, _s.left0, _s.right0, _s.bgBlackOpaque, _s.bottom0].join(' ')} role='button' onClick={this.handleSidebarClose} />
-        <div className={[_s.defaut, _s.posFixed, _s.left0, _s.top0, _s.bottom0, _s.bgPrimary, _s.saveAreaInsetPT, _s.saveAreaInsetPB, _s.saveAreaInsetPL, _s.minWidth330PX, _s.borderRight1PX, _s.borderColorSecondary, _s.maxWidth80PC].join(' ')}>
+        <div className={[_s._, _s.posFixed, _s.top0, _s.left0, _s.right0, _s.bgBlackOpaque, _s.bottom0].join(' ')} role='button' onClick={this.handleSidebarClose} />
+        <div className={[_s.defaut, _s.posFixed, _s.left0, _s.top0, _s.bottom0, _s.bgPrimary, _s.saveAreaInsetPT, _s.saveAreaInsetPB, _s.saveAreaInsetPL, _s.minW330PX, _s.borderRight1PX, _s.borderColorSecondary, _s.maxW80PC].join(' ')}>
 
-          <div className={[_s.default, _s.flexRow, _s.px15, _s.height53PX, _s.width100PC, _s.borderBottom1PX, _s.borderColorSecondary, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+          <div className={[_s._, _s.flexRow, _s.px15, _s.h53PX, _s.w100PC, _s.borderBottom1PX, _s.borderColorSecondary, _s.aiCenter, _s.jcCenter].join(' ')}>
             <Heading size='h2'>Account Info</Heading>
             <Button
               title='close'
@@ -163,10 +163,10 @@ class SidebarXS extends ImmutablePureComponent {
             />
           </div>
 
-          <div className={[_s.default, _s.width100PC, _s.overflowYScroll, _s.heightCalc53PX].join(' ')}>
+          <div className={[_s._, _s.w100PC, _s.overflowYScroll, _s.calcH53PX].join(' ')}>
 
-            <div className={[_s.default, _s.width100PC, _s.px15, _s.py10].join(' ')}>
-              <div className={[_s.default, _s.mt5].join(' ')}>
+            <div className={[_s._, _s.w100PC, _s.px15, _s.py10].join(' ')}>
+              <div className={[_s._, _s.mt5].join(' ')}>
                 <Link
                   to={`/${acct}`}
                   title={acct}
@@ -175,11 +175,11 @@ class SidebarXS extends ImmutablePureComponent {
                   <Avatar account={account} size={60} />
                 </Link>
               </div>
-              <div className={[_s.default, _s.my10, _s.width100PC].join(' ')}>
+              <div className={[_s._, _s.my10, _s.w100PC].join(' ')}>
                 <DisplayName account={account} isMultiline />
               </div>
 
-              <div className={[_s.default, _s.flexRow, _s.flexWrap].join(' ')}>
+              <div className={[_s._, _s.flexRow, _s.flexWrap].join(' ')}>
                 <NavLink
                   to={`/${acct}/followers`}
                   onClick={this.handleSidebarClose}
@@ -202,11 +202,11 @@ class SidebarXS extends ImmutablePureComponent {
 
             </div>
 
-            <div className={[_s.default, _s.my10, _s.px15].join(' ')}>
+            <div className={[_s._, _s.my10, _s.px15].join(' ')}>
               <WrappedBundle component={ProgressPanel} />
             </div>
 
-            <div className={[_s.default, _s.mb15, _s.boxShadowNone].join(' ')}>
+            <div className={[_s._, _s.mb15, _s.boxShadowNone].join(' ')}>
               <List
                 items={mainItems}
                 size='large'
diff --git a/app/javascript/gabsocial/components/sort_block.js b/app/javascript/gabsocial/components/sort_block.js
index b7c47f80..85b5908f 100644
--- a/app/javascript/gabsocial/components/sort_block.js
+++ b/app/javascript/gabsocial/components/sort_block.js
@@ -32,7 +32,7 @@ class SortBlock extends React.PureComponent {
     } = this.props
 
     return (
-      <div className={[_s.default, _s.px15, _s.py5, _s.mb5, _s.flexRow].join(' ')}>
+      <div className={[_s._, _s.px15, _s.py5, _s.mb5, _s.flexRow].join(' ')}>
         <Text color='secondary' size='small'>
           {intl.formatMessage(messages.sortBy)}
         </Text>
@@ -40,20 +40,20 @@ class SortBlock extends React.PureComponent {
           isText
           backgroundColor='none'
           color='secondary'
-          className={[_s.ml5, _s.flexRow, _s.alignItemsCenter].join(' ')}
+          className={[_s.ml5, _s.flexRow, _s.aiCenter].join(' ')}
           buttonRef={this.setValueBtnRef}
           onClick={this.handleOnClickValue}
         >
           <Text color='inherit' weight='medium' size='small'>
             {value}
           </Text>
-          <Icon id='caret-down' size='6px' className={[_s.colorSecondary, _s.ml5].join(' ')} />
+          <Icon id='caret-down' size='6px' className={[_s.cSecondary, _s.ml5].join(' ')} />
         </Button>
 
         {
           !!subValue &&
           <React.Fragment>
-            <div className={[_s.default, _s.px5].join(' ')}>
+            <div className={[_s._, _s.px5].join(' ')}>
               <DotTextSeperator />
             </div>
 
@@ -61,14 +61,14 @@ class SortBlock extends React.PureComponent {
               isText
               backgroundColor='none'
               color='secondary'
-              className={[_s.ml5, _s.flexRow, _s.alignItemsCenter].join(' ')}
+              className={[_s.ml5, _s.flexRow, _s.aiCenter].join(' ')}
               buttonRef={this.setSubValueBtnRef}
               onClick={this.handleOnClickSubValue}
             >
               <Text color='inherit' weight='medium' size='small'>
                 {subValue}
               </Text>
-              <Icon id='caret-down' size='6px' className={[_s.colorSecondary, _s.ml5].join(' ')} />
+              <Icon id='caret-down' size='6px' className={[_s.cSecondary, _s.ml5].join(' ')} />
             </Button>
           </React.Fragment>
         }
diff --git a/app/javascript/gabsocial/components/status.js b/app/javascript/gabsocial/components/status.js
index 29b44ee0..52cf9f36 100644
--- a/app/javascript/gabsocial/components/status.js
+++ b/app/javascript/gabsocial/components/status.js
@@ -416,14 +416,14 @@ class Status extends ImmutablePureComponent {
     })
 
     const containerClasses = CX({
-      default: 1,
+      _: 1,
       radiusSmall: !isChild,
       bgPrimary: !isChild,
       boxShadowBlock: !isChild,
     })
 
     const containerClassesXS = CX({
-      default: 1,
+      _: 1,
       bgPrimary: !isChild,
       boxShadowBlock: !isChild,
       borderTop1PX: !isChild,
@@ -431,7 +431,7 @@ class Status extends ImmutablePureComponent {
     })
 
     const innerContainerClasses = CX({
-      default: 1,
+      _: 1,
       overflowHidden: 1,
       radiusSmall: isChild,
       borderColorSecondary: isChild,
@@ -465,7 +465,7 @@ class Status extends ImmutablePureComponent {
             classNamesXS={containerClassesXS}
           >
             <div
-              className={[_s.default, _s.outlineNone].join(' ')}
+              className={[_s._, _s.outlineNone].join(' ')}
               tabIndex={this.props.isMuted ? null : 0}
               data-featured={isFeatured ? 'true' : null}
               aria-label={textForScreenReader(intl, status, rebloggedByText)}
@@ -488,7 +488,7 @@ class Status extends ImmutablePureComponent {
                     reduced={isChild}
                   />
 
-                  <div className={_s.default}>
+                  <div className={_s._}>
                     <StatusContent
                       status={status}
                       reblogContent={reblogContent}
@@ -514,14 +514,14 @@ class Status extends ImmutablePureComponent {
 
                   {
                     (!!status.get('quote') || status.get('has_quote')) && !isChild &&
-                    <div className={[_s.default, _s.mt10, _s.px10].join(' ')}>
+                    <div className={[_s._, _s.mt10, _s.px10].join(' ')}>
                       {
                         !!status.get('quoted_status') &&
                         <Status status={status.get('quoted_status')} isChild intl={intl} />
                       }
                       {
                         !status.get('quoted_status') &&
-                        <div className={[_s.default, _s.border1PX, _s.bgSubtle, _s.radiusSmall, _s.py15, _s.px15, _s.borderColorSecondary].join(' ')}>
+                        <div className={[_s._, _s.border1PX, _s.bgSubtle, _s.radiusSmall, _s.py15, _s.px15, _s.borderColorSecondary].join(' ')}>
                           <Text color='tertiary' size='medium'>The quoted gab is unavailable.</Text>
                         </div>
                       }
@@ -545,8 +545,8 @@ class Status extends ImmutablePureComponent {
                   {
                     !isChild && !!me &&
                     <ResponsiveClassesComponent
-                      classNames={[_s.default, _s.borderTop1PX, _s.borderColorSecondary, _s.pt10, _s.px15, _s.mb10].join(' ')}
-                      classNamesXS={[_s.default, _s.borderTop1PX, _s.borderColorSecondary, _s.pt10, _s.px10, _s.mb10].join(' ')}
+                      classNames={[_s._, _s.borderTop1PX, _s.borderColorSecondary, _s.pt10, _s.px15, _s.mb10].join(' ')}
+                      classNamesXS={[_s._, _s.borderTop1PX, _s.borderColorSecondary, _s.pt10, _s.px10, _s.mb10].join(' ')}
                     >
                       <ComposeFormContainer replyToId={status.get('id')} shouldCondense />
                     </ResponsiveClassesComponent>
@@ -555,7 +555,7 @@ class Status extends ImmutablePureComponent {
                   {
                     status.get('replies_count') > 0 && !isChild && !isNotification && !commentsLimited &&
                     <React.Fragment>
-                      <div className={[_s.default, _s.mr10, _s.ml10, _s.mb10, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')} />
+                      <div className={[_s._, _s.mr10, _s.ml10, _s.mb10, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')} />
 
                       <SortBlock
                         value={sortByTitle}
diff --git a/app/javascript/gabsocial/components/status_action_bar.js b/app/javascript/gabsocial/components/status_action_bar.js
index d02c77c2..bf0d8788 100644
--- a/app/javascript/gabsocial/components/status_action_bar.js
+++ b/app/javascript/gabsocial/components/status_action_bar.js
@@ -61,27 +61,27 @@ class StatusActionBar extends ImmutablePureComponent {
     const myStatus = status.getIn(['account', 'id']) === me
 
     const containerClasses = CX({
-      default: 1,
+      _: 1,
       px10: 1,
       mt10: !shouldCondense,
       mt5: shouldCondense,
     })
 
     const innerContainerClasses = CX({
-      default: 1,
+      _: 1,
       py2: 1,
       flexRow: 1,
-      width100PC: 1,
+      w100PC: 1,
       borderTop1PX: !shouldCondense,
       borderColorSecondary: !shouldCondense,
       mt5: hasInteractions,
     })
 
     const likeBtnClasses = CX({
-      default: 1,
+      _: 1,
       text: 1,
       cursorPointer: myStatus,
-      fontWeightNormal: 1,
+      fw400: 1,
       noUnderline: 1,
       underline_onHover: myStatus,
       bgTransparent: 1,
@@ -90,10 +90,10 @@ class StatusActionBar extends ImmutablePureComponent {
     })
 
     const interactionBtnClasses = CX({
-      default: 1,
+      _: 1,
       text: 1,
       cursorPointer: 1,
-      fontWeightNormal: 1,
+      fw400: 1,
       noUnderline: 1,
       underline_onHover: 1,
       bgTransparent: 1,
@@ -105,7 +105,7 @@ class StatusActionBar extends ImmutablePureComponent {
       <div className={containerClasses}>
         {
           hasInteractions && 
-          <div className={[_s.default, _s.flexRow, _s.alignItemsEnd, _s.px5].join(' ')}>
+          <div className={[_s._, _s.flexRow, _s.aiEnd, _s.px5].join(' ')}>
             {
               favoriteCount > 0 &&
               <button
@@ -146,7 +146,7 @@ class StatusActionBar extends ImmutablePureComponent {
           </div>
         }
         <div className={innerContainerClasses}>
-          <div className={[_s.default, _s.flexRow, _s.py2, _s.width100PC].join(' ')}>
+          <div className={[_s._, _s.flexRow, _s.py2, _s.w100PC].join(' ')}>
             <StatusActionBarItem
               title={intl.formatMessage(messages.like)}
               icon={!!status.get('favourited') ? 'liked' : 'like'}
diff --git a/app/javascript/gabsocial/components/status_action_bar_item.js b/app/javascript/gabsocial/components/status_action_bar_item.js
index ba392461..172aea88 100644
--- a/app/javascript/gabsocial/components/status_action_bar_item.js
+++ b/app/javascript/gabsocial/components/status_action_bar_item.js
@@ -22,14 +22,14 @@ class StatusActionBarItem extends React.PureComponent {
     } = this.props
 
     const btnClasses = CX({
-      justifyContentCenter: 1,
-      alignItemsCenter: 1,
+      jcCenter: 1,
+      aiCenter: 1,
       px10: 1,
       bgSubtle_onHover: !disabled,
     })
 
     const iconClasses = CX({
-      default: 1,
+      _: 1,
       inheritFill: 1,
       mr10: !!title,
     })
@@ -38,7 +38,7 @@ class StatusActionBarItem extends React.PureComponent {
     const weight = active ? 'bold' : 'medium'
 
     return (
-      <div className={[_s.default, _s.px5, _s.flexNormal].join(' ')}>
+      <div className={[_s._, _s.px5, _s.flexNormal].join(' ')}>
         <Button
           isBlock
           radiusSmall
diff --git a/app/javascript/gabsocial/components/status_card.js b/app/javascript/gabsocial/components/status_card.js
index e89bc972..4f9bcf4c 100644
--- a/app/javascript/gabsocial/components/status_card.js
+++ b/app/javascript/gabsocial/components/status_card.js
@@ -117,7 +117,7 @@ class StatusCard extends ImmutablePureComponent {
     return (
       <div
         ref={this.setRef}
-        className={[_s.default, _s.bgTertiary, _s.posAbs, _s.top0, _s.right0, _s.bottom0, _s.left0, _s.statusCardVideo].join(' ')}
+        className={[_s._, _s.bgTertiary, _s.posAbs, _s.top0, _s.right0, _s.bottom0, _s.left0, _s.statusCardVideo].join(' ')}
         dangerouslySetInnerHTML={content}
       />
     )
@@ -139,7 +139,7 @@ class StatusCard extends ImmutablePureComponent {
     const title = interactive ?
       (
         <a
-          className={[_s.default, _s.displayFlex, _s.text, _s.noUnderline, _s.overflowWrapBreakWord, _s.colorPrimary, _s.fs15PX, _s.fontWeightMedium].join(' ')}
+          className={[_s._, _s.displayFlex, _s.text, _s.noUnderline, _s.overflowWrapBreakWord, _s.cPrimary, _s.fs15PX, _s.fw500].join(' ')}
           href={card.get('url')}
           title={cardTitle}
           rel={DEFAULT_REL}
@@ -149,19 +149,19 @@ class StatusCard extends ImmutablePureComponent {
         </a>
       )
       : (
-        <span className={[_s.default, _s.displayFlex, _s.text, _s.overflowWrapBreakWord, _s.colorPrimary, _s.fs15PX, _s.fontWeightMedium].join(' ')}>
+        <span className={[_s._, _s.displayFlex, _s.text, _s.overflowWrapBreakWord, _s.cPrimary, _s.fs15PX, _s.fw500].join(' ')}>
           {cardTitle}
         </span>
       )
 
     const description = (
-      <div className={[_s.default, _s.flexNormal, _s.px10, _s.py10, _s.borderColorSecondary, _s.borderLeft1PX].join(' ')}>
+      <div className={[_s._, _s.flexNormal, _s.px10, _s.py10, _s.borderColorSecondary, _s.borderLeft1PX].join(' ')}>
         {title}
-        <p className={[_s.default, _s.displayFlex, _s.text, _s.mt5, _s.mb5, _s.overflowWrapBreakWord, _s.colorSecondary, _s.fs13PX, _s.fontWeightNormal].join(' ')}>
+        <p className={[_s._, _s.displayFlex, _s.text, _s.mt5, _s.mb5, _s.overflowWrapBreakWord, _s.cSecondary, _s.fs13PX, _s.fw400].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.fs13PX].join(' ')}>
-          <Icon id='link' size='10px' className={[_s.colorSecondary, _s.mr5].join(' ')} fixedWidth />
+        <span className={[_s._, _s.mtAuto, _s.flexRow, _s.aiCenter, _s.cSecondary, _s.text, _s.displayFlex, _s.textOverflowEllipsis, _s.fs13PX].join(' ')}>
+          <Icon id='link' size='10px' className={[_s.cSecondary, _s.mr5].join(' ')} fixedWidth />
           {provider}
         </span>
       </div>
@@ -170,15 +170,15 @@ class StatusCard extends ImmutablePureComponent {
     // : todo : use <Image />
     let embed = ''
     const thumbnail = interactive ?
-      <img loading='lazy' alt={''} src={cardImg} className={[_s.default, _s.objectFitCover, _s.posAbs, _s.width100PC, _s.height100PC, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')} />
+      <img loading='lazy' alt={''} src={cardImg} className={[_s._, _s.objectFitCover, _s.posAbs, _s.w100PC, _s.h100PC, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')} />
       :
       (
         <ResponsiveClassesComponent
-          classNames={[_s.default, _s.height220PX, _s.width330PX].join(' ')}
-          classNamesSmall={[_s.default, _s.height260PX, _s.width100PC].join(' ')}
-          classNamesXS={[_s.default, _s.height200PX, _s.width100PC].join(' ')}
+          classNames={[_s._, _s.h220PX, _s.w330PX].join(' ')}
+          classNamesSmall={[_s._, _s.h260PX, _s.w100PC].join(' ')}
+          classNamesXS={[_s._, _s.h200PX, _s.w100PC].join(' ')}
         >
-          <img loading='lazy' alt={''} src={cardImg} className={[_s.default, _s.objectFitCover, _s.width100PC, _s.height100PC].join(' ')} />
+          <img loading='lazy' alt={''} src={cardImg} className={[_s._, _s.objectFitCover, _s.w100PC, _s.h100PC].join(' ')} />
         </ResponsiveClassesComponent>
       )
 
@@ -194,21 +194,21 @@ class StatusCard extends ImmutablePureComponent {
       }
 
       return (
-        <div className={[_s.default, _s.width100PC, _s.px10].join(' ')}>
-          <div className={[_s.default, _s.overflowHidden, _s.width100PC, _s.borderColorSecondary, _s.border1PX, _s.radiusSmall].join(' ')}>
+        <div className={[_s._, _s.w100PC, _s.px10].join(' ')}>
+          <div className={[_s._, _s.overflowHidden, _s.w100PC, _s.borderColorSecondary, _s.border1PX, _s.radiusSmall].join(' ')}>
             {
               !isReduced &&
-              <div className={[_s.default, _s.width100PC].join(' ')}>
-                <div className={[_s.default, _s.width100PC, _s.pt5625PC].join(' ')}>
+              <div className={[_s._, _s.w100PC].join(' ')}>
+                <div className={[_s._, _s.w100PC, _s.pt5625PC].join(' ')}>
                   {!!embed && embed}
                   {!embed && thumbnail}
                   {!embed &&
-                    <div className={[_s.default, _s.posAbs, _s.top0, _s.right0, _s.left0, _s.bottom0, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+                    <div className={[_s._, _s.posAbs, _s.top0, _s.right0, _s.left0, _s.bottom0, _s.aiCenter, _s.jcCenter].join(' ')}>
                       <button
-                        className={[_s.default, _s.cursorPointer, _s.bgBlackOpaque, _s.radiusSmall, _s.py15, _s.px15].join(' ')}
+                        className={[_s._, _s.cursorPointer, _s.bgBlackOpaque, _s.radiusSmall, _s.py15, _s.px15].join(' ')}
                         onClick={this.handleEmbedClick}
                       >
-                        <Icon id={iconVariant} size='22px' className={[_s.colorWhite].join(' ')} />
+                        <Icon id={iconVariant} size='22px' className={[_s.cWhite].join(' ')} />
                       </button>
                     </div>
                   }
@@ -221,30 +221,30 @@ class StatusCard extends ImmutablePureComponent {
       )
     } else if (cardImg) {
       embed = (
-        <div className={[_s.default].join(' ')}>
+        <div className={[_s._].join(' ')}>
           {thumbnail}
         </div>
       )
     } else {
       embed = (
-        <div className={[_s.default, _s.py15, _s.px15, _s.width72PX, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
-          <Icon id='website' size='22px' className={_s.colorSecondary} />
+        <div className={[_s._, _s.py15, _s.px15, _s.w72PX, _s.aiCenter, _s.jcCenter].join(' ')}>
+          <Icon id='website' size='22px' className={_s.cSecondary} />
         </div>
       )
     }
 
     return (
-      <div className={[_s.default, _s.width100PC, _s.px10].join(' ')}>
+      <div className={[_s._, _s.w100PC, _s.px10].join(' ')}>
         <a
           href={card.get('url')}
           rel={DEFAULT_REL}
           ref={this.setRef}
           target='_blank'
-          className={[_s.default, _s.cursorPointer, _s.overflowHidden, _s.noUnderline, _s.width100PC, _s.bgSubtle_onHover, _s.borderColorSecondary, _s.border1PX, _s.radiusSmall].join(' ')}
+          className={[_s._, _s.cursorPointer, _s.overflowHidden, _s.noUnderline, _s.w100PC, _s.bgSubtle_onHover, _s.borderColorSecondary, _s.border1PX, _s.radiusSmall].join(' ')}
         >
           <ResponsiveClassesComponent
-            classNames={[_s.default, _s.flexRow, _s.width100PC].join(' ')}
-            classNamesSmall={!cardImg ? undefined : [_s.default, _s.width100PC].join(' ')}
+            classNames={[_s._, _s.flexRow, _s.w100PC].join(' ')}
+            classNamesSmall={!cardImg ? undefined : [_s._, _s.w100PC].join(' ')}
           >
             {!isReduced && embed}
             {description}
diff --git a/app/javascript/gabsocial/components/status_check_box.js b/app/javascript/gabsocial/components/status_check_box.js
index 4a6e0664..cc3b90c7 100644
--- a/app/javascript/gabsocial/components/status_check_box.js
+++ b/app/javascript/gabsocial/components/status_check_box.js
@@ -53,13 +53,13 @@ class StatusCheckBox extends ImmutablePureComponent {
     }
 
     return (
-      <div className={[_s.default, _s.flexRow].join(' ')}>
-        <div className={[_s.default].join(' ')}>
+      <div className={[_s._, _s.flexRow].join(' ')}>
+        <div className={[_s._].join(' ')}>
           <StatusContent status={status} />
           {media}
         </div>
 
-        <div className={[_s.default, _s.mlAuto].join(' ')}>
+        <div className={[_s._, _s.mlAuto].join(' ')}>
           <Switch checked={checked} onChange={onToggle} disabled={disabled} />
         </div>
       </div>
diff --git a/app/javascript/gabsocial/components/status_content.js b/app/javascript/gabsocial/components/status_content.js
index 3b808fb5..f51b65d1 100644
--- a/app/javascript/gabsocial/components/status_content.js
+++ b/app/javascript/gabsocial/components/status_content.js
@@ -44,7 +44,7 @@ class StatusContent extends ImmutablePureComponent {
         continue
       }
       link.classList.add('linked')
-      link.classList.add(_s.text, _s.colorBrand, _s.cursorPointer, _s.inherit)
+      link.classList.add(_s.text, _s.cBrand, _s.cursorPointer, _s.inherit)
 
       const mention = this.props.status.get('mentions').find(item => link.href === `${item.get('url')}`)
 
@@ -183,7 +183,7 @@ class StatusContent extends ImmutablePureComponent {
 
       if (hidden) {
         mentionsPlaceholder = (
-          <div className={[_s.statusContent, _s.default, _s.alignItemsStart, _s.flexRow, _s.flexWrap].join(' ')}>
+          <div className={[_s.statusContent, _s._, _s.aiStart, _s.flexRow, _s.flexWrap].join(' ')}>
             {mentionLinks}
           </div>
         )
@@ -192,7 +192,7 @@ class StatusContent extends ImmutablePureComponent {
       const toggleText = intl.formatMessage(hidden ? messages.show : messages.hide)
 
       const spoilerContainerClasses = cx({
-        default: 1,
+        _: 1,
         py10: 1,
         borderBottom1PX: !hidden,
         borderColorSecondary: !hidden,
@@ -224,8 +224,8 @@ class StatusContent extends ImmutablePureComponent {
         >
 
           <div className={spoilerContainerClasses}>
-            <div className={[_s.default, _s.flexRow, _s.mr5].join(' ')}>
-              <Icon id='warning' size='14px' className={[_s.colorPrimary, _s.mt2, _s.mr5].join(' ')}/>
+            <div className={[_s._, _s.flexRow, _s.mr5].join(' ')}>
+              <Icon id='warning' size='14px' className={[_s.cPrimary, _s.mt2, _s.mr5].join(' ')}/>
               <div
                 className={[_s.statusContent, _s.outlineNone].join(' ')}
                 dangerouslySetInnerHTML={spoilerContent}
@@ -233,7 +233,7 @@ class StatusContent extends ImmutablePureComponent {
               />
             </div>
 
-            <div className={[_s.default, _s.mt10, _s.alignItemsStart].join(' ')}>
+            <div className={[_s._, _s.mt10, _s.aiStart].join(' ')}>
               <Button
                 isNarrow
                 radiusSmall
@@ -271,8 +271,8 @@ class StatusContent extends ImmutablePureComponent {
       const statusContentClasses = cx({
         statusContent: 1,
         outlineNone: 1,
-        height215PX: collapsed & !isComment,
-        height122PX: collapsed && isComment,
+        h215PX: collapsed & !isComment,
+        h122PX: collapsed && isComment,
         overflowHidden: collapsed,
         mt5: isComment,
       })
diff --git a/app/javascript/gabsocial/components/status_header.js b/app/javascript/gabsocial/components/status_header.js
index 042f3654..b52d88dd 100644
--- a/app/javascript/gabsocial/components/status_header.js
+++ b/app/javascript/gabsocial/components/status_header.js
@@ -44,7 +44,7 @@ class StatusHeader extends ImmutablePureComponent {
     const statusUrl = `/${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`
 
     const containerClasses = cx({
-      default: 1,
+      _: 1,
       px15: 1,
       py10: !reduced,
       pb10: reduced,
@@ -76,24 +76,24 @@ class StatusHeader extends ImmutablePureComponent {
 
     return (
       <div className={containerClasses}>
-        <div className={[_s.default, _s.flexRow, _s.mt5].join(' ')}>
+        <div className={[_s._, _s.flexRow, _s.mt5].join(' ')}>
 
           {
             !reduced &&
             <NavLink
               to={`/${status.getIn(['account', 'acct'])}`}
               title={status.getIn(['account', 'acct'])}
-              className={[_s.default, _s.mr10].join(' ')}
+              className={[_s._, _s.mr10].join(' ')}
             >
               <Avatar account={status.get('account')} size={avatarSize} />
             </NavLink>
           }
 
-          <div className={[_s.default, _s.alignItemsStart, _s.flexGrow1, _s.mt5].join(' ')}>
+          <div className={[_s._, _s.aiStart, _s.flexGrow1, _s.mt5].join(' ')}>
 
-            <div className={[_s.default, _s.flexRow, _s.width100PC, _s.alignItemsStart].join(' ')}>
+            <div className={[_s._, _s.flexRow, _s.w100PC, _s.aiStart].join(' ')}>
               <NavLink
-                className={[_s.default, _s.flexRow, _s.alignItemsStart, _s.noUnderline].join(' ')}
+                className={[_s._, _s.flexRow, _s.aiStart, _s.noUnderline].join(' ')}
                 to={`/${status.getIn(['account', 'acct'])}`}
                 title={status.getIn(['account', 'acct'])}
               >
@@ -108,7 +108,7 @@ class StatusHeader extends ImmutablePureComponent {
                   color='none'
                   icon='ellipsis'
                   iconSize='20px'
-                  iconClassName={_s.colorSecondary}
+                  iconClassName={_s.cSecondary}
                   className={_s.mlAuto}
                   onClick={this.handleOpenStatusOptionsPopover}
                   buttonRef={this.setStatusOptionsButton}
@@ -116,7 +116,7 @@ class StatusHeader extends ImmutablePureComponent {
               }
             </div>
 
-            <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.lineHeight15].join(' ')}>
+            <div className={[_s._, _s.flexRow, _s.aiCenter, _s.lineHeight15].join(' ')}>
               <Button
                 isText
                 underlineOnHover
@@ -131,8 +131,8 @@ class StatusHeader extends ImmutablePureComponent {
 
               <DotTextSeperator />
               
-              <span title={visibilityText} className={[_s.default, _s.displayInline, _s.ml5].join(' ')}>
-                <Icon id={visibilityIcon} size='12px' className={[_s.default, _s.colorSecondary].join(' ')} />
+              <span title={visibilityText} className={[_s._, _s.displayInline, _s.ml5].join(' ')}>
+                <Icon id={visibilityIcon} size='12px' className={[_s._, _s.cSecondary].join(' ')} />
               </span>
 
               {
@@ -141,8 +141,8 @@ class StatusHeader extends ImmutablePureComponent {
                   <DotTextSeperator />
                   <span title={intl.formatMessage(messages.expirationMessage, {
                     time: timeUntilExpiration,
-                  })} className={[_s.default, _s.displayInline, _s.ml5].join(' ')}>
-                    <Icon id='stopwatch' size='13px' className={[_s.default, _s.colorSecondary].join(' ')} />
+                  })} className={[_s._, _s.displayInline, _s.ml5].join(' ')}>
+                    <Icon id='stopwatch' size='13px' className={[_s._, _s.cSecondary].join(' ')} />
                   </span>
                 </React.Fragment>
               }
diff --git a/app/javascript/gabsocial/components/status_prepend.js b/app/javascript/gabsocial/components/status_prepend.js
index 6d5e8866..f8ad0c8d 100644
--- a/app/javascript/gabsocial/components/status_prepend.js
+++ b/app/javascript/gabsocial/components/status_prepend.js
@@ -31,12 +31,12 @@ class StatusPrepend extends ImmutablePureComponent {
     else if (isComment) iconId = 'comment'
 
     return (
-      <div className={[_s.default, _s.width100PC, _s.alignItemsStart, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
-        <div className={[_s.default, _s.width100PC, _s.flexRow, _s.alignItemsCenter, _s.py5, _s.px15].join(' ')}>
-          <Icon id={iconId} size='12px' className={[_s.colorSecondary, _s.mr5].join(' ')} />
+      <div className={[_s._, _s.w100PC, _s.aiStart, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+        <div className={[_s._, _s.w100PC, _s.flexRow, _s.aiCenter, _s.py5, _s.px15].join(' ')}>
+          <Icon id={iconId} size='12px' className={[_s.cSecondary, _s.mr5].join(' ')} />
           {
             isRepost && !isComment &&
-            <div className={[_s.default, _s.flexRow].join(' ')}>
+            <div className={[_s._, _s.flexRow].join(' ')}>
               <Text size='small' color='secondary'>
                 <FormattedMessage
                   id='status.reposted_by'
diff --git a/app/javascript/gabsocial/components/switch.js b/app/javascript/gabsocial/components/switch.js
index 47a990c5..48895c2d 100644
--- a/app/javascript/gabsocial/components/switch.js
+++ b/app/javascript/gabsocial/components/switch.js
@@ -19,9 +19,9 @@ class Switch extends React.PureComponent {
 
     const checkboxContainerClasses = CX({
       cursorPointer: 1,
-      default: 1,
-      height24PX: 1,
-      width50PX: 1,
+      _: 1,
+      h24PX: 1,
+      w50PX: 1,
       circle: 1,
       border1PX: 1,
       mlAuto: 1,
@@ -31,10 +31,10 @@ class Switch extends React.PureComponent {
     })
 
     const checkboxLabelClasses = CX({
-      default: 1,
+      _: 1,
       m1PX: 1,
-      height20PX: 1,
-      width20PX: 1,
+      h20PX: 1,
+      w20PX: 1,
       circle: 1,
       posAbs: 1,
       bgSecondary: !checked,
@@ -44,7 +44,7 @@ class Switch extends React.PureComponent {
     })
 
     return (
-      <div className={[_s.default, _s.flexRow, _s.py5, _s.alignItemsCenter].join(' ')}>
+      <div className={[_s._, _s.flexRow, _s.py5, _s.aiCenter].join(' ')}>
         <Text {...labelProps} className={_s.mr10}>
           {label}
         </Text>
diff --git a/app/javascript/gabsocial/components/tab_bar.js b/app/javascript/gabsocial/components/tab_bar.js
index 705ae147..3b08ab12 100644
--- a/app/javascript/gabsocial/components/tab_bar.js
+++ b/app/javascript/gabsocial/components/tab_bar.js
@@ -15,8 +15,8 @@ class TabBar extends React.PureComponent {
 
     return (
       <ResponsiveClassesComponent
-        classNames={[_s.default, _s.height53PX, _s.px5, _s.flexRow, _s.overflowXScroll, _s.noScrollbar].join(' ')}
-        classNamesXS={[_s.default, _s.height40PX, _s.px5, _s.flexRow].join(' ')}
+        classNames={[_s._, _s.h53PX, _s.px5, _s.flexRow, _s.overflowXScroll, _s.noScrollbar].join(' ')}
+        classNamesXS={[_s._, _s.h40PX, _s.px5, _s.flexRow].join(' ')}
       >
         {
           // Check for if tabs exist or not.
diff --git a/app/javascript/gabsocial/components/tab_bar_item.js b/app/javascript/gabsocial/components/tab_bar_item.js
index 503efa02..ed16e7aa 100644
--- a/app/javascript/gabsocial/components/tab_bar_item.js
+++ b/app/javascript/gabsocial/components/tab_bar_item.js
@@ -55,13 +55,13 @@ class TabBarItem extends React.PureComponent {
     const active = isActive || (to === location.pathname && !location.search) || isCurrent
 
     const containerClasses = CX({
-      default: 1,
-      height100PC: 1,
+      _: 1,
+      h100PC: 1,
       noUnderline: 1,
       text: 1,
       displayFlex: 1,
-      alignItemsCenter: 1,
-      justifyContentCenter: 1,
+      aiCenter: 1,
+      jcCenter: 1,
       borderBottom2PX: 1,
       py5: 1,
       outlineNone: 1,
@@ -74,10 +74,10 @@ class TabBarItem extends React.PureComponent {
     })
 
     const textParentClasses = CX({
-      default: 1,
-      height100PC: 1,
-      alignItemsCenter: 1,
-      justifyContentCenter: 1,
+      _: 1,
+      h100PC: 1,
+      aiCenter: 1,
+      jcCenter: 1,
       radiusSmall: 1,
       px10: !isLarge,
       px15: isLarge,
diff --git a/app/javascript/gabsocial/components/text.js b/app/javascript/gabsocial/components/text.js
index 1863a539..c8f4e503 100644
--- a/app/javascript/gabsocial/components/text.js
+++ b/app/javascript/gabsocial/components/text.js
@@ -71,18 +71,18 @@ class Text extends React.PureComponent {
 
     // Style the component according to props
     const classes = cx(className, {
-      default: 1,
+      _: 1,
       text: 1,
 
       radiusSmall: isBadge,
       lineHeight15: isBadge,
       px5: isBadge,
 
-      colorPrimary: color === COLORS.primary,
-      colorSecondary: color === COLORS.secondary,
-      colorTertiary: color === COLORS.tertiary,
-      colorBrand: color === COLORS.brand,
-      colorWhite: color === COLORS.white,
+      cPrimary: color === COLORS.primary,
+      cSecondary: color === COLORS.secondary,
+      cTertiary: color === COLORS.tertiary,
+      cBrand: color === COLORS.brand,
+      cWhite: color === COLORS.white,
       inherit: color === COLORS.inherit,
       
       fs24PX: size === SIZES.extraExtraLarge,
@@ -93,10 +93,10 @@ class Text extends React.PureComponent {
       fs13PX: size === SIZES.small,
       fs12PX: size === SIZES.extraSmall,
 
-      fontWeightNormal: weight === WEIGHTS.normal,
-      fontWeightMedium: weight === WEIGHTS.medium,
-      fontWeightBold: weight === WEIGHTS.bold,
-      fontWeightExtraBold: weight === WEIGHTS.extraBold,
+      fw400: weight === WEIGHTS.normal,
+      fw500: weight === WEIGHTS.medium,
+      fw600: weight === WEIGHTS.bold,
+      fw800: weight === WEIGHTS.extraBold,
 
       textAlignLeft: align === ALIGNMENTS.left,
       textAlignCenter: align === ALIGNMENTS.center,
diff --git a/app/javascript/gabsocial/components/textarea.js b/app/javascript/gabsocial/components/textarea.js
index 98b4267e..5e014f55 100644
--- a/app/javascript/gabsocial/components/textarea.js
+++ b/app/javascript/gabsocial/components/textarea.js
@@ -23,7 +23,7 @@ class Textarea extends React.PureComponent {
     } = this.props
 
     const inputClasses = cx({
-      default: 1,
+      _: 1,
       text: 1,
       outlineNone: 1,
       lineHeight125: 1,
@@ -32,9 +32,9 @@ class Textarea extends React.PureComponent {
       bgTransparent: 1,
       fs15PX: 1,
       flexGrow1: 1,
-      heightMax100VH: 1,
+      maxH100VH: 1,
       resizeVertical: 1,
-      colorPrimary: 1,
+      cPrimary: 1,
       px5: !!prependIcon,
       pl15: !prependIcon,
     })
@@ -43,13 +43,13 @@ class Textarea extends React.PureComponent {
       <div>
         {
           !!title &&
-          <div className={[_s.default, _s.mb10, _s.pl15].join(' ')}>
+          <div className={[_s._, _s.mb10, _s.pl15].join(' ')}>
             <Text size='small' weight='medium' color='secondary'>
               {title}
             </Text>
           </div>
         }
-        <div className={[_s.default, _s.bgPrimary, _s.border1PX, _s.borderColorSecondary, _s.flexRow, _s.radiusSmall, _s.alignItemsCenter].join(' ')}>
+        <div className={[_s._, _s.bgPrimary, _s.border1PX, _s.borderColorSecondary, _s.flexRow, _s.radiusSmall, _s.aiCenter].join(' ')}>
           <textarea
             className={inputClasses}
             type='text'
diff --git a/app/javascript/gabsocial/components/timeline_compose_block.js b/app/javascript/gabsocial/components/timeline_compose_block.js
index 2d67213e..18788c04 100644
--- a/app/javascript/gabsocial/components/timeline_compose_block.js
+++ b/app/javascript/gabsocial/components/timeline_compose_block.js
@@ -25,8 +25,8 @@ class TimelineComposeBlock extends ImmutablePureComponent {
 
     if (modal) {
       return (
-        <section className={_s.default}>
-          <div className={[_s.default, _s.flexRow].join(' ')}>
+        <section className={_s._}>
+          <div className={[_s._, _s.flexRow].join(' ')}>
             <ComposeFormContainer {...rest} modal={modal} />
           </div>
         </section>
@@ -34,13 +34,13 @@ class TimelineComposeBlock extends ImmutablePureComponent {
     }
 
     return (
-      <section className={[_s.default, _s.mb15].join(' ')}>
+      <section className={[_s._, _s.mb15].join(' ')}>
         <ResponsiveClassesComponent
-          classNames={[_s.default, _s.boxShadowBlock, _s.bgPrimary, _s.overflowHidden, _s.radiusSmall].join(' ')}
-          classNamesXS={[_s.default, _s.boxShadowBlock, _s.bgPrimary, _s.overflowHidden].join(' ')}
+          classNames={[_s._, _s.boxShadowBlock, _s.bgPrimary, _s.overflowHidden, _s.radiusSmall].join(' ')}
+          classNamesXS={[_s._, _s.boxShadowBlock, _s.bgPrimary, _s.overflowHidden].join(' ')}
         >
           <Responsive min={BREAKPOINT_EXTRA_SMALL}>
-            <div className={[_s.default, _s.bgSubtle, _s.borderTop1PX, _s.borderBottom1PX, _s.borderColorSecondary, _s.px15, _s.py2, _s.alignItemsCenter, _s.flexRow].join(' ')}>
+            <div className={[_s._, _s.bgSubtle, _s.borderTop1PX, _s.borderBottom1PX, _s.borderColorSecondary, _s.px15, _s.py2, _s.aiCenter, _s.flexRow].join(' ')}>
               <div className={_s.mr10}>
                 <Avatar account={account} size={20} noHover />
               </div>
diff --git a/app/javascript/gabsocial/components/timeline_queue_button_header.js b/app/javascript/gabsocial/components/timeline_queue_button_header.js
index da2bdac3..3e0ce13e 100644
--- a/app/javascript/gabsocial/components/timeline_queue_button_header.js
+++ b/app/javascript/gabsocial/components/timeline_queue_button_header.js
@@ -79,16 +79,16 @@ class TimelineQueueButtonHeader extends React.PureComponent {
     const hasItems = count > 0
 
     const containerClasses = cx({
-      default: 1,
+      _: 1,
       pb5: 1,
       posSticky: !hidden,
       top120PX: !hidden,
-      alignItemsCenter: 1,
+      aiCenter: 1,
       z3: 1,
     })
 
     const innerContainerClasses = cx({
-      default: 1,
+      _: 1,
       displayNone: !hasItems,
       mtNeg26PX: 1,
     })
diff --git a/app/javascript/gabsocial/components/trends_item.js b/app/javascript/gabsocial/components/trends_item.js
index d48f4563..28a6f2ce 100644
--- a/app/javascript/gabsocial/components/trends_item.js
+++ b/app/javascript/gabsocial/components/trends_item.js
@@ -57,7 +57,7 @@ class TrendingItem extends React.PureComponent {
     }
 
     const containerClasses = CX({
-      default: 1,
+      _: 1,
       noUnderline: 1,
       px15: 1,
       pt10: 1,
@@ -83,8 +83,8 @@ class TrendingItem extends React.PureComponent {
         onMouseLeave={() => this.handleOnMouseLeave()}
       >
       
-        <div className={[_s.default, _s.flexNormal, _s.pb5].join(' ')}>
-          <div className={_s.default}>
+        <div className={[_s._, _s.flexNormal, _s.pb5].join(' ')}>
+          <div className={_s._}>
             <Text size='medium' color='primary' weight='bold'>
               {correctedTitle}
             </Text>
@@ -92,14 +92,14 @@ class TrendingItem extends React.PureComponent {
 
           {
             !!correctedDescription && !descriptionHasLink &&
-            <div className={[_s.default, _s.heightMax56PX, _s.overflowHidden, _s.pt5, _s.mb5].join(' ')}>
+            <div className={[_s._, _s.maxH56PX, _s.overflowHidden, _s.pt5, _s.mb5].join(' ')}>
               <Text size='small' color='secondary'>
                 {correctedDescription}
               </Text>
             </div>
           }
           
-          <div className={[_s.default, _s.flexRow].join(' ')}>
+          <div className={[_s._, _s.flexRow].join(' ')}>
             <Text color='secondary' size='small'>
               {index}
             </Text>
diff --git a/app/javascript/gabsocial/components/upload_area.js b/app/javascript/gabsocial/components/upload_area.js
index 2bf610f3..9d544416 100644
--- a/app/javascript/gabsocial/components/upload_area.js
+++ b/app/javascript/gabsocial/components/upload_area.js
@@ -48,20 +48,20 @@ class UploadArea extends React.PureComponent {
       >
         {({ backgroundOpacity, backgroundScale }) => (
           <div
-            className={[_s.default, _s.alignItemsCenter, _s.justifyContentCenter, _s.bgPrimaryOpaque, _s.width100PC, _s.height100PC, _s.posAbs, _s.top0, _s.rightAuto, _s.bottomAuto, _s.left0].join(' ')}
+            className={[_s._, _s.aiCenter, _s.jcCenter, _s.bgPrimaryOpaque, _s.w100PC, _s.h100PC, _s.posAbs, _s.top0, _s.rightAuto, _s.bottomAuto, _s.left0].join(' ')}
             style={{
               visibility: active ? 'visible' : 'hidden',
               opacity: backgroundOpacity
             }}
           >
-            <div className={[_s.default, _s.width340PX, _s.height260PX, _s.px10, _s.py10].join(' ')}>
+            <div className={[_s._, _s.w340PX, _s.h260PX, _s.px10, _s.py10].join(' ')}>
               <div
-                className={[_s.default, _s.posAbs, _s.bgPrimary, _s.height100PC, _s.width100PC, _s.radiusSmall].join(' ')}
+                className={[_s._, _s.posAbs, _s.bgPrimary, _s.h100PC, _s.w100PC, _s.radiusSmall].join(' ')}
                 style={{
                   transform: `scale(${backgroundScale})`
                 }}
               />
-              <div className={[_s.default, _s.height100PC, _s.width100PC, _s.border2PX, _s.borderColorSecondary, _s.borderDashed, _s.radiusSmall, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+              <div className={[_s._, _s.h100PC, _s.w100PC, _s.border2PX, _s.borderColorSecondary, _s.borderDashed, _s.radiusSmall, _s.aiCenter, _s.jcCenter].join(' ')}>
                 <Text size='medium' color='secondary'>
                   {intl.formatMessage(messages.title)}
                 </Text>
diff --git a/app/javascript/gabsocial/components/user_stat.js b/app/javascript/gabsocial/components/user_stat.js
index 52a21d0a..c47dcfff 100644
--- a/app/javascript/gabsocial/components/user_stat.js
+++ b/app/javascript/gabsocial/components/user_stat.js
@@ -35,7 +35,7 @@ class UserStat extends React.PureComponent {
 
     const align = isCentered ? 'center' : 'left'
     const containerClasses = CX({
-      default: 1,
+      _: 1,
       cursorPointer: 1,
       noUnderline: 1,
       flexNormal: isCentered,
diff --git a/app/javascript/gabsocial/components/video.js b/app/javascript/gabsocial/components/video.js
index 0e33cf6d..0944a322 100644
--- a/app/javascript/gabsocial/components/video.js
+++ b/app/javascript/gabsocial/components/video.js
@@ -501,58 +501,58 @@ class Video extends ImmutablePureComponent {
     // : todo spoiler :
 
     const mainContainerClasses = CX({
-      default: 1,
+      _: 1,
       mt10: 1,
       outlineNone: 1,
     })
 
     const seekHandleClasses = CX({
-      default: 1,
+      _: 1,
       posAbs: 1,
       circle: 1,
-      height20PX: 1,
-      width20PX: 1,
+      h20PX: 1,
+      w20PX: 1,
       bgTransparent: 1,
       mlNeg5PX: 1,
       mr5: 1,
       z3: 1,
-      alignItemsCenter: 1,
-      justifyContentCenter: 1,
+      aiCenter: 1,
+      jcCenter: 1,
       videoEase: 1,
       opacity0: !dragging,
       opacity1: dragging || hovered,
     })
 
     const seekInnerHandleClasses = CX({
-      default: 1,
+      _: 1,
       circle: 1,
-      height14PX: 1,
-      width14PX: 1,
+      h14PX: 1,
+      w14PX: 1,
       bgBrand: 1,
       boxShadow1: 1,
     })
 
     const progressClasses = CX({
-      default: 1,
+      _: 1,
       radiusSmall: 1,
       mt10: 1,
       posAbs: 1,
-      height4PX: 1,
+      h4PX: 1,
       videoEase: 1,
     })
 
     const volumeControlClasses = CX({
-      default: 1,
+      _: 1,
       posAbs: 1,
       bgBlackOpaque: 1,
       videoPlayerVolume: 1,
-      height122PX: 1,
+      h122PX: 1,
       circle: 1,
       displayNone: !hoveringVolumeButton && !hoveringVolumeControl || !hovered,
     })
 
     const videoControlsBackgroundClasses = CX({
-      default: 1,
+      _: 1,
       z2: 1,
       px15: 1,
       videoPlayerControlsBackground: 1,
@@ -564,13 +564,13 @@ class Video extends ImmutablePureComponent {
     })
 
     const overlayClasses = CX({
-      default: 1,
+      _: 1,
       top50PC: 1,
       left50PC: 1,
       posAbs: 1,
       z2: 1,
-      alignItemsCenter: 1,
-      justifyContentCenter: 1,
+      aiCenter: 1,
+      jcCenter: 1,
       displayNone: !paused && !isBuffering,
     })
 
@@ -595,20 +595,20 @@ class Video extends ImmutablePureComponent {
             <Responsive min={BREAKPOINT_EXTRA_SMALL}>
               <button
                 onClick={this.togglePlay}
-                className={[_s.default, _s.outlineNone, _s.cursorPointer, _s.alignItemsCenter, _s.justifyContentCenter, _s.posAbs, _s.bgBlackOpaque, _s.circle, _s.height60PX, _s.width60PX].join(' ')}
+                className={[_s._, _s.outlineNone, _s.cursorPointer, _s.aiCenter, _s.jcCenter, _s.posAbs, _s.bgBlackOpaque, _s.circle, _s.h60PX, _s.w60PX].join(' ')}
               >
-                <Icon id='play' size='24px' className={_s.colorWhite} />
+                <Icon id='play' size='24px' className={_s.cWhite} />
               </button>
             </Responsive>
           }
           {
             !paused && true &&
-            <Icon id='loading' size='60px' className={[_s.default, _s.posAbs].join(' ')} />
+            <Icon id='loading' size='60px' className={[_s._, _s.posAbs].join(' ')} />
           }
         </div>
 
         <video
-          className={[_s.default, _s.height100PC, _s.width100PC, _s.outlineNone].join(' ')}
+          className={[_s._, _s.h100PC, _s.w100PC, _s.outlineNone].join(' ')}
           playsInline
           ref={this.setVideoRef}
           src={src}
@@ -646,19 +646,19 @@ class Video extends ImmutablePureComponent {
           ref={this.setVolumeRef}
         >
           <div
-            className={[_s.default, _s.radiusSmall, _s.my10, _s.posAbs, _s.width4PX, _s.ml10, _s.bgPrimaryOpaque].join(' ')}
+            className={[_s._, _s.radiusSmall, _s.my10, _s.posAbs, _s.w4PX, _s.ml10, _s.bgPrimaryOpaque].join(' ')}
             style={{
               height: '102px',
             }}
           />
           <div
-            className={[_s.default, _s.radiusSmall, _s.my10, _s.bottom0, _s.posAbs, _s.width4PX, _s.ml10, _s.bgPrimary].join(' ')}
+            className={[_s._, _s.radiusSmall, _s.my10, _s.bottom0, _s.posAbs, _s.w4PX, _s.ml10, _s.bgPrimary].join(' ')}
             style={{
               height: `${volumeHeight}px`
             }}
           />
           <span
-            className={[_s.default, _s.cursorPointer, _s.posAbs, _s.circle, _s.px5, _s.boxShadow1, _s.mbNeg5PX, _s.py5, _s.bgPrimary, _s.z3].join(' ')}
+            className={[_s._, _s.cursorPointer, _s.posAbs, _s.circle, _s.px5, _s.boxShadow1, _s.mbNeg5PX, _s.py5, _s.bgPrimary, _s.z3].join(' ')}
             tabIndex='0'
             style={{
               marginLeft: '7px',
@@ -670,12 +670,12 @@ class Video extends ImmutablePureComponent {
         <div className={videoControlsBackgroundClasses}>
 
           <div
-            className={[_s.default, _s.cursorPointer, _s.height22PX, _s.videoPlayerSeek].join(' ')}
+            className={[_s._, _s.cursorPointer, _s.h22PX, _s.videoPlayerSeek].join(' ')}
             onMouseDown={this.handleMouseDown}
             ref={this.setSeekRef}
           >
 
-            <div className={[progressClasses, _s.bgLoading, _s.width100PC].join(' ')} />
+            <div className={[progressClasses, _s.bgLoading, _s.w100PC].join(' ')} />
             <div className={[progressClasses, _s.bgSubtle].join(' ')} style={{ width: `${buffer}%` }} />
             <div className={[progressClasses, _s.bgBrand].join(' ')} style={{ width: `${progress}%` }} />
 
@@ -690,7 +690,7 @@ class Video extends ImmutablePureComponent {
             </span>
           </div>
 
-          <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.pb5, _s.noSelect].join(' ')}>
+          <div className={[_s._, _s.flexRow, _s.aiCenter, _s.pb5, _s.noSelect].join(' ')}>
             <Button
               isNarrow
               backgroundColor='none'
@@ -699,7 +699,7 @@ class Video extends ImmutablePureComponent {
               icon={paused ? 'play' : 'pause'}
               title={paused ? 'Play' : 'Pause'}
               iconSize='16px'
-              iconClassName={_s.colorWhite}
+              iconClassName={_s.cWhite}
               className={_s.pl0}
             />
 
@@ -711,7 +711,7 @@ class Video extends ImmutablePureComponent {
               onClick={this.toggleMute}
               icon={muted ? 'audio-mute' : 'audio'}
               iconSize='24px'
-              iconClassName={_s.colorWhite}
+              iconClassName={_s.cWhite}
               className={[_s.px10, _s.mr10].join(' ')}
               title='Volume'
               onMouseEnter={this.handleMouseEnterAudio}
@@ -724,7 +724,7 @@ class Video extends ImmutablePureComponent {
               {formatTime(duration)}
             </Text>
 
-            <div className={[_s.default, _s.mlAuto, _s.flexRow, _s.alignItemsCenter].join(' ')}>
+            <div className={[_s._, _s.mlAuto, _s.flexRow, _s.aiCenter].join(' ')}>
               <Button
                 isNarrow
                 backgroundColor='none'
@@ -732,7 +732,7 @@ class Video extends ImmutablePureComponent {
                 onClick={this.handleOnClickSettings}
                 icon='cog'
                 iconSize='20px'
-                iconClassName={_s.colorWhite}
+                iconClassName={_s.cWhite}
                 className={[_s.px10, _s.pr0].join(' ')}
                 buttonRef={this.setSettingsBtnRef}
                 title='Video stats'
@@ -747,7 +747,7 @@ class Video extends ImmutablePureComponent {
                     onClick={this.togglePip}
                     icon='pip'
                     iconSize='20px'
-                    iconClassName={_s.colorWhite}
+                    iconClassName={_s.cWhite}
                     className={[_s.px10, _s.pr0].join(' ')}
                     title='Picture in Picture'
                   />
@@ -761,7 +761,7 @@ class Video extends ImmutablePureComponent {
                 icon={fullscreen ? 'minimize-fullscreen' : 'fullscreen'}
                 title={fullscreen ? 'Minimize fullscreen' : 'Fullscreen'}
                 iconSize='20px'
-                iconClassName={_s.colorWhite}
+                iconClassName={_s.cWhite}
                 className={[_s.px10, _s.pr0].join(' ')}
               />
             </div>
diff --git a/app/javascript/gabsocial/components/zoomable_image.js b/app/javascript/gabsocial/components/zoomable_image.js
index d5854411..0bd35e43 100644
--- a/app/javascript/gabsocial/components/zoomable_image.js
+++ b/app/javascript/gabsocial/components/zoomable_image.js
@@ -119,12 +119,12 @@ class ZoomableImage extends React.PureComponent {
 
     return (
       <div
-        className={[_s.default, _s.width100PC, _s.height100PC, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}
+        className={[_s._, _s.w100PC, _s.h100PC, _s.aiCenter, _s.jcCenter].join(' ')}
         ref={this.setContainerRef}
         style={{ overflow }}
       >
         <img
-          className={[_s.default, _s.objectFitContain, _s.heightAuto, _s.widthAuto, _s.maxWidth100PC, _s.heightMax100PC].join(' ')}
+          className={[_s._, _s.objectFitContain, _s.hAuto, _s.wAuto, _s.maxW100PC, _s.maxH100PC].join(' ')}
           role='presentation'
           ref={this.setImageRef}
           alt={alt}
diff --git a/app/javascript/gabsocial/features/about/about.js b/app/javascript/gabsocial/features/about/about.js
index c7813f6c..8d877e0f 100644
--- a/app/javascript/gabsocial/features/about/about.js
+++ b/app/javascript/gabsocial/features/about/about.js
@@ -10,9 +10,9 @@ export default class About extends React.PureComponent {
   render() {
 
     return (
-      <div className={[_s.default].join(' ')}>
+      <div className={[_s._].join(' ')}>
         <Block>
-          <div className={[_s.default, _s.px15, _s.py15, _s.mb10].join(' ')}>
+          <div className={[_s._, _s.px15, _s.py15, _s.mb10].join(' ')}>
             <Heading>About Gab.com</Heading>
             
             <Text tagName='p' className={_s.mt15} size='medium'>This is the Gab Social instance of Gab.com. Political speech protected by the First Amendment is welcome on this instance.</Text>
@@ -34,7 +34,7 @@ export default class About extends React.PureComponent {
 
           <Divider />
 
-          <div className={[_s.default, _s.px15, _s.py15].join(' ')} id='opensource'>
+          <div className={[_s._, _s.px15, _s.py15].join(' ')} id='opensource'>
             <Heading>Open Source</Heading>
 
             <Text tagName='p' className={_s.mt15} size='medium'>At Gab, we believe that the future of online publishing is decentralized and open. We believe that users of social networks should be able to control their social media experience on their own terms, rather than the terms set down by Big Tech.</Text>
diff --git a/app/javascript/gabsocial/features/about/dmca.js b/app/javascript/gabsocial/features/about/dmca.js
index 42fe7635..83d6b3a3 100644
--- a/app/javascript/gabsocial/features/about/dmca.js
+++ b/app/javascript/gabsocial/features/about/dmca.js
@@ -10,9 +10,9 @@ export default class DMCA extends React.PureComponent {
   render() {
 
     return (
-      <div className={[_s.default].join(' ')}>
+      <div className={[_s._].join(' ')}>
         <Block>
-          <div className={[_s.default, _s.px15, _s.py15].join(' ')}>
+          <div className={[_s._, _s.px15, _s.py15].join(' ')}>
             <Heading>GAB AI INC</Heading>
             <br />
             <Heading>COPYRIGHT POLICY</Heading>
@@ -22,7 +22,7 @@ export default class DMCA extends React.PureComponent {
 
             <Text tagName='p' className={_s.mt15} size='medium'>We take claims of copyright infringement seriously. We will respond to notices of alleged copyright infringement that comply with applicable law. If you believe any materials accessible on or from this site (the “Website”) infringe your copyright, you may request removal of those materials (or access to them) from the Website by submitting written notification to our copyright agent designated below. In accordance with the Online Copyright Infringement Liability Limitation Act of the Digital Millennium Copyright Act (17 U.S.C. § 512) (”DMCA”), the written notice (the “DMCA Notice”) must include substantially the following:</Text>
 
-            <ul className={[_s.default, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>Your physical or electronic signature.</Text>
               </li>
@@ -60,7 +60,7 @@ export default class DMCA extends React.PureComponent {
             <Heading size='h2'>Counter Notification Procedures</Heading>
             <Text tagName='p' className={_s.mt15} size='medium'>If you believe that material you posted on the Website was removed or access to it was disabled by mistake or misidentification, you may file a counter notification with us (a “Counter Notice”) by submitting written notification to our DMCA address (above) Pursuant to the DMCA, the Counter Notice must include substantially the following:</Text>
 
-            <ul className={[_s.default, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>Your physical or electronic signature.</Text>
               </li>
diff --git a/app/javascript/gabsocial/features/about/investors.js b/app/javascript/gabsocial/features/about/investors.js
index a0cdc029..4b759223 100644
--- a/app/javascript/gabsocial/features/about/investors.js
+++ b/app/javascript/gabsocial/features/about/investors.js
@@ -10,9 +10,9 @@ export default class Investors extends React.PureComponent {
   render() {
 
     return (
-      <div className={[_s.default].join(' ')}>
+      <div className={[_s._].join(' ')}>
         <Block>
-          <div className={[_s.default, _s.heightMin50VH, _s.px15, _s.py15].join(' ')}>
+          <div className={[_s._, _s.minH50VH, _s.px15, _s.py15].join(' ')}>
             <Heading>Investors</Heading>
             <br />
 
diff --git a/app/javascript/gabsocial/features/about/privacy_policy.js b/app/javascript/gabsocial/features/about/privacy_policy.js
index fd584748..53561e5a 100644
--- a/app/javascript/gabsocial/features/about/privacy_policy.js
+++ b/app/javascript/gabsocial/features/about/privacy_policy.js
@@ -10,9 +10,9 @@ export default class PrivacyPolicy extends React.PureComponent {
   render() {
 
     return (
-      <div className={[_s.default].join(' ')}>
+      <div className={[_s._].join(' ')}>
         <Block>
-          <div className={[_s.default, _s.px15, _s.py15].join(' ')}>
+          <div className={[_s._, _s.px15, _s.py15].join(' ')}>
             <Heading>GAB AI INC</Heading>
             <br />
             <Heading>Privacy Policy</Heading>
@@ -49,7 +49,7 @@ export default class PrivacyPolicy extends React.PureComponent {
 
             <Text tagName='p' className={_s.mt15} size='medium'>This policy applies to information we collect:</Text>
 
-            <ul className={[_s.default, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>On the Website.</Text>
               </li>
@@ -66,7 +66,7 @@ export default class PrivacyPolicy extends React.PureComponent {
 
             <Text tagName='p' className={_s.mt15} size='medium'>It does not apply to information collected by:</Text>
 
-            <ul className={[_s.default, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>Us offline or through any other means, including on any other website operated by Company or any third party (including our affiliates and subsidiaries); or</Text>
               </li>
@@ -87,7 +87,7 @@ export default class PrivacyPolicy extends React.PureComponent {
             <Heading size='h2'>Information We Collect About You and How We Collect It</Heading>
             <Text tagName='p' className={_s.mt15} size='medium'>We collect several types of information from and about users of our Website, including information:</Text>
 
-            <ul className={[_s.default, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>By which you may be personally identified, such as an e-mail address (”personal information”);</Text>
               </li>
@@ -101,7 +101,7 @@ export default class PrivacyPolicy extends React.PureComponent {
 
             <Text tagName='p' className={_s.mt15} size='medium'>We collect this information:</Text>
 
-            <ul className={[_s.default, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>Directly from you when you provide it to us.</Text>
               </li>
@@ -117,7 +117,7 @@ export default class PrivacyPolicy extends React.PureComponent {
             <Heading size='h2'>Information You Provide to Us</Heading>
             <Text tagName='p' className={_s.mt15} size='medium'>The information we collect on or through our Website may include:</Text>
 
-            <ul className={[_s.default, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>Information that you provide by filling in forms on our Website. This includes information provided at the time of registering to use our Website, subscribing to our service, posting material, or requesting further services. We may also ask you for information when you report a problem with our Website.</Text>
               </li>
@@ -135,7 +135,7 @@ export default class PrivacyPolicy extends React.PureComponent {
             <Heading size='h2'>Information We Collect Through Automatic Data Collection</Heading>
             <Text tagName='p' className={_s.mt15} size='medium'>As you navigate through and interact with our Website, we may use automatic data collection technologies to collect certain information about your equipment, browsing actions, and patterns, including:</Text>
 
-            <ul className={[_s.default, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>Details of your visits to our Website, including traffic data, logs, and other communication data and the resources that you access and use on the Website.</Text>
               </li>
@@ -146,7 +146,7 @@ export default class PrivacyPolicy extends React.PureComponent {
 
             <Text tagName='p' className={_s.mt15} size='medium'>The information we collect automatically may be only statistical data and may not include personal information. It helps us to improve our Website and to deliver a better and more personalized service, including by enabling us to:</Text>
 
-            <ul className={[_s.default, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>Estimate our audience size and usage patterns.</Text>
               </li>
@@ -163,7 +163,7 @@ export default class PrivacyPolicy extends React.PureComponent {
 
             <Text tagName='p' className={_s.mt15} size='medium'>The technologies we use for this automatic data collection may include:</Text>
 
-            <ul className={[_s.default, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>Cookies (or browser cookies). A cookie is a small file placed on the hard drive of your computer. You may refuse to accept browser cookies by activating the appropriate setting on your browser. However, if you select this setting you may be unable to access certain parts of our Website. Unless you have adjusted your browser setting so that it will refuse cookies, our system will issue cookies when you direct your browser to our Website.</Text>
               </li>
@@ -176,7 +176,7 @@ export default class PrivacyPolicy extends React.PureComponent {
             <Heading size='h2'>How We Use Your Information</Heading>
             <Text tagName='p' className={_s.mt15} size='medium'>We use information that we collect about you or that you provide to us, including any personal information:</Text>
 
-            <ul className={[_s.default, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>To present our Website and its contents to you.</Text>
               </li>
@@ -214,7 +214,7 @@ export default class PrivacyPolicy extends React.PureComponent {
             <Text tagName='p' className={_s.mt15} size='medium'>It is the policy of the Company to not provide any user data to any person unless compelled by a court order issued by a U.S. court, except in cases of life-threatening emergency. The Company reserves the right to change or deviate from this policy at any time, in its sole and absolute discretion, with or without notice to you.</Text>
             <Text tagName='p' className={_s.mt15} size='medium'>We may disclose personal information that we collect or you provide as described in this privacy policy:</Text>
 
-            <ul className={[_s.default, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>To our subsidiaries and affiliates.</Text>
               </li>
@@ -237,7 +237,7 @@ export default class PrivacyPolicy extends React.PureComponent {
 
             <Text tagName='p' className={_s.mt15} size='medium'>We may also disclose your personal information:</Text>
 
-            <ul className={[_s.default, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>To comply with any court order, law, or legal process, including to respond to any government or regulatory request.</Text>
               </li>
diff --git a/app/javascript/gabsocial/features/about/terms_of_sale.js b/app/javascript/gabsocial/features/about/terms_of_sale.js
index 98058972..e475fbe8 100644
--- a/app/javascript/gabsocial/features/about/terms_of_sale.js
+++ b/app/javascript/gabsocial/features/about/terms_of_sale.js
@@ -10,9 +10,9 @@ export default class TermsOfSale extends React.PureComponent {
   render() {
 
     return (
-      <div className={[_s.default].join(' ')}>
+      <div className={[_s._].join(' ')}>
         <Block>
-          <div className={[_s.default, _s.px15, _s.py15].join(' ')}>
+          <div className={[_s._, _s.px15, _s.py15].join(' ')}>
             <Heading>GAB AI INC</Heading>
             <br />
             <Heading>Terms of Sale</Heading>
@@ -83,7 +83,7 @@ export default class TermsOfSale extends React.PureComponent {
             <Heading size='h2'>5. Restrictions</Heading>
             <Text tagName='p' className={_s.mt15} size='medium'>When you use the Paid Service, you may not (or attempt to):</Text>
 
-            <ul className={[_s.default, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li className={_s.mt10}>
                 <Text tagName='p' size='medium'>violate the Terms of Service;</Text>
               </li>
diff --git a/app/javascript/gabsocial/features/about/terms_of_service.js b/app/javascript/gabsocial/features/about/terms_of_service.js
index 3aedbf3b..192c9b97 100644
--- a/app/javascript/gabsocial/features/about/terms_of_service.js
+++ b/app/javascript/gabsocial/features/about/terms_of_service.js
@@ -10,9 +10,9 @@ export default class TermsOfService extends React.PureComponent {
   render() {
 
     return (
-      <div className={[_s.default].join(' ')}>
+      <div className={[_s._].join(' ')}>
         <Block>
-          <div className={[_s.default, _s.px15, _s.py15].join(' ')}>
+          <div className={[_s._, _s.px15, _s.py15].join(' ')}>
             <Heading>GAB AI INC</Heading>
             <br />
             <Heading>Website Terms of Service</Heading>
@@ -165,7 +165,7 @@ export default class TermsOfService extends React.PureComponent {
 
             <Text tagName='p' className={_s.mt15} size='medium'>You are responsible for both:</Text>
 
-            <ul className={[_s.default, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>Making all arrangements necessary for you to have access to the Website.</Text>
               </li>
@@ -208,7 +208,7 @@ export default class TermsOfService extends React.PureComponent {
             <Text tagName='p' className={_s.mt15} size='medium'>The Website and its entire contents, features, and functionality (including but not limited to all information, software, text, displays, images, video, and audio, and the design, selection, and arrangement thereof) are owned by the Company, its licensors, or other providers of such material and are protected by United States and international copyright, trademark, patent, trade secret, and other intellectual property or proprietary rights laws. A copy of the Gab Social social networking software (“Gab Social”) and the AGPL license applicable thereto may be found at our public repository.</Text>
             <Text tagName='p' className={_s.mt15} size='medium'>These Terms of Service permit you to use the Website for your personal, non-commercial use only. You must not reproduce, distribute, modify, create derivative works of, publicly display, publicly perform, republish, download, store, or transmit any of the material on our Website, except as follows:</Text>
 
-            <ul className={[_s.default, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>You may use Gab Social software subject to the terms of the Affero GPL License, Version 3.</Text>
               </li>
@@ -231,7 +231,7 @@ export default class TermsOfService extends React.PureComponent {
 
             <Text tagName='p' className={_s.mt15} size='medium'>You must not:</Text>
 
-            <ul className={[_s.default, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>Modify copies of any materials from this site.</Text>
               </li>
@@ -251,7 +251,7 @@ export default class TermsOfService extends React.PureComponent {
             <Heading size='h2'>Prohibited Uses</Heading>
             <Text tagName='p' className={_s.mt15} size='medium'>You may use the Website only for lawful purposes and in accordance with these Terms of Service. You agree not to use the Website:</Text>
 
-            <ul className={[_s.default, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>In any way that would violate any applicable federal, state, or local law of the United States of America (including, without limitation, any laws regarding the export of data or software to and from the US or other countries) and is not protected by the First Amendment to the U.S. Constitution (the “First Amendment”).</Text>
               </li>
@@ -274,7 +274,7 @@ export default class TermsOfService extends React.PureComponent {
 
             <Text tagName='p' className={_s.mt15} size='medium'>Additionally, you agree not to:</Text>
 
-            <ul className={[_s.default, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>Use the Website in any manner that could disable, overburden, damage, or impair the site or interfere with any other party’s use of the Website, including their ability to engage in real time activities through the Website.</Text>
               </li>
@@ -307,7 +307,7 @@ export default class TermsOfService extends React.PureComponent {
             <Text tagName='p' className={_s.mt15} size='medium'>All User Contributions must comply with the Content Standards set out in these Terms of Service. Any User Contribution you post to the site will be considered non-confidential and non-proprietary. By providing any User Contribution on the Website, you grant us and our affiliates and service providers, and each of their and our licensees, successors, and assigns an irrevocable, perpetual, royalty-free right to use, republish, reproduce, modify, perform, display, distribute, and otherwise disclose to third parties any such material for any purpose.</Text>
             <Text tagName='p' className={_s.mt15} size='medium'>You represent and warrant that:</Text>
 
-            <ul className={[_s.default, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>You own or control all rights in and to the User Contributions and have the right to grant the license granted above to us and our affiliates and service providers, and each of their and our respective licensees, successors, and assigns.</Text>
               </li>
@@ -324,7 +324,7 @@ export default class TermsOfService extends React.PureComponent {
             <Text tagName='p' className={_s.mt15} size='medium'>We strive to ensure that the First Amendment remains the Website’s standard for content moderation. We will make best efforts to ensure that all content moderation decisions and enforcement of these terms of service does not punish users for exercising their God-given right to speak freely.</Text>
             <Text tagName='p' className={_s.mt15} size='medium'>We collect comparatively little data on our users relative to other social networking sites. Our default position is that we should implement no prior restraints on any User Contribution. However, given the breadth of speech we permit, there may be circumstances where we are unable to determine whether content is protected by the First Amendment or not and prudence may require us to err on the side of caution. Accordingly, the Company reserves the right to take any action with respect to any User Contribution that we deem necessary or appropriate in our sole discretion, including the following:</Text>
 
-            <ul className={[_s.default, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>Take any action with respect to any User Contribution that we deem necessary or appropriate in our sole discretion, including if we believe that such User Contribution violates the Terms of Service, including the Content Standards, infringes any intellectual property right or other right of any person or entity, or could threaten the physical safety of users of the Website or the public.</Text>
               </li>
@@ -346,7 +346,7 @@ export default class TermsOfService extends React.PureComponent {
             <Text tagName='p' className={_s.mt15} size='medium'>As a general rule, written expression that is protected political, religious, symbolic, or commercial speech under the First Amendment of the U.S. Constitution will be allowed on the Website. User Contributions absolutely must in their entirety comply with all applicable federal, state, and local regulations in the United States.</Text>
             <Text tagName='p' className={_s.mt15} size='medium'>Without limiting the generality of the foregoing, User Contributions must NOT:</Text>
 
-            <ul className={[_s.default, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>Be unlawful or be made in furtherance of any unlawful purpose. User Contributions must not aid, abet, assist, counsel, procure or solicit the commission of, nor constitute an attempt or part of a conspiracy to commit, any unlawful act. For avoidance of doubt, speech which is merely offensive or the expression of an offensive or controversial idea or opinion, as a general rule, will be in poor taste but will not be illegal in the United States.</Text>
               </li>
@@ -473,7 +473,7 @@ export default class TermsOfService extends React.PureComponent {
             <Text tagName='p' className={_s.mt15} size='medium'>You may link to the Website, provided you do so in a way that is fair and legal and does not damage our reputation or take advantage of it, but you must not establish a link in such a way as to suggest any form of association, approval, or endorsement on our part without our express written consent.</Text>
             <Text tagName='p' className={_s.mt15} size='medium'>This Website may provide certain social media features that enable you to:</Text>
 
-            <ul className={[_s.default, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>Link from your own or certain third-party websites to certain content on this Website.</Text>
               </li>
diff --git a/app/javascript/gabsocial/features/account_gallery.js b/app/javascript/gabsocial/features/account_gallery.js
index 84b55aa4..fe097531 100644
--- a/app/javascript/gabsocial/features/account_gallery.js
+++ b/app/javascript/gabsocial/features/account_gallery.js
@@ -114,7 +114,7 @@ class AccountGallery extends ImmutablePureComponent {
         <div
           role='feed'
           onScroll={this.handleScroll}
-          className={[_s.default, _s.flexRow, _s.flexWrap, _s.py5, _s.px5].join(' ')}
+          className={[_s._, _s.flexRow, _s.flexWrap, _s.py5, _s.px5].join(' ')}
         >
 
           {
@@ -129,7 +129,7 @@ class AccountGallery extends ImmutablePureComponent {
 
           {
             isLoading && attachments.size === 0 &&
-            <div className={[_s.default, _s.width100PC].join(' ')}>
+            <div className={[_s._, _s.w100PC].join(' ')}>
               <MediaGalleryPlaceholder />
             </div>
           }
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 439fbd49..56b52563 100644
--- a/app/javascript/gabsocial/features/compose/components/compose_extra_button.js
+++ b/app/javascript/gabsocial/features/compose/components/compose_extra_button.js
@@ -20,7 +20,7 @@ class ComposeExtraButton extends React.PureComponent {
     } = this.props
 
     const btnClasses = cx({
-      default: 1,
+      _: 1,
       circle: 1,
       noUnderline: 1,
       font: 1,
@@ -38,8 +38,8 @@ class ComposeExtraButton extends React.PureComponent {
     })
 
     const iconClasses = cx({
-      colorSecondary: !active,
-      colorWhite: active,
+      cSecondary: !active,
+      cWhite: active,
     })
 
     const iconSize = !!small ? '14px' : '16px'
@@ -64,7 +64,7 @@ class ComposeExtraButton extends React.PureComponent {
     }
 
     return (
-      <div className={[_s.default, _s.mr2].join(' ')} ref={buttonRef}>
+      <div className={[_s._, _s.mr2].join(' ')} ref={buttonRef}>
         {button}
         {children}
       </div>
diff --git a/app/javascript/gabsocial/features/compose/components/compose_form.js b/app/javascript/gabsocial/features/compose/components/compose_form.js
index b6f40b9f..5e09f719 100644
--- a/app/javascript/gabsocial/features/compose/components/compose_form.js
+++ b/app/javascript/gabsocial/features/compose/components/compose_form.js
@@ -211,20 +211,20 @@ class ComposeForm extends ImmutablePureComponent {
     const shouldAutoFocus = autoFocus && !showSearch && !isMobile(window.innerWidth)
 
     const parentContainerClasses = CX({
-      default: 1,
-      width100PC: 1,
+      _: 1,
+      w100PC: 1,
       flexRow: !shouldCondense,
       pb10: !shouldCondense,
     })
 
     const childContainerClasses = CX({
-      default: 1,
+      _: 1,
       flexWrap: 1,
       overflowHidden: 1,
       flex1: 1,
-      heightMin28PX: 1,
+      minH28PX: 1,
       py2: shouldCondense,
-      alignItemsEnd: shouldCondense,
+      aiEnd: shouldCondense,
       flexRow: shouldCondense,
       radiusSmall: shouldCondense,
       bgSubtle: shouldCondense,
@@ -232,10 +232,10 @@ class ComposeForm extends ImmutablePureComponent {
     })
 
     const actionsContainerClasses = CX({
-      default: 1,
+      _: 1,
       flexRow: 1,
-      alignItemsCenter: !shouldCondense,
-      alignItemsStart: shouldCondense,
+      aiCenter: !shouldCondense,
+      aiStart: shouldCondense,
       mt10: !shouldCondense,
       px10: !shouldCondense,
       mlAuto: shouldCondense,
@@ -243,20 +243,20 @@ class ComposeForm extends ImmutablePureComponent {
     })
 
     const commentPublishBtnClasses = CX({
-      default: 1,
-      justifyContentCenter: 1,
+      _: 1,
+      jcCenter: 1,
       displayNone: length(this.props.text) === 0,
     })
 
     return (
-      <div className={[_s.default, _s.width100PC].join(' ')}>
+      <div className={[_s._, _s.w100PC].join(' ')}>
         {
           shouldCondense &&
           <div className={parentContainerClasses}>
-            <div className={[_s.default, _s.width100PC].join(' ')}>
+            <div className={[_s._, _s.w100PC].join(' ')}>
 
-              <div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
-                <div className={[_s.default, _s.mr10].join(' ')}>
+              <div className={[_s._, _s.flexRow, _s.w100PC].join(' ')}>
+                <div className={[_s._, _s.mr10].join(' ')}>
                   <Avatar account={account} size={28} noHover />
                 </div>
 
@@ -287,7 +287,7 @@ class ComposeForm extends ImmutablePureComponent {
                   />
 
                   <div className={actionsContainerClasses}>
-                    <div className={[_s.default, _s.flexRow, _s.mrAuto].join(' ')}>
+                    <div className={[_s._, _s.flexRow, _s.mrAuto].join(' ')}>
 
                       { /* <EmojiPickerButton small={shouldCondense} isMatch={isMatch} /> */}
 
@@ -312,7 +312,7 @@ class ComposeForm extends ImmutablePureComponent {
 
               {
                 (isUploading || anyMedia) &&
-                <div className={[_s.default, _s.width100PC, _s.pl35, _s.mt5].join(' ')}>
+                <div className={[_s._, _s.w100PC, _s.pl35, _s.mt5].join(' ')}>
                   <UploadForm
                     replyToId={replyToId}
                     isModalOpen={isModalOpen}
@@ -326,7 +326,7 @@ class ComposeForm extends ImmutablePureComponent {
         {
           !shouldCondense &&
           <div className={parentContainerClasses}>
-            <div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
+            <div className={[_s._, _s.flexRow, _s.w100PC].join(' ')}>
               <div
                 className={childContainerClasses}
                 ref={this.setForm}
@@ -335,7 +335,7 @@ class ComposeForm extends ImmutablePureComponent {
 
                 {
                   !!reduxReplyToId && isModalOpen && isMatch &&
-                  <div className={[_s.default, _s.px15, _s.py10, _s.mt5].join(' ')}>
+                  <div className={[_s._, _s.px15, _s.py10, _s.mt5].join(' ')}>
                     <StatusContainer
                       contextType='compose'
                       id={reduxReplyToId}
@@ -346,7 +346,7 @@ class ComposeForm extends ImmutablePureComponent {
 
                 {
                   !!spoiler &&
-                  <div className={[_s.default, _s.px15, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+                  <div className={[_s._, _s.px15, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
                     <Input
                       placeholder={intl.formatMessage(messages.spoiler_placeholder)}
                       value={this.props.spoilerText}
@@ -382,7 +382,7 @@ class ComposeForm extends ImmutablePureComponent {
 
                 {
                   (isUploading || anyMedia) &&
-                  <div className={[_s.default, _s.px15, _s.mt5].join(' ')}>
+                  <div className={[_s._, _s.px15, _s.mt5].join(' ')}>
                     <UploadForm
                       replyToId={replyToId}
                       isModalOpen={isModalOpen}
@@ -393,7 +393,7 @@ class ComposeForm extends ImmutablePureComponent {
                 {
                   /* : todo :
                   !!selectedGifSrc && !anyMedia &&
-                  <div className={[_s.default, _s.px15].join(' ')}>
+                  <div className={[_s._, _s.px15].join(' ')}>
                     <GifForm
                       replyToId={replyToId}
                       small={shouldCondense}
@@ -405,14 +405,14 @@ class ComposeForm extends ImmutablePureComponent {
 
                 {
                   !edit && hasPoll &&
-                  <div className={[_s.default, _s.px15, _s.mt5].join(' ')}>
+                  <div className={[_s._, _s.px15, _s.mt5].join(' ')}>
                     <PollForm replyToId={replyToId} />
                   </div>
                 }
 
                 {
                   !!quoteOfId && isModalOpen && isMatch &&
-                  <div className={[_s.default, _s.px15, _s.py10, _s.mt5].join(' ')}>
+                  <div className={[_s._, _s.px15, _s.py10, _s.mt5].join(' ')}>
                     <StatusContainer
                       contextType='compose'
                       id={quoteOfId}
@@ -422,7 +422,7 @@ class ComposeForm extends ImmutablePureComponent {
                 }
 
                 <div className={actionsContainerClasses}>
-                  <div className={[_s.default, _s.flexRow, _s.mrAuto].join(' ')}>
+                  <div className={[_s._, _s.flexRow, _s.mrAuto].join(' ')}>
 
                     <UploadButton small={shouldCondense} />
 
diff --git a/app/javascript/gabsocial/features/compose/components/gif_form.js b/app/javascript/gabsocial/features/compose/components/gif_form.js
index d685c99b..0f9796a9 100644
--- a/app/javascript/gabsocial/features/compose/components/gif_form.js
+++ b/app/javascript/gabsocial/features/compose/components/gif_form.js
@@ -15,12 +15,12 @@ class GifForm extends React.PureComponent {
     if (!selectedGifSrc) return null
 
     return (
-      <div className={_s.default}>
-        <div className={[_s.default, _s.flexRow, _s.flexWrap].join(' ')}>
+      <div className={_s._}>
+        <div className={[_s._, _s.flexRow, _s.flexWrap].join(' ')}>
           <Image
             width='auto'
             src={selectedGifSrc}
-            className={[_s.maxWidth100PC, _s.radiusSmall, _s.height260PX].join(' ')}
+            className={[_s.maxW100PC, _s.radiusSmall, _s.h260PX].join(' ')}
           />
         </div>
       </div>
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 c8412bac..ed3ef2ff 100644
--- a/app/javascript/gabsocial/features/compose/components/media_upload_item.js
+++ b/app/javascript/gabsocial/features/compose/components/media_upload_item.js
@@ -81,7 +81,7 @@ class Upload extends ImmutablePureComponent {
     const description = this.state.dirtyDescription || (this.state.dirtyDescription !== '' && media.get('description')) || ''
 
     const descriptionContainerClasses = cx({
-      default: 1,
+      _: 1,
       posAbs: 1,
       right0: 1,
       bottom0: 1,
@@ -96,20 +96,20 @@ class Upload extends ImmutablePureComponent {
     return (
       <div
         tabIndex='0'
-        className={[_s.default, _s.width50PC, _s.px5, _s.py5].join(' ')}
+        className={[_s._, _s.w50PC, _s.px5, _s.py5].join(' ')}
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
         onClick={this.handleClick}
         role='button'
       >
-        <div className={[_s.default, _s.radiusSmall, _s.overflowHidden, _s.height158PX].join(' ')}>
+        <div className={[_s._, _s.radiusSmall, _s.overflowHidden, _s.h158PX].join(' ')}>
           <Image
-            className={[_s.default, _s.height158PX].join(' ')}
+            className={[_s._, _s.h158PX].join(' ')}
             src={media.get('preview_url')}
           />
           {
             media.get('type') === 'gifv' &&
-            <div className={[_s.default, _s.posAbs, _s.z2, _s.radiusSmall, _s.bgBlackOpaque, _s.px5, _s.py5, _s.ml10, _s.mt10, _s.top0, _s.left0].join(' ')}>
+            <div className={[_s._, _s.posAbs, _s.z2, _s.radiusSmall, _s.bgBlackOpaque, _s.px5, _s.py5, _s.ml10, _s.mt10, _s.top0, _s.left0].join(' ')}>
               <Text size='extraSmall' color='white' weight='medium'>GIF</Text>
             </div>
           }
diff --git a/app/javascript/gabsocial/features/compose/components/poll_form.js b/app/javascript/gabsocial/features/compose/components/poll_form.js
index 690238a9..0717aeb6 100644
--- a/app/javascript/gabsocial/features/compose/components/poll_form.js
+++ b/app/javascript/gabsocial/features/compose/components/poll_form.js
@@ -43,8 +43,8 @@ class PollForm extends ImmutablePureComponent {
     if (!options) return null
 
     return (
-      <div className={[_s.default, _s.px10, _s.py10, _s.borderColorSecondary, _s.border1PX, _s.radiusSmall].join(' ')}>
-        <ul className={[_s.default, _s.listStyleNone].join(' ')}>
+      <div className={[_s._, _s.px10, _s.py10, _s.borderColorSecondary, _s.border1PX, _s.radiusSmall].join(' ')}>
+        <ul className={[_s._, _s.listStyleNone].join(' ')}>
           {
             options.map((title, i) => (
               <PollFormOption
@@ -62,14 +62,14 @@ class PollForm extends ImmutablePureComponent {
           }
         </ul>
 
-        <div className={[_s.default, _s.flexRow].join(' ')}>
+        <div className={[_s._, _s.flexRow].join(' ')}>
           {
             options.size < 4 && (
               <Button
                 isOutline
                 backgroundColor='none'
                 color='brand'
-                className={[_s.alignItemsCenter, _s.mr10].join(' ')}
+                className={[_s.aiCenter, _s.mr10].join(' ')}
                 onClick={onAddOption}
                 icon='add'
                 iconSize='14px'
@@ -82,7 +82,7 @@ class PollForm extends ImmutablePureComponent {
             )
           }
 
-          <div className={[_s.default, _s.flexGrow1].join(' ')}>
+          <div className={[_s._, _s.flexGrow1].join(' ')}>
             <Select
               value={expiresIn}
               onChange={this.handleSelectDuration}
@@ -147,7 +147,7 @@ class PollFormOption extends ImmutablePureComponent {
     const { isPollMultiple, title, index, intl } = this.props
 
     const toggleClasses = cx({
-      default: 1,
+      _: 1,
       px10: 1,
       py10: 1,
       borderColorSecondary: 1,
@@ -158,8 +158,8 @@ class PollFormOption extends ImmutablePureComponent {
     })
 
     return (
-      <li className={[_s.default, _s.flexRow, _s.mb10].join(' ')}>
-        <label className={[_s.default, _s.flexRow, _s.flexGrow1, _s.alignItemsCenter].join(' ')}>
+      <li className={[_s._, _s.flexRow, _s.mb10].join(' ')}>
+        <label className={[_s._, _s.flexRow, _s.flexGrow1, _s.aiCenter].join(' ')}>
           <span
             className={toggleClasses}
             onClick={this.handleToggleMultiple}
@@ -180,10 +180,10 @@ class PollFormOption extends ImmutablePureComponent {
           <Button
             isNarrow
             backgroundColor='none'
-            className={[_s.ml5, _s.justifyContentCenter].join(' ')}
+            className={[_s.ml5, _s.jcCenter].join(' ')}
             icon='close'
             iconSize='8px'
-            iconClassName={_s.colorSecondary}
+            iconClassName={_s.cSecondary}
             disabled={index <= 1}
             title={intl.formatMessage(messages.remove_option)}
             onClick={this.handleOptionRemove}
diff --git a/app/javascript/gabsocial/features/compose/components/sensitive_media_button.js b/app/javascript/gabsocial/features/compose/components/sensitive_media_button.js
index 339f9c3b..b606d07c 100644
--- a/app/javascript/gabsocial/features/compose/components/sensitive_media_button.js
+++ b/app/javascript/gabsocial/features/compose/components/sensitive_media_button.js
@@ -11,7 +11,7 @@ class SensitiveMediaButton extends React.PureComponent {
     const { active, disabled, onClick, intl } = this.props
 
     return (
-      <div className={[_s.default, _s.alignItemsStart, _s.px5].join(' ')}>
+      <div className={[_s._, _s.aiStart, _s.px5].join(' ')}>
         <Switch
           id='mark-sensitive'
           type='checkbox'
diff --git a/app/javascript/gabsocial/features/compose/components/upload_form.js b/app/javascript/gabsocial/features/compose/components/upload_form.js
index 5e7dc061..e007aaf8 100644
--- a/app/javascript/gabsocial/features/compose/components/upload_form.js
+++ b/app/javascript/gabsocial/features/compose/components/upload_form.js
@@ -17,8 +17,8 @@ class UploadForm extends ImmutablePureComponent {
     } = this.props
 
     return (
-      <div className={_s.default}>
-        <div className={[_s.default, _s.flexRow, _s.flexWrap].join(' ')}>
+      <div className={_s._}>
+        <div className={[_s._, _s.flexRow, _s.flexWrap].join(' ')}>
           {
             mediaIds.map(id => (
               <Upload id={id} key={id} />
diff --git a/app/javascript/gabsocial/features/compose/compose.js b/app/javascript/gabsocial/features/compose/compose.js
index 3e64cde5..180dff1e 100644
--- a/app/javascript/gabsocial/features/compose/compose.js
+++ b/app/javascript/gabsocial/features/compose/compose.js
@@ -12,7 +12,7 @@ class Compose extends React.PureComponent {
 
   render () {
     return (
-      <div className={[_s.default, _s.bgPrimary, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+      <div className={[_s._, _s.bgPrimary, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
         <ComposeFormContainer isStandalone />
       </div>
     )
diff --git a/app/javascript/gabsocial/features/follow_requests.js b/app/javascript/gabsocial/features/follow_requests.js
index 42b0f175..f81d229a 100644
--- a/app/javascript/gabsocial/features/follow_requests.js
+++ b/app/javascript/gabsocial/features/follow_requests.js
@@ -58,7 +58,7 @@ class FollowRequests extends ImmutablePureComponent {
     } = this.props
 
     const unlockedPrependMessage = locked ? null : (
-      <div className={[_s.default, _s.px15, _s.py15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+      <div className={[_s._, _s.px15, _s.py15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
         <Text>
           <FormattedMessage
             id='follow_requests.unlocked_explanation'
diff --git a/app/javascript/gabsocial/features/group_about.js b/app/javascript/gabsocial/features/group_about.js
index c9d093f8..1d2bc54c 100644
--- a/app/javascript/gabsocial/features/group_about.js
+++ b/app/javascript/gabsocial/features/group_about.js
@@ -35,7 +35,7 @@ class GroupAbout extends ImmutablePureComponent {
 		const { group } = this.props
 
 		return (
-			<div className={[_s.default, _s.width100PC].join(' ')}>
+			<div className={[_s._, _s.w100PC].join(' ')}>
 				<Responsive min={BREAKPOINT_EXTRA_SMALL}>
 					<ColumnIndicator type='missing' />
 				</Responsive>
diff --git a/app/javascript/gabsocial/features/group_collection_timeline.js b/app/javascript/gabsocial/features/group_collection_timeline.js
index 4a54fc82..4b7b4726 100644
--- a/app/javascript/gabsocial/features/group_collection_timeline.js
+++ b/app/javascript/gabsocial/features/group_collection_timeline.js
@@ -162,8 +162,8 @@ class GroupCollectionTimeline extends React.PureComponent {
 		} = this.props
 
 		const emptyMessage = !!me && collectionType === 'member' && hasNoGroupMembers ? (
-			<div className={[_s.default, _s.width100PC]}>
-				<Text className={[_s.default, _s.mb10].join(' ')}>
+			<div className={[_s._, _s.w100PC]}>
+				<Text className={[_s._, _s.mb10].join(' ')}>
 					Join some groups then come back here to view your group timeline
 				</Text>
 				<GroupsCollection activeTab='featured' />
diff --git a/app/javascript/gabsocial/features/group_create.js b/app/javascript/gabsocial/features/group_create.js
index 4edb87c6..d75fa62e 100644
--- a/app/javascript/gabsocial/features/group_create.js
+++ b/app/javascript/gabsocial/features/group_create.js
@@ -294,7 +294,7 @@ class GroupCreate extends ImmutablePureComponent {
 
 				<Divider isInvisible />			
 
-				<div className={_s.default}>
+				<div className={_s._}>
 					<Text className={[_s.pl15, _s.mb10].join(' ')} size='small' weight='medium' color='secondary'>
 						{intl.formatMessage(messages.categoryTitle)}
 					</Text>
diff --git a/app/javascript/gabsocial/features/group_members.js b/app/javascript/gabsocial/features/group_members.js
index cb11b606..b764b8a0 100644
--- a/app/javascript/gabsocial/features/group_members.js
+++ b/app/javascript/gabsocial/features/group_members.js
@@ -103,7 +103,7 @@ class GroupMembers extends ImmutablePureComponent {
 
 				{
 					/* : todo :
-					<div className={[_s.default, _s.justifyContentCenter, _s.px15, _s.my5, _s.borderBottom1PX, _s.borderColorSecondary, _s.pt5, _s.pb15].join(' ')}>
+					<div className={[_s._, _s.jcCenter, _s.px15, _s.my5, _s.borderBottom1PX, _s.borderColorSecondary, _s.pt5, _s.pb15].join(' ')}>
 						<Input
 							id='group-member-search'
 							placeholder='Search group members'
@@ -118,7 +118,7 @@ class GroupMembers extends ImmutablePureComponent {
 					</div>
 					*/
 				}
-				<div className={[_s.default].join(' ')}>
+				<div className={[_s._].join(' ')}>
 					<ScrollableList
 						scrollKey='group-members'
 						hasMore={hasMore}
diff --git a/app/javascript/gabsocial/features/groups_collection.js b/app/javascript/gabsocial/features/groups_collection.js
index 8732419e..90bf6943 100644
--- a/app/javascript/gabsocial/features/groups_collection.js
+++ b/app/javascript/gabsocial/features/groups_collection.js
@@ -90,13 +90,13 @@ class GroupsCollection extends ImmutablePureComponent {
 
 		return (
 			<Block>
-				<div className={[_s.default, _s.flexRow, _s.px15, _s.pt10, _s.justifyContentCenter].join(' ')}>
-					<div className={[_s.default, _s.flexGrow1, _s.maxWidth80PC, _s.justifyContentCenter, _s.overflowHidden].join(' ')}>
+				<div className={[_s._, _s.flexRow, _s.px15, _s.pt10, _s.jcCenter].join(' ')}>
+					<div className={[_s._, _s.flexGrow1, _s.maxW80PC, _s.jcCenter, _s.overflowHidden].join(' ')}>
 						<Heading size='h2'>
 							{intl.formatMessage(messages[activeTab])}
 						</Heading>
 					</div>
-					<div className={[_s.default, _s.flexRow, _s.mlAuto].join(' ')}>
+					<div className={[_s._, _s.flexRow, _s.mlAuto].join(' ')}>
 						<Button
 							icon='sort'
 							className={_s.px10}
@@ -108,7 +108,7 @@ class GroupsCollection extends ImmutablePureComponent {
 						/>
 					</div>
 				</div>
-				<div className={[_s.default, _s.py10, _s.width100PC].join(' ')}>
+				<div className={[_s._, _s.py10, _s.w100PC].join(' ')}>
 					{
 						groupIds.map((groupId, i) => (
 							<GroupListItem
diff --git a/app/javascript/gabsocial/features/introduction.js b/app/javascript/gabsocial/features/introduction.js
index 8c0354cb..25214042 100644
--- a/app/javascript/gabsocial/features/introduction.js
+++ b/app/javascript/gabsocial/features/introduction.js
@@ -31,10 +31,10 @@ class SlideWelcome extends React.PureComponent {
 
   render() {
     return (
-      <div className={[_s.default, _s.width100PC, _s.height100PC].join(' ')}>
+      <div className={[_s._, _s.w100PC, _s.h100PC].join(' ')}>
         <Image src='/headers/onboarding.png' alt='Welcome to Gab' />
 
-        <div className={[_s.default, _s.px15, _s.py15].join(' ')}>
+        <div className={[_s._, _s.px15, _s.py15].join(' ')}>
 
           <Text size='large'>Gab is the home of free speech online and a place where users shape their own experience. </Text>
           <br />
@@ -94,22 +94,22 @@ class SlidePhotos extends ImmutablePureComponent {
     const { displayNameValue } = this.state
 
     return (
-      <div className={[_s.default, _s.width100PC].join(' ')}>
-        <div className={[_s.default, _s.px15, _s.py15, _s.alignItemsCenter].join(' ')}>
+      <div className={[_s._, _s.w100PC].join(' ')}>
+        <div className={[_s._, _s.px15, _s.py15, _s.aiCenter].join(' ')}>
 
-          <div className={[_s.default, _s.py10, _s.maxWidth640PX].join(' ')}>
+          <div className={[_s._, _s.py10, _s.maxW640PX].join(' ')}>
             <Text size='large' align='center'>Set your cover photo, profile photo and enter your display name so people can find you.</Text>
           </div>
 
-          <div className={[_s.default, _s.mt15, _s.width100PC, _s.alignItemsCenter].join(' ')}>
-            <div className={[_s.default, _s.border1PX, _s.borderColorSecondary, _s.overflowHidden, _s.radiusSmall, _s.bgPrimary].join(' ')}>
+          <div className={[_s._, _s.mt15, _s.w100PC, _s.aiCenter].join(' ')}>
+            <div className={[_s._, _s.border1PX, _s.borderColorSecondary, _s.overflowHidden, _s.radiusSmall, _s.bgPrimary].join(' ')}>
               <FileInput
                 width='300px'
                 height='140px'
                 id='cover-photo'
                 onChange={this.handleCoverPhotoChange}
               />
-              <div className={[_s.default, _s.mtNeg32PX, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+              <div className={[_s._, _s.mtNeg32PX, _s.aiCenter, _s.jcCenter].join(' ')}>
                 <FileInput
                   width='124px'
                   height='124px'
@@ -118,7 +118,7 @@ class SlidePhotos extends ImmutablePureComponent {
                   onChange={this.handleProfilePhotoChange}
                 />
               </div>
-              <div className={[_s.default, _s.py5, _s.px15, _s.mt5, _s.mb15].join(' ')}>
+              <div className={[_s._, _s.py5, _s.px15, _s.mt5, _s.mb15].join(' ')}>
                 <Input
                   id='display-name'
                   title='Display name'
@@ -148,13 +148,13 @@ class SlideGroups extends ImmutablePureComponent {
     const { groupIds } = this.props
 
     return (
-      <div className={[_s.default, _s.width100PC].join(' ')}>
-        <div className={[_s.default, _s.py15, _s.alignItemsCenter].join(' ')}>
-          <div className={[_s.default, _s.px15, _s.mb15].join(' ')}>
+      <div className={[_s._, _s.w100PC].join(' ')}>
+        <div className={[_s._, _s.py15, _s.aiCenter].join(' ')}>
+          <div className={[_s._, _s.px15, _s.mb15].join(' ')}>
             <Text size='large'>Gab Groups are a great way to connect with people who share your interests. Please select a few groups to get started.</Text>
           </div>
 
-          <div className={[_s.default, _s.width100PC].join(' ')}>
+          <div className={[_s._, _s.w100PC].join(' ')}>
             {
               groupIds.map((groupId, i) => (
                 <GroupListItem
@@ -185,8 +185,8 @@ class SlideFirstPost extends React.PureComponent {
     const { submitted } = this.props
 
     return (
-      <div className={[_s.default, _s.width100PC].join(' ')}>
-        <div className={[_s.default, _s.py15, _s.px15].join(' ')}>
+      <div className={[_s._, _s.w100PC].join(' ')}>
+        <div className={[_s._, _s.py15, _s.px15].join(' ')}>
           {
             !submitted &&
             <React.Fragment>
@@ -195,7 +195,7 @@ class SlideFirstPost extends React.PureComponent {
 
               <Divider />
 
-              <div className={[_s.default, _s.mt15, _s.boxShadowBlock, _s.radiusSmall].join(' ')}>
+              <div className={[_s._, _s.mt15, _s.boxShadowBlock, _s.radiusSmall].join(' ')}>
                 <ComposeFormContainer
                   groupId={GAB_COM_INTRODUCE_YOURSELF_GROUP_ID}
                   hidePro
@@ -342,8 +342,8 @@ class Introduction extends ImmutablePureComponent {
     const nextTitle = currentIndex === 3 ? 'Finish' : 'Next'
 
     return (
-      <div className={[_s.default, _s.width100PC, _s.heightMax80VH].join(' ')}>
-        <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX, _s.px15].join(' ')}>
+      <div className={[_s._, _s.w100PC, _s.maxH80VH].join(' ')}>
+        <div className={[_s._, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.h53PX, _s.px15].join(' ')}>
           <Responsive min={BREAKPOINT_EXTRA_SMALL}>
             <Heading>
               {title}
@@ -369,7 +369,7 @@ class Introduction extends ImmutablePureComponent {
                     <Text color='white' className={_s.px5}>{nextTitle}</Text>
                   </Responsive>
                   <Responsive max={BREAKPOINT_EXTRA_SMALL}>
-                    <Icon id='check' size='14px' className={_s.colorWhite} />
+                    <Icon id='check' size='14px' className={_s.cWhite} />
                   </Responsive>
                 </React.Fragment>
               }
@@ -380,7 +380,7 @@ class Introduction extends ImmutablePureComponent {
         <ReactSwipeableViews
           index={currentIndex}
           onChangeIndex={this.handleSwipe}
-          className={[_s.default, _s.flexNormal, _s.heightCalc80VH106PX].join(' ')}
+          className={[_s._, _s.flexNormal, _s.calcH80VH106PX].join(' ')}
           containerStyle={{
             width: '100%',
           }}
@@ -390,15 +390,15 @@ class Introduction extends ImmutablePureComponent {
         >
           {
             pages.map((page, i) => (
-              <div key={i} className={[_s.default, _s.heightCalc80VH106PX].join(' ')}>
+              <div key={i} className={[_s._, _s.calcH80VH106PX].join(' ')}>
                 {page}
               </div>
             ))
           }
         </ReactSwipeableViews>
 
-        <div className={[_s.default, _s.px15, _s.height53PX, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderTop1PX, _s.borderColorSecondary, _s.width100PC, _s.flexRow].join(' ')}>
-          <div className={[_s.default, _s.width50PX, _s.mrAuto].join(' ')}>
+        <div className={[_s._, _s.px15, _s.h53PX, _s.aiCenter, _s.jcCenter, _s.borderTop1PX, _s.borderColorSecondary, _s.w100PC, _s.flexRow].join(' ')}>
+          <div className={[_s._, _s.w50PX, _s.mrAuto].join(' ')}>
             {
               currentIndex !== 0 &&
               <Button
@@ -412,7 +412,7 @@ class Introduction extends ImmutablePureComponent {
             }
           </div>
             
-          <div className={[_s.default, _s.height100PC, _s.flexGrow1, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+          <div className={[_s._, _s.h100PC, _s.flexGrow1, _s.aiCenter, _s.jcCenter].join(' ')}>
             <Pagination
               count={pages.length}
               activeIndex={currentIndex}
@@ -424,7 +424,7 @@ class Introduction extends ImmutablePureComponent {
           <Button
             isText
             href={currentIndex === 3 ? '/home' : undefined}
-            className={[_s.default, _s.width50PX, _s.height100PC, _s.justifyContentCenter, _s.pr0, _s.pl0, _s.mlAuto, _s.opacity05].join(' ')}
+            className={[_s._, _s.w50PX, _s.h100PC, _s.jcCenter, _s.pr0, _s.pl0, _s.mlAuto, _s.opacity05].join(' ')}
             onClick={this.handleNext}
             backgroundColor='none'
             color='secondary'
diff --git a/app/javascript/gabsocial/features/list_create.js b/app/javascript/gabsocial/features/list_create.js
index 3ce8952b..26e63553 100644
--- a/app/javascript/gabsocial/features/list_create.js
+++ b/app/javascript/gabsocial/features/list_create.js
@@ -62,7 +62,7 @@ class ListCreate extends React.PureComponent {
           onChange={onChange}
         />
 
-        <div className={[_s.default, _s.my10, _s.py5, _s.ml10].join(' ')}>
+        <div className={[_s._, _s.my10, _s.py5, _s.ml10].join(' ')}>
           <Text color='secondary' size='small'>
             {intl.formatMessage(messages.list_description)}
           </Text>
diff --git a/app/javascript/gabsocial/features/list_edit.js b/app/javascript/gabsocial/features/list_edit.js
index db21413e..ad04380d 100644
--- a/app/javascript/gabsocial/features/list_edit.js
+++ b/app/javascript/gabsocial/features/list_edit.js
@@ -193,8 +193,8 @@ class ListEdit extends ImmutablePureComponent {
 
     return (
       <div>
-        <div className={[_s.default, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}>
-          <div className={[_s.default, _s.z4, _s.bgPrimary, _s.px15, _s.top0, _s.posSticky, _s.borderBottom1PX, _s.borderColorSecondary,].join(' ')}>
+        <div className={[_s._, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}>
+          <div className={[_s._, _s.z4, _s.bgPrimary, _s.px15, _s.top0, _s.posSticky, _s.borderBottom1PX, _s.borderColorSecondary,].join(' ')}>
             <TabBar
               tabs={[
                 {
@@ -218,10 +218,10 @@ class ListEdit extends ImmutablePureComponent {
 
           {
             activeTab === 'members' &&
-            <div className={[_s.default, _s.mb10, _s.py10].join(' ')}>
-              <div className={[_s.default, _s.pb10, _s.pt5].join(' ')}>
-                <div className={[_s.default].join(' ')}>
-                  <Text weight='bold' size='small' color='secondary' className={[_s.default, _s.px15, _s.mt5, _s.mb15].join(' ')}>
+            <div className={[_s._, _s.mb10, _s.py10].join(' ')}>
+              <div className={[_s._, _s.pb10, _s.pt5].join(' ')}>
+                <div className={[_s._].join(' ')}>
+                  <Text weight='bold' size='small' color='secondary' className={[_s._, _s.px15, _s.mt5, _s.mb15].join(' ')}>
                     Total members ({accountIds.size})
                   </Text>
                   {
@@ -243,8 +243,8 @@ class ListEdit extends ImmutablePureComponent {
 
           {
             activeTab === 'settings' &&
-            <div className={[_s.default, _s.mb10, _s.pb10, _s.px15].join(' ')}>
-              <div className={[_s.default, _s.py15].join(' ')}>
+            <div className={[_s._, _s.mb10, _s.pb10, _s.px15].join(' ')}>
+              <div className={[_s._, _s.py15].join(' ')}>
                 <Input
                   title={intl.formatMessage(messages.editListTitle)}
                   placeholder='My new list title...'
@@ -271,8 +271,8 @@ class ListEdit extends ImmutablePureComponent {
 
           {
             activeTab === 'add-new' &&
-            <div className={[_s.default, _s.mb10, _s.py10].join(' ')}>
-              <div className={[_s.default, _s.px15].join(' ')}>
+            <div className={[_s._, _s.mb10, _s.py10].join(' ')}>
+              <div className={[_s._, _s.px15].join(' ')}>
                 <Input
                   placeholder={intl.formatMessage(messages.search)}
                   value={searchSuggestionsValue}
@@ -285,9 +285,9 @@ class ListEdit extends ImmutablePureComponent {
                 />
               </div>
 
-              <div className={[_s.default, _s.pt10].join(' ')}>
-                <div className={[_s.default].join(' ')}>
-                  <Text weight='bold' size='small' color='secondary' className={[_s.default, _s.px15, _s.mt5, _s.mb15].join(' ')}>
+              <div className={[_s._, _s.pt10].join(' ')}>
+                <div className={[_s._].join(' ')}>
+                  <Text weight='bold' size='small' color='secondary' className={[_s._, _s.px15, _s.mt5, _s.mb15].join(' ')}>
                     Search results ({searchAccountIds.size})
                   </Text>
                   {
diff --git a/app/javascript/gabsocial/features/list_timeline.js b/app/javascript/gabsocial/features/list_timeline.js
index 084bacb9..a050f0ba 100644
--- a/app/javascript/gabsocial/features/list_timeline.js
+++ b/app/javascript/gabsocial/features/list_timeline.js
@@ -88,7 +88,7 @@ class ListTimeline extends ImmutablePureComponent {
     }
 
     const emptyMessage = (
-      <div className={[_s.default, _s.py15, _s.px15, _s.alignItemsCenter].join(' ')}>
+      <div className={[_s._, _s.py15, _s.px15, _s.aiCenter].join(' ')}>
         <FormattedMessage
           id='empty_column.list'
           defaultMessage='There is nothing in this list yet. When members of this list post new statuses, they will appear here.'
diff --git a/app/javascript/gabsocial/features/news.js b/app/javascript/gabsocial/features/news.js
index 55a74a64..e15d1322 100644
--- a/app/javascript/gabsocial/features/news.js
+++ b/app/javascript/gabsocial/features/news.js
@@ -128,7 +128,7 @@ class News extends React.PureComponent {
       ]
     } catch (error) {
       return (
-        <div className={[_s.default, _s.width100PC].join(' ')}>
+        <div className={[_s._, _s.w100PC].join(' ')}>
           <Block>
             <ColumnIndicator type='loading' />
           </Block>
@@ -141,25 +141,25 @@ class News extends React.PureComponent {
     }
 
     return (
-      <div className={[_s.default, _s.width100PC].join(' ')}>
+      <div className={[_s._, _s.w100PC].join(' ')}>
         <Block>
-          <div className={[_s.default, _s.width100PC, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+          <div className={[_s._, _s.w100PC, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
             <Responsive min={BREAKPOINT_EXTRA_SMALL}>
               <TabBar tabs={domainTabs} />
             </Responsive>
             <Responsive max={BREAKPOINT_EXTRA_SMALL}>
-              <div className={[_s.default, _s.width100PC, _s.pt10, _s.pb5].join(' ')}>
+              <div className={[_s._, _s.w100PC, _s.pt10, _s.pb5].join(' ')}>
                 <Pills pills={domainTabs} />
               </div>
             </Responsive>
           </div>
 
-          <div className={[_s.default, _s.px15].join(' ')}>
+          <div className={[_s._, _s.px15].join(' ')}>
             {
               !activeDomain &&
-              <div className={[_s.default, _s.py15, _s.mt15, _s.mb15].join(' ')}>
+              <div className={[_s._, _s.py15, _s.mt15, _s.mb15].join(' ')}>
                 <Heading size='h1'>
-                  <a href={`https://trends.gab.com/trend?url=${headlineLink}`} className={[_s.noUnderline, _s.colorPrimary].join(' ')}>
+                  <a href={`https://trends.gab.com/trend?url=${headlineLink}`} className={[_s.noUnderline, _s.cPrimary].join(' ')}>
                     {headline}
                   </a>
                 </Heading>
@@ -168,8 +168,8 @@ class News extends React.PureComponent {
             
             {
               !activeDomain && leadHeadlines.length > 0 &&
-                <div className={[_s.default, _s.mb15].join(' ')}>
-                  <div className={[_s.default, _s.px15, _s.py10, _s.borderBottom1PX, _s.bgSubtle, _s.borderColorSecondary, _s.justifyContentCenter].join(' ')}>
+                <div className={[_s._, _s.mb15].join(' ')}>
+                  <div className={[_s._, _s.px15, _s.py10, _s.borderBottom1PX, _s.bgSubtle, _s.borderColorSecondary, _s.jcCenter].join(' ')}>
                     <Heading size='h2'>
                       <Icon id='trends' className={[_s.mr10].join(' ')} size='18px' />
                       Headlines
@@ -181,7 +181,7 @@ class News extends React.PureComponent {
                         isText
                         backgroundColor='none'
                         color='primary'
-                        className={[_s.default, _s.py7].join(' ')}
+                        className={[_s._, _s.py7].join(' ')}
                         href={`https://trends.gab.com/trend?url=${lead.href}`}
                       >
                         <Text>
@@ -194,13 +194,13 @@ class News extends React.PureComponent {
             }
 
             <div>
-              <div className={[_s.default, _s.px15, _s.mt15, _s.py10, _s.borderBottom1PX, _s.bgSubtle, _s.borderColorSecondary, _s.justifyContentCenter].join(' ')}>
+              <div className={[_s._, _s.px15, _s.mt15, _s.py10, _s.borderBottom1PX, _s.bgSubtle, _s.borderColorSecondary, _s.jcCenter].join(' ')}>
                 <Heading size='h2'>
                   <Icon id='trends' className={[_s.mr10].join(' ')} size='18px' />
                   {todaysTopTitle}
                 </Heading>
               </div>
-              <div className={[_s.default, _s.py10].join(' ')}>
+              <div className={[_s._, _s.py10].join(' ')}>
                 {
                   todaysTop.map((block, i) => (
                     <TrendsItem
diff --git a/app/javascript/gabsocial/features/search.js b/app/javascript/gabsocial/features/search.js
index b04549f2..9d769666 100644
--- a/app/javascript/gabsocial/features/search.js
+++ b/app/javascript/gabsocial/features/search.js
@@ -66,7 +66,7 @@ class Search extends ImmutablePureComponent {
       return (
         <ResponsiveClassesComponent classNamesXS={_s.px10}>
           <Block>
-            <div className={[_s.default, _s.py15, _s.px15].join(' ')}>
+            <div className={[_s._, _s.py15, _s.px15].join(' ')}>
               <Text>Type in the box above and submit to perform a search.</Text>
             </div>
           </Block>
@@ -97,7 +97,7 @@ class Search extends ImmutablePureComponent {
           footerButtonTitle={isMax ? undefined : 'See more'}
           noPadding
         >
-          <div className={[_s.default, _s.pb10, _s.px15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+          <div className={[_s._, _s.pb10, _s.px15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
             <Text color='tertiary' size='small'>
               Showing {size} of {results.get('accounts').size} results
             </Text>
@@ -129,12 +129,12 @@ class Search extends ImmutablePureComponent {
           footerButtonTitle={isMax ? undefined : 'See more'}
           noPadding
         >
-          <div className={[_s.default, _s.pb10, _s.px15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+          <div className={[_s._, _s.pb10, _s.px15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
             <Text color='tertiary' size='small'>
               Showing {size} of {results.get('groups').size} results
             </Text>
           </div>
-          <div className={_s.default}>
+          <div className={_s._}>
             {
               results.get('groups').slice(0, size).map((group, i) => (
                 <GroupListItem
@@ -162,7 +162,7 @@ class Search extends ImmutablePureComponent {
           footerButtonTitle={isMax ? undefined : 'See more'}
           noPadding
         >
-          <div className={[_s.default, _s.pb10, _s.px15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+          <div className={[_s._, _s.pb10, _s.px15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
             <Text color='tertiary' size='small'>
               Showing {size} of {results.get('hashtags').size} results
             </Text>
diff --git a/app/javascript/gabsocial/features/ui/ui.js b/app/javascript/gabsocial/features/ui/ui.js
index c384d3e1..94652b68 100644
--- a/app/javascript/gabsocial/features/ui/ui.js
+++ b/app/javascript/gabsocial/features/ui/ui.js
@@ -560,7 +560,7 @@ class UI extends React.PureComponent {
 
     return (
       <div ref={this.setRef} className={_s.gabsocial}>
-        <LoadingBar className={[_s.height1PX, _s.z3, _s.bgBrandLight].join(' ')} />
+        <LoadingBar className={[_s.h1PX, _s.z3, _s.bgBrandLight].join(' ')} />
 
         <SwitchingArea location={location} onLayoutChange={this.handleLayoutChange}>
           {children}
diff --git a/app/javascript/gabsocial/layouts/about_layout.js b/app/javascript/gabsocial/layouts/about_layout.js
index 1378db18..1ccfa350 100644
--- a/app/javascript/gabsocial/layouts/about_layout.js
+++ b/app/javascript/gabsocial/layouts/about_layout.js
@@ -61,17 +61,17 @@ class SettingsLayout extends React.PureComponent {
     const { menuItems } = this
 
     const mainBlockClasses = CX({
-      default: 1,
-      width1015PX: 1,
+      _: 1,
+      w1015PX: 1,
       flexRow: 1,
-      justifyContentEnd: 1,
+      jcEnd: 1,
       py15: 1,
       mlAuto: !me,
       mrAuto: !me,
     })
 
     return (
-      <div className={[_s.default, _s.width100PC, _s.heightMin100VH, _s.bgPrimary].join(' ')}>
+      <div className={[_s._, _s.w100PC, _s.minH100VH, _s.bgPrimary].join(' ')}>
 
         <Responsive max={BREAKPOINT_EXTRA_SMALL}>
           <WrappedBundle component={SidebarXS} />
@@ -86,31 +86,31 @@ class SettingsLayout extends React.PureComponent {
           <LoggedOutNavigationBar />
         }
 
-        <div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
+        <div className={[_s._, _s.flexRow, _s.w100PC].join(' ')}>
 
           <Responsive min={BREAKPOINT_EXTRA_SMALL}>
             <WrappedBundle component={AboutSidebar} componentParams={{ title, items: menuItems }} />
           </Responsive>
 
           <ResponsiveClassesComponent
-            classNames={[_s.default, _s.flexShrink1, _s.flexGrow1].join(' ')}
-            classNamesSmall={[_s.default, _s.flexShrink1, _s.flexGrow1].join(' ')}
-            classNamesXS={[_s.default, _s.width100PC].join(' ')}
+            classNames={[_s._, _s.flexShrink1, _s.flexGrow1].join(' ')}
+            classNamesSmall={[_s._, _s.flexShrink1, _s.flexGrow1].join(' ')}
+            classNamesXS={[_s._, _s.w100PC].join(' ')}
           >
             <main role='main'>
 
               <ResponsiveClassesComponent
                 classNames={mainBlockClasses}
-                classNamesXS={[_s.default, _s.width1015PX, _s.justifyContentEnd, _s.pb15].join(' ')}
+                classNamesXS={[_s._, _s.w1015PX, _s.jcEnd, _s.pb15].join(' ')}
               >
 
-                <div className={[_s.default, _s.width1015PX, _s.z1].join(' ')}>
+                <div className={[_s._, _s.w1015PX, _s.z1].join(' ')}>
 
                   <Responsive max={BREAKPOINT_EXTRA_SMALL}>
                     <WrappedBundle component={AboutSidebar} componentParams={{ title, items: menuItems }} />
                   </Responsive>
       
-                  <div className={_s.default}>
+                  <div className={_s._}>
                     {children}
                   </div>
                 </div>
diff --git a/app/javascript/gabsocial/layouts/explore_layout.js b/app/javascript/gabsocial/layouts/explore_layout.js
index d315964b..1aeab94d 100644
--- a/app/javascript/gabsocial/layouts/explore_layout.js
+++ b/app/javascript/gabsocial/layouts/explore_layout.js
@@ -55,7 +55,7 @@ class ExploreLayout extends ImmutablePureComponent {
     const { lazyLoaded } = this.state
 
     const pageTitleBlock = (
-      <div className={[_s.default, _s.pl15, _s.pb10].join(' ')}>
+      <div className={[_s._, _s.pl15, _s.pb10].join(' ')}>
         <Heading size='h2'>Popular posts across Gab</Heading>
       </div>
     )
@@ -69,10 +69,10 @@ class ExploreLayout extends ImmutablePureComponent {
         title={title}
       >
         <Responsive max={BREAKPOINT_EXTRA_SMALL}>
-          <div className={[_s.default, _s.width100PC].join(' ')}>
+          <div className={[_s._, _s.w100PC].join(' ')}>
 
-            <div className={[_s.default, _s.width100PC, _s.z1].join(' ')}>
-              <div className={[_s.default, _s.mt15, _s.px10].join(' ')}>
+            <div className={[_s._, _s.w100PC, _s.z1].join(' ')}>
+              <div className={[_s._, _s.mt15, _s.px10].join(' ')}>
                 <WrappedBundle component={SignUpLogInPanel} componentParams={{ isXS: true }} />
               </div>
               {pageTitleBlock}
@@ -83,20 +83,20 @@ class ExploreLayout extends ImmutablePureComponent {
         </Responsive>
 
         <Responsive min={BREAKPOINT_EXTRA_SMALL}>
-          <div className={[_s.default, _s.width100PC, _s.pl15].join(' ')}>
+          <div className={[_s._, _s.w100PC, _s.pl15].join(' ')}>
 
-            <div className={[_s.default, _s.flexRow, _s.width100PC, _s.justifyContentEnd].join(' ')}>
-              <div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>  
+            <div className={[_s._, _s.flexRow, _s.w100PC, _s.jcEnd].join(' ')}>
+              <div className={[_s._, _s.w645PX, _s.z1].join(' ')}>  
 
-                <div className={_s.default}>
+                <div className={_s._}>
                   {pageTitleBlock}
                   {children}
                 </div>
               </div>
 
-              <div className={[_s.default, _s.ml15, _s.width340PX].join(' ')}>
+              <div className={[_s._, _s.ml15, _s.w340PX].join(' ')}>
                 <Sticky top={73} enabled>
-                  <div className={[_s.default, _s.width340PX].join(' ')}>
+                  <div className={[_s._, _s.w340PX].join(' ')}>
                     <SidebarPanelGroup
                       page='explore'
                       layout={[
diff --git a/app/javascript/gabsocial/layouts/group_layout.js b/app/javascript/gabsocial/layouts/group_layout.js
index 459c102a..d062c31c 100644
--- a/app/javascript/gabsocial/layouts/group_layout.js
+++ b/app/javascript/gabsocial/layouts/group_layout.js
@@ -35,13 +35,13 @@ class GroupLayout extends ImmutablePureComponent {
         page='group'
       >
         <Responsive max={BREAKPOINT_EXTRA_SMALL}>
-          <div className={[_s.default, _s.width100PC].join(' ')}>
+          <div className={[_s._, _s.w100PC].join(' ')}>
 
             <GroupHeader group={group} relationships={relationships} isXS>
               <WrappedBundle component={GroupInfoPanel} componentParams={{ group, noPanel: true }} />
             </GroupHeader>
 
-            <div className={[_s.default, _s.width100PC, _s.z1].join(' ')}>
+            <div className={[_s._, _s.w100PC, _s.z1].join(' ')}>
               {children}
             </div>
 
@@ -49,20 +49,20 @@ class GroupLayout extends ImmutablePureComponent {
         </Responsive>
 
         <Responsive min={BREAKPOINT_EXTRA_SMALL}>
-          <div className={[_s.default, _s.width100PC, _s.pl15].join(' ')}>
+          <div className={[_s._, _s.w100PC, _s.pl15].join(' ')}>
 
             <GroupHeader group={group} relationships={relationships} />
 
-            <div className={[_s.default, _s.flexRow, _s.width100PC, _s.justifyContentEnd].join(' ')}>
-              <div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
-                <div className={_s.default}>
+            <div className={[_s._, _s.flexRow, _s.w100PC, _s.jcEnd].join(' ')}>
+              <div className={[_s._, _s.w645PX, _s.z1].join(' ')}>
+                <div className={_s._}>
                   {children}
                 </div>
               </div>
 
-              <div className={[_s.default, _s.ml15, _s.width340PX].join(' ')}>
+              <div className={[_s._, _s.ml15, _s.w340PX].join(' ')}>
                 <Sticky top={73} enabled>
-                  <div className={[_s.default, _s.width340PX].join(' ')}>
+                  <div className={[_s._, _s.w340PX].join(' ')}>
                     <SidebarPanelGroup
                       page={`group.${groupId}`}
                       layout={[
diff --git a/app/javascript/gabsocial/layouts/introduction_layout.js b/app/javascript/gabsocial/layouts/introduction_layout.js
index 8ab12a8f..ee605880 100644
--- a/app/javascript/gabsocial/layouts/introduction_layout.js
+++ b/app/javascript/gabsocial/layouts/introduction_layout.js
@@ -13,15 +13,15 @@ export default class IntroductionLayout extends React.PureComponent {
 
   render() {
     return (
-      <div className={[_s.default, _s.width100PC, _s.heightMin100VH, _s.bgTertiary].join(' ')}>
+      <div className={[_s._, _s.w100PC, _s.minH100VH, _s.bgTertiary].join(' ')}>
 
-        <div className={[_s.default, _s.z4, _s.heightMin53PX, _s.width100PC].join(' ')}>
-          <div className={[_s.default, _s.heightMin53PX, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
-            <div className={[_s.default, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.flexRow, _s.width1255PX].join(' ')}>
-              <div className={[_s.default, _s.flexRow].join(' ')}>
+        <div className={[_s._, _s.z4, _s.minH53PX, _s.w100PC].join(' ')}>
+          <div className={[_s._, _s.minH53PX, _s.bgNavigation, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
+            <div className={[_s._, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.flexRow, _s.w1255PX].join(' ')}>
+              <div className={[_s._, _s.flexRow].join(' ')}>
 
-                <h1 className={[_s.default, _s.mr15].join(' ')}>
-                  <div className={[_s.default, _s.justifyContentCenter, _s.noSelect, _s.noUnderline, _s.height53PX, _s.px10, _s.mr15].join(' ')}>
+                <h1 className={[_s._, _s.mr15].join(' ')}>
+                  <div className={[_s._, _s.jcCenter, _s.noSelect, _s.noUnderline, _s.h53PX, _s.px10, _s.mr15].join(' ')}>
                     <Icon id='logo' className={_s.fillNavigationBrand} />
                   </div>
                 </h1>
@@ -31,12 +31,12 @@ export default class IntroductionLayout extends React.PureComponent {
           </div>
         </div>
 
-        <div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
-          <div className={[_s.default, _s.width100PC].join(' ')}>
+        <div className={[_s._, _s.flexRow, _s.w100PC].join(' ')}>
+          <div className={[_s._, _s.w100PC].join(' ')}>
             <main role='main'>
-              <div className={[_s.default, _s.alignItemsCenter, _s.py15, _s.px15, _s.mlAuto, _s.mrAuto].join(' ')}>
+              <div className={[_s._, _s.aiCenter, _s.py15, _s.px15, _s.mlAuto, _s.mrAuto].join(' ')}>
 
-                <div className={[_s.default, _s.width645PX, _s.maxWidth100PC42PX].join(' ')}>
+                <div className={[_s._, _s.w645PX, _s.maxW100PC42PX].join(' ')}>
                   <Block>
                     <Bundle fetchComponent={Introduction} error={this.renderError}>
                       {Component => (<Component />)}
diff --git a/app/javascript/gabsocial/layouts/layout.js b/app/javascript/gabsocial/layouts/layout.js
index 1cbdf45a..4cd131a3 100644
--- a/app/javascript/gabsocial/layouts/layout.js
+++ b/app/javascript/gabsocial/layouts/layout.js
@@ -41,16 +41,16 @@ class Layout extends React.PureComponent {
     } = this.props
 
     const mainBlockClasses = CX({
-      default: 1,
-      width1015PX: 1,
+      _: 1,
+      w1015PX: 1,
       flexRow: 1,
-      justifyContentEnd: 1,
+      jcEnd: 1,
       py15: page !== 'group',
       pb15: page === 'group',
     })
 
     return (
-      <div className={[_s.default, _s.width100PC, _s.heightMin100VH, _s.bgTertiary].join(' ')}>
+      <div className={[_s._, _s.w100PC, _s.minH100VH, _s.bgTertiary].join(' ')}>
 
         <Responsive max={BREAKPOINT_EXTRA_SMALL}>
           <WrappedBundle component={SidebarXS} />
@@ -70,7 +70,7 @@ class Layout extends React.PureComponent {
           <LoggedOutNavigationBar />
         }
 
-        <div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
+        <div className={[_s._, _s.flexRow, _s.w100PC].join(' ')}>
           {
             !noSidebar &&
             <Responsive min={BREAKPOINT_EXTRA_SMALL}>
@@ -91,15 +91,15 @@ class Layout extends React.PureComponent {
           }
 
           <ResponsiveClassesComponent
-            classNames={[_s.default, _s.flexShrink1, _s.flexGrow1].join(' ')}
-            classNamesSmall={[_s.default, _s.flexShrink1, _s.flexGrow1].join(' ')}
-            classNamesXS={[_s.default, _s.width100PC].join(' ')}
+            classNames={[_s._, _s.flexShrink1, _s.flexGrow1].join(' ')}
+            classNamesSmall={[_s._, _s.flexShrink1, _s.flexGrow1].join(' ')}
+            classNamesXS={[_s._, _s.w100PC].join(' ')}
           >
             <main role='main'>
 
               <ResponsiveClassesComponent
                 classNames={mainBlockClasses}
-                classNamesXS={[_s.default, _s.width1015PX, _s.justifyContentEnd, _s.pb15].join(' ')}
+                classNamesXS={[_s._, _s.w1015PX, _s.jcEnd, _s.pb15].join(' ')}
               >
 
                 {
@@ -108,18 +108,18 @@ class Layout extends React.PureComponent {
 
                 {
                   !noRightSidebar &&
-                  <div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
+                  <div className={[_s._, _s.w645PX, _s.z1].join(' ')}>
 
                     {
                       !!tabs &&
                       <Responsive max={BREAKPOINT_EXTRA_SMALL}>
-                        <div className={[_s.default, _s.py15].join(' ')}>
+                        <div className={[_s._, _s.py15].join(' ')}>
                           <Pills pills={tabs} />
                         </div>
                       </Responsive>
                     }
 
-                    <div className={_s.default}>
+                    <div className={_s._}>
                       {children}
                     </div>
                   </div>
@@ -128,9 +128,9 @@ class Layout extends React.PureComponent {
                 {
                   !noRightSidebar &&
                   <Responsive min={BREAKPOINT_EXTRA_SMALL}>
-                    <div className={[_s.default, _s.width340PX, _s.ml15].join(' ')}>
+                    <div className={[_s._, _s.w340PX, _s.ml15].join(' ')}>
                       <Sticky top={73} enabled>
-                        <div className={[_s.default, _s.width340PX].join(' ')}>
+                        <div className={[_s._, _s.w340PX].join(' ')}>
                           <SidebarPanelGroup layout={layout} page={page} />
                         </div>
                       </Sticky>
diff --git a/app/javascript/gabsocial/layouts/profile_layout.js b/app/javascript/gabsocial/layouts/profile_layout.js
index c853780d..9838b189 100644
--- a/app/javascript/gabsocial/layouts/profile_layout.js
+++ b/app/javascript/gabsocial/layouts/profile_layout.js
@@ -35,14 +35,14 @@ class ProfileLayout extends ImmutablePureComponent {
     } = this.props
 
     const mainContentClasses = CX({
-      default: 1,
+      _: 1,
       width645PX: !noSidebar,
-      width1015PX: noSidebar,
+      w1015PX: noSidebar,
       z1: 1,
     })
 
     return (
-      <div className={[_s.default, _s.width100PC, _s.heightMin100VH, _s.bgTertiary].join(' ')}>
+      <div className={[_s._, _s.w100PC, _s.minH100VH, _s.bgTertiary].join(' ')}>
         <Responsive max={BREAKPOINT_EXTRA_SMALL}>
           {
             !!me &&
@@ -53,12 +53,12 @@ class ProfileLayout extends ImmutablePureComponent {
             <LoggedOutNavigationBar isProfile />
           }
 
-          <main role='main' className={[_s.default, _s.width100PC].join(' ')}>
+          <main role='main' className={[_s._, _s.w100PC].join(' ')}>
 
-            <div className={[_s.default, _s.width100PC, _s.flexRow, _s.pb15].join(' ')}>
+            <div className={[_s._, _s.w100PC, _s.flexRow, _s.pb15].join(' ')}>
 
-              <div className={[_s.default, _s.width100PC, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
-                <div className={[_s.default, _s.z1, _s.width100PC, _s.alignItemsCenter].join(' ')}>
+              <div className={[_s._, _s.w100PC, _s.flexRow, _s.jcSpaceBetween].join(' ')}>
+                <div className={[_s._, _s.z1, _s.w100PC, _s.aiCenter].join(' ')}>
 
                   <ProfileHeader account={account} isXS>
                     <WrappedBundle component={ProfileInfoPanel} componentParams={{ account, noPanel: true }} />
@@ -66,9 +66,9 @@ class ProfileLayout extends ImmutablePureComponent {
                     <WrappedBundle component={ProfileStatsPanel} componentParams={{ account, noPanel: true }} />
                   </ProfileHeader>
 
-                  <div className={[_s.default, _s.width100PC, , _s.flexRow, _s.justifyContentEnd, _s.py15].join(' ')}>
-                    <div className={[_s.default, _s.width100PC, _s.z1].join(' ')}>
-                      <div className={_s.default}>
+                  <div className={[_s._, _s.w100PC, , _s.flexRow, _s.jcEnd, _s.py15].join(' ')}>
+                    <div className={[_s._, _s.w100PC, _s.z1].join(' ')}>
+                      <div className={_s._}>
                         {children}
                       </div>
                     </div>
@@ -98,21 +98,21 @@ class ProfileLayout extends ImmutablePureComponent {
             <LoggedOutNavigationBar isProfile />
           }
 
-          <main role='main' className={[_s.default, _s.width100PC].join(' ')}>
+          <main role='main' className={[_s._, _s.w100PC].join(' ')}>
 
-            <div className={[_s.default, _s.width100PC, _s.flexRow, _s.pb15].join(' ')}>
+            <div className={[_s._, _s.w100PC, _s.flexRow, _s.pb15].join(' ')}>
 
-              <div className={[_s.default, _s.width100PC, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
-                <div className={[_s.default, _s.z1, _s.width100PC, _s.alignItemsCenter].join(' ')}>
+              <div className={[_s._, _s.w100PC, _s.flexRow, _s.jcSpaceBetween].join(' ')}>
+                <div className={[_s._, _s.z1, _s.w100PC, _s.aiCenter].join(' ')}>
 
                   <ProfileHeader account={account} />
 
-                  <div className={[_s.default, _s.width1015PX, , _s.flexRow, _s.justifyContentEnd, _s.py15].join(' ')}>
+                  <div className={[_s._, _s.w1015PX, , _s.flexRow, _s.jcEnd, _s.py15].join(' ')}>
                     {
                       !noSidebar &&
-                      <div className={[_s.default, _s.width340PX, _s.mr15].join(' ')}>
+                      <div className={[_s._, _s.w340PX, _s.mr15].join(' ')}>
                         <Sticky top={63} enabled>
-                          <div className={[_s.default, _s.width340PX].join(' ')}>
+                          <div className={[_s._, _s.w340PX].join(' ')}>
                             <WrappedBundle component={ProfileStatsPanel} componentParams={{ account }} />
                             <WrappedBundle component={ProfileInfoPanel} componentParams={{ account }} />
                             { !unavailable && <WrappedBundle component={MediaGalleryPanel} componentParams={{ account }} /> }
@@ -123,7 +123,7 @@ class ProfileLayout extends ImmutablePureComponent {
                       </div>
                     }
                     <div className={mainContentClasses}>
-                      <div className={_s.default}>
+                      <div className={_s._}>
                         {children}
                       </div>
                     </div>
diff --git a/app/javascript/gabsocial/layouts/settings_layout.js b/app/javascript/gabsocial/layouts/settings_layout.js
index 1be81b29..af791b58 100644
--- a/app/javascript/gabsocial/layouts/settings_layout.js
+++ b/app/javascript/gabsocial/layouts/settings_layout.js
@@ -21,17 +21,17 @@ class SettingsLayout extends React.PureComponent {
     const { children, title } = this.props
 
     const mainBlockClasses = CX({
-      default: 1,
-      width1015PX: 1,
+      _: 1,
+      w1015PX: 1,
       flexRow: 1,
-      justifyContentEnd: 1,
+      jcEnd: 1,
       py15: 1,
       mlAuto: !me,
       mrAuto: !me,
     })
 
     return (
-      <div className={[_s.default, _s.width100PC, _s.heightMin100VH, _s.bgTertiary].join(' ')}>
+      <div className={[_s._, _s.w100PC, _s.minH100VH, _s.bgTertiary].join(' ')}>
 
         <Responsive max={BREAKPOINT_EXTRA_SMALL}>
           <WrappedBundle component={SidebarXS} />
@@ -42,27 +42,27 @@ class SettingsLayout extends React.PureComponent {
           noSearch
         />
 
-        <div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
+        <div className={[_s._, _s.flexRow, _s.w100PC].join(' ')}>
 
           <Responsive min={BREAKPOINT_EXTRA_SMALL}>
             <SettingsSidebar title='Settings' />
           </Responsive>
 
           <ResponsiveClassesComponent
-            classNames={[_s.default, _s.flexShrink1, _s.flexGrow1].join(' ')}
-            classNamesSmall={[_s.default, _s.flexShrink1, _s.flexGrow1].join(' ')}
-            classNamesXS={[_s.default, _s.width100PC].join(' ')}
+            classNames={[_s._, _s.flexShrink1, _s.flexGrow1].join(' ')}
+            classNamesSmall={[_s._, _s.flexShrink1, _s.flexGrow1].join(' ')}
+            classNamesXS={[_s._, _s.w100PC].join(' ')}
           >
             <main role='main'>
 
               <ResponsiveClassesComponent
                 classNames={mainBlockClasses}
-                classNamesXS={[_s.default, _s.width1015PX, _s.justifyContentEnd, _s.pb15].join(' ')}
+                classNamesXS={[_s._, _s.w1015PX, _s.jcEnd, _s.pb15].join(' ')}
               >
 
-                <div className={[_s.default, _s.width1015PX, _s.z1].join(' ')}>
+                <div className={[_s._, _s.w1015PX, _s.z1].join(' ')}>
 
-                  <div className={_s.default}>
+                  <div className={_s._}>
                     {children}
                   </div>
                 </div>
diff --git a/app/javascript/gabsocial/pages/modal_page.js b/app/javascript/gabsocial/pages/modal_page.js
index c78fb7f6..763d2e7d 100644
--- a/app/javascript/gabsocial/pages/modal_page.js
+++ b/app/javascript/gabsocial/pages/modal_page.js
@@ -30,7 +30,7 @@ class ModalPage extends React.PureComponent {
         <PageTitle path={title} />
         
         <Block>
-          <div className={[_s.default, _s.py15, _s.px15].join(' ')}>
+          <div className={[_s._, _s.py15, _s.px15].join(' ')}>
             {children}
           </div>
         </Block>
diff --git a/app/javascript/gabsocial/pages/search_page.js b/app/javascript/gabsocial/pages/search_page.js
index 1f2687c3..35d1b5ba 100644
--- a/app/javascript/gabsocial/pages/search_page.js
+++ b/app/javascript/gabsocial/pages/search_page.js
@@ -66,7 +66,7 @@ class SearchPage extends React.PureComponent {
         <PageTitle path={title} />
 
         <Responsive max={BREAKPOINT_EXTRA_SMALL}>
-          <div className={[_s.default, _s.px10].join(' ')}>
+          <div className={[_s._, _s.px10].join(' ')}>
             <Search />
           </div>
         </Responsive>