Spacing

Spacing variables within design tokens play a pivotal role in establishing consistent layout and visual hierarchy. These variables abstract specific spacing values, such as margins, padding, and grid sizes, into reusable units.

Usage

As a best practice, we strongly advise against hard-coding spacing values. Instead, you should opt to reuse predefined spacing variables whenever possible.

This approach ensures that your component functions correctly across various Honeycomb themes. It's crucial because different themes may apply different spacing rules, and hardcoded numbers in custom components can lead to layout issues when used alongside Honeycomb components.

For development the variables can be pulled as CSS custom properties from our theme files.

Consider using variables as much as possible when you're adding custom styles to components.

Note that when using SASS you can use cssvar() function that takes care of prefixing the variables.

// including honeycomb tools and theme variables
@import '@flixbus/honeycomb/assets/scss/honeycomb-tools';
@import '@flixbus/honeycomb/assets/scss/honeycomb-themes';

.my-awesome-box-component {
  margin-bottom: cssvar(spacing-2);
  padding: cssvar(spacing-2);
}

In pure CSS this would be translated to:

.my-awesome-box-component {
  margin-bottom: var(--flix-spacing-2);
  padding: 0 var(--flix-spacing-2);
}

For hardcoded numbers like 5px try to apply the nearest spacing variable e.g. spacing-1.