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.