1 |
|
2 |
|
3 | $system-stack-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
|
4 | Cantarell, 'Helvetica Neue', sans-serif;
|
5 | $main-font: #{$system-stack-font};
|
6 | $second-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
7 |
|
8 | $base-font-weight: 400;
|
9 | $heavy-font-weight: 700;
|
10 |
|
11 |
|
12 | $primary-color: #ff00ff;
|
13 | $secondary-color: #006cff;
|
14 |
|
15 | $dt-bg-team: #1d1f22;
|
16 |
|
17 | $border-color: #00000014;
|
18 |
|
19 | $black: #000000;
|
20 | $white: #ffffff;
|
21 | $grey: #7a7a7a;
|
22 | $darken-grey: #343434;
|
23 | $lighten-black: #808080;
|
24 | $lighten-grey: #858585;
|
25 |
|
26 |
|
27 | $assetsPath: '../assets';
|
28 | $border-radius: 16px;
|
29 |
|
30 | :root {
|
31 |
|
32 | --main-font: #{$main-font};
|
33 | --second-font: #{$second-font};
|
34 |
|
35 |
|
36 |
|
37 | --xs-font: 10px;
|
38 | --sm-font: 12px;
|
39 | --md-font: 14px;
|
40 | --lg-font: 16px;
|
41 | --xl-font: 22px;
|
42 | --xxl-font: 26px;
|
43 | --xxxl-font: 32px;
|
44 |
|
45 |
|
46 | --font-weight-regular: #{$base-font-weight};
|
47 | --font-weight-semi-bold: 600;
|
48 | --font-weight-bold: #{$heavy-font-weight};
|
49 |
|
50 |
|
51 | --primary-color: #{$secondary-color};
|
52 | --primary-color-faded: #006cff5c;
|
53 |
|
54 | --magenta: #{$primary-color};
|
55 | --red: #ff0000;
|
56 | --faded-red: #d0021b1a;
|
57 | --blue: #026afa;
|
58 | --faded-blue: #cfe3ff;
|
59 |
|
60 | --dt-bg-team: #{$dt-bg-team};
|
61 |
|
62 | --border-color: #{$border-color};
|
63 |
|
64 | --lighten-black: #{$lighten-black};
|
65 |
|
66 | --lighten-grey: #{$lighten-grey};
|
67 |
|
68 | --light-grey: #ebebeb;
|
69 | --grey: #{$grey};
|
70 | --dark-grey: #{$darken-grey};
|
71 |
|
72 | --green: #28ca42;
|
73 | --faded-green: #02d0021a;
|
74 |
|
75 |
|
76 | --white: #{$white};
|
77 | --white5: #ffffff0d;
|
78 | --white10: #ffffff1a;
|
79 | --white20: #ffffff33;
|
80 | --white30: #ffffff4d;
|
81 | --white40: #ffffff66;
|
82 | --white50: #ffffff80;
|
83 | --white60: #ffffff99;
|
84 | --white70: #ffffffb3;
|
85 | --white80: #ffffffcc;
|
86 | --white90: #ffffffe6;
|
87 | --white95: #fffffff2;
|
88 |
|
89 |
|
90 | --black: #{$black};
|
91 | --black5: #0000000d;
|
92 | --black10: #0000001a;
|
93 | --black20: #00000033;
|
94 | --black30: #0000004d;
|
95 | --black40: #00000066;
|
96 | --black50: #00000080;
|
97 | --black60: #00000099;
|
98 | --black70: #000000b3;
|
99 | --black80: #000000cc;
|
100 | --black90: #000000e6;
|
101 | --black95: #000000f2;
|
102 |
|
103 |
|
104 | --border-radius: #{$border-radius};
|
105 | --border-radius-sm: calc(var(--border-radius) / 4);
|
106 | --border-radius-md: calc(var(--border-radius) / 2);
|
107 | --border-radius-round: 999px;
|
108 |
|
109 | --spacing-unit: 8px;
|
110 |
|
111 |
|
112 | --xxs-p: calc(var(--spacing-unit) / 2);
|
113 | --xs-p: var(--spacing-unit);
|
114 | --sm-p: calc(var(--spacing-unit) * 2);
|
115 | --md-p: calc(var(--spacing-unit) * 3);
|
116 | --lg-p: calc(var(--spacing-unit) * 4);
|
117 | --xl-p: calc(var(--spacing-unit) * 5);
|
118 | --xxl-p: calc(var(--spacing-unit) * 8);
|
119 |
|
120 |
|
121 | --xxs-m: calc(var(--spacing-unit) / 2);
|
122 | --xs-m: var(--spacing-unit);
|
123 | --sm-m: calc(var(--spacing-unit) * 2);
|
124 | --md-m: calc(var(--spacing-unit) * 3);
|
125 | --lg-m: calc(var(--spacing-unit) * 4);
|
126 | --xl-m: calc(var(--spacing-unit) * 5);
|
127 | --xxl-m: calc(var(--spacing-unit) * 8);
|
128 |
|
129 |
|
130 | --assetsPath: $assetsPath;
|
131 |
|
132 |
|
133 | --accent_blue: #005fff;
|
134 | --accent_green: #20e070;
|
135 | --accent_red: #ff3742;
|
136 |
|
137 |
|
138 |
|
139 | --bg-gradient-end: #f7f7f7;
|
140 | --bg-gradient-start: #fcfcfc;
|
141 | --blue-alice: #e9f2ff;
|
142 | --border: #00000014;
|
143 | --button-background: #ffffff;
|
144 | --button-text: #005fff;
|
145 | --secondary-button-text: var(--grey);
|
146 | --grey-gainsboro: #dbdbdb;
|
147 | --grey-whisper: #ecebeb;
|
148 | --highlight: #fbf4dd;
|
149 | --modal-shadow: #00000099;
|
150 | --overlay: #00000033;
|
151 | --overlay-dark: #00000099;
|
152 | --shadow-icon: #00000040;
|
153 | --targetedMessageBackground: #fbf4dd;
|
154 | --transparent: transparent;
|
155 | --white-smoke: #f2f2f2;
|
156 | --white-snow: #fcfcfc;
|
157 | --unread-badge-color: #ffffff;
|
158 |
|
159 | --modal-overlay-color: rgba(0, 0, 0, 0.89);
|
160 | --modal-edit-message-form-width: 47em;
|
161 | }
|