From 9bf654e05fcc1e85f9946cc1abdb43a5c91fd5ee Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Thu, 17 Aug 2017 23:37:35 -0600
Subject: [PATCH] init migration to css vars

---
 ui/scss/_global.scss                      |  3 +
 ui/scss/_gui.scss                         | 20 +++---
 ui/scss/_vars.scss                        | 72 +++++++++++++-------
 ui/scss/component/_button.scss            | 28 ++++----
 ui/scss/component/_card.scss              | 80 +++++++++++------------
 ui/scss/component/_channel-indicator.scss |  2 +-
 ui/scss/component/_file-actions.scss      |  8 +--
 ui/scss/component/_form-field.scss        | 31 ++++-----
 ui/scss/component/_header.scss            | 22 +++----
 ui/scss/component/_load-screen.scss       |  4 +-
 ui/scss/component/_menu.scss              |  6 +-
 ui/scss/component/_modal.scss             |  4 +-
 ui/scss/component/_pagination.scss        |  2 +-
 ui/scss/component/_snack-bar.scss         |  6 +-
 ui/scss/component/_tooltip.scss           | 23 +++----
 ui/scss/component/_video.scss             |  7 +-
 ui/scss/page/_reward.scss                 |  4 +-
 17 files changed, 171 insertions(+), 151 deletions(-)

diff --git a/ui/scss/_global.scss b/ui/scss/_global.scss
index b2ccb4231..5e25adf46 100644
--- a/ui/scss/_global.scss
+++ b/ui/scss/_global.scss
@@ -1,5 +1,8 @@
 @charset "UTF-8";
 
