Skip to main contentSkip to site searchSkip to component search
Honeycomb

Themes

Honeycomb comes with the following themes on board:

  • flix (default)
  • flix-dark
  • neptune
  • kamil
  • high-contrast

Applying themes is done by using special CSS classes:

  • flix-theme-neptune for neptune theme;
  • flix-theme-kamil for kamil theme;
  • flix-theme-flix-dark for dark theme;
  • flix-theme-high-contrast for high contrast theme;
  • default/flix theme doesn't require any classes and is applied by default.

Generally we recommend applying these theming CSS classes to one of the root HTML elements of your application (<html> or <body> elements). Let's call this one a theming container.

There are 2 things to note related to that:

  • to make sure proper background color is applied you need to either use a flix-main-wrapper layout element within the theming container or set the background of you Apps root element via theme variable: background-color: var(--flix-bg-primary-color);
  • theming container needs to be a parent of the outer most honeycomb component including mentioned flix-main-wrapper.

The setup can look like this:

<!DOCTYPE html>
<!-- adding a theme container -->
<html class="flix-theme-dark">
<!-- applying proper background with main-wrapper element -->
<body class="flix-main-wrapper">
  <!-- Your app with all the Honeycomb component you use needs to be here -->
  <header class="flix-header"></header>
  <section class="flix-page-container"></section>
</body>
</html>

Theme variables

We utilize CSS custom properties for theming our components which makes it super easy to apply them in any CSS code. To namespace Honeycomb theme vars, all the variables are prefixed with a --flix prefix.

Say you wanna apply our ui-primary-color as a background and spacing-2 as a padding to one of your awesome components, this would look like this:

.my-awesome-component {
  padding: 0 var(--flix-spacing-2);
  background: var(--flix-ui-primary-color);
}

If you have SASS based stylesheets you can also use cssvar() function that takes care of prefixing and stuff. With this in mind the above example in SCSS would look like this:

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

.my-awesome-component {
  padding: 0 cssvar(spacing-2);
  background: cssvar(ui-primary-color);
}

Bellow you can find a list of all the available variables with their respective values. Notice that it's not only colors that are provided in there, there are also spacing and geometry vars as well as icons.

