1. Components
  2. button

Button

Use different button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Preset UI Button 
<button class="btn btn-md rd-lg btn-solid btn-solid-primary text-lg">
    Click Me
</button>

With Icon 

<button class="btn btn-md text-white btn-solid btn-solid-primary rd-lg gap-x2">
    <span aria-hidden="true" class="flex i-ph-atom"></span>
    leading
</button>
<button class="btn btn-md text-white btn-solid btn-solid-primary rd-lg gap-x2">
    trailing
    <span aria-hidden="true" class="flex i-ph-atom"></span>
</button>

Size

Default 

<button class="btn btn-xs rd-lg btn-solid btn-solid-primary text-white">
    Click Me
</button>
<button class="btn btn-sm rd-lg btn-solid btn-solid-primary text-white">
    Click Me
</button>
<button class="btn btn-md rd-lg btn-solid btn-solid-primary text-white">
    Click Me
</button>
<button class="btn btn-lg rd-lg btn-solid btn-solid-primary text-white">
    Click Me
</button>
<button class="btn btn-xl rd-lg btn-solid btn-solid-primary text-white">
    Click Me
</button>

Icon 

<button class="btn btn-icon-xs rd-lg btn-solid btn-solid-primary text-white">
    <span aria-hidden="true" class="flex i-ph-atom"></span>
</button>
<button class="btn btn-icon-sm rd-lg btn-solid btn-solid-primary text-white">
    <span aria-hidden="true" class="flex i-ph-atom"></span>
</button>
<button class="btn btn-icon-md rd-lg btn-solid btn-solid-primary text-white">
    <span aria-hidden="true" class="flex i-ph-atom"></span>
</button>
<button class="btn btn-icon-lg rd-lg btn-solid btn-solid-primary text-white">
    <span aria-hidden="true" class="flex i-ph-atom"></span>
</button>
<button class="btn btn-icon-xl rd-lg btn-solid btn-solid-primary text-white">
    <span aria-hidden="true" class="flex i-ph-atom"></span>
</button>

Variants

Primary
Secondry
Accent
Success
Info
Warning
Danger
Gray
Neutral
White
Solid
Outline
Soft
Ghost
- - -

styles 

/* ==================================================
   LIGHT THEME
   ================================================== */
/* --- SOLID BUTTONS --- */
.btn-solid-primary {
    --btn-solid-bg: hsl(var(--c-primary-600));
    --btn-solid-bg-hover: hsl(var(--c-primary-700));
    --btn-solid-bg-active: hsl(var(--c-primary-800));
    --btn-solid-shadow-a: hsl(var(--c-primary-700));
    --btn-solid-shadow-b: hsl(var(--c-primary-500));
    --btn-solid-shadow-c: hsl(var(--c-primary-400));
    --btn-solid-shadow-active-a: hsl(var(--c-primary-900));
    --btn-solid-shadow-active-b: hsl(var(--c-primary-700));
    --btn-solid-shadow-active-c: hsl(var(--c-primary-600));
}

.btn-solid-secondary {
    --btn-solid-bg: hsl(var(--c-secondary-600));
    --btn-solid-bg-hover: hsl(var(--c-secondary-700));
    --btn-solid-bg-active: hsl(var(--c-secondary-800));
    --btn-solid-shadow-a: hsl(var(--c-secondary-700));
    --btn-solid-shadow-b: hsl(var(--c-secondary-500));
    --btn-solid-shadow-c: hsl(var(--c-secondary-400));
    --btn-solid-shadow-active-a: hsl(var(--c-secondary-900));
    --btn-solid-shadow-active-b: hsl(var(--c-secondary-700));
    --btn-solid-shadow-active-c: hsl(var(--c-secondary-600));
}

.btn-solid-accent {
    --btn-solid-bg: hsl(var(--c-accent-600));
    --btn-solid-bg-hover: hsl(var(--c-accent-700));
    --btn-solid-bg-active: hsl(var(--c-accent-800));
    --btn-solid-shadow-a: hsl(var(--c-accent-700));
    --btn-solid-shadow-b: hsl(var(--c-accent-500));
    --btn-solid-shadow-c: hsl(var(--c-accent-400));
    --btn-solid-shadow-active-a: hsl(var(--c-accent-900));
    --btn-solid-shadow-active-b: hsl(var(--c-accent-700));
    --btn-solid-shadow-active-c: hsl(var(--c-accent-600));
}

