Style variables

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 -

2.8 KiB Raw Blame History