Alerts: Color Variants

<dialog open class="alert">
    <div>
        <strong>Primary Headline</strong>
        <p>Supplement information about the timely information.</p>
    </div>
    <form method="dialog"><button>X</button></form>
</dialog>
<dialog open class="alert blue">
    <div>
        <strong>Primary Headline</strong>
        <p>Supplement information about the timely information.</p>
    </div>
    <form method="dialog"><button>X</button></form>
</dialog>
<dialog open class="alert yellow">
    <div>
        <strong>Primary Headline</strong>
        <p>Supplement information about the timely information.</p>
    </div>
    <form method="dialog"><button>X</button></form>
</dialog>
<dialog open class="alert orange">
    <div>
        <strong>Primary Headline</strong>
        <p>Supplement information about the timely information.</p>
    </div>
    <form method="dialog"><button>X</button></form>
</dialog>

<dialog open class="alert green">
    <div>
        <strong>Primary Headline</strong>
        <p>Supplement information about the timely information.</p>
    </div>
    <form method="dialog"><button>X</button></form>
</dialog>
<dialog open class="alert gray">
    <div>
        <strong>Primary Headline</strong>
        <p>Supplement information about the timely information.</p>
    </div>
    <form method="dialog"><button>X</button></form>
</dialog>
<dialog open class="alert red">
    <div>
        <strong>Primary Headline</strong>
        <p>Supplement information about the timely information.</p>
    </div>
    <form method="dialog"><button>X</button></form>
</dialog>