=== YAOTW Stylo - Design System Importer ===
Contributors: yaotw
Tags: design system, design tokens, full site editing, theme.json, elementor
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
Stable tag: 2.2.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

Import a full design system (colors, typography, buttons, effects) into Elementor, Full Site Editing, or CSS variables. No code needed.

== Description ==

**Bring one consistent design system to your whole WordPress site, whether you build with Elementor, the block editor (Full Site Editing), or plain CSS.**

YAOTW Stylo turns a design system (colors, typography, buttons, spacing, effects) into real WordPress settings. You design your system visually in the free **WPStylo app** ([app.wpstylo.dev](https://app.wpstylo.dev)), export a single JSON file, then import it here and apply it to your site in one click.

No more copying hex codes by hand, no more mismatched headings between your page builder and your block templates. Define your tokens once, apply them everywhere, and keep every page on brand.

Design your system at [app.wpstylo.dev](https://app.wpstylo.dev). Learn more at [wpstylo.dev](https://wpstylo.dev).

= Why designers and developers use it =

* **One source of truth.** Your colors, fonts and button styles come from a single JSON file, so your whole site stays consistent.
* **Works with your stack.** Apply the same design system to Elementor, to block themes (FSE / theme.json), or to any theme through CSS custom properties.
* **No code required.** Design visually, import, apply. The plugin writes the settings for you.
* **Non-destructive by default.** Your existing content is preserved, backups are created before risky operations, and everything can be restored or removed.
* **Lightweight.** Styles are delivered efficiently and the admin stays fast; nothing heavy is loaded on your front-end unless a feature needs it.
* **Free.** The plugin and the WPStylo app are free to use.

= Apply your design system to three targets =

**1. CSS Custom Properties (works on any theme)**
Injects `--wps-*` CSS custom properties and ready-to-use utility classes (for headings, body text and buttons) into your site. Use them anywhere in your own CSS or templates. Perfect when you are not on Elementor or a block theme.

**2. Elementor**
Applies your tokens to Elementor's global Kit (Site Settings): colors, typography and button styles, including text case, button box-shadow and per-corner border radius. Custom color and typography roles you created in the app are applied too. Using Elementor's newer Atomic design (v4+)? One extra click injects matching variables and utility CSS classes, without overwriting your existing global variables.

**3. Full Site Editing (block themes)**
Applies your tokens to a block theme, the recommended way being **Apply (no theme file changes)**: your palette, fonts, font sizes and element styles are handed to WordPress on every page load, and your theme's `theme.json` file is never modified. Because nothing is written into the theme, **a theme update cannot wipe your configuration**. Pick whether to keep the theme's own palette and fonts alongside yours (*Preserve*) or to expose only yours (*Replace*).

If you would rather write the tokens into the file itself — for example to keep them without the plugin — the advanced **Write to theme.json** actions are still available:

* **Write** (non-destructive): merges your palette and fonts alongside the theme's existing ones.
* **Overwrite**: replaces the palette, font families and font sizes with yours only, for a clean slate (other theme.json settings such as spacing and layout are left untouched).

Either way, a backup is created first and can be restored in one click. On block themes you also get five ready-made button block styles (**Stylo Primary, Secondary, Outline, Ghost, Link**) selectable directly from the editor.

= Scroll appearance effects =

Give your pages a polished feel with built-in scroll animations (**Fade Up, Fade In, Slide Left, Slide Right, Zoom In**) that reveal sections as visitors scroll. They run on the Elementor and FSE targets, respect the "reduced motion" accessibility preference, and never hide your content when scripting is off. Enable or disable them any time, no re-import needed.

= What gets imported =

Colors (semantic roles, including your own custom roles), fluid typography (responsive `clamp()` sizing, including your own custom typography roles), text case (uppercase, lowercase, capitalize) for headings, body text and buttons, button variants with hover and focus states, button box-shadow, border radius — uniform or per corner — transitions, and scroll appearance effects.

= Built for real workflows =

* Re-import an updated design system any time; applying again keeps your custom content intact.
* Export the currently imported configuration as a JSON backup you can re-import later.
* Clear, tabbed admin: Import & Apply, Reference (copy-ready classes), Summary, Tools, and an in-plugin Guide.

Design your system at [app.wpstylo.dev](https://app.wpstylo.dev). Full documentation and tutorials at [wpstylo.dev](https://wpstylo.dev).

== Installation ==

1. Install the plugin from your WordPress dashboard (Plugins > Add New > search for "YAOTW Stylo"), or upload the plugin zip via Plugins > Add New > Upload Plugin.
2. Activate the plugin through the Plugins menu.
3. Open **YAOTW Stylo** in your admin menu.
4. Design your system at [app.wpstylo.dev](https://app.wpstylo.dev) and export a JSON configuration (or paste one you already have).
5. On the **Import & Apply** tab, upload or paste your JSON, click **Import configuration**, then apply it to the target you use (CSS Custom Properties, Elementor, or Full Site Editing).

Tip: always try the plugin on a staging or development site first, and back up your files and database before applying on production.

== Frequently Asked Questions ==

= Do I need the WPStylo app? =
Yes. You design your system visually in the free WPStylo app at [app.wpstylo.dev](https://app.wpstylo.dev) and export a JSON file. This plugin imports that file and applies it to your WordPress site.

= Is it free? =
Yes, both the plugin and the WPStylo app are free to use.

= Does it work with Elementor? =
Yes. It applies your colors, typography and button styles to Elementor's global Kit. If you use Elementor's Atomic design (v4+), you can additionally inject matching CSS variables and utility classes.

= Does it work with block themes and Full Site Editing? =
Yes. The recommended action, "Apply (no theme file changes)", applies your tokens without ever modifying your theme's `theme.json` file. You can also write them into the file with the advanced "Write" (non-destructive) and "Overwrite" (clean slate) modes. Either way, you get five button block styles you can pick in the editor.

= My design system disappeared after a theme update. What do I do? =
Open the plugin page: if your tokens were written into `theme.json` and a theme update replaced that file, WPStylo detects it and tells you, with the theme version it was updated from. You then have two options, both offered directly in that message: write your tokens again, or switch to "Apply (no theme file changes)", which applies them without touching your theme files so no future theme update can remove them. The second option is the durable fix. You can dismiss the message; it comes back only if the situation changes again.

= What happens to my design system when my theme updates? =
If you used "Apply (no theme file changes)", nothing: your tokens are applied at runtime and live in the plugin, not in the theme, so a theme update cannot touch them. If you wrote them into `theme.json`, a theme update replaces that file — as WordPress does when it reinstalls a bundled theme — and your tokens there are lost. You can then restore your `theme.json` backup from the Tools tab, apply again, or switch to the runtime option.

= I injected the Elementor variables but I do not see them. Why? =
"Inject Variables & CSS Classes" does two separate things: it injects utility CSS classes, which always work, and it writes Global Variables into your Elementor Kit, which Elementor itself renders under two of its own conditions. First, Elementor only loads its Global Variables module when the "Atomic Widgets" experiment is on (Elementor > Settings > Features). It is on by default on sites whose first Elementor install was version 4.0 or later, and off by default on sites upgraded from a 3.x. Second, Elementor renders variables of type "size" only with Elementor Pro, so the font size variables stay unused on a free install while colour and font family variables work normally. WPStylo detects both and tells you which one applies on the Elementor card, in the result message and in the Summary tab. Nothing is blocked and nothing needs re-importing: the variables are already written and start being used the moment the condition is met. If neither applies to your site, use the utility CSS classes instead — they carry the same values and depend on neither.

= Do I need Elementor Pro? =
No. Everything WPStylo does works with the free Elementor, with one exception that belongs to Elementor rather than to this plugin: Elementor does not render global variables of type "size" unless Pro is active, so the injected font size variables stay unused. Your colours, fonts, button styles, the utility CSS classes and every other target are unaffected.

= I don't use Elementor or a block theme. Can I still use it? =
Yes. The CSS Custom Properties target works on any theme: it injects `--wps-*` variables and utility classes you can use in your own CSS or templates.

= Will it overwrite my existing settings? =
It depends on the target and the action. Applying to Elementor updates the global Kit's system colors, typography and button; your custom colors and custom fonts are preserved. On FSE, "Write" merges alongside your theme's palette and fonts, while "Overwrite" replaces them with yours (a backup is always created first). You are always in control of which action you run.

= Can I undo the changes? =
Yes. You can turn the runtime application off in one click, restore the previous `theme.json` from the automatic backup, deactivate the injected CSS, or delete the imported configuration entirely from the Tools tab. That backup is the state of the file just before your last apply, not your theme's original file — the Tools tab shows its date and content so you know what you are restoring, and the file it replaces is itself saved first, so a restore can be undone. Note that natively written values (the Elementor Kit and a written theme.json) remain until you restore or change them, while CSS variables, injected classes, block styles, scroll effects and the runtime Full Site Editing application are removed when you deactivate the plugin.

= Will it slow down my website? =
No. Styles are delivered efficiently (inline where appropriate, cached where possible), and front-end scripts are only loaded when a feature such as scroll effects actually needs them. The admin interface is lightweight and scoped so it does not affect the rest of wp-admin.

= What are the scroll appearance effects? =
Optional animations (Fade Up, Fade In, Slide Left, Slide Right, Zoom In) that reveal page sections as visitors scroll. They apply to the Elementor and FSE targets, honor the reduced-motion accessibility setting, and never hide content when JavaScript is unavailable.

= How do I stop one element from animating? =
Add the CSS class `wps-no-reveal` to it: in Elementor from the container's Advanced settings, and in the block editor from the block's Advanced settings. The exclusion covers that element and everything inside it, so nothing within it is animated either. It is the right tool for a very short element at the very bottom of a page, a one-line footer for instance. To switch the effect off everywhere instead, use the "Scroll Appearance Effects" card on the Import & Apply tab.

= Where can I get help? =
Documentation, tutorials and updates are available at [wpstylo.dev](https://wpstylo.dev). You can also use the support forum on WordPress.org.

== Screenshots ==

1. Import & Apply: import your JSON configuration and apply it to Elementor, Full Site Editing, or CSS custom properties.
2. Reference: copy-ready CSS class names for typography and buttons, plus the FSE button block styles.
3. Summary: a clear overview of the imported design system (colors, typography, buttons, element tokens).
4. Tools: export your configuration, restore theme.json from backup, or delete the configuration.
5. Guide: built-in documentation for every target.

== Changelog ==

= 2.2.0 =
* Fixed: An element at the very bottom of a page never appeared. A short footer, or anything sitting in the last few pixels of a page, stayed invisible however far you scrolled, because there was no scrolling left to bring it into view. Everything is now revealed by the time you reach the end of the page.
* Fixed: On a page too short to scroll, anything below the first screen stayed hidden for the same reason. It is now visible as soon as the page loads.
* New: You can exclude one element from the effect by giving it the CSS class `wps-no-reveal`. The exclusion covers that element and everything inside it.
* Changed: Sections now start animating slightly earlier as they come into view.

= 2.1.1 =
* Fixed: Very tall sections never appeared. If a section was taller than roughly ten screens, the scroll appearance effect kept it invisible for good, whatever you scrolled. It now appears normally, at any height.
* Fixed: Sections just below the top of the page no longer wait for your first scroll to appear, which used to leave a large blank area under the first screen when the page loaded.
* Fixed: A section nested inside another one could stay invisible until its parent appeared. Each section now animates on its own.
* Improved: On sections with many elements, the cascade no longer stretches out. The last element now appears within one second instead of up to six.
* Improved: The effect is lighter on your visitors' devices, especially on long pages with many animated sections.

= 2.1.0 =
* New: "Apply (no theme file changes)" for block themes. Your colors, fonts and button styles are applied without ever modifying your theme's theme.json, so a theme update can no longer wipe your configuration. Choose whether to keep your theme's own palette and fonts alongside yours, or to show only yours.
* New: WPStylo now tells you when a theme update has wiped the settings it had written into your theme, and offers to apply them again or to switch to the safer option.
* New: Text case (UPPERCASE, lowercase, Capitalized) is now applied on Elementor, on block themes and in the CSS classes.
* New: Buttons can have a different radius on each corner. Buttons using a single radius are unaffected.
* New: Your own typography roles now reach Elementor too: global fonts in Site Settings, a ready-to-use CSS class, and a line in the Reference tab.
* Improved: The Full Site Editing card leads with the safer option; "Write to theme.json" and "Overwrite" are still there, grouped as advanced.
* Improved: "Inject Variables & CSS Classes" now tells you when Elementor will not display what it wrote (its "Atomic Widgets" feature switched off, or font size variables without Elementor Pro).
* Fixed: The theme.json backup is now described honestly. It is the state of the file just before your last apply, and Tools shows its date, theme version, and whether it already contained your configuration.
* Fixed: Restoring that backup can now be undone, and a damaged backup is refused instead of being restored over a working file.
* Fixed: Deleting your configuration no longer leaves stale "Last applied" dates behind, and uninstalling cleans up the backup files WPStylo created next to your theme.json.
* Fixed: Multi-word typography role names now produce a clean, valid name everywhere. The eleven standard roles are untouched.
* Fixed: A color WPStylo cannot read is left out of theme.json instead of being written blank, and a malformed value in an imported file no longer produces PHP warnings on every page load.
* Compatibility: tested and confirmed working with WordPress 7.1.

= 2.0.0 =
* New: Scroll appearance effects (Fade Up, Fade In, Slide Left, Slide Right, Zoom In) for the Elementor and FSE targets, with a runtime on/off switch and reduced-motion support.
* New: Full Site Editing "Overwrite theme.json" mode, which replaces the palette, font families and font sizes with yours only (alongside the existing non-destructive "Write" mode). A backup is always created first.
* New: Redesigned plugin admin (brand header, clearer target cards with guidance, restyled Guide and Tools).
* Improved: Full Site Editing now maps the Text and Background colors automatically to your design system roles.
* Improved: Summary now shows transitions and scroll appearance effect tokens, with an accurate element-tokens count.
* Improved: clearer descriptions and warnings across the Import & Apply, Reference and Guide tabs.

= 1.9.0 =
* New: Full Site Editing button block styles (Stylo Primary, Secondary, Outline, Ghost, Link) selectable from the editor.

For the complete version history, see changelog.txt in the plugin files.

== Upgrade Notice ==

= 2.2.0 =
Fixes elements at the very bottom of a page never appearing with the scroll appearance effects, including on pages too short to scroll. Adds a `wps-no-reveal` class to exclude an element from the effect. Recommended if you use these effects.

= 2.1.1 =
Fixes the scroll appearance effects: very tall sections never appeared at all, and sections just below the first screen waited for your first scroll. Recommended if you use these effects.

= 2.1.0 =
Adds "Apply (no theme file changes)" for block themes: your design system is applied without ever modifying your theme's theme.json, so a theme update can no longer wipe it. Also adds text case, per-corner button radius, and your own typography roles on Elementor.

= 2.0.0 =
Adds scroll appearance effects, a new FSE "Overwrite theme.json" mode, automatic Text/Background color mapping, and a redesigned admin. Back up your site before applying on production.