label-variant()

The mixin contains the color and background style of the values given respectively by $color and $bg-color CSS variable name. Both parameters can be passed as a two-index list where the second item in the list refers to the lightness, and parameter $bg-color can be passed using the three-index list 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%.

src/mixins/_label.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);
}

spectre.css/_label.scss at master · angular-package/spectre.cssGitHub

Parameters

$color: 'light-color'

A color name that exists as a CSS variable of a string or two-index list type is passed to the color() 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 type is passed to the color() function to set the background color of the label. The first item of the three-index list 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 parameter.

$bg-lightness: 0%

Optional alternative lightness attribute of the given $bg-color parameter.

Example usage

// 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%
  );
}