---
schema_version: "1"
id: f039d3e4ee600fd8a7f18838a14eff5d3d275a4bfefb7babe60f50dae25f9821
title: cpq-base-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_variables__template_.md
canonical_url: https://help.salesforce.com/s/articleView?id=ind.comms_cpq_base_variables__template_.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 166d16b18fa2ae4a03cdff9f8165db56b9cce4af71a87e0604e93e3008c99ff3
description: The cpq-base-variables template contains CSS variables used in other templates and themes.
products:
  - Communications
  - Media
  - Energy and Utilities
release: "264"
---
# cpq-base-variables (template)

The cpq-base-variables template contains CSS variables used in other templates and themes.

**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 VARIABLES ***/
/***
Do not modify this variables, Instead use Themes.
Modify only when you are sure what you are doing and the impact it may have.
These variables are used in different templates/themes.
**/
$black: #000000;
$white: #FFFFFF;
$mid-black: #16325c;
$dark-gray: #7c7c7c;
$text-gray: #9999a7;
$middle-dark-gray: #c7c7c7;
$mid-gray: #d8d8d8;
$middle-light-gray: #dedede;
$light-gray: #f2f2f2;
$lightest-gray: #f8f8f8;
$dark-blue: #008ab3;
$light-blue: #05a6df;
$warning: #eac438;
$success: #58a300;
$error: #f65327;
$font-family: "Salesforce Sans", Arial, sans-serif;
$font-size: 14px;
$line-height: 20px;
$font-title-size: 28px;
$font-heading-size: 22px;
$font-thin: normal 100 14px/18px $font-family;
$font-light: normal 300 14px/18px $font-family;
$font-regular: normal 400 14px/18px $font-family;
$font-semibold: normal 600 14px/18px $font-family;
/*** SLDS VARIABLES ***/
//*** RESPONSIVE BREAKPOINTS ***//
$bp-xsmall: 20em;
$bp-small: 30em;
$bp-xmedium: 44em;
$bp-medium: 48em;
$bp-large: 64em;
$bp-xlarge: 80em;
//*** COLORS ***//
// Grays
$header-gray: #f7f9fb;
$cards-gray: #f4f6f9;
$cards-border-gray: #d8dde6;
$mobile-icons-gray: #9faab5;
// Notifications
$notify-danger: #c23934;
$notify-warning: #ffb75d;
$notify-success: #04844b;
$notify-default: #54698d;
// Neutrals
$neutral-lightest: #EEF1F6;
$neutral-light: #CFD7E6;
$neutral-medium: #A7B8D1;
$neutral-dark: #4F6A92;
// Modals
$modal-overlay: #7e8c99;
// Primary Colors
$primary-alternative: #4A90E2;
$primary-lightest: #0C8EFF;
$primary-light: #0070D2;
$primary-medium: #005FB2;
$primary-dark: #00396B;
// Secondary Colors
$secondary-pink: #EF7EAD;
$secondary-green: #4BC076;
$secondary-aqua: #50E3C2;
$secondary-purple: #7F8DE1;
$secondary-orange: #F88962;
// Other Colors
$slds-red: #ef6e64;
// Fonts
$slds-font: "Salesforce Sans", Arial, sans-serif;
// Namespace
$cpq-namespace: 'cpq';
$assets-namespace: 'assets'
```