# Background colors

### Based on CSS variable

In the original [Spectre.css](https://picturepan2.github.io/spectre/), the background color is based on the [SCSS variable](https://sass-lang.com/documentation/variables), but in the [`@angular-package/spectre.css`](https://www.npmjs.com/package/@angular-package/spectre.css) it is based on the [CSS variable](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). It is set by the modified [`bg-color-variant()`](/mixin/color/bg-color-variant.md) mixin, to use the [`color()`](/function/color/color.md) function to set the `background` and `color` style, and the SCSS variable is used to add the color property `light-color` the same way by checking whether the lightness of the SCSS variable is below **`60`**.

```scss
@if (lightness($hex-color) < 60) {
  color: color('light-color');
}
```

For example to add `.bg-accent` CSS class color that uses CSS variable `accent-color`.

```scss
// Get bg-color-variant mixin
@use 'node_modules/@angular-package/spectre.css/src/mixins/color' as *;
@use 'node_modules/@angular-package/spectre.css/variables' as *;

// Include
@include bg-color-variant('.bg-accent', 'accent-color', $accent-color);
```

### Naming consistency

All colors have equivalent background CSS classes even with `dark` and `light` shades. [Spectre.css](https://picturepan2.github.io/spectre/) backgrounds are using the same SCSS variable name as the class name except one `.bg-gray`, which uses `$bg-color`. [@angular-package/spectre.css](https://www.npmjs.com/package/@angular-package/spectre.css) version modified it, now `$bg-color` SASS variable is used in the new background `.bg` and `.bg-bg` class, and `.bg-gray` uses `$gray-color` to have consistent naming. The class name does not include suffix `color`, but there is one exception in the `.bg-color`, which includes.

It's because of the SCSS variable `$bg-color` below, its shades, and treating prefix `bg` like not a color name, but it is the color name.

```scss
$bg-color: lighten($dark-color, 75%) !default;
$bg-color-dark: darken($bg-color, 3%) !default;
$bg-color-light: $light-color !default;
```

If I want to create background CSS class color `.bg-dark`, it should refer to the SCSS variable `$dark-color` to preserve naming consistency, but it can refer also to the `$bg-color-dark` with losing consistency. In the **`beta`** version, I decided to add the `.bg-bg` background class name to have full naming consistency, so the non-consistent `.bg-color` is treated as deprecated.

&#x20;Let's look at how CSS background class colors finally are defined.

### Core colors

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

```scss
// Accent
@include bg-color-variant('accent', 'accent-color', $accent-color);

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

// Secondary.
@include bg-color-variant('secondary', 'secondary-color', $secondary-color);
@include bg-color-variant('secondary-dark', 'secondary-color-dark', $secondary-color-dark);
@include bg-color-variant('secondary-light', 'secondary-color-light', $secondary-color-light);
```

{% endcode %}

### Shades

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

```scss
@include bg-color-variant('dark', 'dark-color', $dark-color);
@include bg-color-variant('light', 'light-color', $light-color);
```

{% endcode %}

### Gray colors

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

```scss
@include bg-color-variant('gray', 'gray-color', $gray-color);
@include bg-color-variant('gray-dark', 'gray-color-dark', $gray-color-dark);
@include bg-color-variant('gray-light', 'gray-color-light', $gray-color-light);
```

{% endcode %}

### Link colors

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

```scss
@include bg-color-variant('link', 'link-color', $link-color);
@include bg-color-variant('link-dark', 'link-color-dark', $link-color-dark);
@include bg-color-variant('link-light', 'link-color-light', $link-color-light);
```

{% endcode %}

### Body colors

{% code title="" %}

```scss
@include bg-color-variant('body', 'body-bg-color', $body-bg-color);
```

{% endcode %}

### Bg colors

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

```scss
// @include bg-color-variant('.bg', 'bg-color', $bg-color); // @deprecated
@include bg-color-variant('bg', 'bg-color', $bg-color);
@include bg-color-variant('bg-dark', 'bg-color-dark', $bg-color-dark);
@include bg-color-variant('bg-light', 'bg-color-light', $bg-color-light);

@include bg-color-variant('color', 'bg-color', $bg-color); // @deprecated
@include bg-color-variant('color-dark', 'bg-color-dark', $bg-color-dark); // @deprecated
@include bg-color-variant('color-light', 'bg-color-light', $bg-color-light); // @deprecated
```

{% endcode %}

### Control colors

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

```scss
@include bg-color-variant('disabled', 'disabled-color', $disabled-color);
@include bg-color-variant('error', 'error-color', $error-color);
@include bg-color-variant('info', 'info-color', $info-color);
@include bg-color-variant('success', 'success-color', $success-color);
@include bg-color-variant('warning', 'warning-color', $warning-color);
```

{% endcode %}

### Other colors

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

```scss
@include bg-color-variant('.bg-code', 'code-color');
@include bg-color-variant('.bg-highlight', 'highlight-color');
```

{% endcode %}

{% embed url="<https://angular-package.dev/ui-kit/utility/color>" %}
Click to see demonstration
{% endembed %}

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

{% embed url="<https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties>" %}


---

# 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/background-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.