tokenizer-ui-kit 0.2.18 → 0.2.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/VARIABLES-ADAPTIVETABS.md +124 -0
  2. package/VARIABLES-BUTTON.md +260 -0
  3. package/VARIABLES-CHECKBOX.md +130 -0
  4. package/VARIABLES-DATEPICKER.md +154 -0
  5. package/VARIABLES-ICONBUTTON.md +252 -0
  6. package/VARIABLES-INPUT.md +143 -0
  7. package/VARIABLES-LABEL.md +137 -0
  8. package/VARIABLES-SELECT.md +157 -0
  9. package/VARIABLES-TOAST.md +169 -0
  10. package/VARIABLES.md +124 -0
  11. package/dist/tokenizer-ui-kit.css +2 -2
  12. package/dist/tokenizer-ui-kit.es.js +879 -850
  13. package/dist/tokenizer-ui-kit.umd.js +1 -1
  14. package/dist/types/components/ui/CButton/CButton.vue.d.ts.map +1 -1
  15. package/dist/types/components/ui/CIconButton/CIconButton.vue.d.ts.map +1 -1
  16. package/dist/types/components/ui/CIconButton/types.d.ts +1 -1
  17. package/dist/types/components/ui/CIconButton/types.d.ts.map +1 -1
  18. package/dist/types/components/ui/CInput/CInput.vue.d.ts.map +1 -1
  19. package/dist/types/components/ui/CLinkButton/CLinkButton.vue.d.ts +23 -0
  20. package/dist/types/components/ui/CLinkButton/CLinkButton.vue.d.ts.map +1 -0
  21. package/dist/types/components/ui/CLinkButton/types.d.ts +11 -0
  22. package/dist/types/components/ui/CLinkButton/types.d.ts.map +1 -0
  23. package/dist/types/components/ui/CPasswordInput/CPasswordInput.vue.d.ts.map +1 -1
  24. package/dist/types/components/ui/CSearchInput/CSearchInput.vue.d.ts.map +1 -1
  25. package/dist/types/index.d.ts +2 -0
  26. package/dist/types/index.d.ts.map +1 -1
  27. package/package.json +13 -2
