style: replace hardcoded color codes with css variablesv1.3.1+10

In order to: a) do custom theme simpler by just replacing necessary
vars, b) apply this theme to filters as well; the main cgit.css file now
defines CSS vars and uses them in color parameters.

1 files changed, 61 insertions, 23 deletions

diff --git a/filters/html-converters/md2html b/filters/html-converters/md2html
index 59f43a8..4f6ad37 100755
--- a/filters/html-converters/md2html
+++ b/filters/html-converters/md2html
@@ -2,8 +2,46 @@
 import markdown
 import sys
 import io
-from pygments.formatters import HtmlFormatter
 from markdown.extensions.toc import TocExtension
+
+# Pygments' token classes, mapped onto the --syn-* custom properties that
+# cgit.css defines. The fallbacks are the palette those properties default to,
+# so that the output stays readable under a stylesheet without them.
+SYNTAX_COLORS = (
+	(('k', 'kc', 'kd', 'kn', 'kr'), '--syn-keyword', '#000',
+		'font-weight: bold'),
+	(('kp',), '--syn-keyword', '#000', None),
+	(('kt',), '--syn-type', '#010181', None),
+	(('nc', 'nf', 'nn', 'ne'), '--syn-keyword-alt', '#0057ae', None),
+	(('s', 'sa', 'sb', 'sc', 'dl', 'sd', 's2', 'sh', 'sx', 'sr', 's1', 'ss'),
+		'--syn-string', '#bf0303', None),
+	(('se',), '--syn-escape', '#f0f', None),
+	(('si',), '--syn-interpolation', '#0057ae', None),
+	(('c', 'ch', 'cm', 'c1', 'cs'), '--syn-comment', '#838183',
+		'font-style: italic'),
+	(('cp', 'cpf'), '--syn-preproc', '#008200', None),
+	(('m', 'mb', 'mf', 'mh', 'mi', 'mo', 'il'), '--syn-number', '#b07e00',
+		None),
+	(('o', 'ow', 'p'), '--syn-operator', '#000', None),
+	(('err',), '--syn-error', '#bf0303', None),
+	(('gd',), '--red', 'red', None),
+	(('gi',), '--green', 'green', None),
+	(('lineno', 'linenos'), '--syn-linenum', '#555', None),
+)
+
+
+def style_defs(prefix='.highlight'):
+	rules = []
+	for classes, prop, fallback, extra in SYNTAX_COLORS:
+		selector = ', '.join('%s .%s' % (prefix, c) for c in classes)
+		decls = 'color: var(%s, %s)' % (prop, fallback)
+		if extra:
+			decls += '; ' + extra
+		rules.append('%s { %s }' % (selector, decls))
+	rules.append('%s .hll { background-color: var(--syn-mark-bg, #ffb) }'
+		% prefix)
+	return '\n'.join(rules) + '\n'
+
 sys.stdin = io.TextIOWrapper(sys.stdin.buffer, encoding='utf-8')
 sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')
 sys.stdout.write('''
@@ -20,7 +58,7 @@ sys.stdout.write('''
     margin-bottom: 0 !important;
 }
 .markdown-body a.absent {
-    color: #c00;
+    color: var(--red-mid, #c00);
 }
 .markdown-body a.anchor {
     display: block;
@@ -42,7 +80,7 @@ sys.stdout.write('''
 }
 .markdown-body h1 .mini-icon-link, .markdown-body h2 .mini-icon-link, .markdown-body h3 .mini-icon-link, .markdown-body h4 .mini-icon-link, .markdown-body h5 .mini-icon-link, .markdown-body h6 .mini-icon-link {
     display: none;
-    color: #000;
+    color: var(--fg-strong, #000);
 }
 .markdown-body h1:hover a.anchor, .markdown-body h2:hover a.anchor, .markdown-body h3:hover a.anchor, .markdown-body h4:hover a.anchor, .markdown-body h5:hover a.anchor, .markdown-body h6:hover a.anchor {
     text-decoration: none;
@@ -55,19 +93,19 @@ sys.stdout.write('''
     display: inline-block;
 }
 div#cgit .markdown-body h1 a.toclink, div#cgit .markdown-body h2 a.toclink, div#cgit .markdown-body h3 a.toclink, div#cgit .markdown-body h4 a.toclink, div#cgit .markdown-body h5 a.toclink, div#cgit .markdown-body h6 a.toclink {
-    color: black;
+    color: var(--fg-strong, #000);
 }
 .markdown-body h1 tt, .markdown-body h1 code, .markdown-body h2 tt, .markdown-body h2 code, .markdown-body h3 tt, .markdown-body h3 code, .markdown-body h4 tt, .markdown-body h4 code, .markdown-body h5 tt, .markdown-body h5 code, .markdown-body h6 tt, .markdown-body h6 code {
     font-size: inherit;
 }
 .markdown-body h1 {
     font-size: 28px;
-    color: #000;
+    color: var(--fg-strong, #000);
 }
 .markdown-body h2 {
     font-size: 24px;
-    border-bottom: 1px solid #ccc;
-    color: #000;
+    border-bottom: 1px solid var(--border, #ccc);
+    color: var(--fg-strong, #000);
 }
 .markdown-body h3 {
     font-size: 18px;
@@ -79,14 +117,14 @@ div#cgit .markdown-body h1 a.toclink, div#cgit .markdown-body h2 a.toclink, div#
     font-size: 14px;
 }
 .markdown-body h6 {
-    color: #777;
+    color: var(--fg-mute, #777);
     font-size: 14px;
 }
 .markdown-body p, .markdown-body blockquote, .markdown-body ul, .markdown-body ol, .markdown-body dl, .markdown-body table, .markdown-body pre {
     margin: 15px 0;
 }
 .markdown-body hr {
-    border: 2px solid #ccc;
+    border: 2px solid var(--border, #ccc);
 }
 .markdown-body>h2:first-child, .markdown-body>h1:first-child, .markdown-body>h1:first-child+h2, .markdown-body>h3:first-child, .markdown-body>h4:first-child, .markdown-body>h5:first-child, .markdown-body>h6:first-child {
     margin-top: 0;
@@ -148,9 +186,9 @@ div#cgit .markdown-body h1 a.toclink, div#cgit .markdown-body h2 a.toclink, div#
     margin-bottom: 0px;
 }
 .markdown-body blockquote {
-    border-left: 4px solid #DDD;
+    border-left: 4px solid var(--border, #ddd);
     padding: 0 15px;
-    color: #777;
+    color: var(--fg-mute, #777);
 }
 .markdown-body blockquote>:first-child {
     margin-top: 0px;
@@ -162,15 +200,15 @@ div#cgit .markdown-body h1 a.toclink, div#cgit .markdown-body h2 a.toclink, div#
     font-weight: bold;
 }
 .markdown-body table th, .markdown-body table td {
-    border: 1px solid #ccc;
+    border: 1px solid var(--border, #ccc);
     padding: 6px 13px;
 }
 .markdown-body table tr {
-    border-top: 1px solid #ccc;
-    background-color: #fff;
+    border-top: 1px solid var(--border, #ccc);
+    background-color: var(--bg, #fff);
 }
 .markdown-body table tr:nth-child(2n) {
-    background-color: #f8f8f8;
+    background-color: var(--bg-zebra, #f8f8f8);
 }
 .markdown-body img {
     max-width: 100%;
@@ -182,7 +220,7 @@ div#cgit .markdown-body h1 a.toclink, div#cgit .markdown-body h2 a.toclink, div#
     overflow: hidden;
 }
 .markdown-body span.frame>span {
-    border: 1px solid #ddd;
+    border: 1px solid var(--border, #ddd);
     display: block;
     float: left;
     overflow: hidden;
@@ -196,7 +234,7 @@ div#cgit .markdown-body h1 a.toclink, div#cgit .markdown-body h2 a.toclink, div#
 }
 .markdown-body span.frame span span {
     clear: both;
-    color: #333;
+    color: var(--fg, #333);
     display: block;
     padding: 5px 0 0;
 }
@@ -254,8 +292,8 @@ div#cgit .markdown-body h1 a.toclink, div#cgit .markdown-body h2 a.toclink, div#
 .markdown-body code, .markdown-body tt {
     margin: 0 2px;
     padding: 0px 5px;
-    border: 1px solid #eaeaea;
-    background-color: #f8f8f8;
+    border: 1px solid var(--border, #eaeaea);
+    background-color: var(--bg-zebra, #f8f8f8);
     border-radius: 3px;
 }
 .markdown-body code {
@@ -269,8 +307,8 @@ div#cgit .markdown-body h1 a.toclink, div#cgit .markdown-body h2 a.toclink, div#
     background: transparent;
 }
 .markdown-body .highlight pre, .markdown-body pre {
-    background-color: #f8f8f8;
-    border: 1px solid #ccc;
+    background-color: var(--bg-zebra, #f8f8f8);
+    border: 1px solid var(--border, #ccc);
     font-size: 13px;
     line-height: 19px;
     overflow: auto;
@@ -284,9 +322,9 @@ div#cgit .markdown-body h1 a.toclink, div#cgit .markdown-body h2 a.toclink, div#
     border: none;
 }
 ''')
-sys.stdout.write(HtmlFormatter(style='pastie').get_style_defs('.highlight'))
+sys.stdout.write(style_defs('.highlight'))
 sys.stdout.write('''
-</style>   
+</style>
 ''')
 sys.stdout.write("<div class='markdown-body'>")
 sys.stdout.flush()