refactor: define $todoist-colors map and use that

jamiebrynes7 · Aug 5, 2024 · ce8e619 · ce8e619
1 parent 407b4f7
commit ce8e619
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 222 deletions.
diff --git a/plugin/src/index.ts b/plugin/src/index.ts
@@ -1,6 +1,6 @@
+import "@/styles/main.scss";
 import { App, Plugin } from "obsidian";
 import type { PluginManifest } from "obsidian";
-import "../styles.css";
 import { TodoistApiClient } from "./api";
 import { ObsidianFetcher } from "./api/fetcher";
 import { registerCommands } from "./commands";

diff --git a/plugin/src/styles/colors.scss b/plugin/src/styles/colors.scss
@@ -0,0 +1,22 @@
+$todoist-colors: (
+  "berry-red": #b8256f,
+  "red": #db4035,
+  "orange": #ff9933,
+  "yellow": #fad000,
+  "olive-green": #afb83b,
+  "lime-green": #7ecc49,
+  "green": #299438,
+  "mint-green": #6accbc,
+  "teal": #158fad,
+  "sky-blue": #14aaf5,
+  "light-blue": #96c3eb,
+  "blue": #4073ff,
+  "grape": #884dff,
+  "violet": #af38eb,
+  "lavender": #eb96eb,
+  "magenta": #e05194,
+  "salmon": #ff8d85,
+  "charcoal": #808080,
+  "grey": #b8b8b8,
+  "taupe": #ccac93,
+);
diff --git a/plugin/src/styles/main.scss b/plugin/src/styles/main.scss
@@ -0,0 +1,47 @@
+@import "colors";
+
+body {
+  @each $name, $color in $todoist-colors {
+    --todoist-#{$name}: #{$color};
+  }
+}
+
+.theme-dark {
+  --todoist-p1-border: #ff7066;
+  --todoist-p1-border-hover: #ff706680;
+  --todoist-p1-background: rgba(255, 112, 102, 0.1);
+
+  --todoist-p2-border: #ff9a14;
+  --todoist-p2-border-hover: #ff9a1480;
+  --todoist-p2-background: rgba(255, 154, 20, 0.1);
+
+  --todoist-p3-border: #5297ff;
+  --todoist-p3-border-hover: #5297ff80;
+  --todoist-p3-background: rgba(82, 151, 255, 0.1);
+
+  --todoist-p4-border: var(--color-base-50);
+  --todoist-p4-border-hover: var(--color-base-50);
+  --todoist-p4-background: unset;
+
+  --todoist-task-separator-color: var(--color-base-30);
+}
+
+.theme-light {
+  --todoist-p1-border: #d1453b;
+  --todoist-p1-border-hover: #d1453b80;
+  --todoist-p1-background: rgba(209, 69, 59, 0.1);
+
+  --todoist-p2-border: #eb8909;
+  --todoist-p2-border-hover: #eb890980;
+  --todoist-p2-background: rgba(235, 137, 9, 0.1);
+
+  --todoist-p3-border: #246fe0;
+  --todoist-p3-border-hover: #246fe080;
+  --todoist-p3-background: rgba(36, 111, 224, 0.1);
+
+  --todoist-p4-border: var(--color-base-50);
+  --todoist-p4-border-hover: var(--color-base-50);
+  --todoist-p4-background: unset;
+
+  --todoist-task-separator-color: var(--color-base-25);
+}
diff --git a/plugin/src/ui/query/styles.scss b/plugin/src/ui/query/styles.scss
@@ -1,3 +1,5 @@
+@import "../../styles/colors.scss";
+
 .todoist-query-header {
   display: flex;
   align-items: center;
@@ -160,164 +162,14 @@
           color: var(--todoist-label-color);
         }
 
