feat: themes (#902)

* chore: add next theme and initial setup

* chore: add dark mode colors to layouts

* chore: user general setting page theming

* chore: dashboard theming

* chore: project page theming

* chore: workspace setting page theming

* chore: my issue page theming

* chore: cmdk theming

* chore: change hardcode bg and text color to theme

* chore: change color name according to the design

* style: fix card in the dashboard

* style: fix merge conflict design issues

* style: add light high contrast and dark high contrast

* style: fix cmd k menu color and selection

* feat: change theme from cmdk menu

* chore: add multiple theme field to custom theme

* chore: removed custom theming

* fix: build error

---------

Co-authored-by: Saheb Giri <iamsahebgiri@gmail.com>

apps/app/components/rich-text-editor/index.tsx

@@ -195,9 +195,11 @@ const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
         manager={manager}
         initialContent={state}
         classNames={[
-          `p-4 relative focus:outline-none rounded-md focus:border-gray-200 ${
-            noBorder ? "" : "border"
-          } ${borderOnFocus ? "focus:border" : "focus:border-0"} ${customClassName}`,
+          `p-4 relative focus:outline-none rounded-md focus:border-brand-base ${
+            noBorder ? "" : "border border-brand-base"
+          } ${
+            borderOnFocus ? "focus:border border-brand-base" : "focus:border-0"
+          } ${customClassName}`,
         ]}
         editable={editable}
         onBlur={() => {
@@ -207,7 +209,9 @@ const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
         {(!value || value === "" || value?.content?.[0]?.content === undefined) &&
           !(typeof value === "string" && value.includes("<")) &&
           placeholder && (
-            <p className="absolute pointer-events-none top-4 left-4 text-gray-300">{placeholder}</p>
+            <p className="absolute pointer-events-none top-4 left-4 text-brand-secondary">
+              {placeholder}
+            </p>
           )}
         <EditorComponent />
 

apps/app/components/rich-text-editor/toolbar/float-tool-tip.tsx

@@ -21,7 +21,7 @@ export const CustomFloatingToolbar: React.FC<Props> = ({ gptOption, editorState
   const active = useActive();
 
   return (
-    <div className="z-[99999] flex items-center gap-y-2 divide-x rounded border bg-white p-1 px-0.5 shadow-md">
+    <div className="z-[99999] flex items-center gap-y-2 divide-x divide-brand-base rounded border border-brand-base bg-brand-surface-2 p-1 px-0.5 shadow-md">
       <div className="flex items-center gap-x-1 px-2">
         <ToggleHeadingButton
           attrs={{
@@ -51,7 +51,11 @@ export const CustomFloatingToolbar: React.FC<Props> = ({ gptOption, editorState
       </div>
       {gptOption && (
         <div className="flex items-center gap-x-1 px-2">
-          <button type="button" className="rounded py-1 px-1.5 text-xs hover:bg-gray-100">
+          <button
+            type="button"
+            className="rounded py-1 px-1.5 text-xs hover:bg-brand-surface-1"
+            onClick={() => console.log(editorState.selection.$anchor.nodeBefore)}
+          >
             AI
           </button>
         </div>

apps/app/components/rich-text-editor/toolbar/link.tsx

@@ -173,12 +173,12 @@ export const FloatingLinkToolbar = () => {
   return (
     <>
       {!isEditing && (
-        <FloatingToolbar className="rounded bg-white p-1 shadow-lg">
+        <FloatingToolbar className="rounded bg-brand-surface-2 p-1 shadow-lg">
           {linkEditButtons}
         </FloatingToolbar>
       )}
       {!isEditing && empty && (
-        <FloatingToolbar positioner={linkPositioner} className="rounded bg-white p-1 shadow-lg">
+        <FloatingToolbar positioner={linkPositioner} className="rounded bg-brand-surface-2 p-1 shadow-lg">
           {linkEditButtons}
         </FloatingToolbar>
       )}

apps/app/components/rich-text-editor/toolbar/table-controls.tsx

@@ -8,7 +8,7 @@ export const TableControls = () => {
       <button
         type="button"
         onClick={() => createTable({ rowsCount: 3, columnsCount: 3, withHeaderRow: false })}
-        className="rounded p-1 hover:bg-gray-100"
+        className="rounded p-1 hover:bg-brand-surface-1"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -28,7 +28,7 @@ export const TableControls = () => {
       <button
         type="button"
         onClick={() => commands.deleteTable()}
-        className="rounded p-1 hover:bg-gray-100"
+        className="rounded p-1 hover:bg-brand-surface-1"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"