Revert "Adding empty area so it's easier to reach."

This reverts commit 64f04b3bc5.
Adding empty area so it's easier to reach.
2016-02-04 20:08:09 +01:00 · 2016-02-04 19:59:11 +01:00
51 changed files with 392 additions and 1626 deletions
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,18 +0,0 @@
-cache: false
-language: node_js
-node_js:
-  - "4.1"
-
-install:
-  - npm install
-
-before_script:
-  - npm install -g grunt-cli
-
-script:
-  - grunt build
-
-notifications:
-  email:
-    on_success: never
-    on_failure: change
--- a/README.md
+++ b/README.md
@@ -4,9 +4,8 @@

 ### Installation
 As easy as:
- ```npm install --global gulp-cli``` [Gulp installation](https://github.com/gulpjs/gulp)
- ```npm install -g markdown-styleguide-generator``` [StyleGenerator installation](https://www.npmjs.com/package/markdown-styleguide-generator#install)
 - ```npm install```
+- ```npm install -g markdown-styleguide-generator``` [StyleGenerator installation](https://www.npmjs.com/package/markdown-styleguide-generator#install)

 ### Build
 If you want to use any of the CartoAssets components, after the installation just run:
--- a/icon-font/font.sketch
+++ b/icon-font/font.sketch
--- a/icon-font/svgs/icon-font_104_Edition.svg
+++ b/icon-font/svgs/icon-font_104_Edition.svg
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="500px" height="333px" viewBox="0 0 500 333" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.5.1 (25234) - http://www.bohemiancoding.com/sketch -->
-    <title>icon-font_104_Edition</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="Artboard-1" sketch:type="MSArtboardGroup" transform="translate(-8000.000000, -10082.000000)" fill="#000000">
-            <g id="icon-font_104_Edition" sketch:type="MSLayerGroup" transform="translate(8000.000000, 10082.000000)">
-                <path d="M458.333333,62.4332457 L458.333333,41.4985518 C458.333333,18.615799 439.761032,0 416.850938,0 L41.4823958,0 C18.5348739,0 0,18.5795345 0,41.4985518 L0,291.478759 C0,314.361512 18.5723012,332.977311 41.4823958,332.977311 L323.008802,332.977311 L229.166667,332.977311 L229.166667,312.166229 L41.4823958,312.166229 C30.1003709,312.166229 20.8333333,302.889986 20.8333333,291.478759 L20.8333333,41.4985518 C20.8333333,30.0505525 30.0634509,20.8110819 41.4823958,20.8110819 L416.850938,20.8110819 C428.232962,20.8110819 437.5,30.0873246 437.5,41.4985518 L437.5,62.4332457 L458.333333,62.4332457 Z" id="Shape" sketch:type="MSShapeGroup"></path>
-                <path d="M497.385308,183.623975 L454.059573,138.92734 C450.680166,135.441002 445.186463,135.441002 441.807056,138.92734 L329.160145,255.138592 C328.172318,256.157676 327.565758,257.373424 327.149831,258.660687 C327.11517,258.785838 326.993858,258.875231 326.959198,259.01826 L309.628904,321.59355 C308.762389,324.704436 309.611573,328.065623 311.829851,330.37197 C313.476229,332.070442 315.677176,332.982253 317.947445,332.982253 C318.744638,332.982253 319.541832,332.874981 320.321695,332.642559 L380.977724,314.763904 C381.099036,314.728147 381.185687,314.602997 381.32433,314.567239 C382.572111,314.138152 383.750571,313.512399 384.738398,312.493315 L497.385308,196.282063 C500.764716,192.777846 500.764716,187.128192 497.385308,183.623975 L497.385308,183.623975 Z M378.603474,293.524063 L347.530257,261.467636 L413.264062,193.6539 L444.337279,225.710328 L378.603474,293.524063 L378.603474,293.524063 Z M339.558321,278.523872 L362.070373,301.748244 L330.563899,311.027266 L339.558321,278.523872 L339.558321,278.523872 Z M456.589796,213.070119 L425.516579,181.013692 L447.924649,157.896592 L478.997866,189.953019 L456.589796,213.070119 L456.589796,213.070119 Z" id="Shape" sketch:type="MSShapeGroup"></path>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/icon-font/svgs/icon-font_105_View.svg
+++ b/icon-font/svgs/icon-font_105_View.svg
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="500px" height="309px" viewBox="0 0 500 309" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.5.1 (25234) - http://www.bohemiancoding.com/sketch -->
-    <title>icon-font_105_View</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="Artboard-1" sketch:type="MSArtboardGroup" transform="translate(-9000.000000, -10104.000000)" fill="#000000">
-            <g id="icon-font_105_View" sketch:type="MSLayerGroup" transform="translate(9000.000000, 10104.000000)">
-                <path d="M253.581879,308.61402 C312.962752,308.61402 370.768722,280.970482 427.225327,234.264991 C447.101103,217.822134 464.002246,201.524318 483.377535,181.181477 C485.568088,178.881533 492.073436,172.004723 492.078081,171.999827 C494.933975,168.989784 496.758569,167.101346 498.204136,165.671731 C499.511808,164.37849 500.384881,163.601664 500.441945,163.564064 C495.349704,166.919331 484.716873,165.896878 484.716873,154.524024 C484.716873,143.151171 495.349704,142.128718 500.441945,145.483984 C500.384881,145.446384 499.511808,144.669559 498.204136,143.376317 C496.758569,141.946702 494.933975,140.058264 492.078081,137.048221 C492.073436,137.043326 485.568088,130.166515 483.377535,127.866571 C464.002246,107.523731 447.101103,91.2259143 427.225327,74.7830573 C370.768722,28.0775667 312.962752,0.434027778 253.581879,0.434027778 C191.731723,0.434027778 130.807245,26.8363188 75.5661959,70.1970001 C35.8951124,101.336257 0.434027778,141.650659 0.434027778,154.524024 C0.434027778,167.397389 35.8951124,207.711792 75.5661959,238.851048 C130.807245,282.211729 191.731723,308.61402 253.581879,308.61402 L253.581879,308.61402 Z M89.1578777,221.535389 C55.2818134,194.944851 22.4468844,157.616028 22.4468844,154.524024 C22.4468844,151.43202 55.2818134,114.103197 89.1578777,87.5126589 C140.855436,46.9333905 197.359154,22.4468844 253.581879,22.4468844 C306.883849,22.4468844 360.314194,47.9979447 413.19371,91.7441773 C432.282846,107.536261 448.611152,123.281689 467.437643,143.048326 C469.597313,145.315844 476.081558,152.170347 476.109114,152.199391 C479.117168,155.369807 481.067363,157.38824 482.725294,159.027876 C485.030509,161.307652 486.691463,162.785505 488.330451,163.86543 C490.742582,165.454779 490.31849,170.118336 493.786291,169.784872 C497.263225,169.45053 499.302153,162.372959 499.607582,155.278924 C499.914506,148.150166 498.470919,141.004783 494.976966,140.668805 C491.509166,140.335341 490.742582,143.59327 488.330451,145.182618 C486.691463,146.262543 485.030509,147.740396 482.725294,150.020172 C481.067363,151.659808 479.117168,153.678241 476.109114,156.848657 C476.081558,156.877701 469.597313,163.732204 467.437643,165.999722 C448.611152,185.766359 432.282846,201.511787 413.19371,217.303871 C360.314194,261.050104 306.883849,286.601164 253.581879,286.601164 C197.359154,286.601164 140.855436,262.114658 89.1578777,221.535389 Z" id="Shape" sketch:type="MSShapeGroup"></path>
-                <path d="M250,60.7910156 C200.300481,60.7910156 159.855769,101.867676 159.855769,152.34375 C159.855769,202.840169 200.300481,243.896484 250,243.896484 C299.699519,243.896484 340.144231,202.840169 340.144231,152.34375 C340.144231,101.867676 299.699519,60.7910156 250,60.7910156 L250,60.7910156 Z M250,223.551432 C211.338141,223.551432 179.887821,191.609701 179.887821,152.34375 C179.887821,113.077799 211.338141,81.1360677 250,81.1360677 C288.661859,81.1360677 320.112179,113.077799 320.112179,152.34375 C320.112179,191.609701 288.661859,223.551432 250,223.551432 L250,223.551432 Z" id="Shape" sketch:type="MSShapeGroup"></path>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/icon-font/svgs/icon-font_106_Odyssey.svg
+++ b/icon-font/svgs/icon-font_106_Odyssey.svg
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="498px" height="498px" viewBox="0 0 498 498" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.5.1 (25234) - http://www.bohemiancoding.com/sketch -->
-    <title>icon-font_106_Odyssey</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="Artboard-1" sketch:type="MSArtboardGroup" transform="translate(-1.000000, -11001.000000)" fill="#191919">
-            <g id="icon-font_106_Odyssey" sketch:type="MSLayerGroup" transform="translate(0.000000, 11000.000000)">
-                <path d="M250,498.955327 C387.494231,498.955327 498.955327,387.494231 498.955327,250 C498.955327,112.505769 387.494231,1.04467292 250,1.04467292 C112.505769,1.04467292 1.04467292,112.505769 1.04467292,250 C1.04467292,387.494231 112.505769,498.955327 250,498.955327 L250,498.955327 Z M250,476.40843 C124.958077,476.40843 23.5915705,375.041923 23.5915705,250 C23.5915705,124.958077 124.958077,23.5915705 250,23.5915705 C375.041923,23.5915705 476.40843,124.958077 476.40843,250 C476.40843,375.041923 375.041923,476.40843 250,476.40843 L250,476.40843 Z" id="Shape" sketch:type="MSShapeGroup"></path>
-                <path d="M250,146.660053 C250,141.474266 245.791246,137.265512 240.605459,137.265512 C235.419673,137.265512 231.210919,141.474266 231.210919,146.660053 L231.210919,250 C231.210919,252.630471 232.319475,255.148208 234.25475,256.933171 L346.989238,360.273118 C348.792989,361.926557 351.066468,362.734488 353.339947,362.734488 C355.876473,362.734488 358.412999,361.701088 360.273118,359.690657 C363.786676,355.857684 363.523629,349.920334 359.690657,346.406776 L250,245.866402 L250,146.660053 Z" id="Shape" sketch:type="MSShapeGroup"></path>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/icon-font/svgs/icon-font_107_Settings.svg
+++ b/icon-font/svgs/icon-font_107_Settings.svg
@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="500px" height="417px" viewBox="0 0 500 417" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.5.1 (25234) - http://www.bohemiancoding.com/sketch -->
-    <title>icon-font_107_Settings</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="Artboard-1" sketch:type="MSArtboardGroup" transform="translate(-1000.000000, -11043.000000)" fill="#191919">
-            <g id="icon-font_107_Settings" sketch:type="MSLayerGroup" transform="translate(1000.000000, 11043.000000)">
-                <path d="M20.8333333,41.4748987 L20.8333333,41.4748987 L20.8333333,375.191768 C20.8333333,386.475711 30.2349552,395.833333 41.7697206,395.833333 L458.230279,395.833333 C469.833485,395.833333 479.166667,386.564052 479.166667,375.191768 L479.166667,41.4748987 C479.166667,30.1909553 469.765045,20.8333333 458.230279,20.8333333 L41.7697206,20.8333333 C30.1665145,20.8333333 20.8333333,30.102615 20.8333333,41.4748987 L20.8333333,41.4748987 Z M0,41.4748987 C0,18.5689446 18.6880464,0 41.7697206,0 L458.230279,0 C481.299059,0 500,18.7127579 500,41.4748987 L500,375.191768 C500,398.097722 481.311954,416.666667 458.230279,416.666667 L41.7697206,416.666667 C18.7009409,416.666667 0,397.953909 0,375.191768 L0,41.4748987 L0,41.4748987 Z" id="Shape" sketch:type="MSShapeGroup"></path>
-                <path d="M174.166667,125.494436 C174.166667,125.221366 174.392779,125 174.672232,125 L395.327768,125 C395.606984,125 395.833333,125.219872 395.833333,125.494436 L395.833333,145.338898 C395.833333,145.611967 395.608284,145.833333 395.342879,145.833333 C395.342879,145.833333 268.649937,145.833333 177.304687,145.833333 L173.696606,145.833333 C173.956213,145.833333 174.166667,145.613461 174.166667,145.338898 L174.166667,125.494436 Z" id="Rectangle-7228" sketch:type="MSShapeGroup"></path>
-                <rect id="Rectangle-7228-Copy" sketch:type="MSShapeGroup" x="104.166667" y="270.833333" width="141.666667" height="20.8333333" rx="2"></rect>
-                <rect id="Rectangle-7228-Copy-2" sketch:type="MSShapeGroup" x="314.166667" y="270.833333" width="81.6666667" height="20.8333333" rx="2"></rect>
-                <path d="M135.416667,166.666667 C152.675565,166.666667 166.666667,152.675565 166.666667,135.416667 C166.666667,118.157768 152.675565,104.166667 135.416667,104.166667 C118.157768,104.166667 104.166667,118.157768 104.166667,135.416667 C104.166667,152.675565 118.157768,166.666667 135.416667,166.666667 L135.416667,166.666667 Z M135.416667,187.5 L135.416667,187.5 C106.651836,187.5 83.3333333,164.181497 83.3333333,135.416667 C83.3333333,106.651836 106.651836,83.3333333 135.416667,83.3333333 C164.181497,83.3333333 187.5,106.651836 187.5,135.416667 C187.5,164.181497 164.181497,187.5 135.416667,187.5 L135.416667,187.5 Z" id="Shape" sketch:type="MSShapeGroup"></path>
-                <path d="M281.25,312.5 C298.508898,312.5 312.5,298.508898 312.5,281.25 C312.5,263.991102 298.508898,250 281.25,250 C263.991102,250 250,263.991102 250,281.25 C250,298.508898 263.991102,312.5 281.25,312.5 L281.25,312.5 Z M281.25,333.333333 L281.25,333.333333 C252.485169,333.333333 229.166667,310.014831 229.166667,281.25 C229.166667,252.485169 252.485169,229.166667 281.25,229.166667 C310.014831,229.166667 333.333333,252.485169 333.333333,281.25 C333.333333,310.014831 310.014831,333.333333 281.25,333.333333 L281.25,333.333333 Z" id="Shape" sketch:type="MSShapeGroup"></path>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "cartoassets",
  "description": "Share frontend assets between different CartoDB repositories",
-  "version": "0.1.30",
+  "version": "0.1.24",
  "homepage": "https://github.com/cartodb/CartoAssets",
  "author": {
    "name": "CartoDB",
--- a/src/fonts/cartoIcon.eot
+++ b/src/fonts/cartoIcon.eot
--- a/src/fonts/cartoIcon.svg
+++ b/src/fonts/cartoIcon.svg
--- 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/avatars.scss
+++ b/src/scss/cdb-components/avatars.scss
@@ -16,7 +16,7 @@
    <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
  </li>
  <li class="CDB-AvatarList-itemMore">
-    <button class="CDB-Text is-semibold CDB-Size-small u-secondaryTextColor">+ 16</button>
+    <button class="CDB-Text is-semibold CDB-Size-small">+ 16</button>
  </li>
 </ul>
 ```
@@ -44,6 +44,7 @@
  border-left: 2px solid $cWhite;
  border-radius: 50px;
  background: $cSecondaryLine;
+  color: $cTypo2;
 }

 .CDB-AvatarList-itemMedia {
--- a/src/scss/cdb-components/boxes.scss
+++ b/src/scss/cdb-components/boxes.scss
@@ -2,7 +2,7 @@
 // ----------------------------------------------

 /* SG
-# Boxes/Dropdown
+# Boxes/Box Dropdown


 ```
@@ -21,136 +21,6 @@
  box-shadow: 0  $baseSize  $baseSize * 2 0 rgba(0, 0, 0, 0.16);
 }

-
-/* SG
-# Boxes/Loader
-```
-<div class="CDB-BoxLoader">
-  <ul class="CDB-BoxLoader-inner">
-    <li class="CDB-BoxLoader-item">
-      <div class="CDB-Shape u-rSpace--m">
-        <div class="CDB-Shape-CircleItem is-green is-medium">
-          <div class="CDB-Shape-tick is-medium is-green"></div>
-        </div>
-      </div>
-      <div class="CDB-BoxLoader-info">
-        <p class="CDB-Text CDB-Size-medium">Query applied. Showing 2,561 rows, Query applied. Showing 2,561 rows, Query applied. Showing 2,561 rows Query applied. Showing 2,561 rowsQuery applied. Showing 2,561 rows Query applied. Showing 2,561 rows</p>
-      </div>
-      <div class="CDB-BoxLoader-actions">
-        <div class="CDB-Shape">
-          <div class="CDB-Shape-threePoints is-small is-blue">
-            <div class="CDB-Shape-threePointsItem"></div>
-            <div class="CDB-Shape-threePointsItem"></div>
-            <div class="CDB-Shape-threePointsItem"></div>
-          </div>
-        </div>
-      </div>
-    </li>
-  </ul>
-</div>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<div class="CDB-BoxLoader">
-  <ul class="CDB-BoxLoader-inner">
-    <li class="CDB-BoxLoader-item">
-      <div class="CDB-Shape u-rSpace--m">
-        <div class="CDB-Shape-CircleItem is-green is-medium">
-          <div class="CDB-Shape-tick is-medium is-green"></div>
-        </div>
-      </div>
-      <div class="CDB-BoxLoader-info">
-        <p class="CDB-Text CDB-Size-medium">Finished importing <a href="#">populated_places_2</a></p>
-      </div>
-    </li>
-    <li class="CDB-BoxLoader-item is-working">
-      <div class="CDB-LoaderIcon u-rSpace--m">
-        <div class="CDB-LoaderIcon-item"></div>
-      </div>
-      <div class="CDB-BoxLoader-info">
-        <p class="CDB-Text CDB-Size-medium">Geocoding populated_places_2 (28%)</p>
-      </div>
-      <div class="CDB-BoxLoader-actions">
-        <div class="CDB-Shape">
-          <div class="CDB-Shape-close is-blue is-large"></div>
-        </div>
-      </div>
-    </li>
-  </ul>
-  <ul class="CDB-BoxLoader-inner">
-    <li class="CDB-BoxLoader-item">
-      <div class="CDB-Shape u-rSpace--m">
-        <div class="CDB-Shape-CircleItem is-green is-medium">
-          <div class="CDB-Shape-tick is-medium is-green"></div>
-        </div>
-      </div>
-      <div class="CDB-BoxLoader-info">
-        <p class="CDB-Text CDB-Size-medium">Finished importing <a href="#">populated_places_2</a></p>
-      </div>
-    </li>
-  </ul>
-</div>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<div class="CDB-BoxLoader">
-  <ul class="CDB-BoxLoader-inner">
-    <li class="CDB-BoxLoader-item">
-      <div class="CDB-Shape u-rSpace--m">
-        <div class="CDB-Shape-CircleItem is-red">
-          <div class="CDB-Shape-close is-medium is-red"></div>
-        </div>
-      </div>
-      <div class="CDB-BoxLoader-info">
-        <p class="CDB-Text CDB-Size-medium">Error in query. Data might be outdated</p>
-      </div>
-      <div class="CDB-BoxLoader-actions">
-        <div class="CDB-Shape">
-          <div class="CDB-Shape-threePoints is-small is-blue">
-            <div class="CDB-Shape-threePointsItem"></div>
-            <div class="CDB-Shape-threePointsItem"></div>
-            <div class="CDB-Shape-threePointsItem"></div>
-          </div>
-        </div>
-      </div>
-    </li>
-  </ul>
-</div>
-```
-*/
-
-.CDB-BoxLoader {
-  padding: 0 $baseSize * 3;
-  border-top: 1px solid $cMainLine;
-}
-
-
-.CDB-BoxLoader-inner {
-  padding: $baseSize + 4 0;
-  border-top: 1px solid $cMainLine;
-  &:first-child {
-    border-top: 0;
-  }
-}
-
-.CDB-BoxLoader-item {
-  @include display-flex();
-  padding: $baseSize 0;
-  color: $cSecondaryText;
-  &.is-working {
-    color: $cAltText;
-  }
-}
-
-.CDB-BoxLoader-info {
-  @include flex(1);
-  padding-right: $baseSize * 2;
-}
-
 /* SG
 # Boxes/Info Boxes

--- a/src/scss/cdb-components/carousel.scss
+++ b/src/scss/cdb-components/carousel.scss
@@ -1,51 +0,0 @@
-// Carousel styles
-// ----------------------------------------------
-
-/* SG
-# Carousel
-
-```
-<div>
-  <ul class="CDB-Carousel">
-    <li class="CDB-CarouselItem is-selected"></li>
-    <li class="CDB-CarouselItem"></li>
-    <li class="CDB-CarouselItem"></li>
-    <li class="CDB-CarouselItem"></li>
-    <li class="CDB-CarouselItem"></li>
-  </ul>
-</div>
-```
-*/
-
-@import '../cdb-utilities/mixins';
-@import '../cdb-variables/sizes';
-@import '../cdb-variables/colors';
-
-.CDB-Carousel {
-  @include display-flex();
-  @include justify-content(flex-start);
-  width: 100%;
-}
-.CDB-CarouselItem {
-  @include display-flex();
-  @include align-items(center);
-  @include justify-content(center);
-  width: $baseSize * 11;
-  height: $baseSize * 7;
-  margin-right: 8px;
-  border: 1px solid $cSecondaryLine;
-  border-radius: 4px;
-  background: $cThirdBackground;
-  box-sizing: border-box;
-
-  &:last-child {
-    margin-right: 0;
-  }
-  &:hover {
-    border: 1px solid $cMainLine;
-    cursor: pointer;
-  }
-}
-.CDB-CarouselItem.is-selected {
-  border: 2px solid $cBlue;
-}
--- a/src/scss/cdb-components/colors.scss
+++ b/src/scss/cdb-components/colors.scss
@@ -18,9 +18,9 @@
@import '../cdb-variables/colors';

 .box {
-  display: inline-block;
  width: 120px;
  height: 64px;
+  display: inline-block;
  margin: 0 24px 24px 0;
 }

@@ -28,15 +28,15 @@
  background: $cBlue;
 }
 .Color-White {
-  border: 1px solid #E5E5E5;
  background: $cWhite;
+  border: 1px solid #e5e5e5;
 }
 .Color-Dark {
  background: $cBlack;
 }

 .Color-MainDark {
-  background: $cMainBg;
+  background: $cMainDark;
 }
 .Color-SecondaryDark {
  background: $cSecondaryDark;
@@ -89,13 +89,13 @@


 .Color-Type02 {
-  background: $cSecondaryText;
+  background: $cTypo2;
 }
 .Color-Type03 {
-  background: $cAltText;
+  background: $cTypo3;
 }
 .Color-Type04 {
-  background: $cHintText;
+  background: $cTypo4;
 }


--- a/src/scss/cdb-components/forms/color_bar.scss
+++ b/src/scss/cdb-components/forms/color_bar.scss
@@ -1,116 +0,0 @@
-// Color input styles
-// ----------------------------------------------
-
-/* SG
-# Forms/Color bar
-
-```
-<ul class="CDB-ColorBarContainer">
-  <li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #9DE0AD;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #50E3C2;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #FFFFC0;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #7ED321;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #BD10E0;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #F15743;"></li>
-</ul>
-
-<br/>
-
-<ul class="CDB-ColorBarContainer">
-  <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #9DE0AD;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #50E3C2;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #FFFFC0;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #7ED321;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #BD10E0;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #F15743;"></li>
-</ul>
-
-<br/>
-
-<ul class="CDB-ColorBarContainer">
-  <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #9DE0AD;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #50E3C2;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #FFFFC0;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #7ED321;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #BD10E0;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #F15743;"></li>
-</ul>
-
-<br/>
-
-<ul class="CDB-ColorBarContainer">
-  <li class="CDB-ColorBar" style="background-color: #9DE0AD;"></li>
-</ul>
-
-<br/>
-
-<ul class="CDB-ColorBarContainer">
-  <li class="CDB-ColorBar CDB-ColorBar-gradient" style="background: linear-gradient(90deg, #FFFECA, #9FDAB3, #36B6C5, #207EBA, #203196);"></li>
-</ul>
- ```
-*/
-
-@import '../../cdb-variables/sizes';
-@import '../../cdb-utilities/mixins';
-
-.CDB-ColorBarContainer {
-  @include display-flex();
-  @include flex-direction(row);
-  width: 100%;
-}
-.CDB-ColorBar {
-  position: relative;
-  width: 100%;
-  height: $baseSize - 2;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: $baseSize - 2;
-  box-sizing: border-box;
-
-  &:last-child {
-    margin-right: 0;
-  }
-}
-.CDB-ColorBar-gradient {
-  border: 0;
-
-  &::after {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    border-radius: $baseSize - 2;
-    content: '';
-  }
-}
-.CDB-ColorBar.CDB-ColorBar--spaceMedium {
-  margin-right: $baseSize / 2;
-
-  &:last-child {
-    margin-right: 0;
-  }
-}
-.CDB-ColorBar.CDB-ColorBar--spaceless {
-  border-width: 1px 0;
-  border-radius: 0;
-}
-.CDB-ColorBar.CDB-ColorBar--spaceless:first-child {
-  border-width: 1px 0 1px 1px;
-  border-radius: $baseSize - 2 0 0 $baseSize - 2;
-}
-.CDB-ColorBar.CDB-ColorBar--spaceless:last-child {
-  border-width: 1px 1px 1px 0;
-  border-radius: 0 $baseSize - 2 $baseSize - 2 0;
-}
-.CDB-ColorBar.CDB-ColorBar--spaceSmall {
-  margin-right: 2px;
-  border-radius: 2px;
-}
-.CDB-ColorBar.CDB-ColorBar--spaceSmall:first-child {
-  border-radius: $baseSize - 2 3px 3px $baseSize - 2;
-}
-.CDB-ColorBar.CDB-ColorBar--spaceSmall:last-child {
-  margin-right: 0;
-  border-radius: 3px $baseSize - 2 $baseSize - 2 3px;
-}
--- a/src/scss/cdb-components/forms/dropdowns.scss
+++ b/src/scss/cdb-components/forms/dropdowns.scss
@@ -1,112 +0,0 @@
-// Dropdown styles
-// ----------------------------------------------
-
-/* SG
-# Forms/Dropdowns
-
-```
-<div class="CDB-DropdownContainer">
-  <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText CDB-Text">
-  <div class="CDB-Dropdown CDB-Box-Modal">
-    <ul class="CDB-Dropdown-calculations CDB-Text is-semibold">
-      <li class="CDB-Dropdown-calculationsElement">
-        <input class="CDB-Radio" type="radio" name="calculation" value="01" checked>
-        <span class="u-iBlock CDB-Radio-face"></span>
-        <label class="u-iBlock u-lSpace">COUNT</label>
-      </li>
-      <li class="CDB-Dropdown-calculationsElement">
-        <input class="CDB-Radio" type="radio" name="calculation" value="02">
-        <span class="u-iBlock CDB-Radio-face"></span>
-        <label class="u-iBlock u-lSpace">SUM</label>
-      </li>
-      <li class="CDB-Dropdown-calculationsElement">
-        <input class="CDB-Radio" type="radio" name="calculation" value="03">
-        <span class="u-iBlock CDB-Radio-face"></span>
-        <label class="u-iBlock u-lSpace">AVG</label>
-      </li>
-      <li class="CDB-Dropdown-calculationsElement">
-        <input class="CDB-Radio" type="radio" name="calculation" value="04">
-        <span class="u-iBlock CDB-Radio-face"></span>
-        <label class="u-iBlock u-lSpace">MAX</label>
-      </li>
-      <li class="CDB-Dropdown-calculationsElement">
-        <input class="CDB-Radio" type="radio" name="calculation" value="05">
-        <span class="u-iBlock CDB-Radio-face"></span>
-        <label class="u-iBlock u-lSpace">MIN</label>
-      </li>
-    </ul>
-
-    <ul class="CDB-Dropdown-options CDB-Text CDB-Size-medium">
-      <li class="CDB-Dropdown-optionsElement is-selected" title="selected">selected</li>
-      <li class="CDB-Dropdown-optionsElement" title="active">active</li>
-      <li class="CDB-Dropdown-optionsElement is-disabled" title="disabled">disabled</li>
-      <li class="CDB-Dropdown-optionsElement is-disabled" title="disabled">disabled</li>
-    </ul>
-  </div>
-</div>
-```
-*/
-
-@import '../../cdb-utilities/mixins';
-@import '../../cdb-variables/sizes';
-@import '../../cdb-variables/colors';
-
-.CDB-DropdownContainer {
-  position: relative;
-  height: 250px;
-}
-.CDB-Dropdown {
-  @include display-flex();
-  @include flex-direction(row);
-  position: absolute;
-  top: 40px;
-  max-height: 200px;
-}
-.CDB-Dropdown-calculations {
-  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;
-  font-size: $sFontSize-small;
-
-  &:last-child {
-    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;
-  border-bottom: 1px solid $cMainLine;
-  color: $cBlue;
-
-  &:last-child {
-    border-bottom: 0;
-  }
-  &:hover {
-    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;
-
-  &:hover {
-    background-color: transparent;
-    cursor: default;
-  }
-}
--- a/src/scss/cdb-components/forms/inputs.scss
+++ b/src/scss/cdb-components/forms/inputs.scss
@@ -21,7 +21,6 @@
  border-radius: $baseSize / 2;
  font-size: $sFontSize-medium;
  line-height: $sLineHeight-medium;
-  box-sizing: border-box;

  &:hover {
    border: 1px solid $cHoverLine;
--- a/src/scss/cdb-components/forms/legends.scss
+++ b/src/scss/cdb-components/forms/legends.scss
@@ -35,45 +35,37 @@
 <br/>
 <br/>

-<div class="CDB-Fieldset">
-  <p class="CDB-Legend CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p>
-  <ul class="CDB-Size-medium CDB-Text CDB-Fieldset-block">
-    <li class="u-rSpace--xl u-iblock">
-      <div class="u-iblock CDB-Size-medium">
+<fieldset>
+  <p class="CDB-Legend u-iBlock CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p>
+  <ul class="CDB-Text CDB-Size-medium u-iBlock">
+    <li class="u-iBlock u-rSpace--xl">
+      <div class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl">
        <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Sport">
        <span class="u-iBlock CDB-Checkbox-face"></span>
        <label class="u-iBlock u-lSpace">Sport</label>
      </div>
    </li>
    <li class="u-iblock">
-      <label class="u-iblock CDB-Size-medium">
+      <label class="u-iblock CDB-Text CDB-Size-medium">
        <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Travel">
        <span class="u-iBlock CDB-Checkbox-face"></span>
        <label class="u-iBlock u-lSpace">Travel</label>
      </label>
    </li>
  </ul>
-</div>
-<div class="u-tSpace-xl CDB-Text CDB-Fieldset">
-  <p class="CDB-Legend CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p>
-  <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText">
-</div>
+</fieldset>
+<fieldset class="u-tSpace-xl CDB-Text">
+  <p class="CDB-Legend u-iBlock CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p>
+  <div class="u-iBlock">
+    <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText">
+  </div>
+</fieldset>

 ```
 */

@import '../../cdb-variables/sizes';
-@import '../../cdb-utilities/mixins';

 .CDB-Legend {
  width: $baseSize * 12;
 }
-
-.CDB-Fieldset {
-  @include display-flex();
-  @include align-items(center);
-}
-.CDB-Fieldset-block {
-  width: 100%;
-}
-
--- a/src/scss/cdb-components/forms/option_input.scss
+++ b/src/scss/cdb-components/forms/option_input.scss
@@ -1,146 +0,0 @@
-// Color input styles
-// ----------------------------------------------
-
-/* SG
-# Forms/Option input
-
-```
-<div class="CDB-OptionInput is-active CDB-Text">
-  <ul class="CDB-OptionInput-container">
-    <li class="CDB-OptionInput-item is-active">
-      <button type="button" class="CDB-OptionInput-content">8px</button>
-    </li>
-
-    <li class="CDB-OptionInput-item">
-      <button type="button" class="CDB-OptionInput-content">solid</button>
-    </li>
-
-    <li class="CDB-OptionInput-item">
-      <button type="button" class="CDB-ColorBarContainer CDB-OptionInput-content">
-        <span class="CDB-ColorBar" style="background-color: #207EBA;"></span>
-      </button>
-    </li>
-  </ul>
-</div>
-
-<br/>
-
-<div class="CDB-OptionInput is-active CDB-Text">
-  <ul class="CDB-OptionInput-container">
-    <li class="CDB-OptionInput-item">
-      <button type="button" class="CDB-OptionInput-content">8...12</button>
-    </li>
-
-    <li class="CDB-OptionInput-item is-active">
-      <button type="button" class="CDB-ColorBarContainer CDB-OptionInput-content">
-        <span class="CDB-ColorBar" style="background-color: #FFFFC0;"></span>
-      </button>
-    </li>
-  </ul>
-</div>
-
-<br/>
-
-<button type="button" class="CDB-OptionInput">
-  <div class="CDB-OptionInput-container">
-    <span class="CDB-ColorBar CDB-ColorBar-gradient" style="background: linear-gradient(90deg, #FFFECA, #9FDAB3, #36B6C5, #207EBA, #203196);"></span>
-  </div>
-</button>
-
-<br/>
-<br/>
-
-<button type="button" class="CDB-OptionInput">
-  <div class="CDB-OptionInput-container">
-    <ul class="CDB-ColorBarContainer">
-      <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #9DE0AD;"></li>
-      <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #50E3C2;"></li>
-      <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #FFFFC0;"></li>
-      <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #7ED321;"></li>
-      <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #BD10E0;"></li>
-      <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #F15743;"></li>
-    </ul>
-  </div>
-</button>
-
-<br/>
-<br/>
-
-<button type="button" class="CDB-OptionInput">
-  <div class="CDB-OptionInput-container">
-    <ul class="CDB-ColorBarContainer">
-      <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #9DE0AD;"></li>
-      <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #50E3C2;"></li>
-      <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #FFFFC0;"></li>
-      <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #7ED321;"></li>
-    </ul>
-  </div>
-</button>
-```
-*/
-
-@import '../../cdb-variables/sizes';
-@import '../../cdb-variables/colors';
-@import '../../cdb-utilities/mixins';
-
-.CDB-OptionInput {
-  width: 100%;
-  height: $baseSize * 4;
-  border: 1px solid $cMainLine;
-  border-radius: $baseSize / 2;
-  box-sizing: border-box;
-  vertical-align: middle;
-
-  &:hover {
-    border: 1px solid $cHoverLine;
-  }
-  &:focus {
-    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-item {
-  @include display-flex();
-  @include align-items(center);
-  @include align-content(center);
-  width: auto;
-  height: 100%;
-  font-size: $sFontSize-medium;
-  box-sizing: content-box;
-
-  &::after {
-    padding: 0 $baseSize - 2;
-    color: $cHintText;
-    content: '·';
-  }
-  &:last-child {
-    width: 100%;
-
-    &::after {
-      display: none;
-    }
-  }
-}
-.CDB-OptionInput-content {
-  @include display-flex();
-  @include align-items(center);
-  height: 100%;
-  color: $cMainBg;
-  box-sizing: content-box;
-  white-space: nowrap;
-
-  &:hover {
-    text-decoration: none;
-  }
-}
-.CDB-OptionInput-item.is-active > .CDB-OptionInput-content {
-  border-bottom: 1px solid $cMainBg;
-}
--- a/src/scss/cdb-components/forms/selects.scss
+++ b/src/scss/cdb-components/forms/selects.scss
@@ -17,21 +17,9 @@
    </ul>
  </div>
 </div>
-<select name="select" class="CDB-SelectFake CDB-Text">
-  <option value="value1" selected>Choose an option</option>
-  <option value="value2">Hide</option>
-  <option value="value3">Rename</option>
-  <option value="value4">Change source dataset…</option>
-  <option value="value5">Delete this layer…</option>
-</select>
-
-
 ```
 */

-@import '../../cdb-variables/sizes';
-@import '../../cdb-variables/colors';
-
 .CDB-Select {
  position: relative;
 }
@@ -40,32 +28,3 @@
  position: absolute;
  top: 40px;
 }
-
-.CDB-SelectFake {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 100%;
-  padding: 7px 8px 6px;
-  border: 1px solid $cMainLine;
-  border-radius: $baseSize / 2;
-  background: $cWhite;
-  font-size: $sFontSize-medium;
-  line-height: $sLineHeight-medium;
-
-  &:hover {
-    border: 1px solid $cHoverLine;
-  }
-  &:focus {
-    border: 1px solid $cBlue;
-    outline: none;
-  }
-  &:disabled {
-    border-color: $cSecondaryLine;
-    background: $cThirdBackground;
-  }
-  &.has-error {
-    border: 1px solid rgba($cError, 0.48);
-    background: rgba($cError, 0.04);
-    color: $cError;
-  }
-}
--- a/src/scss/cdb-components/forms/sliders.scss
+++ b/src/scss/cdb-components/forms/sliders.scss
@@ -39,12 +39,35 @@

 .CDB-Range::-webkit-slider-thumb {
  position: relative;
-  width: $baseSize + 4;
-  height: $baseSize + 4;
-  margin-top: -5px;
-  border: 1px solid $cBlue;
-  border-radius: 50%;
-  background: $cWhite;
+  width: $baseSize / 2;
+  height: 100%;
+  border-radius: $baseSize / 2;
+
+  &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: -3000px;
+    height: $baseSize / 4;
+    border-radius: $baseSize / 2;
+    background: $cBlue;
+    content: '';
+  }
+
+  &::after {
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    left: -6px;
+    width: $baseSize + 4;
+    height: $baseSize + 4;
+    border: 1px solid $cBlue;
+    border-radius: 50%;
+    background: $cWhite;
+    content: '';
+    z-index: 1;
+  }

  &:focus,
  &:hover {
@@ -93,7 +116,6 @@
  height: $baseSize / 4;
  border-radius: $baseSize / 2;
  background: $cBlue;
-  background: green;
  content: '';
 }

--- a/src/scss/cdb-components/forms/textarea.scss
+++ b/src/scss/cdb-components/forms/textarea.scss
@@ -1,42 +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>
-```
-*/
-
-@import '../../cdb-variables/sizes';
-@import '../../cdb-variables/colors';
-
-.CDB-Textarea {
-  width: 100%;
-  padding: 7px 8px 6px;
-  border: 1px solid $cMainLine;
-  border-radius: $baseSize / 2;
-  font-size: $sFontSize-medium;
-  line-height: $sLineHeight-medium;
-
-  &:hover {
-    border: 1px solid $cHoverLine;
-  }
-  &:focus {
-    border: 1px solid $cBlue;
-    outline-color: transparent;
-    outline-style: none;
-  }
-  &:disabled {
-    border-color: $cSecondaryLine;
-    background: $cThirdBackground;
-  }
-}
-.CDB-Textarea.has-error {
-  border: 1px solid rgba($cError, 0.48);
-  background: rgba($cError, 0.04);
-  color: $cError;
-  }
--- a/src/scss/cdb-components/forms/toggle.scss
+++ b/src/scss/cdb-components/forms/toggle.scss
@@ -33,7 +33,7 @@
    height: $baseSize * 2;
    margin: 0 2px;
    border-radius: 50px;
-    background: $cHintText;
+    background: $cTypo4;

    &::before {
      position: absolute;
@@ -49,7 +49,7 @@
  }

  &:checked + .CDB-ToggleFace {
-    background: $cMainBg;
+    background: $cMainDark;

    &::before {
      right: 2px;
--- a/src/scss/cdb-components/headers.scss
+++ b/src/scss/cdb-components/headers.scss
@@ -43,19 +43,17 @@
      </ul>
    </li>
    <li class="CDB-HeaderInfo-ListItem">
-      <p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium u-iBlock u-altTextColor">Published 8 days ago</p>
+      <p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium u-iBlock">Published 8 days ago</p>
    </li>
  </ul>
 </div>
-
 <br/>
 <br/>
 <br/>
-
 <div class="CDB-HeaderInfo">
-  <button class="u-rSpace--xl CDB-HeaderInfo-Back">
+  <a href="#" class="u-rSpace--xl CDB-HeaderInfo-Back">
    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
-  </button>
+  </a>
  <div class="CDB-HeaderInfo-Inner">
    <div class="CDB-HeaderInfo-Title u-bSpace">
      <h2 class="CDB-HeaderInfo-TitleText CDB-Text CDB-Size-huge is-light">Stadiums Affected Stadiums Affected Stadiums AffectedStadiums Affected Stadiums Affected Stadiums Affected Stadiums Affected </h2>
@@ -87,15 +85,14 @@
    <p class="CDB-Text CDB-Size-medium u-iBlock"><a href="#" class="u-iBlock">populates_places</a></p>
  </div>
 </div>
-
 <br/>
 <br/>
 <br/>

 <div class="CDB-HeaderInfo">
-  <button class="u-rSpace--xl CDB-HeaderInfo-Back">
+  <a href="#" class="u-rSpace--xl CDB-HeaderInfo-Back">
    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
-  </button>
+  </a>
  <div class="CDB-HeaderInfo-Inner">
    <div class="CDB-HeaderInfo-Title u-bSpace">
      <h2 class="CDB-HeaderInfo-TitleText CDB-Text CDB-Size-huge is-light">Basemap</h2>
@@ -111,18 +108,17 @@
        </a>
      </div>
    </div>
-    <p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium u-altTextColor">Positron by CartoDB</p>
+    <p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium">Positron by CartoDB</p>
  </div>
 </div>
-
 <br/>
 <br/>
 <br/>

 <div class="CDB-HeaderInfo">
-  <button class="u-rSpace--xl CDB-HeaderInfo-Back">
+  <a href="#" class="u-rSpace--xl CDB-HeaderInfo-Back">
    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
-  </button>
+  </a>
  <div class="CDB-HeaderInfo-Inner">
    <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText CDB-Text u-bSpace--m">
    <div class="CDB-Shape u-iBlock">
@@ -134,35 +130,10 @@
    <p class="CDB-Text CDB-Size-medium u-iBlock"><a href="#" class="u-iBlock">populates_places</a></p>
  </div>
 </div>
-
 <br/>
 <br/>
 <br/>

-<div class="CDB-HeaderInfo">
-  <div class="CDB-HeaderNumeration CDB-Text is-semibold u-rSpace--m">1</div>
-
-  <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">
-            <div class="CDB-ArrowToogle is-blue is-small is-down"></div>
-          </div>
-        </a>
-      </div>
-    </div>
-
-    <p class="CDB-Text u-upperCase CDB-FontSize-small u-altTextColor u-bSpace--m">Histogram</p>
-    <p class="CDB-Text CDB-Size-medium u-altTextColor">Distribution of a numeric variable in a range</p>
-  </div>
-</div>
-
-<br/>
-<br/>
-<br/>
 ```
 */

@@ -172,12 +143,12 @@

 .CDB-HeaderInfo {
  @include display-flex();
-  @include align-items(flex-start);

  &.is-block {
    display: block;
  }
 }
+
 .CDB-HeaderInfo-ListItem {
  display: inline-block;
  margin-right: 8px;
@@ -188,16 +159,23 @@
  }
 }

+.CDB-HeaderInfo-Text {
+  color: $cTypo3;
+}
+
 .CDB-HeaderInfo-Inner {
  @include flex(1);
 }
+
 .CDB-HeaderInfo-Back {
  margin-top: 7px;
 }
+
 .CDB-HeaderInfo-Title {
  @include display-flex();
  @include align-items(center);
 }
+
 .CDB-HeaderInfo-TitleText {
  @include flex(1);
  width: 0;
@@ -206,20 +184,12 @@
  white-space: nowrap;
  overflow: hidden;
 }
+
 .CDB-HeaderInfo-ActionsItem {
  display: inline-block;
  margin-left: 4px;
  vertical-align: middle;
 }
-.CDB-HeaderNumeration {
-  width: $baseSize * 3;
-  height: $baseSize * 3;
-  border: 1px solid $cMainLine;
-  border-radius: 4px;
-  background-color: $cWhite;
-  color: $cAltText;
-  font-size: $sFontSize-small;
-  line-height: 23px;
-  text-align: center;
-  box-sizing: border-box;
-}
+
+
+
--- a/src/scss/cdb-components/lists.scss
+++ b/src/scss/cdb-components/lists.scss
@@ -25,4 +25,3 @@
  display: block;
  padding: 12px 16px;
 }
-
--- a/src/scss/cdb-components/loader.scss
+++ b/src/scss/cdb-components/loader.scss
@@ -2,9 +2,10 @@
 // ----------------------------------------------

 /* SG
-# Loader/principal
+# Loader

 This is the generic loader for widgets, maps, components, ...
+There is only one state 'is-visible', in order to make it visible.

 ```
 <div class="CDB-Loader is-visible"></div>
@@ -12,8 +13,6 @@ This is the generic loader for widgets, maps, components, ...
 */

@import '../cdb-utilities/mixins';
-@import '../cdb-variables/colors';
-@import '../cdb-variables/sizes';

 .CDB-Loader {
  @include css3-prefix(animation, loader-progress 1000ms linear 1);
@@ -40,89 +39,3 @@ This is the generic loader for widgets, maps, components, ...
    width: 100%;
  }
 }
-
-/* SG
-# Loader/circle
-
-```
-<div style="padding: 20px;">
-  <div class="CDB-LoaderIcon">
-    <div class="CDB-LoaderIcon-item"></div>
-  </div>
-</div>
-
-<div style="padding: 20px; background: #2E3C43;">
-  <div class="CDB-LoaderIcon is-grey">
-    <div class="CDB-LoaderIcon-item is-grey"></div>
-  </div>
-</div>
-```
-*/
-
-.CDB-LoaderIcon {
-  box-sizing: border-box;
-  position: relative;
-  width: $baseSize * 2;
-  height: $baseSize * 2;
-  border: 2px solid $cMainLine;
-  border-radius: 50%;
-  &.is-grey {
-    border: 2px solid $cSecondaryText;
-  }
-}
-
-.CDB-LoaderIcon-item {
-  @include css3-prefix(animation, loader-icon 1.4s linear infinite);
-  position: absolute;
-  top: -2px;
-  left: -2px;
-  width: $baseSize * 2;
-  height: $baseSize * 2;
-  border-radius: 50%;
-  background: linear-gradient(to right, $cWhite 10%, rgba($cWhite, 0) 42%);
-
-  &::before,
-  &::after {
-    position: absolute;
-    top: 0;
-    left: 0;
-    content: '';
-  }
-
-  &::before {
-    width: 50%;
-    height: 50%;
-    border-radius: 100% 0 0;
-    background: $cMainLine;
-  }
-  &::after {
-    right: 0;
-    bottom: 0;
-    width: 75%;
-    height: 75%;
-    margin: auto;
-    border-radius: 50%;
-    background: $cWhite;
-  }
-  &.is-grey {
-    background: linear-gradient(to right, $cMainBg 10%, rgba($cWhite, 0) 42%);
-    &::before {
-      background: $cSecondaryText;
-    }
-    &::after {
-      background: $cMainBg;
-    }
-  }
-}
-
-
-@include keyframes(loader-icon) {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-
--- a/src/scss/cdb-components/menu.scss
+++ b/src/scss/cdb-components/menu.scss
@@ -2,31 +2,31 @@
 // ----------------------------------------------

 /* SG
-# Menu/Navigation
+# Menu/


 ```
 <nav class="CDB-NavMenu">
  <ul class="CDB-NavMenu-Inner CDB-Text is-semibold CDB-Size-medium">
    <li class="CDB-NavMenu-Item">
-      <button class="CDB-NavMenu-Link">DATA</button>
+      <a class="CDB-NavMenu-Link" href="#">DATA</a>
    </li>
    <li class="CDB-NavMenu-Item">
-      <button class="CDB-NavMenu-Link">STYLE</button>
+      <a class="CDB-NavMenu-Link" href="#">STYLE</a>
    </li>
-    <li class="CDB-NavMenu-Item is-selected">
-      <button class="CDB-NavMenu-Link">POP-UP</button>
+    <li class="CDB-NavMenu-Item">
+      <a class="CDB-NavMenu-Link" href="#">POP-UP</a>
      <ul class="CDB-NavSubmenu CDB-Size-small">
-        <li class="CDB-NavSubmenu-Item is-selected">
-          <button class="CDB-NavSubmenu-Link">CLICK <span class="CDB-NavSubmenu-Status u-hintTextColor">NONE</span></button>
+        <li class="CDB-NavSubmenu-Item is-active">
+          <a href="#" class="CDB-NavSubmenu-Link">CLICK <span class="CDB-NavSubmenu-Status">NONE</span></a>
        </li>
        <li class="CDB-NavSubmenu-Item">
-          <button class="CDB-NavSubmenu-Link">HOVER <span class="CDB-NavSubmenu-Status u-hintTextColor">NONE</span></button>
+          <a href="#" class="CDB-NavSubmenu-Link">HOVER <span class="CDB-NavSubmenu-Status">NONE</span></a>
        </li>
      </ul>
    </li>
    <li class="CDB-NavMenu-Item">
-      <button class="CDB-NavMenu-Link">LEGEND</button>
+      <a class="CDB-NavMenu-Link" href="#">LEGEND</a>
    </li>
  </ul>
  <div style="position: absolute; right: 0; top: 0; height: 24px; width: 46px; background: red;">
@@ -41,33 +41,36 @@
  <nav class="CDB-NavMenu is-dark">
    <ul class="CDB-NavMenu-Inner CDB-Text is-semibold CDB-Size-medium">
      <li class="CDB-NavMenu-Item CDB-Text">
-        <button class="CDB-NavMenu-Link">DATA</button>
+        <a class="CDB-NavMenu-Link" href="#">DATA</a>
      </li>
      <li class="CDB-NavMenu-Item">
-        <button class="CDB-NavMenu-Link">STYLE</button>
+        <a class="CDB-NavMenu-Link" href="#">STYLE</a>
      </li>
-      <li class="CDB-NavMenu-item is-selected">
-        <button class="CDB-NavMenu-Link">POP-UP</button>
+      <li class="CDB-NavMenu-item is-active">
+        <a class="CDB-NavMenu-Link" href="#">POP-UP</a>
        <ul class="CDB-NavSubmenu CDB-Size-small">
-          <li class="CDB-NavSubmenu-Item is-selected">
-            <button class="CDB-NavSubmenu-Link">CLICK <span class="CDB-NavSubmenu-Status">NONE</span></button>
+          <li class="CDB-NavSubmenu-Item is-active">
+            <a href="#" class="CDB-NavSubmenu-Link">CLICK <span class="CDB-NavSubmenu-Status">NONE</span></a>
          </li>
          <li class="CDB-NavSubmenu-Item">
-            <button class="CDB-NavSubmenu-Link">HOVER <span class="CDB-NavSubmenu-Status">NONE</span></button>
+            <a href="#" class="CDB-NavSubmenu-Link">HOVER <span class="CDB-NavSubmenu-Status">NONE</span></a>
          </li>
        </ul>
      </li>
      <li class="CDB-NavMenu-Item">
-        <button class="CDB-NavMenu-Link">LEGEND</button>
+        <a class="CDB-NavMenu-Link" href="#">LEGEND</a>
      </li>
    </ul>
  </nav>
 </div>
+
+<br/><br/>
+<br/><br/>
+
 ```
 */

@import '../cdb-variables/colors';
-@import '../cdb-variables/sizes';

 .CDB-NavMenu {
  position: relative;
@@ -84,7 +87,6 @@
  margin-bottom: -1px;
  padding: 4px 0 11px;
  border-bottom: 1px solid transparent;
-  color: $cBlue;
 }

 .CDB-NavMenu-Item,
@@ -94,9 +96,9 @@
  vertical-align: middle;
 }

-.CDB-NavMenu-Item.is-selected .CDB-NavMenu-Link {
-  border-bottom: 1px solid $cBlack;
-  color: $cMainText;
+.CDB-NavMenu-Item.is-active .CDB-NavMenu-Link {
+  border-bottom: 1px solid $cMainDark;
+  color: $cMainDark;
 }

 .CDB-NavSubmenu {
@@ -112,42 +114,49 @@
  margin-bottom: -1px;
  padding-bottom: 12px;
  border-bottom: 1px solid transparent;
-  color: $cBlue;
 }

-.CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-Link {
-  border-bottom: 1px solid $cMainLine;
-  color: $cMainText;
+.CDB-NavSubmenu-item.is-active {
+  .CDB-NavSubmenu-Link {
+    border-bottom: 1px solid $cTypo3;
+    color: $cMainDark;
+  }
 }

 .CDB-NavSubmenu-Status {
  margin-left: 2px;
+  color: $cTypo4;
 }

 .CDB-Navmenu.is-dark {

  .CDB-NavMenu-Inner,
  .CDB-NavSubmenu {
-    border-bottom: 1px solid $cSecondaryText;
+    border-bottom: 1px solid $cTypo2;
  }

  .CDB-NavMenu-Link,
  .CDB-NavSubmenu-Link {
-    color: $cAltText;
+    color: $cTypo3;
  }

-  .CDB-NavMenu-Item.is-selected .CDB-NavMenu-Link {
-    border-bottom: 1px solid $cMainLine;
-    color: $cWhite;
+  .CDB-NavMenu-Item.is-active {
+    .CDB-NavMenu-Link {
+      border-bottom: 1px solid $cMainLine;
+      color: $cWhite;
+    }
  }

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

  .CDB-NavSubmenu-Status {
-    color: $cSecondaryText;
+    color: $cTypo2;
  }
 }

+
--- a/src/scss/cdb-components/shapes/add.scss
+++ b/src/scss/cdb-components/shapes/add.scss
@@ -49,15 +49,10 @@ Description
  width: 16px;
  height: 16px;
  text-align: center;
+  &:hover {
+    cursor: pointer;
+  }
 }
-.CDB-Shape--medium {
-  width: 24px;
-  height: 24px;
-}
-.CDB-Shape:hover {
-  cursor: pointer;
-}
-

 .CDB-Shape-add {
  position: relative;
@@ -70,7 +65,7 @@ Description
    bottom: 7px;
    left: 0;
    height: 1px;
-    background: $cMainBg;
+    background: $cMainDark;
    content: '';
  }

@@ -81,7 +76,7 @@ Description
    bottom: 0;
    left: 7px;
    width: 1px;
-    background: $cMainBg;
+    background: $cMainDark;
    content: '';
  }
 }
@@ -95,7 +90,7 @@ Description
    bottom: 7px;
    left: 4px;
    height: 1px;
-    background: $cMainBg;
+    background: $cMainDark;
    content: '';
  }

@@ -106,7 +101,7 @@ Description
    bottom: 3px;
    left: 8px;
    width: 1px;
-    background: $cMainBg;
+    background: $cMainDark;
    content: '';
  }
 }
