Mailspring/internal_packages/inbox-light-ui/stylesheets/ui-variables.less

// Private
//
// Do not use these colors outside of this file.
// You should choose variables based on the role of your
// interface elements. In other themes, @light-blue may
// not be light or blue.

@PANTONE-340-UP:     #00ac6f;
@PANTONE-7704-UP:    #009ec4;
@PANTONE-7547-UP:    #3c505f;
@PANTONE-296-UP:     #003c56;
@PANTONE-421-UP:     #b4babd;
@PANTONE-Red-032-UP: #f15f4b;
@PANTONE-326-UP:     #3bbeb4;
@PANTONE-Process-Black-UP: #231f20;
@PANTONE-Cool-Gray-1-UP:   #e1e0dc;

@green:      @PANTONE-340-UP;
@light-blue: @PANTONE-7704-UP;
@blue-gray:  @PANTONE-7547-UP;
@dark-blue:  @PANTONE-296-UP;
@light-gray: @PANTONE-421-UP;
@red:        @PANTONE-Red-032-UP;
@teal:       @PANTONE-326-UP;
@black:      @PANTONE-Process-Black-UP;
@cool-gray:  @PANTONE-Cool-Gray-1-UP;
@white:      #f1f1f1;

@blue-grey:  @blue-gray;
@light-grey: @light-gray;

// Public
//
// Use these variables in your packages. Choose the variable
// that best matches the role of the element you are styling.

// TEXT

@unread-color: @light-blue;
@action-color: @green;

@text-color: @black;
@text-color-highlight: @black;
@text-color-selected: @white;
@text-color-inverse: @white;
@text-color-subtle: fadeout(@text-color, 50%);
@text-color-inverse-subtle: fadeout(@text-color-inverse, 50%);

@text-color-info: @light-blue;
@text-color-link: @light-blue;
@text-color-success: @green;
@text-color-warning: #ff982d;
@text-color-error: @red;
@text-color-destructive: @red;

@progress-bar-fill: @light-blue;
@progress-bar-background: @light-gray;

@background-color: #fff;
@background-color-highlight: darken(@background-color, 2.5%);
@background-color-selected: @light-blue;
@background-color-secondary: darken(@background-color, 5%);
@background-color-accent: @blue-gray;

@background-color-info: @light-blue;
@background-color-success: @green;
@background-color-warning: #ff4800;
@background-color-error: @red;

@base-border-color: darken(@background-color, 15%);
@border-color: darken(@background-color, 15%);
@border-color-subtle: darken(@background-color, 8%);
@border-color-divider: darken(@background-color, 12%);

// Inputs

@input-background-color: white;

@input-border-color: fadeout(@border-color, 10%);
@input-border-color-blurred: desaturate(@input-border-color, 100%);

@input-tint-color: fade(@background-color-selected, 10%);
@input-tint-color-hover: fade(@input-tint-color, 30%);
@input-tint-color-blurred: desaturate(@input-tint-color, 100%);

@input-accessory-color-hover: @light-blue;
@input-accessory-color: @cool-gray;

// Buttons

@button-background-color: @white;
@button-background-color-hover: white;
@button-background-color-selected: white;
@button-border-color: @border-color;

// Menus

@menu-color: white;
@menu-divider-color: @light-gray;
@menu-item-color-hover: fade(@background-color-selected, 10%);
@menu-item-color-selected: @background-color-selected;
@menu-text-color-selected: @text-color-inverse;

// Sizes

@font-size: 15px;
@minor-font-size: 13px;
@major-font-size: 17px;

@input-font-size: 14px;
@disclosure-arrow-size: 12px;

@component-padding: 10px;
@component-icon-padding: 5px;
@component-icon-size: 16px;
@component-line-height: 25px;
@component-border-radius: 2px;


// Other
@font-family: "Proxima Nova Regular", "Helvetica", 'Lucida Grande', 'Segoe UI', sans-serif;

@font-family-smallcap: "Proxima Nova Regular Small Cap", "sans-serif";

@standard-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);

@standard-shadow-up: 0 -1px 2px 0 rgba(0, 0, 0, 0.22);