---
schema_version: "1"
id: a4fd69a9707dfab23a06c83a31a5a3adaf0406cec8368998034b46362d2f5e75
title: cpq-base-theme-variables (template)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/ind/264-0-0/comms_cpq_base_theme_variables__template_.md
canonical_url: https://help.salesforce.com/s/articleView?id=ind.comms_cpq_base_theme_variables__template_.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 7b3f32622a909250df87662c083c1e36e79dac991ceb59b5f3409448c53f638f
description: The cpq-base-theme variables template contains CSS variables that are used in other templates.
products:
  - Communications
  - Media
  - Energy and Utilities
release: "264"
---
# cpq-base-theme-variables (template)

The cpq-base-theme variables template contains CSS variables that are used in other templates.

**Template Type**

Mixin

**Code**

CSS/SCSS

**Image**

n/a

![example](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-ind-comms_media_energy_managed-264-0-0-production-enus/ff4079f6-a384-475c-b863-578bbbb0ef9b/images/icon_note.png)

example

Example CSS for cpq-base-theme-variables

```
/*** CPQ BASE THEME VARIABLES ***/
@import "cpq-base-variables";
// Common padding
$cpq-padding-base-vertical: 6px !default;
$cpq-padding-base-horizontal: 12px !default;
$cpq-padding-large-vertical: 10px !default;
$cpq-padding-large-horizontal: 16px !default;
$cpq-padding-small-vertical: 5px !default;
$cpq-padding-small-horizontal: 10px !default;
$cpq-padding-xs-vertical: 1px !default;
$cpq-padding-xs-horizontal: 5px !default;
$cpq-headings-font-weight: 600;
$cpq-cart-item-product-group-font-weight: 300;
$cpq-page-bg-color: #f4f6f9;
$cpq-product-container-bg-color: $white;
$cpq-product-container-border-color: $mid-gray;
$cpq-product-padding: 10px;
$cpq-product-item-padding: 3px;
$cpq-cart-container-tabs-height: 40px;
$cpq-cart-container-tabs-top-margin: -10px;
$cpq-cart-container-bg-color: $white;
$cpq-cart-container-border-color: $mid-gray;
$cpq-cart-total-bar-bg-color: #14315D;
$cpq-product-cart-items-bg-color: $white;
$cpq-product-cart-items-attr-value-color: $dark-gray;
$cpq-product-cart-item-selected-border-color: #FDB734;
$cpq-product-cart-order-bg-color: $mid-gray;
$cpq-product-cart-config-error-font-size: .75rem;
$cpq-product-cart-config-error-margin-top: .5rem;
$cpq-product-cart-discount-price: #97C077;
$cpq-cart-item-attr-label-font-size: 11px;
$cpq-cart-item-product-group-label-color: $black;
$cpq-cart-section-title-font-size: 15px;
$cpq-cart-item-product-messages-padding: 28px;
$cpq-cart-item-product-details-padding: 20px;
$cpq-cart-item-product-cfg-attr-font-size: 13px;
$cpq-cart-promo-item-bg-color: #F9FCF3;
$cpq-cart-promo-button-bg-color: #9ECC3B;
$cpq-cart-promo-item-border-color: #CCE29C;
$cpq-cart-promo-item-border-width: 2px;
$cpq-cart-promo-item-border-radius: 5px;
$cpq-loyalty-points-color: #061C3F;
$cpq-product-link-color: #0070d2;
$cpq-offers-count-bg-color: #FDB734;
$cpq-product-cart-item-popover-top: -3.5rem;
$cpq-product-cart-item-popover-left: -0.5rem;
$product-item-bookmark-red: #f65327;
$product-item-bookmark-blue: #0058C6;
$product-item-bookmark-green: #13834D;
$product-item-bookmark-yellow: #FFB75D;
$product-item-bookmark-grayish-blue: #54698D;
```