This is a list of variables that applies to pubsweet themes by default. Components that are in the pubsweet library expect these variables and will change their styles accordingly.

Even though the following set of variables is designed to cover most of the needs of designers and frontend developers, it is also expected that sometimes they will need to be extended, overriden or changed to achieve the desired look and feel of a particular application.

Variables

Colors

variable	comments
colorBackground	Sets the background color of pages (eg. on the body)
colorPrimary	Indicates a primary call to action
colorSecondary	Default color for non-primary actions
colorFurniture	Meant to be applied to elements that indicate content division
colorBorder	For borders around form elements
colorBackgroundHue	Used to create a discrete contrast the default background color
colorSuccess	Used to indicate a successful validation state
colorWarning	Used to indicate a warning in validation state
colorError	Used to indicate an error in validation
colorText	Default font color
colorTextReverse	Reverse font color
colorTextPlaceholder	Used for text field placeholders

Typography

Fonts

variable	comments
fontInterface	Used for user interface elements by default
fontHeading	Used for headings
fontReading	Main reading text
fontWriting	Font used for writing

Font Sizes

variable	comments
fontSizeBase	Default font size
fontSizeBaseSmall	Smaller variation of fontSizeBase
fontSizeHeading1	Size for Heading 1
fontSizeHeading2	Size for Heading 2
fontSizeHeading3	Size for Heading 3
fontSizeHeading4	Size for Heading 4
fontSizeHeading5	Size for Heading 5
fontSizeHeading6	Size for Heading 6

Line Heights

Each font size has a corresponding line height

variable	comments
lineHeightBase	Default line height
lineHeightBaseSmall	Line height for fontSizeBaseSmall
lineHeightHeading1	Line height for h1
lineHeightHeading2	Line height for h2
lineHeightHeading3	Line height for h3
lineHeightHeading4	Line height for h4
lineHeightHeading5	Line height for h5
lineHeightHeading6	Line height for h6

Spacing

variable	comments
gridUnit	Base interface space measurement used by elements and typography

Border

variable	comments
borderRadius	Radius value applied to borders throughout the user interface
borderWidth	Width value applied to borders
borderStyle	Style applied to borders (eg. solid, dashed)

Shadow

variable	comments
boxShadow	Default shadow that is applied to elements that float (eg. tooltips, modals)

Transition

variable	comments
transitionDuration	How long transitions should last
transitionTimingFunction	Which function should be applied to transitions (eg. easein)
transitionDelay	How long transitions should be delayed before they begin