=== Fancy Framework ===
Contributors: fancyplugins
Tags: page builder, design tokens, variables, css variables, global styles
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
Stable tag: 1.3.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

Installs, edits and updates Fancy Framework's design tokens directly in Bricks' and Etch's own native storage.

== Description ==

Fancy Framework is a design token system: color, spacing, typography, shape
and more, generated at [fancyframework.com](https://fancyframework.com) and,
until now, pasted in by hand. This plugin installs those tokens into the page
builder's own native storage — Bricks' global variables and color palette, or
a «Fancy Framework» variable collection in Etch — so they work like any other
variable the builder already understands, with no plugin-owned storage of its
own for the tokens themselves.

A settings panel, built into the front end, the Bricks and Etch builders and a
wp-admin screen, lets you change the tokens afterwards without regenerating anything:
colors (with calculated tone scales and per-color transparencies), spacing and
sizing by role, typography (body text and each heading level), shape (border
radius, shadows) and a base CSS layer (keyboard focus ring, anchor scrolling,
styled lists, underlined links) that fixes what the builder leaves out. Every
change goes through a preview, a review of exactly what will change, and an
undo — including a visual history of every past apply, so going back to an
earlier look is one click away.

A built-in accessibility seal checks the framework's own variables against
WCAG 2.2 AA (text and focus contrast, text that grows with browser zoom,
button size on phones) and shows exactly what passes and what does not. Five
starting personalities (Editorial, Tech, Soft, Corporate, Playful) set type,
line height, weight, radius and shadow together, in one click.

Connect your own AI assistant to the site over MCP and it can read the design
system — the variables, their current values, what each one is for — and
propose changes for you to review, or, if you turn that on, apply them live
while you watch, with the same preview, undo and accessibility checks as the
panel.

**If the plugin is deactivated or deleted, the tokens it installed stay
exactly as they are.** Nothing on the live site depends on the plugin
remaining active — it edits the builder's own storage, it does not replace
it.

**No data leaves your site.** The plugin makes no external requests: it does
not call fancyframework.com, phone home, or send usage statistics. A JSON
generated on the web is imported by hand, by you, from a file. The optional
AI features run through MCP, which connects your own assistant to your own
site — there is no API key in the plugin and no service of ours in between.

The plugin's own screen has a «More from Fancy» tab listing the team's other
products. It is a plain list of links shipped inside the plugin — no remote
feed, no tracking, no affiliate parameters — and nothing in Fancy Framework
is locked behind any of them.

= What it does =

* Writes the framework's variables straight into Bricks' global variables and
  color palette, or into a «Fancy Framework» variable collection in Etch. On
  Bricks, a JSON generated at fancyframework.com can be imported from the
  plugin's screen; on Etch, the plugin takes over the «Fancy Framework»
  collection the web's CSS created, or starts from its own defaults.
* A settings panel (front-end admin bar, inside the Bricks or Etch builder,
  and a wp-admin screen) to change colors, spacing, typography, shape and
  accessibility settings afterwards, each change previewed before it is
  applied and reversible with one click.
* A base CSS layer — a safe keyboard focus ring, smooth anchor scrolling,
  text-wrap balance on headings, a fix for `hidden` attributes the builder
  overrides — in its own block of Bricks' custom CSS, or its own Etch
  stylesheet. It is written in `:where()`, at zero specificity, so a site's
  own CSS wins, with two exceptions: `[hidden]` always hides, and on Bricks
  with its cascade layer turned off, text and headings use plain element
  selectors so they still win over Bricks' own.
* Keeps its hands off what it did not create: your own variables, color
  palette entries, classes and custom CSS stay as they are. One exception,
  shown in the review before you apply: the old base CSS from
  fancyframework.com, if it is still there exactly as the web gave it, is
  removed, since the plugin's base CSS replaces it.
* Works with an open builder tab: applying from the panel, or saving the
  builder itself, never discards the other's changes.
* Five starting personalities (Editorial, Tech, Soft, Corporate, Playful) set
  type scale, line heights, weights, radius and shadow together, as one
  previewable, reversible change.
* An accessibility seal checks the framework's own variables against WCAG 2.2
  AA — text and focus contrast, text that grows with zoom, button size on
  phones — with a report you can copy or download.
* A visual history of every applied version, to load an earlier one back into
  the panel and apply it again.
* Your own AI assistant, connected over MCP, can read the design system and
  propose changes you review in the panel — or, only if you turn it on,
  apply them live while you watch, through the same preview and undo.

= Requirements =

* [Bricks](https://bricksbuilder.io/) or [Etch](https://etchwp.com/) — one
  of the two page builders this plugin writes into.
* A generated Fancy Framework JSON from fancyframework.com (or the plugin's
  own default recipe to start from scratch).

== Installation ==

1. Upload and activate the plugin.
2. Open its settings screen in wp-admin (or the panel in the front-end admin
   bar, or inside the Bricks or Etch builder). On Bricks, import the JSON you
   generated at fancyframework.com if you have one; otherwise, and on Etch,
   start from what the site already has or from the plugin's defaults.
3. Adjust colors, spacing, typography and shape from the panel; every change
   is previewed and can be undone.

== Frequently Asked Questions ==

= Does this replace Bricks' or Etch's own variables? =

No. It writes into them. Bricks' global variables and color palette, or a
«Fancy Framework» variable collection in Etch, are the only place your tokens
live — there is no separate plugin-owned copy to fall out of sync. The base
CSS goes in its own block of Bricks' custom CSS, or its own Etch stylesheet.

= What happens if I deactivate or delete the plugin? =

Nothing changes on the live site. The tokens the plugin wrote stay in the
builder's own storage exactly as they were. Only the plugin's own internal
options (its undo history, recipe and settings) are removed, and only on
uninstall, never on deactivation.

= Will it overwrite my own variables, classes or custom CSS? =

No. A variable you already have with one of the framework's names is never
overwritten without asking: the review lets you keep yours. Classes and
custom CSS outside the plugin's own block are left alone — except the old
base CSS from fancyframework.com, which is removed when it is still there
exactly as the web gave it (a changed copy stays, and the review warns about
it). The review shows all of this before anything is written.

= Does it work if I have the builder open in another tab? =

Yes. Applying from the panel while the builder is open, or saving the
builder while the panel has just applied, keeps both up to date without
either one silently discarding the other's changes.

= How does the AI connection work? Does it need an API key? =

No API key goes into the plugin. It exposes the design system to WordPress'
Abilities API (and, through a plugin such as MCP Adapter, to MCP), using your
own AI assistant and your own subscription. By default the AI can only
propose changes: it never writes to your site unless you turn on "Let your AI
apply changes" in the plugin's Settings screen, and even then every change
goes through the same preview, undo and accessibility checks the panel itself
uses, and never overwrites a value you set by hand in the builder.

== Screenshots ==

1. Colors, type, space and shape: the whole design system in one panel.
2. The panel on your own site, from the admin bar: brand colors with calculated tones and a live contrast badge.
3. Typography: text sizes from one ratio, body text and every heading level.
4. Before you apply: what is new, what you changed by hand (kept yours) and what is already right.
5. More settings, with the accessibility seal, personalities, history, base CSS, buttons and cards.
6. The accessibility report: contrast, keyboard focus, text size and touch targets against WCAG 2.2 AA.
7. Five personalities: type and shape in one click, colors and spacing untouched.
8. The wp-admin screen: what is written, what you changed by hand, and a preview built only with your variables.
9. The same panel inside the Bricks builder.

== Changelog ==

= 1.3.4 =
* Buttons: a scale under the text size (S, M, L). Leave it at ×1 or nudge it, for example to ×1.1, and
  the buttons' text becomes that size times the factor. It is stored in the same variable,
  `--btn-font-size`, so nothing else changes.
* Fixed: the «Follow the ratio» box had a large empty space, and the «Set by hand» label could break
  the row it belonged to.
* Fixed: when you changed in the panel a value your site had set by hand (such as the buttons' radius),
  the review offered to keep the old one by default, so applying seemed to lose your change. Values
  you set in the panel now start as «use the new value»; the ones you did not touch stay protected.

= 1.3.3 =
* «Follow the ratio» for the text, heading and space scales. Sizes you set by hand (for example the
  ones imported from the web generator) do not follow the ratio, so changing it seemed to do nothing.
  Turn the switch on and every size is worked out from the ratio again; turn it off in the same
  session and your own sizes come back. Each size set by hand now says so in its row.

= 1.3.2 =
* The «i» next to a setting now opens its explanation over the panel instead of pushing the settings
  down, and the panel keeps room for its scrollbar. Before, hovering an «i» near the bottom could make
  the scrollbar appear and disappear, and the panel jumped back and forth.
* On a page with the demo turned on, administrators keep the admin bar button: it opens the real panel,
  which saves, while the page's demo button opens the demo, which never does. Only one is open at a time.
* The logo in the panel's header is smaller, so Apply stands out.

= 1.3.1 =
* Fixed: on a site that had applied the framework once, choosing a personality only changed the
  radius: its heading and text line heights, weights, button and card corners and card shadow were
  dropped before the preview and before applying. The same happened to a scale step or a tone set by
  hand when none had been set before. The panel now keeps them.

= 1.3.0 =
* New for site builders: a demo mode, off by default. A site turns it on for the pages it chooses
  with the `fancy_framework/demo_mode` filter, and any element with the `data-fancy-framework-demo`
  attribute then opens the real panel for any visitor. They can preview, review, apply and undo on
  that page; nothing is saved, no request reaches the site's API, and reloading the page starts
  again. On those pages the admin bar button steps aside, so there is only one panel.

= 1.2.0 =
* The panel inside the Etch builder: a button in Etch's settings bar opens the same panel as on
  the front end and in the Bricks builder, with the preview on Etch's canvas. After you apply or
  undo, the open builder is brought up to date at once, so its style editor shows what is
  applied and saving from Etch keeps it.

= 1.1.1 =
* Fixed: with dark mode on, the page background (outside any section with its own background —
  gaps between sections, the footer, a template whose root has no background) stayed the builder's
  own light background while the text turned light too, making it unreadable. The page background
  now follows `--bg-body` as it always should have, in light mode and in dark.
* Fixed: the plugin's own stored version number could freeze after an in-place update that does not
  go through WordPress's activation hook (such as `wp plugin install --force`).

= 1.1.0 =
* Dark mode: only the colors by function change (page, surfaces, text, headings, borders, shadows,
  focus ring) — your brand color and every tone stay exactly as you set them, so a section you
  designed dark on purpose stays dark. Off by default; a switch of your own choosing turns it on,
  with automatic (follows the visitor's system) or manual modes.
* On Bricks, dark mode reads Bricks' own native dark-mode attribute instead of a separate one of
  ours, so it works together with Bricks' "Toggle - Mode" element and its Style Manager setting —
  no second switch, no two systems to keep in sync.
* The accessibility seal now checks dark mode too: every contrast check that dark mode changes is
  measured again against the dark values.
* New `--link-color` variable: the brand color used as text (links) now picks the tone that actually
  passes WCAG AA contrast, instead of the raw brand color, which failed with most brand colors.

= 1.0.0 =
* First public release: install Fancy Framework's variables in Bricks
  (importing the web's JSON) or Etch, edit colors, spacing, typography, shape
  and base CSS from a settings panel (front end, Bricks builder, wp-admin),
  preview, review and undo.
* Five starting personalities, an accessibility seal against WCAG 2.2 AA, and
  a visual history of every applied version.
* Your own AI assistant, connected over MCP, can read the design system and
  propose changes — or, only if you turn it on, apply them live.
