- Components
- theme
- buttons
Introduction
JK-ui is a TailwindCSS v4 + React Aria Components
Prerequisites
You must have a dedicated file name
button-styles.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
both
light
dark
@utility btn-solid-primary {
--btn-solid-top-shadow: var(--color-primary-500);
--btn-solid-bottom-shadow: var(--color-primary-700);
--btn-solid-top-shadow-hover: var(--color-primary-600);
--btn-solid-bottom-shadow-hover: var(--color-primary-800);
--btn-solid-color: var(--color-primary-600);
--btn-solid-color-hover: var(--color-primary-700);
--btn-solid-color-press: var(--color-primary-800);
}
@utility btn-solid-secondary {
--btn-solid-top-shadow: var(--color-secondary-500);
--btn-solid-bottom-shadow: var(--color-secondary-700);
--btn-solid-top-shadow-hover: var(--color-secondary-600);
--btn-solid-bottom-shadow-hover: var(--color-secondary-800);
--btn-solid-color: var(--color-secondary-600);
--btn-solid-color-hover: var(--color-secondary-700);
--btn-solid-color-press: var(--color-secondary-800);
}
@utility btn-solid-accent {
--btn-solid-top-shadow: var(--color-accent-500);
--btn-solid-bottom-shadow: var(--color-accent-700);
--btn-solid-top-shadow-hover: var(--color-accent-600);
--btn-solid-bottom-shadow-hover: var(--color-accent-800);
--btn-solid-color: var(--color-accent-600);
--btn-solid-color-hover: var(--color-accent-700);
--btn-solid-color-press: var(--color-accent-800);
}
@utility btn-solid-danger {
--btn-solid-top-shadow: var(--color-danger-500);
--btn-solid-bottom-shadow: var(--color-danger-700);
--btn-solid-top-shadow-hover: var(--color-danger-600);
--btn-solid-bottom-shadow-hover: var(--color-danger-800);
--btn-solid-color: var(--color-danger-600);
--btn-solid-color-hover: var(--color-danger-700);
--btn-solid-color-press: var(--color-danger-800);
}
@utility btn-solid-warning {
--btn-solid-top-shadow: var(--color-warning-500);
--btn-solid-bottom-shadow: var(--color-warning-700);
--btn-solid-top-shadow-hover: var(--color-warning-600);
--btn-solid-bottom-shadow-hover: var(--color-warning-800);
--btn-solid-color: var(--color-warning-600);
--btn-solid-color-hover: var(--color-warning-700);
--btn-solid-color-press: var(--color-warning-800);
}
@utility btn-solid-info {
--btn-solid-top-shadow: var(--color-info-500);
--btn-solid-bottom-shadow: var(--color-info-700);
--btn-solid-top-shadow-hover: var(--color-info-600);
--btn-solid-bottom-shadow-hover: var(--color-info-800);
--btn-solid-color: var(--color-info-600);
--btn-solid-color-hover: var(--color-info-700);
--btn-solid-color-press: var(--color-info-800);
}
@utility btn-solid-success {
--btn-solid-top-shadow: var(--color-success-500);
--btn-solid-bottom-shadow: var(--color-success-700);
--btn-solid-top-shadow-hover: var(--color-success-600);
--btn-solid-bottom-shadow-hover: var(--color-success-800);
--btn-solid-color: var(--color-success-600);
--btn-solid-color-hover: var(--color-success-700);
--btn-solid-color-press: var(--color-success-800);
}
@utility btn-solid-neutral {
--btn-solid-top-shadow: var(--color-gray-800);
--btn-solid-bottom-shadow: var(--color-gray-700);
--btn-solid-top-shadow-hover: var(--color-gray-800);
--btn-solid-bottom-shadow-hover: var(--color-gray-900);
--btn-solid-color: var(--color-gray-900);
--btn-solid-color-hover: var(--color-gray-950);
--btn-solid-color-press: var(--color-gray-900);
&:is(.dark *) {
--btn-solid-top-shadow: var(--color-gray-200);
--btn-solid-bottom-shadow: var(--color-gray-100);
--btn-solid-top-shadow-hover: var(--color-gray-300);
--btn-solid-bottom-shadow-hover: var(--color-gray-200);
--btn-solid-color: var(--color-gray-100);
--btn-solid-color-hover: var(--color-white);
--btn-solid-color-press: var(--color-gray-200);
}
}Outline variants
both
light
dark
@utility btn-outline-primary {
--btn-outline-bg: var(--color-primary-50);
--btn-outline-color: var(--color-primary-200);
--btn-outline-text-color: var(--color-primary-800);
--btn-outline-bg-hover: --alpha(var(--color-primary-100) / 60%);
&:is(.dark *) {
--btn-outline-color: --alpha(var(--color-primary-500) / 30%);
--btn-outline-text-color: var(--color-primary-300);
--btn-outline-bg: --alpha(var(--color-primary-500) / 5%);
--btn-outline-bg-hover: --alpha(var(--color-primary-500) / 10%);
}
}
@utility btn-outline-success {
--btn-outline-bg: var(--color-success-50);
--btn-outline-color: var(--color-success-200);
--btn-outline-text-color: var(--color-success-800);
--btn-outline-bg-hover: --alpha(var(--color-success-100) / 60%);
&:is(.dark *) {
--btn-outline-color: --alpha(var(--color-success-500) / 30%);
--btn-outline-text-color: var(--color-success-300);
--btn-outline-bg: --alpha(var(--color-success-500) / 5%);
--btn-outline-bg-hover: --alpha(var(--color-success-500) / 10%);
}
}
@utility btn-outline-warning {
--btn-outline-bg: var(--color-warning-50);
--btn-outline-color: var(--color-warning-200);
--btn-outline-text-color: var(--color-warning-800);
--btn-outline-bg-hover: --alpha(var(--color-warning-100) / 60%);
&:is(.dark *) {
--btn-outline-color: --alpha(var(--color-warning-500) / 30%);
--btn-outline-text-color: var(--color-warning-300);
--btn-outline-bg: --alpha(var(--color-warning-500) / 5%);
--btn-outline-bg-hover: --alpha(var(--color-warning-500) / 10%);
}
}
@utility btn-outline-danger {
--btn-outline-bg: var(--color-danger-50);
--btn-outline-color: var(--color-danger-200);
--btn-outline-text-color: var(--color-danger-800);
--btn-outline-bg-hover: --alpha(var(--color-danger-100) / 60%);
&:is(.dark *) {
--btn-outline-color: --alpha(var(--color-danger-500) / 30%);
--btn-outline-text-color: var(--color-danger-300);
--btn-outline-bg: --alpha(var(--color-danger-500) / 5%);
--btn-outline-bg-hover: --alpha(var(--color-danger-500) / 10%);
}
}
@utility btn-outline-gray {
--btn-outline-bg: var(--color-gray-50);
--btn-outline-color: var(--color-gray-200);
--btn-outline-text-color: var(--color-gray-800);
--btn-outline-bg-hover: --alpha(var(--color-gray-100) / 60%);
&:is(.dark *) {
--btn-outline-color: --alpha(var(--color-gray-500) / 30%);
--btn-outline-text-color: var(--color-gray-300);
--btn-outline-bg: --alpha(var(--color-gray-500) / 5%);
--btn-outline-bg-hover: --alpha(var(--color-gray-500) / 15%);
}
}Soft Variants
both
light
dark
@utility btn-soft-primary {
--btn-soft-bg-color: var(--color-primary-50);
--btn-soft-bg-color-hover: --alpha(var(--color-primary-400) / 60%);
--btn-soft-bg-color-press: --alpha(var(--color-primary-400) / 40%);
--btn-soft-text-color: var(--color-primary-600);
--btn-soft-text-color-hover: var(--color-primary-700);
&:is(.dark *) {
--btn-soft-bg-color: --alpha(var(--color-primary-600) / 15%);
--btn-soft-bg-color-hover: --alpha(var(--color-primary-600) / 30%);
--btn-soft-bg-color-press: --alpha(var(--color-primary-600) / 25%);
--btn-soft-text-color: var(--color-primary-300);
--btn-soft-text-color-hover: var(--color-primary-300);
}
}
@utility btn-soft-danger {
--btn-soft-bg-color: var(--color-danger-50);
--btn-soft-bg-color-hover: --alpha(var(--color-danger-400) / 60%);
--btn-soft-bg-color-press: --alpha(var(--color-danger-400) / 40%);
--btn-soft-text-color: var(--color-danger-600);
--btn-soft-text-color-hover: var(--color-danger-700);
&:is(.dark *) {
--btn-soft-bg-color: --alpha(var(--color-danger-600) / 15%);
--btn-soft-bg-color-hover: --alpha(var(--color-danger-600) / 30%);
--btn-soft-bg-color-press: --alpha(var(--color-danger-600) / 25%);
--btn-soft-text-color: var(--color-danger-300);
--btn-soft-text-color-hover: var(--color-danger-300);
}
}
@utility btn-soft-gray {
--btn-soft-bg-color: var(--color-gray-50);
--btn-soft-bg-color-hover: --alpha(var(--color-gray-200) / 75%);
--btn-soft-bg-color-press: --alpha(var(--color-gray-200) / 80%);
--btn-soft-text-color: var(--color-gray-800);
--btn-soft-text-color-hover: var(--color-gray-900);
&:is(.dark *) {
--btn-soft-bg-color: --alpha(var(--color-gray-600) / 20%);
--btn-soft-bg-color-hover: --alpha(var(--color-gray-600) / 40%);
--btn-soft-bg-color-press: --alpha(var(--color-gray-600) / 25%);
--btn-soft-text-color: var(--color-gray-100);
--btn-soft-text-color-hover: var(--color-gray-50);
}
}Ghost variants
both
light
dark
@utility btn-ghost-primary {
--btn-ghost-bg-color-hover: --alpha(var(--color-primary-100) / 50%);
--btn-ghost-bg-color-press: --alpha(var(--color-primary-100) / 70%);
--btn-ghost-text-color: var(--color-primary-600);
--btn-ghost-text-color-hover: var(--color-primary-700);
&:is(.dark *) {
--btn-ghost-bg-color-hover: --alpha(var(--color-primary-600) / 30%);
--btn-ghost-bg-color-press: --alpha(var(--color-primary-600) / 25%);
--btn-ghost-text-color: var(--color-primary-300);
--btn-ghost-text-color-hover: var(--color-primary-200);
}
}
@utility btn-ghost-danger {
--btn-ghost-bg-color-hover: --alpha(var(--color-danger-100) / 50%);
--btn-ghost-bg-color-press: --alpha(var(--color-danger-100) / 70%);
--btn-ghost-text-color: var(--color-danger-600);
--btn-ghost-text-color-hover: var(--color-danger-700);
&:is(.dark *) {
--btn-ghost-bg-color-hover: --alpha(var(--color-danger-600) / 30%);
--btn-ghost-bg-color-press: --alpha(var(--color-danger-600) / 25%);
--btn-ghost-text-color: var(--color-danger-300);
--btn-ghost-text-color-hover: var(--color-danger-200);
}
}
@utility btn-ghost-gray {
--btn-ghost-bg-color-hover: --alpha(var(--color-gray-200) / 40%);
--btn-ghost-bg-color-press: --alpha(var(--color-gray-200) / 75%);
--btn-ghost-text-color: var(--color-gray-800);
--btn-ghost-text-color-hover: var(--color-gray-900);
&:is(.dark *) {
--btn-ghost-bg-color-hover: --alpha(var(--color-gray-700) / 70%);
--btn-ghost-bg-color-press: --alpha(var(--color-gray-800) / 60%);
--btn-ghost-text-color: var(--color-gray-100);
--btn-ghost-text-color-hover: var(--color-gray-50);
}
}