feat: add smart font colors for wood paneling backgrounds

- Add data-wood attribute to collections container for CSS targeting
- Update woodPaneling.ts and woodPanelingInit.ts to set/remove attribute
- Add CSS variables for wood-specific text colors (dark text on light wood, light text on dark wood)
- Add !important rules to override theme colors when wood is active
- Replace wood-dark and wood-mahogany textures with darker variants
- Add subtle borders to book cards on wood backgrounds
This commit is contained in:
2026-02-24 16:36:49 -05:00
parent c50f58dafc
commit 4571a19159
6 changed files with 3345 additions and 2 deletions
+2
View File
@@ -11,10 +11,12 @@ const applyWoodPaneling = (paneling: WoodPanelingType): void => {
// Remove all wood background classes
container.classList.remove('bg-wood-light', 'bg-wood-dark', 'bg-wood-mahogany');
container.removeAttribute('data-wood');
if (paneling !== 'none') {
// Add selected wood background class
container.classList.add(`bg-${paneling}`);
container.setAttribute('data-wood', paneling);
}
// Save to localStorage
+1
View File
@@ -11,6 +11,7 @@ const WOOD_INIT_STORAGE_KEY = 'wood-paneling';
const container = document.getElementById('collections-container');
if (container) {
container.classList.add(`bg-${woodPaneling}`);
container.setAttribute('data-wood', woodPaneling);
}
};