> ## Documentation Index
> Fetch the complete documentation index at: https://docs.encoreos.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Icon Tone Playground

> Developer tool for previewing how a status string resolves to an icon and semantic color tone via the platform's canonical variant system.

Icon Tone Playground is a developer-only tool at `/dev/icon-tone-playground` that accepts a status string input and immediately previews the resolved icon (`AppIcon`), badge variant, and semantic color tone the platform would render for that status.

## Overview

The playground uses `getCanonicalVariant` to map a status string to a `BadgeVariant`, then maps that variant to an `AppIconTone` via a local mapping function. The resolved icon key comes from `suggestIconKey` (backed by `resolveStepIcon` and `WIZARD_STEP_ICONS`). The preview renders the `AppIcon` in all supported sizes, weights, and variant combinations alongside the matching badge. Useful for QA-ing new status strings, verifying dark-mode and tenant theming, and onboarding contributors to the semantic-color contract.

## Who it's for

Requires permission `pf.wizards.admin`.

## Before you start

* This tool is intended for platform developers and design-system contributors.
* Use it to validate new status strings before adding them to production code.

## Steps

1. Navigate to `/dev/icon-tone-playground`.
2. Type a status string into the input field (e.g., `pending`, `completed`, `overdue`).
3. Observe the resolved badge variant, icon key, and tone in the preview panel.
4. Toggle size, weight, and variant controls to preview all rendering options.
5. Use the results to confirm or adjust the status string's semantic mapping.

## Key concepts

**Canonical variant** — the `BadgeVariant` (`success`, `warning`, `destructive`, `info`, etc.) resolved by `getCanonicalVariant` from `@/shared/lib/status-variants`.

**AppIcon tone** — the semantic color tone (`success`, `warning`, `destructive`, etc.) assigned to the icon based on its badge variant. Mirrors the `docs/development/SEMANTIC_COLORS.md` specification.

**`suggestIconKey`** — a utility in `@/platform/wizards/utils/auditStepIcons` that recommends an icon key for an unknown status string.

## Related

<Columns cols={2}>
  <Card title="Platform Foundation" icon="layer-group" href="/pf/overview">
    Platform Foundation overview.
  </Card>

  <Card title="Governance & parity" icon="scale-balanced" href="/governance/index" />
</Columns>

<Note>
  This page documents shipped product behavior. It is not medical, legal, or
  billing advice. Verify against your organization's policies and applicable
  regulations before using it for clinical, compliance, or billing decisions.
  Protected health information (PHI) shown in the product is governed by your
  tenant's access controls and is never exposed in this documentation.
</Note>

<Accordion title="Documentation sources">
  * src/routes/platform.tsx
  * src/platform/dev/pages/IconTonePlaygroundPage.tsx
  * src/platform/wizards/utils/stepIcons.ts
</Accordion>