Skip to content

Commit 9d274b7

Browse files
shafin-derivshafin-deriv
committed
chore: change scss files to only import variables mixins when necessary
1 parent 8328dfa commit 9d274b7

10 files changed

+1279
-0
lines changed

‎.stylelintrc.cjs

+2
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ module.exports = {
1717
'no-invalid-double-slash-comments': true,
1818
'number-max-precision': 3,
1919
'no-descending-specificity': null,
20+
'no-invalid-position-at-import-rule': null,
2021
'selector-pseudo-class-no-unknown': [
2122
true,
2223
{
@@ -35,6 +36,7 @@ module.exports = {
3536
'unit-allowed-list': ['fr', 'px', 'em', 'rem', '%', 'svh', 'vw', 'vh', 'deg', 'ms', 's', 'dpcm'],
3637
'value-keyword-case': 'lower',
3738
'scss/at-extend-no-missing-placeholder': null,
39+
'scss/percent-placeholder-pattern': null,
3840
'custom-property-pattern': null,
3941
},
4042
extends: ['stylelint-config-standard-scss'],

‎src/components/shared/styles/_constants.scss

+238
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,238 @@
1+
/* ------------------------------------*
2+
* # Constants
3+
*------------------------------------ */
4+
5+
/* stylelint-disable color-no-hex */
6+
7+
/* COLOR PALETTE */
8+
9+
/* colors */
10+
$color-black: #0e0e0e;
11+
$color-black-1: #333;
12+
$color-black-3: #151717;
13+
$color-black-4: #1d1f20;
14+
$color-black-5: #242828;
15+
$color-black-6: #3e3e3e;
16+
$color-black-7: #000;
17+
$color-black-8: #323738;
18+
$color-black-9: #5c5c5c;
19+
$color-blue: #377cfc;
20+
$color-blue-1: #0dc2e7;
21+
$color-blue-2: #2a3052;
22+
$color-blue-3: #0796e0;
23+
$color-blue-4: #0677af;
24+
$color-blue-5: #dfeaff;
25+
$color-blue-6: #92b8ff;
26+
$color-blue-7: #182130;
27+
$color-blue-8: #e6f5ff;
28+
$color-brown: #664407;
29+
$color-green: #85acb0;
30+
$color-green-1: #4bb4b3;
31+
$color-green-2: #3d9494;
32+
$color-green-3: #00a79e;
33+
$color-green-4: #008079;
34+
$color-green-5: #4bb4b329;
35+
$color-green-6: #17eabd;
36+
$color-green-7: #e8fdf8;
37+
$color-green-8: #cedddf;
38+
$color-grey: #c2c2c2;
39+
$color-grey-1: #999;
40+
$color-grey-2: #f2f3f4;
41+
$color-grey-3: #eaeced;
42+
$color-grey-4: #e6e9e9;
43+
$color-grey-5: #d6dadb;
44+
$color-grey-6: #d6d6d6;
45+
$color-grey-7: #6e6e6e;
46+
$color-grey-8: #d7d7d7;
47+
$color_grey-9: #868686;
48+
$color-grey-10: #919191;
49+
$color-grey-11: #fafafa;
50+
$color-grey-12: #f5f7fa;
51+
$color-grey-13: #2e2e2e;
52+
$color-grey-14: #e2e5e7;
53+
$color-orange: #ff6444;
54+
$color-purple: #722fe4;
55+
$color-red: #ff444f;
56+
$color-red-1: #ec3f3f;
57+
$color-red-2: #cc2e3d;
58+
$color-red-3: #a32430;
59+
$color-red-4: #d33636;
60+
$color-red-5: #eb3e48;
61+
$color-red-6: #ec3f3f29;
62+
$color-red-7: #ffe1e3;
63+
$color-red-8: #661b20;
64+
$color-red-9: #b33037;
65+
$color-red-10: #ff444f;
66+
$color-red-11: #fce3e3;
67+
$color-violet: #4a3871;
68+
$color-white: #fff;
69+
$color-yellow: #ffad3a;
70+
$color-yellow-1: #b3760d;
71+
$color-yellow-2: #ffa912;
72+
$color-yellow-3: rgb(255 173 58 / 16%);
73+
74+
/* status colors */
75+
$color-status-warning: rgb(255 173 58 / 16%);
76+
$color-status-information: rgb(55 124 252 / 16%);
77+
$color-status-announcement: rgb(75 180 179 / 16%);
78+
$color-status-error: rgb(236 63 63 / 16%);
79+
80+
/* alpha colors */
81+
$alpha-color-black-1: transparentize($color-black-7, 0.28);
82+
$alpha-color-black-2: transparentize($color-black, 0.04);
83+
$alpha-color-black-3: transparentize($color-black-7, 0.92);
84+
$alpha-color-black-4: transparentize($color-black-7, 0.84);
85+
$alpha-color-black-5: transparentize($color-black-7, 0.16);
86+
$alpha-color-black-6: transparentize($color-black-7, 0.36);
87+
$alpha-color-black-7: transparentize($color-black, 0.5);
88+
$alpha-color-blue-1: transparentize($color-blue, 0.84);
89+
$alpha-color-blue-2: transparentize($color-blue-3, 0.84);
90+
$alpha-color-blue-3: transparentize($color-blue, 0.92);
91+
$alpha-color-white-1: transparentize($color-white, 0.04);
92+
$alpha-color-white-2: transparentize($color-white, 0.84);
93+
$alpha-color-white-3: transparentize($color-white, 0.92);
94+
$alpha-color-white-4: transparentize($color-white, 0.3);
95+
$alpha-color-red-1: transparentize($color-red, 0.92);
96+
$alpha-color-red-2: transparentize($color-red, 0.84);
97+
$alpha-color-red-3: transparentize($color-red, 0.76);
98+
$alpha-color-green-1: transparentize($color-green-1, 0.08);
99+
$alpha-color-green-2: transparentize($color-green-3, 0.08);
100+
$alpha-color-yellow-1: transparentize($color-yellow, 0.84);
101+
102+
/* gradient colors */
103+
$gradient-color-green-1: linear-gradient(to top, $color-white, transparentize($color-green-1, 0.84));
104+
$gradient-color-green-2: linear-gradient(to top, $color-black, transparentize($color-green-3, 0.84));
105+
$gradient-color-red-1: linear-gradient(to top, $color-white, transparentize($color-red, 0.84));
106+
$gradient-color-red-2: linear-gradient(to top, $color-black, transparentize($color-red, 0.84));
107+
$contract-gradient-color-red-1: linear-gradient(to top, $color-white 85%, transparentize($color-red, 0.84));
108+
$contract-gradient-color-red-2: linear-gradient(to top, $color-black 85%, transparentize($color-red, 0.84));
109+
$gradient-color-white: linear-gradient(to right, transparentize($color-white, 1) -5%, $color-white 71%);
110+
$gradient-color-black: linear-gradient(to right, transparentize($color-black, 1) -5%, $color-black 71%);
111+
$gradient-color-purple: linear-gradient(274.73deg, #5a205d 3.82%, #7f3883 88.49%);
112+
$gradient-color-blue: linear-gradient(274.73deg, #1a205e 3.82%, #122d96 88.49%);
113+
$gradient-color-orange: linear-gradient(90deg, #eb001b 0%, #f79e1b 100%);
114+
$gradient-color-black-2: linear-gradient(274.73deg, #464750 3.82%, #0e0f11 88.49%);
115+
$gradient-color-orange-2: linear-gradient(90deg, #f89e32 0%, #f7931b 103.12%);
116+
$gradient-color-blue-2: linear-gradient(90deg, #3d83cf 0%, #2775ca 100%);
117+
$gradient-color-green-3: linear-gradient(90deg, #98cc53 0%, #8dc640 100%);
118+
$gradient-color-blue-3: linear-gradient(90deg, #1a77ac 0%, #0068a3 100%);
119+
$gradient-color-orange-3: linear-gradient(90deg, #ff7635 0%, #ff671f 100%);
120+
$gradient-color-orange-4: linear-gradient(90deg, #f36938 0%, #f25822 100%);
121+
$gradient-color-blue-4: linear-gradient(90deg, #1a8fff 0%, #0083ff 100%);
122+
$gradient-color-red-3: linear-gradient(90deg, #ff444f 0%, #211d1e 95.22%);
123+
$gradient-color-red-4: linear-gradient(90deg, #ff6444 0%, #ff444f 100%);
124+
$gradient-color-black-3: linear-gradient(58.51deg, #061828 28.06%, #1a3c60 93.51%);
125+
$gradient-color-black-4: linear-gradient(274.25deg, #333 9.01%, #5c5b5b 103.31%);
126+
$gradient-color-black-5: linear-gradient(180deg, rgb(0 0 0 / 0%) 50%, rgb(0 0 0 / 16%) 100%);
127+
$gradient-color-white-2: linear-gradient(180deg, rgb(255 255 255 / 0%) 50%, rgb(255 255 255 / 16%) 100%);
128+
$gradient-color-blue-5: linear-gradient(90deg, #00a8af 0%, #04cfd8 104.41%);
129+
$gradient-color-gold: linear-gradient(90deg, #f7931a 0%, #ffc71b 104.41%);
130+
$gradient-color-green-4: linear-gradient(90deg, #1db193 0%, #09da7a 104.41%);
131+
132+
/* Preserve legacy variables */
133+
134+
/* Primary */
135+
136+
$COLOR_BLACK: #000;
137+
$COLOR_BLACK_2: #1d1f20;
138+
$COLOR_BLACK_3: #0e0e0e;
139+
$COLOR_GREEN_1: #39b19d;
140+
$COLOR_GREEN_2: #2d9f93;
141+
$COLOR_GREEN_3: #21ce99;
142+
$COLOR_GREEN_4: #00a79e;
143+
$COLOR_GREEN_5: #4bb4b3;
144+
$COLOR_ORANGE: #f93;
145+
$COLOR_DARK_ORANGE: #ff8802;
146+
$COLOR_PURPLE: #4f60ae;
147+
$COLOR_RED: #e31c4b;
148+
$COLOR_RED_2: #cc2e3d;
149+
$COLOR_RED_3: #ec3f3f;
150+
$COLOR_CORAL_RED: #ff444f;
151+
$COLOR_SKY_BLUE: #2196f3;
152+
$COLOR_WHITE: #fff;
153+
$COLOR_BLUE: #1c5ae3;
154+
155+
// Light theme
156+
$COLOR_LIGHT_BLACK_1: rgb(0 0 0 / 80%);
157+
$COLOR_LIGHT_BLACK_2: rgb(0 0 0 / 40%);
158+
$COLOR_LIGHT_BLACK_3: rgb(0 0 0 / 16%);
159+
$COLOR_LIGHT_BLACK_3_SOLID_1: #d6d6d6;
160+
$COLOR_LIGHT_BLACK_3_SOLID_2: #b3b3b3;
161+
$COLOR_LIGHT_BLACK_4: rgb(0 0 0 / 4%);
162+
$COLOR_LIGHT_BLACK_4_SOLID: #f4f4f6;
163+
$COLOR_LIGHT_GRAY_1: #999cac;
164+
$COLOR_LIGHT_GRAY_2: rgb(153 156 172 / 32%);
165+
$COLOR_LIGHT_GRAY_3: #eaeced;
166+
$COLOR_LIGHT_GRAY_4: #6e6e6e;
167+
$COLOR_LIGHT_GRAY_5: #c2c2c2;
168+
$COLOR_LIGHT_GRAY_6: #f2f3f4;
169+
$COLOR_LIGHT_GREEN_GRADIENT: linear-gradient(to top, rgb(255 255 255 / 0%), rgb(0 148 117 / 16%));
170+
$COLOR_LIGHT_RED_GRADIENT: linear-gradient(to top, rgb(255 255 255 / 0%), rgb(227 28 75 / 16%));
171+
$COLOR_LIGHT_WHITE_GRADIENT: linear-gradient(to right, rgb(255 255 255 / 100%), rgb(255 255 255 / 0%));
172+
173+
// Dark theme
174+
$COLOR_DARK_BLACK_GRADIENT: linear-gradient(to right, rgb(16 19 32 / 100%), rgb(16 19 32 / 0%));
175+
$COLOR_DARK_BLUE_1: #0b0e18;
176+
$COLOR_DARK_BLUE_2: #101320;
177+
$COLOR_DARK_BLUE_3: #191c31;
178+
$COLOR_DARK_BLUE_4: #202641;
179+
$COLOR_DARK_BLUE_5: #2a3052;
180+
$COLOR_DARK_BLUE_6: #555975;
181+
$COLOR_DARK_BLUE_7: #7f8397;
182+
$COLOR_DARK_BLUE_8: rgb(127 131 151 / 30%);
183+
$COLOR_DARK_GREEN_GRADIENT: linear-gradient(to top, rgb(16 19 32 / 0%), rgb(0 148 117 / 16%));
184+
$COLOR_DARK_RED_GRADIENT: linear-gradient(to top, rgb(16 19 32 / 0%), rgb(227 28 75 / 16%));
185+
$COLOR_DARK_GRAY_1: #282a37;
186+
$COLOR_DARK_GRAY_2: #303342;
187+
$COLOR_DARK_GRAY_3: #555975;
188+
$COLOR_DARK_GRAY_4: #999;
189+
/* stylelint-enable color-no-hex */
190+
191+
$BORDER_RADIUS: 4px;
192+
$BORDER_RADIUS_2: 8px;
193+
$MAX_CONTAINER_WIDTH: 1440px;
194+
$POSITIONS_DRAWER_WIDTH: 240px;
195+
$POSITIONS_DRAWER_MARGIN: 8px;
196+
$HEADER_HEIGHT: 48px;
197+
$FOOTER_HEIGHT: 36px;
198+
$MOBILE_HEADER_HEIGHT: 40px;
199+
$MOBILE_HEADER_HEIGHT_DASHBOARD: 48px;
200+
$MOBILE_WRAPPER_HEADER_HEIGHT: 40px;
201+
$MOBILE_WRAPPER_FOOTER_HEIGHT: 70px;
202+
$SIDEBAR_WIDTH: 240px;
203+
204+
/* Wallet gradient background */
205+
$gradient-airtm: linear-gradient(90deg, #1a8fff 0%, #0083ff 100%);
206+
$gradient-banxa: linear-gradient(90deg, #000 0%, #4ac0ba 96.35%);
207+
$gradient-bitcoin: linear-gradient(90deg, #f89e32 0%, #f7931b 103.12%);
208+
$gradient-credit: linear-gradient(274.73deg, #464750 3.82%, #0e0f11 88.49%);
209+
$gradient-dp2p: linear-gradient(90deg, #ff444f 0%, #211d1e 95.22%);
210+
$gradient-fasapay: linear-gradient(90deg, #f6931c 0%, #4873ac 95.22%);
211+
$gradient-jeton: linear-gradient(90deg, #ff7635 0%, #ff671f 100%);
212+
$gradient-mastercard: linear-gradient(90deg, #eb001b 0%, #f79e1b 100%);
213+
$gradient-neteller: linear-gradient(90deg, #98cc53 0%, #8dc640 100%);
214+
$gradient-paylivre: linear-gradient(90deg, #352caa 0%, #9a6bfc 100%);
215+
$gradient-paysafe: linear-gradient(90deg, #e3001b 0%, #008ac9 100%);
216+
$gradient-perfectmoney: linear-gradient(90deg, #f12c2c 0%, #ef1515 100%);
217+
$gradient-skrill: linear-gradient(274.73deg, #5a205d 3.82%, #7f3883 88.49%);
218+
$gradient-sticpay: linear-gradient(90deg, #f36938 0%, #f25822 100%);
219+
$gradient-virtual: linear-gradient(90deg, #ff6444 0%, #ff444f 100%);
220+
$gradient-visa: linear-gradient(274.73deg, #1a205e 3.82%, #122d96 88.49%);
221+
$gradient-webmoney: linear-gradient(90deg, #1a77ac 0%, #0068a3 100%);
222+
223+
/* App Cards gradient background */
224+
$gradient-virtual: linear-gradient(274.25deg, #333 9.01%, #5c5b5b 103.31%);
225+
$gradient-virtual-swap-free: linear-gradient(58.51deg, #061828 28.06%, #1a3c60 93.51%);
226+
227+
/* Wallets */
228+
$ready-banner-bg-color: #e2f3f3;
229+
$ready-banner-tick-bg-color: #4ab4b3;
230+
$wallet-demo-bg-color: #fff8f9;
231+
$wallet-dark-demo-bg-color: #140506;
232+
$wallet-demo-divider-color: #fff0f1;
233+
$wallet-box-shadow:
234+
0 12px 16px -4px rgb(14 14 14 / 8%),
235+
0 4px 6px -2px rgb(14 14 14 / 3%);
236+
$btn-shadow:
237+
0 24px 24px 0 rgb(0 0 0 / 8%),
238+
0 0 24px 0 rgb(0 0 0 / 8%);

‎src/components/shared/styles/_devices.scss

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
/**
2+
* Define Breakpoints here.
3+
*/
4+
$mobile-width: 320px;
5+
$tablet-width: 768px;
6+
$desktop-width: 1024px;
7+
$min-desktop-width: 1280px;
8+
$max-mobile-width: 767px;
9+
10+
@mixin tablet {
11+
@media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
12+
@content;
13+
}
14+
}
15+
16+
@mixin desktop {
17+
@media (min-width: #{$desktop-width}) {
18+
@content;
19+
}
20+
}
21+
22+
@mixin tablet-down {
23+
@media (max-width: #{$tablet-width}) {
24+
@content;
25+
}
26+
}
27+
28+
@mixin tablet-up {
29+
@media (min-width: #{$tablet-width}) {
30+
@content;
31+
}
32+
}
33+
34+
@mixin mobile-up {
35+
@media (min-width: #{$mobile-width}) {
36+
@content;
37+
}
38+
}
39+
40+
@mixin mobile {
41+
@media (min-width: #{$mobile-width}) and (max-width: #{$tablet-width - 1}) {
42+
@content;
43+
}
44+
}
45+
46+
@mixin mobile-landscape {
47+
@media only screen and (min-width: #{$mobile-width}) and (max-width: #{$desktop-width - 1}) and (orientation: landscape) {
48+
@content;
49+
}
50+
}
51+
52+
@mixin touch-device {
53+
// add css interaction media query to detect touch devices
54+
// refer to: https://caniuse.com/#feat=css-media-interaction
55+
@media (pointer: coarse) {
56+
@content;
57+
}
58+
}
59+
60+
@mixin mobile-tablet-mix {
61+
@media (min-width: #{$mobile-width}) and (max-width: #{$desktop-width - 1px}) {
62+
@content;
63+
}
64+
}

‎src/components/shared/styles/_fonts.scss

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
/*
2+
Constants
3+
*/
4+
$FONT_STACK: 'IBM Plex Sans', sans-serif;
5+
$BASE_FONT_SIZE: 10px;
6+
7+
/*
8+
Variables
9+
*/
10+
$FONT_SIZES: (
11+
'xheading' 3.2rem,
12+
'heading' 3rem,
13+
'large' 2.8rem,
14+
'title' 1.6rem,
15+
'paragraph' 1.4rem,
16+
'small' 1.2rem,
17+
'xsmall' 1rem,
18+
'xxsmall' 0.8rem,
19+
'xxxsmall' 0.6rem
20+
);
21+
$FONT_COLORS: (
22+
'active' var(--text-colored-background),
23+
'prominent' var(--text-prominent),
24+
'black' var(--text-general),
25+
'grey' var(--text-less-prominent),
26+
'disabled' var(--text-disabled),
27+
'green' var(--text-profit-success),
28+
'red' var(--text-loss-danger)
29+
);
30+
$FONT_WEIGHTS: ('bold' 700, 'semibold' 500, 'normal' 400, 'light' 300);
31+
$TEXT_ALIGN: ('center' center, 'left' start, 'right' end);
32+
$LINEHEIGHTS: (
33+
'large': 1.75,
34+
'medium': 1.5,
35+
'small': 1.25,
36+
'xsmall': 1.4,
37+
);
38+
39+
/*
40+
* Generate typefaces key-value pair of variable name and config
41+
* Example:
42+
--paragraph-center-bold-black: (14px, center, bold, black)
43+
*/
44+
@function generate-typefaces() {
45+
$typeface_list: ();
46+
47+
@each $fontsize_name, $size in $FONT_SIZES {
48+
@each $textalign_name, $text_align in $TEXT_ALIGN {
49+
@each $color_name, $color in $FONT_COLORS {
50+
@each $fontweight_name, $weight in $FONT_WEIGHTS {
51+
$key: --#{$fontsize_name}-#{$textalign_name}-#{$fontweight_name}-#{$color_name};
52+
$val: ($size, $text_align, $weight, $color);
53+
$typeface: (
54+
$key: $val,
55+
);
56+
$typeface_list: map-merge($typeface_list, $typeface);
57+
}
58+
}
59+
}
60+
}
61+
62+
// @debug $typeface_list; /* uncomment to debug */
63+
@return $typeface_list;
64+
}
65+
66+
/*
67+
List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS.
68+
See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references.
69+
Variables name example: --title-center-semibold-red
70+
*/
71+
$TYPEFACES_LIST: generate-typefaces();

‎src/components/shared/styles/_google-fonts.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@at-root {
2+
@import 'https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,400,500,700&display=swap&subset=cyrillic,cyrillic-ext,latin-ext,vietnamese';
3+
}

0 commit comments

Comments
 (0)