frame·plates - Color Variables

Colors = Variables.

The perfect use of css-variables: a consistent color array. But the consistency is not part of the variables, though; it’s in the usage. In maintaining a rigorous order and avoiding any non-variable color definition, we can color-scheme in no time and provide a dark-mode palette by changing 15 values in one spot. It’s also a lot safer than search&replace white for example. Once you see a stray color definition outside the :root variables like fuchsia or rgba(240,60,128,.75) we‘re in jungle mode again.

Semantics

Some of the colors are identical?! Yes, at least here they are. The color definitions (variables) are intended to be somewhat semantic, and the colors’ names describe the function or place, not the color itself. Like page background, navigation (here both white), boxes and footer (same grey here), an overall text-color (which is similar to 50% black) and the lighter version that is close to 30% black. It‘s up to you if you use all of these or just do away with all transparent colors and throw out accent and notify because hilite is enough. You‘re actually very much encouraged to edit _base.scss and change all the color variables…

brand-color-1
#611eca
#611eca

brand-color-2
#ff7400
#dd5b00

hilite
#fbff70
#e5d91a

notification
#ff00ee
#ff00ee

accent
#5e6dff
#4858ff

blk
black
white

wht
white
black

text-std
#777
#bbb

text-dim
rgba(0, 0, 0, .33)
rgba(255, 255, 255, .5)

text-inv
white
black

wht-10
rgba(255, 255, 255, .1)
rgba(0, 0, 0, .1)

wht-20
rgba(255, 255, 255, .2)
rgba(0, 0, 0, .2)

wht-30
rgba(255, 255, 255, .3)
rgba(0, 0, 0, .3)

wht-50
rgba(255, 255, 255, .5)
rgba(0, 0, 0, .5)

blk-05
rgba(0, 0, 0, .05)
rgba(255, 255, 255, .075)

blk-10
rgba(0, 0, 0, .1)
rgba(255, 255, 255, .1)

blk-20
rgba(0, 0, 0, .2)
rgba(255, 255, 255, .2)

blk-30
rgba(0, 0, 0, .3)
rgba(255, 255, 255, .3)

blk-50
rgba(0, 0, 0, .5)
rgba(255, 255, 255, .5)

bg-modal
rgba(0, 0, 0, .5)
rgba(0, 0, 0, .75)

bg-std
white
black

bg-nav
white
rgba(0, 0, 0, .75)

bg-box
#f9f9f9
#1a1a1a

bg-footer
#f9f9f9
#181818

bg-formfield
#f4f4f4
#3d3d3d

bg-demo
#f0f3f6
#425662

Dark Mode

All colors have a twin version inside the @media (prefers-color-scheme: dark) definition in _color.scss where the whites, greys and blacks are pretty much inverted versions and some "real" colors are darker versions of the bright ones.

This is a rather functionalistc approach, and there sure can be situations where just a "inverted greyscale version" turns out to be something so different that it won‘t fit the original design.

Also, the same images appear in a black/dark environment which may or may not work. Here picture srcset comes in handy, where you can add dimmed or nightime versions of your images with media="(prefers-color-scheme: dark)" – I decided to go with mid-grey black and white photos to avoid the issue here.

It‘s up to you to decide if this is still prototype/wireframe or small site territory.

Display P3

Where applicable @supports (color: color(display-p3 1 1 1)) display-p3 definitions are in place as an option for modern displays, where these colors really pop. Of course that is only useful for really saturated colors, everything inside the sRGB gamut (including everything greyscale) wouldn‘t be any different.

Usage

All elements that have a color variable named after them use it as a default. We keep the somewhat semantic or context-dependant text colors (invtext, darktext, and dimtext) and the default --txt-std.

For all random color applications we (now) have a list of classes which adjust color: prefixed with .text- and a second one that takes care of the background-color: starting with .back-

Earlier versions (before 2.0) did use the same color variables, but they were all applied as inline-styles, not with classes. The older templates still work with the updated stylesheet, and inline-styling is absolutely usable, but the new way is much easier to type and way shorter:

.text-blk {color: var(--blk)}
.text-b05 {color: var(--blk-05)}
.text-b1 {color: var(--blk-10)}
.text-b2 {color: var(--blk-20)}
.text-b3 {color: var(--blk-30)}
.text-b5 {color: var(--blk-50)}

.text-wht {color: var(--wht)}
.text-w1 {color: var(--wht-10)}
.text-w2 {color: var(--wht-20)}
.text-w3 {color: var(--wht-30)}
.text-w5 {color: var(--wht-50)}

.text-acc {color: var(--accent)}
.text-note {color: var(--notification)}
.text-hi {color: var(--hilite)}
.text-bc1 {color: var(--brand-color-1)}
.text-bc2 {color: var(--brand-color-2)}

.back-blk {backgr…: var(--blk)}
.back-b05 {backgr…: var(--blk-05)}
.back-b1 {backgr…: var(--blk-10)}
.back-b2 {backgr…: var(--blk-20)}
.back-b3 {backgr…: var(--blk-30)}
.back-b5 {backgr…: var(--blk-50)}

.back-wht {backgr…: var(--wht)}
.back-w1 {backgr…: var(--wht-10)}
.back-w2 {backgr…: var(--wht-20)}
.back-w3 {backgr…: var(--wht-30)}
.back-w5 {backgr…: var(--wht-50)}

.back-acc {backgr…: var(--accent)}
.back-note {backgr…: var(--notification)}
.back-hi {backgr…: var(--hilite)}
.back-bc1 {backgr…: var(--brand-color-1)}
.back-bc2 {backgr…: var(--brand-color-2)}

.back-std {backgr…: var(--bg-std)}
.back-nav {backgr…: var(--bg-nav)}
.back-box {backgr…: var(--bg-box)}
.back-form { backgr…: var(--bg-formfield)}
.back-foot {backgr…: var(--bg-footer)}
.back-demo {backgr…: var(--bg-demo)}
.back-mod {backgr…: var(--bg-modal)}