yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Improved styles for diffs, closes #4430

Browse Source
This commit is contained in:
Tom Moor
2022-11-20 14:09:11 -05:00
parent 6e36ffb706
commit 088ef81133
3 changed files with 22 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/typings/styled-components.d.ts vendored
View File

@@ -115,8 +115,10 @@ declare module "styled-components" {
cursor: string; cursor: string;
textSecondary: string; textSecondary: string;
textTertiary: string; textTertiary: string;
textDeleted: string; textDiffInserted: string;
textDeletedBackground: string; textDiffInsertedBackground: string;
textDiffDeleted: string;
textDiffDeletedBackground: string;
placeholder: string; placeholder: string;
sidebarBackground: string; sidebarBackground: string;
sidebarActiveBackground: string; sidebarActiveBackground: string;

16
shared/editor/components/Styles.ts
View File

@@ -1291,19 +1291,21 @@ table {
display: block; display: block;
} }
ins {
background-color: #128a2929;
text-decoration: none;
}
del { del {
color: ${props.theme.slate}; color: ${props.theme.slate};
text-decoration: strikethrough; text-decoration: strikethrough;
} }
ins[data-operation-index] {
color: ${props.theme.textDiffInserted};
background-color: ${props.theme.textDiffInsertedBackground};
text-decoration: none;
}
del[data-operation-index] { del[data-operation-index] {
color: ${props.theme.textDeleted}; color: ${props.theme.textDiffDeleted};
background-color: ${props.theme.textDeletedBackground}; background-color: ${props.theme.textDiffDeletedBackground};
text-decoration: none;
img { img {
opacity: .5; opacity: .5;

12
shared/styles/theme.ts
View File

@@ -100,8 +100,10 @@ export const light = {
text: colors.almostBlack, text: colors.almostBlack,
textSecondary: colors.slateDark, textSecondary: colors.slateDark,
textTertiary: colors.slate, textTertiary: colors.slate,
textDeleted: colors.slate, textDiffInserted: colors.almostBlack,
textDeletedBackground: colors.slateLight, textDiffInsertedBackground: "rgba(18, 138, 41, 0.16)",
textDiffDeleted: colors.slateDark,
textDiffDeletedBackground: "#ffebe9",
placeholder: "#a2b2c3", placeholder: "#a2b2c3",
sidebarBackground: colors.warmGrey, sidebarBackground: colors.warmGrey,
sidebarActiveBackground: "#d7e0ea", sidebarActiveBackground: "#d7e0ea",
@@ -159,8 +161,10 @@ export const dark = {
cursor: colors.almostWhite, cursor: colors.almostWhite,
textSecondary: lighten(0.1, colors.slate), textSecondary: lighten(0.1, colors.slate),
textTertiary: colors.slate, textTertiary: colors.slate,
textDeleted: lighten(0.1, colors.slate), textDiffInserted: colors.almostWhite,
textDeletedBackground: colors.black, textDiffInsertedBackground: "rgba(63,185,80,0.3)",
textDiffDeleted: darken(0.1, colors.almostWhite),
textDiffDeletedBackground: "rgba(248,81,73,0.15)",
placeholder: colors.slateDark, placeholder: colors.slateDark,
sidebarBackground: colors.veryDarkBlue, sidebarBackground: colors.veryDarkBlue,
sidebarActiveBackground: lighten(0.02, colors.almostBlack), sidebarActiveBackground: lighten(0.02, colors.almostBlack),