> For the complete documentation index, see [llms.txt](https://spectrecss.angular-package.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://spectrecss.angular-package.dev/mixin/label/label-variant.md).

# label-variant()

The mixin contains the [`color`](https://developer.mozilla.org/en-US/docs/Web/CSS/color) and [`background`](https://developer.mozilla.org/en-US/docs/Web/CSS/background) style of the values given respectively by [`$color`](#usdcolor-light-color) and [`$bg-color`](#usdbg-color-primary-color) CSS variable name. Both parameters can be passed as a two-index [list](https://sass-lang.com/documentation/values/lists) where the second item in the list refers to the lightness, and parameter [`$bg-color`](#usdbg-color-primary-color) can be passed using the three-index [list](https://sass-lang.com/documentation/values/lists) where the third item is a label background alpha.

For example `$color: ('primary', -10%)` when font color `primary` should be darker by 10%, and `$bg-color: ('primary-dark', 10%)` when label background color is `primary-dark` lighter by **`10%`**.

{% code title="src/mixins/\_label.scss" %}

```scss
@mixin label-variant(
  $color: 'light-color',
  $bg-color: 'primary-color',
  $color-lightness: 0%,
  $bg-lightness: 0%
) {
  $alpha: 1;
  @if list.length($color) > 1 {
    $color-lightness: list.nth($color, 2);
    $color: list.nth($color, 1);
  }

  @if list.length($bg-color) > 1 {
    @if list.length($bg-color) == 3 {
      $alpha: list.nth($bg-color, 3);
    }

    $bg-lightness: list.nth($bg-color, 2);
    $bg-color: list.nth($bg-color, 1);
  }

  background: color($bg-color, $lightness: $bg-lightness, $alpha: $alpha);
  color: color($color, $lightness: $color-lightness);
}
```

{% endcode %}

{% embed url="<https://github.com/angular-package/spectre.css/blob/master/src/mixins/_label.scss>" %}

### Parameters

#### `$color: 'light-color'`

A color name that exists as a CSS variable of a string or two-index [list](https://sass-lang.com/documentation/values/lists) type is passed to the [`color()`](/function/color/color.md) function to set the foreground color value of a label's text. The first item of the two-index list refers to the CSS variable color name, and the second refers to its lightness.

#### `$bg-color: 'primary-color'`

A color name that exists as a CSS variable of a string or three-index [list](https://sass-lang.com/documentation/values/lists) type is passed to the [`color()`](/function/color/color.md) function to set the background color of the label. The first item of the three-index [list](https://sass-lang.com/documentation/values/lists) refers to the CSS variable color name, the second refers to its lightness, and the third refers to the alpha.

#### `$color-lightness: 0%`

Optional alternative lightness attribute of the given [`$color`](#usdcolor-light-color) parameter.

#### `$bg-lightness: 0%`

Optional alternative lightness attribute of the given [`$bg-color`](#usdbg-color-primary-color) parameter.

## Example usage

```scss
// Get mixin.
@use 'node_modules/@angular-package/spectre.css/src/mixins/label' as *;

// Accent label lighter by 10% with font `light-color` darker by 10%.
.label-accent {
  @include label-variant(
    $color: ('light-color', -10%),
    $bg-color: ('accent-color', 10%)
  );

  // OR

  @include label-variant(
    $color: 'light-color',
    $bg-color: 'accent-color',
    $color-lightness: -10%,
    $bg-lightness: 10%
  );
}
```