Colors

Below are examples of utility classes for different purposes, text colors, and link colors with hover states. These examples are inspired by popular CSS frameworks like Bootstrap and Tailwind CSS.

<h2>Text Colors</h2>
    <p class="text-primary">This text is primary.</p>
    <p class="text-secondary">This text is secondary.</p>
    <p class="text-error">This text indicates an error.</p>
    <p class="text-info">This text provides information.</p>
    <p class="text-blue">This text is blue.</p>
    <p class="text-red">This text is red.</p>
    <p class="text-yellow">This text is yellow.</p>
    <p class="text-green">This text is green.</p>
    <p class="text-orange">This text is orange.</p>
    <p class="text-purple">This text is purple.</p>
    <p class="text-gray">This text is gray.</p>
    <p class="text-black">This text is black.</p>
    <p class="text-white bg-black">This text is white on black.</p>

Hover Text Colours

<h2>Hover Text Colors</h2>
  <div class="text-hover-primary p-3">Hover over me (Primary)</div>
  <div class="text-hover-secondary p-3">Hover over me (Secondary)</div>
  <div class="text-hover-error p-3">Hover over me (Error)</div>
  <div class="text-hover-info p-3">Hover over me (Info)</div>
  <div class="text-hover-blue p-3">Hover over me (Blue)</div>
  <div class="text-hover-red p-3">Hover over me (Red)</div>
  <div class="text-hover-yellow p-3">Hover over me (Yellow)</div>
  <div class="text-hover-green p-3">Hover over me (Green)</div>
  <div class="text-hover-orange p-3">Hover over me (Orange)</div>
  <div class="text-hover-purple p-3">Hover over me (Purple)</div>
  <div class="text-hover-gray p-3">Hover over me (Gray)</div>
  <div class="text-hover-black p-3">Hover over me (Black)</div>
  <div class="text-hover-white p-3" style="background-color: #000;">Hover over me (White)</div>

Hover Text Colour Light & Dark Variation

<h2>Hover Text Color Light Variations</h2>
  <p>Hover over each element to see the hover effect:</p>

  <div class="text-hover-primary-light-1">Primary Text (Light Variation 1)</div>
  <div class="text-hover-primary-light-2">Primary Text (Light Variation 2)</div>
  <div class="text-hover-primary-light-3">Primary Text (Light Variation 3)</div>

  <div class="text-hover-secondary-light-1">Secondary Text (Light Variation 1)</div>
  <div class="text-hover-secondary-light-2">Secondary Text (Light Variation 2)</div>
  <div class="text-hover-secondary-light-3">Secondary Text (Light Variation 3)</div>

<h2>Hover Text Color dark Variations</h2>
  <p>Hover over each element to see the hover effect:</p>

  <div class="text-hover-primary-dark-1">Primary Text (Dark Variation 1)</div>
  <div class="text-hover-primary-dark-2">Primary Text (Dark Variation 2)</div>
  <div class="text-hover-primary-dark-3">Primary Text (Dark Variation 3)</div>
  
LIKE THIS YOU CAN USE FOR OTHER COLOUR ALSO

$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,
);