Skip to content

Commit 17c8d29

Browse files
artemmufazalovartemmufazalov
authored
feat: update versions colors (#2596)
1 parent 9970d3c commit 17c8d29

File tree

2 files changed

+149
-113
lines changed

2 files changed

+149
-113
lines changed

‎src/styles/versions.scss‎

Lines changed: 110 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,130 @@
11
.g-root {
22
&_theme_light,
33
&_theme_light-hc {
4-
--versions-red-1: #f4315b;
5-
--versions-red-2: #ff426b;
6-
--versions-red-3: #ff7391;
7-
--versions-red-4: #ff8ba4;
8-
9-
--versions-orange-red-1: #ff6050;
10-
--versions-orange-red-2: #ff7a6d;
11-
--versions-orange-red-3: #ffafa6;
12-
--versions-orange-red-4: #ffbcb5;
13-
14-
--versions-orange-1: #ff9233;
15-
--versions-orange-2: #ffad65;
16-
--versions-orange-3: #ffc593;
17-
--versions-orange-4: #ffd3ac;
18-
19-
--versions-yellow-1: #ffea00;
20-
--versions-yellow-2: #ffee31;
21-
--versions-yellow-3: #fff480;
22-
--versions-yellow-4: #fff8a9;
23-
24-
--versions-green-1: #a1ee26;
25-
--versions-green-2: #b1ff33;
26-
--versions-green-3: #cbff78;
27-
--versions-green-4: #ddffa7;
28-
29-
--versions-teal-1: #31eba4;
30-
--versions-teal-2: #16ffa6;
31-
--versions-teal-3: #4cffba;
32-
--versions-teal-4: #9bffd8;
33-
34-
--versions-cyan-1: #2ee4e8;
35-
--versions-cyan-2: #0cfbff;
36-
--versions-cyan-3: #63fdff;
37-
--versions-cyan-4: #b1feff;
4+
--versions-default-color: #d5d5d5;
5+
6+
--versions-orange-1: #ff5512;
7+
--versions-orange-2: #ff753a;
8+
--versions-orange-3: #ffa16b;
9+
--versions-orange-4: #ffc497;
10+
11+
--versions-yellow-1: #fed018;
12+
--versions-yellow-2: #faca1c;
13+
--versions-yellow-3: #f6d66d;
14+
--versions-yellow-4: #f8e09f;
15+
16+
--versions-green-1: #26ee79;
17+
--versions-green-2: #33ff77;
18+
--versions-green-3: #8eff78;
19+
--versions-green-4: #c4ffa7;
20+
21+
--versions-lightblue-1: #21c7ff;
22+
--versions-lightblue-2: #38cdff;
23+
--versions-lightblue-3: #60d7ff;
24+
--versions-lightblue-4: #79ddff;
3825

3926
--versions-blue-1: #386bff;
4027
--versions-blue-2: #4070ff;
4128
--versions-blue-3: #658bff;
4229
--versions-blue-4: #a1b9ff;
4330

44-
--versions-purple-1: #c73af7;
45-
--versions-purple-2: #c92cff;
46-
--versions-purple-3: #dd78ff;
47-
--versions-purple-4: #e79fff;
48-
49-
--versions-pink-1: #ff49bb;
50-
--versions-pink-2: #ff34b3;
51-
--versions-pink-3: #ff75cb;
52-
--versions-pink-4: #ffb0e1;
31+
--versions-violet-1: #d107e3;
32+
--versions-violet-2: #d836f9;
33+
--versions-violet-3: #e563ff;
34+
--versions-violet-4: #dc92ff;
35+
36+
--versions-pink-1: #ff499e;
37+
--versions-pink-2: #ff5ca8;
38+
--versions-pink-3: #fe8ac0;
39+
--versions-pink-4: #ff9dcb;
40+
41+
--versions-caramel-1: #dd7709;
42+
--versions-caramel-2: #ea8312;
43+
--versions-caramel-3: #f1a757;
44+
--versions-caramel-4: #ffc484;
45+
46+
--versions-moss-1: #53920a;
47+
--versions-moss-2: #6eb818;
48+
--versions-moss-3: #8dd43c;
49+
--versions-moss-4: #b4ea76;
50+
51+
--versions-turquoise-1: #19b5b8;
52+
--versions-turquoise-2: #38cacd;
53+
--versions-turquoise-3: #51e5e8;
54+
--versions-turquoise-4: #98f4f6;
55+
56+
--versions-barbie-1: #f35fc4;
57+
--versions-barbie-2: #f17acc;
58+
--versions-barbie-3: #ff86d9;
59+
--versions-barbie-4: #ffa4e3;
60+
61+
--versions-night-1: #5616ea;
62+
--versions-night-2: #6934e4;
63+
--versions-night-3: #7c48f6;
64+
--versions-night-4: #a179ff;
5365
}
5466
&_theme_dark,
5567
&_theme_dark-hc {
56-
--versions-red-1: #d50c38;
57-
--versions-red-2: #ff2051;
58-
--versions-red-3: #fb3a64;
59-
--versions-red-4: #ff6989;
60-
61-
--versions-orange-red-1: #eb3320;
62-
--versions-orange-red-2: #ff503e;
63-
--versions-orange-red-3: #ff8376;
64-
--versions-orange-red-4: #ffa399;
65-
66-
--versions-orange-1: #f47b10;
67-
--versions-orange-2: #ff9b43;
68-
--versions-orange-3: #ffb06a;
69-
--versions-orange-4: #ffc693;
70-
71-
--versions-yellow-1: #ffea00;
72-
--versions-yellow-2: #ffee31;
73-
--versions-yellow-3: #fff480;
74-
--versions-yellow-4: #fff8a9;
75-
76-
--versions-green-1: #83d400;
77-
--versions-green-2: #b1ff33;
78-
--versions-green-3: #cbff78;
79-
--versions-green-4: #ddffa7;
80-
81-
--versions-teal-1: #27c98b;
82-
--versions-teal-2: #16ffa6;
83-
--versions-teal-3: #4cffba;
84-
--versions-teal-4: #9bffd8;
85-
86-
--versions-cyan-1: #0edbde;
87-
--versions-cyan-2: #0cfbff;
88-
--versions-cyan-3: #63fdff;
89-
--versions-cyan-4: #b1feff;
68+
--versions-default-color: #656469;
69+
70+
--versions-orange-1: #ff5512;
71+
--versions-orange-2: #ff753a;
72+
--versions-orange-3: #ffa16b;
73+
--versions-orange-4: #ffc497;
74+
75+
--versions-yellow-1: #fed018;
76+
--versions-yellow-2: #fae41c;
77+
--versions-yellow-3: #f6e66d;
78+
--versions-yellow-4: #f8ef9f;
79+
80+
--versions-green-1: #26ee79;
81+
--versions-green-2: #33ff77;
82+
--versions-green-3: #8eff78;
83+
--versions-green-4: #c4ffa7;
84+
85+
--versions-lightblue-1: #00b8f6;
86+
--versions-lightblue-2: #41d0ff;
87+
--versions-lightblue-3: #87e1ff;
88+
--versions-lightblue-4: #b5e8f9;
9089

9190
--versions-blue-1: #2059ff;
9291
--versions-blue-2: #4070ff;
9392
--versions-blue-3: #658bff;
9493
--versions-blue-4: #a1b9ff;
9594

96-
--versions-purple-1: #ab07e3;
97-
--versions-purple-2: #c92cff;
98-
--versions-purple-3: #dd78ff;
99-
--versions-purple-4: #e79fff;
100-
101-
--versions-pink-1: #e71498;
102-
--versions-pink-2: #ff34b3;
103-
--versions-pink-3: #ff75cb;
104-
--versions-pink-4: #ffb0e1;
95+
--versions-violet-1: #a10aff;
96+
--versions-violet-2: #b845ff;
97+
--versions-violet-3: #c76cff;
98+
--versions-violet-4: #dfacff;
99+
100+
--versions-pink-1: #ed2a7a;
101+
--versions-pink-2: #fe398a;
102+
--versions-pink-3: #fb6ba6;
103+
--versions-pink-4: #ff90be;
104+
105+
--versions-caramel-1: #bc6c15;
106+
--versions-caramel-2: #d67e1e;
107+
--versions-caramel-3: #f9a243;
108+
--versions-caramel-4: #ffb96d;
109+
110+
--versions-moss-1: #478500;
111+
--versions-moss-2: #5fa90c;
112+
--versions-moss-3: #76ba28;
113+
--versions-moss-4: #a3e855;
114+
115+
--versions-turquoise-1: #009ea0;
116+
--versions-turquoise-2: #1dc7ca;
117+
--versions-turquoise-3: #3debee;
118+
--versions-turquoise-4: #6ff3f5;
119+
120+
--versions-barbie-1: #ee55be;
121+
--versions-barbie-2: #ff6bd0;
122+
--versions-barbie-3: #ff86d9;
123+
--versions-barbie-4: #ffa4e3;
124+
125+
--versions-night-1: #5b1fe6;
126+
--versions-night-2: #7a41ff;
127+
--versions-night-3: #9973f3;
128+
--versions-night-4: #a179ff;
105129
}
106130
}

‎src/utils/versions/getVersionsColors.ts‎

Lines changed: 39 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,6 @@ export const hashCode = (s: string) => {
1010
};
1111

1212
export const COLORS = [
13-
[
14-
'var(--versions-red-1)',
15-
'var(--versions-red-2)',
16-
'var(--versions-red-3)',
17-
'var(--versions-red-4)',
18-
],
19-
[
20-
'var(--versions-orange-red-1)',
21-
'var(--versions-orange-red-2)',
22-
'var(--versions-orange-red-3)',
23-
'var(--versions-orange-red-4)',
24-
],
2513
[
2614
'var(--versions-orange-1)',
2715
'var(--versions-orange-2)',
@@ -41,16 +29,10 @@ export const COLORS = [
4129
'var(--versions-green-4)',
4230
],
4331
[
44-
'var(--versions-teal-1)',
45-
'var(--versions-teal-2)',
46-
'var(--versions-teal-3)',
47-
'var(--versions-teal-4)',
48-
],
49-
[
50-
'var(--versions-cyan-1)',
51-
'var(--versions-cyan-2)',
52-
'var(--versions-cyan-3)',
53-
'var(--versions-cyan-4)',
32+
'var(--versions-lightblue-1)',
33+
'var(--versions-lightblue-2)',
34+
'var(--versions-lightblue-3)',
35+
'var(--versions-lightblue-4)',
5436
],
5537
[
5638
'var(--versions-blue-1)',
@@ -59,20 +41,50 @@ export const COLORS = [
5941
'var(--versions-blue-4)',
6042
],
6143
[
62-
'var(--versions-purple-1)',
63-
'var(--versions-purple-2)',
64-
'var(--versions-purple-3)',
65-
'var(--versions-purple-4)',
44+
'var(--versions-violet-1)',
45+
'var(--versions-violet-2)',
46+
'var(--versions-violet-3)',
47+
'var(--versions-violet-4)',
6648
],
6749
[
6850
'var(--versions-pink-1)',
6951
'var(--versions-pink-2)',
7052
'var(--versions-pink-3)',
7153
'var(--versions-pink-4)',
7254
],
55+
[
56+
'var(--versions-caramel-1)',
57+
'var(--versions-caramel-2)',
58+
'var(--versions-caramel-3)',
59+
'var(--versions-caramel-4)',
60+
],
61+
[
62+
'var(--versions-moss-1)',
63+
'var(--versions-moss-2)',
64+
'var(--versions-moss-3)',
65+
'var(--versions-moss-4)',
66+
],
67+
[
68+
'var(--versions-turquoise-1)',
69+
'var(--versions-turquoise-2)',
70+
'var(--versions-turquoise-3)',
71+
'var(--versions-turquoise-4)',
72+
],
73+
[
74+
'var(--versions-barbie-1)',
75+
'var(--versions-barbie-2)',
76+
'var(--versions-barbie-3)',
77+
'var(--versions-barbie-4)',
78+
],
79+
[
80+
'var(--versions-night-1)',
81+
'var(--versions-night-2)',
82+
'var(--versions-night-3)',
83+
'var(--versions-night-4)',
84+
],
7385
];
7486

75-
export const DEFAULT_COLOR = 'var(--g-color-base-generic-medium)';
87+
export const DEFAULT_COLOR = 'var(--versions-default-color)';
7688

7789
/** Calculates sub color index */
7890
export function getMinorVersionColorVariant(minorIndex: number, minorQuantity: number) {

0 commit comments

Comments
 (0)