Component Styling Reference

This guide serves as a comprehensive reference for customizing Mimeeq components using CSS variables and parts. It provides detailed information about what can be styled for each component in the Mimeeq system.

Note: For conceptual information and usage examples, please refer to:

• Theme Customization - Learn how to use CSS variables
• Element Styling - Learn how to use CSS parts
• Configurator Customization - See practical examples

Global CSS Variables

Mimeeq uses a comprehensive set of CSS variables to control the overall appearance of the application. These variables provide consistent theming across all components and can be customized at the :root level.

Color System Overview

Mimeeq organizes colors in a structured system:

• Main Colors: Base colors like --mmq-accent-main serve as anchors
• Color Ranges: Each main color has shades from 50 (lightest) to 1000 (darkest)
• Accent Color: The primary customizable color that represents your brand

When you customize the accent color, all related shades are automatically generated to maintain visual harmony.

:root {
  --mmq-accent-main: #0056b3; /* Your brand color */
}

For a complete explanation of the color system and all global CSS variables, please refer to the Theme Customization documentation.

Customizable Theme Elements

The Mimeeq platform allows for theme customization at different levels. The following elements can be customized either through customer account settings or embed templates:

Primary Customization Options

Setting	Description	CSS Variable	Default Value
accentColor	The primary brand color	--mmq-accent-main	#ac1015
accentTextColor	Text color on accent backgrounds	--mmq-accent-contrast-text	#fff or #000 based on contrast
backgroundColor	Main background color	--mmq-background-primary	#fff
hotSpots.color	Color of hotspots	--mmq-hot-spots-color	20% opacity of accent color
hotSpots.borderColor	Border color of hotspots	--mmq-hot-spots-border-color	70% opacity of accent color
group.activeColor	Background color for active groups	--mmq-group-active-color	rgb(86, 85, 83)
group.hoverColor	Background color for hovered groups	--mmq-group-hover-color	rgb(86, 85, 83)
group.openedGroupTextColor	Text color for opened groups	--mmq-group-opened-group-text-color	BLACK
group.hoverGroupTextColor	Text color for hovered groups	--mmq-group-hover-group-text-color	BLACK
mesh.overlay	Overlay color for mesh	Internal	Varies

Customization Hierarchy

Mimeeq applies theme customizations in the following order of precedence:

1. Inline customization - Highest priority, set directly on the mmq-embed element (not recommended for most use cases)
2. Embed template - Customizations specific to a particular embed configuration
3. Customer account - Default customizations for all embeds under a customer account
4. System defaults - The base theme values used when no customizations are specified

When customizing the accent color, all related shade variations are automatically generated, ensuring a consistent color scheme throughout the application.

Understanding the Color System

The Mimeeq color system is built around a consistent approach to color generation:

1. Main Colors: Each color palette has a main color (usually at the 1000 position) that serves as the anchor for the entire palette.

2. Color Ranges: From each main color, a range of shades (50-1000) is automatically generated, where:

   • 50 is the lightest shade
   • 1000 is the darkest/main color

3. Special Accent Color: The accent color is particularly important as it can be customized by users to match their branding:

   • Can be set in customer accounts
   • Can be specified in embed templates
   • Can be set inline on specific mmq-embed elements
   • All accent shades are automatically generated based on the main accent color

4. Legacy Keys: For backward compatibility, each color also has light and dark variants:

   • light typically maps to shade 50
   • dark is a darker variation of the main color

When customizing the look of your application, changing the accent color is the recommended approach, as it will automatically generate appropriate shades and maintain visual consistency.

Entry Point Components

These components are directly accessible for styling and often serve as containers for other components.

mmq-variant-ui

The main container for product variants and customization options.

CSS Variables:

