Background colors

Based on CSS variable

In the original Spectre.css, the background color is based on the SCSS variable, but in the @angular-package/spectre.css it is based on the CSS variable. It is set by the modified bg-color-variant() mixin, to use the color() 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.

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

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

// 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 backgrounds are using the same SCSS variable name as the class name except one .bg-gray, which uses $bg-color. @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.

$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.

Let's look at how CSS background class colors finally are defined.

Core colors

src/_variables.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);

Shades

src/_variables.scss

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

Gray colors

src/_variables.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);

Link colors

src/_variables.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);

Body colors

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

Bg colors

src/_variables.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

Control colors

src/_variables.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);

Other colors

src/_variables.scss

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

@angular-packageangularpackage

Click to see demonstration

Sass: Variables

Using CSS custom properties (variables) - CSS: Cascading Style Sheets | MDN