Skip to content

Commit e48c40d

Browse files
artemmufazalovartemmufazalov
committed
use css vars for colors for proper theme switch
1 parent 7e5707a commit e48c40d

File tree

5 files changed

+176
-60
lines changed

5 files changed

+176
-60
lines changed

‎src/styles/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@forward './themes.scss';
33
@forward './unipika.scss';
44
@forward './illustrations.scss';
5+
@forward './versions.scss';
56

67
body {
78
--ydb-drawer-veil-z-index: 2;

‎src/styles/versions.scss‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
.g-root {
2+
&_theme_light,
3+
&_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;
38+
39+
--versions-blue-1: #386bff;
40+
--versions-blue-2: #4070ff;
41+
--versions-blue-3: #658bff;
42+
--versions-blue-4: #a1b9ff;
43+
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;
53+
}
54+
&_theme_dark,
55+
&_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;
90+
91+
--versions-blue-1: #2059ff;
92+
--versions-blue-2: #4070ff;
93+
--versions-blue-3: #658bff;
94+
--versions-blue-4: #a1b9ff;
95+
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;
105+
}
106+
}

‎src/utils/clusterVersionColors.ts‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import type {MetaClusterVersion} from '../types/api/meta';
44
import type {VersionToColorMap} from '../types/versions';
55

66
import {
7+
COLORS,
78
DEFAULT_COLOR,
8-
getColors,
99
getMinorVersion,
1010
getMinorVersionColorVariant,
1111
hashCode,
@@ -34,8 +34,6 @@ export const getVersionMap = (
3434
export const getVersionColors = (versionMap: VersionsMap) => {
3535
const versionToColor: VersionToColorMap = new Map();
3636

37-
const colors = getColors();
38-
3937
for (const [baseColorIndex, item] of versionMap) {
4038
Array.from(item)
4139
// descending by version name: newer versions come first,
@@ -46,14 +44,14 @@ export const getVersionColors = (versionMap: VersionsMap) => {
4644
versionToColor.set(minor, DEFAULT_COLOR);
4745
} else {
4846
// baseColorIndex is numeric as we check if it is UNDEFINED_COLOR_INDEX before
49-
const currentColorIndex = Number(baseColorIndex) % colors.length;
47+
const currentColorIndex = Number(baseColorIndex) % COLORS.length;
5048
const minorQuantity = item.size;
5149

5250
const minorColorVariant = getMinorVersionColorVariant(
5351
minorIndex,
5452
minorQuantity,
5553
);
56-
const minorColor = colors[currentColorIndex][minorColorVariant];
54+
const minorColor = COLORS[currentColorIndex][minorColorVariant];
5755

5856
versionToColor.set(minor, minorColor);
5957
}

‎src/utils/index.ts‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -17,21 +17,3 @@ export function normalizePathSlashes(path: string) {
1717
// (?<!:) - negative lookbehind - ignore parts that start with :
1818
return path.replaceAll(/(?<!:)\/\/+/g, '/');
1919
}
20-
21-
export function getSystemTheme() {
22-
if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
23-
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
24-
} else {
25-
return 'light';
26-
}
27-
}
28-
29-
export function getTheme() {
30-
const savedTheme = localStorage.getItem('theme') || 'light';
31-
32-
if (savedTheme === 'system') {
33-
return getSystemTheme();
34-
}
35-
36-
return savedTheme.includes('dark') ? 'dark' : 'light';
37-
}

‎src/utils/versions/getVersionsColors.ts‎

Lines changed: 66 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import {getTheme} from '..';
21
import type {VersionToColorMap, VersionsMap} from '../../types/versions';
32

43
import {getMajorVersion, getMinorVersion} from './parseVersion';
@@ -10,35 +9,70 @@ export const hashCode = (s: string) => {
109
}, 0);
1110
};
1211

13-
const DARK_COLORS = [
14-
['#D50C38', '#FF2051', '#FB3A64', '#FF6989'],
15-
['#EB3320', '#FF503E', '#FF8376', '#FFA399'],
16-
['#F47B10', '#FF9B43', '#FFB06A', '#FFC693'],
17-
['#FFEA00', '#FFEE31', '#FFF480', '#FFF8A9'],
18-
['#83D400', '#B1FF33', '#CBFF78', '#DDFFA7'],
19-
['#27C98B', '#16FFA6', '#4CFFBA', '#9BFFD8'],
20-
['#0EDBDE', '#0CFBFF', '#63FDFF', '#B1FEFF'],
21-
['#2059FF', '#4070FF', '#658BFF', '#A1B9FF'],
22-
['#AB07E3', '#C92CFF', '#DD78FF', '#E79FFF'],
23-
['#E71498', '#FF34B3', '#FF75CB', '#FFB0E1'],
12+
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+
],
25+
[
26+
'var(--versions-orange-1)',
27+
'var(--versions-orange-2)',
28+
'var(--versions-orange-3)',
29+
'var(--versions-orange-4)',
30+
],
31+
[
32+
'var(--versions-yellow-1)',
33+
'var(--versions-yellow-2)',
34+
'var(--versions-yellow-3)',
35+
'var(--versions-yellow-4)',
36+
],
37+
[
38+
'var(--versions-green-1)',
39+
'var(--versions-green-2)',
40+
'var(--versions-green-3)',
41+
'var(--versions-green-4)',
42+
],
43+
[
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)',
54+
],
55+
[
56+
'var(--versions-blue-1)',
57+
'var(--versions-blue-2)',
58+
'var(--versions-blue-3)',
59+
'var(--versions-blue-4)',
60+
],
61+
[
62+
'var(--versions-purple-1)',
63+
'var(--versions-purple-2)',
64+
'var(--versions-purple-3)',
65+
'var(--versions-purple-4)',
66+
],
67+
[
68+
'var(--versions-pink-1)',
69+
'var(--versions-pink-2)',
70+
'var(--versions-pink-3)',
71+
'var(--versions-pink-4)',
72+
],
2473
];
2574

