Colors

• Default color palette
• How to create a color theme
• How to apply a color theme
• Gradients
• SASS functions

CodyFrame features a user-friendly yet powerful color system that supports multiple color themes.

Default color palette #

The default color palette includes two themes: light (the 'default') and dark. You can also create additional themes if desired.

To customize the colors, pass the $colors map to the config module in your style.scss file. The only color format supported is HSL (hue/saturation/lightness).

@use 'config' as * with (
  $colors: (
    'default': (
      'primary': (
        'darker': '250, 84%, 38%',
        'dark': '250, 84%, 46%',
        'base': '250, 84%, 54%',
        'light': '250, 84%, 60%',
        'lighter': '250, 84%, 67%'
      ),
      'accent': (
        'darker': '342, 89%, 38%',
        'dark': '342, 89%, 43%',
        'base': '342, 89%, 48%',
        'light': '342, 89%, 56%',
        'lighter': '342, 89%, 62%'
      ),
      'black': (
        'base': '230, 13%, 9%'
      ),
      'white': (
        'base': '0, 0%, 100%'
      ),
      'warning': (
        'darker': '35, 79%, 48%',
        'dark': '35, 79%, 56%',
        'base': '35, 79%, 66%',
        'light': '35, 79%, 74%',
        'lighter': '35, 79%, 82%'
      ),
      'success': (
        'darker': '170, 78%, 26%',
        'dark': '170, 78%, 31%',
        'base': '170, 78%, 36%',
        'light': '170, 78%, 42%',
        'lighter': '170, 78%, 47%'
      ),
      'error': (
        'darker': '342, 89%, 38%',
        'dark': '342, 89%, 43%',
        'base': '342, 89%, 48%',
        'light': '342, 89%, 56%',
        'lighter': '342, 89%, 62%'
      ),
      'bg': (
        'darker': '240, 4%, 90%',
        'dark': '240, 4%, 95%',
        'base': '0, 0%, 100%',
        'light': '0, 0%, 100%',
        'lighter': '0, 0%, 100%'
      ),
      'contrast': (
        'lower': '240, 4%, 85%',
        'low': '240, 4%, 65%',
        'medium': '225, 4%, 47%',
        'high': '230, 7%, 23%',
        'higher': '230, 13%, 9%'
      )
    ),
    'dark': (
      'primary': (
        'darker': '250, 100%, 60%',
        'dark': '250, 100%, 64%',
        'base': '250, 100%, 69%',
        'light': '250, 100%, 72%',
        'lighter': '250, 100%, 76%'
      ),
      'accent': (
        'darker': '342, 92%, 41%',
        'dark': '342, 92%, 47%',
        'base': '342, 92%, 54%',
        'light': '342, 92%, 60%',
        'lighter': '342, 92%, 65%'
      ),
      'black': (
        'base': '230, 13%, 9%'
      ),
      'white': (
        'base': '0, 0%, 100%'
      ),
      'warning': (
        'darker': '35, 79%, 48%',
        'dark': '35, 79%, 56%',
        'base': '35, 79%, 66%',
        'light': '35, 79%, 74%',
        'lighter': '35, 79%, 82%'
      ),
      'success': (
        'darker': '170, 78%, 26%',
        'dark': '170, 78%, 31%',
        'base': '170, 78%, 36%',
        'light': '170, 78%, 42%',
        'lighter': '170, 78%, 47%'
      ),
      'error': (
        'darker': '342, 92%, 41%',
        'dark': '342, 92%, 47%',
        'base': '342, 92%, 54%',
        'light': '342, 92%, 60%',
        'lighter': '342, 92%, 65%'
      ),
      'bg': (
        'darker': '232, 7%, 8%',
        'dark': '233, 8%, 11%',
        'base': '232, 11%, 15%',
        'light': '233, 8%, 19%',
        'lighter': '232, 7%, 22%'
      ),
      'contrast': (
        'lower': '240, 6%, 26%',
        'low': '240, 3%, 41%',
        'medium': '231, 3%, 57%',
        'high': '240, 5%, 82%',
        'higher': '240, 100%, 99%'
      )
    )
  )
);

The above map generates a list of CSS variables. For each color variation, it creates 4 custom properties (h/s/l/hsl):

