Skip to main contentSkip to docs navigation
View on GitHub

CSS variables

Use Chassis CSS's CSS custom properties for fast and forward-looking design and development.

On this page

Chassis CSS includes many CSS custom properties (variables) in its compiled CSS for real-time customization without the need to recompile Sass. These provide easy access to commonly used values like the theme colors, breakpoints, and primary font stacks when working in a browser inspector, code sandbox, or general prototyping.

All custom properties are prefixed with cx- to avoid conflicts with third-party CSS.

Root variables

The variables below (note that :root is required) are available anywhere Chassis CSS is loaded. They're defined in _root.scss and included in the compiled dist files.

Default

These CSS variables are available everywhere, regardless of color mode.

CSS
[data-cx-theme=light] {
  --cx-form-caret: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%231c2021' viewBox='0 0 24 24'%3e%3cpath d='m11.121 16.629-7.5-7.5a1.205 1.205 0 0 1 0-1.758 1.205 1.205 0 0 1 1.758 0l6.64 6.602 6.602-6.602a1.205 1.205 0 0 1 1.758 0c.508.469.508 1.29 0 1.758l-7.5 7.5a1.205 1.205 0 0 1-1.758 0Z'/%3e%3c/svg%3e");
  --cx-form-caret-disabled: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='rgba(28, 32, 33, 0.25)' viewBox='0 0 24 24'%3e%3cpath d='m11.121 16.629-7.5-7.5a1.205 1.205 0 0 1 0-1.758 1.205 1.205 0 0 1 1.758 0l6.64 6.602 6.602-6.602a1.205 1.205 0 0 1 1.758 0c.508.469.508 1.29 0 1.758l-7.5 7.5a1.205 1.205 0 0 1-1.758 0Z'/%3e%3c/svg%3e");
  --cx-form-check-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23ffffff' class='icon-check-solid' viewBox='0 0 24 24'%3e%3cpath d='M20.3594 6.14062C20.8672 6.60938 20.8672 7.42969 20.3594 7.89844L10.3594 17.8984C9.89062 18.4062 9.07031 18.4062 8.60156 17.8984L3.60156 12.8984C3.09375 12.4297 3.09375 11.6094 3.60156 11.1406C4.07031 10.6328 4.89062 10.6328 5.35938 11.1406L9.5 15.2422L18.6016 6.14062C19.0703 5.63281 19.8906 5.63281 20.3594 6.14062Z'/%3e%3c/svg%3e");
  --cx-form-radio-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23ffffff' class='icon-circle-small-solid' viewBox='0 0 24 24'%3e%3cpath d='M5.75 11.9805C5.75 9.75391 6.92188 7.72266 8.875 6.58984C10.7891 5.45703 13.1719 5.45703 15.125 6.58984C17.0391 7.72266 18.25 9.75391 18.25 11.9805C18.25 14.2461 17.0391 16.2773 15.125 17.4102C13.1719 18.543 10.7891 18.543 8.875 17.4102C6.92188 16.2773 5.75 14.2461 5.75 11.9805Z'/%3e%3c/svg%3e");
  --cx-form-indeterminate-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23ffffff' class='icon-minus-solid' viewBox='0 0 24 24'%3e%3cpath d='M20.125 12C20.125 12.7031 19.5391 13.25 18.875 13.25H5.125C4.42188 13.25 3.875 12.7031 3.875 12C3.875 11.3359 4.42188 10.75 5.125 10.75H18.875C19.5391 10.75 20.125 11.3359 20.125 12Z'/%3e%3c/svg%3e");
  --cx-form-check-icon-disabled: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='rgba(28, 32, 33, 0.25)' class='icon-check-solid' viewBox='0 0 24 24'%3e%3cpath d='M20.3594 6.14062C20.8672 6.60938 20.8672 7.42969 20.3594 7.89844L10.3594 17.8984C9.89062 18.4062 9.07031 18.4062 8.60156 17.8984L3.60156 12.8984C3.09375 12.4297 3.09375 11.6094 3.60156 11.1406C4.07031 10.6328 4.89062 10.6328 5.35938 11.1406L9.5 15.2422L18.6016 6.14062C19.0703 5.63281 19.8906 5.63281 20.3594 6.14062Z'/%3e%3c/svg%3e");
  --cx-form-radio-icon-disabled: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='rgba(28, 32, 33, 0.25)' class='icon-circle-small-solid' viewBox='0 0 24 24'%3e%3cpath d='M5.75 11.9805C5.75 9.75391 6.92188 7.72266 8.875 6.58984C10.7891 5.45703 13.1719 5.45703 15.125 6.58984C17.0391 7.72266 18.25 9.75391 18.25 11.9805C18.25 14.2461 17.0391 16.2773 15.125 17.4102C13.1719 18.543 10.7891 18.543 8.875 17.4102C6.92188 16.2773 5.75 14.2461 5.75 11.9805Z'/%3e%3c/svg%3e");
  --cx-form-indeterminate-icon-disabled: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='rgba(28, 32, 33, 0.25)' class='icon-minus-solid' viewBox='0 0 24 24'%3e%3cpath d='M20.125 12C20.125 12.7031 19.5391 13.25 18.875 13.25H5.125C4.42188 13.25 3.875 12.7031 3.875 12C3.875 11.3359 4.42188 10.75 5.125 10.75H18.875C19.5391 10.75 20.125 11.3359 20.125 12Z'/%3e%3c/svg%3e");
  --cx-form-switch-idle-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(28, 32, 33, 0.5)'/%3e%3c/svg%3e");
  --cx-form-switch-focus-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231c2021'/%3e%3c/svg%3e");
  --cx-form-switch-checked-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
  --cx-form-switch-disabled-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(28, 32, 33, 0.25)'/%3e%3c/svg%3e");
  --cx-form-icon-valid: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='%230b8845' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 22C8.40625 22 5.125 20.125 3.32812 17C1.53125 13.9141 1.53125 10.125 3.32812 7C5.125 3.91406 8.40625 2 12 2C15.5547 2 18.8359 3.91406 20.6328 7C22.4297 10.125 22.4297 13.9141 20.6328 17C18.8359 20.125 15.5547 22 12 22ZM16.4141 10.1641H16.375C16.7656 9.8125 16.7656 9.22656 16.375 8.83594C16.0234 8.48438 15.4375 8.48438 15.0859 8.83594L10.75 13.2109L8.91406 11.375C8.52344 10.9844 7.9375 10.9844 7.58594 11.375C7.19531 11.7266 7.19531 12.3125 7.58594 12.6641L10.0859 15.1641C10.4375 15.5547 11.0234 15.5547 11.4141 15.1641L16.4141 10.1641Z' fill='%230b8845'/%3e%3c/svg%3e");
  --cx-form-icon-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23ac190e' class='icon-exclamation-circle-solid' viewBox='0 0 24 24'%3e%3cpath d='M12 22C8.40625 22 5.125 20.125 3.32812 17C1.53125 13.9141 1.53125 10.125 3.32812 7C5.125 3.91406 8.40625 2 12 2C15.5547 2 18.8359 3.91406 20.6328 7C22.4297 10.125 22.4297 13.9141 20.6328 17C18.8359 20.125 15.5547 22 12 22ZM12 7C11.4531 7 11.0625 7.42969 11.0625 7.9375V12.3125C11.0625 12.8594 11.4531 13.25 12 13.25C12.5078 13.25 12.9375 12.8594 12.9375 12.3125V7.9375C12.9375 7.42969 12.5078 7 12 7ZM10.75 15.75C10.75 16.4531 11.2969 17 12 17C12.6641 17 13.25 16.4531 13.25 15.75C13.25 15.0859 12.6641 14.5 12 14.5C11.2969 14.5 10.75 15.0859 10.75 15.75Z'/%3e%3c/svg%3e");
}

