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:
@@ -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">🎨 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();
|
||||
|
||||
Reference in New Issue
Block a user