Spectre.css
  • Introduction
  • ❤ Benefits
  • General concepts
  • Getting started
    • Skeleton
    • Installation
      • npm
    • Usage
  • Variables
    • Color scheme
    • CSS variable name
    • Using CSS variables
    • Colors
      • Settable SCSS
      • Based on settable SCSS
      • CSS variable color
      • Using CSS variable color
      • Color code
    • Other
  • CSS Color Classes
    • Background colors
    • Label colors
    • ⚠ Text colors
    • ⚠ Toast colors
  • Function
    • Color
      • alpha-var()
      • color()
      • color-name()
      • hsla-color()
      • hue-var()
      • lightness-level-var()
      • lightness-var()
      • saturation-var()
    • Var
      • css-var()
      • get-var()
      • size-var()
      • unit-var()
      • var-adjust()
      • var-name()
      • var-negative()
      • var-unit()
    • get-border()
    • get-from-list()
    • important()
    • map-get-default()
    • strip-unit()
    • typeof()
  • Mixin
    • Border
      • border()
      • border-hover()
      • border-variant()
    • Color
      • background()
      • background-color()
      • bg-color-variant()
      • color-active()
      • color-focus()
      • color-hover()
      • color-picker()
      • color-visited()
      • set-color()
      • set-var-alpha()
      • text-color-variant()
    • Label
      • label-base()
      • label-variant()
      • label-class-variant()
    • Margin
      • margin-size-variants()
      • margin-variant()
    • Padding
      • padding-size-variants()
      • padding-variant()
    • Text
      • text-ellipsis()
    • Toast
      • toast-variant()
      • ⚠ toast-class-variant()
    • Var
      • set-var()
      • set-vars()
      • ⚠ define-color()
      • ⚠ define-color-based-on()
    • avatar-base()
    • box-shadow-side()
    • button-variant()
    • clearfix()
    • control-shadow()
    • disabled()
    • hide-scrollbar()
    • property()
    • shadow-variant()
    • transition()
    • z-index()
  • Change log
    • Keep a changelog
    • CHANGELOG.md
  • GIT
    • Commit
    • Semantic Versioning
  • License
    • MIT
  • Social
    • Gettr
    • Twitter
    • YouTube
  • Contact
    • ⋯ Chat
    • @ Email
    • ✆ Phone
  • Donate
    • ฿ Cryptocurrency
    • $ Fiat
Powered by GitBook
On this page
  • Core colors
  • Gray colors
  • Background colors
  • Border colors
  • Link colors
  • Body colors
  1. Variables
  2. Colors

Based on settable SCSS

SCSS variable colors

PreviousSettable SCSSNextCSS variable color

Last updated 2 years ago

Colors that are based on the colors.

Core colors

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

Gray colors

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

Background colors

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

Border colors

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

Link colors

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

Body colors

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