IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Shared: Themes: fix missing

Browse Source
This commit is contained in:
Viktor Fomin 2024-06-10 12:26:59 +05:00
parent 6fddf9a00d
commit 53e678b310
2 changed files with 52 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
packages/shared/themes/base.ts
View File

@ -343,7 +343,7 @@ export const getBaseTheme = () => {
outline: "none", outline: "none",
width: "100%", width: "100%",
border: "1px solid #D0D5DA", border: `1px solid ${grayMid}`,
background: white, background: white,
borderConnect: "none", borderConnect: "none",
@ -356,7 +356,7 @@ export const getBaseTheme = () => {
hoverConnectBackground: link, hoverConnectBackground: link,
hoverConnectBorder: "none", hoverConnectBorder: "none",
activeBorder: "1px solid #D0D5DA", activeBorder: `1px solid ${grayMid}`,
activeBackground: grayLightMid, activeBackground: grayLightMid,
activeConnectBorder: "none", activeConnectBorder: "none",
activeConnectBackground: blueLightMid, activeConnectBackground: blueLightMid,
@ -865,7 +865,7 @@ export const getBaseTheme = () => {
inactiveBorderColor: grayMid, inactiveBorderColor: grayMid,
errorBorderColor: "#f21c0e", errorBorderColor: "#f21c0e",
backgroundColor: white, backgroundColor: white,
color: "#33333", color: black,
scrollBackground: gray, scrollBackground: gray,
placeholderColor: gray, placeholderColor: gray,
dialCodeColor: gray, dialCodeColor: gray,
@ -1033,8 +1033,8 @@ export const getBaseTheme = () => {
}, },
label: { label: {
height: " 30px", height: "30px",
border: "1px solid #ECEEF1", border: `1px solid ${grayLightMid}`,
borderRadius: "16px", borderRadius: "16px",
minWidth: "fit-content", minWidth: "fit-content",
marginRight: "8px", marginRight: "8px",
@ -1913,7 +1913,7 @@ export const getBaseTheme = () => {
background: grayLight, background: grayLight,
header: { header: {
borderBottom: "1px solid #eceef1", borderBottom: `1px solid ${grayLightMid}`,
iconFill: grayMain, iconFill: grayMain,
}, },
control: { control: {
@ -1923,10 +1923,10 @@ export const getBaseTheme = () => {
headerBurgerColor: grayMain, headerBurgerColor: grayMain,
verticalLine: "1px solid #eceef1", verticalLine: `1px solid ${grayLightMid}`,
profile: { profile: {
borderTop: "1px solid #eceef1", borderTop: `1px solid ${grayLightMid}`,
background: lightHover, background: lightHover,
}, },
@ -2084,7 +2084,7 @@ export const getBaseTheme = () => {
header: { header: {
backgroundColor: white, backgroundColor: white,
background: `linear-gradient(180deg,#ffffff 2.81%,rgba(255, 255, 255, 0.91) 63.03%,rgba(255, 255, 255, 0) 100%)`, background: `linear-gradient(180deg, ${white} 2.81%,rgba(255, 255, 255, 0.91) 63.03%,rgba(255, 255, 255, 0) 100%)`,
trashErasureLabelBackground: grayLight, trashErasureLabelBackground: grayLight,
trashErasureLabelText: cyanBlueDarkShade, trashErasureLabelText: cyanBlueDarkShade,
}, },
@ -2194,8 +2194,8 @@ export const getBaseTheme = () => {
filterInput: { filterInput: {
button: { button: {
border: "1px solid #d0d5da", border: `1px solid ${grayMid}`,
hoverBorder: "1px solid #a3a9ae", hoverBorder: `1px solid ${gray}`,
openBackground: gray, openBackground: gray,
@ -2204,7 +2204,7 @@ export const getBaseTheme = () => {
filter: { filter: {
background: white, background: white,
border: "1px solid #eceef1", border: `1px solid ${grayLightMid}`,
color: gray, color: gray,
separatorColor: grayLightMid, separatorColor: grayLightMid,
@ -2245,7 +2245,7 @@ export const getBaseTheme = () => {
updateUserForm: { updateUserForm: {
tooltipTextColor: black, tooltipTextColor: black,
borderTop: "1px solid #eceef1", borderTop: `1px solid ${grayLightMid}`,
}, },
tableContainer: { tableContainer: {
@ -2330,10 +2330,8 @@ export const getBaseTheme = () => {
sideColor: gray, sideColor: gray,
shareHoverColor: "#3b72a7", shareHoverColor: "#3b72a7",
borderImageRight: borderImageRight: `linear-gradient(to right, ${white} 25px, ${grayLightMid} 24px)`,
"linear-gradient(to right, #ffffff 25px,#eceef1 24px)", borderImageLeft: `linear-gradient(to left, ${white} 24px, ${grayLightMid} 24px)`,
borderImageLeft:
"linear-gradient(to left, #ffffff 24px,#eceef1 24px)",
borderColor: grayLightMid, borderColor: grayLightMid,
borderColorTransition: lightHover, borderColorTransition: lightHover,
@ -2593,8 +2591,8 @@ export const getBaseTheme = () => {
connectedClouds: { connectedClouds: {
color: grayMain, color: grayMain,
borderBottom: `1px solid #eceef1`, borderBottom: `1px solid ${grayLightMid}`,
borderRight: `1px solid #d0d5da`, borderRight: `1px solid ${grayMid}`,
}, },
filesModalDialog: { filesModalDialog: {
@ -2719,14 +2717,14 @@ export const getBaseTheme = () => {
fill: gray, fill: gray,
loadingFill: grayMid, loadingFill: grayMid,
borderBottom: "1px solid #eceef1", borderBottom: `1px solid ${grayLightMid}`,
borderTop: "1px solid #eceef1", borderTop: `1px solid ${grayLightMid}`,
externalLinkBackground: grayLight, externalLinkBackground: grayLight,
externalLinkSvg: black, externalLinkSvg: black,
internalLinkBorder: "1px dashed #333333", internalLinkBorder: `1px dashed ${black}`,
itemBorder: "1px dashed #333333", itemBorder: `1px dashed ${black}`,
itemOwnerColor: "rgb(163, 169, 174)", itemOwnerColor: "rgb(163, 169, 174)",
@ -3090,7 +3088,7 @@ export const getBaseTheme = () => {
toggleContentBackground: grayLight, toggleContentBackground: grayLight,
iconButton: black, iconButton: black,
iconButtonDisabled: gray, iconButtonDisabled: gray,
border: "1px solid #eceef1", border: `1px solid ${grayLightMid}`,
}, },
smtp: { smtp: {
@ -3100,7 +3098,7 @@ export const getBaseTheme = () => {
backup: { backup: {
rectangleBackgroundColor: grayLight, rectangleBackgroundColor: grayLight,
separatorBorder: "1px solid #eceef1", separatorBorder: `1px solid ${grayLightMid}`,
warningColor: "#f21c0e", warningColor: "#f21c0e",
textColor: gray, textColor: gray,
backupCheckedListItemBackground: lightHover, backupCheckedListItemBackground: lightHover,
@ -3113,14 +3111,14 @@ export const getBaseTheme = () => {
backgroundColor: grayLight, backgroundColor: grayLight,
linkColor: link, linkColor: link,
tariffText: cyanBlueDarkShade, tariffText: cyanBlueDarkShade,
border: "1px solid #f8f9f9", border: `1px solid ${grayLight}`,
backgroundBenefitsColor: grayLight, backgroundBenefitsColor: grayLight,
rectangleColor: lightHover, rectangleColor: lightHover,
priceContainer: { priceContainer: {
backgroundText: lightHover, backgroundText: lightHover,
background: "transparent", background: "transparent",
border: "1px solid #d0d5da", border: `1px solid ${grayMid}`,
featureTextColor: gray, featureTextColor: gray,
disableColor: gray, disableColor: gray,
@ -3145,7 +3143,7 @@ export const getBaseTheme = () => {
descriptionColor: grayMain, descriptionColor: grayMain,
subtitleColor: black, subtitleColor: black,
workspaceBackground: white, workspaceBackground: white,
workspaceBorder: "1px solid #d0d5da", workspaceBorder: `1px solid ${grayMid}`,
stepDescriptionColor: black, stepDescriptionColor: black,
fileInputIconColor: gray, fileInputIconColor: gray,
infoBlockBackground: grayLight, infoBlockBackground: grayLight,
@ -3165,7 +3163,7 @@ export const getBaseTheme = () => {
importItemDescription: black, importItemDescription: black,
importIconColor: grayMain, importIconColor: grayMain,
groupMenuBackground: white, groupMenuBackground: white,
groupMenuBorder: "1px solid #fff", groupMenuBorder: `1px solid ${white}`,
groupMenuBoxShadow: "rgba(4, 15, 27, 0.07) 0px 5px 5px 0px", groupMenuBoxShadow: "rgba(4, 15, 27, 0.07) 0px 5px 5px 0px",
}, },
storageManagement: { storageManagement: {
@ -3239,7 +3237,7 @@ export const getBaseTheme = () => {
}, },
themePreview: { themePreview: {
descriptionColor: gray, descriptionColor: gray,
border: "1px solid #eceef1", border: `1px solid ${grayLightMid}`,
}, },
notifications: { notifications: {
textDescriptionColor: gray, textDescriptionColor: gray,
@ -3270,11 +3268,11 @@ export const getBaseTheme = () => {
codeInput: { codeInput: {
background: white, background: white,
border: "1px solid #d0d5da", border: `1px solid ${grayMid}`,
color: black, color: black,
lineColor: "#C4C4C4", lineColor: "#C4C4C4",
disabledBackground: grayLight, disabledBackground: grayLight,
disabledBorder: "1px solid #ECEEF1", disabledBorder: `1px solid ${grayLightMid}`,
disabledColor: gray, disabledColor: gray,
}, },

46
packages/shared/themes/dark.ts
View File

@ -184,7 +184,7 @@ const Dark: TTheme = {
border: { border: {
base: `1px solid ${outerSpace}`, base: `1px solid ${outerSpace}`,
baseHover: `1px solid #858585`, baseHover: `1px solid ${grayDark}`,
baseActive: `1px solid #CCCCCC`, baseActive: `1px solid #CCCCCC`,
baseDisabled: `1px solid ${outerSpace}`, baseDisabled: `1px solid ${outerSpace}`,
@ -326,13 +326,12 @@ const Dark: TTheme = {
background: black, background: black,
borderConnect: "none", borderConnect: "none",
connectBackground: connectBackground: `linear-gradient(0deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)), ${black}`,
"linear-gradient(0deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)), #333333",
disableBackgroundColor: "rgba(0, 0, 0, 0.08)", disableBackgroundColor: "rgba(0, 0, 0, 0.08)",
hoverBackground: black, hoverBackground: black,
hoverBorder: "1px solid #858585", hoverBorder: `1px solid ${grayDark}`,
hoverConnectBackground: white, hoverConnectBackground: white,
hoverConnectBorder: "none", hoverConnectBorder: "none",
@ -449,14 +448,14 @@ const Dark: TTheme = {
selectedItem: { selectedItem: {
background: grayDarkMid, background: grayDarkMid,
border: `1px solid #242424`, border: `1px solid ${grayDarkMid}`,
borderRadius: "3px", borderRadius: "3px",
textBox: { textBox: {
padding: "0 8px", padding: "0 8px",
height: "32px", height: "32px",
alignItems: "center", alignItems: "center",
borderRight: `1px solid #242424`, borderRight: `1px solid ${grayDarkMid}`,
}, },
text: { text: {
@ -841,7 +840,7 @@ const Dark: TTheme = {
activeBorderColor: blueMain, activeBorderColor: blueMain,
inactiveBorderColor: outerSpace, inactiveBorderColor: outerSpace,
errorBorderColor: "#f21c0e", errorBorderColor: "#f21c0e",
backgroundColor: "#33333", backgroundColor: black,
color: white, color: white,
scrollBackground: grayDark, scrollBackground: grayDark,
placeholderColor: grayDark, placeholderColor: grayDark,
@ -1018,8 +1017,7 @@ const Dark: TTheme = {
hoverBackgroundColor: outerSpace, hoverBackgroundColor: outerSpace,
disableBackgroundColor: charlestonGreen, disableBackgroundColor: charlestonGreen,
activeBackgroundColor: charlestonGreen, activeBackgroundColor: charlestonGreen,
activeSelectedBackgroundColor: activeSelectedBackgroundColor: `linear-gradient(0deg, ${white}, ${white}), linear-gradient(0deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18))`,
"linear-gradient(0deg, #FFFFFF, #FFFFFF), linear-gradient(0deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18))",
title: { title: {
padding: "4px 16px", padding: "4px 16px",
@ -1230,7 +1228,7 @@ const Dark: TTheme = {
runnableTrack: { runnableTrack: {
background: grayDarkMid, background: grayDarkMid,
focusBackground: grayDarkMid, focusBackground: grayDarkMid,
border: `1.4px solid #242424`, border: `1.4px solid ${grayDarkMid}`,
borderRadius: "5.6px", borderRadius: "5.6px",
width: "100%", width: "100%",
height: "8px", height: "8px",
@ -1261,7 +1259,7 @@ const Dark: TTheme = {
rangeTrack: { rangeTrack: {
background: grayDarkMid, background: grayDarkMid,
border: `1.4px solid #242424`, border: `1.4px solid ${grayDarkMid}`,
borderRadius: "5.6px", borderRadius: "5.6px",
width: "100%", width: "100%",
height: "8px", height: "8px",
@ -1292,14 +1290,14 @@ const Dark: TTheme = {
fillLower: { fillLower: {
background: grayDarkMid, background: grayDarkMid,
focusBackground: grayDarkMid, focusBackground: grayDarkMid,
border: `1.4px solid #242424`, border: `1.4px solid ${grayDarkMid}`,
borderRadius: "11.2px", borderRadius: "11.2px",
}, },
fillUpper: { fillUpper: {
background: grayDarkMid, background: grayDarkMid,
focusBackground: grayDarkMid, focusBackground: grayDarkMid,
border: `1.4px solid #242424`, border: `1.4px solid ${grayDarkMid}`,
borderRadius: "11.2px", borderRadius: "11.2px",
}, },
}, },
@ -1311,7 +1309,7 @@ const Dark: TTheme = {
container: { container: {
miniPreview: { miniPreview: {
width: "160px", width: "160px",
border: `1px solid #242424`, border: `1px solid ${grayDarkMid}`,
borderRadius: "6px", borderRadius: "6px",
padding: "8px", padding: "8px",
}, },
@ -2030,7 +2028,7 @@ const Dark: TTheme = {
}, },
header: { header: {
backgroundColor: "#282828 ", backgroundColor: charlestonGreen,
recoveryColor: "#4C4C4C", recoveryColor: "#4C4C4C",
linkColor: "#606060", linkColor: "#606060",
productColor: grayMaxLight, productColor: grayMaxLight,
@ -2060,7 +2058,7 @@ const Dark: TTheme = {
header: { header: {
backgroundColor: black, backgroundColor: black,
background: `linear-gradient(180deg, #333333 2.81%, rgba(51, 51, 51, 0.9) 63.03%, rgba(51, 51, 51, 0) 100%);`, background: `linear-gradient(180deg, ${black} 2.81%, rgba(51, 51, 51, 0.9) 63.03%, rgba(51, 51, 51, 0) 100%);`,
trashErasureLabelBackground: "#292929", trashErasureLabelBackground: "#292929",
trashErasureLabelText: "#ADADAD", trashErasureLabelText: "#ADADAD",
}, },
@ -2173,7 +2171,7 @@ const Dark: TTheme = {
filterInput: { filterInput: {
button: { button: {
border: `1px solid ${outerSpace}`, border: `1px solid ${outerSpace}`,
hoverBorder: "1px solid #858585", hoverBorder: `1px solid ${grayDark}`,
openBackground: gray, openBackground: gray,
@ -2307,8 +2305,8 @@ const Dark: TTheme = {
shareHoverColor: grayMaxLight, shareHoverColor: grayMaxLight,
borderImageRight: `linear-gradient(to right, #333333 25px, ${outerSpace} 24px)`, borderImageRight: `linear-gradient(to right, ${black} 25px, ${outerSpace} 24px)`,
borderImageLeft: `linear-gradient(to left, #333333 20px, ${outerSpace} 24px)`, borderImageLeft: `linear-gradient(to left, ${black} 20px, ${outerSpace} 24px)`,
borderColor: outerSpace, borderColor: outerSpace,
borderColorTransition: outerSpace, borderColorTransition: outerSpace,
@ -2699,9 +2697,9 @@ const Dark: TTheme = {
externalLinkBackground: "#292929", externalLinkBackground: "#292929",
externalLinkSvg: grayMaxLight, externalLinkSvg: grayMaxLight,
internalLinkBorder: "1px dashed #eeeeee", internalLinkBorder: `1px dashed ${grayMaxLight}`,
itemBorder: "1px dashed #333333", itemBorder: `1px dashed ${black}`,
itemOwnerColor: grayDark, itemOwnerColor: grayDark,
@ -3089,13 +3087,13 @@ const Dark: TTheme = {
linkColor: link, linkColor: link,
tariffText: grayDark, tariffText: grayDark,
border: `1px solid ${outerSpace}`, border: `1px solid ${outerSpace}`,
backgroundBenefitsColor: "#3333", backgroundBenefitsColor: black,
rectangleColor: veryDarkGrey, rectangleColor: veryDarkGrey,
priceContainer: { priceContainer: {
backgroundText: veryDarkGrey, backgroundText: veryDarkGrey,
background: charlestonGreen, background: charlestonGreen,
border: "1px solid #282828", border: `1px solid ${charlestonGreen}`,
featureTextColor: grayDark, featureTextColor: grayDark,
disableColor: grayDark, disableColor: grayDark,
trackNumberColor: grayDark, trackNumberColor: grayDark,
@ -3273,7 +3271,7 @@ const Dark: TTheme = {
emailChips: { emailChips: {
borderColor: grayDark, borderColor: grayDark,
dashedBorder: "1px dashed #fff", dashedBorder: `1px dashed ${white}`,
}, },
dialogs: { dialogs: {