tokenizer-ui-kit 0.2.27 → 0.2.28

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.
package/README.md CHANGED
@@ -133,30 +133,35 @@ All UI Kit components use a unified set of CSS variables. You can override any v
133
133
  --ui-kit-font-family: Manrope, sans-serif;
134
134
 
135
135
  /* Font Sizes */
136
- --ui-kit-font-size-xs: 12px; /* Small labels, error messages */
137
- --ui-kit-font-size-sm: 14px; /* Body text, buttons, inputs */
138
- --ui-kit-font-size-base: 16px; /* Headings, large text */
139
- --ui-kit-font-size-lg: 18px; /* Large headings */
140
- --ui-kit-font-size-xl: 20px; /* Extra large headings */
141
- --ui-kit-font-size-2xl: 24px; /* XXL headings */
136
+ --ui-kit-font-size-xs: 12px; /* Small labels, error messages */
137
+ --ui-kit-font-size-sm: 14px; /* Body text, buttons, inputs */
138
+ --ui-kit-font-size-base: 16px; /* Headings, large text */
139
+ --ui-kit-font-size-lg: 18px; /* Large headings */
140
+ --ui-kit-font-size-xl: 20px; /* Extra large headings */
141
+ --ui-kit-font-size-2xl: 24px; /* XXL headings */
142
142
 
143
143
  /* Font Weights */
144
- --ui-kit-font-weight-regular: 400; /* Regular text */
145
- --ui-kit-font-weight-medium: 500; /* Medium text, buttons */
146
- --ui-kit-font-weight-semibold: 600; /* Semibold headings */
147
- --ui-kit-font-weight-bold: 700; /* Bold headings */
144
+ --ui-kit-font-weight-regular: 400; /* Regular text */
145
+ --ui-kit-font-weight-medium: 500; /* Medium text, buttons */
146
+ --ui-kit-font-weight-semibold: 600; /* Semibold headings */
147
+ --ui-kit-font-weight-bold: 700; /* Bold headings */
148
148
 
149
149
  /* Line Heights */
150
- --ui-kit-line-height-tight: 1.2; /* Tight line height for headings */
151
- --ui-kit-line-height-normal: 1.5; /* Normal line height */
152
- --ui-kit-line-height-relaxed: 1.75; /* Relaxed line height */
150
+ --ui-kit-line-height-tight: 1.2; /* Tight line height for headings */
151
+ --ui-kit-line-height-normal: 1.5; /* Normal line height */
152
+ --ui-kit-line-height-relaxed: 1.75; /* Relaxed line height */
153
153
 
154
154
  /* Typography Presets (for convenience) */
155
- --ui-kit-typography-label: var(--ui-kit-font-size-xs) / var(--ui-kit-line-height-normal) var(--ui-kit-font-family);
156
- --ui-kit-typography-body: var(--ui-kit-font-size-sm) / var(--ui-kit-line-height-normal) var(--ui-kit-font-family);
157
- --ui-kit-typography-body-large: var(--ui-kit-font-size-base) / var(--ui-kit-line-height-normal) var(--ui-kit-font-family);
158
- --ui-kit-typography-heading: var(--ui-kit-font-size-base) / var(--ui-kit-line-height-tight) var(--ui-kit-font-family);
159
- --ui-kit-typography-heading-large: var(--ui-kit-font-size-lg) / var(--ui-kit-line-height-tight) var(--ui-kit-font-family);
155
+ --ui-kit-typography-label: var(--ui-kit-font-size-xs) /
156
+ var(--ui-kit-line-height-normal) var(--ui-kit-font-family);
157
+ --ui-kit-typography-body: var(--ui-kit-font-size-sm) /
158
+ var(--ui-kit-line-height-normal) var(--ui-kit-font-family);
159
+ --ui-kit-typography-body-large: var(--ui-kit-font-size-base) /
160
+ var(--ui-kit-line-height-normal) var(--ui-kit-font-family);
161
+ --ui-kit-typography-heading: var(--ui-kit-font-size-base) /
162
+ var(--ui-kit-line-height-tight) var(--ui-kit-font-family);
163
+ --ui-kit-typography-heading-large: var(--ui-kit-font-size-lg) /
164
+ var(--ui-kit-line-height-tight) var(--ui-kit-font-family);
160
165
  }
