Fluentui: More semantic palette entry names

[be5invis]

I tried to make a dark theme. Components works but the palette data looks like this:

loadTheme({
  palette: {
    themePrimary: '#099ae7',
    themeLighterAlt: '#000609',
    themeLighter: '#011925',
    themeLight: '#032e46',
    themeTertiary: '#065c8b',
    themeSecondary: '#0888cc',
    themeDarkAlt: '#20a3ea',
    themeDark: '#40b1ee',
    themeDarker: '#70c5f2',
    neutralLighterAlt: '#3c3c3c',
    neutralLighter: '#444444',
    neutralLight: '#515151',
    neutralQuaternaryAlt: '#595959',
    neutralQuaternary: '#5f5f5f',
    neutralTertiaryAlt: '#7a7a7a',
    neutralTertiary: '#f5f5f5',
    neutralSecondary: '#f6f6f6',
    neutralPrimaryAlt: '#f8f8f8',
    neutralPrimary: '#efefef',
    neutralDark: '#fbfbfb',
    black: '#fdfdfd',
    white: '#333333',
  }
});

"dark" and "light" are swapped 😕.
Shouldn't they be renamed as "foreground" (for original "dark") and "background" (for original "light")?

[Jahnp]

Hey @be5invis , these are the "palette" colors. They're not intended to be semantic--think of them like swatches that just represent raw color values. There are semantic "color slots" for more specific contexts (e.g. bodyBackground, inputBorder, etc) that derive their values from these base palette colors.

That said, it may make sense to revisit these palette names as we continue to flesh out our theming story. In the Fluent theme, we are adding new "palette" values whose names make it more clear that they're static swatches. In time we may want to incorporate something like this into the default palette, but we'd need to discuss with @phkuo .

cc @mikewheaton @phkuo

[phkuo]

There are color constants, like gray120 is always (for example) #121212. The new Fluent stuff has these. This isn't that useful to us in Fabric since everything in Fabric needs to be variable, not constant.

In the theme, there are non-semantic color variables, aka palette slots. These have names like themeSecondary, neutralTertiary, and white. These each hold a color, but you don't know what the color is. (Even white is #1f1f1f in our default dark/inverted themes.) The variable/slot names here are describe the relationship between other slots. neutralLighter has less contrast against white than neutralPrimary does.

Semantic color variables, aka semantic slots, are _prescriptive_. They describe how the slots should be used. It's immediately obvious what buttonBackground and buttonBackgroundHovered are meant to be used.

We're still in the process of shifting over to use semantic slots, which will help with the confusion. Unfortunately, as you've noticed, the palette slot naming gets confusing (and backwards) in dark themes. especially evidenced by the poorly named white and black slots. Our policy is not to rename theme slots, since we insure back compatibility. We can deprecate them, but palette slots are widely relied on so unfortunately this is just an issue we have to live with.