Variables

Here are the variables we include:

Colors

Neutral color palette - Light mode

color preview $neutral-light-90 $primary-neutral-light #252626
color preview $neutral-light-80 #494A4A
color preview $neutral-light-70 #6B6B6B
color preview $neutral-light-60 #8A8A8A
color preview $neutral-light-50 #A5A5A5
color preview $neutral-light-40 #C0C0C0
color preview $neutral-light-30 #DADADA
color preview $neutral-light-20 #F2F2F2
color preview $neutral-light-10 #F7F7F7
color preview $neutral-light-05 #FFFFFF

Neutral color palette - Dark mode

color preview $neutral-dark-90 #000000
color preview $neutral-dark-80 #15181A
color preview $neutral-dark-70 $primary-neutral-dark #2B3033
color preview $neutral-dark-60 #4C545B
color preview $neutral-dark-50 #6F7A82
color preview $neutral-dark-40 #86929B
color preview $neutral-dark-30 #9AA5AE
color preview $neutral-dark-20 #AFBCC4
color preview $neutral-dark-10 #C3D0D9
color preview $neutral-dark-05 #E4EBF0

Blue palette

color preview $blue-90 #1B384C
color preview $blue-80 #14476A
color preview $blue-70 #0D5788
color preview $blue-60 $primary-blue #116FAE
color preview $blue-50 #1482CC
color preview $blue-40 #419BD7
color preview $blue-30 #6CB2E1
color preview $blue-20 #99CBEC
color preview $blue-10 #D2EAFA
color preview $blue-05 #E7F2F9

Green palette

color preview $green-90 #254934
color preview $green-80 #316245
color preview $green-70 $primary-green #2D7048
color preview $green-60 #4E9C54
color preview $green-50 #67A870
color preview $green-40 #7FAF7F
color preview $green-30 #9BC29B
color preview $green-20 #AFD4AF
color preview $green-10 #CFE7CF
color preview $green-05 #EBF7EB

Red palette

color preview $red-90 #801F30
color preview $red-80 #A12036
color preview $red-70 $primary-red #CC334C
color preview $red-60 #D44F64
color preview $red-50 #DB6B7D
color preview $red-40 #E28594
color preview $red-30 #EAA1AC
color preview $red-20 #F1BDC4
color preview $red-10 #FAD9DE
color preview $red-05 #FFEDEF

Orange palette

color preview $orange-90 #803B00
color preview $orange-80 #B35300
color preview $orange-70 $primary-orange #C26800
color preview $orange-60 #CA7900
color preview $orange-50 #E5A23E
color preview $orange-40 #EDB45F
color preview $orange-30 #F2C480
color preview $orange-20 #FAD7A2
color preview $orange-10 #FCDFB1
color preview $orange-05 #FCF2DC

Purple palette

color preview $purple-90 #403380
color preview $purple-80 $primary-purple #4D3D99
color preview $purple-70 #6154A5
color preview $purple-60 #7365B8
color preview $purple-50 #8A80BD
color preview $purple-40 #9E96C8
color preview $purple-30 #B2ABD3
color preview $purple-20 #C6C1DF
color preview $purple-10 #DAD7EA
color preview $purple-05 #EDECF5

Typography

Name Default value Description
$vud-units 'rem' Setup the type of unit you want the VUD library to load ('px' or 'rem')
$html-font-size 62.5% 1rem = 10px **
$body-font-size 1.4rem The font size we set on <body>
$font-size-base 1.4rem The base font size
$font-family-base 'OpenSansFallback', 'Open Sans', sans-serif; The base font family
$font-family-secondary 'UbuntuFallback', 'Ubuntu', 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 VUD 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 VUD in "~@vismaux/vud/src/scss/settings/config" and "~@vismaux/vud/src/scss/settings/variables"