161
166
  ```
162
167
 
@@ -193,7 +198,7 @@ All UI Kit components use a unified set of CSS variables. You can override any v
193
198
  /* Error Colors */
194
199
  --ui-kit-color-error: #f34831;
195
200
  --ui-kit-color-error-light: #f78272;
196
- --ui-kit-color-error-bg: #f0f4f3;
201
+ --ui-kit-color-error-bg: #fef4f3;
197
202
 
198
203
  /* Disabled Colors */
199
204
  --ui-kit-color-disabled-bg: #e9ebee;
@@ -247,14 +252,14 @@ All UI Kit components use a unified set of CSS variables. You can override any v
247
252
  --ui-kit-system-error-700: #f34831;
248
253
  --ui-kit-system-error-600: #f78272;
249
254
  --ui-kit-system-error-500: #e5c3bd;
250
- --ui-kit-system-error-400: #f0f4f3;
255
+ --ui-kit-system-error-400: #fef4f3;
251
256
 
252
257
  /* ============================================
253
258
  System Colors - Success (Green Scale)
254
259
  ============================================ */
255
260
  --ui-kit-system-success-900: #377160;
256
261
  --ui-kit-system-success-800: #3d8e5b;
257
- --ui-kit-system-success-700: #3EB850;
262
+ --ui-kit-system-success-700: #3eb850;
258
263
  --ui-kit-system-success-600: #8bd497;
259
264
  --ui-kit-system-success-500: #deede4;
260
265
  --ui-kit-system-success-400: #e1f8e0;
@@ -334,7 +339,7 @@ The UI Kit provides a set of typography utility classes that can be used directl
334
339
  <style>
335
340
  :root {
336
341
  /* Override typography */
337
- --ui-kit-font-family: 'Your Font', sans-serif;
342
+ --ui-kit-font-family: "Your Font", sans-serif;
338
343
  --ui-kit-font-size-base: 18px;
339
344
 
340
345
  /* Override colors (используйте новые семантические токены) */
@@ -361,11 +366,13 @@ The UI Kit provides a set of typography utility classes that can be used directl
361
366
  1. **Вносим правки в ui-kit** - вносите необходимые изменения в компоненты или стили ui-kit
362
367
 
363
368
  2. **Собираем ui-kit** - выполните сборку проекта:
369
+
364
370
  ```bash
365
371
  npm run build
366
372
  ```
367
373
 
368
374
  3. **Указываем путь до ui-kit в основном проекте** - в `package.json` основного проекта укажите локальный путь:
375
+
369
376
  ```json
370
377
  {
371
378
  "dependencies": {
@@ -375,6 +382,7 @@ The UI Kit provides a set of typography utility classes that can be used directl
375
382
  ```
376
383
 
377
384
  4. **Устанавливаем зависимости** - выполните установку зависимостей в основном проекте:
385
+
378
386
  ```bash
379
387
  pnpm install
380
388
  ```
@@ -22,17 +22,17 @@
22
22
 
23
23
  Применяются ко всем вариантам кнопок по умолчанию.
24
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` |
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
36
 
37
37
  ---
38
38
 
@@ -42,83 +42,83 @@
42
42
 
43
43
  Зеленая кнопка с заполненным фоном.
44
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)` |
45
+ | Переменная | Описание | Значение по умолчанию |
46
+ | -------------------------------- | ------------------ | ----------------------------------- |
47
+ | `--ui-kit-button-brand-bg` | Фон кнопки success | `var(--ui-kit-color-primary)` |
48
+ | `--ui-kit-button-brand-text` | Цвет текста | `var(--ui-kit-color-text-white)` |
49
+ | `--ui-kit-button-brand-border` | Цвет границы | `transparent` |
50
+ | `--ui-kit-button-brand-hover-bg` | Фон при наведении | `var(--ui-kit-color-primary-hover)` |
51
51
 
52
52
  ### Variant: success-outline
53
53
 
54
54
  Зеленая кнопка с обводкой.
55
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)` |
56
+ | Переменная | Описание | Значение по умолчанию |
57
+ | -------------------------------------------- | -------------------------- | -------------------------------- |
58
+ | `--ui-kit-button-brand-outline-bg` | Фон кнопки | `transparent` |
59
+ | `--ui-kit-button-brand-outline-text` | Цвет текста | `var(--ui-kit-color-primary)` |
60
+ | `--ui-kit-button-brand-outline-border` | Цвет границы | `var(--ui-kit-color-primary)` |
61
+ | `--ui-kit-button-brand-outline-hover-bg` | Фон при наведении | `var(--ui-kit-color-primary)` |
62
+ | `--ui-kit-button-brand-outline-hover-text` | Цвет текста при наведении | `var(--ui-kit-color-text-white)` |
63
+ | `--ui-kit-button-brand-outline-hover-border` | Цвет границы при наведении | `var(--ui-kit-color-primary)` |
64
64
 
65
65
  ### Variant: primary
66
66
 
67
67
  Темно-серая/черная кнопка с заполненным фоном.
68
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` |
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
74
  | `--ui-kit-button-primary-hover-border` | Цвет границы при наведении | `var(--ui-kit-color-text-secondary)` |
75
75
 
76
76
  ### Variant: secondary
77
77
 
78
78
  Средне-серая кнопка с заполненным фоном.
79
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` |
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
86
  | `--ui-kit-button-secondary-hover-border` | Цвет границы при наведении | `var(--ui-kit-color-text-secondary)` |
87
87
 
88
88
  ### Variant: default
89
89
 
90
90
  Белая кнопка с границей.
91
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)` |
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
98
 
99
99
  ### Variant: error
100
100
 
101
101
  Красная кнопка с заполненным фоном.
102
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` |
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
109
 
