# Based on settable SCSS

Colors that are based on the [settable](https://spectrecss.angular-package.dev/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 %}