.btn-solid-success {
    --btn-solid-bg: hsl(var(--c-success-600));
    --btn-solid-bg-hover: hsl(var(--c-success-700));
    --btn-solid-bg-active: hsl(var(--c-success-800));
    --btn-solid-shadow-a: hsl(var(--c-success-700));
    --btn-solid-shadow-b: hsl(var(--c-success-500));
    --btn-solid-shadow-c: hsl(var(--c-success-400));
    --btn-solid-shadow-active-a: hsl(var(--c-success-900));
    --btn-solid-shadow-active-b: hsl(var(--c-success-700));
    --btn-solid-shadow-active-c: hsl(var(--c-success-600));
}


.btn-solid-danger {
    --btn-solid-bg: hsl(var(--c-danger-600));
    --btn-solid-bg-hover: hsl(var(--c-danger-700));
    --btn-solid-bg-active: hsl(var(--c-danger-800));
    --btn-solid-shadow-a: hsl(var(--c-danger-700));
    --btn-solid-shadow-b: hsl(var(--c-danger-500));
    --btn-solid-shadow-c: hsl(var(--c-danger-400));
    --btn-solid-shadow-active-a: hsl(var(--c-danger-900));
    --btn-solid-shadow-active-b: hsl(var(--c-danger-700));
    --btn-solid-shadow-active-c: hsl(var(--c-danger-600));
}

.btn-solid-warning {
    --btn-solid-bg: hsl(var(--c-warning-600));
    --btn-solid-bg-hover: hsl(var(--c-warning-700));
    --btn-solid-bg-active: hsl(var(--c-warning-800));
    --btn-solid-shadow-a: hsl(var(--c-warning-700));
    --btn-solid-shadow-b: hsl(var(--c-warning-500));
    --btn-solid-shadow-c: hsl(var(--c-warning-400));
    --btn-solid-shadow-active-a: hsl(var(--c-warning-900));
    --btn-solid-shadow-active-b: hsl(var(--c-warning-700));
    --btn-solid-shadow-active-c: hsl(var(--c-warning-600));
}

.btn-solid-info {
    --btn-solid-bg: hsl(var(--c-info-600));
    --btn-solid-bg-hover: hsl(var(--c-info-700));
    --btn-solid-bg-active: hsl(var(--c-info-800));
    --btn-solid-shadow-a: hsl(var(--c-info-700));
    --btn-solid-shadow-b: hsl(var(--c-info-500));
    --btn-solid-shadow-c: hsl(var(--c-info-400));
    --btn-solid-shadow-active-a: hsl(var(--c-info-900));
    --btn-solid-shadow-active-b: hsl(var(--c-info-700));
    --btn-solid-shadow-active-c: hsl(var(--c-info-600));
}

.btn-solid-white {
    --btn-solid-bg: hsl(var(--c-white));
    --btn-solid-bg-hover: hsl(var(--c-gray-100));
    --btn-solid-bg-active: hsl(var(--c-gray-50));
    --btn-solid-shadow-a: hsl(var(--c-gray-300));
    --btn-solid-shadow-b: hsl(var(--c-gray-200));
    --btn-solid-shadow-c: hsl(var(--c-gray-50));
    --btn-solid-shadow-active-a: hsl(var(--c-gray-400));
    --btn-solid-shadow-active-b: hsl(var(--c-gray-300));
    --btn-solid-shadow-active-c: hsl(var(--c-gray-500));
}

.btn-solid-gray {
    --btn-solid-bg: hsl(var(--c-gray-600));
    --btn-solid-bg-hover: hsl(var(--c-gray-700));
    --btn-solid-bg-active: hsl(var(--c-gray-800));
    --btn-solid-shadow-a: hsl(var(--c-gray-700));
    --btn-solid-shadow-b: hsl(var(--c-gray-500));
    --btn-solid-shadow-c: hsl(var(--c-gray-400));
    --btn-solid-shadow-active-a: hsl(var(--c-gray-900));
    --btn-solid-shadow-active-b: hsl(var(--c-gray-700));
    --btn-solid-shadow-active-c: hsl(var(--c-gray-600));
}