--- a/src/scss/cdb-components/shapes/arrow.scss
+++ b/src/scss/cdb-components/shapes/arrow.scss
@@ -22,7 +22,7 @@ Description
  position: relative;
  width: 1px;
  height: 8px;
-  background: $cMainBg;
+  background: $cMainDark;

  &::before {
    display: block;
@@ -32,7 +32,7 @@ Description
    width: 5px;
    height: 1px;
    transform: rotate(45deg);
-    background: $cMainBg;
+    background: $cMainDark;
    content: '';
  }

@@ -44,7 +44,7 @@ Description
    width: 5px;
    height: 1px;
    transform: rotate(-45deg);
-    background: $cMainBg;
+    background: $cMainDark;
    content: '';
  }
  &.is-up {
--- a/src/scss/cdb-components/shapes/check-circle.scss
+++ b/src/scss/cdb-components/shapes/check-circle.scss
@@ -60,7 +60,7 @@ Description
 .CDB-Shape-CircleItem {
  width: 14px;
  height: 14px;
-  border: 1px solid $cMainBg;
+  border: 1px solid $cMainDark;
  border-radius: 50%;

  &.is-small {
@@ -86,7 +86,7 @@ Description
    position: absolute;
    width: 1px;
    transform: rotate(-45deg);
-    background: $cMainBg;
+    background: $cMainDark;
    content: '';
  }
  &::after {
@@ -94,31 +94,31 @@ Description
    position: absolute;
    width: 1px;
    transform: rotate(45deg);
-    background: $cMainBg;
+    background: $cMainDark;
    content: '';
  }

  &.is-medium {
    &::before {
-      top: 5px;
+      top: 6px;
      left: 4px;
      height: 4px;
    }
    &::after {
-      top: 3px;
+      top: 4px;
      right: 5px;
-      height: 6px;
+      height: 7px;
    }
  }

  &.is-small {
    &::before {
-      top: 4px;
-      left: 2px;
+      top: 5px;
+      left: 3px;
      height: 3px;
    }
    &::after {
-      top: 2px;
+      top: 3px;
      right: 3px;
      height: 5px;
    }
@@ -143,14 +143,4 @@ Description
  }
 }

-.CDB-Shape-tick.is-green {
-  &::before {
-    background: $cHighlight;
-  }
-  &::after {
-    background: $cHighlight;
-  }
-}
-
-

--- a/src/scss/cdb-components/shapes/close.scss
+++ b/src/scss/cdb-components/shapes/close.scss
@@ -55,7 +55,7 @@ Description
    position: absolute;
    width: 1px;
    transform: rotate(-45deg);
-    background: $cMainBg;
+    background: $cMainDark;
    content: '';
  }
  &::after {
@@ -63,7 +63,7 @@ Description
    position: absolute;
    width: 1px;
    transform: rotate(45deg);
-    background: $cMainBg;
+    background: $cMainDark;
    content: '';
  }