+$spacing-vertical: 24px;
+$width-page-constrained: 800px;
+
 @mixin clearfix()
 {
     &:before, &:after
diff --git a/ui/scss/_gui.scss b/ui/scss/_gui.scss
index af2e7ebad..cc2fde586 100644
--- a/ui/scss/_gui.scss
+++ b/ui/scss/_gui.scss
@@ -3,23 +3,23 @@
 html
 {
   height: 100%;
-  font-size: $font-size;
+  font-size: var(--font-size);
 }
 body
 {
   font-family: 'Source Sans Pro', sans-serif;
-  line-height: $font-line-height;
+  line-height: var(--font-line-height);
 }
 
 #window
 {
   min-height: 100vh;
-  background: $color-canvas;
+  background: var(--window-bg);
 }
 
 .badge
 {
-  background: $color-money;
+  background: var(--color-money);
   display: inline-block;
   padding: 2px;
   color: white;
@@ -28,13 +28,13 @@ body
 .credit-amount--indicator
 {
   font-weight: bold;
-  color: $color-money;
+  color: var(--color-money);
 }
 
 #main-content
 {
   padding: $spacing-vertical;
-  margin-top: $height-header;
+  margin-top: var(--header-height);
   display: flex;
   flex-direction: column;
   main {
@@ -145,18 +145,18 @@ p
 
 .help {
   font-size: .85em;
-  color: $color-help;
+  color: var(--color-help);
 }
 
 .meta
 {
   font-size: 0.9em;
-  color: $color-meta-light;
+  color: var(--color-meta-light);
 }
 
 .empty
 {
-  color: $color-meta-light;
+  color:var(--color-meta-light);
   font-style: italic;
 }
 
@@ -176,7 +176,7 @@ p
   text-align: right;
   line-height: 1;
   font-size: 0.85em;
-  color: $color-help;
+  color: var(--color-help);
 }
 
 section.section-spaced {
diff --git a/ui/scss/_vars.scss b/ui/scss/_vars.scss
index 83b8fcc91..c2006d588 100644
--- a/ui/scss/_vars.scss
+++ b/ui/scss/_vars.scss
@@ -1,46 +1,70 @@
-:root {
+@import "global";
 
-  --spacing-vertical: 24px;
-  --padding-button: 12px;
-  --padding-text-link: 4px;
+:root {
 
   /* Colors */
   --color-primary: #155B4A;
-  --color-primary-light: #155B4A;
-  --color-light-alt: #155B4A;
-  --color-text-dark: #000;
   --color-black-transparent: rgba(32,32,32,0.9);
   --color-help: rgba(0,0,0,.6);
   --color-notice: #8a6d3b;
   --color-error: #a94442;
   --color-load-screen-text: #c3c3c3;
-  --color-canvas: #f5f5f5;
-  --color-bg: #ffffff;
-  --color-bg-alt: #D9D9D9;
   --color-money: #216C2A;
   --color-meta-light: #505050;
-  --color-form-border: rgba(160,160,160,.5);
 
   /* Font */
   --font-size: 16px;
   --font-line-height: 1.3333;
+  --font-size-subtext-multiple: 0.82;
 
-  --mobile-width-threshold: 801px;
-  --max-content-width: 1000px;
-  --max-text-width: 660px;
-
-  --width-page-constrained: 800px;
-  --width-input-text: 330px;
-
-  --height-button: --spacing-vertical * 1.5;
-  --height-header: --spacing-vertical * 2.5;
-  --height-video-embedded: --width-page-constrained * 9 / 16;
-
+  /* Shadows */
   --box-shadow-layer: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
   --box-shadow-focus: 2px 4px 4px 0 rgba(0,0,0,.14),2px 5px 3px -2px rgba(0,0,0,.2),2px 3px 7px 0 rgba(0,0,0,.12);
 
-  --transition-standard: .225s ease;
+  /* Misc */
+  --page-constrained-width: 800px;
+  --mobile-width-threshold: 801px;
+  --content-max-width: 1000px;
+  --standard-transition: .225s ease;
+  --nsfw-blur-intensity: 20px;
+  --height-video-embedded: $width-page-constrained * 9 / 16 ;
 
-  --blur-intensity-nsfw: 20px;
+  /* Text */
+  --text-color: #000;
+  --text-max-width: 660px;
+  --text-link-padding: 4px;
 
+  /* Input */
+  --input-width: 330px;
+
+  /* Button */
+  --button-primary-bg: var(--color-primary);
+  --button-primary-color: #FFF;
+  --button-padding: 12px;
+  --button-height: $spacing-vertical * 1.5;
+
+  /* Header */
+  --header-bg: #FFF;
+  --header-color: #666;
+  --header-height: $spacing-vertical * 2.5;
+
+  /* Window */
+  --window-bg: #f5f5f5;
+
+  /* Card */
+  --card-bg: #FFF;
+  --card-hover-translate: 10px;
+  --card-margin: $spacing-vertical * 2/3;
+  --card-max-width: $width-page-constrained;
+  --card-padding: var(--card-margin);
+  --card-radius: 2px;
+  --card-link-scaling: 1.1;
+  --card-shadow: var(--box-shadow-layer);
+  --card-small-width: $spacing-vertical * 10;
+
+  /* Tooltip */
+  --tooltip-body-width: 300px;
+  --tooltip-bg: #FFF;
+  --tooltip-color: var(--text-color);
+  --tooltip-shadow: var(--box-shadow-layer);
 }
diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss
index 5c6fed22f..9f8646f54 100644
--- a/ui/scss/component/_button.scss
+++ b/ui/scss/component/_button.scss
@@ -8,15 +8,15 @@ $button-focus-shift: 12%;
 
   + .button-set-item
   {
-    margin-left: $padding-button;
+    margin-left: var(--button-padding);
   }
 }
 
 .button-block, .faux-button-block
 {
   display: inline-block;
-  height: $height-button;
-  line-height: $height-button;
+  height: var(--button-height);
+  line-height: var(--button-height);
   text-decoration: none;
   border: 0 none;
   text-align: center;
@@ -46,25 +46,25 @@ $button-focus-shift: 12%;
 }
 
 .button__content {
-  margin: 0 $padding-button;
+  margin: 0 var(--button-padding);
 }
 
 .button-primary
 {
-  $color-button-text: white;
-  color: darken($color-button-text, $button-focus-shift * 0.5);
-  background-color: $color-primary;
-  box-shadow: $box-shadow-layer;
+
+  color: inherit;
+  background-color: var(--button-primary-bg);
+  box-shadow: var(--box-shadow-layer);
   &:focus {
-    color: $color-button-text;
+    color: var(--button-primary-color);
     //box-shadow: $box-shadow-focus;
-    background-color: mix(black, $color-primary, $button-focus-shift)
+    //background-color: mix(black, $color-primary, $button-focus-shift)
   }
 }
 .button-alt
 {
-  background-color: $color-bg-alt;
-  box-shadow: $box-shadow-layer;
+  background-color: var(--color-bg-alt);
+  box-shadow: var(--box-shadow-layer);
 }
 
 .button-text
@@ -73,7 +73,7 @@ $button-focus-shift: 12%;
   display: inline-block;
 
   .button__content {
-    margin: 0 $padding-text-link;
+    margin: 0 var(--text-link-padding);
   }
 }
 .button-text-help
@@ -84,4 +84,4 @@ $button-focus-shift: 12%;
 .button--flat
 {
   box-shadow: none !important;
-}
\ No newline at end of file
+}
diff --git a/ui/scss/component/_card.scss b/ui/scss/component/_card.scss
index 712eb9ea7..65179d7ac 100644
--- a/ui/scss/component/_card.scss
+++ b/ui/scss/component/_card.scss
@@ -1,17 +1,13 @@
 @import "../global";
 
-$padding-card-horizontal: $spacing-vertical * 2/3;
-$translate-card-hover: 10px;
-$width-card-small: $spacing-vertical * 10;
-
 .card {
   margin-left: auto;
   margin-right: auto;
-  max-width: $width-page-constrained;
-  background: $color-bg;
-  box-shadow: $box-shadow-layer;
-  border-radius: 2px;
-  margin-bottom: $spacing-vertical * 2/3;
+  max-width: var(--card-max-width);
+  background: var(--card-bg);
+  box-shadow: var(--card-shadow);
+  border-radius: var(--card-radius);
+  margin-bottom: var(--card-margin);
   overflow: auto;
 }
 .card--obscured
@@ -19,14 +15,14 @@ $width-card-small: $spacing-vertical * 10;
   position: relative;
 }
 .card--obscured .card__inner {
-  filter: blur($blur-intensity-nsfw);
+  filter: blur( var(--nsfw-blur-intensity) );
 }
 .card__title-primary,
 .card__title-identity,
 .card__actions,
 .card__content,
 .card__subtext {
-  padding: 0 $padding-card-horizontal;
+  padding: 0 var(--card-padding);
 }
 .card--small {
   .card__title-primary,
@@ -34,18 +30,18 @@ $width-card-small: $spacing-vertical * 10;
   .card__actions,
   .card__content,
   .card__subtext {
-    padding: 0 $padding-card-horizontal / 2;
+    padding: 0 cacl(var(--card-padding) / 2);
   }
 }
 .card__title-primary {
-  margin-top: $spacing-vertical * 2/3;
+  margin-top: var(--card-margin);
 }
 .card__title-identity {
   margin-top: $spacing-vertical * 1/3;
   margin-bottom: $spacing-vertical * 1/3;
 }
 .card__actions {
-  margin-top: $spacing-vertical * 2/3;
+  margin-top: var(--card-margin);
 }
 .card__actions--bottom {
   margin-top: $spacing-vertical * 1/3;
@@ -53,16 +49,16 @@ $width-card-small: $spacing-vertical * 10;
 }
 .card__actions--form-submit {
   margin-top: $spacing-vertical;
-  margin-bottom: $spacing-vertical * 2/3;
+  margin-bottom: var(--card-margin);
 }
 .card__content {
-  margin-top: $spacing-vertical * 2/3;
-  margin-bottom: $spacing-vertical * 2/3;
+  margin-top: var(--card-margin);
+  margin-bottom: var(--card-margin);
 }
 $font-size-subtext-multiple: 0.82;
 .card__subtext {
-  color: $color-meta-light;
-  font-size: $font-size-subtext-multiple * 1.0em;
+  color: var(--color-meta-light);
+  font-size: calc( var(--font-size-subtext-multiple) * 1.0em );
   margin-top: $spacing-vertical * 1/3;
   margin-bottom: $spacing-vertical * 1/3;
 }
@@ -70,7 +66,7 @@ $font-size-subtext-multiple: 0.82;
   white-space: pre-wrap;
 }
 .card__subtext--two-lines {
-  height: $font-size * $font-size-subtext-multiple * $font-line-height * 2; /*this is so one line text still has the proper height*/
+  height: calc( var(--font-size) * var(--font-size-subtext-multiple) * var(--font-line-height) * 2); /*this is so one line text still has the proper height*/
 }
 .card-overlay {
   position: absolute;
@@ -86,7 +82,6 @@ $font-size-subtext-multiple: 0.82;
   font-weight: 600;
 }
 
