Theming Mixins

Using the power of SCSS Mixins, we have created a library of theming mixins that allow you make sweeping theming changes to the style of many of our built-in components in a line code (well, a couple of lines at most).

Mixins allow you to define styles that can be re-used throughout your stylesheet. They make it easy to avoid using non-semantic classes like .float-left, and to distribute collections of styles in libraries.

sasslang.com

Find out more

Instead of having to make sure you've identified each specific element and then fiddle around in CSS until you get something that looks right, now you can simply just call one of our mixins and you're golden 👌

These mixins are opinionated and we have tried to do a lot of the design thinking up front. If you have highly specific requirements, you might need to still need to write a bunch of CSS. However, check out the docs and their examples just in case - we might have sorted it for you!

Example

/* Before 😑 */
.foo {
  background: $primaryColor;
  color: accessible-color($primaryLighter, $primaryColor);
  
  .bar {
    background: $primaryDarkest;
    color: accessible-color(white , $primaryDarkest);
  }
  
  .baz {
    background: white;
    color: accessible-color($primaryColor ,white);
    border: 2px solid $primaryDark;
    
    &--active {
      background: $primaryDark;
      color: accessible-color($primaryColor ,$primaryDark);
    }
  }
}   

/* After 💥🤯🙏 */
.foo {
	@include amazing-mixin($theme: primary); 
}

Deprecations

New components won't always support existing mixins. Below is a list of components and mixins that are either not compatible or take extra configuration to be compatible.

`DonationFormV3`

form-header-theme has no effect.
form-nav-theme's $full, $outline, $gutter parameters have no effect.
donation-form-amounts-width needs an increase in specificity to take effect. A straightforward way to do this is doubling the form's class (e.g. donation-form):

.donation-form.donation-form {
	@include donation-form-amounts-width('full');
}