Mailspring/app/static/style/base/ui-variables.less

// Color abstraction hierarchy:
// 1. Hex code (#428bca)
// 2. Common color name (@blue)
// 3. Generic color descriptor (@accent-primary, @background-primary)
// --------
// 4. Generic usage descriptor (@input-background, @button-background)
// 5. Application-specific usage (@unread-label-background)

// Typography abstraction hierarchy
// 1. Font-face (Nylas-Pro)
// 2. Common name (@bold, @italic)
// 3. Generic font descriptor mixins (.bold, .italic, .h1, .h2)
// --------
// 4. Generic usage descriptor (.btn-text, .p-body)
// 5. Application-specific usage (.message-list-h1)

//=============================== Colors ===============================//
//== Color Definitions
@black: #231f20;
@gray-base: #0a0b0c;
@gray-darker: lighten(@gray-base, 13.5%); // #222
@gray-dark: lighten(@gray-base, 20%); // #333
@gray: lighten(@gray-base, 33.5%); // #555
@gray-light: lighten(@gray-base, 46.7%); // #777
@gray-lighter: lighten(@gray-base, 92.5%); // #eee
@white: #ffffff;

@blue-dark: #3187e1;
@blue: #419bf9;
@blue-light: #009ec4;

//== Color Descriptors
@accent-primary: @blue;
@accent-primary-dark: @blue-dark;

@background-primary: @white;
@background-off-primary: #fdfdfd;
@background-secondary: #f6f6f6;
@background-tertiary: #6d7987;

@color-info: @blue-dark;
@color-success: #5cb346;
@color-warning: #f0ad4e;
@color-error: #d9534f;
@color-danger: #d9534f;

@component-active-color: @accent-primary-dark;
@component-active-bg: @background-primary;

@background-gradient: linear-gradient(
  to top,
  rgba(241, 241, 241, 0.75) 0%,
  rgba(253, 253, 253, 0.75) 100%
);

@border-color-primary: darken(@background-primary, 10%);
@border-color-secondary: darken(@background-secondary, 10%);
@border-color-tertiary: darken(@background-tertiary, 10%);
@border-color-divider: @border-color-secondary;

//============================= Typography =============================//

// ----- Colors -----
@text-color: @black;
@text-color-subtle: fadeout(@text-color, 20%);
@text-color-very-subtle: fadeout(@text-color, 50%);
@text-color-inverse: @white;
@text-color-inverse-subtle: fadeout(@text-color-inverse, 20%);
@text-color-inverse-very-subtle: fadeout(@text-color-inverse, 50%);

@text-color-heading: #434648;

@text-color-link: @blue;
@text-color-link-hover: @blue-dark;
@text-color-link-active: @blue-dark;

@text-color-selected: @text-color-inverse;

@text-color-search-match: #fff000;
@text-color-search-current-match: #ff8b1a;

@font-family-sans-serif: 'Nylas-Pro', 'Helvetica', sans-serif;
@font-family-serif: Georgia, 'Times New Roman', Times, serif;
@font-family-monospace: 'DejaVu Sans Mono', Menlo, Monaco, Consolas, 'Courier New', monospace;

@font-family: @font-family-sans-serif;
@font-family-heading: @font-family-sans-serif;

// ----- Font Weights -----
@font-weight-thin: 200;
@font-weight-blond: 300;
@font-weight-normal: 400;
@font-weight-medium: 500;
@font-weight-semi-bold: 600;
@headings-font-weight: 600;

// ----- Font Sizes -----
@font-size-base: 14px;

@font-size-tiny: @font-size-base * 0.75; // 10.5px
@font-size-smaller: @font-size-base * 0.86; // 12px
@font-size-small: @font-size-base * 0.93; // 13px
@font-size: @font-size-base; // 14px
@font-size-large: @font-size-base * 1.14; // 16px
@font-size-larger: @font-size-base * 1.29; // 18px

