Skip to content
WovenUI

Color mixins

Color mixins (bg, text-color, text-on-color, gradient, adaptive-contrast) and the color name resolver shared with border-color.

Generated from the doc blocks in the core source when the site is built, so it always matches the current release of @wovenui/core. Every example is compiled against core during the build; open Compiled CSSunder an example to see its output. Guide: Colors. The A to Z index lists every public mixin and function.

Source: utilities/_colors.scss

Mixins

adaptive-contrast bg text-color text-on-color gradient

adaptive-contrast mixin

Sets background-color and the higher contrast text color, both computed at compile time; under prefers-contrast: more the background moves away from the text color (darker under light text, lighter under dark text) for a higher ratio.

The output is resolved color values, not var(--wu-*) tokens, so the result does not follow themes.

@mixin adaptive-contrast($color)
ParameterTypeDefaultDescription
$colorString|ColorRequiredA role or palette name (resolved with get-color()) or a color value

Example 1

.banner {
  @include adaptive-contrast(brand);
}
Compiled CSS
.banner {
  background-color: #007bff;
  color: #1a1a1a;
}
@media (prefers-contrast: more) {
  .banner {
    background-color: rgb(20%, 58.5882352941%, 100%);
    color: #1a1a1a;
  }
}

Example 2

.badge {
  @include adaptive-contrast(#1e293b);
}
Compiled CSS
.badge {
  background-color: #1e293b;
  color: #f1f1f1;
}
@media (prefers-contrast: more) {
  .badge {
    background-color: rgb(5.0231328486%, 6.8649482265%, 9.8788279357%);
    color: #f1f1f1;
  }
}

See also: bg, text-on-color. Source: utilities/_colors.scss:247

bg mixin

Sets background-color from a role, palette name, theme word or color, emitting the matching var(--wu-*) token.

bg(brand) gives var(--wu-brand) and bg(red) the fixed var(--wu-red-500); a shade outside 50 to 950 raises an error, and a raw color with a shade is shaded at compile time.

@mixin bg($color, $shade: null)
ParameterTypeDefaultDescription
$colorString|ColorRequiredA role (brand, danger), role state (danger-subtle, brand-hover), palette name (red), theme word (base, surface, alternate, raised, hover, selected, disabled), color value or var()
$shadeNumber|NullnullA shade stop (50, 100 to 900, 950) for a role or palette name

Example 1

.card {
  @include bg(surface); // var(--wu-bg-surface)
}
Compiled CSS
.card {
  background-color: var(--wu-bg-surface);
}

Example 2

.alert {
  @include apply(bg(danger-subtle), text-color(danger), border(1, solid, danger-border));
}
Compiled CSS
.alert {
  background-color: var(--wu-danger-subtle);
  color: var(--wu-text-danger);
  border-width: var(--wu-border-width-1);
  border-style: var(--wu-border-style);
  border-color: var(--wu-danger-border);
  --wu-border-style: solid;
}

Example 3

.chip {
  @include bg(brand, 100); // var(--wu-brand-100)
}
Compiled CSS
.chip {
  background-color: var(--wu-brand-100);
}

background-color on MDN

See also: text-color, border-color. Source: utilities/_colors.scss:288

text-color mixin

Sets color from a role, palette name, theme word or color, emitting the matching var(--wu-text-*) token.

text-color(brand) gives var(--wu-text-brand) and text-color(red) the theme aware var(--wu-text-red); with a shade the token is var(--wu-{name}-{stop}).

@mixin text-color($color-name, $shade: null)
ParameterTypeDefaultDescription
$color-nameString|ColorRequiredA role (brand, danger), palette name (red), theme word (regular, muted, subtle, inverted, link, link-hover), color value or var()
$shadeNumber|NullnullA shade stop (50, 100 to 900, 950) for a role or palette name, giving the fixed palette token

Example 1

.caption {
  @include text-color(muted); // var(--wu-text-muted)
}
Compiled CSS
.caption {
  color: var(--wu-text-muted);
}

Example 2

.error-message {
  @include apply(text-color(danger), font-size(sm));
}
Compiled CSS
.error-message {
  color: var(--wu-text-danger);
  font-size: var(--wu-font-size-sm);
}

color on MDN

See also: bg, text-on-color. Source: utilities/_colors.scss:308

text-on-color mixin

Sets the text color for content placed on a filled color: a role gives its var(--wu-text-on-*) token, anything else the higher contrast text color computed at compile time.

A role with a shade, a palette name or a color value gives a fixed color that does not follow themes.

@mixin text-on-color($color-name, $shade: null)
ParameterTypeDefaultDescription
$color-nameString|ColorRequiredA role (brand, danger), palette name (purple) or color value
$shadeNumber|NullnullShade stop of the fill (50, 100 to 900, 950); defaults to 500 when the color is not a role

Example 1

.button {
  @include apply(bg(brand), text-on-color(brand)); // color: var(--wu-text-on-brand)
}
Compiled CSS
.button {
  background-color: var(--wu-brand);
  color: var(--wu-text-on-brand);
}

Example 2

.tag {
  @include bg(purple, 700);
  @include text-on-color(purple, 700);
}
Compiled CSS
.tag {
  background-color: var(--wu-purple-700);
  color: #f1f1f1;
}

color on MDN

See also: adaptive-contrast, text-color. Source: utilities/_colors.scss:329

gradient mixin

Sets background-image to a linear-gradient with the given direction and color stops; color names resolve like bg() (roles, palette names, theme words), other colors and positions are written as passed.

An unknown color word raises the same error as bg().

@mixin gradient($direction, $colors...)
ParameterTypeDefaultDescription
$directionString|NumberRequiredA direction such as to right or an angle such as 135deg
$colorsAnyRequiredColor stops: a role (brand), palette name (red), theme word (surface), color value or var(), each optionally followed by a position (brand 20%)

Example 1

.hero {
  @include gradient(to right, brand, purple); // linear-gradient(to right, var(--wu-brand), var(--wu-purple-500))
}
Compiled CSS
.hero {
  background-image: linear-gradient(to right, var(--wu-brand), var(--wu-purple-500));
}

Example 2

.fade {
  @include gradient(180deg, transparent, base 80%);
}
Compiled CSS
.fade {
  background-image: linear-gradient(180deg, var(--wu-transparent), var(--wu-bg-base) 80%);
}

background-image on MDN

See also: bg. Source: utilities/_colors.scss:399