Colors

Simply-UI uses Sass to make an object for all built-in color variables called $colors.
Any color specified in $colors will be used to create any color-based style;
whether text, background or toast color, a class will be made for that any color in $colors.

Color Variables

There are a few built-in color variables, namely the following:

<div className="bg-primary">Primary</div>
<div className="bg-secondary">Secondary</div>
<div className="bg-error">Error</div>
<div className="bg-info">Info</div>

Built-in colors

Simply-UI has a bunch of colors that come built-in!
The colors that come built-in are:

<div className="bg-blue">Blue</div>
<div className="bg-red">Red</div>
<div className="bg-yellow">Yellow</div>
<div className="bg-green">Green</div>
<div className="bg-orange">Orange</div>
<div className="bg-green">Green</div>
<div className="bg-purple">Purple</div>
<div className="bg-gray">Gray</div>
<div className="bg-black">Black</div>
<div className="bg-white">White</div>

Text colors

Text colors use any of the colors defined in $colors.

Usage

<!-- Variable Colors -->
<div className="text-primary">Primary</div>
<div className="text-secondary">Secondary</div>
<div className="text-error">Error</div>
<div className="text-info">Info</div>
<!-- Built-in Colors -->
<div className="text-blue">Blue</div>
<div className="text-red">Red</div>
<div className="text-yellow">Yellow</div>
<div className="text-green">Green</div>
<div className="text-orange">Orange</div>
<div className="text-green">Green</div>
<div className="text-purple">Purple</div>
<div className="text-gray">Gray</div>
<div className="text-black">Black</div>
<div className="text-white">White</div>

Background colors

Background colors use any of the colors defined in $colors.

Usage

<!-- Variable Colors -->
<div className="bg-primary">Primary</div>
<div className="bg-secondary">Secondary</div>
<div className="bg-error">Error</div>
<div className="bg-info">Info</div>
<!-- Built-in Colors -->
<div className="bg-blue">Blue</div>
<div className="bg-red">Red</div>
<div className="bg-yellow">Yellow</div>
<div className="bg-green">Green</div>
<div className="bg-orange">Orange</div>
<div className="bg-green">Green</div>
<div className="bg-purple">Purple</div>
<div className="bg-gray">Gray</div>
<div className="bg-black">Black</div>
<div className="bg-white">White</div>

Sass variables

Below is the $colors object. This can be edited to add or replace current colors.
You can request a color to be added through our GitHub!

$primary: #326dee;
$secondary: #1ac888;
$error: #d32752;
$info: #f6c31c;

$colors: (
    "primary": $primary,
    "secondary": $secondary,
    "error": $error,
    "info": $info,
    "blue": #1919e6,
    "red": #e61919,
    "yellow": #e6e619,
    "green": #19e635,
    "orange": #ffa600,
    "purple": #9900ff,
    "gray": #808080,
    "black": black,
    "white": white
  )