color

Type: Function

How to get color?

JavaScript

import { color } from 'fds/system';

A styling utility which returns a color value based on the specified name. Note that this will return a string value, you will need to implement this in the desired CSS property.

If the passed colorName isn't available in the palette (anymore), this utility will log a warning to the console, stating which of the used names aren't defined in the palette.

Arguments

  1. colorName

    (Required)

    Type: String

    The name of the color to use in the component. FDS has implemented a color palette for all of the components implemented in the library.

    When building a custom component, try to use the existing colors as much as possible. Try to find an FDS component which is similar to the component you're building. When using colors this way, you can guarantee your component will use the correct color when the style of the library updates.

    The possible values can be found in the example.

    Related links

Returns

Type: String

The string value (HEX or RGBA) of the passed colorName.