Color Token System

AlonePro implements a strict Preset Slug Color Pattern designed to guarantee that all custom Gutenberg blocks, block patterns, and template layouts dynamically adapt when switching between any of the 13 Style Variations.

Standard Palette Slugs

Every AlonePro style variation defines the exact same 7 semantic palette slugs inside settings.color.palette:

Slug	Role	Semantic Meaning
`primary`	Brand Accent	Primary button background, active tabs, highlight icons, donor CTAs.
`secondary`	Secondary Accent	Subheadings, badges, progress bar highlights, secondary buttons.
`base`	Page Background	Canvas background color (typically clean white or warm light).
`contrast`	Primary Text	Headings, hero copy, high-contrast dark elements.
`paragraph`	Body Copy	Readable text paragraphs, descriptive subtitles, metadata.
`surface`	Card / Container	Card backgrounds, dropdown panels, subtle container fills.
`transparent`	Utility	Transparent background states for ghost buttons and outlines.

Generated CSS Custom Properties

WordPress automatically generates standard CSS custom variables for each defined slug:

--wp--preset--color--primary
--wp--preset--color--secondary
--wp--preset--color--base
--wp--preset--color--contrast
--wp--preset--color--paragraph
--wp--preset--color--surface
--wp--preset--color--transparent

The Preset Slug Color Pattern for Blocks

When building or extending Gutenberg blocks for AlonePro, follow these rules:

Store Slugs, Not Hex Codes: Block attributes must store semantic slugs (e.g., "primary", "secondary"), never hardcoded hex values (like #FEB83D).
Avoid Reserved Attribute Names: Do not use WordPress reserved attributes backgroundColor or textColor unless intentionally delegating to core block supports. Use scoped attribute names such as headingColor, subHeadingColor, buttonBgColor.
Resolve in render.php: In the block's PHP template, construct CSS variables using the saved slug:

// render.php
$heading_color = $attributes['headingColor'] ?? '';
 
// Check if attribute is a custom hex or a preset slug
if ( ! empty( $heading_color ) ) {
    $color_val = str_starts_with( $heading_color, '#' )
        ? esc_attr( $heading_color )
        : 'var(--wp--preset--color--' . esc_attr( $heading_color ) . ')';
 
    $style_attr = 'style="color: ' . $color_val . ';"';
}

By adhering to this pattern, your custom blocks will seamlessly adapt their appearance whenever a site administrator switches style variations.

Template Hierarchy Common Issues