73b99880fd
Test Plan: Run existing tests Reviewers: evan Differential Revision: https://review.inboxapp.com/D1160
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-