Variable	Description	Default Value
--mmq-configurator-container-height	Height of the configurator	calc(100vh - 30px - var(--mmq-variant-ui-extra-space, 0px))
--mmq-configurator-container-max-height	Maximum height of the configurator	900px
--mmq-configurator-container-min-height	Minimum height of the configurator	375px
--mmq-canvas-height	Height of the 3D canvas area on mobile	Required on mobile
--mmq-variant-ui-extra-space	Extra space for fixed elements like headers	0px
--mmq-sidepanel-width	Width of the side panel (desktop)	379px
--mmq-tablet-sidepanel-width	Width of the side panel (tablet)	35%
--canvas-max-height	Internal Maximum canvas height	Calculated
--canvas-min-height	Internal Minimum canvas height	Calculated
--canvas-no-options-height	Internal Canvas height without options	Calculated
--configurator-max-height	Internal Maximum height with aspect ratio	Calculated
--configurator-max-width	Internal Maximum width with aspect ratio	Calculated
--available-viewport-y	Internal Available vertical space	Calculated
--mmq-viewport-height	Viewport height value	100vh
--mmq-configurator-wrapper-mobile-base-height	Mobile base height	Viewport dependent
--mmq-configurator-wrapper-mobile-vertical-padding	Mobile vertical padding	As needed
--mmq-configurator-wrapper-vertical-padding	Vertical padding	As needed
--mmq-configurator-page-container-vertical-padding	Page container padding	10px

Parts:

Part	Description
wrapper	Main container that wraps all configurator elements
content	Container for the 3D/2D canvas and related controls
canvas-container	Container specifically for the 3D/2D visualization canvas
side-panel	Container for options panel
side-panel-container	Container for the side panel
side-panel-content	Content area of the side panel
side-panel-footer	Footer of the side panel
side-panel-group	Group container in the side panel
side-panel-group-content	Content area for a group in the side panel
side-panel-group-header	Header for a group in the side panel
side-panel-group-item-button	Button element within a group item
side-panel-group-item-button-expanded	Button element when group is expanded
side-panel-header	Header of the side panel
header	Header displayed on desktop devices
mobile-header	Header displayed on mobile devices
fullscreen-header	Header displayed in fullscreen mode
footer	Footer element containing product information
finish-btn	Button to complete configuration
price-value-field	Element showing price on mobile
price-container	Container for price information on mobile
summary-box-price	Element showing price on desktop
summary-box-price-wrapper	Wrapper for the price display in summary box
brand	Element that displays the brand name
product-name	Element that displays the product name
name-wrapper	Container for product name and brand information
carousel	Container for the thumbnail carousel
carousel-wrapper	Wrapper element for the carousel content
carousel-thumbs	Container for the thumbnail images
carousel-thumb	Individual thumbnail image in the carousel
carousel-thumb-3d	Special thumbnail representing the 3D view
carousel-indicators	Container for the carousel position indicators
carousel-indicator	Individual indicator/dot for the carousel
carousel-arrow-left	Left navigation arrow for the carousel
carousel-arrow-right	Right navigation arrow for the carousel
drag-tooltip	Tooltip indicating drag interaction is available
fullscreen-button	Button to exit fullscreen mode
qty-box	Container for quantity inputs
qty-button-down	Quantity decrease button
qty-button-up	Quantity increase button
ar-button	Button that launches AR view
components-mapper	Components mapper container
block-header	Header for a configuration block

mmq-modular-ui

Used for modular UI elements such as headers, toolbars, and modular components.

CSS Variables:

Variable	Description	Default Value
--mmq-modular-ui-extra-space	Extra space to adjust height	Optional
--mmq-configurator-wrapper-mobile-modular-base-height	Base height for wrapper on mobile	Calculated
--mmq-side-panel-width	Width of the modular side panel	376px
--mmq-modular-canvas-height	Height of canvas in modular mode	Mobile only
--mmq-modular-elements-dialog-top	Top position of elements dialog	Optional
--mmq-side-panel-top	Top position of the side panel	24px
--mmq-configurator-wrapper-modular-vertical-padding	Vertical padding for wrapper	As needed
--mmq-canvas-buttons-height	Height of canvas buttons	For spacing calculations
--mmq-toolbar-height	Height of toolbar	For spacing calculations
--mmq-toast-z-index	Z-index for toasts	Default stack
--mmq-viewport-height	Viewport height value	100vh
--base-height	Internal Base height calculation	Varies mobile/desktop