.btn-solid-neutral {
    --btn-solid-bg: hsl(var(--c-gray-900));
    --btn-solid-bg-hover: hsl(var(--c-gray-800));
    --btn-solid-bg-active: hsl(var(--c-gray-950));
    --btn-solid-shadow-a: hsl(var(--c-gray-700));
    --btn-solid-shadow-b: hsl(var(--c-gray-500));
    --btn-solid-shadow-c: hsl(var(--c-gray-400));
    --btn-solid-shadow-active-a: hsl(var(--c-gray-700));
    --btn-solid-shadow-active-b: hsl(var(--c-gray-600));
    --btn-solid-shadow-active-c: hsl(var(--c-gray-500));
}

/* --- OUTLINE BUTTONS --- */
.btn-outline-primary {
    --btn-outline-color: hsl(var(--c-primary-500));
    --btn-outline-color-hover: hsl(var(--c-primary-700));
    --btn-outline-text-color: hsl(var(--c-primary-600));
    --btn-outline-text-color-hover: hsl(var(--c-primary-800));
    --btn-focus-outline-color: var(--c-btn-outline-text-color-hover)
}

.btn-outline-secondary {
    --btn-outline-color: hsl(var(--c-secondary-500));
    --btn-outline-color-hover: hsl(var(--c-secondary-700));
    --btn-outline-text-color: hsl(var(--c-secondary-600));
    --btn-outline-text-color-hover: hsl(var(--c-secondary-800));
    --btn-focus-outline-color: var(--c-btn-outline-text-color-hover)
}

.btn-outline-accent {
    --btn-outline-color: hsl(var(--c-accent-500));
    --btn-outline-color-hover: hsl(var(--c-accent-700));
    --btn-outline-text-color: hsl(var(--c-accent-600));
    --btn-outline-text-color-hover: hsl(var(--c-accent-800));
    --btn-focus-outline-color: var(--c-btn-outline-text-color-hover)
}

.btn-outline-success {
    --btn-outline-color: hsl(var(--c-success-500));
    --btn-outline-color-hover: hsl(var(--c-success-700));
    --btn-outline-text-color: hsl(var(--c-success-600));
    --btn-outline-text-color-hover: hsl(var(--c-success-800));
    --btn-focus-outline-color: var(--c-btn-outline-text-color-hover)
}

.btn-outline-warning {
    --btn-outline-color: hsl(var(--c-warning-500));
    --btn-outline-color-hover: hsl(var(--c-warning-700));
    --btn-outline-text-color: hsl(var(--c-warning-600));
    --btn-outline-text-color-hover: hsl(var(--c-warning-800));
    --btn-focus-outline-color: var(--c-btn-outline-text-color-hover)
}

.btn-outline-info {
    --btn-outline-color: hsl(var(--c-info-500));
    --btn-outline-color-hover: hsl(var(--c-info-700));
    --btn-outline-text-color: hsl(var(--c-info-600));
    --btn-outline-text-color-hover: hsl(var(--c-info-800));
    --btn-focus-outline-color: var(--c-btn-outline-text-color-hover)
}

.btn-outline-danger {
    --btn-outline-color: hsl(var(--c-danger-500));
    --btn-outline-color-hover: hsl(var(--c-danger-700));
    --btn-outline-text-color: hsl(var(--c-danger-600));
    --btn-outline-text-color-hover: hsl(var(--c-danger-800));
    --btn-focus-outline-color: var(--c-btn-outline-text-color-hover)
}

.btn-outline-gray {
    --btn-outline-color: hsl(var(--c-gray-500));
    --btn-outline-color-hover: hsl(var(--c-gray-700));
    --btn-outline-text-color: hsl(var(--c-gray-600));
    --btn-outline-text-color-hover: hsl(var(--c-gray-800));
    --btn-focus-outline-color: var(--c-btn-outline-text-color-hover)
}

.btn-outline-white {
    --btn-outline-color: hsl(var(--c-gray-200));
    --btn-outline-color-hover: hsl(var(--c-gray-300));
    --btn-outline-text-color: hsl(var(--c-gray-700));
    --btn-outline-text-color-hover: hsl(var(--c-gray-900));
    --btn-focus-outline-color: var(--c-btn-outline-text-color-hover)
}

.btn-outline-neutral {
    --btn-outline-color: hsl(var(--c-gray-800));
    --btn-outline-color-hover: hsl(var(--c-gray-900));
    --btn-outline-text-color: hsl(var(--c-gray-700));
    --btn-outline-text-color-hover: hsl(var(--c-gray-700));
    --btn-focus-outline-color: var(--c-btn-outline-text-color-hover)
}

