diff --git a/client/src/app/+admin/system/logs/logs.component.scss b/client/src/app/+admin/system/logs/logs.component.scss index dae8b21c7..c4690ac9e 100644 --- a/client/src/app/+admin/system/logs/logs.component.scss +++ b/client/src/app/+admin/system/logs/logs.component.scss @@ -28,7 +28,7 @@ } .warn { - color: $orange-color; + color: var(--mainColor); } .error { diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index a9475e484..f76a82243 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -23,12 +23,12 @@ body { /*** theme ***/ // now beware node-sass requires interpolation // for css custom properties #{$var} - --mainColor: #{$orange-color}; - --mainColorLighter: #{$orange-color-lighter}; - --mainHoverColor: #{$orange-hover-color}; + --mainColor: #{$main-color}; + --mainColorLighter: #{$main-color-lighter}; + --mainHoverColor: #{$main-hover-color}; --mainBackgroundColor: #{$bg-color}; --mainForegroundColor: #{$fg-color}; - --secondaryColor: #{$cyan-color}; + --secondaryColor: #{$secondary-color}; --menuBackgroundColor: #{$menu-background}; --menuForegroundColor: #{$menu-color}; diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 0a500b6f3..5163ea056 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -398,7 +398,7 @@ &:checked + span { border-color: transparent; - background: $orange-color; + background: var(--mainColor); animation: jelly 0.6s ease; &:after { diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index 91229cee0..3c9fa5939 100644 --- a/client/src/sass/include/_variables.scss +++ b/client/src/sass/include/_variables.scss @@ -13,11 +13,12 @@ $grey-background-hover-color: #EFEFEF; $grey-foreground-color: #585858; $grey-foreground-hover-color: #303030; -$orange-color: #F1680D; -$orange-color-lighter: rgb(233, 159, 110); -$orange-hover-color: #F97D46; - -$cyan-color: hsl(187, 77%, 34%); +// Palette +$main-color: hsl(24, 90%, 50%); +$main-hover-color: lighten($main-color, 5%); +$main-color-lighter: lighten($main-color, 10%); +$secondary-color: hsl(187, 77, 34); +// $support-button: inherit; $support-button-heart: #e83e8c;