From ed3a330fc6cd454f43e5add8c8a96a8ff2d73aa7 Mon Sep 17 00:00:00 2001
From: Viktor Fomin <viktor.fomin@onlyoffice.com>
Date: Mon, 10 Jun 2024 20:14:36 +0500
Subject: [PATCH] Shared: Themes: delete useless, change colors

---
 packages/shared/themes/base.ts         | 219 +++++++++++--------------
 packages/shared/themes/dark.ts         | 209 ++++++++++-------------
 packages/shared/themes/globalColors.ts |  18 +-
 3 files changed, 187 insertions(+), 259 deletions(-)

diff --git a/packages/shared/themes/base.ts b/packages/shared/themes/base.ts
index 1b9259d2e5..6a06365080 100644
--- a/packages/shared/themes/base.ts
+++ b/packages/shared/themes/base.ts
@@ -44,51 +44,66 @@ export type TColorScheme = {
 };
 
 const {
-  black,
   white,
-
-  grayLight,
-  grayLightMid,
-  grayStrong,
-
-  gray,
-  lightGrayDark,
-  shuttleGrey,
-
-  blueMain,
-  blueDisabled,
-
-  lightSecondMain,
-  lightSecondMainHover,
-  blueMaya,
-  lightSecondMainDisabled,
-
-  lightStatusWarning,
-
-  orangePressed,
-
-  link,
-
-  warningColor,
-  red,
-  blueLightMid,
-
-  grayText,
-  lightToastInfo,
-  lightMediumGoldenrod,
-  lightToastDone,
-  lightToastWarning,
-  lightToastAlert,
+  black,
   darkBlack,
-  lightGrayHover,
-  lightGraySelected,
 
-  lightErrorStatus,
+  lightGrayBlackout,
+  darkGrayBlackout,
+  grayLight,
   darkGrayLight,
+  lightGrayHover,
+  lightDarkGrayHover,
+  grayLightMid,
+  grayDarkMid,
+  lightGraySelected,
+  grayStrong,
+  grayDarkStrong,
+  gray,
+  grayDark,
+  lightGrayDark,
+  darkGrayDark,
+  grayText,
   grayDarkText,
+  lightBlueMain,
   lightBlueMainHover,
   lightBlueMainDisabled,
-  lightGrayBlackout,
+  lightSecondMain,
+  lightSecondMainHover,
+  lightSecondMainDisabled,
+
+  lightErrorStatus,
+  darkErrorStatus,
+  favoritesStatus,
+  lightStatusWarning,
+  darkStatusWarning,
+  lightStatusPositive,
+  darkStatusPositive,
+
+  lightIcons,
+  darkIcon,
+  link,
+  darkLink,
+  blueLightMid,
+
+  lightToastDone,
+  darkToastDone,
+  lightToastInfo,
+  darkToastInfo,
+  lightToastAlert,
+  darkToastAlert,
+  lightToastWarning,
+  darkToastWarning,
+
+  dndColor,
+  dndDarkColor,
+  dndHoverColor,
+  dndDarkHover,
+
+  grayMaxLight,
+  shuttleGrey,
+  blueMain,
+  red,
 } = globalColors;
 
 export const getBaseTheme = () => {
@@ -196,7 +211,7 @@ export const getBaseTheme = () => {
 
         primary: lightSecondMain,
         primaryHover: lightSecondMainHover,
-        primaryActive: blueMaya,
+        primaryActive: `linear-gradient(0deg, ${lightSecondMain}, ${lightSecondMain}),linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1))`,
         primaryDisabled: lightSecondMainDisabled,
       },
 
@@ -208,7 +223,7 @@ export const getBaseTheme = () => {
 
         primary: `1px solid ${lightSecondMain}`,
         primaryHover: `1px solid ${lightSecondMainHover}`,
-        primaryActive: `1px solid ${blueMaya}`,
+        primaryActive: `1px solid linear-gradient(0deg, ${lightSecondMain}, ${lightSecondMain}),linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1))`,
         primaryDisabled: `1px solid ${lightSecondMainDisabled}`,
       },
 
@@ -225,7 +240,6 @@ export const getBaseTheme = () => {
       margin: "0",
       lineHeight: "56px",
       fontWeight: "700",
-      borderBottom: `1px solid ${globalColors.lightGrayishBlue}`,
       padding: "0 16px 16px",
       bodyPadding: "16px 0",
     },
@@ -241,8 +255,6 @@ export const getBaseTheme = () => {
       mobileProgressBarBackground: "rgb(48%, 58%, 69%, 0.4)",
 
       bar: {
-        errorBackground: orangePressed,
-
         icon: gray,
       },
 
@@ -342,7 +354,7 @@ export const getBaseTheme = () => {
       background: white,
 
       borderConnect: "none",
-      connectBackground: "#3B72A7",
+      connectBackground: lightIcons,
 
       disableBackgroundColor: grayLight,
 
@@ -562,20 +574,6 @@ export const getBaseTheme = () => {
       hoverBorderColor: gray,
     },
 
-    requestLoader: {
-      backgroundColor: white,
-      border: `1px solid ${globalColors.veryLightGrey}`,
-      overflow: "hidden",
-      padding: "5px 10px",
-      lineHeight: "16px",
-      borderRadius: "5px",
-      boxShadow: "0 2px 8px rgba(0, 0, 0, 0.3)",
-
-      marginRight: "10px",
-      top: "10px",
-      width: "100%",
-    },
-
     row: {
       minHeight: "47px",
       width: "100%",
@@ -682,12 +680,7 @@ export const getBaseTheme = () => {
         },
       },
 
-      header: {
-        borderBottom: `1px solid ${globalColors.lightGrayishBlue}`,
-      },
-
       closeButton: {
-        // backgroundColor: "#9a9ea3",
         fillColor: white,
       },
     },
@@ -731,18 +724,18 @@ export const getBaseTheme = () => {
 
       borderColor: grayStrong,
       errorBorderColor: "#F21C0E",
-      warningBorderColor: warningColor,
+      warningBorderColor: lightErrorStatus,
       disabledBorderColor: grayLightMid,
 
       hoverBorderColor: gray,
       hoverErrorBorderColor: red,
-      hoverWarningBorderColor: warningColor,
-      lightToastWarningBorderColor: warningColor,
+      hoverWarningBorderColor: lightErrorStatus,
+      lightToastWarningBorderColor: lightErrorStatus,
       hoverDisabledBorderColor: grayLightMid,
 
       focusBorderColor: blueMain,
       focusErrorBorderColor: red,
-      focusWarningBorderColor: warningColor,
+      focusWarningBorderColor: lightErrorStatus,
       focusDisabledBorderColor: grayLightMid,
     },
 
@@ -1040,8 +1033,7 @@ export const getBaseTheme = () => {
         hoverBackgroundColor: lightGrayHover,
         disableBackgroundColor: grayLightMid,
         activeBackgroundColor: grayLightMid,
-        activeSelectedBackgroundColor:
-          "linear-gradient(0deg, #265a8f, #265a8f), linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1))",
+        activeSelectedBackgroundColor: `linear-gradient(0deg, ${blueLightMid}, ${blueLightMid}), linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1))`,
 
         title: {
           padding: "4px 16px",
@@ -1179,13 +1171,13 @@ export const getBaseTheme = () => {
       },
 
       guest: {
-        fill: "#3B72A7",
+        fill: lightIcons,
         stroke: darkBlack,
         color: white,
       },
 
       owner: {
-        fill: "#EDC409",
+        fill: favoritesStatus,
         stroke: darkBlack,
         color: white,
       },
@@ -1262,8 +1254,8 @@ export const getBaseTheme = () => {
           marginTop: "-9.4px",
           width: "24px",
           height: "24px",
-          background: blueMain,
-          disabledBackground: blueDisabled,
+          background: lightSecondMain,
+          disabledBackground: lightSecondMainDisabled,
           borderWidth: "6px",
           borderStyle: "solid",
           borderColor: `${white}`,
@@ -1274,7 +1266,7 @@ export const getBaseTheme = () => {
         thumb: {
           width: "24px",
           height: "24px",
-          background: blueMain,
+          background: lightSecondMain,
           border: `6px solid ${white}`,
           borderRadius: "30px",
           marginTop: "0px",
@@ -1292,7 +1284,7 @@ export const getBaseTheme = () => {
         rangeThumb: {
           width: "14px",
           height: "14px",
-          background: blueMain,
+          background: lightSecondMain,
           border: `6px solid ${white}`,
           borderRadius: "30px",
           boxShadow: "0px 5px 20px rgba(4, 15, 27, 0.13)",
@@ -1722,7 +1714,7 @@ export const getBaseTheme = () => {
         margin: "0",
         lineHeight: "56px",
         fontWeight: "700",
-        borderBottom: `1px solid ${globalColors.lightGrayishBlue}`,
+        borderBottom: `1px solid ${grayStrong}`,
       },
 
       bodyContent: {
@@ -1757,7 +1749,7 @@ export const getBaseTheme = () => {
       contentLineHeight: "56px",
       contentFontWeight: "700",
 
-      borderBottom: `1px solid ${globalColors.lightGrayishBlue}`,
+      borderBottom: `1px solid ${grayStrong}`,
     },
 
     aside: {
@@ -1776,8 +1768,8 @@ export const getBaseTheme = () => {
     dragAndDrop: {
       height: "100%",
       transparentBorder: "1px solid transparent",
-      acceptBackground: lightMediumGoldenrod,
-      background: lightToastInfo,
+      acceptBackground: dndHoverColor,
+      background: dndColor,
     },
 
     // phoneInput: {
@@ -2027,7 +2019,7 @@ export const getBaseTheme = () => {
 
     infoPanel: {
       sectionHeaderToggleIcon: gray,
-      sectionHeaderToggleIconActive: "#3B72A7",
+      sectionHeaderToggleIconActive: lightIcons,
       sectionHeaderToggleBg: "transparent",
       sectionHeaderToggleBgActive: grayLight,
 
@@ -2044,7 +2036,7 @@ export const getBaseTheme = () => {
       closeButtonBg: "transparent",
 
       links: {
-        iconColor: "#3B72A7",
+        iconColor: lightIcons,
         iconErrorColor: lightErrorStatus,
         primaryColor: grayText,
       },
@@ -2118,7 +2110,7 @@ export const getBaseTheme = () => {
     },
 
     peopleTableRow: {
-      fill: "#3b72a7",
+      fill: lightIcons,
 
       nameColor: black,
       pendingNameColor: gray,
@@ -2169,15 +2161,6 @@ export const getBaseTheme = () => {
       },
     },
 
-    profileInfo: {
-      color: "#83888d",
-      iconButtonColor: black,
-      linkColor: gray,
-
-      tooltipLinkColor: black,
-      iconColor: orangePressed,
-    },
-
     updateUserForm: {
       tooltipTextColor: black,
       borderTop: `1px solid ${grayLightMid}`,
@@ -2224,8 +2207,8 @@ export const getBaseTheme = () => {
       rowView: {
         checkedBackground: lightGrayHover,
 
-        draggingBackground: lightToastInfo,
-        draggingHoverBackground: lightMediumGoldenrod,
+        draggingBackground: dndColor,
+        draggingHoverBackground: dndHoverColor,
 
         shareButton: {
           color: lightGrayDark,
@@ -2236,9 +2219,9 @@ export const getBaseTheme = () => {
         linkColor: black,
         textColor: gray,
 
-        editingIconColor: "#3b72a7",
-        shareHoverColor: "#3b72a7",
-        pinColor: "#3b72a7",
+        editingIconColor: lightIcons,
+        shareHoverColor: lightIcons,
+        pinColor: lightIcons,
       },
 
       tableView: {
@@ -2249,12 +2232,12 @@ export const getBaseTheme = () => {
 
         row: {
           checkboxChecked: `linear-gradient(to right, #f3f4f4 24px, ${grayLightMid} 24px)`,
-          checkboxDragging: `linear-gradient(to right, ${lightToastInfo} 24px, ${grayLightMid} 24px)`,
-          checkboxDraggingHover: `linear-gradient(to right,rgb(239, 239, 178) 24px, ${grayLightMid} 24px)`,
+          checkboxDragging: `linear-gradient(to right, ${dndColor} 24px, ${grayLightMid} 24px)`,
+          checkboxDraggingHover: `linear-gradient(to right, ${dndHoverColor} 24px, ${grayLightMid} 24px)`,
 
           contextMenuWrapperChecked: `linear-gradient(to left, #f3f4f4 24px, ${grayLightMid} 24px)`,
-          contextMenuWrapperDragging: `border-image-source: linear-gradient(to left, ${lightToastInfo} 24px, ${grayLightMid} 24px)`,
-          contextMenuWrapperDraggingHover: `linear-gradient(to left,rgb(239, 239, 178) 24px,${grayLightMid} 24px)`,
+          contextMenuWrapperDragging: `border-image-source: linear-gradient(to left, ${dndColor} 24px, ${grayLightMid} 24px)`,
+          contextMenuWrapperDraggingHover: `linear-gradient(to left, ${dndHoverColor} 24px,${grayLightMid} 24px)`,
 
           backgroundActive: `#F3F4F4`,
 
@@ -2263,7 +2246,7 @@ export const getBaseTheme = () => {
 
           borderHover: gray,
           sideColor: gray,
-          shareHoverColor: "#3b72a7",
+          shareHoverColor: lightIcons,
 
           borderImageRight: `linear-gradient(to right, ${white} 25px, ${grayLightMid} 24px)`,
           borderImageLeft: `linear-gradient(to left, ${white} 24px, ${grayLightMid} 24px)`,
@@ -2275,8 +2258,8 @@ export const getBaseTheme = () => {
 
       tilesView: {
         tile: {
-          draggingColor: lightToastInfo,
-          draggingHoverColor: lightMediumGoldenrod,
+          draggingColor: dndColor,
+          draggingHoverColor: dndHoverColor,
           checkedColor: lightGrayHover,
           roomsCheckedColor: lightGrayHover,
           border: `1px solid ${grayStrong}`,
@@ -2346,7 +2329,7 @@ export const getBaseTheme = () => {
     },
 
     floatingButton: {
-      backgroundColor: "#3B72A7",
+      backgroundColor: lightIcons,
       color: white,
       boxShadow: "0px 5px 20px rgba(0, 0, 0, 0.13)",
       fill: white,
@@ -2618,15 +2601,6 @@ export const getBaseTheme = () => {
         color: gray,
       },
 
-      selectFile: {
-        color: gray,
-        background: grayLight,
-        borderBottom: `1px solid ${grayLightMid}`,
-        borderRight: `1px solid ${globalColors.lightGrayishBlue}`,
-
-        buttonsBackground: white,
-      },
-
       filesList: {
         color: gray,
         backgroundColor: grayLightMid,
@@ -2753,7 +2727,7 @@ export const getBaseTheme = () => {
 
     filesBadges: {
       iconColor: gray,
-      hoverIconColor: "#3B72A7",
+      hoverIconColor: lightIcons,
 
       color: white,
       backgroundColor: white,
@@ -2783,14 +2757,14 @@ export const getBaseTheme = () => {
     },
 
     filesIcons: {
-      fill: "#3b72a7",
-      hoverFill: "#3b72a7",
+      fill: lightIcons,
+      hoverFill: lightIcons,
     },
 
     filesQuickButtons: {
       color: gray,
-      sharedColor: "#3b72a7",
-      hoverColor: "#3b72a7",
+      sharedColor: lightIcons,
+      hoverColor: lightIcons,
     },
 
     filesSharedButton: {
@@ -2925,15 +2899,6 @@ export const getBaseTheme = () => {
         delayColor: "#F21C0E",
       },
 
-      paymentsEnterprise: {
-        background: grayLight,
-
-        buttonBackground: "#edf2f7",
-
-        linkColor: link,
-        headerColor: orangePressed,
-      },
-
       settings: {
         iconFill: black,
         headerTitleColor: black,
diff --git a/packages/shared/themes/dark.ts b/packages/shared/themes/dark.ts
index 1f3ee879a2..0a271ad024 100644
--- a/packages/shared/themes/dark.ts
+++ b/packages/shared/themes/dark.ts
@@ -33,47 +33,66 @@ import { TTheme } from "./base";
 import { DEFAULT_FONT_FAMILY } from "../constants";
 
 const {
-  black,
   white,
-
-  grayLight,
-  grayLightMid,
-  grayStrong,
-  grayDarkMid,
-  gray,
-  lightGrayDark,
-  grayDark,
-  shuttleGrey,
-
-  blueMain,
-  blueDisabled,
-  lightSecondMain,
-
-  orangePressed,
-
-  warningColor,
-  red,
-
-  grayMaxLight,
-  grayText,
-
+  black,
   darkBlack,
 
-  lightStatusWarning,
-
-  darkErrorStatus,
+  lightGrayBlackout,
+  darkGrayBlackout,
+  grayLight,
   darkGrayLight,
-  grayDarkStrong,
+  lightGrayHover,
   lightDarkGrayHover,
-  grayDarkText,
-  link,
-  darkToastDone,
-  darkToastInfo,
-  darkToastAlert,
-  darkToastWarning,
-  lightBlueMainDisabled,
-  lightBlueMainHover,
+  grayLightMid,
+  grayDarkMid,
+  lightGraySelected,
+  grayStrong,
+  grayDarkStrong,
+  gray,
+  grayDark,
+  lightGrayDark,
   darkGrayDark,
+  grayText,
+  grayDarkText,
+  lightBlueMain,
+  lightBlueMainHover,
+  lightBlueMainDisabled,
+  lightSecondMain,
+  lightSecondMainHover,
+  lightSecondMainDisabled,
+
+  lightErrorStatus,
+  darkErrorStatus,
+  favoritesStatus,
+  lightStatusWarning,
+  darkStatusWarning,
+  lightStatusPositive,
+  darkStatusPositive,
+
+  lightIcons,
+  darkIcon,
+  link,
+  darkLink,
+  blueLightMid,
+
+  lightToastDone,
+  darkToastDone,
+  lightToastInfo,
+  darkToastInfo,
+  lightToastAlert,
+  darkToastAlert,
+  lightToastWarning,
+  darkToastWarning,
+
+  dndColor,
+  dndDarkColor,
+  dndHoverColor,
+  dndDarkHover,
+
+  grayMaxLight,
+  shuttleGrey,
+  blueMain,
+  red,
 } = globalColors;
 
 const Dark: TTheme = {
@@ -209,7 +228,6 @@ const Dark: TTheme = {
     margin: "0",
     lineHeight: "56px",
     fontWeight: "700",
-    borderBottom: `1px solid ${globalColors.lightGrayishBlue}`,
     padding: "0 16px 16px",
     bodyPadding: "16px 0",
   },
@@ -225,8 +243,6 @@ const Dark: TTheme = {
     mobileProgressBarBackground: "#606060",
 
     bar: {
-      errorBackground: orangePressed,
-
       icon: grayDark,
     },
 
@@ -544,20 +560,6 @@ const Dark: TTheme = {
     hoverBorderColor: grayMaxLight,
   },
 
-  requestLoader: {
-    backgroundColor: white,
-    border: `1px solid ${globalColors.veryLightGrey}`,
-    overflow: "hidden",
-    padding: "5px 10px",
-    lineHeight: "16px",
-    borderRadius: "5px",
-    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.3)",
-
-    marginRight: "10px",
-    top: "10px",
-    width: "100%",
-  },
-
   row: {
     minHeight: "47px",
     width: "100%",
@@ -665,13 +667,7 @@ const Dark: TTheme = {
       },
     },
 
-    header: {
-      borderBottom: `1px solid ${grayDarkStrong}`,
-    },
-
     closeButton: {
-      // backgroundColor: "#9A9EA3",
-
       fillColor: "#9A9EA3",
     },
   },
@@ -715,17 +711,17 @@ const Dark: TTheme = {
 
     borderColor: grayDarkStrong,
     errorBorderColor: darkErrorStatus,
-    warningBorderColor: warningColor,
+    warningBorderColor: darkErrorStatus,
     disabledBorderColor: grayDarkStrong,
 
     hoverBorderColor: grayDark,
     hoverErrorBorderColor: darkErrorStatus,
-    hoverWarningBorderColor: warningColor,
+    hoverWarningBorderColor: darkErrorStatus,
     hoverDisabledBorderColor: grayDarkStrong,
 
     focusBorderColor: grayMaxLight,
     focusErrorBorderColor: darkErrorStatus,
-    focusWarningBorderColor: warningColor,
+    focusWarningBorderColor: darkErrorStatus,
     focusDisabledBorderColor: grayDarkStrong,
   },
 
@@ -1163,7 +1159,7 @@ const Dark: TTheme = {
     },
 
     owner: {
-      fill: "#EDC409",
+      fill: favoritesStatus,
       stroke: darkBlack,
       color: black,
     },
@@ -1219,7 +1215,7 @@ const Dark: TTheme = {
 
     selectLink: {
       color: grayDarkStrong,
-      linkColor: "#E06A1B",
+      linkColor: darkLink,
     },
 
     slider: {
@@ -1241,7 +1237,7 @@ const Dark: TTheme = {
         width: "24px",
         height: "24px",
         background: grayMaxLight,
-        disabledBackground: blueDisabled,
+        disabledBackground: darkGrayDark,
         borderWidth: "6px",
         borderStyle: "solid",
         borderColor: `${black}`,
@@ -1741,7 +1737,7 @@ const Dark: TTheme = {
     contentLineHeight: "56px",
     contentFontWeight: "700",
 
-    borderBottom: `1px solid ${globalColors.lightGrayishBlue}`,
+    borderBottom: `1px solid ${grayDarkStrong}`,
   },
 
   aside: {
@@ -1760,8 +1756,8 @@ const Dark: TTheme = {
   dragAndDrop: {
     height: "100%",
     transparentBorder: "1px solid transparent",
-    acceptBackground: "rgba(204, 184, 102, 0.2)",
-    background: "rgba(230, 211, 138, 0.12)",
+    acceptBackground: dndDarkHover,
+    background: dndDarkColor,
   },
 
   // phoneInput: {
@@ -1952,7 +1948,7 @@ const Dark: TTheme = {
     boxShadow: "0px 8px 16px 0px #040F1B29",
 
     icon: {
-      fill: "#E06A1B",
+      fill: darkLink,
       stroke: grayDarkStrong,
     },
   },
@@ -2152,15 +2148,6 @@ const Dark: TTheme = {
     },
   },
 
-  profileInfo: {
-    color: grayDark,
-    iconButtonColor: grayMaxLight,
-    linkColor: grayMaxLight,
-
-    tooltipLinkColor: "#e06a1b",
-    iconColor: orangePressed,
-  },
-
   updateUserForm: {
     tooltipTextColor: black,
     borderTop: "none",
@@ -2205,8 +2192,8 @@ const Dark: TTheme = {
     rowView: {
       checkedBackground: lightDarkGrayHover,
 
-      draggingBackground: "rgba(230, 211, 138, 0.12)",
-      draggingHoverBackground: "rgba(204, 184, 102, 0.2)2",
+      draggingBackground: dndColor,
+      draggingHoverBackground: dndHoverColor,
 
       shareButton: {
         color: grayDark,
@@ -2230,12 +2217,12 @@ const Dark: TTheme = {
 
       row: {
         checkboxChecked: `linear-gradient(to right, ${black} 24px, ${grayDarkStrong} 24px)`,
-        checkboxDragging: `linear-gradient(to right, rgba(230, 211, 138, 0.12) 24px, ${grayDarkStrong} 24px)`,
-        checkboxDraggingHover: `inear-gradient(to right,rgba(204, 184, 102, 0.2) 24px, ${grayDarkStrong} 24px)`,
+        checkboxDragging: `linear-gradient(to right, ${dndDarkColor} 24px, ${grayDarkStrong} 24px)`,
+        checkboxDraggingHover: `inear-gradient(to right, ${dndDarkHover} 24px, ${grayDarkStrong} 24px)`,
 
         contextMenuWrapperChecked: `linear-gradient(to left, ${black} 24px, ${grayDarkStrong} 24px)`,
-        contextMenuWrapperDragging: `border-image-source: linear-gradient(to left, rgba(230, 211, 138, 0.12) 24px, ${grayDarkStrong} 24px)`,
-        contextMenuWrapperDraggingHover: `linear-gradient(to left,rgba(204, 184, 102, 0.2) 24px, ${grayDarkStrong} 24px)`,
+        contextMenuWrapperDragging: `border-image-source: linear-gradient(to left, ${dndDarkColor} 24px, ${grayDarkStrong} 24px)`,
+        contextMenuWrapperDraggingHover: `linear-gradient(to left, ${dndDarkHover} 24px, ${grayDarkStrong} 24px)`,
 
         backgroundActive: lightDarkGrayHover,
 
@@ -2257,8 +2244,8 @@ const Dark: TTheme = {
 
     tilesView: {
       tile: {
-        draggingColor: "rgba(230, 211, 138, 0.12)",
-        draggingHoverColor: "rgba(204, 184, 102, 0.2)",
+        draggingColor: dndDarkColor,
+        draggingHoverColor: dndDarkHover,
         checkedColor: lightDarkGrayHover,
         roomsCheckedColor: black,
         border: `1px solid ${grayDarkStrong}`,
@@ -2536,7 +2523,7 @@ const Dark: TTheme = {
   filesEmptyContainer: {
     linkColor: "#adadad",
     privateRoom: {
-      linkColor: "#E06A1B",
+      linkColor: darkLink,
     },
   },
 
@@ -2598,15 +2585,6 @@ const Dark: TTheme = {
       color: gray,
     },
 
-    selectFile: {
-      color: gray,
-      background: black,
-      borderBottom: `1px solid ${grayDarkStrong}`,
-      borderRight: `1px solid ${grayDarkStrong}`,
-
-      buttonsBackground: black,
-    },
-
     filesList: {
       color: grayMaxLight,
       backgroundColor: black,
@@ -2781,7 +2759,7 @@ const Dark: TTheme = {
 
   filesPrivateRoom: {
     borderBottom: "1px solid #d3d3d3",
-    linkColor: "#E06A1B",
+    linkColor: darkLink,
     textColor: "#83888D",
   },
 
@@ -2807,7 +2785,7 @@ const Dark: TTheme = {
   },
 
   login: {
-    linkColor: "#E06A1B",
+    linkColor: darkLink,
     textColor: grayDark,
     navBackground: darkGrayLight,
     headerColor: white,
@@ -2818,7 +2796,7 @@ const Dark: TTheme = {
 
     register: {
       backgroundColor: "#292929",
-      textColor: "#E06A1B",
+      textColor: darkLink,
     },
 
     container: {
@@ -2860,11 +2838,11 @@ const Dark: TTheme = {
     },
 
     deleteSelf: {
-      linkColor: "#e06a1b",
+      linkColor: darkLink,
     },
 
     changePassword: {
-      linkColor: "#e06a1b",
+      linkColor: darkLink,
     },
   },
 
@@ -2874,7 +2852,7 @@ const Dark: TTheme = {
 
   client: {
     about: {
-      linkColor: "#E06A1B",
+      linkColor: darkLink,
       border: `1px solid ${grayDarkStrong}`,
       logoColor: white,
     },
@@ -2888,11 +2866,11 @@ const Dark: TTheme = {
 
     confirm: {
       activateUser: {
-        textColor: "#E06A1B",
+        textColor: darkLink,
         textColorError: red,
       },
       change: {
-        titleColor: "#E06A1B",
+        titleColor: darkLink,
       },
     },
 
@@ -2902,19 +2880,10 @@ const Dark: TTheme = {
     },
 
     payments: {
-      linkColor: "#E06A1B",
+      linkColor: darkLink,
       delayColor: "#F21C0E",
     },
 
-    paymentsEnterprise: {
-      background: black,
-
-      buttonBackground: "#292929",
-
-      linkColor: "#E06A1B",
-      headerColor: orangePressed,
-    },
-
     settings: {
       iconFill: white,
       headerTitleColor: white,
@@ -2936,7 +2905,7 @@ const Dark: TTheme = {
           backgroundColorWrapper: blueMain,
           roleColor: grayStrong,
 
-          color: "#E06A1B",
+          color: darkLink,
           departmentColor: grayDark,
 
           tooltipColor: "#F5E9BA",
@@ -2950,7 +2919,7 @@ const Dark: TTheme = {
 
         owner: {
           backgroundColor: black,
-          linkColor: "#E06A1B",
+          linkColor: darkLink,
           departmentColor: grayDark,
           tooltipColor: "#F5E9BA",
         },
@@ -2967,8 +2936,8 @@ const Dark: TTheme = {
 
       common: {
         linkColor: grayDark,
-        linkColorHelp: "#E06A1B",
-        tooltipLinkColor: "#e06a1b",
+        linkColorHelp: darkLink,
+        tooltipLinkColor: darkLink,
         arrowColor: white,
         descriptionColor: grayDark,
         brandingDescriptionColor: grayDark,
@@ -2990,7 +2959,7 @@ const Dark: TTheme = {
 
       integration: {
         separatorBorder: `1px solid ${grayDarkStrong}`,
-        linkColor: "#E06A1B",
+        linkColor: darkLink,
 
         sso: {
           toggleContentBackground: grayDarkStrong,
@@ -3078,7 +3047,7 @@ const Dark: TTheme = {
     },
 
     wizard: {
-      linkColor: "#E06A1B",
+      linkColor: darkLink,
       generatePasswordColor: "#a9a9a9",
     },
   },
@@ -3112,7 +3081,7 @@ const Dark: TTheme = {
     backgroundColor: black,
     activeTextColor: white,
     textColor: "#ADADAD",
-    bottomLineColor: "#E06A1B",
+    bottomLineColor: darkLink,
   },
 
   hotkeys: {
diff --git a/packages/shared/themes/globalColors.ts b/packages/shared/themes/globalColors.ts
index 0a8b8955ce..6fa732682b 100644
--- a/packages/shared/themes/globalColors.ts
+++ b/packages/shared/themes/globalColors.ts
@@ -77,22 +77,16 @@ export const globalColors = {
   darkToastAlert: "#E0B151",
   lightToastWarning: "#F7CDBE",
   darkToastWarning: "#E07751",
+
+  loader: "rgba(0, 0, 0, 0.05)",
+  dndColor: "rgba(229, 228, 138, 0.5)",
+  dndDarkColor: "rgba(229, 228, 138, 0.12)",
+  dndHoverColor: "rgba(204, 202, 102, 0.5)",
+  dndDarkHover: "rgba(204, 184, 102, 0.2)",
   //
 
   grayMaxLight: "#eeeeee",
-
   shuttleGrey: "#63686A",
-  veryLightGrey: "#CACACA",
-
   blueMain: "#2DA7DB",
-  blueDisabled: "#A6DCF2",
-  blueMaya: "#4A8ACA",
-
-  lightGrayishBlue: "#DEE2E6",
-
-  orangePressed: "#C96C27",
-  lightMediumGoldenrod: "#EFEFB2",
-
-  warningColor: "#f1ca92",
   red: "#c30",
 };