tot-ui-kit 1.0.4 → 2.0.1

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.
Files changed (4) hide show
  1. package/README.md +91 -0
  2. package/dist/index.css +4 -2
  3. package/package.json +2 -2
  4. package/src/global.css +139 -0
package/README.md CHANGED
@@ -99,6 +99,97 @@ export const App = () => (
99
99
  | `onLayoutChange` | Callback при переключении layout |
100
100
  | `onThemeChange` | Callback при переключении темы |
101
101
 
102
+ ## Темы: светлая и тёмная
103
+
104
+ ### Как работает переключение темы
105
+
106
+ 1. **Layout** управляет темой автоматически:
107
+ - Устанавливает `data-theme="light"` или `data-theme="dark"` на `<html>`
108
+ - Добавляет классы `triplex-theme-light` / `triplex-theme-dark`
109
+ - Сохраняет выбор в `localStorage`
110
+ - Кнопка переключения встроена в меню
111
+
112
+ 2. **CSS-переменные** определены в `global.css`:
113
+ - Светлая тема — значения по умолчанию
114
+ - Тёмная тема — переопределения в `html[data-theme='dark']`
115
+
116
+ 3. **Triplex компоненты** используют CSS-переменные вида `--triplex-next-*`
117
+
118
+ ### Использование темы в коде
119
+
120
+ ```tsx
121
+ import { Layout, useTheme, getCurrentTheme } from 'tot-ui-kit'
122
+
123
+ // Хук — автоматически обновляется при смене темы
124
+ const theme = useTheme() // 'light' | 'dark'
125
+
126
+ // Функция — получить текущую тему синхронно
127
+ const currentTheme = getCurrentTheme()
128
+ ```
129
+
130
+ ### Кастомизация цветов
131
+
132
+ Переопределите CSS-переменные в своём CSS **после** импорта `global.css`:
133
+
134
+ ```css
135
+ /* your-styles.css */
136
+ html[data-theme='light'] {
137
+ /* Ваши цвета для светлой темы */
138
+ --triplex-next-Typography-Primary_Color-1-14-0: #333;
139
+ --triplex-next-ColorNeutral-90-1-14-0: #f0f0f0;
140
+ }
141
+
142
+ html[data-theme='dark'] {
143
+ /* Ваши цвета для тёмной темы */
144
+ --triplex-next-Typography-Primary_Color-1-14-0: #eee;
145
+ --triplex-next-ColorNeutral-90-1-14-0: #1a1a1a;
146
+ }
147
+ ```
148
+
149
+ ### Кастомизация меню
150
+
151
+ Меню использует классы с префиксом `sc-`:
152
+
153
+ ```css
154
+ /* Светлая тема меню */
155
+ .sc-main-menu_theme_light {
156
+ background-color: #your-light-bg;
157
+ color: #your-light-text;
158
+ }
159
+
160
+ /* Тёмная тема меню */
161
+ .sc-main-menu_theme_dark {
162
+ background-color: #your-dark-bg;
163
+ color: #your-dark-text;
164
+ }
165
+ ```
166
+
167
+ ### Основные CSS-переменные
168
+
169
+ | Переменная | Назначение |
170
+ |------------|------------|
171
+ | `--triplex-next-Typography-Primary_Color-*` | Основной цвет текста |
172
+ | `--triplex-next-Typography-Secondary_Color-*` | Вторичный цвет текста |
173
+ | `--triplex-next-ColorNeutral-90-*` | Фон страницы |
174
+ | `--triplex-next-Button-*` | Кнопки |
175
+ | `--triplex-next-FormField-*` | Инпуты, селекты |
176
+ | `--triplex-next-Card-*` | Карточки |
177
+ | `--triplex-next-Dropdown-*` | Выпадающие списки |
178
+
179
+ ### Принципы подбора цветов для тёмной темы
180
+
181
+ | Элемент | Рекомендация |
182
+ |---------|--------------|
183
+ | Фон | `rgba(255, 255, 255, 0.05-0.15)` |
184
+ | Фон hover | Увеличить opacity на 0.05-0.07 |
185
+ | Фон selected | `rgba(255, 255, 255, 0.15-0.2)` |
186
+ | Текст primary | `rgba(255, 255, 255, 1)` |
187
+ | Текст secondary | `rgba(255, 255, 255, 0.65)` |
188
+ | Текст disabled | `rgba(255, 255, 255, 0.35)` |
189
+ | Бордеры | `rgba(255, 255, 255, 0.12-0.2)` |
190
+
191
+ > Подробная документация по темам: см. `DARK-THEME.md`
192
+
102
193
  ## Peer Dependencies
103
194
 
104
195
  ```json
package/dist/index.css CHANGED
@@ -1,9 +1,10 @@
1
1
  /* src/components/Layout/styles.css */
2
2
  .sc-layout {
3
- min-height: 100vh;
3
+ height: 100vh;
4
4
  display: flex;
5
5
  flex-direction: column;
6
6
  box-sizing: border-box;
7
+ overflow: hidden;
7
8
  transition:
8
9
  padding-left 0.3s ease,
9
10
  background-color 0.3s ease,
@@ -51,8 +52,9 @@
51
52
  }
52
53
  .sc-layout__main {
53
54
  flex: 1;
55
+ min-height: 0;
54
56
  box-sizing: border-box;
55
- overflow: auto;
57
+ overflow: hidden;
56
58
  transition: background-color 0.3s ease;
57
59
  }
58
60
  .sc-layout_theme_light .sc-layout__main {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tot-ui-kit",
3
- "version": "1.0.4",
3
+ "version": "2.0.1",
4
4
  "description": "UI Kit with Layout, MainMenu, and theme support for React applications",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",
@@ -27,7 +27,7 @@
27
27
  "lint:fix": "eslint . --fix",
28
28
  "typecheck": "tsc --noEmit",
29
29
  "prepublishOnly": "npm run build",
30
- "publish": " npm publish --access public"
30
+ "send": "npm publish --access public"
31
31
  },
32
32
  "keywords": [
33
33
  "react",
package/src/global.css CHANGED
@@ -44,6 +44,136 @@ html[data-theme='dark'] {
44
44
  --triplex-next-ColorNeutral-90-1-14-0: #1f1f22;
45
45
  --triplex-next-ColorNeutral-100-1-14-0: #1f1f22;
46
46
 
47
+ /* ===== Tabs ===== */
48
+ --triplex-next-Tabs-Type1_Background-1-14-0: rgba(255, 255, 255, 0.08);
49
+ --triplex-next-Tabs-Type2_Background-1-14-0: rgba(255, 255, 255, 0.05);
50
+ --triplex-next-Tabs-Type1_Tab_Background_Default-1-14-0: transparent;
51
+ --triplex-next-Tabs-Type2_Tab_Background_Default-1-14-0: transparent;
52
+ --triplex-next-Tabs-Type1_Tab_Background_Selected-1-14-0: rgba(255, 255, 255, 0.15);
53
+ --triplex-next-Tabs-Type2_Tab_Background_Selected-1-14-0: rgba(255, 255, 255, 0.12);
54
+ --triplex-next-Tabs-Type1_Tab_Background_Hover-1-14-0: rgba(255, 255, 255, 0.1);
55
+ --triplex-next-Tabs-Type2_Tab_Background_Hover-1-14-0: rgba(255, 255, 255, 0.08);
56
+ --triplex-next-Tabs-Type1_Tab_Color_Default-1-14-0: rgba(255, 255, 255, 0.65);
57
+ --triplex-next-Tabs-Type2_Tab_Color_Default-1-14-0: rgba(255, 255, 255, 0.65);
58
+ --triplex-next-Tabs-Type1_Tab_Color_Selected-1-14-0: rgba(255, 255, 255, 1);
59
+ --triplex-next-Tabs-Type2_Tab_Color_Selected-1-14-0: rgba(255, 255, 255, 1);
60
+ --triplex-next-Tabs-Type1_Tab_Color_Hover-1-14-0: rgba(255, 255, 255, 1);
61
+ --triplex-next-Tabs-Type2_Tab_Color_Hover-1-14-0: rgba(255, 255, 255, 1);
62
+
63
+ /* ===== Button ===== */
64
+ --triplex-next-Button-Secondary_Background_Default-1-14-0: rgba(255, 255, 255, 0.08);
65
+ --triplex-next-Button-Secondary_Background_Hover-1-14-0: rgba(255, 255, 255, 0.12);
66
+ --triplex-next-Button-Secondary_Background_Active-1-14-0: rgba(255, 255, 255, 0.15);
67
+ --triplex-next-Button-Secondary_Background_Disabled-1-14-0: rgba(255, 255, 255, 0.05);
68
+ --triplex-next-Button-Secondary_Color_Default-1-14-0: #21A19A;
69
+ --triplex-next-Button-Secondary_Color_Hover-1-14-0: #19BDB0;
70
+ --triplex-next-Button-Secondary_Color_Active-1-14-0: #007777;
71
+ --triplex-next-Button-Secondary_Color_Disabled-1-14-0: rgba(255, 255, 255, 0.35);
72
+ --triplex-next-Button-SecondaryLight_Background_Default-1-14-0: rgba(255, 255, 255, 0.1);
73
+ --triplex-next-Button-SecondaryLight_Background_Hover-1-14-0: rgba(255, 255, 255, 0.15);
74
+ --triplex-next-Button-SecondaryLight_Background_Active-1-14-0: rgba(255, 255, 255, 0.18);
75
+ --triplex-next-Button-SecondaryLight_Background_Disabled-1-14-0: rgba(255, 255, 255, 0.05);
76
+ --triplex-next-Button-SecondaryLight_Color_Default-1-14-0: #21A19A;
77
+ --triplex-next-Button-SecondaryLight_Color_Hover-1-14-0: #19BDB0;
78
+ --triplex-next-Button-SecondaryLight_Color_Active-1-14-0: #007777;
79
+ --triplex-next-Button-SecondaryLight_Color_Disabled-1-14-0: rgba(255, 255, 255, 0.35);
80
+ --triplex-next-Button-General_Background_Disabled-1-14-0: rgba(255, 255, 255, 0.08);
81
+ --triplex-next-Button-General_Color_Disabled-1-14-0: rgba(255, 255, 255, 0.35);
82
+ --triplex-next-Button-Danger_Background_Disabled-1-14-0: rgba(255, 255, 255, 0.08);
83
+ --triplex-next-Button-Danger_Color_Disabled-1-14-0: rgba(255, 255, 255, 0.35);
84
+ --triplex-next-Button-Link_Color_Default-1-14-0: #19BDB0;
85
+ --triplex-next-Button-Link_Color_Hover-1-14-0: #4BD9CF;
86
+ --triplex-next-Button-Link_Color_Active-1-14-0: #008985;
87
+ --triplex-next-Button-Link_Color_Disabled-1-14-0: rgba(255, 255, 255, 0.35);
88
+
89
+ /* ===== FormField (TextField, Select, Input) ===== */
90
+ --triplex-next-FormField-Background_Default-1-14-0: rgba(255, 255, 255, 0.08);
91
+ --triplex-next-FormField-Background_Hover-1-14-0: rgba(255, 255, 255, 0.12);
92
+ --triplex-next-FormField-Background_Active-1-14-0: rgba(255, 255, 255, 0.08);
93
+ --triplex-next-FormField-Background_Disabled-1-14-0: rgba(255, 255, 255, 0.05);
94
+ --triplex-next-FormField-Background_Error-1-14-0: rgba(230, 0, 55, 0.15);
95
+ --triplex-next-FormField-Background_Error_Hover-1-14-0: rgba(230, 0, 55, 0.2);
96
+ --triplex-next-FormField-Background_Warning-1-14-0: rgba(253, 101, 8, 0.15);
97
+ --triplex-next-FormField-Background_Warning_Hover-1-14-0: rgba(253, 101, 8, 0.2);
98
+ --triplex-next-FormField-Input_Color_Default-1-14-0: rgba(255, 255, 255, 1);
99
+ --triplex-next-FormField-Input_Color_Disabled-1-14-0: rgba(255, 255, 255, 0.35);
100
+ --triplex-next-FormField-Target_Color_Default-1-14-0: rgba(255, 255, 255, 1);
101
+ --triplex-next-FormField-Target_Color_Disabled-1-14-0: rgba(255, 255, 255, 0.45);
102
+ --triplex-next-FormField-Target_PlaceholderColor_Default-1-14-0: rgba(255, 255, 255, 0.65);
103
+ --triplex-next-FormField-Label_Color_Default-1-14-0: rgba(255, 255, 255, 0.65);
104
+ --triplex-next-FormField-Label_Color_Disabled-1-14-0: rgba(255, 255, 255, 0.35);
105
+ --triplex-next-FormField-Placeholder_Color-1-14-0: rgba(255, 255, 255, 0.65);
106
+
107
+ /* ===== SmallInput ===== */
108
+ --triplex-next-SmallInput-Background-1-14-0: rgba(255, 255, 255, 0.08);
109
+ --triplex-next-SmallInput-Color-1-14-0: rgba(255, 255, 255, 1);
110
+ --triplex-next-SmallInput-PlaceholderColor-1-14-0: rgba(255, 255, 255, 0.65);
111
+
112
+ /* ===== Dropdown ===== */
113
+ --triplex-next-Dropdown-Background-1-14-0: #2a2d31;
114
+ --triplex-next-Dropdown-Shadow-1-14-0: 0px 2px 12px rgba(0, 0, 0, 0.4);
115
+ --triplex-next-DropdownList-Background_Default-1-14-0: transparent;
116
+ --triplex-next-DropdownList-Background_Active-1-14-0: rgba(255, 255, 255, 0.1);
117
+ --triplex-next-DropdownList-Background_Selected-1-14-0: rgba(255, 255, 255, 0.15);
118
+ --triplex-next-DropdownList-Color-1-14-0: rgba(255, 255, 255, 1);
119
+
120
+ /* ===== Checkbox ===== */
121
+ --triplex-next-Checkbox-Background_Default-1-14-0: rgba(255, 255, 255, 0.08);
122
+ --triplex-next-Checkbox-Background_Disabled-1-14-0: rgba(255, 255, 255, 0.05);
123
+ --triplex-next-Checkbox-Background_Checked_Disabled-1-14-0: rgba(255, 255, 255, 0.1);
124
+ --triplex-next-Checkbox-BorderColor_Default-1-14-0: 0 0 0 1px rgba(255, 255, 255, 0.25) inset;
125
+ --triplex-next-Checkbox-BorderColor_Disabled-1-14-0: 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
126
+ --triplex-next-Checkbox-Checkmark_Fill_Disabled-1-14-0: rgba(255, 255, 255, 0.35);
127
+
128
+ /* ===== Radio ===== */
129
+ --triplex-next-Radio-Background_Default-1-14-0: rgba(255, 255, 255, 0.08);
130
+ --triplex-next-Radio-Background_Disabled-1-14-0: rgba(255, 255, 255, 0.05);
131
+ --triplex-next-Radio-Background_Checked_Disabled-1-14-0: rgba(255, 255, 255, 0.1);
132
+ --triplex-next-Radio-BorderColor_Default-1-14-0: 0 0 0 1px rgba(255, 255, 255, 0.25) inset;
133
+ --triplex-next-Radio-BorderColor_Disabled-1-14-0: 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
134
+ --triplex-next-Radio-Dot_Disabled-1-14-0: rgba(255, 255, 255, 0.35);
135
+
136
+ /* ===== Card ===== */
137
+ --triplex-next-Card-Static_General_Background-1-14-0: rgba(255, 255, 255, 0.08);
138
+ --triplex-next-Card-Static_Secondary_Background-1-14-0: rgba(255, 255, 255, 0.05);
139
+ --triplex-next-Card-Action_General_Background-1-14-0: rgba(255, 255, 255, 0.08);
140
+ --triplex-next-Card-Action_General_Background_Hover-1-14-0: rgba(255, 255, 255, 0.1);
141
+ --triplex-next-Card-Action_General_Background_Selected-1-14-0: rgba(255, 255, 255, 0.12);
142
+ --triplex-next-Card-Action_General_Background_Selected_Hover-1-14-0: rgba(255, 255, 255, 0.15);
143
+ --triplex-next-Card-Action_Secondary_Background-1-14-0: rgba(255, 255, 255, 0.05);
144
+ --triplex-next-Card-Action_Secondary_Background_Hover-1-14-0: rgba(255, 255, 255, 0.08);
145
+ --triplex-next-Card-Action_Secondary_Background_Selected-1-14-0: rgba(255, 255, 255, 0.1);
146
+ --triplex-next-Card-Action_Secondary_Background_Selected_Hover-1-14-0: rgba(255, 255, 255, 0.12);
147
+ --triplex-next-Card-Shadow_Default-1-14-0: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
148
+ --triplex-next-Card-Shadow_Hover-1-14-0: 0 4px 16px 0 rgba(0, 0, 0, 0.4);
149
+
150
+ /* ===== Modal ===== */
151
+ --triplex-next-ModalWindow-Background-1-14-0: #2a2d31;
152
+ --triplex-next-ModalWindow-Backdrop_Background-1-14-0: rgba(0, 0, 0, 0.6);
153
+
154
+ /* ===== Island ===== */
155
+ --triplex-next-Island-Type1_Background-1-14-0: rgba(255, 255, 255, 0.08);
156
+ --triplex-next-Island-Type2_Background-1-14-0: rgba(255, 255, 255, 0.05);
157
+ --triplex-next-Island-Type3_Background-1-14-0: rgba(255, 255, 255, 0.03);
158
+ --triplex-next-Island-Type2_Shadow-1-14-0: 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
159
+
160
+ /* ===== ListItem ===== */
161
+ --triplex-next-ListItem-Background-1-14-0: rgba(255, 255, 255, 0.08);
162
+ --triplex-next-ListItem-Background_Dragging-1-14-0: rgba(255, 255, 255, 0.12);
163
+ --triplex-next-ListItem-Background_Selected-1-14-0: rgba(255, 255, 255, 0.15);
164
+ --triplex-next-ListItem-Shadow-1-14-0: 0 2px 8px rgba(0, 0, 0, 0.4);
165
+
166
+ /* ===== Divider ===== */
167
+ --triplex-next-Divider-Background-1-14-0: rgba(255, 255, 255, 0.12);
168
+
169
+ /* ===== Link ===== */
170
+ --triplex-next-Link-Text_Color_Default-1-14-0: #19BDB0;
171
+ --triplex-next-Link-Text_Color_Hover-1-14-0: #4BD9CF;
172
+ --triplex-next-Link-Text_Color_Active-1-14-0: #008985;
173
+
174
+ /* ===== Tag ===== */
175
+ --triplex-next-Tag-Background-1-14-0: rgba(255, 255, 255, 0.12);
176
+
47
177
  background-color: var(--triplex-next-ColorNeutral-90-1-14-0, #1f1f22);
48
178
  }
49
179
 
@@ -65,6 +195,15 @@ body {
65
195
  sans-serif;
66
196
  line-height: 1.5;
67
197
  background-color: inherit;
198
+ /* Светлая тема по умолчанию (как в Triplex Storybook) */
199
+ color: rgb(46, 52, 56);
200
+ background: rgb(246, 249, 252);
201
+ }
202
+
203
+ html[data-theme='dark'] body {
204
+ /* Тёмная тема (как в Triplex Storybook) */
205
+ color: rgb(201, 205, 207);
206
+ background: rgb(34, 36, 37);
68
207
  }
69
208
 
70
209
  #root {