When building custom components, variables needs to ALWAYS be used when applicable. Doing so ensures design consistency.
Most variables are defined as maps to enable generation of helpers. Since getting values from maps makes the code more cluttered, it's encouraged to use the shorthand variables instead.
Do use: $font-size-medium
Don not use: map-get($font-sizes, 'medium')
Everything which doesn't fit in other categories.
$border-radius - All rounding of corners should use this variable.
$box-shadow - Used for things like appearing menus and dropdowns
$box-shadow-large - Used for modals
$line-height - Relative line height for all text
$font-family - Standard font family
$font-family-numerical - Font family used for numbers
Mostly used for margins and paddings.
$size-huge - Main paddings and between sections
$size-large - Often used between blocks within sections
$size-medium - Unsure? Try this one.
$size-small - Between elements in a block
$size-tiny - Between elements in a block
$size-nano - For single pixel margins
Used to build layouts, typically to define widths.
$fraction-whole - One column
$fraction-half - Two columns
$fraction-third - Three columns
$fraction-fourth - Four columns
$fraction-fifth - Five columns
$font-size-huge - For when you want a really big text
$font-size-large - H1 - Page titles
$font-size-medium - H2 - Section headings
$font-size-small - P, H3 - Default body text, smaller headings
$font-size-tiny - Details which are usually relevant
$font-size-nano - Details which are usually not relevant
Regular variant
$button-height
$button-padding
$button-icon-size
Small variant
$small-button-height
$small-button-padding
$small-button-icon-size
Icon only variant
$icon-button-icon-size
$small-icon-button-icon-size
Used to carve out hierarchies in layouts. Should go from darker to brighter
$background-brightness-high - Highest level - Content sections within main area
$background-brightness-medium - Middle level - Main area, active menu option
$background-brightness-low - Lowest level - Menu/Navigation
Colors for specific use cases
$background-color-primary - A saturated color used for primary actions, usually one per context
$background-color-success - Used for indications of successfull operations
$background-color-danger - Usually used when user data might be lost
$background-color-notice - Used for displaying important messages which aren't considered "dangerous"
Common contrasts used for most things
$font-contrast-high - Used for hover or active states
$font-contrast-medium - Default body text
$font-contrast-low - Used for descriptions/elaborations, like this one
$font-contrast-lowest - Used for info that needs to exist, but is unimportant for most of the usage
Colors for specific use cases
$font-color-link - Used for text links
$font-color-primary - A saturated color used for primary actions, usually one per context
$font-color-success - Used for indications of successfull operations
$font-color-danger - Usually used when user data might be lost
$border-contrast-high - Highest contrast dividers or frames
$border-contrast-medium - Good for many dividers or frames
$border-contrast-low - For subtile dividers and frames
$button-background-color - Used for many clickable things
$button-background-color-hover - Hover state for said clickable things
$button-background-color-active - When something clickable has a permanent "active" state