cubesystems/releaf

View on GitHub
releaf-core/app/assets/stylesheets/releaf/environment/variables/colors.scss

Summary

Maintainability
Test Coverage
// basic text and background colors:
$color-text-darkest:        #111111;
$color-text-normal:         #1d1d1d;
$color-text-light:          #3c3c3c;
$color-text-lighter:        #636363;
$color-text-lightest:       #a6a6a6;

$color-background-darkest:  #c5c5c5;
$color-background-darker:   #d4d4d4;
$color-background-normal:   #e6e6e6;
$color-background-lighter:  #f8f8f8;
$color-background-lightest: #ffffff;


// the actual color codes below for inverted blocks and borders
// are mostly the same as the ones used above for backgrounds/texts
// but they are not strictly dependent
// therefore actual color codes are used here
// instead of referencing the respective colors from above.
// it also helps with readability a bit.


// text and background colors for inverted blocks:
$color-background-inverted-darkest:     #111111;
$color-background-inverted-darker:      #1d1d1d;
$color-background-inverted-normal:      #282828;
$color-background-inverted-lightest:    #3c3c3c;

$color-text-inverted-darkest:           #636363;
$color-text-inverted-darker:            #a6a6a6;
$color-text-inverted-normal:            #d4d4d4;
$color-text-inverted-lightest:          #ffffff;



// border colors:
$color-border-darkest:          #636363;
$color-border-darker:           #a6a6a6;
$color-border-dark:             #c5c5c5;
$color-border-normal:           #d4d4d4;
$color-border-light:            #e6e6e6;

$color-border-inverted-normal:  #282828;
$color-border-inverted-lighter: #3c3c3c;


$color-background-see-through:  create-rgba( #000, 0.6 );


$color-shadow-normal:   $color-background-see-through;
$color-shadow-lighter:  create-rgba( $color-shadow-normal,  0.3 );
$color-shadow-lightest: create-rgba( $color-shadow-normal,  0.1 );


// shades of the highlight color:
$color-highlight-darkest:   #307872;
$color-highlight-darker:    #269990;
$color-highlight-normal:    #37b1a7;
$color-highlight-lighter:   #40cfc3;
$color-highlight-lightest:  #ccebe9;



// error color:
$color-alert: #ee462a;



// notification colors:
// special colors used for floating notifications. NOT to be used anywhere else

$color-notification-error-background:       #eed3d7;
$color-notification-error-text:             #b94a48;
$color-notification-success-text:           #468847;
$color-notification-success-background:     #ddf4d0;



// dummy colors for debugging
// 2 sets of lighter and darker red / orange / yellow / green / blue / purple

$color-dummy-1:   #ff8080;
$color-dummy-2:   #fcd47e;
$color-dummy-3:   #ffffb2;
$color-dummy-4:   #80ff80;
$color-dummy-5:   #7eb7fc;
$color-dummy-6:   #ff80df;
$color-dummy-7:   #ff0000;
$color-dummy-8:   #fead00;
$color-dummy-9:   #ffff00;
$color-dummy-10:  #00ff00;
$color-dummy-11:  #0072fe;
$color-dummy-12:  #ff00c0;