Skip to main content
MindTouch Success Center

LESS variables

  • 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 also 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';
  • Was this article helpful?