# Label colors

Label color variants are included by using the [`label-class-variant()`](/mixin/label/label-class-variant.md) mixin that uses  [`color()`](/function/color/color.md) function, in the `.label` class as its extension in the [`src/_labels.scss`](https://github.com/angular-package/spectre.css/blob/master/src/_labels.scss) file.

### Core colors

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

```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'
  );
}
```

{% endcode %}

Which results in the ability to use classes as follows.

```html
<!-- 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

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

```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'
  );
}
```

{% endcode %}

Which results in the ability to use classes as follows.

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

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

### Gray colors

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

```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'
  );
}
```

{% endcode %}

Which results in the ability to use classes as follows.

```html
<!-- 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

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

```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'
  );
}
```

{% endcode %}

Which results in the ability to use classes as follows.

```html
<!-- 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

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

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

{% endcode %}

Which results in the ability to use classes as follows.

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

### Bg colors

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

```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'
  );
}
```

{% endcode %}

Which results in the ability to use classes as follows.

```html
<!-- 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

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

```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'
  );
}
```

{% endcode %}

Which results in the ability to use classes as follows.

```html
<!-- 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

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

```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'
  );
}
```

{% endcode %}

Which results in the ability to use classes as follows.

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

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

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

{% embed url="<https://angular-package.github.io/spectre.css/elements/labels.html>" %}
Modified Spectre.css documentation.
{% endembed %}

### Demonstration

{% embed url="<https://angular-package.dev/ui-kit/component/label>" %}
Label demonstration
{% endembed %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://spectrecss.angular-package.dev/css-color-classes/label-colors.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.