Skip to content

Commit 1366644

Browse files
boomboshaboombosha
committed
feat(elements): add CSS variables types for components | fixes #13506 Б.6.5
1 parent 7e22553 commit 1366644

38 files changed

Lines changed: 1882 additions & 55 deletions

File tree

‎src/components/elements/AudioRecorder/styles/AudioRecorder.scss‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,4 @@
7777
color: var(--chotto-audiorecorder-button-disabled-span-color);
7878
}
7979
}
80-
}
81-
82-
80+
}

‎src/components/elements/AudioRecorder/types.ts‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
/**
2+
* CSS переменные для компонента AudioRecorder
3+
*/
4+
export interface AudioRecorderThemeCSSVariables {
5+
// Container
6+
/** Позиционирование контейнера */
7+
'--chotto-audiorecorder-container-position': string;
8+
/** Отображение контейнера */
9+
'--chotto-audiorecorder-container-display': string;
10+
/** Выравнивание элементов контейнера */
11+
'--chotto-audiorecorder-container-align-items': string;
12+
/** Цвет фона контейнера */
13+
'--chotto-audiorecorder-container-background-color': string;
14+
/** Высота контейнера */
15+
'--chotto-audiorecorder-container-height': string;
16+
17+
// Recording container
18+
/** Отображение контейнера записи */
19+
'--chotto-audiorecorder-recording-container-display': string;
20+
/** Промежуток между элементами контейнера записи */
21+
'--chotto-audiorecorder-recording-container-gap': string;
22+
/** Высота строки контейнера записи */
23+
'--chotto-audiorecorder-recording-container-line-height': string;
24+
25+
// Recording icon
26+
/** Высота строки иконки записи */
27+
'--chotto-audiorecorder-recording-icon-line-height': string;
28+
/** Размер шрифта иконки записи */
29+
'--chotto-audiorecorder-recording-icon-font-size': string;
30+
/** Webkit анимация иконки записи */
31+
'--chotto-audiorecorder-recording-icon-webkit-animation': string;
32+
/** Анимация иконки записи */
33+
'--chotto-audiorecorder-recording-icon-animation': string;
34+
35+
// Stop button
36+
/** Ширина кнопки остановки */
37+
'--chotto-audiorecorder-stop-width': string;
38+
/** Высота кнопки остановки */
39+
'--chotto-audiorecorder-stop-height': string;
40+
/** Цвет фона кнопки остановки */
41+
'--chotto-audiorecorder-stop-background-color': string;
42+
/** Курсор кнопки остановки */
43+
'--chotto-audiorecorder-stop-cursor': string;
44+
/** Радиус границы кнопки остановки */
45+
'--chotto-audiorecorder-stop-border-radius': string;
46+
47+
// Blink keyframes
48+
/** Цвет начала анимации мигания */
49+
'--chotto-audiorecorder-blink-keyframes-0-color': string;
50+
/** Цвет середины анимации мигания */
51+
'--chotto-audiorecorder-blink-keyframes-50-color': string;
52+
/** Цвет конца анимации мигания */
53+
'--chotto-audiorecorder-blink-keyframes-100-color': string;
54+
55+
// Button
56+
/** Цвет фона кнопки */
57+
'--chotto-audiorecorder-button-background-color': string;
58+
/** Граница кнопки */
59+
'--chotto-audiorecorder-button-border': string;
60+
/** Отображение span кнопки */
61+
'--chotto-audiorecorder-button-span-display': string;
62+
/** Курсор span кнопки */
63+
'--chotto-audiorecorder-button-span-cursor': string;
64+
/** Отступы span кнопки */
65+
'--chotto-audiorecorder-button-span-padding': string;
66+
/** Размер шрифта span кнопки */
67+
'--chotto-audiorecorder-button-span-font-size': string;
68+
/** Цвет span кнопки */
69+
'--chotto-audiorecorder-button-span-color': string;
70+
/** Цвет span кнопки при наведении */
71+
'--chotto-audiorecorder-button-span-hover-color': string;
72+
73+
// Button record
74+
/** Отображение span кнопки записи */
75+
'--chotto-audiorecorder-button-record-span-display': string;
76+
/** Курсор span кнопки записи */
77+
'--chotto-audiorecorder-button-record-span-cursor': string;
78+
/** Отступы span кнопки записи */
79+
'--chotto-audiorecorder-button-record-span-padding': string;
80+
/** Размер шрифта span кнопки записи */
81+
'--chotto-audiorecorder-button-record-span-font-size': string;
82+
/** Цвет span кнопки записи */
83+
'--chotto-audiorecorder-button-record-span-color': string;
84+
/** Цвет span кнопки записи при наведении */
85+
'--chotto-audiorecorder-button-record-span-hover-color': string;
86+
87+
// Button disabled
88+
/** События указателя отключенной кнопки */
89+
'--chotto-audiorecorder-button-disabled-pointer-events': string;
90+
/** Курсор span отключенной кнопки */
91+
'--chotto-audiorecorder-button-disabled-span-cursor': string;
92+
/** Цвет span отключенной кнопки */
93+
'--chotto-audiorecorder-button-disabled-span-color': string;
94+
}