-        &[data-project-color="berry_red"] {
-          --todoist-project-color: var(--todoist-berry-red);
-        }
-
-        &[data-project-color="red"] {
-          --todoist-project-color: var(--todoist-red);
-        }
-
-        &[data-project-color="orange"] {
-          --todoist-project-color: var(--todoist-orange);
-        }
-
-        &[data-project-color="yellow"] {
-          --todoist-project-color: var(--todoist-yellow);
-        }
-
-        &[data-project-color="olive_green"] {
-          --todoist-project-color: var(--todoist-olive-green);
-        }
-
-        &[data-project-color="lime_green"] {
-          --todoist-project-color: var(--todoist-lime-green);
-        }
-
-        &[data-project-color="green"] {
-          --todoist-project-color: var(--todoist-green);
-        }
-
-        &[data-project-color="mint_green"] {
-          --todoist-project-color: var(--todoist-mint-green);
-        }
-
-        &[data-project-color="teal"] {
-          --todoist-project-color: var(--todoist-teal);
-        }
-
-        &[data-project-color="sky_blue"] {
-          --todoist-project-color: var(--todoist-sky-blue);
-        }
-
-        &[data-project-color="light_blue"] {
-          --todoist-project-color: var(--todoist-light-blue);
-        }
-
-        &[data-project-color="blue"] {
-          --todoist-project-color: var(--todoist-blue);
-        }
-
-        &[data-project-color="grape"] {
-          --todoist-project-color: var(--todoist-grape);
-        }
-
-        &[data-project-color="violet"] {
-          --todoist-project-color: var(--todoist-violet);
-        }
-
-        &[data-project-color="lavender"] {
-          --todoist-project-color: var(--todoist-lavender);
-        }
-
-        &[data-project-color="magenta"] {
-          --todoist-project-color: var(--todoist-magenta);
-        }
-
-        &[data-project-color="salmon"] {
-          --todoist-project-color: var(--todoist-salmon);
-        }
-
-        &[data-project-color="charcoal"] {
-          --todoist-project-color: var(--todoist-charcoal);
-        }
-
-        &[data-project-color="grey"] {
-          --todoist-project-color: var(--todoist-grey);
-        }
-
-        &[data-project-color="taupe"] {
-          --todoist-project-color: var(--todoist-taupe);
-        }
-
-        &[data-label-color="berry_red"] {
-          --todoist-label-color: var(--todoist-berry-red);
-        }
-
-        &[data-label-color="red"] {
-          --todoist-label-color: var(--todoist-red);
-        }
-
-        &[data-label-color="orange"] {
-          --todoist-label-color: var(--todoist-orange);
-        }
-
-        &[data-label-color="yellow"] {
-          --todoist-label-color: var(--todoist-yellow);
-        }
-
-        &[data-label-color="olive_green"] {
-          --todoist-label-color: var(--todoist-olive-green);
-        }
-
-        &[data-label-color="lime_green"] {
-          --todoist-label-color: var(--todoist-lime-green);
-        }
-
-        &[data-label-color="green"] {
-          --todoist-label-color: var(--todoist-green);
-        }
-
-        &[data-label-color="mint_green"] {
-          --todoist-label-color: var(--todoist-mint-green);
-        }
-
-        &[data-label-color="teal"] {
-          --todoist-label-color: var(--todoist-teal);
-        }
-
-        &[data-label-color="sky_blue"] {
-          --todoist-label-color: var(--todoist-sky-blue);
-        }
-
-        &[data-label-color="light_blue"] {
-          --todoist-label-color: var(--todoist-light-blue);
-        }
-
-        &[data-label-color="blue"] {
-          --todoist-label-color: var(--todoist-blue);
-        }
-
-        &[data-label-color="grape"] {
-          --todoist-label-color: var(--todoist-grape);
-        }
-
-        &[data-label-color="violet"] {
-          --todoist-label-color: var(--todoist-violet);
-        }
-
-        &[data-label-color="lavender"] {
-          --todoist-label-color: var(--todoist-lavender);
-        }
-
-        &[data-label-color="magenta"] {
-          --todoist-label-color: var(--todoist-magenta);
-        }
-
-        &[data-label-color="salmon"] {
-          --todoist-label-color: var(--todoist-salmon);
-        }
-
-        &[data-label-color="charcoal"] {
-          --todoist-label-color: var(--todoist-charcoal);
-        }
-
-        &[data-label-color="grey"] {
-          --todoist-label-color: var(--todoist-grey);
-        }
+        @each $name, $color in $todoist-colors {
+          &[data-project-color="#{$name}"] {
+            --todoist-project-color: var(--todoist-#{$name});
+          }
 
-        &[data-label-color="taupe"] {
-          --todoist-label-color: var(--todoist-taupe);
+          &[data-label-color="#{$name}"] {
+            --todoist-label-color: var(--todoist-#{$name});
+          }
         }
       }
     }

diff --git a/plugin/src/ui/query/task/TaskMetadata.tsx b/plugin/src/ui/query/task/TaskMetadata.tsx
@@ -34,7 +34,7 @@ const metadata: MetadataDefinition[] = [
             ? task.project.name
             : `${task.project.name} / ${task.section.name}`,
         attr: {
-          "data-project-color": task.project.color,
+          "data-project-color": task.project.color.replace("_", "-"),
         },
       },
     ],
@@ -62,7 +62,7 @@ const metadata: MetadataDefinition[] = [
     content: (task) =>
       task.labels.map((label) => ({
         content: label.name,
-        attr: { "data-label-color": label.color },
+        attr: { "data-label-color": label.color.replace("_", "-") },
       })),
     icon: {
       id: "tag",

diff --git a/plugin/styles.css b/plugin/styles.css