@angular-package/spectre.css/README.md

Modified Spectre.css - a lightweight, responsive, and modern CSS framework originally designed by Yan Zhu

# angular-package

<a href='https://angular-package.dev' target='_blank'>
  <img align="right"  width="92" height="92" src="https://avatars.githubusercontent.com/u/31412194?s=400&u=c9929aa36826318ccac8f7b84516e1ce3af7e21c&v=4" />
</a>

The angular-package supports the development process of [angular](https://angular.io)-based applications in varied ways through the thoughtful, reusable, easy-to-use small pieces of code called packages.

## angular-package/spectre.css

Modified Spectre.css - a lightweight, responsive, and modern CSS framework originally designed by [Yan Zhu](https://twitter.com/picturepan2).

[![Gitter][gitter-badge]][gitter-chat]
[![Discord][discord-badge]][discord-channel]
[![Twitter][twitter-badge]][twitter-follow]
<!-- npm badge -->
[![npm version][spectre.css-npm-badge-svg]][spectre.css-npm-badge]

<!-- GitHub badges -->
[![GitHub issues][spectre.css-badge-issues]][spectre.css-issues]
[![GitHub forks][spectre.css-badge-forks]][spectre.css-forks]
[![GitHub stars][spectre.css-badge-stars]][spectre.css-stars]
[![GitHub license][spectre.css-badge-license]][spectre.css-license]

<br>

## Table of contents

* [Skeleton](#skeleton)
* [Getting started](#getting-started)
* [Spectre.css](#spectrecss)
* [Demonstration](#demonstration)
* [Major changes](#major-changes)
* [Usage](#usage)
* [SCSS/CSS variables](#scsscss-variables)
  * [Settable SCSS colors](#settable-scss-colors)
  * [Based on settable SCSS colors](#based-on-settable-scss-colors)
  * [CSS colors](#css-colors)
  * [Other variables](#other-variables)
    * [Border](#border)
    * [Control](#control)
    * [Font size and line height](#font-sizes-and-line-height)
    * [Layout spacing](#layout-spacing)
    * [Parallax](#parallax)
    * [Responsive breakpoints](#responsive-breakpoints)
    * [Transition duration](#transition-duration)
    * [Units](#units)
    * [z-index](#z-index)
* [CSS Color classes](#css-color-classes)
  * [Background](#background-colors)
  * [Label](#label-colors)
  * [Text](#text-colors)
  * [Toast](#toast-colors)
* [Sass functions/mixins](#sass-functionsmixins)
  * [`box-shadow-side()`](#box-shadow-side)
  * [`color()`](#color)
  * [`get-var()`](#get-var)
  * [`label-class-variant()`](#label-class-variant)
  * [`set-var()`](#set-var)
  * [`var-negative()`](#var-negative)
  * [`toast-class-variant()`](#toast-class-variant)
* [Helper class](#helper-class)
* [Documentation and examples](#documentation-and-examples)
* [Browser support](#browser-support)
* [Changelog](#changelog)
* [Git](#git)
  * [Commit](#commit)
  * [Versioning](#versioning)
* [License](#license)

<br>

## Skeleton

This package was generated by the [library skeleton][skeleton] with [Angular CLI](https://github.com/angular/angular-cli) version 13.0.0.

Copy this package to the `packages/spectre.css` folder of the [library skeleton][skeleton] then run the commands below.

## Code scaffolding

Run `ng generate component component-name --project spectre.css` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project spectre.css`.
> Note: Don't forget to add `--project spectre.css` or else it will be added to the default project in your `angular.json` file.

### Build

Run `ng build spectre.css` to build the project. The build artifacts will be stored in the `dist/spectre.css` directory.

### Publishing

After building your library with `ng build spectre.css`, go to the dist folder `cd dist/spectre.css` and run `npm publish`.

### Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

<br>

<a href="https://picturepan2.github.io/spectre">
  <img src="https://picturepan2.github.io/spectre/img/spectre-logo.svg" width="72" height="72">
</a>

## Spectre.css

[![Reviewed by Hound](https://img.shields.io/badge/Reviewed_by-Hound-8E64B0.svg)](https://houndci.com)

**This [`Spectre.css`](https://github.com/picturepan2/spectre) is maintained by the [`@angular-package`](https://www.npmjs.com/package/@angular-package/spectre.css).**

> Feel free to submit a pull request. Help is always appreciated.

Spectre.css is a lightweight, responsive and modern CSS framework.

- Lightweight (~10KB gzipped) starting point for your projects
- Flexbox-based, responsive and mobile-friendly layout
- Elegantly designed and developed elements and components

Spectre is a side project based on years of CSS development work on a large web service project. Spectre only includes modern base styles, responsive layout system, CSS components and utilities, and it can be modified for your project with Sass/Scss compiler.

Spectre.css is completely free to use. If you enjoy it, please consider [donating via Paypal](https://www.paypal.me/picturepan2) or [via Patreon](https://www.patreon.com/spectrecss) for the further development. ♥ 

## Getting started

There are 2 ways to get started with Spectre CSS framework in your projects. You can use NPM or Yarn.

### Install with NPM

`$ npm install @angular-package/spectre.css --save`

### Install with Yarn

`$ yarn add @angular-package/spectre.css`

## Demonstration

Demonstration will be available soon here [https://angular-package.dev/ui-kit](https://angular-package.dev/ui-kit)

## Major changes

### `@use` ready

We can read [here](https://sass-lang.com/documentation/at-rules/import), that the **Sass** team is going to remove `@import` from the engine in the next few years, and `@angular-package/spectre.css` is rewritten to use `@forward` and `@use`.

### CSS variables

Almost all SCSS variables have their equivalent CSS variables, meaning that SCSS variables are only used to define CSS variables and the CSS variables are used in styles instead of SCSS, which results in the ability to change them on the fly without pre-loading.

### Angular components

The [`@angular-package`](https://github.com/angular-package) has already some components that will be soon shared public under the [`@angular-package/spectre`](https://github.com/angular-package/spectre) package.

## Usage

```scss
// Main spectre.
@use 'node_modules/@angular-package/spectre.css/spectre' as *;
@use 'node_modules/@angular-package/spectre.css/spectre-exp' as *;
@use 'node_modules/@angular-package/spectre.css/spectre-icons' as *;

// Define variables.
@use 'node_modules/@angular-package/spectre.css/css-variables' as *;

// Get functions.
@use 'node_modules/@angular-package/spectre.css/functions' as *;

// Get mixins.
@use 'node_modules/@angular-package/spectre.css/mixins' as *;

// Get variables.
@use 'node_modules/@angular-package/spectre.css/variables' as *;
```

## SCSS/CSS variables

### Scheme

The `color-scheme` variable is set to `normal`.

```scss
:root, :host {
  color-scheme: normal;
}
```

### CSS variable name prefix

CSS variable name structure is defined as follows.

```css
--#{$var-prefix}-#{$name}
```

It's possible to customize the CSS variables' names with the SCSS variable `$var-prefix`. By default, it's set to `s`.

```scss
// src/_variables.scss
$var-prefix: 's';
```

For example, default CSS variable `--s-control-padding-x` can be changed to `--spectre-control-padding-x` after change the `$var-prefix: 'spectre';`

### Settable SCSS colors

Settable colors with a specific **hex** on which some others are based.

```scss
// src/_variables.scss
// Core colors
$accent-color: #9932CC !default; // CSS variable.
$dark-color: #303742 !default; // CSS variable.
$light-color: #fff !default; // CSS variable.
$primary-color: #5755d9 !default; // CSS variable.

// Control colors
$disabled-color: $bg-color-dark !default; // ! CSS Variable. New control color.
$error-color: #e85600 !default; // CSS variable.
$info-color: #d9edf7 !default; // CSS variable.
$success-color: #32b643 !default; // CSS variable.
$warning-color: #ffb700 !default; // CSS variable.

// Background colors
$bg-color-light: $light-color !default; // CSS variable.

// Link colors
$link-color: $primary-color !default; // CSS variable.

// Other colors
$code-color: #d73e48 !default; // CSS variable.
$highlight-color: #ffe9b3 !default; // CSS variable.

// Body colors
// $body-bg: $bg-color-light !default; // REMOVED in favor of $body-bg-color
$body-bg-color: $bg-color-light !default; // New SCSS variable, CSS variable.

```

### Based on settable SCSS colors

Colors that are based on the **hex** colors above.

```scss
// src/_variables.scss
// Core colors
// Primary.
$primary-color-dark: darken($primary-color, 3%) !default; // CSS variable.
$primary-color-light: lighten($primary-color, 3%) !default; // CSS variable.

// Secondary.
$secondary-color: lighten($primary-color, 37.5%) !default; // CSS variable.
$secondary-color-dark: darken($secondary-color, 3%) !default; // CSS variable.
$secondary-color-light: lighten($secondary-color, 3%) !default; // CSS variable.

// Gray colors
$gray-color: lighten($dark-color, 55%) !default; // CSS variable.
$gray-color-dark: darken($gray-color, 30%) !default; // CSS variable.
$gray-color-light: lighten($gray-color, 20%) !default; // CSS variable.

// Background colors
$bg-color: lighten($dark-color, 75%) !default; // CSS variable.
$bg-color-dark: darken($bg-color, 3%) !default; // CSS variable.

// Border colors
$border-color: lighten($dark-color, 65%) !default; // CSS variable.
$border-color-dark: darken($border-color, 10%) !default; // CSS variable.
$border-color-light: lighten($border-color, 8%) !default; // CSS variable.

// Link colors
$link-color-dark: darken($link-color, 10%) !default; // CSS variable.
$link-color-light: lighten($link-color, 10%) !default; // CSS variable.

// Body colors.
$body-font-color: lighten($dark-color, 5%) !default; // CSS variable.
```

### CSS colors

#### CSS variable color structure

Each **hex** color has **four** CSS variables defined by the mixin `define-color($name, $color, $prefix: $var-prefix)`, split into hsl form, where suffix `h` indicates `hue`, `s` saturation, `l` lightness and `a` - alpha.

> By default, argument `$prefix` is equal to `$var-prefix`.

```scss
// src/mixins/_define-color.scss
// The mixin defines CSS variable color in hsla form.
@mixin define-color($name, $color, $prefix: $var-prefix, $alpha: -1) {
  @include set-var($name, hue($color), $prefix, 'h');
  @include set-var($name, saturation($color), $prefix, 's');
  @include set-var($name, lightness($color), $prefix, 'l');
  @if $alpha == -1 {
    @include set-var($name, alpha($color), $prefix, 'a');
  } @else {
    @include set-var($name, $alpha, $prefix, 'a');
  }
}
```

For example `primary-color` is built from the CSS variables.

```css
--s-primary-color-h: 240.9090909091deg; // Hue.
--s-primary-color-s: 63.4615384615%; // Saturation.
--s-primary-color-l: 59.2156862745%; // Lightness.
--s-primary-color-a: 1; // Alpha.
```

CSS variables are defined in both `:root` and `:host`. For example core colors.

```scss
// src/css-variables/_core-colors.scss
:root, :host {
  // Accent.
  @include define-color('accent-color', $accent-color); // #9932CC

  // Dark.
  @include define-color('dark-color', $dark-color); // #303742

  // Light.
  @include define-color('light-color', $light-color); // #ffffff

  // Primary.
  @include define-color('primary-color', $primary-color); // #5755d9
}
```

Each color that is based on **hex** color has **four** CSS variables defined by the mixin `define-color-based-on($name, $color, $lightness: 0%, $prefix)`, split into hsl form, where suffix `h` indicates `hue`, `l` lightness, `s` saturation and `a` - alpha.
> By default, argument `$prefix` is equal to `$var-prefix`.

```scss
// src/mixins/_define-color-based-on.scss
// Defines a color based on the specified CSS variable and its lightness.
@mixin define-color-based-on($name, $color, $lightness: 0%, $prefix: $var-prefix) {
  @include set-var($name, get-var($color, $suffix: 'h'), $prefix, 'h');
  @include set-var($name, get-var($color, $suffix: 's'), $prefix, 's');
  @include set-var($name, calc(var(--#{$prefix}-#{$color}-l) + #{$lightness}), $prefix, 'l');
  @include set-var($name, get-var($color, $suffix: 'a'), $prefix, 'a');
}
```

Color that based on `primary-color` for example `secondary-color` is built from the css variables:

```css
:root, :host {
  --s-secondary-color-h: var(--s-primary-color-h);
  --s-secondary-color-l: calc(var(--s-primary-color-l) + 37.5%);
  --s-secondary-color-s: var(--s-primary-color-s);
  --s-secondary-color-a: var(--s-primary-color-a);
}
```

CSS variables that are based on others are also defined in both `:root` and `:host`. For example core colors.

```scss
// src/css-variables/_core-colors.scss
:root, :host {
  // Primary.
  @include define-color-based-on('primary-color-dark', 'primary-color', $lightness: -3%); // darken($primary-color, 3%)
  @include define-color-based-on('primary-color-light', 'primary-color', $lightness: +3%); // lighten($primary-color, 3%)

  // Secondary.
  @include define-color-based-on('secondary-color', 'primary-color', $lightness: +37.5%); // lighten($primary-color, 37.5%) !default;
  @include define-color-based-on('secondary-color-dark', 'secondary-color', $lightness: -3%); // darken($secondary-color, 3%) !default;
  @include define-color-based-on('secondary-color-light', 'secondary-color', $lightness: +3%); // lighten($secondary-color, 3%) !default;
}
```

Colors are read by the function `color($name, $hue: 0deg, $lightness: 0%, $saturation: 0%, $alpha: 1, $prefix: $var-prefix)`.

```scss
// src/functions/_color.scss
/*
  The function `color()` returns the hsla color from a CSS variable of the given `$name`.
*/
@function color(
  $name,
  $hue: 0deg,
  $lightness: 0%,
  $saturation: 0%,
  $alpha: 1,
  $prefix: $var-prefix
) {
  @return hsla(
    calc(var(--#{$prefix}-#{$name}-h) + #{$hue}),
    calc(var(--#{$prefix}-#{$name}-s) + #{$saturation}),
    calc(var(--#{$prefix}-#{$name}-l) + #{$lightness}),
    calc(var(--#{$prefix}-#{$name}-a) * #{$alpha})
  );
}
```

For example `primary-color` or `primary-color-dark`:

```scss
@use 'node_modules/@angular-package/spectre.css/functions' as *;

.primary-color {
  background: color('primary-color');
}

.primary-color-dark {
  background: color('primary-color-dark');
}
```

### Other variables

#### Border

SCSS variables.

```scss
// src/_variables.scss
// Border radius.
$border-radius: $unit-h !default; // ! New CSS variable.

// Border width.
$border-width: $unit-o !default; // ! New CSS variable.
$border-width-lg: $unit-h !default; // ! New CSS variable.
```

Equivalent CSS variables with default prefix `s`.

```css
:root, :host {
  --s-border-radius: 0.1rem;
  --s-border-width: 0.05rem;
  --s-border-width-lg: 0.1rem;
}
```

#### Control

SCSS variables.

```scss
// src/_variables.scss
// Control size.
$control-size: $unit-9 !default; // ! New CSS variable.
$control-size-lg: $unit-10 !default; // ! New CSS variable.
$control-size-sm: $unit-7 !default; // ! New CSS variable.

// Control padding.
$control-padding-x: $unit-2 !default; // ! New CSS variable.
$control-padding-x-lg: $unit-2 * 1.5 !default; // ! New CSS variable.
$control-padding-x-sm: $unit-2 * 0.75 !default; // ! New CSS variable.
$control-padding-y: ($control-size - $line-height) * 0.5 - $border-width !default; // ! New CSS variable.
$control-padding-y-lg: ($control-size-lg - $line-height) * 0.5 - $border-width !default; // ! New CSS variable.
$control-padding-y-sm: ($control-size-sm - $line-height) * 0.5 - $border-width !default; // ! New CSS variable.

// Control icon.
$control-icon-size: 0.8rem !default; // ! New CSS variable.

// Control width.
$control-width-lg: 960px !default; // ! New CSS variable.
$control-width-md: 640px !default; // ! New CSS variable.
$control-width-sm: 320px !default; // ! New CSS variable.
$control-width-xl: 1280px !default; // ! New CSS variable. Not used.
$control-width-xs: 180px !default; // ! New CSS variable.
```

Equivalent CSS variables with default prefix `s`.

```css
:root, :host {
  // Control size.
  --s-control-size: 1.8rem;
  --s-control-size-lg: 2rem;
  --s-control-size-sm: 1.4rem;

  // Control padding.
  --s-control-padding-x: 0.4rem;
  --s-control-padding-x-lg: calc(var(--s-control-padding-x) * 1.5);
  --s-control-padding-x-sm: calc(var(--s-control-padding-x) * 0.75);
  --s-control-padding-y: calc((var(--s-control-size) - var(--s-line-height)) * 0.5 - var(--s-border-width));
  --s-control-padding-y-lg: calc((var(--s-control-size-lg) - var(--s-line-height)) * 0.5 - var(--s-border-width));
  --s-control-padding-y-sm: calc((var(--s-control-size-sm) - var(--s-line-height)) * 0.5 - var(--s-border-width));

  // Control icon size.
  --s-control-icon-size: 0.8rem;

  // Control width.
  --s-control-width-lg: 960px;
  --s-control-width-md: 640px;
  --s-control-width-sm: 320px;
  --s-control-width-xl: 1280px;
  --s-control-width-xs: 180px;
}
```

#### Font sizes and line-height

SCSS variables.

```scss
// src/_variables.scss
$font-size: 0.8rem !default; // ! New CSS variable.
$font-size-lg: 0.9rem !default; // ! New CSS variable.
$font-size-sm: 0.7rem !default; // ! New CSS variable.
$html-font-size: 20px !default; // ! New CSS variable.
$html-line-height: 1.5 !default; // ! New CSS variable.
$line-height: 1.2rem !default; // ! New CSS variable.
```

Equivalent CSS variables with default prefix `s`.

```css
// src/css-variables/_font-size.scss
:root, :host {
  --s-font-size: 0.8rem;
  --s-font-size-lg: 0.9rem;
  --s-font-size-sm: 0.7rem;
  --s-html-font-size: 20px;
  --s-html-line-height: 1.5;
  --s-line-height: 1.2rem;
}
```

#### Layout spacing

SCSS variables.

```scss
// src/_variables.scss
$layout-spacing: $unit-2 !default; // ! New CSS variable.
$layout-spacing-sm: $unit-1 !default; // ! New CSS variable.
$layout-spacing-lg: $unit-4 !default; // ! New CSS variable.
```

Equivalent CSS variables with default prefix `s`.

> This property is set without a unit because it's used in calculation with a different unit (`px`).

```css
:root, :host {
  --s-layout-spacing: 0.4;
  --s-layout-spacing-lg: 0.8;
  --s-layout-spacing-sm: 0.2;
  --s-layout-spacing-unit: 1rem;
}
```

#### Parallax

SCSS variables.

```scss
$parallax-deg: 3deg !default;
$parallax-offset: 4.5px !default;
$parallax-offset-z: 50px !default;
$parallax-perspective: 1000px !default;
$parallax-scale: 0.95 !default;
$parallax-fade-color: #ffffff !default;
```

Equivalent CSS variables with default prefix `s`.

```css
:root, :host {
  --s-parallax-deg: 3deg;
  --s-parallax-fade-color-h: 0deg;
  --s-parallax-fade-color-s: 0%;
  --s-parallax-fade-color-l: 100%;
  --s-parallax-fade-color-a: 0.35;
  --s-parallax-offset: 4.5px;
  --s-parallax-offset-z: 50px;
  --s-parallax-perspective: 1000px;
  --s-parallax-scale: 0.95;
}
```

#### Responsive breakpoints

```scss
// src/_variables.scss
// Responsive breakpoints.
$size-2x: 1440px !default; // ! New CSS variable.
$size-lg: 960px !default; // ! New CSS variable.
$size-md: 840px !default; // ! New CSS variable.
$size-sm: 600px !default; // ! New CSS variable.
$size-xl: 1280px !default; // ! New CSS variable.
$size-xs: 480px !default; // ! New CSS variable.

$responsive-breakpoint: $size-xs !default; // ! New CSS variable.
```

```css
:root, :host {
  --s-size-2x: 1440px;
  --s-size-lg: 960px;
  --s-size-md: 840px;
  --s-size-sm: 600px;
  --s-size-xl: 1280px;
  --s-size-xs: 480px;

  --s-responsive-breakpoint: 480px;
}
```

#### Transition duration

SCSS variable.

```scss
$transition-duration: 0.2s;
```

Equivalent CSS variable with default prefix `s`.

```css
:root, :host {
  --s-transition-duration: 0.2s;
}
```

#### Units

SCSS variables.

```scss
// src/_variables.scss
// Unit sizes.
$unit-o: 0.05rem !default; // ! New CSS variable.
$unit-h: 0.1rem !default; // ! New CSS variable.
$unit-1: 0.2rem !default; // ! New CSS variable.
$unit-2: 0.4rem !default; // ! New CSS variable.
$unit-3: 0.6rem !default; // ! New CSS variable.
$unit-4: 0.8rem !default; // ! New CSS variable.
$unit-5: 1rem !default; // ! New CSS variable.
$unit-6: 1.2rem !default; // ! New CSS variable.
$unit-7: 1.4rem !default; // ! New CSS variable.
$unit-8: 1.6rem !default; // ! New CSS variable.
$unit-9: 1.8rem !default; // ! New CSS variable.
$unit-10: 2rem !default; // ! New CSS variable.
$unit-12: 2.4rem !default; // ! New CSS variable.
$unit-16: 3.2rem !default; // ! New CSS variable.
```

Equivalent CSS variables with default prefix `s`. Here we have the new variable `--s-unit-0`.

```css
// src/css-variables/_unit-sizes.scss
:root, :host {
  --s-unit-o: 0.05rem;
  --s-unit-h: 0.1rem;
  --s-unit-0: 0rem;
  --s-unit-1: 0.2rem;
  --s-unit-2: 0.4rem;
  --s-unit-3: 0.6rem;
  --s-unit-4: 0.8rem;
  --s-unit-5: 1rem;
  --s-unit-6: 1.2rem;
  --s-unit-7: 1.4rem;
  --s-unit-8: 1.6rem;
  --s-unit-9: 1.8rem;
  --s-unit-10: 2rem;
  --s-unit-12: 2.4rem;
  --s-unit-16: 3.2rem;
}
```

#### z-index

SCSS variables.

```scss
// Z-index.
$zindex-0: 1 !default; // ! New CSS variable.
$zindex-1: 100 !default; // ! New CSS variable.
$zindex-2: 200 !default; // ! New CSS variable.
$zindex-3: 300 !default; // ! New CSS variable.
$zindex-4: 400 !default; // ! New CSS variable.
```

Equivalent CSS variables with default prefix `s`.

```css
:root, :host {
  --s-z-index-0: 1;
  --s-z-index-1: 100;
  --s-z-index-2: 200;
  --s-z-index-3: 300;
  --s-z-index-4: 400;
}
```

## CSS Color classes

### Background colors

In the original Spectre.css, background colors are based on SCSS variables, but in [`@angular-package`](https://www.npmjs.com/package/@angular-package/spectre.css) Spectre.css they are based on CSS variables.
They are set the same way, by the `bg-color-variant()` mixin, but using respective SCSS variables to initialize and change the lightness of the background font color.

Original Spectre.css backgrounds are using the same SCSS variable name as the class name except one `.bg-gray`, which uses `$bg-color`.
This version, `$bg-color` SASS variable is used in the new background `.bg` class, and `.bg-gray` uses `$gray-color` to have consistent naming.

There are also new background `.bg-accent` (`$accent-color`), `.bg-gray-dark` (`$gray-color-dark`), `.bg-gray-light` (`$gray-color-light`), `.bg-info` (`$info-color`) classes that are consistent in Spectre.css naming convention, but
they are also `.bg-color-dark` (`$bg-color-dark`), `.bg-color-light` (`$bg-color-light`) that aren't.

```scss
// src/utilities/_colors.scss
/*
  Background colors
*/
// Accent
@include bg-color-variant('.bg-accent', 'accent-color', $accent-color);

// BG core colors
@include bg-color-variant('.bg', 'bg-color', $bg-color);
@include bg-color-variant('.bg-body', 'body-bg-color', $body-bg-color); // ! New background color.
@include bg-color-variant('.bg-color', 'bg-color', $bg-color); // ! Add to have naming consistency.
@include bg-color-variant('.bg-color-light', 'bg-color-light', $bg-color-light);
@include bg-color-variant('.bg-color-dark', 'bg-color-dark', $bg-color-dark);

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

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

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

/*
  Control colors.
*/
@include bg-color-variant('.bg-disabled', 'disabled-color', $disabled-color); // ! New background color.
@include bg-color-variant('.bg-error', 'error-color', $error-color);
@include bg-color-variant('.bg-info', 'info-color', $info-color);
@include bg-color-variant('.bg-success', 'success-color', $success-color);
@include bg-color-variant('.bg-warning', 'warning-color', $warning-color);

/*
  Gray colors.
*/
@include bg-color-variant('.bg-gray', 'gray-color', $gray-color);
@include bg-color-variant('.bg-gray-dark', 'gray-color-dark', $gray-color-dark);
@include bg-color-variant('.bg-gray-light', 'gray-color-light', $gray-color-light);

// Link colors.
@include bg-color-variant('.bg-link', 'link-color', $link-color); // ! New background color.
@include bg-color-variant('.bg-link-dark', 'link-color-dark', $link-color-dark); // ! New background color.
@include bg-color-variant('.bg-link-light', 'link-color-light', $link-color-light); // ! New background color.

// Other colors.
@include bg-color-variant('.bg-code', 'code-color'); // ! New background class.
@include bg-color-variant('.bg-highlight', 'highlight-color'); // ! New background class.
```

### Label colors

Label color variants are included by using [`label-class-variant()`](#label-class-variant) mixin in the `.label` class as its extension.

```scss
// src/_labels.scss
.label {
  // Label colors
  @include label-class-variant($name: 'accent', $color: 'light-color', $bg-color: 'accent-color'); // ! New label color variant.
  @include label-class-variant($name: 'dark', $color: 'light-color', $bg-color: 'dark-color'); // ! New label color variant.
  @include label-class-variant($name: 'light', $color: 'dark-color', $bg-color: 'light-color'); // ! New label color variant.
  @include label-class-variant($name: 'primary', $color: 'light-color', $bg-color: 'primary-color');
  @include label-class-variant($name: 'secondary', $color: 'primary-color', $bg-color: 'secondary-color');

  // Label control colors
  @include label-class-variant($name: 'disabled', $color: 'disabled-color', $bg-color: 'disabled-color'); // ! New label color variant.
  @include label-class-variant($name: 'error', $color: 'light-color', $bg-color: 'error-color');
  @include label-class-variant($name: 'info', $color: 'info-color', $bg-color: 'info-color'); // ! New label color variant.
  @include label-class-variant($name: 'success', $color: 'light-color', $bg-color: 'success-color');
  @include label-class-variant($name: 'warning', $color: 'light-color', $bg-color: 'warning-color');
}
```

### Text colors

```scss
// src/utilities/_colors.scss
/*
  Text colors
*/
@include text-color-variant('.text-body-font', 'body-font-color'); // ! New text color. It's an old .text-dark

// Shades.
@include text-color-variant('.text-dark', 'dark-color');
@include text-color-variant('.text-light', 'light-color');

// Gray colors.
@include text-color-variant('.text-gray', 'gray-color');
@include text-color-variant('.text-gray-dark', 'gray-color-dark'); // ! New text color.
@include text-color-variant('.text-gray-light', 'gray-color-light'); // ! New text color.

// Link colors.
@include text-color-variant('.text-link', 'link-color'); // ! New text color.
@include text-color-variant('.text-link-dark', 'link-color-dark'); // ! New text color.
@include text-color-variant('.text-link-light', 'link-color-light'); // ! New text color.

@include text-color-variant('.text-primary', 'primary-color');
@include text-color-variant('.text-primary-dark', 'primary-color-dark'); // ! New text color.
@include text-color-variant('.text-primary-light', 'primary-color-light'); // ! New text color.

@include text-color-variant('.text-secondary', 'secondary-color-dark');
@include text-color-variant('.text-secondary-dark', 'secondary-color-dark'); // ! New text color.
@include text-color-variant('.text-secondary-light', 'secondary-color-light'); // ! New text color.

// Control colors.
@include text-color-variant('.text-disabled', 'disabled-color'); // ! New text color.
@include text-color-variant('.text-error', 'error-color');
@include text-color-variant('.text-info', 'info-color'); // ! New text color.
@include text-color-variant('.text-success', 'success-color');
@include text-color-variant('.text-warning', 'warning-color');

// Other colors.
@include text-color-variant('.text-code', 'code-color'); // ! New text color.
@include text-color-variant('.text-highlight', 'highlight-color'); // ! New text color.
```

### Toast colors

Toast color variants are included by using [`toast-class-variant()`](#toast-class-variant) mixin in the `.toast` class as its extension.

```scss
// src/_toasts.scss
.toast {
  @include toast-class-variant($name: 'accent', $color: 'accent-color'); // ! New toast variant.
  @include toast-class-variant($name: 'disabled', $color: 'disabled-color'); // ! New toast variant.
  @include toast-class-variant($name: 'error', $color: 'error-color');
  @include toast-class-variant($name: 'gray', $color: 'gray-color'); // ! New toast variant.
  @include toast-class-variant($name: 'gray-dark', $color: 'gray-color-dark'); // ! New toast variant.
  @include toast-class-variant($name: 'gray-light', $color: 'gray-color-light'); // ! New toast variant.
  @include toast-class-variant($name: 'info', $color: 'info-color'); // ! New toast variant.
  @include toast-class-variant($name: 'light', $color: 'light-color'); // ! New toast variant.
  @include toast-class-variant($name: 'primary', $color: 'primary-color');
  @include toast-class-variant($name: 'secondary', $color: 'secondary-color'); // ! New toast variant.
  @include toast-class-variant($name: 'success', $color: 'success-color');
  @include toast-class-variant($name: 'warning', $color: 'warning-color');
}
```

## Sass functions/mixins

### `box-shadow-side()`

The mixin includes the `box-shadow` of the specified side, size, and color. The side can be `bottom`, `left`, `right`, `top`, size default is `10px` and color default is `gray-color`.

```scss
@mixin box-shadow-side($side, $size: 10px, $color: 'gray-color') {
  @if $side == right {
    // Right side.
    box-shadow: $size 0 $size ($size * -1) color($color);
  } @else if $side == left {
    // Left side.
    box-shadow: ($size * -1) 0 $size ($size * -1) color($color);
  } @else if $side == bottom {
    // Bottom side.
    box-shadow: 0 $size $size ($size * -1) color($color);
  } @else if $side == top {
    // Top side.
    box-shadow: 0 ($size * -1) $size ($size * -1) color($color);
  } @else {
    @error "Unknown side #{$side}.";
  }
}
```

### `color()`

The function `color()` returns the [hsla](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsla) color from a CSS variable of the given `$name`.

```scss
@function color(
  $name,
  $hue: 0deg,
  $lightness: 0%,
  $saturation: 0%,
  $alpha: 1,
  $prefix: $var-prefix
) {
  @return hsla(
    calc(var(--#{$prefix}-#{$name}-h) + #{$hue}),
    calc(var(--#{$prefix}-#{$name}-s) + #{$saturation}),
    calc(var(--#{$prefix}-#{$name}-l) + #{$lightness}),
    calc(var(--#{$prefix}-#{$name}-a) * #{$alpha})
  );
}
```

### `get-var()`

The function returns the CSS [var function](https://developer.mozilla.org/en-US/docs/Web/CSS/var) or [calc function](https://developer.mozilla.org/en-US/docs/Web/CSS/calc) with the specified name, prefix, optional suffix, or unit. Unit is used for variables with a separated unit from the value.

```scss
@function get-var(
  $name,
  $prefix: $var-prefix,
  $suffix: '',
  $unit: 0
) {
  @if string.length($suffix) > 0 {
    @if $unit == 1 {
      @return calc(var(--#{$prefix}-#{$name}-#{$suffix}) * var(--#{$prefix}-#{$name}-unit));
    } @else {
      @return var(--#{$prefix}-#{$name}-#{$suffix});
    }
  } @else {
    @if $unit == 1 {
      @return calc(var(--#{$prefix}-#{$name}) * var(--#{$prefix}-#{$name}-unit));
    } @else {
      @return var(--#{$prefix}-#{$name});
    }
  }
}
```

### `label-class-variant()`

The mixin includes an extending class of name prefixed with `label-` with the given color `$name` that includes a label variant of the given `$color` and `$bg-color`.

```scss
@mixin label-class-variant(
  $name: 'light',
  $color: 'light-color',
  $bg-color: 'primary-color',
) {
  &.label-#{$name} {
    @include label-variant($color, $bg-color);
  }
}
```

### `set-var()`

The mixin `set-var()` defines the CSS variable with a specified name, value, prefix, and optional suffix. By default argument prefix is set to `$var-prefix`.

```scss
// The mixin defines a variable with a specified prefix.
// Set Spectre CSS variable.
@mixin set-var($name, $value: '', $prefix: $var-prefix, $suffix: '') {
  @if string.length($suffix) > 0 {
    --#{$prefix}-#{$name}-#{$suffix}: #{$value};
  } @else {
    --#{$prefix}-#{$name}: #{$value};
  }
}
```

### `var-negative()`

The function `var-negative()` returns CSS [calc function](https://developer.mozilla.org/en-US/docs/Web/CSS/calc) with the given `$value` multiplied by `-1`.

```scss
@function var-negative($value) {
  @return calc((#{$value}) * -1);
}
```

### `toast-class-variant()`

The mixin includes an extension class of name prefixed with `toast-` with a given color `$name` that includes a toast variant of the given `$color`.

```scss
@mixin toast-class-variant($name: 'dark', $color: 'dark-color') {
  &.toast-#{$name} {
    @include toast-variant($color);
  }
}
```

## Helper class

There is a temporary class to help handle CSS variables `CssPropertyColor` and here is an example usage of it:

First, you need to initialize the color you want to handle.

```typescript
import { CssPropertyColor } from '@angular-package/spectre.css';

const primary = new CssPropertyColor(
  'primary', // Name of the color in the CSS variable --s-primary, `color` is added automatically.
  's' // Prefix s in the CSS variable --s
);
```

Get the hex of the `primary` color:

```typescript
import { CssPropertyColor } from '@angular-package/spectre.css';

const primary = new CssPropertyColor(
  'primary', // Name of the color in the CSS variable --s-primary, `color` is added automatically.
  's' // Prefix s in the CSS variable --s
);

console.log(primary.getHex()); // #5755d9

// Get the shade `light` of the `primary` color.
console.log(primary.getHex('light')); // #6362dc

// Get the shade `dark` of the `primary` color.
console.log(primary.getHex('dark')); // #4b48d6
```

Set the color dynamically in the spectre.css:

```typescript
import { CssPropertyColor } from '@angular-package/spectre.css';

const primary = new CssPropertyColor(
  'primary', // Name of the color in the CSS variable --s-primary, `color` is added automatically.
  's' // Prefix s in the CSS variable --s
);

primary.setHex('#aaaaaa');

console.log(primary.getHex()); // #aaaaaa

// Get the shade `light` of the `primary` color.
console.log(primary.getHex('light')); // #b2b2b2

// Get the shade `dark` of the `primary` color.
console.log(primary.getHex('dark')); // #a2a2a2
```

It's possible to change the shade of the color:

```typescript
import { CssPropertyColor } from '@angular-package/spectre.css';

const primary = new CssPropertyColor(
  'primary', // Name of the color in the CSS variable --s-primary, `color` is added automatically.
  's' // Prefix s in the CSS variable --s
);

primary.setHex('#aaaaaa', 'light');
console.log(primary.getHex('light')); // #aaaaaa
```

with the CSS variable result:

```css
// style.attribute
--s-primary-color-light-h: 0deg;
--s-primary-color-light-l: 66.6667%;
--s-primary-color-light-s: 0%;
```

## Documentation and examples

### Elements

- [Typography](https://picturepan2.github.io/spectre/elements/typography.html)
- [Tables](https://picturepan2.github.io/spectre/elements/tables.html)
- [Buttons](https://picturepan2.github.io/spectre/elements/buttons.html)
- [Forms](https://picturepan2.github.io/spectre/elements/forms.html)
- [Icons.css](https://picturepan2.github.io/icons.css) - CSS ONLY
- [Labels](https://picturepan2.github.io/spectre/elements/labels.html)
- [Code](https://picturepan2.github.io/spectre/elements/code.html)
- [Media](https://picturepan2.github.io/spectre/elements/media.html)

### Layout

- [Flexbox grid](https://picturepan2.github.io/spectre/layout/grid.html)
- [Responsive](https://picturepan2.github.io/spectre/layout/responsive.html)
- [Hero](https://picturepan2.github.io/spectre/layout/hero.html)
- [Navbar](https://picturepan2.github.io/spectre/layout/navbar.html)

### Components

- [Accordions](https://picturepan2.github.io/spectre/components/accordions.html)
- [Avatars](https://picturepan2.github.io/spectre/components/avatars.html)
- [Badges](https://picturepan2.github.io/spectre/components/badges.html)
- [Breadcrumbs](https://picturepan2.github.io/spectre/components/breadcrumbs.html)
- [Bars](https://picturepan2.github.io/spectre/components/bars.html)
- [Cards](https://picturepan2.github.io/spectre/components/cards.html)
- [Chips](https://picturepan2.github.io/spectre/components/chips.html)
- [Empty states](https://picturepan2.github.io/spectre/components/empty.html)
- [Menu](https://picturepan2.github.io/spectre/components/menu.html)
- [Nav](https://picturepan2.github.io/spectre/components/nav.html)
- [Modals](https://picturepan2.github.io/spectre/components/modals.html)
- [Pagination](https://picturepan2.github.io/spectre/components/pagination.html)
- [Panels](https://picturepan2.github.io/spectre/components/panels.html)
- [Popovers](https://picturepan2.github.io/spectre/components/popovers.html)
- [Steps](https://picturepan2.github.io/spectre/components/steps.html)
- [Tabs](https://picturepan2.github.io/spectre/components/tabs.html)
- [Tiles](https://picturepan2.github.io/spectre/components/tiles.html)
- [Toasts](https://picturepan2.github.io/spectre/components/toasts.html)
- [Tooltips](https://picturepan2.github.io/spectre/components/tooltips.html)

### Utilities

- [Utilities](https://picturepan2.github.io/spectre/utilities.html) - colors, display, divider, loading, position, shapes and text utilities

### Experimentals

- [360-Degree Viewer](https://picturepan2.github.io/spectre/experimentals/viewer-360.html) - CSS ONLY
- [Autocomplete](https://picturepan2.github.io/spectre/experimentals/autocomplete.html)
- [Calendars](https://picturepan2.github.io/spectre/experimentals/calendars.html)
- [Carousels](https://picturepan2.github.io/spectre/experimentals/carousels.html) - CSS ONLY
- [Comparison Sliders](https://picturepan2.github.io/spectre/experimentals/comparison.html) - CSS ONLY
- [Filters](https://picturepan2.github.io/spectre/experimentals/filters.html) - CSS ONLY
- [Meters](https://picturepan2.github.io/spectre/experimentals/meters.html)
- [Off-canvas](https://picturepan2.github.io/spectre/experimentals/off-canvas.html) - CSS ONLY
- [Parallax](https://picturepan2.github.io/spectre/experimentals/parallax.html) - CSS ONLY
- [Progress](https://picturepan2.github.io/spectre/experimentals/progress.html)
- [Sliders](https://picturepan2.github.io/spectre/experimentals/sliders.html)
- [Timelines](https://picturepan2.github.io/spectre/experimentals/timelines.html)

## Browser support

Spectre uses [Autoprefixer](https://github.com/postcss/autoprefixer) to make most styles compatible with earlier browsers and [Normalize.css](https://necolas.github.io/normalize.css/) for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:

- Chrome (LAST 4)
- Microsoft Edge (LAST 4)
- Firefox (EXTENDED SUPPORT RELEASE)
- Safari (LAST 4)
- Opera (LAST 4)
- Internet Explorer 10+

Spectre supports Internet Explorer 10+, but some HTML5 and CSS3 features are not perfectly supported by Internet Explorer.

Designed and built with ♥ by [Yan Zhu](https://twitter.com/picturepan2). Feel free to submit a pull request. Help is always appreciated.

<br>

## Changelog

To read it, click on the [CHANGELOG.md](https://github.com/angular-package/spectre.css/blob/master/CHANGELOG.md) link.

<br>

## GIT

### Commit

* [AngularJS Git Commit Message Conventions][git-commit-angular]
* [Karma Git Commit Msg][git-commit-karma]
* [Conventional Commits][git-commit-conventional]

### Versioning

[Semantic Versioning 2.0.0][git-semver]

**Given a version number MAJOR.MINOR.PATCH, increment the:**

* MAJOR version when you make incompatible API changes,
* MINOR version when you add functionality in a backwards-compatible manner, and
* PATCH version when you make backwards-compatible bug fixes.

Additional labels for pre-release and build metadata are available as extensions to the MAJOR.MINOR.PATCH format.

**FAQ**
How should I deal with revisions in the 0.y.z initial development phase?

> The simplest thing to do is start your initial development release at 0.1.0 and then increment the minor version for each subsequent release.

How do I know when to release 1.0.0?

> If your software is being used in production, it should probably already be 1.0.0. If you have a stable API on which users have come to depend, you should be 1.0.0. If you’re worrying a lot about backwards compatibility, you should probably already be 1.0.0.

## License

MIT © angular-package ([license][spectre.css-license])
<br>
MIT © Spectre.css ([license](https://github.com/picturepan2/spectre/blob/master/LICENSE))
<br>
MIT © Yan Zhu ([license](https://github.com/picturepan2/spectre/blob/master/LICENSE))

<!-- Funding -->
[github-badge-sponsor]: https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&link=https://github.com/sponsors/angular-package
[github-sponsor-link]: https://github.com/sponsors/angular-package
[patreon-badge]: https://img.shields.io/endpoint.svg?url=https%3A%2F%2Fshieldsio-patreon.vercel.app%2Fapi%3Fusername%3Dsciborrudnicki%26type%3Dpatrons&style=flat
[patreon-link]: https://patreon.com/sciborrudnicki

[angulario]: https://angular.io
[skeleton]: https://github.com/angular-package/skeleton

<!-- Update status -->
[experimental]: https://img.shields.io/badge/-experimental-orange
[fix]: https://img.shields.io/badge/-fix-red
[new]: https://img.shields.io/badge/-new-green
[update]: https://img.shields.io/badge/-update-red

<!-- Discord -->
[discord-badge]: https://img.shields.io/discord/925168966098386944
[discord-channel]: https://discord.com/channels/925168966098386944/925168966098386948

<!-- Gitter -->
[gitter-badge]: https://badges.gitter.im/angularpackage/Lobby.svg
[gitter-chat]: https://gitter.im/angularpackage/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge

<!-- Twitter -->
[twitter-badge]: https://img.shields.io/twitter/url?style=social&label=Follow%20%40angularpackage&url=https%3A%2F%2Ftwitter.com%2Fangularpackage
[twitter-follow]: https://twitter.com/angularpackage

<!-- GIT -->
[git-semver]: http://semver.org/

<!-- GIT: commit -->
[git-commit-angular]: https://gist.github.com/stephenparish/9941e89d80e2bc58a153
[git-commit-karma]: http://karma-runner.github.io/0.10/dev/git-commit-msg.html
[git-commit-conventional]: https://www.conventionalcommits.org/en/v1.0.0/

<!-- This package: spectre.css  -->
  <!-- GitHub: badges -->
  [spectre.css-badge-issues]: https://img.shields.io/github/issues/angular-package/spectre.css
  [spectre.css-badge-forks]: https://img.shields.io/github/forks/angular-package/spectre.css
  [spectre.css-badge-stars]: https://img.shields.io/github/stars/angular-package/spectre.css
  [spectre.css-badge-license]: https://img.shields.io/github/license/angular-package/spectre.css
  <!-- GitHub: badges links -->
  [spectre.css-issues]: https://github.com/angular-package/spectre.css/issues
  [spectre.css-forks]: https://github.com/angular-package/spectre.css/network
  [spectre.css-license]: https://github.com/angular-package/spectre.css/blob/master/LICENSE
  [spectre.css-stars]: https://github.com/angular-package/spectre.css/stargazers
<!-- This package -->
  [spectre.css-github-changelog]: https://github.com/angular-package/spectre.css/blob/main/CHANGELOG.md

<!-- Package: spectre.css -->
  <!-- npm -->
  [spectre.css-npm-badge-svg]: https://badge.fury.io/js/%40angular-package%2Fspectre.css.svg
  [spectre.css-npm-badge-png]: https://badge.fury.io/js/%40angular-package%2Fspectre.css.png
  [spectre.css-npm-badge]: https://badge.fury.io/js/%40angular-package%2Fspectre.css
  [spectre.css-npm-readme]: https://www.npmjs.com/package/@angular-package/spectre.css#readme

  <!-- GitHub -->
  [spectre.css-github-readme]: https://github.com/angular-package/spectre.css#readme