@@ -137,13 +137,3 @@ Description
    background: $cWhite;
  }
 }
-
-.CDB-Shape-close.is-red {
-  &::before {
-    background: $cError;
-  }
-  &::after {
-    background: $cError;
-  }
-}
-
--- a/src/scss/cdb-components/shapes/dash.scss
+++ b/src/scss/cdb-components/shapes/dash.scss
@@ -56,7 +56,7 @@ Description
    bottom: 7px;
    left: 2px;
    height: 1px;
-    background: $cMainBg;
+    background: $cMainDark;
    content: '';
  }
 }
--- a/src/scss/cdb-components/shapes/dataset.scss
+++ b/src/scss/cdb-components/shapes/dataset.scss
@@ -95,7 +95,7 @@ Description
  width: 9px;
  height: 9px;
  margin-left: -10px;
-  border: 1px solid $cMainBg;
+  border: 1px solid $cMainDark;
  border-radius: 50%;
  background: $cWhite;

@@ -132,15 +132,15 @@ Description
 .CDB-Shape-Dataset.is-white {
  .CDB-Shape-DatasetItem {
    border: 1px solid $cHoverLine;
-    background: $cMainBg;
+    background: $cMainDark;
    &:first-child {
-      box-shadow: 3px 0 $cMainBg;
+      box-shadow: 3px 0 $cMainDark;
    }
  }
 }

 .CDB-Shape-Dataset.is-white.is-small {
  .CDB-Shape-DatasetItem:first-child {
-    box-shadow: 2px 0 $cMainBg;
+    box-shadow: 2px 0 $cMainDark;
  }
 }
