Customizing
Wisp does not ship with a settings file by design. Instead, it uses sensible
defaults that you can overwrite when you are ready to make it your own.
:root {
--wisp-color-primary: #111111;
--wisp-color-primary-text: #ffffff;
}
Preflight Properties
Global properties defined in preflight.css
Colors
| Property |
Default Value |
| wisp-color-primary |
#1d4ed8 |
| wisp-color-primary-text |
#ffffff |
| wisp-color-secondary |
#475569 |
| wisp-color-secondary-text |
#ffffff |
| wisp-color-neutral |
#f1f5f9 |
| wisp-color-neutral-text |
#0f172a |
| wisp-color-surface |
#ffffff |
| wisp-color-surface-text |
#0f172a |
| wisp-color-border |
#cbd5e1 |
| wisp-color-border-subtle |
#e2e8f0 |
| wisp-color-focus |
#3b82f6 |
Spacing
| Property |
Default Value |
| wisp-spacing-xs |
0.25rem |
| wisp-spacing-sm |
0.5rem |
| wisp-spacing-md |
1rem |
| wisp-spacing-lg |
1.5rem |
| wisp-spacing-xl |
2rem |
Border Radius
| Property |
Default Value |
| wisp-radius-sm |
4px |
| wisp-radius-md |
6px |
| wisp-radius-lg |
8px |
Font Weight
| Property |
Default Value |
| wisp-font-weight-light |
400 |
| wisp-font-weight-medium |
500 |
| wisp-font-weight-semibold |
600 |
| wisp-font-weight-bold |
700 |
Font Size
| Property |
Default Value |
| wisp-font-size-sm |
0.875 |
| wisp-font-size-md |
1rem |
| wisp-font-size-lg |
1.125rem |
| wisp-font-size-xl |
1.25 |
| wisp-font-size-2xl |
1.5 |
| wisp-font-size-3xl |
1.875 |
| wisp-font-size-4xl |
2.25rem |
| wisp-font-size-5xl |
3rem |
Module-Specific
Module-specific properties defined inside their module.
Foundation
| Property |
Default Value |
| wisp-body-font-family |
sans-serif |
| wisp-body-line-height |
1.5 |
| wisp-body-color |
var(--wisp-color-surface-text) |
| wisp-body-background-color |
var(--wisp-color-surface) |
| wisp-link-color |
var(--wisp-color-primary) |
b-press-elevate
| Property |
Default Value |
| wisp-elevate-color |
rgba(0, 0, 0, 0.10) |
| wisp-elevate-color-hover |
rgba(0, 0, 0, 0.12) |
| wisp-elevate-color-active |
rgba(0, 0, 0, 0.16) |
b-press-outline
| Property |
Default Value |
| wisp-outline-color |
var(--wisp-color-primary)/td>
|
| wisp-outline-offset |
2px |
| wisp-outline-width |
2px |
c-dialog
| Property |
Default Value |
| wisp-dialog-max-width |
560px |
| wisp-dialog-box-shadow |
rgba(0, 0, 0, 0.20) |
c-table
| Property |
Default Value |
| wisp-table-border-color |
var(--wisp-color-border-subtle) |
| wisp-table-stripe-color |
#f1f5f9 |
| wisp-table-cell-block-padding |
var(--wisp-spacing-sm) |
| wisp-table-cell-inline-padding |
var(--wisp-spacing-md) |
c-table-wrapper
| Property |
Default Value |
| wisp-table-wrapper-min-width |
40em |
c-container
| Property |
Default Value |
| wisp-container-width |
1140px |
