0
0
mirror of https://github.com/wagtail/wagtail.git synced 2024-11-30 01:46:24 +01:00

Use color functions where there is a obvious relation between them

This commit is contained in:
Coen van der Kamp 2018-09-22 22:13:03 +02:00 committed by Matt Westcott
parent 666876693b
commit d05eb8cdab

View File

@ -27,7 +27,8 @@ $breakpoint-desktop-larger: 100em; // 1600px
// colours // colours
$color-teal: #43b1b0; $color-teal: #43b1b0;
$color-teal-darker: darken($color-teal, 10%); $color-teal-darker: darken($color-teal, 10%);
$color-teal-dark: #246060; $color-teal-dark: darken(saturate(adjust-hue($color-teal, 1), 0.37), 21.96);
$color-blue: #71b2d4; $color-blue: #71b2d4;
$color-red: #cd3238; $color-red: #cd3238;
$color-orange: #e9b04d; $color-orange: #e9b04d;
@ -38,22 +39,25 @@ $color-white: #fff;
$color-black: #000; $color-black: #000;
// darker to lighter // darker to lighter
$color-grey-1: #333; $color-grey-1: darken($color-white, 80);
$color-grey-1-1: #404040; $color-grey-1-1: darken($color-white, 74.9);
$color-grey-2: #666; $color-grey-2: darken($color-white, 60);
$color-grey-3: #d9d9d9;
$color-grey-4: #e6e6e6;
$color-grey-5: #fafafa;
$color-menu-text: #cacaca; // was #aaa wich was too low contrast $color-grey-3: darken($color-white, 14.9);
$color-grey-4: darken($color-white, 9.8);
$color-grey-5: darken($color-white, 1.96);
$color-menu-text: darken($color-white, 20.78);
$color-thead-bg: $color-grey-5; $color-thead-bg: $color-grey-5;
$color-header-bg: $color-teal; // #ff6a58; $color-header-bg: $color-teal;
$color-fieldset-hover: $color-grey-5; $color-fieldset-hover: $color-grey-5;
$color-input-border: $color-grey-4; $color-input-border: $color-grey-4;
$color-input-focus: #f4fcfc; $color-input-focus: lighten(saturate(adjust-hue($color-teal, 1), 12.06), 49.41);
$color-input-focus-border: darken($color-input-focus, 40%); $color-input-focus-border: lighten(saturate(adjust-hue($color-teal, 1), 11.8), 9.41);
$color-input-error-bg: #feedee; $color-input-error-bg: lighten(saturate(adjust-hue($color-red, -1), 28.69), 46.27);
$color-button: $color-teal; $color-button: $color-teal;
$color-button-hover: $color-teal-darker; $color-button-hover: $color-teal-darker;
$color-button-yes: $color-green; $color-button-yes: $color-green;