Feature Flags

WAGE includes feature flags for development and review workflows. Flags persist via cookies and can be toggled via URL parameters or the admin bar.

Available flags

Flag	Purpose	URL toggle
wireframe	Strips all visual styling — grayscale, no animations, no textures	?wage=wireframe / ?wage=-wireframe
xray	Highlights components with outlines and labels	?wage=xray / ?wage=-xray
xray-components	Adds data-wage-component attributes (on by default)	?wage=xray-components
dark-mode	Sets color-scheme: dark on :root for previewing dark surfaces	?wage=dark-mode / ?wage=-dark-mode

Multiple flags can be set at once: ?wage=wireframe,xray

Constants

Flags can be set permanently via PHP constants in the child theme’s functions.php. Constants work for all users (not just admins) and take priority over cookies:

define( 'WAGE_WIREFRAME', true );
define( 'WAGE_XRAY', true );
define( 'WAGE_DARK_MODE', true );

The constant name is WAGE_ + the flag name in uppercase with hyphens replaced by underscores. Useful for enabling wireframe mode during initial development before brand styling is applied.

Admin bar toggles

All flags are accessible via the Wage Dashboard dropdown in the WordPress admin bar:

• X-Ray Components — toggle with checkmark
• Wireframe Mode — toggle with checkmark
• Dark Mode — toggle with checkmark

Dark mode flag

The dark mode flag sets color-scheme: dark on :root, which causes all light-dark() semantic tokens to resolve to their dark values. This is a preview tool for testing how components and surfaces look in dark mode — it’s not intended for production use.

To make a specific section dark in production, use the surface--dark utility class or a dark surface like surface--velvet.

Wireframe mode

Wireframe mode strips all visual styling for layout review:

• Grayscale filter on the entire page
• Surface textures hidden (::after pseudo-elements removed)
• Animations and transitions disabled
• SectionBackground components hidden

Styleguide dashboard

The built-in dashboard provides:

• A visual reference of all core components
• Current token values with colour previews
• Token audit (core vs child comparison)
• SEO data overview across all pages

Access via the admin bar: Wage Dashboard → Style Guide

URL parameter format

?wage=flagname       Enable a flag (sets cookie)
?wage=-flagname      Disable a flag (clears cookie)
?wage=flag1,flag2    Multiple flags
?wage                Show the debug panel (bottom-right overlay)

Cookie and URL overrides only work for administrators (current_user_can('manage_options')). Constants work for all users.