.eui-u-color-black {
    color: var(--eui-base-color-black) !important;
}

.eui-u-bg-color-black {
    background-color: var(--eui-base-color-black) !important;
    color: var(--eui-base-color-white) !important;
}

.eui-u-color-white {
    color: var(--eui-base-color-white) !important;
}

.eui-u-bg-color-white {
    background-color: var(--eui-base-color-white) !important;
    color: var(--eui-base-color-grey-100) !important;
}
@each $color, $shades in $eui-base-tokens-colors {
    @each $shade, $value in $shades {
        .eui-u-color-#{$color + '-' + $shade} {
            color: var(--eui-base-color-#{$color + '-' + $shade}) !important;
        };

        .eui-u-bg-color-#{$color + '-' + $shade} {
            background-color: var(--eui-base-color-#{$color + '-' + $shade}) !important;
            color: var(--eui-base-color-#{$color + '-' + $shade}-contrast) !important;
        }
    }
}
@each $color, $value in $eui-base-tokens-colors-100s {
    .eui-u-color-#{'' + $color} {
        color: var(--eui-base-color-#{'' + $color}-100) !important;
    };

    .eui-u-bg-color-#{'' + $color} {
        background-color: var(--eui-base-color-#{'' + $color}-100) !important;
        color: var(--eui-base-color-#{'' + $color}-100-constrast) !important;
    }
}
