Color
Use color utilities to quickly style the text and background color of an element. Great for container, buttons, or any other element.
Text Color
.hf-text-light
.hf-text-dark
.hf-text-success
.hf-text-warning
.hf-text-error
.hf-text-danger
.hf-text-primary
.hf-text-primary-light
.hf-text-secondary
.hf-text-secondary-light
.hf-text-info
.hf-text-info-light
<p class="hf-text-light hf-bg-dark">.hf-text-light</p>
<p class="hf-text-dark">.hf-text-dark</p>
<p class="hf-text-success">.hf-text-success</p>
<p class="hf-text-warning">.hf-text-warning</p>
<p class="hf-text-error">.hf-text-error</p>
<p class="hf-text-danger">.hf-text-danger</p>
<p class="hf-text-primary">.hf-text-primary</p>
<p class="hf-text-primary-light hf-bg-dark">.hf-text-primary-light</p>
<p class="hf-text-secondary">.hf-text-secondary</p>
<p class="hf-text-secondary-light">.hf-text-secondary-light</p>
<p class="hf-text-info">.hf-text-info</p>
<p class="hf-text-info-light hf-bg-dark">.hf-text-info-light</p>
Background Color
.hf-bg-light
.hf-bg-dark
.hf-bg-success
.hf-bg-warning
.hf-bg-error
.hf-bg-danger
.hf-bg-highlight
.hf-bg-primary
.hf-bg-primary-light
.hf-bg-secondary
.hf-bg-secondary-light
.hf-bg-info
.hf-bg-info-light
<div class="hf-bg-light" style="color: black;">.hf-bg-light</div>
<div class="hf-bg-dark">.hf-bg-dark</div>
<div class="hf-bg-success">.hf-bg-success</div>
<div class="hf-bg-warning" style="color: black;">.hf-bg-warning</div>
<div class="hf-bg-error">.hf-bg-error</div>
<div class="hf-bg-danger">.hf-bg-danger</div>
<div class="hf-bg-highlight" style="color: black;">.hf-bg-highlight</div>
<div class="hf-bg-primary">.hf-bg-primary</div>
<div class="hf-bg-primary-light" style="color: black;">.hf-bg-primary-light</div>
<div class="hf-bg-secondary">.hf-bg-secondary</div>
<div class="hf-bg-secondary-light" style="color: black;">.hf-bg-secondary-light</div>
<div class="hf-bg-info">.hf-bg-info</div>
<div class="hf-bg-info-light" style="color: black;">.hf-bg-info-light</div>
Button Color
<div class="hf-button-primary">.hf-button-primary</div>
<div class="hf-button-primary hover">.hf-button-primary.hover</div>
<div class="hf-button-secondary">.hf-button-secondary</div>
<div class="hf-button-secondary hover">.hf-button-secondary.hover</div>
<div class="hf-button-info">.hf-button-info</div>
<div class="hf-button-info hover">.hf-button-info.hover</div>
<div class="hf-button-success">.hf-button-success</div>
<div class="hf-button-success hover">.hf-button-success.hover</div>
<div class="hf-button-danger">.hf-button-danger</div>
<div class="hf-button-danger hover">.hf-button-danger.hover</div>
Radio Color
<div class="hf-radio-green">
<input id="testradio1" type="radio" name="name" value="value"
data-win-control="HFWinJSCtrl.RadioBox" data-win-options="{}" />
</div>
<div class="hf-radio-green highlight">
<input id="testradio2" type="radio" name="name1" value="value"
data-win-control="HFWinJSCtrl.RadioBox" data-win-options="{}" />
</div>
<div class="hf-radio-lightGreen">
<input id="testradio3" type="radio" name="name" value="value"
data-win-control="HFWinJSCtrl.RadioBox" data-win-options="{}" />
</div>
<div class="hf-radio-lightGreen highlight">
<input id="testradio4" type="radio" name="name2" value="value"
data-win-control="HFWinJSCtrl.RadioBox" data-win-options="{}" />
</div>
<div class="hf-radio-yellow">
<input id="testradio5" type="radio" name="name" value="value"
data-win-control="HFWinJSCtrl.RadioBox" data-win-options="{}" />
</div>
<div class="hf-radio-yellow highlight">
<input id="testradio6" type="radio" name="name3" value="value"
data-win-control="HFWinJSCtrl.RadioBox" data-win-options="{}" />
</div>
<div class="hf-radio-orange">
<input id="testradio7" type="radio" name="name" value="value"
data-win-control="HFWinJSCtrl.RadioBox" data-win-options="{}" />
</div>
<div class="hf-radio-orange highlight">
<input id="testradio8" type="radio" name="name4" value="value"
data-win-control="HFWinJSCtrl.RadioBox" data-win-options="{}" />
</div>
<div class="hf-radio-red">
<input id="testradio9" type="radio" name="name" value="value"
data-win-control="HFWinJSCtrl.RadioBox" data-win-options="{}" />
</div>
<div class="hf-radio-red highlight">
<input id="testradio10" type="radio" name="name5" value="value"
data-win-control="HFWinJSCtrl.RadioBox" data-win-options="{}" />
</div>
<div class="hf-radio-grey">
<input id="testradio11" type="radio" name="name" value="value"
data-win-control="HFWinJSCtrl.RadioBox" data-win-options="{}" />
</div>
<div class="hf-radio-grey highlight">
<input id="testradio12" type="radio" name="name6" value="value"
data-win-control="HFWinJSCtrl.RadioBox" data-win-options="{}" />
</div>