sentry/static/less/palette.less

/**
 * Sentry Color Palette
 * ============================================================================
 */

@blue: #3b6ecc;
@blue-light: lighten(@blue, 10%);
@blue-dark: darken(@blue, 10%);

@green: #57be8c;
@green-light: lighten(@green, 10%);
@green-dark: darken(@green, 10%);

@yellow: #ecd744;
@yellow-light: lighten(@yellow, 10%);
@yellow-dark: darken(@yellow-light, 10%);

@yellow-orange: #f9a66d;
@yellow-orange-light: lighten(@yellow-orange, 10%);
@yellow-orange-dark: darken(@yellow-orange, 10%);

@orange: #ec5e44;
@orange-light: lighten(@orange, 10%);
@orange-dark: darken(@orange, 10%);

@red: #e03e2f;
@red-light: lighten(@red, 10%);
@red-dark: darken(@red, 10%);
@red-darkest: darken(@red, 20%);

@pink: #f868bc;
@pink-light: lighten(@pink, 10%);
@pink-dark: darken(@pink, 10%);

@purple: #6c5fc7;
@purple-light: lighten(@purple, 10%);
@purple-lightest: lighten(@purple-light, 10);
@purple-dark: darken(@purple, 10%);
@purple-darkest: darken(@purple, 20%);

@gray: @70;
@gray-light: desaturate(@50, 5%);
@gray-lighter: @40;
@gray-lightest: @20;
@gray-dark: @80;
@gray-darker: @90;
@gray-darkest: @100;

@white: #ffffff;
@white-dark: #fbfbfc;
@white-darker: #f7f8f9;
@white-darkest: darken(@white-darker, 6);

/**
 * Shortcuts
 * ============================================================================
 */

@link-color: @blue;
@link-color-hover: @blue-dark;
@sidebar-bg-color: #2f2936;
@header-bg-color: #342c3e;

@trim: @gray-lightest;
@trim-dark: darken(@gray-lightest, 4);
@trim-darkest: darken(@gray-lightest, 10);

// Alerts (TODO): Derive these from palette

@alert-warning-bg-color: #fffdf7;
@alert-warning-border-color: #e1d697;

@alert-danger-bg-color: #fdf6f5;
@alert-danger-border-color: #e7c0bc;

@alert-info-bg-color: #f5fafe;
@alert-info-border-color: #b5d6ed;

@alert-success-bg-color: #f8fcf7;
@alert-success-border-color: #bbd6b3;

/**
 * Playing around
 * ============================================================================
 */

@100: desaturate(#16111b, 8%);
@90: lighten(@100, 10%);
@80: lighten(@100, 20%);
@70: lighten(@100, 30%);
@60: lighten(@100, 40%);
@50: lighten(@100, 50%);
@40: lighten(@100, 60%);
@30: lighten(@100, 70%);
@20: lighten(@100, 80%);
@10: lighten(@100, 90%);