Full list of theme properties
Full list of theme properties
accommodationSearchFormColor
type: hex color string description: Controls the color of the accommodation search form widget.
accommodationSearchFormColorContrast
type: hex color string description: Controls the color of the text in the accommodation search form widget.
accommodationSearchFormInputColor
type: hex color string description: Controls the color of the inputs in the accommodation search form widget.
accommodationSearchFormInputTextColor
type: hex color string description: Controls the color of the text in the inputs of the accommodation search form widget.
bookingWidgetColor
type: hex color string description: Controls the color of the booking widget.
bookingWidgetColorContrast
type: hex color string description: Controls the color of text in the booking widget.
bookingWidgetPrimaryColor
type: hex color string description: Controls the color of emphasized elements in the booking widget.
bookingWidgetInputColor
type: hex color string description: Controls the color of input elements in the booking widget.
bookingWidgetInputTextColor
type: hex color string description: Controls the text color of input elements in the booking widget.
bookingWidgetSecondaryButtonColor
type: hex color string description: Controls the color of the secondary button in the booking-widget
bookingSearchFormColor
type: hex color string description: Controls the color of the booking search form.
bookingSearchFormColorContrast
type: hex color string description: Controls the color of text in the booking search form.
bookingSearchFormInputColor
type: hex color string description: Controls the color of input elements in the booking search form.
bookingSearchFormInputTextColor
type: hex color string description: Controls the text color of input elements in the booking search form.
bookingButtonColor
type: hex color string description: Controls the color of the bilberry-booking-button widget.
bookingButtonTextColor
type: hex color string description: Controls the text color of the bilberry-booking-button.
bookingButtonStyle
type: “contained” description: “outlined” | Book now button Whether the button has a filled or transparent background.
basketIconColor
type: hex color string description: Basket Icon Color of the widget.
basketIconTextColor
type: hex color string description: Basket Icon Text color
basketIconBorderColor
type: hex color string description: Basket Icon Border color
basketIconCountColor
type: hex color string description: Basket Icon Color of the number that represents the count of items in cart.
checkoutHeaderColor
type: hex color string description: Controls the color of the header on the checkout page.
checkoutHeaderColorContrast
type: hex color string description: Controls the color of text on the header of the checkout page.
checkoutHeaderPrimaryColor
type: hex color string description: Controls the color of the active tab on the header of the checkout page.
productCardColor
type: hex color string description: Controls the background color of the product card.
productCardTextColor
type: hex color string description: Controls the text color of the product card.
productCardPrimaryColor
type: hex color string description: Controls the color of primary elements on the product card.
productCardPrimaryColorContrast
type: hex color string description: Controls the text color of primary elements on the product card.
productCardAccentColor
type: hex color string description: Controls the color of accent elements on the product card (e.g. the category label).
productCardAccentColorContrast
type: hex color string description: Controls the text color of accent elements on the product card.
productCardIconColor
type: hex color string description: Controls the color of icons on the product card.
productListPadding
type: number in pixels description: Controls the padding on the left and right of the product list.
productOverviewPadding
type: number in pixels description: Controls the padding on the left and right of the product overview.
inputFieldTextColor
type: hex color string description: Controls the text color of input fields.
inputFieldLabelColor
type: hex color string description: Controls the label color of input fields.
inputFieldBorderColor
type: hex color string description: Controls the border color of input fields.
primaryColor
type: hex color string description: Controls the color of buttons and other primary elements of the widgets.
primaryColorContrast
type: hex color string description: Controls the color of text on buttons and other primary elements of the widgets.
primaryButtonStyle
type: “contained” description: “outlined” | Controls whether primary buttons will have a filled or transparent background.
secondaryColor
type: hex color string description: Controls the color of buttons and other secondary elements of the widgets. This color should pass WCAG AA standard on white backgrounds.
secondaryColorContrast
type: hex color string description: Controls the color of text on buttons and other secondary elements of the widgets.
secondaryButtonStyle
type: “contained” description: “outlined” | Controls whether secondary buttons will have a filled or transparent background.
lightestGrey
type: hex color string description: Used to configure all gray colors used in the widgets. The color will be darkened (but keep its hue and saturation) in select elements.
fontFamily
type: CSS font string description: Controls the default font for the widgets. If using a font not included with in browsers, make sure to load the font as part of your HTML page.
fontSize
type: number in pixels description: Controls the default font size of the widgets.
borderRadius
type: number in pixels description: Controls the roundness of edges in the widgets. A value of 0 will make all edges sharp.
imageShadow
type: true description: false | Enables / disables shadows on images.
h1Color
type: hex color string description: Color of
headings
h1Size
type: number in pixels description: Font size of
headings
h1Font
type: CSS font string description: Font of
headings
h1FontWeight
type: number description: Font weight of
headings
h2Color
type: hex color string description: Color of
headings
h2Size
type: number in pixels description: Font size of
headings
h2Font
type: CSS font string description: Font of
headings
h2FontWeight
type: number description: Font weight of
headings
h3Color
type: hex color string description: Color of
headings
h3Size
type: number in pixels description: Font size of
headings
h3Font
type: CSS font string description: Font of
headings
h3FontWeight
type: number description: Font weight of
headings
h4Color
type: hex color string description: Color of
headings
h4Size
type: number in pixels description: Font size of
headings
h4Font
type: CSS font string description: Font of
headings
h4FontWeight
type: number description: Font weight of
headings
h5Color
type: hex color string description: Color of
headings
h5Size
type: number in pixels description: Font size of
headings
h5Font
type: CSS font string description: Font of
headings
h5FontWeight
type: number description: Font weight of
headings
h6Color
type: hex color string description: Color of
headings
h6Size
type: number in pixels description: Font size of
headings
h6Font
type: CSS font string description: Font of
headings
h6FontWeight
type: number description: Font weight of
headings
bodyColor
type: hex color string description: Color of body text in the widgets.
bodySize
type: number in pixels description: Font size of body text in the widgets.
bodyFont
type: CSS font string description: Font of body text in the widgets.
bodyFontWeight
type: number description: Font weight of body text in the widgets.
linkColor
type: hex color string description: Controls the color of links in the widgets.
iconUrl
type: url description: Used to display a logo in the checkout header.
errorColor
type: hex color string description: Controls the color of error messages and highlights.
disableCopyFromContactPerson
type: true description: false | Disables / enables the copy from contact person button on the checkout page.
linkStyle
type: “normal” description: “underline” | Specifies whether the links in the widgets should have underline or not.
navigationTabFontSize
type: number in pixels description: Font size of the navigation tab headers.
navigationTabBorderBottom
type: CSS border string description: Adds the specified border to the bottom of all the navigation tabs
buttonFont
type: CSS font string description: Font of button text for all buttons in widgets
buttonFontSize
type: number in pixels description: Font size of the text in buttons.
buttonFontWeight
type: number description: Font weight of the text in buttons.
outlinedButtonBorderWidth
type: number in pixels description: Controls the width of the borders on outlined buttons.
outlinedButtonBorderColor
type: hex color string description: Sets color for the border on outlined buttons
containedButtonLeftRightPadding
type: number in pixels description: Controls the left/right padding in contained buttons.
outlinedButtonLeftRightPadding
type: number in pixels description: Controls the left/right padding in outlined buttons.
boldFontWeight
type: number description: Sets the font weight for text that should be bolder. Used for e.g. prices.
upcomingToursBackgroundColor
type: hex color string description: The color of the background surrounding the upcoming tours widget
upcomingToursTitleTextColor
type: hex color string description: The color of the header/title text shown above the upcoming tours widget
breakpoints
type: object description: breakpoints for the widgets.
Default material ui breakpoints:
{xs: 0,sm: 600,md: 960,lg: 1280,xl: 1920,}Please be aware that the widgets have been developed and tested using the default breakpoints. If you make changes to these, you should test your site thoroughly for all the different screen sizes.
popupBottomMargin
type: number in pixels or breakpoint specific values description: Can set 20 pixels for all screen sizes, or specify for each breakpoint a value. For example to get 90 pixels on small screen sizes and 0 on large, use:
{xs: 90,sm: 90,md: 0,lg: 0,xl: 0,}