PatternLab (0.1.259)

# Color Helper Classes

# Primary & Secondary Colors

.h-bg-color-[-primary, -primary-light, -primary-lightest, -primary-dark, -secondary, -secondary-light]

h-bg-color-primary
h-bg-color-primary-light
h-bg-color-primary-lightest
h-bg-color-primary-dark
h-bg-color-secondary
h-bg-color-secondary-light
hide code 
<div class="h-flex h-space-between">
    <div class="p-m m-x-xs h-box-shadow  h-bg-color-primary h-color-white">h-bg-color-primary</div>
    <div class="p-m m-x-xs h-box-shadow  h-bg-color-primary-light h-color-white">h-bg-color-primary-light</div>
    <div class="p-m m-x-xs h-box-shadow  h-bg-color-primary-lightest">h-bg-color-primary-lightest</div>
    <div class="p-m m-x-xs h-box-shadow  h-bg-color-primary-dark h-color-white">h-bg-color-primary-dark</div>
    <div class="p-m m-x-xs h-box-shadow  h-bg-color-secondary">h-bg-color-secondary</div>
    <div class="p-m m-x-xs h-box-shadow  h-bg-color-secondary-light">h-bg-color-secondary-light</div>
</div>

.h-color-[-primary, -primary-dark, -primary-light, -primary-lightest, -secondary, -secondary-light, -white, -gray, -black]

h-color-primary

h-color-primary-light

h-color-primary-lightest

h-color-primary-dark

h-color-secondary

h-color-secondary-light

hide code 
<div class="h-flex h-space-between">
    <h4 class="p-s h-color-primary">h-color-primary</h4>
    <h4 class="p-s h-color-primary-light">h-color-primary-light</h4>
    <h4 class="p-s h-color-primary-lightest">h-color-primary-lightest</h4>
    <h4 class="p-s h-color-primary-dark">h-color-primary-dark</h4>
    <h4 class="p-s h-color-secondary">h-color-secondary</h4>
    <h4 class="p-s h-color-secondary-light">h-color-secondary-light</h4>
</div>

# Neutral Colors

.h-bg-color[-black, -gray, -light-gray, -white]

h-bg-color-black
h-bg-color-gray
h-bg-color-light-gray
h-bg-color-white
h-bg-color
hide code 
<div class="m-t-m h-flex h-space-between">
    <div class="p-m m-x-xs h-box-shadow h-color-white h-bg-color-black">h-bg-color-black</div>
    <div class="p-m m-x-xs h-box-shadow h-bg-color-gray">h-bg-color-gray</div>
    <div class="p-m m-x-xs h-box-shadow h-bg-color-light-gray">h-bg-color-light-gray</div>
    <div class="p-m m-x-xs h-box-shadow h-bg-color-white">h-bg-color-white</div>
    <div class="p-m m-x-xs h-box-shadow h-bg-color">h-bg-color</div>
</div>

.h-color[-black, -gray, -white]

h-color-black

h-color-gray

h-color-white

hide code 
<div class="m-t-m h-flex h-space-between">
    <h4 class="p-s h-color-black">h-color-black</h4>
    <h4 class="p-s h-color-gray">h-color-gray</h4>
    <h4 class="p-s h-color-white h-bg-color-black">h-color-white</h4>
</div>

# State Colors

.h-bg-color[-error, -warning, -success, -notice, -disabled]

h-bg-color-error
h-bg-color-warning
h-bg-color-success
h-bg-color-notice
h-bg-color-disabled
hide code 
<div class="h-flex h-space-between">
    <div class="h-bg-color-error p-m m-x-xs h-color-white">h-bg-color-error</div>
    <div class="h-bg-color-warning p-m m-x-xs h-color-white">h-bg-color-warning</div>
    <div class="h-bg-color-success p-m m-x-xs h-color-white">h-bg-color-success</div>
    <div class="h-bg-color-notice p-m m-x-xs h-color-white">h-bg-color-notice</div>
    <div class="h-bg-color-disabled p-m m-x-xs h-color-white">h-bg-color-disabled</div>
</div>

.h-color[-error, -warning, -success, -notice, -notice-light, -disabled]

h-color-error

h-color-warning

h-color-warning-light

h-color-success

h-color-success-light

h-color-notice

h-color-notice-light

h-color-disabled

hide code 
<div class="h-flex h-space-between">
<h4 class="p-s h-color-error">h-color-error</h4>
<h4 class="p-s h-color-warning">h-color-warning</h4>
<h4 class="p-s h-color-warning-light">h-color-warning-light</h4>
<h4 class="p-s h-color-success">h-color-success</h4>
<h4 class="p-s h-color-success-light">h-color-success-light</h4>
<h4 class="p-s h-color-notice">h-color-notice</h4>
<h4 class="p-s h-color-notice-light">h-color-notice-light</h4>
<h4 class="p-s h-color-disabled">h-color-disabled</h4>
</div>

# Pharma4u Specific Colors

WARNING

Only visible with the Pharma4u Theme.

.h-bg-color[-pta, -phip, -student, -medicheck, -forum, -labor, -webinar, -taxikon]

h-bg-color-pta
h-bg-color-phip
h-bg-color-student
h-bg-color-medicheck
h-bg-color-forum
h-bg-color-labor
h-bg-color-webinar
h-bg-color-taxikon
hide code 
<div class="h-flex h-space-between">
    <div class="h-bg-color-pta p-m m-x-xs h-color-white">h-bg-color-pta</div>
    <div class="h-bg-color-phip p-m m-x-xs h-color-white">h-bg-color-phip</div>
    <div class="h-bg-color-student p-m m-x-xs h-color-white">h-bg-color-student</div>
    <div class="h-bg-color-medicheck p-m m-x-xs h-color-white">h-bg-color-medicheck</div>
    <div class="h-bg-color-forum p-m m-x-xs h-color-white">h-bg-color-forum</div>
    <div class="h-bg-color-labor p-m m-x-xs h-color-white">h-bg-color-labor</div>
    <div class="h-bg-color-webinar p-m m-x-xs h-color-white">h-bg-color-webinar</div>
    <div class="h-bg-color-taxikon p-m m-x-xs h-color-white">h-bg-color-taxikon</div>
</div>

← Border Helper Classes →