Can't add custom colors to colorScheme?

[ktmn]

For example, there is no purple color. I'm trying to add it like this:

const theme = {
  siteVariables: {
    colorScheme: {
      purple: {
        foreground: '#A333C8',
      },
    },
  },
};

And using it with the Provider like this:

<Provider theme={mergeThemes(themes.teams, theme)}>...</Provider>

Now siteVariables.colorScheme.purple.foreground is indeed the specified color.

But when I go to use it with a segment:

<Segment color='purple'>...</Segment>

I don't get the purple color.

This should resolve the color:

https://github.com/microsoft/fluent-ui-react/blob/f8163447b1cb788aac1020ee7dfbb94e043b9332/packages/react/src/themes/teams/components/Segment/segmentStyles.ts#L8

and use it here:

https://github.com/microsoft/fluent-ui-react/blob/f8163447b1cb788aac1020ee7dfbb94e043b9332/packages/react/src/themes/teams/components/Segment/segmentStyles.ts#L19

but there's a limit here:

https://github.com/microsoft/fluent-ui-react/blob/f8163447b1cb788aac1020ee7dfbb94e043b9332/packages/react/src/themes/teams/colors.ts#L492-L503

which prevents using the custom named color. Why is that?

[mnajdova]

The color prop will most probably be dropped and I would not recommend you to use it. Apart from that, the colors which are in the palette and scheme should always be first approved by design, you cannot just go and add custom color. Please clarify with design what is the use-case and which color you should use.