From f4721c65f9524aea2d624793e59f222aec7c46d6 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Tue, 11 Jun 2024 13:59:18 +0500 Subject: [PATCH] Shared: Themes: delete useless --- packages/shared/themes/base.ts | 121 ++++++++++--------------- packages/shared/themes/dark.ts | 66 ++++---------- packages/shared/themes/globalColors.ts | 2 - 3 files changed, 66 insertions(+), 123 deletions(-) diff --git a/packages/shared/themes/base.ts b/packages/shared/themes/base.ts index 81dc4bca94..7fefb3d0cc 100644 --- a/packages/shared/themes/base.ts +++ b/packages/shared/themes/base.ts @@ -102,8 +102,6 @@ const { grayMaxLight, shuttleGrey, - blueMain, - red, } = globalColors; export const getBaseTheme = () => { @@ -496,30 +494,9 @@ export const getBaseTheme = () => { focusColor: gray, - errorColor: "#F21C0E", + errorColor: lightErrorStatus, }, - // slider: { - // sliderBarColorProgress: blueMain, - // sliderBarColorProgressDisabled: grayStrong, - // sliderBarColor: grayLightMid, - // sliderBarDisableColor: grayLightMid, - - // sliderBarBorderActive: `1px solid ${globalColors.grayStrong}`, - // sliderBarBorderDisable: `1px solid ${globalColors.grayStrong}`, - - // thumbFillDisable: grayLightMid, - // thumbFillActive: grayLightMid, - - // thumbBorderColorActive: `1px solid ${globalColors.gray}`, - // thumbBorderColorDisable: `1px solid ${globalColors.grayStrong}`, - - // sliderWidth: "202px", - - // arrowHover: blueMain, - // arrowColor: grayStrong, - // }, - viewSelector: { fillColor: white, checkedFillColor: gray, @@ -697,19 +674,19 @@ export const getBaseTheme = () => { border: "solid 1px", borderColor: grayStrong, - errorBorderColor: "#F21C0E", - warningBorderColor: lightErrorStatus, + errorBorderColor: lightErrorStatus, + warningBorderColor: lightStatusWarning, disabledBorderColor: grayLightMid, hoverBorderColor: gray, - hoverErrorBorderColor: red, - hoverWarningBorderColor: lightErrorStatus, - lightToastWarningBorderColor: lightErrorStatus, + hoverErrorBorderColor: lightErrorStatus, + hoverWarningBorderColor: lightStatusWarning, + lightToastWarningBorderColor: lightStatusWarning, hoverDisabledBorderColor: grayLightMid, - focusBorderColor: blueMain, - focusErrorBorderColor: red, - focusWarningBorderColor: lightErrorStatus, + focusBorderColor: lightSecondMain, + focusErrorBorderColor: lightErrorStatus, + focusWarningBorderColor: lightStatusWarning, focusDisabledBorderColor: grayLightMid, }, @@ -824,9 +801,9 @@ export const getBaseTheme = () => { }, inputPhone: { - activeBorderColor: blueMain, + activeBorderColor: lightSecondMain, inactiveBorderColor: grayStrong, - errorBorderColor: "#f21c0e", + errorBorderColor: lightErrorStatus, backgroundColor: white, color: black, scrollBackground: gray, @@ -884,7 +861,7 @@ export const getBaseTheme = () => { padding: "2px 0px 2px 2px", margin: "0", - borderColor: blueMain, + borderColor: lightSecondMain, iconColor: gray, hoverIconColor: lightGrayDark, @@ -893,8 +870,8 @@ export const getBaseTheme = () => { textArea: { disabledColor: grayLight, - focusBorderColor: blueMain, - focusErrorBorderColor: red, + focusBorderColor: lightSecondMain, + focusErrorBorderColor: lightErrorStatus, focusOutline: "none", scrollWidth: "100%", @@ -1064,7 +1041,7 @@ export const getBaseTheme = () => { }, errorLabel: { - color: "#F21C0E", + color: lightErrorStatus, }, }, @@ -1123,7 +1100,7 @@ export const getBaseTheme = () => { }, imageContainer: { - backgroundImage: blueMain, + backgroundImage: lightSecondMain, background: grayStrong, groupBackground: grayLightMid, borderRadius: "50%", @@ -1602,13 +1579,13 @@ export const getBaseTheme = () => { border: `1px solid ${grayStrong}`, borderRadius: "3px", - borderColor: blueMain, - openBorderColor: blueMain, + borderColor: lightSecondMain, + openBorderColor: lightSecondMain, disabledBorderColor: grayLightMid, disabledBackground: grayLight, hoverBorderColor: gray, - hoverBorderColorOpen: blueMain, + hoverBorderColorOpen: lightSecondMain, hoverDisabledBorderColor: grayLightMid, hoverBackgroundModernView: grayLightMid, @@ -1712,7 +1689,7 @@ export const getBaseTheme = () => { contentPadding: "0 16px 16px", bodyPadding: "16px 0", backgroundColor: white, - inputBorder: blueMain, + inputBorder: lightSecondMain, iconPadding: "8px 8px 7px 0px", contentMaxWidth: "500px", @@ -1828,7 +1805,7 @@ export const getBaseTheme = () => { paymentAlert: { color: lightStatusWarning, - warningColor: "#F21C0E", + warningColor: lightErrorStatus, }, teamTrainingAlert: { @@ -1997,7 +1974,7 @@ export const getBaseTheme = () => { borderColor: grayLightMid, thumbnailBorderColor: grayLightMid, textColor: black, - errorColor: "#F21C0E", + errorColor: lightErrorStatus, closeButtonWrapperPadding: "0px", closeButtonIcon: white, @@ -2063,12 +2040,8 @@ export const getBaseTheme = () => { androidHoverColor: "#9BD71C", iosHoverColor: darkBlack, }, - thirdPartyList: { - color: "#818b91", - linkColor: grayText, - }, devTools: { - border: "1px solid #DFE2E3", + border: `1px solid ${lightGraySelected}`, color: gray, }, }, @@ -2162,7 +2135,7 @@ export const getBaseTheme = () => { borderHoverImageSource: `linear-gradient(to right,${white} 0px,${grayLightMid} 0px,${grayLightMid} 100% ,${white} 100%)`, lengthenBorderImageSource: `linear-gradient(to right, ${grayLightMid}, ${grayLightMid})`, - hotkeyBorderBottom: `1px solid ${globalColors.blueMain}`, + hotkeyBorderBottom: `1px solid ${lightSecondMain}`, settingsIconDisableColor: grayStrong, }, @@ -2200,15 +2173,15 @@ export const getBaseTheme = () => { }, row: { - checkboxChecked: `linear-gradient(to right, #f3f4f4 24px, ${grayLightMid} 24px)`, + checkboxChecked: `linear-gradient(to right, ${lightGrayHover} 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)`, + contextMenuWrapperChecked: `linear-gradient(to left, ${lightGrayHover} 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`, + backgroundActive: lightGrayHover, borderImageCheckbox: `linear-gradient(to right, ${white} 24px, ${grayLightMid} 24px)`, borderImageContextMenu: `linear-gradient(to left, ${white} 24px, ${grayLightMid} 24px)`, @@ -2260,7 +2233,7 @@ export const getBaseTheme = () => { searcher: { hoverBorderColor: grayStrong, - focusBorderColor: blueMain, + focusBorderColor: lightSecondMain, placeholderColor: gray, }, }, @@ -2366,7 +2339,7 @@ export const getBaseTheme = () => { background: "none", hoverBackground: grayLight, borderColor: grayLightMid, - isOpenBorderColor: blueMain, + isOpenBorderColor: lightSecondMain, descriptionText: gray, }, dropdownItem: { @@ -2425,7 +2398,7 @@ export const getBaseTheme = () => { background: white, dropdownBorderColor: grayStrong, hoverDropdownBorderColor: gray, - isOpenDropdownBorderColor: blueMain, + isOpenDropdownBorderColor: lightSecondMain, arrowFill: gray, }, folderInput: { @@ -2618,7 +2591,7 @@ export const getBaseTheme = () => { }, loadingButton: { - color: blueMain, + color: lightSecondMain, background: white, }, }, @@ -2714,7 +2687,7 @@ export const getBaseTheme = () => { background: globalColors.lightGrayHover, itemBackground: white, itemBorder: grayStrong, - itemActiveBorder: blueMain, + itemActiveBorder: lightSecondMain, }, row: { @@ -2818,7 +2791,7 @@ export const getBaseTheme = () => { }, deleteUser: { - textColor: red, + textColor: lightErrorStatus, }, deleteSelf: { @@ -2836,8 +2809,8 @@ export const getBaseTheme = () => { client: { about: { - linkColor: blueMain, - border: "1px solid lightgray", + linkColor: lightSecondMain, + border: `1px solid ${gray}`, logoColor: black, }, @@ -2851,7 +2824,7 @@ export const getBaseTheme = () => { confirm: { activateUser: { textColor: "#116d9d", - textColorError: red, + textColorError: lightErrorStatus, }, change: { titleColor: "#116d9d", @@ -2860,12 +2833,12 @@ export const getBaseTheme = () => { home: { logoColor: black, - textColorError: red, + textColorError: lightErrorStatus, }, payments: { linkColor: link, - delayColor: "#F21C0E", + delayColor: lightErrorStatus, }, settings: { @@ -2886,7 +2859,7 @@ export const getBaseTheme = () => { admins: { backgroundColor: black, - backgroundColorWrapper: blueMain, + backgroundColorWrapper: lightSecondMain, roleColor: grayStrong, color: link, @@ -2898,7 +2871,7 @@ export const getBaseTheme = () => { pendingNameColor: gray, textColor: white, - iconColor: blueMain, + iconColor: lightSecondMain, }, owner: { @@ -2953,14 +2926,14 @@ export const getBaseTheme = () => { }, smtp: { - requirementColor: "#F21C0E", + requirementColor: lightErrorStatus, }, }, backup: { rectangleBackgroundColor: grayLight, separatorBorder: `1px solid ${grayLightMid}`, - warningColor: "#f21c0e", + warningColor: lightErrorStatus, textColor: gray, backupCheckedListItemBackground: lightGrayHover, }, @@ -2996,7 +2969,7 @@ export const getBaseTheme = () => { linkColor: lightGrayDark, }, - warningColor: "#F21C0E", + warningColor: lightErrorStatus, color: "#F97A0B", }, @@ -3009,7 +2982,7 @@ export const getBaseTheme = () => { fileInputIconColor: gray, infoBlockBackground: grayLight, infoBlockTextColor: grayText, - errorTextColor: "#F21C0E", + errorTextColor: lightErrorStatus, existingTextColor: "#2db482", tableHeaderText: gray, tableRowHoverColor: lightGrayHover, @@ -3044,7 +3017,7 @@ export const getBaseTheme = () => { color: darkBlack, btnColor: white, - btnBackgroundActive: blueMain, + btnBackgroundActive: lightSecondMain, }, tileLoader: { @@ -3123,7 +3096,7 @@ export const getBaseTheme = () => { backgroundColor: lightGrayHover, colorPercentSmall: black, colorPercentBig: white, - errorTextColor: "#F21C0E", + errorTextColor: lightErrorStatus, descriptionTextColor: gray, }, @@ -3170,7 +3143,7 @@ export const getBaseTheme = () => { editLink: { text: { color: gray, - errorColor: "#F21C0E", + errorColor: lightErrorStatus, }, }, diff --git a/packages/shared/themes/dark.ts b/packages/shared/themes/dark.ts index 11b2de3439..75be871d97 100644 --- a/packages/shared/themes/dark.ts +++ b/packages/shared/themes/dark.ts @@ -91,8 +91,6 @@ const { grayMaxLight, shuttleGrey, - blueMain, - red, } = globalColors; const Dark: TTheme = { @@ -486,27 +484,6 @@ const Dark: TTheme = { errorColor: darkErrorStatus, }, - // slider: { - // sliderBarColorProgress: blueMain, - // sliderBarColorProgressDisabled: grayStrong, - // sliderBarColor: grayLightMid, - // sliderBarDisableColor: grayLightMid, - - // sliderBarBorderActive: `1px solid ${globalColors.grayStrong}`, - // sliderBarBorderDisable: `1px solid ${globalColors.grayStrong}`, - - // thumbFillDisable: grayLightMid, - // thumbFillActive: grayLightMid, - - // thumbBorderColorActive: `1px solid ${globalColors.gray}`, - // thumbBorderColorDisable: `1px solid ${globalColors.grayStrong}`, - - // sliderWidth: "202px", - - // arrowHover: blueMain, - // arrowColor: grayStrong, - // }, - viewSelector: { fillColor: black, checkedFillColor: grayDark, @@ -685,17 +662,17 @@ const Dark: TTheme = { borderColor: grayDarkStrong, errorBorderColor: darkErrorStatus, - warningBorderColor: darkErrorStatus, + warningBorderColor: darkStatusWarning, disabledBorderColor: grayDarkStrong, hoverBorderColor: grayDark, hoverErrorBorderColor: darkErrorStatus, - hoverWarningBorderColor: darkErrorStatus, + hoverWarningBorderColor: darkStatusWarning, hoverDisabledBorderColor: grayDarkStrong, focusBorderColor: grayMaxLight, focusErrorBorderColor: darkErrorStatus, - focusWarningBorderColor: darkErrorStatus, + focusWarningBorderColor: darkStatusWarning, focusDisabledBorderColor: grayDarkStrong, }, @@ -809,9 +786,9 @@ const Dark: TTheme = { }, inputPhone: { - activeBorderColor: blueMain, + activeBorderColor: lightSecondMain, inactiveBorderColor: grayDarkStrong, - errorBorderColor: "#f21c0e", + errorBorderColor: darkErrorStatus, backgroundColor: black, color: white, scrollBackground: grayDark, @@ -1387,10 +1364,10 @@ const Dark: TTheme = { warning: "#292929", }, border: { - success: "2px solid #9de051", - error: "2px solid #e0b051", - info: "2px solid #e0d751", - warning: "2px solid #e07751", + success: `2px solid ${darkToastDone}`, + error: `2px solid ${darkToastAlert}`, + info: `2px solid ${darkToastInfo}`, + warning: `2px solid ${darkToastWarning}`, }, zIndex: "9999", @@ -1700,7 +1677,7 @@ const Dark: TTheme = { contentPadding: "0 16px 16px", bodyPadding: "16px 0", backgroundColor: black, - inputBorder: blueMain, + inputBorder: lightSecondMain, iconPadding: "8px 8px 7px 0px", contentMaxWidth: "500px", @@ -2051,11 +2028,6 @@ const Dark: TTheme = { androidHoverColor: "#9BD71C", iosHoverColor: white, }, - - thirdPartyList: { - color: "#818b91", - linkColor: "#DDDDDD", - }, devTools: { border: `1px solid ${grayDarkStrong}`, color: grayDark, @@ -2148,7 +2120,7 @@ const Dark: TTheme = { borderImageSource: `linear-gradient(to right,${black} 21px,${grayDarkStrong} 21px,${grayDarkStrong} calc(100% - 20px),${black} calc(100% - 20px))`, borderHoverImageSource: `linear-gradient(to right,${black} 0px,${grayDarkStrong} 0px,${grayDarkStrong} 100% ,${black} 100%)`, lengthenBorderImageSource: `linear-gradient(to right, ${grayDarkStrong}, ${grayDarkStrong})`, - hotkeyBorderBottom: `1px solid ${globalColors.blueMain}`, + hotkeyBorderBottom: `1px solid ${lightSecondMain}`, settingsIconDisableColor: grayDarkStrong, }, @@ -2803,7 +2775,7 @@ const Dark: TTheme = { }, deleteUser: { - textColor: red, + textColor: darkErrorStatus, }, deleteSelf: { @@ -2836,7 +2808,7 @@ const Dark: TTheme = { confirm: { activateUser: { textColor: darkLink, - textColorError: red, + textColorError: darkErrorStatus, }, change: { titleColor: darkLink, @@ -2845,12 +2817,12 @@ const Dark: TTheme = { home: { logoColor: "rgba(255, 255, 255, 0.92)", - textColorError: red, + textColorError: darkErrorStatus, }, payments: { linkColor: darkLink, - delayColor: "#F21C0E", + delayColor: darkErrorStatus, }, settings: { @@ -2871,7 +2843,7 @@ const Dark: TTheme = { admins: { backgroundColor: black, - backgroundColorWrapper: blueMain, + backgroundColorWrapper: lightSecondMain, roleColor: grayStrong, color: darkLink, @@ -2883,7 +2855,7 @@ const Dark: TTheme = { pendingNameColor: grayDark, textColor: black, - iconColor: blueMain, + iconColor: lightSecondMain, }, owner: { @@ -3026,7 +2998,7 @@ const Dark: TTheme = { color: darkBlack, btnColor: black, - btnBackgroundActive: blueMain, + btnBackgroundActive: lightSecondMain, }, tileLoader: { @@ -3152,7 +3124,7 @@ const Dark: TTheme = { editLink: { text: { color: gray, - errorColor: "#F21C0E", + errorColor: darkErrorStatus, }, }, diff --git a/packages/shared/themes/globalColors.ts b/packages/shared/themes/globalColors.ts index 6fa732682b..53e443b86f 100644 --- a/packages/shared/themes/globalColors.ts +++ b/packages/shared/themes/globalColors.ts @@ -87,6 +87,4 @@ export const globalColors = { grayMaxLight: "#eeeeee", shuttleGrey: "#63686A", - blueMain: "#2DA7DB", - red: "#c30", };