CSS variables in Codebase

Since version 5.2, Codebase has been using CSS variables (also known as custom properties).

Capability for CSS variables has been implemented in all major web browsers. While phone browsers have caught up in the last year or two, most laptop/desktop browsers have had it since 2016 (some 2014). Internet Explorer never had CSS variables (IE has been consigned to history since even Microsoft itself stopped supporting it in May 2022). Since v.5.x Codebase hasn’t supported IE. Now, it’s past time to switch to CSS variables — and not provide fallbacks.

Codebase itself continues to use the Sass package from NPM.JS for Sass nesting, @each loops, maps, @if logic, and CSS minification.

Until v.5.2, the Codebase default variables file was full of Sass variables that controlled the entire look and feel of Codebase. Editing (or overriding) these variables could only be done using a Sass preprocessor. But now, all interpotated Sass variables have been refactored as CSS variables, while the toggle variables that were used to control true/false @if logic are still Sass variables.

In Codebase, CSS variables are either “hard coded” or generated via Sass maps that are used by @each Sass loops. But by the time they get into the CSS, they are all simply CSS variables. And they are all in the :root {} selector.

The Codebase root selector

There’s only one a massive :root {} selector in codebase, originating in the default variables file. In summary, it has CSS variables for setting all of the following:

1. Font stacks
2. UI colors (base and hover state colors for warning, danger, success, info, primary, secondary, and tertiary), generated from the Sass map $ui-setup
3. A color variable generator that outputs all the shade variations -100 through -900 of the Codebase color swatches amber   , red   , green   , blue   , purple   , teal   , and gray    (note: the UI colors are the -600 shades of these colors, and the hover states for buttons are the -700 shades)
4. Base theme colors — for page background, default text color, line details (e.g. <hr>, form input borders, table cell borders), links (various states), default buttons, code blocks, and highlight and selection colors
5. Widths (generated by Sass map) — used in media query breakpoint widths, containers and width utilities
6. Spacing (generated by Sass map) — used in utilities for margins, paddings, and flexbox/grid gaps
7. Borders and border-radius (rounded corners)
8. Forms and buttons
9. Heading sizes (generated by Sass map)
10. Text settings — used in classless tag styles and utility classes

CSS variables in Codebase

Some Codebase variables are simple hand-coded (such as the theme colors), while others are outputted by a Sass loops (such as the color shades variables generator). Either way, they are all available for you to use in ordinary CSS. Codebase itself subsequently uses all these CSS variables in various places.

• Information on Sass maps
• Information on Sass loops.

Codebase itself utilizes more than 100 CSS variables for controlling colors, sizes, typography, etc. All these variables are all available for you to use in our own styles. Many of these you can override, setting your own values, while some it does not make sense to modify.

Example: How Codebase uses color variables

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

// Theme color Sass 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%)
);

// Color shades variables generator
@each $key,
$val in $theme-color {
  @each $key2,
  $val2 in $shade {
    --#{$key}-#{$key2}: color-mix(in OKLAB, #{$val}, #{$val2});
  }
}

The are are 7 theme color CSS variables, and then the color shades variables generator outputs 63 more (= 7 colors × 9 shades).

Since Codebase v.5.3.0 has switched to using the new color-mix() CSS formula (in the OKLAB color space), you can simply modify any of the 7 theme color values in thr CSS – and your modified red, blue, green etc. will be picked propagated by the web browser thoughout the color shade variables. (You can see what changes happen using the big grid of color swatches on the color utilities) page.

Similar color shade variables are hand-coded for setting the base theme styles for page background, default text, links, table cell border color, etc.

All of the 63 color shades variables are used for generating utility classes for backgrounds, text, and border color — and hover states of each.

All of the Codebase :root{} variables are available for you to use in your own CSS, and you can override any of them at any point in your CSS. For example:

If you want to modify the theme color names and/or add more colors to your theme, then you need to use a Sass (SCSS) preprocessor in your project, and you need to make changes to both your theme colors and make corresponding changes in the $theme-color Sass map. After you’ve done that, the Codebase color shades variables generator will go thorugh and output all the utility classes you need, via the Sass preprocessor.

Note: Default theme colors are the same as the UI colors, but they don’t need to be – you can change either, by editing their respective base root variables.