Skip to navigation Skip to navigation Skip to content

Hydrogen CSS variables

A glossary of possible CSS variables created by Hydrogen that are available to you when styling.

Overview #

When Hydrogen processes your configuration file it begins by generating a list of custom CSS variables based on your chosen settings. These variables are designed to automatically adapt to media queries, your themes, as well as light and dark modes.

By default theses variables are included at the top of the hydrogen.css file produced during each build. This means that you can access them in your CSS at any time if you need to write something custom while maintaining the standards you've set in your configuration.

If, for whatever reason, you need to access these variables in your CSS but don't want Hydrogen's full CSS file, you can enable the export_variable_file setting in the processing area of your configuration file. Hydrogen will export these variables into an independent file that can be then loaded into your project.

Core variables #

The following variables are generated and used as foundation values across site-wide elements such as font size, whitespace, and more. These variables are always named consistently.

--h2-base-font-size
--h2-base-line-height
--h2-base-whitespace

Color and gradient variables #

Color and gradient variables leverage the color settings you've set in your configuration. As a result, their variable names reflect the key values you've assigned to your colors.

--h2-color-[KEY]

The values returned by these variables aren't actual valid colors, rather, they return the individual RGB values of the color so that you can then pair the variable with an alpha value if you need one.

For example, if you've set your primary color to #7440d6, Hydrogen generates a variable called --h2-color-primary with a value of 116, 64, 214. To use this variable in CSS, you would access it by nesting it inside an RGB() or RGBA() function.

app.css 
1
2
3
.primary-color: {
  background-color: rgba(var(--h2-color-primary), 1);
}

Color variables in particular can be appended with Hydrogen's default modifier keys or your own custom modifier keys to reference a modified value.

--h2-color-[KEY]-[MODIFIER]

app.css 
1
2
3
.modified-color: {
  background-color: rgba(var(--h2-color-primary-lighter), 1);
}

Gradient variables are assembled in a similar manner but they return a full CSS gradient value, meaning they can be used as-is without any further modification.

--h2-gradient-[KEY]

app.css 
1
2
3
.gradient: {
  background-image: var(--h2-gradient-linear-red);
}

Container variables #

Container variables follow the standard pattern and are named using your specified key value and return the max-width value you've chosen.

--h2-container-[KEY]

app.css 
1
2
3
.container: {
  max-width: var(--h2-container-large);
}

Font family variables #

Font family variables follow the standard pattern and are named using your specified key value and return the font-family value you've chosen.

--h2-font-family-[KEY]

app.css 
1
2
3
.font: {
  font-family: var(--h2-font-family-sans-serif);
}

Font size and line height variables #

Hydrogen generates font size and line height values for your entire typography scale based on the settings in your typography configuration. Both types of variable follow a standard naming approach that matches the values you would specify inside of Hydrogen attributes. Theses variables, like others, automatically adapt to your media query settings.

Font size variables will return rem values inside of a calc() function.

--h2-font-size-caption
--h2-font-size-body
--h2-font-size-h6
--h2-font-size-h5
--h2-font-size-h4
--h2-font-size-h3
--h2-font-size-h2
--h2-font-size-h1
--h2-font-size-display

Line height variables will return a number or unit value depending on your configuration.

--h2-line-height-caption
--h2-line-height-body
--h2-line-height-h6
--h2-line-height-h5
--h2-line-height-h4
--h2-line-height-h3
--h2-line-height-h2
--h2-line-height-h1
--h2-line-height-display

Font weight variables #

Font weight variables follow the standard pattern and are named using your specified key value and return the font-weight value you've chosen.

--h2-font-weight-[KEY]

app.css 
1
2
3
.weight: {
  font-weight: var(--h2-font-weight-thin);
}

Radius variables #

Border radius variables follow the standard pattern and are named using your specified key value and return the border-radius value you've chosen.

--h2-radius-[KEY]

app.css 
1
2
3
.radius: {
  border-radius: var(--h2-radius-rounded);
}

Shadow variables #

Box shadow variables follow the standard pattern and are named using your specified key value and return the box-shadow value you've chosen.

--h2-shadow-[KEY]

app.css 
1
2
3
.shadow: {
  box-shadow: var(--h2-shadow-small);
}

Transition variables #

Transition delay variables follow the standard pattern and are named using your specified key value and return the delay time value you've chosen.

--h2-transition-delay-[KEY]

app.css 
1
2
3
.transition-delay: {
  transition: all .2s ease var(--h2-transition-delay-fast);
}

Transition duration variables follow the standard pattern and are named using your specified key value and return the duration time value you've chosen.

--h2-transition-duration-[KEY]

app.css 
1
2
3
.transition-duration: {
  transition: all var(--h2-transition-duration-slow) ease;
}

Transition easing function variables follow the standard pattern and are named using your specified key value and return the function value you've chosen.

--h2-transition-function-[KEY]

app.css 
1
2
3
.transition-function: {
  transition: all .2s var(--h2-transition-function-swish);
}