diff --git a/source/wp-content/themes/wporg-parent-2021/sass/blocks/_button.scss b/source/wp-content/themes/wporg-parent-2021/sass/blocks/_button.scss index 4e48beda..f7039980 100644 --- a/source/wp-content/themes/wporg-parent-2021/sass/blocks/_button.scss +++ b/source/wp-content/themes/wporg-parent-2021/sass/blocks/_button.scss @@ -113,6 +113,50 @@ } } + // Add "destructive" button styles. + &.is-destructive { + --wp--custom--button--color--text: var(--wp--preset--color--white); + --wp--custom--button--color--background: #d6310c; + --wp--custom--button--hover--color--background: #b60000; + --wp--custom--button--outline--color--text: #d6310c; + + --wp--custom--button--outline--hover--color--text: var(--wp--preset--color--white); + --wp--custom--button--outline--hover--color--background: var(--wp--custom--button--outline--color--text); + --wp--custom--button--outline--hover--border--color: var(--wp--custom--button--outline--color--text); + + .wp-block-button__link:focus { + background-color: var(--wp--custom--button--outline--color--text); + color: var(--wp--preset--color--white); + outline-color: var(--wp--custom--button--outline--hover--border--color); + } + + &.is-style-text .wp-block-button__link:hover { + --wp--custom--button--outline--hover--color--text: var(--wp--preset--color--charcoal-1); + --wp--custom--button--outline--hover--color--background: var(--wp--preset--color--pomegrade-3); + --wp--custom--button--outline--hover--border--color: var(--wp--preset--color--pomegrade-3); + } + + &.is-style-fill-on-dark { + --wp--custom--button--focus--border--color: var(--wp--preset--color--white); + --wp--custom--button--hover--color--background: var(--wp--preset--color--pomegrade-1); + } + + &.is-style-outline-on-dark { + --wp--custom--button--outline--color--text: var(--wp--preset--color--pomegrade-1); + + .wp-block-button__link:hover { + color: var(--wp--preset--color--charcoal-1); + } + + .wp-block-button__link:focus { + --wp--custom--button--outline--hover--border--color: var(--wp--custom--button--outline--color--text); + background-color: var(--wp--custom--button--outline--color--background); + color: var(--wp--preset--color--white); + outline-color: var(--wp--preset--color--white); + } + } + } + // Block style for navigation, but uses button style mixins. &.is-style-button-list { gap: 0;