feat(button): add disabled styles for danger variant

[Sembauke]

Checklist:

• I have read freeCodeCamp's contribution guidelines.
• My pull request has a descriptive title (not a vague title like Update index.md)

Closes #473

Disabled state:

	Screenshot	Color contrast
Light		https://webaim.org/resources/contrastchecker/?fcolor=A94442cc&bcolor=F2DEDE
Dark		https://webaim.org/resources/contrastchecker/?fcolor=F2DEDEcc&bcolor=A94442

[huyenltnguyen]

Thanks, Sem!

So beside adding styles to the disabled state, we will also need to lift the type restriction as currently the consumers would get a TS error if they write:

<Button variant="danger" disabled>
	Button text
</Button>

For context, we have the restriction in place because we weren't sure how disabled danger and info buttons would look like, and since there weren't any use cases of those, we decided to "turn off" this feature until we have an opportunity to revisit the styles.

---

Anyway, to lift the restriction, we would need to:

• Change this to disabled?: boolean

  • ui/src/button/types.ts

    Line 31 in 467819e

    disabled?: false;

• Remove this test case:

  • ui/src/button/button.test.tsx

    Lines 163 to 166 in 467819e

    	// @ts-expect-error - Button with `danger` variant cannot be disabled
    	<Button variant="danger" disabled>
    	Button text
    	</Button>;

[huyenltnguyen]

@ahmaxed I'm wondering what you think about this.

We currently only allow the primary button to have disabled state, and when disabled, the button has its opacity set to 80%. This styling approach works for the primary button because the button looks grayed out when disabled. Though it doesn't really work with danger style.

Opacity comparison

	100%	80%
Light
Dark

I don't recommend decreasing the opacity level further, as the current level is already pretty low for a11y.

So I'm wondering if you're okay with this approach (changing the color combination) and if you have any suggestions for the color combination.

[Sembauke]

Thanks for the detailed review @huyenltnguyen,

I am not sure if I got the requested colors correct, could you give it another look?

[huyenltnguyen]

Sorry, @Sembauke, I got myself confused also 😅

I believe the chosen color combination is red70 and red05. Those colors previously weren't swapped in dark theme, so it looked wrong. My suggestion was to address that, but I think I got wrong as well.

I'll wait for Ahmad to weight in. Though I'll explore some other alternative combinations, too, as the red70 + red05 combination doesn't have good contrast ratio 🫤 .