tot-ui-kit 2.0.1 → 2.2.0

package/README.md

@@ -1,8 +1,8 @@
 # tot-ui-kit
 
-UI-библиотека с `Layout`, `ScMainMenu` и поддержкой тем для React-приложений.
+UI-библиотека с `Layout`, `ScMainMenu` и поддержкой светлой/тёмной темы для React-приложений.
 
-> **Важно**: Библиотека использует обычный CSS (без CSS Modules). В проектах на webpack убедитесь, что подключены `css-loader` и `style-loader` (или `mini-css-extract-plugin` для продакшена). В Vite всё работает из коробки.
+> **Важно**: Библиотека использует обычный CSS (без CSS Modules). В проектах на webpack убедитесь, что подключены `css-loader` и `style-loader`. В Vite всё работает из коробки.
 
 ## Установка
 
@@ -12,33 +12,27 @@ npm install tot-ui-kit @sberbusiness/triplex-next @sberbusiness/icons-next
 
 ## ⚠️ Критически важно: Подключение CSS
 
-**Порядок и состав CSS импортов критичен для корректной работы!**
+**Порядок CSS импортов критичен для корректной работы тем!**
 
-В входном файле приложения (`src/main.tsx`) импорты CSS должны быть:
-1. **В начале файла** (до импорта React и компонентов)
-2. **В строго определённом порядке**
+В входном файле приложения (`src/main.tsx`):
 
 ```tsx
 // src/main.tsx
 
 // 1. CSS импорты — ПЕРВЫМИ и в этом порядке!
-import '@sberbusiness/icons-next/styles/icons.css'
-import '@sberbusiness/triplex-next/styles/triplex-next.css'
-import 'tot-ui-kit/global.css'
-import 'tot-ui-kit/dist/index.css'  // ← Обязательно! Без этого меню не отображается
-import './styles/index.css'          // ваши локальные стили последними
+import '@sberbusiness/icons-next/styles/icons.css'   // Стили иконок
+import '@sberbusiness/triplex-next/styles/triplex-next.css'  // Triplex базовые стили
+import 'tot-ui-kit/dist/index.css'  // Стили Layout + меню + темы (включает global.css)
+import './styles/index.css'          // Ваши локальные стили — последними
 
 // 2. Только потом React и компоненты
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import { BrowserRouter } from 'react-router-dom'
 import App from './App'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
+    <App />
   </StrictMode>,
 )
 ```
