- Docs
- utilities
UI Utilities
Helper classes and Blade directives to speed up your UI development.
Prerequisites
You must have a dedicated file name utilities.css
where to put all your utilities.
Variants
There's 4 variants, and each variant has its intents, you can customize each one as you want.
Solid variants
@utility ui-solid-gray {
--ui-solid-bg: var(--color-gray-100);
--ui-solid-text: var(--color-gray-700);
&:is(.dark *) {
--ui-solid-bg: var(--color-gray-900);
--ui-solid-text: var(--color-gray-300);
}
}
@utility ui-solid-success {
--ui-solid-bg: var(--color-success-600);
--ui-solid-text: var(--color-white);
&:is(.dark *) {
--ui-solid-bg: var(--color-success-500);
}
}
@utility ui-solid-warning {
--ui-solid-bg: var(--color-warning-600);
--ui-solid-text: var(--color-white);
&:is(.dark *) {
--ui-solid-bg: var(--color-warning-500);
}
}
@utility ui-solid-danger {
--ui-solid-bg: var(--color-danger-600);
--ui-solid-text: var(--color-white);
&:is(.dark *) {
--ui-solid-bg: var(--color-danger-500);
}
}
@utility ui-solid-neutral {
--ui-solid-bg: var(--color-gray-900);
--ui-solid-text: var(--color-white);
&:is(.dark *) {
--ui-solid-bg: var(--color-white);
--ui-solid-text: var(--color-gray-900);
}
}
@utility ui-solid-success {
--ui-solid-bg: var(--color-success-600);
--ui-solid-text: var(--color-white);
&:is(.dark *) {
--ui-solid-bg: var(--color-success-500);
}
}
@utility ui-solid-warning {
--ui-solid-bg: var(--color-warning-600);
--ui-solid-text: var(--color-white);
&:is(.dark *) {
--ui-solid-bg: var(--color-warning-500);
}
}
@utility ui-solid-danger {
--ui-solid-bg: var(--color-danger-600);
--ui-solid-text: var(--color-white);
&:is(.dark *) {
--ui-solid-bg: var(--color-danger-500);
}
}
@utility ui-solid-neutral {
--ui-solid-bg: var(--color-gray-900);
--ui-solid-text: var(--color-white);
&:is(.dark *) {
--ui-solid-bg: var(--color-white);
--ui-solid-text: var(--color-gray-900);
}
}
12%
50%
You're reaching out your limit
Outline variants
@utility ui-outline-success {
--ui-outline-border: var(--color-success-600);
--ui-outline-text: var(--color-success-600);
&:is(.dark *) {
--ui-outline-border: var(--color-secondary-500);
--ui-outline-text: var(--color-secondary-500);
}
}
@utility ui-outline-warning {
--ui-outline-border: var(--color-warning-600);
--ui-outline-text: var(--color-warning-600);
&:is(.dark *) {
--ui-outline-border: var(--color-warning-500);
--ui-outline-text: var(--color-warning-500);
}
}
@utility ui-outline-danger {
--ui-outline-border: var(--color-danger-600);
--ui-outline-text: var(--color-danger-600);
&:is(.dark *) {
--ui-outline-border: var(--color-danger-500);
--ui-outline-text: var(--color-danger-500);
}
}
12%
50%
You're reaching out your limit
Soft variants
@utility ui-soft-success {
--ui-soft-bg: --alpha(var(--color-success-100) / 40%);
--ui-soft-text: var(--color-success-600);
&:is(.dark *) {
--ui-soft-bg: --alpha(var(--color-success-900) / 30%);
--ui-soft-text: var(--color-success-300);
}
}
@utility ui-soft-warning {
--ui-soft-bg: --alpha(var(--color-warning-100) / 40%);
--ui-soft-text: var(--color-warning-600);
&:is(.dark *) {
--ui-soft-bg: --alpha(var(--color-warning-900) / 30%);
--ui-soft-text: var(--color-warning-300);
}
}
@utility ui-soft-danger {
--ui-soft-bg: --alpha(var(--color-danger-100) / 40%);
--ui-soft-text: var(--color-danger-600);
&:is(.dark *) {
--ui-soft-bg: --alpha(var(--color-danger-900) / 30%);
--ui-soft-text: var(--color-danger-300);
}
}
12%
50%
You're reaching out your limit
Subtle variants
@utility ui-subtle-success {
--ui-subtle-bg: --alpha(var(--color-success-100) / 40%);
--ui-subtle-text: var(--color-success-600);
--ui-subtle-border: var(--color-success-300);
&:is(.dark *) {
--ui-subtle-bg: --alpha(var(--color-success-900) / 30%);
--ui-subtle-text: var(--color-success-300);
--ui-subtle-border: --alpha(var(--color-success-900) / 60%);
}
}
@utility ui-subtle-warning {
--ui-subtle-bg: --alpha(var(--color-warning-100) / 40%);
--ui-subtle-text: var(--color-warning-600);
--ui-subtle-border: var(--color-warning-300);
&:is(.dark *) {
--ui-subtle-bg: --alpha(var(--color-warning-900) / 30%);
--ui-subtle-text: var(--color-warning-300);
--ui-subtle-border: --alpha(var(--color-warning-900) / 60%);
}
}
@utility ui-subtle-danger {
--ui-subtle-bg: --alpha(var(--color-danger-100) / 40%);
--ui-subtle-text: var(--color-danger-600);
--ui-subtle-border: var(--color-danger-300);
&:is(.dark *) {
--ui-subtle-bg: --alpha(var(--color-danger-900) / 30%);
--ui-subtle-text: var(--color-danger-300);
--ui-subtle-border: --alpha(var(--color-danger-900) / 60%);
}
}
12%
50%
You're reaching out your limit