@font-size-h1: @font-size-base * 1.71; // 24px
@font-size-h2: @font-size-base * 1.71; // 24px
@font-size-h3: @font-size-base * 1.43; // 20px
@font-size-h4: @font-size-base * 1.29; // 18px
@font-size-h5: @font-size-base;
@font-size-h6: @font-size-base * 0.86; // 12px

// ----- Line Height -----
@line-height-base: 1.5; // 22.5/15
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
@line-height-heading: 1.1;

//============================== Spacing ===============================//
// Define common padding and border radius sizes and more. Values based on
// 14px text and 1.428 line-height (~20px to start).

@spacing-standard: @font-size-base;

@spacing-quarter: @spacing-standard * 0.25;
@spacing-half: @spacing-standard * 0.5;
@spacing-three-quarters: @spacing-standard * 0.75;
@spacing-double: @spacing-standard * 2;

@padding-base-vertical: 5px;
@padding-base-horizontal: 12px;

@padding-large-vertical: 9px;
@padding-large-horizontal: 16px;

@padding-small-vertical: 4px;
@padding-small-horizontal: 10px;

@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;

@line-height-large: @line-height-computed * 1.3;
@line-height-small: @line-height-computed * 0.95;

@border-radius-base: 3px;
@border-radius-large: 5px;
@border-radius-small: 2px;

//============================== Shadows ===============================//

@standard-shadow-color: rgba(0, 0, 0, 0.15);
@standard-shadow: 0 1px 4px 0 @standard-shadow-color;
@standard-shadow-up: 0 -1px 4px 0 @standard-shadow-color;
@shadow-border: 0 0.5px 0 @standard-shadow-color, 0 -0.5px 0 @standard-shadow-color,
  0.5px 0 0 @standard-shadow-color, -0.5px 0 0 @standard-shadow-color;

//=============================== Buttons ==============================//

@btn-shadow: @standard-shadow;

@btn-default-bg-color: darken(@background-primary, 0.5%);
@btn-default-text-color: @text-color;

@btn-icon-color: #919191;

@btn-action-bg-color: @color-success;
@btn-action-text-color: @text-color;

@btn-emphasis-bg-color: #5b90fb;
@btn-emphasis-text-color: @text-color-inverse;

@btn-danger-bg-color: @color-danger;
@btn-danger-text-color: @text-color-inverse;

//=============================== Dropdowns ============================//

@dropdown-default-bg-color: @background-primary;
@dropdown-default-text-color: @text-color;
@dropdown-default-border-color: fadeout(@border-color-primary, 10%);

//=============================== Inputs ===============================//

@input-bg: @white;
@input-bg-disabled: @gray-lighter;

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

@input-font-size: 14px;

//=============================== Components ===========================//

//== Toolbar
@toolbar-background-color: darken(@white, 17.5%);

//== Account Sidebar
@panel-background-color: @gray-lighter;
@source-list-bg: @panel-background-color;
@source-list-active-bg: @panel-background-color;
@source-list-active-color: @component-active-color;

//== Thread List (e.g, `.list-group-item`, `.list-item`)
@list-bg: @white;
@list-border: #ddd;
@list-hover-bg: darken(@list-bg, 4%);
@list-focused-color: @list-bg;
@list-focused-bg: @component-active-color;
@list-focused-border: @list-focused-bg;
@list-selected-color: inherit;
@list-selected-bg: mix(@component-active-color, @list-bg, 17%);
@list-selected-border: mix(@component-active-color, @list-bg, 50%);

//== Notifications
@background-color-info: @blue-light;
@background-color-success: #00ac6f;
@background-color-warning: #ff4800;
@background-color-error: #ca2541;
@background-color-pending: #b4babd;

//== Menus
@menu-item-color-hover: fade(@blue-light, 10%);
@menu-item-color-selected: @blue-light;
@menu-text-color-selected: @text-color-inverse;

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

// Helpers for Specs - Do Not Remove
@spec-test-variable: rgb(152, 123, 0);

// Features
@open-tracking-color: #7c19cc;
@link-tracking-color: #d43353;