Alert component

[eydun]

Hi,

I am using the alert-component with presetQuick.

Alert-danger has a red border, while alert-success is just plain. Is it not supposed to be green?

Thanks.

[sveltecult]

Hello,

Is it not supposed to be green?

Yes. Shadcn has no built-in support for successes and warnings. So is this library.

[eydun]

I am not sure I am understand the reply 😊 Is success-variant meant to be green or just plain in shadcn?

[sveltecult]

I am not sure I am understand the reply 😊

No worries :)

The success and warning variants will just output plain colors because they are not available in shadcn, (at least out-of-the-box). However, you can always add that yourself.

In your app.css file you can do something like this:

.uk-alert-success {
    border: 1px solid green;
    color: green;
}

.uk-alert-warning {
    border: 1px solid orange;
    color: orange;
}

Please note that dark mode is not supported using the above method. If you want dark mode support, you can read this in the docs https://www.franken-ui.dev/docs/theming#adding-new-colors so you can do something like this instead:

.uk-alert-success {
    @apply border border-success text-success;
}

.uk-alert-warning {
    @apply border border-warning text-warning;
}

If you prefer via hooks there is a solution for that too #7

Hope these help :)

[eydun]

Thanks, now I understand.

I am able to make it work by using "hook-misc".

Should it also be possible by using the "hook-success"-hook?

module.exports = {
    presets: [presetQuick({
            theme: "blue",
            overrides: {
                alert: {
                    "hook-success": {
                        color: '#32d296'
                    }
                }
            }
        }
    )],
...

[sveltecult]

Should it also be possible by using the "hook-success"-hook?

No. The "hook-success" is use by the "base". The presetQuick() uses shadcn hooks under the hood and successes and warnings are already removed. So, the only way to add it again is inside hook-misc.