Overview of the Classes with Colors

And how they react to element states

Just about any class with color reacts to element state and comes with pseudo classes. The default colors are Red, Green, Blue, Default (which I use for text), Background (not shown because it would blend into the background), and Magenta, each generated with 4 other shades in addition to the base color.

By default, the colors for Background and Default are overridden for dark-mode. Use the in the navbar to see switching modes. Any color can be overridden by adding/removing/changing name/changing value in the colors map in variables.scss. See the Customize section for more details.

Text Color

The text color classes have the form .text-[color] or .text-[color]-[shade], where the shades are dk (dark), dkr (darker), lt (light), and ltr (lighter)

Using the Pseudo Class with Text Color Examples:

<p
  class="
    font-bold
    cursor-pointer
    hover:text-red"
>
  Hover Me
</p>

<p
  class="
    font-bold
    cursor-pointer
    active:text-green"
>
  Press Me
</p>

<input
  class="
    w-6
    font-bold
    text-lg
    border-sm
    focus:text-magenta"
  value="Focus Me"
/>

Background Color

The background color classes have the form .bg-[color] or .bg-[color]-[shade], where the shades are dk (dark), dkr (darker), lt (light), and ltr (lighter)

Using the Pseudo Class with Background Color:

<p
  class="
    font-bold
    cursor-pointer
    hover:bg-red
    hover:text-white"
>
  Hover Me
</p>

<p
  class="
    font-bold
    cursor-pointer
    active:bg-green"
>
  Press Me
</p>

<input
  class="
    w-6
    font-bold
    text-lg
    border-sm
    focus:bg-magenta
    focus:text-white"
  value="Focus Me"
/>

Border Color

The border color classes have the form .border-[color] or .border-[color]-[shade], where the shades are dk (dark), dkr (darker), lt (light), and ltr (lighter).

Also note that borders also havo to have a width to show up with a class like border-sm or border-lg, for example.

Using the Pseudo Classes with Border Color:

<p
  class="
    border-md
    cursor-pointer
    hover:border-red"
>
  Hover Me
</p>

<p
  class="
    border-md
    cursor-pointer
    active:border-magenta"
>
  Press Me
</p>

<input
  class="
    w-6 
    border-md
    focus:border-green"
  value="Focus Me"
/>

Outline Color

The outline color classes have the form .outline-[color] or .outline-[color]-[shade], where the shades are dk (dark), dkr (darker), lt (light), and ltr (lighter).

Also note that outline also havo to have a width AND a style to show up with a classes like outline-sm or outline-lg for the width, and outline-solid for the style, for example.

Using the Pseudo Classes with Outline Color:

<p
  class="
    cursor-pointer
    outline-xl
    outline-groove
    outline-white
    hover:outline-red"
>
  Hover Me
</p>

<p
  class="
    cursor-pointer
    outline-xl
    outline-dotted
    outline-blue
    active:outline-red"
>
  Press Me
</p>

<input
  class="
    w-6
    cursor-pointer
    outline-xl
    outline-inset
    outline-green
    focus:outline-magenta"
  value="Focus Me"
/>

Text Decoration Color

(ToDo: Fix Text Decloration conflicts with style and property)

The text-decoration color classes have the form .decoration-[color] or .decoration-[color]-[shade], where the shades are dk (dark), dkr (darker), lt (light), and ltr (lighter).

Sometimes if you switch a decoration style with a pseudo class from underline to overline for example, it won't inherit the color on all browsers. But that is a really rare use case that can be solved with some custom scss however.

Using the Pseudo Classes with Decoration Color:

<p
  class="
    cursor-pointer
    decoration-xl
    text-line-through
    decoration-green 
    hover:decoration-red"
>
  Hover Me
</p>

<p
  class="
    cursor-pointer
    decoration-xl
    text-overline
    decoration-blue 
    active:decoration-magenta"
>
  Press Me
</p>

<textarea
  class="
    w-6
    outline-sm
    outline-solid
    decoration-xl
    text-underline 
    decoration-magenta-dk
    focus:decoration-green"
    value="Focus Me!"
/>

Selection Color

The selections color classes have the form .decoration-[color] or .decoration-[color]-[shade], where the shades are dk (dark), dkr (darker), lt (light), and ltr (lighter).

Sometimes if you switch a decoration style with a pseudo class from underline to overline for example, it won't inherit the color on all browsers. But that is a really rare use case that can be solved with some custom scss however.

Selection Text Color

Selection Text Background

In addition to the color, the background can be changed

For best results, combine the two! Try selecting the large text below

Select Me!

Here is the Html:

<p
  class="text-2xl py-xl font-header align-center selection-bg-magenta selection-color-white"
  value="Focus Me"
/>

Using the Pseudo Classes with Selection Color:

<p
  class="
    text-lg 
    hover:selection-bg-blue
    hover:selection-color-green
    w-7/10"
>
  Select some text and Hover
</p>

<p
  class="
    text-lg 
    active:selection-bg-blue
    active:selection-color-green
    w-7/10"
>
  Select some text and Press!
</p>

<input
  class="
    border-sm
    text-md 
    focus:selection-bg-magenta
    focus:selection-color-white
    w-7/10"
  value="Focus Me"
/>

A natural next topic would be transitions! (todo: transitions section)