LESS variables
- Applies to:
- All versions
- Role required:
- Admin
- See Branding Regions for more information on what these Variables target. In addition, please note that all branding elements are documented and the variables listed below match our code base as of 3/30/17 (some may be out of date or changed).
- See Variables for more information on what these individual LESS variables might do.
If you want more information about this, you may contact your Customer Success Manager.
| Variable | Default Value |
|---|---|
| @background: | #fff; |
| @secondary-background: | darken(@background, 40%); |
| @highlight-color: | #30b3f6; |
| @highlight-color-desaturated: | desaturate(@highlight-color, 95%); |
| @default-font-family: | Lato, arial, helvetica, sans-serif, 'arial unicode ms'; |
| @monospace-font-family: | 'Source Code Pro', monospace; |
| @script-font-family: | @default-font-family; |
| @primary-font-color: | #000; |
| @primary-font-color-desaturated: | desaturate(@primary-font-color, 75%); |
| @secondary-font-color: | lighten(@primary-font-color-desaturated, 20%); /* #333 */ |
| @tertiary-font-color: | lighten(@primary-font-color-desaturated, 40%); /* #666 */ |
| @quaternary-font-color: | lighten(@primary-font-color-desaturated, 60%); /* #999 */ |
| @quinary-font-color: | lighten(@primary-font-color-desaturated, 70%); /*#b3b3b3 */ |
| @error-font-color: | #f00; |
| @primary-link-color: | @highlight-color; |
| @primary-link-color-visited: | @highlight-color; |
| @primary-link-color-hover: | lighten(@highlight-color-desaturated, 13%); |
| @primary-link-color-active: | lighten(@highlight-color-desaturated, 13%); |
| @primary-link-color-focus: | lighten(@highlight-color-desaturated, 13%); |
| @secondary-link-color: | lighten(@primary-font-color, 60%); |
| @secondary-link-color-visited: | lighten(@primary-font-color, 60%); |
| @secondary-link-color-hover: | @highlight-color; |
| @secondary-link-color-active: | @highlight-color; |
| @secondary-link-color-focus: | @highlight-color; |
| @tertiary-link-color: | lighten(@primary-font-color-desaturated, 40%); |
| @tertiary-link-color-visited: | lighten(@primary-font-color-desaturated, 40%); |
| @tertiary-link-color-hover: | @highlight-color; |
| @tertiary-link-color-active: | @highlight-color; |
| @tertiary-link-color-focus: | @highlight-color; |
| @disabled-background: | lighten(@highlight-color-desaturated, 35%); |
| @disabled-border-color: | lighten(@highlight-color-desaturated, 20%); |
| @disabled-link-color: | lighten(@highlight-color-desaturated, 15%); |
| @system-info-message-background-color: | #eef9ff; |
| @system-info-message-border-color: | #30b3f6; |
| @system-info-message-font-color: | #0597e2; |
| @system-info-message-icon-color: | #30b3f6; |
| @success-message-background-color: | #f5fcf6; |
| @success-message-border-color: | #1ea824; |
| @success-message-font-color: | #287733; |
| @success-message-icon-color: | #1ea824; |
| @error-message-background-color: | #fdf4f4; |
| @error-message-border-color: | #cb7064; |
| @error-message-font-color: | #912b1d; |
| @error-message-icon-color: | #912b1d; |
| @highlight-container-background-color: | lighten(@highlight-color, 37%); |
| @highlight-container-border-color: | @highlight-color; |
| @highlight-container-color: | @primary-font-color; |
| @highlight-container-font-family: | @default-font-family; |
| @highlight-container-link-color: | @highlight-color; |
| @highlight-container-link-color-visited: | @highlight-color; |
| @highlight-container-link-color-hover: | darken(@highlight-container-link-color, 15%); |
| @highlight-container-link-color-active: | darken(@highlight-container-link-color, 15%); |
| @highlight-container-link-color-focus: | darken(@highlight-container-link-color, 15%); |
| @primary-container-background-color: | lighten(@highlight-color-desaturated, 29%); |
| @primary-container-border-color: | lighten(@highlight-color-desaturated, 13%); |
| @primary-container-color: | @primary-font-color; |
| @primary-container-font-family: | @default-font-family; |
| @primary-container-link-color: | lighten(@primary-font-color-desaturated, 40%); |
| @primary-container-link-color-visited: | @primary-container-link-color; |
| @primary-container-link-color-hover: | @highlight-color; |
| @primary-container-link-color-active: | @highlight-color; |
| @primary-container-link-color-focus: | @highlight-color; |
| @secondary-container-background-color: | lighten(@highlight-color-desaturated, 36%); |
| @secondary-container-border-color: | lighten(@highlight-color-desaturated, 29%); |
| @secondary-container-color: | @primary-font-color; |
| @secondary-container-font-family: | @default-font-family; |
| @secondary-container-link-color: | @primary-link-color; |
| @secondary-container-link-color-visited: | @primary-link-color; |
| @secondary-container-link-color-hover: | @primary-link-color-hover; |
| @secondary-container-link-color-active: | @primary-link-color-active; |
| @secondary-container-link-color-focus: | @primary-link-color-focus; |
| @tertiary-container-background-color: | darken(@highlight-color-desaturated, 38%); |
| @tertiary-container-border-color: | lighten(@highlight-color-desaturated, 100%); |
| @tertiary-container-color: | contrast(@tertiary-container-background-color, darken(@secondary-font-color, 10%), lighten(@quaternary-font-color, 20%)); |
| @tertiary-container-font-family: | @default-font-family; |
| @tertiary-container-link-color: | contrast(@tertiary-container-background-color); |
| @tertiary-container-link-color-visited: | contrast(@tertiary-container-background-color); |
| @tertiary-container-link-color-hover: | @highlight-color; |
| @tertiary-container-link-color-active: | @highlight-color; |
| @tertiary-container-link-color-focus: | @highlight-color; |
| @dynamic-listing-border-color: | lighten(@highlight-color-desaturated, 13%); |
| @dynamic-listing-border-color-hover: | @highlight-color; |
| @dynamic-listing-edit-border-color: | darken(@highlight-color-desaturated, 18%); |
| @dynamic-listing-edit-border-color-hover: | @highlight-color; |
| @dynamic-listing-hover-glow: | fade(@default-button-border-color-hover, 30%); |
| @border-radius-default: | .25em; |
| @border-radius-lsf: | .5em; |
| @box-shadow-inner: | inset .1em .1em .4em rgba(0, 0, 0, .15); |
| @dialog-border-color: | @highlight-color; |
| @dialog-border-radius: | .5em; |
| @dialog-box-shadow: | 0 0 1em fade(@default-button-border-color-hover, 25%); |
| @default-button-background-color: | lighten(@highlight-color-desaturated, 36%); |
| @default-button-background-color-hover: | darken(@default-button-background-color, 20%); |
| @default-button-background-color-focus: | darken(@default-button-background-color, 20%); |
| @default-button-background-color-active: | darken(@default-button-background-color, 20%); |
| @default-button-border-color: | darken(@default-button-background-color, 35%); |
| @default-button-border-color-hover: | @highlight-color; |
| @default-button-border-color-focus: | @highlight-color; |
| @default-button-border-color-active: | @highlight-color; |
| @default-button-color: | contrast(@default-button-background-color); |
| @default-button-color-hover: | contrast(@default-button-background-color-hover); |
| @default-button-color-focus: | contrast(@default-button-background-color-focus); |
| @default-button-color-active: | contrast(@default-button-background-color-active); |
| @default-button-font-family: | @default-font-family; |
| @default-button-hover-glow: | fade(@default-button-border-color-hover, 50%); |
| @default-button-inner-shadow: | inset .2em .1em .5em rgba(0, 0, 0, .3); |
| @primary-button-background-color: | darken(@highlight-color-desaturated, 12%); |
| @primary-button-background-color-hover: | darken(@primary-button-background-color, 15%); |
| @primary-button-background-color-active: | darken(@primary-button-background-color, 15%); |
| @primary-button-border-color: | darken(@primary-button-background-color, 35%); |
| @primary-button-border-color-hover: | darken(@highlight-color, 5%); |
| @primary-button-border-color-active: | @highlight-color; |
| @primary-button-color: | contrast(@primary-button-background-color); |
| @primary-button-color-hover: | contrast(@primary-button-background-color-hover); |
| @primary-button-color-active: | contrast(@primary-button-background-color-active); |
| @primary-button-inner-shadow: | inset .2em .1em .5em rgba(0, 0, 0, .5); |
| @icon-button-outline-color-active: | @highlight-color; |
| @heading-color: | @primary-font-color; |
| @heading-font-family: | @default-font-family; |
| @heading-font-size: | 200%; |
| @heading-font-style: | normal; |
| @heading-font-weight: | normal; |
| @heading-line-height: | 1.2; |
| @heading-margin: | 2rem 0 .5rem; |
| @heading-padding: | 0; |
| @table-font-family: | @default-font-family; |
| @table-header-background-color: | lighten(@highlight-color, 37%); |
| @table-header-border-color: | @highlight-color; |
| @table-header-font-family: | @default-font-family; |
| @table-row-odd-background-color: | @background; |
| @table-row-even-background-color: | @secondary-container-background-color; |
| @table-row-hover-background-color: | lighten(@highlight-color, 40%); |
| @table-row-selected-background-color: | lighten(@highlight-color, 35%); |
| @tab-background-color: | lighten(@secondary-container-background-color, 3%); |
| @tab-background-color-active: | @background; |
| @tab-border-color: | darken(@secondary-container-border-color, 27%); |
| @tab-border-color-active: | @highlight-color; |
| @tab-font-family: | @default-font-family; |
| @tab-link-color: | @secondary-link-color; |
| @tab-link-color-hover: | @secondary-link-color-hover; |
| @tab-link-color-active: | @primary-font-color; |
| @article-type-none: | '\e933'; |
| @article-type-portfolio: | '\e6aa'; |
| @article-type-category: | '\e62a'; |
| @article-type-guide: | '\e84a'; |
| @article-type-topic: | '\e934'; |
| @article-type-howto: | '\e933'; |
| @article-type-reference: | '\e933'; |
| @article-type-home: | '\e835'; |
| @article-type-lp: | '\e959'; |
| @article-type-image: | '\e61d'; |
| @article-type-pdf: | '\e7b3'; |