Nuclides
Table of content
What are Nuclides?

Nuclides are parts of the stylesheet source that are not directly useable on their own. This could be mixins, variables like colors and sizes, or settings.

To mark a variable or mixin as a nuclide, annotate it with the @nuclide tag, followed by the name of the nuclide.

Special forms are @color and @mixin.

Mixins
Generation Functions
rem-calc($values, $base-value: $rem-base)src/framework/functions.scss
Show example
Parameter
Optional
Description
$value
the value in px to be converted to rem
$base-value
Optional parameter if you wish to use a different base value to calculate the rem
font-size: rem-calc(14px) -> 1rem
Generation Mixins
make-numeric-class($name, $iterations, $property, $unit: false, $step: 1)src/framework/mixins.scss
Show example
Parameter
Optional
Description
$name
name of the generated class (will be suffixed with numerical value)
$iterations
number of values to generate
$property
the css property to generate
$unit
the unit to use, if no unit is specified then no unit is used
@include make-numeric-class('radius', 5, 'border-radius', 'px') @include make-numeric-class('p-', 30, 'padding', '%') @include make-numeric-class('fs-', 3, 'font-size', 'rem')
evolution($type, $unit: null)src/framework/mixins.scss
Show example
Set the given element as an evolution badge by specifying the type of the evolution
Parameter
Optional
Description
$type
One of "positive", "negative" or "neutral"
$unit
If specified, the unit will be apended to the end of the value
@include evolution('positive') '➚ {n}' @include evolution('negative') '➘ {n}' @include evolution('neutral', '%') '➞ {n}%'
Colors
Main Color
Color
Variable
Hex
RGBA
Aa
Main color
$b-color__primary
#47B8B3
rgba(71, 184, 179, 1)
Primary Color
Color
Variable
Hex
RGBA
Aa
300
$b-color__primary--300
#2C7370
rgba(44, 115, 112, 1)
Aa
200
$b-color__primary--200
#AACCC3
rgba(170, 204, 195, 1)
Aa
100
$b-color__primary--100
#DAECE7
rgba(218, 236, 231, 1)
Warning color
Color
Variable
Hex
RGBA
Aa
300
$b-color__warning--300
#F9B211
rgba(249, 178, 17, 1)
Aa
200
$b-color__warning--200
#F8ECDA
rgba(248, 236, 218, 1)
Aa
100
$b-color__warning--100
#FCF6ED
rgba(252, 246, 237, 1)
Danger color
Color
Variable
Hex
RGBA
Aa
300
$b-color__danger--300
#EA5B63
rgba(234, 91, 99, 1)
Aa
200
$b-color__danger--200
#F9E3E2
rgba(249, 227, 226, 1)
Aa
100
$b-color__danger--100
#FCF0F0
rgba(252, 240, 240, 1)
Success color
Color
Variable
Hex
RGBA
Aa
300
$b-color__success--300
#529E5F
rgba(82, 158, 95, 1)
Aa
200
$b-color__success--200
#E4F2DA
rgba(228, 242, 218, 1)
Aa
100
$b-color__success--100
#F2F9EC
rgba(242, 249, 236, 1)
Data color
Color
Variable
Hex
RGBA
Aa
300
$b-color__data--300
#46B1FF
rgba(70, 177, 255, 1)
Aa
200
$b-color__data--200
#DAEFFF
rgba(218, 239, 255, 1)
Aa
100
$b-color__data--100
#F0F9FF
rgba(240, 249, 255, 1)
Font color
Color
Variable
Hex
RGBA
Aa
Primary Text
$b-color__primary--text
#3E3B31
rgba(62, 59, 49, 1)
Aa
Secondary Text
$b-color__secondary--text
#92908C
rgba(146, 144, 140, 1)
Aa
Placeholder
$b-color__placeholder
#CDCBC5
rgba(205, 203, 197, 1)
Border color
Color
Variable
Hex
RGBA
Aa
Base
$b-color__border--base
#DCDFE6
rgba(220, 223, 230, 1)
Aa
Light
$b-color__border--light
#E4E7ED
rgba(228, 231, 237, 1)
Aa
Lighter
$b-color__border--lighter
#EBEEF5
rgba(235, 238, 245, 1)
Aa
Extralight
$b-color__border--extralight
#F2F6FC
rgba(242, 246, 252, 1)
Positive Color
Color
Variable
Hex
RGBA
Aa
positive lighter
$b-color__positive--lighter
#E7E7E7
rgba(231, 231, 231, 1)
Aa
positive light
$b-color__positive--light
#AEC097
rgba(174, 192, 151, 1)
Aa
positive
$b-color__positive
#9EB980
rgba(158, 185, 128, 1)
Aa
positive dark
$b-color__positive--dark
#86A760
rgba(134, 167, 96, 1)
Aa
positive darker
$b-color__positive--darker
#638C33
rgba(99, 140, 51, 1)
Neutral
Color
Variable
Hex
RGBA
Aa
neutral
$b-color__neutral
#F2F2F2
rgba(242, 242, 242, 1)
Negative Color
Color
Variable
Hex
RGBA
Aa
negative lighter
$b-color__negative--lighter
#D8CAC2
rgba(216, 202, 194, 1)
Aa
negative light
$b-color__negative--light
#D3BCAE
rgba(211, 188, 174, 1)
Aa
negative
$b-color__negative
#CDA590
rgba(205, 165, 144, 1)
Aa
negative dark
$b-color__negative--dark
#C99173
rgba(201, 145, 115, 1)
Aa
negative darker
$b-color__negative--darker
#BF5721
rgba(191, 87, 33, 1)
360 color
Color
Variable
Hex
RGBA
Aa
Main 360 color
$b-color__primary--360
#B03BA0
rgba(176, 59, 160, 1)
Aa
360 color darker
$b-color__primary--360--darker
#8D3A7E
rgba(141, 58, 126, 1)
Various Color
Color
Variable
Hex
RGBA
Aa
White
$b-color__white
#FFFFFF
rgba(255, 255, 255, 1)
Aa
Background color
$b-color__bg
#F4F8F8
rgba(244, 248, 248, 1)
Aa
Light grayish violet
$b-color__light-purple
#EDD5F6
rgba(237, 213, 246, 1)
Aa
Moderate violet
$b-color__dark-purple
#AF42D6
rgba(175, 66, 214, 1)
Aa
Light grayish blue
$b-color__lightest-purple
#D0D5FB
rgba(208, 213, 251, 1)
Aa
Bright blue
$b-color__dark-blue
#344BF0
rgba(52, 75, 240, 1)