Vars

The design system ensures visual consistency by using a vars.scss file for all visual concerns like color, spacing, font, max width, box shadows etc. On build, this file gets included in the distributed package in a scss format, css format and less format for use in different kinds of apps.

The goal is for all design system components and all custom css to eventually use these vars as much as possible. This will allow us to control all of our visual styles from the design system, and make UI changes globally with a new design system release.

See the full list of vars on GitHub (opens new window).

Adding New Vars

Whenever you’re writing CSS in the design system, you should think about whether that style will need to be used again. If it is, it can be added to vars.scss. Follow the naming convention guidelines and put it in the appropriate section in the file or create a new one.

Rules of thumb

• Things that are universal don't need a variable. eg: 0px, 0%, 100%, 100vw, 100vh
• Variables should be coherent and meaningful. We dont need a 25px variable if we already have one of 20px . It’s possible that the 25px is just a manual error in the design. Consult design if you’re not sure.

Usage

Importing the vars.scss file should be done with its alias @vars.scss, for example when calling it from a component's style section:

<style lang="scss">
@import '@vars.scss'

// rest of file
</style>