Style-reference for Style-Library 2.0

Here we will give a short overview of all the new features of the style libary

CSS Variables

Colors

These are included through the style.css file

Primary Original Colors

Primary Colors

Success Colors

Warning and Highlight Colors

you can replace "warning" with "highlight" they are the same colors!

Danger Colors

Info Colors

Neutral Colors

for all colors you can also use the following shade names instead of the number values

Extra

For fun, these days you can mix 2 colors, don't forget to include the colors-space ("in oklab" is most consistent)

We can use it to come pretty close to the odd original primary color of value 500 by mixing the new primary color with 20% of a 2 shades darker neutral color

mixed color

color-mix(in oklab,
var(--clr-primary-200), 
var(--clr-neutral-400) 20%)
original

Extra colors

These are included through the extra.css file

We will not be providing helper classes for these colors as their use should be quite limited

Did-You-Know Colors

Experiment Colors

Study-Tip Colors

Technique Colors

Informative Colors

Educational Colors

Degrees

hours as degree references

linear-gradient(
var(--deg-hour-[value]), 
var(--clr-info-500), 
var(--clr-success-500))

Box-shadows

shadows

box-shadow: var(--bxsh-[value])

Typography

font-family

font-family: var(--font-family-[value])

[sans-serif or base: Ubuntu]: The quick brown fox jumps over the lazy dog

[serif: Merriweather]: The quick brown fox jumps over the lazy dog

[monospace: Source Code Pro]: The quick brown fox jumps over the lazy dog

[source or alt: Source Sans 3]: The quick brown fox jumps over the lazy dog

font-size

font-size: var(--font-size-[value])

[small]: The quick brown fox jumps over the lazy dog

[base]: The quick brown fox jumps over the lazy dog

[large]: The quick brown fox jumps over the lazy dog

[xl]: The quick brown fox jumps over the lazy dog

[2xl]: The quick brown fox jumps over the lazy dog

font-weight

font-weight: var(--font-weight-[value])

[normal]: The quick brown fox jumps over the lazy dog

[bold]: The quick brown fox jumps over the lazy dog

[light]: The quick brown fox jumps over the lazy dog

Spacing

margin: var(--spacing-[value]) padding: var(--spacing-[value])

Borders

border radius

border-radius: var(--borad-[value])

border size

border-width: var(--bosz-[value])

Z-index

z-index: var(--zi-[value])

Fractions

Supported denominators: 1, 2, 3, 4, 5, 6 and 12

width: var(--fract-[numerator]-[denominator]) 
<div style="width: var(--fract-1-1);">
    <div style="width: var(--fract-1-2); padding: var(--spacing-xs); box-sizing: border-box; height: 70px;">
        <div style="height: var(--fract-1-1);">1/2</div>
    </div>
    <div style="width: var(--fract-1-2); padding: var(--spacing-xs); box-sizing: border-box; height: 70px;">
        <div style="height: var(--fract-1-1);">1/2</div>
    </div>
</div>
1/1
1/2
1/2
2/3
1/3
3/4
1/4
2/5
3/5
1/6
'
5/6
10/12
2/12