wenay-react2 1.0.20 → 1.0.21

package/lib/style/menuRight.css

@@ -1,18 +1,5 @@
-:root {
-  --base-border: 1px solid rgba(255, 255, 255, 0.41);
-  --base-color-hover: #fff;
-}
-:root {
-  --menu-bg-color: rgba(12, 12, 12, 0.91);
-  --menu-blur: 10px;
-  --menu-border: var(--base-border);
-  --menu-active-background: rgba(255, 255, 255, 0.23);
-
-  --menu-item-color: var(--base-color-hover);
-  --menu-item-hover-color: #101010;
-  --menu-item-hover-bg-color: var(--base-color-hover);
-
-}
+/* Tokens moved to tokens.css (same values) */
+@import "./tokens.css";
 
 .menu-container{
   position: fixed;
@@ -74,8 +61,8 @@
 .submenu {
   background: var(--menu-bg-color);
 
-  backdrop-filter: blur(var(--menu-blur)); /* Размытие */
-  -webkit-backdrop-filter: blur(var(--menu-blur)); /* Для Safari */
+  backdrop-filter: blur(var(--menu-blur)); /* Blur */
+  -webkit-backdrop-filter: blur(var(--menu-blur)); /* For Safari */
 
   border: var(--menu-border);
   min-width: 200px;
@@ -85,11 +72,11 @@
   /*padding: 20px;*/
   /*margin: 20px;*/
   /*background-color: #fff;*/
-  /*border: 1px solid #ddd; !* базовая граница, можно убрать *!*/
+  /*border: 1px solid #ddd; !* base border, can be removed *!*/
   cursor: pointer;
 }
 
-/* Псевдоэлемент для отрисовки обводки */
+/* Pseudo-element for drawing the outline */
 .draggable-div::after {
   content: "";
   position: absolute;
@@ -102,19 +89,19 @@
   box-sizing: border-box;
 }
 
-/* Запуск анимации, когда зажата кнопка мыши */
+/* Start the animation while the mouse button is held */
 .draggable-div.outline-animation::after {
   animation: running-line 0.5s linear forwards;
 }
 
-/* Если анимация успела завершиться, обводка остается */
+/* If the animation completed, the outline remains */
 .draggable-div.outline-complete::after {
   border-color: #007bff;
-  /* Чтобы псевдоэлемент точно отображал полную обводку */
+  /* Ensure the pseudo-element shows the full outline */
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
 }
 
-/* Анимация «бегущей линии» */
+/* Running line animation */
 @keyframes running-line {
   0% {
     border-color: transparent;
@@ -122,15 +109,15 @@
   }
   25% {
     border-color: #007bff;
-    /* Рисуем верхнюю линию */
+    /* Draw the top line */
     clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
   }
   50% {
-    /* Добавляем правую сторону */
+    /* Add the right side */
     clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%);
   }
   75% {
-    /* Добавляем нижнюю сторону */
+    /* Add the bottom side */
     clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
   }
   100% {

package/lib/style/style.css

@@ -1,21 +1,7 @@
-:root {
-  /* Основные фоновые цвета */
-  --color-bg-dark: #131821;
-  --color-bg-light: #17202e;
+/* Tokens moved to tokens.css (same values) */
+@import "./tokens.css";
 
-  /* Скролл */
-  --color-scrollbar-track: rgba(255, 255, 255, 0);
-  --color-scrollbar-thumb: #1d262c;
-  /* альтернатива для MSTradeScroll */
-  --color-scrollbar-thumb-alt: #4c4562;
-
-  /* Основные текстовые/обводки */
-  --color-text-base: #c4c4c4;
-  --color-text-theme: #5D9FFA;
-  --color-border-common: rgb(50, 62, 71);
-}
-
-/* Сбрасываем box-sizing */
+/* Reset box-sizing */
 *,
 *::before,
 *::after {
@@ -24,7 +10,7 @@
   box-sizing: border-box;
 }
 
-/* Основные фоны */
+/* Main backgrounds */
 html,
 .fon {
   background: var(--color-bg-dark);
@@ -33,16 +19,16 @@ html,
   background: var(--color-bg-light);
 }
 
-/* Стили прокрутки (scrollbar) */
+/* Scrollbar styles */
 body::-webkit-scrollbar {
-  width: 12px; /* ширина scrollbar */
+  width: 12px; /* scrollbar width */
 }
 ::-webkit-scrollbar-track {
-  background: var(--color-scrollbar-track); /* цвет дорожки */
+  background: var(--color-scrollbar-track); /* track color */
 }
 ::-webkit-scrollbar-thumb {
-  background-color: var(--color-scrollbar-thumb); /* цвет плашки */
-  border-radius: 20px; /* закругления плашки */
+  background-color: var(--color-scrollbar-thumb); /* thumb color */
+  border-radius: 20px; /* thumb rounding */
 }
 
 .MSTradeScroll .ag-body-viewport::-webkit-scrollbar-track {
@@ -53,7 +39,7 @@ body::-webkit-scrollbar {
   border-radius: 20px;
 }
 
-/* Дублирующие селекторы scrollbar, если нужна поддержка под некоторыми движками */
+/* Duplicate scrollbar selectors for engines that need them */
 *::-webkit-scrollbar {
   width: 12px;
 }
@@ -65,7 +51,7 @@ body::-webkit-scrollbar {
   border-radius: 20px;
 }
 
-/* Кнопки */
+/* Buttons */
 .defButton {
   padding: 20px;
   display: block;
@@ -85,7 +71,7 @@ html {
   display: flex;
 }
 
-/* инпуты */
+/* Inputs */
 .toNumberInput {
   width: 70px;
   margin-right: 10%;
@@ -94,7 +80,7 @@ input:invalid {
   box-shadow: 0 0 5px 1px red;
 }
 
-/* Блоки-кнопки, миниэлементы */
+/* Button blocks, mini elements */
 .toButton,
 .miniEl,
 .toButtonA,
@@ -104,7 +90,7 @@ input:invalid {
   cursor: default;
 }
 
-/* Кнопки Switch */
+/* Switch buttons */
 .LeftMenuParameters {
   font-size: 12px;
   min-height: 30px;
@@ -116,7 +102,7 @@ input:invalid {
   font-size: 12px;
 }
 
-/* Заполнение последнего дива на всю оставшуюся часть */
+/* Fill the remaining space with the last div */
 .toSpace,
 .toSpaceColum {
   display: flex;
@@ -131,7 +117,7 @@ input:invalid {
   flex: 1 1 100%;
 }
 
-/* Кнопки */
+/* Buttons */
 .toButton {
   padding: 8px 10px;
   height: 30px;
@@ -148,7 +134,7 @@ input:invalid {
   display: block;
 }
 
-/* Меню */
+/* Menu */
 .MenuR {
   box-shadow: 0 0 20px 14px rgba(34, 60, 80, 0.2);
   margin-top: 4px;
@@ -178,7 +164,7 @@ input:invalid {
   border: solid 1px var(--color-border-common);
 }
 
-/* Наведение/активность */
+/* Hover/activity */
 .toButtonA,
 .miniEl:hover {
   user-select: none;
@@ -208,7 +194,7 @@ input:invalid {
   color: var(--color-text-theme);
 }
 
-/* Элементы меню-индикаторы */
+/* Menu indicator elements */
 .toIndicatorMenuButton {
   user-select: none;
   padding-left: 10px;
@@ -220,7 +206,7 @@ input:invalid {
   background: #3a4b57;
 }
 
-/* input-стили */
+/* Input styles */
 .inputCan {
   -webkit-writing-mode: horizontal-tb !important;
   text-rendering: auto;
@@ -254,7 +240,7 @@ input:invalid {
   border-image: none;
 }
 
-/* Кнопки формы */
+/* Form buttons */
 button[type="submit"] {
   background: #86b32d;
   border-bottom: 1px solid #5d7d1f;
@@ -270,7 +256,7 @@ input[type="color"] {
   display: block;
 }
 
-/* Основное тело */
+/* Main body */
 body {
   color: var(--color-text-base);
   vertical-align: middle;
@@ -285,13 +271,13 @@ body {
   display: flex;
 }
 
-/* Текстовые блоки */
+/* Text blocks */
 .toPTextIndicator {
   margin-block-start: 0.7em;
   margin-block-end: 0.7em;
 }
 
-/* React анимации появления/удаления */
+/* React enter/exit animations */
 .example-exit {
   opacity: 1;
   transform: translateY(0px);
@@ -302,7 +288,7 @@ body {
   transition: 0.3s;
 }
 
-/* Доп. стили .msTradeAlt */
+/* Additional .msTradeAlt styles */
 .msTradeAlt {
   font-size: 12px;
   cursor: default;
@@ -332,3 +318,29 @@ body {
   margin-top: -1px;
   margin-left: -1px;
 }
+
+/* Window close button (DivRnd3 and others) */
+.wenayCloseBtn {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: var(--color-bg-light);
+  border: 1px solid var(--color-border-common);
+  color: var(--color-text-base);
+  cursor: pointer;
+  user-select: none;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
+  transition: background 0.15s, color 0.15s, transform 0.15s;
+}
+.wenayCloseBtn:hover {
+  background: #e5484d;
+  border-color: #e5484d;
+  color: #fff;
+  transform: scale(1.08);
+}
+.wenayCloseBtn:active {
+  transform: scale(0.95);
+}

package/lib/style/tokens.css

@@ -0,0 +1,34 @@
+/* Shared library design tokens. Values are collected from style.css and menuRight.css
+   without changes. TS mirror for inline styles and ag-grid themes - src/common/src/styles/tokens.ts */
+:root {
+  /* Main background colors */
+  --color-bg-dark: #131821;
+  --color-bg-light: #17202e;
+
+  /* Scroll */
+  --color-scrollbar-track: rgba(255, 255, 255, 0);
+  --color-scrollbar-thumb: #1d262c;
+  /* alternative for MSTradeScroll */
+  --color-scrollbar-thumb-alt: #4c4562;
+
+  /* Main text/outline colors */
+  --color-text-base: #c4c4c4;
+  --color-text-theme: #5D9FFA;
+  --color-border-common: rgb(50, 62, 71);
+
+  /* Menu base */
+  --base-border: 1px solid rgba(255, 255, 255, 0.41);
+  --base-color-hover: #fff;
+
+  /* Menu */
+  --menu-bg-color: rgba(12, 12, 12, 0.91);
+  --menu-blur: 10px;
+  --menu-border: var(--base-border);
+  --menu-active-background: rgba(255, 255, 255, 0.23);
+  --menu-item-color: var(--base-color-hover);
+  --menu-item-hover-color: #101010;
+  --menu-item-hover-bg-color: var(--base-color-hover);
+
+  /* Layers */
+  --wenay-z-modal: 9999;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wenay-react2",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "description": "Common react",
   "strict": true,
   "main": "dist/index.js",
@@ -23,7 +23,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-rnd": "^10.5.3",
-    "wenay-common2": "^1.0.28"
+    "wenay-common2": "^1.0.49"
   },
   "peerDependencies": {
     "react": "^19.2.0",