From ac383dade74331162988d60b1cea38f7a3f03112 Mon Sep 17 00:00:00 2001
From: rubenmoya <ruben@carto.com>
Date: Fri, 22 Dec 2017 17:17:40 +0100
Subject: [PATCH] Migrate from SASS to PostCSS

---
 package.json                                  |   1 +
 .../{_avatars.scss => _avatars.css}           |   6 +-
 src/components/{_boxes.scss => _boxes.css}    |   6 +-
 .../{_buttons.scss => _buttons.css}           |  68 +--
 src/components/{_colors.scss => _colors.css}  |  22 +-
 .../{_headers.scss => _headers.css}           |   6 +-
 ...ayer-selector.scss => _layer-selector.css} |   2 +-
 src/components/{_lists.scss => _lists.css}    |   2 +-
 src/components/{_loader.scss => _loader.css}  |   4 +-
 src/components/{_menu.scss => _menu.css}      |  32 +-
 src/components/{_tags.scss => _tags.css}      |  10 +-
 .../{_tooltips.scss => _tooltips.css}         |  12 +-
 .../{_typography.scss => _typography.css}     |   8 +-
 src/components/forms/_checkbox.scss           | 113 -----
 .../forms/{_dropdowns.scss => _dropdowns.css} |  14 +-
 .../forms/{_inputs.scss => _inputs.css}       |  20 +-
 .../forms/{_legends.scss => _legends.css}     |   0
 .../{_option-input.scss => _option-input.css} |   8 +-
 .../forms/{_radio.scss => _radio.css}         |  28 +-
 .../forms/{_selects.scss => _selects.css}     |  16 +-
 .../forms/{_tabsForms.scss => _tabsForms.css} |   4 +-
 src/components/forms/_textarea.scss           |  43 --
 src/components/forms/_toggle.scss             |  83 ----
 src/components/forms/checkbox.css             |  91 ++++
 src/components/forms/textarea.css             |  38 ++
 src/components/forms/toggle.css               |  53 +++
 src/components/shapes/{_add.scss => _add.css} |   4 +-
 .../shapes/{_arrow.scss => _arrow.css}        |  12 +-
 .../{_check-circle.scss => _check-circle.css} |  12 +-
 .../shapes/{_close.scss => _close.css}        |  12 +-
 .../shapes/{_dash.scss => _dash.css}          |   4 +-
 .../shapes/{_dataset.scss => _dataset.css}    |  12 +-
 .../shapes/{_dots.scss => _dots.css}          |   4 +-
 .../{_error-circle.scss => _error-circle.css} |  18 +-
 .../{_hamburguer.scss => _hamburguer.css}     |   4 +-
 .../shapes/{_magnify.scss => _magnify.css}    |   8 +-
 .../shapes/{_move.scss => _move.css}          |   6 +-
 .../{_paragraph.scss => _paragraph.css}       |   4 +-
 .../{_threePoints.scss => _threePoints.css}   |   4 +-
 .../{_toogle-arrow.scss => _toogle-arrow.css} |   8 +-
 .../shapes/{_type.scss => _type.css}          |   6 +-
 src/entry.css                                 |   1 -
 src/utilities/_defaults.scss                  |  15 -
 src/utilities/_mixins.scss                    | 236 -----------
 src/utilities/defaults.css                    |  16 +
 src/utilities/{_fonts.scss => fonts.css}      |   3 -
 src/utilities/{_helpers.scss => helpers.css}  | 165 +++++---
 src/variables/_colors.scss                    |  36 --
 src/variables/colors.css                      |  23 +
 src/variables/sizes.css                       |  44 +-
 .../{_normalize.scss => _normalize.css}       |   0
 src/vendor/{_reset.scss => _reset.css}        |   0
 .../{_main.scss => _main.css}                 |   0
 .../{_mixins.scss => _mixins.css}             |   0
 .../{_themes.scss => _themes.css}             |   0
 .../{_variables.scss => _variables.css}       |   0
 yarn.lock                                     | 399 +++++++++++++++++-
 57 files changed, 924 insertions(+), 822 deletions(-)
 rename src/components/{_avatars.scss => _avatars.css} (91%)
 rename src/components/{_boxes.scss => _boxes.css} (86%)
 rename src/components/{_buttons.scss => _buttons.css} (90%)
 rename src/components/{_colors.scss => _colors.css} (84%)
 rename src/components/{_headers.scss => _headers.css} (98%)
 rename src/components/{_layer-selector.scss => _layer-selector.css} (91%)
 rename src/components/{_lists.scss => _lists.css} (90%)
 rename src/components/{_loader.scss => _loader.css} (96%)
 rename src/components/{_menu.scss => _menu.css} (89%)
 rename src/components/{_tags.scss => _tags.css} (93%)
 rename src/components/{_tooltips.scss => _tooltips.css} (93%)
 rename src/components/{_typography.scss => _typography.css} (90%)
 delete mode 100644 src/components/forms/_checkbox.scss
 rename src/components/forms/{_dropdowns.scss => _dropdowns.css} (94%)
 rename src/components/forms/{_inputs.scss => _inputs.css} (73%)
 rename src/components/forms/{_legends.scss => _legends.css} (100%)
 rename src/components/forms/{_option-input.scss => _option-input.css} (96%)
 rename src/components/forms/{_radio.scss => _radio.css} (75%)
 rename src/components/forms/{_selects.scss => _selects.css} (89%)
 rename src/components/forms/{_tabsForms.scss => _tabsForms.css} (96%)
 delete mode 100644 src/components/forms/_textarea.scss
 delete mode 100644 src/components/forms/_toggle.scss
 create mode 100644 src/components/forms/checkbox.css
 create mode 100644 src/components/forms/textarea.css
 create mode 100644 src/components/forms/toggle.css
 rename src/components/shapes/{_add.scss => _add.css} (97%)
 rename src/components/shapes/{_arrow.scss => _arrow.css} (86%)
 rename src/components/shapes/{_check-circle.scss => _check-circle.css} (93%)
 rename src/components/shapes/{_close.scss => _close.css} (92%)
 rename src/components/shapes/{_dash.scss => _dash.css} (96%)
 rename src/components/shapes/{_dataset.scss => _dataset.css} (93%)
 rename src/components/shapes/{_dots.scss => _dots.css} (85%)
 rename src/components/shapes/{_error-circle.scss => _error-circle.css} (86%)
 rename src/components/shapes/{_hamburguer.scss => _hamburguer.css} (95%)
 rename src/components/shapes/{_magnify.scss => _magnify.css} (94%)
 rename src/components/shapes/{_move.scss => _move.css} (97%)
 rename src/components/shapes/{_paragraph.scss => _paragraph.css} (97%)
 rename src/components/shapes/{_threePoints.scss => _threePoints.css} (98%)
 rename src/components/shapes/{_toogle-arrow.scss => _toogle-arrow.css} (96%)
 rename src/components/shapes/{_type.scss => _type.css} (94%)
 delete mode 100644 src/utilities/_defaults.scss
 delete mode 100644 src/utilities/_mixins.scss
 create mode 100644 src/utilities/defaults.css
 rename src/utilities/{_fonts.scss => fonts.css} (93%)
 rename src/utilities/{_helpers.scss => helpers.css} (59%)
 delete mode 100644 src/variables/_colors.scss
 create mode 100644 src/variables/colors.css
 rename src/vendor/{_normalize.scss => _normalize.css} (100%)
 rename src/vendor/{_reset.scss => _reset.css} (100%)
 rename src/vendor/perfect-scrollbar/{_main.scss => _main.css} (100%)
 rename src/vendor/perfect-scrollbar/{_mixins.scss => _mixins.css} (100%)
 rename src/vendor/perfect-scrollbar/{_themes.scss => _themes.css} (100%)
 rename src/vendor/perfect-scrollbar/{_variables.scss => _variables.css} (100%)

diff --git a/package.json b/package.json
index 16a3345..4e3de43 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "cssnano": "^3.10.0",
     "perfect-scrollbar": "git://github.com/CartoDB/perfect-scrollbar.git#master",
     "postcss": "^5.2.8",
     "postcss-browser-reporter": "^0.5.0",
diff --git a/src/components/_avatars.scss b/src/components/_avatars.css
similarity index 91%
rename from src/components/_avatars.scss
rename to src/components/_avatars.css
index b6d6558..ba95446 100644
--- a/src/components/_avatars.scss
+++ b/src/components/_avatars.css
@@ -29,7 +29,7 @@
 .CDB-AvatarList-item {
   display: inline-block;
   margin-left: -12px;
-  border: 2px solid $cWhite;
+  border: 2px solid white;
   border-radius: 50%;
   vertical-align: middle;
 }
@@ -38,9 +38,9 @@
   display: inline-block;
   margin-left: -12px;
   padding: 2px 6px;
-  border-left: 2px solid $cWhite;
+  border-left: 2px solid white;
   border-radius: 50px;
