Token Lookup

Design Token Lookup

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

Steps

• 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

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

• Return the token name and usage:

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

• 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

| Hardcoded | Token |

| ------------------- | -------------------------------------------------------- |

| #0078d4 | tokens.colorBrandBackground |

| #323130 | tokens.colorNeutralForeground1 |

| #ffffff | tokens.colorNeutralBackground1 |

| 4px border-radius | tokens.borderRadiusMedium |

| 8px padding | tokens.spacingHorizontalS or tokens.spacingVerticalS |

| 14px font-size | tokens.fontSizeBase300 |

| 600 font-weight | tokens.fontWeightSemibold |

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