Colors

Colors are defined programatically and can be accessed with the get-color() function.

It takes a string name and an optional value. 500 is middle.

@use "@/styles/abstracts" as *;

.example {
    background: get-color("light", 200);
}

Transparencies

“light” and “dark” are just white and black with different amounts of opacity.