CSS Themes

If you are using CSS from our CDN you can find them in the following url:

• https://honeycomb.flixbus.com/dist/{VERSION_TAG}/css/themes

If you want to use the CSS files from the NPM package, you can find them in the following directory:

• node_modules/@flixbus/honeycomb/dist/css/themes

The file are organized by name according to which brand and mods you want to include. Here is the list of available CSS files on our CDN:

Flix

Default

Class names: flix-theme-flix, flix-theme-dark

Base theme plus dark modifier. The default endpoint if you want to provide a Flix app that can have dark mode that the user can toggle on and off.

Base

Class names: flix-theme-flix

Only the base theme without any other modifiers. Use this theme if you provide a Flix app that only has light mode.

Dark

Class names: flix-theme-flix-dark

Only dark theme. Use this theme if you provide a Flix app that only has dark mode.

TVM

Class names: flix-theme-flix-tvm, flix-theme-dark

TVM (Ticket Vending Machine) theme with support for dark mode and no other modifiers. Use this theme if you provide a Flix TVM app that can toggle dark mode on and off.

Kamil

Default

Class names: flix-theme-kamil, flix-theme-dark

Base theme plus dark modifier. The default endpoint if you want to provide a Kamil Koç app that can have dark mode that the user can toggle on and off.

Base

Class names: flix-theme-kamil

Only the base theme without any other modifiers. Use this theme if you provide a Kamil Koç app that only has light mode.

Dark

Class names: flix-theme-kamil-dark

Only dark theme. Use this theme if you provide a Kamil Koç app that only has dark mode.

TVM

Class names: flix-theme-kamil-tvm, flix-theme-dark

TVM (Ticket Vending Machine) theme with support for dark mode and no other modifiers. Use this theme if you provide a Kamil Koç TVM app that can toggle dark mode on and off.

Neptune

Default

Class names: flix-theme-neptune, flix-theme-dark

Base theme plus dark modifier. The default endpoint if you want to provide a Greyhound app that can have dark mode that the user can toggle on and off.

Base

Class names: flix-theme-neptune

Only the base theme without any other modifiers. Use this theme if you provide a Greyhound app that only has light mode.

Dark

Class names: flix-theme-neptune-dark

Only dark theme. Use this theme if you provide a Greyhound app that only has dark mode.

TVM

Class names: flix-theme-neptune-tvm, flix-theme-dark

TVM (Ticket Vending Machine) theme with support for dark mode and no other modifiers. Use this theme if you provide a Greyhound TVM app that can toggle dark mode on and off.

High Contrast

Class names: flix-theme-high-contrast

High contrast theme without modifiers. This endpoint provides an unbranded high contrast theme.

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 variables are prefixed with a --flix prefix.

Say 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:

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