Style Guide
Colors
Action
Action
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
Primary
Primary
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
Secondary
Secondary
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
Accent
Accent
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
Base
Base
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
Shade
Shade
Ultra Light
Light
Medium
Dark
Ultra Dark
Action
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Primary
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Secondary
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Accent
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Base
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Shade
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Success
Success
Success Light
Success Dark
Success Hover
Danger
Danger
Danger Light
Danger Dark
Danger Hover
Warning
Warning
Warning Light
Warning Dark
Warning Hover
info
Info
Info Light
Info Dark
Info Hover
<script>
document.addEventListener('DOMContentLoaded', function(event) {
const colorCards = document.getElementsByClassName('acss-color-card__wrapper');
for (let i = 0; i < colorCards.length; i++) {
const colorCard = colorCards[i];
const computedStyle = window.getComputedStyle(colorCard);
const backgroundColor = computedStyle.getPropertyValue('background-color');
if (backgroundColor) {
let hexValue = backgroundColor;
// Check if the value is in RGB format
if (backgroundColor.indexOf('rgb(') === 0) {
// Extract the RGB values
const rgbValues = backgroundColor.replace(/[^\d,]/g, '').split(',');
// Convert RGB to hexadecimal
const r = parseInt(rgbValues[0], 10);
const g = parseInt(rgbValues[1], 10);
const b = parseInt(rgbValues[2], 10);
hexValue = '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0');
}
const colorCardName = colorCards[i].querySelector('.acss-color-card__name');
colorCardName.innerHTML += '<br>' + hexValue;
}
}
});
</script>