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
2.8 KiB
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. 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:
@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-