From c34c4ebf16c24116ec749a1498aed6d25e142fcb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nil=C3=A9ane?= <nileanedorffer@gmail.com>
Date: Wed, 13 Mar 2024 01:11:01 +0100
Subject: [PATCH] Improved styling for secondary buttons

---
 TangerineUI-cherry.css | 16 ++++++++++++----
 TangerineUI-purple.css | 16 ++++++++++++----
 TangerineUI.css        | 16 ++++++++++++----
 3 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/TangerineUI-cherry.css b/TangerineUI-cherry.css
index a5882de..ff21e7d 100644
--- a/TangerineUI-cherry.css
+++ b/TangerineUI-cherry.css
@@ -5360,7 +5360,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         .confirmation-modal__secondary-button,
         .mute-modal__cancel-button
     ):not(:hover) {
-        background-color: transparent;
+        background-color: color-mix(in srgb, var(--color-accent), transparent 90%);
+        color: var(--color-accent);
+}
+.app-body 
+    :is(
+        .block-modal__cancel-button,
+        .confirmation-modal__cancel-button,
+        .confirmation-modal__secondary-button,
+        .mute-modal__cancel-button
+    ):is(:active, :hover) {
+        background-color: color-mix(in srgb, var(--color-accent), transparent 70%) !important;
         color: var(--color-accent);
 }
 .app-body 
@@ -5811,9 +5821,7 @@ a:is(.active,
     color: var(--color-accent);
 }
 .app-body .button:is(.button-secondary, .button-tertiary):hover {
-    background-color: var(--color-accent-focus);
-    color: var(--color-accent-fg);
-    outline-color: var(--color-lines-translucent);
+    background-color: color-mix(in srgb, var(--color-accent), transparent 70%);
 }
 .app-body .sign-in-banner .button,
 .app-body .button:is(.button-secondary, .button-tertiary) {
diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css
index 0b8686b..feb1ab0 100644
--- a/TangerineUI-purple.css
+++ b/TangerineUI-purple.css
@@ -5360,7 +5360,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         .confirmation-modal__secondary-button,
         .mute-modal__cancel-button
     ):not(:hover) {
-        background-color: transparent;
+        background-color: color-mix(in srgb, var(--color-accent), transparent 90%);
+        color: var(--color-accent);
+}
+.app-body 
+    :is(
+        .block-modal__cancel-button,
+        .confirmation-modal__cancel-button,
+        .confirmation-modal__secondary-button,
+        .mute-modal__cancel-button
+    ):is(:active, :hover) {
+        background-color: color-mix(in srgb, var(--color-accent), transparent 70%) !important;
         color: var(--color-accent);
 }
 .app-body 
@@ -5811,9 +5821,7 @@ a:is(.active,
     color: var(--color-accent);
 }
 .app-body .button:is(.button-secondary, .button-tertiary):hover {
-    background-color: var(--color-accent-focus);
-    color: var(--color-accent-fg);
-    outline-color: var(--color-lines-translucent);
+    background-color: color-mix(in srgb, var(--color-accent), transparent 70%);
 }
 .app-body .sign-in-banner .button,
 .app-body .button:is(.button-secondary, .button-tertiary) {
diff --git a/TangerineUI.css b/TangerineUI.css
index 1873fb7..ab5f63b 100644
--- a/TangerineUI.css
+++ b/TangerineUI.css
@@ -5360,7 +5360,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         .confirmation-modal__secondary-button,
         .mute-modal__cancel-button
     ):not(:hover) {
-        background-color: transparent;
+        background-color: color-mix(in srgb, var(--color-accent), transparent 90%);
+        color: var(--color-accent);
+}
+.app-body 
+    :is(
+        .block-modal__cancel-button,
+        .confirmation-modal__cancel-button,
+        .confirmation-modal__secondary-button,
+        .mute-modal__cancel-button
+    ):is(:active, :hover) {
+        background-color: color-mix(in srgb, var(--color-accent), transparent 70%) !important;
         color: var(--color-accent);
 }
 .app-body 
@@ -5811,9 +5821,7 @@ a:is(.active,
     color: var(--color-accent);
 }
 .app-body .button:is(.button-secondary, .button-tertiary):hover {
-    background-color: var(--color-accent-focus);
-    color: var(--color-accent-fg);
-    outline-color: var(--color-lines-translucent);
+    background-color: color-mix(in srgb, var(--color-accent), transparent 70%);
 }
 .app-body .sign-in-banner .button,
 .app-body .button:is(.button-secondary, .button-tertiary) {