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.
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;
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;
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 default gradients property values can be customized in the properties.scss document. The styles can be customized in the _gradients.scss document in the [styles/utilities] directory, they're written as standard CSS with limited Sass functionality included for compiling purposes.
$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;Styles
// ------------------------------------------------------------
// Gradients
// ------------------------------------------------------------
@use "../../configuration" as *;
@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));
}
@if $enable-theme-switch {
:where(html:is(.dark)) .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: #fff;
--grad-bg: var(--gradient-dark);
}
.gradient-light {
--grad-txt: #000;
--grad-bg: var(--gradient-light);
}
} // END [if/theme-colors]
@if $enable-primary-colors {
.gradient-blue {
--grad-txt: #fff;
--grad-bg: var(--gradient-blue);
}
.gradient-red {
--grad-txt: #fff;
--grad-bg: var(--gradient-red);
}
.gradient-green {
--grad-txt: #fff;
--grad-bg: var(--gradient-green);
}
.gradient-orange {
--grad-txt: #000;
--grad-bg: var(--gradient-orange);
}
.gradient-cyan {
--grad-txt: #000;
--grad-bg: var(--gradient-cyan);
}
} // END [if/primary-colors]
} // END [if/gradients]