Skip to main content

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 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.

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.
  • src/routes/platform.tsx
  • src/platform/dev/pages/IconTonePlaygroundPage.tsx
  • src/platform/wizards/utils/stepIcons.ts