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

- 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:
2026-02-03 09:11:35 -05:00
parent bac7ba8a75
commit 737693db60
2 changed files with 30 additions and 33 deletions
+27 -1
View File
@@ -27,7 +27,33 @@ const config: Config = {
'text-secondary': '#565f89',
'accent': '#7aa2f7',
'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: [
+3 -32
View File
@@ -24,7 +24,7 @@ templ DocsLayout(nav Navigation, doc Document, user User) {
colors: {
background: {
primary: '#1a1b26',
secondary: '#24283b',
secondary: '#16161e',
},
text: {
primary: '#c0caf5',
@@ -36,20 +36,7 @@ templ DocsLayout(nav Navigation, doc Document, user User) {
},
}
}
}
</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>
<body class="bg-background-primary text-text-primary font-sans antialiased">
<!-- Mobile Menu Button -->
@@ -387,7 +374,7 @@ templ DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer A
colors: {
background: {
primary: '#1a1b26',
secondary: '#24283b',
secondary: '#16161e',
},
text: {
primary: '#c0caf5',
@@ -396,23 +383,7 @@ templ DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer A
border: '#414868',
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>