Colors are selectable throughout our whole framework in every component you use like; headings, text, buttons, lists, icons, backgrounds etc.
Variable theme colors (10)
color 1 var( – – color – 1)
color 2 var(–color-2)
color 3 var(–color-3)
color 4 var(–color-4)
color 5 var(–color-5)
color 6 var(–color-6)
color 7 var(–color-7)
color 8 var(–color-8)
color 9 var(–color-9)
color 10 var(–color-0)
White to black colors (7)
Background white
color Gray 1 var(–gray-1)
color Gray 2 var(–gray-2)
color Gray 3 var(–gray-3)
color Gray 4 var(–gray-4)
color Gray 5 var(–gray-5)
color black var(–color-black)
[code]
// Colors used on components like headings, text, buttons, lists, icons, backgrounds etc.
:root {
–color-1: #4ba3e7;
–color-1-hover: #4ba3e7;
–color-2: #412458;
–color-2-hover: #412458;
–color-3: #32bcad;
–color-3-hover: #50d1c3;
–color-4: #f79952;
–color-4-hover: #f96d02;
–color-5: #da2f5a;
–color-5-hover: #e20038;
–color-6: #412458;
–color-6-hover: #522d70;
–color-7: #4ba3e7;
–color-7-hover: #3e86be;
–color-8: #32bcad;
–color-8-hover: #50d1c3;
–color-9: #f79952;
–color-9-hover: #f9b683;
–color-0: #da2f5a;
–color-0-hover: #e25a7c;
}
</pre>
<pre>// Colors Gray
:root {
–gray-1: #f5f0eb;
–gray-2: #dee2e6;
–gray-3: #adb5bd;
–gray-4: #495057;
–gray-5: #212529;
}
// Colors in text
:root {
–body-color: #ffffff;
–text-color: #000000;
–text-color-hover: #252525;
–link-color: #1a0dab;
–link-color-hover: #4ba3e7;
}
[/code]