🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Colors

The 📁 custom-style/_colors.scss file includes the CSS color variables and the color themes. Make sure to update the default values with your custom colors.


🔍 On this page:

  1. Define color variables
  2. Main colors
  3. Feedback
  4. Color contrasts
  5. Black + White
  6. Themes
  7. Color functions

Define Color Variables #

All color variables are defined using HSL color values. HSL stands for hue, saturation, and lightness. The great thing about HSL is that creating color variations is easy and intuitive: modify the hue, saturation, and lightness of the starting color.

Each color is defined using the defineColorHSL mixin. For example:

:root, [data-theme="default"] {
  @include defineColorHSL(--color-primary, 220, 90%, 56%);
}

We use this SASS mixin to generate 4 CSS variables for each color (--color-name, --color-name-h, --color-name-s, --color-name-l).

For example, in CSS you have:

:root, [data-theme="default"] {
  --color-primary: hsl(220, 90%, 56%);
  --color-primary-h: 220;
  --color-primary-s: 90%;
  --color-primary-l: 56%;
}

These variables allow us to combine SASS color functions and CSS Variables. For example, you can use the alpha or the lightness functions to change the opacity/ligthness of a color. You can read more about these color functions on the Mixins documentation page.

Make sure to update the default HSL color values with your custom colors.

🚀 You can use the Color Editor to create and export a custom color palette compatible with the Framework.

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, [data-theme="default"] {
  // main
  @include defineColorHSL(--color-primary-darker, 220, 90%, 36%);
  @include defineColorHSL(--color-primary-dark, 220, 90%, 46%);
  @include defineColorHSL(--color-primary, 220, 90%, 56%);
  @include defineColorHSL(--color-primary-light, 220, 90%, 66%);
  @include defineColorHSL(--color-primary-lighter, 220, 90%, 76%);

  @include defineColorHSL(--color-accent-darker, 355, 90%, 41%);
  @include defineColorHSL(--color-accent-dark, 355, 90%, 51%);
  @include defineColorHSL(--color-accent, 355, 90%, 61%);
  @include defineColorHSL(--color-accent-light, 355, 90%, 71%);
  @include defineColorHSL(--color-accent-lighter, 355, 90%, 81%);
}

Feedback #

Feedback colors are used to convey specific meanings like success/error/warning.

:root, [data-theme="default"] {
  // feedback
  @include defineColorHSL(--color-success-darker, 94, 48%, 36%);
  @include defineColorHSL(--color-success-dark, 94, 48%, 46%);
  @include defineColorHSL(--color-success, 94, 48%, 56%);
  @include defineColorHSL(--color-success-light, 94, 48%, 66%);
  @include defineColorHSL(--color-success-lighter, 94, 48%, 76%);

  @include defineColorHSL(--color-error-darker, 355, 90%, 41%);
  @include defineColorHSL(--color-error-dark, 355, 90%, 51%);
  @include defineColorHSL(--color-error, 355, 90%, 61%);
  @include defineColorHSL(--color-error-light, 355, 90%, 71%);
  @include defineColorHSL(--color-error-lighter, 355, 90%, 81%);

  @include defineColorHSL(--color-warning-darker, 46, 100%, 41%);
  @include defineColorHSL(--color-warning-dark, 46, 100%, 51%);
  @include defineColorHSL(--color-warning, 46, 100%, 61%);
  @include defineColorHSL(--color-warning-light, 46, 100%, 71%);
  @include defineColorHSL(--color-warning-lighter, 46, 100%, 81%);
}

Color contrasts #

These colors are used to define a scale of contrasts (i.e., neutral colors):

:root, [data-theme="default"] {
  // color contrasts
  @include defineColorHSL(--color-bg, 0, 0%, 100%);
  @include defineColorHSL(--color-contrast-lower, 0, 0%, 95%);
  @include defineColorHSL(--color-contrast-low, 240, 1%, 83%);
  @include defineColorHSL(--color-contrast-medium, 240, 1%, 48%);
  @include defineColorHSL(--color-contrast-high, 240, 4%, 20%);
  @include defineColorHSL(--color-contrast-higher, 240, 8%, 12%);
}

To create a scale of contrasts you need two starting colors: 1) background color and 2) highest contrast color. You can then generate stop colors in between, using tools like the Color Editor.

While defining the scale, it helps to associate each color to an element of your UI:

  • color-bg → background color of the theme in use
  • color-contrast-lower → low contrast background
  • color-contrast-low → borders
  • color-contrast-medium → text subtle
  • color-contrast-high → text color
  • color-contrast-higher → text heading color

If we consider a theme with a white background, then an example of the scale of contrasts could be the following:

Black + White #

The --color-white and --color-black colors rapresent the black and white color values that you want to keep unchanged regardless of the theme in use:

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

It may not be clear why we need --color-white and --color-black (since we have already defined a color contrast scale), but it'll make sense once you read the Themes section of this page.

Themes #

A theme is a group of related colors. The 📁 custom-style/_colors.scss file of our framework includes a theme titled "default". To create a new theme, you need to make a copy of the default theme and overwrite the values of the CSS variables (or use the Color Editor).

If you use the color variables properly (in particular, the color contrasts) in your components, it's amazing how easily you can switch from a "light" to a "dark" theme simply by applying a class.

In the example below, you can take a look at how to create a new theme by inspecting the SCSS tab. By changing the data-theme value to one among default/dark/soft in the HTML, you apply a different theme (the default theme is applied even if you don't specify the theme at all).

Now that you know how themes work, let's go back to --color-black and --color-white.

Considering the default theme in the example above, if you're working on a component level and want to set a white color that could change with the theme, then you should use --color-bg. While if you want a white color that is not affected by the theme, you should use --color-white.

Important: the background-color of the theme is, by default, equal to the --color-bg color variable.

For example: if you need to set the background color of an element, you may want to use --color-bg, so that when the theme changes, that color is updated automatically. While if you're setting the color of the label of a button, you may need to use --color-white, so that if the theme changes but the background of the button remains the same, you won't risk the label color being updated and becoming unreadable.

Note: we use CSS variables and a gulp plugin to generate a fallback. However, themes other than the default one won't be visible in older browsers. That shouldn't be an issue because browsers that don't support CSS variables will still render the default theme (the content is accessible).

Color functions #

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

Name Description
alpha(var(--color-name), alpha) SASS Function. Used to return a color with different opacity value.
lightness(var(--color-name), alpha) SASS Function. Used to return color with different lightness value.

Here's an example of how to use the alpha function:

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

Here's an example of how to use the lightness function:

.component {
  // return color with lightness equal to (--color-name-l*0.9)
  background-color: lightness(var(--color-name), 0.9);
}

iOS12 bug #

📢 update: This bug has been fixed in iOS12.1.

There's a bug in Safari (iOS12) if you use a CSS Variable to set the opacity inside the box-shadow, border, text-shadow properties.

Specifically, the following code:

.component {
  box-shadow: 0 1px 3px hsla(var(--color-h), var(--color-s), var(--color-l), 0.2);
}

generates a black shadow even if the variables are correctly converted (if you check the computed style with the code inspector).

Therefore using the alpha function will generate the same issue:

.component {
  box-shadow: 0 1px 3px alpha(var(--color-black), 0.2);
}

This bug has been fixed in the upcoming Safari 12.1 version. In the meantime, a solution is to create a variable to store the alpha value of the color, and use that variable inside the property:

.component {
  --color-shadow: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.2); // fix iOS 12 bug
  box-shadow: 0 1px 4px var(--color-shadow);
}

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us