New Admin UI - Alert Component

adrians5j commented 1 week ago

Changes

This PR introduces the Alert component.

We have four types of alerts: info, success, warning, and danger. We also have two variants: strong and subtle. In total, visually, we ended up with 8 different variants (it's all per Figma specs ofc).

Screenshots below.

Extra Changes

1. Imported Tokens

I reimported the tokens from Figma. A couple of missing tokens were added.

2. Fixed HLS Colors

HSL colors were incorrectly generated in theme.scss file, because there were commas between the HSL numbers. For example:

Previously (Incorrect)	Now
`--bg-secondary-default: 170, 100%, 37.5%;`	`--bg-primary-muted: 14 94.7% 77.8%;`

I noticed this while trying to apply opacity on one of the colors (e.g. bg-primary/50).

This has now been resolved.

3. Button: Added `ghost-negative` Variant

Talked with Kreso about this and ultimately, we decided to intro a new button variant. This variant of a button is used on strong variants of all types of alerts.