:root, [data-theme=default] {
  /* ... */

  /* primary dark */
  --color-primary-dark-h: 250;
  --color-primary-dark-s: 84%;
  --color-primary-dark-l: 46%;
  --color-primary-dark: hsl(var(--color-primary-dark-h), var(--color-primary-dark-s), var(--color-primary-dark-l));

  /* primary base */
  --color-primary-h: 250;
  --color-primary-s: 84%;
  --color-primary-l: 54%;
  --color-primary: hsl(var(--color-primary-h), ...);

  /* primary light */
  --color-primary-light-h: 250;
  --color-primary-light-s: 84%;
  --color-primary-light-l: 60%;
  --color-primary-light: hsl(var(--color-primary-light-h), ...);
  /* ... */
}

[data-theme=dark] {
  /* ... */
  --color-primary-h: 250;
  --color-primary-s: 100%;
  --color-primary-l: 69%;
  --color-primary: hsl(var(--color-primary-h), ...);
  /* ... */
}

When you customize the color palette, all the color, border, and background utility classes are automatically created.

How to create a color theme #

The anatomy of a color theme includes:

• a background color (e.g., white or light gray in a light theme)
• branding colors (e.g., primary and accent colors)
• feedback colors (e.g., success and warning)
• black and white
• a scale of color contrasts (e.g., shades of black in a light theme)

Most colors have variations, such as 'light', 'lighter', etc. The background color variations indicate the elevation of the element (i.e., how close the element is to the light source).

When designing components, consider how color choices will affect all themes. For example, --color-bg and --color-bg-light may look the same in a light theme, but they differ in a dark theme.

How to apply a color theme #

A color theme can be applied to the whole page or to a specific component. In both cases, use data-theme="{theme-name}".

Example:

<!-- ↓ apply the theme to the body -->
<body data-theme="dark">
  <!-- ... -->
</body>

<!-- ↓ apply the theme to a component -->
<body>
  <main>
    <section></section>
    <section data-theme="dark"></section>
    <section></section>
  </main>
  <!-- ... -->
</body>

In CSS, use the color variables:

.title {
  color: var(--color-contrast-higher);
}

.component {
  background: var(--color-bg-dark);
}

.component:hover {
  background: var(--color-bg-darker);
}

Our utility classes automatically apply the color variables:

<ul class="bg" data-theme="dark"> <!-- background-color: var(--color-bg); -->
  <li class="color-accent">...</li> <!-- color: var(--color-accent); -->
</ul>

Gradients #

To add gradients to your color palette, pass a $gradients map to the config module in your style.scss:

@use 'config' as * with (
  $gradients: (
    'default': (
      'primary': (
        'stop-1': '250, 84%, 54%',
        'stop-2': '342, 89%, 48%'
      )
    ),
    'dark': (
      'primary': (
        'stop-1': '250, 100%, 69%',
        'stop-2': '342, 92%, 54%'
      )
    ),
  )
);

For each gradient, specify a minimum of two colors. Optionally, customize the stop colors in different themes. 

The generated CSS from the above example:

:root, [data-theme=default] {
  --gradient-primary-stop-1-h: 250;
  --gradient-primary-stop-1-s: 84%;
  --gradient-primary-stop-1-l: 54%;
  --gradient-primary-stop-1: hsl(250, 84%, 54%);
  --gradient-primary-stop-2-h: 342;
  --gradient-primary-stop-2-s: 89%;
  --gradient-primary-stop-2-l: 48%;
  --gradient-primary-stop-2: hsl(342, 89%, 48%);
}

[data-theme=dark] {
  --gradient-primary-stop-1-h: 250;
  --gradient-primary-stop-1-s: 100%;
  --gradient-primary-stop-1-l: 69%;
  --gradient-primary-stop-1: hsl(250, 100%, 69%);
  --gradient-primary-stop-2-h: 342;
  --gradient-primary-stop-2-s: 92%;
  --gradient-primary-stop-2-l: 54%;
  --gradient-primary-stop-2: hsl(342, 92%, 54%);
}

To apply a gradient in CSS:

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

Alternatively, use the background, border, and color utility classes.

SASS functions #

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

Examples:

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

  // return color with lightness multiplied by 0.9
  background-color: lightness(var(--color-primary), 0.9);

  // return color with hue multiplied by 0.9
  border-color: adjust-hsla(var(--color-primary), 0.9, 1, 1, 1);
}

How to do the same in CSS:

.component {
  color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.2);

  background-color: hsl(var(--color-primary-h), var(--color-primary-s), calc(var(--color-primary-l) * 0.9));

  border-color: hsla(calc(var(--color-primary-h) * 0.9), var(--color-primary-s), var(--color-primary-l), 1);
}