# label-class-variant()

The mixin contains an extending class of the name prefixed with `label-` and the given color [`$name`](#usdname-light) that includes a [`label-variant()`](https://spectrecss.angular-package.dev/mixin/label/label-variant) mixin of the given CSS variable names [`$color`](#usdcolor-light-color) and [`$bg-color`](#usdbg-color-primary-color). Both parameters can be passed as two-index [list](https://sass-lang.com/documentation/values/lists) where the second item in the list refers to the lightness, for example `$color: ('primary', -10%)` when primary color should be darker by **`10%`**.

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

```scss
@mixin label-class-variant(
  $name: 'light',
  $color: 'light-color',
  $bg-color: 'primary-color',
  $color-lightness: 0%,
  $bg-lightness: 0%
) {
  &.label-#{$name} {
    @include label-variant($color, $bg-color, $color-lightness, $bg-lightness);
  }
}
```

{% endcode %}

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

### Parameters

#### `$name: 'light'`

The suffix for the `label-` class name, which by default is `light`, resulting in CSS class name `.label-light`. Especially used as the [color code](https://spectrecss.angular-package.dev/variables/colors/color-code).

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

A color name of a string or two-index [list](https://sass-lang.com/documentation/values/lists) type that exists as a CSS variable is passed to the [`color()`](https://spectrecss.angular-package.dev/function/color/color) function to set the foreground color value of a label's text.

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

A color name of a string or two-index [list](https://sass-lang.com/documentation/values/lists) type that exists as a CSS variable is passed to the [`color()`](https://spectrecss.angular-package.dev/function/color/color) function to set the [background](https://developer.mozilla.org/en-US/docs/Web/CSS/background) color of the label.

#### `$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 of `light-color` darker by 10%.
@include label-class-variant(
  $name: 'accent',
  $color: ('light-color', -10%),
  $bg-color: ('accent-color', 10%)
);

// OR

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

{% embed url="<https://sass-lang.com/documentation/values/lists>" %}