Themes
Honeycomb comes with 4 themes on board:
defaultdarkkamilneptune
Applying themes is done by using special CSS classes:
flix-theme-darkfor dark theme;flix-theme-kamilfor kamil theme;flix-theme-neptunefor neptune theme;- default 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-wrapperlayout element within the theming container or set the background of you Apps root element via theme variable:background-color: var(--flix-primary-bg-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 primary-ui-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-primary-ui-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(primary-ui-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-primary-ui-color: #73d700;
--flix-primary-ui-light-color: #a6ec55;
--flix-primary-ui-dark-color: #5cac00;
--flix-secondary-ui-color: #ffad00;
--flix-secondary-ui-light-color: #ffcd64;
--flix-secondary-ui-dark-color: #c68600;
--flix-grayscale-0-color: #fff;
--flix-grayscale-10-color: #f7f7f7;
--flix-grayscale-30-color: #e1e1e1;
--flix-grayscale-50-color: #c8c8c8;
--flix-grayscale-70-color: #8b8b8b;
--flix-grayscale-90-color: #757575;
--flix-grayscale-100-color: #444;
--flix-neutral-color: #00b5e2;
--flix-success-color: #73d700;
--flix-success-dark-color: #5cac00;
--flix-warning-color: #ffad00;
--flix-warning-dark-color: #c68600;
--flix-danger-color: #ff5700;
--flix-danger-dark-color: #c64300;
--flix-primary-bg-color: #fff;
--flix-secondary-bg-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-primary-content-color: #444;
--flix-secondary-content-color: #757575;
--flix-danger-content-color: #c64300;
--flix-heading-font-color: #444;
--flix-link-color: #00b5e2;
--flix-primary-line-color: #e1e1e1;
--flix-primary-icon-color: #8b8b8b;
--flix-box-shadow-color: rgba(0, 0, 0, 0.18);
--flix-box-shadow-subtle-color: rgba(0, 0, 0, 0.06);
--flix-header-bg-color: #73d700;
--flix-header-bottom-border-color: #73d700;
--flix-header-color: #fff;
--flix-header-nav-bg-color-tablet: #5cac00;
--flix-header-nav-border-color-tablet: #5cac00;
--flix-input-border-color: #c8c8c8;
--flix-input-height-mobile: 44px;
--flix-input-height-desktop: 36px;
--flix-input-border-radius: 6px;
--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: 16px;
--flix-font-size-small: 14px;
--flix-font-size-fineprint: 12px;
--flix-font-size-h1: 27px;
--flix-font-size-h2: 21px;
--flix-font-size-h3: 18px;
--flix-font-size-h4: 16px;
--flix-font-size-button: 16px;
--flix-line-height-primary: 1.5em;
--flix-line-height-small: 18px;
--flix-line-height-fineprint: 15px;
--flix-line-height-h1: 33px;
--flix-line-height-h2: 27px;
--flix-line-height-h3: 24px;
--flix-line-height-h4: 24px;
--flix-icon-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M485.3 618L279.2 411.7A20.8 20.8 0 1 1 308.3 382.2L500 573.7 691.7 382A20.8 20.8 0 0 1 721.1 411.5L515.3 617.3C515.1 617.3 515.1 617.7 514.9 617.9A20.8 20.8 0 0 1 485.3 618Z' fill='rgba(139, 139, 139, 0.99)'/%3E%3C/svg%3E");
--flix-icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M382 485.3L588.3 279.2A20.8 20.8 0 1 1 617.8 308.6L426.3 500 618 691.7A20.8 20.8 0 0 1 588.5 721.1L382.7 515.3C382.7 515.1 382.3 515.1 382.1 514.9A20.8 20.8 0 0 1 382 485.3Z' fill='rgba(139, 139, 139, 0.99)'/%3E%3C/svg%3E");
--flix-icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M618 514.7L411.7 720.8A20.8 20.8 0 0 1 382.2 691.4L573.7 500 382 308.3A20.8 20.8 0 0 1 411.5 279.2L617.3 485C617.3 485.2 617.7 485.2 618 485.4A20.8 20.8 0 0 1 618 514.7Z' fill='rgba(139, 139, 139, 0.99)'/%3E%3C/svg%3E");
--flix-icon-attention-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M500 83.3A416.7 416.7 0 1 0 916.7 500 416.7 416.7 0 0 0 500 83.3ZM479.2 270.8A20.8 20.8 0 0 1 520.8 270.8V562.5A20.8 20.8 0 0 1 479.2 562.5ZM500 750A41.7 41.7 0 1 1 541.7 708.3 41.7 41.7 0 0 1 500 750Z' fill='rgba(255, 87, 0, 0.99)'/%3E%3C/svg%3E");
--flix-icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M458.3 489.4A41.7 41.7 0 1 1 416.7 447.7 41.7 41.7 0 0 1 458.3 489.4ZM583.3 447.7A41.7 41.7 0 1 0 625 489.4 41.7 41.7 0 0 0 583.3 447.7ZM750 447.7A41.7 41.7 0 1 0 791.7 489.4 41.7 41.7 0 0 0 750 447.7ZM416.7 572.7A41.7 41.7 0 1 0 458.3 614.4 41.7 41.7 0 0 0 416.7 572.7ZM583.3 572.7A41.7 41.7 0 1 0 625 614.4 41.7 41.7 0 0 0 583.3 572.7ZM750 572.7A41.7 41.7 0 1 0 791.7 614.4 41.7 41.7 0 0 0 750 572.7ZM250 572.7A41.7 41.7 0 1 0 291.7 614.4 41.7 41.7 0 0 0 250 572.7ZM416.7 697.7A41.7 41.7 0 1 0 458.3 739.4 41.7 41.7 0 0 0 416.7 697.7ZM250 697.7A41.7 41.7 0 1 0 291.7 739.4 41.7 41.7 0 0 0 250 697.7ZM917.1 738.7A125.4 125.4 0 0 1 792.3 864L209 864.8A125.4 125.4 0 0 1 83.7 740L82.9 323.4A125.4 125.4 0 0 1 207.7 198.1H229.2V156A20.8 20.8 0 0 1 270.8 156V198L729.2 197.4V156A20.8 20.8 0 0 1 770.8 156V197.3H791A125.4 125.4 0 0 1 916.2 322L916.2 362.7C916.2 363.3 916.6 363.8 916.6 364.4S916.3 365.5 916.2 366ZM124.6 343.5H874.6V322.1A83.3 83.3 0 0 0 791.3 238.8H770.8V280.9A20.8 20.8 0 1 1 729.2 280.9V239L270.8 239.7V281A20.8 20.8 0 1 1 229.2 281V239.7H207.7A83.3 83.3 0 0 0 124.4 323.1ZM875.4 738.8L874.7 385.2H124.7L125.4 740A83.3 83.3 0 0 0 208.8 823.3L792.1 822.5A83.3 83.3 0 0 0 875.4 738.8Z' fill='rgba(139, 139, 139, 0.99)'/%3E%3C/svg%3E");
--flix-icon-checkbox-indeterminate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21,11H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Z' style='fill:%2373d700'/%3E%3C/svg%3E");
--flix-icon-checkmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21,4.5a.988.988,0,0,0-.707.293L8,17.086,3.708,12.794A.989.989,0,0,0,3,12.5a1,1,0,0,0-.707,1.707l5,5a1,1,0,0,0,1.414,0l13-13A1,1,0,0,0,21,4.5Zm0,1h0Z' style='fill:%2373d700'/%3E%3C/svg%3E");
--flix-icon-checkmark-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M500 83.3A416.7 416.7 0 1 0 916.7 500 416.7 416.7 0 0 0 500 83.3ZM723.1 368.9L431.4 660.6A21.1 21.1 0 0 1 424.6 665 20.1 20.1 0 0 1 417 666.6L416.7 666.7 416.3 666.7A20 20 0 0 1 408.7 665.1 20.8 20.8 0 0 1 401.9 660.7L276.9 535.7A20.8 20.8 0 0 1 306.4 506.2H306.4L416.7 616.4 693.6 339.4H693.6A20.8 20.8 0 0 1 723.1 368.9Z' fill='rgba(115, 215, 0, 0.99)'/%3E%3C/svg%3E");
--flix-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M827.2 797.8A20.8 20.8 0 0 1 797.8 827.2L500 529.5 202.3 827.2A20.8 20.8 0 0 1 172.8 797.8H172.8L470.5 500 172.8 202.3A20.8 20.8 0 0 1 202.3 172.8H202.3L500 470.5 797.8 172.7H797.8A20.8 20.8 0 0 1 827.2 202.2L529.5 500 827.2 797.8Z' fill='rgba(139, 139, 139, 0.99)'/%3E%3C/svg%3E");
--flix-icon-danger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M500 83.3A416.7 416.7 0 1 0 916.7 500 416.7 416.7 0 0 0 500 83.3ZM500 875A375 375 0 1 1 875 500 375.4 375.4 0 0 1 500 875ZM702.2 327.3L529.5 500 702.2 672.8H702.2A20.8 20.8 0 0 1 672.8 702.2L500 529.5 327.3 702.2A20.8 20.8 0 0 1 297.8 672.8H297.8L470.5 500 297.8 327.3A20.8 20.8 0 0 1 327.3 297.8H327.3L500 470.5 672.8 297.7H672.8A20.8 20.8 0 0 1 702.2 327.2Z' fill='rgba(255, 87, 0, 0.99)'/%3E%3C/svg%3E");
--flix-icon-danger-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M500 83.3A416.7 416.7 0 1 0 916.7 500 416.7 416.7 0 0 0 500 83.3ZM702.2 672.8H702.2A20.8 20.8 0 0 1 672.8 702.2L500 529.5 327.3 702.2A20.8 20.8 0 0 1 297.8 672.8H297.8L470.5 500 297.8 327.3A20.8 20.8 0 0 1 327.3 297.8H327.3L500 470.5 672.8 297.7H672.8A20.8 20.8 0 0 1 702.2 327.2L529.5 500Z' fill='rgba(255, 87, 0, 0.99)'/%3E%3C/svg%3E");
--flix-icon-header-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M485.3 618L279.2 411.7A20.8 20.8 0 1 1 308.3 382.2L500 573.7 691.7 382A20.8 20.8 0 0 1 721.1 411.5L515.3 617.3C515.1 617.3 515.1 617.7 514.9 617.9A20.8 20.8 0 0 1 485.3 618Z' fill='rgba(255, 255, 255, 0.99)'/%3E%3C/svg%3E");
--flix-icon-header-burger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M916.7 500A20.8 20.8 0 0 1 895.8 520.8H104.2A20.8 20.8 0 0 1 104.2 479.2H895.8A20.8 20.8 0 0 1 916.7 500ZM104.2 270.8H895.8A20.8 20.8 0 0 0 895.8 229.2H104.2A20.8 20.8 0 0 0 104.2 270.8ZM895.8 729.2H104.2A20.8 20.8 0 0 0 104.2 770.8H895.8A20.8 20.8 0 0 0 895.8 729.2Z' fill='rgba(255, 255, 255, 0.99)'/%3E%3C/svg%3E");
--flix-icon-header-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M827.2 797.8A20.8 20.8 0 0 1 797.8 827.2L500 529.5 202.3 827.2A20.8 20.8 0 0 1 172.8 797.8H172.8L470.5 500 172.8 202.3A20.8 20.8 0 0 1 202.3 172.8H202.3L500 470.5 797.8 172.7H797.8A20.8 20.8 0 0 1 827.2 202.2L529.5 500 827.2 797.8Z' fill='rgba(139, 139, 139, 0.99)'/%3E%3C/svg%3E");
--flix-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M500 83.3A416.7 416.7 0 1 0 916.7 500 416.7 416.7 0 0 0 500 83.3ZM500 875A375 375 0 1 1 875 500 375.4 375.4 0 0 1 500 875ZM458.3 291.7A41.7 41.7 0 1 1 500 333.3 41.7 41.7 0 0 1 458.3 291.7ZM520.8 437.5V729.2A20.8 20.8 0 0 1 479.2 729.2V437.5A20.8 20.8 0 0 1 520.8 437.5Z' fill='rgba(0, 181, 226, 0.99)'/%3E%3C/svg%3E");
--flix-icon-info-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M500 83.3A416.7 416.7 0 1 0 916.7 500 416.7 416.7 0 0 0 500 83.3ZM520.8 729.2A20.8 20.8 0 0 1 479.2 729.2V437.5A20.8 20.8 0 0 1 520.8 437.5ZM500 333.3A41.7 41.7 0 1 1 541.7 291.7 41.7 41.7 0 0 1 500 333.3Z' fill='rgba(0, 181, 226, 0.99)'/%3E%3C/svg%3E");
--flix-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M916.7 500A20.8 20.8 0 0 1 895.8 520.8H104.2A20.8 20.8 0 0 1 104.2 479.2H895.8A20.8 20.8 0 0 1 916.7 500Z' fill='rgba(139, 139, 139, 0.99)'/%3E%3C/svg%3E");
--flix-icon-radio-checkmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M500 83.3A416.7 416.7 0 1 0 916.7 500 416.7 416.7 0 0 0 500 83.3Z' fill='rgba(115,215,0,0.99)'/%3E%3C/svg%3E");
--flix-icon-panel-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M827.2 797.8A20.8 20.8 0 0 1 797.8 827.2L500 529.5 202.3 827.2A20.8 20.8 0 0 1 172.8 797.8H172.8L470.5 500 172.8 202.3A20.8 20.8 0 0 1 202.3 172.8H202.3L500 470.5 797.8 172.7H797.8A20.8 20.8 0 0 1 827.2 202.2L529.5 500 827.2 797.8Z' fill='rgba(255,255,255,0.99)'/%3E%3C/svg%3E");
--flix-icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M916.7 500A20.8 20.8 0 0 1 895.8 520.8H520.8V895.8A20.8 20.8 0 0 1 479.2 895.8V520.8H104.2A20.8 20.8 0 0 1 104.2 479.2H479.2V104.2A20.8 20.8 0 0 1 520.8 104.2V479.2H895.8A20.8 20.8 0 0 1 916.7 500Z' fill='rgba(139, 139, 139, 0.99)'/%3E%3C/svg%3E");
--flix-icon-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M500 83.3A416.7 416.7 0 1 0 916.7 500 416.7 416.7 0 0 0 500 83.3ZM500 875A375 375 0 1 1 875 500 375.4 375.4 0 0 1 500 875ZM729.2 354.2A20.8 20.8 0 0 1 723.1 368.9L431.4 660.6A21.1 21.1 0 0 1 424.6 665 20.1 20.1 0 0 1 417 666.6L416.7 666.7 416.3 666.7A20 20 0 0 1 408.7 665.1 20.8 20.8 0 0 1 401.9 660.7L276.9 535.7A20.8 20.8 0 0 1 306.4 506.2H306.4L416.7 616.4 693.6 339.4H693.6A20.8 20.8 0 0 1 729.2 354.2Z' fill='rgba(115, 215, 0, 0.99)'/%3E%3C/svg%3E");
--flix-icon-success-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M500 83.3A416.7 416.7 0 1 0 916.7 500 416.7 416.7 0 0 0 500 83.3ZM723.1 368.9L431.4 660.6A21.1 21.1 0 0 1 424.6 665 20.1 20.1 0 0 1 417 666.6L416.7 666.7 416.3 666.7A20 20 0 0 1 408.7 665.1 20.8 20.8 0 0 1 401.9 660.7L276.9 535.7A20.8 20.8 0 0 1 306.4 506.2H306.4L416.7 616.4 693.6 339.4H693.6A20.8 20.8 0 0 1 723.1 368.9Z' fill='rgba(115, 215, 0, 0.99)'/%3E%3C/svg%3E");
--flix-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M500 83.3A416.7 416.7 0 1 0 916.7 500 416.7 416.7 0 0 0 500 83.3ZM500 875A375 375 0 1 1 875 500 375.4 375.4 0 0 1 500 875ZM639.7 610.3A20.8 20.8 0 0 1 610.2 639.8L485.2 514.8 485 514.3A20 20 0 0 1 480.8 508 20.3 20.3 0 0 1 479.2 500V208.3A20.8 20.8 0 0 1 520.8 208.3V491.4L639.7 610.2Z' fill='rgba(139, 139, 139, 0.99)'/%3E%3C/svg%3E");
--flix-icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M500 83.3A416.7 416.7 0 1 0 916.7 500 416.7 416.7 0 0 0 500 83.3ZM500 875A375 375 0 1 1 875 500 375.4 375.4 0 0 1 500 875ZM541.7 708.3A41.7 41.7 0 1 1 500 666.7 41.7 41.7 0 0 1 541.7 708.3ZM479.2 562.5V270.8A20.8 20.8 0 0 1 520.8 270.8V562.5A20.8 20.8 0 0 1 479.2 562.5Z' fill='rgba(255, 173, 0, 0.99)'/%3E%3C/svg%3E");
--flix-icon-warning-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M500 83.3A416.7 416.7 0 1 0 916.7 500 416.7 416.7 0 0 0 500 83.3ZM479.2 270.8A20.8 20.8 0 0 1 520.8 270.8V562.5A20.8 20.8 0 0 1 479.2 562.5ZM500 750A41.7 41.7 0 1 1 541.7 708.3 41.7 41.7 0 0 1 500 750Z' fill='rgba(255, 173, 0, 0.99)'/%3E%3C/svg%3E");
--flix-hover-layer-color: linear-gradient(0, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06));
--flix-pressed-layer-color: linear-gradient(0, 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;