-$card-link-scaling: 1.1;
 .card__link {
   display: block;
 }
@@ -96,14 +91,14 @@ $card-link-scaling: 1.1;
 .card--link:hover {
   position: relative;
   z-index: 1;
-  box-shadow: $box-shadow-focus;
-  transform: scale($card-link-scaling) translateX($translate-card-hover);
+  box-shadow: var(--box-shadow-focus);
+  transform: scale(var(--card-link-scaling)) translateX(var(--card-hover-translate));
   transform-origin: 50% 50%;
   overflow-x: visible;
   overflow-y: visible
 }
 .card--link:hover ~ .card--link {
-  transform: translateX($translate-card-hover * 2);
+  transform: translateX(calc(var(--translate-card-hover) * 2));
 }
 
 .card__media {
@@ -157,43 +152,42 @@ $card-link-scaling: 1.1;
   position: absolute;
   top: 36%
 }
-
-
-
 .card--small {
-  width: $width-card-small;
+  width: var(--card-small-width);
   overflow-x: hidden;
   white-space: normal;
 }
 .card--small .card__media {
-  height: $width-card-small * 9 / 16;
+  height: calc( var(--card-small-width) * 9 / 16);
 }
 
 .card--form {
-  width: $width-input-text + $padding-card-horizontal * 2;
+  width: calc( var(--input-width) + var(--card-padding * 2);
 }
 
 .card__subtitle {
-  color: $color-help;
+  color: var(--color-help);
   font-size: 0.85em;
-  line-height: $font-line-height * 1 / 0.85;
+  line-height: calc( var(--font-line-height) * 1 / 0.85);
 }
 
 .card-series-submit
 {
   margin-left: auto;
   margin-right: auto;
-  max-width: $width-page-constrained;
-  padding: $spacing-vertical / 2;
+  max-width: var(--card-max-width);
+  padding: calc(var(--vertical-spacing) / 2);
 }
 
 .card-row {
   + .card-row {
-    margin-top: $spacing-vertical * 1/3;
+    margin-top: calc(var(--vertical-spacing) * 1/3);
   }
 }
+
 $padding-top-card-hover-hack: 20px;
 $padding-right-card-hover-hack: 30px;
+
 .card-row__items {
   width: 100%;
   overflow: hidden;
@@ -219,7 +213,7 @@ $padding-right-card-hover-hack: 30px;
   padding-right: $padding-right-card-hover-hack;
 }
 .card-row__header {
-  margin-bottom: $spacing-vertical / 3;
+  margin-bottom: $spacing-vertical;
 }
 
 .card-row__scrollhouse {
@@ -228,14 +222,14 @@ $padding-right-card-hover-hack: 30px;
 
 .card-row__nav {
   position: absolute;
-  padding: 0 $spacing-vertical * 2 / 3;
+  padding: 0 var(--card-margin);
   height: 100%;
-  top: $padding-top-card-hover-hack - $spacing-vertical * 2 / 3;
+  top: calc( $padding-top-card-hover-hack - var(--card-margin) );
 }
 .card-row__nav .card-row__scroll-button {
-  background: $color-bg;
-  color: $color-help;
-  box-shadow: $box-shadow-layer;
+  background: var(--card-bg);
+  color: var(--color-help);
+  box-shadow: var(--box-shadow-layer);
   padding: $spacing-vertical $spacing-vertical / 2;
   position: absolute;
   cursor: pointer;
@@ -247,7 +241,7 @@ $padding-right-card-hover-hack: 30px;
 
   &:hover {
     opacity: 1.0;
-    transform: scale($card-link-scaling * 1.1)
+    transform: scale(calc( var(--card-link-scaling) * 1.1));
   }
 }
 .card-row__nav--left {
@@ -259,4 +253,4 @@ $padding-right-card-hover-hack: 30px;
 
 .card__icon-featured-content {
   color: orangered;
-}
\ No newline at end of file
+}
diff --git a/ui/scss/component/_channel-indicator.scss b/ui/scss/component/_channel-indicator.scss
index 52a0baed6..8b72bd36d 100644
--- a/ui/scss/component/_channel-indicator.scss
+++ b/ui/scss/component/_channel-indicator.scss
@@ -1,5 +1,5 @@
 @import "../global";
 
 .channel-indicator__icon--invalid {
-  color: $color-error;
+  color: var(--color-error);
 }
diff --git a/ui/scss/component/_file-actions.scss b/ui/scss/component/_file-actions.scss
index 4eda16b51..84aef8471 100644
--- a/ui/scss/component/_file-actions.scss
+++ b/ui/scss/component/_file-actions.scss
@@ -4,13 +4,13 @@ $color-download: #444;
 
 .file-actions
 {
-  line-height: $height-button;
-  min-height: $height-button;
+  line-height: var(--button-height);
+  min-height: var(--button-height);
 }
 
 .file-actions__download-status-bar, .file-actions__download-status-bar-overlay {
    .button__content {
-     margin: 0 $padding-text-link;
+     margin: 0 var(--text-link-padding);
    }
 }
 
@@ -29,4 +29,4 @@ $color-download: #444;
   z-index: 1;
   top: 0px;
   left: 0px;
-}
\ No newline at end of file
+}
diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss
index 9dee7240b..ab0656f1f 100644
--- a/ui/scss/component/_form-field.scss
+++ b/ui/scss/component/_form-field.scss
@@ -1,6 +1,7 @@
 @import "../global";
 
 $width-input-border: 2px;
