chore: update deps and README (#58)

README.md

@@ -38,20 +38,30 @@
 <blockquote>Selected Accent: Green</blockquote>
 </details>
 
+
 ## Usage
 
-### Installation
+> [!WARNING]
+> Logseq now officially supports accents for its default theme. Catppuccin Theme **DOES NOT** support the new accent colors.
+> Select **no accent color or Logseq classical color** (one of the first two) for maximum theme compatibility.
+> 
+> ![accent-no-support](https://github.com/user-attachments/assets/d26f0194-a260-4c90-9d75-ca8a86327077)
+
 
-There are couple of other methods you can use to set the theme up in Logseq. Later methods are more for development purpose.
+### Logseq Plugin Marketplace **(Recommended)**
 
-1. Logseq Plugin Marketplace **(Recommended)**
-    1. Search for 'catppuccin' in `Plugins` > `Marketplace` > `Themes` and install the plugin. 
-    2. Choose the the appropriate theme variant from `Settings` > `Themes`.
+1. Search for 'catppuccin' in `Plugins` > `Marketplace` > `Themes` and install the plugin. 
+2. Choose the the appropriate theme variant from `Settings` > `Themes`.
 
 <img src="https://raw.githubusercontent.com/catppuccin/logseq/main/assets/ctp-logseq-marketplace.webp"/>
 
 
-2. Editing custom theme: **`custom.css`** (recommended for mobile). Choose one of the following and restart Logseq
+### Importing external CSS (Recommended for mobile)
+
+A. Add one of the following lines at the start of your `custom.css` and restart Logseq
+
+> [!NOTE]
+> `@import` statement works only when defined at the top of CSS files ([ref](https://developer.mozilla.org/en-US/docs/Web/CSS/@import))
 
 ```css
 @import url('https://logseq.catppuccin.com/ctp-latte.css');
@@ -60,8 +70,9 @@ There are couple of other methods you can use to set the theme up in Logseq. Lat
 @import url('https://logseq.catppuccin.com/ctp-mocha.css');
 @import url('https://logseq.catppuccin.com/ctp-oled.css');
 ```
+OR
 
-3. Editing custom configuration: **`config.edn`** ([source](https://github.com/logseq/logseq/blob/master/src/resources/templates/config.edn#97)) Set one of the following in your config and restart Logseq.
+B. Add one of the following in your custom `config.edn` ([source](https://github.com/logseq/logseq/blob/master/src/resources/templates/config.edn#97)) and restart Logseq.
 
 ```edn
 :custom-css-url "@import url('https://logseq.catppuccin.com/ctp-latte.css');"
@@ -70,30 +81,20 @@ There are couple of other methods you can use to set the theme up in Logseq. Lat
 :custom-css-url "@import url('https://logseq.catppuccin.com/ctp-mocha.css');"
 ```
 
-4. Add manually from GitHub Releases
-    1. Download `.zip` from latest release.
-    2. Extract it to desired location.
-    3. Enable `Developer Mode` under `Settings` > `Advanced`.
-    4. Use the new `Load unpacked plugin` option under `Plugins`, choosing extracted folder to install the theme.
-
-5. Clone Repository and add manually
-    1. Clone repository (including submodules)
-    2. Run `npm ci && npm run build`
-    3. Enable `Developer Mode` under `Settings` > `Advanced`
-    4. Use the new `Load unpacked plugin` option under `Plugins`, choosing repo folder to install the theme.
+## Switching Accent Color
 
-### Switching Accent Color
+This option is only available when the theme installed through the Plugins Marketplace
 
 1. Theme settings can be accessed under `Settings` > `Plugins` > `Catppuccin`
-2. Select an accent color of choice from the dropdown under `CtpAccent` setting.
+2. Select an accent color from the dropdown under `CtpAccent` setting.
 
 <img src="https://raw.githubusercontent.com/catppuccin/logseq/main/assets/ctp-logseq-switch-accent.webp"/>
 
-### Bonus: Oledppuccin
+## Bonus: Oledppuccin
 
 > The _niche_ dark side
 
-You can choose this variant of dark theme under `Settings` > `Themes`. 
+You can choose this dark theme variant under `Settings` > `Themes`. 
 
 <img src="https://raw.githubusercontent.com/catppuccin/logseq/main/assets/ctp-oledppuccin.webp"/>
 

scss/_custom.scss

@@ -505,19 +505,19 @@ html[data-color='none'] {
     .ui-items-container,
     .toolbar-plugin-manager {
         .button {
+            color: var(--ls-header-button-background);
+
             i {
                 color: var(--ls-header-button-background);
             }
 
-            color: var(--ls-header-button-background);
-
             &:hover {
+                color: rgb(var(--ctp-accent, var(--ctp-pink)));
+                background-color: var(--ctp-header-icon-background);
+
                 i, span.ui__icon {
                     color: rgb(var(--ctp-accent, var(--ctp-pink)));
                 }
-
-                color: rgb(var(--ctp-accent, var(--ctp-pink)));
-                background-color: var(--ctp-header-icon-background);
             }
         }
     }
@@ -535,7 +535,7 @@ html[data-color='none'] {
 
         }
     }
-    
+
     .cp__settings-inner {
         min-height: 70dvh;
         max-height: 70dvh;
@@ -545,4 +545,4 @@ html[data-color='none'] {
         background-color: var(--ls-selection-background-color);
         color: var(--ls-selection-text-color);
     }
-}
+}

scss/_highlightjs.scss

@@ -1,7 +1,7 @@
-@use "@catppuccin/highlightjs/sass/catppuccin.variables";
+@use "@catppuccin/highlightjs/sass/catppuccin-variables";
 
 html:not(html[data-color]), html[data-color='logseq'], html[data-color='none'] {
     code.hljs {
         background-color: var(--ctp-tertiary-background-color);
     }
-}
+}

scss/_utils.scss

@@ -1,5 +1,6 @@
 @use "@catppuccin/palette/scss/catppuccin" as catppuccin;
 @use 'sass:math';
+@use "sass:map";
 
 @function strip-unit($value) {
   @return math.div($value, ($value * 0 + 1));
@@ -14,22 +15,22 @@
 }
 
 @function get-flavor-color($flavor, $name) {
-    $map: map-get(catppuccin.$palette, $flavor);
-    @return map-get($map, $name);
+    $map: map.get(catppuccin.$palette, $flavor);
+    @return map.get($map, $name);
 }
 
 @function get-flavor-color-rgb($flavor, $name) {
     @return #{hex-to-rgb(get-flavor-color($flavor, $name))};
 }
 
 @mixin ctp-hsl-vars ($flavor) {
-    @each $color, $hex in map-get(catppuccin.$palette, $flavor) {
+    @each $color, $hex in map.get(catppuccin.$palette, $flavor) {
         --ctp-#{$color}-hsl: #{hex-to-hsl($hex)};
     }
 }
 
 @mixin ctp-rgb-vars ($flavor) {
-    @each $color, $hex in map-get(catppuccin.$palette, $flavor) {
+    @each $color, $hex in map.get(catppuccin.$palette, $flavor) {
         --ctp-#{$color}: #{hex-to-rgb($hex)};
     }
 }