From edf053d7ea14f35bfb1447e80e87feb793162067 Mon Sep 17 00:00:00 2001 From: magdev Date: Sun, 8 Feb 2026 16:37:29 +0100 Subject: [PATCH] v0.3.1 - Add 11 new style variations (4 light, 4 dark + 3 earlier dark) Add Rose, Sand, Lavender, Mint (light) and Ember, Arctic, Amethyst, Slate, Mocha, Nebula, Obsidian (dark) color palettes for the Design Editor. Total of 15 style variations available (7 light, 7 dark). Co-Authored-By: Claude --- CHANGELOG.md | 8 ++++ CLAUDE.md | 19 ++++++++- PLAN.md | 1 + package.json | 2 +- style.css | 2 +- styles/05-ember.json | 86 +++++++++++++++++++++++++++++++++++++++++ styles/06-arctic.json | 86 +++++++++++++++++++++++++++++++++++++++++ styles/07-amethyst.json | 86 +++++++++++++++++++++++++++++++++++++++++ styles/08-rose.json | 79 +++++++++++++++++++++++++++++++++++++ styles/09-sand.json | 79 +++++++++++++++++++++++++++++++++++++ styles/10-lavender.json | 79 +++++++++++++++++++++++++++++++++++++ styles/11-mint.json | 79 +++++++++++++++++++++++++++++++++++++ styles/12-slate.json | 86 +++++++++++++++++++++++++++++++++++++++++ styles/13-mocha.json | 86 +++++++++++++++++++++++++++++++++++++++++ styles/14-nebula.json | 86 +++++++++++++++++++++++++++++++++++++++++ styles/15-obsidian.json | 86 +++++++++++++++++++++++++++++++++++++++++ 16 files changed, 946 insertions(+), 4 deletions(-) create mode 100644 styles/05-ember.json create mode 100644 styles/06-arctic.json create mode 100644 styles/07-amethyst.json create mode 100644 styles/08-rose.json create mode 100644 styles/09-sand.json create mode 100644 styles/10-lavender.json create mode 100644 styles/11-mint.json create mode 100644 styles/12-slate.json create mode 100644 styles/13-mocha.json create mode 100644 styles/14-nebula.json create mode 100644 styles/15-obsidian.json 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" + } + } + } + } + } +}