tot-ui-kit 1.0.4 → 2.0.0

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 (3) hide show
  1. package/dist/index.css +4 -2
  2. package/package.json +2 -2
  3. package/src/global.css +139 -0
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.0",
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
+ "publish": "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 {