mirror of
https://github.com/Foundry376/Mailspring.git
synced 2025-02-01 04:50:59 +08:00
73b99880fd
Test Plan: Run existing tests Reviewers: evan Differential Revision: https://review.inboxapp.com/D1160
127 lines
No EOL
3.4 KiB
Text
127 lines
No EOL
3.4 KiB
Text
// 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); |