paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 05:53:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

markdown: Express Markdown code/pre colors as CSS vars.

Browse Source 
This ensures that all colors (text, background, and border) are
explicitly declared for Markdown-rendered pre elements, even when
the colors replicate values already declared, e.g., with Pygments.
This commit is contained in:
Karl Stolley
2023-09-26 15:46:55 -05:00
committed by Tim Abbott
parent a8612ee9bc
commit f1a5fffae9
3 changed files with 39 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
web/styles/dark_theme.css
View File

@@ -856,16 +856,6 @@
background-color: hsl(22deg 70% 35%);
}
.codehilite code,
.codehilite pre {
color: hsl(212deg 98% 82%);
background-color: hsl(212deg 0% 11%);
}
.codehilite pre {
border: 1px solid hsl(0deg 0% 0% / 50%);
}
.codehilite .hll {
background-color: hsl(0deg 0% 13%);
}
@@ -1246,7 +1236,6 @@
}
#feedback_container,
code,
.typeahead.dropdown-menu {
background-color: hsl(212deg 25% 15%);
border-color: hsl(0deg 0% 0% / 50%);

24
web/styles/rendered_markdown.css
View File

@@ -647,20 +647,20 @@
}
& a {
color: hsl(200deg 100% 40%);
color: var(--color-markdown-link);
text-decoration: none;
& code {
color: hsl(200deg 100% 40%);
color: var(--color-markdown-code-link);
}
&:hover,
&:focus {
color: hsl(200deg 100% 25%);
color: var(--color-markdown-link-hover);
text-decoration: underline;
& code {
color: hsl(200deg 100% 25%);
color: var(--color-markdown-code-link-hover);
}
}
}
@@ -701,11 +701,11 @@
font-size: 0.825em;
unicode-bidi: embed;
direction: ltr;
color: hsl(0deg 0% 0%);
white-space: pre-wrap;
padding: 0 4px;
background-color: hsl(0deg 0% 100%);
border: 1px solid hsl(240deg 13% 90%);
color: var(--color-markdown-code-text);
background-color: var(--color-markdown-code-background);
border: 1px solid var(--color-markdown-code-border);
border-radius: 3px;
}
@@ -801,6 +801,16 @@
display: block !important;
border: none !important;
background: none !important;
& code,
& pre {
color: var(--color-markdown-pre-text);
background-color: var(--color-markdown-pre-background);
}
& pre {
border: 1px solid var(--color-markdown-pre-border);
}
}
/* Both the horizontal scrollbar in <pre/> as well as

22
web/styles/zulip.css
View File

@@ -282,6 +282,18 @@ body {
--color-text-personal-menu-some-status: hsl(0deg 0% 40%);
--color-text-sidebar-heading: hsl(0deg 0% 43%);
/* Markdown code colors */
--color-markdown-code-text: hsl(0deg 0% 0%);
--color-markdown-code-background: hsl(0deg 0% 100%);
--color-markdown-code-border: hsl(240deg 13% 90%);
--color-markdown-pre-text: hsl(0deg 0% 20%);
--color-markdown-pre-background: hsl(0deg 0% 100%);
--color-markdown-pre-border: hsl(0deg 0% 0% / 15%);
--color-markdown-link: hsl(200deg 100% 40%);
--color-markdown-link-hover: hsl(200deg 100% 25%);
--color-markdown-code-link: var(--color-markdown-link);
--color-markdown-code-link-hover: var(--color-markdown-link-hover);
/* Icon colors */
--color-icon-bot: hsl(180deg 8% 65% / 100%);
--color-message-action-visible: hsl(216deg 43% 20% / 50%);
@@ -566,6 +578,16 @@ body {
hsl(0deg 0% 11%)
);
/* Markdown code colors */
/* Note that Markdown code-link colors are identical
to light theme, and so are not redeclared here. */
--color-markdown-code-text: var(--color-text-message-default);
--color-markdown-code-background: hsl(212deg 25% 15%);
--color-markdown-code-border: hsl(0deg 0% 0% / 50%);
--color-markdown-pre-text: hsl(212deg 98% 82%);
--color-markdown-pre-background: hsl(212deg 0% 11%);
--color-markdown-pre-border: hsl(0deg 0% 0% / 50%);
/* Icon colors */
--color-icon-bot: hsl(180deg 5% 50% / 100%);
--color-message-action-visible: hsl(217deg 41% 90% / 50%);