Status colors

[morcxlla]

Why not use default status colors like info, warning, success, and error instead of destructive?

And use the styles in different components, such as buttons, chips... just like alert does (but with the colors directly in the theme)

[preetsuthar17]

Hey could you show me an example for this?

[morcxlla]

.dark {
  --hu-status-success: 142, 71%, 45%; /* green-500 */
  --hu-status-success-foreground: 0, 0%, 100%;
  --hu-status-warning: 45, 100%, 51%; /* yellow-400 */
  --hu-status-warning-foreground: 0, 0%, 0%;
  --hu-status-info: 210, 100%, 56%; /* blue-500 */
  --hu-status-info-foreground: 0, 0%, 100%;
  --hu-status-error: 0, 84%, 60%; /* red-500 */
  --hu-status-error-foreground: 0, 0%, 100%;
}

In the "alert" component, you do the same thing, except instead of having preset classes in the theme with the colors (like at the beginning of the code), you use colors from the tailwind itself: "bg-amber-50 text-amber-800 dark:border-amber-700 dark:bg-amber-950/30"
when you could simply use: "bg-warning/50 border-warning"...

Reference

  <Alert>This is a basic alert message.</Alert>
  <Alert variant="destructive">
    Something went wrong. Please try again.
  </Alert>
  <Alert variant="warning">This action cannot be undone.</Alert>
  <Alert variant="success">Your changes have been saved.</Alert>
  <Alert variant="info">New features are now available.</Alert>

Basically, I propose standardizing status colors:

• Info (blue?)
• Warning (yellow/orange?)
• Error (red) (instead of "destructive," or can we keep that nomenclature)
• Success (green?)

and using it in different components such as buttons, following the same logic as the alert component using CVA.

[preetsuthar17]

Understood, this can take a while to change in every component and currently I'm working on adding svelte support so it would be really helpful if you can contribute. once I'm done with svelte I'll take a long into it