diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index 0b83194..60e5afa 100644 Binary files a/src/fonts/cartoIcon.eot and b/src/fonts/cartoIcon.eot differ diff --git a/src/fonts/cartoIcon.ttf b/src/fonts/cartoIcon.ttf index 4caa8b4..4279ce3 100644 Binary files a/src/fonts/cartoIcon.ttf and b/src/fonts/cartoIcon.ttf differ diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff index c802060..cf2d67c 100644 Binary files a/src/fonts/cartoIcon.woff and b/src/fonts/cartoIcon.woff differ diff --git a/src/scss/cdb-components/avatars.scss b/src/scss/cdb-components/avatars.scss index 62a6fe4..772a210 100644 --- a/src/scss/cdb-components/avatars.scss +++ b/src/scss/cdb-components/avatars.scss @@ -16,7 +16,7 @@ User Name
  • - +
    • ``` @@ -44,7 +44,6 @@ border-left: 2px solid $cWhite; border-radius: 50px; background: $cSecondaryLine; - color: $cTypo2; } .CDB-AvatarList-itemMedia { diff --git a/src/scss/cdb-components/boxes.scss b/src/scss/cdb-components/boxes.scss index 948afe5..7289585 100644 --- a/src/scss/cdb-components/boxes.scss +++ b/src/scss/cdb-components/boxes.scss @@ -140,9 +140,9 @@ .CDB-BoxLoader-item { @include display-flex(); padding: $baseSize 0; - color: $cTypo2; + color: $cSecondaryText; &.is-working { - color: $cTypo3; + color: $cAltText; } } diff --git a/src/scss/cdb-components/colors.scss b/src/scss/cdb-components/colors.scss index 1fac96d..9eb8b8d 100644 --- a/src/scss/cdb-components/colors.scss +++ b/src/scss/cdb-components/colors.scss @@ -18,9 +18,9 @@ @import '../cdb-variables/colors'; .box { + display: inline-block; width: 120px; height: 64px; - display: inline-block; margin: 0 24px 24px 0; } @@ -28,15 +28,15 @@ background: $cBlue; } .Color-White { + border: 1px solid #E5E5E5; background: $cWhite; - border: 1px solid #e5e5e5; } .Color-Dark { background: $cBlack; } .Color-MainDark { - background: $cMainDark; + background: $cMainBg; } .Color-SecondaryDark { background: $cSecondaryDark; @@ -89,13 +89,13 @@ .Color-Type02 { - background: $cTypo2; + background: $cSecondaryText; } .Color-Type03 { - background: $cTypo3; + background: $cAltText; } .Color-Type04 { - background: $cTypo4; + background: $cHintText; } diff --git a/src/scss/cdb-components/forms/toggle.scss b/src/scss/cdb-components/forms/toggle.scss index e6dd65b..244dbdf 100644 --- a/src/scss/cdb-components/forms/toggle.scss +++ b/src/scss/cdb-components/forms/toggle.scss @@ -33,7 +33,7 @@ height: $baseSize * 2; margin: 0 2px; border-radius: 50px; - background: $cTypo4; + background: $cHintText; &::before { position: absolute; @@ -49,7 +49,7 @@ } &:checked + .CDB-ToggleFace { - background: $cMainDark; + background: $cMainBg; &::before { right: 2px; diff --git a/src/scss/cdb-components/headers.scss b/src/scss/cdb-components/headers.scss index 00a72b9..33c07dc 100644 --- a/src/scss/cdb-components/headers.scss +++ b/src/scss/cdb-components/headers.scss @@ -43,7 +43,7 @@
  • -

    Published 8 days ago

    +

    Published 8 days ago

    • @@ -111,7 +111,7 @@ -

    Positron by CartoDB

    +

    Positron by CartoDB

    @@ -144,7 +144,7 @@
    -

    Type

    +

    Type

    @@ -155,8 +155,8 @@
    -

    Histogram

    -

    Distribution of a numeric variable in a range

    +

    Histogram

    +

    Distribution of a numeric variable in a range

    @@ -186,13 +186,7 @@ margin-right: 0; } } -.CDB-HeaderInfo-Text { - color: $cTypo3; - - &.is-uppercase { - text-transform: uppercase; - } -} + .CDB-HeaderInfo-Inner { @include flex(1); } @@ -222,7 +216,7 @@ border: 1px solid $cMainLine; border-radius: 4px; background-color: $cWhite; - color: $cTypo3; + color: $cAltText; font-size: $sFontSize-small; line-height: 23px; text-align: center; diff --git a/src/scss/cdb-components/loader.scss b/src/scss/cdb-components/loader.scss index 07e066b..23d72b8 100644 --- a/src/scss/cdb-components/loader.scss +++ b/src/scss/cdb-components/loader.scss @@ -67,7 +67,7 @@ This is the generic loader for widgets, maps, components, ... border: 2px solid $cMainLine; border-radius: 50%; &.is-grey { - border: 2px solid $cTypo2; + border: 2px solid $cSecondaryText; } } @@ -105,12 +105,12 @@ This is the generic loader for widgets, maps, components, ... background: $cWhite; } &.is-grey { - background: linear-gradient(to right, $cMainDark 10%, rgba($cWhite, 0) 42%); + background: linear-gradient(to right, $cMainBg 10%, rgba($cWhite, 0) 42%); &::before { - background: $cTypo2; + background: $cSecondaryText; } &::after { - background: $cMainDark; + background: $cMainBg; } } } diff --git a/src/scss/cdb-components/menu.scss b/src/scss/cdb-components/menu.scss index bcf7e13..e5cbc89 100644 --- a/src/scss/cdb-components/menu.scss +++ b/src/scss/cdb-components/menu.scss @@ -18,10 +18,10 @@ POP-UP @@ -97,8 +97,8 @@ } .CDB-NavMenu-Item.is-active .CDB-NavMenu-Link { - border-bottom: 1px solid $cMainDark; - color: $cMainDark; + border-bottom: 1px solid $cMainLine; + color: $cMainText; } .CDB-NavSubmenu { @@ -118,26 +118,25 @@ .CDB-NavSubmenu-item.is-active { .CDB-NavSubmenu-Link { - border-bottom: 1px solid $cTypo3; - color: $cMainDark; + border-bottom: 1px solid $cMainLine; + color: $cMainText; } } .CDB-NavSubmenu-Status { margin-left: 2px; - color: $cTypo4; } .CDB-Navmenu.is-dark { .CDB-NavMenu-Inner, .CDB-NavSubmenu { - border-bottom: 1px solid $cTypo2; + border-bottom: 1px solid $cSecondaryText; } .CDB-NavMenu-Link, .CDB-NavSubmenu-Link { - color: $cTypo3; + color: $cAltText; } .CDB-NavMenu-Item.is-active { @@ -155,7 +154,7 @@ } .CDB-NavSubmenu-Status { - color: $cTypo2; + color: $cSecondaryText; } } diff --git a/src/scss/cdb-components/shapes/add.scss b/src/scss/cdb-components/shapes/add.scss index 570d5b4..a6b78ec 100644 --- a/src/scss/cdb-components/shapes/add.scss +++ b/src/scss/cdb-components/shapes/add.scss @@ -65,7 +65,7 @@ Description bottom: 7px; left: 0; height: 1px; - background: $cMainDark; + background: $cMainBg; content: ''; } @@ -76,7 +76,7 @@ Description bottom: 0; left: 7px; width: 1px; - background: $cMainDark; + background: $cMainBg; content: ''; } } @@ -90,7 +90,7 @@ Description bottom: 7px; left: 4px; height: 1px; - background: $cMainDark; + background: $cMainBg; content: ''; } @@ -101,7 +101,7 @@ Description bottom: 3px; left: 8px; width: 1px; - background: $cMainDark; + background: $cMainBg; content: ''; } } diff --git a/src/scss/cdb-components/shapes/arrow.scss b/src/scss/cdb-components/shapes/arrow.scss index cb596d0..295cd40 100644 --- a/src/scss/cdb-components/shapes/arrow.scss +++ b/src/scss/cdb-components/shapes/arrow.scss @@ -22,7 +22,7 @@ Description position: relative; width: 1px; height: 8px; - background: $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 { diff --git a/src/scss/cdb-components/shapes/check-circle.scss b/src/scss/cdb-components/shapes/check-circle.scss index f63cb76..cf2b1f1 100644 --- a/src/scss/cdb-components/shapes/check-circle.scss +++ b/src/scss/cdb-components/shapes/check-circle.scss @@ -60,7 +60,7 @@ Description .CDB-Shape-CircleItem { width: 14px; height: 14px; - border: 1px solid $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,7 +94,7 @@ Description position: absolute; width: 1px; transform: rotate(45deg); - background: $cMainDark; + background: $cMainBg; content: ''; } diff --git a/src/scss/cdb-components/shapes/close.scss b/src/scss/cdb-components/shapes/close.scss index 40b26f6..473f7dc 100644 --- a/src/scss/cdb-components/shapes/close.scss +++ b/src/scss/cdb-components/shapes/close.scss @@ -55,7 +55,7 @@ Description position: absolute; width: 1px; transform: rotate(-45deg); - background: $cMainDark; + background: $cMainBg; content: ''; } &::after { @@ -63,7 +63,7 @@ Description position: absolute; width: 1px; transform: rotate(45deg); - background: $cMainDark; + background: $cMainBg; content: ''; } diff --git a/src/scss/cdb-components/shapes/dash.scss b/src/scss/cdb-components/shapes/dash.scss index 409bd20..8c3bdeb 100644 --- a/src/scss/cdb-components/shapes/dash.scss +++ b/src/scss/cdb-components/shapes/dash.scss @@ -56,7 +56,7 @@ Description bottom: 7px; left: 2px; height: 1px; - background: $cMainDark; + background: $cMainBg; content: ''; } } diff --git a/src/scss/cdb-components/shapes/dataset.scss b/src/scss/cdb-components/shapes/dataset.scss index 494918d..0639597 100644 --- a/src/scss/cdb-components/shapes/dataset.scss +++ b/src/scss/cdb-components/shapes/dataset.scss @@ -95,7 +95,7 @@ Description width: 9px; height: 9px; margin-left: -10px; - border: 1px solid $cMainDark; + border: 1px solid $cMainBg; border-radius: 50%; background: $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; } } diff --git a/src/scss/cdb-components/shapes/dots.scss b/src/scss/cdb-components/shapes/dots.scss index 3b55072..54e61b7 100644 --- a/src/scss/cdb-components/shapes/dots.scss +++ b/src/scss/cdb-components/shapes/dots.scss @@ -23,6 +23,6 @@ You may resize and change the colors of the icons with the `glyph-`-classes. Ava background: $cSecondaryLine; &.is-selected { - background: $cTypo2; + background: $cSecondaryText; } } diff --git a/src/scss/cdb-components/shapes/error-circle.scss b/src/scss/cdb-components/shapes/error-circle.scss index eebeb92..5ed5ffc 100644 --- a/src/scss/cdb-components/shapes/error-circle.scss +++ b/src/scss/cdb-components/shapes/error-circle.scss @@ -60,7 +60,7 @@ Description .CDB-Shape-CircleItem { width: 13px; height: 13px; - border: 1px solid $cMainDark; + border: 1px solid $cMainBg; border-radius: 50%; &.is-small { diff --git a/src/scss/cdb-components/shapes/hamburguer.scss b/src/scss/cdb-components/shapes/hamburguer.scss index 7b8ceff..d5d2bc4 100644 --- a/src/scss/cdb-components/shapes/hamburguer.scss +++ b/src/scss/cdb-components/shapes/hamburguer.scss @@ -43,7 +43,7 @@ Description .CDB-Shape-hamburguerItem { height: $baseSize / 4; margin-bottom: $baseSize / 4; - background: $cMainDark; + background: $cMainBg; &:last-child { margin-bottom: 0; diff --git a/src/scss/cdb-components/shapes/magnify.scss b/src/scss/cdb-components/shapes/magnify.scss index 7f4f2f0..bec21d4 100644 --- a/src/scss/cdb-components/shapes/magnify.scss +++ b/src/scss/cdb-components/shapes/magnify.scss @@ -58,7 +58,7 @@ Description left: 0; width: 11px; height: 11px; - border: 1px solid $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: ''; } } diff --git a/src/scss/cdb-components/shapes/move.scss b/src/scss/cdb-components/shapes/move.scss index e1f423b..db5a45f 100644 --- a/src/scss/cdb-components/shapes/move.scss +++ b/src/scss/cdb-components/shapes/move.scss @@ -101,7 +101,7 @@ Description display: inline-block; width: 3px; height: 3px; - background: $cMainDark; + background: $cMainBg; content: ''; } @@ -110,7 +110,7 @@ Description width: 3px; height: 3px; margin-left: 2px; - background: $cMainDark; + background: $cMainBg; content: ''; } } diff --git a/src/scss/cdb-components/shapes/threePoints.scss b/src/scss/cdb-components/shapes/threePoints.scss index 48038e3..a184921 100644 --- a/src/scss/cdb-components/shapes/threePoints.scss +++ b/src/scss/cdb-components/shapes/threePoints.scss @@ -77,7 +77,7 @@ Description width: 2px; height: 2px; margin-bottom: 5px; - background: $cMainDark; + background: $cMainBg; &:last-child { margin-bottom: 0; } diff --git a/src/scss/cdb-components/shapes/toogle-arrow.scss b/src/scss/cdb-components/shapes/toogle-arrow.scss index 86f302a..90381da 100644 --- a/src/scss/cdb-components/shapes/toogle-arrow.scss +++ b/src/scss/cdb-components/shapes/toogle-arrow.scss @@ -97,7 +97,7 @@ Description width: 10px; height: 1px; transform: rotate(-45deg); - background: $cMainDark; + background: $cMainBg; content: ''; } &::after { @@ -108,7 +108,7 @@ Description width: 10px; height: 1px; transform: rotate(45deg); - background: $cMainDark; + background: $cMainBg; content: ''; } } diff --git a/src/scss/cdb-components/typography.scss b/src/scss/cdb-components/typography.scss index b26f446..74c0127 100644 --- a/src/scss/cdb-components/typography.scss +++ b/src/scss/cdb-components/typography.scss @@ -10,7 +10,9 @@

    Open Sans 16/22 Regular

    Open Sans 12/16 Semibold

    Open Sans 12/16 Semibold Uppercase

    -

    Open Sans 12/16 Regular

    +

    Open Sans 12/16 Regular

    +

    Open Sans 12/16 Regular

    +

    Open Sans 12/16 Regular

    Open Sans 10/14 Semibold

    Open Sans 10/14 Regular

    ``` diff --git a/src/scss/cdb-utilities/defaults.css.scss b/src/scss/cdb-utilities/defaults.css.scss index c7998f1..aaabb14 100644 --- a/src/scss/cdb-utilities/defaults.css.scss +++ b/src/scss/cdb-utilities/defaults.css.scss @@ -3,6 +3,10 @@ @import '../cdb-variables/colors'; +body { + color: $cMainText; +} + a { color: $cBlue; text-decoration: none; diff --git a/src/scss/cdb-utilities/helpers.scss b/src/scss/cdb-utilities/helpers.scss index 57626c0..17a76f9 100644 --- a/src/scss/cdb-utilities/helpers.scss +++ b/src/scss/cdb-utilities/helpers.scss @@ -2,6 +2,7 @@ // ---------------------------------------------- @import './mixins'; +@import '../cdb-variables/colors'; /* Margins */ .u-tSpace { @@ -41,6 +42,23 @@ margin-left: 12px; } +// Colors +// Main Text Color is default color +// ---------------------------------------------- + +.u-mainTextColor { + color: $cMainText; +} +.u-secondaryTextColor { + color: $cSecondaryText; +} +.u-altTextColor { + color: $cAltText; +} +.u-hintTextColor { + color: $cHintText; +} + /* Displays */ .u-iBlock { @include inline-block(); diff --git a/src/scss/cdb-variables/_colors.scss b/src/scss/cdb-variables/_colors.scss index fc0bc81..bc31a89 100644 --- a/src/scss/cdb-variables/_colors.scss +++ b/src/scss/cdb-variables/_colors.scss @@ -5,7 +5,7 @@ $cBlue: #3AA9E3; $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;