-  background: $cSecondaryLine;
+  background: var(--color-line-secondary);
 }
 
 .CDB-AvatarList-itemMedia {
diff --git a/src/components/_boxes.scss b/src/components/_boxes.css
similarity index 86%
rename from src/components/_boxes.scss
rename to src/components/_boxes.css
index fbdcd66..f90cf58 100644
--- a/src/components/_boxes.scss
+++ b/src/components/_boxes.css
@@ -12,9 +12,9 @@
 
 .CDB-Box-modal {
   min-width: 160px;
-  border: 1px solid $cMainLine;
+  border: 1px solid var(--color-line);
   border-radius: 4px;
-  background: $cWhite;
+  background: white;
   box-shadow: 0  $baseSize  $baseSize * 2 0 rgba(0, 0, 0, 0.16);
   box-sizing: border-box;
 }
@@ -25,7 +25,7 @@
 .CDB-Box-modalHeaderItem {
   @include display-flex();
   padding: $baseSize + 4 $baseSize * 2;
-  border-bottom: 1px solid $cMainLine;
+  border-bottom: 1px solid var(--color-line);
 }
 .CDB-Box-modalHeaderItem--block {
   display: block;
diff --git a/src/components/_buttons.scss b/src/components/_buttons.css
similarity index 90%
rename from src/components/_buttons.scss
rename to src/components/_buttons.css
index daab640..4f99d24 100644
--- a/src/components/_buttons.scss
+++ b/src/components/_buttons.css
@@ -238,42 +238,42 @@ Layout Component:
 }
 
 .CDB-Button--primary {
-  background: $cBlue;
-  color: $cWhite;
+  background: var(--color-blue);
+  color: white;
 
   &:hover,
   &:active {
-    background: $cBlueHover;
+    background: var(--color-blue-hover);
   }
 
   &.is-loading {
     &:hover,
     &:active {
-      background: $cBlue;
+      background: var(--color-blue);
     }
   }
 
   &.is-disabled {
     &:hover,
     &:active {
-      background: $cBlue;
+      background: var(--color-blue);
     }
   }
 }
 
 .CDB-Button--alert {
-  background: $cAlert;
-  color: $cWhite;
+  background: var(--color-alert);
+  color: white;
 
   &:hover,
   &:active {
-    background: darken($cAlert, 8%);
+    background: darken(var(--color-alert), 8%);
   }
 
   &.is-disabled {
     &:hover,
     &:active {
-      background: $cAlert;
+      background: var(--color-alert);
     }
   }
 }
@@ -281,34 +281,34 @@ Layout Component:
 
 .CDB-Button--error,
 .CDB-Button--negative {
-  background: $cError;
-  color: $cWhite;
+  background: var(--color-error);
+  color: white;
 
   &:hover,
   &:active {
-    background: darken($cError, 8%);
+    background: darken(var(--color-error), 8%);
   }
 
   &.is-disabled {
     &:hover,
     &:active {
-      background: $cError;
+      background: var(--color-error);
     }
   }
 }
 
 .CDB-Button--dashed {
   padding: 13px 0;
-  border: 1px dashed $cHintText;
-  color: $cBlue;
+  border: 1px dashed var(--color-text-alt);
+  color: var(--color-blue);
 
   &:hover {
-    border-color: $cBlue;
+    border-color: var(--color-blue);
   }
 
   &.is-disabled {
     &:hover {
-      border-color: $cHintText;
+      border-color: var(--color-text-alt);
     }
   }
 }
@@ -419,23 +419,23 @@ Layout Component:
 
 
 .CDB-Button--secondary {
-  color: $cBlue;
-  box-shadow: inset 0 0 0 1px $cBlue;
+  color: var(--color-blue);
+  box-shadow: inset 0 0 0 1px var(--color-blue);
 
   &:hover {
-    background: rgba($cBlue, 0.08);
-    box-shadow: inset 0 0 0 2px $cBlueHover;
+    background: rgba(var(--color-blue), 0.08);
+    box-shadow: inset 0 0 0 2px var(--color-blue-hover);
   }
 
   &:active {
-    background: $cBlue;
-    color: $cWhite;
+    background: var(--color-blue);
+    color: white;
   }
 
   &.is-disabled {
     &:hover {
       background: transparent;
-      box-shadow: inset 0 0 0 1px $cBlue;
+      box-shadow: inset 0 0 0 1px var(--color-blue);
     }
 
     &:active {
@@ -449,27 +449,27 @@ Layout Component:
     &:hover,
     &:active {
       background: none;
-      color: $cBlue;
+      color: var(--color-blue);
     }
   }
 
   &--background {
-    background-color: $cWhite;
+    background-color: white;
   }
 }
 
 .CDB-Button--white {
-  color: $cWhite;
-  box-shadow: inset 0 0 0 1px $cWhite;
+  color: white;
+  box-shadow: inset 0 0 0 1px white;
 
   &:hover {
-    background: rgba($cWhite, 0.08);
-    box-shadow: inset 0 0 0 2px darken($cWhite, 8%);
+    background: rgba(white, 0.08);
+    box-shadow: inset 0 0 0 2px darken(white, 8%);
   }
 
   &:active {
     background: rgba($cMainBg, 0.08);
-    color: $cWhite;
+    color: white;
   }
 
   &.is-disabled {
@@ -477,12 +477,12 @@ Layout Component:
 
     &:hover {
       background: transparent;
-      box-shadow: inset 0 0 0 1px $cWhite;
+      box-shadow: inset 0 0 0 1px white;
     }
 
     &:active {
       background: transparent;
-      color: $cWhite;
+      color: white;
     }
   }
 
@@ -492,7 +492,7 @@ Layout Component:
     &:hover,
     &:active {
       background: none;
-      color: $cWhite;
+      color: white;
     }
   }
 }
diff --git a/src/components/_colors.scss b/src/components/_colors.css
similarity index 84%
rename from src/components/_colors.scss
rename to src/components/_colors.css
index 98cb077..74487ce 100644
--- a/src/components/_colors.scss
+++ b/src/components/_colors.css
@@ -16,11 +16,11 @@
 */
 
 .Color-Blue {
-  background: $cBlue;
+  background: var(--color-blue);
 }
 .Color-White {
   border: 1px solid #E5E5E5;
-  background: $cWhite;
+  background: white;
 }
 .Color-Dark {
   background: $cBlack;
@@ -36,7 +36,7 @@
   background: $cSecondaryBackground;
 }
 .Color-ThirdBackground {
-  background: $cThirdBackground;
+  background: var(--color-softgray);
 }
 
 
@@ -54,13 +54,13 @@
 
 
 .Color-HoverLine {
-  background: $cHoverLine;
+  background: var(--color-line-hover);
 }
 .Color-MainLine {
-  background: $cMainLine;
+  background: var(--color-line);
 }
 .Color-SecondaryLine {
-  background: $cSecondaryLine;
+  background: var(--color-line-secondary);
 }
 
 
@@ -80,13 +80,13 @@
 
 
 .Color-Type02 {
-  background: $cSecondaryText;
+  background: var(--color-text-secondary);
 }
 .Color-Type03 {
-  background: $cAltText;
+  background: var(--color-text-alt);
 }
 .Color-Type04 {
-  background: $cHintText;
+  background: var(--color-text-alt);
 }
 
 
@@ -108,7 +108,7 @@
   background: $cHighlight;
 }
 .Color-Alert {
-  background: $cAlert;
+  background: var(--color-alert);
 }
 .Color-Public {
   background: $cPublic;
@@ -120,5 +120,5 @@
   background: $cPassword;
 }
 .Color-Error {
-  background: $cError;
+  background: var(--color-error);
 }
diff --git a/src/components/_headers.scss b/src/components/_headers.css
similarity index 98%
rename from src/components/_headers.scss
rename to src/components/_headers.css
index 2f89782..a0efbee 100644
--- a/src/components/_headers.scss
+++ b/src/components/_headers.css
@@ -211,10 +211,10 @@
   width: $baseSize * 3;
   min-width: $baseSize * 3;
   height: $baseSize * 3;
-  border: 1px solid $cMainLine;
+  border: 1px solid var(--color-line);
   border-radius: 4px;
-  background-color: $cWhite;
-  color: $cAltText;
+  background-color: white;
+  color: var(--color-text-alt);
   font-size: $sFontSize-small;
   line-height: 23px;
   text-align: center;