--- a/src/scss/cdb-components/shapes/dots.scss
+++ b/src/scss/cdb-components/shapes/dots.scss
@@ -23,6 +23,6 @@ You may resize and change the colors of the icons with the `glyph-`-classes. Ava
  background: $cSecondaryLine;

  &.is-selected {
-    background: $cSecondaryText;
+    background: $cTypo2;
  }
 }
--- a/src/scss/cdb-components/shapes/error-circle.scss
+++ b/src/scss/cdb-components/shapes/error-circle.scss
@@ -60,13 +60,13 @@ Description
 .CDB-Shape-CircleItem {
  width: 13px;
  height: 13px;
-  border: 1px solid $cMainBg;
+  border: 1px solid $cMainDark;
  border-radius: 50%;

  &.is-small {
    width: 9px;
    height: 9px;
-    margin: 0 auto;
+    margin: 2px auto;
  }
  &.is-blue {
    border: 1px solid $cBlue;
@@ -74,10 +74,4 @@ Description
  &.is-white {
    border: 1px solid $cWhite;
  }
-  &.is-green {
-    border: 1px solid $cHighlight;
-  }
-  &.is-red {
-    border: 1px solid $cError;
-  }
 }
--- a/src/scss/cdb-components/shapes/hamburguer.scss
+++ b/src/scss/cdb-components/shapes/hamburguer.scss
@@ -43,7 +43,7 @@ Description
 .CDB-Shape-hamburguerItem {
  height: $baseSize / 4;
  margin-bottom: $baseSize / 4;
-  background: $cMainBg;
+  background: $cMainDark;

  &:last-child {
    margin-bottom: 0;
--- a/src/scss/cdb-components/shapes/magnify.scss
+++ b/src/scss/cdb-components/shapes/magnify.scss
@@ -58,7 +58,7 @@ Description
    left: 0;
    width: 11px;
    height: 11px;
-    border: 1px solid $cMainBg;
+    border: 1px solid $cMainDark;
    border-radius: 50%;
    content: '';
  }
@@ -71,7 +71,7 @@ Description
    width: 1px;
    height: 7px;
    transform: rotate(314deg);
-    background: $cMainBg;
+    background: $cMainDark;
    content: '';
  }
 }
