ui-kit-scss-teal/README.md

Modern SCSS UI Kit with blue-green color scheme - 12 column grid, forms, buttons, modals, notifications

# UI Kit SCSS

Полнофункциональная SCSS библиотека с компонентами в сине-зеленой цветовой гамме.

## Установка

```bash
npm install @ui-system/ui-kit-scss
```

## Использование

### Импорт всех стилей
```scss
@import '@ui-system/ui-kit-scss/src/index.scss';
```

### Импорт отдельных компонентов
```scss
@import '@ui-system/ui-kit-scss/src/variables/colors';
@import '@ui-system/ui-kit-scss/src/components/buttons';
@import '@ui-system/ui-kit-scss/src/components/grid';
```

## Компоненты

### Сетка (12-колоночная)
- Адаптивная сетка с breakpoints
- Контейнеры и колонки
- Offset и выравнивание

```html
<div class="container">
  <div class="row">
    <div class="col-md-6 col-lg-4">Контент</div>
    <div class="col-md-6 col-lg-8">Контент</div>
  </div>
</div>
```

### Кнопки
- Различные варианты: primary, secondary, outline
- Размеры: sm, md, lg, xl
- Состояния: loading, disabled

```html
<button class="btn btn--primary">Основная кнопка</button>
<button class="btn btn--outline-secondary btn--lg">Большая кнопка</button>
<button class="btn btn--sm btn--loading">Загрузка...</button>
```

### Формы
- Input, textarea, select
- Checkbox, radio, switch
- Валидация и стили ошибок

```html
<div class="form-group">
  <label class="form-label">Email</label>
  <input type="email" class="input" placeholder="Введите email">
  <div class="form-help">Мы не передаем email третьим лицам</div>
</div>

<label class="checkbox">
  <input type="checkbox" class="checkbox__input">
  <span class="checkbox__box"></span>
  <span class="checkbox__label">Согласен с условиями</span>
</label>
```

### Календарь
- Выбор даты и диапазона
- Навигация по месяцам/годам
- Настраиваемые размеры

```html
<div class="calendar">
  <!-- Структура календаря -->
</div>
```

### Модальные окна
- Различные размеры и позиционирование
- Анимации появления/исчезновения
- Backdrop и закрытие по Escape

```html
<div class="modal modal--open">
  <div class="modal__backdrop"></div>
  <div class="modal__dialog">
    <div class="modal__content">
      <!-- Содержимое модального окна -->
    </div>
  </div>
</div>
```

### Уведомления
- Типы: success, error, warning, info
- Позиционирование
- Автоматическое скрытие

```html
<div class="notification notification--success notification--show">
  <div class="notification__icon">✓</div>
  <div class="notification__content">
    <h4 class="notification__title">Успех!</h4>
    <p class="notification__message">Операция выполнена успешно.</p>
  </div>
  <button class="notification__close">×</button>
</div>
```

## Цветовая схема

### Основные цвета
- **Primary**: Синие оттенки (#0ea5e9)
- **Secondary**: Зелено-бирюзовые оттенки (#14b8a6)
- **Status**: Success, Warning, Error, Info

### Кастомизация

Переопределите переменные для настройки цветовой схемы:

```scss
// Переопределение переменных
$color-primary: #your-primary-color;
$color-secondary: #your-secondary-color;

// Импорт библиотеки
@import '@ui-system/ui-kit-scss/src/index.scss';
```

## Утилиты

- **Spacing**: margin и padding классы (m-4, p-2, mx-auto и т.д.)
- **Display**: flex, grid, block, inline-block и т.д.
- **Typography**: размеры текста, веса, цвета
- **Responsive**: адаптивные классы для всех breakpoints

```html
<div class="flex items-center justify-between p-4 mb-6">
  <h2 class="text-2xl font-semibold text-primary">Заголовок</h2>
  <button class="btn btn--secondary btn--sm">Действие</button>
</div>
```

## Breakpoints

- `xs`: 480px+
- `sm`: 640px+  
- `md`: 768px+
- `lg`: 1024px+
- `xl`: 1280px+
- `2xl`: 1536px+

## Лицензия

MIT