Colors

Codebase’s color swatches have been deployed as utility classes for backgrounds, borders, text – and hover states for each.

• Backgrounds: bg-{colorname}-{shade} and hover:bg-{colorname}-{shade}
• Borders: b-{colorname}-{shade} and hover:b-{colorname}-{shade}
• Text: t-{colorname}-{shade} and hover:t-{colorname}-{shade}

Default colors

Codebase has a set of 7 base colors with obvious names. amber, red, green, blue, purple, teal, and gray.

These colors are deliberately mid-shade, so that a range of lighter and darker variants can be drawn out of them (see color swatches below).

The default colors are merely here for demonstration purposes. You can use them to get you started as-is, or you can also swap them out for whatever you need in your project. You can have your own named colors and color codes.

In the utility classes, shades of each named color are available. These shades are identified by suffixes -100 to -900.

A slightly darker shade of each of these seven are also aliased as warning, danger, success, info, primary, secondary, and tertiary for use as UI colors. UI colors are used for buttons, badges and labels. The UI colors are declared separately, so you can adjust euther the base colors or the UI colors separately. UI colors do not have a corresponding set of shade swatches.

Color swatches

Codebase default color examples using bg- (background) color shades.

Toggle the panel background color (white or black):

That makes 378 color utilities. Plus there are several extras below.

The Sass color generator

The color shades are generated by nested @each loops in codebase/scss/03_utilities/_colors.scss, that follow the Sass map in codebase/scss/00_setup/_default-variables.scss.

Since Codebase v.5.3.0, the shades are generated using some new CSS features: the color-mix() function and the OKLAB color space.

• Information on color-mix() at Mozilla Developer Network.
• Interview With Björn Ottosson, creator of the OKLAB color space on Smashing Magazine.

The Codebase color swatches generator picks the theme colors, and then mixes in white or black to generate the shades.

In the default variables file codebase/scss/00_setup/_default-variables.scss, the following Sass maps set up the named colors and their shades:

// Root color variables
:root {
  // Variables
  --blue: #1262ed;
  --green: #128a12;
  --amber: #f0b300;
  --red: #cf000f;
  --purple: #9400d3;
  --teal: #0080A2;
  --gray: #767676;
}

// Theme color namer map
$theme-color: (
  "blue": var(--blue),
  "green": var(--green),
  "amber": var(--amber),
  "red": var(--red),
  "purple": var(--purple),
  "teal": var(--teal),
  "gray": var(--gray),
);

// Shade Sass map
$shade: (
  "100": white 90%,
  "200": white 72%,
  "300": white 54%,
  "400": white 36%,
  "500": white 18%,
  "600": black 0%,
  "700": black 18%,
  "800": black 36%,
  "900": black 54%
);

The colors utility class generator is in codebase/scss/03_utilities/_colors.scss:

@if $color-shade-utilities == true {

  @each $key, $val in $theme-color {

    @each $key2, $val2 in $shade {

      .b-#{$key}-#{$key2},
      .hover\:b-#{$key}-#{$key2}:hover {
        border-color: var(--#{$key}-#{$key2});
      }

      .bg-#{$key}-#{$key2},
      .hover\:bg-#{$key}-#{$key2}:hover {
        background-color: var(--#{$key}-#{$key2});
      }

      .t-#{$key}-#{$key2},
      .hover\:t-#{$key}-#{$key2}:hover {
        color: var(--#{$key}-#{$key2});
      }
    }
  }
}

Modifying Codebase colors

• Simple modifications using only CSS variables:
  • When adjusting the Codebase theme colors, if you want to keep and reuse the seven color namesall you need to do is re-declare the variables with your colors. Choose a mid-shade colour as your base, so that you get a good set of swatches.
• Complex modifications using Sass maps:
  • With the Dart Sass preprocessor operating in your web development setup, all you need to do is (remove the Codebase color variables and) declare your own set of :root {} color variables, and create a corresponding theme color namer Sass map, to replace $theme-colors {} (see above). You may need to adjust the $shades {} map too.

If you follow what I did in the default variables file, then you shouldn't need to modify the color utilities file.

The hover: color utilities only take effect when the visitor moves a pointing device, e.g. mouse or finger on a touch screen, over the element. hover: utilities have an !important flag, so that they override other colors that have been set elsewhere. That has been done so you can use these utilities on hyperlinks and buttons.

The border color utilities will color the border on all sides (top, right, bottom, and left). But if you have only set borders on top bt-, right br-, bottom bb-, or left bl- only those sides will be colored. (You can’t use a combination of Codebase border color utilities on one HTML element.)

There are also a few extra color utilities that I will mention further down this page.

Applying colors

Examples:

UI colors

The seven UI colors for warning, danger, success, info, primary, secondary, and tertiary are set independently from the named colors. You can change the UI colors too, to suit your design.

Codebase’s UI colors have been specifically chosen so that they conform to WCAG 2.1 Level AA accessibility guidelines for user interface elements: they have a color contrast ratio of at least 4.5:1. These are slightly darker than the four base colors from which they are derived (amber, red, green, and blue), corresponding to the -600 swatch shades of these colors. These slightly darker shades comply with WCAG 2.1 Level AA accessibility guidelines) – but note that this requires the "warning" UI color to be paired with black text instead of white.

The Codebase UI elements that receive color are buttons, badges, and labels. These incorporate the appropriate colour forthe text (white for text on "danger", "success", and "info"; black for text on "warning".) E.g.

Primary – a primary button using btn btn-primary

Note: the :hover state colors on buttons is one Codebase shade darker.

Warning – a warning label using label label-warning

3 – a "danger" badge using badge badge-danger

See buttons, badges and labels.

In addition, there are simple utility classes for text border b-, text t-, and background bg- for these seven UI colors (note: UI colors do not have shade suffix variations). Example:

•   – bg-warning
•   – bg-danger
•   – bg-success
•   – bg-info
•   – bg-primary
•   – bg-secondary
•   – bg-tertiary

Other color utilities

White and black

-white and -black background, border, text, and hover states of each. Self explanatory. No shades of either (use the -gray- grayscale swatches).

Transparent border and background

• b-transparent / hover:b-transparent
• bg-transparent / hover:bg-transparent

Useful for removing unwanted colors. E.g. use bg-transparent for creating outline (“ghost”) buttons.

Background under border

bg-under-border – makes the element background image or background-color show though the default semi-transparent detail border.

<div class="b-thick bg-primary bg-under-border"></div>

See borders and background colors/images for more information.