Variables

Here are the variables we include:

Colours

For comprehensive documentation on colour variables and the colour palette, see the Colour palette page.

Typography

Name	Default value	Description
`$vud-units`	`'rem'`	Setup the type of unit you want the Design System library to load ('px' or 'rem')
`$html-font-size`	`62.5%`	1rem = 10px **
`$body-font-size`	`1.4rem`	REMOVED! If you need this functionality, set `body: {font-size: 13px}` in your CSS code. The font size we set on `<body>`
`$font-size-base`	`1.4rem`	The base font size
`$font-family-base`	`'InterFallback', 'Inter', sans-serif`	The base font family
`$font-family-secondary`	`'InterFallback', 'Inter', sans-serif`	The secondary font family
`$line-height-base`	`1.4`	The base line height
`$font-weight-base`	`normal`	The base font weight

** Why we set the root to 62.5%? Beacuse 62.5% is equal to 10px in most browsers, so it makes it easier to calculate REM units (eg. $body-font-size in our case it's 1.4rem = 14px).
The main reason we use "%" and not "px" to setup the root font-size is to let the user reset the browser font size, so the typography will scale proportionally to user's default browser settings.

Paths

Name	Default value	Description
`$prefix-path`	`'../..'`	You can change this value to match the file structure you have **
`$image-path`	`'#{$prefix-path}/img'`	Path to image folder **
`$font-path`	`'#{$prefix-path}/fonts'`	Path to fonts folder **
`$icons-path`	`'#{$prefix-path}/img/vismaicons'`	DEPRECATED - this will be removed, we don't have the icons in the the Design System library, more details here.

**CSP and embedded SVGs
Content Security Policy (CSP) blocks SVGs embedded as data URI in CSS url(), that is why we we use SVGs as static images.

Spacings

Name	Default value	Description
`$spacing-0`	`0`	Specifies the spacer value to 0rem/0px **
`$spacing-2`	`0.2rem/2px`	Specifies the spacer value to 0.2rem/2px **
`$spacing-4`	`0.4rem/4px`	Specifies the spacer value to 0.4rem/4px **
`$spacing-8`	`0.8rem/8px`	Specifies the spacer value to 0.8rem/8px **
`$spacing-12`	`1.2rem/12px`	Specifies the spacer value to 1.2rem/12px **
`$spacing-16`	`1.6rem/16px`	Specifies the spacer value to 1.6rem/16px **
`$spacing-24`	`2.4rem/24px`	Specifies the spacer value to 2.4rem/24px **
`$spacing-32`	`3.2rem/32px`	Specifies the spacer value to 3.2rem/32px **
`$spacing-40`	`4rem/40px`	Specifies the spacer value to 4rem/40px **
`$spacing-48`	`4.8rem/48px`	Specifies the spacer value to 4.8rem/48px **
`$spacing-64`	`6.4rem/64px`	Specifies the spacer value to 6.4rem/64px **
`$spacing-96`	`9.6rem/96px`	Specifies the spacer value to 9.6rem/96px **
`$spacing-128`	`12.8rem/128px`	Specifies the spacer value to 12.8rem/128px **
`$spacing-auto`	`auto`	Specifies the spacer value to auto **

**You can also use helper classes (for margins and paddings or for positioning).

More variables!

The list will continue. Until then, you can find more variables we have in the Design System in "~"@visma-spcs-registry/designsystem/src/scss/settings/config" and "~@visma-spcs-registry/designsystem/src/scss/settings/variables"