Bookhoard/bookhoard
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

fix: remove custom CSS, centralize prose styling in tailwind config

Browse Source 
- Remove custom CSS <style> tags from docs template (violates guidelines)
- Move prose typography customization to tailwind.config.ts
- Use theme tokens for all colors (adjustable with theme)
- Set code blocks to background.secondary (darker than primary)
- Remove duplicate inline typography config from both templates
- Now uses single source of truth for documentation styling
This commit is contained in:
john-okeefe
2026-02-03 09:11:35 -05:00
parent bac7ba8a75
commit 737693db60
2 changed files with 30 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tailwind.config.ts
+27 -1
View File
@@ -27,7 +27,33 @@ const config: Config = {
'text-secondary': '#565f89', 'text-secondary': '#565f89',
'accent': '#7aa2f7', 'accent': '#7aa2f7',
'border': '#414868', 'border': '#414868',
} },
typography: ({ theme }) => ({
invert: {
css: {
'--tw-prose-pre-bg': theme('colors.background.secondary'),
code: {
backgroundColor: theme('colors.background.primary'),
color: theme('colors.text.primary'),
fontWeight: '400',
},
'code::before': {
content: '""',
},
'code::after': {
content: '""',
},
'pre code': {
backgroundColor: 'transparent',
color: 'inherit',
},
pre: {
backgroundColor: theme('colors.background.secondary'),
color: theme('colors.text.primary'),
},
},
},
}),
} }
}, },
plugins: [ plugins: [
templates/docs.templ
+3 -32
View File
@@ -24,7 +24,7 @@ templ DocsLayout(nav Navigation, doc Document, user User) {
colors: { colors: {
background: { background: {
primary: '#1a1b26', primary: '#1a1b26',
secondary: '#24283b', secondary: '#16161e',
}, },
text: { text: {
primary: '#c0caf5', primary: '#c0caf5',
@@ -36,20 +36,7 @@ templ DocsLayout(nav Navigation, doc Document, user User) {
}, },
} }
} }
}
</script> </script>
<style>
.prose pre {
background-color: #14151f !important;
}
.prose code {
background-color: #1a1b26 !important;
color: #c0caf5 !important;
}
.prose pre code {
background-color: transparent !important;
}
</style>
</head> </head>
<body class="bg-background-primary text-text-primary font-sans antialiased"> <body class="bg-background-primary text-text-primary font-sans antialiased">
<!-- Mobile Menu Button --> <!-- Mobile Menu Button -->
@@ -387,7 +374,7 @@ templ DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer A
colors: { colors: {
background: { background: {
primary: '#1a1b26', primary: '#1a1b26',
secondary: '#24283b', secondary: '#16161e',
}, },
text: { text: {
primary: '#c0caf5', primary: '#c0caf5',
@@ -396,23 +383,7 @@ templ DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer A
border: '#414868', border: '#414868',
accent: '#7aa2f7', accent: '#7aa2f7',
}, },
typography: ({ theme }) => ({ },
invert: {
css: {
code: {
backgroundColor: theme('colors.background.primary'),
color: theme('colors.text.primary'),
},
'pre code': {
backgroundColor: 'transparent',
},
pre: {
backgroundColor: '#14151f',
},
},
},
}),
}
} }
} }
</script> </script>