🔨 FIX: richtext styles

Tohuhono · Jun 24, 2024 · 91c0e0b · 91c0e0b
1 parent eed0622
commit 91c0e0b
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 13 deletions.
diff --git a/.changeset/thick-items-rule.md b/.changeset/thick-items-rule.md
@@ -0,0 +1,5 @@
+---
+"@tohuhono/puck-rich-text": patch
+---
+
+fix dropdown css variables and cursor
diff --git a/packages/tohuhono/puck-rich-text/src/rich-text-editor/editor-client.tsx b/packages/tohuhono/puck-rich-text/src/rich-text-editor/editor-client.tsx
@@ -20,7 +20,7 @@ export function Editor({
   return (
     <div
       style={{
-        cursor: isSelected ? "default" : "grab",
+        cursor: isSelected ? "auto" : "grab",
         pointerEvents: "auto",
       }}
     >

diff --git a/...ges/tohuhono/puck-rich-text/src/rich-text-editor/lexical/plugins/toolbar-plugin/index.tsx b/...ges/tohuhono/puck-rich-text/src/rich-text-editor/lexical/plugins/toolbar-plugin/index.tsx
@@ -263,7 +263,7 @@ export function ToolbarPlugin({
         display: "flex",
         gap: "4px",
         paddingLeft: "12px",
-        borderLeft: "1px solid var(--puck-color-grey-4)",
+        borderLeft: "1px solid var(--puck-color-grey-04)",
         marginLeft: "8px",
       }}
     >

diff --git a/packages/tohuhono/puck-rich-text/src/rich-text-editor/lexical/ui/button/styles.module.css b/packages/tohuhono/puck-rich-text/src/rich-text-editor/lexical/ui/button/styles.module.css
@@ -1,7 +1,7 @@
 .ToolbarButton {
   background: transparent;
   border: none;
-  color: var(--puck-color-grey-8);
+  color: var(--puck-color-grey-08);
   cursor: pointer;
   padding: 6px 8px;
   border-radius: 4px;
@@ -13,19 +13,19 @@
 }
 
 .ToolbarButton:focus-visible {
-  outline: 2px solid var(--puck-color-azure-5);
+  outline: 2px solid var(--puck-color-azure-05);
   outline-offset: -2px;
 }
 
 @media (hover: hover) {
   .ToolbarButton:hover {
-    background: var(--puck-color-grey-2);
-    color: var(--puck-color-azure-6);
+    background: var(--puck-color-grey-02);
+    color: var(--puck-color-azure-06);
     cursor: pointer;
   }
 }
 
 .ToolbarButton:active {
-  color: var(--puck-color-azure-7);
+  color: var(--puck-color-azure-07);
   transition: none;
 }
diff --git a/...s/tohuhono/puck-rich-text/src/rich-text-editor/lexical/ui/dropdown-menu/styles.module.css b/...s/tohuhono/puck-rich-text/src/rich-text-editor/lexical/ui/dropdown-menu/styles.module.css
@@ -1,5 +1,5 @@
 .DropdownMenu-content {
-  background: var(--puck-color-grey-0);
+  background: var(--puck-color-grey-01);
   padding: 4px;
   border-radius: 8px;
   font-size: var(--puck-font-size-xxs);
@@ -9,7 +9,7 @@
 .DropdownMenu-action {
   background: transparent;
   border: none;
-  color: var(--puck-color-grey-7);
+  color: var(--puck-color-grey-07);
   cursor: pointer;
   padding: 6px 8px;
   border-radius: 4px;
@@ -21,19 +21,19 @@
 }
 
 .DropdownMenu-action:focus-visible {
-  outline: 2px solid var(--puck-color-azure-5);
+  outline: 2px solid var(--puck-color-azure-05);
   outline-offset: -2px;
 }
 
 @media (hover: hover) {
   .DropdownMenu-action:hover {
-    background: var(--puck-color-grey-2);
-    color: var(--puck-color-azure-5);
+    background: var(--puck-color-grey-02);
+    color: var(--puck-color-azure-05);
     cursor: pointer;
   }
 }
 
 .DropdownMenu-action:active {
-  color: var(--puck-color-azure-7);
+  color: var(--puck-color-azure-07);
   transition: none;
 }