Variables
Here are the variables we include:
Colors
Neutral color palette - Light mode
$neutral-light-90
$primary-neutral-light
#252626
$neutral-light-80
#494A4A
$neutral-light-70
#6B6B6B
$neutral-light-60
#8A8A8A
$neutral-light-50
#A5A5A5
$neutral-light-40
#C0C0C0
$neutral-light-30
#DADADA
$neutral-light-20
#F2F2F2
$neutral-light-10
#F7F7F7
$neutral-light-05
#FFFFFF
Neutral color palette - Dark mode
$neutral-dark-90
#000000
$neutral-dark-80
#15181A
$neutral-dark-70
$primary-neutral-dark
#2B3033
$neutral-dark-60
#4C545B
$neutral-dark-50
#6F7A82
$neutral-dark-40
#86929B
$neutral-dark-30
#9AA5AE
$neutral-dark-20
#AFBCC4
$neutral-dark-10
#C3D0D9
$neutral-dark-05
#E4EBF0
Blue palette
$blue-90
#1B384C
$blue-80
#14476A
$blue-70
#0D5788
$blue-60
$primary-blue
#116FAE
$blue-50
#1482CC
$blue-40
#419BD7
$blue-30
#6CB2E1
$blue-20
#99CBEC
$blue-10
#D2EAFA
$blue-05
#E7F2F9
Green palette
$green-90
#254934
$green-80
#316245
$green-70
$primary-green
#2D7048
$green-60
#4E9C54
$green-50
#67A870
$green-40
#7FAF7F
$green-30
#9BC29B
$green-20
#AFD4AF
$green-10
#CFE7CF
$green-05
#EBF7EB
Red palette
$red-90
#801F30
$red-80
#A12036
$red-70
$primary-red
#CC334C
$red-60
#D44F64
$red-50
#DB6B7D
$red-40
#E28594
$red-30
#EAA1AC
$red-20
#F1BDC4
$red-10
#FAD9DE
$red-05
#FFEDEF
Orange palette
$orange-90
#803B00
$orange-80
#B35300
$orange-70
$primary-orange
#C26800
$orange-60
#CA7900
$orange-50
#E5A23E
$orange-40
#EDB45F
$orange-30
#F2C480
$orange-20
#FAD7A2
$orange-10
#FCDFB1
$orange-05
#FCF2DC
Purple palette
$purple-90
#403380
$purple-80
$primary-purple
#4D3D99
$purple-70
#6154A5
$purple-60
#7365B8
$purple-50
#8A80BD
$purple-40
#9E96C8
$purple-30
#B2ABD3
$purple-20
#C6C1DF
$purple-10
#DAD7EA
$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"