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.

By default…

• Headings use --font-secondary
• Code snippets use --font-monospace
• Everything else uses --font-primary

@layer kelp.theme {
	:root {
		--font-primary: "Source Sans Pro", sans-serif;
		--font-secondary: "Playfair Display", serif;
	}
}

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.

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.

Sizes

The --font-size-base variable defines the base font size in Kelp.

The default value is 112.5%, which is 18px in browsers that use the default medium font size. Because Kelp uses em units for sizing, adjusting it scales the entire UI up or down with it.

@layer kelp.theme {
	:root {
		--font-size-base: 112.5%;
	}
}

Kelp’s --size-* variables 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.

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.

Colors

Kelp components use a limited set of CSS variables for defining colors.

• --background-color
• --background-color-hover
• --background-color-active
• --border-color
• --border-color-hover
• --border-color-active
• --color
• --color-hover
• --color-active

These variables typically use semantic color variables as their values. For example, here’s how they’re implemented 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);
}

By default, these variables all use a gray/neutral color palette.

A collection of utility classes adjust the color and style of these variables, making it easy to create many variations of a component without having to define styles for every one.

Kelp also defines CSS color variables for things like…

• The page background and text color
• Checked state on form checkboxes and radio buttons
• Mixes for lightening and darkening other values

The theme builder tool can handle updating these automatically if you update the color palette.

@layer kelp.theme {
	:root {

		/* Page & Text  */
		--color-background: white;
		--color-text-normal: var(--color-gray-10);
		--color-text-muted: var(--color-gray-50);
		--color-text-input: var(--color-gray-30);
		--color-text-code: var(--color-pink-50);
		--color-highlight: #fbf9c9;
		--color-fill-highlight: var(--color-highlight);
		--color-on-highlight: inherit;
		--color-text-link: var(--color-blue-50);
		--color-text-link-hover: var(--color-blue-40);
		--decoration-text-link: underline dotted;
		--decoration-text-link-hover: underline;

		/* State */
		--color-checked: var(--color-blue-50);
		--color-checked-icon: white;

		/* Mixes */
		--color-mix-hover: black 10%;
		--color-mix-active: black 20%;
		--color-mix-transparent: transparent 20%;
		--color-mix-deleted: transparent 40%;

	}
}

Focus Styles

Kelp automatically applies consistent focus styles.

Links, buttons, form fields, and other focusable elements display a focus ring when navigated to with a keyboard. Under-the-hood, Kelp uses the :focus-visible pseudo-class to achieve this.

You can adjust the focus ring size, color, style, and spacing with a set of --focus-ring-* variables.

@layer kelp.theme {

	/* Default Light Theme */
	:where(:root),
	.light {
		--focus-ring-color: var(--color-blue-50);
		--focus-ring-style: solid;
		--focus-ring-width: var(--size-6xs);
		--focus-ring-offset: var(--size-6xs);
	}

	/* Dark Theme */
	.dark {
		--focus-ring-color: var(--color-blue-60);
	}

}