Untuk mengubah warna pada teks, CSS telah menyediakan sebuah properti bernama
color, dan di BshadeUI, kami pun telah menyediakan class bernama
.color-{color}-{level}
untuk memudahkanmu. Yang mana
{color}
adalah nama warna, dan
{level}
adalah tingkatan (level) warna tersebut.
Semakin tinggi level warna yang digunakan maka semakin gelap warna tersebut, semakin rendah level warna yang digunakan maka semakin putih warna tersebut.
Dimana saya bisa menemukan semua warna?
Nah, untuk melihat semua warna yang kami sediakan, kamu bisa berkunjung ke halaman Colors yang ada di menu, di samping. Di halaman tersebut kamu bisa melihat banyak nama warna berserta level-nya
Berikut contoh penggunaan class untuk warna teks:
<div class="color-yellow-200 p-1 radius-0.5">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias, magnam ipsam. Labore perferendis porro obcaecati
voluptas eos! Ratione, officiis omnis, inventore rem, debitis eius aliquam earum maiores nisi tempore veritatis.
</div>
<div class="color-yellow-400 px-1 radius-0.5">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias, magnam ipsam. Labore perferendis porro obcaecati
voluptas eos! Ratione, officiis omnis, inventore rem, debitis eius aliquam earum maiores nisi tempore veritatis.
</div>
<div class="color-yellow-600 p-1 radius-0.5">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias, magnam ipsam. Labore perferendis porro obcaecati
voluptas eos! Ratione, officiis omnis, inventore rem, debitis eius aliquam earum maiores nisi tempore veritatis.
</div>Contoh penggunaan lainnya.
<div class="color-teal-500 p-1 radius-0.5">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias, magnam ipsam. Labore perferendis porro obcaecati
voluptas eos! Ratione, officiis omnis, inventore rem, debitis eius aliquam earum maiores nisi tempore veritatis.
</div>
<div class="color-blue-400 px-1 radius-0.5">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias, magnam ipsam. Labore perferendis porro obcaecati
voluptas eos! Ratione, officiis omnis, inventore rem, debitis eius aliquam earum maiores nisi tempore veritatis.
</div>
<div class="color-cyan-400 p-1 radius-0.5">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias, magnam ipsam. Labore perferendis porro obcaecati
voluptas eos! Ratione, officiis omnis, inventore rem, debitis eius aliquam earum maiores nisi tempore veritatis.
</div>