Parts:

Part	Description
wrapper	Main wrapper for modular UI
header	Header component for desktop view
mobile-header	Header shown on mobile devices
option-panel	Panel showing configuration options
toolbar-positioner	Component positioning the toolbar
canvas-buttons	Buttons displayed on canvas
element-list	List of available elements
notifications-container	Container for notifications
notifications-container-mobile	Container for mobile notifications
price	Price component
price-container	Container for price display
toast-container	Container for toast notifications
quote-preview-ui	Preview UI for quotes

mmq-tabs

Provides tabbed navigation functionality for organizing content into separate views.

CSS Variables:

Variable	Description	Default Value
--mmq-tabs-top-spacing	Top spacing for tabs	60px
--mmq-tabs-no-related-bottom-margin	Bottom margin when no related section	0px
--mmq-tabs-mobile-top-spacing	Top spacing for tabs on mobile	15px
--mmq-tabs-bottom-spacing	Bottom spacing for tabs	As needed

Parts:

The mmq-tabs component uses the following structure but doesn't expose specific parts directly through Shadow DOM.

mmq-related-products

Displays related products or recommendations below the configurator.

CSS Variables:

Variable	Description	Default Value
--mmq-related-margin-bottom	Bottom margin for related section	60px
--mmq-related-with-tabs-padding-top	Top padding when tabs are visible	57px
--mmq-related-no-tabs-padding-top	Top padding when tabs are not visible	57px
--mmq-loader-color	Color of the loader	Theme dependent

Parts:

The mmq-related-products component doesn't expose specific parts directly through Shadow DOM.

mmq-basket

Handles shopping cart functionality with floating button and sliding panel.

CSS Variables:

Variable	Description	Default Value
--mmq-basket-z-index	Z-index for basket backdrop	Default stack
--mmq-basket-panel-z-index	Z-index for cart items panel	Default stack
--mmq-basket-btn-z-index	Z-index for basket button	1000
--mmq-basket-button-background	Background color for button	Theme dependent
--mmq-basket-button-color	Text/icon color for button	Theme dependent
--mmq-basket-button-position-bottom	Distance from bottom	As needed
--mmq-basket-button-position-left	Distance from left	As needed
--mmq-basket-button-position-right	Distance from right	0
--mmq-basket-button-position-top	Distance from top	As needed
--mmq-basket-button-radius	Border radius for button	4px
--mmq-basket-button-icon-size	Size of basket icon	24px
--mmq-basket-panel-position-right	Right alignment for panel	0
--mmq-basket-panel-position-left	Left alignment for panel	unset
--mmq-basket-panel-position-top	Top alignment for panel	0
--mmq-basket-panel-position-bottom	Bottom alignment for panel	0
--mmq-basket-header-content-flow	Flex direction for header	Default flow
--mmq-font-family	Font family	System default
--mmq-contact-form-footer-discount-value-color	Color for discount values	Theme dependent
--mmq-contact-form-footer-addition-value-color	Color for addition values	Theme dependent

Parts:

Part	Description
button	The floating basket button
counter	The item counter badge
icon	The icon within the button
panel	The sliding panel with contents
backdrop	The backdrop/overlay behind panel

mmq-dialog

Used for displaying dialog boxes and pop-up messages.

CSS Variables:

