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
  • Shades
  • Gray colors
  • Link colors
  • Body colors
  • Bg colors
  • Control colors
  • Other colors
  • Demonstration
  1. CSS Color Classes

Label colors

PreviousBackground colorsNext⚠ Text colors

Last updated 2 years ago

Label color variants are included by using the mixin that uses function, in the .label class as its extension in the file.

Core colors

src/_labels.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'
  );
}

Which results in the ability to use classes as follows.

<!-- 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

src/_labels.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'
  );
}

Which results in the ability to use classes as follows.

<!-- Dark -->
<span class="label label-dark">dark label</span>

<!-- Light -->
<span class="label label-light">light label</span>

Gray colors

src/_labels.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'
  );
}

Which results in the ability to use classes as follows.

<!-- 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

src/_labels.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'
  );
}

Which results in the ability to use classes as follows.

<!-- 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

src/_labels.scss
.label {
  // Body bg.
  @include label-class-variant(
    $name: 'body-bg',
    $color: 'body-font-color',
    $bg-color: 'body-bg-color'
  );
}

Which results in the ability to use classes as follows.

<!-- Body bg -->
<span class="label label-body-bg">body bg label</span>

Bg colors

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

Which results in the ability to use classes as follows.

<!-- 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

src/_labels.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'
  );
}

Which results in the ability to use classes as follows.

<!-- 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

src/_labels.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'
  );
}

Which results in the ability to use classes as follows.

<!-- Code -->
<span class="label label-code">code label</span>

<!-- Highlight -->
<span class="label label-highlight">highlight label</span>

Demonstration

label-class-variant()
color()
src/_labels.scss
LogoLabels - Elements - Spectre.css CSS Frameworkspectrecss
Modified Spectre.css documentation.
Label demonstration
Logo@angular-packageangularpackage
Logospectre.css/_labels.scss at master · angular-package/spectre.cssGitHub