mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-21 07:46:06 +08:00
478 lines
15 KiB
Plaintext
478 lines
15 KiB
Plaintext
// 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-FaktPro)
|
|
// 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, .salesforce-h1)
|
|
|
|
//=============================== Colors ===============================//
|
|
//== Brand colors
|
|
@nylas-yellow: #D5DC28;
|
|
@nylas-yellow-dark: #A0C23A;
|
|
@nylas-green: #5CB346;
|
|
@nylas-green-dark: #078E46;
|
|
@nylas-blue: #11A1A2;
|
|
@nylas-blue-dark: #0F7982;
|
|
@nylas-black: #313435;
|
|
@nylas-gray: #434648;
|
|
|
|
//== Generic colors
|
|
@black: @nylas-black;
|
|
@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: #419bf9;
|
|
@blue-dark: #3187e1;
|
|
|
|
//== Color descriptors
|
|
@accent-primary: @blue;
|
|
@accent-primary-dark: @blue-dark;
|
|
@accent-secondary: @nylas-yellow;
|
|
|
|
@background-primary: #ffffff;
|
|
@background-off-primary: #fdfdfd;
|
|
@background-secondary: #f6f6f6;
|
|
@background-tertiary: #6d7987;
|
|
|
|
@border-primary-bg: darken(@background-primary, 10%);
|
|
@border-secondary-bg: darken(@background-secondary, 10%);
|
|
@border-tertiary-bg: darken(@background-tertiary, 10%);
|
|
@border-color-divider: @border-secondary-bg;
|
|
|
|
@info-color: @blue-dark;
|
|
@success-color: @nylas-green;
|
|
@warning-color: #f0ad4e;
|
|
@error-color: #d9534f;
|
|
@danger-color: #d9534f;
|
|
|
|
|
|
//============================= 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: @nylas-gray;
|
|
|
|
@text-color-link: @blue;
|
|
@text-color-link-hover: @blue-dark;
|
|
@text-color-link-active: @blue-dark;
|
|
|
|
@text-color-selected: @text-color-inverse;
|
|
@text-color-highlight: @text-color;
|
|
|
|
@text-color-info: @info-color;
|
|
@text-color-success: @success-color;
|
|
@text-color-warning: @warning-color;
|
|
@text-color-error: @error-color;
|
|
@text-color-destructive: @danger-color;
|
|
|
|
// ----- Font Families -----
|
|
@font-face {
|
|
font-family: 'Nylas-FaktPro';
|
|
font-style: normal;
|
|
font-weight: 300;
|
|
src: url('fonts/Fakt/Nylas-FaktPro-Blond.otf'), local('Comic Sans MS');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Nylas-FaktPro';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url('fonts/Fakt/Nylas-FaktPro-Normal.otf'), local('Comic Sans MS');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Nylas-FaktPro';
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
src: url('fonts/Fakt/Nylas-FaktPro-Medium.otf'), local('Comic Sans MS');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Nylas-FaktPro';
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
src: url('fonts/Fakt/Nylas-FaktPro-SemiBold.otf'), local('Comic Sans MS');
|
|
}
|
|
|
|
@font-family-sans-serif: "Nylas-FaktPro", "Helvetica", 'Lucida Grande', 'Segoe UI', sans-serif;
|
|
@font-family-smallcap: "Proxima Nova Regular Small Cap", "sans-serif";
|
|
@font-family-serif: Georgia, "Times New Roman", Times, serif;
|
|
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
|
|
|
@font-family-base: @font-family-sans-serif;
|
|
@font-family: @font-family-base;
|
|
@font-family-heading: @font-family-sans-serif;
|
|
|
|
// ----- Font Weights -----
|
|
@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: 15px;
|
|
|
|
@font-size-smaller: @font-size-base * 0.80; // 12px
|
|
@font-size-small: @font-size-base * 0.93; // 14px
|
|
@font-size: @font-size-base; // 15px
|
|
@font-size-large: @font-size-base * 1.06; // 16px
|
|
@font-size-larger: @font-size-base * 1.20; // 18px
|
|
|
|
@font-size-h1: @font-size-base * 1.6; // 24px
|
|
@font-size-h2: @font-size-base * 1.6; // 24px
|
|
@font-size-h3: @font-size-base * 1.7; // 24px
|
|
@font-size-h4: @font-size-base * 1.25; // 18px
|
|
@font-size-h5: @font-size-base;
|
|
@font-size-h6: @font-size-base * 0.85; // 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;
|
|
|
|
|
|
//============================ Iconography =============================//
|
|
// Specify custom location and filename of the included Glyphicons icon
|
|
// font. Useful for those including Bootstrap via Bower.
|
|
|
|
//** Load fonts from this directory.
|
|
@icon-font-path: "../fonts/";
|
|
//** File name for all font files.
|
|
@icon-font-name: "glyphicons-halflings-regular";
|
|
//** Element ID within SVG icon file.
|
|
@icon-font-svg-id: "glyphicons_halflingsregular";
|
|
|
|
|
|
//============================== 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-sub-double: @spacing-standard * 1.75;
|
|
@spacing-double: @spacing-standard * 2;
|
|
@spacing-super-double: @spacing-standard * 2.25;
|
|
|
|
|
|
@padding-base-vertical: 6px;
|
|
@padding-base-horizontal: 12px;
|
|
|
|
@padding-large-vertical: 10px;
|
|
@padding-large-horizontal: 16px;
|
|
|
|
@padding-small-vertical: 5px;
|
|
@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: 4px;
|
|
@border-radius-large: 6px;
|
|
@border-radius-small: 3px;
|
|
|
|
|
|
//============================== Shadows ===============================//
|
|
@standard-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.21);
|
|
@standard-shadow-up: 0 -1px 4px 0 rgba(0, 0, 0, 0.21);
|
|
|
|
//=============================== Buttons ==============================//
|
|
|
|
@btn-shadow: @standard-shadow;
|
|
|
|
@btn-default-bg-color: @background-primary;
|
|
@btn-default-text-color: @text-color;
|
|
|
|
@btn-action-bg-color: @success-color;
|
|
@btn-action-text-color: @text-color;
|
|
|
|
@btn-emphasis-bg-color: #5b90fb;
|
|
@btn-emphasis-text-color: @text-color-inverse;
|
|
|
|
@btn-danger-bg-color: @danger-color;
|
|
@btn-danger-text-color: @text-color-inverse;
|
|
|
|
//=============================== Inputs ===============================//
|
|
|
|
//** `<input>` background color
|
|
@input-bg: #fff;
|
|
//** `<input disabled>` background color
|
|
@input-bg-disabled: @gray-lighter;
|
|
|
|
@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;
|
|
@input-cancel-color: @red;
|
|
|
|
//** Text color for `<input>`s
|
|
@input-color: @gray;
|
|
//** `<input>` border color
|
|
@input-border: #ccc;
|
|
|
|
// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
|
|
//** Default `.form-control` border radius
|
|
@input-border-radius: @border-radius-base;
|
|
//** Large `.form-control` border radius
|
|
@input-border-radius-large: @border-radius-large;
|
|
//** Small `.form-control` border radius
|
|
@input-border-radius-small: @border-radius-small;
|
|
|
|
//** Border color for inputs on focus
|
|
@input-border-focus: #66afe9;
|
|
|
|
//** Placeholder text color
|
|
@input-color-placeholder: #999;
|
|
|
|
//** Default `.form-control` height
|
|
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
|
|
//** Large `.form-control` height
|
|
@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
|
|
//** Small `.form-control` height
|
|
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
|
|
|
|
//** Background color for textual input addons
|
|
@input-group-addon-bg: @gray-lighter;
|
|
//** Border color for textual input addons
|
|
@input-group-addon-border-color: @input-border;
|
|
|
|
|
|
//=============================== Z-Index ==============================//
|
|
//-- Z-index master list
|
|
//
|
|
// Warning: Avoid customizing these values. They're used for a bird's eye
|
|
// view of components dependent on the z-axis and are designed to all work
|
|
// together.
|
|
//
|
|
// Note: These variables are not generated into the Customizer.
|
|
|
|
@zindex-navbar: 1000;
|
|
@zindex-dropdown: 1000;
|
|
@zindex-popover: 1060;
|
|
@zindex-tooltip: 1070;
|
|
@zindex-navbar-fixed: 1030;
|
|
@zindex-modal: 1040;
|
|
|
|
|
|
|
|
//** Global color for active items (e.g., navs or dropdowns).
|
|
@component-active-color: @accent-primary-dark;
|
|
//** Global background color for active items (e.g., navs or dropdowns).
|
|
@component-active-bg: @background-primary;
|
|
|
|
@component-secondary-active-bg: @background-primary;
|
|
|
|
//== Source List (used in Sidebar, iTunes-style)
|
|
//
|
|
// ##
|
|
|
|
//** Background color on `.list-group-item`
|
|
@source-list-bg: @panel-background-color;
|
|
//** Background color of active list items
|
|
@source-list-active-bg: @panel-background-color;
|
|
//** Text color of active list items
|
|
@source-list-active-color: @component-active-color;
|
|
|
|
//== List
|
|
//
|
|
//##
|
|
|
|
//** Background color on `.list-group-item`
|
|
@list-bg: #fff;
|
|
//** `.list-item` border color
|
|
@list-border: #ddd;
|
|
//** List group border radius
|
|
@list-border-radius: @border-radius-base;
|
|
|
|
//** Background color of single list items on hover
|
|
@list-hover-bg: #f5f5f5;
|
|
|
|
//** Text color of active list items
|
|
@list-focused-color: @list-bg;
|
|
//** Background color of active list items
|
|
@list-focused-bg: @component-active-color;
|
|
//** Border color of active list elements
|
|
@list-focused-border: @list-focused-bg;
|
|
//** Text color for content within active list items
|
|
@list-focused-color-muted: lighten(@list-focused-bg, 40%);
|
|
|
|
//** Text color of active list items
|
|
@list-selected-color: inherit;
|
|
//** Background color of active list items
|
|
@list-selected-bg: fade(@component-active-color, 17%);
|
|
//** Border color of active list elements
|
|
@list-selected-border: fade(@component-active-color, 50%);
|
|
//** Text color for content within active list items
|
|
@list-selected-color-muted: lighten(@list-selected-bg, 40%);
|
|
|
|
//** Text color of disabled list items
|
|
@list-disabled-color: @gray-light;
|
|
//** Background color of disabled list items
|
|
@list-disabled-bg: @gray-lighter;
|
|
//** Text color for content within disabled list items
|
|
@list-disabled-text-color: @list-disabled-color;
|
|
|
|
|
|
//** Abbreviations and acronyms border color
|
|
@abbr-border-color: @gray-light;
|
|
//** Blockquote small color
|
|
@blockquote-small-color: @gray-light;
|
|
//** Blockquote font size
|
|
@blockquote-font-size: (@font-size-base * 1.25);
|
|
//** Blockquote border color
|
|
@blockquote-border-color: @gray-lighter;
|
|
|
|
|
|
|
|
//== Form states and alerts
|
|
//
|
|
//## Define colors for form feedback states and, by default, alerts.
|
|
|
|
@state-success-text: #3c763d;
|
|
@state-success-bg: #dff0d8;
|
|
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
|
|
|
|
@state-info-text: #31708f;
|
|
@state-info-bg: #d9edf7;
|
|
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
|
|
|
|
@state-warning-text: #8a6d3b;
|
|
@state-warning-bg: #fcf8e3;
|
|
@state-warning-border: darken(spin(@state-warning-bg, -10), 5%);
|
|
|
|
@state-danger-text: #a94442;
|
|
@state-danger-bg: #f2dede;
|
|
@state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
|
|
|
|
/////
|
|
|
|
// -------------
|
|
// EVERYTHING BELOW THIS NEEDS TO BE DEPRECATED OR MOVED ABOVE THIS
|
|
// old stuff
|
|
// -------------
|
|
|
|
// 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;
|
|
|
|
@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: @blue; //!
|
|
@action-color: @green;
|
|
|
|
@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;
|
|
@background-color-pending: @light-gray;
|
|
|
|
@base-border-color: darken(@background-color, 15%);
|
|
@border-color: darken(@background-color, 15%);
|
|
@border-color-subtle: darken(@background-color, 8%);
|
|
|
|
// Inputs
|
|
|
|
// 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
|
|
|
|
@disclosure-arrow-size: 12px;
|
|
@input-font-size: 14px;
|
|
|
|
@component-padding: 10px;
|
|
@component-icon-padding: 5px;
|
|
@component-icon-size: 16px;
|
|
@component-line-height: 25px;
|
|
@component-border-radius: 2px;
|
|
|
|
|
|
|
|
@body-bg: @white;
|
|
//== Panels and Sidebars
|
|
@panel-background-color: @gray-lighter;
|
|
@toolbar-background-color: @gray-lighter;
|
|
|
|
// Helpers for Specs - Do Not Remove
|
|
@spec-test-variable: rgb(152,123,0);
|