Shared: Themes: delete useless, change colors
This commit is contained in:
parent
01816c6bdc
commit
ed3a330fc6
@ -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,
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -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",
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user