Learn more  » Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Bower components Debian packages RPM packages NuGet packages

lnguyenacl / acl-ui   js

Repository URL to install this package:

Version: 3.0.0 

/ helpers / css / _colors.scss

//  -------------------------------------------------
//  Color constants
//  -------------------------------------------------

// legacy colors, moved over from acl_styles gem.
// TODO clean up these and deprecate them
// mostly being used in accounts repo
// not being used in the following repos
//  - acl styles
//  - Projects
//  - risk (still using less variables)
//  - results

$purple-dark:        #393361;
$purple:             #67638B;
$purple-light:       #C8C8D6;
$acl-purple:         #4A488B;
$green-dark:         #20591B;
$green:              #34892B;
$green-light:        #6BB478;
$black:              #252525;
$blue:               #0753a4;
$muted-blue:         #747A88;
$cool-grey:          #DDDFE6;
$cool-grey-light:    #F3F5F9;
$white:              #FFFFFF;
$orange:             #EE5C23;
$red:                #CD3948;
$red-dark:           #901C2C;
$yellow:             #EABA51;
$yellow-pale:        #FFFBD5;

// FIXME: designers, please tweak these
$dark-grey-light:    #A4A5AB;
$dark-grey:          #737478;

// base colors generated by gulp task
// and override legacy colors
// @import "base-colors";
$purple: #53529F;
$green: #42996D;
$black: #3F3D3C;
$orange: #DE4D33;
$yellow: #EABA51;
$blue: #2666AB;
$white: #FFFFFF;
$off-white: #F0F0F0;
$creme: #E6E3DF;
$chart-color_0: #EC4325;
$chart-color_1: #238D9D;
$chart-color_2: #F7802F;
$chart-color_3: #1866B8;
$chart-color_4: #F6BE45;
$chart-color_5: #4B48AC;
$chart-color_6: #A0C049;
$chart-color_7: #B13D5F;
$chart-color_9: #D6CBBC;

// Variation
$purple-lighten-10: desaturate(lighten($purple, 10), 5);
$purple-lighten-20: desaturate(lighten($purple, 20), 5);
$purple-lighten-30: desaturate(lighten($purple, 30), 5);
$purple-lighten-40: desaturate(lighten($purple, 40), 5);
$purple-lighten-50: desaturate(lighten($purple, 50), 5);
//  legacy support for the old purple which could be lighten up 60%
$purple-lighten-60: $purple-lighten-50;
// --
$purple-darken-10: darken($purple, 10);
$purple-darken-20: darken($purple, 20);

$green-lighten-10: desaturate(lighten($green, 10), 5);
$green-lighten-20: desaturate(lighten($green, 20), 5);
$green-lighten-30: desaturate(lighten($green, 30), 5);
$green-lighten-40: desaturate(lighten($green, 40), 5);
$green-lighten-50: desaturate(lighten($green, 50), 5);
// --
$green-darken-10: darken($green, 10);
$green-darken-20: darken($green, 20);

$black-lighten-10: desaturate(lighten($black, 10), 5);
$black-lighten-20: desaturate(lighten($black, 20), 5);
$black-lighten-30: desaturate(lighten($black, 30), 5);
$black-lighten-40: desaturate(lighten($black, 40), 5);
$black-lighten-50: desaturate(lighten($black, 50), 5);
$black-lighten-60: desaturate(lighten($black, 60), 5);
$black-lighten-70: desaturate(lighten($black, 70), 5);

$orange-lighten-10: desaturate(lighten($orange, 10), 5);
$orange-lighten-20: desaturate(lighten($orange, 20), 5);
$orange-lighten-30: desaturate(lighten($orange, 30), 5);
$orange-lighten-40: desaturate(lighten($orange, 40), 5);
// --
$orange-darken-10: darken($orange, 10);
$orange-darken-20: darken($orange, 20);
$orange-darken-30: darken($orange, 30);

$yellow-lighten-10: desaturate(lighten($yellow, 10), 5);
$yellow-lighten-20: desaturate(lighten($yellow, 20), 5);
$yellow-lighten-30: desaturate(lighten($yellow, 30), 5);
// --
$yellow-darken-10: darken($yellow, 10);
$yellow-darken-20: darken($yellow, 20);
$yellow-darken-30: darken($yellow, 30);
$yellow-darken-40: darken($yellow, 40);

$creme-darken-30: desaturate(darken($creme, 30), 10);
$creme-darken-20: desaturate(darken($creme, 20), 10);
$creme-darken-10: desaturate(darken($creme, 10), 5);

$creme-lighten-5: lighten($creme, 5);
$creme-lighten-10: lighten($creme, 10);

// second tier color declaration
$font-color: $black;
$body-font-color: $font-color;
$link-color: $blue;
$primary-color: $purple;
$secondary-color: $green;
$alert-color: $orange;
// $success-color: #43AC6A;
$warning-color: $orange;
// $info-color: #a0d3e8;