🐛 Bug - Note styles override link button colours

[denkristoffer]

Forma 36 bug report

Summary

If you render a <Button as="a" /> in a Note, the Note variant styles are currently overriding the button's colour because of this line:

forma-36/packages/components/note/src/Note.styles.tsx

Lines 14 to 16 in 0e528be

	a: {
	color: tokens.blue700,
	},

Is there a way we can select something like a:not(our-button-component)?

[gui-santos]

Is this a bug or a design implementation issue? @domarku
my question is: do we want a link that looks like a button inside a note?

Also, just looking by the code, it seems that the intention here was to change the color of the link depending on the variant of the Note

I would say the easiest way to "fix" this is to change the styles in the Button component to enforce it to keep the white color when it has as="a"

[denkristoffer]

my question is: do we want a link that looks like a button inside a note?

I would say we do, we use it quite a few places where we want an obvious primary action inside a note, like these EAP signups. I don't think a TextLink is eye-catching enough for that.

[denkristoffer]

@gui-santos

I would say the easiest way to "fix" this is to change the styles in the Button component to enforce it to keep the white color when it has as="a"

How would you do this?

[denkristoffer]

@gui-santos Ping 🙂

[github-actions]

Marking issue as stale since there was no acitivty for 30 days

[denkristoffer]

This is still reproducible: https://f36.contentful.com/playground?code=N4Igxg9gJgpiBcICWBbADhATgFwATFwCEBXbbCAOwBpcA5CbGGgBQENNWBzDtAC1wC+uAGaYIKXAHIAApAqN5w4gBsA9MIDMANgC0kdJRjyAzpIDcAHQpWYADww5csYaxV4lFMNiSVcAQTQ0AAoASnwrXFxMGGxiTApcAB56RlxvbGUYAF4LEAAVXiRjXGMY7wpOXCLcNHY8CGFcVgSYdmUATyawMBhjYrQxblYUAEJcgD4IyKSSMl9WYxyQVlzcADd2JGbsJYHUdnaJgCUYAEdiXrxWbt7jRNVZ8gpJhOnEtg4hvnGAVVK03gwXAwFCsJDKJpQKDRPpNPoQMBbRhQXAAdyQ2H47QgcVwAGFKApsEoIddIMR5PcPlweLwXpF7ikYC8BCABEA

[github-actions]

Marking issue as stale since there was no activity for 30 days

[Lelith]

@denkristoffer should we close this? I do not think we can fix it without removing the general rule for links in the note.styles this is one of the big downsides of css-in-js imho. If we would have proper class names we could prevent the button style from beeing overwrittin by hooking on the generic button class :(

[github-actions]

Marking issue as stale since there was no activity for 30 days