From 53e678b310f4826d9976ac0b5a3c300ded2cc6ad Mon Sep 17 00:00:00 2001
From: Viktor Fomin <viktor.fomin@onlyoffice.com>
Date: Mon, 10 Jun 2024 12:26:59 +0500
Subject: [PATCH] Shared: Themes: fix missing

---
 packages/shared/themes/base.ts | 62 ++++++++++++++++------------------
 packages/shared/themes/dark.ts | 46 ++++++++++++-------------
 2 files changed, 52 insertions(+), 56 deletions(-)

diff --git a/packages/shared/themes/base.ts b/packages/shared/themes/base.ts
index e97719d5c8..1d6cedf28e 100644
--- a/packages/shared/themes/base.ts
+++ b/packages/shared/themes/base.ts
@@ -343,7 +343,7 @@ export const getBaseTheme = () => {
       outline: "none",
       width: "100%",
 
-      border: "1px solid #D0D5DA",
+      border: `1px solid ${grayMid}`,
       background: white,
 
       borderConnect: "none",
@@ -356,7 +356,7 @@ export const getBaseTheme = () => {
       hoverConnectBackground: link,
       hoverConnectBorder: "none",
 
-      activeBorder: "1px solid #D0D5DA",
+      activeBorder: `1px solid ${grayMid}`,
       activeBackground: grayLightMid,
       activeConnectBorder: "none",
       activeConnectBackground: blueLightMid,
@@ -865,7 +865,7 @@ export const getBaseTheme = () => {
       inactiveBorderColor: grayMid,
       errorBorderColor: "#f21c0e",
       backgroundColor: white,
-      color: "#33333",
+      color: black,
       scrollBackground: gray,
       placeholderColor: gray,
       dialCodeColor: gray,
@@ -1033,8 +1033,8 @@ export const getBaseTheme = () => {
       },
 
       label: {
-        height: " 30px",
-        border: "1px solid #ECEEF1",
+        height: "30px",
+        border: `1px solid ${grayLightMid}`,
         borderRadius: "16px",
         minWidth: "fit-content",
         marginRight: "8px",
@@ -1913,7 +1913,7 @@ export const getBaseTheme = () => {
       background: grayLight,
 
       header: {
-        borderBottom: "1px solid #eceef1",
+        borderBottom: `1px solid ${grayLightMid}`,
         iconFill: grayMain,
       },
       control: {
@@ -1923,10 +1923,10 @@ export const getBaseTheme = () => {
 
       headerBurgerColor: grayMain,
 
-      verticalLine: "1px solid #eceef1",
+      verticalLine: `1px solid ${grayLightMid}`,
 
       profile: {
-        borderTop: "1px solid #eceef1",
+        borderTop: `1px solid ${grayLightMid}`,
         background: lightHover,
       },
 
@@ -2084,7 +2084,7 @@ export const getBaseTheme = () => {
 
       header: {
         backgroundColor: white,
-        background: `linear-gradient(180deg,#ffffff 2.81%,rgba(255, 255, 255, 0.91) 63.03%,rgba(255, 255, 255, 0) 100%)`,
+        background: `linear-gradient(180deg, ${white} 2.81%,rgba(255, 255, 255, 0.91) 63.03%,rgba(255, 255, 255, 0) 100%)`,
         trashErasureLabelBackground: grayLight,
         trashErasureLabelText: cyanBlueDarkShade,
       },
@@ -2194,8 +2194,8 @@ export const getBaseTheme = () => {
 
     filterInput: {
       button: {
-        border: "1px solid #d0d5da",
-        hoverBorder: "1px solid #a3a9ae",
+        border: `1px solid ${grayMid}`,
+        hoverBorder: `1px solid ${gray}`,
 
         openBackground: gray,
 
@@ -2204,7 +2204,7 @@ export const getBaseTheme = () => {
 
       filter: {
         background: white,
-        border: "1px solid #eceef1",
+        border: `1px solid ${grayLightMid}`,
         color: gray,
 
         separatorColor: grayLightMid,
@@ -2245,7 +2245,7 @@ export const getBaseTheme = () => {
 
     updateUserForm: {
       tooltipTextColor: black,
-      borderTop: "1px solid #eceef1",
+      borderTop: `1px solid ${grayLightMid}`,
     },
 
     tableContainer: {
@@ -2330,10 +2330,8 @@ export const getBaseTheme = () => {
           sideColor: gray,
           shareHoverColor: "#3b72a7",
 
-          borderImageRight:
-            "linear-gradient(to right, #ffffff 25px,#eceef1 24px)",
-          borderImageLeft:
-            "linear-gradient(to left, #ffffff 24px,#eceef1 24px)",
+          borderImageRight: `linear-gradient(to right, ${white} 25px, ${grayLightMid} 24px)`,
+          borderImageLeft: `linear-gradient(to left, ${white} 24px, ${grayLightMid} 24px)`,
 
           borderColor: grayLightMid,
           borderColorTransition: lightHover,
@@ -2593,8 +2591,8 @@ export const getBaseTheme = () => {
 
     connectedClouds: {
       color: grayMain,
-      borderBottom: `1px solid #eceef1`,
-      borderRight: `1px solid #d0d5da`,
+      borderBottom: `1px solid ${grayLightMid}`,
+      borderRight: `1px solid ${grayMid}`,
     },
 
     filesModalDialog: {
@@ -2719,14 +2717,14 @@ export const getBaseTheme = () => {
         fill: gray,
         loadingFill: grayMid,
 
-        borderBottom: "1px solid #eceef1",
-        borderTop: "1px solid #eceef1",
+        borderBottom: `1px solid ${grayLightMid}`,
+        borderTop: `1px solid ${grayLightMid}`,
         externalLinkBackground: grayLight,
         externalLinkSvg: black,
 
-        internalLinkBorder: "1px dashed #333333",
+        internalLinkBorder: `1px dashed ${black}`,
 
-        itemBorder: "1px dashed #333333",
+        itemBorder: `1px dashed ${black}`,
 
         itemOwnerColor: "rgb(163, 169, 174)",
 
@@ -3090,7 +3088,7 @@ export const getBaseTheme = () => {
             toggleContentBackground: grayLight,
             iconButton: black,
             iconButtonDisabled: gray,
-            border: "1px solid #eceef1",
+            border: `1px solid ${grayLightMid}`,
           },
 
           smtp: {
@@ -3100,7 +3098,7 @@ export const getBaseTheme = () => {
 
         backup: {
           rectangleBackgroundColor: grayLight,
-          separatorBorder: "1px solid #eceef1",
+          separatorBorder: `1px solid ${grayLightMid}`,
           warningColor: "#f21c0e",
           textColor: gray,
           backupCheckedListItemBackground: lightHover,
@@ -3113,14 +3111,14 @@ export const getBaseTheme = () => {
           backgroundColor: grayLight,
           linkColor: link,
           tariffText: cyanBlueDarkShade,
-          border: "1px solid #f8f9f9",
+          border: `1px solid ${grayLight}`,
           backgroundBenefitsColor: grayLight,
           rectangleColor: lightHover,
 
           priceContainer: {
             backgroundText: lightHover,
             background: "transparent",
-            border: "1px solid #d0d5da",
+            border: `1px solid ${grayMid}`,
             featureTextColor: gray,
 
             disableColor: gray,
@@ -3145,7 +3143,7 @@ export const getBaseTheme = () => {
           descriptionColor: grayMain,
           subtitleColor: black,
           workspaceBackground: white,
-          workspaceBorder: "1px solid #d0d5da",
+          workspaceBorder: `1px solid ${grayMid}`,
           stepDescriptionColor: black,
           fileInputIconColor: gray,
           infoBlockBackground: grayLight,
@@ -3165,7 +3163,7 @@ export const getBaseTheme = () => {
           importItemDescription: black,
           importIconColor: grayMain,
           groupMenuBackground: white,
-          groupMenuBorder: "1px solid #fff",
+          groupMenuBorder: `1px solid ${white}`,
           groupMenuBoxShadow: "rgba(4, 15, 27, 0.07) 0px 5px 5px 0px",
         },
         storageManagement: {
@@ -3239,7 +3237,7 @@ export const getBaseTheme = () => {
       },
       themePreview: {
         descriptionColor: gray,
-        border: "1px solid #eceef1",
+        border: `1px solid ${grayLightMid}`,
       },
       notifications: {
         textDescriptionColor: gray,
@@ -3270,11 +3268,11 @@ export const getBaseTheme = () => {
 
     codeInput: {
       background: white,
-      border: "1px solid #d0d5da",
+      border: `1px solid ${grayMid}`,
       color: black,
       lineColor: "#C4C4C4",
       disabledBackground: grayLight,
-      disabledBorder: "1px solid #ECEEF1",
+      disabledBorder: `1px solid ${grayLightMid}`,
       disabledColor: gray,
     },
 
diff --git a/packages/shared/themes/dark.ts b/packages/shared/themes/dark.ts
index 1a41076790..8b0f87722f 100644
--- a/packages/shared/themes/dark.ts
+++ b/packages/shared/themes/dark.ts
@@ -184,7 +184,7 @@ const Dark: TTheme = {
 
     border: {
       base: `1px solid ${outerSpace}`,
-      baseHover: `1px solid #858585`,
+      baseHover: `1px solid ${grayDark}`,
       baseActive: `1px solid #CCCCCC`,
       baseDisabled: `1px solid ${outerSpace}`,
 
@@ -326,13 +326,12 @@ const Dark: TTheme = {
     background: black,
 
     borderConnect: "none",
-    connectBackground:
-      "linear-gradient(0deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)), #333333",
+    connectBackground: `linear-gradient(0deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)), ${black}`,
 
     disableBackgroundColor: "rgba(0, 0, 0, 0.08)",
 
     hoverBackground: black,
-    hoverBorder: "1px solid #858585",
+    hoverBorder: `1px solid ${grayDark}`,
     hoverConnectBackground: white,
     hoverConnectBorder: "none",
 
@@ -449,14 +448,14 @@ const Dark: TTheme = {
 
   selectedItem: {
     background: grayDarkMid,
-    border: `1px solid #242424`,
+    border: `1px solid ${grayDarkMid}`,
     borderRadius: "3px",
 
     textBox: {
       padding: "0 8px",
       height: "32px",
       alignItems: "center",
-      borderRight: `1px solid #242424`,
+      borderRight: `1px solid ${grayDarkMid}`,
     },
 
     text: {
@@ -841,7 +840,7 @@ const Dark: TTheme = {
     activeBorderColor: blueMain,
     inactiveBorderColor: outerSpace,
     errorBorderColor: "#f21c0e",
-    backgroundColor: "#33333",
+    backgroundColor: black,
     color: white,
     scrollBackground: grayDark,
     placeholderColor: grayDark,
@@ -1018,8 +1017,7 @@ const Dark: TTheme = {
       hoverBackgroundColor: outerSpace,
       disableBackgroundColor: charlestonGreen,
       activeBackgroundColor: charlestonGreen,
-      activeSelectedBackgroundColor:
-        "linear-gradient(0deg, #FFFFFF, #FFFFFF), linear-gradient(0deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18))",
+      activeSelectedBackgroundColor: `linear-gradient(0deg, ${white}, ${white}), linear-gradient(0deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18))`,
 
       title: {
         padding: "4px 16px",
@@ -1230,7 +1228,7 @@ const Dark: TTheme = {
       runnableTrack: {
         background: grayDarkMid,
         focusBackground: grayDarkMid,
-        border: `1.4px solid #242424`,
+        border: `1.4px solid ${grayDarkMid}`,
         borderRadius: "5.6px",
         width: "100%",
         height: "8px",
@@ -1261,7 +1259,7 @@ const Dark: TTheme = {
 
       rangeTrack: {
         background: grayDarkMid,
-        border: `1.4px solid #242424`,
+        border: `1.4px solid ${grayDarkMid}`,
         borderRadius: "5.6px",
         width: "100%",
         height: "8px",
@@ -1292,14 +1290,14 @@ const Dark: TTheme = {
       fillLower: {
         background: grayDarkMid,
         focusBackground: grayDarkMid,
-        border: `1.4px solid #242424`,
+        border: `1.4px solid ${grayDarkMid}`,
         borderRadius: "11.2px",
       },
 
       fillUpper: {
         background: grayDarkMid,
         focusBackground: grayDarkMid,
-        border: `1.4px solid #242424`,
+        border: `1.4px solid ${grayDarkMid}`,
         borderRadius: "11.2px",
       },
     },
@@ -1311,7 +1309,7 @@ const Dark: TTheme = {
     container: {
       miniPreview: {
         width: "160px",
-        border: `1px solid #242424`,
+        border: `1px solid ${grayDarkMid}`,
         borderRadius: "6px",
         padding: "8px",
       },
@@ -2030,7 +2028,7 @@ const Dark: TTheme = {
   },
 
   header: {
-    backgroundColor: "#282828 ",
+    backgroundColor: charlestonGreen,
     recoveryColor: "#4C4C4C",
     linkColor: "#606060",
     productColor: grayMaxLight,
@@ -2060,7 +2058,7 @@ const Dark: TTheme = {
 
     header: {
       backgroundColor: black,
-      background: `linear-gradient(180deg, #333333 2.81%, rgba(51, 51, 51, 0.9) 63.03%, rgba(51, 51, 51, 0) 100%);`,
+      background: `linear-gradient(180deg, ${black} 2.81%, rgba(51, 51, 51, 0.9) 63.03%, rgba(51, 51, 51, 0) 100%);`,
       trashErasureLabelBackground: "#292929",
       trashErasureLabelText: "#ADADAD",
     },
@@ -2173,7 +2171,7 @@ const Dark: TTheme = {
   filterInput: {
     button: {
       border: `1px solid ${outerSpace}`,
-      hoverBorder: "1px solid #858585",
+      hoverBorder: `1px solid ${grayDark}`,
 
       openBackground: gray,
 
@@ -2307,8 +2305,8 @@ const Dark: TTheme = {
 
         shareHoverColor: grayMaxLight,
 
-        borderImageRight: `linear-gradient(to right, #333333 25px, ${outerSpace} 24px)`,
-        borderImageLeft: `linear-gradient(to left, #333333 20px, ${outerSpace} 24px)`,
+        borderImageRight: `linear-gradient(to right, ${black} 25px, ${outerSpace} 24px)`,
+        borderImageLeft: `linear-gradient(to left, ${black} 20px, ${outerSpace} 24px)`,
 
         borderColor: outerSpace,
         borderColorTransition: outerSpace,
@@ -2699,9 +2697,9 @@ const Dark: TTheme = {
       externalLinkBackground: "#292929",
       externalLinkSvg: grayMaxLight,
 
-      internalLinkBorder: "1px dashed #eeeeee",
+      internalLinkBorder: `1px dashed ${grayMaxLight}`,
 
-      itemBorder: "1px dashed #333333",
+      itemBorder: `1px dashed ${black}`,
 
       itemOwnerColor: grayDark,
 
@@ -3089,13 +3087,13 @@ const Dark: TTheme = {
         linkColor: link,
         tariffText: grayDark,
         border: `1px solid ${outerSpace}`,
-        backgroundBenefitsColor: "#3333",
+        backgroundBenefitsColor: black,
         rectangleColor: veryDarkGrey,
 
         priceContainer: {
           backgroundText: veryDarkGrey,
           background: charlestonGreen,
-          border: "1px solid #282828",
+          border: `1px solid ${charlestonGreen}`,
           featureTextColor: grayDark,
           disableColor: grayDark,
           trackNumberColor: grayDark,
@@ -3273,7 +3271,7 @@ const Dark: TTheme = {
 
   emailChips: {
     borderColor: grayDark,
-    dashedBorder: "1px dashed #fff",
+    dashedBorder: `1px dashed ${white}`,
   },
 
   dialogs: {