tokenizer-ui-kit 0.2.37 → 0.2.38

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 (6) hide show
  1. package/VARIABLES-BUTTON.md +280 -280
  2. package/dist/tokenizer-ui-kit.css +2 -2
  3. package/dist/tokenizer-ui-kit.es.js +4764 -4644
  4. package/dist/tokenizer-ui-kit.umd.js +1 -1
  5. package/dist/types/components/datePicker/DatePicker.vue.d.ts.map +1 -1
  6. package/package.json +1 -1
package/VARIABLES-BUTTON.md CHANGED
@@ -1,280 +1,280 @@
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
- - [primary-outline](#variant-primary-outline)
13
- - [secondary](#variant-secondary)
14
- - [default](#variant-default)
15
- - [error](#variant-error)
16
- - [error-outline](#variant-error-outline)
17
- - [Примеры использования](#примеры-использования)
18
- - [Полный список переменных](#полный-список-переменных)
19
-
20
- ---
21
-
22
- ## Общие переменные
23
-
24
- Применяются ко всем вариантам кнопок по умолчанию.
25
-
26
- | Переменная | Описание | Значение по умолчанию |
27
- | --------------------------------- | --------------------------------- | ----------------------------------- |
28
- | `--ui-kit-button-bg` | Фон кнопки | `var(--ui-kit-color-primary)` |
29
- | `--ui-kit-button-text` | Цвет текста | `var(--ui-kit-color-text-white)` |
30
- | `--ui-kit-button-border` | Цвет границы | `transparent` |
31
- | `--ui-kit-button-hover-bg` | Фон при наведении | `var(--ui-kit-color-primary-hover)` |
32
- | `--ui-kit-button-hover-text` | Цвет текста при наведении | `var(--ui-kit-color-text-white)` |
33
- | `--ui-kit-button-hover-border` | Цвет границы при наведении | `transparent` |
34
- | `--ui-kit-button-disabled-bg` | Фон в disabled состоянии | `var(--ui-kit-color-disabled-bg)` |
35
- | `--ui-kit-button-disabled-text` | Цвет текста в disabled состоянии | `var(--ui-kit-color-text-white)` |
36
- | `--ui-kit-button-disabled-border` | Цвет границы в disabled состоянии | `transparent` |
37
-
38
- ---
39
-
40
- ## Варианты (Variants)
41
-
42
- ### Variant: success
43
-
44
- Зеленая кнопка с заполненным фоном.
45
-
46
- | Переменная | Описание | Значение по умолчанию |
47
- | -------------------------------- | ------------------ | ----------------------------------- |
48
- | `--ui-kit-button-brand-bg` | Фон кнопки success | `var(--ui-kit-color-primary)` |
49
- | `--ui-kit-button-brand-text` | Цвет текста | `var(--ui-kit-color-text-white)` |
50
- | `--ui-kit-button-brand-border` | Цвет границы | `transparent` |
51
- | `--ui-kit-button-brand-hover-bg` | Фон при наведении | `var(--ui-kit-color-primary-hover)` |
52
-
53
- ### Variant: success-outline
54
-
55
- Зеленая кнопка с обводкой.
56
-
57
- | Переменная | Описание | Значение по умолчанию |
58
- | -------------------------------------------- | -------------------------- | -------------------------------- |
59
- | `--ui-kit-button-brand-outline-bg` | Фон кнопки | `transparent` |
60
- | `--ui-kit-button-brand-outline-text` | Цвет текста | `var(--ui-kit-color-primary)` |
61
- | `--ui-kit-button-brand-outline-border` | Цвет границы | `var(--ui-kit-color-primary)` |
62
- | `--ui-kit-button-brand-outline-hover-bg` | Фон при наведении | `var(--ui-kit-color-primary)` |
63
- | `--ui-kit-button-brand-outline-hover-text` | Цвет текста при наведении | `var(--ui-kit-color-text-white)` |
64
- | `--ui-kit-button-brand-outline-hover-border` | Цвет границы при наведении | `var(--ui-kit-color-primary)` |
65
-
66
- ### Variant: primary
67
-
68
- Темно-серая/черная кнопка с заполненным фоном.
69
-
70
- | Переменная | Описание | Значение по умолчанию |
71
- | -------------------------------------- | -------------------------- | ------------------------------------ |
72
- | `--ui-kit-button-primary-bg` | Фон кнопки | `var(--ui-kit-color-text-primary)` |
73
- | `--ui-kit-button-primary-text` | Цвет текста | `var(--ui-kit-color-bg-white)` |
74
- | `--ui-kit-button-primary-border` | Цвет границы | `transparent` |
75
- | `--ui-kit-button-primary-hover-border` | Цвет границы при наведении | `var(--ui-kit-color-text-secondary)` |
76
-
77
- ### Variant: primary-outline
78
-
79
- Темно-серая/черная кнопка с обводкой.
80
-
81
- | Переменная | Описание | Значение по умолчанию |
82
- | -------------------------------------------- | -------------------------- | ------------------------------------ |
83
- | `--ui-kit-button-primary-outline-bg` | Фон кнопки | `transparent` |
84
- | `--ui-kit-button-primary-outline-text` | Цвет текста | `var(--ui-kit-color-text-primary)` |
85
- | `--ui-kit-button-primary-outline-border` | Цвет границы | `var(--ui-kit-color-text-primary)` |
86
- | `--ui-kit-button-primary-outline-hover-bg` | Фон при наведении | `transparent` |
87
- | `--ui-kit-button-primary-outline-hover-text` | Цвет текста при наведении | `var(--ui-kit-color-text-secondary)` |
88
- | `--ui-kit-button-primary-outline-hover-border` | Цвет границы при наведении | `var(--ui-kit-color-text-secondary)` |
89
-
90
- ### Variant: secondary
91
-
92
- Средне-серая кнопка с заполненным фоном.
93
-
94
- | Переменная | Описание | Значение по умолчанию |
95
- | ---------------------------------------- | -------------------------- | ------------------------------------ |
96
- | `--ui-kit-button-secondary-bg` | Фон кнопки | `var(--ui-kit-color-text-secondary)` |
97
- | `--ui-kit-button-secondary-text` | Цвет текста | `var(--ui-kit-color-bg-white)` |
98
- | `--ui-kit-button-secondary-border` | Цвет границы | `transparent` |
99
- | `--ui-kit-button-secondary-hover-bg` | Фон при наведении | `#36373f` |
100
- | `--ui-kit-button-secondary-hover-border` | Цвет границы при наведении | `var(--ui-kit-color-text-secondary)` |
101
-
102
- ### Variant: default
103
-
104
- Белая кнопка с границей.
105
-
106
- | Переменная | Описание | Значение по умолчанию |
107
- | -------------------------------------- | -------------------------- | ---------------------------------- |
108
- | `--ui-kit-button-default-bg` | Фон кнопки | `var(--ui-kit-color-bg-white)` |
109
- | `--ui-kit-button-default-text` | Цвет текста | `var(--ui-kit-color-text-primary)` |
110
- | `--ui-kit-button-default-border` | Цвет границы | `transparent` |
111
- | `--ui-kit-button-default-hover-border` | Цвет границы при наведении | `var(--ui-kit-color-border)` |
112
-
113
- ### Variant: error
114
-
115
- Красная кнопка с заполненным фоном.
116
-
117
- | Переменная | Описание | Значение по умолчанию |
118
- | -------------------------------- | ----------------- | -------------------------------- |
119
- | `--ui-kit-button-error-bg` | Фон кнопки | `var(--ui-kit-color-error)` |
120
- | `--ui-kit-button-error-text` | Цвет текста | `var(--ui-kit-color-text-white)` |
121
- | `--ui-kit-button-error-border` | Цвет границы | `transparent` |
122
- | `--ui-kit-button-error-hover-bg` | Фон при наведении | `#c63c28` |
123
-
124
- ### Variant: error-outline
125
-
126
- Красная кнопка с обводкой.
127
-
128
- | Переменная | Описание | Значение по умолчанию |
129
- | -------------------------------------------- | -------------------------- | -------------------------------- |
130
- | `--ui-kit-button-error-outline-bg` | Фон кнопки | `transparent` |
131
- | `--ui-kit-button-error-outline-text` | Цвет текста | `var(--ui-kit-color-error)` |
132
- | `--ui-kit-button-error-outline-border` | Цвет границы | `var(--ui-kit-color-error)` |
133
- | `--ui-kit-button-error-outline-hover-bg` | Фон при наведении | `var(--ui-kit-color-error)` |
134
- | `--ui-kit-button-error-outline-hover-text` | Цвет текста при наведении | `var(--ui-kit-color-text-white)` |
135
- | `--ui-kit-button-error-outline-hover-border` | Цвет границы при наведении | `var(--ui-kit-color-error)` |
136
-
137
- ---
138
-
139
- ## Примеры использования
140
-
141
- ### Глобальное переопределение для всех кнопок
142
-
143
- ```css
144
- :root {
145
- --ui-kit-button-bg: #ff0000;
146
- --ui-kit-button-hover-bg: #cc0000;
147
- }
148
- ```
149
-
150
- ### Переопределение для конкретного варианта
151
-
152
- ```css
153
- :root {
154
- --ui-kit-button-brand-bg: #00ff00;
155
- --ui-kit-button-brand-hover-bg: #00cc00;
156
- }
157
- ```
158
-
159
- ### Переопределение для конкретной кнопки
160
-
161
- ```vue
162
- <template>
163
- <CButton class="my-custom-button">Click me</CButton>
164
- </template>
165
-
166
- <style>
167
- .my-custom-button {
168
- --ui-kit-button-bg: #0000ff;
169
- --ui-kit-button-hover-bg: #0000cc;
170
- }
171
- </style>
172
- ```
173
-
174
- ### Комбинированное использование
175
-
176
- ```css
177
- /* Глобально для всех кнопок */
178
- :root {
179
- --ui-kit-button-bg: #ff0000;
180
- }
181
-
182
- /* Для конкретного варианта */
183
- :root {
184
- --ui-kit-button-brand-bg: #00ff00;
185
- }
186
-
187
- /* Для конкретной кнопки */
188
- .my-special-button {
189
- --ui-kit-button-brand-bg: #0000ff;
190
- }
191
- ```
192
-
193
- ---
194
-
195
- ## Полный список переменных
196
-
197
- Готовый блок CSS для копирования:
198
-
199
- ```css
200
- :root {
201
- /* Общие переменные кнопки */
202
- --ui-kit-button-bg: var(--ui-kit-color-primary);
203
- --ui-kit-button-text: var(--ui-kit-color-text-white);
204
- --ui-kit-button-border: transparent;
205
- --ui-kit-button-hover-bg: var(--ui-kit-color-primary-hover);
206
- --ui-kit-button-hover-text: var(--ui-kit-color-text-white);
207
- --ui-kit-button-hover-border: transparent;
208
- --ui-kit-button-disabled-bg: var(--ui-kit-color-disabled-bg);
209
- --ui-kit-button-disabled-text: var(--ui-kit-color-text-white);
210
- --ui-kit-button-disabled-border: transparent;
211
-
212
- /* Variant: success */
213
- --ui-kit-button-brand-bg: var(--ui-kit-color-primary);
214
- --ui-kit-button-brand-text: var(--ui-kit-color-text-white);
215
- --ui-kit-button-brand-border: transparent;
216
- --ui-kit-button-brand-hover-bg: var(--ui-kit-color-primary-hover);
217
-
218
- /* Variant: success-outline */
219
- --ui-kit-button-brand-outline-bg: transparent;
220
- --ui-kit-button-brand-outline-text: var(--ui-kit-color-primary);
221
- --ui-kit-button-brand-outline-border: var(--ui-kit-color-primary);
222
- --ui-kit-button-brand-outline-hover-bg: var(--ui-kit-color-primary);
223
- --ui-kit-button-brand-outline-hover-text: var(--ui-kit-color-text-white);
224
- --ui-kit-button-brand-outline-hover-border: var(--ui-kit-color-primary);
225
-
226
- /* Variant: primary */
227
- --ui-kit-button-primary-bg: var(--ui-kit-color-text-primary);
228
- --ui-kit-button-primary-text: var(--ui-kit-color-bg-white);
229
- --ui-kit-button-primary-border: transparent;
230
- --ui-kit-button-primary-hover-border: var(--ui-kit-color-text-secondary);
231
-
232
- /* Variant: primary-outline */
233
- --ui-kit-button-primary-outline-bg: transparent;
234
- --ui-kit-button-primary-outline-text: var(--ui-kit-color-text-primary);
235
- --ui-kit-button-primary-outline-border: var(--ui-kit-color-text-primary);
236
- --ui-kit-button-primary-outline-hover-bg: transparent;
237
- --ui-kit-button-primary-outline-hover-text: var(--ui-kit-color-text-secondary);
238
- --ui-kit-button-primary-outline-hover-border: var(--ui-kit-color-text-secondary);
239
-
240
- /* Variant: secondary */
241
- --ui-kit-button-secondary-bg: var(--ui-kit-color-text-secondary);
242
- --ui-kit-button-secondary-text: var(--ui-kit-color-bg-white);
243
- --ui-kit-button-secondary-border: transparent;
244
- --ui-kit-button-secondary-hover-bg: #36373f;
245
- --ui-kit-button-secondary-hover-border: var(--ui-kit-color-text-secondary);
246
-
247
- /* Variant: default */
248
- --ui-kit-button-default-bg: var(--ui-kit-color-bg-white);
249
- --ui-kit-button-default-text: var(--ui-kit-color-text-primary);
250
- --ui-kit-button-default-border: transparent;
251
- --ui-kit-button-default-hover-border: var(--ui-kit-color-border);
252
-
253
- /* Variant: error */
254
- --ui-kit-button-error-bg: var(--ui-kit-color-error);
255
- --ui-kit-button-error-text: var(--ui-kit-color-text-white);
256
- --ui-kit-button-error-border: transparent;
257
- --ui-kit-button-error-hover-bg: #c63c28;
258
-
259
- /* Variant: error-outline */
260
- --ui-kit-button-error-outline-bg: transparent;
261
- --ui-kit-button-error-outline-text: var(--ui-kit-color-error);
262
- --ui-kit-button-error-outline-border: var(--ui-kit-color-error);
263
- --ui-kit-button-error-outline-hover-bg: var(--ui-kit-color-error);
264
- --ui-kit-button-error-outline-hover-text: var(--ui-kit-color-text-white);
265
- --ui-kit-button-error-outline-hover-border: var(--ui-kit-color-error);
266
- }
267
- ```
268
-
269
- ---
270
-
271
- ## 📝 Примечания
272
-
273
- - Все переменные имеют значения по умолчанию, поэтому кастомизация опциональна
274
- - Переменные можно переопределять на разных уровнях: глобально (`:root`), для конкретного варианта, или для конкретного элемента через класс
275
- - Базовые токены (`--ui-kit-color-*`) используются по умолчанию и должны быть определены в `variables.css`
276
- - Компонентные переменные определены в `src/lib/assets/css/components/button.css`
277
-
278
- ---
279
-
280
- [← Назад к списку компонентов](../VARIABLES.md)
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
+ - [primary-outline](#variant-primary-outline)
13
+ - [secondary](#variant-secondary)
14
+ - [default](#variant-default)
15
+ - [error](#variant-error)
16
+ - [error-outline](#variant-error-outline)
17
+ - [Примеры использования](#примеры-использования)
18
+ - [Полный список переменных](#полный-список-переменных)
19
+
20
+ ---
21
+
22
+ ## Общие переменные
23
+
24
+ Применяются ко всем вариантам кнопок по умолчанию.
25
+
26
+ | Переменная | Описание | Значение по умолчанию |
27
+ | --------------------------------- | --------------------------------- | ----------------------------------- |
28
+ | `--ui-kit-button-bg` | Фон кнопки | `var(--ui-kit-color-primary)` |
29
+ | `--ui-kit-button-text` | Цвет текста | `var(--ui-kit-color-text-white)` |
30
+ | `--ui-kit-button-border` | Цвет границы | `transparent` |
31
+ | `--ui-kit-button-hover-bg` | Фон при наведении | `var(--ui-kit-color-primary-hover)` |
32
+ | `--ui-kit-button-hover-text` | Цвет текста при наведении | `var(--ui-kit-color-text-white)` |
33
+ | `--ui-kit-button-hover-border` | Цвет границы при наведении | `transparent` |
34
+ | `--ui-kit-button-disabled-bg` | Фон в disabled состоянии | `var(--ui-kit-color-disabled-bg)` |
35
+ | `--ui-kit-button-disabled-text` | Цвет текста в disabled состоянии | `var(--ui-kit-color-text-white)` |
36
+ | `--ui-kit-button-disabled-border` | Цвет границы в disabled состоянии | `transparent` |
37
+
38
+ ---
39
+
40
+ ## Варианты (Variants)
41
+
42
+ ### Variant: success
43
+
44
+ Зеленая кнопка с заполненным фоном.
45
+
46
+ | Переменная | Описание | Значение по умолчанию |
47
+ | -------------------------------- | ------------------ | ----------------------------------- |
48
+ | `--ui-kit-button-brand-bg` | Фон кнопки success | `var(--ui-kit-color-primary)` |
49
+ | `--ui-kit-button-brand-text` | Цвет текста | `var(--ui-kit-color-text-white)` |
50
+ | `--ui-kit-button-brand-border` | Цвет границы | `transparent` |
51
+ | `--ui-kit-button-brand-hover-bg` | Фон при наведении | `var(--ui-kit-color-primary-hover)` |
52
+
53
+ ### Variant: success-outline
54
+
55
+ Зеленая кнопка с обводкой.
56
+
57
+ | Переменная | Описание | Значение по умолчанию |
58
+ | -------------------------------------------- | -------------------------- | -------------------------------- |
59
+ | `--ui-kit-button-brand-outline-bg` | Фон кнопки | `transparent` |
60
+ | `--ui-kit-button-brand-outline-text` | Цвет текста | `var(--ui-kit-color-primary)` |
61
+ | `--ui-kit-button-brand-outline-border` | Цвет границы | `var(--ui-kit-color-primary)` |
62
+ | `--ui-kit-button-brand-outline-hover-bg` | Фон при наведении | `var(--ui-kit-color-primary)` |
63
+ | `--ui-kit-button-brand-outline-hover-text` | Цвет текста при наведении | `var(--ui-kit-color-text-white)` |
64
+ | `--ui-kit-button-brand-outline-hover-border` | Цвет границы при наведении | `var(--ui-kit-color-primary)` |
65
+
66
+ ### Variant: primary
67
+
68
+ Темно-серая/черная кнопка с заполненным фоном.
69
+
70
+ | Переменная | Описание | Значение по умолчанию |
71
+ | -------------------------------------- | -------------------------- | ------------------------------------ |
72
+ | `--ui-kit-button-primary-bg` | Фон кнопки | `var(--ui-kit-color-text-primary)` |
73
+ | `--ui-kit-button-primary-text` | Цвет текста | `var(--ui-kit-color-bg-white)` |
74
+ | `--ui-kit-button-primary-border` | Цвет границы | `transparent` |
75
+ | `--ui-kit-button-primary-hover-border` | Цвет границы при наведении | `var(--ui-kit-color-text-secondary)` |
76
+
77
+ ### Variant: primary-outline
78
+
79
+ Темно-серая/черная кнопка с обводкой.
80
+
81
+ | Переменная | Описание | Значение по умолчанию |
82
+ | -------------------------------------------- | -------------------------- | ------------------------------------ |
83
+ | `--ui-kit-button-primary-outline-bg` | Фон кнопки | `transparent` |
84
+ | `--ui-kit-button-primary-outline-text` | Цвет текста | `var(--ui-kit-color-text-primary)` |
85
+ | `--ui-kit-button-primary-outline-border` | Цвет границы | `var(--ui-kit-color-text-primary)` |
86
+ | `--ui-kit-button-primary-outline-hover-bg` | Фон при наведении | `transparent` |
87
+ | `--ui-kit-button-primary-outline-hover-text` | Цвет текста при наведении | `var(--ui-kit-color-text-secondary)` |
88
+ | `--ui-kit-button-primary-outline-hover-border` | Цвет границы при наведении | `var(--ui-kit-color-text-secondary)` |
89
+
90
+ ### Variant: secondary
91
+
92
+ Средне-серая кнопка с заполненным фоном.
93
+
94
+ | Переменная | Описание | Значение по умолчанию |
95
+ | ---------------------------------------- | -------------------------- | ------------------------------------ |
96
+ | `--ui-kit-button-secondary-bg` | Фон кнопки | `var(--ui-kit-color-text-secondary)` |
97
+ | `--ui-kit-button-secondary-text` | Цвет текста | `var(--ui-kit-color-bg-white)` |
98
+ | `--ui-kit-button-secondary-border` | Цвет границы | `transparent` |
99
+ | `--ui-kit-button-secondary-hover-bg` | Фон при наведении | `#36373f` |
100
+ | `--ui-kit-button-secondary-hover-border` | Цвет границы при наведении | `var(--ui-kit-color-text-secondary)` |
101
+
102
+ ### Variant: default
103
+
104
+ Белая кнопка с границей.
105
+
106
+ | Переменная | Описание | Значение по умолчанию |
107
+ | -------------------------------------- | -------------------------- | ---------------------------------- |
108
+ | `--ui-kit-button-default-bg` | Фон кнопки | `var(--ui-kit-color-bg-white)` |
109
+ | `--ui-kit-button-default-text` | Цвет текста | `var(--ui-kit-color-text-primary)` |
110
+ | `--ui-kit-button-default-border` | Цвет границы | `transparent` |
111
+ | `--ui-kit-button-default-hover-border` | Цвет границы при наведении | `var(--ui-kit-color-border)` |
112
+
113
+ ### Variant: error
114
+
115
+ Красная кнопка с заполненным фоном.
116
+
117
+ | Переменная | Описание | Значение по умолчанию |
118
+ | -------------------------------- | ----------------- | -------------------------------- |
119
+ | `--ui-kit-button-error-bg` | Фон кнопки | `var(--ui-kit-color-error)` |
120
+ | `--ui-kit-button-error-text` | Цвет текста | `var(--ui-kit-color-text-white)` |
121
+ | `--ui-kit-button-error-border` | Цвет границы | `transparent` |
122
+ | `--ui-kit-button-error-hover-bg` | Фон при наведении | `#c63c28` |
123
+
124
+ ### Variant: error-outline
125
+
126
+ Красная кнопка с обводкой.
127
+
128
+ | Переменная | Описание | Значение по умолчанию |
129
+ | -------------------------------------------- | -------------------------- | -------------------------------- |
130
+ | `--ui-kit-button-error-outline-bg` | Фон кнопки | `transparent` |
131
+ | `--ui-kit-button-error-outline-text` | Цвет текста | `var(--ui-kit-color-error)` |
132
+ | `--ui-kit-button-error-outline-border` | Цвет границы | `var(--ui-kit-color-error)` |
133
+ | `--ui-kit-button-error-outline-hover-bg` | Фон при наведении | `var(--ui-kit-color-error)` |
134
+ | `--ui-kit-button-error-outline-hover-text` | Цвет текста при наведении | `var(--ui-kit-color-text-white)` |
135
+ | `--ui-kit-button-error-outline-hover-border` | Цвет границы при наведении | `var(--ui-kit-color-error)` |
136
+
137
+ ---
138
+
139
+ ## Примеры использования
140
+
141
+ ### Глобальное переопределение для всех кнопок
142
+
143
+ ```css
144
+ :root {
145
+ --ui-kit-button-bg: #ff0000;
146
+ --ui-kit-button-hover-bg: #cc0000;
147
+ }
148
+ ```
149
+
150
+ ### Переопределение для конкретного варианта
151
+
152
+ ```css
153
+ :root {
154
+ --ui-kit-button-brand-bg: #00ff00;
155
+ --ui-kit-button-brand-hover-bg: #00cc00;
156
+ }
157
+ ```
158
+
159
+ ### Переопределение для конкретной кнопки
160
+
161
+ ```vue
162
+ <template>
163
+ <CButton class="my-custom-button">Click me</CButton>
164
+ </template>
165
+
166
+ <style>
167
+ .my-custom-button {
168
+ --ui-kit-button-bg: #0000ff;
169
+ --ui-kit-button-hover-bg: #0000cc;
170
+ }
171
+ </style>
172
+ ```
173
+
174
+ ### Комбинированное использование
175
+
176
+ ```css
177
+ /* Глобально для всех кнопок */
178
+ :root {
179
+ --ui-kit-button-bg: #ff0000;
180
+ }
181
+
182
+ /* Для конкретного варианта */
183
+ :root {
184
+ --ui-kit-button-brand-bg: #00ff00;
185
+ }
186
+
187
+ /* Для конкретной кнопки */
188
+ .my-special-button {
189
+ --ui-kit-button-brand-bg: #0000ff;
190
+ }
191
+ ```
192
+
193
+ ---
194
+
195
+ ## Полный список переменных
196
+
197
+ Готовый блок CSS для копирования:
198
+
199
+ ```css
200
+ :root {
201
+ /* Общие переменные кнопки */
202
+ --ui-kit-button-bg: var(--ui-kit-color-primary);
203
+ --ui-kit-button-text: var(--ui-kit-color-text-white);
204
+ --ui-kit-button-border: transparent;
205
+ --ui-kit-button-hover-bg: var(--ui-kit-color-primary-hover);
206
+ --ui-kit-button-hover-text: var(--ui-kit-color-text-white);
207
+ --ui-kit-button-hover-border: transparent;
208
+ --ui-kit-button-disabled-bg: var(--ui-kit-color-disabled-bg);
209
+ --ui-kit-button-disabled-text: var(--ui-kit-color-text-white);
210
+ --ui-kit-button-disabled-border: transparent;
211
+
212
+ /* Variant: success */
213
+ --ui-kit-button-brand-bg: var(--ui-kit-color-primary);
214
+ --ui-kit-button-brand-text: var(--ui-kit-color-text-white);
215
+ --ui-kit-button-brand-border: transparent;
216
+ --ui-kit-button-brand-hover-bg: var(--ui-kit-color-primary-hover);
217
+
218
+ /* Variant: success-outline */
219
+ --ui-kit-button-brand-outline-bg: transparent;
220
+ --ui-kit-button-brand-outline-text: var(--ui-kit-color-primary);
221
+ --ui-kit-button-brand-outline-border: var(--ui-kit-color-primary);
222
+ --ui-kit-button-brand-outline-hover-bg: var(--ui-kit-color-primary);
223
+ --ui-kit-button-brand-outline-hover-text: var(--ui-kit-color-text-white);
224
+ --ui-kit-button-brand-outline-hover-border: var(--ui-kit-color-primary);
225
+
226
+ /* Variant: primary */
227
+ --ui-kit-button-primary-bg: var(--ui-kit-color-text-primary);
228
+ --ui-kit-button-primary-text: var(--ui-kit-color-bg-white);
229
+ --ui-kit-button-primary-border: transparent;
230
+ --ui-kit-button-primary-hover-border: var(--ui-kit-color-text-secondary);
231
+
232
+ /* Variant: primary-outline */
233
+ --ui-kit-button-primary-outline-bg: transparent;
234
+ --ui-kit-button-primary-outline-text: var(--ui-kit-color-text-primary);
235
+ --ui-kit-button-primary-outline-border: var(--ui-kit-color-text-primary);
236
+ --ui-kit-button-primary-outline-hover-bg: transparent;
237
+ --ui-kit-button-primary-outline-hover-text: var(--ui-kit-color-text-secondary);
238
+ --ui-kit-button-primary-outline-hover-border: var(--ui-kit-color-text-secondary);
239
+
240
+ /* Variant: secondary */
241
+ --ui-kit-button-secondary-bg: var(--ui-kit-color-text-secondary);
242
+ --ui-kit-button-secondary-text: var(--ui-kit-color-bg-white);
243
+ --ui-kit-button-secondary-border: transparent;
244
+ --ui-kit-button-secondary-hover-bg: #36373f;
245
+ --ui-kit-button-secondary-hover-border: var(--ui-kit-color-text-secondary);
246
+
247
+ /* Variant: default */
248
+ --ui-kit-button-default-bg: var(--ui-kit-color-bg-white);
249
+ --ui-kit-button-default-text: var(--ui-kit-color-text-primary);
250
+ --ui-kit-button-default-border: transparent;
251
+ --ui-kit-button-default-hover-border: var(--ui-kit-color-border);
252
+
253
+ /* Variant: error */
254
+ --ui-kit-button-error-bg: var(--ui-kit-color-error);
255
+ --ui-kit-button-error-text: var(--ui-kit-color-text-white);
256
+ --ui-kit-button-error-border: transparent;
257
+ --ui-kit-button-error-hover-bg: #c63c28;
258
+
259
+ /* Variant: error-outline */
260
+ --ui-kit-button-error-outline-bg: transparent;
261
+ --ui-kit-button-error-outline-text: var(--ui-kit-color-error);
262
+ --ui-kit-button-error-outline-border: var(--ui-kit-color-error);
263
+ --ui-kit-button-error-outline-hover-bg: var(--ui-kit-color-error);
264
+ --ui-kit-button-error-outline-hover-text: var(--ui-kit-color-text-white);
265
+ --ui-kit-button-error-outline-hover-border: var(--ui-kit-color-error);
266
+ }
267
+ ```
268
+
269
+ ---
270
+
271
+ ## 📝 Примечания
272
+
273
+ - Все переменные имеют значения по умолчанию, поэтому кастомизация опциональна
274
+ - Переменные можно переопределять на разных уровнях: глобально (`:root`), для конкретного варианта, или для конкретного элемента через класс
275
+ - Базовые токены (`--ui-kit-color-*`) используются по умолчанию и должны быть определены в `variables.css`
276
+ - Компонентные переменные определены в `src/lib/assets/css/components/button.css`
277
+
278
+ ---
279
+
280
+ [← Назад к списку компонентов](../VARIABLES.md)