From 770669424e48ade81efd97aaa440f6cf882cbaa0 Mon Sep 17 00:00:00 2001
From: R3D347HR4Y <redeathray@gmail.com>
Date: Mon, 15 Jun 2026 18:03:02 +0200
Subject: [PATCH] feat(drive): refine select trigger styles in rich text editor

- Updated select trigger components for paragraph style and font family to include a ghost variant for improved visual consistency.
- Adjusted CSS styles to standardize height and padding, enhancing the overall appearance of select elements.
- Improved hover and focus states for better user interaction feedback across different themes.
---
 .../richtext/docs-paragraph-style-ui.tsx      |  3 +-
 components/drive/richtext/docs-toolbar.tsx    |  3 +-
 styles/richtext-editor.css                    | 34 ++++++++++++-------
 3 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/components/drive/richtext/docs-paragraph-style-ui.tsx b/components/drive/richtext/docs-paragraph-style-ui.tsx
index b0e3a85..5ad6b48 100644
--- a/components/drive/richtext/docs-paragraph-style-ui.tsx
+++ b/components/drive/richtext/docs-paragraph-style-ui.tsx
@@ -46,8 +46,9 @@ export function DocsParagraphStyleSelect({
   return (
     <Select disabled={disabled} value={value} onValueChange={onValueChange}>
       <SelectTrigger
+        variant="ghost"
         className={cn(
-          "docs-toolbar-select docs-toolbar-select--style h-7 w-[120px] shrink-0 border-0 bg-transparent px-1 shadow-none",
+          "docs-toolbar-select docs-toolbar-select--style h-7 w-[120px] shrink-0 border-0 bg-transparent px-1 py-0 shadow-none",
           triggerClassName
         )}
       >
diff --git a/components/drive/richtext/docs-toolbar.tsx b/components/drive/richtext/docs-toolbar.tsx
index 37f5883..05c923b 100644
--- a/components/drive/richtext/docs-toolbar.tsx
+++ b/components/drive/richtext/docs-toolbar.tsx
@@ -274,7 +274,8 @@ function DocsToolbarInner({
             }}
           >
             <SelectTrigger
-              className="docs-toolbar-select docs-toolbar-select--font-family h-7 w-[108px] shrink-0 border-0 bg-transparent px-1 shadow-none"
+              variant="ghost"
+              className="docs-toolbar-select docs-toolbar-select--font-family h-7 w-[108px] shrink-0 border-0 bg-transparent px-1 py-0 shadow-none"
               style={
                 fontFamilyState.kind === "single"
                   ? {
diff --git a/styles/richtext-editor.css b/styles/richtext-editor.css
index eee8c7c..d0754a7 100644
--- a/styles/richtext-editor.css
+++ b/styles/richtext-editor.css
@@ -1046,29 +1046,37 @@ html.dark .docs-menu-badge {
 
 .docs-toolbar-select--style,
 .docs-toolbar-select--font-family {
+  height: 28px !important;
+  min-height: 28px !important;
+  max-height: 28px !important;
+  padding-block: 0 !important;
   border-radius: 4px;
 }
 
-.docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--style:hover,
-.docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--style:focus-visible,
-.docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--style[data-state="open"],
-.docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--font-family:hover,
-.docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--font-family:focus-visible,
-.docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--font-family[data-state="open"] {
-  background: #e8eaed !important;
+.docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--style:hover:not(:disabled),
+.docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--font-family:hover:not(:disabled),
+.docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--style[data-state="open"]:not(:disabled),
+.docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--font-family[data-state="open"]:not(:disabled) {
+  background: #d3e3fd !important;
   box-shadow: none !important;
 }
 
-.dark .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--style:hover,
-.dark .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--style:focus-visible,
-.dark .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--style[data-state="open"],
-.dark .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--font-family:hover,
-.dark .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--font-family:focus-visible,
-.dark .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--font-family[data-state="open"] {
+.dark .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--style:hover:not(:disabled),
+.dark .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--font-family:hover:not(:disabled),
+.dark .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--style[data-state="open"]:not(:disabled),
+.dark .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--font-family[data-state="open"]:not(:disabled) {
   background: #444746 !important;
   box-shadow: none !important;
 }
 
+.docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--style:focus-visible:not([data-state="open"]),
+.docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--font-family:focus-visible:not([data-state="open"]),
+.dark .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--style:focus-visible:not([data-state="open"]),
+.dark .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--font-family:focus-visible:not([data-state="open"]) {
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
 .docs-toolbar-select [data-slot="select-value"] {
   color: inherit;
 }