diff --git a/packages/shared/themes/base.ts b/packages/shared/themes/base.ts index b6ede54d1c..f44349e9d3 100644 --- a/packages/shared/themes/base.ts +++ b/packages/shared/themes/base.ts @@ -72,6 +72,8 @@ const { lightSecondMainHover, lightSecondMainDisabled, + mainGreen, + lightErrorStatus, darkErrorStatus, favoritesStatus, @@ -100,6 +102,15 @@ const { dndHoverColor, dndDarkHover, + onWhiteColor, + + editorGreenColor, + editorBlueColor, + editorOrangeColor, + windowsColor, + linuxColor, + androidColor, + grayMaxLight, shuttleGrey, } = globalColors; @@ -209,7 +220,7 @@ export const getBaseTheme = () => { primary: lightSecondMain, primaryHover: lightSecondMainHover, - primaryActive: `linear-gradient(0deg, ${lightSecondMain}, ${lightSecondMain}),linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1))`, + primaryActive: `linear-gradient(0deg, ${lightSecondMain}, ${lightSecondMain}),linear-gradient(0deg, ${onWhiteColor}, ${onWhiteColor})`, primaryDisabled: lightSecondMainDisabled, }, @@ -221,7 +232,7 @@ export const getBaseTheme = () => { primary: `1px solid ${lightSecondMain}`, primaryHover: `1px solid ${lightSecondMainHover}`, - primaryActive: `1px solid linear-gradient(0deg, ${lightSecondMain}, ${lightSecondMain}),linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1))`, + primaryActive: `1px solid linear-gradient(0deg, ${lightSecondMain}, ${lightSecondMain}),linear-gradient(0deg, ${onWhiteColor}, ${onWhiteColor})`, primaryDisabled: `1px solid ${lightSecondMainDisabled}`, }, @@ -983,7 +994,7 @@ export const getBaseTheme = () => { hoverBackgroundColor: lightGrayHover, disableBackgroundColor: grayLightMid, activeBackgroundColor: grayLightMid, - activeSelectedBackgroundColor: `linear-gradient(0deg, ${blueLightMid}, ${blueLightMid}), linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1))`, + activeSelectedBackgroundColor: `linear-gradient(0deg, ${blueLightMid}, ${blueLightMid}), linear-gradient(0deg, ${onWhiteColor}, ${onWhiteColor})`, title: { padding: "4px 16px", @@ -1487,56 +1498,6 @@ export const getBaseTheme = () => { borderBottom: "1px solid rgb(222, 226, 230)", }, - // dropDownItem: { - // width: "100%", - // maxWidth: "240px", - // border: "none", - // cursor: "pointer", - // padding: "0px 16px", - // lineHeight: "32px", - // textAlign: "left", - // background: "none", - // textDecoration: "none", - // fontStyle: "normal", - // fontWeight: "600", - // fontSize: "13px", - - // whiteSpace: "nowrap", - // overflow: "hidden", - // textOverflow: "ellipsis", - - // outline: "none", - // color: black, - // textTransform: "none", - - // hoverBackgroundColor: grayLight, - // noHoverBackgroundColor: white, - - // header: { - // color: gray, - // hoverCursor: "default", - // hoverBackgroundColor: "white", - // textTransform: "uppercase", - // }, - - // disabled: { - // color: gray, - // hoverCursor: "default", - // hoverBackgroundColor: "white", - // }, - - // separator: { - // padding: "0px 16px", - // border: `0.5px solid ${grayLightMid}`, - // cursor: "default", - // margin: "6px 16px 6px", - // lineHeight: "1px", - // height: "1px", - // width: "calc(100% - 32px)", - // }, - - // tablet: { lineHeight: "36px" }, - comboBox: { padding: "6px 0px", background: lightGraySelected, @@ -1718,70 +1679,6 @@ export const getBaseTheme = () => { background: dndColor, }, - // phoneInput: { - // width: "304px", - // height: "44px", - // itemTextColor: black, - // itemBackgroundColor: white, - // itemHoverColor: grayLightMid, - // scrollBackground: "rgba(0, 0, 0, 0.1)", - // placeholderColor: gray, - // }, - - // squareButton: { - // height: "32px", - // width: "32px", - // color: gray, - // backgroundColor: white, - // border: `1px solid ${grayStrong}`, - // borderRadius: "3px", - // outline: "none", - // hover: { - // backgroundColor: white, - // border: `1px solid ${gray}`, - // }, - // click: { - // backgroundColor: grayLightMid, - // border: `1px solid ${gray}`, - // }, - // disable: { - // backgroundColor: grayLight, - // border: `1px solid ${grayLightMid}`, - // }, - // crossShape: { - // disable: { - // color: gray, - // }, - // }, - // }, - - // roundButton: { - // height: "40px", - // width: "40px", - // backgroundColor: grayLight, - // borderRadius: { - // plus: "112px", - // minus: "81px", - // }, - // borderStyle: "none", - // outline: "none", - // hover: { - // backgroundColor: grayLightMid, - // }, - // click: { - // backgroundColor: grayStrong, - // }, - // disable: { - // backgroundColor: grayLight, - // }, - // plus: { - // color: grayStrong, - // disable: { - // color: black, - // }, - // }, - // }, - catalog: { background: grayLight, @@ -2026,11 +1923,11 @@ export const getBaseTheme = () => { expanderColor: "dimgray", downloadAppList: { textColor: gray, - color: "#CDCFD1", - winHoverColor: "#3785D3", + color: gray, + winHoverColor: windowsColor, macHoverColor: darkBlack, - linuxHoverColor: "#FFB800", - androidHoverColor: "#9BD71C", + linuxHoverColor: linuxColor, + androidHoverColor: androidColor, iosHoverColor: darkBlack, }, devTools: { @@ -2045,8 +1942,6 @@ export const getBaseTheme = () => { }, peopleTableRow: { - fill: lightIcons, - nameColor: black, pendingNameColor: gray, @@ -2341,8 +2236,8 @@ export const getBaseTheme = () => { descriptionText: gray, }, displayItem: { - background: "#f8f8f8", - borderColor: "#f8f8f8", + background: grayLight, + borderColor: grayLight, descriptionText: grayText, }, }, @@ -2453,7 +2348,7 @@ export const getBaseTheme = () => { filesEmptyContainer: { linkColor: grayText, privateRoom: { - linkColor: "#116d9d", + linkColor: link, }, }, @@ -2501,7 +2396,7 @@ export const getBaseTheme = () => { }, embedding: { - textAreaColor: "#AEAEAE", + textAreaColor: gray, iconColor: black, color: gray, }, @@ -2708,9 +2603,9 @@ export const getBaseTheme = () => { }, filesPrivateRoom: { - borderBottom: "1px solid #d3d3d3", - linkColor: "#116d9d", - textColor: "#83888D", + borderBottom: `1px solid ${grayLightMid}`, + linkColor: link, + textColor: grayText, }, filesVersionHistory: { @@ -2763,12 +2658,6 @@ export const getBaseTheme = () => { }, }, - facebookButton: { - background: white, - border: "1px solid #1877f2", - color: "#1877f2", - }, - peopleSelector: { textColor: gray, }, @@ -2816,11 +2705,11 @@ export const getBaseTheme = () => { confirm: { activateUser: { - textColor: "#116d9d", + textColor: link, textColorError: lightErrorStatus, }, change: { - titleColor: "#116d9d", + titleColor: link, }, }, @@ -2898,9 +2787,9 @@ export const getBaseTheme = () => { backgroundColorWhite: white, backgroundColorLight: grayLight, backgroundColorDark: darkGrayLight, - greenBackgroundColor: "#40865C", - blueBackgroundColor: "#446995", - orangeBackgroundColor: "#AA5252", + greenBackgroundColor: editorGreenColor, + blueBackgroundColor: editorBlueColor, + orangeBackgroundColor: editorOrangeColor, dataFontColor: white, dataFontColorBlack: black, @@ -2963,7 +2852,7 @@ export const getBaseTheme = () => { }, warningColor: lightErrorStatus, - color: "#F97A0B", + color: lightStatusWarning, }, migration: { @@ -2976,7 +2865,7 @@ export const getBaseTheme = () => { infoBlockBackground: grayLight, infoBlockTextColor: grayText, errorTextColor: lightErrorStatus, - existingTextColor: "#2db482", + existingTextColor: mainGreen, tableHeaderText: gray, tableRowHoverColor: lightGrayHover, tableRowTextColor: gray, @@ -3000,7 +2889,7 @@ export const getBaseTheme = () => { }, wizard: { - linkColor: "#116d9d", + linkColor: link, generatePasswordColor: lightGrayDark, }, }, @@ -3097,7 +2986,7 @@ export const getBaseTheme = () => { background: white, border: `1px solid ${grayStrong}`, color: black, - lineColor: "#C4C4C4", + lineColor: grayStrong, disabledBackground: grayLight, disabledBorder: `1px solid ${grayLightMid}`, disabledColor: gray, diff --git a/packages/shared/themes/dark.ts b/packages/shared/themes/dark.ts index 22f9b49313..6efe5b4527 100644 --- a/packages/shared/themes/dark.ts +++ b/packages/shared/themes/dark.ts @@ -89,6 +89,13 @@ const { dndHoverColor, dndDarkHover, + editorGreenColor, + editorBlueColor, + editorOrangeColor, + windowsColor, + linuxColor, + androidColor, + grayMaxLight, shuttleGrey, } = globalColors; @@ -1309,7 +1316,6 @@ const Dark: TTheme = { background: black, borderRadius: "6px", boxShadow: "0px 8px 16px 0px #040F1B29", - // boxShadowMobile: "0px -4px 60px rgba(0, 0, 0, 0.25)", border: `1px solid ${grayDarkStrong}`, }, @@ -1472,56 +1478,6 @@ const Dark: TTheme = { borderBottom: `1px solid ${black}`, }, - // dropDownItem: { - // width: "100%", - // maxWidth: "240px", - // border: "none", - // cursor: "pointer", - // padding: "0px 16px", - // lineHeight: "32px", - // textAlign: "left", - // background: "none", - // textDecoration: "none", - // fontStyle: "normal", - // fontWeight: "600", - // fontSize: "13px", - - // whiteSpace: "nowrap", - // overflow: "hidden", - // textOverflow: "ellipsis", - - // outline: "none", - // color: black, - // textTransform: "none", - - // hoverBackgroundColor: grayLight, - // noHoverBackgroundColor: white, - - // header: { - // color: gray, - // hoverCursor: "default", - // hoverBackgroundColor: "white", - // textTransform: "uppercase", - // }, - - // disabled: { - // color: gray, - // hoverCursor: "default", - // hoverBackgroundColor: "white", - // }, - - // separator: { - // padding: "0px 16px", - // border: `0.5px solid ${grayLightMid}`, - // cursor: "default", - // margin: "6px 16px 6px", - // lineHeight: "1px", - // height: "1px", - // width: "calc(100% - 32px)", - // }, - - // tablet: { lineHeight: "36px" }, - comboBox: { padding: "6px 0px", background: black, @@ -1707,69 +1663,6 @@ const Dark: TTheme = { background: dndDarkColor, }, - // phoneInput: { - // width: "304px", - // height: "44px", - // itemTextColor: black, - // itemBackgroundColor: white, - // itemHoverColor: grayLightMid, - // scrollBackground: "rgba(0, 0, 0, 0.1)", - // placeholderColor: gray, - // }, - - // squareButton: { - // height: "32px", - // width: "32px", - // color: gray, - // backgroundColor: white, - // border: `1px solid ${grayStrong}`, - // borderRadius: "3px", - // outline: "none", - // hover: { - // backgroundColor: white, - // border: `1px solid ${gray}`, - // }, - // click: { - // backgroundColor: grayLightMid, - // border: `1px solid ${gray}`, - // }, - // disable: { - // backgroundColor: grayLight, - // border: `1px solid ${grayLightMid}`, - // }, - // crossShape: { - // disable: { - // color: gray, - // }, - // }, - // }, - - // roundButton: { - // height: "40px", - // width: "40px", - // backgroundColor: grayLight, - // borderRadius: { - // plus: "112px", - // minus: "81px", - // }, - // borderStyle: "none", - // outline: "none", - // hover: { - // backgroundColor: grayLightMid, - // }, - // click: { - // backgroundColor: grayStrong, - // }, - // disable: { - // backgroundColor: grayLight, - // }, - // plus: { - // color: grayStrong, - // disable: { - // color: black, - // }, - // }, - // }, catalog: { background: black, @@ -1946,7 +1839,7 @@ const Dark: TTheme = { infoPanel: { sectionHeaderToggleIcon: grayDark, - sectionHeaderToggleIconActive: "#c4c4c4", + sectionHeaderToggleIconActive: grayStrong, sectionHeaderToggleBg: "transparent", sectionHeaderToggleBgActive: black, @@ -2010,16 +1903,16 @@ const Dark: TTheme = { background: black, panelBackground: grayDarkStrong, - fill: "#C4C4C4", - expanderColor: "#C4C4C4", + fill: grayStrong, + expanderColor: grayStrong, downloadAppList: { textColor: grayDark, color: grayDarkText, - winHoverColor: "#3785D3", + winHoverColor: windowsColor, macHoverColor: white, - linuxHoverColor: "#FFB800", - androidHoverColor: "#9BD71C", + linuxHoverColor: linuxColor, + androidHoverColor: androidColor, iosHoverColor: white, }, devTools: { @@ -2029,8 +1922,8 @@ const Dark: TTheme = { }, peopleArticleBody: { - iconColor: "#C4C4C4", - expanderColor: "#C4C4C4", + iconColor: grayStrong, + expanderColor: grayStrong, }, peopleTableRow: { @@ -2693,9 +2586,9 @@ const Dark: TTheme = { }, filesPrivateRoom: { - borderBottom: "1px solid #d3d3d3", + borderBottom: `1px solid ${grayDarkMid}`, linkColor: darkLink, - textColor: "#83888D", + textColor: grayDarkText, }, filesVersionHistory: { @@ -2748,12 +2641,6 @@ const Dark: TTheme = { }, }, - facebookButton: { - background: black, - border: `1px solid ${grayDarkStrong}`, - color: grayMaxLight, - }, - peopleSelector: { textColor: grayMaxLight, }, @@ -2824,9 +2711,9 @@ const Dark: TTheme = { headerTitleColor: white, trashIcon: grayDark, article: { - titleColor: "#c4c4c4", - fillIcon: "#c4c4c4", - expanderColor: "#c4c4c4", + titleColor: grayStrong, + fillIcon: grayStrong, + expanderColor: grayStrong, }, separatorBorder: `1px solid ${grayDarkStrong}`, @@ -2883,9 +2770,9 @@ const Dark: TTheme = { backgroundColorWhite: white, backgroundColorLight: grayLight, backgroundColorDark: darkGrayLight, - greenBackgroundColor: "#40865C", - blueBackgroundColor: "#446995", - orangeBackgroundColor: "#AA5252", + greenBackgroundColor: editorGreenColor, + blueBackgroundColor: editorBlueColor, + orangeBackgroundColor: editorOrangeColor, dataFontColor: white, dataFontColorBlack: white, @@ -3021,7 +2908,7 @@ const Dark: TTheme = { hotkeys: { key: { - color: "#C4C4C4", + color: grayStrong, }, }, diff --git a/packages/shared/themes/globalColors.ts b/packages/shared/themes/globalColors.ts index 53e443b86f..13d1f2eaed 100644 --- a/packages/shared/themes/globalColors.ts +++ b/packages/shared/themes/globalColors.ts @@ -54,6 +54,8 @@ export const globalColors = { lightSecondMainHover: "rgba(82, 153, 224, 0.85)", lightSecondMainDisabled: "rgba(82, 153, 224, 0.6)", + mainGreen: "#2DB482", + lightErrorStatus: "#F24724", darkErrorStatus: "#E06451", favoritesStatus: "#EDC409", @@ -83,6 +85,15 @@ export const globalColors = { dndDarkColor: "rgba(229, 228, 138, 0.12)", dndHoverColor: "rgba(204, 202, 102, 0.5)", dndDarkHover: "rgba(204, 184, 102, 0.2)", + + onWhiteColor: "rgba(0, 0, 0, 0.1)", + + editorGreenColor: "#40865C", + editorBlueColor: "#446995", + editorOrangeColor: "#AA5252", + windowsColor: "#4C83CD", + linuxColor: "#F4BB40", + androidColor: "#A8D548", // grayMaxLight: "#eeeeee",