A17 SCSS Utilities

Description

This plugin turns colour tokens into CSS variables on the :root. These are then mapped to text, background and border colours utility classes.

You can set Hex, RGB, RGBA, HSL, colour name or any valid CSS colour value.

Setup

_tokens.scss

$color: (
  tokens: (
    white: #fff,
    grey-3: #f8f8f8,
    grey-5: #f2f2f2,
    grey-10: #e6e6e6,
    grey-15: #d9d9d9,
    grey-54: #757575,
    grey-90: #1a1a1a,
    black: #000,
    blue-01: #0A152B,
    blue-02: #001F5C,
    blue-03: #004F91,
    blue-04: #313BFB,
    blue-05: #81EEF3,
    blue-06: #ADD8E6,
    red-01: #f00
  ),
  borderColor: (
    primary: black,
    secondary: grey-15,
    tertiary: grey-54,
    code-example-filename: blue-05
  ),
  textColor: (
    title: black,
    primary: grey-90,
    inverse: white,
    secondary: grey-54,
    accent: blue-03,
    code: black,
    code-example: grey-3,
    code-example-filename: blue-05
  ),
  backgroundColor: (
    primary: white,
    header: grey-10,
    footer: grey-10,
    banner: grey-90,
    accent: blue-03,
    column: blue-05,
    column-alt: blue-04,
    code: grey-10,
    code-example: grey-90,
    quote: grey-5
  )
);

If you don't want to process colours, you can safely omit a $color map.

Output

Based on the reference config mentioned in this guide, we would get the following in our CSS:

app.css

:root {
  --COLOR-TOKENS: "↓";
  --white: #fff;
  --grey-3: #f8f8f8;
  --grey-5: #f2f2f2;
  --grey-10: #e6e6e6;
  --grey-15: #d9d9d9;
  --grey-54: #757575;
  --grey-90: #1a1a1a;
  --black: #000;
  --blue-01: #0A152B;
  --blue-02: #001F5C;
  --blue-03: #004F91;
  --blue-04: #313BFB;
  --blue-05: #81EEF3;
  --blue-06: #ADD8E6;
  --red-01: #f00;
}

:root {
  --COLOR-BORDER: "for usage ↓";
  --border-primary: var(--black);
  --border-secondary: var(--grey-15);
  --border-tertiary: var(--grey-54);
  --border-code-example-filename: var(--blue-05);
}

:root {
  --COLOR-BACKGROUND: "for usage ↓";
  --bg-design-grid: rgba(127, 255, 255, 0.25);
  --bg-primary: var(--white);
  --bg-header: var(--grey-10);
  --bg-footer: var(--grey-10);
  --bg-banner: var(--grey-90);
  --bg-accent: var(--blue-03);
  --bg-column: var(--blue-05);
  --bg-column-alt: var(--blue-04);
  --bg-code: var(--grey-10);
  --bg-code-example: var(--grey-90);
  --bg-quote: var(--grey-5);
}

:root {
  --COLOR-TEXT: "for usage ↓";
  --text-title: var(--black);
  --text-primary: var(--grey-90);
  --text-inverse: var(--white);
  --text-secondary: var(--grey-54);
  --text-accent: var(--blue-03);
  --text-code: var(--black);
  --text-code-example: var(--grey-3);
  --text-code-example-filename: var(--blue-05);
}

.border-primary {
  border-color: var(--black);
}

.border-secondary {
  border-color: var(--grey-15);
}

.border-tertiary {
  border-color: var(--grey-54);
}

.border-code-example-filename {
  border-color: var(--blue-05);
}

.bg-design-grid {
  background-color: rgba(127, 255, 255, 0.25);
}

.bg-primary {
  background-color: var(--white);
}

.bg-header {
  background-color: var(--grey-10);
}

.bg-footer {
  background-color: var(--grey-10);
}

.bg-banner {
  background-color: var(--grey-90);
}

.bg-accent {
  background-color: var(--blue-03);
}

.bg-column {
  background-color: var(--blue-05);
}

.bg-column-alt {
  background-color: var(--blue-04);
}

.bg-code {
  background-color: var(--grey-10);
}

.bg-code-example {
  background-color: var(--grey-90);
}

.bg-quote {
  background-color: var(--grey-5);
}

.text-title {
  color: var(--black);
}

.text-primary {
  color: var(--grey-90);
}

.text-inverse {
  color: var(--white);
}

.text-secondary {
  color: var(--grey-54);
}

.text-accent {
  color: var(--blue-03);
}

.text-code {
  color: var(--black);
}

.text-code-example {
  color: var(--grey-3);
}

.text-code-example-filename {
  color: var(--blue-05);
}

Demo

Along with being able to use CSS variables like:

component.scss

.component > p {
  color: var(--text-primary);
}

You can use the utility class:

This text is white on a blue background.

document.html

<p class="bg-accent text-inverse">This text is white on a blue background.</p>

Notes

Although you could name your text, background and border colours anything, its important to name by abstract usage and not by the hue of the colour itself. It will be far easier to update these and expand these in the future if you do this.

Notes

As you can see, this generates a reasonable number of CSS classes - you will want to purge your CSS of unused classes to remove any of these that you don't use.

Alternatively, if you don't want to generate the CSS classes, see CSS-Class-Generation.