=== Theme.json Design Manager ===
Contributors: sulaimandauda
Tags: theme-json, design-tokens, global-styles, css-variables, block-editor
Requires at least: 6.1
Tested up to: 6.9
Requires PHP: 7.4
Stable tag: 1.0.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

Manage design tokens — colors, spacing, typography, border radius, and shadows — that integrate with WordPress Global Styles via theme.json.

== Description ==

**Theme.json Design Manager** provides a user-friendly admin interface for managing design tokens that are automatically merged into your theme's `theme.json` Global Styles pipeline. No code editing required.

= Features =

* **Color Palette** — Define semantic color tokens with live contrast previews. Generates `--wp--preset--color--{slug}` CSS custom properties.
* **Spacing Scale** — Create spacing tokens with drag-to-reorder support. Generates `--wp--preset--spacing--{slug}` CSS custom properties.
* **Typography Scale** — Set font size tokens with optional fluid `clamp()` support. Generates `--wp--preset--font-size--{slug}` CSS custom properties.
* **Border Radius** — Define radius presets. Generates `--wp--custom--border-radius--{slug}` CSS custom properties.
* **Shadow Presets** — Create box-shadow tokens with live previews. Generates `--wp--preset--shadow--{slug}` CSS custom properties.
* **Hide Defaults** — Optionally hide theme/core default presets from the editor for a clean, curated design system. CSS custom properties are preserved.
* **Reserved Slug Protection** — Automatically detects and renames color slugs (e.g. "text", "link") that conflict with WordPress core CSS marker classes, preventing color override issues in the editor.
* **Diagnostics Tab** — View runtime data including stored tokens, merged palette by origin, generated CSS variables, preset classes, and settings at a glance.

= How It Works =

The plugin stores design tokens in the WordPress database and merges them into the theme's Global Styles via the `wp_theme_json_data_theme` filter. Tokens use WordPress's native slug-based merge system — matching slugs are replaced, new slugs are appended.

All changes are **fully reversible**. Deactivating the plugin restores original theme styles.

= Developer-Friendly =

* **Filter hooks** for extending tokens before merge (`gdtm_tokens_before_merge`)
* **Action hooks** after save (`gdtm_after_save`) and for custom tab content (`gdtm_after_tab_content`)
* **Admin tab filter** (`gdtm_admin_tabs`) for registering additional tabs

== Installation ==

1. Upload the `theme-json-design-manager` folder to `/wp-content/plugins/`.
2. Activate the plugin through the **Plugins** screen in WordPress.
3. Go to **Appearance → Design Manager** to start managing your design tokens.

== Frequently Asked Questions ==

= Does this plugin require a specific theme? =

No. It works with any block theme or classic theme that supports `theme.json`. WordPress 6.1 or later is required.

= Will my tokens override the theme's existing colors/spacing? =

Yes, tokens with matching slugs replace the theme's values. New slugs are appended alongside existing ones. This is WordPress's native slug-based merge behavior.

= What happens when I deactivate the plugin? =

All plugin-managed tokens are removed from the Global Styles pipeline and your theme's original `theme.json` values are restored. Your token data is preserved in the database so nothing is lost. When you delete (uninstall) the plugin, the data is removed for a clean uninstall.

= Can I use fluid typography? =

Yes. On the Typography tab, check the "Fluid" toggle and enter min/max values. WordPress will generate a responsive `clamp()` function automatically.

= How do I reference these tokens in CSS? =

Each token generates a CSS custom property. For example, a color with slug "primary" becomes `var(--wp--preset--color--primary)`. The CSS variable name is displayed next to each token row in the admin.

== Screenshots ==

1. Color palette management with live contrast previews.
2. Spacing scale with drag-to-reorder functionality.
3. Typography scale with fluid clamp() support.
4. Border radius presets with live corner previews.
5. Shadow presets with live box-shadow previews.

== Changelog ==

= 1.0.0 =
* Initial release.
* Color palette, spacing scale, typography scale, border radius, and shadow preset management.
* Live previews for colors, radius, and shadows.
* Fluid typography with clamp() support.
* Drag-to-reorder for spacing tokens.
* Settings tab with toggles to hide default presets from the editor.
* Reserved slug protection — auto-renames color slugs that collide with WordPress core marker classes.
* Diagnostics tab — runtime view of stored tokens, merged palette, CSS variables, and preset classes.
* Base color fallback — ensures `--wp--preset--color--base` stays defined when replacing the theme palette.
* Full theme.json integration via `wp_theme_json_data_theme` filter.
* Extensibility hooks for developers.

== Upgrade Notice ==

= 1.0.0 =
Initial release.