Styling
- Last updated on September 22, 2024
- •
- 2-3 minutes to read
The Configurator uses CSS variables to change its appearance and fit the styles of the product page where it is embedded. These styles can be statically added to a page through a link to a stylesheet or a <style> element.
<style>
body {
background: black;
}
:root {
--se-accent-color: green;
}
</style>
To learn how you can apply the styles dynamically, refer to the topic Styling of Workflow Elements.
This is the complete list of the supported variables with their default values.
{
--conf-text-color: #1e1e1e;
--conf-desc-text-color: #686868;
--conf-primary-color: #2450ff;
--conf-primary-hover-color: #1d4ed8;
--conf-primary-active-color: #1e40af;
/* header */
--conf-header-title-font-size: 32px;
--conf-header-title-font-weight: 600;
--conf-header-title-line-height: 40px;
--conf-header-desc-font-size: 16px;
--conf-header-desc-font-weight: 400;
--conf-header-desc-line-height: 24px;
/* custom sizes */
--conf-custom-sizes-validation-color: #dc2626;
--conf-custom-sizes-title-font-size: 14px;
--conf-custom-sizes-title-font-weight: 600;
--conf-custom-sizes-title-line-height: 20px;
--conf-custom-sizes-validation-font-size: 14px;
--conf-custom-sizes-validation-font-weight: 400;
--conf-custom-sizes-validation-line-height: 20px;
--conf-custom-sizes-validation-bullet-padding: 0 8px;
/* tabs */
--conf-tabs-font-weight-active: 600;
--conf-tabs-label-color-default: var(--conf-text-color);
--conf-tabs-label-color-active: var(--conf-text-color);
--conf-tabs-border-bottom-size: 2px;
--conf-tabs-bottom-border-color: #e6e6e6;
--conf-tabs-font-size: 14px;
--conf-tabs-line-height: 20px;
--conf-tabs-bottom-border-color-active: var(--conf-primary-color);
--conf-tabs-label-padding: 12px 0;
--conf-tabs-label-gap: 24px;
/* buttons */
--conf-buttons-font-size: 16px;
--conf-personalize-button-color: #ffffff;
--conf-personalize-button-bg-color: var(--conf-primary-color);
--conf-buttons-border-radius: 32px;
--conf-buttons-padding: 16px;
--conf-personalize-button-hover-bg-color: #1d4ed8;
--conf-personalize-button-active-bg-color: #1e40af;
--conf-personalize-button-disabled-bg-color: #e6e6e6;
--conf-personalize-button-disabled-color: #b2b2b2;
--conf-upload-button-bg-color: #f2f2f2;
--conf-upload-button-color: #1e1e1e;
--conf-upload-button-hover-bg-color: #e6e6e6;
--conf-upload-button-active-bg-color: #d6d6d6;
--conf-upload-button-disabled-color: #b2b2b2;
--conf-upload-button-disabled-bg-color: #f2f2f2;
--conf-buttons-focus-color: #000;
--conf-upload-btn-spinner-color: var(--conf-primary-color);
--conf-personalize-btn-spinner-color: var(--conf-personalize-button-color);
/* box shadow */
--conf-buttons-box-shadow-duration: 0.1s;
--conf-buttons-box-shadow-border-width: 1px;
--conf-buttons-box-shadow-border-offset: 0;
--conf-personalize-button-box-shadow-color: transparent;
--conf-upload-button-box-shadow-color: transparent;
/* skeleton&blur */
--conf-blur-color: rgba(255, 255, 255, 0.6);
--conf-skeleton-bg-color: #eeeeee;
/* options */
--conf-options-gap: 16px;
--conf-sections-gap: 24px;
--conf-option-title-margin-bottom: 4px;
/* quantity */
--conf-quantity-font-size: 14px;
--conf-quantity-font-weight: 400;
--conf-quantity-line-height: 20px;
--conf-quantity-text-color: var(--conf-text-color);
--conf-quantity-price-per-each-font-size: 12px;
--conf-quantity-price-per-each-font-weight: var(--conf-quantity-font-weight);
--conf-quantity-price-per-each-line-height: 16px;
--conf-quantity-price-per-each-line-color: #989898;
--conf-quantity-title-margin-bottom: var(--conf-option-title-margin-bottom);
--conf-quantity-title-font-weight: var(--conf-option-title-font-weight);
--conf-quantity-title-font-size: var(--conf-option-names-font-size);
/* custom sizes */
--conf-custom-sizes-input-height: 48px;
--conf-custom-sizes-input-padding: 16px;
--conf-custom-sizes-input-border-radius: 4px;
--conf-custom-sizes-input-border-width: 1px;
--conf-custom-sizes-input-border-color: #d6d6d6;
--conf-custom-sizes-input-border-color-error: #dc2626;
/* metadata variables */
/* colors */
--conf-border-color: #c4c4c4;
--conf-border-hover-color: #8a8a8a;
--conf-accent-color: var(--conf-primary-color);
--conf-accent-hover-color: var(--conf-primary-hover-color);
--conf-accent-active-color: var(--conf-primary-active-color);
--conf-accent-contrast-color: #fff;
--conf-accent-disabled-color: var(--conf-disabled-color);
--conf-focus-color: #000;
--conf-text-color: #282828;
--conf-bg-color: #fff;
--conf-wrapper-color: #f5f5f5;
--conf-dropdown-bg-color: var(--conf-bg-color);
--conf-background-color: #ffffff;
/* font-size */
--conf-option-names-font-size: 14px;
--conf-variant-name-font-size: 14px;
--conf-option-names-line-height: 20px;
/* margins */
--conf-option-bottom-margin: 20px;
--conf-option-name-bottom-margin: 8px;
--conf-border-radius: 5px;
--conf-default-border-size: 1px;
--conf-hover-border-size: var(--conf-default-border-size);
--conf-focus-border-size: 2px;
/* header */
--conf-option-title-margin-bottom: 4px;
--conf-option-title-font-weight: 600;
--conf-option-tooltip-margin-left: 4px;
--conf-tooltip-text-color: #fff;
--conf-tooltip-padding: 6px 12px;
--conf-tooltip-background-color: #000;
--conf-tooltip-border-radius: 4px;
--conf-tooltip-box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.08), 0px 8px 20px -4px rgba(0, 0, 0, 0.12);
/* swatch */
--conf-swatch-hover-border-color: #8a8a8a;
--conf-option-description-color: #686868;
--conf-content-item-paddings: 4px 0 8px;
--conf-content-name-margin-bottom: 0;
--conf-swatch-broder-radius: 4px;
--conf-swatch-outline-offset: 2px;
--conf-swatch-outline-size: var(--conf-focus-border-size);
--conf-color-swatch-border-radius: 100%;
/* chips */
--conf-chips-vertical-padding: 6px;
--conf-chips-horizontal-padding: 12px;
--conf-chips-gap: 8px;
--conf-grid-option-gap: var(--conf-chips-gap);
--conf-chips-border-radius: 18px;
--conf-chips-min-width: 14px;
--conf-chips-background-color: #ebf5ff;
--conf-chips-active-hover-background: #d3edff;
--conf-chips-active-pressed-background: #abdcff;
--conf-chips-active-disabled-background: #e6e6e6;
--conf-chips-border-color: #b8b8b8;
--conf-chips-focus-outline-offset: 1px;
/* radio */
--conf-radio-size: 18px;
--conf-radio-dot-size: 6px; //8px
--conf-radio-label-margin: 9px;
--conf-radio-active-border-size: 0; //2px
--conf-radio-paddings: var(--conf-content-item-paddings);
--conf-radio-button-margin-top: 3px;
--conf-radio-button-align: flex-start;
--conf-radio-dot-color: var(--conf-background-color);
--conf-radio-active-color: var(--conf-primary-color);
--conf-radio-border-color: #686868;
--conf-radio-active-border-color: transparent;
--conf-radio-border-size: 2px;
--conf-radio-row-padding: 6px 0;
--conf-radio-focus-outline-width: 2px;
--conf-radio-focus-outline-color: black;
--conf-radio-focus-outline-offset: 1px;
--conf-radio-button-disable-color: #e0e0e0;
--conf-radio-label-disable-color: #adadad;
/* preview size */
/* color-list */
--conf-color-list-preview-height: 40px;
--conf-color-list-preview-width: 40px;
--conf-color-list-border-radius: 50%;
/* image-list */
--conf-image-list-preview-height: 64px;
--conf-image-list-preview-width: 64px;
--conf-image-list-border-radius: 4px;
/* color-grid */
--conf-color-grid-preview-height: var(--conf-color-list-preview-height);
--conf-color-grid-preview-width: var(--conf-color-list-preview-width);
--conf-color-grid-border-radius: var(--conf-color-list-border-radius);
/* image-grid */
--conf-image-grid-min-size: 80px;
--conf-image-grid-max-size: 80px;
--conf-image-grid-border-radius: var(--conf-image-list-border-radius);
/* select */
--conf-select-preview-height: 48px;
--conf-select-preview-width: var(--conf-select-preview-height);
--conf-content-image-object-fit: contain;
--conf-select-v-padding: 14px;
--conf-select-h-padding: 16px;
--conf-select-chevron-color: #1e1e1e;
--conf-outline-width-focus: 1px;
--conf-select-value-name-line-height: 20px;
--conf-select-value-text-line-height: inherit;
}