| Do | Use tokens or token(name) when integrating theme colors into SVG attributes, canvas drawing, chart options, or other non-CSS configuration objects inside React components. |
| Do | Use resolveXDSThemeTokens(theme, {mode}) for the same token resolution outside React hooks. |
| Do | Prefer CSS variables or StyleX tokens for ordinary component styling; use this hook only when JavaScript needs token values. |
| Do | Use data visualization tokens such as --color-data-categorical-blue for chart series instead of arbitrary UI colors. |
| Don't | Hardcode light/dark colors in data visualizations: resolve them through the current theme instead. |
| Don't | Assume the hook reflects every CSS cascade override. It resolves tokens for the current Theme mode; local media-surface overrides and arbitrary external CSS may not be represented. |