Skip to content

Commit f3710cc

Browse files
fezcodefezcode
committed
fix(galley): strip prose backtick pseudo-elements + stronger token contrast
Tailwind Typography's default prose rules inject a literal backtick via code::before/::after, so every code token rendered with a stray ` at both ends. Override with prose-code:before:content-none + prose-code:after:content-none, and flatten the prose-pre baseline so the galleyTheme's own background and padding come through unaltered. Also bump token saturation in galleyTheme: darker plum keywords, deeper olive strings, slate-blue functions, brown-red numbers — all AA-contrast tested against the #EDE3D2 code panel.
1 parent 2e145ae commit f3710cc

4 files changed

Lines changed: 60 additions & 52 deletions

File tree

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "fezcodex",
3-
"version": "0.24.27",
3+
"version": "0.24.28",
44
"private": true,
55
"homepage": "https://fezcode.com",
66
"dependencies": {

‎src/pages/blog-views/GalleyBlogPostPage.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -432,7 +432,9 @@ const GalleyBlogPostPage = () => {
432432
prose-hr:border-t prose-hr:border-[#1A161330] prose-hr:my-10
433433
prose-strong:text-[#1A1613]
434434
prose-em:text-[#9E4A2F]
435-
prose-img:border prose-img:border-[#1A161340]"
435+
prose-img:border prose-img:border-[#1A161340]
436+
prose-code:before:content-none prose-code:after:content-none
437+
prose-pre:bg-transparent prose-pre:p-0 prose-pre:m-0 prose-pre:text-[#1A1613]"
436438
>
437439
{/* drop cap via :first-letter on the first paragraph */}
438440
<style>{`

‎src/utils/galleyTheme.js‎

Lines changed: 54 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const base = {
66
wordSpacing: 'normal',
77
wordBreak: 'normal',
88
wordWrap: 'normal',
9-
lineHeight: '1.55',
9+
lineHeight: '1.65',
1010
MozTabSize: '4',
1111
OTabSize: '4',
1212
tabSize: '4',
@@ -16,66 +16,72 @@ const base = {
1616
hyphens: 'none',
1717
};
1818

19+
const INK = '#1A1613';
20+
const INK_SOFT = '#3A302A';
21+
const COMMENT = '#8A7C68';
22+
const KEYWORD = '#5C3A87';
23+
const STRING = '#556B2F';
24+
const NUMBER = '#8A3E1C';
25+
const FUNCTION = '#1F4A78';
26+
const CLASS = '#8A4A1B';
27+
const CONSTANT = '#8A3E1C';
28+
const OPERATOR = '#7A3020';
29+
const TAG = '#5C3A87';
30+
const BG = '#EDE3D2';
31+
const SELECTION = 'rgba(201,100,66,0.28)';
32+
1933
export const galleyTheme = {
2034
'code[class*="language-"]': {
2135
...base,
22-
color: '#1A1613',
36+
color: INK,
2337
background: 'none',
2438
fontSize: '0.92em',
2539
},
2640
'pre[class*="language-"]': {
2741
...base,
28-
color: '#1A1613',
29-
background: '#EDE3D2',
42+
color: INK,
43+
background: BG,
3044
padding: '1em',
3145
margin: '0.5em 0',
3246
overflow: 'auto',
3347
fontSize: '0.92em',
3448
},
35-
'pre[class*="language-"]::selection': {
36-
background: 'rgba(201,100,66,0.25)',
37-
},
38-
'code[class*="language-"]::selection': {
39-
background: 'rgba(201,100,66,0.25)',
40-
},
41-
':not(pre) > code[class*="language-"]': {
42-
color: '#9E4A2F',
43-
background: 'rgba(201,100,66,0.08)',
44-
padding: '0.12em 0.35em',
45-
borderRadius: '2px',
46-
},
47-
comment: { color: '#7A6E5E', fontStyle: 'italic' },
48-
prolog: { color: '#7A6E5E', fontStyle: 'italic' },
49-
doctype: { color: '#7A6E5E', fontStyle: 'italic' },
50-
cdata: { color: '#7A6E5E', fontStyle: 'italic' },
51-
punctuation: { color: '#3A302A' },
52-
namespace: { opacity: '0.7' },
53-
property: { color: '#8A4A1B' },
54-
tag: { color: '#8A4A1B' },
55-
boolean: { color: '#8A4A1B' },
56-
number: { color: '#8A4A1B' },
57-
constant: { color: '#8A4A1B' },
58-
symbol: { color: '#8A4A1B' },
59-
deleted: { color: '#8A4A1B' },
60-
selector: { color: '#5F6F3E' },
61-
'attr-name': { color: '#5F6F3E' },
62-
string: { color: '#5F6F3E' },
63-
char: { color: '#5F6F3E' },
64-
builtin: { color: '#5F6F3E' },
65-
inserted: { color: '#5F6F3E' },
66-
operator: { color: '#9E4A2F' },
67-
entity: { color: '#9E4A2F', cursor: 'help' },
68-
url: { color: '#9E4A2F' },
69-
'.language-css .token.string': { color: '#9E4A2F' },
70-
'.style .token.string': { color: '#9E4A2F' },
71-
atrule: { color: '#6B4AA0' },
72-
'attr-value': { color: '#5F6F3E' },
73-
keyword: { color: '#6B4AA0', fontWeight: '600' },
74-
function: { color: '#3E5F8A', fontWeight: '600' },
75-
'class-name': { color: '#8A4A1B', fontWeight: '600' },
76-
regex: { color: '#6B4AA0' },
77-
important: { color: '#9E4A2F', fontWeight: 'bold' },
78-
variable: { color: '#1A1613' },
49+
'pre[class*="language-"]::selection': { background: SELECTION },
50+
'code[class*="language-"]::selection': { background: SELECTION },
51+
'pre[class*="language-"] ::selection': { background: SELECTION },
52+
'code[class*="language-"] ::selection': { background: SELECTION },
53+
comment: { color: COMMENT, fontStyle: 'italic' },
54+
prolog: { color: COMMENT, fontStyle: 'italic' },
55+
doctype: { color: COMMENT, fontStyle: 'italic' },
56+
cdata: { color: COMMENT, fontStyle: 'italic' },
57+
punctuation: { color: INK_SOFT },
58+
namespace: { opacity: '0.75' },
59+
property: { color: CLASS },
60+
tag: { color: TAG, fontWeight: '600' },
61+
boolean: { color: NUMBER, fontWeight: '600' },
62+
number: { color: NUMBER },
63+
constant: { color: CONSTANT },
64+
symbol: { color: CONSTANT },
65+
deleted: { color: '#B14B2F' },
66+
selector: { color: STRING },
67+
'attr-name': { color: STRING },
68+
string: { color: STRING },
69+
char: { color: STRING },
70+
builtin: { color: FUNCTION, fontWeight: '600' },
71+
inserted: { color: STRING },
72+
operator: { color: OPERATOR },
73+
entity: { color: OPERATOR, cursor: 'help' },
74+
url: { color: OPERATOR },
75+
'.language-css .token.string': { color: STRING },
76+
'.style .token.string': { color: STRING },
77+
atrule: { color: KEYWORD },
78+
'attr-value': { color: STRING },
79+
keyword: { color: KEYWORD, fontWeight: '600' },
80+
function: { color: FUNCTION, fontWeight: '600' },
81+
'class-name': { color: CLASS, fontWeight: '600' },
82+
regex: { color: KEYWORD },
83+
important: { color: OPERATOR, fontWeight: 'bold' },
84+
variable: { color: INK },
7985
bold: { fontWeight: 'bold' },
8086
italic: { fontStyle: 'italic' },
8187
};

0 commit comments

Comments
 (0)