/* --- SOFT BUTTONS --- */
.btn-soft-primary {
    --btn-soft-bg-color: hsl(var(--c-primary-100) / .6);
    --btn-soft-bg-color-hover: hsl(var(--c-primary-200) / .7);
    --btn-soft-bg-color-press: hsl(var(--c-primary-200) / .4);
    --btn-soft-text-color: hsl(var(--c-primary-700));
}

.btn-soft-secondary {
    --btn-soft-bg-color: hsl(var(--c-secondary-100) / .6);
    --btn-soft-bg-color-hover: hsl(var(--c-secondary-200) / .7);
    --btn-soft-bg-color-press: hsl(var(--c-secondary-200) / .4);
    --btn-soft-text-color: hsl(var(--c-secondary-700));
}

.btn-soft-accent {
    --btn-soft-bg-color: hsl(var(--c-accent-100) / .6);
    --btn-soft-bg-color-hover: hsl(var(--c-accent-200) / .7);
    --btn-soft-bg-color-press: hsl(var(--c-accent-200) / .4);
    --btn-soft-text-color: hsl(var(--c-accent-700));
}

.btn-soft-success {
    --btn-soft-bg-color: hsl(var(--c-success-100) / .6);
    --btn-soft-bg-color-hover: hsl(var(--c-success-200) / .7);
    --btn-soft-bg-color-press: hsl(var(--c-success-200) / .4);
    --btn-soft-text-color: hsl(var(--c-success-700));
}

.btn-soft-warning {
    --btn-soft-bg-color: hsl(var(--c-warning-100) / .6);
    --btn-soft-bg-color-hover: hsl(var(--c-warning-200) / .7);
    --btn-soft-bg-color-press: hsl(var(--c-warning-200) / .4);
    --btn-soft-text-color: hsl(var(--c-warning-700));
}

.btn-soft-info {
    --btn-soft-bg-color: hsl(var(--c-info-100) / .6);
    --btn-soft-bg-color-hover: hsl(var(--c-info-200) / .7);
    --btn-soft-bg-color-press: hsl(var(--c-info-200) / .4);
    --btn-soft-text-color: hsl(var(--c-info-700));
}

.btn-soft-danger {
    --btn-soft-bg-color: hsl(var(--c-danger-100) / .6);
    --btn-soft-bg-color-hover: hsl(var(--c-danger-200) / .7);
    --btn-soft-bg-color-press: hsl(var(--c-danger-200) / .4);
    --btn-soft-text-color: hsl(var(--c-danger-700));
}

.btn-soft-gray {
    --btn-soft-bg-color: hsl(var(--c-gray-100) / .6);
    --btn-soft-bg-color-hover: hsl(var(--c-gray-200) / .7);
    --btn-soft-bg-color-press: hsl(var(--c-gray-200) / .4);
    --btn-soft-text-color: hsl(var(--c-gray-700));
}

.btn-soft-neutral {
    --btn-soft-bg-color: hsl(var(--c-gray-300) / .6);
    --btn-soft-bg-color-hover: hsl(var(--c-gray-400) / .7);
    --btn-soft-bg-color-press: hsl(var(--c-gray-300) / .4);
    --btn-soft-text-color: hsl(var(--c-gray-900));
}

/* --- GHOST BUTTONS --- */
.btn-ghost-primary {
    --btn-ghost-bg-color-hover: hsl(var(--c-primary-200) / .7);
    --btn-ghost-bg-color-press: hsl(var(--c-primary-200) / .4);
    --btn-ghost-text-color: hsl(var(--c-primary-700));
}

.btn-ghost-secondary {
    --btn-ghost-bg-color-hover: hsl(var(--c-secondary-200) / .7);
    --btn-ghost-bg-color-press: hsl(var(--c-secondary-200) / .4);
    --btn-ghost-text-color: hsl(var(--c-secondary-700));
}

.btn-ghost-accent {
    --btn-ghost-bg-color-hover: hsl(var(--c-accent-200) / .7);
    --btn-ghost-bg-color-press: hsl(var(--c-accent-200) / .4);
    --btn-ghost-text-color: hsl(var(--c-accent-700));
}

.btn-ghost-success {
    --btn-ghost-bg-color-hover: hsl(var(--c-success-200) / .7);
    --btn-ghost-bg-color-press: hsl(var(--c-success-200) / .4);
    --btn-ghost-text-color: hsl(var(--c-success-700));
}

