Edit on Github

Customize Business Pack theme

Custom CSS properties allow you to easily override the visual style of DotVVM Business Pack controls.

Naming conventions

The custom properties are divided into state, global and control-specific properties. All custom properties are constructed using the same convention.

For example, the properties might look like this: --bp-padding-horizontal_large. Each custom property name starts with the prefix --bp.

The second part of the custom property is the name of the property that is being modified with a suffix, such as padding-horizontal, text-color, or gap. The third part denotes the modifier, in our case large. The prefix and the name of the custom property are joined by a „-“ separator, and „_“ is used to append the modifier.

Override properties globally

All custom properties are set on the pseudo-element :root by default, which is at the same level as the html element in the page DOM.

In order to override the styles of DotVVM Business Pack easily, we recommend that you create a a custom CSS class (e.g. .bp-override), and apply it on the body element.

<body class="bp-override">
  <!-- Page content -->
</body>

.bp-override{
	--bp-padding-horizontal_large: 2em;
}

State properties

These custom properties configure the color appearance for various control states (e.g. success, danger, warning, hover, active, etc.). All custom properties configuring colors should use the HSL (hue, saturation, lightness) format.

There are also custom properties that represent multipliers (e.g. --bp-hover). Using these properties, you can easily manipulate with lightness of a specific color.

.bp-override {
  --bp-hover: .8;
  --bp-active: .6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
  --bp-color_success-disabled: hsl(0, 0%, 80%);
}

Control-specific properties

Some controls, such as Alert or TabControl, use component-specific properties in addition to the global custom properties. You can recognize these properties easily - they start with the control name immediately after the –bp prefix (e.g. --bp-alert-background-color_warning).

.bp-override {
  --bp-popup-z-index: 100;
  --bp-modal-z-index: 1000;
  --bp-alert-border-left-width: .2em;
  --bp-alert-border-width: 0;
  --bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
  --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
}

Customize styles on specific controls

If you want to keep the original style of DotVVM Business Pack but you need to customize the style for a particular control, you can simply override the custom property at the level of that control.

You can set property on the base CSS class generated by the control. You don't have to create your own CSS class like .my-button because the CSS class selector has higher specificity than the :root preudo-element.

.dotvvm-bp-button {
  --bp-padding-horizontal_large: 1rem;
  --bp-padding-vertical: .5rem;
  --bp-gap-m: 1em;
}

List of all custom CSS properties

:root {
  /* state properties */
  --bp-hover: .8;
  --bp-active: .6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
  --bp-color_base-disabled: hsl(0, 0%, 80%);
  --bp-color_base-overlay: hsla(0, 0%, 65%, .8);
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
  --bp-color_primary-disabled: hsl(0, 0%, 80%);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
  --bp-color_secondary-disabled: hsl(0, 0%, 80%);
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
  --bp-color_default-disabled: hsl(0, 0%, 80%);
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
  --bp-color_info-disabled: hsl(0, 0%, 80%);  
  --bp-color_warning: hsl(35, 84%, 62%);
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
  --bp-color_warning-disabled: hsl(0, 0%, 80%);
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
  --bp-color_danger-disabled: hsl(0, 0%, 80%);
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
  --bp-color_success-disabled: hsl(0, 0%, 80%);
  --bp-color_transparent: hsla(0, 0%, 0%, 0);
  --bp-color_base-contrast: hsl(0, 0%, 0%);
  --bp-color_focus: hsla(41, 95%, 54%, 1);
  --bp-color_error: hsl(2, 80%, 58%);

  /* global properties */
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-background-color: var(--bp-color_base);
  --bp-background-color_hover: var(--bp-color_base-hover);
  --bp-border-width: 1px;
  --bp-border-radius: 0;
  --bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
  --bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
  --bp-control-font-size: 1rem;
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-font-size: .8em;
  --bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-line-height: 1.4;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal_large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-text-decoration: none;

  /* control-specific properties */
  --bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
  --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
  --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
  --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
  --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
  --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
  --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
  --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
  --bp-alert-border-left-width: .2em;
  --bp-alert-border-width: 0;
  --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-checkbox-size: 1.2em;
  --bp-data-pager_border-width: 0;
  --bp-form-item-border-color: var(--bp-border-color);
  --bp-form-item-width: 14em;
  --bp-footer_border-bottom-width: 0;
  --bp-grid-view_border-bottom-width: 0;
  --bp-header_border-bottom-width: 0;
  --bp-modal-z-index: 1000;
  --bp-picker-background-color: var(--bp-color_base);
  --bp-popup-max-height: 20em;
  --bp-popup-z-index: 100;
  --bp-slider-grip_width-multiplier: .4em;
  --bp-slider-grip_height-multiplier: 1em;
  --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
  --bp-tab-control-item_border-width: 0;
  --bp-tab-control-nav_gap: var(--bp-gap-s);
  --bp-tab-control_border-bottom-multiplier: 2;
}

See also

Information about cookies

We use cookies to analyze our traffic, personalize content and ads, and to provide some social media features. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services.

Edit options

Information about cookies

We use cookies to analyze our traffic, personalize content and ads, and to provide some social media features. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services.

Choose which cookies you want to enable

Necessary cookies Always allowed

Necessary cookies are essential and maintain information based on your activity on our site, like remembering your signed in account, selection of your language, or products added to the shopping cart. The website cannot work properly without these cookies.

Google Analytics

We use these cookies to measure, collect, analyse and report how users interact with our sites to better understand their behavior. Thanks to this, we can improve the site and provide better experience. The analytics service is provided by Google Inc.

Google Ads

We use these cookies to measure conversions from our advertisement and banners distributed via Google Ads. This allows us to better target the ads and make them more relevant to you.

Facebook Pixel

We use these cookies to measure conversions from our advertisement and banners distributed via Facebook. This allows us to better target the ads and make them more relevant to you.

Smartlook

We use these cookies to measure, collect, analyse and report how users interact with our sites to better understand their behavior. Thanks to this, we can improve the site and provide better experience. The analytics service is provided by Smartlook.

Google ads user data

Google ads ad personalization