package/VARIABLES-ADAPTIVETABS.md ADDED
@@ -0,0 +1,124 @@
1
+ # AdaptiveTabs Component Variables
2
+
3
+ Документация по CSS переменным для компонента `AdaptiveTabs`.
4
+
5
+ ## 📋 Содержание
6
+
7
+ - [Базовые переменные](#базовые-переменные)
8
+ - [Табы](#табы)
9
+ - [Выпадающее меню](#выпадающее-меню)
10
+ - [Примеры использования](#примеры-использования)
11
+ - [Полный список переменных](#полный-список-переменных)
12
+
13
+ ---
14
+
15
+ ## Базовые переменные
16
+
17
+ | Переменная | Описание | Значение по умолчанию |
18
+ |------------|----------|----------------------|
19
+ | `--ui-kit-adaptivetabs-bg` | Фон контейнера табов | `var(--ui-kit-color-bg-white)` |
20
+
21
+ ---
22
+
23
+ ## Табы
24
+
25
+ Переменные для стилизации отдельных табов.
26
+
27
+ | Переменная | Описание | Значение по умолчанию |
28
+ |------------|----------|----------------------|
29
+ | `--ui-kit-adaptivetabs-tab-text` | Цвет текста таба | `var(--ui-kit-color-text-primary)` |
30
+ | `--ui-kit-adaptivetabs-tab-text-active` | Цвет текста активного таба | `var(--ui-kit-color-text-white)` |
31
+ | `--ui-kit-adaptivetabs-tab-bg-active` | Фон активного таба | `var(--ui-kit-color-primary)` |
32
+ | `--ui-kit-adaptivetabs-tab-bg-hover` | Фон таба при наведении | `var(--ui-kit-color-bg-light-1)` |
33
+ | `--ui-kit-adaptivetabs-tab-divider` | Цвет разделителя между табами | `var(--ui-kit-color-bg-light-4)` |
34
+
35
+ ---
36
+
37
+ ## Выпадающее меню
38
+
39
+ Переменные для стилизации выпадающего меню с скрытыми табами.
40
+
41
+ | Переменная | Описание | Значение по умолчанию |
42
+ |------------|----------|----------------------|
43
+ | `--ui-kit-adaptivetabs-dropdown-bg` | Фон выпадающего меню | `var(--ui-kit-color-bg-white)` |
44
+ | `--ui-kit-adaptivetabs-dropdown-border` | Цвет границы выпадающего меню | `var(--ui-kit-color-border)` |
45
+ | `--ui-kit-adaptivetabs-dropdown-item-text` | Цвет текста элемента меню | `var(--ui-kit-color-text-secondary)` |
46
+ | `--ui-kit-adaptivetabs-dropdown-item-bg-hover` | Фон элемента меню при наведении | `var(--ui-kit-color-bg-light-1)` |
47
+ | `--ui-kit-adaptivetabs-dropdown-item-bg-active` | Фон активного элемента меню | `var(--ui-kit-system-success-400)` |
48
+ | `--ui-kit-adaptivetabs-dropdown-item-text-active` | Цвет текста активного элемента меню | `var(--ui-kit-system-success-700)` |
49
+
50
+ ---
51
+
52
+ ## Примеры использования
53
+
54
+ ### Глобальное переопределение
55
+
56
+ ```css
57
+ :root {
58
+ /* Изменить цвет активного таба */
59
+ --ui-kit-adaptivetabs-tab-bg-active: #007bff;
60
+ --ui-kit-adaptivetabs-tab-text-active: #ffffff;
61
+
62
+ /* Изменить стиль выпадающего меню */
63
+ --ui-kit-adaptivetabs-dropdown-bg: #f8f9fa;
64
+ --ui-kit-adaptivetabs-dropdown-border: #dee2e6;
65
+ }
66
+ ```
67
+
68
+ ### Переопределение для конкретного компонента
69
+
70
+ ```vue
71
+ <template>
72
+ <AdaptiveTabs v-model="activeTab" :tabs="tabs" class="custom-tabs" />
73
+ </template>
74
+
75
+ <style>
76
+ .custom-tabs {
77
+ --ui-kit-adaptivetabs-tab-bg-active: #28a745;
78
+ --ui-kit-adaptivetabs-dropdown-item-bg-active: #d4edda;
79
+ --ui-kit-adaptivetabs-dropdown-item-text-active: #155724;
80
+ }
81
+ </style>
82
+ ```
83
+
84
+ ---
85
+
86
+ ## Полный список переменных
87
+
88
+ Готовый блок CSS для копирования:
89
+
90
+ ```css
91
+ .ui-kit-adaptive-tabs {
92
+ /* Base */
93
+ --ui-kit-adaptivetabs-bg: var(--ui-kit-color-bg-white);
94
+
95
+ /* Tab */
96
+ --ui-kit-adaptivetabs-tab-text: var(--ui-kit-color-text-primary);
97
+ --ui-kit-adaptivetabs-tab-text-active: var(--ui-kit-color-text-white);
98
+ --ui-kit-adaptivetabs-tab-bg-active: var(--ui-kit-color-primary);
99
+ --ui-kit-adaptivetabs-tab-bg-hover: var(--ui-kit-color-bg-light-1);
100
+ --ui-kit-adaptivetabs-tab-divider: var(--ui-kit-color-bg-light-4);
101
+
102
+ /* Dropdown */
103
+ --ui-kit-adaptivetabs-dropdown-bg: var(--ui-kit-color-bg-white);
104
+ --ui-kit-adaptivetabs-dropdown-border: var(--ui-kit-color-border);
105
+ --ui-kit-adaptivetabs-dropdown-item-text: var(--ui-kit-color-text-secondary);
106
+ --ui-kit-adaptivetabs-dropdown-item-bg-hover: var(--ui-kit-color-bg-light-1);
107
+ --ui-kit-adaptivetabs-dropdown-item-bg-active: var(--ui-kit-system-success-400);
108
+ --ui-kit-adaptivetabs-dropdown-item-text-active: var(--ui-kit-system-success-700);
109
+ }
110
+ ```
111
+
112
+ ---
113
+
114
+ ## 📝 Примечания
115
+
116
+ - Все переменные имеют значения по умолчанию, поэтому кастомизация опциональна
117
+ - Переменные можно переопределять на разных уровнях: глобально (`:root`), для конкретного компонента через класс
118
+ - Базовые токены (`--ui-kit-color-*`) используются по умолчанию и должны быть определены в `variables.css`
119
+ - Компонентные переменные определены в `src/lib/assets/css/components/adaptivetabs.css`
120
+
121
+ ---
122
+
123
+ [← Назад к списку компонентов](./VARIABLES.md)
124
+
package/VARIABLES-BUTTON.md ADDED
@@ -0,0 +1,260 @@
1
+ # Button Component Variables
2
+
3
+ Документация по CSS переменным для компонента `CButton`.
4
+
5
+ ## 📋 Содержание
6
+
7
+ - [Общие переменные](#общие-переменные)
8
+ - [Варианты (Variants)](#варианты-variants)
9
+ - [success](#variant-success)
10
+ - [success-outline](#variant-success-outline)
11
+ - [primary](#variant-primary)
12
+ - [secondary](#variant-secondary)
13
+ - [default](#variant-default)
14
+ - [error](#variant-error)
15
+ - [error-outline](#variant-error-outline)
16
+ - [Примеры использования](#примеры-использования)
17
+ - [Полный список переменных](#полный-список-переменных)
18
+
19
+ ---
20
+
21
+ ## Общие переменные
22
+
23
+ Применяются ко всем вариантам кнопок по умолчанию.
24
+
25
+ | Переменная | Описание | Значение по умолчанию |
26
+ |------------|----------|----------------------|
27
+ | `--ui-kit-button-bg` | Фон кнопки | `var(--ui-kit-color-primary)` |
28
+ | `--ui-kit-button-text` | Цвет текста | `var(--ui-kit-color-text-white)` |
29
+ | `--ui-kit-button-border` | Цвет границы | `transparent` |
30
+ | `--ui-kit-button-hover-bg` | Фон при наведении | `var(--ui-kit-color-primary-hover)` |
31
+ | `--ui-kit-button-hover-text` | Цвет текста при наведении | `var(--ui-kit-color-text-white)` |
32
+ | `--ui-kit-button-hover-border` | Цвет границы при наведении | `transparent` |
33
+ | `--ui-kit-button-disabled-bg` | Фон в disabled состоянии | `var(--ui-kit-color-disabled-bg)` |
34
+ | `--ui-kit-button-disabled-text` | Цвет текста в disabled состоянии | `var(--ui-kit-color-text-white)` |
35
+ | `--ui-kit-button-disabled-border` | Цвет границы в disabled состоянии | `transparent` |
36
+
37
+ ---
38
+
39
+ ## Варианты (Variants)
40
+
41
+ ### Variant: success
42
+
43
+ Зеленая кнопка с заполненным фоном.
44
+
45
+ | Переменная | Описание | Значение по умолчанию |
46
+ |------------|----------|----------------------|
47
+ | `--ui-kit-button-success-bg` | Фон кнопки success | `var(--ui-kit-color-primary)` |
48
+ | `--ui-kit-button-success-text` | Цвет текста | `var(--ui-kit-color-text-white)` |
49
+ | `--ui-kit-button-success-border` | Цвет границы | `transparent` |
50
+ | `--ui-kit-button-success-hover-bg` | Фон при наведении | `var(--ui-kit-color-primary-hover)` |
51
+
52
+ ### Variant: success-outline
53
+
54
+ Зеленая кнопка с обводкой.
55
+
56
+ | Переменная | Описание | Значение по умолчанию |
57
+ |------------|----------|----------------------|
58
+ | `--ui-kit-button-success-outline-bg` | Фон кнопки | `transparent` |
59
+ | `--ui-kit-button-success-outline-text` | Цвет текста | `var(--ui-kit-color-primary)` |
60
+ | `--ui-kit-button-success-outline-border` | Цвет границы | `var(--ui-kit-color-primary)` |
61
+ | `--ui-kit-button-success-outline-hover-bg` | Фон при наведении | `var(--ui-kit-color-primary)` |
62
+ | `--ui-kit-button-success-outline-hover-text` | Цвет текста при наведении | `var(--ui-kit-color-text-white)` |
63
+ | `--ui-kit-button-success-outline-hover-border` | Цвет границы при наведении | `var(--ui-kit-color-primary)` |
64
+
65
+ ### Variant: primary
66
+
67
+ Темно-серая/черная кнопка с заполненным фоном.
68
+
69
+ | Переменная | Описание | Значение по умолчанию |
70
+ |------------|----------|----------------------|
71
+ | `--ui-kit-button-primary-bg` | Фон кнопки | `var(--ui-kit-color-text-primary)` |
72
+ | `--ui-kit-button-primary-text` | Цвет текста | `var(--ui-kit-color-bg-white)` |
73
+ | `--ui-kit-button-primary-border` | Цвет границы | `transparent` |
74
+ | `--ui-kit-button-primary-hover-border` | Цвет границы при наведении | `var(--ui-kit-color-text-secondary)` |
75
+
76
+ ### Variant: secondary
77
+
78
+ Средне-серая кнопка с заполненным фоном.
79
+
80
+ | Переменная | Описание | Значение по умолчанию |
81
+ |------------|----------|----------------------|
82
+ | `--ui-kit-button-secondary-bg` | Фон кнопки | `var(--ui-kit-color-text-secondary)` |
83
+ | `--ui-kit-button-secondary-text` | Цвет текста | `var(--ui-kit-color-bg-white)` |
84
+ | `--ui-kit-button-secondary-border` | Цвет границы | `transparent` |
85
+ | `--ui-kit-button-secondary-hover-bg` | Фон при наведении | `#36373f` |
86
+ | `--ui-kit-button-secondary-hover-border` | Цвет границы при наведении | `var(--ui-kit-color-text-secondary)` |
87
+
88
+ ### Variant: default
89
+
90
+ Белая кнопка с границей.
91
+
92
+ | Переменная | Описание | Значение по умолчанию |
93
+ |------------|----------|----------------------|
94
+ | `--ui-kit-button-default-bg` | Фон кнопки | `var(--ui-kit-color-bg-white)` |
95
+ | `--ui-kit-button-default-text` | Цвет текста | `var(--ui-kit-color-text-primary)` |
96
+ | `--ui-kit-button-default-border` | Цвет границы | `transparent` |
97
+ | `--ui-kit-button-default-hover-border` | Цвет границы при наведении | `var(--ui-kit-color-border)` |
98
+
99
+ ### Variant: error
100
+
101
+ Красная кнопка с заполненным фоном.
102
+
103
+ | Переменная | Описание | Значение по умолчанию |
104
+ |------------|----------|----------------------|
105
+ | `--ui-kit-button-error-bg` | Фон кнопки | `var(--ui-kit-color-error)` |
106
+ | `--ui-kit-button-error-text` | Цвет текста | `var(--ui-kit-color-text-white)` |
107
+ | `--ui-kit-button-error-border` | Цвет границы | `transparent` |
108
+ | `--ui-kit-button-error-hover-bg` | Фон при наведении | `#c63c28` |
109
+
110
+ ### Variant: error-outline
111
+
112
+ Красная кнопка с обводкой.
113
+
114
+ | Переменная | Описание | Значение по умолчанию |
115
+ |------------|----------|----------------------|
116
+ | `--ui-kit-button-error-outline-bg` | Фон кнопки | `transparent` |
117
+ | `--ui-kit-button-error-outline-text` | Цвет текста | `var(--ui-kit-color-error)` |
118
+ | `--ui-kit-button-error-outline-border` | Цвет границы | `var(--ui-kit-color-error)` |
119
+ | `--ui-kit-button-error-outline-hover-bg` | Фон при наведении | `var(--ui-kit-color-error)` |
120
+ | `--ui-kit-button-error-outline-hover-text` | Цвет текста при наведении | `var(--ui-kit-color-text-white)` |
121
+ | `--ui-kit-button-error-outline-hover-border` | Цвет границы при наведении | `var(--ui-kit-color-error)` |
122
+
123
+ ---
124
+
125
+ ## Примеры использования
126
+
127
+ ### Глобальное переопределение для всех кнопок
128
+
129
+ ```css
130
+ :root {
131
+ --ui-kit-button-bg: #ff0000;
132
+ --ui-kit-button-hover-bg: #cc0000;
133
+ }
134
+ ```
135
+
136
+ ### Переопределение для конкретного варианта
137
+
138
+ ```css
139
+ :root {
140
+ --ui-kit-button-success-bg: #00ff00;
141
+ --ui-kit-button-success-hover-bg: #00cc00;
142
+ }
143
+ ```
144
+
145
+ ### Переопределение для конкретной кнопки
146
+
147
+ ```vue
148
+ <template>
149
+ <CButton class="my-custom-button">Click me</CButton>
150
+ </template>
151
+
152
+ <style>
153
+ .my-custom-button {
154
+ --ui-kit-button-bg: #0000ff;
155
+ --ui-kit-button-hover-bg: #0000cc;
156
+ }
157
+ </style>
158
+ ```
159
+
160
+ ### Комбинированное использование
161
+
162
+ ```css
163
+ /* Глобально для всех кнопок */
164
+ :root {
165
+ --ui-kit-button-bg: #ff0000;
166
+ }
167
+
168
+ /* Для конкретного варианта */
169
+ :root {
170
+ --ui-kit-button-success-bg: #00ff00;
171
+ }
172
+
173
+ /* Для конкретной кнопки */
174
+ .my-special-button {
175
+ --ui-kit-button-success-bg: #0000ff;
176
+ }
177
+ ```
178
+
179
+ ---
180
+
181
+ ## Полный список переменных
182
+
183
+ Готовый блок CSS для копирования:
184
+
185
+ ```css
186
+ :root {
187
+ /* Общие переменные кнопки */
188
+ --ui-kit-button-bg: var(--ui-kit-color-primary);
189
+ --ui-kit-button-text: var(--ui-kit-color-text-white);
190
+ --ui-kit-button-border: transparent;
191
+ --ui-kit-button-hover-bg: var(--ui-kit-color-primary-hover);
192
+ --ui-kit-button-hover-text: var(--ui-kit-color-text-white);
193
+ --ui-kit-button-hover-border: transparent;
194
+ --ui-kit-button-disabled-bg: var(--ui-kit-color-disabled-bg);
195
+ --ui-kit-button-disabled-text: var(--ui-kit-color-text-white);
196
+ --ui-kit-button-disabled-border: transparent;
197
+
198
+ /* Variant: success */
199
+ --ui-kit-button-success-bg: var(--ui-kit-color-primary);
200
+ --ui-kit-button-success-text: var(--ui-kit-color-text-white);
201
+ --ui-kit-button-success-border: transparent;
202
+ --ui-kit-button-success-hover-bg: var(--ui-kit-color-primary-hover);
203
+
204
+ /* Variant: success-outline */
205
+ --ui-kit-button-success-outline-bg: transparent;
206
+ --ui-kit-button-success-outline-text: var(--ui-kit-color-primary);
207
+ --ui-kit-button-success-outline-border: var(--ui-kit-color-primary);
208
+ --ui-kit-button-success-outline-hover-bg: var(--ui-kit-color-primary);
209
+ --ui-kit-button-success-outline-hover-text: var(--ui-kit-color-text-white);
210
+ --ui-kit-button-success-outline-hover-border: var(--ui-kit-color-primary);
211
+
212
+ /* Variant: primary */
213
+ --ui-kit-button-primary-bg: var(--ui-kit-color-text-primary);
214
+ --ui-kit-button-primary-text: var(--ui-kit-color-bg-white);
215
+ --ui-kit-button-primary-border: transparent;
216
+ --ui-kit-button-primary-hover-border: var(--ui-kit-color-text-secondary);
217
+
218
+ /* Variant: secondary */
219
+ --ui-kit-button-secondary-bg: var(--ui-kit-color-text-secondary);
220
+ --ui-kit-button-secondary-text: var(--ui-kit-color-bg-white);
221
+ --ui-kit-button-secondary-border: transparent;
222
+ --ui-kit-button-secondary-hover-bg: #36373f;
223
+ --ui-kit-button-secondary-hover-border: var(--ui-kit-color-text-secondary);
224
+
225
+ /* Variant: default */
226
+ --ui-kit-button-default-bg: var(--ui-kit-color-bg-white);
227
+ --ui-kit-button-default-text: var(--ui-kit-color-text-primary);
228
+ --ui-kit-button-default-border: transparent;
229
+ --ui-kit-button-default-hover-border: var(--ui-kit-color-border);
230
+
231
+ /* Variant: error */
232
+ --ui-kit-button-error-bg: var(--ui-kit-color-error);
233
+ --ui-kit-button-error-text: var(--ui-kit-color-text-white);
234
+ --ui-kit-button-error-border: transparent;
235
+ --ui-kit-button-error-hover-bg: #c63c28;
236
+
237
+ /* Variant: error-outline */
238
+ --ui-kit-button-error-outline-bg: transparent;
239
+ --ui-kit-button-error-outline-text: var(--ui-kit-color-error);
240
+ --ui-kit-button-error-outline-border: var(--ui-kit-color-error);
241
+ --ui-kit-button-error-outline-hover-bg: var(--ui-kit-color-error);
242
+ --ui-kit-button-error-outline-hover-text: var(--ui-kit-color-text-white);
243
+ --ui-kit-button-error-outline-hover-border: var(--ui-kit-color-error);
244
+ }
245
+ ```
246
+
247
+ ---
248
+
249
+ ## 📝 Примечания
250
+
251
+ - Все переменные имеют значения по умолчанию, поэтому кастомизация опциональна
252
+ - Переменные можно переопределять на разных уровнях: глобально (`:root`), для конкретного варианта, или для конкретного элемента через класс
253
+ - Базовые токены (`--ui-kit-color-*`) используются по умолчанию и должны быть определены в `variables.css`
254
+ - Компонентные переменные определены в `src/lib/assets/css/components/button.css`
255
+
256
+ ---
257
+
258
+ [← Назад к списку компонентов](../VARIABLES.md)
259
+
260
+
package/VARIABLES-CHECKBOX.md ADDED
@@ -0,0 +1,130 @@
1
+ # Checkbox Component Variables
2
+
3
+ Документация по CSS переменным для компонента `CCheckbox`.
4
+
5
+ ## 📋 Содержание
6
+
7
+ - [Переменные](#переменные)
8
+ - [Состояния](#состояния)
9
+ - [Примеры использования](#примеры-использования)
10
+ - [Полный список переменных](#полный-список-переменных)
11
+
12
+ ---
13
+
14
+ ## Переменные
15
+
16
+ | Переменная | Описание | Значение по умолчанию |
17
+ |------------|----------|----------------------|
18
+ | `--ui-kit-checkbox-border` | Цвет границы чекбокса | `var(--ui-kit-color-text-primary)` |
19
+ | `--ui-kit-checkbox-border-hover` | Цвет границы при наведении | `var(--ui-kit-color-primary)` |
20
+ | `--ui-kit-checkbox-border-checked` | Цвет границы в checked состоянии | `var(--ui-kit-color-primary)` |
21
+ | `--ui-kit-checkbox-bg` | Фон чекбокса | `transparent` |
22
+ | `--ui-kit-checkbox-bg-checked` | Фон чекбокса в checked состоянии | `var(--ui-kit-color-primary)` |
23
+ | `--ui-kit-checkbox-bg-disabled` | Фон чекбокса в disabled состоянии | `var(--ui-kit-color-bg-light-2)` |
24
+ | `--ui-kit-checkbox-icon-color` | Цвет иконки галочки | `var(--ui-kit-color-text-white)` |
25
+ | `--ui-kit-checkbox-icon-color-disabled` | Цвет иконки галочки в disabled состоянии | `var(--ui-kit-color-disabled-text)` |
26
+
27
+ ---
28
+
29
+ ## Состояния
30
+
31
+ ### Обычное состояние
32
+
33
+ - Граница: `--ui-kit-checkbox-border`
34
+ - Фон: `--ui-kit-checkbox-bg` (прозрачный)
35
+
36
+ ### Состояние hover
37
+
38
+ - Граница: `--ui-kit-checkbox-border-hover`
39
+
40
+ ### Состояние checked
41
+
42
+ - Граница: `--ui-kit-checkbox-border-checked`
43
+ - Фон: `--ui-kit-checkbox-bg-checked`
44
+ - Иконка: `--ui-kit-checkbox-icon-color`
45
+
46
+ ### Состояние disabled
47
+
48
+ - Граница: `--ui-kit-checkbox-bg-disabled`
49
+ - Фон: `--ui-kit-checkbox-bg-disabled`
50
+ - Иконка: `--ui-kit-checkbox-icon-color-disabled`
51
+
52
+ ---
53
+
54
+ ## Примеры использования
55
+
56
+ ### Глобальное переопределение
57
+
58
+ ```css
59
+ :root {
60
+ /* Изменить цвет чекбокса */
61
+ --ui-kit-checkbox-border-checked: #007bff;
62
+ --ui-kit-checkbox-bg-checked: #007bff;
63
+
64
+ /* Изменить цвет при наведении */
65
+ --ui-kit-checkbox-border-hover: #0056b3;
66
+ }
67
+ ```
68
+
69
+ ### Переопределение для конкретного чекбокса
70
+
71
+ ```vue
72
+ <template>
73
+ <CCheckbox v-model="checked" class="custom-checkbox" />
74
+ </template>
75
+
76
+ <style>
77
+ .custom-checkbox {
78
+ --ui-kit-checkbox-border-checked: #28a745;
79
+ --ui-kit-checkbox-bg-checked: #28a745;
80
+ --ui-kit-checkbox-icon-color: #ffffff;
81
+ }
82
+ </style>
83
+ ```
84
+
85
+ ### Кастомизация disabled состояния
86
+
87
+ ```css
88
+ :root {
89
+ --ui-kit-checkbox-bg-disabled: #e9ecef;
90
+ --ui-kit-checkbox-icon-color-disabled: #adb5bd;
91
+ }
92
+ ```
93
+
94
+ ---
95
+
96
+ ## Полный список переменных
97
+
98
+ Готовый блок CSS для копирования:
99
+
100
+ ```css
101
+ .ui-kit-checkbox {
102
+ /* Border */
103
+ --ui-kit-checkbox-border: var(--ui-kit-color-text-primary);
104
+ --ui-kit-checkbox-border-hover: var(--ui-kit-color-primary);
105
+ --ui-kit-checkbox-border-checked: var(--ui-kit-color-primary);
106
+
107
+ /* Background */
108
+ --ui-kit-checkbox-bg: transparent;
109
+ --ui-kit-checkbox-bg-checked: var(--ui-kit-color-primary);
110
+ --ui-kit-checkbox-bg-disabled: var(--ui-kit-color-bg-light-2);
111
+
112
+ /* Icon */
113
+ --ui-kit-checkbox-icon-color: var(--ui-kit-color-text-white);
114
+ --ui-kit-checkbox-icon-color-disabled: var(--ui-kit-color-disabled-text);
115
+ }
116
+ ```
117
+
118
+ ---
119
+
120
+ ## 📝 Примечания
121
+
122
+ - Все переменные имеют значения по умолчанию, поэтому кастомизация опциональна
123
+ - Переменные можно переопределять на разных уровнях: глобально (`:root`), для конкретного чекбокса через класс
124
+ - Базовые токены (`--ui-kit-color-*`) используются по умолчанию и должны быть определены в `variables.css`
125
+ - Компонентные переменные определены в `src/lib/assets/css/components/checkbox.css`
126
+
127
+ ---
128
+
129
+ [← Назад к списку компонентов](./VARIABLES.md)
130
+
package/VARIABLES-DATEPICKER.md ADDED
@@ -0,0 +1,154 @@
1
+ # DatePicker Component Variables
2
+
3
+ Документация по CSS переменным для компонента `DatePicker`.
4
+
5
+ ## 📋 Содержание
6
+
7
+ - [Общие переменные](#общие-переменные)
8
+ - [Примеры использования](#примеры-использования)
9
+ - [Полный список переменных](#полный-список-переменных)
10
+
11
+ ---
12
+
13
+ ## Общие переменные
14
+
15
+ Все переменные применяются к компоненту `DatePicker`.
16
+
17
+ | Переменная | Описание | Значение по умолчанию |
18
+ |------------|----------|----------------------|
19
+ | `--ui-kit-datepicker-header-text` | Цвет текста заголовка календаря | `var(--ui-kit-color-text-tertiary)` |
20
+ | `--ui-kit-datepicker-month-year-text` | Цвет текста выбора месяца/года | `var(--ui-kit-color-text-primary)` |
21
+ | `--ui-kit-datepicker-range-start-bg` | Фон начальной даты диапазона | `var(--ui-kit-color-primary)` |
22
+ | `--ui-kit-datepicker-range-end-bg` | Фон конечной даты диапазона | `var(--ui-kit-color-primary)` |
23
+ | `--ui-kit-datepicker-range-between-bg` | Фон дат между началом и концом | `var(--ui-kit-color-primary-light)` |
24
+ | `--ui-kit-datepicker-range-between-border` | Цвет границы дат между | `var(--ui-kit-color-primary-light)` |
25
+ | `--ui-kit-datepicker-range-between-text` | Цвет текста дат между | `var(--ui-kit-color-text-white)` |
26
+ | `--ui-kit-datepicker-action-bg` | Фон кнопки действия (Select) | `var(--ui-kit-system-success-700)` |
27
+ | `--ui-kit-datepicker-input-border` | Цвет границы поля ввода | `var(--ui-kit-color-border)` |
28
+ | `--ui-kit-datepicker-input-border-hover` | Цвет границы при наведении | `var(--ui-kit-color-primary-hover)` |
29
+ | `--ui-kit-datepicker-input-border-focus` | Цвет границы при фокусе | `var(--ui-kit-color-primary)` |
30
+ | `--ui-kit-datepicker-filter-bg` | Фон кнопки фильтра | `var(--ui-kit-color-bg-light-1)` |
31
+ | `--ui-kit-datepicker-filter-border` | Цвет границы кнопки фильтра | `var(--ui-kit-color-border)` |
32
+ | `--ui-kit-datepicker-filter-text` | Цвет текста кнопки фильтра | `var(--ui-kit-color-text-primary)` |
33
+ | `--ui-kit-datepicker-switch-bg` | Фон кнопки переключения вида | `var(--ui-kit-color-bg-light-5)` |
34
+ | `--ui-kit-datepicker-display-border` | Цвет границы отображения даты | `var(--ui-kit-color-border)` |
35
+ | `--ui-kit-datepicker-wrapper-border` | Цвет границы обертки поля ввода | `var(--ui-kit-color-border)` |
36
+ | `--ui-kit-datepicker-wrapper-border-active` | Цвет границы при активном состоянии | `var(--ui-kit-color-primary)` |
37
+ | `--ui-kit-datepicker-text-placeholder` | Цвет текста placeholder | `var(--ui-kit-color-text-tertiary)` |
38
+ | `--ui-kit-datepicker-text-filled` | Цвет текста заполненного поля | `var(--ui-kit-color-text-primary)` |
39
+ | `--ui-kit-datepicker-icon-stroke` | Цвет обводки иконки | `var(--ui-kit-color-text-primary)` |
40
+
41
+ ---
42
+
43
+ ## Примеры использования
44
+
45
+ ### Глобальное переопределение для всех DatePicker
46
+
47
+ ```css
48
+ :root {
49
+ --ui-kit-datepicker-range-start-bg: #ff0000;
50
+ --ui-kit-datepicker-range-end-bg: #ff0000;
51
+ }
52
+ ```
53
+
54
+ ### Переопределение для конкретного DatePicker
55
+
56
+ ```vue
57
+ <template>
58
+ <DatePicker v-model="date" class="my-custom-datepicker" />
59
+ </template>
60
+
61
+ <style>
62
+ .my-custom-datepicker {
63
+ --ui-kit-datepicker-wrapper-border-active: #0000ff;
64
+ }
65
+ </style>
66
+ ```
67
+
68
+ ### Кастомизация цветов диапазона
69
+
70
+ ```css
71
+ :root {
72
+ --ui-kit-datepicker-range-start-bg: #00ff00;
73
+ --ui-kit-datepicker-range-between-bg: #90ee90;
74
+ --ui-kit-datepicker-range-end-bg: #00ff00;
75
+ }
76
+ ```
77
+
78
+ ### Кастомизация фильтров
79
+
80
+ ```css
81
+ :root {
82
+ --ui-kit-datepicker-filter-bg: #f0f0f0;
83
+ --ui-kit-datepicker-filter-text: #333333;
84
+ }
85
+ ```
86
+
87
+ ---
88
+
89
+ ## Полный список переменных
90
+
91
+ Готовый блок CSS для копирования:
92
+
93
+ ```css
94
+ :root {
95
+ /* Calendar Header */
96
+ --ui-kit-datepicker-header-text: var(--ui-kit-color-text-tertiary);
97
+
98
+ /* Month/Year Select */
99
+ --ui-kit-datepicker-month-year-text: var(--ui-kit-color-text-primary);
100
+
101
+ /* Range Colors */
102
+ --ui-kit-datepicker-range-start-bg: var(--ui-kit-color-primary);
103
+ --ui-kit-datepicker-range-end-bg: var(--ui-kit-color-primary);
104
+ --ui-kit-datepicker-range-between-bg: var(--ui-kit-color-primary-light);
105
+ --ui-kit-datepicker-range-between-border: var(--ui-kit-color-primary-light);
106
+ --ui-kit-datepicker-range-between-text: var(--ui-kit-color-text-white);
107
+
108
+ /* Action Button */
109
+ --ui-kit-datepicker-action-bg: var(--ui-kit-system-success-700);
110
+
111
+ /* Input */
112
+ --ui-kit-datepicker-input-border: var(--ui-kit-color-border);
113
+ --ui-kit-datepicker-input-border-hover: var(--ui-kit-color-primary-hover);
114
+ --ui-kit-datepicker-input-border-focus: var(--ui-kit-color-primary);
115
+
116
+ /* Filter Button */
117
+ --ui-kit-datepicker-filter-bg: var(--ui-kit-color-bg-light-1);
118
+ --ui-kit-datepicker-filter-border: var(--ui-kit-color-border);
119
+ --ui-kit-datepicker-filter-text: var(--ui-kit-color-text-primary);
120
+
121
+ /* Switch View Button */
122
+ --ui-kit-datepicker-switch-bg: var(--ui-kit-color-bg-light-5);
123
+
124
+ /* Date Display */
125
+ --ui-kit-datepicker-display-border: var(--ui-kit-color-border);
126
+
127
+ /* Date Input Wrapper */
128
+ --ui-kit-datepicker-wrapper-border: var(--ui-kit-color-border);
129
+ --ui-kit-datepicker-wrapper-border-active: var(--ui-kit-color-primary);
130
+
131
+ /* Date Input Text */
132
+ --ui-kit-datepicker-text-placeholder: var(--ui-kit-color-text-tertiary);
133
+ --ui-kit-datepicker-text-filled: var(--ui-kit-color-text-primary);
134
+
135
+ /* Icon */
136
+ --ui-kit-datepicker-icon-stroke: var(--ui-kit-color-text-primary);
137
+ }
138
+ ```
139
+
140
+ ---
141
+
142
+ ## 📝 Примечания
143
+
144
+ - Все переменные имеют значения по умолчанию, поэтому кастомизация опциональна
145
+ - Переменные можно переопределять на разных уровнях: глобально (`:root`), для конкретного компонента (через класс), или для конкретного состояния
146
+ - Базовые токены (`--ui-kit-color-*`) используются по умолчанию и должны быть определены в `variables.css`
147
+ - Компонентные переменные определены в `src/lib/assets/css/components/datepicker.css`
148
+ - DatePicker использует библиотеку `@vuepic/vue-datepicker`, некоторые стили применяются через `:deep()` селекторы
149
+
150
+ ---
151
+
152
+ [← Назад к списку компонентов](../VARIABLES.md)
153
+
154
+