26-
const LIGHT_COLORS = [
27-
['#F4315B', '#FF426B', '#FF7391', '#FF8BA4'],
28-
['#FF6050', '#FF7A6D', '#FFAFA6', '#FFBCB5'],
29-
['#FF9233', '#FFAD65', '#FFC593', '#FFD3AC'],
30-
['#FFEA00', '#FFEE31', '#FFF480', '#FFF8A9'],
31-
['#A1EE26', '#B1FF33', '#CBFF78', '#DDFFA7'],
32-
['#31EBA4', '#16FFA6', '#4CFFBA', '#9BFFD8'],
33-
['#2EE4E8', '#0CFBFF', '#63FDFF', '#B1FEFF'],
34-
['#386BFF', '#4070FF', '#658BFF', '#A1B9FF'],
35-
['#C73AF7', '#C92CFF', '#DD78FF', '#E79FFF'],
36-
['#FF49BB', '#FF34B3', '#FF75CB', '#FFB0E1'],
37-
];
38-
39-
export function getColors() {
40-
return getTheme() === 'dark' ? DARK_COLORS : LIGHT_COLORS;
41-
}
75+
export const DEFAULT_COLOR = 'var(--g-color-base-generic-medium)';
4276

4377
/** Calculates sub color index */
4478
export function getMinorVersionColorVariant(minorIndex: number, minorQuantity: number) {
@@ -64,9 +98,6 @@ export function getMinorVersionColorVariant(minorIndex: number, minorQuantity: n
6498
return Math.floor((4 * minorIndex) / minorQuantity);
6599
}
66100

67-
// TODO: replace with color suggested by designer
68-
export const DEFAULT_COLOR = 'saddlebrown';
69-
70101
export const getVersionsMap = (versions: string[], initialMap: VersionsMap = new Map()) => {
71102
versions.forEach((version) => {
72103
const majorVersion = getMajorVersion(version);
@@ -87,23 +118,21 @@ export const getVersionToColorMap = (versionsMap: VersionsMap) => {
87118
};
88119
});
89120

90-
const colors = getColors();
91-
92121
const versionToColor: VersionToColorMap = new Map();
93122
// not every version is colored, therefore iteration index can't be used consistently
94123
// init with the colors length to put increment right after condition for better readability
95-
let currentColorIndex = colors.length - 1;
124+
let currentColorIndex = COLORS.length - 1;
96125

97126
clustersVersions
98127
// ascending by version name, just for consistency
99128
// sorting only impacts color choose for a version
100129
.sort((a, b) => a.hash - b.hash)
101130
.forEach((item) => {
102131
if (/^(\w+-)?stable/.test(item.version)) {
103-
currentColorIndex = (currentColorIndex + 1) % colors.length;
132+
currentColorIndex = (currentColorIndex + 1) % COLORS.length;
104133

105134
// Use fisrt color for major
106-
versionToColor.set(item.version, colors[currentColorIndex][0]);
135+
versionToColor.set(item.version, COLORS[currentColorIndex][0]);
107136

108137
const minors = Array.from(versionsMap.get(item.version) || [])
109138
.filter((v) => v !== item.version)
@@ -125,7 +154,7 @@ export const getVersionToColorMap = (versionsMap: VersionsMap) => {
125154
minorIndex,
126155
minorQuantity,
127156
);
128-
const minorColor = colors[currentColorIndex][minorColorVariant];
157+
const minorColor = COLORS[currentColorIndex][minorColorVariant];
129158
versionToColor.set(minor.version, minorColor);
130159
});
131160
} else {

0 commit comments

Comments
 (0)