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:

fluent-ui-react/packages/react/src/themes/teams/components/Segment/segmentStyles.ts

Line 8 in f816344

const colors = getColorScheme(v.colorScheme, p.color)

and use it here:

fluent-ui-react/packages/react/src/themes/teams/components/Segment/segmentStyles.ts

Line 19 in f816344

...(p.color && { borderColor: colors.foreground }),

but there's a limit here:

fluent-ui-react/packages/react/src/themes/teams/colors.ts

Lines 492 to 503 in f816344

	export const availableColors = [
	'default',
	'black',
	'white',
	'brand',
	'grey',
	'red',
	'yellow',
	'green',
	'pink',
	'orange',
	]

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.