.btn-ghost-warning {
    --btn-ghost-bg-color-hover: hsl(var(--c-warning-200) / .7);
    --btn-ghost-bg-color-press: hsl(var(--c-warning-200) / .4);
    --btn-ghost-text-color: hsl(var(--c-warning-700));
}

.btn-ghost-info {
    --btn-ghost-bg-color-hover: hsl(var(--c-info-200) / .7);
    --btn-ghost-bg-color-press: hsl(var(--c-info-200) / .4);
    --btn-ghost-text-color: hsl(var(--c-info-700));
}

.btn-ghost-danger {
    --btn-ghost-bg-color-hover: hsl(var(--c-danger-200) / .7);
    --btn-ghost-bg-color-press: hsl(var(--c-danger-200) / .4);
    --btn-ghost-text-color: hsl(var(--c-danger-700));
}

.btn-ghost-gray {
    --btn-ghost-bg-color-hover: hsl(var(--c-gray-200) / .7);
    --btn-ghost-bg-color-press: hsl(var(--c-gray-200) / .4);
    --btn-ghost-text-color: hsl(var(--c-gray-700));
}

.btn-ghost-neutral {
    --btn-ghost-bg-color-hover: hsl(var(--c-gray-400) / .7);
    --btn-ghost-bg-color-press: hsl(var(--c-gray-300) / .4);
    --btn-ghost-text-color: hsl(var(--c-gray-900));
}

/* ==================================================
     DARK THEME 
     ================================================== */

/* --- SOLID BUTTONS (Dark) --- */
.dark .btn-solid-primary {
    --btn-solid-bg: hsl(var(--c-primary-500));
    --btn-solid-bg-hover: hsl(var(--c-primary-600));
    --btn-solid-bg-active: hsl(var(--c-primary-700));
    --btn-solid-shadow-a: hsl(var(--c-primary-600));
    --btn-solid-shadow-b: hsl(var(--c-primary-400));
    --btn-solid-shadow-c: hsl(var(--c-primary-500));
    --btn-solid-shadow-active-a: hsl(var(--c-primary-600));
    --btn-solid-shadow-active-b: hsl(var(--c-primary-500));
    --btn-solid-shadow-active-c: hsl(var(--c-primary-400));
}

.dark .btn-solid-secondary {
    --btn-solid-bg: hsl(var(--c-secondary-500));
    --btn-solid-bg-hover: hsl(var(--c-secondary-600));
    --btn-solid-bg-active: hsl(var(--c-secondary-700));
    --btn-solid-shadow-a: hsl(var(--c-secondary-600));
    --btn-solid-shadow-b: hsl(var(--c-secondary-400));
    --btn-solid-shadow-c: hsl(var(--c-secondary-500));
    --btn-solid-shadow-active-a: hsl(var(--c-secondary-600));
    --btn-solid-shadow-active-b: hsl(var(--c-secondary-500));
    --btn-solid-shadow-active-c: hsl(var(--c-secondary-400));
}

.dark .btn-solid-accent {
    --btn-solid-bg: hsl(var(--c-accent-500));
    --btn-solid-bg-hover: hsl(var(--c-accent-600));
    --btn-solid-bg-active: hsl(var(--c-accent-700));
    --btn-solid-shadow-a: hsl(var(--c-accent-600));
    --btn-solid-shadow-b: hsl(var(--c-accent-400));
    --btn-solid-shadow-c: hsl(var(--c-accent-500));
    --btn-solid-shadow-active-a: hsl(var(--c-accent-600));
    --btn-solid-shadow-active-b: hsl(var(--c-accent-500));
    --btn-solid-shadow-active-c: hsl(var(--c-accent-400));
}

.dark .btn-solid-success {
    --btn-solid-bg: hsl(var(--c-success-500));
    --btn-solid-bg-hover: hsl(var(--c-success-600));
    --btn-solid-bg-active: hsl(var(--c-success-700));
    --btn-solid-shadow-a: hsl(var(--c-success-600));
    --btn-solid-shadow-b: hsl(var(--c-success-400));
    --btn-solid-shadow-c: hsl(var(--c-success-500));
    --btn-solid-shadow-active-a: hsl(var(--c-success-600));
    --btn-solid-shadow-active-b: hsl(var(--c-success-500));
    --btn-solid-shadow-active-c: hsl(var(--c-success-400));
}

