valknar/palina-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: move @utility prose to top-level for Tailwind v4 compatibility
All checks were successful
Deploy Theme / deploy (push) Successful in 13s
Details

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-20 10:10:37 +01:00
parent 5220230e67
commit 047a190b9d
1 changed files with 27 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
assets/css/tailwind.css
View File

@@ -24,7 +24,6 @@
/*
Theme Variable Definitions
Using :root for default (Dark) and [data-theme='light'] for overrides.
This ensures maximum compatibility with Alpine.js and dynamic swapping.
*/
:root {
--bg-primary: #121212;
@@ -33,7 +32,7 @@
--text-primary: #f2f2f2;
--text-secondary: #a3a3a3;
--text-tertiary: #737373;
--brand-primary: #ddc288; /* Bright Gold for Dark Theme */
--brand-primary: #ddc288;
--brand-secondary: #c9a765;
}
@@ -44,7 +43,7 @@
--text-primary: #2d2114;
--text-secondary: #624a29;
--text-tertiary: #7d5e31;
--brand-primary: #9c763a; /* Darker Gold for Light Theme contrast */
--brand-primary: #9c763a;
--brand-secondary: #7d5e31;
}
@@ -58,7 +57,6 @@
transition: background-color 0.3s ease, color 0.3s ease;
}
/* Global Headings */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
color: var(--brand-primary);
@@ -66,6 +64,30 @@
}
}
/*
Typography (Prose) Customization
Using @utility prose to override internal Typography plugin variables
as recommended for Tailwind CSS v4. Must be at the top level.
*/
@utility prose {
--tw-prose-body: var(--text-primary);
--tw-prose-headings: var(--brand-primary);
--tw-prose-links: var(--brand-primary);
--tw-prose-bold: var(--text-primary);
--tw-prose-counters: var(--text-secondary);
--tw-prose-bullets: var(--brand-primary);
--tw-prose-hr: var(--bg-tertiary);
--tw-prose-quotes: var(--text-primary);
--tw-prose-quote-borders: var(--brand-primary);
--tw-prose-captions: var(--text-secondary);
--tw-prose-code: var(--text-primary);
--tw-prose-pre-code: var(--text-primary);
--tw-prose-pre-bg: var(--bg-secondary);
--tw-prose-th-borders: var(--bg-tertiary);
--tw-prose-td-borders: var(--bg-secondary);
max-width: 100%;
}
@layer components {
/* Main navigation styling */
header nav ul {
@@ -115,35 +137,13 @@
background-size: 100% 1px;
}
/* Typography (Prose) Customization */
.prose {
--tw-prose-body: var(--text-primary);
--tw-prose-headings: var(--brand-primary);
--tw-prose-links: var(--brand-primary);
--tw-prose-bold: var(--text-primary);
--tw-prose-counters: var(--text-secondary);
--tw-prose-bullets: var(--brand-primary);
--tw-prose-hr: var(--bg-tertiary);
--tw-prose-quotes: var(--text-primary);
--tw-prose-quote-borders: var(--brand-primary);
--tw-prose-captions: var(--text-secondary);
--tw-prose-code: var(--text-primary);
--tw-prose-pre-code: var(--text-primary);
--tw-prose-pre-bg: var(--bg-secondary);
--tw-prose-th-borders: var(--bg-tertiary);
--tw-prose-td-borders: var(--bg-secondary);
max-width: 100%;
transition: color 0.3s ease;
}
/* Increase specificity to ensure headings follow our brand-primary theme */
/* Specific prose element overrides for fonts and effects */
.prose :where(h1, h2, h3, h4, h5, h6) {
color: var(--brand-primary) !important;
font-family: var(--font-heading);
@apply font-bold tracking-tight transition-colors duration-300;
}
/* Link styling within prose */
.prose a {
color: var(--brand-primary) !important;
text-decoration: none !important;