+$color-form-border: #000;
 
 .form-row-submit
 {
@@ -15,7 +16,7 @@ $width-input-border: 2px;
   margin-top: $spacing-vertical * 5/6;
   margin-bottom: $spacing-vertical * 1/6;
   line-height: 1;
-  font-size: 0.9 * $font-size;
+  font-size:calc( 0.9 * var(--font-size));
 }
 .form-row__label-row--prefix {
   float: left;
@@ -23,11 +24,11 @@ $width-input-border: 2px;
 }
 
 input[type="text"].input-copyable {
-  border: 1px solid $color-form-border;
+  border: 1px solid var(--color-form-border);
   line-height: 1;
   padding-top: $spacing-vertical * 1/3;
   padding-bottom: $spacing-vertical * 1/3;
-  width: $width-input-text;
+  width: var(--input-width);
   padding-left: 5px;
   padding-right: 5px;
   width: 100%;
@@ -43,14 +44,14 @@ input[type="text"].input-copyable {
   }
 
   select {
-    transition: outline $transition-standard;
+    transition: outline var(--standar-transition);
     cursor: pointer;
     box-sizing: border-box;
     padding-left: 5px;
     padding-right: 5px;
     height: $spacing-vertical;
     &:focus {
-      outline: $width-input-border solid $color-primary;
+      outline: $width-input-border solid var(--color-primary);
     }
   }
 
@@ -62,9 +63,9 @@ input[type="text"].input-copyable {
   input[type="search"],
   input[type="date"] {
     @include placeholder {
-      color: lighten($color-text-dark, 60%);
+      //color: lighten($color-text-dark, 60%);
     }
-    transition: all $transition-standard;
+    transition: all var(--standar-transition);
     cursor: pointer;
     padding-left: 1px;
     padding-right: 1px;
@@ -86,7 +87,7 @@ input[type="text"].input-copyable {
     padding-top: $spacing-vertical * 1/3;
     padding-bottom: $spacing-vertical * 1/3;
     &.form-field__input--error {
-      border-color: $color-error;
+      border-color: var(--color-error);
     }
     &.form-field__input--inline {
       padding-top: 0;
@@ -104,7 +105,7 @@ input[type="text"].input-copyable {
   input[type="number"]:focus,
   input[type="search"]:focus,
   input[type="date"]:focus {
-    border-color: $color-primary;
+    border-color: var(--color-primary);
   }
 
   textarea {
@@ -124,11 +125,11 @@ input[type="text"].input-copyable {
 }
 
 .form-field__label--error {
-  color: $color-error;
+  color: var(--color-error);
 }
 
 .form-field__input-text {
-  width: $width-input-text;
+  width: var(--input-width);
 }
 
 .form-field__prefix {
@@ -153,16 +154,16 @@ input[type="text"].input-copyable {
 .form-field__error, .form-field__helper {
   margin-top: $spacing-vertical * 1/3;
   font-size: 0.8em;
-  transition: opacity $transition-standard;
+  transition: opacity var(--standar-transition);
 }
 
 .form-field__error {
-  color: $color-error;
+  color: var(--color-error);
 }
 .form-field__helper {
-  color: $color-help;
+  color:var(--color-help);
 }
 
 .form-field__input.form-field__input-SimpleMDE .CodeMirror-scroll {
   height: auto;
-}
\ No newline at end of file
+}
diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss
index 5cc51541e..f107d991b 100644
--- a/ui/scss/component/_header.scss
+++ b/ui/scss/component/_header.scss
@@ -9,7 +9,7 @@ $color-header-active: darken($color-header, 20%);
   background: #fff;
   display: flex;
   position: fixed;
-  box-shadow: $box-shadow-layer;
+  box-shadow: var(--header-shadow);
   top: 0;
   left: 0;
   width: 100%;
@@ -36,7 +36,7 @@ $color-header-active: darken($color-header, 20%);
   }
 }
 
-.wunderbar--active .icon-search { color: $color-primary; }
+.wunderbar--active .icon-search { color: var(--color-primary); }
 
 .wunderbar__input {
   background: rgba(255, 255, 255, 0.7);
@@ -46,13 +46,13 @@ $color-header-active: darken($color-header, 20%);
   line-height: $spacing-vertical * 1.5;
   padding-left: 38px;
   padding-right: 5px;
-  border: 1px solid $color-text-dark;
+  border: 1px solid var(--text-color);
   @include border-radius(2px);
   border: 1px solid #ccc;
   &:focus {
-    color: $color-header-active;
-    box-shadow: $box-shadow-focus;
-    border-color: $color-primary;
+    color: var(--color-header-active);
+    box-shadow: var(--box-shadow-focus);
+    border-color: var(--color-primary);
   }
 }
 
@@ -69,8 +69,8 @@ nav.sub-header
     display: inline-block;
     margin: 0 15px;
     padding: 0 5px;
-    line-height: $height-header - $spacing-vertical - $sub-header-selected-underline-height;
-    color: $color-header;
+    line-height:calc(var(--header-height) - $spacing-vertical - $sub-header-selected-underline-height);
+    color: var(--header-color);
     &:first-child
     {
       margin-left: 0;
@@ -81,12 +81,12 @@ nav.sub-header
     }
     &.sub-header-selected
     {
-      border-bottom: $sub-header-selected-underline-height solid $color-header-active;
+      border-bottom: $sub-header-selected-underline-height solid var(--color-header-active);
       color: $color-header-active;
     }
     &:hover
     {
-      color: $color-header-active;
+      color:  var(--color-header-active);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/ui/scss/component/_load-screen.scss b/ui/scss/component/_load-screen.scss
index 0caa74f65..43d84b116 100644
--- a/ui/scss/component/_load-screen.scss
+++ b/ui/scss/component/_load-screen.scss
@@ -2,7 +2,7 @@
 
 .load-screen {
   color: white;
-  background: $color-primary;
+  background: var(--color-primary);
   background-size: cover;
   min-height: 100vh;
   min-width: 100vw;
@@ -19,7 +19,7 @@
 }
 
 .load-screen__details {
-  color: $color-load-screen-text;
+  color: var(--color-load-screen-text);
 }
 
 .load-screen__details--warning {
diff --git a/ui/scss/component/_menu.scss b/ui/scss/component/_menu.scss
index d8e79be28..2b59c6079 100644
--- a/ui/scss/component/_menu.scss
+++ b/ui/scss/component/_menu.scss
@@ -10,7 +10,7 @@ $border-radius-menu: 2px;
   position: absolute;
   white-space: nowrap;
   background-color: white;
-  box-shadow: $box-shadow-layer;
+  box-shadow: var(--box-shadow-layer);
   border-radius: $border-radius-menu;
   padding-top: ($spacing-vertical / 5) 0px;
   z-index: 1;
@@ -20,6 +20,6 @@ $border-radius-menu: 2px;
   display: block;
   padding: ($spacing-vertical / 4) ($spacing-vertical / 2);
   &:hover {
-    background: $color-bg-alt;
+    background: var(--color-bg-alt);
   }
-}
\ No newline at end of file
+}
diff --git a/ui/scss/component/_modal.scss b/ui/scss/component/_modal.scss
index c28ba313e..9cf14410e 100644
--- a/ui/scss/component/_modal.scss
+++ b/ui/scss/component/_modal.scss
@@ -29,7 +29,7 @@
   overflow: auto;
   border-radius: 4px;
   padding: $spacing-vertical;
-  box-shadow: $box-shadow-layer;
+  box-shadow: var(--modal-shadow);
   max-width: 400px;
 
   word-break: break-word;
@@ -52,7 +52,7 @@
 }
 
 .error-modal-overlay {
-  background: rgba(#000, .88);
+  background: var(--color-dark-transparent);
 }
 
 .error-modal__content {
diff --git a/ui/scss/component/_pagination.scss b/ui/scss/component/_pagination.scss
index fd5ca528e..6ea2a14c6 100644
--- a/ui/scss/component/_pagination.scss
+++ b/ui/scss/component/_pagination.scss
@@ -32,5 +32,5 @@
 
 .pagination__item--selected {
   color: white;
-  background: $color-primary;
+  background: var(--color-primary);
 }
diff --git a/ui/scss/component/_snack-bar.scss b/ui/scss/component/_snack-bar.scss
index c3df3ab92..be517ee41 100644
--- a/ui/scss/component/_snack-bar.scss
+++ b/ui/scss/component/_snack-bar.scss
@@ -16,7 +16,7 @@ $padding-snack-horizontal: $spacing-vertical;
   margin-right: auto;
   min-width: 300px;
   max-width: 500px;
-  background: $color-black-transparent;
+  background: var(--color-black-transparent);
   color: #f0f0f0;
 
   display: flex;
@@ -25,7 +25,7 @@ $padding-snack-horizontal: $spacing-vertical;
 
   border-radius: 2px;
 
-  transition: all $transition-standard;
+  transition: all var(--standard-transition);
 
   z-index: 10000; /*hack to get it over react modal */
 }
@@ -33,7 +33,7 @@ $padding-snack-horizontal: $spacing-vertical;
 .snack-bar__action {
   display: inline-block;
   text-transform: uppercase;
-  color: $color-primary-light;
+  color: var(--color-primary-light);
   margin: 0px 0px 0px $padding-snack-horizontal;
   min-width: min-content;
   &:hover {
diff --git a/ui/scss/component/_tooltip.scss b/ui/scss/component/_tooltip.scss
index 0be9b1db8..12dc1ee89 100644
--- a/ui/scss/component/_tooltip.scss
+++ b/ui/scss/component/_tooltip.scss
@@ -9,28 +9,25 @@
 }
 
 .tooltip__body {
-  $tooltip-body-width: 300px;
-
   position: absolute;
   z-index: 1;
   left: 50%;
-  margin-left: $tooltip-body-width * -1 / 2;
+  margin-left: calc(var(--tooltip-width) * -1 / 2);
   white-space: normal;
-
   box-sizing: border-box;
   padding: $spacing-vertical / 2;
-  width: $tooltip-body-width;
+  width: var(--tooltip-width);
   border: 1px solid #aaa;
-  color: $color-text-dark;
-  background-color: $color-bg;
-  font-size: $font-size * 7/8;
-  line-height: $font-line-height;
-  box-shadow: $box-shadow-layer;
+  color: var(--tooltip-color);
+  background-color: var(--tooltip-bg);
+  font-size: calc(var(--font-size) * 7/8);
+  line-height: var(--font-line-height);
+  box-shadow: var(--tooltip-shadow);
 }
 
 .tooltip--header .tooltip__link {
   @include text-link(#aaa);
-  font-size: $font-size * 3/4;
-  margin-left: $padding-button;
+  font-size: calc( var(--font-size) * 3/4 );
+  margin-left: var(--button-padding);
   vertical-align: middle;
-}
\ No newline at end of file
+}
diff --git a/ui/scss/component/_video.scss b/ui/scss/component/_video.scss
index 5515cbf8a..5540c635a 100644
--- a/ui/scss/component/_video.scss
+++ b/ui/scss/component/_video.scss
@@ -1,3 +1,4 @@
+$height-video-embedded: $width-page-constrained * 9 / 16;
 video {
   object-fit: contain;
   box-sizing: border-box;
@@ -35,7 +36,7 @@ video {
 .video--obscured .video__cover
 {
   position: relative;
-  filter: blur($blur-intensity-nsfw);
+  filter: blur(var(--nsfw-blur-intensity));
 }
 
 
@@ -118,12 +119,12 @@ video {
   font-size: $spacing-vertical * 3;
   color: white;
   z-index: 1;
-  background: $color-black-transparent;
+  background: var(--color-black-transparent);
   opacity: 0.6;
   left: 0;
   top: 0;
   &:hover {
     opacity: 1;
-    transition: opacity $transition-standard;
+    transition: opacity var(--standar-transition);
   }
 }
diff --git a/ui/scss/page/_reward.scss b/ui/scss/page/_reward.scss
index a550c01c3..5e6180dc5 100644
--- a/ui/scss/page/_reward.scss
+++ b/ui/scss/page/_reward.scss
@@ -1,5 +1,5 @@
 @import "../global";
 
 .reward-page__details {
-  background-color: lighten($color-canvas, 1.5%);
-}
\ No newline at end of file
+  //background-color: lighten($color-canvas, 1.5%);
+}