[data-cx-theme=light] {
  color-scheme: light;
}

Dark mode

These variables are scoped to the built-in dark mode.

CSS
[data-cx-theme=dark] {
  color-scheme: dark;
  --cx-form-caret: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23e9eced' viewBox='0 0 24 24'%3e%3cpath d='m11.121 16.629-7.5-7.5a1.205 1.205 0 0 1 0-1.758 1.205 1.205 0 0 1 1.758 0l6.64 6.602 6.602-6.602a1.205 1.205 0 0 1 1.758 0c.508.469.508 1.29 0 1.758l-7.5 7.5a1.205 1.205 0 0 1-1.758 0Z'/%3e%3c/svg%3e");
  --cx-form-caret-disabled: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='rgba(233, 236, 237, 0.25)' viewBox='0 0 24 24'%3e%3cpath d='m11.121 16.629-7.5-7.5a1.205 1.205 0 0 1 0-1.758 1.205 1.205 0 0 1 1.758 0l6.64 6.602 6.602-6.602a1.205 1.205 0 0 1 1.758 0c.508.469.508 1.29 0 1.758l-7.5 7.5a1.205 1.205 0 0 1-1.758 0Z'/%3e%3c/svg%3e");
  --cx-form-check-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23ffffff' class='icon-check-solid' viewBox='0 0 24 24'%3e%3cpath d='M20.3594 6.14062C20.8672 6.60938 20.8672 7.42969 20.3594 7.89844L10.3594 17.8984C9.89062 18.4062 9.07031 18.4062 8.60156 17.8984L3.60156 12.8984C3.09375 12.4297 3.09375 11.6094 3.60156 11.1406C4.07031 10.6328 4.89062 10.6328 5.35938 11.1406L9.5 15.2422L18.6016 6.14062C19.0703 5.63281 19.8906 5.63281 20.3594 6.14062Z'/%3e%3c/svg%3e");
  --cx-form-radio-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23ffffff' class='icon-circle-small-solid' viewBox='0 0 24 24'%3e%3cpath d='M5.75 11.9805C5.75 9.75391 6.92188 7.72266 8.875 6.58984C10.7891 5.45703 13.1719 5.45703 15.125 6.58984C17.0391 7.72266 18.25 9.75391 18.25 11.9805C18.25 14.2461 17.0391 16.2773 15.125 17.4102C13.1719 18.543 10.7891 18.543 8.875 17.4102C6.92188 16.2773 5.75 14.2461 5.75 11.9805Z'/%3e%3c/svg%3e");
  --cx-form-indeterminate-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23ffffff' class='icon-minus-solid' viewBox='0 0 24 24'%3e%3cpath d='M20.125 12C20.125 12.7031 19.5391 13.25 18.875 13.25H5.125C4.42188 13.25 3.875 12.7031 3.875 12C3.875 11.3359 4.42188 10.75 5.125 10.75H18.875C19.5391 10.75 20.125 11.3359 20.125 12Z'/%3e%3c/svg%3e");
  --cx-form-check-icon-disabled: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='rgba(233, 236, 237, 0.25)' class='icon-check-solid' viewBox='0 0 24 24'%3e%3cpath d='M20.3594 6.14062C20.8672 6.60938 20.8672 7.42969 20.3594 7.89844L10.3594 17.8984C9.89062 18.4062 9.07031 18.4062 8.60156 17.8984L3.60156 12.8984C3.09375 12.4297 3.09375 11.6094 3.60156 11.1406C4.07031 10.6328 4.89062 10.6328 5.35938 11.1406L9.5 15.2422L18.6016 6.14062C19.0703 5.63281 19.8906 5.63281 20.3594 6.14062Z'/%3e%3c/svg%3e");
  --cx-form-radio-icon-disabled: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='rgba(233, 236, 237, 0.25)' class='icon-circle-small-solid' viewBox='0 0 24 24'%3e%3cpath d='M5.75 11.9805C5.75 9.75391 6.92188 7.72266 8.875 6.58984C10.7891 5.45703 13.1719 5.45703 15.125 6.58984C17.0391 7.72266 18.25 9.75391 18.25 11.9805C18.25 14.2461 17.0391 16.2773 15.125 17.4102C13.1719 18.543 10.7891 18.543 8.875 17.4102C6.92188 16.2773 5.75 14.2461 5.75 11.9805Z'/%3e%3c/svg%3e");
  --cx-form-indeterminate-icon-disabled: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='rgba(233, 236, 237, 0.25)' class='icon-minus-solid' viewBox='0 0 24 24'%3e%3cpath d='M20.125 12C20.125 12.7031 19.5391 13.25 18.875 13.25H5.125C4.42188 13.25 3.875 12.7031 3.875 12C3.875 11.3359 4.42188 10.75 5.125 10.75H18.875C19.5391 10.75 20.125 11.3359 20.125 12Z'/%3e%3c/svg%3e");
  --cx-form-switch-idle-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(233, 236, 237, 0.5)'/%3e%3c/svg%3e");
  --cx-form-switch-focus-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23e9eced'/%3e%3c/svg%3e");
  --cx-form-switch-checked-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
  --cx-form-switch-disabled-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(233, 236, 237, 0.25)'/%3e%3c/svg%3e");
  --cx-form-icon-valid: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='%234cd18a' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 22C8.40625 22 5.125 20.125 3.32812 17C1.53125 13.9141 1.53125 10.125 3.32812 7C5.125 3.91406 8.40625 2 12 2C15.5547 2 18.8359 3.91406 20.6328 7C22.4297 10.125 22.4297 13.9141 20.6328 17C18.8359 20.125 15.5547 22 12 22ZM16.4141 10.1641H16.375C16.7656 9.8125 16.7656 9.22656 16.375 8.83594C16.0234 8.48438 15.4375 8.48438 15.0859 8.83594L10.75 13.2109L8.91406 11.375C8.52344 10.9844 7.9375 10.9844 7.58594 11.375C7.19531 11.7266 7.19531 12.3125 7.58594 12.6641L10.0859 15.1641C10.4375 15.5547 11.0234 15.5547 11.4141 15.1641L16.4141 10.1641Z' fill='%234cd18a'/%3e%3c/svg%3e");
  --cx-form-icon-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23f85a4f' class='icon-exclamation-circle-solid' viewBox='0 0 24 24'%3e%3cpath d='M12 22C8.40625 22 5.125 20.125 3.32812 17C1.53125 13.9141 1.53125 10.125 3.32812 7C5.125 3.91406 8.40625 2 12 2C15.5547 2 18.8359 3.91406 20.6328 7C22.4297 10.125 22.4297 13.9141 20.6328 17C18.8359 20.125 15.5547 22 12 22ZM12 7C11.4531 7 11.0625 7.42969 11.0625 7.9375V12.3125C11.0625 12.8594 11.4531 13.25 12 13.25C12.5078 13.25 12.9375 12.8594 12.9375 12.3125V7.9375C12.9375 7.42969 12.5078 7 12 7ZM10.75 15.75C10.75 16.4531 11.2969 17 12 17C12.6641 17 13.25 16.4531 13.25 15.75C13.25 15.0859 12.6641 14.5 12 14.5C11.2969 14.5 10.75 15.0859 10.75 15.75Z'/%3e%3c/svg%3e");
}

