Colors (Help Scout)

A series of thematic classes that adjust the background and font color properties of a selector based on Help Scout’s color palette.

Install

npm install seed-helpscout-theme --save

Dependencies

• seed-dash
• seed-color-scheme-helpscout
• seed-publish

Background colors

An example background color theme class looks like this:

.t-bg-blue-500

All of the colors and shades from the Help Scout color palette are available to be used as background colors.

Background color theme classes for seed-helpscout-theme can be used together with the font color theme classes.

Example

<div class="c-card u-pad-4 t-bg-blue-500">
  I'm a blue card.
</div>
<div class="c-card u-pad-4 t-bg-purple-600">
  I'm a purple card.
</div>
<div class="c-card u-pad-4 t-bg-yellow-400">
  I'm a yellow card.
</div>

Font colors

An example font color theme class looks like this:

.t-tx-blue-500

All of the colors and shades from the Help Scout color palette are available to be used as font colors.

Font color theme classes for seed-helpscout-theme can be used together with the background color theme classes.

Example

<div class="c-card u-pad-4 t-tx-blue-500">
  I'm blue text.
</div>
<div class="c-card u-pad-4 t-tx-purple-600">
  I'm purple text.
</div>
<div class="c-card u-pad-4 t-tx-yellow-400">
  I'm yellow text.
</div>

Configurations

Below are the default Sass configuration variables for seed-helpscout-theme. The variables can be found in the pack’s _config.scss file.

seed-helpscout-theme/_config.scss

$seed-helpscout-theme-background-color-namespace: "t-bg" !default;
$seed-helpscout-theme-text-color-namespace: "t-tx" !default;

// Theme colors
// Constructing the color palette from seed-color-scheme-helpscout
$seed-helpscout-theme-colors: (
  // Base colors
  black: _get($seed-color-scheme-helpscout, black),
  white: _get($seed-color-scheme-helpscout, white),
  // Primary colors
  blue: _get($seed-color-scheme-helpscout, blue),
  charcoal: _get($seed-color-scheme-helpscout, charcoal),
  grey: _get($seed-color-scheme-helpscout, grey),
  // Secondary colors
  yellow: _get($seed-color-scheme-helpscout, yellow),
  green: _get($seed-color-scheme-helpscout, green),
  red: _get($seed-color-scheme-helpscout, red),
  purple: _get($seed-color-scheme-helpscout, purple),
  orange: _get($seed-color-scheme-helpscout, orange),
) !default;

Related

• seed-color-scheme
• seed-color-scheme-helpscout