SCSS Themes

The SCSS mixins can be used after installing Honeycomb NPM package in the following directory:

node_modules/@flixbus/honeycomb/dist/scss/themes

Each theme has their own configurable file:

flix.scss
kamil.scss
neptune.scss
high-contrast.scss

The following parameters can be configured:

Option	Supported values	Default	Description
`$modes`	`('dark', 'tvm')`	`('dark')`	List of modes to include in the theme.
`$merged`	`false`, `true`, `('dark', 'tvm')`	`false`	Generates the theme with the requested modes merged into the base theme. The merged tokens will not create modifier classes and cannot be toggled.
`$use-root-selector`	`false`, `true`	`false`	Deprecated. This option is here for backwards-compatibility. Generates the theme without the base class names, putting the variables on the `:root` selector instead. The modifiers classes are still created with theme class name unless you choose to merge the tokens into the base theme.

For each brand there is a configurable mixin you can use with your desired setup.

For example, let's create an app that uses use the flix and neptune themes with both dark and tvm modes. On your own main.scss file import the theme scss files with your desired configuration, like so:

// Your other SCSS imports here...
@use '@flixbus/honeycomb/dist/scss/honeycomb-tools.scss' as hc;
// Configure flix theme with dark and tvm modes 👇
@use '@flixbus/honeycomb/dist/scss/themes/flix.scss' with ($modes: ('dark', 'tvm'));
 // Same for neptune theme 👇
@use '@flixbus/honeycomb/dist/scss/themes/neptune.scss' with ($modes: ('dark', 'tvm'));

// my component using HC variables that will change depending on theme applied on the theming container
.my-component {
  background: hc.cssvar(box-bg-color);
  padding: hc.cssvar(spacing-4);
}

Then on the theming container in your HTML file you can toggle the theme class names:

<!DOCTYPE html>
<!-- adding a theme container -->
<!-- `flix-theme-flix`: uses flix theme -->
<!-- `flix-theme-dark`: applies dark mode -->
<!-- `flix-theme-tvm`: applies tvm mode -->
<html class="flix-theme-flix flix-theme-dark flix-theme-tvm">
<!-- 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">
    <!-- My custom components as styles in `main.scss`. -->
    <div class="my-component"></div>
  </section>
  <footer class="flix-footer"></footer>
</body>
</html>
<!DOCTYPE html>
<!-- adding a theme container -->
<!-- `flix-theme-flix`: uses flix theme -->
<!-- `flix-theme-dark`: applies dark mode -->
<!-- `flix-theme-tvm`: applies tvm mode -->
<html class="flix-theme-flix flix-theme-dark flix-theme-tvm">
<!-- 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">
    <!-- My custom components as styles in `main.scss`. -->
    <div class="my-component"></div>
  </section>
  <footer class="flix-footer"></footer>
</body>
</html>

Now if you toggle between flix-theme-flix and flix-theme-neptune you will see your application change brands.

The modifier classes are the same for both brands, so going on and off dark mode is as easy as toggling the flix-theme-dark class name on the head, no matter which brands is active at the moment.

Convenience files

For your convenience we also provide pre-configured SCSS files with different default values that should cover the most common use cases.

You can use these files and even tweak them to achieve your desire output.

Default

flix.scss, kamil.scss, neptune.scss
The default themes will generate a branded theme with support for dark mode modifier.
Fully customizable to your needs, check the options documentation above for configuration options for these files.
You can import them from your project main SCSS files:
- @use '@flixbus/honeycomb/dist/scss/themes/flix.scss';
Importing from SCSS allows you to configure the themes using the with tag from Sass @use, e.g.:
- @use '@flixbus/honeycomb/dist/scss/themes/flix.scss' with ($modes: ('dark', 'tvm'));
- @use '@flixbus/honeycomb/dist/scss/themes/neptune.scss' with ($modes: ('tvm'), $merged: true);
- @use '@flixbus/honeycomb/dist/scss/themes/kamil.scss' with ($modes: ('dark', 'tvm'), $merged: ('tvm'));
You can also import them on your JavaScript endpoints, but this will not let you use SASS with configuration arguments and you will have to rely only on the default behavior or use some of the following convenience files:
- import '@flixbus/honeycomb/dist/scss/themes/flix.scss';
- import '@flixbus/honeycomb/dist/scss/themes/neptune.scss';

Base

flix-base.scss, kamil-base.scss, neptune-base.scss
The base brand themes only.
No modifiers, only "light mode".
Flix base file allows you to configure with $use-root-selector: true to apply the theme on the :root selector instead of the theme class names.

Dark

flix-dark.scss, kamil-dark.scss, neptune-dark.scss
The dark brand themes only.
Applies variables on respective flix-theme-flix-dark, flix-theme-kamil-dark, flix-theme-neptune-dark theme class names.
No modifiers.
No configuration possible.

TVM

flix-tvm.scss, kamil-tvm.scss, neptune-tvm.scss
The TVM brand themes.
Supports dark modifier with class flix-theme-dark.
Applies base theme on respective flix-theme-flix-tvm, flix-theme-kamil-tvm, flix-theme-neptune-tvm theme.
No configuration possible.

Theme variables

We use CSS custom properties for theming our components, to namespace Honeycomb theme vars, all variables are prefixed with a --flix prefix.

If you have SCSS/SASS based stylesheets you can also use cssvar() function shipped with Honeycomb Tools, that will take care of prefixing the theme variables for you.

If you want to 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:

// including honeycomb tools and theme variables
@use '@flixbus/honeycomb/dist/scss/honeycomb-tools' as hc;
@use '@flixbus/honeycomb/dist/scss/themes/flix.scss';

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