--- a/src/scss/cdb-components/shapes/move.scss
+++ b/src/scss/cdb-components/shapes/move.scss
@@ -101,7 +101,7 @@ Description
    display: inline-block;
    width: 3px;
    height: 3px;
-    background: $cMainBg;
+    background: $cMainDark;
    content: '';
  }

@@ -110,7 +110,7 @@ Description
    width: 3px;
    height: 3px;
    margin-left: 2px;
-    background: $cMainBg;
+    background: $cMainDark;
    content: '';
  }
 }
--- a/src/scss/cdb-components/shapes/threePoints.scss
+++ b/src/scss/cdb-components/shapes/threePoints.scss
@@ -4,68 +4,33 @@
 Description

 ```
-<h2>24px</h2>
-<div style="padding: 20px;">
-  <button class="CDB-Shape CDB-Shape--medium" style="background: rgba(0, 0, 0, .02);">
-    <div class="CDB-Shape-threePoints is-horizontal is-medium">
-      <div class="CDB-Shape-threePointsItem is-round"></div>
-      <div class="CDB-Shape-threePointsItem is-round"></div>
-      <div class="CDB-Shape-threePointsItem is-round"></div>
-    </div>
-  </button>
-</div>
-<div style="padding: 20px;">
-  <button class="CDB-Shape CDB-Shape--medium" style="background: rgba(0, 0, 0, .02);">
-    <div class="CDB-Shape-threePoints is-horizontal is-blue is-medium">
-      <div class="CDB-Shape-threePointsItem is-round"></div>
-      <div class="CDB-Shape-threePointsItem is-round"></div>
-      <div class="CDB-Shape-threePointsItem is-round"></div>
-    </div>
-  </button>
-</div>
-<div style="padding: 20px; background: #2E3C43;">
-  <button class="CDB-Shape CDB-Shape--medium" style="background: rgba(0, 0, 0, .08);">
-    <div class="CDB-Shape-threePoints is-horizontal is-white is-medium">
-      <div class="CDB-Shape-threePointsItem is-round"></div>
-      <div class="CDB-Shape-threePointsItem is-round"></div>
-      <div class="CDB-Shape-threePointsItem is-round"></div>
-    </div>
-  </button>
-</div>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
 <h2>16px</h2>
 <div style="padding: 20px;">
-  <button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
-    <div class="CDB-Shape-threePoints">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <button class="CDB-Shape-threePoints js-actions">
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
-    </div>
-  </button>
+    </button>
+  </div>
 </div>
 <div style="padding: 20px;">
-  <button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
-    <div class="CDB-Shape-threePoints is-blue">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <button class="CDB-Shape-threePoints is-blue js-actions">
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
-    </div>
-  </button>
+    </button>
+  </div>
 </div>
 <div style="padding: 20px; background: #2E3C43;">
-  <button class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
-    <div class="CDB-Shape-threePoints is-white">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <button class="CDB-Shape-threePoints is-white js-actions">
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
-    </div>
-  </button>
+    </button>
+  </div>
 </div>
 <br>
 <br>
@@ -73,31 +38,31 @@ Description
 <br>
 <h2>12px</h2>
 <div style="padding: 20px;">
-  <button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
-    <div class="CDB-Shape-threePoints">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <button class="CDB-Shape-threePoints is-small js-actions">
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
-    </div>
-  </button>
+    </button>
+  </div>
 </div>
 <div style="padding: 20px;">
-  <button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
-    <div class="CDB-Shape-threePoints is-blue is-small">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <button class="CDB-Shape-threePoints is-blue is-small js-actions">
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
-    </div>
-  </button>
+    </button>
+  </div>
 </div>
 <div style="padding: 20px; background: #2E3C43;">
-  <button class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
-    <div class="CDB-Shape-threePoints is-white is-small">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <button class="CDB-Shape-threePoints is-white is-small js-actions">
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
-    </div>
-  </button>
+    </button>
+  </div>
 </div>
 ```
 */
