From 27331403a0a35c53358893b350f63f7b573c6b28 Mon Sep 17 00:00:00 2001 From: Lois Wells Date: Fri, 5 Dec 2025 11:06:10 +0000 Subject: [PATCH 1/4] extending danger button styling --- src/assets/stylesheets/Button.scss | 22 ++++++++++++++++++++++ src/assets/stylesheets/index.scss | 8 ++++++++ 2 files changed, 30 insertions(+) diff --git a/src/assets/stylesheets/Button.scss b/src/assets/stylesheets/Button.scss index 832cfe328..03288b12a 100644 --- a/src/assets/stylesheets/Button.scss +++ b/src/assets/stylesheets/Button.scss @@ -182,6 +182,10 @@ fill: var(--rpf-button-tertiary-text-color-hover); } } + + &.btn--underline { + text-decoration: underline; + } } &--danger { @@ -227,6 +231,24 @@ border: 2px solid transparent; outline: 3px solid $rpf-brand-raspberry; } + + &.btn--tertiary { + background-color: inherit; + color: var(--rpf-button-tertiary-danger-text-color); + + svg { + fill: var(--rpf-button-tertiary-danger-text-color); + } + + &:hover { + background-color: var(--rpf-button-tertiary-danger-background-color-hover); + // color: var(--rpf-button-tertiary-danger-text-color-hover); + + // svg { + // fill: var(--rpf-button-tertiary-danger-text-color-hover); + // } + } + } } &--small { diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss index 8cca17a41..a3776a4a9 100644 --- a/src/assets/stylesheets/index.scss +++ b/src/assets/stylesheets/index.scss @@ -96,6 +96,10 @@ code { --rpf-button-secondary-text-color: var(--rpf-white); --rpf-button-tertiary-text-color-hover: var(--rpf-grey-200); + + --rpf-button-tertiary-danger-text-color: var(--rpf-red-600); + // --rpf-button-tertiary-danger-background-color-hover: var(--rpf-red-400); + --rpf-button-tertiary-danger-background-color-hover: rgba(255, 255, 255, 0.1); ; } .rpf-button--secondary { @@ -123,6 +127,10 @@ code { --rpf-button-tertiary-text-color-hover: var(--rpf-grey-600); + --rpf-button-tertiary-danger-text-color: var(--rpf-alert-error); + // --rpf-button-tertiary-danger-background-color-hover: #{$rpf-alerts-error-tint}; + --rpf-button-tertiary-danger-background-color-hover: var(--rpf-grey-100); ; + .rpf-button--secondary { border-color: var(--rpf-teal-800); } From cf74db08806b575633d5986b30282c0459d858cb Mon Sep 17 00:00:00 2001 From: Lois Wells Date: Fri, 5 Dec 2025 13:57:04 +0000 Subject: [PATCH 2/4] tweaking light mode hover state and adding actice states --- src/assets/stylesheets/Button.scss | 7 +++---- src/assets/stylesheets/index.scss | 8 ++++---- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/assets/stylesheets/Button.scss b/src/assets/stylesheets/Button.scss index 03288b12a..4aef978a9 100644 --- a/src/assets/stylesheets/Button.scss +++ b/src/assets/stylesheets/Button.scss @@ -242,11 +242,10 @@ &:hover { background-color: var(--rpf-button-tertiary-danger-background-color-hover); - // color: var(--rpf-button-tertiary-danger-text-color-hover); + } - // svg { - // fill: var(--rpf-button-tertiary-danger-text-color-hover); - // } + &:active { + background-color: var(--rpf-button-tertiary-danger-background-color-active); } } } diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss index a3776a4a9..e9636b6f9 100644 --- a/src/assets/stylesheets/index.scss +++ b/src/assets/stylesheets/index.scss @@ -98,8 +98,8 @@ code { --rpf-button-tertiary-text-color-hover: var(--rpf-grey-200); --rpf-button-tertiary-danger-text-color: var(--rpf-red-600); - // --rpf-button-tertiary-danger-background-color-hover: var(--rpf-red-400); - --rpf-button-tertiary-danger-background-color-hover: rgba(255, 255, 255, 0.1); ; + --rpf-button-tertiary-danger-background-color-hover: rgba(255, 255, 255, 0.1); + --rpf-button-tertiary-danger-background-color-active: rgba(255, 255, 255, 0.15); } .rpf-button--secondary { @@ -128,8 +128,8 @@ code { --rpf-button-tertiary-text-color-hover: var(--rpf-grey-600); --rpf-button-tertiary-danger-text-color: var(--rpf-alert-error); - // --rpf-button-tertiary-danger-background-color-hover: #{$rpf-alerts-error-tint}; - --rpf-button-tertiary-danger-background-color-hover: var(--rpf-grey-100); ; + --rpf-button-tertiary-danger-background-color-hover: rgba(0, 0, 0, 0.03); + --rpf-button-tertiary-danger-background-color-active: rgba(0, 0, 0, 0.05); .rpf-button--secondary { border-color: var(--rpf-teal-800); From 4eaf593b86506d230b45fd25176273df9491a994 Mon Sep 17 00:00:00 2001 From: Lois Wells Date: Fri, 5 Dec 2025 14:01:34 +0000 Subject: [PATCH 3/4] remove btn--underline styles since not used --- src/assets/stylesheets/Button.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/assets/stylesheets/Button.scss b/src/assets/stylesheets/Button.scss index 4aef978a9..20002dccc 100644 --- a/src/assets/stylesheets/Button.scss +++ b/src/assets/stylesheets/Button.scss @@ -182,10 +182,6 @@ fill: var(--rpf-button-tertiary-text-color-hover); } } - - &.btn--underline { - text-decoration: underline; - } } &--danger { From e473d1015c313915144380a5af7c839326c5c3bd Mon Sep 17 00:00:00 2001 From: Lois Wells Date: Fri, 5 Dec 2025 14:02:37 +0000 Subject: [PATCH 4/4] updating changelog --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index daa715d6c..932f6b88a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## Unreleased +### Added + +- Tertiary danger button styles (#1280) + ### Fixed - Plugin sidebar panel rerendering (#1279)