diff --git a/src/components/_layer-selector.scss b/src/components/_layer-selector.css
similarity index 91%
rename from src/components/_layer-selector.scss
rename to src/components/_layer-selector.css
index 62d5391..6a0b4b4 100644
--- a/src/components/_layer-selector.scss
+++ b/src/components/_layer-selector.css
@@ -14,7 +14,7 @@
   position: relative;
 }
 .CDB-SelectorLayer.is-disabled {
-  background-color: $cThirdBackground;
+  background-color: var(--color-softgray);
 }
 .CDB-SelectorLayer-letter {
   height: 14px;
diff --git a/src/components/_lists.scss b/src/components/_lists.css
similarity index 90%
rename from src/components/_lists.scss
rename to src/components/_lists.css
index 3c016b6..e70d220 100644
--- a/src/components/_lists.scss
+++ b/src/components/_lists.css
@@ -11,7 +11,7 @@
 */
 
 .CDB-ListDecoration-item {
-  border-bottom: 1px solid $cSecondaryLine;
+  border-bottom: 1px solid var(--color-line-secondary);
 
   &:last-child {
     border-bottom: 0;
diff --git a/src/components/_loader.scss b/src/components/_loader.css
similarity index 96%
rename from src/components/_loader.scss
rename to src/components/_loader.css
index 1834d4d..97f17b7 100644
--- a/src/components/_loader.scss
+++ b/src/components/_loader.css
@@ -19,7 +19,7 @@ This is the generic loader for widgets, maps, components, ...
   width: 50%;
   height: 3px;
   transform: translateX(-200%);
-  background-image: linear-gradient(90deg, rgba($cBlue, 1) 0%, #32BBFE 90%, #FAFEFF 95%);
+  background-image: linear-gradient(90deg, rgba(var(--color-blue), 1) 0%, #32BBFE 90%, #FAFEFF 95%);
   z-index: 2;
 }
 
@@ -138,7 +138,7 @@ This is the generic loader for widgets, maps, components, ...
   stroke: rgba(0, 0, 0, 0.24);
 }
 .CDB-LoaderIcon.is-blue .CDB-LoaderIcon-path {
-  stroke: $cBlue;
+  stroke: var(--color-blue);
 }
 
 @keyframes rotate {
diff --git a/src/components/_menu.scss b/src/components/_menu.css
similarity index 89%
rename from src/components/_menu.scss
rename to src/components/_menu.css
index ba018c0..92ac1eb 100644
--- a/src/components/_menu.scss
+++ b/src/components/_menu.css
@@ -136,7 +136,7 @@
 .CDB-NavMenu-inner {
   position: relative;
   margin-bottom: 18px;
-  border-bottom: 1px solid $cMainLine;
+  border-bottom: 1px solid var(--color-line);
 
   &--no-margin {
     margin-bottom: 0;
@@ -158,10 +158,10 @@
   transition: border-color 0.2s ease-in;
   border-bottom: 2px solid transparent;
   border-radius: 0;
-  color: $cBlue;
+  color: var(--color-blue);
 
   &:hover {
-    border-bottom: 2px solid $cBlueHover;
+    border-bottom: 2px solid var(--color-blue-hover);
   }
 }
 
@@ -179,12 +179,12 @@
 
 .CDB-NavMenu-item.is-disabled .CDB-NavMenu-link {
   pointer-events: none;
-  color: $cHintText;
+  color: var(--color-text-alt);
   cursor: default;
 }
 
 .CDB-NavSubmenu {
-  border-bottom: 2px solid $cSecondaryLine;
+  border-bottom: 2px solid var(--color-line-secondary);
 
   &--inside {
     position: absolute;
@@ -206,16 +206,16 @@
   transition: border-color 0.2s ease-in;
   border-bottom: 2px solid transparent;
   border-radius: 0;
-  color: $cBlue;
+  color: var(--color-blue);
 
   &:hover {
-    border-bottom: 2px solid $cBlueHover;
+    border-bottom: 2px solid var(--color-blue-hover);
   }
 }
 
 
 .CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link {
-  border-bottom: 2px solid $cMainLine;
+  border-bottom: 2px solid var(--color-line);
   color: $cMainText;
 }
 
@@ -226,16 +226,16 @@
 .CDB-NavMenu.is-dark {
   .CDB-NavMenu-inner,
   .CDB-NavSubmenu {
-    border-bottom: 1px solid $cSecondaryText;
+    border-bottom: 1px solid var(--color-text-secondary);
   }
 
   .CDB-NavMenu-link,
   .CDB-NavSubmenu-link {
     margin-bottom: -1px;
-    color: $cAltText;
+    color: var(--color-text-alt);
 
     &:hover {
-      border-bottom: 2px solid darken($cMainLine, 8%);
+      border-bottom: 2px solid darken(var(--color-line), 8%);
     }
   }
 
@@ -246,16 +246,16 @@
   }
 
   .CDB-NavMenu-item.is-selected .CDB-NavMenu-link {
-    border-bottom: 2px solid $cMainLine;
-    color: $cWhite;
+    border-bottom: 2px solid var(--color-line);
+    color: white;
   }
 
   .CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link {
-    border-bottom: 2px solid $cMainLine;
-    color: $cWhite;
+    border-bottom: 2px solid var(--color-line);
+    color: white;
   }
 
   .CDB-NavSubmenu-status {
-    color: $cSecondaryText;
+    color: var(--color-text-secondary);
   }
 }
diff --git a/src/components/_tags.scss b/src/components/_tags.css
similarity index 93%
rename from src/components/_tags.scss
rename to src/components/_tags.css
index 9ba0c5b..1166d08 100644
--- a/src/components/_tags.scss
+++ b/src/components/_tags.css
@@ -25,9 +25,9 @@
 
 .CDB-Tag {
   padding: 0 3px;
-  border: 1px solid $cBlue;
+  border: 1px solid var(--color-blue);
   border-radius: 2px;
-  color: $cBlue;
+  color: var(--color-blue);
 
   &.is-public {
     border: 1px solid $cPublic;
@@ -42,8 +42,8 @@
     color: $cPassword;
   }
   &.is-private {
-    border: 1px solid $cError;
-    color: $cError;
+    border: 1px solid var(--color-error);
+    color: var(--color-error);
   }
 }
 
@@ -93,7 +93,7 @@
   @include display-flex();
   padding: $halfBaseSize $halfBaseSize $halfBaseSize $baseSize;
   border-radius: $halfBaseSize;
-  background: rgba($cBlue, 0.16);
+  background: rgba(var(--color-blue), 0.16);
 }
 
 /* SG
diff --git a/src/components/_tooltips.scss b/src/components/_tooltips.css
similarity index 93%
rename from src/components/_tooltips.scss
rename to src/components/_tooltips.css
index f90333d..22bbc0d 100644
--- a/src/components/_tooltips.scss
+++ b/src/components/_tooltips.css
@@ -93,16 +93,16 @@
 
 .is-error {
   &.CDB-InfoTooltip.CDB-InfoTooltip--up::after {
-    border-bottom-color: $cError;
+    border-bottom-color: var(--color-error);
   }
   &.CDB-InfoTooltip.CDB-InfoTooltip--down::after {
-    border-top-color: $cError;
+    border-top-color: var(--color-error);
   }
   &.CDB-InfoTooltip.CDB-InfoTooltip--left::after {
-    border-right-color: $cError;
+    border-right-color: var(--color-error);
   }
   &.CDB-InfoTooltip.CDB-InfoTooltip--right::after {
-    border-left-color: $cError;
+    border-left-color: var(--color-error);
   }
 }
 
@@ -135,9 +135,9 @@
 }
 
 .CDB-InfoTooltip.is-error {
-  background: $cError;
+  background: var(--color-error);
 }
 
 .CDB-InfoTooltip-text {
-  color: $cWhite;
+  color: white;
 }
diff --git a/src/components/_typography.scss b/src/components/_typography.css
similarity index 90%
rename from src/components/_typography.scss
rename to src/components/_typography.css
index 2726ca0..5f2f5f4 100644
--- a/src/components/_typography.scss
+++ b/src/components/_typography.css
@@ -32,7 +32,7 @@
 }
 
 .is-underlined {
-  border-bottom: 1px dotted $cMainLine;
+  border-bottom: 1px dotted var(--color-line);
 }
 
 .CDB-Size-huge {
@@ -46,8 +46,8 @@
 }
 
 .CDB-Size-medium {
-  font-size: $sFontSize-medium;
-  line-height: $sLineHeight-medium;
+  font-size: var(--font-size-medium);
+  line-height: var(--line-height-medium);
 }
 
 .CDB-Size-small {
@@ -65,7 +65,7 @@
 }
 
 .CDB-FontSize-medium {
-  font-size: $sFontSize-medium;
+  font-size: var(--font-size-medium);
 }
 
 .CDB-IconFont.is-disabled {
diff --git a/src/components/forms/_checkbox.scss b/src/components/forms/_checkbox.scss
deleted file mode 100644
index 5202f46..0000000
--- a/src/components/forms/_checkbox.scss
+++ /dev/null
@@ -1,113 +0,0 @@
-// CheckBoxes styles
-// ----------------------------------------------
-
-/* SG
-# Forms/Checkbox
-
-```
-<div class="u-iBlock">
-  <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bike" checked>
-  <span class="u-iBlock CDB-Checkbox-face"></span>
-</div>
-<div class="u-iBlock">
-  <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bus">
-  <span class="u-iBlock CDB-Checkbox-face"></span>
-</div>
-<div class="u-iBlock">
-  <input class="CDB-Checkbox" type="checkbox" name="vehicle2" value="Car" disabled>
-  <span class="u-iBlock CDB-Checkbox-face"></span>
-</div>
-```
-*/
-
-.CDB-Checkbox {
-  position: absolute;
-  width: $baseSize * 2;
-  height: $baseSize * 2;
-  opacity: 0;
-  vertical-align: middle;
-  z-index: 1;
-}
-
-.CDB-Checkbox-face {
-  position: relative;
-  width: $baseSize * 2;
-  height: $baseSize * 2;
-  border: 1px solid $cMainLine;
-  border-radius: 3px;
-  background: $cWhite;
-  cursor: pointer;
-  box-sizing: border-box;
-  z-index: 2;
-  pointer-events: none;
-
-  &::before,
-  &::after {
-    display: block;
-    position: absolute;
-    bottom: 3px;
-    width: 2px;
-    border-radius: 1px;
-    background: $cWhite;
-    content: '';
-  }
-
-  &::before {
-    right: $baseSize / 2;
-    height: $baseSize;
-    transform: rotate(45deg);
-  }
-
-  &::after {
-    left: $baseSize / 2;
-    height: $baseSize - 2;
-    transform: rotate(-45deg);
-  }
-}
-
-.CDB-Checkbox:checked + .CDB-Checkbox-face {
-  transition: background 300ms;
-  border: 1px solid $cBlue;
-  background: $cBlue;
-
-  &::before,
-  &::after {
-    background: $cWhite;
-  }
-}
-
-.CDB-Checkbox:checked:hover + .CDB-Checkbox-face {
-  border: 1px solid $cBlue;
-
-  &::before,
-  &::after {
-    background: $cWhite;
-  }
-}
-
-.CDB-Checkbox:hover + .CDB-Checkbox-face {
-  border: 1px solid $cBlueHover;
-
-  &::before,
-  &::after {
-    background: $cHoverLine;
-  }
-}
-.CDB-Checkbox:active + .CDB-Checkbox-face {
-  border: 1px solid $cBlue;
-
-  &::before,
-  &::after {
-    background: $cBlue;
-  }
-}
-
-.CDB-Checkbox:disabled + .CDB-Checkbox-face {
-  border: 1px solid $cSecondaryLine;
-  background: $cThirdBackground;
-
-  &::before,
-  &::after {
-    opacity: 0;
-  }
-}
diff --git a/src/components/forms/_dropdowns.scss b/src/components/forms/_dropdowns.css
similarity index 94%
rename from src/components/forms/_dropdowns.scss
rename to src/components/forms/_dropdowns.css
index ff77ab7..d46ed53 100644
--- a/src/components/forms/_dropdowns.scss
+++ b/src/components/forms/_dropdowns.css
@@ -125,13 +125,13 @@
 .CDB-Dropdown-calculations {
   box-sizing: border-box;
   padding: $sMargin-element;
-  border-right: 1px solid $cMainLine;
+  border-right: 1px solid var(--color-line);
   border-radius: 4px 0 0 4px;
   background-color: $cSecondaryBackground;
 }
 
 .CDB-Dropdown-calculationsElement {
-  margin-bottom: $sLineHeight-medium;
+  margin-bottom: var(--line-height-medium);
   color: $cMainBg;
   font-size: $sFontSize-small;
 
@@ -143,22 +143,22 @@
 .CDB-Dropdown-options {
   width: $baseSize * 20;
   border-radius: 0 4px 4px 0;
-  background-color: $cWhite;
+  background-color: white;
   vertical-align: top;
 }
 
 .CDB-Dropdown-optionsElement {
   @include text-overflow();
   padding: 12px 10px;
-  border-bottom: 1px solid $cMainLine;
-  color: $cBlue;
+  border-bottom: 1px solid var(--color-line);
+  color: var(--color-blue);
 
   &:last-child {
     border-bottom: 0;
   }
 
   &:hover {
-    background-color: rgba($cBlue, 0.08);
+    background-color: rgba(var(--color-blue), 0.08);
     color: $cMainBg;
     cursor: pointer;
   }
@@ -168,7 +168,7 @@
   }
 
   &.is-disabled {
-    color: $cHintText;
+    color: var(--color-text-alt);
 
     &:hover {
       background-color: transparent;
diff --git a/src/components/forms/_inputs.scss b/src/components/forms/_inputs.css
similarity index 73%
rename from src/components/forms/_inputs.scss
rename to src/components/forms/_inputs.css
index 5f222ba..1c1e8f9 100644
--- a/src/components/forms/_inputs.scss
+++ b/src/components/forms/_inputs.css
@@ -15,10 +15,10 @@
   width: 100%;
   min-height: 32px;
   padding: 7px 8px;
-  border: 1px solid $cMainLine;
+  border: 1px solid var(--color-line);
   border-radius: $baseSize / 2;
-  font-size: $sFontSize-medium;
-  line-height: $sLineHeight-medium;
+  font-size: var(--font-size-medium);
+  line-height: var(--line-height-medium);
   box-sizing: border-box;
 
   &.is-cursor {
@@ -26,7 +26,7 @@
   }
 
   &.is-empty {
-    color: $cHintText;
+    color: var(--color-text-alt);
   }
 
   &.is-number {
@@ -34,12 +34,12 @@
   }
 
   &.is-null {
-    color: $cHintText;
+    color: var(--color-text-alt);
     font-style: italic;
   }
 
   &:hover {
-    border: 1px solid $cBlueHover;
+    border: 1px solid var(--color-blue-hover);
   }
 
   &:focus {
@@ -49,8 +49,8 @@
 
   &:disabled,
   &.is-disabled {
-    border-color: $cSecondaryLine;
-    background: $cThirdBackground;
+    border-color: var(--color-line-secondary);
+    background: var(--color-softgray);
     cursor: default;
   }
 
@@ -67,8 +67,8 @@
   width: 100%;
   border: 0;
   background: transparent;
-  font-size: $sFontSize-medium;
-  line-height: $sLineHeight-medium;
+  font-size: var(--font-size-medium);
+  line-height: var(--line-height-medium);
   box-sizing: border-box;
 }
 
diff --git a/src/components/forms/_legends.scss b/src/components/forms/_legends.css
similarity index 100%
rename from src/components/forms/_legends.scss
rename to src/components/forms/_legends.css
diff --git a/src/components/forms/_option-input.scss b/src/components/forms/_option-input.css
similarity index 96%
rename from src/components/forms/_option-input.scss
rename to src/components/forms/_option-input.css
index 52b8944..6fd6bfd 100644
--- a/src/components/forms/_option-input.scss
+++ b/src/components/forms/_option-input.css
@@ -124,7 +124,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  font-size: $sFontSize-medium;
+  font-size: var(--font-size-medium);
 
   &.is-active,
   &:hover,
@@ -143,10 +143,10 @@
 }
 
 .CDB-OptionInput-container--border .CDB-OptionInput-item {
-  border: 1px solid $cMainLine;
+  border: 1px solid var(--color-line);
 
   &:hover {
-    border: 1px solid $cBlueHover;
+    border: 1px solid var(--color-blue-hover);
   }
 
   &.is-active,
@@ -186,7 +186,7 @@
     }
 
     &:hover::after {
-      background-color: $cBlueHover;
+      background-color: var(--color-blue-hover);
     }
 
     &.is-active::after,
diff --git a/src/components/forms/_radio.scss b/src/components/forms/_radio.css
similarity index 75%
rename from src/components/forms/_radio.scss
rename to src/components/forms/_radio.css
index ca261d3..d10a460 100644
--- a/src/components/forms/_radio.scss
+++ b/src/components/forms/_radio.css
@@ -34,9 +34,9 @@
   position: relative;
   width: $baseSize * 2;
   height: $baseSize * 2;
-  border: 1px solid $cMainLine;
+  border: 1px solid var(--color-line);
   border-radius: 50%;
-  background: $cWhite;
+  background: white;
   text-indent: 20px;
   cursor: pointer;
   box-sizing: border-box;
@@ -50,24 +50,24 @@
     margin-top: -3px;
     margin-left: -3px;
     border-radius: 50%;
-    background: $cWhite;
+    background: white;
     content: '';
   }
 }
 
 .CDB-Radio:checked + .CDB-Radio-face {
   transition: background 300ms;
-  border: 1px solid $cBlue;
-  background: $cBlue;
+  border: 1px solid var(--color-blue);
+  background: var(--color-blue);
 
   &::before {
-    background: $cWhite;
+    background: white;
   }
 }
 
 .CDB-Radio:disabled + .CDB-Radio-face {
-  border: 1px solid $cSecondaryLine;
-  background: $cThirdBackground;
+  border: 1px solid var(--color-line-secondary);
+  background: var(--color-softgray);
 
   &::before {
     opacity: 0;
@@ -75,30 +75,30 @@
 }
 
 .CDB-Radio:disabled:hover + .CDB-Radio-face {
-  border: 1px solid $cSecondaryLine;
+  border: 1px solid var(--color-line-secondary);
 }
 
 .CDB-Radio:hover + .CDB-Radio-face {
-  border: 1px solid $cBlueHover;
+  border: 1px solid var(--color-blue-hover);
 
   &::before {
-    background: $cHoverLine;
+    background: var(--color-line-hover);
   }
 }
 
 .CDB-Radio:focus + .CDB-Radio-face,
 .CDB-Radio:checked:hover + .CDB-Radio-face {
-  border: 1px solid $cBlue;
+  border: 1px solid var(--color-blue);
 }
 
 .CDB-Radio:checked:hover + .CDB-Radio-face {
   &::before {
-    background: $cWhite;
+    background: white;
   }
 }
 
 .CDB-Radio:active + .CDB-Radio-face {
   &::before {
-    background: $cBlue;
+    background: var(--color-blue);
   }
 }
diff --git a/src/components/forms/_selects.scss b/src/components/forms/_selects.css
similarity index 89%
rename from src/components/forms/_selects.scss
rename to src/components/forms/_selects.css
index 3a69340..aed4cb2 100644
--- a/src/components/forms/_selects.scss
+++ b/src/components/forms/_selects.css
@@ -69,23 +69,23 @@
   appearance: none;
   width: 100%;
   padding: 7px 8px 6px;
-  border: 1px solid $cMainLine;
+  border: 1px solid var(--color-line);
   border-radius: $baseSize / 2;
-  background: $cWhite;
-  font-size: $sFontSize-medium;
-  line-height: $sLineHeight-medium;
+  background: white;
+  font-size: var(--font-size-medium);
+  line-height: var(--line-height-medium);
   box-sizing: border-box;
 
   &:hover {
-    border: 1px solid $cHoverLine;
+    border: 1px solid var(--color-line-hover);
   }
   &:focus {
-    border: 1px solid $cBlue;
+    border: 1px solid var(--color-blue);
     outline: none;
   }
   &:disabled {
-    border-color: $cSecondaryLine;
-    background: $cThirdBackground;
+    border-color: var(--color-line-secondary);
+    background: var(--color-softgray);
   }
   &.has-error {
     @include default-form-error-style();
diff --git a/src/components/forms/_tabsForms.scss b/src/components/forms/_tabsForms.css
similarity index 96%
rename from src/components/forms/_tabsForms.scss
rename to src/components/forms/_tabsForms.css
index b1655ba..b263feb 100644
--- a/src/components/forms/_tabsForms.scss
+++ b/src/components/forms/_tabsForms.css
@@ -73,14 +73,14 @@
 */
 
 .CDB-TabsForms {
-  border: 1px solid $cMainLine;
+  border: 1px solid var(--color-line);
   border-radius: 4px;
 }
 .CDB-TabsForms-inner {
   @include display-flex();
 }
 .CDB-TabsForms-item {
-  border-left: 1px solid $cSecondaryLine;
+  border-left: 1px solid var(--color-line-secondary);
 }
 .CDB-TabsForms-item:first-child {
   border-left: 0;
diff --git a/src/components/forms/_textarea.scss b/src/components/forms/_textarea.scss
deleted file mode 100644
index e6ace99..0000000
--- a/src/components/forms/_textarea.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-// Textarea styles
-// ----------------------------------------------
-
-/* SG
-# Forms/Textareas
-
-```
-<textarea name="textarea" placeholder="DejaVu Sans" class="CDB-Textarea CDB-Text"></textarea>
-<textarea name="textarea" placeholder="DejaVu Sans" class="CDB-Textarea has-error CDB-Text"></textarea>
-<textarea name="textarea" placeholder="DejaVu Sans" class="CDB-Textarea is-disabled CDB-Text" disabled></textarea>
-```
-*/
-
-.CDB-Textarea {
-  width: 100%;
-  padding: 7px 8px 6px;
-  border: 1px solid $cMainLine;
-  border-radius: $baseSize / 2;
-  font-size: $sFontSize-medium;
-  line-height: $sLineHeight-medium;
-  box-sizing: border-box;
-
-  &:hover {
-    border: 1px solid $cHoverLine;
-  }
-  &:focus {
-    border: 1px solid $cBlue;
-    outline-color: transparent;
-    outline-style: none;
-  }
-  &:disabled,
-  &.is-disabled {
-    border-color: $cSecondaryLine;
-    background: $cThirdBackground;
-  }
-  &:has-error {
-    @include default-form-error-style();
-  }
-}
-.CDB-FieldError .CDB-Textarea,
-.CDB-Textarea.has-error {
-  @include default-form-error-style();
-}
diff --git a/src/components/forms/_toggle.scss b/src/components/forms/_toggle.scss
deleted file mode 100644
index 46972f8..0000000
--- a/src/components/forms/_toggle.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-// Radio Button styles
-// ----------------------------------------------
-
-/* SG
-# Forms/Toggle
-
-
-```
-<div class="Toggle">
-  <div class="CDB-Text CDB-Size-small is-semibold u-rSpace--xl">
-    <label class="u-iBlock">TOOLS</label>
-    <input class="CDB-Toggle u-iBlock" type="checkbox" name="analysis">
-    <span class="u-iBlock CDB-ToggleFace"></span>
-    <label class="u-iBlock">SQL</label>
-  </div>
-</div>
-
-<br/>
-
-<div class="Toggle">
-  <div class="CDB-Text CDB-Size-small is-semibold is-disabled u-rSpace--xl">
-    <label class="u-iBlock">TOOLS</label>
-    <input class="CDB-Toggle u-iBlock" type="checkbox" name="analysis" disabled >
-    <span class="u-iBlock CDB-ToggleFace"></span>
-    <label class="u-iBlock">SQL</label>
-  </div>
-</div>
-```
-*/
-
-.CDB-Toggle {
-  position: absolute;
-  width: $baseSize * 4;
-  height: $baseSize * 2;
-  opacity: 0;
-  z-index: 1;
-
-  &:hover {
-    + .CDB-ToggleFace {
-      background: $cHintTextHover;
-    }
-
-    &:checked + .CDB-ToggleFace {
-      background: $cHighlightHover;
-    }
-  }
-
-  + .CDB-ToggleFace {
-    position: relative;
-    width: $baseSize * 4;
-    height: $baseSize * 2;
-    margin: 0 2px;
-    transition: background 300ms;
-    border-radius: 50px;
-    background: $cHintText;
-
-    &::before {
-      position: absolute;
-      top: 2px;
-      left: 2px;
-      width: $baseSize + 4;
-      height: $baseSize + 4;
-      border-radius: 50%;
-      background: $cWhite;
-      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.48);
-      content: '';
-    }
-  }
-
-  &:checked + .CDB-ToggleFace {
-    background: $cHighlight;
-
-    &::before {
-      right: 2px;
-      left: auto;
-    }
-  }
-}
-
-.Toggle .is-disabled {
-  opacity: 0.24;
-  pointer-events: none;
-}
diff --git a/src/components/forms/checkbox.css b/src/components/forms/checkbox.css
new file mode 100644
index 0000000..4e9a779
--- /dev/null
+++ b/src/components/forms/checkbox.css
@@ -0,0 +1,91 @@
+.CDB-Checkbox {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  opacity: 0;
+  vertical-align: middle;
+  z-index: 1;
+}
+
+.CDB-Checkbox-face {
+  position: relative;
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--color-line);
+  border-radius: 3px;
+  background: white;
+  cursor: pointer;
+  box-sizing: border-box;
+  z-index: 2;
+  pointer-events: none;
+
+  &::before,
+  &::after {
+    display: block;
+    position: absolute;
+    bottom: 3px;
+    width: 2px;
+    border-radius: 1px;
+    background: white;
+    content: '';
+  }
+
+  &::before {
+    right: 4px;
+    height: 8px;
+    transform: rotate(45deg);
+  }
+
+  &::after {
+    left: 4px;
+    height: 6px;
+    transform: rotate(-45deg);
+  }
+}
+
+.CDB-Checkbox:checked + .CDB-Checkbox-face {
+  transition: background 300ms;
+  border: 1px solid var(--color-blue);
+  background: var(--color-blue);
+
+  &::before,
+  &::after {
+    background: white;
+  }
+}
+
+.CDB-Checkbox:checked:hover + .CDB-Checkbox-face {
+  border: 1px solid var(--color-blue);
+
+  &::before,
+  &::after {
+    background: white;
+  }
+}
+
+.CDB-Checkbox:hover + .CDB-Checkbox-face {
+  border: 1px solid var(--color-blue-hover);
+
+  &::before,
+  &::after {
+    background: var(--color-line-hover);
+  }
+}
+.CDB-Checkbox:active + .CDB-Checkbox-face {
+  border: 1px solid var(--color-blue);
+
+  &::before,
+  &::after {
+    background: var(--color-blue);
+  }
+}
+
+.CDB-Checkbox:disabled + .CDB-Checkbox-face {
+  border: 1px solid var(--color-line-hover);
+  background: var(--color-softgray);
+
+  &::before,
+  &::after {
+    opacity: 0;
+  }
+}
diff --git a/src/components/forms/textarea.css b/src/components/forms/textarea.css
new file mode 100644
index 0000000..5d76904
--- /dev/null
+++ b/src/components/forms/textarea.css
@@ -0,0 +1,38 @@
+.CDB-Textarea {
+  width: 100%;
+  padding: 7px 8px 6px;
+  border: 1px solid var(--color-line);
+  border-radius: 4px;
+  font-size: var(--font-size-medium);
+  line-height: var(--line-height-medium);
+  box-sizing: border-box;
+
+  &:hover {
+    border: 1px solid var(--color-line-hover);
+  }
+
+  &:focus {
+    border: 1px solid var(--color-blue);
+    outline-color: transparent;
+    outline-style: none;
+  }
+
+  &:disabled,
+  &.is-disabled {
+    border-color: var(--color-line-secondary);
+    background: var(--color-softgray);
+  }
+
+  &:has-error {
+    border: 1px solid color(var(--color-error) alpha(0.48));
+    background: color(var(--color-error) alpha(0.04));
+    color: var(--color-error);
+  }
+}
+
+.CDB-FieldError .CDB-Textarea,
+.CDB-Textarea.has-error {
+  border: 1px solid color(var(--color-error) alpha(0.48));
+    background: color(var(--color-error) alpha(0.04));
+    color: var(--color-error);
+}
diff --git a/src/components/forms/toggle.css b/src/components/forms/toggle.css
new file mode 100644
index 0000000..5fdfa92
--- /dev/null
+++ b/src/components/forms/toggle.css
@@ -0,0 +1,53 @@
+.CDB-Toggle {
+  position: absolute;
+  width: 32px;
+  height: 16px;
+  opacity: 0;
+  z-index: 1;
+
+  &:hover {
+    + .CDB-ToggleFace {
+      background: var(--color-text-alt-hover);
+    }
+
+    &:checked + .CDB-ToggleFace {
+      background: var(--color-highlight);
+    }
+  }
+
+  + .CDB-ToggleFace {
+    position: relative;
+    width: 32px;
+    height: 16px;
+    margin: 0 2px;
+    transition: background 300ms;
+    border-radius: 50px;
+    background: var(--color-text-alt);
+
+    &::before {
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background: white;
+      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.48);
+      content: '';
+    }
+  }
+
+  &:checked + .CDB-ToggleFace {
+    background: var(--color-highlight);
+
+    &::before {
+      right: 2px;
+      left: auto;
+    }
+  }
+}
+
+.Toggle .is-disabled {
+  opacity: 0.24;
+  pointer-events: none;
+}
diff --git a/src/components/shapes/_add.scss b/src/components/shapes/_add.css
similarity index 97%
rename from src/components/shapes/_add.scss
rename to src/components/shapes/_add.css
index 2860a56..e148c21 100644
--- a/src/components/shapes/_add.scss
+++ b/src/components/shapes/_add.css
@@ -114,13 +114,13 @@ Description
 .CDB-Shape-add.is-blue {
   &::before,
   &::after {
-    background: $cBlue;
+    background: var(--color-blue);
   }
 }
 
 .CDB-Shape-add.is-white {
   &::before,
   &::after {
-    background: $cWhite;
+    background: white;
   }
 }
diff --git a/src/components/shapes/_arrow.scss b/src/components/shapes/_arrow.css
similarity index 86%
rename from src/components/shapes/_arrow.scss
rename to src/components/shapes/_arrow.css
index 2f5cc7d..44ac86f 100644
--- a/src/components/shapes/_arrow.scss
+++ b/src/components/shapes/_arrow.css
@@ -59,25 +59,25 @@ Description
 }
 
 .CDB-Shape-Arrow.is-blue {
-  background: $cBlue;
+  background: var(--color-blue);
 
   &::before {
-    background: $cBlue;
+    background: var(--color-blue);
   }
 
   &::after {
-    background: $cBlue;
+    background: var(--color-blue);
   }
 }
 
 .CDB-Shape-Arrow.is-white {
-  background: $cWhite;
+  background: white;
 
   &::before {
-    background: $cWhite;
+    background: white;
   }
 
   &::after {
-    background: $cWhite;
+    background: white;
   }
 }
diff --git a/src/components/shapes/_check-circle.scss b/src/components/shapes/_check-circle.css
similarity index 93%
rename from src/components/shapes/_check-circle.scss
rename to src/components/shapes/_check-circle.css
index 42323d8..46fb570 100644
--- a/src/components/shapes/_check-circle.scss
+++ b/src/components/shapes/_check-circle.css
@@ -67,10 +67,10 @@ Description
     transform: translateY(2px);
   }
   &.is-blue {
-    border: 1px solid $cBlue;
+    border: 1px solid var(--color-blue);
   }
   &.is-white {
-    border: 1px solid $cWhite;
+    border: 1px solid white;
   }
 }
 
@@ -125,19 +125,19 @@ Description
 
 .CDB-Shape-tick.is-blue {
   &::before {
-    background: $cBlue;
+    background: var(--color-blue);
   }
   &::after {
-    background: $cBlue;
+    background: var(--color-blue);
   }
 }
 
 .CDB-Shape-tick.is-white {
   &::before {
-    background: $cWhite;
+    background: white;
   }
   &::after {
-    background: $cWhite;
+    background: white;
   }
 }
 
diff --git a/src/components/shapes/_close.scss b/src/components/shapes/_close.css
similarity index 92%
rename from src/components/shapes/_close.scss
rename to src/components/shapes/_close.css
index 5ecde8e..f2da5e1 100644
--- a/src/components/shapes/_close.scss
+++ b/src/components/shapes/_close.css
@@ -120,27 +120,27 @@ Description
 
 .CDB-Shape-close.is-blue {
   &::before {
-    background: $cBlue;
+    background: var(--color-blue);
   }
   &::after {
-    background: $cBlue;
+    background: var(--color-blue);
   }
 }
 
 .CDB-Shape-close.is-white {
   &::before {
-    background: $cWhite;
+    background: white;
   }
   &::after {
-    background: $cWhite;
+    background: white;
   }
 }
 
 .CDB-Shape-close.is-red {
   &::before {
-    background: $cError;
+    background: var(--color-error);
   }
   &::after {
-    background: $cError;
+    background: var(--color-error);
   }
 }
diff --git a/src/components/shapes/_dash.scss b/src/components/shapes/_dash.css
similarity index 96%
rename from src/components/shapes/_dash.scss
rename to src/components/shapes/_dash.css
index 84c32f1..ce3c5b2 100644
--- a/src/components/shapes/_dash.scss
+++ b/src/components/shapes/_dash.css
@@ -69,12 +69,12 @@ Description
 
 .CDB-Shape-dash.is-blue {
   &::before {
-    background: $cBlue;
+    background: var(--color-blue);
   }
 }
 
 .CDB-Shape-dash.is-white {
   &::before {
-    background: $cWhite;
+    background: white;
   }
 }
diff --git a/src/components/shapes/_dataset.scss b/src/components/shapes/_dataset.css
similarity index 93%
rename from src/components/shapes/_dataset.scss
rename to src/components/shapes/_dataset.css
index 4635801..584790d 100644
--- a/src/components/shapes/_dataset.scss
+++ b/src/components/shapes/_dataset.css
@@ -92,12 +92,12 @@ Description
   margin-left: -10px;
   border: 1px solid $cMainBg;
   border-radius: 50%;
-  background: $cWhite;
+  background: white;
 
   &:first-child {
     position: relative;
     margin-left: 0;
-    box-shadow: 3px 0 0 $cWhite;
+    box-shadow: 3px 0 0 white;
     z-index: 1;
   }
 }
