Label colors

Label color variants are included by using the label-class-variant() mixin that uses color() function, in the .label class as its extension in the src/_labels.scss file.

Core colors

src/_labels.scss
.label {
  // Accent.
  @include label-class-variant(
    $name: 'accent',
    $color: 'light-color',
    $bg-color: 'accent-color'
  );
  
  // Primary.
  @include label-class-variant(
    $name: 'primary',
    $color: 'light-color',
    $bg-color: 'primary-color'
  );

  // Primary dark.
  @include label-class-variant(
    $name: 'primary-dark',
    $color: 'light-color',
    $bg-color: 'primary-color-dark'
  );

  // Primary light.
  @include label-class-variant(
    $name: 'primary-light',
    $color: 'light-color',
    $bg-color: 'primary-color-light'
  );
  
  // Secondary.
  @include label-class-variant(
    $name: 'secondary',
    $color: 'primary-color',
    $bg-color: 'secondary-color'
  );

  // Secondary dark.
  @include label-class-variant(
    $name: 'secondary-dark',
    $color: 'primary-color',
    $bg-color: 'secondary-color-dark'
  );

  // Secondary light.
  @include label-class-variant(
    $name: 'secondary-light',
    $color: 'primary-color',
    $bg-color: 'secondary-color-light'
  );
}

Which results in the ability to use classes as follows.

<!-- Accent -->
<span class="label label-accent">accent label</span>

<!-- Primary -->
<span class="label label-primary">primary label</span>

<!-- Primary dark -->
<span class="label label-primary-dark">primary dark label</span>

<!-- Primary light -->
<span class="label label-primary-light">primary light label</span>

<!-- Secondary -->
<span class="label label-secondary">secondary label</span>

<!-- Secondary dark -->
<span class="label label-secondary-dark">secondary dark label</span>

<!-- Secondary light -->
<span class="label label-secondary-light">secondary light label</span>

Shades

src/_labels.scss
.label {
  // Dark.
  @include label-class-variant(
    $name: 'dark',
    $color: 'light-color',
    $bg-color: 'dark-color'
  );

  // Light.
  @include label-class-variant(
    $name: 'light',
    $color: 'body-font-color',
    $bg-color: 'light-color'
  );
}

Which results in the ability to use classes as follows.

<!-- Dark -->
<span class="label label-dark">dark label</span>

<!-- Light -->
<span class="label label-light">light label</span>

Gray colors

src/_labels.scss
.label {
  // Gray.
  @include label-class-variant(
    $name: 'gray',
    $color: 'gray-color-dark',
    $bg-color: 'gray-color'
  );

  // Gray dark.
  @include label-class-variant(
    $name: 'gray-dark',
    $color: 'gray-color-light',
    $bg-color: 'gray-color-dark'
  );

  // Gray light.
  @include label-class-variant(
    $name: 'gray-light',
    $color: 'gray-color-dark',
    $bg-color: 'gray-color-light'
  );
}

Which results in the ability to use classes as follows.

<!-- Gray -->
<span class="label label-gray">gray label</span>

<!-- Gray dark -->
<span class="label label-gray-dark">gray dark label</span>

<!-- Gray light -->
<span class="label label-gray-light">gray light label</span>

Link colors

src/_labels.scss
.label {
  // Link.
  @include label-class-variant(
    $name: 'link',
    $color: 'link-color-light',
    $bg-color: 'link-color'
  );

  // Link dark.
  @include label-class-variant(
    $name: 'link-dark',
    $color: 'link-color-light',
    $bg-color: 'link-color-dark'
  );

  // Link light.
  @include label-class-variant(
    $name: 'link-light',
    $color: 'link-color-dark',
    $bg-color: 'link-color-light'
  );
}

Which results in the ability to use classes as follows.

<!-- Link -->
<span class="label label-link">link label</span>

<!-- Link dark -->
<span class="label label-link-dark">link dark label</span>

<!-- Link light -->
<span class="label label-link-light">link light label</span>

Body colors

src/_labels.scss
.label {
  // Body bg.
  @include label-class-variant(
    $name: 'body-bg',
    $color: 'body-font-color',
    $bg-color: 'body-bg-color'
  );
}

Which results in the ability to use classes as follows.

<!-- Body bg -->
<span class="label label-body-bg">body bg label</span>

Bg colors

src/_variables.scss
.label {
  // Bg.
  @include label-class-variant(
    $name: 'bg',
    $color: 'body-font-color',
    $bg-color: 'bg-color'
  );

  // Bg dark.
  @include label-class-variant(
    $name: 'bg-dark',
    $color: 'body-font-color',
    $bg-color: 'bg-color-dark'
  );

  // Bg light.
  @include label-class-variant(
    $name: 'bg-light',
    $color: 'body-font-color',
    $bg-color: 'bg-color-light'
  );
}

Which results in the ability to use classes as follows.

<!-- Bg -->
<span class="label label-bg">bg label</span>

<!-- Bg dark -->
<span class="label label-bg-dark">bg dark label</span>

<!-- Bg light -->
<span class="label label-bg-light">bg light label</span>

Control colors

src/_labels.scss
.label {
  // Disabled.
  @include label-class-variant(
    $name: 'disabled',
    $color: (
      'disabled-color',
      -10%,
    ),
    $bg-color: 'disabled-color'
  );

  // Error.
  @include label-class-variant(
    $name: 'error',
    $color: 'light-color',
    $bg-color: 'error-color'
  );

  // Info.
  @include label-class-variant(
    $name: 'info',
    $color: (
      'info-color',
      -60%,
    ),
    $bg-color: 'info-color'
  );

  // Success.
  @include label-class-variant(
    $name: 'success',
    $color: 'light-color',
    $bg-color: 'success-color'
  );

  // Warning.
  @include label-class-variant(
    $name: 'warning',
    $color: 'light-color',
    $bg-color: 'warning-color'
  );
}

Which results in the ability to use classes as follows.

<!-- Disabled -->
<span class="label label-disabled">disabled label</span>

<!-- Error -->
<span class="label label-error">error label</span>

<!-- Info -->
<span class="label label-info">info label</span>

<!-- Info -->
<span class="label label-success">success label</span>

<!-- Warning -->
<span class="label label-warning">warning label</span>

Other colors

src/_labels.scss
.label {
  // Code.
  @include label-class-variant(
    $name: 'code',
    $color: 'light-color',
    $bg-color: 'code-color'
  );

  // Highlight.
  @include label-class-variant(
    $name: 'highlight',
    $color: (
      'highlight-color',
      -50%,
    ),
    $bg-color: 'highlight-color'
  );
}

Which results in the ability to use classes as follows.

<!-- Code -->
<span class="label label-code">code label</span>

<!-- Highlight -->
<span class="label label-highlight">highlight label</span>

Demonstration

PreviousBackground colorsNext⚠ Text colors

Last updated