Instrument Movement Colors
EF themes provide a set of colors to use for instrument movement colors. Positive and negative are represented using different colors depending on the culture. For example, red is culturally seen as a positive color in China.
You can set the movement color profile in your application by using movement-color-profile
attribute to html tag. The American profile will be used if the attribute is not present.
<html movement-color-profile="asian1">
Supported value are:
american
asian1
asian2
european
Colors are provided as CSS variables. The variables are set at html tag. It will be cascaded and becomes available within any elements.
Variable Name | Description |
---|---|
--color-scheme-negative | Use to style negative value. |
--color-scheme-neutral | Use to style unchanged value. |
--color-scheme-positive | Use to style positive value. |
--color-scheme-tickup | Use to style up tick icon. |
--color-scheme-tickdown | Use to style down tick icon. |
--color-scheme-ticktext | Use to style text color when the value ticks up, unchanged or down. |
In application, the colors can be used with CSS class and apply it to any html elements.
<style>
.positive {
color: var(--color-scheme-positive);
}
.neutral {
color: var(--color-scheme-neutral);
}
.negative {
color: var(--color-scheme-negative);
}
.tick-up {
color: var(--color-scheme-tickup);
}
.tick-down {
color: var(--color-scheme-tickdown);
}
.up-change {
background-color: var(--color-scheme-positive);
color: var(--color-scheme-ticktext);
}
.unchanged {
background-color: var(--color-scheme-neutral);
color: var(--color-scheme-ticktext);
}
.down-change {
background-color: var(--color-scheme-negative);
color: var(--color-scheme-ticktext);
}
</style>
<div class="menu"> <ef-button-bar managed> <ef-button toggles active id="american" class="button">American</ef-button> <ef-button toggles id="asian1" class="button">Asian1</ef-button> <ef-button toggles id="asian2" class="button">Asian2</ef-button> <ef-button toggles id="european" class="button">European</ef-button> </ef-button-bar> </div> <div class="container"> <ef-panel> <table> <tr> <td>Up Tick:</td> <td> <coral-icon icon="arrow-up-fill" class="tick-up"></coral-icon> </td> </tr> <tr> <td>Down Tick:</td> <td> <coral-icon icon="arrow-down-fill" class="tick-down"></coral-icon> </td> </tr> <tr> <td>Up:</td> <td class="positive">12.30</td> </tr> <tr> <td>Unchange:</td> <td class="unchange">12.29<p></p> </td> </tr> <tr> <td>Down:</td> <td class="negative">-12.28<p></p> </td> </tr> <tr> <td>Up Change:</td> <td id="upChange" class="positive-change positive">1.04%<p></p> </td> </tr> <tr> <td>Unchange:</td> <td id="unChange" class="neutral-change negative">-0.51%<p></p> </td> </tr> <tr> <td>Down Change:</td> <td id="downChange" class="negative-change positive">2.35%<p></p> </td> </tr> </table> </ef-panel> </div>
function changeRegion(region) { document.documentElement.setAttribute('movement-color-profile', region); } function registerClickEvent(id) { document.getElementById(id).addEventListener('click', function() { changeRegion(id) }); } registerClickEvent('american'); registerClickEvent('asian1'); registerClickEvent('asian2'); registerClickEvent('european'); const upChange = document.getElementById('upChange'); setInterval(function() { if (upChange.classList.length > 1) { upChange.classList.remove('positive-change'); } else { upChange.classList.add('positive-change'); } }, 500) setInterval(function() { if (unChange.classList.length > 1) { unChange.classList.remove('neutral-change'); } else { unChange.classList.add('neutral-change'); } }, 900) setInterval(function() { if (downChange.classList.length > 1) { downChange.classList.remove('negative-change'); } else { downChange.classList.add('negative-change'); } }, 700)
.menu { text-align: center; padding-top: 20px; } ef-panel { width: 100%; } td { border: none !important; transition: background-color 0.3ms ease; } tr { background-color: transparent !important; } tr:hover td { background-color: unset; color: inherit; } td.positive-change { background-color: var(--color-scheme-positive) !important; color: var(--color-scheme-ticktext) !important; } td.neutral-change { background-color: var(--color-scheme-neutral) !important; color: var(--color-scheme-ticktext) !important; } td.negative-change { background-color: var(--color-scheme-negative) !important; color: var(--color-scheme-ticktext) !important; } p { margin: 0; font-weight: 600; text-align: center; color: var(--color-scheme-primary); text-transform: capitalize; } td:nth-child(even) { text-align: center; } .container { display: block; padding: 20px; max-width: 275px; margin: 0 auto; } .positive { color: var(--color-scheme-positive) !important; } .unchange { color: var(--color-scheme-neutral) !important; } .negative { color: var(--color-scheme-negative) !important; } .tick-up { margin-right: 10px; color: var(--color-scheme-tickup); } .tick-down { margin-right: 10px; color: var(--color-scheme-tickdown); }
<div class="menu"> <ef-button-bar managed> <ef-button toggles active id="american" class="button">American</ef-button> <ef-button toggles id="asian1" class="button">Asian1</ef-button> <ef-button toggles id="asian2" class="button">Asian2</ef-button> <ef-button toggles id="european" class="button">European</ef-button> </ef-button-bar> </div> <div class="container"> <ef-panel> <table> <tr> <td>Up Tick:</td> <td> <coral-icon icon="arrow-up-fill" class="tick-up"></coral-icon> </td> </tr> <tr> <td>Down Tick:</td> <td> <coral-icon icon="arrow-down-fill" class="tick-down"></coral-icon> </td> </tr> <tr> <td>Up:</td> <td class="positive">12.30</td> </tr> <tr> <td>Unchange:</td> <td class="unchange">12.29<p></p> </td> </tr> <tr> <td>Down:</td> <td class="negative">-12.28<p></p> </td> </tr> <tr> <td>Up Change:</td> <td id="upChange" class="positive-change positive">1.04%<p></p> </td> </tr> <tr> <td>Unchange:</td> <td id="unChange" class="neutral-change negative">-0.51%<p></p> </td> </tr> <tr> <td>Down Change:</td> <td id="downChange" class="negative-change positive">2.35%<p></p> </td> </tr> </table> </ef-panel> </div>
function changeRegion(region) { document.documentElement.setAttribute('movement-color-profile', region); } function registerClickEvent(id) { document.getElementById(id).addEventListener('click', function() { changeRegion(id) }); } registerClickEvent('american'); registerClickEvent('asian1'); registerClickEvent('asian2'); registerClickEvent('european'); const upChange = document.getElementById('upChange'); setInterval(function() { if (upChange.classList.length > 1) { upChange.classList.remove('positive-change'); } else { upChange.classList.add('positive-change'); } }, 500) setInterval(function() { if (unChange.classList.length > 1) { unChange.classList.remove('neutral-change'); } else { unChange.classList.add('neutral-change'); } }, 900) setInterval(function() { if (downChange.classList.length > 1) { downChange.classList.remove('negative-change'); } else { downChange.classList.add('negative-change'); } }, 700)
.menu { text-align: center; padding-top: 20px; } ef-panel { width: 100%; } td { border: none !important; transition: background-color 0.3ms ease; } tr { background-color: transparent !important; } tr:hover td { background-color: unset; color: inherit; } td.positive-change { background-color: var(--color-scheme-positive) !important; color: var(--color-scheme-ticktext) !important; } td.neutral-change { background-color: var(--color-scheme-neutral) !important; color: var(--color-scheme-ticktext) !important; } td.negative-change { background-color: var(--color-scheme-negative) !important; color: var(--color-scheme-ticktext) !important; } p { margin: 0; font-weight: 600; text-align: center; color: var(--color-scheme-primary); text-transform: capitalize; } td:nth-child(even) { text-align: center; } .container { display: block; padding: 20px; max-width: 275px; margin: 0 auto; } .positive { color: var(--color-scheme-positive) !important; } .unchange { color: var(--color-scheme-neutral) !important; } .negative { color: var(--color-scheme-negative) !important; } .tick-up { margin-right: 10px; color: var(--color-scheme-tickup); } .tick-down { margin-right: 10px; color: var(--color-scheme-tickdown); }