mirror of
https://github.com/Foundry376/Mailspring.git
synced 2025-02-01 04:50:59 +08:00
e4889b390f
Summary: This diff replaces the participant text fields with ones based on TokenizingTextField, a new core component that handles autocompletion, drag and drop of tokens, etc. Fix large queries overloading SQLite size limits New general purpose tokenized text field with token selection, copy paste, etc Move pre-send logic to the view since DraftStore requests from db, which may not have settled Tests - still a WIP Support for contextual menus instead of X Test Plan: Run new tests. Needs many more, but have higher priority things to fix Reviewers: evan Reviewed By: evan Differential Revision: https://review.inboxapp.com/D1142
126 lines
No EOL
3.3 KiB
Text
126 lines
No EOL
3.3 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;
|
|
|
|
@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(@base-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); |