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:
+27
-1
@@ -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
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user