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 #6a6c6d
color preview $neutral-light-70 #959799
color preview $neutral-light-60 #aaacae
color preview $neutral-light-50 #c1c3c5
color preview $neutral-light-40 #d9dcde
color preview $neutral-light-30 #e3e6e8
color preview $neutral-light-20 #f0f2f5
color preview $neutral-light-10 #f7f9fa
color preview $neutral-light-05 #ffffff

Neutral color palette - Dark mode

color preview $neutral-dark-90 #070a0d
color preview $neutral-dark-80 #19262e
color preview $neutral-dark-70 $primary-neutral-dark #20303b
color preview $neutral-dark-60 #273b47
color preview $neutral-dark-50 #385466
color preview $neutral-dark-40 #507085
color preview $neutral-dark-30 #6f8b9e
color preview $neutral-dark-20 #99b1bf
color preview $neutral-dark-10 #d8e6f0
color preview $neutral-dark-05 #ffffff

Blue palette

color preview $blue-90 #163e59
color preview $blue-80 #0060a1
color preview $blue-70 #0071bd
color preview $blue-60 $primary-blue #007aca
color preview $blue-50 #0087e0
color preview $blue-40 #1c98eb
color preview $blue-30 #5bb4f0
color preview $blue-20 #96d2fa
color preview $blue-10 #dceefa
color preview $blue-05 #ebf7ff

Green palette

color preview $green-90 #305200
color preview $green-80 #3b6600
color preview $green-70 $primary-green #4d8400
color preview $green-60 #68a611
color preview $green-50 #7fb435
color preview $green-40 #99c35d
color preview $green-30 #b0d182
color preview $green-20 #cfe5ae
color preview $green-10 #e4f0d3
color preview $green-05 #f4faeb

Red palette

color preview $red-90 #A6000E
color preview $red-80 #D11525
color preview $red-70 $primary-red #D93644
color preview $red-60 #E04C59
color preview $red-50 #F0616D
color preview $red-40 #F0828C
color preview $red-30 #FEB0B7
color preview $red-20 #FFD4D8
color preview $red-10 #FFE5E7
color preview $red-05 #FFF2F3

Orange palette

color preview $orange-90 $primary-orange #b35300
color preview $orange-80 #d76500
color preview $orange-70 #f28d00
color preview $orange-60 #ffaa33
color preview $orange-50 #ffc46f
color preview $orange-40 #ffcf8b
color preview $orange-30 #ffd9a3
color preview $orange-20 #ffeacc
color preview $orange-10 #fff4e5
color preview $orange-05 #fffcf5

Purple palette

color preview $purple-90 #663380
color preview $purple-80 $primary-purple #7A3D99
color preview $purple-70 #8B54A5
color preview $purple-60 #9A6BB1
color preview $purple-50 #A980BD
color preview $purple-40 #B896C8
color preview $purple-30 #C6ABD3
color preview $purple-20 #D6C1DF
color preview $purple-10 #E4D7EA
color preview $purple-05 #F2ECF5

Typography

Name Default value Description
$nc4-units 'rem' Setup the type of unit you want the NC4 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' Path to icons folder **

**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 NC4 in "~@vismaux/nordic-cool/src/scss/settings/config" and "~@vismaux/nordic-cool/src/scss/settings/variables"