tokenizer-ui-kit

v0.2.32

Published

3 days ago

A Vue 3 UI Kit for Tokenizer - Complete component library

0High
0Medium
0Low

tochjob

weborblik

danilrazukov

vue3 ui-kit components tokenizer typescript

🧩 Tokenizer UI Kit

A comprehensive Vue 3 UI component library for Tokenizer. A modular and extensible component library built for internal use across all company products.

📦 Installation

npm i tokenizer-ui-kit
# or
pnpm add tokenizer-ui-kit

🧩 Available Components

Date Picker

import { DatePicker } from "tokenizer-ui-kit";

Button

import { CButton } from "tokenizer-ui-kit";

Circular Loader

import { CircularLoader } from "tokenizer-ui-kit";

🚀 Usage

For Vue/Vite Applications

1. Import components and styles

<script setup>
import { DatePicker, CButton, CircularLoader } from "tokenizer-ui-kit";
// ⚠️ IMPORTANT: Import CSS styles for proper styling
import "tokenizer-ui-kit/dist/tokenizer-ui-kit.css";

// ℹ️ NOTE: Reset CSS is included but applied only to elements inside .ui-kit class.
// This prevents conflicts with global styles (like Tailwind CSS).
// To use reset styles, wrap your UI Kit components in a container with class "ui-kit":
// <div class="ui-kit">...</div>
</script>

2. Use components

<template>
  <div class="ui-kit">
    <DatePicker v-model="selectedDate" />
    <CButton @click="handleClick">Click me</CButton>
    <CircularLoader v-if="loading" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { DatePicker, CButton, CircularLoader } from "tokenizer-ui-kit";
import "tokenizer-ui-kit/dist/tokenizer-ui-kit.css";

const selectedDate = ref(null);
const loading = ref(false);

const handleClick = () => {
  console.log("Button clicked!");
};
</script>

For Nuxt Applications

Option 1: In `nuxt.config.ts` (Recommended)

// nuxt.config.ts
export default defineNuxtConfig({
  css: ["tokenizer-ui-kit/dist/tokenizer-ui-kit.css"],
  // ... other config
});

Option 2: In `app.vue` or layout

<!-- app.vue or layouts/default.vue -->
<script setup>
// Import CSS globally
import "tokenizer-ui-kit/dist/tokenizer-ui-kit.css";
</script>

<template>
  <NuxtPage />
</template>

Option 3: In individual components

<!-- components/MyComponent.vue -->
<script setup>
import { DatePicker, CButton } from "tokenizer-ui-kit";
import "tokenizer-ui-kit/dist/tokenizer-ui-kit.css";

const selectedDate = ref(null);
</script>

<template>
  <DatePicker v-model="selectedDate" />
  <CButton color="green">Click me</CButton>
</template>

🎨 Customization

The UI Kit uses CSS variables for easy customization. These variables are shared across all components (Input, DatePicker, etc.) and can be overridden in your project.

CSS Variables

All UI Kit components use a unified set of CSS variables. You can override any variable to customize the appearance of components.

Typography Variables

:root {
  /* Font Family */
  --ui-kit-font-family: Manrope, sans-serif;

  /* Font Sizes */
  --ui-kit-font-size-xs: 12px; /* Small labels, error messages */
  --ui-kit-font-size-sm: 14px; /* Body text, buttons, inputs */
  --ui-kit-font-size-base: 16px; /* Headings, large text */
  --ui-kit-font-size-lg: 18px; /* Large headings */
  --ui-kit-font-size-xl: 20px; /* Extra large headings */
  --ui-kit-font-size-2xl: 24px; /* XXL headings */

  /* Font Weights */
  --ui-kit-font-weight-regular: 400; /* Regular text */
  --ui-kit-font-weight-medium: 500; /* Medium text, buttons */
  --ui-kit-font-weight-semibold: 600; /* Semibold headings */
  --ui-kit-font-weight-bold: 700; /* Bold headings */

  /* Line Heights */
  --ui-kit-line-height-tight: 1.2; /* Tight line height for headings */
  --ui-kit-line-height-normal: 1.5; /* Normal line height */
  --ui-kit-line-height-relaxed: 1.75; /* Relaxed line height */

  /* Typography Presets (for convenience) */
  --ui-kit-typography-label: var(--ui-kit-font-size-xs) /
    var(--ui-kit-line-height-normal) var(--ui-kit-font-family);
  --ui-kit-typography-body: var(--ui-kit-font-size-sm) /
    var(--ui-kit-line-height-normal) var(--ui-kit-font-family);
  --ui-kit-typography-body-large: var(--ui-kit-font-size-base) /
    var(--ui-kit-line-height-normal) var(--ui-kit-font-family);
  --ui-kit-typography-heading: var(--ui-kit-font-size-base) /
    var(--ui-kit-line-height-tight) var(--ui-kit-font-family);
  --ui-kit-typography-heading-large: var(--ui-kit-font-size-lg) /
    var(--ui-kit-line-height-tight) var(--ui-kit-font-family);
}