.dark .btn-solid-danger {
    --btn-solid-bg: hsl(var(--c-danger-500));
    --btn-solid-bg-hover: hsl(var(--c-danger-600));
    --btn-solid-bg-active: hsl(var(--c-danger-700));
    --btn-solid-shadow-a: hsl(var(--c-danger-600));
    --btn-solid-shadow-b: hsl(var(--c-danger-400));
    --btn-solid-shadow-c: hsl(var(--c-danger-500));
    --btn-solid-shadow-active-a: hsl(var(--c-danger-600));
    --btn-solid-shadow-active-b: hsl(var(--c-danger-500));
    --btn-solid-shadow-active-c: hsl(var(--c-danger-400));
}

.dark .btn-solid-warning {
    --btn-solid-bg: hsl(var(--c-warning-500));
    --btn-solid-bg-hover: hsl(var(--c-warning-600));
    --btn-solid-bg-active: hsl(var(--c-warning-700));
    --btn-solid-shadow-a: hsl(var(--c-warning-600));
    --btn-solid-shadow-b: hsl(var(--c-warning-400));
    --btn-solid-shadow-c: hsl(var(--c-warning-500));
    --btn-solid-shadow-active-a: hsl(var(--c-warning-600));
    --btn-solid-shadow-active-b: hsl(var(--c-warning-500));
    --btn-solid-shadow-active-c: hsl(var(--c-warning-400));
}

.dark .btn-solid-info {
    --btn-solid-bg: hsl(var(--c-info-500));
    --btn-solid-bg-hover: hsl(var(--c-info-600));
    --btn-solid-bg-active: hsl(var(--c-info-700));
    --btn-solid-shadow-a: hsl(var(--c-info-600));
    --btn-solid-shadow-b: hsl(var(--c-info-400));
    --btn-solid-shadow-c: hsl(var(--c-info-500));
    --btn-solid-shadow-active-a: hsl(var(--c-info-600));
    --btn-solid-shadow-active-b: hsl(var(--c-info-500));
    --btn-solid-shadow-active-c: hsl(var(--c-info-400));
}

.dark .btn-solid-white {
    --btn-solid-bg: hsl(var(--c-gray-900));
    --btn-solid-bg-hover: hsl(var(--c-gray-800));
    --btn-solid-bg-active: hsl(var(--c-gray-900));
    --btn-solid-shadow-a: hsl(var(--c-gray-800));
    --btn-solid-shadow-b: hsl(var(--c-gray-700));
    --btn-solid-shadow-c: hsl(var(--c-gray-800));
    --btn-solid-shadow-active-a: hsl(var(--c-gray-700));
    --btn-solid-shadow-active-b: hsl(var(--c-gray-800));
    --btn-solid-shadow-active-c: hsl(var(--c-gray-900));
}

.dark .btn-solid-gray {
    --btn-solid-bg: hsl(var(--c-gray-500));
    --btn-solid-bg-hover: hsl(var(--c-gray-600));
    --btn-solid-bg-active: hsl(var(--c-gray-700));
    --btn-solid-shadow-a: hsl(var(--c-gray-600));
    --btn-solid-shadow-b: hsl(var(--c-gray-400));
    --btn-solid-shadow-c: hsl(var(--c-gray-500));
    --btn-solid-shadow-active-a: hsl(var(--c-gray-600));
    --btn-solid-shadow-active-b: hsl(var(--c-gray-500));
    --btn-solid-shadow-active-c: hsl(var(--c-gray-400));
}

.dark .btn-solid-neutral {
    --btn-solid-bg: hsl(var(--c-white));
    --btn-solid-bg-hover: hsl(var(--c-gray-100));
    --btn-solid-bg-active: hsl(var(--c-gray-50));
    --btn-solid-shadow-a: hsl(var(--c-gray-100));
    --btn-solid-shadow-b: hsl(var(--c-gray-200));
    --btn-solid-shadow-c: hsl(var(--c-gray-50));
    --btn-solid-shadow-active-a: hsl(var(--c-gray-200));
    --btn-solid-shadow-active-b: hsl(var(--c-gray-300));
    --btn-solid-shadow-active-c: hsl(var(--c-gray-50));
}

/* --- OUTLINE BUTTONS (Dark) --- */
.dark .btn-outline-primary {
    --btn-outline-color: hsl(var(--c-primary-400));
    --btn-outline-color-hover: hsl(var(--c-primary-600));
    --btn-outline-text-color: hsl(var(--c-primary-400));
    --btn-outline-text-color-hover: hsl(var(--c-primary-500));
}

