YAOTW Stylo - Design System Importer

YAOTW Stylo connects your WordPress site to the WPStylo app — a free visual design system configurator for colors, typography, buttons, and global elements. Design your system once in the app, export a JSON config file, then apply it in one click via three independent targets: CSS Custom Properties (universal) Injects --wps-color-*, --wps-font-*, and --wps-btn-* CSS variables plus .wps-text-* and .wps-btn-* utility classes into every front-end page. Works with any theme or page builder. Elementor integration Updates system colors, system typography, and global button styles via the Kit Manager API. Injects Elementor Global Variables (colors, font families, font sizes) and utility CSS classes (.wps_h1--.wps_nav, .wps_btn_*) directly into the active Kit's custom CSS. User-created Custom Colors, Custom Fonts, and Global Variables are preserved on re-apply. FSE / theme.json Merges WPStylo design tokens into the active block theme's theme.json (color palette, font families, font sizes, heading and body styles, button element) while preserving all other theme settings. Automatic backup before every write. Key features

• JSON import via file upload or paste, validated against the wpstylo/v1 schema
• Responsive typography via clamp() (CSS) and automatic tablet size interpolation (Elementor)
• Non-destructive re-apply — user content preserved in Elementor and FSE
• Automatic theme.json.wpstylo-backup before every FSE write
• Copy-to-clipboard class reference table in the admin

Requirements

• Elementor 3.0+ — required for the Elementor target only (optional)
• A block theme — required for the FSE target only (optional)

The CSS Custom Properties target works with any theme and any builder.

1. In your WordPress admin, go to Plugins → Add New Plugin.
2. Search for YAOTW Stylo and click Install Now.
3. Click Activate.
4. Navigate to YAOTW Stylo in the admin sidebar.

Manual installation

1. Download the zip from the WordPress.org plugin page.
2. In your WordPress admin, go to Plugins → Add New Plugin → Upload Plugin.
3. Select the zip and click Install Now, then Activate.

First steps

1. Visit app.wpstylo.dev, configure your design system, and export wpstylo-config.json.
2. In your WordPress admin under YAOTW Stylo, import the JSON file.
3. Click Apply on the target(s) you want to use.

1.6.0

• Added: Tools tab — delete, create (app link), export (client-side JSON backup of the imported config), restore theme.json from backup (FSE), and learn more.
• Added: Guide tab with step-by-step usage notes for the Elementor, FSE, and CSS Custom Properties targets, and what persists after uninstalling.
• Added: FSE restore — one-click restore of theme.json from the WPStylo backup (Tools tab), with a confirmation modal.
• Added: a safety warning on the Import & Apply tab (use on development/staging; back up before applying on production).
• Changed: admin reorganized into five deep-linkable tabs (Import & Apply, Reference, Summary, Tools, Guide) and is now full width.
• Changed: Configuration summary opens the Colors panel by default and shows the font family per typography role.
• Changed: Reference and Summary show an empty-state hint when no configuration is imported.
• Fixed: the Copy and Copy all class-name buttons now work on non-secure contexts (plain HTTP, e.g. *.local) via a clipboard fallback.

1.5.0

• Renamed to "YAOTW Stylo - Design System Importer". No change to functionality, settings, or output.

1.4.3

• Fixed: escaped integer outputs in the admin UI; switched to wp_is_writable() for the FSE writability check.
• Changed: Plugin Check / PHPCS compliance pass (documented nonce-routing and uninstall cleanup annotations).

1.4.2

• Security: all configuration-derived values (colors, font families, slugs) are now strictly sanitized before being output in CSS, preventing any markup breakout.
• Changed: front-end and Elementor CSS variable blocks are now output via wp_add_inline_style().
• Changed: removed load_plugin_textdomain() (handled automatically by WordPress).

1.4.1

• Fix: Elementor re-apply no longer destroys user-created Custom Colors and Custom Fonts (custom_colors / custom_typography are now left untouched).
• Fix: Elementor Global Variables injection now preserves user-created variables — only WPStylo-managed entries (prefix color- / font-) are rebuilt.
• Fix: FSE apply now merges color palette, font families, and font sizes by slug instead of overwriting, preserving user-added entries.
• Fix: Removed leftover debug statement in Elementor apply.

1.4.0

• Added: Custom color roles are now included in Elementor Global Variables and the front-end CSS variables block.
• Fixed: Missing --wps-color-secondary-background and --wps-color-secondary-text in the front-end CSS block.

1.3.0

• Added: CSS Classes reference table shown when only CSS Custom Properties target is active.
• Fixed: borderWidth = 0 now removes all border properties across Elementor, FSE, and utility CSS.
• Fixed: Button padding uses px values to prevent Elementor Kit Editor from silently resetting them.

1.2.0

• Redesigned admin interface with four sections and a CSS Classes reference table.

1.1.0

• Added Elementor Global Variables injection and utility CSS classes.

1.0.0

• First stable release.