Component variables

Chassis CSS uses custom properties as local variables for various components. This reduces compiled CSS size, prevents styles from leaking into nested elements (like nested tables), and makes it possible to restyle and extend components after Sass compilation without recompiling.

The table documentation shows how Chassis uses CSS variables in practice. Navbars and the CSS grid system — primarily for gutters — also use CSS variables, with more component coverage planned.

Whenever possible, CSS variables are assigned at the base component level (e.g., .navbar for navbar and its sub-components). This reduces guessing on where and how to customize, and allows for straightforward modifications in future updates.

Prefix

Most CSS variables use a prefix to avoid collisions with your own codebase. This prefix is in addition to the -- that's required on every CSS variable.

Customize the prefix via the $prefix Sass variable. By default, it's set to cx- (note the trailing dash).

Examples

CSS variables offer similar flexibility to Sass's variables, but without the need for compilation before being served to the browser. The snippet below resets the page's font and link styles with CSS variables.

CSS
body {
  font: 1rem/1.5 var(--cx-font-sans-serif);
}
a {
  color: var(--cx-blue);
}

Focus variables

Chassis CSS provides custom :focus styles using a combination of Sass and CSS variables that can be optionally added to specific components and elements. Chassis does not yet globally override all :focus styles.

Default values are set in Sass and can be customized before compiling.

scss/config/_defaults.scss
$focus-ring-width:          .1875rem;
$focus-ring-light-opacity:  .4;
$focus-ring-dark-opacity:   .6;
$focus-ring-color:          light-dark(to-opacity(var(--cue-color), var(--focus-ring-light-opacity)), to-opacity(var(--cue-color), var(--focus-ring-dark-opacity)));
// $focus-ring:                var(--focus-ring-width) solid var(--focus-ring-color);
$focus-ring-offset:         0px;

Those variables are then reassigned to :root level CSS variables that can be customized in real-time, including with options for x and y offsets (which default to their fallback value of 0).

scss/_root.scss
--focus-ring-width: #{$focus-ring-width};
--focus-ring-light-opacity: #{$focus-ring-light-opacity};
--focus-ring-dark-opacity: #{$focus-ring-dark-opacity};
--focus-ring-color: #{$focus-ring-color};
--focus-ring-offset: #{$focus-ring-offset};
// --focus-ring: #{$focus-ring};

Grid breakpoints

Grid breakpoints are available as CSS variables (except xs), but CSS variables do not work in media queries. This is by design in the CSS spec, but may change with future support for env() variables. See this Stack Overflow answer for context. In the meantime, these variables work in other CSS situations and in JavaScript.