editor changes

packages/ui/components/editor/Editor.tsx

@@ -68,7 +68,7 @@ export const Editor = (props: TextEditorProps) => {
           <div className="editor-inner" style={{ height: props.height }}>
             <RichTextPlugin
               contentEditable={<ContentEditable style={{ height: props.height }} className="editor-input" />}
-              placeholder={<div className="-mt-11 p-3 text-sm text-gray-300">{props.placeholder || ""}</div>}
+              placeholder={<div className="text-muted -mt-11 p-3 text-sm">{props.placeholder || ""}</div>}
             />
             <ListPlugin />
             <LinkPlugin />

packages/ui/components/editor/plugins/ToolbarPlugin.tsx

@@ -27,7 +27,7 @@ import { createPortal } from "react-dom";
 
 import { Button } from "../../button";
 import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../form/dropdown";
-import { FiChevronDown } from "../../icon";
+import { FiBold, FiChevronDown, FiItalic, FiLink } from "../../icon";
 import type { TextEditorProps } from "../Editor";
 import { AddVariablesDropdown } from "./AddVariablesDropdown";
 
@@ -436,7 +436,7 @@ export default function ToolbarPlugin(props: TextEditorProps) {
               }}
               className={"toolbar-item spaced rounded-md " + (isBold ? "active" : "")}
               aria-label="Format Bold">
-              <i className="format bold" />
+              <FiBold />
             </button>
           )}
           {!props.excludedToolbarItems?.includes("italic") && (
@@ -450,7 +450,7 @@ export default function ToolbarPlugin(props: TextEditorProps) {
               }}
               className={"toolbar-item spaced rounded-md " + (isItalic ? "active" : "")}
               aria-label="Format Italics">
-              <i className="format italic" />
+              <FiItalic />
             </button>
           )}
           {!props.excludedToolbarItems?.includes("link") && (
@@ -460,7 +460,7 @@ export default function ToolbarPlugin(props: TextEditorProps) {
                 onClick={insertLink}
                 className={"toolbar-item spaced rounded-md " + (isLink ? "active" : "")}
                 aria-label="Insert Link">
-                <i className="format link" />
+                <FiLink />
               </button>
               {isLink && createPortal(<FloatingLinkEditor editor={editor} />, document.body)}{" "}
             </>

packages/ui/components/editor/stylesEditor.css

@@ -24,13 +24,13 @@
   line-height: 20px;
   font-weight: 400;
   text-align: left;
-  border-color: #D1D5DB;
+  border-color: var(--cal-border);
   border-width: 1px;
   padding: 1px;
 }
 
 .editor-inner {
-  background: #fff;
+  background: var(--cal-bg);
   position: relative;
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
@@ -70,6 +70,7 @@
 .editor-paragraph {
   margin: 0;
   position: relative;
+  color: var(--cal-text)
 }
 
 .editor-paragraph:last-child {
@@ -119,7 +120,7 @@ pre::-webkit-scrollbar-thumb {
 .toolbar {
   display: flex;
   margin-bottom: 1px;
-  background: #fff;
+  background: var(--cal-bg);
   padding: 2px;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
@@ -127,44 +128,33 @@ pre::-webkit-scrollbar-thumb {
 }
 
 .toolbar button.toolbar-item {
-  border: 0;
   display: flex;
+  border: 0;
   padding: 8px;
   cursor: pointer;
-  vertical-align: middle;
-  height: 36px;
+  justify-self: center;
 }
 
 .toolbar button.toolbar-item.spaced {
   margin-right: 2px;
 }
 
-.toolbar button.toolbar-item i.format {
-  background-size: contain;
-  display: inline-block;
-  height: 18px;
-  width: 18px;
-  margin-top: 1px;
-  margin-left: 1px;
-  vertical-align: -0.25em;
-  display: flex;
-  opacity: 0.6;
-}
-
 .icon.paragraph {
   background-image: url(images/icons/text-paragraph.svg);
 }
 
 .toolbar button.toolbar-item.active {
-  background-color: rgba(223, 232, 250, 0.3);
+  background-color: var(--cal-bg-inverted);
+  color: var(--cal-text-inverted)
 }
 
 .toolbar button.toolbar-item.active i {
   opacity: 1;
 }
 
-.toolbar .toolbar-item:hover:not([disabled]) {
-  background-color: #eee;
+.toolbar button.toolbar-item:not(.active):not([disabled]) {
+  background-color: var(--cal-bg);
+  color: var(--cal-text);
 }
 
 .toolbar select.toolbar-item {
@@ -174,6 +164,7 @@ pre::-webkit-scrollbar-thumb {
   border-radius: 10px;
   padding: 8px;
   vertical-align: middle;
+  appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   width: 70px;
@@ -187,7 +178,6 @@ pre::-webkit-scrollbar-thumb {
   width: 200px;
   vertical-align: middle;
   font-size: 14px;
-  color: #777;
   text-overflow: ellipsis;
   width: 70px;
   overflow: hidden;
@@ -197,12 +187,7 @@ pre::-webkit-scrollbar-thumb {
 
 .toolbar .toolbar-item .icon {
   display: flex;
-  width: 20px;
-  height: 20px;
-  user-select: none;
-  margin-right: 8px;
-  line-height: 16px;
-  background-size: contain;
+  color: var(--cal-text);
 }
 
 #block-controls button:hover {
@@ -364,6 +349,10 @@ pre::-webkit-scrollbar-thumb {
   vertical-align: -0.25em;
 }
 
+i, .icon {
+  fill: currentColor;
+}
+
 .icon.paragraph {
   background-image: url(images/icons/text-paragraph.svg);
 }