Colors - v3

• Define Color Variables
• Main Colors
• Feedback Colors
• Background + Contrast Scale
• Black & White
• Gradients
• Themes
• Color Functions
• Colors Visual Editor
• Utility Classes

The custom-style/_colors.scss file contains the color palette of your project.

Define Color Variables #

You can create your color palette manually, or use the Color editor.

CodyFrame colors are organized into 5 main categories:

1. Main
2. Feedback
3. Bg + Contrasts
4. Black + White
5. Gradients

Each color is defined as an HSL color using the defineColorHSL mixin:

:root {
  @include defineColorHSL(--color-primary, 220, 90%, 56%);
}

Which outputs in CSS:

:root {
  --color-primary: hsl(220, 90%, 56%);
  --color-primary-h: 220;
  --color-primary-s: 90%;
  --color-primary-l: 56%;
}

HSL stands for hue, saturation, and lightness. By generating each HSL value separately, we can combine SASS color functions and CSS Variables.

Main Colors #

These are the "Brand" colors, mostly used for interactive elements (e.g., buttons). Each color in this section has 5 color variations (base color + 2 lighter versions + 2 darker versions).

:root {
  // color primary
  @include defineColorHSL(--color-primary-darker, 250, 84%, 38%);
  @include defineColorHSL(--color-primary-dark, 250, 84%, 46%);
  @include defineColorHSL(--color-primary, 250, 84%, 54%);
  @include defineColorHSL(--color-primary-light, 250, 84%, 60%);
  @include defineColorHSL(--color-primary-lighter, 250, 84%, 67%);
  
  // color secondary
  @include defineColorHSL(--color-accent-darker, 342, 89%, 38%);
  @include defineColorHSL(--color-accent-dark, 342, 89%, 43%);
  @include defineColorHSL(--color-accent, 342, 89%, 48%);
  @include defineColorHSL(--color-accent-light, 342, 89%, 56%);
  @include defineColorHSL(--color-accent-lighter, 342, 89%, 62%);
}

Feedback Colors #

Feedback colors are used to convey specific meanings like success/error/warning. Each color in this section has 5 color variations (base color + 2 lighter versions + 2 darker versions).

:root {
  // feedback
  @include defineColorHSL(--color-warning-darker, 46, 100%, 47%);
  @include defineColorHSL(--color-warning-dark, 46, 100%, 50%);
  @include defineColorHSL(--color-warning, 46, 100%, 61%);
  @include defineColorHSL(--color-warning-light, 46, 100%, 71%);
  @include defineColorHSL(--color-warning-lighter, 46, 100%, 80%);

  @include defineColorHSL(--color-success-darker, 122, 50%, 47%);
  @include defineColorHSL(--color-success-dark, 122, 50%, 52%);
  @include defineColorHSL(--color-success, 122, 50%, 60%);
  @include defineColorHSL(--color-success-light, 122, 50%, 69%);
  @include defineColorHSL(--color-success-lighter, 122, 50%, 76%);

  @include defineColorHSL(--color-error-darker, 342, 89%, 38%);
  @include defineColorHSL(--color-error-dark, 342, 89%, 43%);
  @include defineColorHSL(--color-error, 342, 89%, 48%);
  @include defineColorHSL(--color-error-light, 342, 89%, 56%);
  @include defineColorHSL(--color-error-lighter, 342, 89%, 62%);
}

Background + Contrast Scale #

The --color-bg is the background color of the theme in use. E.g., in a light theme, the --color-bg could be white.

The background color variations (base color + 2 lighter versions + 2 darker versions) are used to set the elevation. The elements closer to the 'light source' (higher z-index) should be lighter and with a stronger shadow.

In a color contrast scale, the --color-contrast-higher is opposite to the --color-bg. E.g., if your light theme has a white background, the --color-contrast-higher could be a very dark color. In a dark theme, if the --color-bg is a dark grey, the --color-contrast-higher could be white or a very light color.

The other color contrasts (lower, low, medium, and high) are color shades in between the --color-bg and the --color-contrast-higher.

In other words, if --color-bg-{value} is the background, --color-contrast-{value} is the content.

