joshua/dash-website
1
0
Fork 0
mirror of https://github.com/seigler/dash-website synced 2025-07-27 07:16:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

(Update) Colors: Add all color variables

Browse source
This commit is contained in:
0xfff 2016-09-26 02:47:53 +02:00
parent 69f58a1a41
commit d97a84c795
1 changed files with 31 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/scss/_colors.scss
View file

@ -1,19 +1,27 @@
// brand colors
$color-black: #2f2f2f;
$color-white: #ffffff;
$color-blue: #1c75bc;
// site colors
$color-red: #ec2227;
$color-green: #1dd68a;
$color-black: #131415;
$color-black-light: #353535;
$color-gray: #f0f0f0;
$color-gray-light: #f7f9fa;
$color-gray-dark: #555555;
$color-white: #ffffff;
$color-blue-dark: #0b3b5a;
$color-gray-light: #f7f9fa;
$color-blue-strong: #0077d6;
$color-blue: #1c75bc;
$color-blue-highlight: #3297e8;
$color-blue-light: #addbff;
$color-blue-offshade: #658cad;
$color-red: #ec2227;
$color-green: #24b47e;
$color-green-light: #b9f4bc;
// for the style guide:
@function contrast-color($color, $dark, $light, $threshold: 50) {
@if (lightness(scale-color($color, $color-green: 30%, $color-blue: -6%, $color-red: 4%)) > $threshold) { // perceptual luminance http://www.workwithcolor.com/color-luminance-2233.htm
@if (lightness(scale-color($color, $green: 30%, $blue: -6%, $red: 4%)) > $threshold) { // perceptual luminance http://www.workwithcolor.com/color-luminance-2233.htm
@return $dark; // Lighter background, return dark color
} @else {
@return $light; // Darker background, return light color
@ -22,15 +30,23 @@ $color-gray-light: #f7f9fa;
$color:
('black', $color-black),
('black-light', $color-black-light),
('gray', $color-gray),
('gray-light', $color-gray-light),
('gray-dark', $color-gray-dark),
('white', $color-white),
('blue-dark', $color-blue-dark),
('blue-strong', $color-blue-strong),
('blue', $color-blue),
('red', $color-red),
('green', $color-green),
('blue-highlight', $color-blue-highlight),
('blue-light', $color-blue-light),
('blue-offshade', $color-blue-offshade),
('gray', $color-gray),
('dark-blue', $color-blue-dark),
('gray-light', $color-gray-light);
('red', $color-red),
('green', $color-green),
('green-light', $color-green-light);
@each $name, $bgcolor in $color {
.color__tile--#{$name}-bg {