Icon Tone Playground is a developer-only tool atDocumentation Index
Fetch the complete documentation index at: https://docs.encoreos.io/llms.txt
Use this file to discover all available pages before exploring further.
/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 usesgetCanonicalVariant 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 permissionpf.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
- Navigate to
/dev/icon-tone-playground. - Type a status string into the input field (e.g.,
pending,completed,overdue). - Observe the resolved badge variant, icon key, and tone in the preview panel.
- Toggle size, weight, and variant controls to preview all rendering options.
- Use the results to confirm or adjust the status string’s semantic mapping.
Key concepts
Canonical variant — theBadgeVariant (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
Platform Foundation
Platform Foundation overview.
Governance & parity
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.
Documentation sources
Documentation sources
- src/routes/platform.tsx
- src/platform/dev/pages/IconTonePlaygroundPage.tsx
- src/platform/wizards/utils/stepIcons.ts