tokenizer-ui-kit 0.2.27 → 0.2.29
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 +30 -22
- package/VARIABLES-BUTTON.md +280 -260
- package/VARIABLES.md +8 -8
- package/dist/tokenizer-ui-kit.css +2 -2
- package/dist/tokenizer-ui-kit.es.js +6 -6
- package/dist/tokenizer-ui-kit.umd.js +1 -1
- package/dist/types/components/ui/CButton/CButton.vue.d.ts.map +1 -1
- package/dist/types/components/ui/CButton/types.d.ts +5 -5
- package/dist/types/components/ui/CButton/types.d.ts.map +1 -1
- package/dist/types/components/ui/CIconButton/CIconButton.vue.d.ts +3 -3
- package/dist/types/components/ui/CIconButton/CIconButton.vue.d.ts.map +1 -1
- package/dist/types/components/ui/CIconButton/types.d.ts +1 -1
- package/dist/types/components/ui/CIconButton/types.d.ts.map +1 -1
- package/dist/types/components/ui/CLabel/CLabel.vue.d.ts +2 -2
- package/dist/types/components/ui/CLabel/CLabel.vue.d.ts.map +1 -1
- package/dist/types/components/ui/CLinkButton/CLinkButton.vue.d.ts +4 -4
- package/dist/types/components/ui/CLinkButton/CLinkButton.vue.d.ts.map +1 -1
- package/dist/types/components/ui/CLinkButton/types.d.ts +2 -2
- package/dist/types/components/ui/CLinkButton/types.d.ts.map +1 -1
- package/package.json +1 -1
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;
|
|
137
|
-
--ui-kit-font-size-sm: 14px;
|
|
138
|
-
--ui-kit-font-size-base: 16px;
|
|
139
|
-
--ui-kit-font-size-lg: 18px;
|
|
140
|
-
--ui-kit-font-size-xl: 20px;
|
|
141
|
-
--ui-kit-font-size-2xl: 24px;
|
|
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;
|
|
145
|
-
--ui-kit-font-weight-medium: 500;
|
|
146
|
-
--ui-kit-font-weight-semibold: 600;
|
|
147
|
-
--ui-kit-font-weight-bold: 700;
|
|
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;
|
|
151
|
-
--ui-kit-line-height-normal: 1.5;
|
|
152
|
-
--ui-kit-line-height-relaxed: 1.75;
|
|
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) /
|
|
156
|
-
|
|
157
|
-
--ui-kit-typography-body
|
|
158
|
-
|
|
159
|
-
--ui-kit-typography-
|
|
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: #
|
|
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: #
|
|
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: #
|
|
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:
|
|
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
|
```
|