|
|
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 |
|
|
\ No newline at end of file |