‎src/components/elements/ButtonCommandsSelector/styles/ButtonCommandsSelector.scss‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,4 @@
1616
cursor: var(--chotto-buttoncommandsselector-disabled-cursor, auto);
1717
pointer-events: var(--chotto-buttoncommandsselector-disabled-pointer-events, none);
1818
}
19-
}
20-
21-
19+
}

‎src/components/elements/ButtonCommandsSelector/types.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/**
2+
* CSS переменные для компонента ButtonCommandsSelector
3+
*/
4+
export interface ButtonCommandsSelectorThemeCSSVariables {
5+
// Trigger
6+
/** Отступы триггера */
7+
'--chotto-buttoncommandsselector-trigger-padding': string;
8+
/** Отображение триггера */
9+
'--chotto-buttoncommandsselector-trigger-display': string;
10+
/** Курсор триггера */
11+
'--chotto-buttoncommandsselector-trigger-cursor': string;
12+
/** Размер шрифта триггера */
13+
'--chotto-buttoncommandsselector-trigger-font-size': string;
14+
/** Цвет триггера */
15+
'--chotto-buttoncommandsselector-trigger-color': string;
16+
/** Цвет триггера при наведении */
17+
'--chotto-buttoncommandsselector-trigger-hover-color': string;
18+
19+
// Disabled
20+
/** Цвет отключенного элемента */
21+
'--chotto-buttoncommandsselector-disabled-color': string;
22+
/** Курсор отключенного элемента */
23+
'--chotto-buttoncommandsselector-disabled-cursor': string;
24+
/** События указателя отключенного элемента */
25+
'--chotto-buttoncommandsselector-disabled-pointer-events': string;
26+
}

‎src/components/elements/ButtonContextMenu/types.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/**
2+
* CSS переменные для компонента ButtonContextMenu
3+
*/
4+
export interface ButtonContextMenuThemeCSSVariables {
5+
// Button context menu
6+
/** Позиционирование кнопки контекстного меню */
7+
'--chotto-buttoncontextmenu-position': string;
8+
/** Ширина кнопки контекстного меню */
9+
'--chotto-buttoncontextmenu-width': string;
10+
/** Граница кнопки контекстного меню */
11+
'--chotto-buttoncontextmenu-border': string;
12+
/** Фон кнопки контекстного меню */
13+
'--chotto-buttoncontextmenu-background': string;
14+
/** Высота кнопки контекстного меню */
15+
'--chotto-buttoncontextmenu-height': string;
16+
}

‎src/components/elements/ButtonEmojiPicker/styles/ButtonEmojiPicker.scss‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,4 @@
2525
.emoji {
2626
position: var(--chotto-buttonemojipicker-emoji-position, absolute);
2727
bottom: var(--chotto-buttonemojipicker-emoji-bottom, 50px);
28-
}
29-
30-
28+
}

‎src/components/elements/ButtonEmojiPicker/types.ts‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/**
2+
* CSS переменные для компонента ButtonEmojiPicker
3+
*/
4+
export interface ButtonEmojiPickerThemeCSSVariables {
5+
// Button
6+
/** Цвет фона кнопки */
7+
'--chotto-buttonemojipicker-button-background-color': string;
8+
/** Граница кнопки */
9+
'--chotto-buttonemojipicker-button-border': string;
10+
/** Высота кнопки */
11+
'--chotto-buttonemojipicker-button-height': string;
12+
/** Отображение span кнопки */
13+
'--chotto-buttonemojipicker-button-span-display': string;
14+
/** Курсор span кнопки */
15+
'--chotto-buttonemojipicker-button-span-cursor': string;
16+
/** Отступы span кнопки */
17+
'--chotto-buttonemojipicker-button-span-padding': string;
18+
/** Размер шрифта span кнопки */
19+
'--chotto-buttonemojipicker-button-span-font-size': string;
20+
/** Цвет span кнопки */
21+
'--chotto-buttonemojipicker-button-span-color': string;
22+
/** Цвет span кнопки при наведении */
23+
'--chotto-buttonemojipicker-button-span-hover-color': string;
24+
25+
// Button disabled
26+
/** События указателя отключенной кнопки */
27+
'--chotto-buttonemojipicker-button-disabled-pointer-events': string;
28+
/** Курсор span отключенной кнопки */
29+
'--chotto-buttonemojipicker-button-disabled-span-cursor': string;
30+
/** Цвет span отключенной кнопки */
31+
'--chotto-buttonemojipicker-button-disabled-span-color': string;
32+
33+
// Emoji
34+
/** Позиционирование эмодзи-пикера */
35+
'--chotto-buttonemojipicker-emoji-position': string;
36+
/** Позиция эмодзи-пикера снизу */
37+
'--chotto-buttonemojipicker-emoji-bottom': string;
38+
}

