Enhancement: Consolidate status colors across components

[macandcheese]

Description

Right now our "color" prop and what values it accepts is different across all components - it's used for styling an accent bar, and an icon if present / requested. The story around using that prop should be consistent where used. Note, it may change to a "status" or other name, but the resultant designs should not change

• Remove "red" as a color option for button, switch, link
• Input Message, Alert, Notice, Modal should all have the same 4 stateful colors (for now called by color name, potentially updated to intent-based nomenclature like info, success, warning, danger, in the future).
• Grey as option for the above (?)
• Update these instances to use the new "single" color css var.

cc @bstifle @asangma

Acceptance Criteria

Relevant Info

Which Component

Example Use Case

[julio8a]

Closing this, as it should be covered here #1144 re-open if needed.

[caripizza]

I'm re-opening this issue to collect feedback from the team. (For now I've left the issue title/description intact.)

For components that have a color property, the Calcite Design Team is currently considering the following change for v1:

component	values	v1.0.0 proposed values
colors for status
calcite-alert	"blue" \| "green" \| "red" \| "yellow"	"info" \| "success" \| "danger" \| "warning" \| "brand"
calcite-modal	"blue" \| "red"	"info" \| "danger"	"info" \| "success" \| "danger" \| "warning"
calcite-notice	"blue" \| "green" \| "red" \| "yellow"	"info" \| "success" \| "danger" \| "warning" \| "brand" \| "neutral"
colors for buttons
calcite-button	"blue" \| "inverse" \| "neutral" \| "red"	"brand" \| "inverse" \| "neutral" \| "danger"
calcite-chip	"blue" \| "green" \| "grey" \| "red" \| "yellow"	"brand" \| "success" \| "neutral" \| "danger" \| "warning" \| "info"
calcite-fab	"blue" \| "inverse" \| "neutral" \| "red"	"brand" \| "inverse" \| "neutral" \| "danger"
calcite-split-button	"blue" \| "inverse" \| "neutral" \| "red"	"brand" \| "inverse" \| "neutral" \| "danger"

@bstifle @julio8a @macandcheese please correct me if I'm wrong so we can fine-tune the changes needed.

[bstifle]

lookin good!!!!

[caripizza]

Self-assigning and adding to next sprint per conversation with @julio8a

[bstifle]

@caripizza looks like we need to add one to notice as 'neutral'

[caripizza]

What icon should an alert have when its new color is "brand"?

This is the current list: https://github.com/Esri/calcite-components/blob/master/src/components/calcite-alert/interfaces.ts#L3

Figma shows these 3 icons in use, is this correct?

  success: "checkCircle",
  warning: "exclamationMarkTriangle",
  danger: "exclamationMarkTriangle",
  info: "information",
  brand: "information"

Notice pulls from this same list, so we also need an icon for the "neutral" color. Should we use "lightbulb" like Figma shows?

[julio8a]

If an icon is required, the info icon would be more fitting to a general use case.

[julio8a]

Moving this one to the next sprint will be a big change.

CC'ing @jcfranco

[macandcheese]

We should also make sure to audit calcite-input-message, right now its using nomenclature tied to input validation state, but we could make that consistent with the above proposed values.

[driskull]

@macandcheese should the design team look at this issue and make sure the tokens sync up with the proposed values?

[macandcheese]

Yeah that would be great, this comment is a good start but should be verified: https://github.com/Esri/calcite-components/issues/1220#issuecomment-890162861

[geospatialem]

Yeah that would be great, this comment is a good start but should be verified: #1220 (comment)

cc: @ashetland, @SkyeSeitz

[ashetland]

Still need to verify that list. Are we also saying we'll rename the prop from color to status or is that still an open question?

[macandcheese]

I think we've wanted to move away from color to an intent based term, status, kind, etc., are common ones I've seen. cc @alisonailea as I know we've discussed this as well.

[ashetland]

Okay we'll make sure to look at that as well when we verify the list. I like status, but we'll double check that it makes sense in each context. If not, kind also seems like a good bet.

[ashetland]

@geospatialem Just confirming that this is slated for v1.0, yes? If so, we'll prioritize verification.

[geospatialem]

@geospatialem Just confirming that this is slated for v1.0, yes? If so, we'll prioritize verification.

@ashetland Great question, yes, this is slotted for next month's release.

[SkyeSeitz]

Awesome. Aaron and I went over the proposed values. status as a new prop name to replace color is preferable in our opinion and we can have these changes updated in Figma this week including adding the neutral status to calcite-notice.

[ashetland]

After a bit more discussion we've decided to go with renaming color to kind to avoid confusion with the status prop on inputs. Also, we can postpone adding a neutral variant to Notice at this time.

We do have a small mismatch on the blue starting point, though. Some components define blue=ui-brand and others define blue=ui-info. In these cases, are we suggesting to add the missing variants so they all have a brand and info?

[ashetland]

After yet more discussing, we need to add variants for info or brand when one of them is missing.

[geospatialem]

Closing in favor of the #5947 epic