label-class-variant()

The mixin contains an extending class of the name prefixed with label- and the given color $name that includes a label-variant() mixin of the given CSS variable names $color and $bg-color. Both parameters can be passed as two-index list where the second item in the list refers to the lightness, for example $color: ('primary', -10%) when primary color should be darker by 10%.

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

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

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.

$color: 'light-color'

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

$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 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%
);

Sass: Lists