@@ -109,26 +109,26 @@ Description
     margin-left: -7px;
     &:first-child {
       margin-left: 0;
-      box-shadow: 2px 0 0 $cWhite;
+      box-shadow: 2px 0 0 white;
     }
   }
 }
 
 .CDB-Shape-Dataset.is-blue {
   .CDB-Shape-DatasetItem {
-    border: 1px solid $cBlue;
+    border: 1px solid var(--color-blue);
   }
 }
 
 .CDB-Shape-Dataset.is-grey {
   .CDB-Shape-DatasetItem {
-    border: 1px solid $cHoverLine;
+    border: 1px solid var(--color-line-hover);
   }
 }
 
 .CDB-Shape-Dataset.is-white {
   .CDB-Shape-DatasetItem {
-    border: 1px solid $cHoverLine;
+    border: 1px solid var(--color-line-hover);
     background: $cMainBg;
     &:first-child {
       box-shadow: 3px 0 $cMainBg;
diff --git a/src/components/shapes/_dots.scss b/src/components/shapes/_dots.css
similarity index 85%
rename from src/components/shapes/_dots.scss
rename to src/components/shapes/_dots.css
index f082276..5a8bd7e 100644
--- a/src/components/shapes/_dots.scss
+++ b/src/components/shapes/_dots.css
@@ -17,9 +17,9 @@ You may resize and change the colors of the icons with the `glyph-`-classes. Ava
   width: $baseSize;
   height: $baseSize;
   border-radius: 50%;
-  background: $cSecondaryLine;
+  background: var(--color-line-secondary);
 
   &.is-selected {
-    background: $cSecondaryText;
+    background: var(--color-text-secondary);
   }
 }
diff --git a/src/components/shapes/_error-circle.scss b/src/components/shapes/_error-circle.css
similarity index 86%
rename from src/components/shapes/_error-circle.scss
rename to src/components/shapes/_error-circle.css
index 12cc8eb..86bb401 100644
--- a/src/components/shapes/_error-circle.scss
+++ b/src/components/shapes/_error-circle.css
@@ -67,35 +67,35 @@ Description
     margin: 0 auto;
   }
   &.is-blue {
-    border: 1px solid $cBlue;
+    border: 1px solid var(--color-blue);
   }
   &.is-white {
-    border: 1px solid $cWhite;
+    border: 1px solid white;
   }
   &.is-green {
     border: 1px solid $cHighlight;
   }
   &.is-red {
-    border: 1px solid $cError;
+    border: 1px solid var(--color-error);
   }
 }
 
 
 .CDB-Shape-CircleItem--fill {
   &.is-blue {
-    border: 1px solid $cBlue;
-    background: $cBlue;
+    border: 1px solid var(--color-blue);
+    background: var(--color-blue);
   }
   &.is-white {
-    border: 1px solid $cWhite;
-    background: $cWhite;
+    border: 1px solid white;
+    background: white;
   }
   &.is-green {
     border: 1px solid $cHighlight;
     background: $cHighlight;
   }
   &.is-red {
-    border: 1px solid $cError;
-    background: $cError;
+    border: 1px solid var(--color-error);
+    background: var(--color-error);
   }
 }
