diff --git a/src/scss/cdb-components/colors.scss b/src/scss/cdb-components/colors.scss index f5d73d4..555cb3a 100644 --- a/src/scss/cdb-components/colors.scss +++ b/src/scss/cdb-components/colors.scss @@ -36,7 +36,7 @@ } .Color-MainDark { - background: $cMainBgColor; + background: $cMainBg; } .Color-SecondaryDark { background: $cSecondaryDark; diff --git a/src/scss/cdb-components/forms/toggle.scss b/src/scss/cdb-components/forms/toggle.scss index 81c3670..b37f458 100644 --- a/src/scss/cdb-components/forms/toggle.scss +++ b/src/scss/cdb-components/forms/toggle.scss @@ -49,7 +49,7 @@ } &:checked + .CDB-ToggleFace { - background: $cMainBgColor; + background: $cMainBg; &::before { right: 2px; diff --git a/src/scss/cdb-components/loader.scss b/src/scss/cdb-components/loader.scss index ae9d543..44403cc 100644 --- a/src/scss/cdb-components/loader.scss +++ b/src/scss/cdb-components/loader.scss @@ -105,12 +105,12 @@ This is the generic loader for widgets, maps, components, ... background: $cWhite; } &.is-grey { - background: linear-gradient(to right, $cMainBgColor 10%, rgba($cWhite, 0) 42%); + background: linear-gradient(to right, $cMainBg 10%, rgba($cWhite, 0) 42%); &::before { background: $cTypo2; } &::after { - background: $cMainBgColor; + background: $cMainBg; } } } diff --git a/src/scss/cdb-components/menu.scss b/src/scss/cdb-components/menu.scss index 7327574..0ab42f8 100644 --- a/src/scss/cdb-components/menu.scss +++ b/src/scss/cdb-components/menu.scss @@ -97,8 +97,8 @@ } .CDB-NavMenu-Item.is-active .CDB-NavMenu-Link { - border-bottom: 1px solid $cMainBgColor; - color: $cMainBgColor; + border-bottom: 1px solid $cMainBg; + color: $cMainBg; } .CDB-NavSubmenu { @@ -119,7 +119,7 @@ .CDB-NavSubmenu-item.is-active { .CDB-NavSubmenu-Link { border-bottom: 1px solid $cTypo3; - color: $cMainBgColor; + color: $cMainBg; } } diff --git a/src/scss/cdb-components/shapes/add.scss b/src/scss/cdb-components/shapes/add.scss index a172077..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: $cMainBgColor; + background: $cMainBg; content: ''; } @@ -76,7 +76,7 @@ Description bottom: 0; left: 7px; width: 1px; - background: $cMainBgColor; + background: $cMainBg; content: ''; } } @@ -90,7 +90,7 @@ Description bottom: 7px; left: 4px; height: 1px; - background: $cMainBgColor; + background: $cMainBg; content: ''; } @@ -101,7 +101,7 @@ Description bottom: 3px; left: 8px; width: 1px; - background: $cMainBgColor; + background: $cMainBg; content: ''; } } diff --git a/src/scss/cdb-components/shapes/arrow.scss b/src/scss/cdb-components/shapes/arrow.scss index 172fcda..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: $cMainBgColor; + background: $cMainBg; &::before { display: block; @@ -32,7 +32,7 @@ Description width: 5px; height: 1px; transform: rotate(45deg); - background: $cMainBgColor; + background: $cMainBg; content: ''; } @@ -44,7 +44,7 @@ Description width: 5px; height: 1px; transform: rotate(-45deg); - background: $cMainBgColor; + 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 4d1ac0c..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 $cMainBgColor; + border: 1px solid $cMainBg; border-radius: 50%; &.is-small { @@ -86,7 +86,7 @@ Description position: absolute; width: 1px; transform: rotate(-45deg); - background: $cMainBgColor; + background: $cMainBg; content: ''; } &::after { @@ -94,7 +94,7 @@ Description position: absolute; width: 1px; transform: rotate(45deg); - background: $cMainBgColor; + background: $cMainBg; content: ''; } diff --git a/src/scss/cdb-components/shapes/close.scss b/src/scss/cdb-components/shapes/close.scss index f25e7bf..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: $cMainBgColor; + background: $cMainBg; content: ''; } &::after { @@ -63,7 +63,7 @@ Description position: absolute; width: 1px; transform: rotate(45deg); - background: $cMainBgColor; + background: $cMainBg; content: ''; } diff --git a/src/scss/cdb-components/shapes/dash.scss b/src/scss/cdb-components/shapes/dash.scss index 361a6b8..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: $cMainBgColor; + background: $cMainBg; content: ''; } } diff --git a/src/scss/cdb-components/shapes/dataset.scss b/src/scss/cdb-components/shapes/dataset.scss index 8612383..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 $cMainBgColor; + 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: $cMainBgColor; + background: $cMainBg; &:first-child { - box-shadow: 3px 0 $cMainBgColor; + box-shadow: 3px 0 $cMainBg; } } } .CDB-Shape-Dataset.is-white.is-small { .CDB-Shape-DatasetItem:first-child { - box-shadow: 2px 0 $cMainBgColor; + box-shadow: 2px 0 $cMainBg; } } diff --git a/src/scss/cdb-components/shapes/error-circle.scss b/src/scss/cdb-components/shapes/error-circle.scss index ee1a4bb..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 $cMainBgColor; + 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 4bd02e8..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: $cMainBgColor; + 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 9bb2128..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 $cMainBgColor; + border: 1px solid $cMainBg; border-radius: 50%; content: ''; } @@ -71,7 +71,7 @@ Description width: 1px; height: 7px; transform: rotate(314deg); - background: $cMainBgColor; + background: $cMainBg; content: ''; } } diff --git a/src/scss/cdb-components/shapes/move.scss b/src/scss/cdb-components/shapes/move.scss index d5ea9e1..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: $cMainBgColor; + background: $cMainBg; content: ''; } @@ -110,7 +110,7 @@ Description width: 3px; height: 3px; margin-left: 2px; - background: $cMainBgColor; + background: $cMainBg; content: ''; } } diff --git a/src/scss/cdb-components/shapes/threePoints.scss b/src/scss/cdb-components/shapes/threePoints.scss index 4757bb8..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: $cMainBgColor; + 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 d5b5fde..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: $cMainBgColor; + background: $cMainBg; content: ''; } &::after { @@ -108,7 +108,7 @@ Description width: 10px; height: 1px; transform: rotate(45deg); - background: $cMainBgColor; + background: $cMainBg; content: ''; } } diff --git a/src/scss/cdb-utilities/helpers.scss b/src/scss/cdb-utilities/helpers.scss index b21de94..4a0d90c 100644 --- a/src/scss/cdb-utilities/helpers.scss +++ b/src/scss/cdb-utilities/helpers.scss @@ -43,7 +43,7 @@ // ---------------------------------------------- .u-mainTextColor { - color: $cMainTextColor; + color: $cMainText; } .u-secondaryTextColor { color: $cTypo2; diff --git a/src/scss/cdb-variables/_colors.scss b/src/scss/cdb-variables/_colors.scss index fb8f9ee..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; -$cMainBgColor: #2E3C43; +$cMainBg: #2E3C43; //Structure $cSecondaryDark: #282C2F; @@ -18,10 +18,10 @@ $cMainLine: #DDD; $cSecondaryLine: #EEE; //Typography -$cMainTextColor: #2E3C43; -$cSecondaryTextColor: #636D72; -$cAltTextColor: #979EA1; -$cHintTextColor: #CBCED0; +$cMainText: #2E3C43; +$cSecondaryText: #636D72; +$cAltText: #979EA1; +$cHintText: #CBCED0; //Others $cHighlight: #9DE0AD;