.dark .btn-outline-secondary {
    --btn-outline-color: hsl(var(--c-secondary-400));
    --btn-outline-color-hover: hsl(var(--c-secondary-600));
    --btn-outline-text-color: hsl(var(--c-secondary-400));
    --btn-outline-text-color-hover: hsl(var(--c-secondary-500));
}

.dark .btn-outline-accent {
    --btn-outline-color: hsl(var(--c-accent-400));
    --btn-outline-color-hover: hsl(var(--c-accent-600));
    --btn-outline-text-color: hsl(var(--c-accent-400));
    --btn-outline-text-color-hover: hsl(var(--c-accent-500));
}

.dark .btn-outline-success {
    --btn-outline-color: hsl(var(--c-success-400));
    --btn-outline-color-hover: hsl(var(--c-success-600));
    --btn-outline-text-color: hsl(var(--c-success-400));
    --btn-outline-text-color-hover: hsl(var(--c-success-500));
}

.dark .btn-outline-warning {
    --btn-outline-color: hsl(var(--c-warning-400));
    --btn-outline-color-hover: hsl(var(--c-warning-600));
    --btn-outline-text-color: hsl(var(--c-warning-400));
    --btn-outline-text-color-hover: hsl(var(--c-warning-500));
}

.dark .btn-outline-info {
    --btn-outline-color: hsl(var(--c-info-400));
    --btn-outline-color-hover: hsl(var(--c-info-600));
    --btn-outline-text-color: hsl(var(--c-info-400));
    --btn-outline-text-color-hover: hsl(var(--c-info-500));
}

.dark .btn-outline-danger {
    --btn-outline-color: hsl(var(--c-danger-400));
    --btn-outline-color-hover: hsl(var(--c-danger-600));
    --btn-outline-text-color: hsl(var(--c-danger-400));
    --btn-outline-text-color-hover: hsl(var(--c-danger-500));
}

.dark .btn-outline-gray {
    --btn-outline-color: hsl(var(--c-gray-500));
    --btn-outline-color-hover: hsl(var(--c-gray-500));
    --btn-outline-text-color: hsl(var(--c-gray-200));
    --btn-outline-text-color-hover: hsl(var(--c-gray-500));
}

.dark .btn-outline-white {
    --btn-outline-color: hsl(var(--c-gray-200));
    --btn-outline-color-hover: hsl(var(--c-gray-300));
    --btn-outline-text-color: hsl(var(--c-gray-700));
    --btn-outline-text-color-hover: hsl(var(--c-gray-900));
}

.dark .btn-outline-neutral {
    --btn-outline-color: hsl(var(--c-gray-400));
    --btn-outline-color-hover: hsl(var(--c-gray-500));
    --btn-outline-text-color: hsl(var(--c-gray-300));
    --btn-outline-text-color-hover: hsl(var(--c-gray-400));
}

/* --- SOFT BUTTONS (Dark) --- */
.dark .btn-soft-primary {
    --btn-soft-bg-color: hsl(var(--c-primary-950) / .5);
    --btn-soft-bg-color-hover: hsl(var(--c-primary-900) / .4);
    --btn-soft-bg-color-press: hsl(var(--c-primary-900) / .3);
    --btn-soft-text-color: hsl(var(--c-primary-300));
}

.dark .btn-soft-secondary {
    --btn-soft-bg-color: hsl(var(--c-secondary-950) / .5);
    --btn-soft-bg-color-hover: hsl(var(--c-secondary-900) / .4);
    --btn-soft-bg-color-press: hsl(var(--c-secondary-900) / .3);
    --btn-soft-text-color: hsl(var(--c-secondary-300));
}

.dark .btn-soft-accent {
    --btn-soft-bg-color: hsl(var(--c-accent-950) / .5);
    --btn-soft-bg-color-hover: hsl(var(--c-accent-900) / .4);
    --btn-soft-bg-color-press: hsl(var(--c-accent-900) / .3);
    --btn-soft-text-color: hsl(var(--c-accent-300));
}

.dark .btn-soft-success {
    --btn-soft-bg-color: hsl(var(--c-success-950) / .5);
    --btn-soft-bg-color-hover: hsl(var(--c-success-900) / .4);
    --btn-soft-bg-color-press: hsl(var(--c-success-900) / .3);
    --btn-soft-text-color: hsl(var(--c-success-300));
}

