Colors

Overview, Shades and Pseudo Classes

Colors are meant to be edited! This is an overview of the default colors. Once you have an idea of how they work, please see the Customizing Colors and Fonts section for customizing colors to your theme!

The Default Color Shades

By Default, each color defined gets genrated in 4 shades in addition to the base color:

In addition to these, there are the white and black colors, which don't get shades.

Pseudo Classes

Naturally coupled with colors is the concept of pseudo classes. One common thing to do is have a color change when the user is interacting with an element, like hovering or pressing a button for example, or focusing on an input field.

Simple Scss Utilities comes with 3 pseudo classes by default:

• Hover
• Active
• and Focus

Most classes having to do with color or font can respond to each of these states. Additional states can be added, but if you need more states it also could be an opportunity to write some custom SCSS as well. This framework only aims to provide the bulk of common use cases after all.

To use these classes, add a hover:, active: or focus: prefix to the class names that work with pseudo classes, which are namely the color and font classes. If you need something to change size, or do a fancy transition, that could also be a case where it's probably best to just write your own scss.

See the following Table for exmples of the Pseudo Classes in Action. To keep example short I only apply minimal styles:

<p
  class="
    text-white 
    bg-green 
    hover:bg-red"
>
  Hover Me
</p>

<input
  class="
    w-6
    text-black 
    border-xl
    border-blue
    focus:border-green"
  value="Focus Me"
/>

<p
  class="
    outline-solid
    outline-magenta
    outline-xl 
    active:outline-default"
>
  Press Me
</p>

<p
  class="
    text-underline
    decoration-xl
    decoration-green  
    hover:text-overline"
>
  Hover Me
</p>

<p
  class="
    p-lg
    selection-color-blue
    selection-bg-red
    hover:selection-color-white
    hover:selection-bg-blue"
>
  Select some text in this sentence and Hover!
</p>

<input
  class="
    w-6
    text-black 
    border-sm
    border-black
    focus:text-2xl"
  value="Focus Me"
/>

<p
  class="
    cursor-pointer
    active:font-header"
>
  Press Me
</p>

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

<input
  class="
    w-6
    text-black 
    border-xl
    border-dotted
    focus:border-sm
    focus:border-solid"
  value="Focus Me"
/>

<p
  class="
    w-6
    text-black 
    outline-xl
    outline-solid
    hover:outline-sm
    hover:outline-dotted"
>
  Hover Me
</p>

I hope this shows how easy it is to use colros and pseudo classes in your markup! See the sidebar for more pages with more detaied examples.