@@ -47,21 +41,19 @@ createRoot(document.getElementById('root')!).render(
 
 | Проблема | Симптом | Решение |
 |----------|---------|---------|
-| Отсутствует `tot-ui-kit/dist/index.css` | Меню отображается как текст без стилей, иконки в ряд сверху | Добавить импорт `import 'tot-ui-kit/dist/index.css'` |
-| Неправильный порядок CSS | Стили перебиваются, меню выглядит сломанным | Соблюдать порядок: icons → triplex → tot-ui-kit → локальные |
-| CSS после React импортов | Стили могут не применяться | CSS импорты должны быть в самом начале файла |
+| Отсутствует `tot-ui-kit/dist/index.css` | Меню без стилей, тема не работает | Добавить импорт |
+| Неправильный порядок CSS | Стили перебиваются | icons → triplex → tot-ui-kit → локальные |
+| CSS после React импортов | Стили могут не применяться | CSS импорты в самом начале файла |
 
 ## Быстрый старт
 
 ```tsx
 import { Layout } from 'tot-ui-kit'
 
-const API_BASE = import.meta.env.VITE_API_BASE ?? 'http://localhost:4000'
-
 export const App = () => (
   <Layout
     menuProps={{
-      baseUrl: API_BASE,
+      baseUrl: 'http://localhost:4000',
       menuId: '<your-menu-id>',
       activeAppId: 'my-app',
       systemTitle: 'Моё приложение',
@@ -72,136 +64,108 @@ export const App = () => (
 )
 ```
 
-## Основные пропсы
-
-### Layout
-
-| Проп | Описание |
-|------|----------|
-| `menuProps` | Пропсы для `ScMainMenu` (кроме `theme`/`layout`) |
-| `initialMenuLayout` | Начальное состояние меню: `'full'` или `'compact'` |
-| `initialTheme` | Начальная тема: `'light'` или `'dark'` |
-| `headerTitle`, `headerSubtitle` | Заголовок и подзаголовок в шапке |
-| `upperMenuSlot`, `pageLabelSlot` | Кастомные слоты для шапки |
-| `footerLeft`, `footerRight` | Контент футера |
-
-### ScMainMenu
-
-| Проп | Описание |
-|------|----------|
-| `baseUrl` | Базовый URL API (формирует `${baseUrl}/idp/single-menu-data/${menuId}`) |
-| `menuId` | ID меню для загрузки данных |
-| `dataUrl` | Полный URL для загрузки (альтернатива `baseUrl` + `menuId`) |
-| `apps` | Готовый список приложений (вместо загрузки) |
-| `activeAppId` | ID активного приложения |
-| `useMockData` | Использовать встроенные mock-данные |
-| `iconResolver` | Кастомная функция для построения `AppDescriptor` |
-| `onLayoutChange` | Callback при переключении layout |
-| `onThemeChange` | Callback при переключении темы |
-
 ## Темы: светлая и тёмная
 
-### Как работает переключение темы
+### Как это работает
 
-1. **Layout** управляет темой автоматически:
-   - Устанавливает `data-theme="light"` или `data-theme="dark"` на `<html>`
-   - Добавляет классы `triplex-theme-light` / `triplex-theme-dark`
-   - Сохраняет выбор в `localStorage`
-   - Кнопка переключения встроена в меню
+Layout автоматически управляет темой:
 
-2. **CSS-переменные** определены в `global.css`:
-   - Светлая тема — значения по умолчанию
-   - Тёмная тема — переопределения в `html[data-theme='dark']`
+1. **Triplex ThemeProvider** — инжектит CSS-переменные для всех Triplex-компонентов (Button, TextField, Select, Tabs и т.д.)
+2. **CSS-переменные** — дополнительные переопределения в `global.css`
+3. **CSS-хак для иконок** — принудительное переопределение цветов SVG из `@sberbusiness/icons-next`
 
-3. **Triplex компоненты** используют CSS-переменные вида `--triplex-next-*`
+При смене темы Layout:
+- Устанавливает `data-theme="light"` / `data-theme="dark"` на `<html>`
+- Добавляет классы `triplex-theme-light` / `triplex-theme-dark`
+- Переключает `ThemeProvider` из triplex-next
+- Сохраняет выбор в `localStorage`
 
-### Использование темы в коде
+**Кнопка переключения** встроена в боковое меню (иконка солнца/луны).
+
+### Использование в коде
 
 ```tsx
 import { Layout, useTheme, getCurrentTheme } from 'tot-ui-kit'
 
-// Хук — автоматически обновляется при смене темы
+// Хук — реактивно обновляется при смене темы
 const theme = useTheme() // 'light' | 'dark'
 
 // Функция — получить текущую тему синхронно
 const currentTheme = getCurrentTheme()
 ```
 
-### Кастомизация цветов
-
-Переопределите CSS-переменные в своём CSS **после** импорта `global.css`:
+### Применение темы к своим компонентам
 
 ```css
-/* your-styles.css */
-html[data-theme='light'] {
-  /* Ваши цвета для светлой темы */
-  --triplex-next-Typography-Primary_Color-1-14-0: #333;
-  --triplex-next-ColorNeutral-90-1-14-0: #f0f0f0;
+/* Используйте CSS-переменные из Triplex */
+.my-card {
+  background: var(--triplex-next-Card-Static_General_Background-1-14-0);
+  color: var(--triplex-next-Typography-Primary_Color-1-14-0);
 }
 
-html[data-theme='dark'] {
-  /* Ваши цвета для тёмной темы */
-  --triplex-next-Typography-Primary_Color-1-14-0: #eee;
-  --triplex-next-ColorNeutral-90-1-14-0: #1a1a1a;
+/* Или через data-theme */
+html[data-theme='dark'] .my-card {
+  background: #2d2d30;
 }
 ```
 
-### Кастомизация меню
+### Поддерживаемые компоненты
 
-Меню использует классы с префиксом `sc-`:
+Тёмная тема работает из коробки для:
+- Typography, Button, Tabs
+- TextField, SelectField, Checkbox, Radio
+- Card, Modal, Dropdown
+- Link, Tag, Divider, Island
+- **Иконки** из `@sberbusiness/icons-next` (крестики, шевроны и т.д.)
 
-```css
-/* Светлая тема меню */
-.sc-main-menu_theme_light {
-  background-color: #your-light-bg;
-  color: #your-light-text;
-}
-
-/* Тёмная тема меню */
-.sc-main-menu_theme_dark {
-  background-color: #your-dark-bg;
-  color: #your-dark-text;
-}
-```
+> Подробная документация: см. **[DARK-THEME.md](./DARK-THEME.md)**
 
-### Основные CSS-переменные
+## Основные пропсы
 
-| Переменная | Назначение |
-|------------|------------|
-| `--triplex-next-Typography-Primary_Color-*` | Основной цвет текста |
-| `--triplex-next-Typography-Secondary_Color-*` | Вторичный цвет текста |
-| `--triplex-next-ColorNeutral-90-*` | Фон страницы |
-| `--triplex-next-Button-*` | Кнопки |
-| `--triplex-next-FormField-*` | Инпуты, селекты |
-| `--triplex-next-Card-*` | Карточки |
-| `--triplex-next-Dropdown-*` | Выпадающие списки |
+### Layout
 
-### Принципы подбора цветов для тёмной темы
+| Проп | Описание |
+|------|----------|
+| `menuProps` | Пропсы для `ScMainMenu` (кроме `theme`/`layout`) |
+| `initialMenuLayout` | Начальное состояние меню: `'full'` или `'compact'` |
+| `initialTheme` | Начальная тема: `'light'` или `'dark'` |
 
-| Элемент | Рекомендация |
-|---------|--------------|
-| Фон | `rgba(255, 255, 255, 0.05-0.15)` |
-| Фон hover | Увеличить opacity на 0.05-0.07 |
-| Фон selected | `rgba(255, 255, 255, 0.15-0.2)` |
-| Текст primary | `rgba(255, 255, 255, 1)` |
-| Текст secondary | `rgba(255, 255, 255, 0.65)` |
-| Текст disabled | `rgba(255, 255, 255, 0.35)` |
-| Бордеры | `rgba(255, 255, 255, 0.12-0.2)` |
+### ScMainMenu
 
-> Подробная документация по темам: см. `DARK-THEME.md`
+| Проп | Описание |
+|------|----------|
+| `baseUrl` | Базовый URL API |
+| `menuId` | ID меню для загрузки данных |
+| `activeAppId` | ID активного приложения |
+| `useMockData` | Использовать встроенные mock-данные |
+| `onLayoutChange` | Callback при переключении layout |
+| `onThemeChange` | Callback при переключении темы |
 
 ## Peer Dependencies
 
 ```json
 {
-  "@sberbusiness/triplex-next": "^1.0.0",
-  "@sberbusiness/icons-next": "^1.0.0",
+  "@sberbusiness/triplex-next": "^1.14.0",
+  "@sberbusiness/icons-next": "^1.11.0",
   "react": "^18.0.0",
   "react-dom": "^18.0.0"
 }
 ```
 
-> Рекомендуемые версии: `@sberbusiness/triplex-next@^1.14.0`, `@sberbusiness/icons-next@^1.12.0`
+## Структура файлов (темы)
+
+```
+tot-ui-kit/
+├── src/
+│   ├── global.css           # CSS-переменные для тёмной темы + хаки для иконок
+│   ├── components/
+│   │   └── Layout/
+│   │       └── Layout.tsx   # ThemeProvider + логика переключения
+│   └── theme/
+│       └── index.ts         # useTheme, getCurrentTheme
+├── DARK-THEME.md            # Подробная документация по темам
+└── README.md                # Этот файл
+```
 
 ## Лицензия
 

package/dist/index.cjs

@@ -125,6 +125,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/Layout/Layout.tsx
+var import_triplex_next = require("@sberbusiness/triplex-next");
 var import_react2 = require("react");
 
 // src/components/MainMenu/ScMainMenu.tsx
@@ -1091,6 +1092,10 @@ var Layout = ({
     root.classList.add(
       theme === "dark" ? "triplex-theme-dark" : "triplex-theme-light"
     );
+    root.classList.remove("icons-light_tptl2v", "icons-dark_7mk9a3");
+    root.classList.add(
+      theme === "dark" ? "icons-dark_7mk9a3" : "icons-light_tptl2v"
+    );
     try {
       window.localStorage.setItem(THEME_STORAGE_KEY, theme);
     } catch {
@@ -1110,9 +1115,12 @@ var Layout = ({
     setTheme(next);
     menuProps.onThemeChange?.(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  const triplexTheme = theme === "dark" ? import_triplex_next.ETriplexNextTheme.DARK : import_triplex_next.ETriplexNextTheme.LIGHT;
+  const scopeRef = (0, import_react2.useRef)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_triplex_next.ThemeProvider, { theme: triplexTheme, scopeRef, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
+      ref: scopeRef,
       className: appClassName,
       style: {
         paddingLeft: `${sidebarWidth}px`,
@@ -1134,23 +1142,23 @@ var Layout = ({
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("main", { className: styles2.main, children })
       ]
     }
-  );
+  ) });
 };
 var Layout_default = Layout;
 
 // src/components/PageLabel/PageLabel.tsx
-var import_triplex_next = require("@sberbusiness/triplex-next");
+var import_triplex_next2 = require("@sberbusiness/triplex-next");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var PageLabel = ({ title, subtitle }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_triplex_next.Text, { size: import_triplex_next.ETextSize.B2, type: import_triplex_next.EFontType.PRIMARY, children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_triplex_next.Text, { size: import_triplex_next.ETextSize.B2, type: import_triplex_next.EFontType.SECONDARY, children: subtitle })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_triplex_next2.Text, { size: import_triplex_next2.ETextSize.B2, type: import_triplex_next2.EFontType.PRIMARY, children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_triplex_next2.Text, { size: import_triplex_next2.ETextSize.B2, type: import_triplex_next2.EFontType.SECONDARY, children: subtitle })
   ] });
 };
 var PageLabel_default = PageLabel;
 
 // src/components/UpperMenu/UpperMenu.tsx
-var import_triplex_next2 = require("@sberbusiness/triplex-next");
+var import_triplex_next3 = require("@sberbusiness/triplex-next");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var styles3 = {
   root: "sc-upper-menu",
@@ -1165,10 +1173,10 @@ var UpperMenu = ({
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: styles3.root, children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: styles3.left, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_triplex_next2.Text, { size: import_triplex_next2.ETextSize.B2, type: import_triplex_next2.EFontType.PRIMARY, children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_triplex_next2.Text, { size: import_triplex_next2.ETextSize.B3, type: import_triplex_next2.EFontType.SECONDARY, children: subtitle })
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_triplex_next3.Text, { size: import_triplex_next3.ETextSize.B2, type: import_triplex_next3.EFontType.PRIMARY, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_triplex_next3.Text, { size: import_triplex_next3.ETextSize.B3, type: import_triplex_next3.EFontType.SECONDARY, children: subtitle })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: styles3.right, children: rightSlot ?? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_triplex_next2.Text, { size: import_triplex_next2.ETextSize.B3, type: import_triplex_next2.EFontType.SECONDARY, children: "\u041F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u044C" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: styles3.right, children: rightSlot ?? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_triplex_next3.Text, { size: import_triplex_next3.ETextSize.B3, type: import_triplex_next3.EFontType.SECONDARY, children: "\u041F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u044C" }) })
   ] });
 };
 var UpperMenu_default = UpperMenu;

