Revert "Update carto assets"

Update carto assets

.travis.yml

@@ -0,0 +1,18 @@
+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

README.md

@@ -4,8 +4,10 @@
 
 ### Installation
 As easy as:
-- ```npm install```
+- ```npm install --global grunt-cli``` [Grunt installation](http://gruntjs.com/getting-started)
+- ```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```
 
 ### Build
 If you want to use any of the CartoAssets components, after the installation just run:
@@ -39,6 +41,6 @@ Just run this command:
 
 ### Browser support
 
-![Chrome](https://raw.github.com/alrra/browser-logos/master/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/firefox/firefox_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/internet-explorer/internet-explorer_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/safari/safari_48x48.png)
+![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+ ✔ | 10+ ✔ | 31+ ✔ | 8+ ✔ |
+31+ ✔ | 38+ ✔ | 11+ ✔ | 31+ ✔ | 8+ ✔ |

icon-font/svgs/icon-font_104_Edition.svg

@@ -0,0 +1,15 @@
+<?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>

icon-font/svgs/icon-font_105_View.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="500px" height="500px" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.8.1 (29687) - 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">
+        <g id="Artboard-1" transform="translate(-9000.000000, -10001.000000)" fill="#000000">
+            <g id="icon-font_105_View" transform="translate(9000.000000, 10001.000000)">
+                <path d="M471.196067,279.388706 C468.659287,277.229701 466.450984,274.924387 463.701023,271.840781 C461.732497,269.633419 459.572474,267.098603 456.291285,263.177454 C456.234848,263.11001 449.592637,255.148769 447.409623,252.549977 C428.736548,230.320422 412.662967,212.746142 394.043132,195.280662 C344.775461,149.067386 296.239067,122.750167 250.99304,122.750167 C202.046004,122.750167 150.507322,148.074304 102.417295,190.874005 C83.9404874,207.318201 67.2191013,225.348227 54.2710956,242.038469 C49.1796636,248.601428 45.0628096,254.478581 42.4195884,258.812878 C41.546218,260.245013 41.0017054,261.236856 40.8804115,261.498373 C42.4533613,258.106995 43.4872396,254.89797 43.4872396,247.833667 C43.4872396,240.769365 42.4533613,237.560339 40.8804115,234.168962 C41.0017054,234.430479 41.546218,235.422322 42.4195884,236.854456 C45.0628096,241.188754 49.1796636,247.065906 54.2710956,253.628865 C67.2191013,270.319107 83.9404874,288.349133 102.417295,304.79333 C150.507322,347.593031 202.046004,372.917168 250.99304,372.917168 C296.239067,372.917168 344.775461,346.599949 394.043132,300.386673 C412.662967,282.921192 428.736548,265.346913 447.409623,243.117358 C449.592637,240.518566 456.234848,232.557325 456.291285,232.48988 C459.572474,228.568732 461.732497,226.033916 463.701023,223.826554 C466.450984,220.742947 468.659287,218.437634 471.196067,216.278628 C489.585469,237.69567 500,251.756082 500,247.833667 C500,243.911252 489.585468,257.971665 471.196067,279.388706 L471.196067,279.388706 Z M471.11251,278.324435 L471.11251,278.324435 C429.638743,326.768781 346.187297,414.667335 249.997012,414.667335 C112.474265,414.667335 0.990051674,260.667026 0.990051674,247.833667 C0.990051674,235.000308 112.474265,81 249.997012,81 C346.187297,81 429.638743,168.898554 471.11251,217.3429 C467.601977,220.514627 464.627661,224.296843 462.356919,228.549318 C458.659304,235.473933 457.502812,241.748232 457.502812,247.833667 C457.502812,253.919103 458.659304,260.193402 462.356919,267.118017 C464.627661,271.370492 467.601977,275.152708 471.11251,278.324435 L471.11251,278.324435 Z" id="Oval-225"></path>
+                <path d="M210.754843,247.833667 C210.754843,224.834455 229.482775,206.125251 252.50501,206.125251 C275.527245,206.125251 294.255177,224.834455 294.255177,247.833667 C294.255177,270.83288 275.527245,289.542084 252.50501,289.542084 C229.482775,289.542084 210.754843,270.83288 210.754843,247.833667 Z" id="Path"></path>
+            </g>
+        </g>
+    </g>
+</svg>

icon-font/svgs/icon-font_106_Odyssey.svg

@@ -0,0 +1,15 @@
+<?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>

icon-font/svgs/icon-font_107_Settings.svg

@@ -0,0 +1,17 @@
+<?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">
+    <!-- Generator: Sketch 3.7.2 (28276) - 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">
+        <g id="Artboard-1" transform="translate(-1000.000000, -11042.000000)" fill="#191919">
+            <g id="icon-font_107_Settings" transform="translate(1000.000000, 11042.000000)">
+                <path d="M44.1211802,292 L0,292 L0,334 L44.1211802,334 C42.7304327,327.217347 42,320.193974 42,313 C42,305.806026 42.7304327,298.782653 44.1211802,292 Z M247.87882,292 L500,292 L500,334 L247.87882,334 C249.269567,327.217347 250,320.193974 250,313 C250,305.806026 249.269567,298.782653 247.87882,292 Z" id="Combined-Shape"></path>
+                <path d="M251.921266,84 L0,84 L0,126 L252.331378,126 C250.804124,118.908475 250,111.548144 250,104 C250,97.1589618 250.660521,90.4721964 251.921266,84 Z M456.078734,84 L500,84 L500,126 L455.668622,126 C457.195876,118.908475 458,111.548144 458,104 C458,97.1589618 457.339479,90.4721964 456.078734,84 Z" id="Combined-Shape"></path>
+                <path d="M146,375 L146,375 C180.241654,375 208,347.241654 208,313 C208,278.758346 180.241654,251 146,251 C111.758346,251 84,278.758346 84,313 C84,347.241654 111.758346,375 146,375 L146,375 Z M42,313 C42,255.562386 88.562386,209 146,209 C203.437614,209 250,255.562386 250,313 C250,370.437614 203.437614,417 146,417 C88.562386,417 42,370.437614 42,313 Z" id="Oval-18-Copy"></path>
+                <path d="M354,166 L354,166 C388.241654,166 416,138.241654 416,104 C416,69.7583455 388.241654,42 354,42 C319.758346,42 292,69.7583455 292,104 C292,138.241654 319.758346,166 354,166 L354,166 Z M354,208 L354,208 C296.562386,208 250,161.437614 250,104 C250,46.562386 296.562386,0 354,0 C411.437614,0 458,46.562386 458,104 C458,161.437614 411.437614,208 354,208 L354,208 Z" id="Oval-18"></path>
+            </g>
+        </g>
+    </g>
+</svg>

icon-font/svgs/icon-font_108_downloadCircle.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="500px" height="500px" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-font_108_downloadCircle</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-1" transform="translate(-3000.000000, -11000.000000)" fill="#000000">
+            <path d="M3250,11500 C3388.07119,11500 3500,11388.0712 3500,11250 C3500,11111.9288 3388.07119,11000 3250,11000 C3111.92881,11000 3000,11111.9288 3000,11250 C3000,11388.0712 3111.92881,11500 3250,11500 Z M3281.25,11281.25 L3281.25,11125 L3218.75,11125 L3218.75,11281.25 L3281.25,11281.25 Z M3359.375,11218.75 L3281.25,11281.25 L3218.75,11281.25 L3140.625,11218.75 L3093.75,11265.625 L3248.95833,11390.625 L3406.25,11265.625 L3359.375,11218.75 Z" id="icon-font_108_downloadCircle"></path>
+        </g>
+    </g>
+</svg>

icon-font/svgs/icon-font_108_pencilMenu.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="494px" height="494px" viewBox="0 0 494 494" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-font_108_pencilMenu</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-1" transform="translate(-2003.000000, -11006.000000)" fill="#191919">
+            <g id="icon-font_108_pencilMenu" transform="translate(2003.000000, 11006.000000)">
+                <path d="M323.090682,108.939942 C257.222132,174.806304 158.72578,273.299383 93.4363246,338.586669 L155.458773,401.061862 C190.204984,366.568734 308.712947,247.832316 385.656409,170.703144 L323.090682,108.939942 Z M348.301168,83.730294 C375.156655,56.8756991 392.289661,39.7432621 392.289661,39.7432621 C401.584882,30.44835 416.739508,30.4483503 426.015484,39.7359097 L454.364101,68.0835877 C463.643904,77.3749836 463.643904,92.5108081 454.349418,101.828817 C454.349418,101.828817 432.037175,124.20696 399.408182,156.917572 L409.974134,146.225397 L348.301168,83.730294 Z M120.376399,419.162863 C89.6196336,429.414771 53.3411467,441.507191 53.3411467,441.507191 C53.3411467,441.507191 67.9518573,395.215969 76.7414611,368.05883 L124.185037,417.893361 Z M0.341146679,493.658335 L31.1315631,483.395211 L158.667272,440.884748 L162.301535,439.673367 L165.010391,436.964601 L476.764346,125.221007 C498.712109,103.217717 498.712109,67.5653877 476.771694,45.5975746 L448.423077,17.2498966 C426.478835,-4.72175335 390.763554,-4.72175405 368.791174,17.2498963 L57.0372198,328.993492 L54.3282847,331.702337 L53.1167958,335.336683 L10.604893,462.868126 L0.341146679,493.658335 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>

icon-font/svgs/icon-font_109_Mobile.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="292px" height="500px" viewBox="0 0 292 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-font_109_Mobile</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-1" transform="translate(-4113.000000, -11000.000000)" fill="#000000">
+            <g id="icon-font_109_Mobile" transform="translate(4113.000000, 11000.000000)">
+                <g id="Outline_Icons">
+                    <g id="Group">
+                        <path d="M239.583333,0 L52.0833333,0 C23.375,0 0,23.3541667 0,52.0833333 L0,447.916667 C0,476.645833 23.375,500 52.0833333,500 L239.583333,500 C268.291667,500 291.666667,476.645833 291.666667,447.916667 L291.666667,52.0833333 C291.666667,23.3541667 268.3125,0 239.583333,0 L239.583333,0 Z M20.8333333,104.166667 L270.833333,104.166667 L270.833333,395.833333 L20.8333333,395.833333 L20.8333333,104.166667 L20.8333333,104.166667 Z M52.0833333,20.8333333 L239.583333,20.8333333 C256.833333,20.8333333 270.833333,34.8541667 270.833333,52.0833333 L270.833333,83.3333333 L20.8333333,83.3333333 L20.8333333,52.0833333 C20.8333333,34.8541667 34.8541667,20.8333333 52.0833333,20.8333333 L52.0833333,20.8333333 Z M239.583333,479.166667 L52.0833333,479.166667 C34.8541667,479.166667 20.8333333,465.145833 20.8333333,447.916667 L20.8333333,416.666667 L270.833333,416.666667 L270.833333,447.916667 C270.833333,465.145833 256.833333,479.166667 239.583333,479.166667 L239.583333,479.166667 Z" id="Shape"></path>
+                        <path d="M197.916667,437.5 L93.75,437.5 C88,437.5 83.3333333,442.166667 83.3333333,447.916667 C83.3333333,453.666667 88,458.333333 93.75,458.333333 L197.916667,458.333333 C203.666667,458.333333 208.333333,453.666667 208.333333,447.916667 C208.333333,442.166667 203.6875,437.5 197.916667,437.5 L197.916667,437.5 Z" id="Shape"></path>
+                        <ellipse id="Oval" cx="145.833333" cy="52.0833333" rx="20.8333333" ry="20.8333333"></ellipse>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

icon-font/svgs/icon-font_110_Undo.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="500px" height="375px" viewBox="0 0 500 375" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.8.1 (29687) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-font_110_Undo</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-1" transform="translate(-5002.000000, -11066.000000)" fill="#000000">
+            <g id="icon-font_110_Undo" transform="translate(5002.000000, 11066.000000)">
+                <path d="M70.3382608,125.000009 L375,125.000009 C446.35637,125.000009 500,178.048274 500,249.999999 C500,321.951726 446.356369,375 375,375 L291.666667,375 C280.160734,375 270.833333,365.672599 270.833333,354.166667 C270.833333,342.660734 280.160734,333.333333 291.666667,333.333333 L375,333.333333 C423.447955,333.333333 458.333333,298.835126 458.333333,249.999999 C458.333333,201.164876 423.447958,166.666676 375,166.666676 L71.9074397,166.666676 L160.628913,256.166411 C168.72923,264.337784 168.671628,277.528596 160.500255,285.628913 C152.328882,293.72923 139.138071,293.671628 131.037754,285.500255 L6.03775366,159.403759 C-2.06278402,151.232164 -2.00492633,138.040917 6.16698066,129.940693 L131.166981,6.03718917 C139.338665,-2.06281376 152.529474,-2.00470423 160.629477,6.16698044 C168.72948,14.3386651 168.671371,27.5294742 160.499686,35.6294771 L70.3382608,125.000009 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>

icon-font/svgs/icon-font_111_Redo.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="500px" height="375px" viewBox="0 0 500 375" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.8.1 (29687) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-font_111_Redo</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-1" transform="translate(-5999.000000, -11062.000000)" fill="#000000">
+            <g id="icon-font_111_Redo" transform="translate(5999.000000, 11062.000000)">
+                <path d="M428.09256,166.666678 L125,166.666678 C76.5520421,166.666678 41.6666667,201.164877 41.6666667,250.000001 C41.6666667,298.835128 76.552045,333.333335 125,333.333335 L208.333333,333.333335 C219.839266,333.333335 229.166667,342.660736 229.166667,354.166668 C229.166667,365.672601 219.839266,375.000002 208.333333,375.000002 L125,375.000002 C53.6436311,375.000002 0,321.951728 0,250.000001 C0,178.048276 53.6436295,125.000011 125,125.000011 L429.661739,125.000011 L339.500314,35.6294786 C331.328629,27.5294756 331.27052,14.3386666 339.370523,6.16698191 C347.470526,-2.00470276 360.661335,-2.0628123 368.833019,6.03719063 L493.833019,129.940695 C502.004926,138.040918 502.062784,151.232165 493.962246,159.403761 L368.962246,285.500257 C360.861929,293.67163 347.671118,293.729232 339.499745,285.628914 C331.328372,277.528597 331.27077,264.337786 339.371087,256.166413 L428.09256,166.666678 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>

icon-font/svgs/icon-font_112_lArrowLight.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="228px" height="506px" viewBox="0 0 228 506" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.8.1 (29687) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-font_112_lArrowLight</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-1" transform="translate(-7135.000000, -10993.000000)" fill="#000000">
+            <g id="icon-font_112_lArrowLight" transform="translate(7135.000000, 10993.000000)">
+                <path d="M0.702946318,252.999054 C0.14636948,254.866962 0.510082487,256.968815 1.8564703,258.573378 L207.175738,503.263353 C209.301796,505.79709 213.090441,506.132254 215.629398,504.001816 L225.476162,495.7394 C228.017524,493.606944 228.346751,489.824218 226.216881,487.285938 L29.7056223,253.092939 L226.256808,18.8523582 C228.386677,16.3140783 228.057451,12.5313519 225.516088,10.398896 L215.669325,2.13648009 C213.130367,0.00604172265 209.341722,0.341206329 207.215665,2.87494253 L1.89639687,247.564918 C0.58358948,249.129461 0.205050151,251.166798 0.702946318,252.999054 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>

icon-font/svgs/icon-font_113_Hide.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="500px" height="500px" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.8.1 (29687) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-font_113_Hide</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-1" transform="translate(-8000.000000, -11000.000000)" fill="#000000">
+            <g id="icon-font_113_Hide" transform="translate(8000.000000, 11000.000000)">
+                <path d="M168.516382,396.527444 C194.193363,407.220614 221.780987,413.902897 250.502897,413.902897 C346.850106,413.902897 430.433697,326.17791 471.948787,277.869025 C493.317357,255.896446 498.973146,249.028031 498.973146,249.028031 C499.701368,248.186721 499.712307,246.818732 499.009367,245.974772 C499.009367,245.974772 492.362279,237.637656 471.948787,217.136769 C462.294003,205.902014 450.363963,192.535458 436.527263,178.636273 C436.424017,178.532561 436.320665,178.428819 436.217207,178.325049 L403.726892,204.807837 C421.268756,222.667154 441.521907,245.994982 441.521907,245.994982 C442.245864,246.823254 442.253276,248.172862 441.531978,248.999306 C441.531978,248.999306 412.348272,282.613362 393.702121,300.035106 C344.373268,346.124757 295.780717,372.369351 250.502897,372.369351 C235.900423,372.369351 221.065928,370.125273 206.159883,365.844312 L168.516372,396.52744 Z M62.9467973,325.173542 C24.4830048,288.609797 1.16779055,253.352643 1.16779055,247.502897 C1.16779055,234.702897 112.79892,81.1028969 250.502897,81.1028969 C280.140414,81.1028969 308.570175,89.4038635 334.939182,102.305011 C334.952385,102.31147 334.965587,102.317931 334.978788,102.324393 L298.872131,131.903038 C282.420027,125.815229 266.260719,122.636443 250.502897,122.636443 C201.51747,122.636443 149.921025,147.889782 101.771487,190.574805 C83.2680311,206.978295 66.5218737,224.964392 53.5539044,241.614973 C48.4535212,248.16375 48.4535212,246.842043 53.5539044,253.390821 C65.0065328,268.095739 79.4059564,283.842291 95.3601663,298.620445 L62.9467973,325.173542 Z" id="Combined-Shape"></path>
+                <path d="M237.22238,286.587358 C241.248856,287.895585 245.54343,288.602807 249.999996,288.602807 C272.869077,288.602807 291.472421,269.979698 291.472421,247.086322 C291.472421,245.524539 291.385842,243.98263 291.217237,242.465151 L484.071441,84.8732304 L500,71.8571172 L473.967774,40 L458.039215,53.0161132 L266.925615,209.185689 C261.754686,206.862624 256.025402,205.569836 249.999996,205.569836 C227.130916,205.569836 208.527571,224.192945 208.527571,247.086322 C208.527571,250.181229 208.867562,253.198095 209.512119,256.101457 L15.9285586,414.289375 L5.68434189e-14,427.305488 L26.0322263,459.162606 L41.9607849,446.146492 L237.22238,286.587358 L237.22238,286.587358 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "cartoassets",
   "description": "Share frontend assets between different CartoDB repositories",
-  "version": "0.1.24",
+  "version": "0.1.34",
   "homepage": "https://github.com/cartodb/CartoAssets",
   "author": {
     "name": "CartoDB",
@@ -29,6 +29,7 @@
     "node": ">= 0.8.0"
   },
   "devDependencies": {
+    "grunt": "~0.4.5",
     "jquery": "~2.2.0",
     "highlight.js": "~9.1.0",
     "markdown-styleguide-generator": "~2.0.4",
@@ -48,9 +49,6 @@
     "grunt-shell": "1.1.2",
     "load-grunt-tasks": "*"
   },
-  "peerDependencies": {
-    "grunt": "~0.4.5"
-  },
   "keywords": [
     "library",
     "CartoDB",

src/scss/cdb-components/avatars.scss

@@ -7,16 +7,16 @@
 ```
 <ul class="CDB-AvatarList">
   <li class="CDB-AvatarList-item">
-    <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
+    <img src="https://www.drupal.org/files/issues/default-avatar.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
   </li>
   <li class="CDB-AvatarList-item">
-    <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
+    <img src="https://www.drupal.org/files/issues/default-avatar.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
   </li>
   <li class="CDB-AvatarList-item">
-    <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
+    <img src="https://www.drupal.org/files/issues/default-avatar.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
   </li>
   <li class="CDB-AvatarList-itemMore">
-    <button class="CDB-Text is-semibold CDB-Size-small">+ 16</button>
+    <button class="CDB-Text is-semibold CDB-Size-small u-secondaryTextColor">+ 16</button>
   </li>
 </ul>
 ```
@@ -44,7 +44,6 @@
   border-left: 2px solid $cWhite;
   border-radius: 50px;
   background: $cSecondaryLine;
-  color: $cTypo2;
 }
 
 .CDB-AvatarList-itemMedia {

src/scss/cdb-components/boxes.scss

@@ -2,11 +2,11 @@
 // ----------------------------------------------
 
 /* SG
-# Boxes/Box Dropdown
+# Boxes/Dropdown
 
 
 ```
-  <div class="CDB-Box-Modal">&nbsp;</div>
+  <div class="CDB-Box-modal">&nbsp;</div>
 ```
 */
 
@@ -14,61 +14,29 @@
 @import '../cdb-variables/sizes';
 @import '../cdb-variables/colors';
 
-.CDB-Box-Modal {
+.CDB-Box-modal {
+  min-width: 160px;
   border: 1px solid $cMainLine;
   border-radius: 4px;
   background: $cWhite;
   box-shadow: 0  $baseSize  $baseSize * 2 0 rgba(0, 0, 0, 0.16);
+  box-sizing: border-box;
 }
 
-/* SG
-# Boxes/Info Boxes
-
-
-```
-<div class="CDB-InfoBox">
-  <h2 class="CDB-Text is-semibold CDB-Size-small u-bSpace--m">ABOUT PREVIEW MODE</h2>
-  <p class="CDB-Text CDB-Size-medium u-bSpace--m">He's a queer man, Captain Ahab—so some thinkbut a good one. Oh, thou'lt like him well enough; no fear, no fear</p>
-  <p class="CDB-Text is-semibold CDB-Size-small"><a href="#">CLOSE</a></p>
-</div>
-<br/>
-<br/>
-<br/>
-<div class="CDB-InfoBox is-alert">
-  <h2 class="CDB-Text is-semibold CDB-Size-small u-bSpace--m">ABOUT PREVIEW MODE</h2>
-  <p class="CDB-Text CDB-Size-medium u-bSpace--m">He's a queer man, Captain Ahab—so some thinkbut a good one. Oh, thou'lt like him well enough; no fear, no fear</p>
-  <ul class="CDB-InfoBox-footer">
-    <li class="CDB-InfoBox-footerItem">
-      <p class="CDB-Text is-semibold CDB-Size-small"><a href="#">CLOSE</a></p>
-    </li>
-    <li class="CDB-InfoBox-footerItem CDB-InfoBox-footerItem--right">
-      <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>
-    </li>
-  </ul>
-</div>
-```
-*/
-
-.CDB-InfoBox {
-  padding: 12px 16px;
-  border-radius: 4px;
-  background: $cThirdBackground;
-  &.is-alert {
-    background: rgba($cHighlightYellow, 0.6);
-  }
+.CDB-Box-modalHeader {
+  background: $cSecondaryBackground;
 }
-
-.CDB-InfoBox-footer {
+.CDB-Box-modalHeaderItem {
   @include display-flex();
-  @include align-items(center);
+  padding: $baseSize + 4 $baseSize * 2;
+  border-bottom: 1px solid $cMainLine;
 }
-
-.CDB-InfoBox-footerItem {
-  @include flex(1);
+.CDB-Box-modalHeaderItem--block {
+  display: block;
 }
-
-.CDB-InfoBox-footerItem--right {
-  text-align: right;
+.CDB-Box-modalHeaderItem--paddingHorizontal {
+  padding: 0 $baseSize * 2;
+}
+.CDB-Box-modalHeaderItem--paddingVertical {
+  padding: $baseSize + 4 0;
 }

src/scss/cdb-components/buttons.scss

@@ -8,14 +8,24 @@ Layout Component:
 [CDB-Button][CDB-Button--primary | CDB-Button--secondary]
 
 ```
-<button class="CDB-Button CDB-Button--primary">
+
+<button class="CDB-Button CDB-Button--primary CDB-Button--big">
   <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
 </button>
 
-<button class="CDB-Button CDB-Button--primary is-disabled">
+<button class="CDB-Button CDB-Button--primary 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--primary">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</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--primary CDB-Button--small">
   <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
 </button>
@@ -32,15 +42,91 @@ Layout Component:
 <br/>
 <br/>
 
+<button class="CDB-Button CDB-Button--alert CDB-Button--big">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--alert 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--alert">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--alert is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--alert CDB-Button--small">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--alert CDB-Button--small is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--alert CDB-Button--icon">
+  <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
+</button>
+
+
+<br/>
+<br/>
+<br/>
+
+<button class="CDB-Button CDB-Button--error CDB-Button--big">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--error 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--error">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--error is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--error CDB-Button--small">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--error CDB-Button--small is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--error CDB-Button--icon">
+  <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
+</button>
+
+<br/>
+<br/>
+<br/>
+
 <div style="background: #2E3C43; padding: 20px;">
-  <button class="CDB-Button CDB-Button--primary">
+
+  <button class="CDB-Button CDB-Button--primary CDB-Button--big">
     <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
   </button>
 
-  <button class="CDB-Button CDB-Button--primary is-disabled">
+  <button class="CDB-Button CDB-Button--primary 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--primary">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+  </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--primary CDB-Button--small">
     <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
   </button>
@@ -64,9 +150,12 @@ Layout Component:
 
 
 .CDB-Button {
-  padding: $baseSize $baseSize + 12;
+  @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;
@@ -78,8 +167,13 @@ Layout Component:
 }
 
 .CDB-Button--small {
-  padding: $baseSize - 3 $baseSize + 4;
+  padding: $baseSize / 2 $baseSize + 4;
 }
+
+.CDB-Button--big {
+  padding: $baseSize + 4 $baseSize + 12;
+}
+
 .CDB-Button--icon {
   padding: 7px 9px;
 }
@@ -105,6 +199,50 @@ Layout Component:
   }
 }
 
+.CDB-Button--alert {
+  background: $cAlert;
+  color: $cWhite;
+
+  &:hover {
+    background: darken($cAlert, 8%);
+  }
+  &:active {
+    background: darken($cAlert, 16%);
+  }
+
+  &.is-disabled {
+    &:hover {
+      background: $cAlert;
+    }
+    &:active {
+      background: $cAlert;
+    }
+  }
+}
+
+
+.CDB-Button--error,
+.CDB-Button--negative {
+  background: $cError;
+  color: $cWhite;
+
+  &:hover {
+    background: darken($cError, 8%);
+  }
+  &:active {
+    background: darken($cError, 16%);
+  }
+
+  &.is-disabled {
+    &:hover {
+      background: $cError;
+    }
+    &:active {
+      background: $cError;
+    }
+  }
+}
+
 
 
 // Buttons styles
@@ -114,6 +252,14 @@ Layout Component:
 # Buttons/Secondary
 
 ```
+<button class="CDB-Button CDB-Button--secondary CDB-Button--big">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+</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--secondary">
   <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
 </button>
@@ -135,10 +281,26 @@ Layout Component:
 <br/>
 
 <div style="background: #2E3C43; padding: 20px;">
+  <button class="CDB-Button CDB-Button--secondary CDB-Button--big">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+  </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--secondary">
     <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
   </button>
 
+  <button class="CDB-Button CDB-Button--secondary CDB-Button--white">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+  </button>
+
+  <button class="CDB-Button CDB-Button--secondary CDB-Button--white is-disabled">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+  </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>
@@ -170,10 +332,35 @@ Layout Component:
 
   &.is-disabled {
     &:hover {
-      background: $cWhite;
+      background: transparent;
     }
     &:active {
-      background: $cWhite;
+      background: transparent;
+    }
+  }
+}
+
+
+.CDB-Button--white {
+  border: 1px solid $cWhite;
+  color: $cWhite;
+
+  &:hover {
+    background: rgba($cWhite, 0.08);
+  }
+  &:active {
+    background: rgba($cMainBg, 0.08);
+    color: $cWhite;
+  }
+
+  &.is-disabled {
+    @include opacity(0.24);
+    &:hover {
+      background: transparent;
+    }
+    &:active {
+      background: transparent;
+      color: $cWhite;
     }
   }
 }

src/scss/cdb-components/colors.scss

@@ -6,37 +6,31 @@
 
 
 ```
-<div class="box Color-MainDark"></div>
-<div class="box Color-SecondaryDark"></div>
-<div class="box Color-Blue"></div>
-<div class="box Color-White"></div>
-<div class="box Color-SecondaryBackground"></div>
-<div class="box Color-ThirdBackground"></div>
+<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-MainDark"></div>
+<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-SecondaryDark"></div>
+<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-Blue"></div>
+<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';
 
-.box {
-  width: 120px;
-  height: 64px;
-  display: inline-block;
-  margin: 0 24px 24px 0;
-}
 
 .Color-Blue {
   background: $cBlue;
 }
 .Color-White {
+  border: 1px solid #E5E5E5;
   background: $cWhite;
-  border: 1px solid #e5e5e5;
 }
 .Color-Dark {
   background: $cBlack;
 }
 
 .Color-MainDark {
-  background: $cMainDark;
+  background: $cMainBg;
 }
 .Color-SecondaryDark {
   background: $cSecondaryDark;
@@ -89,13 +83,13 @@
 
 
 .Color-Type02 {
-  background: $cTypo2;
+  background: $cSecondaryText;
 }
 .Color-Type03 {
-  background: $cTypo3;
+  background: $cAltText;
 }
 .Color-Type04 {
-  background: $cTypo4;
+  background: $cHintText;
 }
 
 

src/scss/cdb-components/forms/checkbox.scss

@@ -14,7 +14,7 @@
   <span class="u-iBlock CDB-Checkbox-face"></span>
 </div>
 <div class="u-iBlock">
-  <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Car" disabled>
+  <input class="CDB-Checkbox" type="checkbox" name="vehicle2" value="Car" disabled>
   <span class="u-iBlock CDB-Checkbox-face"></span>
 </div>
 ```
@@ -22,6 +22,8 @@
 
 @import '../../cdb-variables/sizes';
 @import '../../cdb-variables/colors';
+@import '../../cdb-utilities/mixins';
+
 
 .CDB-Checkbox {
   position: absolute;
@@ -41,6 +43,8 @@
   background: $cWhite;
   cursor: pointer;
   box-sizing: border-box;
+  z-index: 2;
+  pointer-events: none;
 
   &::before,
   &::after {
@@ -49,7 +53,7 @@
     bottom: 3px;
     width: 2px;
     border-radius: 1px;
-    background: $cSecondaryLine;
+    background: $cWhite;
     content: '';
   }
 
@@ -67,6 +71,7 @@
 }
 
 .CDB-Checkbox:checked + .CDB-Checkbox-face {
+  @include transition(background, 300ms);
   border: 1px solid $cBlue;
   background: $cBlue;
 
@@ -76,25 +81,35 @@
   }
 }
 
-.CDB-Checkbox:disabled + .CDB-Checkbox-face {
-  border: 1px solid $cSecondaryLine;
-  background: $cThirdBackground;
-
+.CDB-Checkbox:checked:hover + .CDB-Checkbox-face {
+  border: 1px solid $cBlue;
   &::before,
   &::after {
     background: $cWhite;
   }
 }
 
-.CDB-Checkbox:disabled:hover + .CDB-Checkbox-face {
-  border: 1px solid $cSecondaryLine;
-}
-
-.CDB-Checkbox:checked:hover + .CDB-Checkbox-face,
-.CDB-Checkbox:focus + .CDB-Checkbox-face {
-  border: 1px solid $cBlue;
-}
-
 .CDB-Checkbox:hover + .CDB-Checkbox-face {
   border: 1px solid $cHoverLine;
+  &::before,
+  &::after {
+    background: $cHoverLine;
+  }
 }
+.CDB-Checkbox:active + .CDB-Checkbox-face {
+  border: 1px solid $cBlue;
+  &::before,
+  &::after {
+    background: $cBlue;
+  }
+}
+
+.CDB-Checkbox:disabled + .CDB-Checkbox-face {
+  border: 1px solid $cSecondaryLine;
+  background: $cThirdBackground;
+  &::before,
+  &::after {
+    opacity: 0;
+  }
+}
+

src/scss/cdb-components/forms/dropdowns.scss

@@ -0,0 +1,174 @@
+// 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>
+
+
+  <div class="CDB-Box-Modal">
+    <div class="CDB-Box-ModalHeader">
+      <nav class="CDB-NavMenu">
+        <ul class="CDB-NavMenu-Inner CDB-NavMenu-Inner--no-margin CDB-NavMenu-Inner--is-dropdown CDB-Text is-semibold CDB-Size-medium">
+          <li class="CDB-NavMenu-Item">
+            <button class="CDB-NavMenu-Link">SOLID</button>
+          </li>
+          <li class="CDB-NavMenu-Item is-selected">
+            <button class="CDB-NavMenu-Link">BY VALUE</button>
+          </li>
+        </ul>
+      </nav>
+      <div class="CDB-Box-ModalHeaderItem">
+        <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputTextPlain CDB-Text">
+        <button class="u-lSpace--xl">
+          <div class="CDB-Shape">
+            <div class="CDB-Shape-magnify is-blue is-small"></div>
+          </div>
+        </button>
+      </div>
+    </div>
+    <br/>
+    <br/>
+    <br/>
+    <br/>
+  </div>
+
+  <br/>
+  <br/>
+  <br/>
+  <br/>
+
+  <div class="CDB-Box-Modal">
+    <div class="CDB-Box-modalHeader">
+      <nav class="CDB-NavMenu">
+        <ul class="CDB-NavMenu-Inner CDB-NavMenu-inner--no-margin CDB-NavMenu-inner--is-dropdown CDB-Text is-semibold CDB-Size-medium">
+          <li class="CDB-NavMenu-Item">
+            <button class="CDB-NavMenu-Link">SOLID</button>
+          </li>
+          <li class="CDB-NavMenu-Item is-selected">
+            <button class="CDB-NavMenu-Link">BY VALUE</button>
+          </li>
+        </ul>
+      </nav>
+      <div class="CDB-Box-modalHeaderItem">
+        <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputTextPlain CDB-Text">
+        <button class="u-lSpace--xl">
+          <div class="CDB-Shape">
+            <div class="CDB-Shape-close is-blue is-large"></div>
+          </div>
+        </button>
+      </div>
+    </div>
+    <br/>
+    <br/>
+    <br/>
+    <br/>
+  </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;
+  }
+}

src/scss/cdb-components/forms/inputs.scss

@@ -13,28 +13,60 @@
 
 @import '../../cdb-variables/sizes';
 @import '../../cdb-variables/colors';
+@import '../../cdb-utilities/helpers';
 
 .CDB-InputText {
   width: 100%;
-  padding: 7px 8px 6px;
+  min-height: 32px;
+  padding: 7px 8px;
   border: 1px solid $cMainLine;
   border-radius: $baseSize / 2;
   font-size: $sFontSize-medium;
   line-height: $sLineHeight-medium;
+  box-sizing: border-box;
 
+  &.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 $cHoverLine;
   }
   &:focus {
     border: 1px solid $cBlue;
+    outline: none;
   }
-  &:disabled {
+  &:disabled,
+  &.is-disabled {
     border-color: $cSecondaryLine;
     background: $cThirdBackground;
+    cursor: default;
+  }
+  &.has-icon {
+    padding-right: $baseSize * 4;
   }
   &.has-error {
-    border: 1px solid rgba($cError, 0.48);
-    background: rgba($cError, 0.04);
-    color: $cError;
+    @include default-form-error-style();
   }
 }
+.CDB-InputTextPlain {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  font-size: $sFontSize-medium;
+  line-height: $sLineHeight-medium;
+  box-sizing: border-box;
+}
+
+.CDB-FieldError .CDB-InputText {
+  @include default-form-error-style();
+}

src/scss/cdb-components/forms/legends.scss

@@ -35,37 +35,70 @@
 <br/>
 <br/>
 
-<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">
+<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">
         <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-Text CDB-Size-medium">
+      <label class="u-iblock 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>
-</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>
+</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>
 
+<br/>
+<br/>
+<br/>
+
+<div class="CDB-Text CDB-Fieldset">
+  <p class="CDB-Legend CDB-Legend--big u-ellipsis CDB-Text is-semibold CDB-Size-small u-rSpace--m">
+    <input class="CDB-Checkbox" type="checkbox" name="field" value="Sport">
+    <span class="u-iBlock CDB-Checkbox-face u-rSpace--m"></span>
+    <label class="CDB-Text is-semibold CDB-Size-small u-rSpace--m">SPORT</label>
+  </p>
+  <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText">
+</div>
+
+<div class="u-tSpace-xl CDB-Text CDB-Fieldset">
+  <p class="CDB-Legend CDB-Legend--big u-ellipsis CDB-Text is-semibold CDB-Size-small u-rSpace--m">
+    <input class="CDB-Checkbox" type="checkbox" name="field" value="Travel">
+    <span class="u-iBlock CDB-Checkbox-face u-rSpace--m"></span>
+    <label class="CDB-Text is-semibold CDB-Size-small u-rSpace--m">TRAVEL</label>
+  </p>
+  <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText">
+</div>
 ```
 */
 
 @import '../../cdb-variables/sizes';
+@import '../../cdb-utilities/mixins';
 
 .CDB-Legend {
   width: $baseSize * 12;
 }
+
+.CDB-Legend--big {
+  width: ($baseSize * 24);
+}
+
+.CDB-Fieldset {
+  @include display-flex();
+  @include align-items(center);
+}
+.CDB-Fieldset-block {
+  width: 100%;
+}
+

src/scss/cdb-components/forms/option-input.scss

@@ -0,0 +1,178 @@
+// 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/>
+
+<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">
+      <button type="button" class="CDB-OptionInput-content">solid</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-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;
+
+  &::after {
+    width: 1px;
+    height: 100%;
+    margin-right: $baseSize;
+    background-color: $cSecondaryLine;
+    content: '';
+  }
+  &:last-child {
+    width: 100%;
+
+    &::after {
+      display: none;
+    }
+  }
+}
+.CDB-OptionInput-item--noSeparator::after {
+  content: '';
+}
+.CDB-OptionInput-content {
+  @include display-flex();
+  @include align-items(center);
+  height: 100%;
+  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;
+}

src/scss/cdb-components/forms/radio.scss

@@ -23,6 +23,8 @@
 
 @import '../../cdb-variables/sizes';
 @import '../../cdb-variables/colors';
+@import '../../cdb-utilities/mixins';
+
 
 .CDB-Radio {
   position: absolute;
@@ -53,12 +55,13 @@
     margin-top: -3px;
     margin-left: -3px;
     border-radius: 50%;
-    background: $cSecondaryLine;
+    background: $cWhite;
     content: '';
   }
 }
 
 .CDB-Radio:checked + .CDB-Radio-face {
+  @include transition(background, 300ms);
   border: 1px solid $cBlue;
   background: $cBlue;
 
@@ -72,7 +75,7 @@
   background: $cThirdBackground;
 
   &::before {
-    background: $cWhite;
+    opacity: 0;
   }
 }
 
@@ -82,9 +85,28 @@
 
 .CDB-Radio:hover + .CDB-Radio-face {
   border: 1px solid $cHoverLine;
+  &::before {
+    background: $cHoverLine;
+  }
 }
 
 .CDB-Radio:focus + .CDB-Radio-face,
 .CDB-Radio:checked:hover + .CDB-Radio-face {
   border: 1px solid $cBlue;
 }
+
+.CDB-Radio:checked:hover + .CDB-Radio-face {
+  &::before {
+    background: $cWhite;
+  }
+}
+
+.CDB-Radio:active + .CDB-Radio-face {
+  &::before {
+    background: $cBlue;
+  }
+}
+
+
+
+

src/scss/cdb-components/forms/selects.scss

@@ -17,9 +17,48 @@
     </ul>
   </div>
 </div>
+
+<br/>
+<br/>
+<br/>
+
+
+<div class="CDB-Select" style="height: 250px;">
+  <div class="CDB-InputText CDB-Text">DejaVu Sans</div>
+  <div class="CDB-Box-Modal CDB-SelectItem">
+    <ul class="CDB-Text CDB-Size-medium">
+      <li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Hide</a></li>
+      <li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Rename</a></li>
+      <li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Change source dataset…</a></li>
+      <li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Delete this layer…</a></li>
+    </ul>
+  </div>
+</div>
+
+<div class="CDB-InputText CDB-Text is-cursor is-disabled">DejaVu Sans</div>
+<br/>
+<div class="CDB-InputText CDB-Text is-cursor is-empty">DejaVu Sans</div>
+<br/>
+<div class="CDB-InputText CDB-Text is-cursor is-null">null</div>
+<br/>
+<div class="CDB-InputText CDB-Text is-cursor is-number">46,594</div>
+<br/>
+<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';
+@import '../../cdb-utilities/helpers';
+
 .CDB-Select {
   position: relative;
 }
@@ -28,3 +67,36 @@
   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;
+  box-sizing: border-box;
+
+  &:hover {
+    border: 1px solid $cHoverLine;
+  }
+  &:focus {
+    border: 1px solid $cBlue;
+    outline: none;
+  }
+  &:disabled {
+    border-color: $cSecondaryLine;
+    background: $cThirdBackground;
+  }
+  &.has-error {
+    @include default-form-error-style();
+  }
+}
+
+.CDB-FieldError .CDB-Select,
+.CDB-FieldError .CDB-SelectFake {
+  @include default-form-error-style();
+}

src/scss/cdb-components/forms/sliders.scss

@@ -1,143 +0,0 @@
-// Sliders styles
-// ----------------------------------------------
-
-/* SG
-# Forms/Sliders
-
-```
-<input type="range" min="100" max="500" step="50" value="300" class="CDB-Range"/>
-```
-*/
-
-@import '../../cdb-variables/sizes';
-@import '../../cdb-variables/colors';
-
-.CDB-Range {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  position: relative;
-  width: 100%;
-  margin: -4px 0 0;
-  padding: 0 6px;
-  border: 0;
-  background: transparent;
-  cursor: pointer;
-  overflow: hidden;
-  vertical-align: middle;
-
-  &:focus {
-    outline: 0;
-  }
-}
-
-.CDB-Range::-webkit-slider-runnable-track {
-  height: $baseSize / 4;
-  margin: $baseSize 0;
-  border-radius: $baseSize / 2;
-  background: $cMainLine;
-}
-
-.CDB-Range::-webkit-slider-thumb {
-  position: relative;
-  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 {
-    &::after {
-      cursor: pointer;
-    }
-  }
-
-  &:disabled {
-    &::before,
-    &::after {
-      opacity: 0.2;
-    }
-  }
-}
-
-.CDB-Range::-moz-range-track {
-  height: $baseSize / 4;
-  margin: $baseSize 0;
-  border: 0;
-  border-radius: $baseSize / 2;
-  outline: none;
-  background: $cMainLine;
-}
-
-.CDB-Range::-moz-range-thumb {
-  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;
-}
-
-.CDB-Range::-moz-range-progress {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: -3000px;
-  height: $baseSize / 4;
-  border-radius: $baseSize / 2;
-  background: $cBlue;
-  content: '';
-}
-
-.CDB-Range::-ms-track {
-  height: $baseSize / 4;
-  margin: $baseSize 0;
-  border: transparent;
-  border-radius: $baseSize / 2;
-  background: $cMainLine;
-  color: transparent;
-}
-
-.CDB-Range::-ms-thumb {
-  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;
-}

src/scss/cdb-components/forms/tabsForms.scss

@@ -0,0 +1,101 @@
+// Tabs Forms styles
+// ----------------------------------------------
+
+/* SG
+# Forms/TabsForms
+
+```
+<div class="CDB-TabsForms u-iBlock">
+  <ul class="CDB-TabsForms-inner">
+    <li class="CDB-TabsForms-item">
+      <button class="CDB-TabsForms-button">
+        <div class="CDB-Shape">
+          <ul class="CDB-Shape-paragraph is-left">
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
+            </li>
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
+            </li>
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
+            </li>
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
+            </li>
+          </ul>
+        </div>
+      </button>
+    </li>
+    <li class="CDB-TabsForms-item">
+      <button class="CDB-TabsForms-button">
+        <div class="CDB-Shape">
+          <ul class="CDB-Shape-paragraph is-center">
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
+            </li>
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
+            </li>
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
+            </li>
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
+            </li>
+          </ul>
+        </div>
+      </button>
+    </li>
+    <li class="CDB-TabsForms-item">
+      <button class="CDB-TabsForms-button">
+        <div class="CDB-Shape">
+          <ul class="CDB-Shape-paragraph is-right is-active">
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
+            </li>
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
+            </li>
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
+            </li>
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
+            </li>
+          </ul>
+        </div>
+      </button>
+    </li>
+  </ul>
+</div>
+```
+*/
+
+@import '../../cdb-utilities/mixins';
+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+
+
+.CDB-TabsForms {
+  border: 1px solid $cMainLine;
+  border-radius: 4px;
+}
+.CDB-TabsForms-inner {
+  @include display-flex();
+}
+.CDB-TabsForms-item {
+  border-left: 1px solid $cSecondaryLine;
+}
+.CDB-TabsForms-item:first-child {
+  border-left: 0;
+}
+.CDB-TabsForms-button {
+  padding: 7px 8px;
+}
+
+
+
+
+
+

src/scss/cdb-components/forms/textarea.scss

@@ -0,0 +1,47 @@
+// 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';
+@import '../../cdb-utilities/helpers';
+
+.CDB-Textarea {
+  width: 100%;
+  padding: 7px 8px 6px;
+  border: 1px solid $cMainLine;
+  border-radius: $baseSize / 2;
+  font-size: $sFontSize-medium;
+  line-height: $sLineHeight-medium;
+  box-sizing: border-box;
+
+  &:hover {
+    border: 1px solid $cHoverLine;
+  }
+  &:focus {
+    border: 1px solid $cBlue;
+    outline-color: transparent;
+    outline-style: none;
+  }
+  &:disabled,
+  &.is-disabled {
+    border-color: $cSecondaryLine;
+    background: $cThirdBackground;
+  }
+  &:has-error {
+    @include default-form-error-style();
+  }
+}
+.CDB-FieldError .CDB-Textarea,
+.CDB-Textarea.has-error {
+  @include default-form-error-style();
+}

src/scss/cdb-components/forms/toggle.scss

@@ -6,11 +6,24 @@
 
 
 ```
-<div class="CDB-Text CDB-Size-small is-semibold u-rSpace--xl">
-  <label class="u-iBlock">TOOLS</label>
-  <input class="CDB-Toggle u-iBlock" type="checkbox" name="analysis">
-  <span class="u-iBlock CDB-ToggleFace"></span>
-  <label class="u-iBlock">SQL</label>
+<div class="Toggle">
+  <div class="CDB-Text CDB-Size-small is-semibold u-rSpace--xl">
+    <label class="u-iBlock">TOOLS</label>
+    <input class="CDB-Toggle u-iBlock" type="checkbox" name="analysis">
+    <span class="u-iBlock CDB-ToggleFace"></span>
+    <label class="u-iBlock">SQL</label>
+  </div>
+</div>
+
+<br/>
+
+<div class="Toggle">
+  <div class="CDB-Text CDB-Size-small is-semibold is-disabled u-rSpace--xl">
+    <label class="u-iBlock">TOOLS</label>
+    <input class="CDB-Toggle u-iBlock" type="checkbox" name="analysis" disabled >
+    <span class="u-iBlock CDB-ToggleFace"></span>
+    <label class="u-iBlock">SQL</label>
+  </div>
 </div>
 ```
 */
@@ -33,7 +46,7 @@
     height: $baseSize * 2;
     margin: 0 2px;
     border-radius: 50px;
-    background: $cTypo4;
+    background: $cHintText;
 
     &::before {
       position: absolute;
@@ -49,7 +62,7 @@
   }
 
   &:checked + .CDB-ToggleFace {
-    background: $cMainDark;
+    background: $cHighlight;
 
     &::before {
       right: 2px;
@@ -57,3 +70,7 @@
     }
   }
 }
+
+.Toggle .is-disabled {
+  opacity: 0.24;
+}

src/scss/cdb-components/headers.scss

@@ -6,8 +6,8 @@
 
 ```
 <div class="CDB-HeaderInfo is-block">
-  <div class="CDB-HeaderInfo-Title u-bSpace">
-    <h2 class="CDB-HeaderInfo-TitleText CDB-Text CDB-Size-huge is-light">Name Map</h2>
+  <div class="CDB-HeaderInfo-title u-bSpace">
+    <h2 class="CDB-HeaderInfo-titleText CDB-Text CDB-Size-huge is-light">Name Map</h2>
     <div class="CDB-HeaderInfo-Actions">
       <a href="#">
           <div class="CDB-Shape">
@@ -21,12 +21,12 @@
     </div>
   </div>
   <ul class="CDB-HeaderInfo-List">
-    <li class="CDB-HeaderInfo-ListItem">
+    <li class="CDB-HeaderInfo-listItem">
       <button class="CDB-Tag is-public CDB-Text is-semibold CDB-Size-small u-iBlock">
         PUBLIC
       </button>
     </li>
-    <li class="CDB-HeaderInfo-ListItem">
+    <li class="CDB-HeaderInfo-listItem">
       <ul class="CDB-AvatarList u-iBlock">
         <li class="CDB-AvatarList-item">
           <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
@@ -42,28 +42,30 @@
         </li>
       </ul>
     </li>
-    <li class="CDB-HeaderInfo-ListItem">
-      <p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium u-iBlock">Published 8 days ago</p>
+    <li class="CDB-HeaderInfo-listItem">
+      <p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium u-iBlock u-altTextColor">Published 8 days ago</p>
     </li>
   </ul>
 </div>
+
 <br/>
 <br/>
 <br/>
+
 <div class="CDB-HeaderInfo">
-  <a href="#" class="u-rSpace--xl CDB-HeaderInfo-Back">
+  <button class="u-rSpace--xl CDB-HeaderInfo-back">
     <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
-  </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>
+  </button>
+  <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>
       <ul class="CDB-HeaderInfo-Actions">
-        <li class="CDB-HeaderInfo-ActionsItem">
+        <li class="CDB-HeaderInfo-actionsItem">
           <button class="CDB-Button CDB-Button--primary CDB-Button--icon">
             <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
           </button>
         </li>
-        <li class="CDB-HeaderInfo-ActionsItem">
+        <li class="CDB-HeaderInfo-actionsItem">
           <a href="#">
               <div class="CDB-Shape">
                 <div class="CDB-Shape-threePoints is-blue is-small">
@@ -85,18 +87,19 @@
     <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">
-  <a href="#" class="u-rSpace--xl CDB-HeaderInfo-Back">
+  <button class="u-rSpace--xl CDB-HeaderInfo-back">
     <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
-  </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>
-      <div class="CDB-HeaderInfo-Actions">
+  </button>
+  <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>
+      <div class="CDB-HeaderInfo-actions">
         <a href="#">
             <div class="CDB-Shape">
               <div class="CDB-Shape-threePoints is-blue is-small">
@@ -108,18 +111,19 @@
         </a>
       </div>
     </div>
-    <p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium">Positron by CartoDB</p>
+    <p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium u-altTextColor">Positron by CartoDB</p>
   </div>
 </div>
+
 <br/>
 <br/>
 <br/>
 
 <div class="CDB-HeaderInfo">
-  <a href="#" class="u-rSpace--xl CDB-HeaderInfo-Back">
+  <button class="u-rSpace--xl CDB-HeaderInfo-back">
     <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
-  </a>
-  <div class="CDB-HeaderInfo-Inner">
+  </button>
+  <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">
       <ul class="CDB-Shape-Dataset is-small is-grey">
@@ -130,10 +134,35 @@
     <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/>
 ```
 */
 
@@ -143,13 +172,13 @@
 
 .CDB-HeaderInfo {
   @include display-flex();
+  @include align-items(flex-start);
 
   &.is-block {
     display: block;
   }
 }
-
-.CDB-HeaderInfo-ListItem {
+.CDB-HeaderInfo-listItem {
   display: inline-block;
   margin-right: 8px;
   vertical-align: middle;
@@ -159,24 +188,17 @@
   }
 }
 
-.CDB-HeaderInfo-Text {
-  color: $cTypo3;
-}
-
-.CDB-HeaderInfo-Inner {
+.CDB-HeaderInfo-inner {
   @include flex(1);
 }
-
-.CDB-HeaderInfo-Back {
+.CDB-HeaderInfo-back {
   margin-top: 7px;
 }
-
-.CDB-HeaderInfo-Title {
+.CDB-HeaderInfo-title {
   @include display-flex();
   @include align-items(center);
 }
-
-.CDB-HeaderInfo-TitleText {
+.CDB-HeaderInfo-titleText {
   @include flex(1);
   width: 0;
   padding-right: 16px;
@@ -184,12 +206,21 @@
   white-space: nowrap;
   overflow: hidden;
 }
-
-.CDB-HeaderInfo-ActionsItem {
+.CDB-HeaderInfo-actionsItem {
   display: inline-block;
   margin-left: 4px;
   vertical-align: middle;
 }
-
-
-
+.CDB-HeaderNumeration {
+  width: $baseSize * 3;
+  min-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;
+}

src/scss/cdb-components/lists.scss

@@ -6,22 +6,34 @@
 
 
 ```
-  <div class="CDB-Box-Modal">&nbsp;</div>
+  <div class="CDB-Box-modal">&nbsp;</div>
 ```
 */
 
 @import '../cdb-variables/sizes';
 @import '../cdb-variables/colors';
 
-.CDB-ListDecoration-Item {
+.CDB-ListDecoration-item {
   border-bottom: 1px solid $cSecondaryLine;
 
   &:last-child {
     border-bottom: 0;
   }
 }
-
-.CDB-ListDecoration-ItemLink {
-  display: block;
+.CDB-ListDecoration-itemPadding {
   padding: 12px 16px;
 }
+.CDB-ListDecoration-itemPadding--horizontal {
+  padding: 0 16px;
+}
+.CDB-ListDecoration-itemPadding--vertical {
+  padding: 12px 0;
+}
+
+.CDB-ListDecoration-itemLink {
+  display: block;
+  max-width: 100%;
+  padding: 12px 16px;
+  text-align: left;
+}
+

src/scss/cdb-components/loader.scss

@@ -2,40 +2,160 @@
 // ----------------------------------------------
 
 /* SG
-# Loader
+# Loader/principal
 
 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>
+
 ```
 */
 
 @import '../cdb-utilities/mixins';
+@import '../cdb-variables/colors';
+@import '../cdb-variables/sizes';
 
 .CDB-Loader {
-  @include css3-prefix(animation, loader-progress 1000ms linear 1);
-  @include opacity(0);
-  @include transition(opacity, 1000ms);
   position: absolute;
   top: 0;
   left: 0;
-  width: 100%;
-  height: 2px;
-  background: rgba(#3AA9E3, 1);
-  z-index: 10;
+  width: 50%;
+  height: 3px;
+  transform: translateX(-200%);
+  background-image: linear-gradient(90deg, rgba($cBlue, 1) 0%, #32BBFE 90%, #FAFEFF 95%);
+  z-index: 2;
 }
+
 .CDB-Loader.is-visible {
-  @include css3-prefix(animation, loader-progress 2000ms linear infinite);
-  @include opacity(1);
+  @include css3-prefix(animation, loader-progress 1s cubic-bezier(0, 0.85, 0.6, 0.6) infinite);
 }
 
 @include keyframes(loader-progress) {
-  0% {
-    width: 0;
+  from {
+    transform: translateX(-200%);
   }
-  100% {
-    width: 100%;
+  to {
+    transform: translateX(200%);
+  }
+}
+
+/* SG
+# Loader/circle
+
+```
+<div style="padding: 20px;">
+  <div class="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"></circle>
+    </svg>
+  </div>
+
+  <div class="CDB-LoaderIcon is-dark">
+    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+    </svg>
+  </div>
+  <div class="CDB-LoaderIcon CDB-LoaderIcon--big is-dark">
+    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+    </svg>
+  </div>
+</div>
+
+<div style="padding: 20px; background: #F9F9F9;">
+  <div class="CDB-LoaderIcon is-dark">
+    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+    </svg>
+  </div>
+  <div class="CDB-LoaderIcon CDB-LoaderIcon--big is-dark">
+    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+    </svg>
+  </div>
+</div>
+
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-LoaderIcon">
+    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+    </svg>
+  </div>
+  <div class="CDB-LoaderIcon CDB-LoaderIcon--big">
+    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+    </svg>
+  </div>
+</div>
+
+<div style="padding: 20px; background: #E27D61;">
+  <div class="CDB-LoaderIcon">
+    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+    </svg>
+  </div>
+  <div class="CDB-LoaderIcon CDB-LoaderIcon--big">
+    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+    </svg>
+  </div>
+</div>
+
+```
+*/
+
+.CDB-LoaderIcon-spinner {
+  animation: rotate 2s linear infinite;
+  width: 16px;
+  height: 16px;
+}
+
+.CDB-LoaderIcon--small .CDB-LoaderIcon-spinner {
+  width: 14px;
+  height: 14px;
+}
+
+.CDB-LoaderIcon--big .CDB-LoaderIcon-spinner {
+  width: 40px;
+  height: 40px;
+}
+
+.CDB-LoaderIcon-path {
+  stroke: rgba(255, 255, 255, 0.88);
+  stroke-linecap: round;
+  animation: dash 1.5s ease-in-out infinite;
+  stroke-width: 4px;
+}
+
+.CDB-LoaderIcon--big .CDB-LoaderIcon-path {
+  stroke-width: 2px;
+}
+
+.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 {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
   }
 }

src/scss/cdb-components/menu.scss

@@ -2,31 +2,31 @@
 // ----------------------------------------------
 
 /* SG
-# Menu/
+# Menu/Navigation
 
 
 ```
 <nav class="CDB-NavMenu">
-  <ul class="CDB-NavMenu-Inner CDB-Text is-semibold CDB-Size-medium">
-    <li class="CDB-NavMenu-Item">
-      <a class="CDB-NavMenu-Link" href="#">DATA</a>
+  <ul class="CDB-NavMenu-inner CDB-Text is-semibold CDB-Size-medium">
+    <li class="CDB-NavMenu-item">
+      <button class="CDB-NavMenu-link">DATA</button>
     </li>
-    <li class="CDB-NavMenu-Item">
-      <a class="CDB-NavMenu-Link" href="#">STYLE</a>
+    <li class="CDB-NavMenu-item">
+      <button class="CDB-NavMenu-link">STYLE</button>
     </li>
-    <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-active">
-          <a href="#" class="CDB-NavSubmenu-Link">CLICK <span class="CDB-NavSubmenu-Status">NONE</span></a>
+    <li class="CDB-NavMenu-item is-selected">
+      <button class="CDB-NavMenu-link">POP-UP</button>
+      <ul class="CDB-NavSubmenu CDB-NavSubmenu--inside 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>
-        <li class="CDB-NavSubmenu-Item">
-          <a href="#" class="CDB-NavSubmenu-Link">HOVER <span class="CDB-NavSubmenu-Status">NONE</span></a>
+        <li class="CDB-NavSubmenu-item">
+          <button class="CDB-NavSubmenu-link">HOVER <span class="CDB-NavSubmenu-status u-hintTextColor">NONE</span></button>
         </li>
       </ul>
     </li>
-    <li class="CDB-NavMenu-Item">
-      <a class="CDB-NavMenu-Link" href="#">LEGEND</a>
+    <li class="CDB-NavMenu-item">
+      <button class="CDB-NavMenu-link">LEGEND</button>
     </li>
   </ul>
   <div style="position: absolute; right: 0; top: 0; height: 24px; width: 46px; background: red;">
@@ -39,26 +39,26 @@
 
 <div style="background: #2E3C43; height: 100px; padding: 20px;">
   <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">
-        <a class="CDB-NavMenu-Link" href="#">DATA</a>
+    <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>
       </li>
-      <li class="CDB-NavMenu-Item">
-        <a class="CDB-NavMenu-Link" href="#">STYLE</a>
+      <li class="CDB-NavMenu-item">
+        <button class="CDB-NavMenu-link">STYLE</button>
       </li>
-      <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-active">
-            <a href="#" class="CDB-NavSubmenu-Link">CLICK <span class="CDB-NavSubmenu-Status">NONE</span></a>
+      <li class="CDB-NavMenu-item is-selected">
+        <button class="CDB-NavMenu-link">POP-UP</button>
+        <ul class="CDB-NavSubmenu CDB-NavSubmenu--inside 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>
-          <li class="CDB-NavSubmenu-Item">
-            <a href="#" class="CDB-NavSubmenu-Link">HOVER <span class="CDB-NavSubmenu-Status">NONE</span></a>
+          <li class="CDB-NavSubmenu-item">
+            <button class="CDB-NavSubmenu-link">HOVER <span class="CDB-NavSubmenu-status">NONE</span></button>
           </li>
         </ul>
       </li>
-      <li class="CDB-NavMenu-Item">
-        <a class="CDB-NavMenu-Link" href="#">LEGEND</a>
+      <li class="CDB-NavMenu-item">
+        <button class="CDB-NavMenu-link">LEGEND</button>
       </li>
     </ul>
   </nav>
@@ -67,96 +67,166 @@
 <br/><br/>
 <br/><br/>
 
+<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>
+    </li>
+    <li class="CDB-NavMenu-item">
+      <button class="CDB-NavMenu-link">STYLE</button>
+    </li>
+    <li class="CDB-NavMenu-item is-selected">
+      <button class="CDB-NavMenu-link">POP-UP</button>
+    </li>
+    <li class="CDB-NavMenu-item">
+      <button class="CDB-NavMenu-link">LEGEND</button>
+    </li>
+  </ul>
+
+  <ul class="CDB-NavSubmenu CDB-NavSubmenu--outside CDB-Text CDB-Size-small is-semibold js-menu">
+    <li class="CDB-NavSubmenu-item is-selected">
+      <button class="CDB-NavSubmenu-link u-upperCase">Click</button>
+    </li>
+    <li class="CDB-NavSubmenu-item">
+      <button class="CDB-NavSubmenu-link u-upperCase">Hover</button>
+    </li>
+  </ul>
+</nav>
+
+
+<br/><br/>
+<br/><br/>
+
+<div style="background: #2E3C43; height: 100px; padding: 20px;">
+  <nav class="CDB-NavMenu is-dark">
+    <ul class="CDB-NavMenu-inner CDB-Text is-semibold CDB-Size-medium">
+      <li class="CDB-NavMenu-item">
+        <button class="CDB-NavMenu-link">DATA</button>
+      </li>
+      <li class="CDB-NavMenu-item">
+        <button class="CDB-NavMenu-link">STYLE</button>
+      </li>
+      <li class="CDB-NavMenu-item is-selected">
+        <button class="CDB-NavMenu-link">POP-UP</button>
+      </li>
+      <li class="CDB-NavMenu-item">
+        <button class="CDB-NavMenu-link">LEGEND</button>
+      </li>
+    </ul>
+
+    <ul class="CDB-NavSubmenu CDB-NavSubmenu--outside CDB-Text CDB-Size-small is-semibold js-menu">
+      <li class="CDB-NavSubmenu-item is-selected">
+        <button class="CDB-NavSubmenu-link u-upperCase">Click</button>
+      </li>
+      <li class="CDB-NavSubmenu-item">
+        <button class="CDB-NavSubmenu-link u-upperCase">Hover</button>
+      </li>
+    </ul>
+  </nav>
+</div>
+
 ```
 */
 
 @import '../cdb-variables/colors';
+@import '../cdb-variables/sizes';
 
 .CDB-NavMenu {
   position: relative;
+  z-index: 2;
 }
 
-.CDB-NavMenu-Inner {
+.CDB-NavMenu-inner {
   position: relative;
   margin-bottom: 18px;
   border-bottom: 1px solid $cMainLine;
 }
+.CDB-NavMenu-inner--no-margin {
+  margin-bottom: 0;
+}
+.CDB-NavMenu-inner--is-dropdown {
+  padding: $baseSize 0 0 $baseSize * 2;
+}
 
-.CDB-NavMenu-Link {
+.CDB-NavMenu-link {
   display: block;
   margin-bottom: -1px;
   padding: 4px 0 11px;
   border-bottom: 1px solid transparent;
+  color: $cBlue;
 }
 
-.CDB-NavMenu-Item,
-.CDB-NavSubmenu-Item {
+.CDB-NavMenu-item,
+.CDB-NavSubmenu-item {
   display: inline-block;
-  margin-right: 8px;
+  margin-right: 12px;
   vertical-align: middle;
 }
 
-.CDB-NavMenu-Item.is-active .CDB-NavMenu-Link {
-  border-bottom: 1px solid $cMainDark;
-  color: $cMainDark;
+.CDB-NavMenu-item.is-selected .CDB-NavMenu-link {
+  border-bottom: 1px solid $cBlack;
+  color: $cMainText;
 }
 
 .CDB-NavSubmenu {
+  border-bottom: 1px solid $cSecondaryLine;
+}
+
+.CDB-NavSubmenu--inside {
   position: absolute;
   right: 0;
   left: 0;
   padding-top: 14px;
-  border-bottom: 1px solid $cSecondaryLine;
 }
 
-.CDB-NavSubmenu-Link {
+.CDB-NavSubmenu--outside {
+  margin-top: -5px;
+  margin-bottom: 18px;
+}
+
+.CDB-NavSubmenu-link {
   display: block;
   margin-bottom: -1px;
   padding-bottom: 12px;
   border-bottom: 1px solid transparent;
+  color: $cBlue;
 }
 
-.CDB-NavSubmenu-item.is-active {
-  .CDB-NavSubmenu-Link {
-    border-bottom: 1px solid $cTypo3;
-    color: $cMainDark;
-  }
+.CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link {
+  border-bottom: 1px solid $cMainLine;
+  color: $cMainText;
 }
 
-.CDB-NavSubmenu-Status {
+.CDB-NavSubmenu-status {
   margin-left: 2px;
-  color: $cTypo4;
 }
 
-.CDB-Navmenu.is-dark {
+.CDB-NavMenu.is-dark {
 
-  .CDB-NavMenu-Inner,
+  .CDB-NavMenu-inner,
   .CDB-NavSubmenu {
-    border-bottom: 1px solid $cTypo2;
+    border-bottom: 1px solid $cSecondaryText;
   }
 
-  .CDB-NavMenu-Link,
-  .CDB-NavSubmenu-Link {
-    color: $cTypo3;
+  .CDB-NavMenu-link,
+  .CDB-NavSubmenu-link {
+    color: $cAltText;
   }
 
-  .CDB-NavMenu-Item.is-active {
-    .CDB-NavMenu-Link {
-      border-bottom: 1px solid $cMainLine;
-      color: $cWhite;
-    }
+  .CDB-NavMenu-item.is-selected .CDB-NavMenu-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-item.is-selected .CDB-NavSubmenu-link {
+    border-bottom: 1px solid $cMainLine;
+    color: $cWhite;
   }
 
-  .CDB-NavSubmenu-Status {
-    color: $cTypo2;
+  .CDB-NavSubmenu-status {
+    color: $cSecondaryText;
   }
 }
 
 
+

src/scss/cdb-components/shapes/add.scss

@@ -49,10 +49,15 @@ 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;
@@ -65,7 +70,7 @@ Description
     bottom: 7px;
     left: 0;
     height: 1px;
-    background: $cMainDark;
+    background: $cMainBg;
     content: '';
   }
 
@@ -76,7 +81,7 @@ Description
     bottom: 0;
     left: 7px;
     width: 1px;
-    background: $cMainDark;
+    background: $cMainBg;
     content: '';
   }
 }
@@ -90,7 +95,7 @@ Description
     bottom: 7px;
     left: 4px;
     height: 1px;
-    background: $cMainDark;
+    background: $cMainBg;
     content: '';
   }
 
@@ -101,7 +106,7 @@ Description
     bottom: 3px;
     left: 8px;
     width: 1px;
-    background: $cMainDark;
+    background: $cMainBg;
     content: '';
   }
 }

src/scss/cdb-components/shapes/arrow.scss

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

src/scss/cdb-components/shapes/check-circle.scss

@@ -60,7 +60,7 @@ Description
 .CDB-Shape-CircleItem {
   width: 14px;
   height: 14px;
-  border: 1px solid $cMainDark;
+  border: 1px solid $cMainBg;
   border-radius: 50%;
 
   &.is-small {
@@ -86,7 +86,7 @@ Description
     position: absolute;
     width: 1px;
     transform: rotate(-45deg);
-    background: $cMainDark;
+    background: $cMainBg;
     content: '';
   }
   &::after {
@@ -94,31 +94,31 @@ Description
     position: absolute;
     width: 1px;
     transform: rotate(45deg);
-    background: $cMainDark;
+    background: $cMainBg;
     content: '';
   }
 
   &.is-medium {
     &::before {
-      top: 6px;
+      top: 5px;
       left: 4px;
       height: 4px;
     }
     &::after {
-      top: 4px;
+      top: 3px;
       right: 5px;
-      height: 7px;
+      height: 6px;
     }
   }
 
   &.is-small {
     &::before {
-      top: 5px;
-      left: 3px;
+      top: 4px;
+      left: 2px;
       height: 3px;
     }
     &::after {
-      top: 3px;
+      top: 2px;
       right: 3px;
       height: 5px;
     }
@@ -143,4 +143,14 @@ Description
   }
 }
 
+.CDB-Shape-tick.is-green {
+  &::before {
+    background: $cHighlight;
+  }
+  &::after {
+    background: $cHighlight;
+  }
+}
+
+
 

src/scss/cdb-components/shapes/close.scss

@@ -55,7 +55,7 @@ Description
     position: absolute;
     width: 1px;
     transform: rotate(-45deg);
-    background: $cMainDark;
+    background: $cMainBg;
     content: '';
   }
   &::after {
@@ -63,7 +63,7 @@ Description
     position: absolute;
     width: 1px;
     transform: rotate(45deg);
-    background: $cMainDark;
+    background: $cMainBg;
     content: '';
   }
 
@@ -137,3 +137,13 @@ Description
     background: $cWhite;
   }
 }
+
+.CDB-Shape-close.is-red {
+  &::before {
+    background: $cError;
+  }
+  &::after {
+    background: $cError;
+  }
+}
+

src/scss/cdb-components/shapes/dash.scss

@@ -56,7 +56,7 @@ Description
     bottom: 7px;
     left: 2px;
     height: 1px;
-    background: $cMainDark;
+    background: $cMainBg;
     content: '';
   }
 }

src/scss/cdb-components/shapes/dataset.scss

@@ -83,10 +83,8 @@ Description
 
 .CDB-Shape-Dataset {
   padding-top: 1px;
-  padding-left: 10px;
   &.is-small {
     padding-top: 0;
-    padding-left: 7px;
   }
 }
 
@@ -95,12 +93,13 @@ Description
   width: 9px;
   height: 9px;
   margin-left: -10px;
-  border: 1px solid $cMainDark;
+  border: 1px solid $cMainBg;
   border-radius: 50%;
   background: $cWhite;
 
   &:first-child {
     position: relative;
+    margin-left: 0;
     box-shadow: 3px 0 0 $cWhite;
     z-index: 1;
   }
@@ -112,6 +111,7 @@ Description
     height: 6px;
     margin-left: -7px;
     &:first-child {
+      margin-left: 0;
       box-shadow: 2px 0 0 $cWhite;
     }
   }
@@ -132,15 +132,15 @@ Description
 .CDB-Shape-Dataset.is-white {
   .CDB-Shape-DatasetItem {
     border: 1px solid $cHoverLine;
-    background: $cMainDark;
+    background: $cMainBg;
     &:first-child {
-      box-shadow: 3px 0 $cMainDark;
+      box-shadow: 3px 0 $cMainBg;
     }
   }
 }
 
 .CDB-Shape-Dataset.is-white.is-small {
   .CDB-Shape-DatasetItem:first-child {
-    box-shadow: 2px 0 $cMainDark;
+    box-shadow: 2px 0 $cMainBg;
   }
 }

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: $cTypo2;
+    background: $cSecondaryText;
   }
 }

src/scss/cdb-components/shapes/error-circle.scss

@@ -60,13 +60,13 @@ Description
 .CDB-Shape-CircleItem {
   width: 13px;
   height: 13px;
-  border: 1px solid $cMainDark;
+  border: 1px solid $cMainBg;
   border-radius: 50%;
 
   &.is-small {
     width: 9px;
     height: 9px;
-    margin: 2px auto;
+    margin: 0 auto;
   }
   &.is-blue {
     border: 1px solid $cBlue;
@@ -74,4 +74,30 @@ Description
   &.is-white {
     border: 1px solid $cWhite;
   }
+  &.is-green {
+    border: 1px solid $cHighlight;
+  }
+  &.is-red {
+    border: 1px solid $cError;
+  }
+}
+
+
+.CDB-Shape-CircleItem--fill {
+  &.is-blue {
+    border: 1px solid $cBlue;
+    background: $cBlue;
+  }
+  &.is-white {
+    border: 1px solid $cWhite;
+    background: $cWhite;
+  }
+  &.is-green {
+    border: 1px solid $cHighlight;
+    background: $cHighlight;
+  }
+  &.is-red {
+    border: 1px solid $cError;
+    background: $cError;
+  }
 }

src/scss/cdb-components/shapes/hamburguer.scss

@@ -43,7 +43,7 @@ Description
 .CDB-Shape-hamburguerItem {
   height: $baseSize / 4;
   margin-bottom: $baseSize / 4;
-  background: $cMainDark;
+  background: $cMainBg;
 
   &:last-child {
     margin-bottom: 0;

src/scss/cdb-components/shapes/magnify.scss

@@ -58,7 +58,7 @@ Description
     left: 0;
     width: 11px;
     height: 11px;
-    border: 1px solid $cMainDark;
+    border: 1px solid $cMainBg;
     border-radius: 50%;
     content: '';
   }
@@ -71,7 +71,7 @@ Description
     width: 1px;
     height: 7px;
     transform: rotate(314deg);
-    background: $cMainDark;
+    background: $cMainBg;
     content: '';
   }
 }
@@ -97,16 +97,16 @@ Description
 .CDB-Shape-magnify.is-small {
   &::before {
     top: 3px;
-    left: 3px;
-    width: 6px;
-    height: 6px;
+    left: 4px;
+    width: 5px;
+    height: 5px;
   }
 
   &::after {
     display: block;
     position: absolute;
     right: 4px;
-    bottom: 2px;
+    bottom: 3px;
     width: 1px;
     height: 5px;
     transform: rotate(314deg);

src/scss/cdb-components/shapes/move.scss

@@ -7,28 +7,37 @@ Description
 <h2>16px</h2>
 <div style="padding: 20px;">
   <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
-    <div class="CDB-Shape-Move">
-      <div class="CDB-Shape-MoveItem is-first"></div>
-      <div class="CDB-Shape-MoveItem is-second"></div>
-      <div class="CDB-Shape-MoveItem is-third"></div>
+    <div class="CDB-Shape-rectsHandle">
+      <div class="CDB-Shape-rectsHandleItem is-first"></div>
+      <div class="CDB-Shape-rectsHandleItem is-second"></div>
+      <div class="CDB-Shape-rectsHandleItem is-third"></div>
     </div>
   </div>
 </div>
 <div style="padding: 20px;">
   <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
-    <div class="CDB-Shape-Move">
-      <div class="CDB-Shape-MoveItem is-blue is-first"></div>
-      <div class="CDB-Shape-MoveItem is-blue is-second"></div>
-      <div class="CDB-Shape-MoveItem is-blue is-third"></div>
+    <div class="CDB-Shape-rectsHandle">
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-first"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-second"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-third"></div>
+    </div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-rectsHandle">
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-first"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-second"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-third"></div>
     </div>
   </div>
 </div>
 <div style="padding: 20px; background: #2E3C43;">
   <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
-    <div class="CDB-Shape-Move">
-      <div class="CDB-Shape-MoveItem is-white is-first"></div>
-      <div class="CDB-Shape-MoveItem is-white is-second"></div>
-      <div class="CDB-Shape-MoveItem is-white is-third"></div>
+    <div class="CDB-Shape-rectsHandle">
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-first"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-second"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-third"></div>
     </div>
   </div>
 </div>
@@ -39,28 +48,37 @@ Description
 <h2>12px</h2>
 <div style="padding: 20px;">
   <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
-    <div class="CDB-Shape-Move is-small">
-      <div class="CDB-Shape-MoveItem is-first"></div>
-      <div class="CDB-Shape-MoveItem is-second"></div>
-      <div class="CDB-Shape-MoveItem is-third"></div>
+    <div class="CDB-Shape-rectsHandle is-small">
+      <div class="CDB-Shape-rectsHandleItem is-first"></div>
+      <div class="CDB-Shape-rectsHandleItem is-second"></div>
+      <div class="CDB-Shape-rectsHandleItem is-third"></div>
     </div>
   </div>
 </div>
 <div style="padding: 20px;">
   <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
-    <div class="CDB-Shape-Move is-small">
-      <div class="CDB-Shape-MoveItem is-blue is-first"></div>
-      <div class="CDB-Shape-MoveItem is-blue is-second"></div>
-      <div class="CDB-Shape-MoveItem is-blue is-third"></div>
+    <div class="CDB-Shape-rectsHandle is-small">
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-first"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-second"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-third"></div>
+    </div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape">
+    <div class="CDB-Shape-rectsHandle is-small">
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-first"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-second"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-third"></div>
     </div>
   </div>
 </div>
 <div style="padding: 20px; background: #2E3C43;">
   <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
-    <div class="CDB-Shape-Move is-small">
-      <div class="CDB-Shape-MoveItem is-white is-first"></div>
-      <div class="CDB-Shape-MoveItem is-white is-second"></div>
-      <div class="CDB-Shape-MoveItem is-white is-third"></div>
+    <div class="CDB-Shape-rectsHandle is-small">
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-first"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-second"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-third"></div>
     </div>
   </div>
 </div>
@@ -69,62 +87,75 @@ Description
 
 @import '../../cdb-variables/colors';
 
-.CDB-Shape-Move {
+.CDB-Shape-rectsHandle {
+  position: relative;
   padding: 1px 0 0;
 }
 
-.CDB-Shape-Move.is-small {
+.CDB-Shape-rectsHandle.is-small {
   padding: 3px 0 0 1px;
 
-  .CDB-Shape-MoveItem {
+  .CDB-Shape-rectsHandleItem {
+    height: 2px;
     margin-bottom: 2px;
 
     &::before {
+      left: 5px;
       width: 2px;
       height: 2px;
     }
     &::after {
       width: 2px;
       height: 2px;
-      margin-left: 1px;
     }
   }
 }
 
-.CDB-Shape-MoveItem {
+.CDB-Shape-rectsHandleItem {
+  height: 3px;
   margin-bottom: 3px;
 
   &:last-child {
     margin-bottom: 0;
   }
   &::before {
-    display: inline-block;
+    display: block;
+    position: absolute;
+    left: 4px;
     width: 3px;
     height: 3px;
-    background: $cMainDark;
+    background: $cMainBg;
     content: '';
   }
 
   &::after {
-    display: inline-block;
+    display: block;
+    position: absolute;
+    left: 9px;
     width: 3px;
     height: 3px;
-    margin-left: 2px;
-    background: $cMainDark;
+    background: $cMainBg;
     content: '';
   }
 }
 
-.CDB-Shape-MoveItem.is-blue {
+.CDB-Shape-rectsHandleItem--blue {
   &::before,
   &::after {
     background: $cBlue;
   }
 }
 
-.CDB-Shape-MoveItem.is-white {
+.CDB-Shape-rectsHandleItem--white {
   &::before,
   &::after {
     background: $cWhite;
   }
 }
+
+.CDB-Shape-rectsHandleItem--grey {
+  &::before,
+  &::after {
+    background: $cHoverLine;
+  }
+}

src/scss/cdb-components/shapes/paragraph.scss

@@ -0,0 +1,112 @@
+/* SG
+# Shapes/Paragrapgh
+
+Description
+
+```
+<h2>16px</h2>
+<br/>
+<br/>
+<div class="CDB-Shape">
+  <ul class="CDB-Shape-paragraph is-right">
+    <li class="CDB-Shape-paragraphItem">
+      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
+    </li>
+    <li class="CDB-Shape-paragraphItem">
+      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
+    </li>
+    <li class="CDB-Shape-paragraphItem">
+      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
+    </li>
+    <li class="CDB-Shape-paragraphItem">
+      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
+    </li>
+  </ul>
+</div>
+<br/>
+<br/>
+<br/>
+<br/>
+<div class="CDB-Shape">
+  <ul class="CDB-Shape-paragraph is-center">
+    <li class="CDB-Shape-paragraphItem">
+      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
+    </li>
+    <li class="CDB-Shape-paragraphItem">
+      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
+    </li>
+    <li class="CDB-Shape-paragraphItem">
+      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
+    </li>
+    <li class="CDB-Shape-paragraphItem">
+      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
+    </li>
+  </ul>
+</div>
+<br/>
+<br/>
+<br/>
+<br/>
+<div class="CDB-Shape">
+  <ul class="CDB-Shape-paragraph is-active">
+    <li class="CDB-Shape-paragraphItem">
+      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
+    </li>
+    <li class="CDB-Shape-paragraphItem">
+      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
+    </li>
+    <li class="CDB-Shape-paragraphItem">
+      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
+    </li>
+    <li class="CDB-Shape-paragraphItem">
+      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
+    </li>
+  </ul>
+</div>
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-Shape-paragraph {
+  padding-top: 3px;
+  text-align: left;
+}
+.CDB-Shape-paragraph.is-center {
+  text-align: center;
+}
+.CDB-Shape-paragraph.is-right {
+  text-align: right;
+}
+.CDB-Shape-paragraphItem {
+  height: 1px;
+  margin-bottom: 2px;
+}
+.CDB-Shape-paragraphItem:last-child {
+  margin-bottom: 0;
+}
+
+.CDB-Shape-paragraphBar {
+  display: inline-block;
+  height: 1px;
+  margin-bottom: 2px;
+  background: $cSecondaryLine;
+  vertical-align: top;
+}
+
+.CDB-Shape-paragraph.is-active .CDB-Shape-paragraphBar {
+  background: $cBlue;
+}
+
+.CDB-Shape-paragraphBar--01 {
+  width: 12px;
+}
+.CDB-Shape-paragraphBar--02 {
+  width: 6px;
+}
+.CDB-Shape-paragraphBar--03 {
+  width: 8px;
+}
+.CDB-Shape-paragraphBar--04 {
+  width: 4px;
+}

src/scss/cdb-components/shapes/threePoints.scss

@@ -4,33 +4,68 @@
 Description
 
 ```
-<h2>16px</h2>
+<h2>24px</h2>
 <div style="padding: 20px;">
-  <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>
-    </button>
-  </div>
+  <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;">
-  <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>
-    </button>
-  </div>
+  <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;">
-  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
-    <button class="CDB-Shape-threePoints is-white js-actions">
+  <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-threePointsItem"></div>
       <div class="CDB-Shape-threePointsItem"></div>
       <div class="CDB-Shape-threePointsItem"></div>
-    </button>
-  </div>
+    </div>
+  </button>
+</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-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+    </div>
+  </button>
+</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-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+    </div>
+  </button>
 </div>
 <br>
 <br>
@@ -38,31 +73,31 @@ Description
 <br>
 <h2>12px</h2>
 <div style="padding: 20px;">
-  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
-    <button class="CDB-Shape-threePoints is-small js-actions">
+  <button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-threePoints">
       <div class="CDB-Shape-threePointsItem"></div>
       <div class="CDB-Shape-threePointsItem"></div>
       <div class="CDB-Shape-threePointsItem"></div>
-    </button>
-  </div>
+    </div>
+  </button>
 </div>
 <div style="padding: 20px;">
-  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
-    <button class="CDB-Shape-threePoints is-blue is-small js-actions">
+  <button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-threePoints is-blue is-small">
       <div class="CDB-Shape-threePointsItem"></div>
       <div class="CDB-Shape-threePointsItem"></div>
       <div class="CDB-Shape-threePointsItem"></div>
-    </button>
-  </div>
+    </div>
+  </button>
 </div>
 <div style="padding: 20px; background: #2E3C43;">
-  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
-    <button class="CDB-Shape-threePoints is-white is-small js-actions">
+  <button class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-threePoints is-white is-small">
       <div class="CDB-Shape-threePointsItem"></div>
       <div class="CDB-Shape-threePointsItem"></div>
       <div class="CDB-Shape-threePointsItem"></div>
-    </button>
-  </div>
+    </div>
+  </button>
 </div>
 ```
 */
@@ -71,36 +106,48 @@ Description
 
 .CDB-Shape-threePoints {
   display: inline-block;
+  padding: 0 4px;
+}
+.CDB-Shape-threePoints.is-horizontal {
+  transform: rotate(90deg);
+  padding: 4px 0;
 }
 
 .CDB-Shape-threePointsItem {
   width: 2px;
   height: 2px;
   margin-bottom: 5px;
-  background: $cMainDark;
-  &:last-child {
-    margin-bottom: 0;
-  }
+  background: $cMainBg;
+}
+.CDB-Shape-threePointsItem.is-round {
+  border-radius: 50%;
+}
+.CDB-Shape-threePointsItem:last-child {
+  margin-bottom: 0;
 }
 
 .CDB-Shape-threePoints.is-small {
   padding-top: 2px;
-
-  .CDB-Shape-threePointsItem {
-    width: 2px;
-    height: 2px;
-    margin-bottom: 3px;
-  }
+}
+.CDB-Shape-threePoints.is-small .CDB-Shape-threePointsItem {
+  width: 2px;
+  height: 2px;
+  margin-bottom: 3px;
 }
 
-.CDB-Shape-threePoints.is-blue {
-  .CDB-Shape-threePointsItem {
-    background: $cBlue;
-  }
+.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-white {
-  .CDB-Shape-threePointsItem {
-    background: $cWhite;
-  }
+.CDB-Shape-threePoints.is-blue .CDB-Shape-threePointsItem {
+  background: $cBlue;
+}
+
+.CDB-Shape-threePoints.is-white .CDB-Shape-threePointsItem {
+  background: $cWhite;
 }

src/scss/cdb-components/shapes/toogle-arrow.scss

@@ -97,7 +97,7 @@ Description
     width: 10px;
     height: 1px;
     transform: rotate(-45deg);
-    background: $cMainDark;
+    background: $cMainBg;
     content: '';
   }
   &::after {
@@ -108,7 +108,7 @@ Description
     width: 10px;
     height: 1px;
     transform: rotate(45deg);
-    background: $cMainDark;
+    background: $cMainBg;
     content: '';
   }
 }

src/scss/cdb-components/shapes/type.scss

@@ -0,0 +1,111 @@
+/* SG
+# Shapes/Type
+
+Description
+
+```
+<h2>8px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape CDB-Shape--small">
+    <div class="CDB-Type CDB-Type--point">
+      <div class="CDB-Type-circle CDB-Type-circle--02"></div>
+      <div class="CDB-Type-circle CDB-Type-circle--03"></div>
+      <div class="CDB-Type-circle CDB-Type-circle--04"></div>
+    </div>
+  </div>
+</div>
+<br/>
+<div style="padding: 20px;">
+  <div class="CDB-Shape CDB-Shape--small">
+    <div class="CDB-Type CDB-Type--line">
+      <div class="CDB-Type-circle CDB-Type-circle--02"></div>
+      <div class="CDB-Type-circle CDB-Type-circle--03"></div>
+    </div>
+  </div>
+</div>
+<br/>
+<div style="padding: 20px;">
+  <div class="CDB-Shape CDB-Shape--small">
+    <div class="CDB-Type CDB-Type--polygon">
+      <div class="CDB-Type-circle CDB-Type-circle--01"></div>
+      <div class="CDB-Type-circle CDB-Type-circle--02"></div>
+      <div class="CDB-Type-circle CDB-Type-circle--03"></div>
+      <div class="CDB-Type-circle CDB-Type-circle--04"></div>
+    </div>
+  </div>
+</div>
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-Shape {
+  width: 16px;
+  height: 16px;
+  text-align: center;
+}
+.CDB-Shape--small {
+  width: 8px;
+  height: 8px;
+}
+.CDB-Shape--medium {
+  width: 24px;
+  height: 24px;
+}
+.CDB-Shape:hover {
+  cursor: pointer;
+}
+
+.CDB-Type {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.CDB-Type-circle {
+  position: absolute;
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: $cHoverLine;
+}
+.CDB-Type-circle--01 {
+  top: 0;
+  left: 0;
+}
+.CDB-Type-circle--02 {
+  top: 0;
+  right: 0;
+}
+.CDB-Type-circle--03 {
+  bottom: 0;
+  left: 0;
+}
+.CDB-Type-circle--04 {
+  right: 0;
+  bottom: 0;
+}
+
+.CDB-Type--polygon::before {
+  display: block;
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  bottom: 1px;
+  left: 1px;
+  border: 1px solid $cHoverLine;
+  content: '';
+}
+
+.CDB-Type--line::before {
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 3px;
+  width: 1px;
+  transform: rotate(45deg);
+  background: $cHoverLine;
+  content: '';
+}

src/scss/cdb-components/tags.scss

@@ -2,7 +2,7 @@
 // ----------------------------------------------
 
 /* SG
-# Tags
+# Tags / Privacy
 
 ```
 <button class="CDB-Tag is-public CDB-Text is-semibold CDB-Size-small u-iBlock">
@@ -17,16 +17,22 @@
 <button class="CDB-Tag is-private CDB-Text is-semibold CDB-Size-small u-iBlock">
   PRIVATE
 </button>
+<button class="CDB-Tag CDB-Text is-semibold CDB-Size-small u-iBlock">
+  TAG
+</button>
 ```
 */
 
+@import '../cdb-utilities/mixins';
 @import '../cdb-variables/sizes';
 @import '../cdb-variables/colors';
 
 
 .CDB-Tag {
   padding: 0 3px;
+  border: 1px solid $cBlue;
   border-radius: 2px;
+  color: $cBlue;
 
   &.is-public {
     border: 1px solid $cPublic;
@@ -45,3 +51,86 @@
     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: 0;
+  border-radius: $baseSize / 4;
+  background: rgba(0, 0, 0, 0.04);
+  text-transform: uppercase;
+}
+

src/scss/cdb-components/tooltips.scss

@@ -0,0 +1,148 @@
+// Info Tooltip
+// ----------------------------------------------
+
+/* SG
+# Info Tooltip
+
+
+```
+<div style="position: relative; height: 100px;">
+  <div class="CDB-InfoTooltip CDB-InfoTooltip--up is-black">
+    <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
+  </div>
+</div>
+
+<div style="position: relative; height: 100px;">
+  <div class="CDB-InfoTooltip CDB-InfoTooltip--up is-error">
+    <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
+  </div>
+</div>
+
+<div style="position: relative; height: 100px;">
+  <div class="CDB-InfoTooltip CDB-InfoTooltip--down is-black">
+    <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
+  </div>
+</div>
+
+<div style="position: relative; height: 100px;">
+  <div class="CDB-InfoTooltip CDB-InfoTooltip--down is-error">
+    <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
+  </div>
+</div>
+
+<div style="position: relative; height: 100px;">
+  <div class="CDB-InfoTooltip CDB-InfoTooltip--left is-black">
+    <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
+  </div>
+</div>
+
+<div style="position: relative; height: 100px;">
+  <div class="CDB-InfoTooltip CDB-InfoTooltip--left is-error">
+    <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
+  </div>
+</div>
+
+
+<div style="position: relative; height: 100px;">
+  <div class="CDB-InfoTooltip CDB-InfoTooltip--right is-black">
+    <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
+  </div>
+</div>
+
+<div style="position: relative; height: 100px;">
+  <div class="CDB-InfoTooltip CDB-InfoTooltip--right is-error">
+    <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
+  </div>
+</div>
+
+
+
+```
+*/
+
+@import '../cdb-utilities/mixins';
+@import '../cdb-variables/colors';
+@import '../cdb-variables/sizes';
+
+
+.CDB-InfoTooltip {
+  display: inline-block;
+  position: absolute;
+  padding: $baseSize;
+  border-radius: $halfBaseSize;
+  background: rgba($cMainBg, 0.8);
+}
+.CDB-InfoTooltip::after {
+  display: block;
+  position: absolute;
+  width: 0;
+  height: 0;
+  border: 4px solid transparent;
+  content: '';
+}
+
+.is-black {
+  &.CDB-InfoTooltip.CDB-InfoTooltip--up::after {
+    border-bottom-color: rgba($cMainBg, 0.8);
+  }
+  &.CDB-InfoTooltip.CDB-InfoTooltip--down::after {
+    border-top-color: rgba($cMainBg, 0.8);
+  }
+  &.CDB-InfoTooltip.CDB-InfoTooltip--left::after {
+    border-right-color: rgba($cMainBg, 0.8);
+  }
+  &.CDB-InfoTooltip.CDB-InfoTooltip--right::after {
+    border-left-color: rgba($cMainBg, 0.8);
+  }
+}
+
+.is-error {
+  &.CDB-InfoTooltip.CDB-InfoTooltip--up::after {
+    border-bottom-color: $cError;
+  }
+  &.CDB-InfoTooltip.CDB-InfoTooltip--down::after {
+    border-top-color: $cError;
+  }
+  &.CDB-InfoTooltip.CDB-InfoTooltip--left::after {
+    border-right-color: $cError;
+  }
+  &.CDB-InfoTooltip.CDB-InfoTooltip--right::after {
+    border-left-color: $cError;
+  }
+}
+
+.CDB-InfoTooltip.CDB-InfoTooltip--up::after {
+  top: -$baseSize;
+  left: calc(50% - #{$halfBaseSize});
+  border-top-width: $halfBaseSize;
+  border-top-style: solid;
+}
+
+.CDB-InfoTooltip.CDB-InfoTooltip--down::after {
+  bottom: -$baseSize;
+  left: calc(50% - #{$halfBaseSize});
+  border-top-width: $halfBaseSize;
+  border-top-style: solid;
+}
+
+.CDB-InfoTooltip.CDB-InfoTooltip--left::after {
+  top: calc(50% - #{$halfBaseSize});
+  left: -$baseSize;
+  border-right-width: $halfBaseSize;
+  border-right-style: solid;
+}
+
+.CDB-InfoTooltip.CDB-InfoTooltip--right::after {
+  top: calc(50% - #{$halfBaseSize});
+  right: -$baseSize;
+  border-right-width: $halfBaseSize;
+  border-right-style: solid;
+}
+
+.CDB-InfoTooltip.is-error {
+  background: $cError;
+}
+
+.CDB-InfoTooltip-text {
+  color: $cWhite;
+}

src/scss/cdb-components/typography.scss

@@ -9,13 +9,18 @@
 <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 CDB-Size-medium">Open Sans 12/16 Regular</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 is-semibold CDB-Size-small">Open Sans 10/14 Semibold</p>
 <p class="CDB-Text CDB-Size-small">Open Sans 10/14 Regular</p>
+<span class="CDB-Text CDB-Size-small is-underlined">?</span>
 ```
 */
 
 @import '../cdb-variables/sizes';
+@import '../cdb-variables/colors';
 
 .CDB-Text {
   font-family: 'Open Sans';
@@ -29,6 +34,10 @@
   }
 }
 
+.is-underlined {
+  border-bottom: 1px dotted $cMainLine;
+}
+
 .CDB-Size-huge {
   font-size: $sFontSize-huge;
   line-height: $sLineHeight-huge;
@@ -47,4 +56,22 @@
 .CDB-Size-small {
   font-size: $sFontSize-small;
   line-height: $sLineHeight-small;
+
 }
+
+.CDB-Size-small.u-whiteTextColor {
+  -webkit-font-smoothing: initial;
+}
+
+.CDB-FontSize-small {
+  font-size: $sFontSize-small;
+}
+
+.CDB-FontSize-medium {
+  font-size: $sFontSize-medium;
+}
+
+.CDB-IconFont.is-disabled {
+  opacity: 0.24;
+}
+

src/scss/cdb-icon-font.scss

@@ -119,12 +119,78 @@ 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-downloadCircle Size-large"></i>
+    <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">pencilMenu</h4>
+  </div>
+
+
+  <div class="box">
+    <i class="CDB-IconFont CDB-IconFont-mobile Size-large"></i>
+    <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">wizard</h4>
   </div>
 
 
+  <div class="box">
+    <i class="CDB-IconFont CDB-IconFont-undo Size-large"></i>
+    <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">redo</h4>
+  </div>
+
+
+  <div class="box">
+    <i class="CDB-IconFont CDB-IconFont-lArrowLight Size-large"></i>
+    <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">hide</h4>
+  </div>
+
+
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-info Size-large"></i>
     <h4 class="Text Size-small">info</h4>
@@ -716,441 +782,496 @@ All available icons in CartoDB.
 }
 
 
-.CDB-IconFont-wizard::before {
+.CDB-IconFont-edition::before {
   content: '\E00E';
 }
 
 
-.CDB-IconFont-info::before {
+.CDB-IconFont-view::before {
   content: '\E00F';
 }
 
 
-.CDB-IconFont-fork::before {
+.CDB-IconFont-odyssey::before {
   content: '\E010';
 }
 
 
-.CDB-IconFont-facebook::before {
+.CDB-IconFont-settings::before {
   content: '\E011';
 }
 
 
-.CDB-IconFont-folder::before {
+.CDB-IconFont-downloadCircle::before {
   content: '\E012';
 }
 
 
-.CDB-IconFont-dropbox::before {
+.CDB-IconFont-pencilMenu::before {
   content: '\E013';
 }
 
 
-.CDB-IconFont-cloud::before {
+.CDB-IconFont-mobile::before {
   content: '\E014';
 }
 
 
-.CDB-IconFont-step::before {
+.CDB-IconFont-wizard::before {
   content: '\E015';
 }
 
 
-.CDB-IconFont-addDocument::before {
+.CDB-IconFont-undo::before {
   content: '\E016';
 }
 
 
-.CDB-IconFont-arrowNext::before {
+.CDB-IconFont-redo::before {
   content: '\E017';
 }
 
 
-.CDB-IconFont-arrowPrev::before {
+.CDB-IconFont-lArrowLight::before {
   content: '\E018';
 }
 
 
-.CDB-IconFont-close::before {
+.CDB-IconFont-hide::before {
   content: '\E019';
 }
 
 
-.CDB-IconFont-cartoFante::before {
+.CDB-IconFont-info::before {
   content: '\E01A';
 }
 
 
-.CDB-IconFont-lock::before {
+.CDB-IconFont-fork::before {
   content: '\E01B';
 }
 
 
-.CDB-IconFont-cartoDB::before {
+.CDB-IconFont-facebook::before {
   content: '\E01C';
 }
 
 
-.CDB-IconFont-lens::before {
+.CDB-IconFont-folder::before {
   content: '\E01D';
 }
 
 
-.CDB-IconFont-closeLimits::before {
+.CDB-IconFont-dropbox::before {
   content: '\E01E';
 }
 
 
-.CDB-IconFont-defaultUser::before {
+.CDB-IconFont-cloud::before {
   content: '\E01F';
 }
 
 
-.CDB-IconFont-cockroach::before {
+.CDB-IconFont-step::before {
   content: '\E020';
 }
 
 
-.CDB-IconFont-floppy::before {
+.CDB-IconFont-addDocument::before {
   content: '\E021';
 }
 
 
-.CDB-IconFont-trash::before {
+.CDB-IconFont-arrowNext::before {
   content: '\E022';
 }
 
 
-.CDB-IconFont-wifi::before {
+.CDB-IconFont-arrowPrev::before {
   content: '\E023';
 }
 
 
-.CDB-IconFont-unlock::before {
+.CDB-IconFont-close::before {
   content: '\E024';
 }
 
 
-.CDB-IconFont-unlockWithEllipsis::before {
+.CDB-IconFont-cartoFante::before {
   content: '\E025';
 }
 
 
-.CDB-IconFont-gift::before {
+.CDB-IconFont-lock::before {
   content: '\E026';
 }
 
 
-.CDB-IconFont-people::before {
+.CDB-IconFont-cartoDB::before {
   content: '\E027';
 }
 
 
-.CDB-IconFont-play::before {
+.CDB-IconFont-lens::before {
   content: '\E028';
 }
 
 
-.CDB-IconFont-add::before {
+.CDB-IconFont-closeLimits::before {
   content: '\E029';
 }
 
 
-.CDB-IconFont-map::before {
+.CDB-IconFont-defaultUser::before {
   content: '\E02A';
 }
 
 
-.CDB-IconFont-anchor::before {
+.CDB-IconFont-cockroach::before {
   content: '\E02B';
 }
 
 
-.CDB-IconFont-key::before {
+.CDB-IconFont-floppy::before {
   content: '\E02C';
 }
 
 
-.CDB-IconFont-calendar::before {
+.CDB-IconFont-trash::before {
   content: '\E02D';
 }
 
 
-.CDB-IconFont-document::before {
+.CDB-IconFont-wifi::before {
   content: '\E02E';
 }
 
 
-.CDB-IconFont-eye::before {
+.CDB-IconFont-unlock::before {
   content: '\E02F';
 }
 
 
-.CDB-IconFont-marker::before {
+.CDB-IconFont-unlockWithEllipsis::before {
   content: '\E030';
 }
 
 
-.CDB-IconFont-progressBar::before {
+.CDB-IconFont-gift::before {
   content: '\E031';
 }
 
 
-.CDB-IconFont-book::before {
+.CDB-IconFont-people::before {
   content: '\E032';
 }
 
 
-.CDB-IconFont-notes::before {
+.CDB-IconFont-play::before {
   content: '\E033';
 }
 
 
-.CDB-IconFont-rectangles::before {
+.CDB-IconFont-add::before {
   content: '\E034';
 }
 
 
-.CDB-IconFont-mountain::before {
+.CDB-IconFont-map::before {
   content: '\E035';
 }
 
 
-.CDB-IconFont-points::before {
+.CDB-IconFont-anchor::before {
   content: '\E036';
 }
 
 
-.CDB-IconFont-snake::before {
+.CDB-IconFont-key::before {
   content: '\E037';
 }
 
 
-.CDB-IconFont-boss::before {
+.CDB-IconFont-calendar::before {
   content: '\E038';
 }
 
 
-.CDB-IconFont-rocket::before {
+.CDB-IconFont-document::before {
   content: '\E039';
 }
 
 
-.CDB-IconFont-barometer::before {
+.CDB-IconFont-eye::before {
   content: '\E03A';
 }
 
 
-.CDB-IconFont-dollar::before {
+.CDB-IconFont-marker::before {
   content: '\E03B';
 }
 
 
-.CDB-IconFont-email::before {
+.CDB-IconFont-progressBar::before {
   content: '\E03C';
 }
 
 
-.CDB-IconFont-label::before {
+.CDB-IconFont-book::before {
   content: '\E03D';
 }
 
 
-.CDB-IconFont-outside::before {
+.CDB-IconFont-notes::before {
   content: '\E03E';
 }
 
 
-.CDB-IconFont-jigsaw::before {
+.CDB-IconFont-rectangles::before {
   content: '\E03F';
 }
 
 
-.CDB-IconFont-tools::before {
+.CDB-IconFont-mountain::before {
   content: '\E040';
 }
 
 
-.CDB-IconFont-question::before {
+.CDB-IconFont-points::before {
   content: '\E041';
 }
 
 
-.CDB-IconFont-layerStack::before {
+.CDB-IconFont-snake::before {
   content: '\E042';
 }
 
 
-.CDB-IconFont-alarm::before {
+.CDB-IconFont-boss::before {
   content: '\E043';
 }
 
 
-.CDB-IconFont-cloudDownArrow::before {
+.CDB-IconFont-rocket::before {
   content: '\E044';
 }
 
 
-.CDB-IconFont-pencil::before {
+.CDB-IconFont-barometer::before {
   content: '\E045';
 }
 
 
-.CDB-IconFont-fountainPen::before {
+.CDB-IconFont-dollar::before {
   content: '\E046';
 }
 
 
-.CDB-IconFont-emptyDoc::before {
+.CDB-IconFont-email::before {
   content: '\E047';
 }
 
 
-.CDB-IconFont-mergeArrow::before {
+.CDB-IconFont-label::before {
   content: '\E048';
 }
 
 
-.CDB-IconFont-mergeColumns::before {
+.CDB-IconFont-outside::before {
   content: '\E049';
 }
 
 
-.CDB-IconFont-mergeSpatial::before {
+.CDB-IconFont-jigsaw::before {
   content: '\E04A';
 }
 
 
-.CDB-IconFont-globe::before {
+.CDB-IconFont-tools::before {
   content: '\E04B';
 }
 
 
-.CDB-IconFont-chevronDown::before {
+.CDB-IconFont-question::before {
   content: '\E04C';
 }
 
 
-.CDB-IconFont-streets::before {
+.CDB-IconFont-layerStack::before {
   content: '\E04D';
 }
 
 
-.CDB-IconFont-keys::before {
+.CDB-IconFont-alarm::before {
   content: '\E04E';
 }
 
 
-.CDB-IconFont-facebookSquare::before {
+.CDB-IconFont-cloudDownArrow::before {
   content: '\E04F';
 }
 
 
-.CDB-IconFont-fullscreen::before {
+.CDB-IconFont-pencil::before {
   content: '\E050';
 }
 
 
-.CDB-IconFont-rArrowLight::before {
+.CDB-IconFont-fountainPen::before {
   content: '\E051';
 }
 
 
-.CDB-IconFont-share::before {
+.CDB-IconFont-emptyDoc::before {
   content: '\E052';
 }
 
 
-.CDB-IconFont-linkedin::before {
+.CDB-IconFont-mergeArrow::before {
   content: '\E053';
 }
 
 
-.CDB-IconFont-calendarBlank::before {
+.CDB-IconFont-mergeColumns::before {
   content: '\E054';
 }
 
 
-.CDB-IconFont-creativeCommons::before {
+.CDB-IconFont-mergeSpatial::before {
   content: '\E055';
 }
 
 
-.CDB-IconFont-bubble::before {
+.CDB-IconFont-globe::before {
   content: '\E056';
 }
 
 
-.CDB-IconFont-bars::before {
+.CDB-IconFont-chevronDown::before {
   content: '\E057';
 }
 
 
-.CDB-IconFont-arrowMenuLight::before {
+.CDB-IconFont-streets::before {
   content: '\E058';
 }
 
 
-.CDB-IconFont-tieFighter::before {
+.CDB-IconFont-keys::before {
   content: '\E059';
 }
 
 
-.CDB-IconFont-ray::before {
+.CDB-IconFont-facebookSquare::before {
   content: '\E05A';
 }
 
 
-.CDB-IconFont-markup::before {
+.CDB-IconFont-fullscreen::before {
   content: '\E05B';
 }
 
 
-.CDB-IconFont-table::before {
+.CDB-IconFont-rArrowLight::before {
   content: '\E05C';
 }
 
 
-.CDB-IconFont-airlock::before {
+.CDB-IconFont-share::before {
   content: '\E05D';
 }
 
 
-.CDB-IconFont-pin::before {
+.CDB-IconFont-linkedin::before {
   content: '\E05E';
 }
 
 
-.CDB-IconFont-attache::before {
+.CDB-IconFont-calendarBlank::before {
   content: '\E05F';
 }
 
 
-.CDB-IconFont-download::before {
+.CDB-IconFont-creativeCommons::before {
   content: '\E060';
 }
 
 
-.CDB-IconFont-group::before {
+.CDB-IconFont-bubble::before {
   content: '\E061';
 }
 
 
-.CDB-IconFont-dashboard::before {
+.CDB-IconFont-bars::before {
   content: '\E062';
 }
 
 
-.CDB-IconFont-spinner::before {
+.CDB-IconFont-arrowMenuLight::before {
   content: '\E063';
 }
 
 
-.CDB-IconFont-mapsearch::before {
+.CDB-IconFont-tieFighter::before {
   content: '\E064';
 }
 
 
-.CDB-IconFont-rArrow::before {
+.CDB-IconFont-ray::before {
   content: '\E065';
 }
+
+
+.CDB-IconFont-markup::before {
+  content: '\E066';
+}
+
+
+.CDB-IconFont-table::before {
+  content: '\E067';
+}
+
+
+.CDB-IconFont-airlock::before {
+  content: '\E068';
+}
+
+
+.CDB-IconFont-pin::before {
+  content: '\E069';
+}
+
+
+.CDB-IconFont-attache::before {
+  content: '\E06A';
+}
+
+
+.CDB-IconFont-download::before {
+  content: '\E06B';
+}
+
+
+.CDB-IconFont-group::before {
+  content: '\E06C';
+}
+
+
+.CDB-IconFont-dashboard::before {
+  content: '\E06D';
+}
+
+
+.CDB-IconFont-spinner::before {
+  content: '\E06E';
+}
+
+
+.CDB-IconFont-mapsearch::before {
+  content: '\E06F';
+}
+
+
+.CDB-IconFont-rArrow::before {
+  content: '\E070';
+}

src/scss/cdb-utilities/defaults.css.scss

@@ -3,6 +3,10 @@
 
 @import '../cdb-variables/colors';
 
+body {
+  color: $cMainText;
+}
+
 a {
   color: $cBlue;
   text-decoration: none;

src/scss/cdb-utilities/fonts.scss

@@ -1,25 +1,30 @@
 // Fonts
-// - They are being loaded from Google fonts
 // --------------------------------------------------
 
 @font-face {
   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: url('../fonts/OpenSans-Light.eot');
+  src: url('../fonts/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
+  url('../fonts/OpenSans-Light.woff') format('woff'),
+  url('../fonts/OpenSans-Light.ttf') format('truetype');
 }
 @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: url('../fonts/OpenSans-Regular.eot');
+  src: url('../fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
+  url('../fonts/OpenSans-Regular.woff') format('woff'),
+  url('../fonts/OpenSans-Regular.ttf') format('truetype');
 }
 @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: url('../fonts/OpenSans-Semibold.eot');
+  src: url('../fonts/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'),
+  url('../fonts/OpenSans-Semibold.woff') format('woff'),
+  url('../fonts/OpenSans-Semibold.ttf') format('truetype');
 }

src/scss/cdb-utilities/helpers.scss

@@ -2,7 +2,9 @@
 // ----------------------------------------------
 
 @import './mixins';
+@import '../cdb-variables/colors';
 
+/* Margins */
 .u-tSpace {
   margin-top: 4px;
 }
@@ -24,19 +26,58 @@
 .u-rSpace--xl {
   margin-right: 12px;
 }
-.u-lSpace {
-  margin-left: 4px;
-}
-.u-lSpace--xl {
-  margin-left: 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;
+}
+
+// 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;
+}
+.u-alertTextColor {
+  color: $cAlert;
+}
+.u-whiteTextColor {
+  color: $cWhite;
+}
+.u-errorTextColor {
+  color: $cError;
+}
+
+/* Displays */
 .u-iBlock {
   @include inline-block();
 }
@@ -47,6 +88,39 @@
   display: none !important;
 }
 
+/* Decoration */
+.u-upperCase {
+  text-transform: uppercase;
+}
+
+/* Flex */
+.u-flex {
+  @include display-flex();
+}
+.u-justifySpace {
+  @include justify-content(space-between);
+}
+.u-justifyCenter {
+  @include justify-content(center);
+}
+.u-justifyStart {
+  @include justify-content(flex-start);
+}
+.u-justifyEnd {
+  @include justify-content(flex-end);
+}
+.u-alignStart {
+  @include align-items(flex-start);
+}
+.u-alignCenter {
+  @include align-items(center);
+}
+.u-alignEnd {
+  @include align-items(flex-end);
+}
+
+
+/* Media queries*/
 @include media-query-mobile() {
   .u-showDesktop {
     display: none !important;
@@ -55,3 +129,10 @@
     display: block !important;
   }
 }
+
+/* helper mixins */
+@mixin default-form-error-style() {
+  border: 1px solid rgba($cError, 0.48);
+  background: rgba($cError, 0.04);
+  color: $cError;
+}

src/scss/cdb-variables/_colors.scss

@@ -2,10 +2,10 @@
 // ----------------------------------------------
 
 // General
-$cBlue: #3AA9E3;
+$cBlue: #1181FB;
 $cBlack: #000;
 $cWhite: #FFF;
-$cMainDark: #2E3C43;
+$cMainBg: #2E3C43;
 
 //Structure
 $cSecondaryDark: #282C2F;
@@ -18,9 +18,10 @@ $cMainLine: #DDD;
 $cSecondaryLine: #EEE;
 
 //Typography
-$cTypo2: #636D72;
-$cTypo3: #979EA1;
-$cTypo4: #CBCED0;
+$cMainText: #2E3C43;
+$cSecondaryText: #636D72;
+$cAltText: #979EA1;
+$cHintText: #CBCED0;
 
 //Others
 $cHighlight: #9DE0AD;

src/scss/cdb-variables/_sizes.scss

@@ -7,6 +7,7 @@ $mobileLayout: 280px;
 
 //Base
 $baseSize: 8px;
+$halfBaseSize: $baseSize / 2;
 
 // Margins
 $sMargin-section: 24px; // To separate main section

styleguide/_template.html

@@ -47,7 +47,7 @@
     });
 </script>
 
-<div id="styleguide-menu">
+<div class="CDB-Text" id="styleguide-menu">
 	<ul>
     <li>
       <a class="submenulink" href="#Basics" data-section="Basics">Basics</a>
@@ -73,881 +73,21 @@
 <div id="styleguide">
   <div class="section" id="Basics" data-section="Basics" data-heading="Basics">
     <div class="comment">
-      <h1>Basics</h1>
-      <p>Important notes about this styleguide</p>
+      <h1 class="CDB-Text CDB-Size-huge is-semibold">Basics</h1>
+      <p class="CDB-Text u-tSpace-xl">Important notes about this styleguide</p>
     </div>
     <div class="result">
-      <p>This is a preliminar WIP of the new dashboard stylesheet, based on the naming conventions of <a href="https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md">suitcss</a> and <a href="https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06">Medium’s CSS is actually pretty good.</a></p>
+      <p class="CDB-Text">This is a preliminar WIP of the new dashboard stylesheet, based on the naming conventions of <a href="https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md">suitcss</a> and <a href="https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06">Medium’s CSS is actually pretty good.</a></p>
 
-      <p><strong>General rules</strong></p>
+      <p class="CDB-Text is-semibold u-tSpace-xl">General rules</p>
 
-      <ul>
-        <li>All new elements added in this repository should have included a 'CDB-' namespace.</li>
-        <li>
-          <strong>Don't create default styles for common elements</strong> (e.g. <code>input { padding: 10px 0 }</code>). It will make more difficult edit styles for the future custom elements and the <code>!important</code> use will grow.</li>
-        <li>
-          <strong>Avoid creating new classes with only one attribute</strong> (e.g. <code>.marginRight { margin-right: 10px }</code> ). It is impossible to manage the amount of cases we would like to cover.</li>
+      <ul class="styleguide-list CDB-Text u-tSpace-xl">
+        <li class="u-tSpace">All new elements added in this repository should have included a 'CDB-' namespace.</li>
+        <li class="u-tSpace">
+          <span class="CDB-Text is-semibold">Don't create default styles for common elements</span> (e.g. <code>input { padding: 10px 0 }</code>). It will make more difficult edit styles for the future custom elements and the <code>!important</code> use will grow.</li>
+        <li class="u-tSpace">
+          <span class="CDB-Text is-semibold">Avoid creating new classes with only one attribute</span> (e.g. <code>.marginRight { margin-right: 10px }</code> ). It is impossible to manage the amount of cases we would like to cover.</li>
       </ul>
-
-      <hr>
-
-      <p><strong>Table of contents</strong></p>
-
-      <ul>
-        <li>
-          <a href="#components">Components</a>
-
-          <ul>
-            <li><a href="#componentname">ComponentName</a></li>
-            <li><a href="#componentname--modifiername">ComponentName--modifierName</a></li>
-            <li><a href="#componentname-descendentname">ComponentName-descendentName</a></li>
-            <li><a href="#componentnameis-stateofcomponent">ComponentName.is-stateOfComponent</a></li>
-          </ul>
-        </li>
-        <li><a href="#javascript">JavaScript</a></li>
-        <li><a href="#structure-sample">Structure sample</a></li>
-        <li><a href="#a-word-on-precompilers">Precompilers</a></li>
-        <li><a href="#colors">Colors</a></li>
-        <li><a href="#z-index">Z-Index</a></li>
-        <li>
-          <a href="#formatting">Formatting</a>
-
-          <ul>
-            <li><a href="#spacing">Spacing</a></li>
-            <li><a href="#quotes">Quotes</a></li>
-            <li><a href="#colors-1">Colors</a></li>
-          </ul>
-        </li>
-        <li><a href="#things-to-add-to-the-guide">Things to add to the guide</a></li>
-      </ul>
-
-      <hr>
-
-      <h2>
-        <a id="components" class="anchor" href="#components" aria-hidden="true"><span class="octicon octicon-link"></span></a>Components</h2>
-
-      <p>Syntax: <code>&lt;ComponentName&gt;[--modifierName|-descendentName]</code></p>
-
-      <h4>
-        <a id="componentname" class="anchor" href="#componentname" aria-hidden="true"><span class="octicon octicon-link"></span></a>ComponentName</h4>
-
-      <p>The component's name <strong>must be written in camel case</strong>.</p>
-
-<div class="highlight highlight-source-css"><pre><span class="pl-e">.MyComponent</span> { <span class="pl-c">/* … */</span> }</pre></div>
-
-      <div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">article</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>MyComponent<span class="pl-pds">"</span></span>&gt;
-  …
-&lt;/<span class="pl-ent">article</span>&gt;</pre></div>
-
-<h4>
-  <a id="componentname--modifiername" class="anchor" href="#componentname--modifiername" aria-hidden="true"><span class="octicon octicon-link"></span></a>ComponentName--modifierName</h4>
-
-<p>A component modifier is a class that modifies the presentation of the base component in some form. </p>
-
-<ol>
-  <li>Modifier names <strong>must be written in camel case</strong> and be <strong>separated from the component name by two hyphens</strong>. </li>
-  <li>
-    <strong>The class should be included in the HTML in addition to the base component class</strong>.</li>
-</ol>
-
-<div class="highlight highlight-source-css"><pre><span class="pl-c">/* Core button */</span>
-<span class="pl-e">.Btn</span> { <span class="pl-c">/* … */</span> }
-
-<span class="pl-c">/* Default button style */</span>
-<span class="pl-e">.Btn--default</span> { <span class="pl-c">/* … */</span> }</pre></div>
-
-<div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">article</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>Btn Btn--default<span class="pl-pds">"</span></span>&gt;
-  …
-&lt;/<span class="pl-ent">article</span>&gt;</pre></div>
-
-<h4>
-  <a id="componentname-descendentname" class="anchor" href="#componentname-descendentname" aria-hidden="true"><span class="octicon octicon-link"></span></a>ComponentName-descendentName</h4>
-
-<ol>
-  <li>A component descendent is a class that is attached to a descendent node of a component. </li>
-  <li>It's responsible for applying presentation directly to the descendent on behalf of a particular component. </li>
-  <li>
-    <strong>Descendent names must be written in camel case</strong>.</li>
-</ol>
-
-<div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">article</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>Tweet<span class="pl-pds">"</span></span>&gt;
-  &lt;<span class="pl-ent">header</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>Tweet-header<span class="pl-pds">"</span></span>&gt;
-    &lt;<span class="pl-ent">img</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>Tweet-avatar<span class="pl-pds">"</span></span> <span class="pl-e">src</span>=<span class="pl-s"><span class="pl-pds">"</span>{{src}}<span class="pl-pds">"</span></span> <span class="pl-e">alt</span>=<span class="pl-s"><span class="pl-pds">"</span>{{alt}}<span class="pl-pds">"</span></span>&gt;
-    …
-  &lt;/<span class="pl-ent">header</span>&gt;
-  &lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>Tweet-bodyText<span class="pl-pds">"</span></span>&gt;
-    …
-  &lt;/<span class="pl-ent">div</span>&gt;
-&lt;/<span class="pl-ent">article</span>&gt;</pre></div>
-
-<h4>
-  <a id="componentnameis-stateofcomponent" class="anchor" href="#componentnameis-stateofcomponent" aria-hidden="true"><span class="octicon octicon-link"></span></a>ComponentName.is-stateOfComponent</h4>
-
-<p>Use <code>is-stateName</code> to reflect changes to a component's state. </p>
-
-<ol>
-  <li>The state name <strong>must be camel case</strong>. </li>
-  <li>
-    <strong>Never style these classes directly</strong>: they should always be used as an adjoining class.</li>
-</ol>
-
-<p>This means that the same state names can be used in multiple contexts, but every component must define its own styles for the state (as they are scoped to the component).</p>
-
-<p><strong>Right:</strong></p>
-
-<div class="highlight highlight-source-css"><pre><span class="pl-e">.Tweet</span> { <span class="pl-c">/* … */</span> }
-<span class="pl-e">.Tweet.is-expanded</span> { <span class="pl-c">/* … */</span> }
-
-&lt;<span class="pl-ent">article</span> class="Tweet is-expanded"&gt;
-  …
-&lt;/<span class="pl-ent">article</span>&gt;</pre></div>
-
-<p><strong>Wrong:</strong></p>
-
-<div class="highlight highlight-source-css"><pre><span class="pl-e">.Tweet</span> { <span class="pl-c">/* … */</span> }
-<span class="pl-e">.Tweet.expanded</span> { <span class="pl-c">/* … */</span> }</pre></div>
-
-<div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">article</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>Tweet expanded<span class="pl-pds">"</span></span>&gt;
-  …
-&lt;/<span class="pl-ent">article</span>&gt;</pre></div>
-
-<p>We should always rely on the same terminology to express state of a component: i.e.: a common term for <code>is-active</code>, <code>is-expanded</code>, <code>is-selected</code>, <code>is-highlighted</code>, ... </p>
-
-<h2>
-  <a id="javascript" class="anchor" href="#javascript" aria-hidden="true"><span class="octicon octicon-link"></span></a>JavaScript</h2>
-
-<p>Syntax: <code>js-&lt;targetName&gt;</code></p>
-
-<p>JavaScript-specific classes reduce the risk that changing the structure or theme of components will inadvertently affect any required JavaScript behaviour and complex functionality. It is not neccesarry to use them in every case, just think of them as a tool in your utility belt. If you are creating a class, which you dont intend to use for styling, but instead only as a selector in JavaScript, you should probably be adding the js- prefix. In practice this looks like this:</p>
-
-<div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">a</span> <span class="pl-e">href</span>=<span class="pl-s"><span class="pl-pds">"</span>/login<span class="pl-pds">"</span></span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>Btn Btn-primary js-login<span class="pl-pds">"</span></span>&gt;&lt;/<span class="pl-ent">a</span>&gt;</pre></div>
-
-<p><strong>JavaScript-specific classes should not, under any circumstances, be styled.</strong></p>
-
-<hr>
-
-<h2>
-  <a id="a-word-on-precompilers" class="anchor" href="#a-word-on-precompilers" aria-hidden="true"><span class="octicon octicon-link"></span></a>A word on (Pre)compilers</h2>
-
-<p>Since we use Rails as a backend, we make use of Sprockets to make all the dirty work with stylesheets (and javascripts). Many of the stylesheets are constructed by simply writing <code>require_directory</code> —<a href="http://markdotto.com/2014/07/23/githubs-css/">this is awesome, but it also kind of sucks</a>.</p>
-
-<p>Preferably we should use <code>@import</code> instead of <code>require</code> when possible.
-  <a href="http://pivotallabs.com/structure-your-sass-files-with-import/">http://pivotallabs.com/structure-your-sass-files-with-import/</a></p>
-
-<p>When using require we should list the required files in the order they must be applied, as an added control to avoid undesired behaviours.</p>
-
-<p><strong>Bad:</strong></p>
-
-<pre><code>/*
-*= require dashboard/header
-*= require dashboard/table
-*/
-</code></pre>
-
-<p><strong>Worse:</strong></p>
-
-<pre><code>/*
-*= require_tree dashboard
-*/
-</code></pre>
-
-<p><strong>Good:</strong></p>
-
-<pre><code>@import "dashboard/header";
-@import "dashboard/tables";
-</code></pre>
-
-<p><strong>Better:</strong></p>
-
-<pre><code>@import
-"dashboard/header",
-"dashboard/tables";
-</code></pre>
-
-<hr>
-
-<h2>
-  <a id="structure-sample" class="anchor" href="#structure-sample" aria-hidden="true"><span class="octicon octicon-link"></span></a>Structure sample</h2>
-
-<pre><code>
-.Btn {}
-
-  .Btn--m {}
-
-  .Btn--highlight {}
-
-  .Btn--green {}
-
-  .Btn.is-active {}
-
-.Menu {}
-
-  .Menu-item {}
-
-  .Menu-link {}
-
-.Header {}
-
-  .Navbar {}
-
-    .Navbar-header {}
-
-      .Navbar-brand {}
-
-      .Navbar-searchField {}
-
-      .Navbar-searchButton {}
-
-    .Navbar-menu {}
-
-      .Navbar-menuItem {}
-
-      .Navbar-menuLink {}
-
-.Dashboard {}
-
-  .Dashboard-header {}
-
-    .Dashboard-avatar {}
-
-    .Dashboard-title {}
-
-    .Dashboard-menu {}
-
-  .Dashboard-subHeader {}
-
-    .Dashboard-subMenu {}
-
-      .Dashboard-subMenuItem {}
-
-      .Dashboard-subMenuLink {}
-
-
-.Block {}
-
-  .Block-thumbnail {}
-
-  .Block-title {}
-
-  .Block-description {}
-
-  .Block-tags {}
-
-  .Block-status {}
-
-  .Block-footer {}
-</code></pre>
-
-  <hr>
-
-  <h2>
-    <a id="colors" class="anchor" href="#colors" aria-hidden="true"><span class="octicon octicon-link"></span></a>Colors</h2>
-
-  <h4>
-    <a id="colorsscss" class="anchor" href="#colorsscss" aria-hidden="true"><span class="octicon octicon-link"></span></a>colors.scss</h4>
-
-  <p>Syntax: <code>$c&lt;colorName&gt;</code></p>
-
-  <h4>
-    <a id="sample" class="anchor" href="#sample" aria-hidden="true"><span class="octicon octicon-link"></span></a>Sample</h4>
-
-  <div class="highlight highlight-source-css"><pre>// Colors
-// --------------------------------------------------
-// Paragraphs
-$cTypography-headers:           rgba(#333, 1);
-$cTypography-paragraphs:        rgba(#666, 1);
-$cTypography-secondary:         rgba(#999, 1);
-$cTypography-help:              rgba(<span class="pl-e">#CCC</span>, 1);
-$cTypography-headersOverBlack:  rgba(<span class="pl-e">#FFF</span>, 1);
-$cTypography-<span class="pl-ent">link</span>:              rgba(#0090D7, 1);
-$cTypography-linkHover:         rgba(#62B4E3, 1);
-$cTypography-linkSelected:      rgba(#333, 1);
-
-// Structure
-$cStructure-mainBkg:  rgba(<span class="pl-e">#FFF</span>, 1);
-$cStructure-mainLine: rgba(<span class="pl-e">#DDD</span>, 1);
-$cStructure-grayBkg:  rgba(<span class="pl-e">#F9F9F9</span>, 1);
-$cStructure-softLine: rgba(<span class="pl-e">#EEE</span>, 1);
-
-// Highlight
-$cHighlight-main:     rgba(#0090D7, 1);
-$cHighlight-positive: rgba(#8FB83F, 1);
-$cHighlight-negative: rgba(<span class="pl-e">#C74B43</span>, 1);
-$cHighlight-alert:    rgba(<span class="pl-e">#C67B44</span>, 1);</pre></div>
-
-    <p>Don't use named colors, try to use meaningful names.</p>
-
-    <hr>
-
-    <h2>
-      <a id="z-index" class="anchor" href="#z-index" aria-hidden="true"><span class="octicon octicon-link"></span></a>Z-Index</h2>
-
-    <h4>
-      <a id="z-indexscss" class="anchor" href="#z-indexscss" aria-hidden="true"><span class="octicon octicon-link"></span></a>z-index.scss</h4>
-
-    <div class="highlight highlight-source-css"><pre>// Z-Index Scale (private vars)
-// --------------------------------------------------
-@zIndex-1:   100;
-@zIndex-2:   200;
-@zIndex-3:   300;
-@zIndex-4:   400;
-@zIndex-5:   500;
-@zIndex-6:   600;
-@zIndex-7:   700;
-@zIndex-8:   800;
-@zIndex-9:   900;
-@zIndex-10: 1000;</pre></div>
-
-      <h4>
-        <a id="z-index-file-use" class="anchor" href="#z-index-file-use" aria-hidden="true"><span class="octicon octicon-link"></span></a>z-index file use</h4>
-
-<pre><code>// Z-Index Applications
-// --------------------------------------------------
-@zIndex-1--screenForeground:        @zIndex-1;
-@zIndex-1--followUpVisibility:      @zIndex-1;
-@zIndex-1--prlWelcome:              @zIndex-1;
-@zIndex-1--appImageDropdown:        @zIndex-1;
-@zIndex-1--surfaceUnder:            @zIndex-1;
-@zIndex-1--blockGroup:              @zIndex-1;
-
-(…)
-
-@zIndex-9--zoomOverlayTarget:       @zIndex-9;
-@zIndex-9--navOverlayTouch:         @zIndex-9;
-@zIndex-9--overlay:                 @zIndex-9;
-@zIndex-9--dialog:                  @zIndex-9;
-@zIndex-9--tooltip:                 @zIndex-9;
-</code></pre>
-
-        <hr>
-
-        <h2>
-          <a id="formatting" class="anchor" href="#formatting" aria-hidden="true"><span class="octicon octicon-link"></span></a>Formatting</h2>
-
-        <p>From: <a href="https://gist.github.com/fat/a47b882eb5f84293c4ed">https://gist.github.com/fat/a47b882eb5f84293c4ed</a></p>
-
-        <p>The following are some high level page formatting style rules.</p>
-
-        <p><a name="user-content-property-value"></a></p>
-
-        <h3>
-          <a id="property-value" class="anchor" href="#property-value" aria-hidden="true"><span class="octicon octicon-link"></span></a>Property: value</h3>
-
-        <p>There should be a blank space between a property and a value:</p>
-
-        <p><strong>Right:</strong></p>
-
-<div class="highlight highlight-source-css"><pre><span class="pl-e">.content-edit</span> { <span class="pl-c1"><span class="pl-c1">background</span></span>: <span class="pl-c1">red</span> }</pre></div>
-
-        <p><strong>Wrong:</strong></p>
-
-<div class="highlight highlight-source-css"><pre><span class="pl-e">.content-edit</span> {<span class="pl-c1"><span class="pl-c1">background</span></span>:<span class="pl-c1">red</span>}</pre></div>
-
-        <p>If you have to define an only one property, leave blank spaces between brackets.</p>
-
-        <p><a name="user-content-spacing"></a></p>
-
-        <h3>
-          <a id="spacing" class="anchor" href="#spacing" aria-hidden="true"><span class="octicon octicon-link"></span></a>Spacing</h3>
-
-        <p>CSS rules should be comma seperated but live on new lines:</p>
-
-        <p><strong>Right:</strong></p>
-
-        <div class="highlight highlight-source-css"><pre><span class="pl-e">.content</span>,
-<span class="pl-e">.content-edit</span> {
-  …
-}</pre></div>
-
-        <p><strong>Wrong:</strong></p>
-
-        <div class="highlight highlight-source-css"><pre><span class="pl-e">.content</span>, <span class="pl-e">.content-edit</span> {
-  …
-}</pre></div>
-
-        <p>CSS blocks should be seperated by a single new line. not two. not 0.</p>
-
-        <p><strong>Right:</strong></p>
-
-        <div class="highlight highlight-source-css"><pre><span class="pl-e">.content</span> {
-  …
-}
-<span class="pl-e">.content-edit</span> {
-  …
-}</pre></div>
-
-        <p><strong>Wrong:</strong></p>
-
-        <div class="highlight highlight-source-css"><pre><span class="pl-e">.content</span> {
-  …
-}
-
-<span class="pl-e">.content-edit</span> {
-  …
-}</pre></div>
-
-        <hr>
-
-        <h3>
-          <a id="quotes" class="anchor" href="#quotes" aria-hidden="true"><span class="octicon octicon-link"></span></a>Quotes</h3>
-
-        <p>Quotes are optional in CSS and LESS. We use double quotes as it is visually clearer that the string is not a selector or a style property.</p>
-
-        <p><strong>Right:</strong></p>
-
-        <div class="highlight highlight-source-css"><pre>background-image: url("/<span class="pl-ent">img</span>/you<span class="pl-e">.jpg</span>");
-font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial;</pre></div>
-
-        <p><strong>Wrong:</strong></p>
-
-        <div class="highlight highlight-source-css"><pre>background-image: url(/<span class="pl-ent">img</span>/you<span class="pl-e">.jpg</span>);
-font-family: Helvetica Neue Light, Helvetica Neue, Helvetica, Arial;</pre></div>
-
-        <hr>
-
-        <h3>
-          <a id="colors-1" class="anchor" href="#colors-1" aria-hidden="true"><span class="octicon octicon-link"></span></a>Colors</h3>
-
-        <p>When implementing feature styles, you should only be using color variables provided by colors.css.scss.</p>
-
-        <p>When adding a color variable to colors.css.scss, using RGB and RGBA color units are preferred over hex, named, HSL, or HSLA values.</p>
-
-        <p><strong>Right:</strong></p>
-
-        <div class="highlight highlight-source-css"><pre>rgb(50, 50, 50);
-rgba(50, 50, 50, 0<span class="pl-e">.2</span>);</pre></div>
-
-        <p><strong>Wrong:</strong></p>
-
-        <div class="highlight highlight-source-css"><pre><span class="pl-e">#FFF</span>;
-<span class="pl-e">#FFFFFF</span>;
-white;
-hsl(120, 100%, 50%);
-hsla(120, 100%, 50%, 1);</pre></div>
-
-        <hr>
-
-        <h3>
-          <a id="things-to-add-to-the-guide" class="anchor" href="#things-to-add-to-the-guide" aria-hidden="true"><span class="octicon octicon-link"></span></a>Things to add to the guide</h3>
-
-        <ol>
-          <li>Define a type scale (variables for font-sizes, weights, letter-spacing, line-heights, etc.).</li>
-          <li>
-            <code>.u-</code> prefixed class name for single purpose utility classes like .u-underline, .u-capitalize, etc. (not sure about this one)</li>
-          <li>Don't use compass predefined functions, create a mixin in new <code>mixins.css.scss</code>file.</li>
-          <li>No more clearfix or layout hacks, use flexbox:
-
-            <ul>
-              <li><a href="http://css-tricks.com/snippets/css/a-guide-to-flexbox/">http://css-tricks.com/snippets/css/a-guide-to-flexbox/</a></li>
-              <li><a href="http://chriswrightdesign.com/experiments/flexbox-adventures/">http://chriswrightdesign.com/experiments/flexbox-adventures/</a></li>
-            </ul>
-          </li>
-        </ol>
-
-        <hr>
-
-        <h3>
-          <a id="csscomb-config" class="anchor" href="#csscomb-config" aria-hidden="true"><span class="octicon octicon-link"></span></a>CSSComb config</h3>
-
-<pre><code>   "config": {
-
-        // Whether to add a semicolon after the last value/mixin.
-        "always-semicolon": true,
-
-        // Set indent for code inside blocks, including media queries and nested rules.
-        "block-indent": "  ",
-
-        // Unify case of hexadecimal colors.
-        "color-case": "lower",
-
-        // Whether to expand hexadecimal colors or use shorthands.
-        "color-shorthand": true,
-
-        // Unify case of element selectors.
-        "element-case": "lower",
-
-        // Add/remove line break at EOF.
-        "eof-newline": true,
-
-        // Add/remove leading zero in dimensions.
-        "leading-zero": false,
-
-        // Unify quotes style.
-        "quotes": "single",
-
-        // Remove all rulesets that contain nothing but spaces.
-        "remove-empty-rulesets": true,
-
-        // Set space after `:` in declarations.
-        "space-after-colon": " ",
-
-        // Set space after combinator (for example, in selectors like `p &gt; a`).
-        "space-after-combinator": " ",
-
-        // Set space after `{`.
-        "space-after-opening-brace": "\n",
-
-        // Set space after selector delimiter.
-        "space-after-selector-delimiter": "\n",
-
-        // Set space before `}`.
-        "space-before-closing-brace": "\n",
-
-        // Set space before `:` in declarations.
-        "space-before-colon": "",
-
-        // Set space before combinator (for example, in selectors like `p &gt; a`).
-        "space-before-combinator": " ",
-
-        // Set space before `{`.
-        "space-before-opening-brace": " ",
-
-        // Set space before selector delimiter.
-        "space-before-selector-delimiter": "",
-
-        // Set space between declarations (i.e. `color: tomato`).
-        "space-between-declarations": "\n",
-
-        // Whether to trim trailing spaces.
-        "strip-spaces": true,
-
-        // Whether to remove units in zero-valued dimensions.
-        "unitless-zero": true,
-
-        // Whether to align prefixes in properties and values.
-        "vendor-prefix-align": true,
-
-        // Sort properties in particular order.
-        "sort-order": [
-            "position",
-            "top",
-            "right",
-            "bottom",
-            "left",
-            "z-index",
-            "display",
-            "float",
-            "width",
-            "min-width",
-            "max-width",
-            "height",
-            "min-height",
-            "max-height",
-            "-webkit-box-sizing",
-            "-moz-box-sizing",
-            "box-sizing",
-            "-webkit-appearance",
-            "-moz-appearance",
-            "appearance",
-            "padding",
-            "padding-top",
-            "padding-right",
-            "padding-bottom",
-            "padding-left",
-            "margin",
-            "margin-top",
-            "margin-right",
-            "margin-bottom",
-            "margin-left",
-            "overflow",
-            "overflow-x",
-            "overflow-y",
-            "-webkit-overflow-scrolling",
-            "-ms-overflow-x",
-            "-ms-overflow-y",
-            "-ms-overflow-style",
-            "clip",
-            "clear",
-            "src",
-            "font",
-            "font-family",
-            "font-size",
-            "font-weight",
-            "font-style",
-            "font-variant",
-            "font-size-adjust",
-            "font-stretch",
-            "font-effect",
-            "font-emphasize",
-            "font-emphasize-position",
-            "font-emphasize-style",
-            "font-smooth",
-            "-webkit-hyphens",
-            "-moz-hyphens",
-            "hyphens",
-            "line-height",
-            "color",
-            "text-align",
-            "-webkit-text-align-last",
-            "-moz-text-align-last",
-            "-ms-text-align-last",
-            "text-align-last",
-            "text-emphasis",
-            "text-emphasis-color",
-            "text-emphasis-style",
-            "text-emphasis-position",
-            "text-decoration",
-            "text-underline-position",
-            "-webkit-text-decoration-style",
-            "-moz-text-decoration-style",
-            "text-decoration-style",
-            "-moz-text-decoration-color",
-            "text-decoration-color",
-            "-moz-text-decoration-line",
-            "text-decoration-line",
-            "text-indent",
-            "-ms-text-justify",
-            "text-justify",
-            "text-outline",
-            "-ms-text-overflow",
-            "text-overflow",
-            "text-overflow-ellipsis",
-            "text-overflow-mode",
-            "text-shadow",
-            "text-transform",
-            "text-wrap",
-            "-webkit-text-size-adjust",
-            "-moz-text-size-adjust",
-            "-ms-text-size-adjust",
-            "text-size-adjust",
-            "letter-spacing",
-            "-ms-word-break",
-            "word-break",
-            "word-spacing",
-            "-ms-word-wrap",
-            "word-wrap",
-            "-moz-tab-size",
-            "-o-tab-size",
-            "tab-size",
-            "white-space",
-            "vertical-align",
-            "list-style",
-            "list-style-position",
-            "list-style-type",
-            "list-style-image",
-            "pointer-events",
-            "-webkit-touch-action",
-            "-ms-touch-action",
-            "touch-action",
-            "cursor",
-            "visibility",
-            "zoom",
-            "flex-direction",
-            "flex-order",
-            "flex-pack",
-            "flex-align",
-            "table-layout",
-            "empty-cells",
-            "caption-side",
-            "border-spacing",
-            "border-collapse",
-            "content",
-            "quotes",
-            "counter-reset",
-            "counter-increment",
-            "resize",
-            "-webkit-user-select",
-            "-moz-user-select",
-            "-ms-user-select",
-            "user-select",
-            "nav-index",
-            "nav-up",
-            "nav-right",
-            "nav-down",
-            "nav-left",
-            "background",
-            "background-color",
-            "background-image",
-            "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
-            "filter:progid:DXImageTransform.Microsoft.gradient",
-            "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
-            "filter",
-            "background-repeat",
-            "background-attachment",
-            "background-position",
-            "background-position-x",
-            "-ms-background-position-x",
-            "background-position-y",
-            "-ms-background-position-y",
-            "-webkit-background-clip",
-            "-moz-background-clip",
-            "background-clip",
-            "background-origin",
-            "-webkit-background-size",
-            "-moz-background-size",
-            "-o-background-size",
-            "background-size",
-            "border",
-            "border-width",
-            "border-style",
-            "border-color",
-            "border-top",
-            "border-top-width",
-            "border-top-style",
-            "border-top-color",
-            "border-right",
-            "border-right-width",
-            "border-right-style",
-            "border-right-color",
-            "border-bottom",
-            "border-bottom-width",
-            "border-bottom-style",
-            "border-bottom-color",
-            "border-left",
-            "border-left-width",
-            "border-left-style",
-            "border-left-color",
-            "-webkit-box-decoration-break",
-            "box-decoration-break",
-            "-webkit-border-radius",
-            "-moz-border-radius",
-            "border-radius",
-            "-webkit-border-top-left-radius",
-            "-moz-border-radius-topleft",
-            "border-top-left-radius",
-            "-webkit-border-top-right-radius",
-            "-moz-border-radius-topright",
-            "border-top-right-radius",
-            "-webkit-border-bottom-right-radius",
-            "-moz-border-radius-bottomright",
-            "border-bottom-right-radius",
-            "-webkit-border-bottom-left-radius",
-            "-moz-border-radius-bottomleft",
-            "border-bottom-left-radius",
-            "-webkit-border-image",
-            "-moz-border-image",
-            "-o-border-image",
-            "border-image",
-            "-webkit-border-image-source",
-            "-moz-border-image-source",
-            "-o-border-image-source",
-            "border-image-source",
-            "-webkit-border-image-slice",
-            "-moz-border-image-slice",
-            "-o-border-image-slice",
-            "border-image-slice",
-            "-webkit-border-image-width",
-            "-moz-border-image-width",
-            "-o-border-image-width",
-            "border-image-width",
-            "-webkit-border-image-outset",
-            "-moz-border-image-outset",
-            "-o-border-image-outset",
-            "border-image-outset",
-            "-webkit-border-image-repeat",
-            "-moz-border-image-repeat",
-            "-o-border-image-repeat",
-            "border-image-repeat",
-            "outline",
-            "outline-width",
-            "outline-style",
-            "outline-color",
-            "outline-offset",
-            "-webkit-box-shadow",
-            "-moz-box-shadow",
-            "box-shadow",
-            "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
-            "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
-            "opacity",
-            "-ms-interpolation-mode",
-            "-webkit-transition",
-            "-moz-transition",
-            "-ms-transition",
-            "-o-transition",
-            "transition",
-            "-webkit-transition-delay",
-            "-moz-transition-delay",
-            "-ms-transition-delay",
-            "-o-transition-delay",
-            "transition-delay",
-            "-webkit-transition-timing-function",
-            "-moz-transition-timing-function",
-            "-ms-transition-timing-function",
-            "-o-transition-timing-function",
-            "transition-timing-function",
-            "-webkit-transition-duration",
-            "-moz-transition-duration",
-            "-ms-transition-duration",
-            "-o-transition-duration",
-            "transition-duration",
-            "-webkit-transition-property",
-            "-moz-transition-property",
-            "-ms-transition-property",
-            "-o-transition-property",
-            "transition-property",
-            "-webkit-transform",
-            "-moz-transform",
-            "-ms-transform",
-            "-o-transform",
-            "transform",
-            "-webkit-transform-origin",
-            "-moz-transform-origin",
-            "-ms-transform-origin",
-            "-o-transform-origin",
-            "transform-origin",
-            "-webkit-animation",
-            "-moz-animation",
-            "-ms-animation",
-            "-o-animation",
-            "animation",
-            "-webkit-animation-name",
-            "-moz-animation-name",
-            "-ms-animation-name",
-            "-o-animation-name",
-            "animation-name",
-            "-webkit-animation-duration",
-            "-moz-animation-duration",
-            "-ms-animation-duration",
-            "-o-animation-duration",
-            "animation-duration",
-            "-webkit-animation-play-state",
-            "-moz-animation-play-state",
-            "-ms-animation-play-state",
-            "-o-animation-play-state",
-            "animation-play-state",
-            "-webkit-animation-timing-function",
-            "-moz-animation-timing-function",
-            "-ms-animation-timing-function",
-            "-o-animation-timing-function",
-            "animation-timing-function",
-            "-webkit-animation-delay",
-            "-moz-animation-delay",
-            "-ms-animation-delay",
-            "-o-animation-delay",
-            "animation-delay",
-            "-webkit-animation-iteration-count",
-            "-moz-animation-iteration-count",
-            "-ms-animation-iteration-count",
-            "-o-animation-iteration-count",
-            "animation-iteration-count",
-            "-webkit-animation-direction",
-            "-moz-animation-direction",
-            "-ms-animation-direction",
-            "-o-animation-direction",
-            "animation-direction",
-            "-webkit-text-orientation",
-            "-moz-text-orientation",
-            "-o-text-orientation",
-            "text-orientation",
-            "-ms-writing-mode",
-            "text-rendering",
-            "-webkit-font-smoothing",
-            "-moz-osx-font-smoothing",
-            "font-smoothing",
-            "direction",
-            "unicode-bidi"
-        ]
-    }
-</code></pre>
-
-
-
-
-
-
-
-
-
     </div>
   </div>
 
@@ -955,8 +95,8 @@ hsla(120, 100%, 50%, 1);</pre></div>
 		<div class="section" id="{{id}}" data-section="{{section}}" data-heading="{{heading}}">
 
             <div class="comment">
-                <h1>{{section}}{{#if heading}}/{{heading}}{{/if}}</h1>
-                {{{comment}}}
+                <h1 class="CDB-Text CDB-Size-huge is-semibold">{{section}}{{#if heading}}/{{heading}}{{/if}}</h1>
+                <div class="CDB-Text u-tSpace-xl">{{{comment}}}</div>
             </div>
 
             {{#if code}}

styleguide/theme.css

@@ -71,6 +71,11 @@
     box-shadow:         2px 2px 5px 0px rgba(50, 50, 50, 0.43);
 }
 
+.styleguide-list {
+    list-style: disc;
+    list-style-position: inside;
+}
+
 #styleguide-menu .submenu {
     display: none;
     background: rgba(0, 0, 0, 0.05);