Colors
Абстрагируйте все цвета из гайдлайна в короткие имена-маркеры.
~/src/stylus/utils/_variables.styl
// Palette
//////////////////////////////////////////////////////
$colors = {
cat: #fed564,
dog: #8bc24c,
bird: #fd5f00,
wood: #515bd4,
stone: #ffffff,
sea: #13334c,
sky: #0d2233,
ball: #b1b1b1,
rain: #efefef,
}
// Dependencies colors
$colors["text"] = $colors.sky
$colors["header"] = $colors.stone
$colors["content"] = $colors.rain
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
В любом месте кода препроцессора или секции стилей SFC (при условии импорта стилевой базы) библиотеки или дочерних проектов вы можете передавать правильные цвета:
.selector
color $colors.primary
1
2
2
Themezation
Переменные препроцессора предоставляют атомы основной цветовой темы. Но вы можете добавлять другие темы содержащие дневной и ночной режим в TypeScript, в файле @/src/utils/сonstants.ts:
export const THEMES: TConfig = {
theme1: 'theme1',
theme2: 'theme2',
};
export const MODES: TConfig = {
mode1: 'light',
mode2: 'dark',
};
// Design constants
//////////////////////////////////////////////////////
export const DESIGN: TConfig = {
// ...
THEMES: {
[THEMES.theme1]: {
// Light
[MODES.mode1]: {
// Palette
cat: '#fed564',
dog: '#8bc24c',
bird: '#fd5f00',
wood: '#515bd4',
stone: '#ffffff',
sea: '#13334c',
sky: '#dddddd',
ball: '#b1b1b1',
rain: '#efefef',
// Dependencies colors
text: '#0d2233',
header: '#ffffff',
content: '#efefef',
},
// Dark
[MODES.mode2]: {
// Palette
cat: '#fed564',
dog: '#8bc24c',
bird: '#fd5f00',
wood: '#515bd4',
stone: '#ffffff',
sea: '#13334c',
sky: '#dddddd',
ball: '#b1b1b1',
rain: '#efefef',
// Dependencies colors
text: '#ffffff',
header: '#163C59',
content: '#0d2233',
},
},
[THEMES.theme2]: {
// Light
[MODES.mode1]: {
// Palette
cat: '#fd5f00',
dog: '#8bc24c',
bird: '#fed564',
wood: '#515bd4',
stone: '#ffffff',
sea: '#3A0061',
sky: '#f9f9f9',
ball: '#b1b1b1',
rain: '#efefef',
// Dependencies colors
text: '#1F0033',
header: '#ffffff',
content: '#efefef',
},
// Dark
[MODES.mode2]: {
// Palette
cat: '#fd5f00',
dog: '#8bc24c',
bird: '#fed564',
wood: '#515bd4',
stone: '#ffffff',
sea: '#3A0061',
sky: '#f9f9f9',
ball: '#b1b1b1',
rain: '#efefef',
// Dependencies colors
text: '#ffffff',
header: '#5D009C',
content: '#1F0033',
},
},
},
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
Теперь можно использовать Custom Properties c соответсвующими именами, после переменных препроцессора остающихся в качестве фоллбэка:
.selector
color $colors.text
color var(--text)
1
2
3
2
3