UNPKG

4.23 kBSCSSView Raw
1/* fonts */
2/* https://systemfontstack.com/ */
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/* colors */
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/* miscellaneous */
27$assetsPath: '../assets';
28$border-radius: 16px;
29
30:root {
31 /* fonts */
32 --main-font: #{$main-font};
33 --second-font: #{$second-font};
34
35 /* font size */
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 /* fonts weight */
46 --font-weight-regular: #{$base-font-weight}; //400
47 --font-weight-semi-bold: 600;
48 --font-weight-bold: #{$heavy-font-weight}; //700
49
50 /* colors */
51 --primary-color: #{$secondary-color}; // this reassignment is to maintain backwards compatibility with the old scss variables
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 //-------------------------------White
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 //-------------------------------Black
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 /* border-radius */
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; // .5rem
110
111 /* padding */
112 --xxs-p: calc(var(--spacing-unit) / 2); // 4px
113 --xs-p: var(--spacing-unit); // 8px
114 --sm-p: calc(var(--spacing-unit) * 2); // 16px Base
115 --md-p: calc(var(--spacing-unit) * 3); // 24px
116 --lg-p: calc(var(--spacing-unit) * 4); // 32px
117 --xl-p: calc(var(--spacing-unit) * 5); // 40px
118 --xxl-p: calc(var(--spacing-unit) * 8); // 64px
119
120 /* margin */
121 --xxs-m: calc(var(--spacing-unit) / 2); // 4px
122 --xs-m: var(--spacing-unit); // 8px
123 --sm-m: calc(var(--spacing-unit) * 2); // 16px Base
124 --md-m: calc(var(--spacing-unit) * 3); // 24px
125 --lg-m: calc(var(--spacing-unit) * 4); // 32px
126 --xl-m: calc(var(--spacing-unit) * 5); // 40px
127 --xxl-m: calc(var(--spacing-unit) * 8); // 64px
128
129 /* miscellaneous */
130 --assetsPath: $assetsPath;
131
132 /* accent colors */
133 --accent_blue: #005fff;
134 --accent_green: #20e070;
135 --accent_red: #ff3742;
136
137 /* base colors */
138
139 --bg-gradient-end: #f7f7f7;
140 --bg-gradient-start: #fcfcfc;
141 --blue-alice: #e9f2ff;
142 --border: #00000014; // 14 = 8% opacity; top: x=0, y=-1; bottom: x=0, y=1
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; // 99 = 60% opacity; x=0, y= 1, radius=4
150 --overlay: #00000033; // 33 = 20% opacity
151 --overlay-dark: #00000099; // 99 = 60% opacity
152 --shadow-icon: #00000040; // 40 = 25% opacity; x=0, y=0, radius=4
153 --targetedMessageBackground: #fbf4dd; // dark mode = #302D22
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}