diff --git a/modules/blox-tailwind/assets/css/config/safelist.css b/modules/blox-tailwind/assets/css/config/safelist.css index efd1dc14..be570672 100644 --- a/modules/blox-tailwind/assets/css/config/safelist.css +++ b/modules/blox-tailwind/assets/css/config/safelist.css @@ -2,4 +2,229 @@ /* Note: In v4, we use @source inline to ensure these are included */ /* This ensures Tailwind generates these classes even if not found in templates */ -@source inline("
"); +@source inline("
"); + +/* Force generation of all CSS custom properties for dynamic usage in YAML front matter */ +/* Hidden utility class that forces all color variables to be generated */ +.force-all-color-vars { + /* Primary Colors */ + color: var(--color-primary-50); + color: var(--color-primary-100); + color: var(--color-primary-200); + color: var(--color-primary-300); + color: var(--color-primary-400); + color: var(--color-primary-500); + color: var(--color-primary-600); + color: var(--color-primary-700); + color: var(--color-primary-800); + color: var(--color-primary-900); + color: var(--color-primary-950); + + /* Secondary Colors */ + color: var(--color-secondary-50); + color: var(--color-secondary-100); + color: var(--color-secondary-200); + color: var(--color-secondary-300); + color: var(--color-secondary-400); + color: var(--color-secondary-500); + color: var(--color-secondary-600); + color: var(--color-secondary-700); + color: var(--color-secondary-800); + color: var(--color-secondary-900); + color: var(--color-secondary-950); + + /* Extended Color Palette for Dynamic Gradients */ + color: var(--color-indigo-50); + color: var(--color-indigo-100); + color: var(--color-indigo-200); + color: var(--color-indigo-300); + color: var(--color-indigo-400); + color: var(--color-indigo-500); + color: var(--color-indigo-600); + color: var(--color-indigo-700); + color: var(--color-indigo-800); + color: var(--color-indigo-900); + color: var(--color-indigo-950); + + color: var(--color-purple-50); + color: var(--color-purple-100); + color: var(--color-purple-200); + color: var(--color-purple-300); + color: var(--color-purple-400); + color: var(--color-purple-500); + color: var(--color-purple-600); + color: var(--color-purple-700); + color: var(--color-purple-800); + color: var(--color-purple-900); + color: var(--color-purple-950); + + color: var(--color-pink-50); + color: var(--color-pink-100); + color: var(--color-pink-200); + color: var(--color-pink-300); + color: var(--color-pink-400); + color: var(--color-pink-500); + color: var(--color-pink-600); + color: var(--color-pink-700); + color: var(--color-pink-800); + color: var(--color-pink-900); + color: var(--color-pink-950); + + color: var(--color-red-50); + color: var(--color-red-100); + color: var(--color-red-200); + color: var(--color-red-300); + color: var(--color-red-400); + color: var(--color-red-500); + color: var(--color-red-600); + color: var(--color-red-700); + color: var(--color-red-800); + color: var(--color-red-900); + color: var(--color-red-950); + + color: var(--color-orange-50); + color: var(--color-orange-100); + color: var(--color-orange-200); + color: var(--color-orange-300); + color: var(--color-orange-400); + color: var(--color-orange-500); + color: var(--color-orange-600); + color: var(--color-orange-700); + color: var(--color-orange-800); + color: var(--color-orange-900); + color: var(--color-orange-950); + + color: var(--color-amber-50); + color: var(--color-amber-100); + color: var(--color-amber-200); + color: var(--color-amber-300); + color: var(--color-amber-400); + color: var(--color-amber-500); + color: var(--color-amber-600); + color: var(--color-amber-700); + color: var(--color-amber-800); + color: var(--color-amber-900); + color: var(--color-amber-950); + + color: var(--color-yellow-50); + color: var(--color-yellow-100); + color: var(--color-yellow-200); + color: var(--color-yellow-300); + color: var(--color-yellow-400); + color: var(--color-yellow-500); + color: var(--color-yellow-600); + color: var(--color-yellow-700); + color: var(--color-yellow-800); + color: var(--color-yellow-900); + color: var(--color-yellow-950); + + color: var(--color-lime-50); + color: var(--color-lime-100); + color: var(--color-lime-200); + color: var(--color-lime-300); + color: var(--color-lime-400); + color: var(--color-lime-500); + color: var(--color-lime-600); + color: var(--color-lime-700); + color: var(--color-lime-800); + color: var(--color-lime-900); + color: var(--color-lime-950); + + color: var(--color-green-50); + color: var(--color-green-100); + color: var(--color-green-200); + color: var(--color-green-300); + color: var(--color-green-400); + color: var(--color-green-500); + color: var(--color-green-600); + color: var(--color-green-700); + color: var(--color-green-800); + color: var(--color-green-900); + color: var(--color-green-950); + + color: var(--color-emerald-50); + color: var(--color-emerald-100); + color: var(--color-emerald-200); + color: var(--color-emerald-300); + color: var(--color-emerald-400); + color: var(--color-emerald-500); + color: var(--color-emerald-600); + color: var(--color-emerald-700); + color: var(--color-emerald-800); + color: var(--color-emerald-900); + color: var(--color-emerald-950); + + color: var(--color-teal-50); + color: var(--color-teal-100); + color: var(--color-teal-200); + color: var(--color-teal-300); + color: var(--color-teal-400); + color: var(--color-teal-500); + color: var(--color-teal-600); + color: var(--color-teal-700); + color: var(--color-teal-800); + color: var(--color-teal-900); + color: var(--color-teal-950); + + color: var(--color-cyan-50); + color: var(--color-cyan-100); + color: var(--color-cyan-200); + color: var(--color-cyan-300); + color: var(--color-cyan-400); + color: var(--color-cyan-500); + color: var(--color-cyan-600); + color: var(--color-cyan-700); + color: var(--color-cyan-800); + color: var(--color-cyan-900); + color: var(--color-cyan-950); + + color: var(--color-sky-50); + color: var(--color-sky-100); + color: var(--color-sky-200); + color: var(--color-sky-300); + color: var(--color-sky-400); + color: var(--color-sky-500); + color: var(--color-sky-600); + color: var(--color-sky-700); + color: var(--color-sky-800); + color: var(--color-sky-900); + color: var(--color-sky-950); + + color: var(--color-blue-50); + color: var(--color-blue-100); + color: var(--color-blue-200); + color: var(--color-blue-300); + color: var(--color-blue-400); + color: var(--color-blue-500); + color: var(--color-blue-600); + color: var(--color-blue-700); + color: var(--color-blue-800); + color: var(--color-blue-900); + color: var(--color-blue-950); + + color: var(--color-violet-50); + color: var(--color-violet-100); + color: var(--color-violet-200); + color: var(--color-violet-300); + color: var(--color-violet-400); + color: var(--color-violet-500); + color: var(--color-violet-600); + color: var(--color-violet-700); + color: var(--color-violet-800); + color: var(--color-violet-900); + color: var(--color-violet-950); + + /* Never display this class */ + display: none !important; +} + +/* Support for dual light/dark background colors in parse_block_v2.html */ +@media (prefers-color-scheme: dark) { + .home-section-bg[style*='--dark-bg-color'] { + background-color: var(--dark-bg-color) !important; + } +} + +.dark .home-section-bg[style*='--dark-bg-color'] { + background-color: var(--dark-bg-color) !important; +} diff --git a/modules/blox-tailwind/assets/css/config/tailwind.css b/modules/blox-tailwind/assets/css/config/tailwind.css index 8ab76d59..1de222bd 100644 --- a/modules/blox-tailwind/assets/css/config/tailwind.css +++ b/modules/blox-tailwind/assets/css/config/tailwind.css @@ -6,9 +6,8 @@ /* Content detection sources */ /* Note: @source is a Tailwind v4 directive - linters may show warnings that can be ignored */ +/* Hugo stats file contains all detected classes from templates */ @source "hugo_stats.json"; -@source "../../layouts/**/*.html"; -@source "../../assets/**/*.{js,css}"; /* Custom Variants Configuration */ /* Configure dark mode to use class strategy */ diff --git a/modules/blox-tailwind/assets/css/main.css b/modules/blox-tailwind/assets/css/main.css index a02cf06e..55fc4cb3 100644 --- a/modules/blox-tailwind/assets/css/main.css +++ b/modules/blox-tailwind/assets/css/main.css @@ -10,27 +10,27 @@ 6. Safelist for dynamic classes */ -/* Tailwind CSS v4 Base */ -@import "tailwindcss"; +/* Tailwind CSS v4 - This single import handles base, components, and utilities */ +@import 'tailwindcss'; /* Configuration */ -@import "./config/tailwind.css"; -@import "./config/theme.css"; +@import 'config/tailwind.css'; +@import 'config/theme.css'; /* Base styles and utilities */ -@import "./framework/base.css"; +@import 'framework/base.css'; /* Hugo Blox theme system (color utilities) */ -@import "./color-utilities.css"; +@import 'color-utilities.css'; /* Hugo Blox framework components */ -@import "./framework/components.css"; +@import 'framework/components.css'; /* Hugo Blox module components */ -@import "./components/all.css"; -@import "./blox/all.css"; -@import "./views/attachments.css"; -@import "chroma.css"; +@import 'components/all.css'; +@import 'blox/all.css'; +@import 'views/all.css'; +@import 'chroma.css'; /* Safelist for dynamic classes */ -@import "./config/safelist.css"; \ No newline at end of file +@import 'config/safelist.css'; diff --git a/modules/blox-tailwind/assets/hugo_stats.json b/modules/blox-tailwind/assets/hugo_stats.json new file mode 100644 index 00000000..2cd6e424 --- /dev/null +++ b/modules/blox-tailwind/assets/hugo_stats.json @@ -0,0 +1,6 @@ +{ + "htmlElements": {}, + "htmlAttributes": {}, + "cssClasses": [], + "ids": [] +} diff --git a/modules/blox-tailwind/hugo.yaml b/modules/blox-tailwind/hugo.yaml index 73398b54..821d830f 100644 --- a/modules/blox-tailwind/hugo.yaml +++ b/modules/blox-tailwind/hugo.yaml @@ -2,7 +2,7 @@ build: buildStats: enable: true cachebusters: - - source: assets/notwatching/hugo_stats\.json + - source: assets/hugo_stats\.json target: css - source: (postcss|tailwind)\.config\.js target: css @@ -112,7 +112,7 @@ module: target: archetypes - disableWatch: true source: hugo_stats.json - target: assets/notwatching/hugo_stats.json + target: assets/hugo_stats.json # BLOX A) Server-rendered block templates (Go HTML) - source: blox