Revert "Update carto assets"

2017-05-10 18:30:16 +02:00
68 changed files with 437 additions and 962 deletions
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,7 +1,7 @@
 cache: false
 language: node_js
 node_js:
-  - "6.14.2"
+  - "4.1"

 install:
  - npm install
--- a/Gulpfile.js
+++ b/Gulpfile.js
@@ -1,22 +1,21 @@
 var gulp = require('gulp');
-var rename = require("gulp-rename");
 var iconfont = require('gulp-iconfont');
 var iconfontCss = require('gulp-iconfont-css');

-String.prototype.toCamelCase = function () {
-  return this.replace(/^([A-Z])|\s(\w)/g, function (match, p1, p2, offset) {
+String.prototype.toCamelCase = function() {
+  return this.replace(/^([A-Z])|\s(\w)/g, function(match, p1, p2, offset) {
    if (p2) return p2.toUpperCase();
    return p1.toLowerCase();
  });
 };

-gulp.task('default', function () {
+gulp.task('default', function(){
  gulp.src(['./icon-font/svgs/*.svg'])

  .pipe(iconfontCss({
    fontName: 'cartoIcon',
    path: './icon-font/template.jst.ejs',
-    targetPath: '../scss/_cdb-icon-font.scss',
+    targetPath: '../scss/cdb-icon-font.scss',
    fontPath: '../../fonts/'
  }))

@@ -26,11 +25,4 @@ gulp.task('default', function () {
  }))

  .pipe(gulp.dest('src/fonts/'));
-
-  gulp
-    .src('./node_modules/perfect-scrollbar/src/css/*')
-    .pipe(rename(function (path) {
-      path.basename = '_' + path.basename;
-    }))
-    .pipe(gulp.dest('./src/scss/vendor/perfect-scrollbar'));
 });
--- a/README.md
+++ b/README.md
@@ -17,7 +17,7 @@ If you want to use any of the CartoAssets components, after the installation jus
 It will generate a UI documentation about the components in this repository:
 - ```grunt dev```

-If you want to check the documentation, it is generated in the ```dist``` folder.
+If you want to check the documenation, it is generated in the ```dist``` folder.

 ### How to add/update the icon font

@@ -43,4 +43,4 @@ Just run this command:

 ![Chrome](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/39.3.0/archive/chrome_12-48/chrome_12-48_48x48.png) | ![Firefox](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/39.3.0/archive/firefox_1.5-3/firefox_1.5-3_48x48.png) | ![IE](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/39.3.0/edge-tile/edge-tile_48x48.png) | ![Opera](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/39.3.0/opera/opera_48x48.png) | ![Safari](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/39.3.0/safari/safari_48x48.png)
 --- | --- | --- | --- | --- |
-31+ ✔ | 38+ ✔ | 11+ ✔ | 31+ ✔ | 8+ ✔ |
+31+ ✔ | 38+ ✔ | 11+ ✔ | 31+ ✔ | 8+ ✔ |
--- a/icon-font/template.jst.ejs
+++ b/icon-font/template.jst.ejs
@@ -43,7 +43,7 @@ All available icons in CartoDB.
 <% var name = glyph.fileName.split("_")[2].toCamelCase(); %>
  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-<%= name %> Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m"><%= name %></h4>
+    <h4 class="Text Size-small"><%= name %></h4>
  </div>
 <% }); %>
 ```
--- a/package.json
+++ b/package.json
@@ -1,12 +1,17 @@
 {
  "name": "cartoassets",
-  "description": "Share frontend assets between different CARTO repositories",
-  "version": "0.2.5",
+  "description": "Share frontend assets between different CartoDB repositories",
+  "version": "0.1.34",
  "homepage": "https://github.com/cartodb/CartoAssets",
  "author": {
-    "name": "CARTO",
-    "email": "frontend@carto.com"
+    "name": "CartoDB",
+    "email": "contact@cartodb.com"
  },
+  "contributors": [
+    "Javier Álvarez <jmedina@cartodb.com>",
+    "Emilio García <emilio@cartodb.com>",
+    "Javier Arce <javierarce@cartodb.com>"
+  ],
  "repository": {
    "type": "git",
    "url": "git://github.com/cartodb/CartoAssets.git"
@@ -28,7 +33,7 @@
    "jquery": "~2.2.0",
    "highlight.js": "~9.1.0",
    "markdown-styleguide-generator": "~2.0.4",
-    "grunt-sass": "2.0.0",
+    "grunt-sass": "1.1.0",
    "grunt-contrib-clean": "0.7.0",
    "grunt-contrib-concat": "0.5.1",
    "grunt-contrib-cssmin": "0.14.0",
@@ -40,26 +45,18 @@
    "gulp-iconfont": "1.0.0",
    "gulp-iconfont-css": "0.0.9",
    "gulp-install": "0.2.0",
-    "gulp-rename": "1.2.2",
    "gulp-sketch": "0.0.7",
    "grunt-shell": "1.1.2",
-    "load-grunt-tasks": "*",
-    "perfect-scrollbar": "git://github.com/CartoDB/perfect-scrollbar.git#master"
+    "load-grunt-tasks": "*"
  },
  "keywords": [
    "library",
-    "CARTO",
+    "CartoDB",
    "share",
    "assets",
    "styleguide",
    "shared components",
    "editor",
    "deep-insights"
-  ],
-  "scripts": {
-    "bump": "npm version patch",
-    "bump:major": "npm version major",
-    "bump:minor": "npm version minor",
-    "postversion": "git push origin master --follow-tags"
-  }
+  ]
 }
--- a/src/fonts/Montserrat-Bold.eot
+++ b/src/fonts/Montserrat-Bold.eot
--- a/src/fonts/Montserrat-Bold.ttf
+++ b/src/fonts/Montserrat-Bold.ttf
--- a/src/fonts/Montserrat-Bold.woff
+++ b/src/fonts/Montserrat-Bold.woff
--- a/src/fonts/Montserrat-Regular.eot
+++ b/src/fonts/Montserrat-Regular.eot
--- a/src/fonts/Montserrat-Regular.ttf
+++ b/src/fonts/Montserrat-Regular.ttf
--- a/src/fonts/Montserrat-Regular.woff
+++ b/src/fonts/Montserrat-Regular.woff
--- a/src/fonts/Montserrat-Semibold.eot
+++ b/src/fonts/Montserrat-Semibold.eot
--- a/src/fonts/Montserrat-Semibold.ttf
+++ b/src/fonts/Montserrat-Semibold.ttf
--- a/src/fonts/Montserrat-Semibold.woff
+++ b/src/fonts/Montserrat-Semibold.woff
--- a/src/fonts/cartoIcon.eot
+++ b/src/fonts/cartoIcon.eot
--- a/src/fonts/cartoIcon.ttf
+++ b/src/fonts/cartoIcon.ttf
--- a/src/fonts/cartoIcon.woff
+++ b/src/fonts/cartoIcon.woff
--- a/src/scss/cdb-components/_layer-selector.scss
+++ b/src/scss/cdb-components/_layer-selector.scss
@@ -1,23 +0,0 @@
-// Layer selector and letters
-// ----------------------------------------------
-
-/* SG
-# Layer selector and letters
-
-
-```
-  <span class="CDB-SelectorLayer-letter CDB-Text CDB-Size-small u-whiteTextColor u-rSpace u-upperCase" style="background-color: #E65176">b0</span>
-```
-*/
-
-.CDB-SelectorLayer {
-  position: relative;
-}
-.CDB-SelectorLayer.is-disabled {
-  background-color: $cThirdBackground;
-}
-.CDB-SelectorLayer-letter {
-  height: 14px;
-  padding: 1px 5px;
-  border-radius: 2px;
-}
--- a/src/scss/cdb-components/_avatars.scss
+++ b/src/scss/cdb-components/_avatars.scss
@@ -22,6 +22,9 @@
 ```
 */

+@import '../cdb-variables/sizes';
+@import '../cdb-variables/colors';
+
 .CDB-AvatarList {
  padding-left: 12px;
 }
--- a/src/scss/cdb-components/_boxes.scss
+++ b/src/scss/cdb-components/_boxes.scss
@@ -10,6 +10,10 @@
 ```
 */

+@import '../cdb-utilities/mixins';
+@import '../cdb-variables/sizes';
+@import '../cdb-variables/colors';
+
 .CDB-Box-modal {
  min-width: 160px;
  border: 1px solid $cMainLine;
@@ -36,11 +40,3 @@
 .CDB-Box-modalHeaderItem--paddingVertical {
  padding: $baseSize + 4 0;
 }
-.CDB-Box-modalOverlay {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 99;
-}
--- a/src/scss/cdb-components/_buttons.scss
+++ b/src/scss/cdb-components/_buttons.scss
@@ -9,13 +9,8 @@ Layout Component:

 ```

-<button class="CDB-Button CDB-Button--loading CDB-Button--primary CDB-Button--big">
+<button class="CDB-Button CDB-Button--primary CDB-Button--big">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
-  <div class="CDB-Button-loader CDB-LoaderIcon is-white">
-    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
-      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
-    </svg>
-  </div>
 </button>

 <button class="CDB-Button CDB-Button--primary CDB-Button--big is-disabled">
@@ -23,26 +18,16 @@ Layout Component:
 </button>


-<button class="CDB-Button CDB-Button--loading CDB-Button--primary">
+<button class="CDB-Button CDB-Button--primary">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
-  <div class="CDB-Button-loader CDB-LoaderIcon is-white">
-    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
-      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
-    </svg>
-  </div>
 </button>

 <button class="CDB-Button CDB-Button--primary is-disabled">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
 </button>

-<button class="CDB-Button CDB-Button--loading CDB-Button--primary CDB-Button--small">
+<button class="CDB-Button CDB-Button--primary CDB-Button--small">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
-  <div class="CDB-Button-loader CDB-LoaderIcon CDB-LoaderIcon--small is-white">
-    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
-      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
-    </svg>
-  </div>
 </button>

 <button class="CDB-Button CDB-Button--primary CDB-Button--small is-disabled">
@@ -159,86 +144,34 @@ Layout Component:
 ```
 */

+@import '../cdb-utilities/mixins';
+@import '../cdb-variables/sizes';
+@import '../cdb-variables/colors';
+
+
 .CDB-Button {
-  position: relative;
-  padding: $baseSize $baseSize + 12;
-  transition: background, 300ms;
+  @include transition(background, 300ms);
+  padding: $baseSize + 1 $baseSize + 12;
+  border: 1px solid transparent;
  border-radius: $baseSize / 2;
  cursor: pointer;
  box-sizing: border-box;

-
  .CDB-Button-Text {
    display: block;
  }
-
  &.is-disabled {
+    cursor: default;
    opacity: 0.24;
-    cursor: default;
-
-    &:active {
-      pointer-events: none;
-    }
  }
 }

-.CDB-Button--noPadding {
-  padding: 0;
-}
-
-.CDB-Button--loading {
-  .CDB-Button-loader {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%) scale(0);
-    transform-origin: 50%;
-    opacity: 0;
-    z-index: 10;
-  }
-
-  .CDB-Button-Text {
-    transition: all 600ms;
-  }
-
-  &.is-loading {
-    cursor: default;
-
-    .CDB-Button-loader {
-      animation-name: showIn;
-      animation-duration: 600ms;
-      animation-fill-mode: forwards;
-    }
-
-    .CDB-Button-Text {
-      opacity: 0;
-    }
-  }
-}
-
-@keyframes showIn {
-  0% {
-    transform: translate(-50%, -50%) scale(0);
-    opacity: 0;
-  }
-  100% {
-    transform: translate(-50%, -50%) scale(1);
-    opacity: 1;
-  }
-}
-
-
 .CDB-Button--small {
  padding: $baseSize / 2 $baseSize + 4;
-  border-radius: 3px;
 }

 .CDB-Button--big {
-  padding: $baseSize + 3 $baseSize + 12;
-}
-
-.CDB-Button--wide {
-  width: 100%;
+  padding: $baseSize + 4 $baseSize + 12;
 }

 .CDB-Button--icon {
@@ -249,20 +182,17 @@ Layout Component:
  background: $cBlue;
  color: $cWhite;

-  &:hover,
-  &:active {
-    background: $cBlueHover;
+  &:hover {
+    background: darken($cBlue, 8%);
  }
-
-  &.is-loading {
-    &:hover,
-    &:active {
-      background: $cBlue;
-    }
+  &:active {
+    background: darken($cBlue, 16%);
  }

  &.is-disabled {
-    &:hover,
+    &:hover {
+      background: $cBlue;
+    }
    &:active {
      background: $cBlue;
    }
@@ -273,13 +203,17 @@ Layout Component:
  background: $cAlert;
  color: $cWhite;

-  &:hover,
-  &:active {
+  &:hover {
    background: darken($cAlert, 8%);
  }
+  &:active {
+    background: darken($cAlert, 16%);
+  }

  &.is-disabled {
-    &:hover,
+    &:hover {
+      background: $cAlert;
+    }
    &:active {
      background: $cAlert;
    }
@@ -292,31 +226,19 @@ Layout Component:
  background: $cError;
  color: $cWhite;

-  &:hover,
-  &:active {
+  &:hover {
    background: darken($cError, 8%);
  }
-
-  &.is-disabled {
-    &:hover,
-    &:active {
-      background: $cError;
-    }
-  }
-}
-
-.CDB-Button--dashed {
-  padding: 13px 0;
-  border: 1px dashed $cHintText;
-  color: $cBlue;
-
-  &:hover {
-    border-color: $cBlue;
+  &:active {
+    background: darken($cError, 16%);
  }

  &.is-disabled {
    &:hover {
-      border-color: $cHintText;
+      background: $cError;
+    }
+    &:active {
+      background: $cError;
    }
  }
 }
@@ -330,44 +252,24 @@ Layout Component:
 # Buttons/Secondary

 ```
-
-<button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--big">
+<button class="CDB-Button CDB-Button--secondary CDB-Button--big">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
-  <div class="CDB-Button-loader CDB-LoaderIcon is-blue">
-    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
-      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
-    </svg>
-  </div>
 </button>

-
 <button class="CDB-Button CDB-Button--secondary CDB-Button--big is-disabled">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
 </button>

-
-<button class="CDB-Button CDB-Button--loading CDB-Button--secondary">
+<button class="CDB-Button CDB-Button--secondary">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
-  <div class="CDB-Button-loader CDB-LoaderIcon is-blue">
-    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
-      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
-    </svg>
-  </div>
 </button>

-
 <button class="CDB-Button CDB-Button--secondary is-disabled">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
 </button>

-
-<button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--small">
-  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
-  <div class="CDB-Button-loader CDB-LoaderIcon CDB-LoaderIcon--small is-blue">
-    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
-      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
-    </svg>
-  </div>
+<button class="CDB-Button CDB-Button--secondary CDB-Button--small">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
 </button>

 <button class="CDB-Button CDB-Button--secondary CDB-Button--small is-disabled">
@@ -379,13 +281,8 @@ Layout Component:
 <br/>

 <div style="background: #2E3C43; padding: 20px;">
-  <button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--big">
+  <button class="CDB-Button CDB-Button--secondary CDB-Button--big">
    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
-    <div class="CDB-Button-loader CDB-LoaderIcon is-blue">
-      <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
-        <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
-      </svg>
-    </div>
  </button>

  <button class="CDB-Button CDB-Button--secondary CDB-Button--big is-disabled">
@@ -396,13 +293,8 @@ Layout Component:
    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
  </button>

-  <button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--white">
+  <button class="CDB-Button CDB-Button--secondary CDB-Button--white">
    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
-    <div class="CDB-Button-loader CDB-LoaderIcon is-white">
-      <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
-        <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
-      </svg>
-    </div>
  </button>

  <button class="CDB-Button CDB-Button--secondary CDB-Button--white is-disabled">
@@ -427,14 +319,12 @@ Layout Component:


 .CDB-Button--secondary {
+  border: 1px solid $cBlue;
  color: $cBlue;
-  box-shadow: inset 0 0 0 1px $cBlue;

  &:hover {
    background: rgba($cBlue, 0.08);
-    box-shadow: inset 0 0 0 2px $cBlueHover;
  }
-
  &:active {
    background: $cBlue;
    color: $cWhite;
@@ -443,64 +333,34 @@ Layout Component:
  &.is-disabled {
    &:hover {
      background: transparent;
-      box-shadow: inset 0 0 0 1px $cBlue;
    }
-
    &:active {
      background: transparent;
    }
  }
-
-  &.is-loading {
-    cursor: default;
-
-    &:hover,
-    &:active {
-      background: none;
-      color: $cBlue;
-    }
-  }
-
-  &--background {
-    background-color: $cWhite;
-  }
 }

+
 .CDB-Button--white {
+  border: 1px solid $cWhite;
  color: $cWhite;
-  box-shadow: inset 0 0 0 1px $cWhite;

  &:hover {
    background: rgba($cWhite, 0.08);
-    box-shadow: inset 0 0 0 2px darken($cWhite, 8%);
  }
-
  &:active {
    background: rgba($cMainBg, 0.08);
    color: $cWhite;
  }

  &.is-disabled {
-    opacity: 0.24;
-
+    @include opacity(0.24);
    &:hover {
      background: transparent;
-      box-shadow: inset 0 0 0 1px $cWhite;
    }
-
    &:active {
      background: transparent;
      color: $cWhite;
    }
  }
-
-  &.is-loading {
-    cursor: default;
-
-    &:hover,
-    &:active {
-      background: none;
-      color: $cWhite;
-    }
-  }
 }
--- a/src/scss/cdb-components/_colors.scss
+++ b/src/scss/cdb-components/_colors.scss
@@ -12,9 +12,12 @@
 <div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-White"></div>
 <div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-SecondaryBackground"></div>
 <div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-ThirdBackground"></div>
-```
+``` 
 */

+@import '../cdb-variables/colors';
+
+
 .Color-Blue {
  background: $cBlue;
 }
@@ -122,3 +125,5 @@
 .Color-Error {
  background: $cError;
 }
+
+
--- a/src/scss/cdb-components/forms/_checkbox.scss
+++ b/src/scss/cdb-components/forms/_checkbox.scss
@@ -20,6 +20,11 @@
 ```
 */

+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+@import '../../cdb-utilities/mixins';
+
+
 .CDB-Checkbox {
  position: absolute;
  width: $baseSize * 2;
@@ -66,7 +71,7 @@
 }

 .CDB-Checkbox:checked + .CDB-Checkbox-face {
-  transition: background 300ms;
+  @include transition(background, 300ms);
  border: 1px solid $cBlue;
  background: $cBlue;

@@ -78,7 +83,6 @@

 .CDB-Checkbox:checked:hover + .CDB-Checkbox-face {
  border: 1px solid $cBlue;
-
  &::before,
  &::after {
    background: $cWhite;
@@ -86,8 +90,7 @@
 }

 .CDB-Checkbox:hover + .CDB-Checkbox-face {
-  border: 1px solid $cBlueHover;
-
+  border: 1px solid $cHoverLine;
  &::before,
  &::after {
    background: $cHoverLine;
@@ -95,7 +98,6 @@
 }
 .CDB-Checkbox:active + .CDB-Checkbox-face {
  border: 1px solid $cBlue;
-
  &::before,
  &::after {
    background: $cBlue;
@@ -105,20 +107,9 @@
 .CDB-Checkbox:disabled + .CDB-Checkbox-face {
  border: 1px solid $cSecondaryLine;
  background: $cThirdBackground;
-
  &::before,
  &::after {
    opacity: 0;
  }
 }

-.CDB-Checkbox:checked:disabled + .CDB-Checkbox-face {
-  border: 1px solid $cSecondaryLine;
-  background: $cThirdBackground;
-
-  &::before,
-  &::after {
-    background: $cAltText;
-    opacity: 1;
-  }
-}
--- a/src/scss/cdb-components/forms/_dropdowns.scss
+++ b/src/scss/cdb-components/forms/_dropdowns.scss
@@ -109,27 +109,28 @@
 ```
 */

+@import '../../cdb-utilities/mixins';
+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+
 .CDB-DropdownContainer {
  position: relative;
  height: 250px;
 }
-
 .CDB-Dropdown {
-  display: flex;
+  @include display-flex();
+  @include flex-direction(row);
  position: absolute;
  top: 40px;
-  flex-direction: row;
  max-height: 200px;
 }
-
 .CDB-Dropdown-calculations {
-  box-sizing: border-box;
  padding: $sMargin-element;
  border-right: 1px solid $cMainLine;
  border-radius: 4px 0 0 4px;
  background-color: $cSecondaryBackground;
+  box-sizing: border-box;
 }
-
 .CDB-Dropdown-calculationsElement {
  margin-bottom: $sLineHeight-medium;
  color: $cMainBg;
@@ -139,14 +140,12 @@
    margin-bottom: 0;
  }
 }
-
 .CDB-Dropdown-options {
  width: $baseSize * 20;
  border-radius: 0 4px 4px 0;
  background-color: $cWhite;
  vertical-align: top;
 }
-
 .CDB-Dropdown-optionsElement {
  @include text-overflow();
  padding: 12px 10px;
@@ -156,23 +155,20 @@
  &:last-child {
    border-bottom: 0;
  }
-
  &:hover {
-    background-color: rgba($cBlue, 0.08);
+    background-color: rgba(157, 224, 173, 0.2);
    color: $cMainBg;
    cursor: pointer;
  }
+}
+.CDB-Dropdown-optionsElement.is-selected {
+  color: $cMainBg;
+}
+.CDB-Dropdown-optionsElement.is-disabled {
+  color: $cHintText;

-  &.is-selected {
-    color: $cMainBg;
-  }
-
-  &.is-disabled {
-    color: $cHintText;
-
-    &:hover {
-      background-color: transparent;
-      cursor: default;
-    }
+  &:hover {
+    background-color: transparent;
+    cursor: default;
  }
 }
--- a/src/scss/cdb-components/forms/_inputs.scss
+++ b/src/scss/cdb-components/forms/_inputs.scss
@@ -11,6 +11,10 @@
 ```
 */

+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+@import '../../cdb-utilities/helpers';
+
 .CDB-InputText {
  width: 100%;
  min-height: 32px;
@@ -24,45 +28,36 @@
  &.is-cursor {
    cursor: pointer;
  }
-
  &.is-empty {
    color: $cHintText;
  }
-
  &.is-number {
    color: darken($cHighlight, 16%);
  }
-
  &.is-null {
    color: $cHintText;
    font-style: italic;
  }
-
  &:hover {
-    border: 1px solid $cBlueHover;
+    border: 1px solid $cHoverLine;
  }
-
  &:focus {
-    border: 1px solid $cBlackHover;
+    border: 1px solid $cBlue;
    outline: none;
  }
-
  &:disabled,
  &.is-disabled {
    border-color: $cSecondaryLine;
    background: $cThirdBackground;
    cursor: default;
  }
-
  &.has-icon {
    padding-right: $baseSize * 4;
  }
-
  &.has-error {
    @include default-form-error-style();
  }
 }
-
 .CDB-InputTextPlain {
  width: 100%;
  border: 0;
--- a/src/scss/cdb-components/forms/_legends.scss
+++ b/src/scss/cdb-components/forms/_legends.scss
@@ -83,6 +83,9 @@
 ```
 */

+@import '../../cdb-variables/sizes';
+@import '../../cdb-utilities/mixins';
+
 .CDB-Legend {
  width: $baseSize * 12;
 }
@@ -98,3 +101,4 @@
 .CDB-Fieldset-block {
  width: 100%;
 }
+
--- a/src/scss/cdb-components/forms/_option-input.scss
+++ b/src/scss/cdb-components/forms/_option-input.scss
@@ -98,116 +98,81 @@
 ```
 */

+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+@import '../../cdb-utilities/mixins';
+
 .CDB-OptionInput {
-  box-sizing: border-box;
  width: 100%;
-  height: $baseSize * 4 - 2px;
-  border-radius: $baseSize / 2;
-  vertical-align: middle;
-}
-
-.CDB-OptionInput-container {
-  display: flex;
-  align-content: center;
-  align-items: center;
-
-  &--noMargin {
-    margin: 0;
-  }
-}
-
-.CDB-OptionInput-item {
-  display: flex;
-  position: relative;
-  box-sizing: content-box;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  font-size: $sFontSize-medium;
-
-  &.is-active,
-  &:hover,
-  &:focus {
-    cursor: pointer;
-  }
-
-  &:first-child {
-    width: auto;
-    margin-right: $baseSize;
-  }
-
-  &:last-child {
-    width: 100%;
-  }
-}
-
-.CDB-OptionInput-container--border .CDB-OptionInput-item {
+  height: $baseSize * 4;
  border: 1px solid $cMainLine;
+  border-radius: $baseSize / 2;
+  box-sizing: border-box;
+  vertical-align: middle;

  &:hover {
-    border: 1px solid $cBlueHover;
+    border: 1px solid $cHoverLine;
  }
-
-  &.is-active,
  &:focus {
-    border: 1px solid $cBlackHover;
+    border: 1px solid $cBlue;
  }
+}
+.CDB-OptionInput.is-active {
+  border: 1px solid $cBlue;
+}
+.CDB-OptionInput-container {
+  @include display-flex();
+  @include align-content(center);
+  @include align-items(center);
+  margin: 0 $baseSize;
+}
+.CDB-OptionInput-container--noMargin {
+  margin: 0;
+}
+.CDB-OptionInput-item {
+  @include display-flex();
+  @include align-items(center);
+  @include align-content(center);
+  width: auto;
+  height: 100%;
+  font-size: $sFontSize-medium;
+  box-sizing: content-box;

-  &:first-child {
-    margin-right: 0;
-    border-top-left-radius: 4px;
-    border-bottom-left-radius: 4px;
-
-    &:hover {
-      + .CDB-OptionInput-item::after {
-        content: none;
-      }
-    }
+  &::after {
+    width: 1px;
+    height: 100%;
+    margin-right: $baseSize;
+    background-color: $cSecondaryLine;
+    content: '';
  }
-
  &:last-child {
-    border-radius: 4px;
-  }
+    width: 100%;

-  + .CDB-OptionInput-item {
-    border-left: none;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-
-    &.is-active::after,
-    &:focus::after,
-    &:hover::after {
-      position: absolute;
-      top: -1px;
-      left: -1px;
-      width: 1px;
-      height: $baseSize * 4;
-      content: '';
-    }
-
-    &:hover::after {
-      background-color: $cBlueHover;
-    }
-
-    &.is-active::after,
-    &:focus::after {
-      background-color: $cBlackHover;
+    &::after {
+      display: none;
    }
  }
 }
-
+.CDB-OptionInput-item--noSeparator::after {
+  content: '';
+}
 .CDB-OptionInput-content {
-  display: flex;
-  box-sizing: content-box;
-  align-items: center;
-  justify-content: center;
+  @include display-flex();
+  @include align-items(center);
  height: 100%;
-  padding: 0 $baseSize;
+  margin-left: -$baseSize;
+  padding: 0 $baseSize + 2;
  color: $cMainBg;
+  box-sizing: content-box;
  white-space: nowrap;

  &:hover {
    text-decoration: none;
  }
 }
+.CDB-OptionInput-item:first-child .CDB-OptionInput-content {
+  border-bottom-left-radius: 4px;
+}
+.CDB-OptionInput-item.is-active > .CDB-OptionInput-content {
+  border-bottom: 1px solid $cMainBg;
+}
--- a/src/scss/cdb-components/forms/_radio.scss
+++ b/src/scss/cdb-components/forms/_radio.scss
@@ -21,6 +21,11 @@
 ```
 */

+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+@import '../../cdb-utilities/mixins';
+
+
 .CDB-Radio {
  position: absolute;
  width: $baseSize * 2;
@@ -56,7 +61,7 @@
 }

 .CDB-Radio:checked + .CDB-Radio-face {
-  transition: background 300ms;
+  @include transition(background, 300ms);
  border: 1px solid $cBlue;
  background: $cBlue;

@@ -79,8 +84,7 @@
 }

 .CDB-Radio:hover + .CDB-Radio-face {
-  border: 1px solid $cBlueHover;
-
+  border: 1px solid $cHoverLine;
  &::before {
    background: $cHoverLine;
  }
@@ -102,3 +106,7 @@
    background: $cBlue;
  }
 }
+
+
+
+
--- a/src/scss/cdb-components/forms/_selects.scss
+++ b/src/scss/cdb-components/forms/_selects.scss
@@ -55,6 +55,10 @@
 ```
 */

+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+@import '../../cdb-utilities/helpers';
+
 .CDB-Select {
  position: relative;
 }
@@ -77,10 +81,10 @@
  box-sizing: border-box;

  &:hover {
-    border: 1px solid $cBlueHover;
+    border: 1px solid $cHoverLine;
  }
  &:focus {
-    border: 1px solid $cBlackHover;
+    border: 1px solid $cBlue;
    outline: none;
  }
  &:disabled {
@@ -90,10 +94,6 @@
  &.has-error {
    @include default-form-error-style();
  }
-
-  &.is-cursor {
-    cursor: pointer;
-  }
 }

 .CDB-FieldError .CDB-Select,
--- a/src/scss/cdb-components/forms/_tabsForms.scss
+++ b/src/scss/cdb-components/forms/_tabsForms.scss
@@ -72,6 +72,11 @@
 ```
 */

+@import '../../cdb-utilities/mixins';
+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+
+
 .CDB-TabsForms {
  border: 1px solid $cMainLine;
  border-radius: 4px;
@@ -88,3 +93,9 @@
 .CDB-TabsForms-button {
  padding: 7px 8px;
 }
+
+
+
+
+
+
--- a/src/scss/cdb-components/forms/_textarea.scss
+++ b/src/scss/cdb-components/forms/_textarea.scss
@@ -11,6 +11,10 @@
 ```
 */

+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+@import '../../cdb-utilities/helpers';
+
 .CDB-Textarea {
  width: 100%;
  padding: 7px 8px 6px;
--- a/src/scss/cdb-components/forms/_toggle.scss
+++ b/src/scss/cdb-components/forms/_toggle.scss
@@ -28,6 +28,10 @@
 ```
 */

+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+@import '../../cdb-utilities/mixins';
+
 .CDB-Toggle {
  position: absolute;
  width: $baseSize * 4;
@@ -35,22 +39,12 @@
  opacity: 0;
  z-index: 1;

-  &:hover {
-    + .CDB-ToggleFace {
-      background: $cHintTextHover;
-    }
-
-    &:checked + .CDB-ToggleFace {
-      background: $cHighlightHover;
-    }
-  }
-
  + .CDB-ToggleFace {
+    @include transition(background, 300ms);
    position: relative;
    width: $baseSize * 4;
    height: $baseSize * 2;
    margin: 0 2px;
-    transition: background 300ms;
    border-radius: 50px;
    background: $cHintText;

@@ -79,5 +73,4 @@

 .Toggle .is-disabled {
  opacity: 0.24;
-  pointer-events: none;
 }
--- a/src/scss/cdb-components/_headers.scss
+++ b/src/scss/cdb-components/_headers.scss
@@ -145,7 +145,7 @@
  <div class="CDB-HeaderInfo-inner CDB-Text">
    <div class="CDB-HeaderInfo-title u-bSpace--m">
      <h2 class="CDB-Text CDB-HeaderInfo-titleText CDB-Size-large">Type</h2>
-
+      
      <div class="CDB-HeaderInfo-actions">
        <a href="#">
          <div class="CDB-Shape">
@@ -166,6 +166,10 @@
 ```
 */

+@import '../cdb-utilities/mixins';
+@import '../cdb-variables/sizes';
+@import '../cdb-variables/colors';
+
 .CDB-HeaderInfo {
  @include display-flex();
  @include align-items(flex-start);
--- a/src/scss/cdb-components/_lists.scss
+++ b/src/scss/cdb-components/_lists.scss
@@ -10,6 +10,9 @@
 ```
 */

+@import '../cdb-variables/sizes';
+@import '../cdb-variables/colors';
+
 .CDB-ListDecoration-item {
  border-bottom: 1px solid $cSecondaryLine;

@@ -33,3 +36,4 @@
  padding: 12px 16px;
  text-align: left;
 }
+
--- a/src/scss/cdb-components/_loader.scss
+++ b/src/scss/cdb-components/_loader.scss
@@ -12,6 +12,10 @@ This is the generic loader for widgets, maps, components, ...
 ```
 */

+@import '../cdb-utilities/mixins';
+@import '../cdb-variables/colors';
+@import '../cdb-variables/sizes';
+
 .CDB-Loader {
  position: absolute;
  top: 0;
@@ -100,10 +104,6 @@ This is the generic loader for widgets, maps, components, ...

 ```
 */
-.CDB-LoaderIcon {
-  width: 16px;
-  height: 16px;
-}

 .CDB-LoaderIcon-spinner {
  animation: rotate 2s linear infinite;
@@ -111,13 +111,11 @@ This is the generic loader for widgets, maps, components, ...
  height: 16px;
 }

-.CDB-LoaderIcon--small,
 .CDB-LoaderIcon--small .CDB-LoaderIcon-spinner {
  width: 14px;
  height: 14px;
 }

-.CDB-LoaderIcon--big,
 .CDB-LoaderIcon--big .CDB-LoaderIcon-spinner {
  width: 40px;
  height: 40px;
@@ -126,8 +124,6 @@ This is the generic loader for widgets, maps, components, ...
 .CDB-LoaderIcon-path {
  stroke: rgba(255, 255, 255, 0.88);
  stroke-linecap: round;
-  stroke-dasharray: 90, 150;
-  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite;
  stroke-width: 4px;
 }
@@ -139,16 +135,11 @@ This is the generic loader for widgets, maps, components, ...
 .CDB-LoaderIcon.is-dark .CDB-LoaderIcon-path {
  stroke: rgba(0, 0, 0, 0.24);
 }
-
 .CDB-LoaderIcon.is-blue .CDB-LoaderIcon-path {
  stroke: $cBlue;
 }

@keyframes rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-
  100% {
    transform: rotate(360deg);
  }
--- a/src/scss/cdb-components/_menu.scss
+++ b/src/scss/cdb-components/_menu.scss
@@ -128,6 +128,9 @@
 ```
 */

+@import '../cdb-variables/colors';
+@import '../cdb-variables/sizes';
+
 .CDB-NavMenu {
  position: relative;
  z-index: 2;
@@ -137,33 +140,20 @@
  position: relative;
  margin-bottom: 18px;
  border-bottom: 1px solid $cMainLine;
-
-  &--no-margin {
-    margin-bottom: 0;
-  }
-
-  &--is-dropdown {
-    padding-top: $baseSize;
-    padding-right: 0;
-    padding-bottom: 0;
-    padding-left: $baseSize * 2;
-  }
 }
-
+.CDB-NavMenu-inner--no-margin {
+  margin-bottom: 0;
+}
+.CDB-NavMenu-inner--is-dropdown {
+  padding: $baseSize 0 0 $baseSize * 2;
+}

 .CDB-NavMenu-link {
  display: block;
  margin-bottom: -1px;
  padding: 4px 0 11px;
-  transition: border-color 0.2s ease-in;
-  border-bottom: 2px solid transparent;
-  border-radius: 0;
+  border-bottom: 1px solid transparent;
  color: $cBlue;
-  touch-action: manipulation;
-
-  &:hover {
-    border-bottom: 2px solid $cBlueHover;
-  }
 }

 .CDB-NavMenu-item,
@@ -174,59 +164,37 @@
 }

 .CDB-NavMenu-item.is-selected .CDB-NavMenu-link {
-  border-bottom: 2px solid $cMainText;
+  border-bottom: 1px solid $cBlack;
  color: $cMainText;
 }

-.CDB-NavMenu-item.is-disabled .CDB-NavMenu-link {
-  pointer-events: none;
-  color: $cHintText;
-  cursor: default;
-}
-
 .CDB-NavSubmenu {
  border-bottom: 1px solid $cSecondaryLine;
+}

-  &--inside {
-    position: absolute;
-    right: 0;
-    left: 0;
-    padding-top: 14px;
-  }
+.CDB-NavSubmenu--inside {
+  position: absolute;
+  right: 0;
+  left: 0;
+  padding-top: 14px;
+}

-  &--outside {
-    margin-top: -5px;
-    margin-bottom: 18px;
-  }
+.CDB-NavSubmenu--outside {
+  margin-top: -5px;
+  margin-bottom: 18px;
 }

 .CDB-NavSubmenu-link {
  display: block;
  margin-bottom: -1px;
  padding-bottom: 12px;
-  transition: border-color 0.2s ease-in;
-  border-bottom: 2px solid transparent;
-  border-radius: 0;
+  border-bottom: 1px solid transparent;
  color: $cBlue;
-  touch-action: manipulation;
-
-  &:hover {
-    border-bottom: 2px solid $cBlueHover;
-  }
 }

-
-.CDB-NavSubmenu-item {
-  &.is-selected .CDB-NavSubmenu-link {
-    border-bottom: 2px solid $cMainText;
-    color: $cMainText;
-  }
-
-  &.is-disabled .CDB-NavSubmenu-link {
-    pointer-events: none;
-    color: $cHintText;
-    cursor: default;
-  }
+.CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link {
+  border-bottom: 1px solid $cMainLine;
+  color: $cMainText;
 }

 .CDB-NavSubmenu-status {
@@ -234,6 +202,7 @@
 }

 .CDB-NavMenu.is-dark {
+
  .CDB-NavMenu-inner,
  .CDB-NavSubmenu {
    border-bottom: 1px solid $cSecondaryText;
@@ -241,32 +210,23 @@

  .CDB-NavMenu-link,
  .CDB-NavSubmenu-link {
-    margin-bottom: -1px;
-    transition: none;
-    color: $cWhite;
-
-    &:hover {
-      border-bottom: 2px solid darken($cMainLine, 8%);
-    }
-  }
-
-  .CDB-NavSubmenu-item.is-disabled .CDB-NavMenu-link {
-    pointer-events: none;
-    cursor: default;
-    opacity: 0.24;
+    color: $cAltText;
  }

  .CDB-NavMenu-item.is-selected .CDB-NavMenu-link {
-    border-bottom: 2px solid $cAltText;
-    color: $cAltText;
+    border-bottom: 1px solid $cMainLine;
+    color: $cWhite;
  }

  .CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link {
-    border-bottom: 2px solid $cAltText;
-    color: $cAltText;
+    border-bottom: 1px solid $cMainLine;
+    color: $cWhite;
  }

  .CDB-NavSubmenu-status {
    color: $cSecondaryText;
  }
 }
+
+
+
--- a/src/scss/cdb-components/shapes/_add.scss
+++ b/src/scss/cdb-components/shapes/_add.scss
@@ -43,6 +43,8 @@ Description
 ```
 */

+@import '../../cdb-variables/colors';
+
 .CDB-Shape {
  width: 16px;
  height: 16px;
@@ -124,3 +126,6 @@ Description
    background: $cWhite;
  }
 }
+
+
+
--- a/src/scss/cdb-components/shapes/_arrow.scss
+++ b/src/scss/cdb-components/shapes/_arrow.scss
@@ -16,6 +16,8 @@ Description
 ```
 */

+@import '../../cdb-variables/colors';
+
 .CDB-Shape-Arrow {
  position: relative;
  width: 1px;
--- a/src/scss/cdb-components/shapes/_check-circle.scss
+++ b/src/scss/cdb-components/shapes/_check-circle.scss
@@ -55,6 +55,8 @@ Description
 ```
 */

+@import '../../cdb-variables/colors';
+
 .CDB-Shape-CircleItem {
  width: 14px;
  height: 14px;
@@ -149,3 +151,6 @@ Description
    background: $cHighlight;
  }
 }
+
+
+
--- a/src/scss/cdb-components/shapes/_close.scss
+++ b/src/scss/cdb-components/shapes/_close.scss
@@ -43,6 +43,8 @@ Description
 ```
 */

+@import '../../cdb-variables/colors';
+
 .CDB-Shape-close {
  display: block;
  position: relative;
@@ -144,3 +146,4 @@ Description
    background: $cError;
  }
 }
+
--- a/src/scss/cdb-components/shapes/_dash.scss
+++ b/src/scss/cdb-components/shapes/_dash.scss
@@ -43,6 +43,8 @@ Description
 ```
 */

+@import '../../cdb-variables/colors';
+
 .CDB-Shape-dash {
  position: relative;
  height: 100%;
@@ -78,3 +80,6 @@ Description
    background: $cWhite;
  }
 }
+
+
+
--- a/src/scss/cdb-components/shapes/_dataset.scss
+++ b/src/scss/cdb-components/shapes/_dataset.scss
@@ -78,6 +78,9 @@ Description
 ```
 */

+@import '../../cdb-variables/colors';
+@import '../../cdb-variables/sizes';
+
 .CDB-Shape-Dataset {
  padding-top: 1px;
  &.is-small {
--- a/src/scss/cdb-components/shapes/_dots.scss
+++ b/src/scss/cdb-components/shapes/_dots.scss
@@ -12,6 +12,9 @@ You may resize and change the colors of the icons with the `glyph-`-classes. Ava
 ```
 */

+@import '../../cdb-variables/colors';
+@import '../../cdb-variables/sizes';
+
 .CDB-Shape-dot {
  display: inline-block;
  width: $baseSize;
--- a/src/scss/cdb-components/shapes/_error-circle.scss
+++ b/src/scss/cdb-components/shapes/_error-circle.scss
@@ -55,6 +55,8 @@ Description
 ```
 */

+@import '../../cdb-variables/colors';
+
 .CDB-Shape-CircleItem {
  width: 13px;
  height: 13px;
--- a/src/scss/cdb-components/shapes/_hamburguer.scss
+++ b/src/scss/cdb-components/shapes/_hamburguer.scss
@@ -30,6 +30,9 @@ Description
 ```
 */

+@import '../../cdb-variables/colors';
+@import '../../cdb-variables/sizes';
+
 .CDB-Shape-hamburguer {
  width: $baseSize * 2;
  &:hover {
--- a/src/scss/cdb-components/shapes/_magnify.scss
+++ b/src/scss/cdb-components/shapes/_magnify.scss
@@ -44,6 +44,8 @@ Description
 ```
 */

+@import '../../cdb-variables/colors';
+
 .CDB-Shape-magnify {
  display: block;
  position: relative;
--- a/src/scss/cdb-components/shapes/_move.scss
+++ b/src/scss/cdb-components/shapes/_move.scss
@@ -85,6 +85,8 @@ Description
 ```
 */

+@import '../../cdb-variables/colors';
+
 .CDB-Shape-rectsHandle {
  position: relative;
  padding: 1px 0 0;
--- a/src/scss/cdb-components/shapes/_paragraph.scss
+++ b/src/scss/cdb-components/shapes/_paragraph.scss
@@ -66,6 +66,8 @@ Description
 ```
 */

+@import '../../cdb-variables/colors';
+
 .CDB-Shape-paragraph {
  padding-top: 3px;
  text-align: left;
--- a/src/scss/cdb-components/shapes/_threePoints.scss
+++ b/src/scss/cdb-components/shapes/_threePoints.scss
@@ -102,6 +102,8 @@ Description
 ```
 */

+@import '../../cdb-variables/colors';
+
 .CDB-Shape-threePoints {
  display: inline-block;
  padding: 0 4px;
--- a/src/scss/cdb-components/shapes/_toogle-arrow.scss
+++ b/src/scss/cdb-components/shapes/_toogle-arrow.scss
@@ -83,6 +83,8 @@ Description
 ```
 */

+@import '../../cdb-variables/colors';
+
 .CDB-ArrowToogle {
  position: relative;
  height: 100%;
@@ -126,17 +128,6 @@ Description
  }
 }

-.CDB-ArrowToogle.is-mini {
-  &::before {
-    left: 3px;
-    width: 6px;
-  }
-  &::after {
-    right: 3px;
-    width: 6px;
-  }
-}
-
 .CDB-ArrowToogle.is-blue {
  &::before {
    background: $cBlue;
--- a/src/scss/cdb-components/shapes/_type.scss
+++ b/src/scss/cdb-components/shapes/_type.scss
@@ -37,6 +37,8 @@ Description
 ```
 */

+@import '../../cdb-variables/colors';
+
 .CDB-Shape {
  width: 16px;
  height: 16px;
--- a/src/scss/cdb-components/_tags.scss
+++ b/src/scss/cdb-components/_tags.scss
@@ -23,6 +23,11 @@
 ```
 */

+@import '../cdb-utilities/mixins';
+@import '../cdb-variables/sizes';
+@import '../cdb-variables/colors';
+
+
 .CDB-Tag {
  padding: 0 3px;
  border: 1px solid $cBlue;
@@ -45,10 +50,6 @@
    border: 1px solid $cError;
    color: $cError;
  }
-  &.is-gray {
-    border: 1px solid $cGray;
-    color: $cGray;
-  }
 }

 /* SG
@@ -132,3 +133,4 @@
  background: rgba(0, 0, 0, 0.04);
  text-transform: uppercase;
 }
+
--- a/src/scss/cdb-components/_tooltips.scss
+++ b/src/scss/cdb-components/_tooltips.scss
@@ -60,6 +60,11 @@
 ```
 */

+@import '../cdb-utilities/mixins';
+@import '../cdb-variables/colors';
+@import '../cdb-variables/sizes';
+
+
 .CDB-InfoTooltip {
  display: inline-block;
  position: absolute;
--- a/src/scss/cdb-components/_typography.scss
+++ b/src/scss/cdb-components/_typography.scss
@@ -19,6 +19,9 @@
 ```
 */

+@import '../cdb-variables/sizes';
+@import '../cdb-variables/colors';
+
 .CDB-Text {
  font-family: 'Open Sans';
  $sFontWeight-normal: 400;
@@ -71,3 +74,4 @@
 .CDB-IconFont.is-disabled {
  opacity: 0.24;
 }
+
--- a/src/scss/_cdb-icon-font.scss
+++ b/src/scss/_cdb-icon-font.scss
@@ -43,673 +43,673 @@ All available icons in CartoDB.

  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-clock Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">clock</h4>
+    <h4 class="Text Size-small">clock</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-stats Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">stats</h4>
+    <h4 class="Text Size-small">stats</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-heartEmpty Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">heartEmpty</h4>
+    <h4 class="Text Size-small">heartEmpty</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-heartFill Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">heartFill</h4>
+    <h4 class="Text Size-small">heartFill</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-alert Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">alert</h4>
+    <h4 class="Text Size-small">alert</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-rows Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">rows</h4>
+    <h4 class="Text Size-small">rows</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-check Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">check</h4>
+    <h4 class="Text Size-small">check</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-dribbble Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">dribbble</h4>
+    <h4 class="Text Size-small">dribbble</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-twitter Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">twitter</h4>
+    <h4 class="Text Size-small">twitter</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-caretDown Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">caretDown</h4>
+    <h4 class="Text Size-small">caretDown</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-lightbulb Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">lightbulb</h4>
+    <h4 class="Text Size-small">lightbulb</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-explore Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">explore</h4>
+    <h4 class="Text Size-small">explore</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-drop Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">drop</h4>
+    <h4 class="Text Size-small">drop</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-edition Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">edition</h4>
+    <h4 class="Text Size-small">edition</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-view Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">view</h4>
+    <h4 class="Text Size-small">view</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-odyssey Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">odyssey</h4>
+    <h4 class="Text Size-small">odyssey</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-settings Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">settings</h4>
+    <h4 class="Text Size-small">settings</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-downloadCircle Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">downloadCircle</h4>
+    <h4 class="Text Size-small">downloadCircle</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-pencilMenu Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">pencilMenu</h4>
+    <h4 class="Text Size-small">pencilMenu</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-mobile Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">mobile</h4>
+    <h4 class="Text Size-small">mobile</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-wizard Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">wizard</h4>
+    <h4 class="Text Size-small">wizard</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-undo Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">undo</h4>
+    <h4 class="Text Size-small">undo</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-redo Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">redo</h4>
+    <h4 class="Text Size-small">redo</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-lArrowLight Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">lArrowLight</h4>
+    <h4 class="Text Size-small">lArrowLight</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-hide Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">hide</h4>
+    <h4 class="Text Size-small">hide</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-info Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">info</h4>
+    <h4 class="Text Size-small">info</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-fork Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">fork</h4>
+    <h4 class="Text Size-small">fork</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-facebook Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">facebook</h4>
+    <h4 class="Text Size-small">facebook</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-folder Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">folder</h4>
+    <h4 class="Text Size-small">folder</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-dropbox Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">dropbox</h4>
+    <h4 class="Text Size-small">dropbox</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-cloud Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">cloud</h4>
+    <h4 class="Text Size-small">cloud</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-step Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">step</h4>
+    <h4 class="Text Size-small">step</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-addDocument Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">addDocument</h4>
+    <h4 class="Text Size-small">addDocument</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-arrowNext Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">arrowNext</h4>
+    <h4 class="Text Size-small">arrowNext</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">arrowPrev</h4>
+    <h4 class="Text Size-small">arrowPrev</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-close Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">close</h4>
+    <h4 class="Text Size-small">close</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-cartoFante Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">cartoFante</h4>
+    <h4 class="Text Size-small">cartoFante</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-lock Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">lock</h4>
+    <h4 class="Text Size-small">lock</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-cartoDB Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">cartoDB</h4>
+    <h4 class="Text Size-small">cartoDB</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-lens Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">lens</h4>
+    <h4 class="Text Size-small">lens</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-closeLimits Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">closeLimits</h4>
+    <h4 class="Text Size-small">closeLimits</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-defaultUser Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">defaultUser</h4>
+    <h4 class="Text Size-small">defaultUser</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-cockroach Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">cockroach</h4>
+    <h4 class="Text Size-small">cockroach</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-floppy Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">floppy</h4>
+    <h4 class="Text Size-small">floppy</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-trash Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">trash</h4>
+    <h4 class="Text Size-small">trash</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-wifi Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">wifi</h4>
+    <h4 class="Text Size-small">wifi</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-unlock Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">unlock</h4>
+    <h4 class="Text Size-small">unlock</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-unlockWithEllipsis Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">unlockWithEllipsis</h4>
+    <h4 class="Text Size-small">unlockWithEllipsis</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-gift Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">gift</h4>
+    <h4 class="Text Size-small">gift</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-people Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">people</h4>
+    <h4 class="Text Size-small">people</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-play Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">play</h4>
+    <h4 class="Text Size-small">play</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-add Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">add</h4>
+    <h4 class="Text Size-small">add</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-map Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">map</h4>
+    <h4 class="Text Size-small">map</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-anchor Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">anchor</h4>
+    <h4 class="Text Size-small">anchor</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-key Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">key</h4>
+    <h4 class="Text Size-small">key</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-calendar Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">calendar</h4>
+    <h4 class="Text Size-small">calendar</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-document Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">document</h4>
+    <h4 class="Text Size-small">document</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-eye Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">eye</h4>
+    <h4 class="Text Size-small">eye</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-marker Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">marker</h4>
+    <h4 class="Text Size-small">marker</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-progressBar Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">progressBar</h4>
+    <h4 class="Text Size-small">progressBar</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-book Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">book</h4>
+    <h4 class="Text Size-small">book</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-notes Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">notes</h4>
+    <h4 class="Text Size-small">notes</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-rectangles Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">rectangles</h4>
+    <h4 class="Text Size-small">rectangles</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-mountain Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">mountain</h4>
+    <h4 class="Text Size-small">mountain</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-points Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">points</h4>
+    <h4 class="Text Size-small">points</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-snake Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">snake</h4>
+    <h4 class="Text Size-small">snake</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-boss Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">boss</h4>
+    <h4 class="Text Size-small">boss</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-rocket Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">rocket</h4>
+    <h4 class="Text Size-small">rocket</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-barometer Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">barometer</h4>
+    <h4 class="Text Size-small">barometer</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-dollar Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">dollar</h4>
+    <h4 class="Text Size-small">dollar</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-email Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">email</h4>
+    <h4 class="Text Size-small">email</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-label Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">label</h4>
+    <h4 class="Text Size-small">label</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-outside Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">outside</h4>
+    <h4 class="Text Size-small">outside</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-jigsaw Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">jigsaw</h4>
+    <h4 class="Text Size-small">jigsaw</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-tools Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">tools</h4>
+    <h4 class="Text Size-small">tools</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-question Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">question</h4>
+    <h4 class="Text Size-small">question</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-layerStack Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">layerStack</h4>
+    <h4 class="Text Size-small">layerStack</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-alarm Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">alarm</h4>
+    <h4 class="Text Size-small">alarm</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-cloudDownArrow Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">cloudDownArrow</h4>
+    <h4 class="Text Size-small">cloudDownArrow</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-pencil Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">pencil</h4>
+    <h4 class="Text Size-small">pencil</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-fountainPen Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">fountainPen</h4>
+    <h4 class="Text Size-small">fountainPen</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-emptyDoc Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">emptyDoc</h4>
+    <h4 class="Text Size-small">emptyDoc</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-mergeArrow Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">mergeArrow</h4>
+    <h4 class="Text Size-small">mergeArrow</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-mergeColumns Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">mergeColumns</h4>
+    <h4 class="Text Size-small">mergeColumns</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-mergeSpatial Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">mergeSpatial</h4>
+    <h4 class="Text Size-small">mergeSpatial</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-globe Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">globe</h4>
+    <h4 class="Text Size-small">globe</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-chevronDown Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">chevronDown</h4>
+    <h4 class="Text Size-small">chevronDown</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-streets Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">streets</h4>
+    <h4 class="Text Size-small">streets</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-keys Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">keys</h4>
+    <h4 class="Text Size-small">keys</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-facebookSquare Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">facebookSquare</h4>
+    <h4 class="Text Size-small">facebookSquare</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-fullscreen Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">fullscreen</h4>
+    <h4 class="Text Size-small">fullscreen</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-rArrowLight Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">rArrowLight</h4>
+    <h4 class="Text Size-small">rArrowLight</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-share Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">share</h4>
+    <h4 class="Text Size-small">share</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-linkedin Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">linkedin</h4>
+    <h4 class="Text Size-small">linkedin</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-calendarBlank Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">calendarBlank</h4>
+    <h4 class="Text Size-small">calendarBlank</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-creativeCommons Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">creativeCommons</h4>
+    <h4 class="Text Size-small">creativeCommons</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-bubble Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">bubble</h4>
+    <h4 class="Text Size-small">bubble</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-bars Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">bars</h4>
+    <h4 class="Text Size-small">bars</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-arrowMenuLight Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">arrowMenuLight</h4>
+    <h4 class="Text Size-small">arrowMenuLight</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-tieFighter Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">tieFighter</h4>
+    <h4 class="Text Size-small">tieFighter</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-ray Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">ray</h4>
+    <h4 class="Text Size-small">ray</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-markup Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">markup</h4>
+    <h4 class="Text Size-small">markup</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-table Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">table</h4>
+    <h4 class="Text Size-small">table</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-airlock Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">airlock</h4>
+    <h4 class="Text Size-small">airlock</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-pin Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">pin</h4>
+    <h4 class="Text Size-small">pin</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-attache Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">attache</h4>
+    <h4 class="Text Size-small">attache</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-download Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">download</h4>
+    <h4 class="Text Size-small">download</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-group Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">group</h4>
+    <h4 class="Text Size-small">group</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-dashboard Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">dashboard</h4>
+    <h4 class="Text Size-small">dashboard</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-spinner Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">spinner</h4>
+    <h4 class="Text Size-small">spinner</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-mapsearch Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">mapsearch</h4>
+    <h4 class="Text Size-small">mapsearch</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-rArrow Size-large"></i>
-    <h4 class="Text Size-small u-tSpace--m">rArrow</h4>
+    <h4 class="Text Size-small">rArrow</h4>
  </div>

 ```
--- a/src/scss/cdb-utilities/defaults.css.scss
+++ b/src/scss/cdb-utilities/defaults.css.scss
@@ -1,6 +1,8 @@
 // Default classes
 // ----------------------------------------------

+@import '../cdb-variables/colors';
+
 body {
  color: $cMainText;
 }
@@ -13,3 +15,4 @@ a {
 a:hover {
  text-decoration: underline;
 }
+
--- a/src/scss/cdb-utilities/_fonts.scss
+++ b/src/scss/cdb-utilities/_fonts.scss
@@ -1,7 +1,6 @@
 // Fonts
 // --------------------------------------------------

-// Open Sans
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
@@ -29,32 +28,3 @@
  url('../fonts/OpenSans-Semibold.woff') format('woff'),
  url('../fonts/OpenSans-Semibold.ttf') format('truetype');
 }
-
-// Montserrat
-@font-face {
-  font-family: 'Montserrat';
-  font-style: normal;
-  font-weight: 400;
-  src: url('../fonts/Montserrat-Regular.eot');
-  src: url('../fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),
-  url('../fonts/Montserrat-Regular.woff') format('woff'),
-  url('../fonts/Montserrat-Regular.ttf') format('truetype');
-}
-@font-face {
-  font-family: 'Montserrat';
-  font-style: normal;
-  font-weight: 600;
-  src: url('../fonts/Montserrat-Semibold.eot');
-  src: url('../fonts/Montserrat-Semibold.eot?#iefix') format('embedded-opentype'),
-  url('../fonts/Montserrat-Semibold.woff') format('woff'),
-  url('../fonts/Montserrat-Semibold.ttf') format('truetype');
-}
-@font-face {
-  font-family: 'Montserrat';
-  font-style: normal;
-  font-weight: 700;
-  src: url('../fonts/Montserrat-Bold.eot');
-  src: url('../fonts/Montserrat-Bold.eot?#iefix') format('embedded-opentype'),
-  url('../fonts/Montserrat-Bold.woff') format('woff'),
-  url('../fonts/Montserrat-Bold.ttf') format('truetype');
-}
--- a/src/scss/cdb-utilities/_helpers.scss
+++ b/src/scss/cdb-utilities/_helpers.scss
@@ -1,6 +1,9 @@
 // Helper classes
 // ----------------------------------------------

+@import './mixins';
+@import '../cdb-variables/colors';
+
 /* Margins */
 .u-tSpace {
  margin-top: 4px;
@@ -35,18 +38,9 @@
 .u-lSpace {
  margin-left: 4px;
 }
-.u-lSpace--s {
-  margin-left: 2px;
-}
-.u-lSpace--m {
-  margin-left: 8px;
-}
 .u-lSpace--xl {
  margin-left: 12px;
 }
-.u-lSpace--xxl {
-  margin-left: 16px;
-}

 .u-ellipsis {
  text-overflow: ellipsis;
@@ -60,10 +54,6 @@

 .u-actionTextColor {
  color: $cBlue;
-
-  &:hover {
-    color: $cBlueHover;
-  }
 }
 .u-mainTextColor {
  color: $cMainText;
@@ -129,13 +119,6 @@
  @include align-items(flex-end);
 }

-/* Clearfix */
-.u-clearfix::after {
-  display: table;
-  clear: both;
-  content: '';
-}
-

 /* Media queries*/
@include media-query-mobile() {
--- a/src/scss/cdb-utilities/vendor/_normalize.scss
+++ b/src/scss/cdb-utilities/vendor/_normalize.scss
--- a/src/scss/cdb-utilities/vendor/_reset.scss
+++ b/src/scss/cdb-utilities/vendor/_reset.scss
--- a/src/scss/cdb-variables/_colors.scss
+++ b/src/scss/cdb-variables/_colors.scss
@@ -1,34 +1,30 @@
-// -- General
-$cBlue: #1785FB;
+// Colors variables
+// ----------------------------------------------
+
+// General
+$cBlue: #1181FB;
 $cBlack: #000;
 $cWhite: #FFF;
-$cGray: #999;
 $cMainBg: #2E3C43;

-// -- Structure
+//Structure
 $cSecondaryDark: #282C2F;
 $cSecondaryBackground: #F2F6F9;
 $cThirdBackground: #F9F9F9;

-// -- Lines
+//Lines
 $cHoverLine: #AAA;
 $cMainLine: #DDD;
-$cSecondaryLine: rgba($cMainBg, 0.08);
+$cSecondaryLine: #EEE;

-// -- Borders
-$cBlackHover: #2E3C43;
-$cBlueHover: #0F6CD2;
-
-// -- Typography
+//Typography
 $cMainText: #2E3C43;
 $cSecondaryText: #636D72;
 $cAltText: #979EA1;
 $cHintText: #CBCED0;
-$cHintTextHover: #9C9FA1;

-// -- Others
+//Others
 $cHighlight: #9DE0AD;
-$cHighlightHover: #82BB90;
 $cAlert: #F19243;
 $cPublic: #9BC63B;
 $cLink: #FEB100;
--- a/src/scss/entry.scss
+++ b/src/scss/entry.scss
@@ -1,56 +0,0 @@
-// Entry point for all CartoAssets
-// ----------------------------------------------
-
-// Variables and functions
-@import 'cdb-variables/sizes';
-@import 'cdb-variables/colors';
-@import 'cdb-utilities/mixins';
-
-@import 'cdb-utilities/vendor/reset';
-@import 'cdb-utilities/vendor/normalize';
-@import 'cdb-utilities/defaults';
-@import 'cdb-utilities/fonts';
-@import 'cdb-icon-font';
-@import 'cdb-utilities/helpers';
-
-@import 'vendor/perfect-scrollbar/main'; // Perfect scrollbar styles
-
-@import 'cdb-components/forms/checkbox';
-@import 'cdb-components/forms/dropdowns';
-@import 'cdb-components/forms/inputs';
-@import 'cdb-components/forms/legends';
-@import 'cdb-components/forms/option-input';
-@import 'cdb-components/forms/radio';
-@import 'cdb-components/forms/selects';
-@import 'cdb-components/forms/tabsForms';
-@import 'cdb-components/forms/textarea';
-@import 'cdb-components/forms/toggle';
-
-@import 'cdb-components/shapes/add';
-@import 'cdb-components/shapes/arrow';
-@import 'cdb-components/shapes/check-circle';
-@import 'cdb-components/shapes/close';
-@import 'cdb-components/shapes/dash';
-@import 'cdb-components/shapes/dataset';
-@import 'cdb-components/shapes/dots';
-@import 'cdb-components/shapes/error-circle';
-@import 'cdb-components/shapes/hamburguer';
-@import 'cdb-components/shapes/magnify';
-@import 'cdb-components/shapes/move';
-@import 'cdb-components/shapes/paragraph';
-@import 'cdb-components/shapes/threePoints';
-@import 'cdb-components/shapes/toogle-arrow';
-@import 'cdb-components/shapes/type';
-
-@import 'cdb-components/avatars';
-@import 'cdb-components/boxes';
-@import 'cdb-components/buttons';
-@import 'cdb-components/colors';
-@import 'cdb-components/headers';
-@import 'cdb-components/lists';
-@import 'cdb-components/loader';
-@import 'cdb-components/menu';
-@import 'cdb-components/tags';
-@import 'cdb-components/tooltips';
-@import 'cdb-components/typography';
-@import 'cdb-components/layer-selector';
--- a/src/scss/vendor/perfect-scrollbar/_main.scss
+++ b/src/scss/vendor/perfect-scrollbar/_main.scss
@@ -1,3 +0,0 @@
-@import 'variables';
-@import 'mixins';
-@import 'themes';
--- a/src/scss/vendor/perfect-scrollbar/_mixins.scss
+++ b/src/scss/vendor/perfect-scrollbar/_mixins.scss
@@ -1,144 +0,0 @@
-@mixin scrollbar-rail-default($theme) {
-  display: none;
-  position: absolute; /* please don't change 'position' */
-  opacity: map_get($theme, rail-default-opacity);
-  transition: height 0.2s linear, width 0.2s ease-in-out, border-radius 0.2s ease-in-out;
-}
-
-@mixin scrollbar-rail-hover($theme) {
-  opacity: map_get($theme, rail-hover-opacity);
-}
-
-@mixin scrollbar-default($theme) {
-  position: absolute; /* please don't change 'position' */
-  background: map_get($theme, bar-bg);
-  border-radius: map_get($theme, border-radius);
-  transition: height 0.2s linear, width 0.2s ease-in-out, border-radius 0.2s ease-in-out;
-}
-
-@mixin scrollbar-hover($theme) {
-  background: map_get($theme, bar-hover-bg);
-}
-
-@mixin in-scrolling($theme) {
-  &.ps-in-scrolling {
-    &.ps-x > .ps-scrollbar-x-rail {
-      @include scrollbar-rail-hover($theme);
-      height: map_get($theme, scrollbar-x-rail-hover-height);
-      background: map_get($theme, bar-x-rail-hover-bg);
-
-      > .ps-scrollbar-x {
-        @include scrollbar-hover($theme);
-        height: map_get($theme, scrollbar-x-hover-height);
-      }
-    }
-    &.ps-y > .ps-scrollbar-y-rail {
-      @include scrollbar-rail-hover($theme);
-      width: map_get($theme, scrollbar-y-rail-hover-width);
-      background: map_get($theme, bar-y-rail-hover-bg);
-
-      > .ps-scrollbar-y {
-        @include scrollbar-hover($theme);
-        width: map_get($theme, scrollbar-y-hover-width);
-      }
-    }
-  }
-}
-
-// Layout and theme mixin
-@mixin ps-container($theme) {
-  -ms-touch-action: auto;
-  touch-action: auto;
-  overflow: hidden !important;
-  -ms-overflow-style: none;
-
-  // Edge
-  @supports (-ms-overflow-style: none) {
-    overflow: auto !important;
-  }
-  // IE10+
-  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    overflow: auto !important;
-  }
-
-  &.ps-active-x > .ps-scrollbar-x-rail {
-    display: block;
-    background: map_get($theme, bar-x-rail-bg);
-    cursor: default !important;
-  }
-
-  &.ps-active-y > .ps-scrollbar-y-rail {
-    display: block;
-    background: map_get($theme, bar-y-rail-bg);
-    cursor: default !important;
-  }
-
-  @include in-scrolling($theme);
-
-  > .ps-scrollbar-x-rail {
-    @include scrollbar-rail-default($theme);
-    bottom: map_get($theme, scrollbar-x-rail-bottom); /* there must be 'bottom' for ps-scrollbar-x-rail */
-    height: map_get($theme, scrollbar-x-rail-height);
-
-    > .ps-scrollbar-x {
-      @include scrollbar-default($theme);
-      bottom: map_get($theme, scrollbar-x-bottom); /* there must be 'bottom' for ps-scrollbar-x */
-      height: map_get($theme, scrollbar-x-height);
-    }
-    &:hover,
-    &:active {
-      height: map_get($theme, scrollbar-x-rail-hover-height);
-
-      > .ps-scrollbar-x {
-        height: map_get($theme, scrollbar-x-hover-height);
-      }
-    }
-  }
-
-  > .ps-scrollbar-y-rail {
-    @include scrollbar-rail-default($theme);
-    right: map_get($theme, scrollbar-y-rail-right); /* there must be 'right' for ps-scrollbar-y-rail */
-    width: map_get($theme, scrollbar-y-rail-width);
-
-    > .ps-scrollbar-y {
-      @include scrollbar-default($theme);
-      right: map_get($theme, scrollbar-y-right); /* there must be 'right' for ps-scrollbar-y */
-      width: map_get($theme, scrollbar-y-width);
-    }
-    &:hover,
-    &:active {
-      width: map_get($theme, scrollbar-y-rail-hover-width);
-
-      > .ps-scrollbar-y {
-        width: map_get($theme, scrollbar-y-hover-width);
-      }
-    }
-  }
-
-  &:hover {
-    @include in-scrolling($theme);
-
-    > .ps-scrollbar-x-rail,
-    > .ps-scrollbar-y-rail {
-      opacity: map_get($theme, rail-container-hover-opacity);
-    }
-
-    > .ps-scrollbar-x-rail:hover {
-      @include scrollbar-rail-hover($theme);
-      background: map_get($theme, bar-x-rail-hover-bg);
-
-      > .ps-scrollbar-x {
-        @include scrollbar-hover($theme);
-      }
-    }
-
-    > .ps-scrollbar-y-rail:hover {
-      @include scrollbar-rail-hover($theme);
-      background: map_get($theme, bar-y-rail-hover-bg);
-
-      > .ps-scrollbar-y {
-        @include scrollbar-hover($theme);
-      }
-    }
-  }
-}
--- a/src/scss/vendor/perfect-scrollbar/_themes.scss
+++ b/src/scss/vendor/perfect-scrollbar/_themes.scss
@@ -1,29 +0,0 @@
-$ps-theme-default: (
-  border-radius: $ps-border-radius,
-  rail-default-opacity: $ps-rail-default-opacity,
-  rail-container-hover-opacity: $ps-rail-container-hover-opacity,
-  rail-hover-opacity: $ps-rail-hover-opacity,
-  bar-bg: $ps-bar-bg,
-  bar-hover-bg: $ps-bar-hover-bg,
-  bar-x-rail-bg: $ps-bar-x-rail-bg,
-  bar-x-rail-hover-bg: $ps-bar-x-rail-hover-bg,
-  bar-y-rail-bg: $ps-bar-y-rail-bg,
-  bar-y-rail-hover-bg: $ps-bar-y-rail-hover-bg,
-  scrollbar-x-rail-bottom: $ps-scrollbar-x-rail-bottom,
-  scrollbar-x-rail-height: $ps-scrollbar-x-rail-height,
-  scrollbar-x-rail-hover-height: $ps-scrollbar-x-rail-hover-height,
-  scrollbar-x-bottom: $ps-scrollbar-x-bottom,
-  scrollbar-x-height: $ps-scrollbar-x-height,
-  scrollbar-x-hover-height: $ps-scrollbar-x-hover-height,
-  scrollbar-y-rail-right: $ps-scrollbar-y-rail-right,
-  scrollbar-y-rail-width: $ps-scrollbar-y-rail-width,
-  scrollbar-y-rail-hover-width: $ps-scrollbar-y-rail-hover-width,
-  scrollbar-y-right: $ps-scrollbar-y-right,
-  scrollbar-y-width: $ps-scrollbar-y-width,
-  scrollbar-y-hover-width: $ps-scrollbar-y-hover-width,
-);
-
-// Default theme
-.ps-container {
-  @include ps-container($ps-theme-default);
-}
--- a/src/scss/vendor/perfect-scrollbar/_variables.scss
+++ b/src/scss/vendor/perfect-scrollbar/_variables.scss
@@ -1,30 +0,0 @@
-// Colors
-$ps-border-radius: 0 !default;
-
-$ps-rail-default-opacity: 1 !default;
-$ps-rail-container-hover-opacity: 1 !default;
-$ps-rail-hover-opacity: 1 !default;
-
-$ps-bar-bg: #AAA !default;
-$ps-bar-hover-bg: #AAA !default;
-
-$ps-bar-x-rail-bg: linear-gradient(180deg, transparent 50%, #EEE 50%) !default;
-$ps-bar-x-rail-hover-bg: linear-gradient(180deg, transparent 50%, #EEE 50%) !default;
-
-$ps-bar-y-rail-bg: linear-gradient(90deg, transparent 50%, #EEE 50%) !default;
-$ps-bar-y-rail-hover-bg: linear-gradient(90deg, transparent 50%, #EEE 50%) !default;
-
-// Sizes
-$ps-scrollbar-x-rail-bottom: 0 !default;
-$ps-scrollbar-x-rail-height: 8px !default;
-$ps-scrollbar-x-rail-hover-height: 16px !default;
-$ps-scrollbar-x-bottom: 0 !default;
-$ps-scrollbar-x-height: 4px !default;
-$ps-scrollbar-x-hover-height: 8px !default;
-
-$ps-scrollbar-y-rail-right: 0 !default;
-$ps-scrollbar-y-rail-width: 8px !default;
-$ps-scrollbar-y-rail-hover-width: 16px !default;
-$ps-scrollbar-y-right: 0 !default;
-$ps-scrollbar-y-width: 4px !default;
-$ps-scrollbar-y-hover-width: 8px !default;
--- a/styleguide/_template.html
+++ b/styleguide/_template.html
@@ -1,14 +1,5 @@
 <head>
  <link href='../css/cartostyles.css' type='text/css' rel='stylesheet'>
-  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
-  <style>
-    .box {
-      display: inline-block;
-      width: 100px;
-      height: 100px;
-      text-align: center;
-    }
-  </style>
 </head>

 {{> theme}}
@@ -53,11 +44,6 @@
        // Show section in Styleguide
        j('#styleguide .section[data-section="' + j('#styleguide-menu a').first().data('section') + '"]').show();
      }
-
-     $('.CDB-Button--loading').click(function(){
-        $(this).toggleClass("is-loading");
-     })
-
    });
 </script>

--- a/tasks/sass.js
+++ b/tasks/sass.js
@@ -7,7 +7,7 @@ module.exports = {
    files: [{
      expand: true,
      src: [
-        'src/scss/entry.scss'
+        'src/scss/**/*.scss'
      ],
      dest: '.tmp',
      ext: '.css'