diff --git a/src/components/shapes/_hamburguer.scss b/src/components/shapes/_hamburguer.css
similarity index 95%
rename from src/components/shapes/_hamburguer.scss
rename to src/components/shapes/_hamburguer.css
index c1aeaf5..3aca767 100644
--- a/src/components/shapes/_hamburguer.scss
+++ b/src/components/shapes/_hamburguer.css
@@ -49,12 +49,12 @@ Description
 
 .CDB-Shape-hamburguer.is-blue {
   .CDB-Shape-hamburguerItem {
-    background: $cBlue;
+    background: var(--color-blue);
   }
 }
 
 .CDB-Shape-hamburguer.is-white {
   .CDB-Shape-hamburguerItem {
-    background: $cWhite;
+    background: white;
   }
 }
diff --git a/src/components/shapes/_magnify.scss b/src/components/shapes/_magnify.css
similarity index 94%
rename from src/components/shapes/_magnify.scss
rename to src/components/shapes/_magnify.css
index 1c3466d..b96d3e9 100644
--- a/src/components/shapes/_magnify.scss
+++ b/src/components/shapes/_magnify.css
@@ -76,19 +76,19 @@ Description
 
 .CDB-Shape-magnify.is-blue {
   &::before {
-    border: 1px solid $cBlue;
+    border: 1px solid var(--color-blue);
   }
   &::after {
-    background: $cBlue;
+    background: var(--color-blue);
   }
 }
 
 .CDB-Shape-magnify.is-white {
   &::before {
-    border: 1px solid $cWhite;
+    border: 1px solid white;
   }
   &::after {
-    background: $cWhite;
+    background: white;
   }
 }
 
diff --git a/src/components/shapes/_move.scss b/src/components/shapes/_move.css
similarity index 97%
rename from src/components/shapes/_move.scss
rename to src/components/shapes/_move.css
index 792c34b..5db655f 100644
--- a/src/components/shapes/_move.scss
+++ b/src/components/shapes/_move.css
@@ -140,20 +140,20 @@ Description
 .CDB-Shape-rectsHandleItem--blue {
   &::before,
   &::after {
-    background: $cBlue;
+    background: var(--color-blue);
   }
 }
 
 .CDB-Shape-rectsHandleItem--white {
   &::before,
   &::after {
-    background: $cWhite;
+    background: white;
   }
 }
 
 .CDB-Shape-rectsHandleItem--grey {
   &::before,
   &::after {
-    background: $cHoverLine;
+    background: var(--color-line-hover);
   }
 }
diff --git a/src/components/shapes/_paragraph.scss b/src/components/shapes/_paragraph.css
similarity index 97%
rename from src/components/shapes/_paragraph.scss
rename to src/components/shapes/_paragraph.css
index 36b736c..8a0b6a3 100644
--- a/src/components/shapes/_paragraph.scss
+++ b/src/components/shapes/_paragraph.css
@@ -88,12 +88,12 @@ Description
   display: inline-block;
   height: 1px;
   margin-bottom: 2px;
-  background: $cSecondaryLine;
+  background: var(--color-line-secondary);
   vertical-align: top;
 }
 
 .CDB-Shape-paragraph.is-active .CDB-Shape-paragraphBar {
-  background: $cBlue;
+  background: var(--color-blue);
 }
 
 .CDB-Shape-paragraphBar--01 {
diff --git a/src/components/shapes/_threePoints.scss b/src/components/shapes/_threePoints.css
similarity index 98%
rename from src/components/shapes/_threePoints.scss
rename to src/components/shapes/_threePoints.css
index b15dad5..099e50d 100644
--- a/src/components/shapes/_threePoints.scss
+++ b/src/components/shapes/_threePoints.css
@@ -143,9 +143,9 @@ Description
 }
 
 .CDB-Shape-threePoints.is-blue .CDB-Shape-threePointsItem {
-  background: $cBlue;
+  background: var(--color-blue);
 }
 
 .CDB-Shape-threePoints.is-white .CDB-Shape-threePointsItem {
-  background: $cWhite;
+  background: white;
 }
diff --git a/src/components/shapes/_toogle-arrow.scss b/src/components/shapes/_toogle-arrow.css
similarity index 96%
rename from src/components/shapes/_toogle-arrow.scss
rename to src/components/shapes/_toogle-arrow.css
index 240ea7a..3780856 100644
--- a/src/components/shapes/_toogle-arrow.scss
+++ b/src/components/shapes/_toogle-arrow.css
@@ -128,18 +128,18 @@ Description
 
 .CDB-ArrowToogle.is-blue {
   &::before {
-    background: $cBlue;
+    background: var(--color-blue);
   }
   &::after {
-    background: $cBlue;
+    background: var(--color-blue);
   }
 }
 
 .CDB-ArrowToogle.is-white {
   &::before {
-    background: $cWhite;
+    background: white;
   }
   &::after {
-    background: $cWhite;
+    background: white;
   }
 }
diff --git a/src/components/shapes/_type.scss b/src/components/shapes/_type.css
similarity index 94%
rename from src/components/shapes/_type.scss
rename to src/components/shapes/_type.css
index a8aed38..436f5e9 100644
--- a/src/components/shapes/_type.scss
+++ b/src/components/shapes/_type.css
@@ -65,7 +65,7 @@ Description
   width: 3px;
   height: 3px;
   border-radius: 50%;
-  background: $cHoverLine;
+  background: var(--color-line-hover);
 }
 .CDB-Type-circle--01 {
   top: 0;
@@ -91,7 +91,7 @@ Description
   right: 1px;
   bottom: 1px;
   left: 1px;
-  border: 1px solid $cHoverLine;
+  border: 1px solid var(--color-line-hover);
   content: '';
 }
 
@@ -104,6 +104,6 @@ Description
   left: 3px;
   width: 1px;
   transform: rotate(45deg);
-  background: $cHoverLine;
+  background: var(--color-line-hover);
   content: '';
 }
diff --git a/src/entry.css b/src/entry.css
index 4d16617..8eeec76 100644
--- a/src/entry.css
+++ b/src/entry.css
@@ -1,6 +1,5 @@
 @import 'variables/sizes';
 @import 'variables/colors';
-@import 'utilities/mixins';
 
 @import 'vendor/reset';
 @import 'vendor/normalize';