110
110
  ### Variant: error-outline
111
111
 
112
112
  Красная кнопка с обводкой.
113
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)` |
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
122
 
123
123
  ---
124
124
 
@@ -137,8 +137,8 @@
137
137
 
138
138
  ```css
139
139
  :root {
140
- --ui-kit-button-success-bg: #00ff00;
141
- --ui-kit-button-success-hover-bg: #00cc00;
140
+ --ui-kit-button-brand-bg: #00ff00;
141
+ --ui-kit-button-brand-hover-bg: #00cc00;
142
142
  }
143
143
  ```
144
144
 
@@ -167,12 +167,12 @@
167
167
 
168
168
  /* Для конкретного варианта */
169
169
  :root {
170
- --ui-kit-button-success-bg: #00ff00;
170
+ --ui-kit-button-brand-bg: #00ff00;
171
171
  }
172
172
 
173
173
  /* Для конкретной кнопки */
174
174
  .my-special-button {
175
- --ui-kit-button-success-bg: #0000ff;
175
+ --ui-kit-button-brand-bg: #0000ff;
176
176
  }
177
177
  ```
178
178
 
@@ -196,18 +196,18 @@
196
196
  --ui-kit-button-disabled-border: transparent;
197
197
 
198
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);
199
+ --ui-kit-button-brand-bg: var(--ui-kit-color-primary);
200
+ --ui-kit-button-brand-text: var(--ui-kit-color-text-white);
201
+ --ui-kit-button-brand-border: transparent;
202
+ --ui-kit-button-brand-hover-bg: var(--ui-kit-color-primary-hover);
203
203
 
204
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);
205
+ --ui-kit-button-brand-outline-bg: transparent;
206
+ --ui-kit-button-brand-outline-text: var(--ui-kit-color-primary);
207
+ --ui-kit-button-brand-outline-border: var(--ui-kit-color-primary);
208
+ --ui-kit-button-brand-outline-hover-bg: var(--ui-kit-color-primary);
209
+ --ui-kit-button-brand-outline-hover-text: var(--ui-kit-color-text-white);
210
+ --ui-kit-button-brand-outline-hover-border: var(--ui-kit-color-primary);
211
211
 
212
212
  /* Variant: primary */
213
213
  --ui-kit-button-primary-bg: var(--ui-kit-color-text-primary);
@@ -256,5 +256,3 @@
256
256
  ---
257
257
 
258
258
  [← Назад к списку компонентов](../VARIABLES.md)
259
-
260
-
package/VARIABLES.md CHANGED
@@ -43,7 +43,7 @@
43
43
  /* Error Colors */
44
44
  --ui-kit-color-error: #f34831;
45
45
  --ui-kit-color-error-light: #f78272;
46
- --ui-kit-color-error-bg: #f0f4f3;
46
+ --ui-kit-color-error-bg: #fef4f3;
47
47
 
48
48
  /* Disabled Colors */
49
49
  --ui-kit-color-disabled-bg: #e9ebee;
@@ -79,30 +79,30 @@
79
79
  --ui-kit-color-primary: #39aa5d;
80
80
  --ui-kit-color-primary-hover: #268644;
81
81
  --ui-kit-color-primary-light: #56d67f;
82
-
82
+
83
83
  /* Text Colors */
84
84
  --ui-kit-color-text-primary: #292b32;
85
85
  --ui-kit-color-text-secondary: #757987;
86
86
  --ui-kit-color-text-tertiary: #8c9aac;
87
87
  --ui-kit-color-text-white: #ffffff;
88
-
88
+
89
89
  /* Background Colors */
90
90
  --ui-kit-color-bg-white: #ffffff;
91
91
  --ui-kit-color-bg-light-1: #f1f3f6;
92
92
  --ui-kit-color-bg-light-2: #e9ebee;
93
93
  --ui-kit-color-bg-light-4: #d2d8e0;
94
94
  --ui-kit-color-bg-light-5: #b4beca;
95
-
95
+
96
96
  /* Border Colors */
97
97
  --ui-kit-color-border: #b4beca;
98
98
  --ui-kit-color-border-hover: #268644;
99
99
  --ui-kit-color-border-focus: #39aa5d;
100
-
100
+
101
101
  /* Error Colors */
102
102
  --ui-kit-color-error: #f34831;
103
103
  --ui-kit-color-error-light: #f78272;
104
- --ui-kit-color-error-bg: #f0f4f3;
105
-
104
+ --ui-kit-color-error-bg: #fef4f3;
105
+
106
106
  /* Disabled Colors */
107
107
  --ui-kit-color-disabled-bg: #e9ebee;
108
108
  --ui-kit-color-disabled-text: #b4beca;
@@ -121,4 +121,4 @@
121
121
 
122
122
  ---
123
123
 
124
- *Последнее обновление: при добавлении новых компонентов*
124
+ _Последнее обновление: при добавлении новых компонентов_