Variable	Description	Default Value
--mmq-dialog-width	Width of the dialog	570px (desktop)
--mmq-dialog-height	Height of the dialog	570px (desktop)
--mmq-dialog-max-width	Maximum width of dialog	Optional
--mmq-dialog-max-height	Maximum height of dialog	Optional
--mmq-dialog-margin	Margin around dialog	auto
--mmq-dialog-mobile-margin	Margin on mobile	auto 16px
--mmq-dialog-padding	Padding inside dialog	0
--mmq-dialog-z-index	Z-index of dialog	Default stack
--mmq-dialog-position	Position property	relative
--mmq-dialog-top	Top position	Optional
--mmq-dialog-right	Right position	Optional
--mmq-dialog-bottom	Bottom position	Optional
--mmq-dialog-left	Left position	Optional
--mmq-dialog-inset	Inset positioning	Optional
--mmq-dialog-overflow	Overflow behavior	Default
--mmq-background-white	Background color	Theme dependent
--mmq-box-shadow-primary	Primary shadow color	Theme dependent
--mmq-box-shadow-secondary	Secondary shadow color	Theme dependent

Parts:

The mmq-dialog component doesn't expose specific parts directly through Shadow DOM. It relies on child components like mmq-dialog-header, mmq-dialog-content, and mmq-dialog-footer.

mmq-ar-loader

Component that handles loading and displaying AR experiences.

CSS Variables:

AR-specific components primarily inherit global theme variables.

Parts:

Part	Description
modal	The AR modal component
portal	Portal element containing AR modal

mmq-mobile-tabs

Component for displaying and managing tabs on mobile devices.

CSS Variables:

Variable	Description	Default Value
--mmq-mobile-tabs-min-height	Minimum height for mobile tabs	115px
--mmq-dialog-header-background	Background for header in dialog mode	white
--mmq-mobile-tabs-content-margin-bottom	Bottom margin for content	Optional
--mmq-text-align	Text alignment for tab items	left

Parts:

Part	Description
list	List element containing tab buttons
list-wrapper	Container element that wraps the tab list
tab	Individual tab button element
tab-active	Currently active tab button
content-wrapper	Container for tab content
footer	Footer containing actions
finish-btn	Finish button in mobile footer
summary-box-price	Price element in summary box
summary-header	Header shown in summary view
summary-header-back	Back button in the summary header
summary-panel	Panel displaying the summary content
tab-panel	Panel containing content for a tab
tab-configurator	Configurator tab content
tab-summary	Summary tab content
tab-gallery	Gallery tab content
tab-downloads	Downloads tab content
tab-elements	Elements tab content
tab-finishes	Finishes tab content
tab-popular	Popular items tab content
tab-related	Related items tab content
tab-text	Text tab content
no-items	Element displayed when no items are available
groups	Container for all option groups
group-item	Individual option group item
group-header	Header element for a group item
group-content	Content area of a group item
group-item-button	Button element within a group item
group-item-button-expanded	Button element when group is expanded
components-mapper	Wrapper for components
block-header	Header for configuration block
qty-box	Quantity input container

mmq-side-panel

Side panel component for displaying configuration options.

CSS Variables:

Variable	Description	Default Value
--mmq-side-panel-width	Width of the panel	376px
--mmq-side-panel-top	Top position	24px
--mmq-side-panel-bottom	Bottom position	24px
--mmq-side-panel-right	Right position	24px
--mmq-viewport-height	Custom viewport height	100vh

Parts:

Part	Description
container	Main container for side panel
header	Header element
side-panel-content	Content container
footer	Footer element
finish-btn	Finish button
side-panel-group	Container for option groups
side-panel-group-content	Content area for a group
side-panel-group-header	Header for a group
side-panel-group-item-button	Button for a group item
side-panel-group-item-button-expanded	Expanded button state
components-mapper	Container for component mapping
block-header	Header for configuration block
qty-box	Quantity box element
qty-button-down	Quantity decrease button
qty-button-up	Quantity increase button
summary-box-price	Price element
summary-box-price-wrapper	Price wrapper

Key UI Components

These components are frequently styled and appear throughout the application.

mmq-button

A customizable button component with various styles and states.

CSS Variables:

Variable	Description	Default Value
--mmq-button-color	Text color	var(--mmq-typography-primary)
--mmq-button-contrast-color	Text color on colored backgrounds	var(--mmq-common-white)
--mmq-button-bg-hover	Background color on hover	Variant dependent
--mmq-button-border-radius	Border radius	4px
--mmq-button-font	Font size	var(--mmq-font-size-regular)
--mmq-button-font-weight	Font weight	600
--mmq-button-gap	Gap between icon and text	4px
--mmq-button-height	Height	auto
--mmq-button-width	Width	auto
--mmq-button-padding	Padding	0
--mmq-button-padding-small	Padding for small variant	10px 24px
--mmq-button-outline-color	Outline color	var(--mmq-button-color)
--mmq-loader-color	Color of the loader	var(--mmq-button-color)

Parts:

The mmq-button component doesn't expose specific parts through Shadow DOM.

mmq-tooltip

A tooltip component for displaying additional information on hover.

CSS Variables:

The tooltip inherits global theme variables.

Parts:

The mmq-tooltip component doesn't expose specific parts through Shadow DOM.

mmq-loader

A versatile loading indicator with multiple animation styles.

CSS Variables:

Variable	Description	Default Value
--mmq-loader-color	Color of the loader	currentColor
--mmq-loader-size	Size of the loader	Variant dependent
--mmq-bg-color	Background for bar loader	var(--mmq-accent-light)
--mmq-moon-loader-width	Border width for moon loader	4px

Parts:

The mmq-loader component doesn't expose specific parts through Shadow DOM.

mmq-quick-icon-button

Button component used for action icons on canvas and in toolbars.

CSS Variables:

Variable	Description	Default Value
--quick-icon-button-bg	Background color	rgba(46, 51, 65, 0.05)
--mmq-quick-icon-background	Background (rgba format)	46, 51, 65, 0.05
--mmq-quick-icon-button-icon-color	Icon color	var(--mmq-grey-600)
--mmq-quick-icon-button-font-size	Icon size	16px
--mmq-quick-icon-button-width	Button width	40px
--mmq-quick-icon-button-height	Button height	40px
--mmq-quick-icon-button-border-radius	Border radius	4px
--quick-icon-button-bg-hover	Hover background	var(--mmq-grey-200)
--quick-icon-button-color-hover	Hover color	var(--mmq-grey-800)
--mmq-quick-icon-button-disabled-opacity	Disabled opacity	0.3

Parts:

Part	Description
button	The button element

mmq-dialog-header

Header component for dialogs with title and close button.

CSS Variables:

Variable	Description	Default Value
--mmq-dialog-header-height	Minimum height on desktop	60px
--mmq-dialog-header-padding	Padding	10px 24px (mobile) / 16px 24px (desktop)
--mmq-dialog-header-justify	Content justification	space-between
--mmq-dialog-header-background	Background color	Optional
--mmq-dialog-header-position	Position property	static
--mmq-dialog-header-top	Top position with fixed/absolute	0
--mmq-wrap-lines	Lines shown before truncating	2

Parts:

Part	Description
title	The title element
close-button	The close button element
close-icon	The close icon

mmq-dialog-content

Content container for the dialog component.

CSS Variables:

Variable	Description	Default Value
--mmq-dialog-content-height	Height of content area	auto or calc(100% - 140px) with actions
--mmq-dialog-content-padding	Padding	9px (desktop) / 24px 16px (mobile)
--mmq-dialog-content-margin	Margin	0
--mmq-dialog-content-overflow	Overflow behavior	auto
--mmq-dialog-content-background	Background color	transparent
--mmq-dialog-content-mobile-height	Height on mobile	auto

Parts:

The mmq-dialog-content component doesn't expose specific parts through Shadow DOM.

mmq-dialog-footer

Footer component for dialogs with action buttons.

CSS Variables:

Variable	Description	Default Value
--mmq-dialog-footer-padding	Padding	0 24px (desktop) / 16px (mobile)
--mmq-dialog-footer-justify	Content justification	space-between
--mmq-dialog-footer-padding-top	Top padding with border	16px

Parts:

The mmq-dialog-footer component doesn't expose specific parts through Shadow DOM.