Skip to content

GitLab

  • Menu
Projects Groups Snippets
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
  • Sign in / Register
  • D design
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
    • Locked Files
  • Issues 20
    • Issues 20
    • List
    • Boards
    • Service Desk
    • Milestones
    • Iterations
    • Requirements
  • Merge requests 0
    • Merge requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
    • Test Cases
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Code review
    • Insights
    • Issue
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • pubsweet
  • design
  • Wiki
  • Theme variables

Last edited by Yannis Barlas Jun 28, 2018
Page history

Theme variables

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
Clone repository
  • Design links from Europe PMC plus
  • Design links from eLife
  • Design meetings
  • Theme variables
  • coko theme
  • design principles for the xpub starter kit
  • Home