styles: reorg styles

unit-mesh · Dec 11, 2023 · 1141fd8 · 1141fd8
1 parent 193861d
commit 1141fd8
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 31 deletions.
diff --git a/web/core/lib/editor/editor.css b/web/core/lib/editor/editor.css
@@ -1,11 +1,18 @@
+@import '@/../node_modules/@radix-ui/themes/styles.css';
 @import '@/../node_modules/@radix-ui/colors/black-alpha.css';
 @import '@/../node_modules/@radix-ui/colors/mauve.css';
 @import '@/../node_modules/@radix-ui/colors/violet.css';
 
+@import "@/../node_modules/tailwindcss/base";
+@import "@/../node_modules/tailwindcss/components";
+@import "@/../node_modules/tailwindcss/utilities";
+@import "@/../node_modules/tailwindcss/screens";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 @tailwind screens;
+
 .tiptap {
     font-size: 1.1em;
 }
@@ -76,6 +83,10 @@
     color: #03467d;
 }
 
+.b3-color-light-blue {
+    color: #63c3fd;
+}
+
 .b3-color-red {
     color: #da4167;
 }
@@ -96,15 +107,15 @@
     background-color: #fad35e;
 }
 
-.ToggleGroup {
+.toggle-group {
     display: flex;
     border-radius: 4px;
     justify-content: center;
     width: fit-content;
     margin: 0 auto;
 }
 
-.ToggleGroupItem {
+.toggle-group-item {
     cursor: pointer;
     background-color: white;
     color: var(--mauve-11);
@@ -118,50 +129,51 @@
     margin-left: 1px;
 }
 
-.ToggleGroupItem:first-child {
+.toggle-group-item:first-child {
     margin-left: 0;
     border-top-left-radius: 4px;
     border-bottom-left-radius: 4px;
 }
 
-.ToggleGroupItem:last-child {
+.toggle-group-item:last-child {
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
 }
 
-.ToggleGroupItem:hover {
-    background-color: var(--violet-3);
+.toggle-group-item:hover {
+    background-color: #03467d;
+    color: #fff;
 }
 
-.ToggleGroupItem.is-active {
-    background-color: var(--violet-5);
-    color: var(--violet-11);
+.toggle-group-item.is-active {
+    background-color: #63c3fd;
+    color: #fff;
 }
 
-.ToggleGroupItem:focus {
+.toggle-group-item:focus {
     position: relative;
-    box-shadow: 0 0 0 2px var(--violet-11);
+    box-shadow: 0 0 0 2px #03467d;
 }
 
-.BubbleMenuGroup {
+.bubble-menu-group {
     width: 240px;
     border-radius: 4px;
     box-shadow: 0 2px 2px var(--black-a7);
 }
 
-.BubbleMenuGroup svg {
+.bubble-menu-group svg {
     display: inline-block;
 }
 
-.BubbleMenuItem {
+.bubble-menu-item {
     padding: 0.5em;
     background: #fff;
     color: #000;
     cursor: pointer;
     border: 1px solid var(--violet-6);
 }
 
-.BubbleMenuItem svg {
+.bubble-menu-item svg {
     color: var(--violet-11);
     font-weight: bold;
     display: inline;
@@ -301,7 +313,7 @@
 }
 
 .ProseMirror delete {
-    color: red;
+    color: #da4167;
     text-decoration: line-through;
 }
 

diff --git a/web/core/lib/editor/menu/toolbar-menu.tsx b/web/core/lib/editor/menu/toolbar-menu.tsx
@@ -27,109 +27,109 @@ export interface ToolbarProps {
 export const ToolbarMenu = ({ editor, isBubbleMenu = false, className }: ToolbarProps) => {
 	return (
 		<ToggleGroup.Root
-			className={`${className} ToggleGroup`}
+			className={`${className} toggle-group`}
 			type="single"
 			defaultValue="center"
 			aria-label="Text alignment"
 		>
 			<ToggleGroup.Item
 				onClick={() => editor.chain().focus().toggleBold().run()}
 				disabled={!editor.can().chain().focus().toggleBold().run()}
-				className={editor.isActive('bold') ? 'is-active ToggleGroupItem' : 'ToggleGroupItem'}
+				className={editor.isActive('bold') ? 'is-active toggle-group-item' : 'toggle-group-item'}
 				value="left" aria-label="Left aligned"
 			>
 				<FontBoldIcon/>
 			</ToggleGroup.Item>
 			<ToggleGroup.Item
 				onClick={() => editor.chain().focus().toggleItalic().run()}
 				disabled={!editor.can().chain().focus().toggleItalic().run()}
-				className={editor.isActive('italic') ? 'is-active ToggleGroupItem' : 'ToggleGroupItem'}
+				className={editor.isActive('italic') ? 'is-active toggle-group-item' : 'toggle-group-item'}
 				value="center" aria-label="Center aligned"
 			>
 				<FontItalicIcon/>
 			</ToggleGroup.Item>
 			<ToggleGroup.Item
 				onClick={() => editor.chain().focus().toggleStrike().run()}
 				disabled={!editor.can().chain().focus().toggleStrike().run()}
-				className={editor.isActive('strike') ? 'is-active ToggleGroupItem' : 'ToggleGroupItem'}
+				className={editor.isActive('strike') ? 'is-active toggle-group-item' : 'toggle-group-item'}
 				value="center" aria-label="Center aligned"
 			>
 				<StrikethroughIcon/>
 			</ToggleGroup.Item>
 			<ToggleGroup.Item
 				onClick={() => editor.chain().focus().toggleCode().run()}
 				disabled={!editor.can().chain().focus().toggleCode().run()}
-				className={editor.isActive('code') ? 'is-active ToggleGroupItem' : 'ToggleGroupItem'}
+				className={editor.isActive('code') ? 'is-active toggle-group-item' : 'toggle-group-item'}
 				value="center" aria-label="Center aligned"
 			>
 				<CodeIcon/>
 			</ToggleGroup.Item>
 			<ToggleGroup.Item
 				onClick={() => editor.chain().focus().setParagraph().run()}
-				className={editor.isActive('paragraph') ? 'is-active ToggleGroupItem' : 'ToggleGroupItem'}
+				className={editor.isActive('paragraph') ? 'is-active toggle-group-item' : 'toggle-group-item'}
 				value="center" aria-label="Center aligned"
 			>
 				<TextIcon/>
 			</ToggleGroup.Item>
 			<ToggleGroup.Item
 				onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
-				className={editor.isActive('heading', { level: 1 }) ? 'is-active ToggleGroupItem' : 'ToggleGroupItem'}
+				className={editor.isActive('heading', { level: 1 }) ? 'is-active toggle-group-item' : 'toggle-group-item'}
 				value="center" aria-label="Center aligned"
 			>
 				H1
 			</ToggleGroup.Item>
 			<ToggleGroup.Item
 				onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
-				className={editor.isActive('heading', { level: 2 }) ? 'is-active ToggleGroupItem' : 'ToggleGroupItem'}
+				className={editor.isActive('heading', { level: 2 }) ? 'is-active toggle-group-item' : 'toggle-group-item'}
 				value="center" aria-label="Center aligned"
 			>
 				H2
 			</ToggleGroup.Item>
 			<ToggleGroup.Item
 				onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
-				className={editor.isActive('heading', { level: 3 }) ? 'is-active ToggleGroupItem' : 'ToggleGroupItem'}
+				className={editor.isActive('heading', { level: 3 }) ? 'is-active toggle-group-item' : 'toggle-group-item'}
 				value="center" aria-label="Center aligned"
 			>
 				H3
 			</ToggleGroup.Item>
 			<ToggleGroup.Item
 				onClick={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
-				className={editor.isActive('heading', { level: 4 }) ? 'is-active ToggleGroupItem' : 'ToggleGroupItem'}
+				className={editor.isActive('heading', { level: 4 }) ? 'is-active toggle-group-item' : 'toggle-group-item'}
 				value="center" aria-label="Center aligned"
 			>
 				H4
 			</ToggleGroup.Item>
 			<ToggleGroup.Item
 				onClick={() => editor.chain().focus().toggleBulletList().run()}
-				className={editor.isActive('bulletList') ? 'is-active ToggleGroupItem' : 'ToggleGroupItem'}
+				className={editor.isActive('bulletList') ? 'is-active toggle-group-item' : 'toggle-group-item'}
 				value="center" aria-label="Center aligned"
 			>
 				<ListBulletIcon/>
 			</ToggleGroup.Item>
 			<ToggleGroup.Item
 				onClick={() => editor.chain().focus().toggleOrderedList().run()}
-				className={editor.isActive('orderedList') ? 'is-active ToggleGroupItem' : 'ToggleGroupItem'}
+				className={editor.isActive('orderedList') ? 'is-active toggle-group-item' : 'toggle-group-item'}
 				value="center" aria-label="Center aligned"
 			>
 				<ActivityLogIcon/>
 			</ToggleGroup.Item>
 			<ToggleGroup.Item
 				onClick={() => editor.chain().focus().toggleCodeBlock().run()}
-				className={editor.isActive('codeBlock') ? 'is-active ToggleGroupItem' : 'ToggleGroupItem'}
+				className={editor.isActive('codeBlock') ? 'is-active toggle-group-item' : 'toggle-group-item'}
 				value="center" aria-label="Center aligned"
 			>
 				<CodeIcon/>
 			</ToggleGroup.Item>
 			<ToggleGroup.Item
 				onClick={() => editor.chain().focus().toggleBlockquote().run()}
-				className={editor.isActive('blockquote') ? 'is-active ToggleGroupItem' : 'ToggleGroupItem'}
+				className={editor.isActive('blockquote') ? 'is-active toggle-group-item' : 'toggle-group-item'}
 				value="center" aria-label="Center aligned"
 			>
 				<QuoteIcon/>
 			</ToggleGroup.Item>
 			<ToggleGroup.Item
 				onClick={() => editor.chain().focus().setHorizontalRule().run()}
-				className={'ToggleGroupItem'}
+				className={'toggle-group-item'}
 				value="center" aria-label="Center aligned"
 			>
 				<DividerHorizontalIcon/>