button-theme

@include button-theme(
  $btnTheme,
  $outline,
  $background,
  $override,
  $hover
);

Description

Assign/reassign a button theme from Design > Buttons, or add your own styling. This mixin can be helpful if you want to change a specific button to a different theme where you can't change in the DOM, or if you want to add an extra button class (a button--tertiary perhaps?) that you can add to buttons in a Button Row block.

Parameters

$btnTheme (button theme | button map | shades | color)
The button theme you want to implement.

$outline (boolean | 'force')
Whether or not the button should be outlined. It will default to the button theme default. force can be used to ensure a button is outlined when the default button theme is set to be filled.
Default: null

$background (shades | color)
When outline is set to true or force, the colour will be used to check accessibility for the buttons text color.
Default: white

$override (boolean)
Setting this to true is sometimes needed to enforce the new styles.
Default: false

$hover (boolean)
Whether or not to to include the generate hover styles for the button.
Default: true

Return

(CSS) Styles to theme button.

Examples

Change form buttons to use secondary buttons, instead of primary

.form .button {
	@include button-theme(secondary);
}

Outline buttons within the Profile Controls block

.profile-controls .button--primary {
  @include button-theme(
    $btnTheme: primary, /* State base theme */
    $outline: force /* Force outline */
  );
}

Set up a custom button class helper using a color map

.button--tertiary {
  @include button-theme(
    $btnTheme: (
    	color: #fff, /* White text color */
    	background: #29328f /* Dark navy background color */
    )
  );
}