CSS Variables
Kelp uses CSS variables (or custom properties) to maintain consistency throughout the library.
Fonts
Use these to set the font-family on an element.
| Variable | Value |
|---|---|
--font-primary |
Sans Serif Stack |
--font-secondary |
Serif Stack |
--font-monospace |
Monospace Stack |
By default…
- Headings use
--font-secondary - Code snippets use
--font-monospace - Everything else uses
--font-primary
Learn how to customize fonts →
Breakpoints
You cannot use CSS variables in media queries, but Kelp does define some breakpoint-related CSS variables that can be used to tie the size of elements to breakpoints.
| Variable | Size |
|---|---|
--breakpoint-xs |
18em |
--breakpoint-s |
28em |
--breakpoint-m |
38em |
--breakpoint-l |
52em |
--breakpoint-xl |
60em |
--breakpoint-2xl |
80em |
For example, these are used in the .container-* layout classes to set the max-width an element can be.
.container-m {
max-width: var(--breakpoint-m);
}Line Heights
Use the --line-height-* variables to adjust the line height of an element. The --line-height-m variable is the default on most elements.
| Variable | Height |
|---|---|
--line-height-xs |
1.2 |
--line-height-s |
1.4 |
--line-height-m |
1.5 |
Sizes
Use the --size-* variables to set sizes for various CSS properties: font-size, padding, margin, and more.
Kelp uses em units for sizing, which scales all of the properties on an element up or down when modified with a .size-* utility class. The px unit equivalents are provided for convenience.
| Variable | Size | px Equivalent |
|---|---|---|
--size-6xs |
0.125em |
2px |
--size-5xs |
0.25em |
4px |
--size-4xs |
0.5em |
8px |
--size-3xs |
0.6875em |
11px |
--size-2xs |
0.75em |
12px |
--size-xs |
0.8125em |
13px |
--size-s |
0.9375em |
15px |
--size-m |
1em |
16px |
--size-l |
1.0625em |
17px |
--size-xl |
1.1875em |
19px |
--size-2xl |
1.3125em |
21px |
--size-3xl |
1.5em |
24px |
--size-4xl |
1.75em |
28px |
--size-5xl |
2em |
32px |
--size-6xl |
3em |
48px |
The --space variable is used to match margins and padding to the default line-height, and has a value of 1.5em.
Border Radius
Use the --border-radius-* variables to define a border-radius on an element.
Because they’re defined in relative units, elements with a bigger font-size automatically have a larger border-radius.
| Variable | Size |
|---|---|
--border-radius-s |
0.25em |
--border-radius-m |
0.5em |
--border-radius-l |
1.3125em |
--border-radius-circle |
50% |
Component Colors
Kelp includes generic versions of the color-specific semantic color variables. There values are in the gray family by default.
--color-fill-vivid--color-fill-accent--color-fill-muted--color-border-vivid--color-border-accent--color-border-muted--color-on-vivid--color-on-accent--color-on-muted--color-outline
It also includes CSS variables designed to work with the color and style utility classes when styling components.
--background-color--background-color-hover--background-color-active--border-color--border-color-hover--border-color-active--color--color-hover--color-active
Define any of these relevant variables in your component, and give them one of the generic semantic color variables as a value.
For example, here’s how they’re used in the .callout component.
.callout {
--background-color: var(--color-fill-muted);
--color: var(--color-on-muted);
--border-color: var(--color-border-muted);
background-color: var(--background-color);
border: 1px solid var(--border-color);
color: var(--color);
}