1// Base colors
2$color--blue-100: #1B2834;
3$color--blue-50: #1D3458;
4$color--blue-40: #2D60E5;
5$color--blue-30: #7295F1;
6$color--blue-20: #CCD7F4;
7$color--blue-10: #EFF2FB;
8
9$color--grey-100: #333333;
10$color--grey-80: #666666;
11$color--grey-60: #999999;
12$color--grey-40: #CCCCCC;
13$color--grey-30: #DCDEE0;
14$color--grey-20: #F0F2F5;
15$color--grey-10: #FAFBFC;
16$color--grey-0: #FFFFFF;
17
18// Accent colors
19$color--teal-70: #098292;
20$color--teal-50: #00B6CB;
21$color--teal-20: #CCF0F5;
22
23$color--green-50: #0A7D06;
24$color--green-20: #C6E8C5;
25$color--green-10: #ECFDF1;
26
27$color--yellow-70: #DB7C00;
28$color--yellow-50: #FEDF39;
29$color--yellow-20: #FFF8E4;
30$color--yellow-10: #FFF8E4;
31
32$color--red-50: #DA1416;
33$color--red-20: #FAD3D3;
34$color--red-10: #FCE9E9;
35
36// Color mapping
37$base-01--01: $color--blue-100;
38$base-01--02: $color--blue-50;
39$base-01--03: $color--blue-40;
40$base-01--04: $color--blue-30;
41$base-01--05: $color--blue-20;
42
43$base-02--01: $color--grey-100;
44$base-02--02: $color--grey-80;
45$base-02--03: $color--grey-60;
46$base-02--04: $color--grey-40;
47$base-02--05: $color--grey-30;
48$base-02--06: $color--grey-20;
49$base-02--07: $color--grey-10;
50$base-02--08: $color--grey-0;
51
52$accent-01--01: $color--teal-70;
53$accent-01--02: $color--teal-50;
54$accent-01--03: $color--teal-20;
55
56$accent-02--01: $color--green-50;
57$accent-02--02: $color--green-20;
58
59$accent-03--01: $color--yellow-70;
60$accent-03--02: $color--yellow-50;
61$accent-03--03: $color--yellow-20;
62
63$accent-04--01: $color--red-50;
64$accent-04--02: $color--red-20;
65
66// Global
67$primary-light: $base-02--08;
68$primary-dark: $base-02--01;
69$primary-accent: $base-01--03;
70
71$primary-action: $base-01--03;
72$primary-action--hover: $base-01--04;
73
74$text-01: $base-02--01;
75$text-02: $base-02--02;
76$text-03: $base-02--06;
77
78$background-01: $primary-light;
79$background-02: $base-02--06;
80$background-03: $base-02--05;
81$background-04: $base-01--01;
82$background-05: $base-01--02;
83
84$border-color-01: $base-02--05;
85$border-color-02: $base-02--03;
86
87$box-shadow-color: $base-02--05;
88
89$status-error: $accent-04--01;
90$status-ok: $accent-02--01;
91$status-warn: $accent-03--01;
92
93$notification-info--dark: $color--blue-40;
94$notification-info--light: $color--blue-10;
95$notification-success--dark: $color--green-50;
96$notification-success--light: $color--green-10;
97$notification-warn--dark: $color--yellow-50;
98$notification-warn--light: $color--yellow-10;
99$notification-error--dark: $color--red-50;
100$notification-error--light: $color--red-10;
101
102