Can we use design tokens with cloudscape component

[rishabh-jain-2101]

for ex - Using color design token like this

<Box color="info-600" variant="p">
   When you launch an instance, the instance class that
   you specify determines the hardware of the host
 </Box>

[jperals]

Hi,
You can check the API to see the values that are supported as color for the Box component: https://cloudscape.design/components/box/?tabId=api#property-color

You can use text-status-info to render the text in the same color used for info notifications. This will also work better in dark mode than using a token, because the value for text-status-info in dark mode is lighter, giving it better contrast against the dark background.

But if you want to use a token, you can just use a native HTML paragraph instead of the Box:

import { info600 } as awsui from '@cloudscape-design/design-tokens/index.js';

<p style={{ color: info600 }}>
  When you launch an instance, the instance class that
   you specify determines the hardware of the host
</p>

You can also use design tokens in your CSS. Check our documentation for more information.