# Introduction

Technical documentation

## angular-package/spectre.css

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

{% embed url="<https://picturepan2.github.io/spectre/>" %}
Original Spectre.css
{% endembed %}

> 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**, as its modified version [@angular-package/spectre.css](https://www.npmjs.com/package/@angular-package/spectre.css), even for **commercial use** under the [**MIT license**](https://docs.angular-package.dev/mit-license).

A demonstration working on the [@angular](https://angular.io) in a user interface form is available [here](https://angular-package.dev/ui-kit/).

{% embed url="<https://angular-package.dev>" %}

If you enjoy it, please consider [donating via Paypal](https://www.paypal.me/picturepan2) or via [Patreon](https://www.patreon.com/spectrecss) for the [Yan Zhu](https://twitter.com/picturepan2), and consider donating via [fiat](/donate/usd-fiat) or [cryptocurrency](/donate/thb-cryptocurrency) the [@angular-package](https://twitter.com/angularpackage) for further development. ♥

{% embed url="<https://github.com/sponsors/angular-package>" %}


# ❤ Benefits

Benefits

<mark style="color:green;">**✓**</mark> **Designed** with <mark style="color:red;">❤</mark> by [Yan Zhu](https://twitter.com/picturepan2).

<mark style="color:green;">**✓**</mark> **Maintained** with <mark style="color:red;">❤</mark> by the [@angular-package](https://twitter.com/angularpackage)

<mark style="color:green;">**✓**</mark> **Built** with the [@angular](https://angular.io/) project and sass compiler

<mark style="color:green;">**✓**</mark> **Lightweight** (\~**20kB** min+zipped) starting point for your projects

<mark style="color:green;">**✓**</mark> **Flexbox**-based, responsive, and mobile-friendly layout

<mark style="color:green;">**✓**</mark> **Elegantly** designed and developed elements and components

<mark style="color:green;">**✓**</mark> Ready for [@import](https://sass-lang.com/documentation/at-rules/import) remove: rewritten with the [@use](https://sass-lang.com/documentation/at-rules/use) and [@forward](https://sass-lang.com/documentation/at-rules/forward)

<mark style="color:green;">**✓**</mark> Rewritten with the **CSS variables**: SCSS variables are used to initialize CSS variables

<mark style="color:green;">**✓**</mark> **Customizable** CSS variable names **prefix**

<mark style="color:green;">**✓**</mark> Colors are injected in [**hsla**](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsla) form, split into **four** CSS variables, where variable name with suffix `h` indicates hue, `s` saturation, `l` lightness, and `a` alpha

<mark style="color:green;">**✓**</mark> [@angular](https://angular.io/) components and modules prepared (will be available soon)

<mark style="color:green;">**✓**</mark> Free for **commercial** use under [MIT license](https://docs.angular-package.dev/mit-license)


# General concepts

General @angular-package concepts

## ❤

With love, passion.

### ⚠

The warning sign indicates the element is **not** **available, not documented** or **deprecated**.

### ★

The element starred as most **useful**.

### **Checks**

It's to **check** the provided value to be the same as **expected**.

### Type guard (constrain)

Constrains the parameter type to not let input unexpected value in the code editor.

### **Guard**

It's a **combination** of both above, **constrains** the type of the parameter in the **code editor**, and checks its provided argument.

### **Creates**

Creates a new instance of an object and returns it.

### **Defines**

Returns defined value from a method of an object.

Defines a new value in an object and returns it.

Defines new or updates existing property in an object and returns an object.

### **Gets**

Returns a value from an object.

### **Sets**

Adds or updates an element with a specified key and a value to an object and returns an object.

### Intuitive

Having the ability to know or understand things without any proof or evidence. E.g. some of the accessor names indicate directly its role.

### General

Relating to the main or major parts of something rather than the details. E.g. some of the accessor names don't indicate the specific role in the object.

{% embed url="<https://docs.angular-package.dev/v/designing/definitions>" %}
More definitions
{% endembed %}


# Skeleton

Base skeleton library

The package was generated by the [ skeleton workspace](https://github.com/angular-package/skeleton) which was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.&#x20;

Copy package to the `packages/spectre.css` folder of the [library skeleton](https://github.com/angular-package/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`.

### **Running unit tests**

Before the test can be performed install [`@angular-package/testing`](https://github.com/angular-package/testing) and [`@angular-package/type`](https://type.angular-package.dev/) with command:&#x20;

```bash
npm i @angular-package/testing @angular-package/type --no-save
```

Run `ng test spectre.css` to execute the unit tests via [Karma](https://karma-runner.github.io).

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


# Installation

@angular-package/spectre.css installation

There are 4 ways to get started with Spectre CSS framework in your projects. You can either install **manually**, from **CDN** or via [NPM](https://www.npmjs.com/), or [yarn](https://yarnpkg.com/getting-started/install).

## Install

### Manually

Download the compiled and minified [Spectre CSS file](https://github.com/angular-package/spectre.css/releases) (core \~**30**kB min+tar):

[Download Spectre.css](https://github.com/angular-package/spectre.css/releases)

Include `spectre.min.css` located in **`/dist`** in your website or Web app . Also, you can add `spectre-icons.min.css` and `spectre-exp.min.css` accordingly.

```html
<link rel="stylesheet" href="spectre.min.css">
<link rel="stylesheet" href="spectre-exp.min.css">
<link rel="stylesheet" href="spectre-icons.min.css">
```

### From CDN

Alternatively, you can use the [unpkg](https://unpkg.com/) to load compiled Spectre.css.

```html
<link rel="stylesheet" href="https://unpkg.com/@angular-package/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href="https://unpkg.com/@angular-package/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet" href="https://unpkg.com/@angular-package/spectre.css/dist/spectre-icons.min.css">
```

### With NPM

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

### With Yarn

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


# Usage

@angular-package/spectre.css public API

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

// Experimentals.
@use 'node_modules/@angular-package/spectre.css/spectre-exp' as *;

// Icons.
@use 'node_modules/@angular-package/spectre.css/spectre-icons' as *;

// Define CSS 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 *;
```


# Color scheme

The CSS [`color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme) property is set to `normal` in both [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) and [`:host`](https://developer.mozilla.org/en-US/docs/Web/CSS/:host) elements.

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


# CSS variable name

Spectre CSS variables are defined in the same pattern as SCSS variables to have naming consistency, but with additional customizable prefix.

### Structure

In general CSS variable name structure is defined as follows.

```scss
--#{$var-prefix}-#{$name}: #{$value}
```

It's possible to customize the CSS variables' names with the SCSS variable `$var-prefix`, which by default is set to **`s`**.

### `$var-prefix`

The SCSS `$var-prefix` variable is responsible for the prefix of Spectre CSS variables.

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

```scss
$var-prefix: 's';
```

{% endcode %}

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

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

// Change the $var-prefix
$var-prefix: 'spectre';

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


# Using CSS variables

To inject prefixed CSS variables with the help comes [`get-var()`](/function/var/get-var) function, which takes four parameters: `$name` `$prefix` `$suffix` and `$unit`.

There is only `$name` parameter **required**, and the `$prefix` default value is equal to [`$var-prefix`](/variables/css-variable-name#usdvar-prefix), `$suffix` default value is an empty `string`, and `$unit` default value is set to `0`.&#x20;

The function returns [`var()`](https://developer.mozilla.org/en-US/docs/Web/CSS/var) CSS function with the CSS variable of the `$name` parameter with defaults or returns [`calc()`](https://developer.mozilla.org/en-US/docs/Web/CSS/calc) CSS function that multiplies by one unit CSS variable value of the same name.

For example, there is SCSS variable `$layout-spacing` equal to `0.4rem` with equivalent prefixed CSS variable `--s-layout-spacing` equal to `0.4` without `rem` unit to have the ability to multiply it by the `px` unit value and It's defined as follows.

```css
// layout-spacing
--s-layout-spacing: 0.4;
--s-layout-spacing-lg: 0.8;
--s-layout-spacing-sm: 0.2;
--s-layout-spacing-unit: 1rem;
```

To inject into any style the `layout-spacing` CSS variable value there is a need to provide `$unit` parameter to **`1`**.

```scss
// Get function.
@use 'node_modules/@angular-package/spectre.css/src/functions/get-var' as *;

// Inject `get-var()` simply by given `$name` parameter and `$unit`.
.layout-spacing {
    margin: get-var($name: 'layout-spacing', $unit: 1);
}

// Inject `get-var()` with the smaller spacing without `$name` parameter but
// with -sm added.
.layout-spacing-sm {
    margin: get-var('layout-spacing-sm', $unit: 1);
}

// Inject `get-var()` with the larger spacing by using `$suffix` parameter equal
// to `lg`.
.layout-spacing-lg {
    margin: get-var('layout-spacing', $unit: 1, $suffix: `lg`);
}
```


# Colors


# Settable SCSS

SCSS variable colors

Settable SCSS colors with a specified hex on which some others are based.

### Core colors

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

```scss
/*
  Core colors.
*/
// Accent.
$accent-color: #9932CC !default; // --#{$var-prefix}-accent-color.

// Dark.
$dark-color: #303742 !default; // --#{$var-prefix}-dark-color.

// Light.
$light-color: #fff !default; // --#{$var-prefix}-light-color.

// Primary.
$primary-color: #5755d9 !default; // --#{$var-prefix}-primary-color.
```

{% endcode %}

### Background colors

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

```scss
/*
  Background colors.
*/
$bg-color-light: $light-color !default; // --#{$var-prefix}-bg-color-light.
```

{% endcode %}

### Control colors

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

```scss
/*
  Control colors.
*/
$disabled-color: $bg-color-dark !default; // --#{$var-prefix}-disabled-color.
$error-color: #e85600 !default; // --#{$var-prefix}-error-color.
$info-color: #d9edf7 !default; // --#{$var-prefix}-info-color.
$success-color: #32b643 !default; // --#{$var-prefix}-success-color.
$warning-color: #ffb700 !default; // --#{$var-prefix}-warning-color.
```

{% endcode %}

### Link colors

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

```scss
/*
  Link colors.
*/
$link-color: $primary-color !default; // --#{$var-prefix}-link-color.
```

{% endcode %}

### Other colors

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

```scss
/*
  Other colors.
*/
$code-color: #d73e48 !default; // --#{$var-prefix}-code-color.
$highlight-color: #ffe9b3 !default; // --#{$var-prefix}-highlight-color.
```

{% endcode %}

### Body colors

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

```scss
/*
  Body colors.
*/
$body-bg-color: $bg-color-light !default; // --#{$var-prefix}-body-bg-color.
```

{% endcode %}


# Based on settable SCSS

SCSS variable colors

Colors that are based on the [settable](/variables/colors/settable-scss) colors.

### Core colors

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

```scss
/*
  Core colors.
*/
// Primary.
$primary-color-dark: darken($primary-color, 3%) !default; // --#{$var-prefix}-primary-color-dark.
$primary-color-light: lighten($primary-color, 3%) !default; // --#{$var-prefix}-primary-color-light.

// Secondary.
$secondary-color: lighten($primary-color, 37.5%) !default; // --#{$var-prefix}-secondary-color.
$secondary-color-dark: darken($secondary-color, 3%) !default; // --#{$var-prefix}-secondary-color-dark.
$secondary-color-light: lighten($secondary-color, 3%) !default; // --#{$var-prefix}-secondary-color-light.
```

{% endcode %}

### Gray colors

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

```scss
/*
  Gray colors.
*/
$gray-color: lighten($dark-color, 55%) !default; // --#{$var-prefix}-gray-color.
$gray-color-dark: darken($gray-color, 30%) !default; // --#{$var-prefix}-gray-color-dark.
$gray-color-light: lighten($gray-color, 20%) !default; // --#{$var-prefix}-gray-color-light.
```

{% endcode %}

### Background colors

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

```scss
/*
  Background colors.
*/
$bg-color: lighten($dark-color, 75%) !default; // --#{$var-prefix}-bg-color.
$bg-color-dark: darken($bg-color, 3%) !default; // --#{$var-prefix}-bg-color-dark.
```

{% endcode %}

### Border colors

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

```scss
/*
  Border colors.
*/
$border-color: lighten($dark-color, 65%) !default; // --#{$var-prefix}-border-color.
$border-color-dark: darken($border-color, 10%) !default; // --#{$var-prefix}-border-color-dark.
$border-color-light: lighten($border-color, 8%) !default; // --#{$var-prefix}-border-color-light.
```

{% endcode %}

### Link colors

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

```scss
// Link colors.
$link-color-dark: darken($link-color, 10%) !default; // --#{$var-prefix}-link-color-dark.
$link-color-light: lighten($link-color, 10%) !default; // --#{$var-prefix}-link-color-light.
```

{% endcode %}

### Body colors

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

```scss
/*
  Body colors.
*/
$body-font-color: lighten($dark-color, 5%) !default; // --#{$var-prefix}-body-font-color.
```

{% endcode %}


# CSS variable color

### Structure and defining

Each **hex** color is in [**`hsla()`**](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsla) form defined by the [`define-color()`](/mixin/var/define-color) mixin, split into **four** CSS variables, where suffix `h` indicates hue, `s` saturation, `l` lightness and `a` alpha.

The single CSS color is defined as follows.

```css
--#{$var-prefix}-#{$name}-color-h: hue($color)
--#{$var-prefix}-#{$name}-color-s: saturation($color)
--#{$var-prefix}-#{$name}-color-l: lightness($color)
--#{$var-prefix}-#{$name}-color-a: alpha($color)
```

The SCSS [`$var-prefix`](/variables/css-variable-name#usdvar-prefix) variable is to make CSS variable **unique**, `$name` is the color name and `$color` is the hex color to obtain hue, saturation, lightness and alpha.

{% hint style="info" %}
It's possible to customize the CSS variables' names with the SCSS variable [`$var-prefix`](/variables/css-variable-name#usdvar-prefix), which by default is set to **`s`**.
{% endhint %}

For example, the **`primary-color`** is built from the CSS variables based on hex **`#5755d9`**.

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

It is core color and it's defined in the [`_core-colors.scss`](https://github.com/angular-package/spectre.css/blob/master/src/css-variables/_core-colors.scss) file.

```scss
@use '../mixins/define-color' as *;
@use '../variables' as *;

:root, :host {
  // Primary.
  @include define-color('primary-color', $primary-color); // #5755d9
  @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%)
}
```

Each color that is based on settable color is defined by the mixin [`define-color-based-on()`](/mixin/var/define-color-based-on), and it's also split into **four** CSS variables, which values refer by using [`var()`](https://developer.mozilla.org/en-US/docs/Web/CSS/var) CSS function to settable colors CSS property names, where suffix `h` indicates hue, `s` saturation, `l` lightness and `a` alpha.

For example `secondary-color` that based on `primary-color` is defined in both [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) and [`:host`](https://developer.mozilla.org/en-US/docs/Web/CSS/:host) elements and built from the CSS variables as follows.

```css
--s-secondary-color-h: var(--s-primary-color-h);
--s-secondary-color-s: var(--s-primary-color-s);
--s-secondary-color-l: calc(var(--s-primary-color-l) + 37.5%);
--s-secondary-color-a: var(--s-primary-color-a);
```

CSS variables that are based on others are also defined in both [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) and [`:host`](https://developer.mozilla.org/en-US/docs/Web/CSS/:host) elements, and `secondary-color` is also in the [`_core-colors.scss`](https://github.com/angular-package/spectre.css/blob/master/src/css-variables/_core-colors.scss) file.

```scss
@use '../mixins/define-color-based-on' as *;

:root, :host {
  // 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;
}
```


# Using CSS variable color

To easily use color defined in **four** CSS variables with the help comes [`color()`](/function/color/color) function, which takes **six** parameters: `$name`, `$hue`, `$lightness`, `$saturation`, `$alpha`, and `$prefix`, and returns color in [**hsla()**](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsla) form.

There is only `$name` parameter **required**, and the `$hue` `$lightness` `$saturation` default values are set to `0`, `$alpha` default value is set to `1`, and `$prefix` default value is equal to [`$var-prefix`](/variables/css-variable-name#usdvar-prefix). So, it's very easy to insert the color into any style and change the default value of the CSS variable color, for example `primary-color` or `primary-color-dark` can be inserted as follows.

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

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

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

With the optional parameters, it's possible to inject `primary-color` lighter or darker by **`30%`**, and it's useful, especially on mixing background with font color, and it works like [`darken()`](https://sass-lang.com/documentation/modules/color#darken) and [`lighten()`](https://sass-lang.com/documentation/modules/color#lighten), but with the ability to change the value on the fly cause of the CSS variables.

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

.primary-color-lighter {
  background: color('primary-color', $lightness: -30%);
  color: color('primary-color', $lightness: 30%);
}

.primary-color-darker {
  background: color('primary-color', $lightness: -30%);
}
```

There are other SASS variables besides colors, that have equivalent CSS variables and default prefix **`s`**.


# Color code

After reading [Settable SCSS](/variables/colors/settable-scss) and [Based on settable SCSS](/variables/colors/based-on-settable-scss) section, I know what color names `Spectre.css` has, and I see it would be good to have a key or code that I can refer to while working with them. I'll remove the `color`, and that's it.

## Codes

The first column is the simplified color name - the color code that I want to use to input instead of the full-color name, which indicates the SASS or CSS variable.

### `$accent-color`

| Color name | CSS variable                                                                                |       Hex |
| ---------- | ------------------------------------------------------------------------------------------- | --------: |
| accent     | <p>--s-accent-color-h<br>--s-accent-color-l<br>--s-accent-color-s<br>--s-accent-color-a</p> | `#9932CC` |

### `$primary-color`

| Color name | CSS variable                                                                                    |       Hex |
| ---------- | ----------------------------------------------------------------------------------------------- | --------: |
| primary    | <p>--s-primary-color-h<br>--s-primary-color-s<br>--s-primary-color-l<br>--s-primary-color-a</p> | `#5755D9` |

### `$primary-color-dark`

| Color name   | CSS variable                                                                                                        |     Hex |
| ------------ | ------------------------------------------------------------------------------------------------------------------- | ------: |
| primary-dark | <p>--s-primary-color-dark-h<br>--s-primary-color-dark-l<br>--s-primary-color-dark-s<br>--s-primary-color-dark-a</p> | #4B49D6 |

### `$primary-color-light`

| Color name    | CSS variable                                                                                                            |     Hex |
| ------------- | ----------------------------------------------------------------------------------------------------------------------- | ------: |
| primary-light | <p>--s-primary-color-light-h<br>--s-primary-color-light-l<br>--s-primary-color-light-s<br>--s-primary-color-light-a</p> | #6362DC |

### `$secondary-color`

| Color name | CSS variable                                                                                            |     Hex |
| ---------- | ------------------------------------------------------------------------------------------------------- | ------: |
| secondary  | <p>--s-secondary-color-h<br>--s-secondary-color-l<br>--s-secondary-color-s<br>--s-secondary-color-a</p> | #F1F1FC |

### `$secondary-color-dark`

| Color name     | CSS variable         |     Hex |
| -------------- | -------------------- | ------: |
| secondary-dark | secondary-color-dark | #E5E5F9 |

### `$secondary-color-light`

| Color name      | CSS variable          |     Hex |
| --------------- | --------------------- | ------: |
| secondary-light | secondary-color-light | #FEFEFF |

### `$gray-color`

| Color name | CSS variable |     Hex |
| ---------- | ------------ | ------: |
| gray       | gray-color   | #BCC3CE |

### `$gray-color-dark`

| Color name | CSS variable    |     Hex |
| ---------- | --------------- | ------: |
| gray-dark  | gray-color-dark | #66758C |

### `$gray-color-light`

| Color name | CSS variable     |     Hex |
| ---------- | ---------------- | ------: |
| gray-light | gray-color-light | #F7F8F9 |

### `$bg-color`

| Color name | CSS variable |     Hex |
| ---------- | ------------ | ------: |
| bg         | bg-color     | #F7F8F9 |

### `$bg-color-dark`

| Color name | CSS variable  |     Hex |
| ---------- | ------------- | ------: |
| bg-dark    | bg-color-dark | #EEF0F3 |

### `$bg-color-light`

| Color name | CSS variable   |     Hex |
| ---------- | -------------- | ------: |
| bg-light   | bg-color-light | #FFFFFF |

### `$border-color`

| Color name | CSS variable |     Hex |
| ---------- | ------------ | ------: |
| border     | border-color | #DADEE4 |

### `$border-color-dark`

| Color name  | CSS variable      |     Hex |
| ----------- | ----------------- | ------: |
| border-dark | border-color-dark | #BCC3CE |

### `$border-color-light`

| Color name   | CSS variable       |     Hex |
| ------------ | ------------------ | ------: |
| border-light | border-color-light | #F1F3F5 |

### `$disabled-color`

| Color name     | CSS variable   |     Hex |
| -------------- | -------------- | ------: |
| disabled-color | disabled-color | #EEF0F3 |

### `$error-color`

| Color name  | CSS variable |     Hex |
| ----------- | ------------ | ------: |
| error-color | error-color  | #E85600 |

### `$info-color`

| Color name | CSS variable |     Hex |
| ---------- | ------------ | ------: |
| info-color | info-color   | #D9EDF7 |

### `$success-color`

| Color name    | CSS variable  |     Hex |
| ------------- | ------------- | ------: |
| success-color | success-color | #32B643 |

### `$warning-color`

| Color name    | CSS variable  |     Hex |
| ------------- | ------------- | ------: |
| warning-color | warning-color | #FFB700 |

### `$link-color`

| Color name | CSS variable |     Hex |
| ---------- | ------------ | ------: |
| link       | link-color   | #5755D9 |

### `$link-color-dark`

| Color name | CSS variable    |     Hex |
| ---------- | --------------- | ------: |
| link-dark  | link-color-dark | #302ECD |

### `$link-color-light`

| Color name | CSS variable     |     Hex |
| ---------- | ---------------- | ------: |
| link-light | link-color-light | #807FE2 |

### `$code-color`

| Color name | CSS variable |     Hex |
| ---------- | ------------ | ------: |
| code       | code-color   | #D73E48 |

### `$highlight-color`

| Color name | CSS variable    |     Hex |
| ---------- | --------------- | ------: |
| highlight  | highlight-color | #FFE9B3 |

### `$body-bg-color`

| Color name | CSS variable  |     Hex |
| ---------- | ------------- | ------: |
| body-bg    | body-bg-color | #FFFFFF |

### `$body-font-color`

| Color name | CSS variable    |     Hex |
| ---------- | --------------- | ------: |
| body-font  | body-font-color | #3B4351 |

### `$parallax-fade-color`

| Color name    | CSS variable        | Hex |
| ------------- | ------------------- | --: |
| parallax-fade | parallax-fade-color |   - |

## List

An ordered list of the Spectre.css colors that should be respected to achieve order and naming consistency.

<table><thead><tr><th width="178">Color name</th><th width="199">CSS variable</th><th>SASS variable</th><th>Hex</th></tr></thead><tbody><tr><td>basic</td><td>-</td><td>-</td><td>-</td></tr><tr><td>default</td><td>-</td><td>-</td><td>-</td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td>dark</td><td>dark-color</td><td>$dark-color</td><td>#303742</td></tr><tr><td>light</td><td>light-color</td><td>$light-color</td><td>#FFFFFF</td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td>accent</td><td>accent-color</td><td>$accent-color</td><td>#9932CC</td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td>primary</td><td>primary-color</td><td>$primary-color</td><td>#5755D9</td></tr><tr><td>primary-dark</td><td>primary-color-dark</td><td>$primary-color-dark</td><td>#4B49D6</td></tr><tr><td>primary-light</td><td>primary-color-light</td><td>$primary-color-light</td><td>#6362DC</td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td>secondary</td><td>secondary</td><td>$secondary-color</td><td>#F1F1FC</td></tr><tr><td>secondary dark</td><td>secondary-color-dark</td><td>$secondary-color-dark</td><td>#E5E5F9</td></tr><tr><td>secondary light</td><td>secondary-color-light</td><td>$secondary-color-light</td><td>#FEFEFF</td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td>gray</td><td>gray</td><td>$gray-color</td><td>#BCC3CE</td></tr><tr><td>gray dark</td><td>gray-color-dark</td><td>$gray-color-dark</td><td>#66758C</td></tr><tr><td>gray light</td><td>gray-color-light</td><td>$gray-color-light</td><td>#F7F8F9</td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td>bg</td><td>bg-color</td><td>$bg-color</td><td>#F7F8F9</td></tr><tr><td>bg-dark</td><td>bg-color-dark</td><td>$bg-color-dark</td><td>#EEF0F3</td></tr><tr><td>bg-light</td><td>bg-color-light</td><td>$bg-color-light</td><td>#FFFFFF</td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td>border</td><td>border</td><td>$border-color</td><td>#DADEE4</td></tr><tr><td>border-dark</td><td>border-color-dark</td><td>$border-color-dark</td><td>#BCC3CE</td></tr><tr><td>border-light</td><td>border-color-light</td><td>$border-color-light</td><td>#F1F3F5</td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td>disabled</td><td>disabled-color</td><td>$disabled-color</td><td>#EEF0F3</td></tr><tr><td>error</td><td>error-color</td><td>$error-color</td><td>#E85600</td></tr><tr><td>info</td><td>info-color</td><td>$info-color</td><td>#D9EDF7</td></tr><tr><td>success</td><td>success-color</td><td>$success-color</td><td>#32B643</td></tr><tr><td>warning</td><td>warning-color</td><td>$warning-color</td><td>#FFB700</td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td>link</td><td>link-color</td><td>$link-color</td><td>#5755D9</td></tr><tr><td>link-dark</td><td>link-color-dark</td><td>$link-color-dark</td><td>#302ECD</td></tr><tr><td>link-light</td><td>link-color-light</td><td>$link-color-light</td><td>#807FE2</td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td>code</td><td>code-color</td><td>$code-color</td><td>#D73E48</td></tr><tr><td>highlight</td><td>highlight-color</td><td>$highlight-color</td><td>#FFE9B3</td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td>body-bg</td><td>body-bg-color</td><td>$body-bg-color</td><td>#FFFFFF</td></tr><tr><td>body-font</td><td>body-font-color</td><td>$body-font-color</td><td>#3B4351</td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td>parallax-fade</td><td>parallax-fade-color</td><td>$parallax-fade-color</td><td>-</td></tr></tbody></table>


# Other

### Border

SCSS variables.

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

```scss
// Border radius.
$border-radius: $unit-h !default; // --#{$var-prefix}-border-radius.

// Border width.
$border-width: $unit-o !default; // --#{$var-prefix}-border-width.
$border-width-lg: $unit-h !default; // --#{$var-prefix}-border-width-lg.
```

{% endcode %}

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.

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

```scss
// Control size.
$control-size: $unit-9 !default; // --#{$var-prefix}-control-size.
$control-size-sm: $unit-7 !default; // --#{$var-prefix}-control-size-sm.
$control-size-lg: $unit-10 !default; // --#{$var-prefix}-control-size-lg.

// Control padding.
$control-padding-x: $unit-2 !default; // --#{$var-prefix}-control-padding-x.
$control-padding-x-sm: $unit-2 * 0.75 !default; // --#{$var-prefix}-control-padding-x-sm.
$control-padding-x-lg: $unit-2 * 1.5 !default; // --#{$var-prefix}-control-padding-x-lg.
$control-padding-y: ($control-size - $line-height) * 0.5 - $border-width !default; // --#{$var-prefix}-control-padding-y.
$control-padding-y-sm: ($control-size-sm - $line-height) * 0.5 - $border-width !default; // --#{$var-prefix}-control-padding-y-sm.
$control-padding-y-lg: ($control-size-lg - $line-height) * 0.5 - $border-width !default; // --#{$var-prefix}-control-padding-y-lg.

// Control icon.
$control-icon-size: 0.8rem !default; // --#{$var-prefix}-control-icon-size.

// Control width.
$control-width-xs: 180px !default; // --#{$var-prefix}-control-width-xs.
$control-width-sm: 320px !default; // --#{$var-prefix}-control-width-sm.
$control-width-md: 640px !default; // --#{$var-prefix}-control-width-md.
$control-width-lg: 960px !default; // --#{$var-prefix}-control-width-lg.
$control-width-xl: 1280px !default; // --#{$var-prefix}-control-width-xl.
```

{% endcode %}

Equivalent CSS variables with default prefix **`s`**.

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

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

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

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

### Font sizes and line height

SCSS variables.

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

```scss
// Font sizes.
$html-font-size: 20px !default; // --#{$var-prefix}-html-font-size.
$font-size: 0.8rem !default; // --#{$var-prefix}-font-size.
$font-size-sm: 0.7rem !default; // --#{$var-prefix}-font-size-sm.
$font-size-lg: 0.9rem !default; // --#{$var-prefix}-font-size-lg.

// Line height.
$html-line-height: 1.5 !default; // --#{$var-prefix}-html-line-height.
$line-height: 1.2rem !default; // --#{$var-prefix}-line-height.
```

{% endcode %}

Equivalent CSS variables with default prefix **`s`**.

```css
:root, :host {
  // Font size.
  --s-html-font-size: 20px;
  --s-font-size: 0.8rem;
  --s-font-size-sm: 0.7rem;
  --s-font-size-lg: 0.9rem;

  // Line height.
  --s-html-line-height: 1.5;
  --s-line-height: 1.2rem;
}
```

### Layout spacing

SCSS variables.

{% hint style="info" %}
This property is set without a unit to calculate with a different unit (`px`).
{% endhint %}

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

```scss
// Layout spacing.
$layout-spacing: $unit-2 !default; // --#{$var-prefix}-layout-spacing.
$layout-spacing-sm: $unit-1 !default; // --#{$var-prefix}-layout-spacing-sm.
$layout-spacing-lg: $unit-4 !default; // --#{$var-prefix}-layout-spacing-lg.
```

{% endcode %}

Equivalent CSS variables with default prefix **`s`**.

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

### Parallax

SCSS variables.

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

```scss
$parallax-deg: 3deg !default; // --#{$var-prefix}-parallax-deg.
$parallax-offset: 4.5px !default; // --#{$var-prefix}-parallax-offset.
$parallax-offset-z: 50px !default; // --#{$var-prefix}-parallax-offset-z.
$parallax-perspective: 1000px !default; // --#{$var-prefix}-parallax-perspective.
$parallax-scale: 0.95 !default; // --#{$var-prefix}-parallax-scale.

// Color.
$parallax-fade-color: #ffffff !default; // --#{$var-prefix}-fade-color-h/s/l/a.
```

{% endcode %}

Equivalent CSS variables with default prefix **`s`**.

```css
:root, :host {
  --s-parallax-deg: 3deg;
  --s-parallax-offset: 4.5px;
  --s-parallax-offset-z: 50px;
  --s-parallax-perspective: 1000px;
  --s-parallax-scale: 0.95;

  // color
  --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;
}
```

### Responsive breakpoints

SCSS variables.

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

```scss
// Responsive breakpoints.
$size-xs: 480px !default; // --#{$var-prefix}-size-xs.
$size-sm: 600px !default; // --#{$var-prefix}-size-sm.
$size-md: 840px !default; // --#{$var-prefix}-size-md.
$size-lg: 960px !default; // --#{$var-prefix}-size-lg.
$size-xl: 1280px !default; // --#{$var-prefix}-size-xl.
$size-2x: 1440px !default; // --#{$var-prefix}-size-2x.

$responsive-breakpoint: $size-xs !default; // --#{$var-prefix}-responsive-breakpoint.
```

{% endcode %}

Equivalent CSS variables with default prefix **`s`**.

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

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

### Transition duration

SCSS variables.

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

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

{% endcode %}

Equivalent CSS variables with default prefix **`s`**.

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

### Units

SCSS variables.

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

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

{% endcode %}

Equivalent CSS variables with default prefix **`s`**.

```css
: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.

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

```scss
// Z-index.
$zindex-0: 1 !default; // --#{$var-prefix}-z-index-0.
$zindex-1: 100 !default; // --#{$var-prefix}-z-index-1.
$zindex-2: 200 !default; // --#{$var-prefix}-z-index-2.
$zindex-3: 300 !default; // --#{$var-prefix}-z-index-3.
$zindex-4: 400 !default; // --#{$var-prefix}-z-index-4.
```

{% endcode %}

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


# 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) mixin, to use the [`color()`](/function/color/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`**.

```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>" %}


# Label colors

Label color variants are included by using the [`label-class-variant()`](/mixin/label/label-class-variant) mixin that uses  [`color()`](/function/color/color) 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 %}


# ⚠ Text colors

{% hint style="danger" %}
**Not documented**: This feature is no yet documented.
{% endhint %}

```scss
```


# ⚠ Toast colors

{% hint style="danger" %}
**Not documented**: This feature is no yet documented.
{% endhint %}


# Color


# alpha-var()

{% code title="" lineNumbers="true" %}

```scss
@function alpha-var($name, $alpha: 0, $prefix: $var-prefix) {
  @return var-adjust(css-var(color-name($name), $prefix, $var-alpha), $alpha, '*');
}
```

{% endcode %}


# color()

The function `color()` returns the [**hsla()**](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsla) color from the **four** CSS variables of the given [`$name`](#usdname-.bg-primary). The [`$name`](#usdname-.bg-primary) parameter can be passed as two-index list, where the second item is the [`$lightness`](#usdlightness-0), or can be passed as three-index list, where the third item is the [`$alpha`](#usdalpha-1).

The function `color()` returns the `hsla()` color from a CSS variables of the given `$name`.

{% code title="src/functions/\_color.function.scss" lineNumbers="true" %}

```scss
@function color(
  $name,
  $hue: 0deg,
  $saturation: 0%,
  $lightness: 0%,
  $alpha: 0,
  $prefix: $var-prefix
) {
  @return hsla-color(
    $name,
    $hue,
    $saturation,
    $lightness,
    $alpha,
    $prefix
  );
}
```

{% endcode %}

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

### Parameters

#### `$name`

A color name that exists as a CSS variable of a string or two/three-index [list](https://sass-lang.com/documentation/values/lists) type is passed to the [`color()`](/function/color/color) function to set the CSS variable's color name.

If name is passed as two-index list the first item refers to the CSS variable color name, the second refers to [`$lightness`](#usdlightness-0), and the third of the three-index list item refers to its [`$alpha`](#usdalpha-1).

#### `$hue: 0deg`

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. By default, it's set to `0deg`.

#### `$saturation: 0%`

Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color. By default, it's set to `0%`.

#### `$lightness: 0%`

Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white

#### `$alpha: 1`

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all)

#### `$prefix: $var-prefix`

The name's prefix of the four CSS variables, by default it's set to [`$var-prefix`](/variables/css-variable-name#usdvar-prefix).

## Example usage

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

.example-bg {
  background-color: color('secondary-color');
}
```

## Source

Source of definitions hex, saturation, lightness, and alpha.

{% embed url="<https://www.w3schools.com/css/css_colors_hsl.asp>" %}


# color-name()

{% code title="" lineNumbers="true" %}

```scss
@function color-name($name) {
  @if string.length($name) > 0 {
    @if string.index($name, '-') == null {
      $name: string.insert($name, '-color', string.length($name) + 1);
    } @else if string.index($name, 'color') == null {
      @if string.index($name, 'dark') != null {
        $name: #{string.insert(string.slice($name, 1, string.index($name, 'dark') - 1), 'color-dark', string.index($name, 'dark'))};
      } @else if string.index($name, 'light') != null {
        $name: #{string.insert(string.slice($name, 1, string.index($name, 'light') - 1), 'color-light', string.index($name, 'light'))};
      } @else {
        $name: string.insert($name, '-color', string.length($name) + 1);
      }
    }
  }
  @return $name;
}
```

{% endcode %}


# hsla-color()

{% code title="" lineNumbers="true" %}

```scss
@function hsla-color(
  $name,
  $hue: 0deg,
  $saturation: 0%,
  $lightness: 0%,
  $alpha: 0,
  $prefix: $var-prefix
) {
  $color: get-from-list($name, 'name', 'lightness', 'alpha', 'hue', 'saturation');
  @return hsla(
    hue-var(map.get($color, 'name'), map-get-default($color, 'hue', $hue), $prefix),
    saturation-var(map.get($color, 'name'), map-get-default($color, 'saturation', $saturation), $prefix),
    lightness-var(map.get($color, 'name'), calc(map-get-default($color, 'lightness', 0%) + $lightness), $prefix),
    alpha-var(map.get($color, 'name'), map-get-default($color, 'alpha', $alpha), $prefix)
  );
}
```

{% endcode %}


# hue-var()

{% code title="" lineNumbers="true" %}

```scss
@function hue-var($name, $hue: 0deg, $prefix: $var-prefix) {
  @return var-adjust(css-var(color-name($name), $suffix: $var-hue), $hue);
}
```

{% endcode %}


# lightness-level-var()

{% code title="" lineNumbers="true" %}

```scss
@function lightness-level-var($name, $prefix: $var-prefix) {
  @return css-var(color-name($name), $prefix, '#{$var-lightness}-l');
}
```

{% endcode %}


# lightness-var()

{% code title="" lineNumbers="true" %}

```scss
@function lightness-var($name, $lightness: 0%, $prefix: $var-prefix) {
  @return var-adjust(calc(css-var(color-name($name), $prefix, $var-lightness) + css-var(color-name($name), $prefix, '#{$var-lightness}-l')), $lightness);
}
```

{% endcode %}


# saturation-var()

{% code title="" lineNumbers="true" %}

```scss
@function saturation-var($name, $saturation: 0%, $prefix: $var-prefix) {
  @return var-adjust(css-var(color-name($name), $suffix: $var-saturation), $saturation);
}
```

{% endcode %}


# Var


# css-var()

{% code title="" lineNumbers="true" %}

```scss
@function css-var($name, $prefix: $var-prefix, $suffix: null, $var: null) {
  @return var(var-name($prefix, $name, $suffix, $var));
}
```

{% endcode %}


# get-var()

{% code title="" lineNumbers="true" %}

```scss
@function get-var(
  $name,
  $adjust: null,
  $unit: false,
  $prefix: $var-prefix,
  $suffix: null
) {
  $var: get-from-list(
    $name,
    'name',
    (
      'unit': 'boolean',
      'adjust': 'number',
    ),
    (
      'unit': 'boolean',
      'adjust': 'number',
    ),
    'negative',
    'prefix',
    'suffix'
  );

  @return var-negative(
    var-adjust(
      var-unit(
        map.get($var, 'name'),
        map-get-default($var, 'unit', $unit),
        map-get-default($var, 'prefix', $prefix),
        map-get-default($var, 'suffix', $suffix)
      ),
      map-get-default($var, 'adjust', $adjust)
    ),
    map.get($var, 'negative')
  );
}
```

{% endcode %}


# size-var()

{% code title="" lineNumbers="true" %}

```scss
@function size-var($size) {
  @return get-var('size', $suffix: $size);
}
```

{% endcode %}


# unit-var()

{% code title="" lineNumbers="true" %}

```scss
@function unit-var($size) {
  @return get-var('unit', $suffix: $size);
}
```

{% endcode %}


# var-adjust()

{% code title="" lineNumbers="true" %}

```scss
@function var-adjust($var, $adjust: null, $operator: '+') {
  @if $adjust != null {
    @if strip-unit($adjust) != 0 {
      @return calc(#{$var} #{$operator} #{$adjust});
    }
  }
  @return $var;
}
```

{% endcode %}


# var-name()

{% code title="" lineNumbers="true" %}

```scss
@function var-name($prefix: $var-prefix, $name, $suffix: null, $var: null) {
  @if $suffix == null {
    @return --#{$prefix}-#{$name};
  }
  @return --#{$prefix}-#{$name}-#{$suffix};
}
```

{% endcode %}


# var-negative()

{% code title="" lineNumbers="true" %}

```scss
@function var-negative($var, $calculate: true) {
  @if $calculate == true {
    @return calc((#{$var}) * -1);
  }
  @return $var;
}
```

{% endcode %}


# var-unit()

{% code title="" lineNumbers="true" %}

```scss
@function var-unit($name, $unit: false, $prefix: $var-prefix, $suffix: null) {
  $var: css-var($name, $prefix, $suffix);
  @if $unit == true {
    @return calc($var * css-var($name, $prefix, 'unit'));
  }
  @return $var;
}
```

{% endcode %}


# get-border()

{% code title="" lineNumbers="true" %}

```scss
@function get-border(
  $width: 'border-width',
  $style: solid,
  $color: 'border-color'
) {
  @return #{get-var($width)} #{$style} #{color($color)};
}
```

{% endcode %}


# get-from-list()

{% code title="" lineNumbers="true" %}

```scss
@function get-from-list($list, $keys...) {
  $map: ();
  @if list.length($list) > 1 {
    $index: 1;

    @each $value in $list {
      @if type-of($value) != 'map' {
        $key: list.nth($keys, $index);
        @if type-of($key) == 'map' {
          @each $k, $type in $key {
            @if typeof($value) == $type {
              // @warn '#{$k} #{$type} #{$value}';
              $map: map.set($map, $k, $value);
            }
          }
        } @else {
          $map: map.set($map, $key, $value);
        }
        $index: $index + 1;
      }
    }

    @each $value in $list {
      @if type-of($value) == 'map' {
        @each $key in $keys {
          @if type-of($key) != 'map' {
            @if map.has-key($value, $key) {
              $map: map.set($map, $key, map.get($value, $key));
            }
          } @else {
            @each $k, $type in $key {
              @if typeof(map.get($value, $k)) == $type {
                $map: map.set($map, $k, map.get($value, $k));
              }
            }              
          }
        }
      }
    }
  } @else {
    $map: map.set($map, list.nth($keys, 1), $list);
  }
  @return $map;
}
```

{% endcode %}


# important()

{% code title="" lineNumbers="true" %}

```scss
@function important($important: false) {
  @if $important == true {
    $important: ' !important';
  } @else if $important == false {
    $important: '';
  }
  @return #{$important};
}
```

{% endcode %}


# map-get-default()

{% code title="" lineNumbers="true" %}

```scss
@function map-get-default($map, $key, $default-value: null) {
  @if map.has-key($map, $key) {
    @return map.get($map, $key);
  }
  @return $default-value;
}
```

{% endcode %}


# strip-unit()

{% code title="" lineNumbers="true" %}

```scss
@function strip-unit($number) {
  @return math.div($number, ($number * 0 + 1));
}
```

{% endcode %}


# typeof()

{% code title="" lineNumbers="true" %}

```scss
@function typeof($value) {
  @if $value == true or $value == false {
    @return 'boolean';
  } @else {
    @return type-of($value);
  }
}
```

{% endcode %}


# Border


# border()

{% code title="" lineNumbers="true" %}

```scss
@mixin border(
  $size: '',
  $style: solid,
  $color: 'border',
  $radius: 'border-radius',
  $side: 'all'
) {
  // Size.
  $width: 'border-width';
  @if string.length($size) > 0 {
    $width: '#{$width}-#{$size}';
  }

  // Side.
  @if $side == all {
    border: get-border($width, $style, $color);
  } @else if $side == bottom or $side == left or $side == right or $side == top {
    border-#{$side}: get-border($width, $style, $color);
  } @else {
    @error "Unknown side #{$side}.";
  }

  // Radius.
  @if $radius {
    border-radius: get-var($radius);
  }
}
```

{% endcode %}


# border-hover()

{% code title="" lineNumbers="true" %}

```scss
@mixin border-hover(
  $width: '',
  $style: solid,
  $color: 'border',
  $radius: 'border-radius',
) {
  &:hover {
    @include border($width, $style, $color, $radius);
  }
}
```

{% endcode %}


# border-variant()

{% code title="" lineNumbers="true" %}

```scss
@mixin border-variant(
  $size,
  $style: solid,
  $color: 'border',
  $radius: 'border-radius',
) {
  @if (string.length($size) > 0) {
    &.border-#{$size} {
      @include border(border-width-#{$size}, solid, $color, $radius);
    }
  } @else {
    &.border {
      @include border(border-width, solid, $color, $radius);
    }
  }
}
```

{% endcode %}


# Color


# background()

The mixin contains the `background` style of the given `$color` CSS variable name without the prefix.

{% code title="" lineNumbers="true" %}

```scss
@mixin background(
  $color,
  $lightness: 0%,
  $alpha: 0,
  $important: '',
  $prefix: $var-prefix
) {
  background: color(
      $color,
      $lightness: $lightness,
      $alpha: $alpha,
      $prefix: $prefix
    )
    important($important);
}
```

{% endcode %}


# background-color()

{% code title="" lineNumbers="true" %}

```scss
@mixin background-color(
  $color,
  $lightness: 0%,
  $alpha: 0,
  $important: false,
  $prefix: $var-prefix
) {
  background-color: color(
      $color,
      $lightness: $lightness,
      $alpha: $alpha,
      $prefix: $prefix
    )
    important($important);
}
```

{% endcode %}


# bg-color-variant()

The mixin contains the **two** CSS classes, the CSS class of the name prefixed with `bg-`, and prefixed `#{$prefix}-bg-` with the given [`$name`](#usdname-primary) that includes the [`background`](https://developer.mozilla.org/en-US/docs/Web/CSS/background) color of the given [`$color`](#usdcolor-primary-color) CSS variable name, and `color` style equal to `light-color` depending on whether the given SCSS variable [`$hex-color`](#usdhex-color-usdprimary-color) lightness is below **`60`**.

By default, [`$prefix`](#usdprefix-usdvar-prefix) is equal to the globally customizable [`$var-prefix`](/variables/css-variable-name#usdvar-prefix).

{% hint style="success" %}
The mixin contains additional CSS class that includes in its name global prefix `$var-prefix`.&#x20;

`.#{$prefix}-bg-#{$name}`
{% endhint %}

{% code title="src/mixins/color/\_bg-color-variant.mixin.scss" %}

```scss
@mixin bg-color-variant($name, $color, $hex-color, $prefix: $var-prefix) {
  .bg-#{$name},
  .#{$prefix}-bg-#{$name} {
    @include background($color, $important: !important);
    @if (lightness($hex-color) < 60) {
      @include color('light');
    }
  }
}
```

{% endcode %}

{% embed url="<https://github.com/angular-package/spectre.css/blob/1.0.x/src/mixins/_color.scss>" %}

### Parameters

#### `$name: 'primary'`

The suffix for the name of the contained CSS class `.bg`, by default it is set to `primary`.

#### `$color: 'primary-color'`

A color name that exists as a CSS variable of a string type is passed to the [`color()`](/function/color/color) function to set the [background](https://developer.mozilla.org/en-US/docs/Web/CSS/background) color.

#### `$hex-color: $primary-color`

The hex color of the given [`$color`](#usdcolor-primary-color) CSS variable name is used to add `color` style equal to `light-color` depending on whether its lightness is below **`60`**. By default, it is set to the [`$primary-color`](/variables/colors/color-code#usdprimary-color).

#### `$prefix: $var-prefix`

The parameter is to customize the prefix of the second contained CSS class name. By default, it is set to the global SASS variable [`$var-prefix`](/variables/css-variable-name#usdvar-prefix).

## Example usage

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


```


# color-active()

{% code title="" lineNumbers="true" %}

```scss
@mixin color-active($color, $lightness: 0%) {
  .active,
  &:active {
    @include color($color, $lightness);
  }
}
```

{% endcode %}


# color-focus()

{% code title="" lineNumbers="true" %}

```scss
@mixin color-focus($color, $lightness: 0%) {
  .focus,
  &:focus {
    @include color($color, $lightness);
  }
}
```

{% endcode %}


# color-hover()

{% code title="" lineNumbers="true" %}

```scss
@mixin color-hover($color, $lightness: 0%) {
  &:hover {
    @include color($color, $lightness);
  }
}
```

{% endcode %}


# color-picker()

{% code title="" lineNumbers="true" %}

```scss
@mixin color-picker {
  appearance: none;

  padding: 0;
  margin: 0;

  background: transparent;
  outline: none;

  // transform: scale(2);
  // clip-path: inset(25%);
}
```

{% endcode %}


# color-visited()

{% code title="" lineNumbers="true" %}

```scss
@mixin color-visited($color, $lightness: 0%) {
  &:visited {
    @include color($color, $lightness);
  }
}
```

{% endcode %}


# set-color()

{% code title="" lineNumbers="true" %}

```scss
// The mixin sets CSS variable color in `hsla()` format, by splitting it into four CSS variables.
@mixin set-color(
  $name,
  $color,
  $lightness: 0%,
  $alpha: 0,
  $prefix: $var-prefix
) {
  @include set-color-hsla($name, $color, $lightness, $alpha, $prefix);
}
```

{% endcode %}


# set-var-alpha()

{% code title="" lineNumbers="true" %}

```scss
@mixin set-var-alpha(
  $name,
  $color,
  $alpha: 0,
  $prefix: $var-prefix,
  $suffix: $var-alpha
) {
  @if type-of($color) != 'string' {
    @include set-var($name, alpha($color), $prefix, $suffix);
  } @else {
    @include set-var($name, var-adjust(css-var(color-name($color), $suffix: $suffix), $alpha), $prefix, $suffix);
  }
}
```

{% endcode %}


# text-color-variant()

The mixin contains the two CSS classes, the class of the name prefixed with `text-`, and prefixed `#{$prefix}-text-` with the given color `$name` that includes the `color` style of the given `$color` CSS variable name, also the class of the same name assigned to tag `a`.

By default, `$prefix` is equal to the globally customizable [`$var-prefix`](/variables/css-variable-name#usdvar-prefix).

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

```scss
@mixin text-color-variant(
  $name: 'primary',
  $color: 'primary-color',
  $prefix: $var-prefix
) {
  .text-#{$name}, .#{$prefix}-text-#{$name} {
    color: color($color) !important;
  }

  a.text-#{$name}, a.#{$prefix}-text-#{$name} {
    &:focus,
    &:hover {
      color: color($color, $lightness: -5%);
    }
    &:visited {
      color: color($color, $lightness: +5%);
    }
  }
}
```

{% endcode %}


# Label


# label-base()

{% code title="" lineNumbers="true" %}

```scss
// Label base style
@mixin label-base() {
  border-radius: get-var('border-radius');
  line-height: 1.25;
  padding: 0.1rem 0.2rem;
}
```

{% endcode %}


# label-variant()

The mixin contains the [`color`](https://developer.mozilla.org/en-US/docs/Web/CSS/color) and [`background`](https://developer.mozilla.org/en-US/docs/Web/CSS/background) style of the values given respectively by [`$color`](#usdcolor-light-color) and [`$bg-color`](#usdbg-color-primary-color) CSS variable name. Both parameters can be passed as a two-index [list](https://sass-lang.com/documentation/values/lists) where the second item in the list refers to the lightness, and parameter [`$bg-color`](#usdbg-color-primary-color) can be passed using the three-index [list](https://sass-lang.com/documentation/values/lists) where the third item is a label background alpha.

For example `$color: ('primary', -10%)` when font color `primary` should be darker by 10%, and `$bg-color: ('primary-dark', 10%)` when label background color is `primary-dark` lighter by **`10%`**.

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

```scss
@mixin label-variant(
  $color: 'light-color',
  $bg-color: 'primary-color',
  $color-lightness: 0%,
  $bg-lightness: 0%
) {
  $alpha: 1;
  @if list.length($color) > 1 {
    $color-lightness: list.nth($color, 2);
    $color: list.nth($color, 1);
  }

  @if list.length($bg-color) > 1 {
    @if list.length($bg-color) == 3 {
      $alpha: list.nth($bg-color, 3);
    }

    $bg-lightness: list.nth($bg-color, 2);
    $bg-color: list.nth($bg-color, 1);
  }

  background: color($bg-color, $lightness: $bg-lightness, $alpha: $alpha);
  color: color($color, $lightness: $color-lightness);
}
```

{% endcode %}

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

### Parameters

#### `$color: 'light-color'`

A color name that exists as a CSS variable of a string or two-index [list](https://sass-lang.com/documentation/values/lists) type is passed to the [`color()`](/function/color/color) function to set the foreground color value of a label's text. The first item of the two-index list refers to the CSS variable color name, and the second refers to its lightness.

#### `$bg-color: 'primary-color'`

A color name that exists as a CSS variable of a string or three-index [list](https://sass-lang.com/documentation/values/lists) type is passed to the [`color()`](/function/color/color) function to set the background color of the label. The first item of the three-index [list](https://sass-lang.com/documentation/values/lists) refers to the CSS variable color name, the second refers to its lightness, and the third refers to the alpha.

#### `$color-lightness: 0%`

Optional alternative lightness attribute of the given [`$color`](#usdcolor-light-color) parameter.

#### `$bg-lightness: 0%`

Optional alternative lightness attribute of the given [`$bg-color`](#usdbg-color-primary-color) parameter.

## Example usage

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

// Accent label lighter by 10% with font `light-color` darker by 10%.
.label-accent {
  @include label-variant(
    $color: ('light-color', -10%),
    $bg-color: ('accent-color', 10%)
  );

  // OR

  @include label-variant(
    $color: 'light-color',
    $bg-color: 'accent-color',
    $color-lightness: -10%,
    $bg-lightness: 10%
  );
}
```


# label-class-variant()

The mixin contains an extending class of the name prefixed with `label-` and the given color [`$name`](#usdname-light) that includes a [`label-variant()`](/mixin/label/label-variant) mixin of the given CSS variable names [`$color`](#usdcolor-light-color) and [`$bg-color`](#usdbg-color-primary-color). Both parameters can be passed as two-index [list](https://sass-lang.com/documentation/values/lists) where the second item in the list refers to the lightness, for example `$color: ('primary', -10%)` when primary color should be darker by **`10%`**.

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

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

{% endcode %}

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

### Parameters

#### `$name: 'light'`

The suffix for the `label-` class name, which by default is `light`, resulting in CSS class name `.label-light`. Especially used as the [color code](/variables/colors/color-code).

#### `$color: 'light-color'`

A color name of a string or two-index [list](https://sass-lang.com/documentation/values/lists) type that exists as a CSS variable is passed to the [`color()`](/function/color/color) function to set the foreground color value of a label's text.

#### `$bg-color: 'primary-color'`

A color name of a string or two-index [list](https://sass-lang.com/documentation/values/lists) type that exists as a CSS variable is passed to the [`color()`](/function/color/color) function to set the [background](https://developer.mozilla.org/en-US/docs/Web/CSS/background) color of the label.

#### `$color-lightness: 0%`

Optional alternative lightness attribute of the given [`$color`](#usdcolor-light-color) parameter.

#### `$bg-lightness: 0%`

Optional alternative lightness attribute of the given [`$bg-color`](#usdbg-color-primary-color) parameter.

## Example usage

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

// Accent label lighter by 10% with font of `light-color` darker by 10%.
@include label-class-variant(
  $name: 'accent',
  $color: ('light-color', -10%),
  $bg-color: ('accent-color', 10%)
);

// OR

@include label-class-variant(
  $name: 'accent',
  $color: 'light-color',
  $bg-color: 'accent-color',
  $color-lightness: -10%,
  $bg-lightness: 10%
);
```

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


# Margin


# margin-size-variants()

{% code title="" lineNumbers="true" %}

```scss
@mixin margin-size-variants($name: margin) {
  &.#{$name}-xs {
    margin: calc(get-var('control-padding-y', $suffix: 'sm') + unit-var('1')) calc(get-var('control-padding-x', $suffix: 'sm') + unit-var('1'));
  }

  &.#{$name}-sm {
    margin: calc(get-var('control-padding-y', $suffix: 'sm') + unit-var('2')) calc(get-var('control-padding-x', $suffix: 'sm') + unit-var('2'));
  }

  &.#{$name}-md {
    margin: calc(get-var('control-padding-y') + unit-var('2')) calc(get-var('control-padding-x') + unit-var('2'));
  }

  &.#{$name}-lg {
    margin: calc(get-var('control-padding-y', $suffix: 'lg') + unit-var('2')) calc(get-var('control-padding-x', $suffix: 'lg') + unit-var('2'));
  }

  &.#{$name}-xl {
    margin: calc(get-var('control-padding-y', $suffix: 'lg') + unit-var('4')) calc(get-var('control-padding-x', $suffix: 'lg') + unit-var('4'));
  }
}

```

{% endcode %}


# margin-variant()

{% code title="" lineNumbers="true" %}

```scss
@mixin margin-variant($id: 1, $size: 'unit-1') {
  .m-#{$id} {
    margin: get-var($size) !important;
  }

  .mb-#{$id} {
    margin-bottom: get-var($size) !important;
  }

  .ml-#{$id} {
    margin-left: get-var($size) !important;
  }

  .mr-#{$id} {
    margin-right: get-var($size) !important;
  }

  .mt-#{$id} {
    margin-top: get-var($size) !important;
  }

  .mx-#{$id} {
    margin-left: get-var($size) !important;
    margin-right: get-var($size) !important;
  }

  .my-#{$id} {
    margin-bottom: get-var($size) !important;
    margin-top: get-var($size) !important;
  }
}
```

{% endcode %}


# Padding


# padding-size-variants()

{% code title="" lineNumbers="true" %}

```scss
@mixin padding-size-variants($name: padding) {
  &.#{$name}-xs {
    padding: calc(get-var('control-padding-y', $suffix: 'sm') + unit-var('1')) calc(get-var('control-padding-x', $suffix: 'sm') + unit-var('1'));
  }

  &.#{$name}-sm {
    // padding: $control-padding-y-sm + $unit-2 $control-padding-x-sm + $unit-2;
    padding: calc(get-var('control-padding-y', $suffix: 'sm') + unit-var('2')) calc(get-var('control-padding-x', $suffix: 'sm') + unit-var('2'));
  }

  &.#{$name}-md {
    padding: calc(get-var('control-padding-y') + unit-var('2')) calc(get-var('control-padding-x') + unit-var('2'));
  }

  &.#{$name}-none {
    padding: 0;
  }

  &.#{$name}-lg {
    // padding: $control-padding-y-lg + $unit-2 $control-padding-x-lg + $unit-2;
    padding: calc(get-var('control-padding-y', $suffix: 'lg') + unit-var('2')) calc(get-var('control-padding-x', $suffix: 'lg') + unit-var('2'));
  }

  &.#{$name}-xl {
    // padding: $control-padding-y-lg + $unit-4 $control-padding-x-lg + $unit-4;
    padding: calc(get-var('control-padding-y', $suffix: 'lg') + unit-var('4')) calc(get-var('control-padding-x', $suffix: 'lg') + unit-var('4'));
  }
}
```

{% endcode %}


# padding-variant()

{% code title="" lineNumbers="true" %}

```scss
@mixin padding-variant($id: 1, $size: 'unit-1') {
  .p-#{$id} {
    padding: get-var($size) !important;
  }

  .pb-#{$id} {
    padding-bottom: get-var($size) !important;
  }

  .pl-#{$id} {
    padding-left: get-var($size) !important;
  }

  .pr-#{$id} {
    padding-right: get-var($size) !important;
  }

  .pt-#{$id} {
    padding-top: get-var($size) !important;
  }

  .px-#{$id} {
    padding-left: get-var($size) !important;
    padding-right: get-var($size) !important;
  }

  .py-#{$id} {
    padding-bottom: get-var($size) !important;
    padding-top: get-var($size) !important;
  }
}
```

{% endcode %}


# Text


# text-ellipsis()

{% code title="" lineNumbers="true" %}

```scss
// Text Ellipsis
@mixin text-ellipsis() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
```

{% endcode %}


# Toast


# toast-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`.

The mixin includes toast `background` and `border` of a given `$color` CSS variable name.

{% code title="" lineNumbers="true" %}

```scss
@mixin toast-variant(
  $name: 'dark',
  $color: 'dark',
  $font-color: 'light',
) {
  &.toast-#{$name} {
    @include background($color, $alpha: 0.95);
    border-color: color($color);
    // Font color.
    @include color($font-color);
    a:active,
    a:visited,
    a:link {
      @include color($font-color);
    }
  }
}
```

{% endcode %}


# ⚠ toast-class-variant()

{% hint style="danger" %}
**Not documented**: This feature is no yet documented.
{% endhint %}


# Var


# 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`.

{% code title="" lineNumbers="true" %}

```scss
@mixin set-var($name, $value, $prefix: $var-prefix, $suffix: null) {
  #{var-name($prefix, $name, $suffix)}: #{$value};
}
```

{% endcode %}


# set-vars()

{% code title="" lineNumbers="true" %}

```scss
// The `set-vars()` mixin set the CSS variables from the given `$values`.
@mixin set-vars($name, $values, $prefix: $var-prefix) {
  @each $suffix, $value in $values {
    @include set-var($name, $value, $prefix, $suffix);
  }
}
```

{% endcode %}


# ⚠ define-color()

{% hint style="danger" %}
**Deprecated**: This feature is no longer recommended. Avoid using it, and update existing code if possible. Be aware that this feature may cease to work at any time.ccc
{% endhint %}

{% code title="" lineNumbers="true" %}

```scss
// @deprecated
// The mixin defines CSS variable color in hsla form, by splitting it in four CSS
// variables.
@mixin define-color($name, $color, $prefix: $var-prefix, $alpha: -1) {
  @warn 'define-color() mixin is deprecated in favor of set-color(), which includes new customizations';
  @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');
  }
}
```

{% endcode %}


# ⚠ define-color-based-on()

{% hint style="danger" %}
**Deprecated**: This feature is no longer recommended. Avoid using it, and update existing code if possible. Be aware that this feature may cease to work at any time.
{% endhint %}

{% code title="" lineNumbers="true" %}

```scss
// @deprecated
// Defines a color based on the specified CSS variable and its lightness.
@mixin define-color-based-on($name, $color, $lightness: 0%, $prefix: $var-prefix) {
  @warn 'define-color-based-on() mixin is deprecated in favor of set-color()';
  @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');
}
```

{% endcode %}


# avatar-base()

{% code title="" lineNumbers="true" %}

```scss
// Avatar mixin
@mixin avatar-base($size: 'unit-8') {
  font-size: calc(get-var($size) * 0.5);
  height: get-var($size);
  width: get-var($size);
}
```

{% endcode %}


# 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`.

{% code title="" lineNumbers="true" %}

```scss
// 
@mixin box-shadow-side($side, $size: 10px, $color: 'gray') {
  @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}.";
  }
}
```

{% endcode %}


# button-variant()

{% code title="" lineNumbers="true" %}

```scss
// Button variant mixin
@mixin button-variant($name, $bg-color, $color: 'light', $lightness: -2%) {
  &.btn-#{$name} {
    @include background($bg-color);
    border-color: color($bg-color, $lightness: $lightness - 1%);
    @include color($color);
    @include color-visited($color);
    &:focus {
      @include control-shadow($bg-color);
    }
    &:focus,
    &:hover {
      @include background($bg-color, $lightness: $lightness);
      border-color: color($bg-color, $lightness: $lightness - 3%);
    }
    @include color-focus($color);
    @include color-hover($color);

    &:active,
    &.active {
      @include background($bg-color, $lightness: $lightness - 5%);
      border-color: color($bg-color, $lightness: $lightness - 8%);
    }
    @include color-active($color);

    &.loading {
      &::after {
        border-bottom-color: color($color);
        border-left-color: color($color);
      }
    }
  }
}
```

{% endcode %}


# clearfix()

{% code title="" lineNumbers="true" %}

```scss
// Clearfix mixin
@mixin clearfix() {
  &::after {
    clear: both;
    content: '';
    display: table;
  }
}
```

{% endcode %}


# control-shadow()

{% code title="" lineNumbers="true" %}

```scss
// Component focus shadow
@mixin control-shadow($color: 'primary') {
  box-shadow: 0 0 0 0.1rem color($color, $alpha: 0.2);
}
```

{% endcode %}


# disabled()

{% code title="" lineNumbers="true" %}

```scss
@mixin disabled($name, $opacity: 0.5) {
  &.disabled,
  &:disabled,
  &.#{$name}-disabled {
    cursor: not-allowed;
    pointer-events: none;
    opacity: $opacity;
  }
}
```

{% endcode %}


# hide-scrollbar()

{% code title="" lineNumbers="true" %}

```scss
// Hide scrollbar.
@mixin hide-scrollbar($width: 0.00rem, $bg-color: 'gray') {
  /* hide scrollbar but allow scrolling */
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: thin; /* for Firefox */
  scrollbar-color: color($bg-color);
  overflow-y: auto;

  &::-webkit-scrollbar {
    // display: none; /* for Chrome, Safari, and Opera */
    width: $width;
  }
  &:hover {
    &::-webkit-scrollbar {
      width: $width + 0.1rem;
    }
  }
  &::-webkit-scrollbar-track {
    background: transparent;
  }
  &::-webkit-scrollbar-thumb {
    @include background($bg-color);
    border-radius: 20px;
    border: transparent;
    background-clip: border-box;
  }
  &::-webkit-scrollbar-thumb:active {
    @include background('primary');
  }
}
```

{% endcode %}


# property()

{% code title="" lineNumbers="true" %}

```scss
@mixin property($name, $values...) {
  $important: '';
  $property-value: '';
  @if list.index($values, '!important') {
    $important: #{' ' + list.nth($values, list.index($values, '!important'))};
  }
  @each $value in $values {
    @if $value != '!important' {
      $property-value: $property-value + get-var($value) + ' ';
    }
  }
  #{$name}: #{$property-value}#{$important};
}
```

{% endcode %}


# shadow-variant()

{% code title="" lineNumbers="true" %}

```scss
// Shadow mixin
@mixin shadow-variant($offset) {
  box-shadow: 0 $offset (($offset + 0.05rem) * 2) color('dark', $alpha: 0.15);
}
```

{% endcode %}


# transition()

{% code title="" lineNumbers="true" %}

```scss
@mixin transition($properties...) {
  $transition: '';
  @each $property in $properties {
    @if list.length($property) > 1 {
      $timing-function: '';
      @if (list.length($property) == 3) {
        $timing-function: list.nth($property, 3);
      }
      $transition: #{$transition}, #{list.nth($property, 1)} calc(get-var('transition-duration') + list.nth($property, 2)) #{$timing-function};
    } @else {
      $transition: #{$transition}, #{$property} get-var('transition-duration');
    }
  }
  transition: $transition;
}
```

{% endcode %}


# z-index()

{% code title="" lineNumbers="true" %}

```scss
@mixin z-index($level: '0', $adjust: 0, $important: '') {
  @if $adjust > 0 {
    z-index: calc(get-var('z-index', $suffix: $level) + $adjust) important($important); // TODO: Replace `get-var()`
  } @else {
    z-index: get-var('z-index', $suffix: $level) important($important);
  }
}
```

{% endcode %}


# Keep a changelog

The **changelog** of this package is based on [*keep a changelog*](https://keepachangelog.com/en/1.0.0/). To read it, click on the [CHANGELOG.md](https://github.com/angular-package/spectre.css/blob/1.0.x/CHANGELOG.md) link.

> A changelog is a file which contains a curated, chronologically ordered list of notable changes for each version of a project. - [*keep a changelog*](https://keepachangelog.com/en/1.0.0/)


# Commit

### AngularJS Git Commit Message Conventions

{% embed url="<https://gist.github.com/stephenparish/9941e89d80e2bc58a153>" %}

### Karma Git Commit Msg

{% embed url="<http://karma-runner.github.io/0.10/dev/git-commit-msg.html>" %}

### Conventional Commits

{% embed url="<https://www.conventionalcommits.org/en/v1.0.0>" %}


# Semantic Versioning

## Semantic versioning 2.0.0

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

{% embed url="<http://semver.org>" %}


# ⋯ Chat

## Discord

Feel free to ask any questions about the **angular-package** project in a general chat room on the discord.

{% embed url="<https://discord.com/channels/925168966098386944/925168966098386948>" %}
Discord general
{% endembed %}

## Gitter

Feel free to ask any questions about the **angular-package** project in a dedicated chat room on the gitter [here](https://gitter.im/angularpackage/Lobby).

{% embed url="<https://gitter.im/angularpackage/Lobby>" %}
Gitter chat
{% endembed %}


# @ Email

## Email

[contact@angular-package.dev](#email)


# ✆ Phone

## Mobile phone

+48 883322727


# ฿ Cryptocurrency

Become a sponsor to the angular-package by sending the cryptocurrency

## Bitcoin (BTC)

{% hint style="success" %}
My Public Address to Receive BTC

bc1qnf709336tfl57ta5mfkf4t9fndhx7agxvv9svn
{% endhint %}

Pay me via Trust Wallet: <https://link.trustwallet.com/send?coin=0&address=bc1qnf709336tfl57ta5mfkf4t9fndhx7agxvv9svn>

## Ethereum (ETH)&#x20;

{% hint style="success" %}
My Public Address to Receive ETH

0xA0c22A2bc7E37C1d5992dFDFFeD5E6f9298E1b94
{% endhint %}

Pay me via Trust Wallet: <https://link.trustwallet.com/send?coin=60&address=0xA0c22A2bc7E37C1d5992dFDFFeD5E6f9298E1b94>

## Smart Chain (BNB)

{% hint style="success" %}
My Public Address to Receive BNB

0xA0c22A2bc7E37C1d5992dFDFFeD5E6f9298E1b94
{% endhint %}

Pay me via Trust Wallet: <https://link.trustwallet.com/send?coin=20000714&address=0xA0c22A2bc7E37C1d5992dFDFFeD5E6f9298E1b94>

## Tether USDT (BEP20)

{% hint style="success" %}
My Public Address to Receive USDT

0xA0c22A2bc7E37C1d5992dFDFFeD5E6f9298E1b94
{% endhint %}

Pay me via Trust Wallet: <https://link.trustwallet.com/send?coin=20000714&address=0xA0c22A2bc7E37C1d5992dFDFFeD5E6f9298E1b94&token_id=0x55d398326f99059fF775485246999027B3197955>

## Stellar (XLM)

{% hint style="success" %}
My Public Address to Receive XLM

GAFFFB7H3LG42O6JA63FJDRK4PP4JCNEOPHLGLLFH625X2KFYQ4UYVM4
{% endhint %}

Pay me via Trust Wallet: <https://link.trustwallet.com/send?coin=148&address=GAFFFB7H3LG42O6JA63FJDRK4PP4JCNEOPHLGLLFH625X2KFYQ4UYVM4>


# $ Fiat

## Revolut

Become a sponsor of the **angular package** by using [Revolut](https://business.revolut.com/) payment.

{% embed url="<https://business.revolut.com/revolutme/angularpackage>" %}

## DonorBox

Become a sponsor of the **angular package** by using DonorBox sponsor [page](https://donorbox.org/become-a-sponsor-to-the-angular-package?default_interval=o).

{% embed url="<https://donorbox.org/become-a-sponsor-to-the-angular-package?default_interval=o>" %}

## GitHub

Become a sponsor of the **angular package** by using the **GitHub** sponsor [page](https://github.com/sponsors/angular-package).

{% embed url="<https://github.com/sponsors/angular-package>" %}

## Patreon

Become a sponsor of the **angular package** through my private sciborrudnicki account on the Patreon [page](https://www.patreon.com/sciborrudnicki).

{% embed url="<https://www.patreon.com/sciborrudnicki>" %}

Become a sponsor of the **angular package** on the Patreon [page](https://www.patreon.com/angularpackage).

{% embed url="<https://www.patreon.com/angularpackage>" %}