diff --git a/CHANGELOG.md b/CHANGELOG.md index 1f6eec9..8f6e144 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,14 @@ All notable changes to this project will be documented in this file. +## [0.3.1] - 2026-02-08 + +### Added + +- 4 new light style variations: Rose, Sand, Lavender, Mint +- 4 new dark style variations: Slate, Mocha, Nebula, Obsidian +- Total of 15 color palettes available in the Design Editor (7 light, 7 dark, plus default) + ## [0.3.0] - 2026-02-08 ### Added diff --git a/CLAUDE.md b/CLAUDE.md index 340c803..0105236 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -34,7 +34,7 @@ This project is proudly **"vibe-coded"** using Claude.AI - the entire codebase w **Note for AI Assistants:** Clean this section after the specific features are done or new releases are made. Effective changes are tracked in `CHANGELOG.md`. Do not add completed versions here - document them in the Session History section at the end of this file. -Current version is **v0.3.0** - Polish. Next milestone is **v1.0.0 - Release**. See `PLAN.md` for details. +Current version is **v0.3.1** - Style Variations. Next milestone is **v1.0.0 - Release**. See `PLAN.md` for details. ## Technical Stack @@ -184,7 +184,7 @@ Build steps (in order): - **Dark mode:** Uses Bootstrap 5.3 `data-bs-theme` attribute on ``. An inline anti-flash script runs synchronously in `` (via `wp_add_inline_script` with `'before'`), while the full `dark-mode.js` is deferred. Preference stored in `localStorage` key `wp-bootstrap-theme`. - **Block styles:** Registered via `register_block_style()` with `inline_style` parameter in `functions.php`. Dark mode overrides for alert/card styles are in `src/scss/_custom.scss`. -- **Style variations:** JSON files in `styles/` directory. All 4 variations use the same 10 color slug names (base, contrast, primary, secondary, success, danger, warning, info, light, dark) to ensure patterns work across all schemes. +- **Style variations:** JSON files in `styles/` directory. All 15 variations (7 light, 7 dark, plus default) use the same 10 color slug names (base, contrast, primary, secondary, success, danger, warning, info, light, dark) to ensure patterns work across all schemes. - **Fonts:** Inter (sans-serif) and Lora (serif) variable fonts bundled as `.woff2` in `assets/fonts/`. Declared via `fontFace` in `theme.json` with `font-display: swap`. - **Patterns:** PHP files in `patterns/` with WordPress block markup and i18n. Hidden patterns (prefixed `hidden-`) are reusable components not shown in the pattern inserter. - **Twig frontend rendering:** `TemplateController` hooks `template_redirect` to intercept frontend requests and render Bootstrap 5 HTML via Twig, bypassing FSE block markup. FSE templates remain for the Site Editor. WordPress functions that produce output (`wp_head`, `wp_footer`, `body_class`, `language_attributes`) are captured via `ob_start()`/`ob_get_clean()` and passed to Twig as safe HTML strings. @@ -193,6 +193,21 @@ Build steps (in order): ## Session History +### Session 6 — v0.3.1 Style Variations (2026-02-08) + +**Completed:** Added 8 new style variations (4 light, 4 dark) to the Design Editor. + +**What was built:** + +- 4 new light palettes: Rose (pink/fuchsia), Sand (warm amber/beige), Lavender (soft purple), Mint (fresh teal) +- 4 new dark palettes: Slate (neutral blue-gray), Mocha (coffee/warm brown), Nebula (space teal-cyan), Obsidian (near-black with red) +- All variations follow the established 10-slug color pattern for cross-variation pattern compatibility + +**Key learnings:** + +- Dark style variations swap base/contrast (dark base, light contrast) and use darker shades for the `light` and `dark` slugs to maintain proper surface hierarchy +- Button and link hover states in dark palettes need explicit `color` and `text` overrides since the default theme.json assumes light base + ### Session 5 — v0.3.0 Polish (2026-02-08) **Completed:** Accessibility audit and fixes, security hardening, performance optimization, RTL language support, French translation, inline style cleanup. diff --git a/PLAN.md b/PLAN.md index f57c1ef..4470a37 100644 --- a/PLAN.md +++ b/PLAN.md @@ -88,6 +88,7 @@ node_modules/bootstrap/dist/js/ → copyfiles → assets/js/bootstrap.bundle.min - [ ] WordPress.org theme review compliance - [ ] Comprehensive documentation - [ ] Full test coverage +- [ ] Update `README.md` ## Bootstrap 5 Integration Strategy diff --git a/package.json b/package.json index 12b2cfb..53d0951 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "wp-bootstrap", - "version": "0.3.0", + "version": "0.3.1", "description": "WordPress Theme built with Bootstrap 5", "author": "Marco Graetsch ", "license": "GPL-2.0-or-later", diff --git a/style.css b/style.css index 3718b48..07ab347 100644 --- a/style.css +++ b/style.css @@ -7,7 +7,7 @@ Description: A modern WordPress Block Theme built from scratch with Bootstrap 5. Requires at least: 6.7 Tested up to: 6.7 Requires PHP: 8.3 -Version: 0.3.0 +Version: 0.3.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: wp-bootstrap diff --git a/styles/05-ember.json b/styles/05-ember.json new file mode 100644 index 0000000..288bcaa --- /dev/null +++ b/styles/05-ember.json @@ -0,0 +1,86 @@ +{ + "$schema": "https://schemas.wp.org/wp/6.7/theme.json", + "version": 3, + "title": "Ember", + "settings": { + "color": { + "palette": [ + { + "color": "#1c1210", + "name": "Base", + "slug": "base" + }, + { + "color": "#f0e6e0", + "name": "Contrast", + "slug": "contrast" + }, + { + "color": "#e85d26", + "name": "Primary", + "slug": "primary" + }, + { + "color": "#a8a09c", + "name": "Secondary", + "slug": "secondary" + }, + { + "color": "#4ade80", + "name": "Success", + "slug": "success" + }, + { + "color": "#f87171", + "name": "Danger", + "slug": "danger" + }, + { + "color": "#fbbf24", + "name": "Warning", + "slug": "warning" + }, + { + "color": "#fb923c", + "name": "Info", + "slug": "info" + }, + { + "color": "#2a1f1b", + "name": "Light", + "slug": "light" + }, + { + "color": "#3d2117", + "name": "Dark", + "slug": "dark" + } + ] + } + }, + "styles": { + "elements": { + "button": { + "color": { + "background": "var:preset|color|primary", + "text": "var:preset|color|base" + }, + ":hover": { + "color": { + "background": "#c44b1b" + } + } + }, + "link": { + "color": { + "text": "var:preset|color|primary" + }, + ":hover": { + "color": { + "text": "#c44b1b" + } + } + } + } + } +} diff --git a/styles/06-arctic.json b/styles/06-arctic.json new file mode 100644 index 0000000..8b39b9f --- /dev/null +++ b/styles/06-arctic.json @@ -0,0 +1,86 @@ +{ + "$schema": "https://schemas.wp.org/wp/6.7/theme.json", + "version": 3, + "title": "Arctic", + "settings": { + "color": { + "palette": [ + { + "color": "#0d1b2a", + "name": "Base", + "slug": "base" + }, + { + "color": "#e0e8f0", + "name": "Contrast", + "slug": "contrast" + }, + { + "color": "#38bdf8", + "name": "Primary", + "slug": "primary" + }, + { + "color": "#94a3b8", + "name": "Secondary", + "slug": "secondary" + }, + { + "color": "#34d399", + "name": "Success", + "slug": "success" + }, + { + "color": "#fb7185", + "name": "Danger", + "slug": "danger" + }, + { + "color": "#facc15", + "name": "Warning", + "slug": "warning" + }, + { + "color": "#22d3ee", + "name": "Info", + "slug": "info" + }, + { + "color": "#1b2838", + "name": "Light", + "slug": "light" + }, + { + "color": "#0f4c75", + "name": "Dark", + "slug": "dark" + } + ] + } + }, + "styles": { + "elements": { + "button": { + "color": { + "background": "var:preset|color|primary", + "text": "var:preset|color|base" + }, + ":hover": { + "color": { + "background": "#0ea5e9" + } + } + }, + "link": { + "color": { + "text": "var:preset|color|primary" + }, + ":hover": { + "color": { + "text": "#0ea5e9" + } + } + } + } + } +} diff --git a/styles/07-amethyst.json b/styles/07-amethyst.json new file mode 100644 index 0000000..81fdb99 --- /dev/null +++ b/styles/07-amethyst.json @@ -0,0 +1,86 @@ +{ + "$schema": "https://schemas.wp.org/wp/6.7/theme.json", + "version": 3, + "title": "Amethyst", + "settings": { + "color": { + "palette": [ + { + "color": "#1a1028", + "name": "Base", + "slug": "base" + }, + { + "color": "#e8e0f0", + "name": "Contrast", + "slug": "contrast" + }, + { + "color": "#a78bfa", + "name": "Primary", + "slug": "primary" + }, + { + "color": "#9ca3af", + "name": "Secondary", + "slug": "secondary" + }, + { + "color": "#6ee7b7", + "name": "Success", + "slug": "success" + }, + { + "color": "#fca5a5", + "name": "Danger", + "slug": "danger" + }, + { + "color": "#fde68a", + "name": "Warning", + "slug": "warning" + }, + { + "color": "#c084fc", + "name": "Info", + "slug": "info" + }, + { + "color": "#221538", + "name": "Light", + "slug": "light" + }, + { + "color": "#3b1f6e", + "name": "Dark", + "slug": "dark" + } + ] + } + }, + "styles": { + "elements": { + "button": { + "color": { + "background": "var:preset|color|primary", + "text": "var:preset|color|base" + }, + ":hover": { + "color": { + "background": "#8b5cf6" + } + } + }, + "link": { + "color": { + "text": "var:preset|color|primary" + }, + ":hover": { + "color": { + "text": "#8b5cf6" + } + } + } + } + } +} diff --git a/styles/08-rose.json b/styles/08-rose.json new file mode 100644 index 0000000..f74a672 --- /dev/null +++ b/styles/08-rose.json @@ -0,0 +1,79 @@ +{ + "$schema": "https://schemas.wp.org/wp/6.7/theme.json", + "version": 3, + "title": "Rose", + "settings": { + "color": { + "palette": [ + { + "color": "#FFFBFC", + "name": "Base", + "slug": "base" + }, + { + "color": "#2e1a21", + "name": "Contrast", + "slug": "contrast" + }, + { + "color": "#be185d", + "name": "Primary", + "slug": "primary" + }, + { + "color": "#78716c", + "name": "Secondary", + "slug": "secondary" + }, + { + "color": "#16a34a", + "name": "Success", + "slug": "success" + }, + { + "color": "#dc2626", + "name": "Danger", + "slug": "danger" + }, + { + "color": "#eab308", + "name": "Warning", + "slug": "warning" + }, + { + "color": "#ec4899", + "name": "Info", + "slug": "info" + }, + { + "color": "#fdf2f8", + "name": "Light", + "slug": "light" + }, + { + "color": "#4a1030", + "name": "Dark", + "slug": "dark" + } + ] + } + }, + "styles": { + "elements": { + "button": { + ":hover": { + "color": { + "background": "#9d174d" + } + } + }, + "link": { + ":hover": { + "color": { + "text": "#9d174d" + } + } + } + } + } +} diff --git a/styles/09-sand.json b/styles/09-sand.json new file mode 100644 index 0000000..58c68c8 --- /dev/null +++ b/styles/09-sand.json @@ -0,0 +1,79 @@ +{ + "$schema": "https://schemas.wp.org/wp/6.7/theme.json", + "version": 3, + "title": "Sand", + "settings": { + "color": { + "palette": [ + { + "color": "#FEFCF8", + "name": "Base", + "slug": "base" + }, + { + "color": "#292017", + "name": "Contrast", + "slug": "contrast" + }, + { + "color": "#b45309", + "name": "Primary", + "slug": "primary" + }, + { + "color": "#78716c", + "name": "Secondary", + "slug": "secondary" + }, + { + "color": "#15803d", + "name": "Success", + "slug": "success" + }, + { + "color": "#b91c1c", + "name": "Danger", + "slug": "danger" + }, + { + "color": "#d97706", + "name": "Warning", + "slug": "warning" + }, + { + "color": "#d4956b", + "name": "Info", + "slug": "info" + }, + { + "color": "#f5f0e8", + "name": "Light", + "slug": "light" + }, + { + "color": "#3d2c14", + "name": "Dark", + "slug": "dark" + } + ] + } + }, + "styles": { + "elements": { + "button": { + ":hover": { + "color": { + "background": "#92400e" + } + } + }, + "link": { + ":hover": { + "color": { + "text": "#92400e" + } + } + } + } + } +} diff --git a/styles/10-lavender.json b/styles/10-lavender.json new file mode 100644 index 0000000..de7c0b6 --- /dev/null +++ b/styles/10-lavender.json @@ -0,0 +1,79 @@ +{ + "$schema": "https://schemas.wp.org/wp/6.7/theme.json", + "version": 3, + "title": "Lavender", + "settings": { + "color": { + "palette": [ + { + "color": "#FCFBFF", + "name": "Base", + "slug": "base" + }, + { + "color": "#1e1b2e", + "name": "Contrast", + "slug": "contrast" + }, + { + "color": "#7c3aed", + "name": "Primary", + "slug": "primary" + }, + { + "color": "#71717a", + "name": "Secondary", + "slug": "secondary" + }, + { + "color": "#059669", + "name": "Success", + "slug": "success" + }, + { + "color": "#dc2626", + "name": "Danger", + "slug": "danger" + }, + { + "color": "#eab308", + "name": "Warning", + "slug": "warning" + }, + { + "color": "#8b5cf6", + "name": "Info", + "slug": "info" + }, + { + "color": "#f3f0ff", + "name": "Light", + "slug": "light" + }, + { + "color": "#3b1f8e", + "name": "Dark", + "slug": "dark" + } + ] + } + }, + "styles": { + "elements": { + "button": { + ":hover": { + "color": { + "background": "#6d28d9" + } + } + }, + "link": { + ":hover": { + "color": { + "text": "#6d28d9" + } + } + } + } + } +} diff --git a/styles/11-mint.json b/styles/11-mint.json new file mode 100644 index 0000000..4172e06 --- /dev/null +++ b/styles/11-mint.json @@ -0,0 +1,79 @@ +{ + "$schema": "https://schemas.wp.org/wp/6.7/theme.json", + "version": 3, + "title": "Mint", + "settings": { + "color": { + "palette": [ + { + "color": "#F8FFFE", + "name": "Base", + "slug": "base" + }, + { + "color": "#14291f", + "name": "Contrast", + "slug": "contrast" + }, + { + "color": "#0d9488", + "name": "Primary", + "slug": "primary" + }, + { + "color": "#6b7280", + "name": "Secondary", + "slug": "secondary" + }, + { + "color": "#16a34a", + "name": "Success", + "slug": "success" + }, + { + "color": "#dc2626", + "name": "Danger", + "slug": "danger" + }, + { + "color": "#ca8a04", + "name": "Warning", + "slug": "warning" + }, + { + "color": "#2dd4bf", + "name": "Info", + "slug": "info" + }, + { + "color": "#ecfdf5", + "name": "Light", + "slug": "light" + }, + { + "color": "#134e4a", + "name": "Dark", + "slug": "dark" + } + ] + } + }, + "styles": { + "elements": { + "button": { + ":hover": { + "color": { + "background": "#0f766e" + } + } + }, + "link": { + ":hover": { + "color": { + "text": "#0f766e" + } + } + } + } + } +} diff --git a/styles/12-slate.json b/styles/12-slate.json new file mode 100644 index 0000000..7aea4c0 --- /dev/null +++ b/styles/12-slate.json @@ -0,0 +1,86 @@ +{ + "$schema": "https://schemas.wp.org/wp/6.7/theme.json", + "version": 3, + "title": "Slate", + "settings": { + "color": { + "palette": [ + { + "color": "#0f172a", + "name": "Base", + "slug": "base" + }, + { + "color": "#e2e8f0", + "name": "Contrast", + "slug": "contrast" + }, + { + "color": "#3b82f6", + "name": "Primary", + "slug": "primary" + }, + { + "color": "#94a3b8", + "name": "Secondary", + "slug": "secondary" + }, + { + "color": "#22c55e", + "name": "Success", + "slug": "success" + }, + { + "color": "#ef4444", + "name": "Danger", + "slug": "danger" + }, + { + "color": "#eab308", + "name": "Warning", + "slug": "warning" + }, + { + "color": "#06b6d4", + "name": "Info", + "slug": "info" + }, + { + "color": "#1e293b", + "name": "Light", + "slug": "light" + }, + { + "color": "#334155", + "name": "Dark", + "slug": "dark" + } + ] + } + }, + "styles": { + "elements": { + "button": { + "color": { + "background": "var:preset|color|primary", + "text": "var:preset|color|base" + }, + ":hover": { + "color": { + "background": "#2563eb" + } + } + }, + "link": { + "color": { + "text": "var:preset|color|primary" + }, + ":hover": { + "color": { + "text": "#2563eb" + } + } + } + } + } +} diff --git a/styles/13-mocha.json b/styles/13-mocha.json new file mode 100644 index 0000000..88a31e6 --- /dev/null +++ b/styles/13-mocha.json @@ -0,0 +1,86 @@ +{ + "$schema": "https://schemas.wp.org/wp/6.7/theme.json", + "version": 3, + "title": "Mocha", + "settings": { + "color": { + "palette": [ + { + "color": "#1c1412", + "name": "Base", + "slug": "base" + }, + { + "color": "#e7ddd4", + "name": "Contrast", + "slug": "contrast" + }, + { + "color": "#c49a6c", + "name": "Primary", + "slug": "primary" + }, + { + "color": "#a8998a", + "name": "Secondary", + "slug": "secondary" + }, + { + "color": "#6ec98f", + "name": "Success", + "slug": "success" + }, + { + "color": "#e87e7e", + "name": "Danger", + "slug": "danger" + }, + { + "color": "#e5c07b", + "name": "Warning", + "slug": "warning" + }, + { + "color": "#d19a66", + "name": "Info", + "slug": "info" + }, + { + "color": "#2a201a", + "name": "Light", + "slug": "light" + }, + { + "color": "#45342a", + "name": "Dark", + "slug": "dark" + } + ] + } + }, + "styles": { + "elements": { + "button": { + "color": { + "background": "var:preset|color|primary", + "text": "var:preset|color|base" + }, + ":hover": { + "color": { + "background": "#a8804f" + } + } + }, + "link": { + "color": { + "text": "var:preset|color|primary" + }, + ":hover": { + "color": { + "text": "#a8804f" + } + } + } + } + } +} diff --git a/styles/14-nebula.json b/styles/14-nebula.json new file mode 100644 index 0000000..296cec1 --- /dev/null +++ b/styles/14-nebula.json @@ -0,0 +1,86 @@ +{ + "$schema": "https://schemas.wp.org/wp/6.7/theme.json", + "version": 3, + "title": "Nebula", + "settings": { + "color": { + "palette": [ + { + "color": "#0a1628", + "name": "Base", + "slug": "base" + }, + { + "color": "#d4e4f0", + "name": "Contrast", + "slug": "contrast" + }, + { + "color": "#2dd4bf", + "name": "Primary", + "slug": "primary" + }, + { + "color": "#7e9bb0", + "name": "Secondary", + "slug": "secondary" + }, + { + "color": "#4ade80", + "name": "Success", + "slug": "success" + }, + { + "color": "#f472b6", + "name": "Danger", + "slug": "danger" + }, + { + "color": "#fbbf24", + "name": "Warning", + "slug": "warning" + }, + { + "color": "#67e8f9", + "name": "Info", + "slug": "info" + }, + { + "color": "#112240", + "name": "Light", + "slug": "light" + }, + { + "color": "#1a365d", + "name": "Dark", + "slug": "dark" + } + ] + } + }, + "styles": { + "elements": { + "button": { + "color": { + "background": "var:preset|color|primary", + "text": "var:preset|color|base" + }, + ":hover": { + "color": { + "background": "#14b8a6" + } + } + }, + "link": { + "color": { + "text": "var:preset|color|primary" + }, + ":hover": { + "color": { + "text": "#14b8a6" + } + } + } + } + } +} diff --git a/styles/15-obsidian.json b/styles/15-obsidian.json new file mode 100644 index 0000000..4831d19 --- /dev/null +++ b/styles/15-obsidian.json @@ -0,0 +1,86 @@ +{ + "$schema": "https://schemas.wp.org/wp/6.7/theme.json", + "version": 3, + "title": "Obsidian", + "settings": { + "color": { + "palette": [ + { + "color": "#121212", + "name": "Base", + "slug": "base" + }, + { + "color": "#e0e0e0", + "name": "Contrast", + "slug": "contrast" + }, + { + "color": "#ef4444", + "name": "Primary", + "slug": "primary" + }, + { + "color": "#a3a3a3", + "name": "Secondary", + "slug": "secondary" + }, + { + "color": "#4ade80", + "name": "Success", + "slug": "success" + }, + { + "color": "#fb7185", + "name": "Danger", + "slug": "danger" + }, + { + "color": "#fbbf24", + "name": "Warning", + "slug": "warning" + }, + { + "color": "#f97316", + "name": "Info", + "slug": "info" + }, + { + "color": "#1a1a1a", + "name": "Light", + "slug": "light" + }, + { + "color": "#2a2a2a", + "name": "Dark", + "slug": "dark" + } + ] + } + }, + "styles": { + "elements": { + "button": { + "color": { + "background": "var:preset|color|primary", + "text": "var:preset|color|base" + }, + ":hover": { + "color": { + "background": "#dc2626" + } + } + }, + "link": { + "color": { + "text": "var:preset|color|primary" + }, + ":hover": { + "color": { + "text": "#dc2626" + } + } + } + } + } +}