Color Variables

:root {
  /* ============================================
     Base Semantic Tokens (рекомендуется использовать)
     ============================================ */
  /* Primary Colors */
  --ui-kit-color-primary: #39aa5d;
  --ui-kit-color-primary-hover: #268644;
  --ui-kit-color-primary-light: #56d67f;

  /* Text Colors */
  --ui-kit-color-text-primary: #292b32;
  --ui-kit-color-text-secondary: #757987;
  --ui-kit-color-text-tertiary: #8c9aac;
  --ui-kit-color-text-white: #ffffff;

  /* Background Colors */
  --ui-kit-color-bg-white: #ffffff;
  --ui-kit-color-bg-light-1: #f1f3f6;
  --ui-kit-color-bg-light-2: #e9ebee;
  --ui-kit-color-bg-light-4: #d2d8e0;
  --ui-kit-color-bg-light-5: #b4beca;

  /* Border Colors */
  --ui-kit-color-border: #b4beca;
  --ui-kit-color-border-hover: #268644;
  --ui-kit-color-border-focus: #39aa5d;

  /* Error Colors */
  --ui-kit-color-error: #f34831;
  --ui-kit-color-error-light: #f78272;
  --ui-kit-color-error-bg: #fef4f3;

  /* Disabled Colors */
  --ui-kit-color-disabled-bg: #e9ebee;
  --ui-kit-color-disabled-text: #b4beca;
  --ui-kit-color-disabled-border: #b4beca;

  /* ============================================
     Legacy Variables (для обратной совместимости)
     ============================================ */
  --ui-kit-primary-primary: var(--ui-kit-color-text-primary);
  --ui-kit-primary-sidebar: #393d41;
  --ui-kit-primary-bg-white: var(--ui-kit-color-bg-white);
  --ui-kit-primary-secondary: var(--ui-kit-color-text-secondary);
  --ui-kit-primary-tertiary: var(--ui-kit-color-text-tertiary);
  --ui-kit-primary-do-green: var(--ui-kit-color-primary);
  --ui-kit-primary-bg-dark-green: var(--ui-kit-color-primary-hover);
  --ui-kit-primary-d-light-green: var(--ui-kit-color-primary-light);
  --ui-kit-primary-overlay: #121212;
  --ui-kit-text-white: var(--ui-kit-color-text-white);

  --ui-kit-background-light-0: #fbfbff;
  --ui-kit-background-light-1: var(--ui-kit-color-bg-light-1);
  --ui-kit-background-light-2: var(--ui-kit-color-bg-light-2);
  --ui-kit-background-light-3: #dfe3e7;
  --ui-kit-background-light-4: var(--ui-kit-color-bg-light-4);
  --ui-kit-background-light-5: var(--ui-kit-color-border);
  --ui-kit-background-dark-1: #36373f;
  --ui-kit-background-dark-2: #282a2f;
  --ui-kit-background-dark-3: #212328;
  --ui-kit-background-dark-4: #1e1f24;
  --ui-kit-background-dark-5: #15161b;
  --ui-kit-background-dark-6: #0c0d10;
  --ui-kit-background-menu: #484953;

  /* ============================================
     System Colors - Primary (Green Scale)
     ============================================ */
  --ui-kit-system-primary-900: #316848;
  --ui-kit-system-primary-800: #3d7f59;
  --ui-kit-system-primary-700: #4d906c;
  --ui-kit-system-primary-600: #83b09a;
  --ui-kit-system-primary-500: #b0d8c8;
  --ui-kit-system-primary-400: #deeded;
  --ui-kit-system-primary-300: #f1f6f0;

  /* ============================================
     System Colors - Error (Red Scale)
     ============================================ */
  --ui-kit-system-error-900: #962f31;
  --ui-kit-system-error-800: #c63c28;
  --ui-kit-system-error-700: #f34831;
  --ui-kit-system-error-600: #f78272;
  --ui-kit-system-error-500: #e5c3bd;
  --ui-kit-system-error-400: #fef4f3;

  /* ============================================
     System Colors - Success (Green Scale)
     ============================================ */
  --ui-kit-system-success-900: #377160;
  --ui-kit-system-success-800: #3d8e5b;
  --ui-kit-system-success-700: #3eb850;
  --ui-kit-system-success-600: #8bd497;
  --ui-kit-system-success-500: #deede4;
  --ui-kit-system-success-400: #e1f8e0;

  /* ============================================
     System Colors - Attention (Orange/Yellow Scale)
     ============================================ */
  --ui-kit-system-attention-900: #b07925;
  --ui-kit-system-attention-800: #d19319;
  --ui-kit-system-attention-700: #e8ac0c;
  --ui-kit-system-attention-600: #eec758;
  --ui-kit-system-attention-500: #f6e0e1;
  --ui-kit-system-attention-400: #f7f7f1;

  /* ============================================
     System Colors - Info (Purple Scale)
     ============================================ */
  --ui-kit-system-info-900: #403294;
  --ui-kit-system-info-800: #5243aa;
  --ui-kit-system-info-700: #6554c0;
  --ui-kit-system-info-600: #7f8fd1;
  --ui-kit-system-info-500: #9d91da;
  --ui-kit-system-info-400: #cbe7ff;
}

