Token Lookup

Design Token Lookup

Find the correct @fluentui/react-theme design token for the hardcoded value $ARGUMENTS.

Steps

1. Identify the value category:

   • Hex color / rgb / named color → color tokens
   • px/rem spacing → spacing tokens
   • px/rem font size → font size tokens
   • px/rem border radius → border radius tokens
   • Font weight (400, 600, bold) → font weight tokens
   • Box shadow → shadow tokens
   • Border width → stroke width tokens
   • Duration (ms/s) → duration tokens

2. Search the theme source for matching values:

   packages/react-components/react-theme/library/src/
   

   Look in the relevant theme files (e.g., colorPalette*.ts, global/, alias/) to find tokens that map to the given value.

3. Return the token name and usage:

   // Instead of: color: '#0078d4'
   // Use:
   import { tokens } from '@fluentui/react-theme';
   color: tokens.colorBrandBackground;
   

4. If no exact match exists, suggest the closest semantic token and explain the difference. Refer to docs/architecture/design-tokens.md for token categories.

Common Mappings

These are approximate — always verify against the actual theme source.