Foundations
Box Shadow
Box shadows add depth to cards, forms, modals, pagination, and highlighted content. Choose the tab that matches your starter.
Shadow tokens
Bootstrap shadow tokens are defined in assets/css/core.css.
| Level | Token | Default |
|---|---|---|
| Small | --kf-box-shadow-sm | 0 2px 6px -3px rgba(0, 0, 0, 0.08) |
| Default | --kf-box-shadow | 0 8px 10px -6px rgba(0, 0, 0, 0.08) |
| Large | --kf-box-shadow-lg | 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05) |
Utility classes
Use these helper classes when you want to apply a starter shadow to an element.
| Level | Class | Rule |
|---|---|---|
| Small | .shadow-sm | box-shadow: var(--kf-box-shadow-sm) !important; |
| Default | .shadow | box-shadow: var(--kf-box-shadow) !important; |
| Large | .shadow-lg | box-shadow: var(--kf-box-shadow-lg) !important; |
<div class="shadow-lg">
...
</div>Customize shadows
Update the token values in assets/css/core.css. Utility classes and starter components using those tokens will follow the new shadow style.
Shadow theme tokens
Tailwind shadow tokens are defined in src/assets/css/input.css inside the @theme block.
| Level | Theme Token | Default |
|---|---|---|
| Small | --shadow-kf-box-shadow-sm | 0 2px 6px -3px rgba(0, 0, 0, 0.08) |
| Default | --shadow-kf-box-shadow | 0 8px 10px -6px rgba(0, 0, 0, 0.08) |
| Large | --shadow-kf-box-shadow-lg | 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05) |
Utility classes
Tailwind generates utility classes from the shadow theme tokens.
| Level | Class | Source Token |
|---|---|---|
| Small | shadow-kf-box-shadow-sm | Uses --shadow-kf-box-shadow-sm |
| Default | shadow-kf-box-shadow | Uses --shadow-kf-box-shadow |
| Large | shadow-kf-box-shadow-lg | Uses --shadow-kf-box-shadow-lg |
<div class="rounded-2xl bg-white shadow-kf-box-shadow-lg">
...
</div>Customize shadows
Update the --shadow-kf-* values in src/assets/css/input.css, then run npm run watch to regenerate output.css.