Typography Classes

The UI Kit provides a set of typography utility classes that can be used directly in your components. These classes follow the design system typography specifications.

Available Typography Classes

/* Lead Typography */
.ui-kit-typo-lead-primary      /* 24px, weight 400, line-height 31.2px */
.ui-kit-typo-lead-secondary    /* 20px, weight 400, line-height 26px */

/* Headers */
.ui-kit-typo-header-secondary   /* 20px, weight 600, line-height 26px */

/* Subtitles */
.ui-kit-typo-subtitle-primary    /* 16px, weight 500, line-height 20.8px */
.ui-kit-typo-subtitle-secondary  /* 14px, weight 500, line-height 18.2px */
.ui-kit-typo-subtitle-hint       /* 12px, weight 600, line-height 15.6px */

/* Paragraphs */
.ui-kit-typo-paragraph-primary    /* 14px, weight 400, line-height 18.2px */
.ui-kit-typo-paragraph-secondary  /* 12px, weight 400, line-height 15.6px */

/* Links */
.ui-kit-typo-text-link  /* 14px, weight 700, line-height 18.2px */

/* Table Variant */
.ui-kit-typo-table  /* 14px, weight 500, line-height 130%, letter-spacing -1% */

Usage Example

<template>
  <div>
    <h1 class="ui-kit-typo-lead-primary">Main Heading</h1>
    <h2 class="ui-kit-typo-header-secondary">Section Header</h2>
    <p class="ui-kit-typo-paragraph-primary">Body text content</p>
    <span class="ui-kit-typo-subtitle-secondary">Subtitle text</span>
    <a href="#" class="ui-kit-typo-text-link">Link text</a>
  </div>
</template>

Note: Typography classes are applied first in the class list, followed by component classes. This allows you to easily override typography styles by adding your own classes without using !important.

Example: Overriding Variables

<!-- App.vue or main.css -->
<style>
:root {
  /* Override typography */
  --ui-kit-font-family: "Your Font", sans-serif;
  --ui-kit-font-size-base: 18px;

  /* Override colors (используйте новые семантические токены) */
  --ui-kit-color-primary: #your-primary-color;
  --ui-kit-color-border-focus: #your-focus-color;
  --ui-kit-color-error: #your-error-color;
}
</style>

<template>
  <CInput v-model="value" placeholder="Custom styled input" />
  <DatePicker v-model="date" />
</template>

Important: Make sure to define your custom variables before importing the UI Kit styles, or define them in a separate CSS file that is imported first.

📖 Подробная документация по CSS переменным: см. VARIABLES.md

🛠️ Разработка и тестирование

При работе над изменениями в ui-kit следуйте следующему процессу:

Вносим правки в ui-kit - вносите необходимые изменения в компоненты или стили ui-kit
Собираем ui-kit - выполните сборку проекта:
```
npm run build
```
Указываем путь до ui-kit в основном проекте - в package.json основного проекта укажите локальный путь:
```
{
  "dependencies": {
    "tokenizer-ui-kit": "file:../ui-kit/tokenizer"
  }
}
```
Устанавливаем зависимости - выполните установку зависимостей в основном проекте:
```
pnpm install
```
Тестируем - проверьте работу изменений в основном проекте
Возвращаем новую версию - после успешного тестирования верните обычную версию пакета в package.json основного проекта (например, версию из npm registry)

📚 Documentation

Each component comes with TypeScript support and comprehensive documentation.

CSS Variables Documentation - Полная документация по кастомизации компонентов через CSS переменные
- Button Variables - Переменные для компонента CButton
- Input Variables - Переменные для компонентов CInput и CSearchInput
- Select Variables - Переменные для компонента Select
- DatePicker Variables - Переменные для компонента DatePicker
- Checkbox Variables - Переменные для компонента CCheckbox
- IconButton Variables - Переменные для компонента CIconButton
- Label Variables - Переменные для компонента CLabel
- Toast Variables - Переменные для компонента Toast
- AdaptiveTabs Variables - Переменные для компонента AdaptiveTabs