From 6aae91ca69e78a603cd7d88f514a5486179dcf53 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 21 May 2025 23:40:38 +0300
Subject: [PATCH] style(next)/formatting toolbar: restyle the buttons in the
 "on" state

---
 apps/client/src/stylesheets/theme-next-dark.css       | 4 ++++
 apps/client/src/stylesheets/theme-next-light.css      | 3 +++
 apps/client/src/stylesheets/theme-next/notes/text.css | 6 ++++++
 3 files changed, 13 insertions(+)

diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css
index 88ac61137..a5cce76e3 100644
--- a/apps/client/src/stylesheets/theme-next-dark.css
+++ b/apps/client/src/stylesheets/theme-next-dark.css
@@ -237,6 +237,10 @@
     --help-code-background: #565656;
 
     --ck-editor-popup-border-color: var(--modal-border-color);
+
+    --ck-editor-toolbar-button-on-background: #ffffff3b;
+    --ck-editor-toolbar-button-on-color: white;
+    --ck-editor-toolbar-button-on-shadow: 1px 1px 2px rgba(0, 0, 0, .75);
 }
 
 /*
diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css
index af0217765..a7ddd5b06 100644
--- a/apps/client/src/stylesheets/theme-next-light.css
+++ b/apps/client/src/stylesheets/theme-next-light.css
@@ -237,4 +237,7 @@
     --help-code-background: #d7d5d5;
 
     --ck-editor-popup-border-color: var(--dropdown-border-color);
+    --ck-editor-toolbar-button-on-background: #00000017;
+    --ck-editor-toolbar-button-on-color: black;
+    --ck-editor-toolbar-button-on-shadow: 1px 1px 1px rgba(0, 0, 0, .35);
 }
diff --git a/apps/client/src/stylesheets/theme-next/notes/text.css b/apps/client/src/stylesheets/theme-next/notes/text.css
index 434f2233e..ff949e0be 100644
--- a/apps/client/src/stylesheets/theme-next/notes/text.css
+++ b/apps/client/src/stylesheets/theme-next/notes/text.css
@@ -27,6 +27,12 @@
     --ck-border-radius: 6px;
 }
 
+.ck-button.ck-on:not(.ck-dropdown__button) {
+    --ck-color-button-on-background: var(--ck-editor-toolbar-button-on-background);
+    --ck-color-button-on-color: var(--ck-editor-toolbar-button-on-color);
+    box-shadow: var(--ck-editor-toolbar-button-on-shadow);
+}
+
 /* Disabled button */
 :root .classic-toolbar-widget .ck.ck-button.ck-disabled {
     opacity: .75;