diff --git a/src/utilities/_defaults.scss b/src/utilities/_defaults.scss
deleted file mode 100644
index cf0f99d..0000000
--- a/src/utilities/_defaults.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-// Default classes
-// ----------------------------------------------
-
-body {
-  color: $cMainText;
-}
-
-a {
-  color: $cBlue;
-  text-decoration: none;
-}
-
-a:hover {
-  text-decoration: underline;
-}
diff --git a/src/utilities/_mixins.scss b/src/utilities/_mixins.scss
deleted file mode 100644
index d393024..0000000
--- a/src/utilities/_mixins.scss
+++ /dev/null
@@ -1,236 +0,0 @@
-// Mixins
-// - Necessary SCSS functions
-// - Browser support:
-//  · IE => 10
-//  · Chrome => 21
-//  · Sarafi => 6
-//  · Firefox => 24
-//  · Opera => 12
-// --------------------------------------------------
-
-/* ADDS A BROWSER PREFIX TO THE PROPERTY */
-@mixin css3-prefix($property, $value) {
-  -webkit-#{$property}: #{$value};
-   -khtml-#{$property}: #{$value};
-     -moz-#{$property}: #{$value};
-      -ms-#{$property}: #{$value};
-       -o-#{$property}: #{$value};
-          #{$property}: #{$value};
-}
-
-// Display inline
-@mixin inline-block() {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-// Display flex functions
-@mixin display-flex() {
-  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
-  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
-  display: -ms-flexbox;      /* TWEENER - IE 10 */
-  display: -webkit-flex;     /* NEW - Chrome */
-  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
-}
-@mixin flex($v) {
-  -webkit-box-flex: $v;
-  -moz-box-flex:  $v;
-  -webkit-flex:  $v;
-  -ms-flex:  $v;
-  flex:  $v;
-}
-@mixin flex-direction($v) {
-  -webkit-flex-direction: $v;
-  -moz-flex-direction: $v;
-  -ms-flex-direction: $v;
-  flex-direction: $v;
-  // IE10 doesn't support this property
-}
-@mixin flex-grow($v) {
-  -webkit-flex-grow: $v;
-  -moz-flex-grow: $v;
-  -ms-flex-grow: $v;
-  flex-grow: $v;
-  // IE10 fallback
-  -ms-flex: $v 0 auto;
-}
-@mixin flex-wrap($v) {
-  -webkit-flex-wrap: $v;
-  -moz-flex-wrap: $v;
-  -ms-flex-wrap: $v;
-  flex-wrap: $v;
-  // IE10 doesn't support this property
-}
-@mixin flex-order($v) {
-  -webkit-flex-order: $v;
-  -webkit-box-ordinal-group: $v;
-  -moz-box-ordinal-group: $v;
-  -moz-flex-order: $v;
-  -ms-flex-order: $v;
-  -ms-order: $v;
-  box-ordinal-group: $v;
-  flex-order: $v;
-  order: $v;
-}
-@mixin justify-content($v, $ie-v: "") {
-  -webkit-justify-content: $v;
-  -moz-justify-content: $v;
-  -ms-justify-content: $v;
-  justify-content: $v;
-  // Hello IE10
-  -ms-flex-pack: if($ie-v != "", $ie-v, $v);
-}
-@mixin align-items($v, $ie-v: "") {
-  -webkit-align-items: $v;
-  -moz-align-items: $v;
-  -ms-align-items: $v;
-  align-items: $v;
-  // Hello IE10
-  -ms-flex-align: if($ie-v != "", $ie-v, $v);
-}
-@mixin align-content($v, $ie-v: "") {
-  -webkit-align-content: $v;
-  -moz-align-content: $v;
-  -ms-align-content: $v;
-  align-content: $v;
-  // Hello IE10
-  -ms-flex-align: if($ie-v != "", $ie-v, $v);
-}
-
-// CSS3 typical functions
-@mixin opacity($v) {
-  opacity:$v;
-  filter:alpha(opacity=($v*100)); // IE10
-}
-
-@mixin grayscale() {
-  -webkit-filter: grayscale(100%);
-  -moz-filter: grayscale(100%);
-  -ms-filter: grayscale(100%);
-  -o-filter: grayscale(100%);
-  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
-}
-
-
-@mixin background-gradient($startColor: #3C3C3C, $endColor: #999999) {
-  background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
-  background-image: -webkit-linear-gradient(top, $startColor, $endColor);
-  background-image:    -moz-linear-gradient(top, $startColor, $endColor);
-  background-image:     -ms-linear-gradient(top, $startColor, $endColor);
-  background-image:      -o-linear-gradient(top, $startColor, $endColor);
-  background-image:         linear-gradient(top, $startColor, $endColor);
-  filter:            progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}', endColorStr='#{$endColor}');
-}
-
-@mixin background-horizontal($startColor: #3C3C3C, $endColor: #999999) {
-  background-color: $startColor;
-  background-image: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor));
-  background-image: -webkit-linear-gradient(left, $startColor, $endColor);
-  background-image:    -moz-linear-gradient(left, $startColor, $endColor);
-  background-image:     -ms-linear-gradient(left, $startColor, $endColor);
-  background-image:      -o-linear-gradient(left, $startColor, $endColor);
-  background-image:         linear-gradient(left, $startColor, $endColor);
-  filter:            progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}', endColorStr='#{$endColor}', gradientType='1');
-}
-
-@mixin image-2x($image, $width, $height, $x: 0, $y: 0) {
-  @media (min--moz-device-pixel-ratio: 1.3),
-         (-o-min-device-pixel-ratio: 2.6/2),
-         (-webkit-min-device-pixel-ratio: 1.3),
-         (min-device-pixel-ratio: 1.3),
-         (min-resolution: 1.3dppx) {
-    /* on retina, use image that's scaled by 2 */
-    background: url($image);
-    background-size: $width $height;
-    background-position: $x $y;
-  }
-}
-
-@mixin transform($params) {
-  @include css3-prefix('transform', $params);
-}
-
-@mixin transform-style($style: preserve-3d) {
-  @include css3-prefix('transform-style', $style);
-}
-
-@mixin transition($properties...) {
-
-  @if length($properties) >= 1 {
-    @include css3-prefix('transition', $properties);
-  }
-
-  @else {
-    @include css3-prefix('transition', $what: all, $length: 1s, $easing: ease-in-out);
-  }
-}
-
-
-/* FONT FACE */
-@mixin font-face($fontFamily: myFont, $eotFileSrc: 'myFont.eot', $woffFileSrc: 'myFont.woff', $ttfFileSrc: 'myFont.ttf', $svgFileSrc: 'myFont.svg', $svgFontID: '#myFont') {
-  @font-face {
-    font-family: $fontFamily;
-    src: url($eotFileSrc)  format('eot'),
-         url($woffFileSrc) format('woff'),
-         url($ttfFileSrc)  format('truetype'),
-         url($svgFileSrc + $svgFontID) format('svg');
-  }
-}
-
-@mixin keyframes($animation-name) {
-  @-webkit-keyframes #{$animation-name} {
-    @content;
-  }
-  @-moz-keyframes #{$animation-name} {
-    @content;
-  }
-  @-ms-keyframes #{$animation-name} {
-    @content;
-  }
-  @-o-keyframes #{$animation-name} {
-    @content;
-  }
-  @keyframes #{$animation-name} {
-    @content;
-  }
-}
-
-@mixin text-overflow() {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-@mixin animation($str) {
-  @include css3-prefix('animation', $str);
-}
-
-@mixin line-clamp($lines) {
-  height: $lines * $sLineHeight-normal;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: $lines;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  &:after {
-    content: ' ';
-    display: block;
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    height: $sLineHeight-normal;
-    width: 2 * $sLineHeight-normal;
-    @include background-horizontal(rgba(255,255,255,0), rgba(255,255,255,1));
-  }
-}
-
-@mixin media-query() {
-  @media only screen and (min-width: 320px) and (max-width: 960px)  {
-    @content;
-  }
-}
-@mixin media-query-mobile() {
-  @media only screen and (max-width: 600px) {
-    @content;
-  }
-}
diff --git a/src/utilities/defaults.css b/src/utilities/defaults.css
new file mode 100644
index 0000000..249f3e4
--- /dev/null
+++ b/src/utilities/defaults.css
@@ -0,0 +1,16 @@
+/**
+ * Base styles
+ */
+
+body {
+  color: var(--color-text-primary);
+}
+
+a {
+  color: var(--color-blue);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
diff --git a/src/utilities/_fonts.scss b/src/utilities/fonts.css
similarity index 93%
rename from src/utilities/_fonts.scss
rename to src/utilities/fonts.css
index 8013dc9..ae754da 100644
--- a/src/utilities/_fonts.scss
+++ b/src/utilities/fonts.css
@@ -1,6 +1,3 @@
-// Fonts
-// --------------------------------------------------
-
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
diff --git a/src/utilities/_helpers.scss b/src/utilities/helpers.css
similarity index 59%
rename from src/utilities/_helpers.scss
rename to src/utilities/helpers.css
index e7ec814..abebef7 100644
--- a/src/utilities/_helpers.scss
+++ b/src/utilities/helpers.css
@@ -1,126 +1,165 @@
-// Helper classes
-// ----------------------------------------------
+/* MARGINS */
+
+.u-tSpace--s {
+  margin-top: 2px;
+}
 
-/* Margins */
 .u-tSpace {
   margin-top: 4px;
 }
+
 .u-tSpace--m {
   margin-top: 8px;
 }
+
 .u-tSpace-xl {
   margin-top: 12px;
 }
+
 .u-rSpace--s {
   margin-right: 2px;
 }
+
 .u-rSpace {
   margin-right: 4px;
 }
+
 .u-rSpace--m {
   margin-right: 8px;
 }
+
 .u-rSpace--xl {
   margin-right: 12px;
 }
+
+.u-bSpace--s {
+  margin-bottom: 2px;
+}
+
 .u-bSpace {
   margin-bottom: 4px;
 }
+
 .u-bSpace--m {
   margin-bottom: 8px;
 }
+
 .u-bSpace--xl {
   margin-bottom: 12px;
 }
-.u-lSpace {
-  margin-left: 4px;
-}
+
 .u-lSpace--s {
   margin-left: 2px;
 }
+
+.u-lSpace {
+  margin-left: 4px;
+}
+
+.u-lSpace--m {
+  margin-left: 8px;
+}
+
 .u-lSpace--xl {
   margin-left: 12px;
 }
 
+/* -- COLORS */
+.u-actionTextColor {
+  color: var(--color-blue);
+
+  &:hover {
+    color: var(--color-blue-hover);
+  }
+}
+
+.u-mainTextColor {
+  color: var(--color-text-primary);
+}
+
+.u-secondaryTextColor {
+  color: var(--color-text-secondary);
+}
+
+.u-altTextColor {
+  color: var(--color-text-alt);
+}
+
+.u-hintTextColor {
+  color: var(--color-text-alt);
+}
+
+.u-alertTextColor {
+  color: var(--color-alert);
+}
+
+.u-whiteTextColor {
+  color: white;
+}
+
+.u-errorTextColor {
+  color: var(--color-error);
+}
+
+/* -- DISPLAYS */
+
+.u-iBlock {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.u-showDesktop {
+  display: block !important;
+}
+
+.u-showMobile {
+  display: none !important;
+}
+
+/* -- DECORATION */
+
 .u-ellipsis {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }
 
-// Colors
-// Main Text Color is default color
-// ----------------------------------------------
-
-.u-actionTextColor {
-  color: $cBlue;
-
-  &:hover {
-    color: $cBlueHover;
-  }
-}
-.u-mainTextColor {
-  color: $cMainText;
-}
-.u-secondaryTextColor {
-  color: $cSecondaryText;
-}
-.u-altTextColor {
-  color: $cAltText;
-}
-.u-hintTextColor {
-  color: $cHintText;
-}
-.u-alertTextColor {
-  color: $cAlert;
-}
-.u-whiteTextColor {
-  color: $cWhite;
-}
-.u-errorTextColor {
-  color: $cError;
-}
-
-/* Displays */
-.u-iBlock {
-  @include inline-block();
-}
-.u-showDesktop {
-  display: block !important;
-}
-.u-showMobile {
-  display: none !important;
-}
-
-/* Decoration */
 .u-upperCase {
   text-transform: uppercase;
 }
 
-/* Flex */
+/* -- FLEX */
+
 .u-flex {
-  @include display-flex();
+  display: flex;
 }
+
 .u-justifySpace {
-  @include justify-content(space-between);
+  justify-content: space-between;
 }
+
 .u-justifyCenter {
-  @include justify-content(center);
+  justify-content: center;
 }
+
 .u-justifyStart {
-  @include justify-content(flex-start);
+  justify-content: flex-start;
 }
+
 .u-justifyEnd {
-  @include justify-content(flex-end);
+  justify-content: flex-end;
 }
+
 .u-alignStart {
-  @include align-items(flex-start);
+  align-items: flex-start;
 }
+
 .u-alignCenter {
-  @include align-items(center);
+  align-items: center;
 }
+
 .u-alignEnd {
-  @include align-items(flex-end);
+  align-items: flex-end;
 }
 
 
@@ -136,7 +175,7 @@
 
 /* helper mixins */
 @mixin default-form-error-style() {
-  border: 1px solid rgba($cError, 0.48);
-  background: rgba($cError, 0.04);
-  color: $cError;
+  border: 1px solid rgba(var(--color-error), 0.48);
+  background: rgba(var(--color-error), 0.04);
+  color: var(--color-error);
 }
diff --git a/src/variables/_colors.scss b/src/variables/_colors.scss
deleted file mode 100644
index 22b38fa..0000000
--- a/src/variables/_colors.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-// -- General
-$cBlue: #1785FB;
-$cBlack: #000;
-$cWhite: #FFF;
-$cMainBg: #2E3C43;
-
-// -- Structure
-$cSecondaryDark: #282C2F;
-$cSecondaryBackground: #F2F6F9;
-$cThirdBackground: #F9F9F9;
-
-// -- Lines
-$cHoverLine: #AAA;
-$cMainLine: #DDD;
-$cSecondaryLine: rgba($cMainBg, 0.08);
-
-// -- Borders
-$cBlackHover: #2E3C43;
-$cBlueHover: #0F6CD2;
-
-// -- Typography
-$cMainText: #2E3C43;
-$cSecondaryText: #636D72;
-$cAltText: #979EA1;
-$cHintText: #CBCED0;
-$cHintTextHover: #9C9FA1;
-
-// -- Others
-$cHighlight: #9DE0AD;
-$cHighlightHover: #82BB90;
-$cAlert: #F19243;
-$cPublic: #9BC63B;
-$cLink: #FEB100;
-$cPassword: #FB7B23;
-$cError: #F15743;
-$cHighlightYellow: #FFFFC0;
diff --git a/src/variables/colors.css b/src/variables/colors.css
new file mode 100644
index 0000000..bd4c00f
--- /dev/null
+++ b/src/variables/colors.css
@@ -0,0 +1,23 @@
+:root {
+  --color-blue: #1785FB;
+  --color-blue-hover: color(var(--color-blue) l(-10%) s(-10%));
+  --color-softgray: #F9F9F9;
+
+  --color-highlight: #9DE0AD;
+  --color-alert: #FFFFC0;
+  --color-public: #9BC63B;
+  --color-share: #FEB100;
+  --color-password: #FB7B23;
+  --color-error: #F15743;
+
+  --color-text-primary: #2E3C43;
+  --color-text-secondary: #747D82;
+  --color-text-alt: #BABEC0;
+  --color-text-alt-hover: color(var(--color-text-alt) l(-10%) s(-10%));
+
+  --color-bg-primary: #FFF;
+  --color-bg-secondary: #F2F6F9;
+
+  --color-line: #DDD;
+  --color-line-hover: color(var(--color-line) l(-10%) s(-10%));
+}
diff --git a/src/variables/sizes.css b/src/variables/sizes.css
index ebb911a..3115884 100644
--- a/src/variables/sizes.css
+++ b/src/variables/sizes.css
@@ -1,31 +1,23 @@
-// Sizes variables
-// ----------------------------------------------
+:root {
+  --layout-desktop: 352px;
+  --layout-mobile: 280px;
 
-// Widths
-$desktopLayout: 352px;
-$mobileLayout: 280px;
+  --unit: 8px;
 
-//Base
-$baseSize: 8px;
-$halfBaseSize: $baseSize / 2;
+  --margin-section: 24px;
+  --margin-element: 14px;
 
-// Margins
-$sMargin-section: 24px; // To separate main section
-$sMargin-element: 14px; // To separate elements inside a group
+  --font-size-small: 10px;
+  --font-size-medium: 12px;
+  --font-size-large: 16px;
+  --font-size-huge: 26px;
 
-// Font sizes
-$sFontSize-small: 10px;
-$sFontSize-medium: 12px;
-$sFontSize-large: 16px;
-$sFontSize-huge: 26px;
+  --font-weight-lighter: 300;
+  --font-weight-normal: 400;
+  --font-weight-semibold: 600;
 
-// Font weights
-$sFontWeight-lighter: 300;
-$sFontWeight-normal: 400;
-$sFontWeight-semibold: 600;
-
-// Line heights
-$sLineHeight-small: 14px;
-$sLineHeight-medium: 16px;
-$sLineHeight-large: 22px;
-$sLineHeight-huge: 34px;
+  --line-height-small: 14px;
+  --line-height-medium: 16px;
+  --line-height-large: 22px;
+  --line-height-huge: 34px;
+}
diff --git a/src/vendor/_normalize.scss b/src/vendor/_normalize.css
similarity index 100%
rename from src/vendor/_normalize.scss
rename to src/vendor/_normalize.css
diff --git a/src/vendor/_reset.scss b/src/vendor/_reset.css
similarity index 100%
rename from src/vendor/_reset.scss
rename to src/vendor/_reset.css
diff --git a/src/vendor/perfect-scrollbar/_main.scss b/src/vendor/perfect-scrollbar/_main.css
similarity index 100%
rename from src/vendor/perfect-scrollbar/_main.scss
rename to src/vendor/perfect-scrollbar/_main.css
diff --git a/src/vendor/perfect-scrollbar/_mixins.scss b/src/vendor/perfect-scrollbar/_mixins.css
similarity index 100%
rename from src/vendor/perfect-scrollbar/_mixins.scss
rename to src/vendor/perfect-scrollbar/_mixins.css
diff --git a/src/vendor/perfect-scrollbar/_themes.scss b/src/vendor/perfect-scrollbar/_themes.css
similarity index 100%
rename from src/vendor/perfect-scrollbar/_themes.scss
rename to src/vendor/perfect-scrollbar/_themes.css
diff --git a/src/vendor/perfect-scrollbar/_variables.scss b/src/vendor/perfect-scrollbar/_variables.css
similarity index 100%
rename from src/vendor/perfect-scrollbar/_variables.scss
rename to src/vendor/perfect-scrollbar/_variables.css
diff --git a/yarn.lock b/yarn.lock
index 8231a53..cf7c785 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13,6 +13,10 @@ ajv@^4.9.1:
     co "^4.6.0"
     json-stable-stringify "^1.0.1"
 
+alphanum-sort@^1.0.1, alphanum-sort@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
+
 ansi-regex@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
@@ -49,6 +53,12 @@ are-we-there-yet@~1.1.2:
     delegates "^1.0.0"
     readable-stream "^2.0.6"
 
+argparse@^1.0.7:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.9.tgz#73d83bc263f86e97f8cc4f6bae1b0e90a7d22c86"
+  dependencies:
+    sprintf-js "~1.0.2"
+
 arr-diff@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
@@ -97,7 +107,7 @@ asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
 
-autoprefixer@^6.0.2:
+autoprefixer@^6.0.2, autoprefixer@^6.3.1:
   version "6.7.7"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.7.tgz#1dbd1c835658e35ce3f9984099db00585c782014"
   dependencies:
@@ -169,7 +179,7 @@ braces@^1.8.2:
     preserve "^0.2.0"
     repeat-element "^1.1.2"
 
-browserslist@^1.0.0, browserslist@^1.3.6, browserslist@^1.7.6:
+browserslist@^1.0.0, browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6:
   version "1.7.7"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.7.tgz#0bd76704258be829b2398bb50e4b62d1a166b0b9"
   dependencies:
@@ -184,7 +194,7 @@ camelcase@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
 
-caniuse-api@^1.5.3:
+caniuse-api@^1.5.2, caniuse-api@^1.5.3:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.6.1.tgz#b534e7c734c4f81ec5fbe8aca2ad24354b962c6c"
   dependencies:
@@ -234,6 +244,12 @@ chokidar@^1.5.1:
   optionalDependencies:
     fsevents "^1.0.0"
 
+clap@^1.0.9:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/clap/-/clap-1.2.3.tgz#4f36745b32008492557f46412d66d50cb99bce51"
+  dependencies:
+    chalk "^1.1.3"
+
 cliui@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
@@ -250,6 +266,12 @@ co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
 
+coa@~1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/coa/-/coa-1.0.4.tgz#a9ef153660d6a86a8bdec0289a5c684d217432fd"
+  dependencies:
+    q "^1.1.2"
+
 code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
@@ -289,6 +311,18 @@ color@^0.11.0, color@^0.11.3, color@^0.11.4:
     color-convert "^1.3.0"
     color-string "^0.3.0"
 
+colormin@^1.0.5:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/colormin/-/colormin-1.1.2.tgz#ea2f7420a72b96881a38aae59ec124a6f7298133"
+  dependencies:
+    color "^0.11.0"
+    css-color-names "0.0.4"
+    has "^1.0.1"
+
+colors@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
+
 combined-stream@^1.0.5, combined-stream@~1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
@@ -322,6 +356,54 @@ css-color-function@^1.2.0:
     debug "^3.1.0"
     rgb "~0.1.0"
 
+css-color-names@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
+
+cssnano@^3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.10.0.tgz#4f38f6cea2b9b17fa01490f23f1dc68ea65c1c38"
+  dependencies:
+    autoprefixer "^6.3.1"
+    decamelize "^1.1.2"
+    defined "^1.0.0"
+    has "^1.0.1"
+    object-assign "^4.0.1"
+    postcss "^5.0.14"
+    postcss-calc "^5.2.0"
+    postcss-colormin "^2.1.8"
+    postcss-convert-values "^2.3.4"
+    postcss-discard-comments "^2.0.4"
+    postcss-discard-duplicates "^2.0.1"
+    postcss-discard-empty "^2.0.1"
+    postcss-discard-overridden "^0.1.1"
+    postcss-discard-unused "^2.2.1"
+    postcss-filter-plugins "^2.0.0"
+    postcss-merge-idents "^2.1.5"
+    postcss-merge-longhand "^2.0.1"
+    postcss-merge-rules "^2.0.3"
+    postcss-minify-font-values "^1.0.2"
+    postcss-minify-gradients "^1.0.1"
+    postcss-minify-params "^1.0.4"
+    postcss-minify-selectors "^2.0.4"
+    postcss-normalize-charset "^1.1.0"
+    postcss-normalize-url "^3.0.7"
+    postcss-ordered-values "^2.1.0"
+    postcss-reduce-idents "^2.2.2"
+    postcss-reduce-initial "^1.0.0"
+    postcss-reduce-transforms "^1.0.3"
+    postcss-svgo "^2.1.1"
+    postcss-unique-selectors "^2.0.2"
+    postcss-value-parser "^3.2.3"
+    postcss-zindex "^2.0.1"
+
+csso@~2.3.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-2.3.2.tgz#ddd52c587033f49e94b71fc55569f252e8ff5f85"
+  dependencies:
+    clap "^1.0.9"
+    source-map "^0.5.3"
+
 dashdash@^1.12.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
@@ -340,7 +422,7 @@ debug@^3.1.0:
   dependencies:
     ms "2.0.0"
 
-decamelize@^1.1.1:
+decamelize@^1.1.1, decamelize@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
 
@@ -348,6 +430,10 @@ deep-extend@~0.4.0:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
 
+defined@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
@@ -386,6 +472,10 @@ escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
 
+esprima@^2.6.0:
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
+
 expand-brackets@^0.1.4:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
@@ -491,6 +581,10 @@ fstream@^1.0.0, fstream@^1.0.10, fstream@^1.0.2:
     mkdirp ">=0.5 0"
     rimraf "2"
 
+function-bind@^1.0.2:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+
 gather-stream@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/gather-stream/-/gather-stream-1.0.0.tgz#b33994af457a8115700d410f317733cbe7a0904b"
@@ -596,6 +690,12 @@ has-unicode@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
 
+has@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.1.tgz#8461733f538b0837c9361e39a9ab9e9704dc2f28"
+  dependencies:
+    function-bind "^1.0.2"
+
 hawk@3.1.3, hawk@~3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
@@ -613,6 +713,10 @@ hosted-git-info@^2.1.4:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.5.0.tgz#6d60e34b3abbc8313062c3b798ef8d901a07af3c"
 
+html-comment-regex@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e"
+
 http-signature@~1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
@@ -644,6 +748,10 @@ invert-kv@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
 
+is-absolute-url@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.1.0.tgz#50530dfb84fcc9aa7dbe7852e83a37b93b9f2aa6"
+
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
@@ -706,6 +814,10 @@ is-number@^3.0.0:
   dependencies:
     kind-of "^3.0.2"
 
+is-plain-obj@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
+
 is-posix-bracket@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
@@ -714,6 +826,12 @@ is-primitive@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
 
+is-svg@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-2.1.0.tgz#cf61090da0d9efbcab8722deba6f032208dbb0e9"
+  dependencies:
+    html-comment-regex "^1.1.0"
+
 is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
@@ -744,6 +862,13 @@ js-base64@^2.1.9:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.0.tgz#9e566fee624751a1d720c966cd6226d29d4025aa"
 
+js-yaml@~3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.7.0.tgz#5c967ddd837a9bfdca5f2de84253abe8a1c03b80"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^2.6.0"
+
 jsbn@~0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
@@ -842,6 +967,10 @@ log-symbols@^1.0.2:
   dependencies:
     chalk "^1.0.0"
 
+macaddress@^0.2.8:
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"
+
 math-expression-evaluator@^1.2.14:
   version "1.2.17"
   resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac"
@@ -888,7 +1017,7 @@ minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
 
-"mkdirp@>=0.5 0", mkdirp@^0.5.1:
+"mkdirp@>=0.5 0", mkdirp@^0.5.1, mkdirp@~0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
   dependencies:
@@ -948,6 +1077,15 @@ normalize-range@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
 
+normalize-url@^1.4.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c"
+  dependencies:
+    object-assign "^4.0.1"
+    prepend-http "^1.0.0"
+    query-string "^4.1.0"
+    sort-keys "^1.0.0"
+
 npmlog@^4.0.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
@@ -1105,7 +1243,7 @@ postcss-browser-reporter@^0.5.0:
   dependencies:
     postcss "^5.0.4"
 
-postcss-calc@^5.0.0:
+postcss-calc@^5.0.0, postcss-calc@^5.2.0:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e"
   dependencies:
@@ -1192,6 +1330,21 @@ postcss-color-rgba-fallback@^2.0.0:
     postcss-value-parser "^3.0.2"
     rgb-hex "^1.0.0"
 
+postcss-colormin@^2.1.8:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-2.2.2.tgz#6631417d5f0e909a3d7ec26b24c8a8d1e4f96e4b"
+  dependencies:
+    colormin "^1.0.5"
+    postcss "^5.0.13"
+    postcss-value-parser "^3.2.3"
+
+postcss-convert-values@^2.3.4:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-2.6.1.tgz#bbd8593c5c1fd2e3d1c322bb925dcae8dae4d62d"
+  dependencies:
+    postcss "^5.0.11"
+    postcss-value-parser "^3.1.2"
+
 postcss-cssnext@^2.9.0:
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/postcss-cssnext/-/postcss-cssnext-2.11.0.tgz#31e68f001e409604da703b66de14b8b8c8c9f2b1"
@@ -1249,6 +1402,44 @@ postcss-custom-selectors@^3.0.0:
     postcss "^5.0.0"
     postcss-selector-matches "^2.0.0"
 
+postcss-discard-comments@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz#befe89fafd5b3dace5ccce51b76b81514be00e3d"
+  dependencies:
+    postcss "^5.0.14"
+
+postcss-discard-duplicates@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-2.1.0.tgz#b9abf27b88ac188158a5eb12abcae20263b91932"
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-discard-empty@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-2.1.0.tgz#d2b4bd9d5ced5ebd8dcade7640c7d7cd7f4f92b5"
+  dependencies:
+    postcss "^5.0.14"
+
+postcss-discard-overridden@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-0.1.1.tgz#8b1eaf554f686fb288cd874c55667b0aa3668d58"
+  dependencies:
+    postcss "^5.0.16"
+
+postcss-discard-unused@^2.2.1:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-discard-unused/-/postcss-discard-unused-2.2.3.tgz#bce30b2cc591ffc634322b5fb3464b6d934f4433"
+  dependencies:
+    postcss "^5.0.14"
+    uniqs "^2.0.0"
+
+postcss-filter-plugins@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-filter-plugins/-/postcss-filter-plugins-2.0.2.tgz#6d85862534d735ac420e4a85806e1f5d4286d84c"
+  dependencies:
+    postcss "^5.0.4"
+    uniqid "^4.0.0"
+
 postcss-font-family-system-ui@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/postcss-font-family-system-ui/-/postcss-font-family-system-ui-1.0.2.tgz#3e1a5e3fb7e31e5e9e71439ccb0e8014556927c7"
@@ -1298,16 +1489,95 @@ postcss-media-query-parser@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz#27b39c6f4d94f81b1a73b8f76351c609e5cef244"
 
+postcss-merge-idents@^2.1.5:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz#4c5530313c08e1d5b3bbf3d2bbc747e278eea270"
+  dependencies:
+    has "^1.0.1"
+    postcss "^5.0.10"
+    postcss-value-parser "^3.1.1"
+
+postcss-merge-longhand@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-2.0.2.tgz#23d90cd127b0a77994915332739034a1a4f3d658"
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-merge-rules@^2.0.3:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-2.1.2.tgz#d1df5dfaa7b1acc3be553f0e9e10e87c61b5f721"
+  dependencies:
+    browserslist "^1.5.2"
+    caniuse-api "^1.5.2"
+    postcss "^5.0.4"
+    postcss-selector-parser "^2.2.2"
+    vendors "^1.0.0"
+
 postcss-message-helpers@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/postcss-message-helpers/-/postcss-message-helpers-2.0.0.tgz#a4f2f4fab6e4fe002f0aed000478cdf52f9ba60e"
 
+postcss-minify-font-values@^1.0.2:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-1.0.5.tgz#4b58edb56641eba7c8474ab3526cafd7bbdecb69"
+  dependencies:
+    object-assign "^4.0.1"
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.2"
+
+postcss-minify-gradients@^1.0.1:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-1.0.5.tgz#5dbda11373703f83cfb4a3ea3881d8d75ff5e6e1"
+  dependencies:
+    postcss "^5.0.12"
+    postcss-value-parser "^3.3.0"
+
+postcss-minify-params@^1.0.4:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-1.2.2.tgz#ad2ce071373b943b3d930a3fa59a358c28d6f1f3"
+  dependencies:
+    alphanum-sort "^1.0.1"
+    postcss "^5.0.2"
+    postcss-value-parser "^3.0.2"
+    uniqs "^2.0.0"
+
+postcss-minify-selectors@^2.0.4:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-2.1.1.tgz#b2c6a98c0072cf91b932d1a496508114311735bf"
+  dependencies:
+    alphanum-sort "^1.0.2"
+    has "^1.0.1"
+    postcss "^5.0.14"
+    postcss-selector-parser "^2.0.0"
+
 postcss-nesting@^2.0.5:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-2.3.1.tgz#94a6b6a4ef707fbec20a87fee5c957759b4e01cf"
   dependencies:
     postcss "^5.0.19"
 
+postcss-normalize-charset@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz#ef9ee71212d7fe759c78ed162f61ed62b5cb93f1"
+  dependencies:
+    postcss "^5.0.5"
+
+postcss-normalize-url@^3.0.7:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-3.0.8.tgz#108f74b3f2fcdaf891a2ffa3ea4592279fc78222"
+  dependencies:
+    is-absolute-url "^2.0.0"
+    normalize-url "^1.4.0"
+    postcss "^5.0.14"
+    postcss-value-parser "^3.2.3"
+
+postcss-ordered-values@^2.1.0:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-2.2.3.tgz#eec6c2a67b6c412a8db2042e77fe8da43f95c11d"
+  dependencies:
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.1"
+
 postcss-pseudo-class-any-link@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-1.0.0.tgz#903239196401d335fe73ac756186fa62e693af26"
@@ -1321,6 +1591,27 @@ postcss-pseudoelements@^3.0.0:
   dependencies:
     postcss "^5.0.4"
 
+postcss-reduce-idents@^2.2.2:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-idents/-/postcss-reduce-idents-2.4.0.tgz#c2c6d20cc958284f6abfbe63f7609bf409059ad3"
+  dependencies:
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.2"
+
+postcss-reduce-initial@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-1.0.1.tgz#68f80695f045d08263a879ad240df8dd64f644ea"
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-reduce-transforms@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-1.0.4.tgz#ff76f4d8212437b31c298a42d2e1444025771ae1"
+  dependencies:
+    has "^1.0.1"
+    postcss "^5.0.8"
+    postcss-value-parser "^3.0.1"
+
 postcss-replace-overflow-wrap@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-1.0.0.tgz#f0a03b31eab9636a6936bfd210e2aef1b434a643"
@@ -1358,7 +1649,7 @@ postcss-selector-parser@^1.1.4:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss-selector-parser@^2.2.0:
+postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.0, postcss-selector-parser@^2.2.2:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz#f9437788606c3c9acee16ffe8d8b16297f27bb90"
   dependencies:
@@ -1366,11 +1657,36 @@ postcss-selector-parser@^2.2.0:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss-value-parser@^3.0.2, postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0:
+postcss-svgo@^2.1.1:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-2.1.6.tgz#b6df18aa613b666e133f08adb5219c2684ac108d"
+  dependencies:
+    is-svg "^2.0.0"
+    postcss "^5.0.14"
+    postcss-value-parser "^3.2.3"
+    svgo "^0.7.0"
+
+postcss-unique-selectors@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-2.0.2.tgz#981d57d29ddcb33e7b1dfe1fd43b8649f933ca1d"
+  dependencies:
+    alphanum-sort "^1.0.1"
+    postcss "^5.0.4"
+    uniqs "^2.0.0"
+
+postcss-value-parser@^3.0.1, postcss-value-parser@^3.0.2, postcss-value-parser@^3.1.1, postcss-value-parser@^3.1.2, postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"
 
-postcss@^5.0.0, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.19, postcss@^5.0.2, postcss@^5.0.21, postcss@^5.0.3, postcss@^5.0.4, postcss@^5.1.1, postcss@^5.2.0, postcss@^5.2.12, postcss@^5.2.16, postcss@^5.2.8:
+postcss-zindex@^2.0.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-zindex/-/postcss-zindex-2.2.0.tgz#d2109ddc055b91af67fc4cb3b025946639d2af22"
+  dependencies:
+    has "^1.0.1"
+    postcss "^5.0.4"
+    uniqs "^2.0.0"
+
+postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.19, postcss@^5.0.2, postcss@^5.0.21, postcss@^5.0.3, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.8, postcss@^5.1.1, postcss@^5.2.0, postcss@^5.2.12, postcss@^5.2.16, postcss@^5.2.8:
   version "5.2.18"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.18.tgz#badfa1497d46244f6390f58b319830d9107853c5"
   dependencies:
@@ -1387,6 +1703,10 @@ postcss@^6.0.1:
     source-map "^0.6.1"
     supports-color "^4.4.0"
 
+prepend-http@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
+
 preserve@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
@@ -1405,10 +1725,21 @@ punycode@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
 
+q@^1.1.2:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
+
 qs@~6.4.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
 
+query-string@^4.1.0:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
+  dependencies:
+    object-assign "^4.1.0"
+    strict-uri-encode "^1.0.0"
+
 randomatic@^1.1.3:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
@@ -1564,6 +1895,10 @@ safe-buffer@^5.0.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
 
+sax@~1.2.1:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
+
 "semver@2 || 3 || 4 || 5", semver@^5.3.0:
   version "5.4.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
@@ -1586,7 +1921,13 @@ sntp@1.x.x:
   dependencies:
     hoek "2.x.x"
 
-source-map@^0.5.6:
+sort-keys@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad"
+  dependencies:
+    is-plain-obj "^1.0.0"
+
+source-map@^0.5.3, source-map@^0.5.6:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
@@ -1608,6 +1949,10 @@ spdx-license-ids@^1.0.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-1.2.2.tgz#c9df7a3424594ade6bd11900d596696dc06bac57"
 
+sprintf-js@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+
 sshpk@^1.7.0:
   version "1.13.1"
   resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.13.1.tgz#512df6da6287144316dc4c18fe1cf1d940739be3"
@@ -1622,6 +1967,10 @@ sshpk@^1.7.0:
     jsbn "~0.1.0"
     tweetnacl "~0.14.0"
 
+strict-uri-encode@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
+
 string-width@^1.0.1, string-width@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
@@ -1672,6 +2021,18 @@ supports-color@^4.0.0, supports-color@^4.4.0:
   dependencies:
     has-flag "^2.0.0"
 
+svgo@^0.7.0:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"
+  dependencies:
+    coa "~1.0.1"
+    colors "~1.1.2"
+    csso "~2.3.1"
+    js-yaml "~3.7.0"
+    mkdirp "~0.5.1"
+    sax "~1.2.1"
+    whet.extend "~0.9.9"
+
 tar-pack@^3.4.0:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.4.1.tgz#e1dbc03a9b9d3ba07e896ad027317eb679a10a1f"
@@ -1717,6 +2078,16 @@ uniq@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
 
+uniqid@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/uniqid/-/uniqid-4.1.1.tgz#89220ddf6b751ae52b5f72484863528596bb84c1"
+  dependencies:
+    macaddress "^0.2.8"
+
+uniqs@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
+
 units-css@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/units-css/-/units-css-0.4.0.tgz#d6228653a51983d7c16ff28f8b9dc3b1ffed3a07"
@@ -1739,6 +2110,10 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "~1.0.0"
     spdx-expression-parse "~1.0.0"
 
+vendors@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.1.tgz#37ad73c8ee417fb3d580e785312307d274847f22"
+
 verror@1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
@@ -1751,6 +2126,10 @@ viewport-dimensions@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/viewport-dimensions/-/viewport-dimensions-0.2.0.tgz#de740747db5387fd1725f5175e91bac76afdf36c"
 
+whet.extend@~0.9.9:
+  version "0.9.9"
+  resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1"
+
 which-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"