lashman/vesper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

refactor: extract markdown typography colors into CSS variables

Browse Source
This commit is contained in:
Your Name
2026-02-19 21:13:07 +02:00
parent ecde5d7f88
commit c644d7372d
1 changed files with 75 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/styles.css
View File

@@ -64,7 +64,43 @@
--color-accent-small: #8BA3FF; /* for small text (11px) accent uses */ --color-accent-small: #8BA3FF; /* for small text (11px) accent uses */
--color-accent-muted: rgba(107, 138, 255, 0.12); --color-accent-muted: rgba(107, 138, 255, 0.12);
--color-accent-subtle: rgba(107, 138, 255, 0.06); --color-accent-subtle: rgba(107, 138, 255, 0.06);
/* Markdown typography */
--color-md-h1: #F5F6F7;
--color-md-h2: #EDEEF0;
--color-md-h3: #E4E5E8;
--color-md-h4: #D8DADE;
--color-md-h5: #CBCED3;
--color-md-h6: #BCC1C8;
--color-md-heading: #F0F1F3;
--color-md-paragraph: #C8CCD0;
--color-md-link: #93B8F9;
--color-md-link-underline: rgba(147, 184, 249, 0.3);
--color-md-link-hover: #A8C6FA;
--color-md-link-hover-underline: rgba(168, 198, 250, 0.7);
--color-md-marker: #93B8F9;
--color-md-blockquote-border: #93B8F9;
--color-md-blockquote-bg: rgba(147, 184, 249, 0.04);
--color-md-blockquote-text: #BFC3C8;
--color-md-code-inline: #E8B89E;
--color-md-code-inline-bg: rgba(255, 255, 255, 0.06);
--color-md-code-block-bg: #1A1D24;
--color-md-code-block-border: rgba(255, 255, 255, 0.06);
--color-md-code-text: #E4E6EB;
--color-md-table-header-bg: rgba(124, 169, 247, 0.08);
--color-md-table-border: rgba(255, 255, 255, 0.06);
--color-md-table-cell: #C8CCD0;
--color-md-table-stripe: rgba(30, 33, 40, 0.4);
--color-md-table-hover: rgba(124, 169, 247, 0.05);
--color-md-hr: rgba(255, 255, 255, 0.1);
--color-md-mark-bg: rgba(251, 191, 36, 0.2);
--color-md-mark-text: #FBBF24;
--color-md-comment: #7C8390;
--color-md-highlight-bg: rgba(251, 191, 36, 0.3);
--color-md-highlight-active-bg: rgba(251, 191, 36, 0.6);
--color-md-highlight-active-outline: rgba(251, 191, 36, 0.7);
--color-md-welcome-btn: #4A6AE5;
/* Borders */ /* Borders */
--color-border-subtle: rgba(255, 255, 255, 0.04); --color-border-subtle: rgba(255, 255, 255, 0.04);
--color-border: rgba(255, 255, 255, 0.08); --color-border: rgba(255, 255, 255, 0.08);
@@ -782,7 +818,7 @@ html, body, #root {
.welcome-button { .welcome-button {
padding: 12px 28px; padding: 12px 28px;
background-color: #4A6AE5; background-color: var(--color-md-welcome-btn);
color: white; color: white;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
@@ -1130,7 +1166,7 @@ html, body, #root {
.markdown-content h4, .markdown-content h4,
.markdown-content h5, .markdown-content h5,
.markdown-content h6 { .markdown-content h6 {
color: #F0F1F3; color: var(--color-md-heading);
font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
font-weight: 600; font-weight: 600;
line-height: 1.2; line-height: 1.2;
@@ -1144,7 +1180,7 @@ html, body, #root {
font-size: 2.35rem; font-size: 2.35rem;
font-weight: 700; font-weight: 700;
letter-spacing: -0.03em; letter-spacing: -0.03em;
color: #F5F6F7; color: var(--color-md-h1);
margin-top: 0; margin-top: 0;
margin-bottom: 0.8em; margin-bottom: 0.8em;
padding-bottom: 0.55em; padding-bottom: 0.55em;
@@ -1153,7 +1189,7 @@ html, body, #root {
.markdown-content h2 { .markdown-content h2 {
font-size: 1.7rem; font-size: 1.7rem;
color: #EDEEF0; color: var(--color-md-h2);
margin-top: 1.85em; margin-top: 1.85em;
padding-bottom: 0.4em; padding-bottom: 0.4em;
border-bottom: 1px solid var(--color-border-subtle); border-bottom: 1px solid var(--color-border-subtle);
@@ -1161,47 +1197,47 @@ html, body, #root {
.markdown-content h3 { .markdown-content h3 {
font-size: 1.3rem; font-size: 1.3rem;
color: #E4E5E8; color: var(--color-md-h3);
} }
.markdown-content h4 { .markdown-content h4 {
font-size: 1.15rem; font-size: 1.15rem;
font-weight: 500; font-weight: 500;
color: #D8DADE; color: var(--color-md-h4);
} }
.markdown-content h5 { .markdown-content h5 {
font-size: 1rem; font-size: 1rem;
font-weight: 500; font-weight: 500;
color: #CBCED3; color: var(--color-md-h5);
} }
.markdown-content h6 { .markdown-content h6 {
font-size: 0.92rem; font-size: 0.92rem;
font-weight: 500; font-weight: 500;
color: #BCC1C8; color: var(--color-md-h6);
} }
/* Paragraphs with refined spacing */ /* Paragraphs with refined spacing */
.markdown-content p { .markdown-content p {
margin-bottom: 1.65em; margin-bottom: 1.65em;
color: #C8CCD0; color: var(--color-md-paragraph);
line-height: 1.7; line-height: 1.7;
} }
/* Links with subtle persistent underline */ /* Links with subtle persistent underline */
.markdown-content a { .markdown-content a {
color: #93B8F9; color: var(--color-md-link);
text-decoration: underline; text-decoration: underline;
text-decoration-color: rgba(147, 184, 249, 0.3); text-decoration-color: var(--color-md-link-underline);
text-underline-offset: 3px; text-underline-offset: 3px;
text-decoration-thickness: 1px; text-decoration-thickness: 1px;
transition: color 0.2s ease, text-decoration-color 0.2s ease; transition: color 0.2s ease, text-decoration-color 0.2s ease;
} }
.markdown-content a:hover { .markdown-content a:hover {
color: #A8C6FA; color: var(--color-md-link-hover);
text-decoration-color: rgba(168, 198, 250, 0.7); text-decoration-color: var(--color-md-link-hover-underline);
text-decoration-thickness: 1.5px; text-decoration-thickness: 1.5px;
} }
@@ -1234,13 +1270,13 @@ html, body, #root {
.markdown-content li { .markdown-content li {
margin-bottom: 0.45em; margin-bottom: 0.45em;
color: #C8CCD0; color: var(--color-md-paragraph);
line-height: 1.65; line-height: 1.65;
list-style-position: outside; list-style-position: outside;
} }
.markdown-content li::marker { .markdown-content li::marker {
color: #93B8F9; color: var(--color-md-marker);
} }
.markdown-content ol li::marker { .markdown-content ol li::marker {
@@ -1321,17 +1357,17 @@ html, body, #root {
.markdown-content blockquote { .markdown-content blockquote {
margin: 1.65em 0; margin: 1.65em 0;
padding: 1.1em 1.4em; padding: 1.1em 1.4em;
border-left: 3px solid #93B8F9; border-left: 3px solid var(--color-md-blockquote-border);
background-color: rgba(124, 169, 247, 0.04); background-color: var(--color-md-blockquote-bg);
border-radius: 0 8px 8px 0; border-radius: 0 8px 8px 0;
color: #BFC3C8; color: var(--color-md-blockquote-text);
font-style: normal; font-style: normal;
line-height: 1.7; line-height: 1.7;
} }
.markdown-content blockquote p { .markdown-content blockquote p {
margin-bottom: 0.5em; margin-bottom: 0.5em;
color: #BFC3C8; color: var(--color-md-blockquote-text);
} }
.markdown-content blockquote p:last-child { .markdown-content blockquote p:last-child {
@@ -1340,26 +1376,26 @@ html, body, #root {
/* Inline code */ /* Inline code */
.markdown-content code:not(pre code) { .markdown-content code:not(pre code) {
background-color: rgba(255, 255, 255, 0.06); background-color: var(--color-md-code-inline-bg);
padding: 0.22em 0.48em; padding: 0.22em 0.48em;
border-radius: 5px; border-radius: 5px;
font-family: 'JetBrains Mono Variable', 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace; font-family: 'JetBrains Mono Variable', 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
font-size: 0.88em; font-size: 0.88em;
font-weight: 400; font-weight: 400;
color: #E8B89E; color: var(--color-md-code-inline);
letter-spacing: -0.02em; letter-spacing: -0.02em;
} }
/* Code blocks */ /* Code blocks */
.markdown-content pre { .markdown-content pre {
background-color: #1A1D24; background-color: var(--color-md-code-block-bg);
border-radius: 10px; border-radius: 10px;
padding: 1.35em 1.6em; padding: 1.35em 1.6em;
margin: 1.65em 0; margin: 1.65em 0;
overflow-x: visible; overflow-x: visible;
overflow-wrap: break-word; overflow-wrap: break-word;
white-space: pre-wrap; white-space: pre-wrap;
border: 1px solid rgba(255, 255, 255, 0.06); border: 1px solid var(--color-md-code-block-border);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
} }
@@ -1367,7 +1403,7 @@ html, body, #root {
font-family: 'JetBrains Mono Variable', 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace; font-family: 'JetBrains Mono Variable', 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
font-size: 14px; font-size: 14px;
line-height: 1.7; line-height: 1.7;
color: #E4E6EB; color: var(--color-md-code-text);
background: none; background: none;
padding: 0; padding: 0;
letter-spacing: -0.02em; letter-spacing: -0.02em;
@@ -1379,7 +1415,7 @@ html, body, #root {
/* Syntax highlighting - refined colors */ /* Syntax highlighting - refined colors */
.hljs { .hljs {
background: transparent !important; background: transparent !important;
color: #E4E6EB; color: var(--color-md-code-text);
} }
.hljs-keyword, .hljs-keyword,
@@ -1409,7 +1445,7 @@ html, body, #root {
.hljs-quote, .hljs-quote,
.hljs-deletion, .hljs-deletion,
.hljs-meta { .hljs-meta {
color: #7C8390; color: var(--color-md-comment);
font-style: italic; font-style: italic;
} }
@@ -1443,7 +1479,7 @@ html, body, #root {
font-size: 14px; font-size: 14px;
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.06); border: 1px solid var(--color-md-table-border);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
} }
@@ -1451,11 +1487,11 @@ html, body, #root {
.markdown-content td { .markdown-content td {
padding: 14px 18px; padding: 14px 18px;
text-align: left; text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.04); border-bottom: 1px solid var(--color-border-subtle);
} }
.markdown-content th { .markdown-content th {
background-color: rgba(124, 169, 247, 0.08); background-color: var(--color-md-table-header-bg);
font-weight: 600; font-weight: 600;
color: var(--color-text-primary); color: var(--color-text-primary);
font-size: 12.5px; font-size: 12.5px;
@@ -1464,7 +1500,7 @@ html, body, #root {
} }
.markdown-content td { .markdown-content td {
color: #C8CCD0; color: var(--color-md-table-cell);
} }
.markdown-content tr:last-child td { .markdown-content tr:last-child td {
@@ -1472,18 +1508,18 @@ html, body, #root {
} }
.markdown-content tr:nth-child(even) td { .markdown-content tr:nth-child(even) td {
background-color: rgba(30, 33, 40, 0.4); background-color: var(--color-md-table-stripe);
} }
.markdown-content tr:hover td { .markdown-content tr:hover td {
background-color: rgba(124, 169, 247, 0.05); background-color: var(--color-md-table-hover);
} }
/* Horizontal rule — gradient fade */ /* Horizontal rule — gradient fade */
.markdown-content hr { .markdown-content hr {
border: none; border: none;
height: 1px; height: 1px;
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent); background: linear-gradient(to right, transparent, var(--color-md-hr), transparent);
margin: 2.5em 0; margin: 2.5em 0;
} }
@@ -1526,8 +1562,8 @@ html, body, #root {
/* Mark/highlight */ /* Mark/highlight */
.markdown-content mark { .markdown-content mark {
background-color: rgba(251, 191, 36, 0.2); background-color: var(--color-md-mark-bg);
color: #FBBF24; color: var(--color-md-mark-text);
padding: 0.18em 0.38em; padding: 0.18em 0.38em;
border-radius: 4px; border-radius: 4px;
font-weight: 500; font-weight: 500;
@@ -1559,7 +1595,7 @@ html, body, #root {
/* Search highlights — high specificity to override Tailwind reset */ /* Search highlights — high specificity to override Tailwind reset */
span.search-highlight { span.search-highlight {
background-color: rgba(251, 191, 36, 0.3) !important; background-color: var(--color-md-highlight-bg) !important;
color: inherit !important; color: inherit !important;
border-radius: 2px; border-radius: 2px;
padding: 1px 0; padding: 1px 0;
@@ -1567,8 +1603,8 @@ span.search-highlight {
} }
span.search-highlight.search-highlight-active { span.search-highlight.search-highlight-active {
background-color: rgba(251, 191, 36, 0.6) !important; background-color: var(--color-md-highlight-active-bg) !important;
outline: 2px solid rgba(251, 191, 36, 0.7); outline: 2px solid var(--color-md-highlight-active-outline);
outline-offset: 1px; outline-offset: 1px;
} }