@@ -107,45 +72,35 @@ Description
 .CDB-Shape-threePoints {
  display: inline-block;
 }
-.CDB-Shape-threePoints.is-horizontal {
-  transform: rotate(90deg);
-}

 .CDB-Shape-threePointsItem {
  width: 2px;
  height: 2px;
  margin-bottom: 5px;
-  background: $cMainBg;
-}
-.CDB-Shape-threePointsItem.is-round {
-  border-radius: 50%;
-}
-.CDB-Shape-threePointsItem:last-child {
-  margin-bottom: 0;
+  background: $cMainDark;
+  &:last-child {
+    margin-bottom: 0;
+  }
 }

 .CDB-Shape-threePoints.is-small {
  padding-top: 2px;
-}
-.CDB-Shape-threePoints.is-small .CDB-Shape-threePointsItem {
-  width: 2px;
-  height: 2px;
-  margin-bottom: 3px;
+
+  .CDB-Shape-threePointsItem {
+    width: 2px;
+    height: 2px;
+    margin-bottom: 3px;
+  }
 }

-.CDB-Shape-threePoints.is-medium {
-  padding-top: 2px;
-}
-.CDB-Shape-threePoints.is-medium .CDB-Shape-threePointsItem {
-  width: 4px;
-  height: 4px;
-  margin-bottom: 3px;
+.CDB-Shape-threePoints.is-blue {
+  .CDB-Shape-threePointsItem {
+    background: $cBlue;
+  }
 }

-.CDB-Shape-threePoints.is-blue .CDB-Shape-threePointsItem {
-  background: $cBlue;
-}
-
-.CDB-Shape-threePoints.is-white .CDB-Shape-threePointsItem {
-  background: $cWhite;
+.CDB-Shape-threePoints.is-white {
+  .CDB-Shape-threePointsItem {
+    background: $cWhite;
+  }
 }
--- a/src/scss/cdb-components/shapes/toogle-arrow.scss
+++ b/src/scss/cdb-components/shapes/toogle-arrow.scss
@@ -97,7 +97,7 @@ Description
    width: 10px;
    height: 1px;
    transform: rotate(-45deg);
-    background: $cMainBg;
+    background: $cMainDark;
    content: '';
  }
  &::after {
@@ -108,7 +108,7 @@ Description
    width: 10px;
    height: 1px;
    transform: rotate(45deg);
-    background: $cMainBg;
+    background: $cMainDark;
    content: '';
  }
 }
--- a/src/scss/cdb-components/tags.scss
+++ b/src/scss/cdb-components/tags.scss
@@ -2,7 +2,7 @@
 // ----------------------------------------------

 /* SG
-# Tags / Privacy
+# Tags

 ```
 <button class="CDB-Tag is-public CDB-Text is-semibold CDB-Size-small u-iBlock">
@@ -20,7 +20,6 @@
 ```
 */

-@import '../cdb-utilities/mixins';
@import '../cdb-variables/sizes';
@import '../cdb-variables/colors';

@@ -46,85 +45,3 @@
    color: $cError;
  }
 }
