Borders

Borders are commonly used in most apps. This is one of the easier topics to talk about. We’ll be talking about only two variables for borders:

• --bd: The normal border color.
• --bd-focus: The more stressed border color can be used on hover, for example.

Using alpha channel #

We’ll use an alpha channel with either white or black to create our borders. We’ll be using rgba again here:

• Light theme

// We're aiming for a simple transparent black border, so we set the alpha channel of black:
$bd-light: rgba(0, 0, 0, 0.1);
$bd-focus-light: rgba(0, 0, 0, 0.2);

• Dark theme

// We're aiming for a simple transparent white border, so we set the alpha channel of white:
$bd-dark: rgba(255, 255, 255, 0.1);
$bd-focus-dark: rgba(255, 255, 255, 0.2);

Some simple usages: