feat: add 3 switchable color palettes with Slate Blue & Amber as default

Replace generic Google blue with 3 professional palettes (Deep Teal,
Slate Blue & Amber, Rich Olive & Copper) using CSS token overrides.
Palette B (Slate Blue + amber Next button) is the default. Includes
WP_DEBUG-only purple switcher button to cycle between palettes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-12 23:02:55 +09:00
parent 2ca1f4ff54
commit f1f5c760c2
2 changed files with 154 additions and 1 deletions

View File

@@ -46,7 +46,7 @@ class Umzugsliste_Form_Renderer {
ob_start();
?>
<div class="umzugsliste-wizard">
<div class="umzugsliste-wizard palette-b">
<?php self::render_validation_errors(); ?>
<?php self::render_progress_bar( $steps ); ?>
<div class="running-totals" id="running-totals">
@@ -82,6 +82,20 @@ class Umzugsliste_Form_Renderer {
<button type="submit" class="wizard-btn wizard-btn-submit" id="wizard-submit" style="display:none;"><?php echo esc_html__( 'Submit Request', 'siegel-umzugsliste' ); ?></button>
</div>
</form>
<?php if ( defined( 'WP_DEBUG' ) && WP_DEBUG ) : ?>
<button type="button" id="dev-palette-switch" class="dev-palette-btn">&#127912; B</button>
<script>
document.getElementById('dev-palette-switch').addEventListener('click', function() {
var w = document.querySelector('.umzugsliste-wizard');
var p = ['palette-a', 'palette-b', 'palette-c'];
var c = p.findIndex(function(x) { return w.classList.contains(x); });
var n = (c + 1) % p.length;
w.classList.remove(p[c]);
w.classList.add(p[n]);
this.textContent = '\u{1F3A8} ' + p[n].split('-')[1].toUpperCase();
});
</script>
<?php endif; ?>
</div>
<?php
return ob_get_clean();