--flix-primary-brand-color: #73d700; 
--flix-secondary-brand-color: #ffad00; 
--flix-ui-primary-color: #31a100; 
--flix-ui-primary-light-color: #5cc500; 
--flix-ui-primary-dark-color: #187d00; 
--flix-grayscale-0-color: #fff; 
--flix-grayscale-10-color: #f7f7f7; 
--flix-grayscale-30-color: #e1e1e1; 
--flix-grayscale-50-color: #c8c8c8; 
--flix-grayscale-70-color: #646464; 
--flix-grayscale-90-color: #444; 
--flix-grayscale-100-color: #353535; 
--flix-neutral-color: #016ae7; 
--flix-success-color: #228f00; 
--flix-success-dark-color: #136b00; 
--flix-warning-color: #ff5704; 
--flix-warning-dark-color: #c42d00; 
--flix-danger-color: #dd2828; 
--flix-danger-dark-color: #b31414; 
--flix-bg-primary-color: #fff; 
--flix-bg-primary-transparent-color: rgba(255, 255, 255, 0.88); 
--flix-bg-secondary-color: #f7f7f7; 
--flix-box-bg-color: #fff; 
--flix-highlight-color: #e5f9c0; 
--flix-overlay-bg-color: rgba(0, 0, 0, 0.5); 
--flix-focus-outline-color: #016ae7; 
--flix-content-primary-color: #353535; 
--flix-content-secondary-color: #646464; 
--flix-heading-font-color: #353535; 
--flix-link-color: #0047de; 
--flix-line-primary-color: #c8c8c8; 
--flix-icon-primary-color: #8b8b8b; 
--flix-icon-secondary-color: #31a100; 
--flix-box-shadow-color: rgba(0, 0, 0, 0.18); 
--flix-box-shadow-subtle-color: rgba(0, 0, 0, 0.06); 
--flix-button-primary-color: #ffcb46; 
--flix-button-secondary-color: #a2e53f; 
--flix-button-label-color: #353535; 
--flix-header-bg-color: #a2e53f; 
--flix-header-color: #353535; 
--flix-header-nav-bg-color-tablet: #73d700; 
--flix-input-border-color: #8b8b8b; 
--flix-input-height-mobile: 44px; 
--flix-input-height-desktop: 36px; 
--flix-spacing-1: 6px; 
--flix-spacing-2: 12px; 
--flix-spacing-3: 18px; 
--flix-spacing-4: 24px; 
--flix-spacing-5: 30px; 
--flix-spacing-6: 36px; 
--flix-spacing-7: 42px; 
--flix-spacing-8: 48px; 
--flix-spacing-9: 54px; 
--flix-spacing-10: 60px; 
--flix-spacing-11: 66px; 
--flix-spacing-12: 72px; 
--flix-spacing-half: 3px; 
--flix-page-min-width: 320px; 
--flix-page-max-width: 1200px; 
--flix-font-size-primary: 1rem; 
--flix-font-size-small: 0.875rem; 
--flix-font-size-fineprint: 0.75rem; 
--flix-font-size-h1: 1.7rem; 
--flix-font-size-h2: 1.3rem; 
--flix-font-size-h3: 1.1rem; 
--flix-font-size-h4: 1rem; 
--flix-line-height-primary: 1.5rem; 
--flix-line-height-small: 1.125rem; 
--flix-line-height-fineprint: 0.938rem; 
--flix-line-height-h1: 2rem; 
--flix-line-height-h2: 1.7rem; 
--flix-line-height-h3: 1.5rem; 
--flix-line-height-h4: 1.5rem; 
--flix-hover-layer-color: linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06)); 
--flix-pressed-layer-color: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)); 
--flix-disabled-element-opacity: 0.5; 
--flix-primary-border-radius: 6px; 
--flix-primary-box-shadow: 0px 6px 12px rgba(0, 0, 0, .06), 0px 3px 18px rgba(0, 0, 0, .06), 0px 3px 6px rgba(0, 0, 0, .18); 
--flix-font-family-primary: Roboto, Arial, sans-serif; 
--flix-font-weight-normal: 400; 
--flix-font-weight-semibold: 400; 
--flix-font-weight-bold: 700; 
--flix-primary-brand-color: #73d700; 
--flix-secondary-brand-color: #ffad00; 
--flix-ui-primary-color: #73d700; 
--flix-ui-primary-light-color: #44b300; 
--flix-ui-primary-dark-color: #cef38d; 
--flix-grayscale-0-color: #252525; 
--flix-grayscale-10-color: #353535; 
--flix-grayscale-30-color: #444; 
--flix-grayscale-50-color: #646464; 
--flix-grayscale-70-color: #8b8b8b; 
--flix-grayscale-90-color: #c8c8c8; 
--flix-grayscale-100-color: #fff; 
--flix-neutral-color: #039fd5; 
--flix-success-color: #44b300; 
--flix-success-dark-color: #cef38d; 
--flix-warning-color: #ff8206; 
--flix-warning-dark-color: #ffe393; 
--flix-danger-color: #fd5a5a; 
--flix-danger-dark-color: #ffc9ce; 
--flix-bg-primary-color: #252525; 
--flix-bg-primary-transparent-color: rgba(53, 53, 53, 0.88); 
--flix-bg-secondary-color: #202020; 
--flix-box-bg-color: #353535; 
--flix-highlight-color: #136b00; 
--flix-overlay-bg-color: rgba(0, 0, 0, 0.5); 
--flix-focus-outline-color: #016ae7; 
--flix-content-primary-color: #fff; 
--flix-content-secondary-color: #c8c8c8; 
--flix-heading-font-color: #fff; 
--flix-link-color: #3bd0de; 
--flix-line-primary-color: #646464; 
--flix-icon-primary-color: #fff; 
--flix-icon-secondary-color: #fff; 
--flix-box-shadow-color: rgba(0, 0, 0, 0.18); 
--flix-box-shadow-subtle-color: rgba(0, 0, 0, 0.06); 
--flix-button-primary-color: #ffcb46; 
--flix-button-secondary-color: #a2e53f; 
--flix-button-label-color: #353535; 
--flix-header-bg-color: #0f5900; 
--flix-header-color: #fff; 
--flix-header-nav-bg-color-tablet: #0b4000; 
--flix-input-border-color: #c8c8c8; 
--flix-input-height-mobile: 44px; 
--flix-input-height-desktop: 36px; 
--flix-spacing-1: 6px; 
--flix-spacing-2: 12px; 
--flix-spacing-3: 18px; 
--flix-spacing-4: 24px; 
--flix-spacing-5: 30px; 
--flix-spacing-6: 36px; 
--flix-spacing-7: 42px; 
--flix-spacing-8: 48px; 
--flix-spacing-9: 54px; 
--flix-spacing-10: 60px; 
--flix-spacing-11: 66px; 
--flix-spacing-12: 72px; 
--flix-spacing-half: 3px; 
--flix-page-min-width: 320px; 
--flix-page-max-width: 1200px; 
--flix-font-size-primary: 1rem; 
--flix-font-size-small: 0.875rem; 
--flix-font-size-fineprint: 0.75rem; 
--flix-font-size-h1: 1.7rem; 
--flix-font-size-h2: 1.3rem; 
--flix-font-size-h3: 1.1rem; 
--flix-font-size-h4: 1rem; 
--flix-line-height-primary: 1.5rem; 
--flix-line-height-small: 1.125rem; 
--flix-line-height-fineprint: 0.938rem; 
--flix-line-height-h1: 2rem; 
--flix-line-height-h2: 1.7rem; 
--flix-line-height-h3: 1.5rem; 
--flix-line-height-h4: 1.5rem; 
--flix-hover-layer-color: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)); 
--flix-pressed-layer-color: linear-gradient(rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.24)); 
--flix-disabled-element-opacity: 0.5; 
--flix-primary-border-radius: 6px; 
--flix-primary-box-shadow: 0px 6px 12px rgba(0, 0, 0, .06), 0px 3px 18px rgba(0, 0, 0, .06), 0px 3px 6px rgba(0, 0, 0, .18); 
--flix-font-family-primary: Roboto, Arial, sans-serif; 
--flix-font-weight-normal: 400; 
--flix-font-weight-semibold: 400; 
--flix-font-weight-bold: 700;