tokenizer-ui-kit 0.3.8 → 0.3.9

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 (9) hide show
  1. package/VARIABLES-SELECT.md +157 -157
  2. package/dist/tokenizer-ui-kit.css +2 -2
  3. package/dist/tokenizer-ui-kit.es.js +5 -5
  4. package/dist/tokenizer-ui-kit.umd.js +1 -1
  5. package/dist/types/components/ui/CInput/CInput.vue.d.ts.map +1 -1
  6. package/dist/types/components/ui/CPasswordInput/CPasswordInput.vue.d.ts.map +1 -1
  7. package/dist/types/components/ui/CSearchInput/CSearchInput.vue.d.ts.map +1 -1
  8. package/dist/types/components/ui/CTextarea/CTextarea.vue.d.ts.map +1 -1
  9. package/package.json +1 -1
package/VARIABLES-SELECT.md CHANGED
@@ -1,157 +1,157 @@
1
- # Select Component Variables
2
-
3
- Документация по CSS переменным для компонента `Select`.
4
-
5
- ## 📋 Содержание
6
-
7
- - [Общие переменные](#общие-переменные)
8
- - [Примеры использования](#примеры-использования)
9
- - [Полный список переменных](#полный-список-переменных)
10
-
11
- ---
12
-
13
- ## Общие переменные
14
-
15
- Все переменные применяются к компоненту `Select`.
16
-
17
- | Переменная | Описание | Значение по умолчанию |
18
- |------------|----------|----------------------|
19
- | `--ui-kit-select-border` | Цвет границы кнопки | `var(--ui-kit-color-border)` |
20
- | `--ui-kit-select-border-hover` | Цвет границы при наведении | `var(--ui-kit-color-primary)` |
21
- | `--ui-kit-select-border-focus` | Цвет границы при фокусе | `var(--ui-kit-color-primary)` |
22
- | `--ui-kit-select-border-open` | Цвет границы когда открыт | `var(--ui-kit-color-primary)` |
23
- | `--ui-kit-select-bg` | Фон кнопки | `var(--ui-kit-color-bg-white)` |
24
- | `--ui-kit-select-bg-transparent` | Фон кнопки в прозрачном режиме | `transparent` |
25
- | `--ui-kit-select-shadow-focus` | Тень при фокусе | `0 0 0 1px var(--ui-kit-color-primary) inset` |
26
- | `--ui-kit-select-placeholder` | Цвет placeholder | `var(--ui-kit-color-text-tertiary)` |
27
- | `--ui-kit-select-tag-bg` | Фон тега | `var(--ui-kit-color-bg-light-1)` |
28
- | `--ui-kit-select-tag-text` | Цвет текста тега | `var(--ui-kit-color-text-secondary)` |
29
- | `--ui-kit-select-tag-label` | Цвет текста метки тега | `var(--ui-kit-color-text-primary)` |
30
- | `--ui-kit-select-tag-bg-transparent` | Фон тега в прозрачном режиме | `var(--ui-kit-color-bg-white)` |
31
- | `--ui-kit-select-tag-count-bg` | Фон счетчика тегов | `var(--ui-kit-color-bg-light-1)` |
32
- | `--ui-kit-select-tag-count-text` | Цвет текста счетчика тегов | `var(--ui-kit-color-text-secondary)` |
33
- | `--ui-kit-select-tag-count-bg-transparent` | Фон счетчика тегов в прозрачном режиме | `transparent` |
34
- | `--ui-kit-select-input-text` | Цвет текста в поле поиска | `var(--ui-kit-color-text-primary)` |
35
- | `--ui-kit-select-input-placeholder` | Цвет placeholder в поле поиска | `var(--ui-kit-color-text-tertiary)` |
36
- | `--ui-kit-select-dropdown-border` | Цвет границы выпадающего списка | `var(--ui-kit-color-border)` |
37
- | `--ui-kit-select-dropdown-bg` | Фон выпадающего списка | `var(--ui-kit-color-bg-white)` |
38
- | `--ui-kit-select-list-text` | Цвет текста списка | `var(--ui-kit-color-text-secondary)` |
39
- | `--ui-kit-select-option-bg` | Фон опции | `var(--ui-kit-color-bg-white)` |
40
- | `--ui-kit-select-option-bg-hover` | Фон опции при наведении | `var(--ui-kit-color-bg-light-1)` |
41
- | `--ui-kit-select-option-text-selected` | Цвет текста выбранной опции | `var(--ui-kit-color-primary)` |
42
- | `--ui-kit-select-option-text-hover` | Цвет текста опции при наведении | `var(--ui-kit-color-primary)` |
43
- | `--ui-kit-select-check-color` | Цвет иконки галочки | `var(--ui-kit-color-primary)` |
44
-
45
- ---
46
-
47
- ## Примеры использования
48
-
49
- ### Глобальное переопределение для всех селектов
50
-
51
- ```css
52
- :root {
53
- --ui-kit-select-border: #ff0000;
54
- --ui-kit-select-border-hover: #00ff00;
55
- }
56
- ```
57
-
58
- ### Переопределение для конкретного селекта
59
-
60
- ```vue
61
- <template>
62
- <Select v-model="value" :options="options" class="my-custom-select" />
63
- </template>
64
-
65
- <style>
66
- .my-custom-select {
67
- --ui-kit-select-border: #0000ff;
68
- --ui-kit-select-border-focus: #0000cc;
69
- }
70
- </style>
71
- ```
72
-
73
- ### Кастомизация цветов опций
74
-
75
- ```css
76
- :root {
77
- --ui-kit-select-option-text-selected: #ff0000;
78
- --ui-kit-select-option-bg-hover: #f0f0f0;
79
- }
80
- ```
81
-
82
- ### Кастомизация тегов
83
-
84
- ```css
85
- :root {
86
- --ui-kit-select-tag-bg: #e0e0e0;
87
- --ui-kit-select-tag-text: #333333;
88
- }
89
- ```
90
-
91
- ---
92
-
93
- ## Полный список переменных
94
-
95
- Готовый блок CSS для копирования:
96
-
97
- ```css
98
- :root {
99
- /* Button */
100
- --ui-kit-select-border: var(--ui-kit-color-border);
101
- --ui-kit-select-border-hover: var(--ui-kit-color-primary);
102
- --ui-kit-select-border-focus: var(--ui-kit-color-primary);
103
- --ui-kit-select-border-open: var(--ui-kit-color-primary);
104
- --ui-kit-select-bg: var(--ui-kit-color-bg-white);
105
- --ui-kit-select-bg-transparent: transparent;
106
- --ui-kit-select-shadow-focus: 0 0 0 1px var(--ui-kit-color-primary) inset;
107
-
108
- /* Placeholder */
109
- --ui-kit-select-placeholder: var(--ui-kit-color-text-tertiary);
110
-
111
- /* Tag */
112
- --ui-kit-select-tag-bg: var(--ui-kit-color-bg-light-1);
113
- --ui-kit-select-tag-text: var(--ui-kit-color-text-secondary);
114
- --ui-kit-select-tag-label: var(--ui-kit-color-text-primary);
115
- --ui-kit-select-tag-bg-transparent: var(--ui-kit-color-bg-white);
116
-
117
- /* Tag Count */
118
- --ui-kit-select-tag-count-bg: var(--ui-kit-color-bg-light-1);
119
- --ui-kit-select-tag-count-text: var(--ui-kit-color-text-secondary);
120
- --ui-kit-select-tag-count-bg-transparent: transparent;
121
-
122
- /* Input (внутри селекта) */
123
- --ui-kit-select-input-text: var(--ui-kit-color-text-primary);
124
- --ui-kit-select-input-placeholder: var(--ui-kit-color-text-tertiary);
125
-
126
- /* Dropdown */
127
- --ui-kit-select-dropdown-border: var(--ui-kit-color-border);
128
- --ui-kit-select-dropdown-bg: var(--ui-kit-color-bg-white);
129
-
130
- /* List */
131
- --ui-kit-select-list-text: var(--ui-kit-color-text-secondary);
132
-
133
- /* Option */
134
- --ui-kit-select-option-bg: var(--ui-kit-color-bg-white);
135
- --ui-kit-select-option-bg-hover: var(--ui-kit-color-bg-light-1);
136
- --ui-kit-select-option-text-selected: var(--ui-kit-color-primary);
137
- --ui-kit-select-option-text-hover: var(--ui-kit-color-primary);
138
-
139
- /* Check Icon */
140
- --ui-kit-select-check-color: var(--ui-kit-color-primary);
141
- }
142
- ```
143
-
144
- ---
145
-
146
- ## 📝 Примечания
147
-
148
- - Все переменные имеют значения по умолчанию, поэтому кастомизация опциональна
149
- - Переменные можно переопределять на разных уровнях: глобально (`:root`), для конкретного компонента (через класс), или для конкретного состояния
150
- - Базовые токены (`--ui-kit-color-*`) используются по умолчанию и должны быть определены в `variables.css`
151
- - Компонентные переменные определены в `src/lib/assets/css/components/select.css`
152
-
153
- ---
154
-
155
- [← Назад к списку компонентов](../VARIABLES.md)
156
-
157
-
1
+ # Select Component Variables
2
+
3
+ Документация по CSS переменным для компонента `Select`.
4
+
5
+ ## 📋 Содержание
6
+
7
+ - [Общие переменные](#общие-переменные)
8
+ - [Примеры использования](#примеры-использования)
9
+ - [Полный список переменных](#полный-список-переменных)
10
+
11
+ ---
12
+
13
+ ## Общие переменные
14
+
15
+ Все переменные применяются к компоненту `Select`.
16
+
17
+ | Переменная | Описание | Значение по умолчанию |
18
+ |------------|----------|----------------------|
19
+ | `--ui-kit-select-border` | Цвет границы кнопки | `var(--ui-kit-color-border)` |
20
+ | `--ui-kit-select-border-hover` | Цвет границы при наведении | `var(--ui-kit-color-primary)` |
21
+ | `--ui-kit-select-border-focus` | Цвет границы при фокусе | `var(--ui-kit-color-primary)` |
22
+ | `--ui-kit-select-border-open` | Цвет границы когда открыт | `var(--ui-kit-color-primary)` |
23
+ | `--ui-kit-select-bg` | Фон кнопки | `var(--ui-kit-color-bg-white)` |
24
+ | `--ui-kit-select-bg-transparent` | Фон кнопки в прозрачном режиме | `transparent` |
25
+ | `--ui-kit-select-shadow-focus` | Тень при фокусе | `0 0 0 1px var(--ui-kit-color-primary) inset` |
26
+ | `--ui-kit-select-placeholder` | Цвет placeholder | `var(--ui-kit-color-text-tertiary)` |
27
+ | `--ui-kit-select-tag-bg` | Фон тега | `var(--ui-kit-color-bg-light-1)` |
28
+ | `--ui-kit-select-tag-text` | Цвет текста тега | `var(--ui-kit-color-text-secondary)` |
29
+ | `--ui-kit-select-tag-label` | Цвет текста метки тега | `var(--ui-kit-color-text-primary)` |
30
+ | `--ui-kit-select-tag-bg-transparent` | Фон тега в прозрачном режиме | `var(--ui-kit-color-bg-white)` |
31
+ | `--ui-kit-select-tag-count-bg` | Фон счетчика тегов | `var(--ui-kit-color-bg-light-1)` |
32
+ | `--ui-kit-select-tag-count-text` | Цвет текста счетчика тегов | `var(--ui-kit-color-text-secondary)` |
33
+ | `--ui-kit-select-tag-count-bg-transparent` | Фон счетчика тегов в прозрачном режиме | `transparent` |
34
+ | `--ui-kit-select-input-text` | Цвет текста в поле поиска | `var(--ui-kit-color-text-primary)` |
35
+ | `--ui-kit-select-input-placeholder` | Цвет placeholder в поле поиска | `var(--ui-kit-color-text-tertiary)` |
36
+ | `--ui-kit-select-dropdown-border` | Цвет границы выпадающего списка | `var(--ui-kit-color-border)` |
37
+ | `--ui-kit-select-dropdown-bg` | Фон выпадающего списка | `var(--ui-kit-color-bg-white)` |
38
+ | `--ui-kit-select-list-text` | Цвет текста списка | `var(--ui-kit-color-text-secondary)` |
39
+ | `--ui-kit-select-option-bg` | Фон опции | `var(--ui-kit-color-bg-white)` |
40
+ | `--ui-kit-select-option-bg-hover` | Фон опции при наведении | `var(--ui-kit-color-bg-light-1)` |
41
+ | `--ui-kit-select-option-text-selected` | Цвет текста выбранной опции | `var(--ui-kit-color-primary)` |
42
+ | `--ui-kit-select-option-text-hover` | Цвет текста опции при наведении | `var(--ui-kit-color-primary)` |
43
+ | `--ui-kit-select-check-color` | Цвет иконки галочки | `var(--ui-kit-color-primary)` |
44
+
45
+ ---
46
+
47
+ ## Примеры использования
48
+
49
+ ### Глобальное переопределение для всех селектов
50
+
51
+ ```css
52
+ :root {
53
+ --ui-kit-select-border: #ff0000;
54
+ --ui-kit-select-border-hover: #00ff00;
55
+ }
56
+ ```
57
+
58
+ ### Переопределение для конкретного селекта
59
+
60
+ ```vue
61
+ <template>
62
+ <Select v-model="value" :options="options" class="my-custom-select" />
63
+ </template>
64
+
65
+ <style>
66
+ .my-custom-select {
67
+ --ui-kit-select-border: #0000ff;
68
+ --ui-kit-select-border-focus: #0000cc;
69
+ }
70
+ </style>
71
+ ```
72
+
73
+ ### Кастомизация цветов опций
74
+
75
+ ```css
76
+ :root {
77
+ --ui-kit-select-option-text-selected: #ff0000;
78
+ --ui-kit-select-option-bg-hover: #f0f0f0;
79
+ }
80
+ ```
81
+
82
+ ### Кастомизация тегов
83
+
84
+ ```css
85
+ :root {
86
+ --ui-kit-select-tag-bg: #e0e0e0;
87
+ --ui-kit-select-tag-text: #333333;
88
+ }
89
+ ```
90
+
91
+ ---
92
+
93
+ ## Полный список переменных
94
+
95
+ Готовый блок CSS для копирования:
96
+
97
+ ```css
98
+ :root {
99
+ /* Button */
100
+ --ui-kit-select-border: var(--ui-kit-color-border);
101
+ --ui-kit-select-border-hover: var(--ui-kit-color-primary);
102
+ --ui-kit-select-border-focus: var(--ui-kit-color-primary);
103
+ --ui-kit-select-border-open: var(--ui-kit-color-primary);
104
+ --ui-kit-select-bg: var(--ui-kit-color-bg-white);
105
+ --ui-kit-select-bg-transparent: transparent;
106
+ --ui-kit-select-shadow-focus: 0 0 0 1px var(--ui-kit-color-primary) inset;
107
+
108
+ /* Placeholder */
109
+ --ui-kit-select-placeholder: var(--ui-kit-color-text-tertiary);
110
+
111
+ /* Tag */
112
+ --ui-kit-select-tag-bg: var(--ui-kit-color-bg-light-1);
113
+ --ui-kit-select-tag-text: var(--ui-kit-color-text-secondary);
114
+ --ui-kit-select-tag-label: var(--ui-kit-color-text-primary);
115
+ --ui-kit-select-tag-bg-transparent: var(--ui-kit-color-bg-white);
116
+
117
+ /* Tag Count */
118
+ --ui-kit-select-tag-count-bg: var(--ui-kit-color-bg-light-1);
119
+ --ui-kit-select-tag-count-text: var(--ui-kit-color-text-secondary);
120
+ --ui-kit-select-tag-count-bg-transparent: transparent;
121
+
122
+ /* Input (внутри селекта) */
123
+ --ui-kit-select-input-text: var(--ui-kit-color-text-primary);
124
+ --ui-kit-select-input-placeholder: var(--ui-kit-color-text-tertiary);
125
+
126
+ /* Dropdown */
127
+ --ui-kit-select-dropdown-border: var(--ui-kit-color-border);
128
+ --ui-kit-select-dropdown-bg: var(--ui-kit-color-bg-white);
129
+
130
+ /* List */
131
+ --ui-kit-select-list-text: var(--ui-kit-color-text-secondary);
132
+
133
+ /* Option */
134
+ --ui-kit-select-option-bg: var(--ui-kit-color-bg-white);
135
+ --ui-kit-select-option-bg-hover: var(--ui-kit-color-bg-light-1);
136
+ --ui-kit-select-option-text-selected: var(--ui-kit-color-primary);
137
+ --ui-kit-select-option-text-hover: var(--ui-kit-color-primary);
138
+
139
+ /* Check Icon */
140
+ --ui-kit-select-check-color: var(--ui-kit-color-primary);
141
+ }
142
+ ```
143
+
144
+ ---
145
+
146
+ ## 📝 Примечания
147
+
148
+ - Все переменные имеют значения по умолчанию, поэтому кастомизация опциональна
149
+ - Переменные можно переопределять на разных уровнях: глобально (`:root`), для конкретного компонента (через класс), или для конкретного состояния
150
+ - Базовые токены (`--ui-kit-color-*`) используются по умолчанию и должны быть определены в `variables.css`
151
+ - Компонентные переменные определены в `src/lib/assets/css/components/select.css`
152
+
153
+ ---
154
+
155
+ [← Назад к списку компонентов](../VARIABLES.md)
156
+
157
+