Shared: Themes: delete useless, change colors

This commit is contained in:
Viktor Fomin 2024-06-10 20:14:36 +05:00
parent 01816c6bdc
commit ed3a330fc6
3 changed files with 187 additions and 259 deletions

View File

@ -44,51 +44,66 @@ export type TColorScheme = {
}; };
const { const {
black,
white, white,
black,
grayLight,
grayLightMid,
grayStrong,
gray,
lightGrayDark,
shuttleGrey,
blueMain,
blueDisabled,
lightSecondMain,
lightSecondMainHover,
blueMaya,
lightSecondMainDisabled,
lightStatusWarning,
orangePressed,
link,
warningColor,
red,
blueLightMid,
grayText,
lightToastInfo,
lightMediumGoldenrod,
lightToastDone,
lightToastWarning,
lightToastAlert,
darkBlack, darkBlack,
lightGrayHover,
lightGraySelected,
lightErrorStatus, lightGrayBlackout,
darkGrayBlackout,
grayLight,
darkGrayLight, darkGrayLight,
lightGrayHover,
lightDarkGrayHover,
grayLightMid,
grayDarkMid,
lightGraySelected,
grayStrong,
grayDarkStrong,
gray,
grayDark,
lightGrayDark,
darkGrayDark,
grayText,
grayDarkText, grayDarkText,
lightBlueMain,
lightBlueMainHover, lightBlueMainHover,
lightBlueMainDisabled, 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; } = globalColors;
export const getBaseTheme = () => { export const getBaseTheme = () => {
@ -196,7 +211,7 @@ export const getBaseTheme = () => {
primary: lightSecondMain, primary: lightSecondMain,
primaryHover: lightSecondMainHover, 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, primaryDisabled: lightSecondMainDisabled,
}, },
@ -208,7 +223,7 @@ export const getBaseTheme = () => {
primary: `1px solid ${lightSecondMain}`, primary: `1px solid ${lightSecondMain}`,
primaryHover: `1px solid ${lightSecondMainHover}`, 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}`, primaryDisabled: `1px solid ${lightSecondMainDisabled}`,
}, },
@ -225,7 +240,6 @@ export const getBaseTheme = () => {
margin: "0", margin: "0",
lineHeight: "56px", lineHeight: "56px",
fontWeight: "700", fontWeight: "700",
borderBottom: `1px solid ${globalColors.lightGrayishBlue}`,
padding: "0 16px 16px", padding: "0 16px 16px",
bodyPadding: "16px 0", bodyPadding: "16px 0",
}, },
@ -241,8 +255,6 @@ export const getBaseTheme = () => {
mobileProgressBarBackground: "rgb(48%, 58%, 69%, 0.4)", mobileProgressBarBackground: "rgb(48%, 58%, 69%, 0.4)",
bar: { bar: {
errorBackground: orangePressed,
icon: gray, icon: gray,
}, },
@ -342,7 +354,7 @@ export const getBaseTheme = () => {
background: white, background: white,
borderConnect: "none", borderConnect: "none",
connectBackground: "#3B72A7", connectBackground: lightIcons,
disableBackgroundColor: grayLight, disableBackgroundColor: grayLight,
@ -562,20 +574,6 @@ export const getBaseTheme = () => {
hoverBorderColor: gray, 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: { row: {
minHeight: "47px", minHeight: "47px",
width: "100%", width: "100%",
@ -682,12 +680,7 @@ export const getBaseTheme = () => {
}, },
}, },
header: {
borderBottom: `1px solid ${globalColors.lightGrayishBlue}`,
},
closeButton: { closeButton: {
// backgroundColor: "#9a9ea3",
fillColor: white, fillColor: white,
}, },
}, },
@ -731,18 +724,18 @@ export const getBaseTheme = () => {
borderColor: grayStrong, borderColor: grayStrong,
errorBorderColor: "#F21C0E", errorBorderColor: "#F21C0E",
warningBorderColor: warningColor, warningBorderColor: lightErrorStatus,
disabledBorderColor: grayLightMid, disabledBorderColor: grayLightMid,
hoverBorderColor: gray, hoverBorderColor: gray,
hoverErrorBorderColor: red, hoverErrorBorderColor: red,
hoverWarningBorderColor: warningColor, hoverWarningBorderColor: lightErrorStatus,
lightToastWarningBorderColor: warningColor, lightToastWarningBorderColor: lightErrorStatus,
hoverDisabledBorderColor: grayLightMid, hoverDisabledBorderColor: grayLightMid,
focusBorderColor: blueMain, focusBorderColor: blueMain,
focusErrorBorderColor: red, focusErrorBorderColor: red,
focusWarningBorderColor: warningColor, focusWarningBorderColor: lightErrorStatus,
focusDisabledBorderColor: grayLightMid, focusDisabledBorderColor: grayLightMid,
}, },
@ -1040,8 +1033,7 @@ export const getBaseTheme = () => {
hoverBackgroundColor: lightGrayHover, hoverBackgroundColor: lightGrayHover,
disableBackgroundColor: grayLightMid, disableBackgroundColor: grayLightMid,
activeBackgroundColor: grayLightMid, activeBackgroundColor: grayLightMid,
activeSelectedBackgroundColor: activeSelectedBackgroundColor: `linear-gradient(0deg, ${blueLightMid}, ${blueLightMid}), linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1))`,
"linear-gradient(0deg, #265a8f, #265a8f), linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1))",
title: { title: {
padding: "4px 16px", padding: "4px 16px",
@ -1179,13 +1171,13 @@ export const getBaseTheme = () => {
}, },
guest: { guest: {
fill: "#3B72A7", fill: lightIcons,
stroke: darkBlack, stroke: darkBlack,
color: white, color: white,
}, },
owner: { owner: {
fill: "#EDC409", fill: favoritesStatus,
stroke: darkBlack, stroke: darkBlack,
color: white, color: white,
}, },
@ -1262,8 +1254,8 @@ export const getBaseTheme = () => {
marginTop: "-9.4px", marginTop: "-9.4px",
width: "24px", width: "24px",
height: "24px", height: "24px",
background: blueMain, background: lightSecondMain,
disabledBackground: blueDisabled, disabledBackground: lightSecondMainDisabled,
borderWidth: "6px", borderWidth: "6px",
borderStyle: "solid", borderStyle: "solid",
borderColor: `${white}`, borderColor: `${white}`,
@ -1274,7 +1266,7 @@ export const getBaseTheme = () => {
thumb: { thumb: {
width: "24px", width: "24px",
height: "24px", height: "24px",
background: blueMain, background: lightSecondMain,
border: `6px solid ${white}`, border: `6px solid ${white}`,
borderRadius: "30px", borderRadius: "30px",
marginTop: "0px", marginTop: "0px",
@ -1292,7 +1284,7 @@ export const getBaseTheme = () => {
rangeThumb: { rangeThumb: {
width: "14px", width: "14px",
height: "14px", height: "14px",
background: blueMain, background: lightSecondMain,
border: `6px solid ${white}`, border: `6px solid ${white}`,
borderRadius: "30px", borderRadius: "30px",
boxShadow: "0px 5px 20px rgba(4, 15, 27, 0.13)", boxShadow: "0px 5px 20px rgba(4, 15, 27, 0.13)",
@ -1722,7 +1714,7 @@ export const getBaseTheme = () => {
margin: "0", margin: "0",
lineHeight: "56px", lineHeight: "56px",
fontWeight: "700", fontWeight: "700",
borderBottom: `1px solid ${globalColors.lightGrayishBlue}`, borderBottom: `1px solid ${grayStrong}`,
}, },
bodyContent: { bodyContent: {
@ -1757,7 +1749,7 @@ export const getBaseTheme = () => {
contentLineHeight: "56px", contentLineHeight: "56px",
contentFontWeight: "700", contentFontWeight: "700",
borderBottom: `1px solid ${globalColors.lightGrayishBlue}`, borderBottom: `1px solid ${grayStrong}`,
}, },
aside: { aside: {
@ -1776,8 +1768,8 @@ export const getBaseTheme = () => {
dragAndDrop: { dragAndDrop: {
height: "100%", height: "100%",
transparentBorder: "1px solid transparent", transparentBorder: "1px solid transparent",
acceptBackground: lightMediumGoldenrod, acceptBackground: dndHoverColor,
background: lightToastInfo, background: dndColor,
}, },
// phoneInput: { // phoneInput: {
@ -2027,7 +2019,7 @@ export const getBaseTheme = () => {
infoPanel: { infoPanel: {
sectionHeaderToggleIcon: gray, sectionHeaderToggleIcon: gray,
sectionHeaderToggleIconActive: "#3B72A7", sectionHeaderToggleIconActive: lightIcons,
sectionHeaderToggleBg: "transparent", sectionHeaderToggleBg: "transparent",
sectionHeaderToggleBgActive: grayLight, sectionHeaderToggleBgActive: grayLight,
@ -2044,7 +2036,7 @@ export const getBaseTheme = () => {
closeButtonBg: "transparent", closeButtonBg: "transparent",
links: { links: {
iconColor: "#3B72A7", iconColor: lightIcons,
iconErrorColor: lightErrorStatus, iconErrorColor: lightErrorStatus,
primaryColor: grayText, primaryColor: grayText,
}, },
@ -2118,7 +2110,7 @@ export const getBaseTheme = () => {
}, },
peopleTableRow: { peopleTableRow: {
fill: "#3b72a7", fill: lightIcons,
nameColor: black, nameColor: black,
pendingNameColor: gray, pendingNameColor: gray,
@ -2169,15 +2161,6 @@ export const getBaseTheme = () => {
}, },
}, },
profileInfo: {
color: "#83888d",
iconButtonColor: black,
linkColor: gray,
tooltipLinkColor: black,
iconColor: orangePressed,
},
updateUserForm: { updateUserForm: {
tooltipTextColor: black, tooltipTextColor: black,
borderTop: `1px solid ${grayLightMid}`, borderTop: `1px solid ${grayLightMid}`,
@ -2224,8 +2207,8 @@ export const getBaseTheme = () => {
rowView: { rowView: {
checkedBackground: lightGrayHover, checkedBackground: lightGrayHover,
draggingBackground: lightToastInfo, draggingBackground: dndColor,
draggingHoverBackground: lightMediumGoldenrod, draggingHoverBackground: dndHoverColor,
shareButton: { shareButton: {
color: lightGrayDark, color: lightGrayDark,
@ -2236,9 +2219,9 @@ export const getBaseTheme = () => {
linkColor: black, linkColor: black,
textColor: gray, textColor: gray,
editingIconColor: "#3b72a7", editingIconColor: lightIcons,
shareHoverColor: "#3b72a7", shareHoverColor: lightIcons,
pinColor: "#3b72a7", pinColor: lightIcons,
}, },
tableView: { tableView: {
@ -2249,12 +2232,12 @@ export const getBaseTheme = () => {
row: { row: {
checkboxChecked: `linear-gradient(to right, #f3f4f4 24px, ${grayLightMid} 24px)`, checkboxChecked: `linear-gradient(to right, #f3f4f4 24px, ${grayLightMid} 24px)`,
checkboxDragging: `linear-gradient(to right, ${lightToastInfo} 24px, ${grayLightMid} 24px)`, checkboxDragging: `linear-gradient(to right, ${dndColor} 24px, ${grayLightMid} 24px)`,
checkboxDraggingHover: `linear-gradient(to right,rgb(239, 239, 178) 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, #f3f4f4 24px, ${grayLightMid} 24px)`,
contextMenuWrapperDragging: `border-image-source: linear-gradient(to left, ${lightToastInfo} 24px, ${grayLightMid} 24px)`, contextMenuWrapperDragging: `border-image-source: linear-gradient(to left, ${dndColor} 24px, ${grayLightMid} 24px)`,
contextMenuWrapperDraggingHover: `linear-gradient(to left,rgb(239, 239, 178) 24px,${grayLightMid} 24px)`, contextMenuWrapperDraggingHover: `linear-gradient(to left, ${dndHoverColor} 24px,${grayLightMid} 24px)`,
backgroundActive: `#F3F4F4`, backgroundActive: `#F3F4F4`,
@ -2263,7 +2246,7 @@ export const getBaseTheme = () => {
borderHover: gray, borderHover: gray,
sideColor: gray, sideColor: gray,
shareHoverColor: "#3b72a7", shareHoverColor: lightIcons,
borderImageRight: `linear-gradient(to right, ${white} 25px, ${grayLightMid} 24px)`, borderImageRight: `linear-gradient(to right, ${white} 25px, ${grayLightMid} 24px)`,
borderImageLeft: `linear-gradient(to left, ${white} 24px, ${grayLightMid} 24px)`, borderImageLeft: `linear-gradient(to left, ${white} 24px, ${grayLightMid} 24px)`,
@ -2275,8 +2258,8 @@ export const getBaseTheme = () => {
tilesView: { tilesView: {
tile: { tile: {
draggingColor: lightToastInfo, draggingColor: dndColor,
draggingHoverColor: lightMediumGoldenrod, draggingHoverColor: dndHoverColor,
checkedColor: lightGrayHover, checkedColor: lightGrayHover,
roomsCheckedColor: lightGrayHover, roomsCheckedColor: lightGrayHover,
border: `1px solid ${grayStrong}`, border: `1px solid ${grayStrong}`,
@ -2346,7 +2329,7 @@ export const getBaseTheme = () => {
}, },
floatingButton: { floatingButton: {
backgroundColor: "#3B72A7", backgroundColor: lightIcons,
color: white, color: white,
boxShadow: "0px 5px 20px rgba(0, 0, 0, 0.13)", boxShadow: "0px 5px 20px rgba(0, 0, 0, 0.13)",
fill: white, fill: white,
@ -2618,15 +2601,6 @@ export const getBaseTheme = () => {
color: gray, color: gray,
}, },
selectFile: {
color: gray,
background: grayLight,
borderBottom: `1px solid ${grayLightMid}`,
borderRight: `1px solid ${globalColors.lightGrayishBlue}`,
buttonsBackground: white,
},
filesList: { filesList: {
color: gray, color: gray,
backgroundColor: grayLightMid, backgroundColor: grayLightMid,
@ -2753,7 +2727,7 @@ export const getBaseTheme = () => {
filesBadges: { filesBadges: {
iconColor: gray, iconColor: gray,
hoverIconColor: "#3B72A7", hoverIconColor: lightIcons,
color: white, color: white,
backgroundColor: white, backgroundColor: white,
@ -2783,14 +2757,14 @@ export const getBaseTheme = () => {
}, },
filesIcons: { filesIcons: {
fill: "#3b72a7", fill: lightIcons,
hoverFill: "#3b72a7", hoverFill: lightIcons,
}, },
filesQuickButtons: { filesQuickButtons: {
color: gray, color: gray,
sharedColor: "#3b72a7", sharedColor: lightIcons,
hoverColor: "#3b72a7", hoverColor: lightIcons,
}, },
filesSharedButton: { filesSharedButton: {
@ -2925,15 +2899,6 @@ export const getBaseTheme = () => {
delayColor: "#F21C0E", delayColor: "#F21C0E",
}, },
paymentsEnterprise: {
background: grayLight,
buttonBackground: "#edf2f7",
linkColor: link,
headerColor: orangePressed,
},
settings: { settings: {
iconFill: black, iconFill: black,
headerTitleColor: black, headerTitleColor: black,

View File

@ -33,47 +33,66 @@ import { TTheme } from "./base";
import { DEFAULT_FONT_FAMILY } from "../constants"; import { DEFAULT_FONT_FAMILY } from "../constants";
const { const {
black,
white, white,
black,
grayLight,
grayLightMid,
grayStrong,
grayDarkMid,
gray,
lightGrayDark,
grayDark,
shuttleGrey,
blueMain,
blueDisabled,
lightSecondMain,
orangePressed,
warningColor,
red,
grayMaxLight,
grayText,
darkBlack, darkBlack,
lightStatusWarning, lightGrayBlackout,
darkGrayBlackout,
darkErrorStatus, grayLight,
darkGrayLight, darkGrayLight,
grayDarkStrong, lightGrayHover,
lightDarkGrayHover, lightDarkGrayHover,
grayDarkText, grayLightMid,
link, grayDarkMid,
darkToastDone, lightGraySelected,
darkToastInfo, grayStrong,
darkToastAlert, grayDarkStrong,
darkToastWarning, gray,
lightBlueMainDisabled, grayDark,
lightBlueMainHover, lightGrayDark,
darkGrayDark, 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; } = globalColors;
const Dark: TTheme = { const Dark: TTheme = {
@ -209,7 +228,6 @@ const Dark: TTheme = {
margin: "0", margin: "0",
lineHeight: "56px", lineHeight: "56px",
fontWeight: "700", fontWeight: "700",
borderBottom: `1px solid ${globalColors.lightGrayishBlue}`,
padding: "0 16px 16px", padding: "0 16px 16px",
bodyPadding: "16px 0", bodyPadding: "16px 0",
}, },
@ -225,8 +243,6 @@ const Dark: TTheme = {
mobileProgressBarBackground: "#606060", mobileProgressBarBackground: "#606060",
bar: { bar: {
errorBackground: orangePressed,
icon: grayDark, icon: grayDark,
}, },
@ -544,20 +560,6 @@ const Dark: TTheme = {
hoverBorderColor: grayMaxLight, 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: { row: {
minHeight: "47px", minHeight: "47px",
width: "100%", width: "100%",
@ -665,13 +667,7 @@ const Dark: TTheme = {
}, },
}, },
header: {
borderBottom: `1px solid ${grayDarkStrong}`,
},
closeButton: { closeButton: {
// backgroundColor: "#9A9EA3",
fillColor: "#9A9EA3", fillColor: "#9A9EA3",
}, },
}, },
@ -715,17 +711,17 @@ const Dark: TTheme = {
borderColor: grayDarkStrong, borderColor: grayDarkStrong,
errorBorderColor: darkErrorStatus, errorBorderColor: darkErrorStatus,
warningBorderColor: warningColor, warningBorderColor: darkErrorStatus,
disabledBorderColor: grayDarkStrong, disabledBorderColor: grayDarkStrong,
hoverBorderColor: grayDark, hoverBorderColor: grayDark,
hoverErrorBorderColor: darkErrorStatus, hoverErrorBorderColor: darkErrorStatus,
hoverWarningBorderColor: warningColor, hoverWarningBorderColor: darkErrorStatus,
hoverDisabledBorderColor: grayDarkStrong, hoverDisabledBorderColor: grayDarkStrong,
focusBorderColor: grayMaxLight, focusBorderColor: grayMaxLight,
focusErrorBorderColor: darkErrorStatus, focusErrorBorderColor: darkErrorStatus,
focusWarningBorderColor: warningColor, focusWarningBorderColor: darkErrorStatus,
focusDisabledBorderColor: grayDarkStrong, focusDisabledBorderColor: grayDarkStrong,
}, },
@ -1163,7 +1159,7 @@ const Dark: TTheme = {
}, },
owner: { owner: {
fill: "#EDC409", fill: favoritesStatus,
stroke: darkBlack, stroke: darkBlack,
color: black, color: black,
}, },
@ -1219,7 +1215,7 @@ const Dark: TTheme = {
selectLink: { selectLink: {
color: grayDarkStrong, color: grayDarkStrong,
linkColor: "#E06A1B", linkColor: darkLink,
}, },
slider: { slider: {
@ -1241,7 +1237,7 @@ const Dark: TTheme = {
width: "24px", width: "24px",
height: "24px", height: "24px",
background: grayMaxLight, background: grayMaxLight,
disabledBackground: blueDisabled, disabledBackground: darkGrayDark,
borderWidth: "6px", borderWidth: "6px",
borderStyle: "solid", borderStyle: "solid",
borderColor: `${black}`, borderColor: `${black}`,
@ -1741,7 +1737,7 @@ const Dark: TTheme = {
contentLineHeight: "56px", contentLineHeight: "56px",
contentFontWeight: "700", contentFontWeight: "700",
borderBottom: `1px solid ${globalColors.lightGrayishBlue}`, borderBottom: `1px solid ${grayDarkStrong}`,
}, },
aside: { aside: {
@ -1760,8 +1756,8 @@ const Dark: TTheme = {
dragAndDrop: { dragAndDrop: {
height: "100%", height: "100%",
transparentBorder: "1px solid transparent", transparentBorder: "1px solid transparent",
acceptBackground: "rgba(204, 184, 102, 0.2)", acceptBackground: dndDarkHover,
background: "rgba(230, 211, 138, 0.12)", background: dndDarkColor,
}, },
// phoneInput: { // phoneInput: {
@ -1952,7 +1948,7 @@ const Dark: TTheme = {
boxShadow: "0px 8px 16px 0px #040F1B29", boxShadow: "0px 8px 16px 0px #040F1B29",
icon: { icon: {
fill: "#E06A1B", fill: darkLink,
stroke: grayDarkStrong, stroke: grayDarkStrong,
}, },
}, },
@ -2152,15 +2148,6 @@ const Dark: TTheme = {
}, },
}, },
profileInfo: {
color: grayDark,
iconButtonColor: grayMaxLight,
linkColor: grayMaxLight,
tooltipLinkColor: "#e06a1b",
iconColor: orangePressed,
},
updateUserForm: { updateUserForm: {
tooltipTextColor: black, tooltipTextColor: black,
borderTop: "none", borderTop: "none",
@ -2205,8 +2192,8 @@ const Dark: TTheme = {
rowView: { rowView: {
checkedBackground: lightDarkGrayHover, checkedBackground: lightDarkGrayHover,
draggingBackground: "rgba(230, 211, 138, 0.12)", draggingBackground: dndColor,
draggingHoverBackground: "rgba(204, 184, 102, 0.2)2", draggingHoverBackground: dndHoverColor,
shareButton: { shareButton: {
color: grayDark, color: grayDark,
@ -2230,12 +2217,12 @@ const Dark: TTheme = {
row: { row: {
checkboxChecked: `linear-gradient(to right, ${black} 24px, ${grayDarkStrong} 24px)`, checkboxChecked: `linear-gradient(to right, ${black} 24px, ${grayDarkStrong} 24px)`,
checkboxDragging: `linear-gradient(to right, rgba(230, 211, 138, 0.12) 24px, ${grayDarkStrong} 24px)`, checkboxDragging: `linear-gradient(to right, ${dndDarkColor} 24px, ${grayDarkStrong} 24px)`,
checkboxDraggingHover: `inear-gradient(to right,rgba(204, 184, 102, 0.2) 24px, ${grayDarkStrong} 24px)`, checkboxDraggingHover: `inear-gradient(to right, ${dndDarkHover} 24px, ${grayDarkStrong} 24px)`,
contextMenuWrapperChecked: `linear-gradient(to left, ${black} 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)`, contextMenuWrapperDragging: `border-image-source: linear-gradient(to left, ${dndDarkColor} 24px, ${grayDarkStrong} 24px)`,
contextMenuWrapperDraggingHover: `linear-gradient(to left,rgba(204, 184, 102, 0.2) 24px, ${grayDarkStrong} 24px)`, contextMenuWrapperDraggingHover: `linear-gradient(to left, ${dndDarkHover} 24px, ${grayDarkStrong} 24px)`,
backgroundActive: lightDarkGrayHover, backgroundActive: lightDarkGrayHover,
@ -2257,8 +2244,8 @@ const Dark: TTheme = {
tilesView: { tilesView: {
tile: { tile: {
draggingColor: "rgba(230, 211, 138, 0.12)", draggingColor: dndDarkColor,
draggingHoverColor: "rgba(204, 184, 102, 0.2)", draggingHoverColor: dndDarkHover,
checkedColor: lightDarkGrayHover, checkedColor: lightDarkGrayHover,
roomsCheckedColor: black, roomsCheckedColor: black,
border: `1px solid ${grayDarkStrong}`, border: `1px solid ${grayDarkStrong}`,
@ -2536,7 +2523,7 @@ const Dark: TTheme = {
filesEmptyContainer: { filesEmptyContainer: {
linkColor: "#adadad", linkColor: "#adadad",
privateRoom: { privateRoom: {
linkColor: "#E06A1B", linkColor: darkLink,
}, },
}, },
@ -2598,15 +2585,6 @@ const Dark: TTheme = {
color: gray, color: gray,
}, },
selectFile: {
color: gray,
background: black,
borderBottom: `1px solid ${grayDarkStrong}`,
borderRight: `1px solid ${grayDarkStrong}`,
buttonsBackground: black,
},
filesList: { filesList: {
color: grayMaxLight, color: grayMaxLight,
backgroundColor: black, backgroundColor: black,
@ -2781,7 +2759,7 @@ const Dark: TTheme = {
filesPrivateRoom: { filesPrivateRoom: {
borderBottom: "1px solid #d3d3d3", borderBottom: "1px solid #d3d3d3",
linkColor: "#E06A1B", linkColor: darkLink,
textColor: "#83888D", textColor: "#83888D",
}, },
@ -2807,7 +2785,7 @@ const Dark: TTheme = {
}, },
login: { login: {
linkColor: "#E06A1B", linkColor: darkLink,
textColor: grayDark, textColor: grayDark,
navBackground: darkGrayLight, navBackground: darkGrayLight,
headerColor: white, headerColor: white,
@ -2818,7 +2796,7 @@ const Dark: TTheme = {
register: { register: {
backgroundColor: "#292929", backgroundColor: "#292929",
textColor: "#E06A1B", textColor: darkLink,
}, },
container: { container: {
@ -2860,11 +2838,11 @@ const Dark: TTheme = {
}, },
deleteSelf: { deleteSelf: {
linkColor: "#e06a1b", linkColor: darkLink,
}, },
changePassword: { changePassword: {
linkColor: "#e06a1b", linkColor: darkLink,
}, },
}, },
@ -2874,7 +2852,7 @@ const Dark: TTheme = {
client: { client: {
about: { about: {
linkColor: "#E06A1B", linkColor: darkLink,
border: `1px solid ${grayDarkStrong}`, border: `1px solid ${grayDarkStrong}`,
logoColor: white, logoColor: white,
}, },
@ -2888,11 +2866,11 @@ const Dark: TTheme = {
confirm: { confirm: {
activateUser: { activateUser: {
textColor: "#E06A1B", textColor: darkLink,
textColorError: red, textColorError: red,
}, },
change: { change: {
titleColor: "#E06A1B", titleColor: darkLink,
}, },
}, },
@ -2902,19 +2880,10 @@ const Dark: TTheme = {
}, },
payments: { payments: {
linkColor: "#E06A1B", linkColor: darkLink,
delayColor: "#F21C0E", delayColor: "#F21C0E",
}, },
paymentsEnterprise: {
background: black,
buttonBackground: "#292929",
linkColor: "#E06A1B",
headerColor: orangePressed,
},
settings: { settings: {
iconFill: white, iconFill: white,
headerTitleColor: white, headerTitleColor: white,
@ -2936,7 +2905,7 @@ const Dark: TTheme = {
backgroundColorWrapper: blueMain, backgroundColorWrapper: blueMain,
roleColor: grayStrong, roleColor: grayStrong,
color: "#E06A1B", color: darkLink,
departmentColor: grayDark, departmentColor: grayDark,
tooltipColor: "#F5E9BA", tooltipColor: "#F5E9BA",
@ -2950,7 +2919,7 @@ const Dark: TTheme = {
owner: { owner: {
backgroundColor: black, backgroundColor: black,
linkColor: "#E06A1B", linkColor: darkLink,
departmentColor: grayDark, departmentColor: grayDark,
tooltipColor: "#F5E9BA", tooltipColor: "#F5E9BA",
}, },
@ -2967,8 +2936,8 @@ const Dark: TTheme = {
common: { common: {
linkColor: grayDark, linkColor: grayDark,
linkColorHelp: "#E06A1B", linkColorHelp: darkLink,
tooltipLinkColor: "#e06a1b", tooltipLinkColor: darkLink,
arrowColor: white, arrowColor: white,
descriptionColor: grayDark, descriptionColor: grayDark,
brandingDescriptionColor: grayDark, brandingDescriptionColor: grayDark,
@ -2990,7 +2959,7 @@ const Dark: TTheme = {
integration: { integration: {
separatorBorder: `1px solid ${grayDarkStrong}`, separatorBorder: `1px solid ${grayDarkStrong}`,
linkColor: "#E06A1B", linkColor: darkLink,
sso: { sso: {
toggleContentBackground: grayDarkStrong, toggleContentBackground: grayDarkStrong,
@ -3078,7 +3047,7 @@ const Dark: TTheme = {
}, },
wizard: { wizard: {
linkColor: "#E06A1B", linkColor: darkLink,
generatePasswordColor: "#a9a9a9", generatePasswordColor: "#a9a9a9",
}, },
}, },
@ -3112,7 +3081,7 @@ const Dark: TTheme = {
backgroundColor: black, backgroundColor: black,
activeTextColor: white, activeTextColor: white,
textColor: "#ADADAD", textColor: "#ADADAD",
bottomLineColor: "#E06A1B", bottomLineColor: darkLink,
}, },
hotkeys: { hotkeys: {

View File

@ -77,22 +77,16 @@ export const globalColors = {
darkToastAlert: "#E0B151", darkToastAlert: "#E0B151",
lightToastWarning: "#F7CDBE", lightToastWarning: "#F7CDBE",
darkToastWarning: "#E07751", 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", grayMaxLight: "#eeeeee",
shuttleGrey: "#63686A", shuttleGrey: "#63686A",
veryLightGrey: "#CACACA",
blueMain: "#2DA7DB", blueMain: "#2DA7DB",
blueDisabled: "#A6DCF2",
blueMaya: "#4A8ACA",
lightGrayishBlue: "#DEE2E6",
orangePressed: "#C96C27",
lightMediumGoldenrod: "#EFEFB2",
warningColor: "#f1ca92",
red: "#c30", red: "#c30",
}; };