-
-/* SG
-# Tags / Metadata
-
-```
-<ul class="CDB-ListTag CDB-Text CDB-Size-medium u-secondaryTextColor">
-  <li class="CDB-ListTag-item">
-    <button class="CDB-Tag CDB-Tag--withLink">
-      trees
-      <div class="CDB-Shape u-lSpace">
-        <div class="CDB-Shape-close is-blue is-large"></div>
-      </div>
-    </button>
-  </li>
-  <li class="CDB-ListTag-item">
-    <button class="CDB-Tag CDB-Tag--withLink">
-      table_merge
-      <div class="CDB-Shape u-lSpace">
-        <div class="CDB-Shape-close is-blue is-large"></div>
-      </div>
-    </button>
-  </li>
-  <li class="CDB-ListTag-item">
-    <button class="CDB-Tag CDB-Tag--withLink">
-      word
-      <div class="CDB-Shape u-lSpace">
-        <div class="CDB-Shape-close is-blue is-large"></div>
-      </div>
-    </button>
-  </li>
-</ul>
-
-```
-*/
-
-.CDB-ListTag {
-  @include display-flex();
-}
-
-.CDB-ListTag-item {
-  margin-right: $baseSize;
-}
-
-.CDB-Tag.CDB-Tag--withLink {
-  @include display-flex();
-  padding: $halfBaseSize $halfBaseSize $halfBaseSize $baseSize;
-  border-radius: $halfBaseSize;
-  background: rgba($cBlue, 0.16);
-}
-
-/* SG
-# Tags / Data Type
-
-```
-<ul class="CDB-ListTag">
-  <li class="CDB-ListTag-item">
-    <button class="CDB-Tag CDB-Tag--opaque CDB-Text CDB-Size-small u-altTextColor">
-      Number
-    </button>
-  </li>
-  <li class="CDB-ListTag-item">
-    <button class="CDB-Tag CDB-Tag--opaque CDB-Text CDB-Size-small u-altTextColor">
-      Text
-    </button>
-  </li>
-  <li class="CDB-ListTag-item">
-    <button class="CDB-Tag CDB-Tag--opaque CDB-Text CDB-Size-small u-altTextColor">
-      String
-    </button>
-  </li>
-</ul>
-
-```
-*/
-
-.CDB-Tag.CDB-Tag--opaque {
-  padding: $baseSize / 4 $halfBaseSize;
-  border-radius: $baseSize / 4;
-  background: $cThirdBackground;
-  text-transform: uppercase;
-}
-
--- a/src/scss/cdb-components/tooltips.scss
+++ b/src/scss/cdb-components/tooltips.scss
@@ -1,148 +0,0 @@
-// Tooltip
-// ----------------------------------------------
-
-/* SG
-# Tooltip
-
-
-```
-<div style="position: relative; height: 100px;">
-  <div class="CDB-Tooltip CDB-Tooltip--up is-black">
-    <p class="CDB-Text CDB-Size-medium CDB-Tooltip-text">627K Transactions</p>
-  </div>
-</div>
-
-<div style="position: relative; height: 100px;">
-  <div class="CDB-Tooltip CDB-Tooltip--up is-error">
-    <p class="CDB-Text CDB-Size-medium CDB-Tooltip-text">627K Transactions</p>
-  </div>
-</div>
-
-<div style="position: relative; height: 100px;">
-  <div class="CDB-Tooltip CDB-Tooltip--down is-black">
-    <p class="CDB-Text CDB-Size-medium CDB-Tooltip-text">627K Transactions</p>
-  </div>
-</div>
-
-<div style="position: relative; height: 100px;">
-  <div class="CDB-Tooltip CDB-Tooltip--down is-error">
-    <p class="CDB-Text CDB-Size-medium CDB-Tooltip-text">627K Transactions</p>
-  </div>
-</div>
-
-<div style="position: relative; height: 100px;">
-  <div class="CDB-Tooltip CDB-Tooltip--left is-black">
-    <p class="CDB-Text CDB-Size-medium CDB-Tooltip-text">627K Transactions</p>
-  </div>
-</div>
-
-<div style="position: relative; height: 100px;">
-  <div class="CDB-Tooltip CDB-Tooltip--left is-error">
-    <p class="CDB-Text CDB-Size-medium CDB-Tooltip-text">627K Transactions</p>
-  </div>
-</div>
-
-
-<div style="position: relative; height: 100px;">
-  <div class="CDB-Tooltip CDB-Tooltip--right is-black">
-    <p class="CDB-Text CDB-Size-medium CDB-Tooltip-text">627K Transactions</p>
-  </div>
-</div>
-
-<div style="position: relative; height: 100px;">
-  <div class="CDB-Tooltip CDB-Tooltip--right is-error">
-    <p class="CDB-Text CDB-Size-medium CDB-Tooltip-text">627K Transactions</p>
-  </div>
-</div>
-
-
-
-```
-*/
-
-@import '../cdb-utilities/mixins';
-@import '../cdb-variables/colors';
-@import '../cdb-variables/sizes';
-
-
-.CDB-Tooltip {
-  display: inline-block;
-  position: absolute;
-  padding: $baseSize;
-  border-radius: $halfBaseSize;
-  background: rgba($cMainBg, 0.8);
-}
-.CDB-Tooltip::after {
-  display: block;
-  position: absolute;
-  width: 0;
-  height: 0;
-  border: 4px solid transparent;
-  content: '';
-}
-
-.is-black {
-  &.CDB-Tooltip.CDB-Tooltip--up::after {
-    border-bottom-color: rgba($cMainBg, 0.8);
-  }
-  &.CDB-Tooltip.CDB-Tooltip--down::after {
-    border-top-color: rgba($cMainBg, 0.8);
-  }
-  &.CDB-Tooltip.CDB-Tooltip--left::after {
-    border-right-color: rgba($cMainBg, 0.8);
-  }
-  &.CDB-Tooltip.CDB-Tooltip--right::after {
-    border-left-color: rgba($cMainBg, 0.8);
-  }
-}
-
-.is-error {
-  &.CDB-Tooltip.CDB-Tooltip--up::after {
-    border-bottom-color: $cError;
-  }
-  &.CDB-Tooltip.CDB-Tooltip--down::after {
-    border-top-color: $cError;
-  }
-  &.CDB-Tooltip.CDB-Tooltip--left::after {
-    border-right-color: $cError;
-  }
-  &.CDB-Tooltip.CDB-Tooltip--right::after {
-    border-left-color: $cError;
-  }
-}
-
-.CDB-Tooltip.CDB-Tooltip--up::after {
-  top: -$baseSize;
-  left: calc(50% - #{$halfBaseSize});
-  border-top-width: $halfBaseSize;
-  border-top-style: solid;
-}
-
-.CDB-Tooltip.CDB-Tooltip--down::after {
-  bottom: -$baseSize;
-  left: calc(50% - #{$halfBaseSize});
-  border-top-width: $halfBaseSize;
-  border-top-style: solid;
-}
-
-.CDB-Tooltip.CDB-Tooltip--left::after {
-  top: calc(50% - #{$halfBaseSize});
-  left: -$baseSize;
-  border-right-width: $halfBaseSize;
-  border-right-style: solid;
-}
-
-.CDB-Tooltip.CDB-Tooltip--right::after {
-  top: calc(50% - #{$halfBaseSize});
-  right: -$baseSize;
-  border-right-width: $halfBaseSize;
-  border-right-style: solid;
-}
-
-.CDB-Tooltip.is-error {
-  background: $cError;
-}
-
-.CDB-Tooltip-text {
-  color: $cWhite;
-}
--- a/src/scss/cdb-components/typography.scss
+++ b/src/scss/cdb-components/typography.scss
@@ -9,10 +9,7 @@
 <p class="CDB-Text CDB-Size-huge is-light">Open Sans 26/34 Light</p>
 <p class="CDB-Text CDB-Size-large">Open Sans 16/22 Regular</p>
 <p class="CDB-Text is-semibold CDB-Size-medium">Open Sans 12/16 Semibold</p>
-<p class="CDB-Text is-semibold u-upperCase CDB-Size-medium">Open Sans 12/16 Semibold Uppercase</p>
-<p class="CDB-Text CDB-Size-medium u-secondaryTextColor">Open Sans 12/16 Regular</p>
-<p class="CDB-Text CDB-Size-medium u-altTextColor">Open Sans 12/16 Regular</p>
-<p class="CDB-Text CDB-Size-medium u-hintTextColor">Open Sans 12/16 Regular</p>
+<p class="CDB-Text CDB-Size-medium">Open Sans 12/16 Regular</p>
 <p class="CDB-Text is-semibold CDB-Size-small">Open Sans 10/14 Semibold</p>
 <p class="CDB-Text CDB-Size-small">Open Sans 10/14 Regular</p>
 ```
@@ -51,11 +48,3 @@
  font-size: $sFontSize-small;
  line-height: $sLineHeight-small;
 }
-
-.CDB-FontSize-small {
-  font-size: $sFontSize-small;
-}
-
-.CDB-FontSize-medium {
-  font-size: $sFontSize-medium;
-}
--- a/src/scss/cdb-icon-font.scss
+++ b/src/scss/cdb-icon-font.scss
@@ -119,30 +119,6 @@ All available icons in CartoDB.
  </div>


-  <div class="box">
-    <i class="CDB-IconFont CDB-IconFont-edition Size-large"></i>
-    <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">view</h4>
-  </div>
-
-
-  <div class="box">
-    <i class="CDB-IconFont CDB-IconFont-odyssey Size-large"></i>
-    <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">settings</h4>
-  </div>
-
-
  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-wizard Size-large"></i>
    <h4 class="Text Size-small">wizard</h4>
@@ -740,461 +716,441 @@ All available icons in CartoDB.
 }


-.CDB-IconFont-edition::before {
+.CDB-IconFont-wizard::before {
  content: '\E00E';
 }


-.CDB-IconFont-view::before {
+.CDB-IconFont-info::before {
  content: '\E00F';
 }


-.CDB-IconFont-odyssey::before {
+.CDB-IconFont-fork::before {
  content: '\E010';
 }


-.CDB-IconFont-settings::before {
+.CDB-IconFont-facebook::before {
  content: '\E011';
 }


-.CDB-IconFont-wizard::before {
+.CDB-IconFont-folder::before {
  content: '\E012';
 }


-.CDB-IconFont-info::before {
+.CDB-IconFont-dropbox::before {
  content: '\E013';
 }


-.CDB-IconFont-fork::before {
+.CDB-IconFont-cloud::before {
  content: '\E014';
 }


-.CDB-IconFont-facebook::before {
+.CDB-IconFont-step::before {
  content: '\E015';
 }


-.CDB-IconFont-folder::before {
+.CDB-IconFont-addDocument::before {
  content: '\E016';
 }


-.CDB-IconFont-dropbox::before {
+.CDB-IconFont-arrowNext::before {
  content: '\E017';
 }


-.CDB-IconFont-cloud::before {
+.CDB-IconFont-arrowPrev::before {
  content: '\E018';
 }


-.CDB-IconFont-step::before {
+.CDB-IconFont-close::before {
  content: '\E019';
 }


-.CDB-IconFont-addDocument::before {
+.CDB-IconFont-cartoFante::before {
  content: '\E01A';
 }


-.CDB-IconFont-arrowNext::before {
+.CDB-IconFont-lock::before {
  content: '\E01B';
 }


-.CDB-IconFont-arrowPrev::before {
+.CDB-IconFont-cartoDB::before {
  content: '\E01C';
 }


-.CDB-IconFont-close::before {
+.CDB-IconFont-lens::before {
  content: '\E01D';
 }


-.CDB-IconFont-cartoFante::before {
+.CDB-IconFont-closeLimits::before {
  content: '\E01E';
 }


-.CDB-IconFont-lock::before {
+.CDB-IconFont-defaultUser::before {
  content: '\E01F';
 }


-.CDB-IconFont-cartoDB::before {
+.CDB-IconFont-cockroach::before {
  content: '\E020';
 }


-.CDB-IconFont-lens::before {
+.CDB-IconFont-floppy::before {
  content: '\E021';
 }


-.CDB-IconFont-closeLimits::before {
+.CDB-IconFont-trash::before {
  content: '\E022';
 }


-.CDB-IconFont-defaultUser::before {
+.CDB-IconFont-wifi::before {
  content: '\E023';
 }


-.CDB-IconFont-cockroach::before {
+.CDB-IconFont-unlock::before {
  content: '\E024';
 }


-.CDB-IconFont-floppy::before {
+.CDB-IconFont-unlockWithEllipsis::before {
  content: '\E025';
 }


-.CDB-IconFont-trash::before {
+.CDB-IconFont-gift::before {
  content: '\E026';
 }


-.CDB-IconFont-wifi::before {
+.CDB-IconFont-people::before {
  content: '\E027';
 }


-.CDB-IconFont-unlock::before {
+.CDB-IconFont-play::before {
  content: '\E028';
 }


-.CDB-IconFont-unlockWithEllipsis::before {
+.CDB-IconFont-add::before {
  content: '\E029';
 }


-.CDB-IconFont-gift::before {
+.CDB-IconFont-map::before {
  content: '\E02A';
 }


-.CDB-IconFont-people::before {
+.CDB-IconFont-anchor::before {
  content: '\E02B';
 }


-.CDB-IconFont-play::before {
+.CDB-IconFont-key::before {
  content: '\E02C';
 }


-.CDB-IconFont-add::before {
+.CDB-IconFont-calendar::before {
  content: '\E02D';
 }


-.CDB-IconFont-map::before {
+.CDB-IconFont-document::before {
  content: '\E02E';
 }


-.CDB-IconFont-anchor::before {
+.CDB-IconFont-eye::before {
  content: '\E02F';
 }


-.CDB-IconFont-key::before {
+.CDB-IconFont-marker::before {
  content: '\E030';
 }


-.CDB-IconFont-calendar::before {
+.CDB-IconFont-progressBar::before {
  content: '\E031';
 }


-.CDB-IconFont-document::before {
+.CDB-IconFont-book::before {
  content: '\E032';
 }


-.CDB-IconFont-eye::before {
+.CDB-IconFont-notes::before {
  content: '\E033';
 }


-.CDB-IconFont-marker::before {
+.CDB-IconFont-rectangles::before {
  content: '\E034';
 }


-.CDB-IconFont-progressBar::before {
+.CDB-IconFont-mountain::before {
  content: '\E035';
 }


-.CDB-IconFont-book::before {
+.CDB-IconFont-points::before {
  content: '\E036';
 }


-.CDB-IconFont-notes::before {
+.CDB-IconFont-snake::before {
  content: '\E037';
 }


-.CDB-IconFont-rectangles::before {
+.CDB-IconFont-boss::before {
  content: '\E038';
 }


-.CDB-IconFont-mountain::before {
+.CDB-IconFont-rocket::before {
  content: '\E039';
 }


-.CDB-IconFont-points::before {
+.CDB-IconFont-barometer::before {
  content: '\E03A';
 }


-.CDB-IconFont-snake::before {
+.CDB-IconFont-dollar::before {
  content: '\E03B';
 }


-.CDB-IconFont-boss::before {
+.CDB-IconFont-email::before {
  content: '\E03C';
 }


-.CDB-IconFont-rocket::before {
+.CDB-IconFont-label::before {
  content: '\E03D';
 }


-.CDB-IconFont-barometer::before {
+.CDB-IconFont-outside::before {
  content: '\E03E';
 }


-.CDB-IconFont-dollar::before {
+.CDB-IconFont-jigsaw::before {
  content: '\E03F';
 }


-.CDB-IconFont-email::before {
+.CDB-IconFont-tools::before {
  content: '\E040';
 }


-.CDB-IconFont-label::before {
+.CDB-IconFont-question::before {
  content: '\E041';
 }


-.CDB-IconFont-outside::before {
+.CDB-IconFont-layerStack::before {
  content: '\E042';
 }


-.CDB-IconFont-jigsaw::before {
+.CDB-IconFont-alarm::before {
  content: '\E043';
 }


-.CDB-IconFont-tools::before {
+.CDB-IconFont-cloudDownArrow::before {
  content: '\E044';
 }


-.CDB-IconFont-question::before {
+.CDB-IconFont-pencil::before {
  content: '\E045';
 }


-.CDB-IconFont-layerStack::before {
+.CDB-IconFont-fountainPen::before {
  content: '\E046';
 }


-.CDB-IconFont-alarm::before {
+.CDB-IconFont-emptyDoc::before {
  content: '\E047';
 }


-.CDB-IconFont-cloudDownArrow::before {
+.CDB-IconFont-mergeArrow::before {
  content: '\E048';
 }


-.CDB-IconFont-pencil::before {
+.CDB-IconFont-mergeColumns::before {
  content: '\E049';
 }


-.CDB-IconFont-fountainPen::before {
+.CDB-IconFont-mergeSpatial::before {
  content: '\E04A';
 }


-.CDB-IconFont-emptyDoc::before {
+.CDB-IconFont-globe::before {
  content: '\E04B';
 }


-.CDB-IconFont-mergeArrow::before {
+.CDB-IconFont-chevronDown::before {
  content: '\E04C';
 }


-.CDB-IconFont-mergeColumns::before {
+.CDB-IconFont-streets::before {
  content: '\E04D';
 }


-.CDB-IconFont-mergeSpatial::before {
+.CDB-IconFont-keys::before {
  content: '\E04E';
 }


-.CDB-IconFont-globe::before {
+.CDB-IconFont-facebookSquare::before {
  content: '\E04F';
 }


-.CDB-IconFont-chevronDown::before {
+.CDB-IconFont-fullscreen::before {
  content: '\E050';
 }


-.CDB-IconFont-streets::before {
+.CDB-IconFont-rArrowLight::before {
  content: '\E051';
 }


-.CDB-IconFont-keys::before {
+.CDB-IconFont-share::before {
  content: '\E052';
 }


-.CDB-IconFont-facebookSquare::before {
+.CDB-IconFont-linkedin::before {
  content: '\E053';
 }


-.CDB-IconFont-fullscreen::before {
+.CDB-IconFont-calendarBlank::before {
  content: '\E054';
 }


-.CDB-IconFont-rArrowLight::before {
+.CDB-IconFont-creativeCommons::before {
  content: '\E055';
 }


-.CDB-IconFont-share::before {
+.CDB-IconFont-bubble::before {
  content: '\E056';
 }


-.CDB-IconFont-linkedin::before {
+.CDB-IconFont-bars::before {
  content: '\E057';
 }


-.CDB-IconFont-calendarBlank::before {
+.CDB-IconFont-arrowMenuLight::before {
  content: '\E058';
 }


-.CDB-IconFont-creativeCommons::before {
+.CDB-IconFont-tieFighter::before {
  content: '\E059';
 }


-.CDB-IconFont-bubble::before {
+.CDB-IconFont-ray::before {
  content: '\E05A';
 }


-.CDB-IconFont-bars::before {
+.CDB-IconFont-markup::before {
  content: '\E05B';
 }


-.CDB-IconFont-arrowMenuLight::before {
+.CDB-IconFont-table::before {
  content: '\E05C';
 }


-.CDB-IconFont-tieFighter::before {
+.CDB-IconFont-airlock::before {
  content: '\E05D';
 }


-.CDB-IconFont-ray::before {
+.CDB-IconFont-pin::before {
  content: '\E05E';
 }


-.CDB-IconFont-markup::before {
+.CDB-IconFont-attache::before {
  content: '\E05F';
 }


-.CDB-IconFont-table::before {
+.CDB-IconFont-download::before {
  content: '\E060';
 }


-.CDB-IconFont-airlock::before {
+.CDB-IconFont-group::before {
  content: '\E061';
 }


-.CDB-IconFont-pin::before {
+.CDB-IconFont-dashboard::before {
  content: '\E062';
 }


-.CDB-IconFont-attache::before {
+.CDB-IconFont-spinner::before {
  content: '\E063';
 }


-.CDB-IconFont-download::before {
+.CDB-IconFont-mapsearch::before {
  content: '\E064';
 }


-.CDB-IconFont-group::before {
+.CDB-IconFont-rArrow::before {
  content: '\E065';
 }
-
-
-.CDB-IconFont-dashboard::before {
-  content: '\E066';
-}
-
-
-.CDB-IconFont-spinner::before {
-  content: '\E067';
-}
-
-
-.CDB-IconFont-mapsearch::before {
-  content: '\E068';
-}
-
-
-.CDB-IconFont-rArrow::before {
-  content: '\E069';
-}
--- a/src/scss/cdb-utilities/defaults.css.scss
+++ b/src/scss/cdb-utilities/defaults.css.scss
@@ -3,10 +3,6 @@

@import '../cdb-variables/colors';

-body {
-  color: $cMainText;
-}
-
 a {
  color: $cBlue;
  text-decoration: none;
--- a/src/scss/cdb-utilities/fonts.scss
+++ b/src/scss/cdb-utilities/fonts.scss
@@ -6,20 +6,20 @@
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
-  src: local('Open Sans Light'), local('OpenSans-Light'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'),
-       url('//themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTeY5mlVXtdNkpsMpKkrDXP4.woff') format('woff');
+  src: local('Open Sans Light'), local('OpenSans-Light'), url('themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'),
+       url('themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTeY5mlVXtdNkpsMpKkrDXP4.woff') format('woff');
 }
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
-  src: local('Open Sans'), local('OpenSans'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'),
-       url('//themes.googleusercontent.com/static/fonts/opensans/v8/u-WUoqrET9fUeobQW7jkRbO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
+  src: local('Open Sans'), local('OpenSans'), url('themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'),
+       url('themes.googleusercontent.com/static/fonts/opensans/v8/u-WUoqrET9fUeobQW7jkRbO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
 }
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
-  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'),
-       url('//themes.googleusercontent.com/static/fonts/opensans/v8/MTP_ySUJH_bn48VBG8sNSuY5mlVXtdNkpsMpKkrDXP4.woff') format('woff');
+  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'),
+       url('themes.googleusercontent.com/static/fonts/opensans/v8/MTP_ySUJH_bn48VBG8sNSuY5mlVXtdNkpsMpKkrDXP4.woff') format('woff');
 }
--- a/src/scss/cdb-utilities/helpers.scss
+++ b/src/scss/cdb-utilities/helpers.scss
@@ -2,9 +2,7 @@
 // ----------------------------------------------

@import './mixins';
-@import '../cdb-variables/colors';

-/* Margins */
 .u-tSpace {
  margin-top: 4px;
 }
@@ -26,49 +24,19 @@
 .u-rSpace--xl {
  margin-right: 12px;
 }
-.u-bSpace {
-  margin-bottom: 4px;
-}
-.u-bSpace--m {
-  margin-bottom: 8px;
-}
-.u-bSpace--xl {
-  margin-bottom: 12px;
-}
 .u-lSpace {
  margin-left: 4px;
 }
 .u-lSpace--xl {
  margin-left: 12px;
 }
-
-.u-ellipsis {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
+.u-bSpace {
+  margin-bottom: 4px;
+}
+.u-bSpace--m {
+  margin-bottom: 8px;
 }

-// Colors
-// Main Text Color is default color 
-// ----------------------------------------------
-
-.u-actionTextColor {
-  color: $cBlue;
-}
-.u-mainTextColor {
-  color: $cMainText;
-}
-.u-secondaryTextColor {
-  color: $cSecondaryText;
-}
-.u-altTextColor {
-  color: $cAltText;
-}
-.u-hintTextColor {
-  color: $cHintText;
-}
-
-/* Displays */
 .u-iBlock {
  @include inline-block();
 }
@@ -79,12 +47,6 @@
  display: none !important;
 }

-/* Decoration */
-.u-upperCase {
-  text-transform: uppercase;
-}
-
-/* Media queries*/
@include media-query-mobile() {
  .u-showDesktop {
    display: none !important;
--- a/src/scss/cdb-variables/_colors.scss
+++ b/src/scss/cdb-variables/_colors.scss
@@ -5,7 +5,7 @@
 $cBlue: #3AA9E3;
 $cBlack: #000;
 $cWhite: #FFF;
-$cMainBg: #2E3C43;
+$cMainDark: #2E3C43;

 //Structure
 $cSecondaryDark: #282C2F;
@@ -18,10 +18,9 @@ $cMainLine: #DDD;
 $cSecondaryLine: #EEE;

 //Typography
-$cMainText: #2E3C43;
-$cSecondaryText: #636D72;
-$cAltText: #979EA1;
-$cHintText: #CBCED0;
+$cTypo2: #636D72;
+$cTypo3: #979EA1;
+$cTypo4: #CBCED0;

 //Others
 $cHighlight: #9DE0AD;
--- a/src/scss/cdb-variables/_sizes.scss
+++ b/src/scss/cdb-variables/_sizes.scss
@@ -7,7 +7,6 @@ $mobileLayout: 280px;

 //Base
 $baseSize: 8px;
-$halfBaseSize: $baseSize / 2;

 // Margins
 $sMargin-section: 24px; // To separate main section
Author	SHA1	Message	Date
saleiva	87994f046e	Revert "Adding empty area so it's easier to reach." This reverts commit `64f04b3bc5`.	2016-02-04 20:08:09 +01:00
saleiva	64f04b3bc5	Adding empty area so it's easier to reach. @piensaenpixel I’m not sure this would be the best way to do it.	2016-02-04 19:59:11 +01:00