<template>
    <div class="_background:danger-shade-150!">Danger Shade 15%</div>

    <div class="_background:danger-shade-100!">Danger Shade 10%</div>

    <div class="_background:danger-shade-50!">Danger Shade 5%</div>

    <div class="_background:danger!">Danger</div>

    <div class="_background:danger-tint-50!">Danger Tint 5%</div>

    <div class="_background:danger-tint-100!">Danger Tint 10%</div>

    <div class="_background:danger-tint-150!">Danger Tint 15%</div>

    <hr />

    <div class="_background:danger-50!">Danger 5%</div>

    <div class="_background:danger-100!">Danger 10%</div>

    <div class="_background:danger-200!">Danger 20%</div>

    <div class="_background:danger-300!">Danger 30%</div>

    <div class="_background:danger-400!">Danger 40%</div>

    <div class="_background:danger-500!">Danger 50%</div>

    <div class="_background:danger-600!">Danger 60%</div>

    <div class="_background:danger-700!">Danger 70%</div>

    <div class="_background:danger-800!">Danger 80%</div>

    <div class="_background:danger-900!">Danger 90%</div>
</template>
