Zoker/frontend
1
0
Fork 0
forked from vikunja/frontend
Code Issues Pull Requests Projects Releases Wiki Activity

fix(editor): use higher-contrast colors for links and code

Browse Source
This commit is contained in:
kolaente 2024-01-15 22:11:24 +01:00
parent 664bf0a5f4
commit 167953b26b
Signed by untrusted user: konrad
GPG Key ID: F40E70337AB24C9B
2 changed files with 25 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/input/editor/TipTap.vue
View File

@ -671,36 +671,17 @@ watch(
line-height: 1.1; line-height: 1.1;
} }
a {
color: #68cef8;
}
code { code {
background-color: rgba(#616161, 0.1); background-color: var(--grey-200);
color: #616161; color: var(--grey-700);
} }
pre { pre {
background: #0d0d0d; background: var(--grey-200);
color: #fff; color: var(--grey-700);
font-family: 'JetBrainsMono', monospace; font-family: 'JetBrainsMono', monospace;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
border-radius: 0.5rem; border-radius: $radius;
code {
color: inherit;
padding: 0;
background: none;
font-size: 0.8rem;
}
}
pre {
background: #0d0d0d;
color: #fff;
font-family: 'JetBrainsMono', monospace;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
code { code {
color: inherit; color: inherit;
@ -711,7 +692,7 @@ watch(
.hljs-comment, .hljs-comment,
.hljs-quote { .hljs-quote {
color: #616161; color: var(--grey-500);
} }
.hljs-variable, .hljs-variable,
@ -724,7 +705,7 @@ watch(
.hljs-name, .hljs-name,
.hljs-selector-id, .hljs-selector-id,
.hljs-selector-class { .hljs-selector-class {
color: #f98181; color: var(--code-variable);
} }
.hljs-number, .hljs-number,
@ -734,23 +715,23 @@ watch(
.hljs-literal, .hljs-literal,
.hljs-type, .hljs-type,
.hljs-params { .hljs-params {
color: #fbbc88; color: var(--code-literal);
} }
.hljs-string, .hljs-string,
.hljs-symbol, .hljs-symbol,
.hljs-bullet { .hljs-bullet {
color: #b9f18d; color: var(--code-symbol);
} }
.hljs-title, .hljs-title,
.hljs-section { .hljs-section {
color: #faf594; color: var(--code-section);
} }
.hljs-keyword, .hljs-keyword,
.hljs-selector-tag { .hljs-selector-tag {
color: #70cff8; color: var(--code-keyword);
} }
.hljs-emphasis { .hljs-emphasis {

14
src/styles/custom-properties/colors.scss
View File

@ -256,6 +256,13 @@
--card-border-color: var(--grey-200); --card-border-color: var(--grey-200);
--logo-text-color: hsl(180, 1%, 15%); --logo-text-color: hsl(180, 1%, 15%);
// Code colors
--code-variable: #da2222;
--code-literal: #fd8a09;
--code-symbol: #0ead69;
--code-section: #3a86ff;
--code-keyword: #8338ec;
&.dark { &.dark {
@media screen { @media screen {
// Light mode colours reversed for dark mode // Light mode colours reversed for dark mode
@ -311,6 +318,13 @@
--scheme-invert: var(--grey-900); --scheme-invert: var(--grey-900);
--scheme-invert-bis: var(--grey-900); --scheme-invert-bis: var(--grey-900);
--scheme-invert-ter: var(--grey-800); --scheme-invert-ter: var(--grey-800);
// Code colors
--code-variable: #f98181;
--code-literal: #fbbc88;
--code-symbol: #b9f18d;
--code-section: #faf594;
--code-keyword: #70cff8;
} }
} }
} }