.dark .btn-soft-warning {
    --btn-soft-bg-color: hsl(var(--c-warning-950) / .5);
    --btn-soft-bg-color-hover: hsl(var(--c-warning-900) / .4);
    --btn-soft-bg-color-press: hsl(var(--c-warning-900) / .3);
    --btn-soft-text-color: hsl(var(--c-warning-300));
}

.dark .btn-soft-info {
    --btn-soft-bg-color: hsl(var(--c-info-950) / .5);
    --btn-soft-bg-color-hover: hsl(var(--c-info-900) / .4);
    --btn-soft-bg-color-press: hsl(var(--c-info-900) / .3);
    --btn-soft-text-color: hsl(var(--c-info-300));
}

.dark .btn-soft-danger {
    --btn-soft-bg-color: hsl(var(--c-danger-950) / .5);
    --btn-soft-bg-color-hover: hsl(var(--c-danger-900) / .4);
    --btn-soft-bg-color-press: hsl(var(--c-danger-900) / .3);
    --btn-soft-text-color: hsl(var(--c-danger-300));
}

.dark .btn-soft-gray {
    --btn-soft-bg-color: hsl(var(--c-gray-900) / .6);
    --btn-soft-bg-color-hover: hsl(var(--c-gray-800) / .7);
    --btn-soft-bg-color-press: hsl(var(--c-gray-800) / .4);
    --btn-soft-text-color: hsl(var(--c-gray-300));
}

.dark .btn-soft-neutral {
    --btn-soft-bg-color: hsl(var(--c-gray-700) / .6);
    --btn-soft-bg-color-hover: hsl(var(--c-gray-600) / .7);
    --btn-soft-bg-color-press: hsl(var(--c-gray-700) / .4);
    --btn-soft-text-color: hsl(var(--c-gray-100));
}

/* --- GHOST BUTTONS (Dark) --- */
.dark .btn-ghost-primary {
    --btn-ghost-bg-color-hover: hsl(var(--c-primary-900) / .4);
    --btn-ghost-bg-color-press: hsl(var(--c-primary-900) / .3);
    --btn-ghost-text-color: hsl(var(--c-primary-300));
}

.dark .btn-ghost-secondary {
    --btn-ghost-bg-color-hover: hsl(var(--c-secondary-900) / .4);
    --btn-ghost-bg-color-press: hsl(var(--c-secondary-900) / .3);
    --btn-ghost-text-color: hsl(var(--c-secondary-300));
}

.dark .btn-ghost-accent {
    --btn-ghost-bg-color-hover: hsl(var(--c-accent-900) / .4);
    --btn-ghost-bg-color-press: hsl(var(--c-accent-900) / .3);
    --btn-ghost-text-color: hsl(var(--c-accent-300));
}

.dark .btn-ghost-success {
    --btn-ghost-bg-color-hover: hsl(var(--c-success-900) / .4);
    --btn-ghost-bg-color-press: hsl(var(--c-success-900) / .3);
    --btn-ghost-text-color: hsl(var(--c-success-300));
}

.dark .btn-ghost-warning {
    --btn-ghost-bg-color-hover: hsl(var(--c-warning-900) / .4);
    --btn-ghost-bg-color-press: hsl(var(--c-warning-900) / .3);
    --btn-ghost-text-color: hsl(var(--c-warning-300));
}

.dark .btn-ghost-info {
    --btn-ghost-bg-color-hover: hsl(var(--c-info-900) / .4);
    --btn-ghost-bg-color-press: hsl(var(--c-info-900) / .3);
    --btn-ghost-text-color: hsl(var(--c-info-300));
}

.dark .btn-ghost-danger {
    --btn-ghost-bg-color-hover: hsl(var(--c-danger-900) / .4);
    --btn-ghost-bg-color-press: hsl(var(--c-danger-900) / .3);
    --btn-ghost-text-color: hsl(var(--c-danger-300));
}

.dark .btn-ghost-gray {
    --btn-ghost-bg-color-hover: hsl(var(--c-gray-800) / .7);
    --btn-ghost-bg-color-press: hsl(var(--c-gray-800) / .4);
    --btn-ghost-text-color: hsl(var(--c-gray-300));
}

.dark .btn-ghost-neutral {
    --btn-ghost-bg-color-hover: hsl(var(--c-gray-600) / .7);
    --btn-ghost-bg-color-press: hsl(var(--c-gray-700) / .4);
    --btn-ghost-text-color: hsl(var(--c-gray-100));
}
Prev
Card

Content container with background and border.

Next
On this page