Para usar cores como background em elementos basta adicionar o bg- antes das cores, exemplo: bg-cherry.
Para usar variáveis é necessário o uso de style ="" em sua tag html. Veja abaixo exemplos de uso de algumas variáveis!
Para aplicar uma cor de texto customizada usamos a variável --custom <div class= "bg-octopus-dark-6 w-10 pd-vw-1 custom" style= "--custom: #c370ff " > Hello World! </div>
Hello World!
Para aplicar uma cor de fundo customizada usamos a variável --bg-custom <div class= "bg-custom w-10 pd-vw-1 black" style= "--bg-custom: #ff7070 " > Hello World! </div>
Hello World!
A lista de variáveis 'custom' é a seguinte: --custom --custom2 --custom3 --custom4 --custom5 --custom6 --custom7 --custom8 --custom9 --custom10
--bg-custom --bg-custom2 --bg-custom3 --bg-custom4 --bg-custom5 --bg-custom6 --bg-custom7 --bg-custom8 --bg-custom9 --bg-custom10
Existem muitas outras variáveis, mas a lógica é a mesma.
Note abaixo que os elementos utilizam muitas variáveis, tudo isso para facilitar a estilização dos mesmos.
loading
<div class="loading h-vw-5 w-vw-5 auto" style="--w-custom: 1vw; --custom: #244950; --custom2: #1ad9df;" >
bg-ani-g (ou bg-ani-g2)
<div class="bg-ani-g h-vw-5 w-vw-5 auto b-radius-05" style="--bg-custom: #1ad9df; --bg-custom2: #244950;" >
bg-ani-g3
<div class="bg-ani-g3 h-vw-5 w-vw-5 auto b-radius-05" style="--bg-custom: #1ad9df; --bg-custom2: #244950;" >
bg-ani-g4
<div class="bg-ani-g4 h-vw-5 w-vw-5 auto b-radius-05" style="--bg-custom: #1ad9df; --bg-custom2: #244950; --bg-custom3: #58ff74;" >
bg-ani-g5
<div class="bg-ani-g5 h-vw-5 w-vw-5 auto b-radius-05" style="--bg-custom: #1ad9df; --bg-custom2: #244950; --bg-custom3: #58ff74; --bg-custom4: #f4ff58;" >
bg-ani3
<div class="bg-ani3 h-vw-5 w-vw-5 auto b-radius-05" style="--bg-custom: #1ad9df; --bg-custom2: #244950;" >
bg-ani4
<div class="bg-ani4 h-vw-5 w-vw-5 auto b-radius-05" style="--bg-custom: #1ad9df; --bg-custom2: #244950;" >
bg-ani5 (pisca somente uma vez)
<div class="bg-ani5 h-vw-5 w-vw-5 auto b-radius-05" style="--bg-custom: #1ad9df; --bg-custom2: #244950;" >
bg-ani6 (pisca somente uma vez)
<div class="bg-ani6 h-vw-5 w-vw-5 auto b-radius-05" style="--bg-custom: #1ad9df; --bg-custom2: #244950;" >
bg-ani7
<div class="bg-ani7 h-vw-5 w-vw-5 auto b-radius-05" style="--bg-custom: #1ad9df; --bg-custom2: #244950;" >
bg-ani8
<div class="bg-ani8 h-vw-5 w-vw-5 auto b-radius-05" style="--bg-custom: #1ad9df; --bg-custom2: #244950;" >
bg-ani9
<div class="bg-ani9 h-vw-5 w-vw-5 auto b-radius-05" style="--bg-custom: #1ad9df; --bg-custom2: #244950;" >
bg-ani10
<div class="bg-ani10 h-vw-5 w-vw-5 auto b-radius-05" style="--bg-custom: #1ad9df; --bg-custom2: #244950;" >
ani-scale
<div class="ani-scale bg-planit h-vw-5 w-vw-5 auto b-radius-05" >
ani-scale2 (variações até ani-scale10)
<div class="ani-scale2 bg-planit h-vw-5 w-vw-5 auto b-radius-05" >
ani-bounce
<div class="ani-bounce bg-planit h-vw-5 w-vw-5 auto b-radius-05" >
ani-one-bounce
<div class="ani-one-bounce bg-planit h-vw-5 w-vw-5 auto b-radius-05" >
ani-one-bounce (variações até ani-bounce3)
<div class="ani-one-bounce bg-planit h-vw-5 w-vw-5 auto b-radius-05" >
ani-size-invert (variações até ani-bounce3)
<div class="ani-size-invert bg-planit h-vw-5 w-vw-5 auto b-radius-05" >
ani-size (variações até ani-size3)
<div class="ani-size bg-planit h-vw-5 w-vw-5 auto b-radius-05" >
ani-float (variações até ani-float3)
<div class="ani-float bg-planit h-vw-5 w-vw-5 auto b-radius-05" >
bg-ani-blink
<div class="bg-ani-blink bg-planit h-vw-5 w-vw-5 auto b-radius-05" >