‎src/components/elements/ButtonTemplateSelector/types.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/**
2+
* CSS переменные для компонента ButtonTemplateSelector
3+
*/
4+
export interface ButtonTemplateSelectorThemeCSSVariables {
5+
// Button
6+
/** Цвет фона кнопки */
7+
'--chotto-buttontemplateselector-button-background-color': string;
8+
/** Граница кнопки */
9+
'--chotto-buttontemplateselector-button-border': string;
10+
/** Высота кнопки */
11+
'--chotto-buttontemplateselector-button-height': string;
12+
/** Отображение span кнопки */
13+
'--chotto-buttontemplateselector-button-span-display': string;
14+
/** Курсор span кнопки */
15+
'--chotto-buttontemplateselector-button-span-cursor': string;
16+
/** Отступы span кнопки */
17+
'--chotto-buttontemplateselector-button-span-padding': string;
18+
/** Размер шрифта span кнопки */
19+
'--chotto-buttontemplateselector-button-span-font-size': string;
20+
/** Цвет span кнопки */
21+
'--chotto-buttontemplateselector-button-span-color': string;
22+
/** Цвет span кнопки при наведении */
23+
'--chotto-buttontemplateselector-button-span-hover-color': string;
24+
25+
// Button disabled
26+
/** События указателя отключенной кнопки */
27+
'--chotto-buttontemplateselector-button-disabled-pointer-events': string;
28+
/** Курсор span отключенной кнопки */
29+
'--chotto-buttontemplateselector-button-disabled-span-cursor': string;
30+
/** Цвет span отключенной кнопки */
31+
'--chotto-buttontemplateselector-button-disabled-span-color': string;
32+
}

‎src/components/elements/ButtonWabaTemplateSelector/styles/ButtonWabaTemplateSelector.scss‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,4 @@
2121
cursor: var(--chotto-buttonwabatemplateselector-button-disabled-span-cursor, auto);
2222
color: var(--chotto-buttonwabatemplateselector-button-disabled-span-color);
2323
}
24-
}
25-
26-
24+
}

‎src/components/elements/ButtonWabaTemplateSelector/types.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/**
2+
* CSS переменные для компонента ButtonWabaTemplateSelector
3+
*/
4+
export interface ButtonWabaTemplateSelectorThemeCSSVariables {
5+
// Button
6+
/** Цвет фона кнопки */
7+
'--chotto-buttonwabatemplateselector-button-background-color': string;
8+
/** Граница кнопки */
9+
'--chotto-buttonwabatemplateselector-button-border': string;
10+
/** Высота кнопки */
11+
'--chotto-buttonwabatemplateselector-button-height': string;
12+
/** Отображение span кнопки */
13+
'--chotto-buttonwabatemplateselector-button-span-display': string;
14+
/** Курсор span кнопки */
15+
'--chotto-buttonwabatemplateselector-button-span-cursor': string;
16+
/** Отступы span кнопки */
17+
'--chotto-buttonwabatemplateselector-button-span-padding': string;
18+
/** Размер шрифта span кнопки */
19+
'--chotto-buttonwabatemplateselector-button-span-font-size': string;
20+
/** Цвет span кнопки */
21+
'--chotto-buttonwabatemplateselector-button-span-color': string;
22+
/** Цвет span кнопки при наведении */
23+
'--chotto-buttonwabatemplateselector-button-span-hover-color': string;
24+
25+
// Button disabled
26+
/** События указателя отключенной кнопки */
27+
'--chotto-buttonwabatemplateselector-button-disabled-pointer-events': string;
28+
/** Курсор span отключенной кнопки */
29+
'--chotto-buttonwabatemplateselector-button-disabled-span-cursor': string;
30+
/** Цвет span отключенной кнопки */
31+
'--chotto-buttonwabatemplateselector-button-disabled-span-color': string;
32+
}

0 commit comments

Comments
 (0)