fix(richtext-lexical): toolbar styles (#7936)

fix #7925.

The `active` style was not effective due to a typo in the CSS (`them`
instead of `theme`).

I took the opportunity to improve a few things:
- Now the colors on hover, active, and hover+active are slightly
different.
- Added a missing gap to the fixed toolbar buttons.

Gap changes: Before:
![CleanShot 2024-09-03 at 00 02
52@2x](https://github.com/user-attachments/assets/2381468c-7bdd-43f6-93b6-5baa587dd0a6)

After:
![CleanShot 2024-09-03 at 00 01
22@2x](https://github.com/user-attachments/assets/53d0cac9-9718-4b97-a478-f249b10d416e)


Thanks @tylandavis for the help!

Author: GermanJablo

packages/richtext-lexical/src/features/toolbars/fixed/client/Toolbar/index.scss

@@ -21,13 +21,6 @@ html[data-theme='dark'] {
     }
 
     .toolbar-popup {
-      &__button {
-        &.active,
-        &:hover:not([disabled]) {
-          background: var(--theme-elevation-100);
-        }
-      }
-
       &__dropdown {
         transition: background-color 0.15s cubic-bezier(0, 0.2, 0.2, 1);
 
@@ -73,7 +66,7 @@ html[data-theme='dark'] {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: 0;
+    gap: 2px;
     z-index: 1;
 
     .icon {
@@ -86,7 +79,7 @@ html[data-theme='dark'] {
       width: 1px;
       height: 15px;
       background-color: var(--theme-elevation-100);
-      margin: 0 6.25px;
+      margin: 0 6.25px 0 4.25px; // substract 2px from the gap
     }
   }
 

packages/richtext-lexical/src/features/toolbars/inline/client/Toolbar/index.scss

@@ -3,7 +3,7 @@
 .inline-toolbar-popup {
   display: flex;
   align-items: center;
-  background: var(--theme-elevation-50);
+  background: var(--theme-input-bg);
   padding: base(0.2);
   vertical-align: middle;
   position: absolute;

packages/richtext-lexical/src/features/toolbars/shared/ToolbarButton/index.scss

@@ -18,9 +18,16 @@
     margin-right: 2px;
   }
 
+  &:hover:not([disabled]) {
+    background-color: var(--theme-elevation-100);
+  }
+
   &.active {
-    background-color: var(--them-elevation-150);
+    background-color: var(--theme-elevation-150);
     color: var(--theme-text);
+    &:hover {
+      background-color: var(--theme-elevation-200);
+    }
 
     .icon {
       opacity: 1;
@@ -34,8 +41,4 @@
       opacity: 0.2;
     }
   }
-
-  &:hover:not([disabled]) {
-    background-color: var(--theme-elevation-100);
-  }
 }