Inherit link color in components with feedback/validation states

[mbohal]

When we use the <TextLink> component inside an <Alert> element, it uses the context color (from <Alert>) instead of the default link color (from <TextLink>).

However in other contexts this is not the case for other elements:

We need to somehow unify this behavior across all our components.

[mbohal]

@davidurban proposes that the local context color should be used everywhere where the context element can changes color to provide some information to the user.

[adamkudrna]

Thank you for your proposal. However, we need to discuss it a bit more deeply before we can dispatch it to engineering.

1. We need to clarify what means "everywhere [where the context element can changes color]". There are two relevant situations:
   1. components that use Feedback Colors (but there components with both light (Alert) and dark (Badge) background, what then?),
   2. components that use Validation State Colors (but there is also the default state, see the input on the left).
2. We need to decide if links in the default validation state should be gray too — that's a BC.
3. RUI only: should the color inheritance feature be optional globally / per component / not at all?

[davidurban]

1. Agree with both.
2. They should not be gray, but default TextLink colour (theme.colors.primary).
3. No opinion.

I also think we will need to eventually start supporting feedback colours on most components (like Paper, Modal, Tabs…) because of needs of Generated UIs. There a node (represented by Paper, or Tap) can become invalid and we will need to visually indicate it. Having ability to use Feedback Colours would greatly improve DX and consistency. In such cases, container links should also inherit the colour.

[mbohal]

we will need to eventually start supporting feedback colours on most components (like Paper, Modal, Tabs…)

Generally I think the same.

[adamkudrna]

Component	Action Colors	Feedback Colors	Neutral Colors	Validation Colors	Link Color Inheritance
Alert	—	✅	✅	—	✅
Badge	—	✅	✅	—	—
Button	✅	✅	✅	—	—
ButtonGroup	—	—	—	—	—
Card	—	✅	✅	—	🎯
CheckboxField	—	—	—	✅	🎯
FileInputField	—	—	—	✅	🎯
FormLayout	—	—	—	—	—
Grid	—	—	—	—	—
InputGroup	—	—	—	—	—
Modal	—	#468	—	—	#468
Paper	—	🔮	—	—	—
Popover	—	—	—	—	—
Radio	—	—	—	✅	🎯
ScrollView	—	—	—	—	—
SelectField	—	—	—	✅	🎯
Table	—	—	—	—	—
Tabs	—	🔮	—	—	—
Text	—	—	—	—	—
TextArea	—	—	—	✅	🎯
TextField	—	—	—	✅	🎯
TextLink	—	—	—	—	—
Toggle	—	—	—	✅	🎯
Toolbar	—	—	—	—	—

🎯 — to be done in this issue
🔮 — to be done in the future