feat: define custom colors for status and priorities (#18)

* fix: broken images in in-app readme

* feat: add color code to status and priorities

Author: griimick

README.md

@@ -12,29 +12,29 @@
 </p>
 
 <p align="center">
-	<img src="./assets/preview.webp"/>
+	<img src="https://raw.githubusercontent.com/catppuccin/logseq/main/assets/preview.webp"/>
 </p>
 
 ## Previews
 
 <details>
 <summary>🌻 Latte</summary>
-<img src="./assets/preview-latte.webp"/>
+<img src="https://raw.githubusercontent.com/catppuccin/logseq/main/assets/preview-latte.webp"/>
 <blockquote>Selected Accent: Red</blockquote>
 </details>
 <details>
 <summary>🪴 Frappé</summary>
-<img src="./assets/preview-frappe.webp"/>
+<img src="https://raw.githubusercontent.com/catppuccin/logseq/main/assets/preview-frappe.webp"/>
 <blockquote>Selected Accent: Pink</blockquote>
 </details>
 <details>
 <summary>🌺 Macchiato</summary>
-<img src="./assets/preview-macchiato.webp"/>
+<img src="https://raw.githubusercontent.com/catppuccin/logseq/main/assets/preview-macchiato.webp"/>
 <blockquote>Selected Accent: Yellow</blockquote>
 </details>
 <details>
 <summary>🌿 Mocha</summary>
-<img src="./assets/preview-mocha.webp"/>
+<img src="https://raw.githubusercontent.com/catppuccin/logseq/main/assets/preview-mocha.webp"/>
 <blockquote>Selected Accent: Green</blockquote>
 </details>
 
@@ -48,7 +48,7 @@ There are couple of other methods you can use to set the theme up in Logseq. Lat
     1. Search for 'catppuccin' in `Plugins` > `Marketplace` > `Themes` and install the plugin. 
     2. Choose the the appropriate theme variant from `Settings` > `Themes`.
 
-<img src="./assets/ctp-logseq-marketplace.webp"/>
+<img src="https://raw.githubusercontent.com/catppuccin/logseq/main/assets/ctp-logseq-marketplace.webp"/>
 
 2. Import theme stylesheet by setting it in your `config.edn` ([source](https://github.com/logseq/logseq/blob/master/templates/config.edn#L72)). Set one of the following in your config and restart Logseq.
 
@@ -76,15 +76,15 @@ There are couple of other methods you can use to set the theme up in Logseq. Lat
 1. Theme settings can be accessed under `Settings` > `Plugins` > `Catppuccin`
 2. Select an accent color of choice from the dropdown under `CtpAccent` setting.
 
-<img src="./assets/ctp-logseq-switch-accent.webp"/>
+<img src="https://raw.githubusercontent.com/catppuccin/logseq/main/assets/ctp-logseq-switch-accent.webp"/>
 
 ### Bonus: Oledppuccin
 
 > The _niche_ dark side
 
 You can choose this variant of dark theme under `Settings` > `Themes`. 
 
-<img src="./assets/ctp-oledppuccin.webp"/>
+<img src="https://raw.githubusercontent.com/catppuccin/logseq/main/assets/ctp-oledppuccin.webp"/>
 
 
 ## 💝 Thanks to

scss/_ctp-vars.scss

@@ -198,4 +198,21 @@
   --ctp-tl-selectFill: var(--ctp-accent, var(--ctp-blue));
   --ctp-tl-selectStroke: var(--ctp-accent, var(--ctp-blue));
 
+ // priorites variables
+  --ctp-priority-bg-color: var(--ctp-crust);
+  --ctp-priority-todo: var(--ctp-teal);
+  --ctp-priority-doing: var(--ctp-blue);
+  --ctp-priority-done: var(--ctp-green);
+  --ctp-priority-now: var(--ctp-teal);
+  --ctp-priority-later: var(--ctp-yellow);
+  --ctp-priority-waiting: var(--ctp-maroon);
+  --ctp-priority-a: var(--ctp-red);
+  --ctp-priority-b: var(--ctp-yellow);
+  --ctp-priority-c: var(--ctp-green);
+
+  --ctp-marker-border-radius: 4px;
+  --ctp-checkbox-color: var(--ctp-accent, var(--ctp-teal));
+  --ctp-marker-size: 16px;
 }
+
+

scss/_custom.scss

@@ -359,3 +359,88 @@ i[class*="ti-layout-"] {
 .bg-pink-500 {
   background-color: rgb(var(--ctp-pink));
 }
+
+// Priorities custom styles
+
+.block-marker {
+  background-color: rgb(var(--ctp-priority-bg-color));
+  border-radius: var(--ctp-marker-border-radius);
+  font-size: 75%;
+  &.TODO {
+    color: rgb(var(--ctp-priority-todo));
+  }
+  &.DOING {
+    color: rgb(var(--ctp-priority-doing));
+  }
+  &.NOW {
+    color: rgb(var(--ctp-priority-now));
+  }
+  &.LATER {
+    color: rgb(var(--ctp-priority-later));
+  }
+  &.waiting {
+    color: rgb(var(--ctp-priority-waiting));
+  }
+}
+
+.form-checkbox, .form-checkbox:focus {
+    border-radius: var(--ctp-marker-border-radius);
+    border: 2px solid rgb(var(--ctp-checkbox-color)) !important;
+    background-color: transparent !important;
+    height: var(--ctp-marker-size);
+    width: var(--ctp-marker-size);
+}
+
+.form-checkbox:checked {
+    background-color: rgb(var(--ctp-checkbox-color)) !important;
+}
+
+.form-checkbox:hover {
+    transform: scale(1.1);
+}
+
+a[priority], a.priority {
+    font-size: 0px;
+}
+
+a.priority[href="#/page/A" i], [href="#/page/B" i], [href="#/page/C" i] {
+    display: inline-flex;
+    opacity: 1 !important;
+}
+
+a[priority]::before, a.priority::before {
+    transform: translateY(-1px);
+    border: 1px solid rgb(var(--ctp-priority-bg-color));
+    border-radius: var(--ctp-marker-border-radius);
+    font-size: 12px;
+    font-weight: 600;
+    height: calc(var(--ctp-marker-size) + 4px);
+    width: calc(var(--ctp-marker-size) + 4px);
+    line-height: 1.5;
+    text-align: center;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+a[priority=A]::before, a.priority[href="#/page/A" i]:before {
+    content: "A";
+    background: rgb(var(--ctp-priority-a));
+    color: var(--ctp-primary-background-color);
+}
+
+a[priority=B]::before, a.priority[href="#/page/B" i]:before {
+    content: "B";
+    background: rgb(var(--ctp-priority-b));
+    color: var(--ctp-primary-background-color);
+}
+
+a[priority=C]::before, a.priority[href="#/page/C" i]:before {
+    content: "C";
+    background: rgb(var(--ctp-priority-c));
+    color: var(--ctp-primary-background-color);
+}
+
+a.priority:hover {
+    transform: scale(1.1);
+}

scss/ctp-latte.scss

@@ -42,4 +42,4 @@ $ctp-base: 239, 241, 245;
 
 .form-checkbox:checked {
     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='rgb(#{$ctp-base})' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E") !important;
-}
+}