Gradients

The gradient utilities are solid backgrounds, the default gradient uses the theme surface colors and reverses the degree to adjust the gradient for each color-scheme so is only (currently) available using the utility class below. Disabled by default, enable with $enable-gradients: true; in the configuration.scss document.

.gradient

Example HTML

<div class="gradient p-3">.gradient</div>

Colors (anchor)

The color gradient utilities have contrasting property values for text if included and (if enabled) icons, and the gradients themselves are also available using CSS variables.

With $enable-theme-colors: true;

.gradient-light

.gradient-dark

Example HTML

<div class="gradient-light p-3">.gradient-light</div>
<div class="gradient-dark p-3">.gradient-dark</div>

With $enable-primary-colors: true;

.gradient-blue

.gradient-red

.gradient-green

.gradient-orange

.gradient-cyan

Example HTML

<div class="gradient-blue p-3">.gradient-blue</div>
<div class="gradient-red p-3">.gradient-red</div>
<div class="gradient-green p-3">.gradient-green</div>
<div class="gradient-orange p-3">.gradient-orange</div>
<div class="gradient-cyan p-3">.gradient-cyan</div>

Customize (anchor)

The gradients core property values are provided as CSS variables that can be used to customize the styles inline. The values are compiled from Sass variables that can be customized in the properties.scss document when compiling.

Property values

$gradient-light:    linear-gradient(180deg, var(--surf-1-light), var(--surf-2-light), var(--surf-3-light)) !default;
$gradient-dark:     linear-gradient(0deg, var(--surf-1-dark), var(--surf-2-dark), var(--surf-3-dark)) !default;
$gradient-blue:     linear-gradient(0deg, var(--blue), var(--blue-light), var(--blue-lighter)) !default;
$gradient-red:      linear-gradient(0deg, var(--red), var(--red-light), var(--red-lighter)) !default;
$gradient-green:    linear-gradient(0deg, var(--green), var(--green-light), var(--green-lighter)) !default;
$gradient-orange:   linear-gradient(0deg, var(--orange-darker), var(--orange-dark), var(--orange)) !default;
$gradient-cyan:     linear-gradient(0deg, var(--cyan-darker), var(--cyan-dark), var(--cyan)) !default;

The styles are regular CSS that can be customized in the _gradients.scss document within the [styles/components] directory. The Sass @if rules control compiling depending on settings in the configuration.scss document.

Styles

@mixin colored-gradients {
  @if $enable-icon-mixins or $enable-icon-styles {
  --ico: var(--grad-txt);
  }
  color: var(--grad-txt);
  background-image: var(--grad-bg);
}

@if $enable-gradients {

.gradient {
  --deg: 180deg;
  background-image: linear-gradient(var(--deg), var(--surf-1), var(--surf-2), var(--surf-3));
}

// Reverse degree to keep .gradient direction consistent with alternating surface colors.
@if $enable-manual-themes {
  :where([data-prefers-dark=true]) {
    .gradient {
      --deg: 0deg;
    }    
  }
}
@else {
   @media (prefers-color-scheme: dark) {
    :where(html) {
      .gradient {
        --deg: 0deg;
      }       
    }
  }  
}

@if $enable-theme-colors and $enable-primary-colors {
  :where(.gradient-dark, .gradient-light, .gradient-blue, .gradient-red, .gradient-green, .gradient-orange, .gradient-cyan) {
    @include colored-gradients;
  }
}
@else {
  @if $enable-theme-colors {
    :where(.gradient-dark, .gradient-light) {
      @include colored-gradients;
    }
  }
  @if $enable-primary-colors {
    :where(.gradient-blue, .gradient-red, .gradient-green, .gradient-orange, .gradient-cyan) {
      @include colored-gradients;
    }
  }
}

@if $enable-theme-colors { 

.gradient-dark {
  --grad-txt: var(--text-dark);
  --grad-bg: var(--gradient-dark);
}

.gradient-light {
  --grad-txt: var(--text-light);
  --grad-bg: var(--gradient-light);
}

} // END [if/theme-colors]

@if $enable-primary-colors { 

.gradient-blue {
  --grad-txt: var(--text-dark);
  --grad-bg: var(--gradient-blue);    
}

.gradient-red {
  --grad-txt: var(--text-dark);
  --grad-bg: var(--gradient-red);
}

.gradient-green {
  --grad-txt: var(--text-dark);
  --grad-bg: var(--gradient-green);
}

.gradient-orange {
  --grad-txt: var(--text-light);
  --grad-bg: var(--gradient-orange);
}

.gradient-cyan {
  --grad-txt: var(--text-light);
  --grad-bg: var(--gradient-cyan);
}
  
} // END [if/primary-colors]

} // END [if/gradients]