mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-11-14 13:44:41 +08:00
df38008c56
Summary: This diff includes a few small things: - Menu: Don't select the first item until the user taps down arrow, and allow the user to use the arrow keys to move up and down through Menu items. - Menu: Make scroll code from MultiselectList re-usable, use in Menu. Now if you use the keys to move to an item that is offscreen it will follow. - Popover: Tapping the button that opened popover should close it - Make sure buttons in toolbars are at least standard height - Re-enable Markdown processing via `grunt docs` - A bit of initial inline documentation for crosjdoc. Need to evaluate whether this is worth doing everywhere. - New `search-playground` package for experimenting with search and search weights. - Swap itemClassProvider for more generic itemPropProvider - Add crojsdoc config file - Export React, because third party packages can't require things from our app - [FEATURE] Bring back static file support in third party packages via `nylas://translate/IMG_20150417_124142.jpg` - Fix invariant error with search bar - [FEATURE] "Show Original" under Message actions - Fix DatabaseView so that many archives at once don't cause problems Test Plan: Run specs Reviewers: evan Reviewed By: evan Differential Revision: https://review.inboxapp.com/D1426
118 lines
2.8 KiB
Markdown
118 lines
2.8 KiB
Markdown
# Style variables
|
|
|
|
EDGEHILL NOTE: THIS FILE IS NOT UP TO DATE.
|
|
|
|
Atom's UI provides a set of variables you can use in your own themes and packages.
|
|
|
|
## Use in Themes
|
|
|
|
Each custom theme must specify a `ui-variables.less` file with all of the
|
|
following variables defined. The top-most theme specified in the theme settings
|
|
will be loaded and available for import.
|
|
|
|
## Use in Packages
|
|
|
|
In any of your package's `.less` files, you can access the theme variables
|
|
by importing the `ui-variables` file from Atom.
|
|
|
|
Your package should generally only specify structural styling, and these should
|
|
come from [the style guide][styleguide]. Your package shouldn't specify colors,
|
|
padding sizes, or anything in absolute pixels. You should instead use the theme
|
|
variables. If you follow this guideline, your package will look good out of the
|
|
box with any theme!
|
|
|
|
Here's an example `.less` file that a package can define using theme variables:
|
|
|
|
```css
|
|
@import "ui-variables";
|
|
|
|
.my-selector {
|
|
background-color: @base-background-color;
|
|
padding: @component-padding;
|
|
}
|
|
```
|
|
|
|
## Variables
|
|
|
|
### Text colors
|
|
|
|
* `@text-color`
|
|
* `@text-color-subtle`
|
|
* `@text-color-highlight`
|
|
* `@text-color-selected`
|
|
* `@text-color-info` - A blue
|
|
* `@text-color-success`- A green
|
|
* `@text-color-warning`- An orange or yellow
|
|
* `@text-color-error` - A red
|
|
|
|
### Background colors
|
|
|
|
* `@background-color-info` - A blue
|
|
* `@background-color-success` - A green
|
|
* `@background-color-warning` - An orange or yellow
|
|
* `@background-color-error` - A red
|
|
* `@background-color-highlight`
|
|
* `@background-color-selected`
|
|
* `@app-background-color` - The app's background under all the editor components
|
|
|
|
### Component colors
|
|
|
|
* `@base-background-color` -
|
|
* `@base-border-color` -
|
|
|
|
* `@pane-item-background-color` -
|
|
* `@pane-item-border-color` -
|
|
|
|
* `@input-background-color` -
|
|
* `@input-border-color` -
|
|
|
|
* `@tool-panel-background-color` -
|
|
* `@tool-panel-border-color` -
|
|
|
|
* `@inset-panel-background-color` -
|
|
* `@inset-panel-border-color` -
|
|
|
|
* `@panel-heading-background-color` -
|
|
* `@panel-heading-border-color` -
|
|
|
|
* `@overlay-background-color` -
|
|
* `@overlay-border-color` -
|
|
|
|
* `@button-background-color` -
|
|
* `@button-background-color-hover` -
|
|
* `@button-background-color-selected` -
|
|
* `@button-border-color` -
|
|
|
|
* `@tab-bar-background-color` -
|
|
* `@tab-bar-border-color` -
|
|
* `@tab-background-color` -
|
|
* `@tab-background-color-active` -
|
|
* `@tab-border-color` -
|
|
|
|
* `@tree-view-background-color` -
|
|
* `@tree-view-border-color` -
|
|
|
|
* `@ui-site-color-1` -
|
|
* `@ui-site-color-2` -
|
|
* `@ui-site-color-3` -
|
|
* `@ui-site-color-4` -
|
|
* `@ui-site-color-5` -
|
|
|
|
### Component sizes
|
|
|
|
* `@disclosure-arrow-size` -
|
|
|
|
* `@component-padding` -
|
|
* `@component-icon-padding` -
|
|
* `@component-icon-size` -
|
|
* `@component-line-height` -
|
|
* `@component-border-radius` -
|
|
|
|
* `@tab-height` -
|
|
|
|
### Fonts
|
|
|
|
* `@font-size` -
|
|
* `@font-family` -
|
|
|
|
[styleguide]: https://github.com/atom/styleguide
|