// Color
// ===

// Neutral Colors
// ---

.u-color-neutral-00 {
    color: $neutral-00;

    fill: $neutral-00;
}

.u-color-neutral-10 {
    color: $neutral-10;

    fill: $neutral-10;
}

.u-color-neutral-15 {
    color: $neutral-15;

    fill: $neutral-15;
}

.u-color-neutral-20 {
    color: $neutral-20;

    fill: $neutral-20;
}

.u-color-neutral-30 {
    color: $neutral-30;

    fill: $neutral-30;
}

.u-color-neutral-40 {
    color: $neutral-40;

    fill: $neutral-40;
}

.u-color-neutral-50 {
    color: $neutral-50;

    fill: $neutral-50;
}

.u-color-neutral-60 {
    color: $neutral-60;

    fill: $neutral-60;
}

.u-color-neutral-70 {
    color: $neutral-70;

    fill: $neutral-70;
}


// Other Colors
// ---

.u-color-brand {
    color: $brand-color;

    fill: $brand-color;
}

.u-color-accent {
    color: $accent-color;

    fill: $accent-color;
}

.u-color-primary-action {
    color: $primary-action-color;

    fill: $primary-action-color;
}

.u-color-secondary-action {
    color: $secondary-action-color;

    fill: $secondary-action-color;
}

.u-color-success {
    color: $success-color;

    fill: $success-color;
}

.u-color-error {
    color: $error-color;

    fill: $error-color;
}

.u-color-sale {
    color: $sale-color;

    fill: $sale-color;
}


// Background Colors
// ---

.u-bg-color-neutral-00 {
    background-color: $neutral-00;
}

.u-bg-color-neutral-10 {
    background-color: $neutral-10;
}

.u-bg-color-neutral-15 {
    background-color: $neutral-15;
}

.u-bg-color-neutral-20 {
    background-color: $neutral-20;
}

.u-bg-color-neutral-30 {
    background-color: $neutral-30;
}

.u-bg-color-neutral-40 {
    background-color: $neutral-40;
}

.u-bg-color-neutral-50 {
    background-color: $neutral-50;
}

.u-bg-color-neutral-60 {
    background-color: $neutral-60;
}

.u-bg-color-neutral-70 {
    background-color: $neutral-70;
}


// Other Background Colors
// ---

.u-bg-color-brand {
    background-color: $brand-color;
}

.u-bg-color-accent {
    background-color: $accent-color;
}

.u-bg-color-primary-action {
    background-color: $primary-action-color;
}

.u-bg-color-secondary-action {
    background-color: $secondary-action-color;
}

.u-bg-color-success {
    background-color: $success-color;
}

.u-bg-color-error {
    background-color: $error-color;
}

.u-bg-color-sale {
    background-color: $sale-color;
}
