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