Backgrounds

A variable utility to create background colors inline and gradient overlays for solid backgrounds.

Examples (anchor)

The background color utility is a variable class with no preset values designed to be used to create custom background colors inline, it includes variables for text and background colors as demonstrated below.

RoyalBlue

<div class="bg" style="--bg-col:RoyalBlue; --bg-text:white;">RoyalBlue</div>

The color utilities and theme utilities both include optional modifier classes for the .bg utility with preset color values provided by the color variables tokens. These are ready to use and customize but also provide a template for how the variables can be used to create background color utilities in custom styles.

Gradients (anchor)

Three mono linear-gradient overlay utilities for background colors are provided and also available as CSS variables to use in custom styles. The optional background color modifier utility described above is used for the examples but as mono gradient overlays they can be included with any background color.

Light

Default

Heavy

<div class="bg bg-blue gradient-light">Light</div>
<div class="bg bg-blue gradient">Default</div>
<div class="bg bg-blue gradient-heavy">Heavy</div>

Using the module (anchor)

To use the module load the StyleMods scss directory as follows (changing the path to suit the source files location as required) then include the Sass mixin anywhere below.

custom.scss

@use "stylemods/scss" as *;
@include background-css;
@include gradients-css;

See customizing for information about using the Sass and CSS variables in the source code below to customize the styles, and Sass variables (on the using StyleMods page) for other ways to use the variables to create custom styles.

Source code (anchor)

backgrounds.scss

// ---------------------------------------------------------- 
// Backgrounds
// ----------------------------------------------------------
$background-utility:              bg !default;
$background-text-variable:        var(--bg-text) !default;
$background-color-variable:       var(--bg-col) !default;
$gradient-tokens:                 where(html) !default;
$gradient-default:                linear-gradient(180deg, rgba(white, .225), rgba(white, 0)) !default;
$gradient-light:                  linear-gradient(180deg, rgba(white, .175), rgba(white, 0)) !default;
$gradient-heavy:                  linear-gradient(180deg, rgba(white, .33), rgba(white, 0)) !default;

@mixin background-css {
  .#{$background-utility} {
    color: $background-text-variable;
    background-color: $background-color-variable;
  }
}

@mixin gradient-variables {
  --gradient: #{$gradient-default};
  --gradient-light: #{$gradient-light};
  --gradient-heavy: #{$gradient-heavy};
}

@mixin gradient-classes {
  .gradient {
    background-image: var(--gradient);
  }

  .gradient-light {
    background-image: var(--gradient-light);
  }

  .gradient-heavy {
    background-image: var(--gradient-heavy);
  }
}

@mixin gradient-novariables-css {
  .gradient {
    background-image: $gradient-default;
  }

  .gradient-light {
    background-image: $gradient-light;
  }

  .gradient-heavy {
    background-image: $gradient-heavy;
  }
}

@mixin gradients-css {
  :#{$gradient-tokens} {
    @include gradient-variables;
  }  
  @include gradient-classes;
}