:root, [data-theme="default"] {
  // background
  @include defineColorHSL(--color-bg-darker, 210, 4%, 89%);
  @include defineColorHSL(--color-bg-dark, 180, 3%, 94%);
  @include defineColorHSL(--color-bg, 0, 0%, 100%);
  @include defineColorHSL(--color-bg-light, 180, 3%, 100%);
  @include defineColorHSL(--color-bg-lighter, 210, 4%, 100%);

  // color contrasts
  @include defineColorHSL(--color-contrast-lower, 180, 1%, 84%);
  @include defineColorHSL(--color-contrast-low, 210, 2%, 64%);
  @include defineColorHSL(--color-contrast-medium, 204, 2%, 46%);
  @include defineColorHSL(--color-contrast-high, 210, 7%, 21%);
  @include defineColorHSL(--color-contrast-higher, 204, 28%, 7%);
}

The color editor is a great tool that generates a contrast scale starting from the background and the higher contrast colors.

While creating the scale, it helps to associate each color to a UI element:

• color-contrast-lower → borders
• color-contrast-low → very subtle text
• color-contrast-medium → subtle text
• color-contrast-high → text color
• color-contrast-higher → text heading color

Black & White #

--color-white and --color-black represent white and black in your color palette:

:root, [data-theme="default"] {
  // black + white
  @include defineColorHSL(--color-black, 240, 8%, 12%);
  @include defineColorHSL(--color-white, 0, 0%, 100%);
}

Unlike the color contrasts, --color-white and --color-black are not affected by the theme in use. More info in the Themes section.

Gradients #

You can (optionally) create color gradients using the Color editor. The tool will generate two color stops for each gradient:

:root {
  // gradient primary
  @include defineColorHSL(--gradient-primary-stop-1, 220, 90%, 56%);
  @include defineColorHSL(--gradient-primary-stop-2, 327, 87%, 35%);
}

You can then use the background, border, and color utility classes (generated by the tool) to apply gradients to your elements.

<h1 class="color-gradient-primary-right">Gradients</h1>

Alternatively, you can use the gradient variables in CSS:

.gradient-bg {
  background-image: linear-gradient(90deg, var(--gradient-primary-stop-1), var(--gradient-primary-stop-2));
}

Themes #

A theme is a group of related colors, stored in CSS variables. The custom-style/_colors.scss file of CodyFrame includes a 'default' (light) theme and a 'dark' theme.

:root, [data-theme="default"] {
  // main
  @include defineColorHSL(--color-primary-darker, 250, 84%, 38%);
  @include defineColorHSL(--color-primary-dark, 250, 84%, 46%);
  @include defineColorHSL(--color-primary, 250, 84%, 54%);
  @include defineColorHSL(--color-primary-light, 250, 84%, 60%);
  @include defineColorHSL(--color-primary-lighter, 250, 84%, 67%);

  // other colors...
}

[data-theme="dark"] {
  // main
  @include defineColorHSL(--color-primary-darker, 250, 93%, 57%);
  @include defineColorHSL(--color-primary-dark, 250, 93%, 61%);
  @include defineColorHSL(--color-primary, 250, 93%, 65%);
  @include defineColorHSL(--color-primary-light, 250, 93%, 69%);
  @include defineColorHSL(--color-primary-lighter, 250, 93%, 72%);

  // other colors...
}

Once you've defined your themes variables, to apply them to a component - or a group of components, add data-theme="{themeName}":

<div class="component" data-theme="dark">
  <!-- ... -->
</div>

In the example below, try changing the data-theme value from 'default' to 'dark' in the HTML (the default theme is applied even if you don't specify the theme at all):

Considering the default theme in the example above, using --color-bg will return white. However, if you apply another theme, --color-bg will return a different color. If you want to set a white color that is not affected by the theme (e.g., for the text color of a button), you should use --color-white.

Color Functions #

Use the color functions to modify the opacity and lightness of color variables.

Examples:

.component {
  // return color with opacity 0.2
  color: alpha(var(--color-contrast-higher), 0.2);

  // return color with lightness equal to (--color-primary-l*0.9)
  background-color: lightness(var(--color-primary), 0.9);

  // return color with hue equal to (--color-primary-h*0.9)
  border-color: adjustHSLA(var(--color-primary), 0.9, 1, 1, 1);
}

Color Editor #

The color editor generates color palettes and themes compatible with CodyFrame. Copy the generated SCSS and paste it into the custom-style/_colors.scss file of the framework.

Utility Classes #

For a full list of color utility classes, refer to the utilities page.