package/dist/index.css

@@ -1,3 +1,199 @@
+/* src/global.css */
+html {
+  --triplex-next-Typography-Primary_Color-1-14-0: rgba(31, 31, 34, 1);
+  --triplex-next-Typography-Complementary_Color-1-14-0: rgba(31, 31, 34, 0.85);
+  --triplex-next-Typography-Secondary_Color-1-14-0: rgba(31, 31, 34, 0.65);
+  --triplex-next-Typography-Tertiary_Color-1-14-0: rgba(31, 31, 34, 0.55);
+  --triplex-next-Typography-Disabled_Color-1-14-0: rgba(31, 31, 34, 0.35);
+  --triplex-next-ColorNeutral-90-1-14-0: #f2f4f7;
+  --triplex-next-ColorNeutral-100-1-14-0: #ffffff;
+  background-color: var(--triplex-next-ColorNeutral-90-1-14-0, #f2f4f7);
+}
+html[data-theme=light] {
+  --triplex-next-Typography-Primary_Color-1-14-0: rgba(31, 31, 34, 1);
+  --triplex-next-Typography-Complementary_Color-1-14-0: rgba(31, 31, 34, 0.85);
+  --triplex-next-Typography-Secondary_Color-1-14-0: rgba(31, 31, 34, 0.65);
+  --triplex-next-Typography-Tertiary_Color-1-14-0: rgba(31, 31, 34, 0.55);
+  --triplex-next-Typography-Disabled_Color-1-14-0: rgba(31, 31, 34, 0.35);
+  --triplex-next-ColorNeutral-90-1-14-0: #f2f4f7;
+  --triplex-next-ColorNeutral-100-1-14-0: #ffffff;
+  background-color: var(--triplex-next-ColorNeutral-90-1-14-0, #f2f4f7);
+}
+html[data-theme=dark] {
+  --triplex-next-Typography-Primary_Color-1-14-0: rgba(255, 255, 255, 1);
+  --triplex-next-Typography-Complementary_Color-1-14-0: rgba( 255, 255, 255, 0.85 );
+  --triplex-next-Typography-Secondary_Color-1-14-0: rgba(255, 255, 255, 0.65);
+  --triplex-next-Typography-Tertiary_Color-1-14-0: rgba(255, 255, 255, 0.55);
+  --triplex-next-Typography-Disabled_Color-1-14-0: rgba(255, 255, 255, 0.35);
+  --triplex-next-ColorNeutral-90-1-14-0: #1f1f22;
+  --triplex-next-ColorNeutral-100-1-14-0: #1f1f22;
+  --triplex-next-Tabs-Type1_Background-1-14-0: rgba(255, 255, 255, 0.08);
+  --triplex-next-Tabs-Type2_Background-1-14-0: rgba(255, 255, 255, 0.05);
+  --triplex-next-Tabs-Type1_Tab_Background_Default-1-14-0: transparent;
+  --triplex-next-Tabs-Type2_Tab_Background_Default-1-14-0: transparent;
+  --triplex-next-Tabs-Type1_Tab_Background_Selected-1-14-0: rgba(255, 255, 255, 0.15);
+  --triplex-next-Tabs-Type2_Tab_Background_Selected-1-14-0: rgba(255, 255, 255, 0.12);
+  --triplex-next-Tabs-Type1_Tab_Background_Hover-1-14-0: rgba(255, 255, 255, 0.1);
+  --triplex-next-Tabs-Type2_Tab_Background_Hover-1-14-0: rgba(255, 255, 255, 0.08);
+  --triplex-next-Tabs-Type1_Tab_Color_Default-1-14-0: rgba(255, 255, 255, 0.65);
+  --triplex-next-Tabs-Type2_Tab_Color_Default-1-14-0: rgba(255, 255, 255, 0.65);
+  --triplex-next-Tabs-Type1_Tab_Color_Selected-1-14-0: rgba(255, 255, 255, 1);
+  --triplex-next-Tabs-Type2_Tab_Color_Selected-1-14-0: rgba(255, 255, 255, 1);
+  --triplex-next-Tabs-Type1_Tab_Color_Hover-1-14-0: rgba(255, 255, 255, 1);
+  --triplex-next-Tabs-Type2_Tab_Color_Hover-1-14-0: rgba(255, 255, 255, 1);
+  --triplex-next-Button-Secondary_Background_Default-1-14-0: rgba(255, 255, 255, 0.08);
+  --triplex-next-Button-Secondary_Background_Hover-1-14-0: rgba(255, 255, 255, 0.12);
+  --triplex-next-Button-Secondary_Background_Active-1-14-0: rgba(255, 255, 255, 0.15);
+  --triplex-next-Button-Secondary_Background_Disabled-1-14-0: rgba(255, 255, 255, 0.05);
+  --triplex-next-Button-Secondary_Color_Default-1-14-0: #21A19A;
+  --triplex-next-Button-Secondary_Color_Hover-1-14-0: #19BDB0;
+  --triplex-next-Button-Secondary_Color_Active-1-14-0: #007777;
+  --triplex-next-Button-Secondary_Color_Disabled-1-14-0: rgba(255, 255, 255, 0.35);
+  --triplex-next-Button-SecondaryLight_Background_Default-1-14-0: rgba(255, 255, 255, 0.1);
+  --triplex-next-Button-SecondaryLight_Background_Hover-1-14-0: rgba(255, 255, 255, 0.15);
+  --triplex-next-Button-SecondaryLight_Background_Active-1-14-0: rgba(255, 255, 255, 0.18);
+  --triplex-next-Button-SecondaryLight_Background_Disabled-1-14-0: rgba(255, 255, 255, 0.05);
+  --triplex-next-Button-SecondaryLight_Color_Default-1-14-0: #21A19A;
+  --triplex-next-Button-SecondaryLight_Color_Hover-1-14-0: #19BDB0;
+  --triplex-next-Button-SecondaryLight_Color_Active-1-14-0: #007777;
+  --triplex-next-Button-SecondaryLight_Color_Disabled-1-14-0: rgba(255, 255, 255, 0.35);
+  --triplex-next-Button-General_Background_Disabled-1-14-0: rgba(255, 255, 255, 0.08);
+  --triplex-next-Button-General_Color_Disabled-1-14-0: rgba(255, 255, 255, 0.35);
+  --triplex-next-Button-Danger_Background_Disabled-1-14-0: rgba(255, 255, 255, 0.08);
+  --triplex-next-Button-Danger_Color_Disabled-1-14-0: rgba(255, 255, 255, 0.35);
+  --triplex-next-Button-Link_Color_Default-1-14-0: #19BDB0;
+  --triplex-next-Button-Link_Color_Hover-1-14-0: #4BD9CF;
+  --triplex-next-Button-Link_Color_Active-1-14-0: #008985;
+  --triplex-next-Button-Link_Color_Disabled-1-14-0: rgba(255, 255, 255, 0.35);
+  --triplex-next-FormField-Background_Default-1-14-0: rgba(255, 255, 255, 0.08);
+  --triplex-next-FormField-Background_Hover-1-14-0: rgba(255, 255, 255, 0.12);
+  --triplex-next-FormField-Background_Active-1-14-0: rgba(255, 255, 255, 0.08);
+  --triplex-next-FormField-Background_Disabled-1-14-0: rgba(255, 255, 255, 0.05);
+  --triplex-next-FormField-Background_Error-1-14-0: rgba(230, 0, 55, 0.15);
+  --triplex-next-FormField-Background_Error_Hover-1-14-0: rgba(230, 0, 55, 0.2);
+  --triplex-next-FormField-Background_Warning-1-14-0: rgba(253, 101, 8, 0.15);
+  --triplex-next-FormField-Background_Warning_Hover-1-14-0: rgba(253, 101, 8, 0.2);
+  --triplex-next-FormField-Input_Color_Default-1-14-0: rgba(255, 255, 255, 1);
+  --triplex-next-FormField-Input_Color_Disabled-1-14-0: rgba(255, 255, 255, 0.35);
+  --triplex-next-FormField-Target_Color_Default-1-14-0: rgba(255, 255, 255, 1);
+  --triplex-next-FormField-Target_Color_Disabled-1-14-0: rgba(255, 255, 255, 0.45);
+  --triplex-next-FormField-Target_PlaceholderColor_Default-1-14-0: rgba(255, 255, 255, 0.65);
+  --triplex-next-FormField-Label_Color_Default-1-14-0: rgba(255, 255, 255, 0.65);
+  --triplex-next-FormField-Label_Color_Disabled-1-14-0: rgba(255, 255, 255, 0.35);
+  --triplex-next-FormField-Placeholder_Color-1-14-0: rgba(255, 255, 255, 0.65);
+  --triplex-next-SmallInput-Background-1-14-0: rgba(255, 255, 255, 0.08);
+  --triplex-next-SmallInput-Color-1-14-0: rgba(255, 255, 255, 1);
+  --triplex-next-SmallInput-PlaceholderColor-1-14-0: rgba(255, 255, 255, 0.65);
+  --triplex-next-Dropdown-Background-1-14-0: #2a2d31;
+  --triplex-next-Dropdown-Shadow-1-14-0: 0px 2px 12px rgba(0, 0, 0, 0.4);
+  --triplex-next-DropdownList-Background_Default-1-14-0: transparent;
+  --triplex-next-DropdownList-Background_Active-1-14-0: rgba(255, 255, 255, 0.1);
+  --triplex-next-DropdownList-Background_Selected-1-14-0: rgba(255, 255, 255, 0.15);
+  --triplex-next-DropdownList-Color-1-14-0: rgba(255, 255, 255, 1);
+  --triplex-next-Checkbox-Background_Default-1-14-0: rgba(255, 255, 255, 0.08);
+  --triplex-next-Checkbox-Background_Disabled-1-14-0: rgba(255, 255, 255, 0.05);
+  --triplex-next-Checkbox-Background_Checked_Disabled-1-14-0: rgba(255, 255, 255, 0.1);
+  --triplex-next-Checkbox-BorderColor_Default-1-14-0: 0 0 0 1px rgba(255, 255, 255, 0.25) inset;
+  --triplex-next-Checkbox-BorderColor_Disabled-1-14-0: 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
+  --triplex-next-Checkbox-Checkmark_Fill_Disabled-1-14-0: rgba(255, 255, 255, 0.35);
+  --triplex-next-Radio-Background_Default-1-14-0: rgba(255, 255, 255, 0.08);
+  --triplex-next-Radio-Background_Disabled-1-14-0: rgba(255, 255, 255, 0.05);
+  --triplex-next-Radio-Background_Checked_Disabled-1-14-0: rgba(255, 255, 255, 0.1);
+  --triplex-next-Radio-BorderColor_Default-1-14-0: 0 0 0 1px rgba(255, 255, 255, 0.25) inset;
+  --triplex-next-Radio-BorderColor_Disabled-1-14-0: 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
+  --triplex-next-Radio-Dot_Disabled-1-14-0: rgba(255, 255, 255, 0.35);
+  --triplex-next-Card-Static_General_Background-1-14-0: rgba(255, 255, 255, 0.08);
+  --triplex-next-Card-Static_Secondary_Background-1-14-0: rgba(255, 255, 255, 0.05);
+  --triplex-next-Card-Action_General_Background-1-14-0: rgba(255, 255, 255, 0.08);
+  --triplex-next-Card-Action_General_Background_Hover-1-14-0: rgba(255, 255, 255, 0.1);
+  --triplex-next-Card-Action_General_Background_Selected-1-14-0: rgba(255, 255, 255, 0.12);
+  --triplex-next-Card-Action_General_Background_Selected_Hover-1-14-0: rgba(255, 255, 255, 0.15);
+  --triplex-next-Card-Action_Secondary_Background-1-14-0: rgba(255, 255, 255, 0.05);
+  --triplex-next-Card-Action_Secondary_Background_Hover-1-14-0: rgba(255, 255, 255, 0.08);
+  --triplex-next-Card-Action_Secondary_Background_Selected-1-14-0: rgba(255, 255, 255, 0.1);
+  --triplex-next-Card-Action_Secondary_Background_Selected_Hover-1-14-0: rgba(255, 255, 255, 0.12);
+  --triplex-next-Card-Shadow_Default-1-14-0: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
+  --triplex-next-Card-Shadow_Hover-1-14-0: 0 4px 16px 0 rgba(0, 0, 0, 0.4);
+  --triplex-next-ModalWindow-Background-1-14-0: #2a2d31;
+  --triplex-next-ModalWindow-Backdrop_Background-1-14-0: rgba(0, 0, 0, 0.6);
+  --triplex-next-Island-Type1_Background-1-14-0: rgba(255, 255, 255, 0.08);
+  --triplex-next-Island-Type2_Background-1-14-0: rgba(255, 255, 255, 0.05);
+  --triplex-next-Island-Type3_Background-1-14-0: rgba(255, 255, 255, 0.03);
+  --triplex-next-Island-Type2_Shadow-1-14-0: 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
+  --triplex-next-ListItem-Background-1-14-0: rgba(255, 255, 255, 0.08);
+  --triplex-next-ListItem-Background_Dragging-1-14-0: rgba(255, 255, 255, 0.12);
+  --triplex-next-ListItem-Background_Selected-1-14-0: rgba(255, 255, 255, 0.15);
+  --triplex-next-ListItem-Shadow-1-14-0: 0 2px 8px rgba(0, 0, 0, 0.4);
+  --triplex-next-ListItemControlsButton-Background_Default-1-14-0: transparent;
+  --triplex-next-ListItemControlsButton-Background_Hover-1-14-0: rgba(255, 255, 255, 0.1);
+  --triplex-next-ListItemControlsButton-Background_Active-1-14-0: rgba(255, 255, 255, 0.15);
+  --triplex-next-ListItemControlsButton-Color_Default-1-14-0: rgba(255, 255, 255, 0.65);
+  --triplex-next-ListItemControlsButton-Color_Hover-1-14-0: rgba(255, 255, 255, 0.85);
+  --triplex-next-ListItemControlsButton-Color_Active-1-14-0: rgba(255, 255, 255, 1);
+  --triplex-next-Divider-Background-1-14-0: rgba(255, 255, 255, 0.12);
+  --triplex-next-Link-Text_Color_Default-1-14-0: #19BDB0;
+  --triplex-next-Link-Text_Color_Hover-1-14-0: #4BD9CF;
+  --triplex-next-Link-Text_Color_Active-1-14-0: #008985;
+  --triplex-next-Tag-Background-1-14-0: rgba(255, 255, 255, 0.12);
+  --triplex-next-MultiselectField-Divider_Color-1-14-0: rgba(255, 255, 255, 0.2);
+  background-color: var(--triplex-next-ColorNeutral-90-1-14-0, #1f1f22);
+}
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+html,
+body {
+  margin: 0;
+  padding: 0;
+  min-height: 100%;
+}
+body {
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+  line-height: 1.5;
+  background-color: inherit;
+  color: rgb(46, 52, 56);
+  background: rgb(246, 249, 252);
+}
+html[data-theme=dark] body {
+  color: rgb(201, 205, 207);
+  background: rgb(34, 36, 37);
+}
+#root {
+  min-height: 100vh;
+}
+a {
+  color: inherit;
+  text-decoration: none;
+}
+button {
+  font-family: inherit;
+}
+html[data-theme=dark] ._505n0h {
+  fill: #FFFFFF !important;
+  fill-opacity: 0.35 !important;
+}
+html[data-theme=dark] .hoverable:hover ._505n0h {
+  fill: #FFFFFF !important;
+  fill-opacity: 1 !important;
+}
+html[data-theme=dark] .hoverable:not(:disabled):active ._505n0h,
+html[data-theme=dark] .hoverable.active ._505n0h {
+  fill: #FFFFFF !important;
+  fill-opacity: 1 !important;
+}
+html[data-theme=dark] .hoverable:disabled ._505n0h,
+html[data-theme=dark] .hoverable.disabled ._505n0h {
+  fill: #FFFFFF !important;
+  fill-opacity: 0.15 !important;
+}
+
 /* src/components/Layout/styles.css */
 .sc-layout {
   height: 100vh;

package/dist/index.js

@@ -1,5 +1,6 @@
 // src/components/Layout/Layout.tsx
-import { useEffect as useEffect2, useState as useState2 } from "react";
+import { ThemeProvider, ETriplexNextTheme } from "@sberbusiness/triplex-next";
+import { useEffect as useEffect2, useRef, useState as useState2 } from "react";
 
 // src/components/MainMenu/ScMainMenu.tsx
 import { useEffect, useState } from "react";
@@ -965,6 +966,10 @@ var Layout = ({
     root.classList.add(
       theme === "dark" ? "triplex-theme-dark" : "triplex-theme-light"
     );
+    root.classList.remove("icons-light_tptl2v", "icons-dark_7mk9a3");
+    root.classList.add(
+      theme === "dark" ? "icons-dark_7mk9a3" : "icons-light_tptl2v"
+    );
     try {
       window.localStorage.setItem(THEME_STORAGE_KEY, theme);
     } catch {
@@ -984,9 +989,12 @@ var Layout = ({
     setTheme(next);
     menuProps.onThemeChange?.(next);
   };
-  return /* @__PURE__ */ jsxs3(
+  const triplexTheme = theme === "dark" ? ETriplexNextTheme.DARK : ETriplexNextTheme.LIGHT;
+  const scopeRef = useRef(null);
+  return /* @__PURE__ */ jsx5(ThemeProvider, { theme: triplexTheme, scopeRef, children: /* @__PURE__ */ jsxs3(
     "div",
     {
+      ref: scopeRef,
       className: appClassName,
       style: {
         paddingLeft: `${sidebarWidth}px`,
@@ -1008,7 +1016,7 @@ var Layout = ({
         /* @__PURE__ */ jsx5("main", { className: styles2.main, children })
       ]
     }
-  );
+  ) });
 };
 var Layout_default = Layout;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tot-ui-kit",
-  "version": "2.0.1",
+  "version": "2.2.0",
   "description": "UI Kit with Layout, MainMenu, and theme support for React applications",
   "type": "module",
   "main": "dist/index.cjs",

package/src/global.css

@@ -163,6 +163,14 @@ html[data-theme='dark'] {
   --triplex-next-ListItem-Background_Selected-1-14-0: rgba(255, 255, 255, 0.15);
   --triplex-next-ListItem-Shadow-1-14-0: 0 2px 8px rgba(0, 0, 0, 0.4);
 
+  /* ===== ListItemControlsButton (иконки: крестик очистки, шеврон и т.д.) ===== */
+  --triplex-next-ListItemControlsButton-Background_Default-1-14-0: transparent;
+  --triplex-next-ListItemControlsButton-Background_Hover-1-14-0: rgba(255, 255, 255, 0.1);
+  --triplex-next-ListItemControlsButton-Background_Active-1-14-0: rgba(255, 255, 255, 0.15);
+  --triplex-next-ListItemControlsButton-Color_Default-1-14-0: rgba(255, 255, 255, 0.65);
+  --triplex-next-ListItemControlsButton-Color_Hover-1-14-0: rgba(255, 255, 255, 0.85);
+  --triplex-next-ListItemControlsButton-Color_Active-1-14-0: rgba(255, 255, 255, 1);
+
   /* ===== Divider ===== */
   --triplex-next-Divider-Background-1-14-0: rgba(255, 255, 255, 0.12);
 
@@ -174,6 +182,9 @@ html[data-theme='dark'] {
   /* ===== Tag ===== */
   --triplex-next-Tag-Background-1-14-0: rgba(255, 255, 255, 0.12);
 
+  /* ===== MultiselectField ===== */
+  --triplex-next-MultiselectField-Divider_Color-1-14-0: rgba(255, 255, 255, 0.2);
+
   background-color: var(--triplex-next-ColorNeutral-90-1-14-0, #1f1f22);
 }
 
@@ -218,3 +229,29 @@ a {
 button {
   font-family: inherit;
 }
+
+/* ===== Icons-next: переопределение цветов иконок для тёмной темы ===== */
+/* Иконки из @sberbusiness/icons-next используют класс _505n0h для светлой темы (тёмная заливка)
+   и _1h7ffvx для тёмной темы (белая заливка). Поскольку Context не работает между
+   библиотекой и проектом (разные копии React), принудительно меняем цвета через CSS */
+html[data-theme='dark'] ._505n0h {
+  fill: #FFFFFF !important;
+  fill-opacity: 0.35 !important;
+}
+
+html[data-theme='dark'] .hoverable:hover ._505n0h {
+  fill: #FFFFFF !important;
+  fill-opacity: 1 !important;
+}
+
+html[data-theme='dark'] .hoverable:not(:disabled):active ._505n0h,
+html[data-theme='dark'] .hoverable.active ._505n0h {
+  fill: #FFFFFF !important;
+  fill-opacity: 1 !important;
+}
+
+html[data-theme='dark'] .hoverable:disabled ._505n0h,
+html[data-theme='dark'] .hoverable.disabled ._505n0h {
+  fill: #FFFFFF !important;
+  fill-opacity: 0.15 !important;
+}