feat: CSS library (for use in userstyles)

.github/release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "1.0.1"
+  ".": "1.0.3"
 }

.github/workflows/build.yml

@@ -11,11 +11,11 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
       - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v6
         with:
-          node-version: 22
+          node-version: 24
           cache: pnpm
       - run: pnpm install --frozen-lockfile
       - run: pnpm build

.github/workflows/github-pages.yml

@@ -14,16 +14,16 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
       - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v6
         with:
-          node-version: 22
+          node-version: 24
           cache: pnpm
       - run: pnpm install --frozen-lockfile
       - run: pnpm build
       - run: cp dist/index.js demo
-      - uses: actions/upload-pages-artifact@v3
+      - uses: actions/upload-pages-artifact@v4
         with:
           path: "demo/"
 

.github/workflows/release-please.yml

@@ -29,11 +29,11 @@ jobs:
     needs: release-please
     if: ${{ needs.release-please.outputs.release_created }}
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
       - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v6
         with:
-          node-version: 22
+          node-version: 24
           cache: pnpm
           registry-url: https://registry.npmjs.org
       - run: pnpm install --frozen-lockfile

CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [1.0.3](https://github.com/catppuccin/codemirror/compare/v1.0.2...v1.0.3) (2026-02-21)
+
+
+### Bug Fixes
+
+* ci & update deps ([#32](https://github.com/catppuccin/codemirror/issues/32)) ([a63db60](https://github.com/catppuccin/codemirror/commit/a63db6008de5dacc71ba593384898930ab90aefd))
+
+## [1.0.2](https://github.com/catppuccin/codemirror/compare/v1.0.1...v1.0.2) (2026-02-21)
+
+
+### Bug Fixes
+
+* correct selection background color ([#30](https://github.com/catppuccin/codemirror/issues/30)) ([1df1d60](https://github.com/catppuccin/codemirror/commit/1df1d603f0703c500cdb0fb968d620340a2ab145))
+* set placeholder text to `overlay1` ([#29](https://github.com/catppuccin/codemirror/issues/29)) ([94361a4](https://github.com/catppuccin/codemirror/commit/94361a46415f70e32fa12edcd4e428bdce844b5d))
+
 ## [1.0.1](https://github.com/catppuccin/codemirror/compare/v1.0.0...v1.0.1) (2025-04-30)
 
 

README.md

@@ -57,12 +57,56 @@
    })
    ```
 
-Check out the [demo](https://codemirror.catppuccin.com) for reference.
+## Userstyles Usage
+
+1. Import the base Catppuccin library first and foremost.
+
+2. Write your `@-moz-document` specifier, write up your `:root` with dark/light
+   theme specifiers.
+
+3. Open the `#catppuccin(@flavor)` macro, and import `#lib.palette()` and
+   `#lib.defaults()`.
+
+4. Import the CM5/6 library with
+   `@import "https://codemirror.catppuccin.com/lib/cm<5/6>.less"`.
+
+5. Final code should look something like:
+
+   ```less
+   /* ==UserStyle==
+   @name ...
+   ==/UserStyle== */
+
+   @import "https://userstyles.catppuccin.com/lib/lib.less";
+
+   @-moz-document domain("...") {
+     :root {
+       &[data-ui-theme="light"] {
+         #catppuccin(@lightFlavor);
+       }
+       &[data-ui-theme="dark"] {
+         #catppuccin(@darkFlavor);
+       }
+     }
+
+     #catppuccin(@flavor) {
+       #lib.palette();
+       #lib.defaults();
+
+       @import "https://codemirror.catppuccin.com/lib/cm<5/6>.less";
+
+       // Rest of theme here
+     }
+   }
+   ```
+
+> Check out the [demo](https://codemirror.catppuccin.com) for reference.
 
 ## 🙋 FAQ
 
 - Q: **_Is this compatible with CodeMirror5?_**\
-  A: No, see the [v0.0.1](https://github.com/catppuccin/codemirror/tree/v0.0.1) tag for CodeMirror5 support.
+  A: No, see the [v0.0.1](https://github.com/catppuccin/codemirror/tree/v0.0.1)
+  tag for CodeMirror5 support.
 
 ## 💝 Thanks to
 
@@ -76,8 +120,10 @@ This repository currently has no maintainers.
 
 **Inspiration and Contribution**
 
-- [marijnh](https://github.com/marijnh) for [CodeMirror](https://github.com/codemirror/codemirror5)
-- [ghostx31](https://github.com/ghostx31/) for [catppuccin/joplin](https://github.com/catppuccin/joplin)
+- [marijnh](https://github.com/marijnh) for
+  [CodeMirror](https://github.com/codemirror/codemirror5)
+- [ghostx31](https://github.com/ghostx31/) for
+  [catppuccin/joplin](https://github.com/catppuccin/joplin)
 - [BuonOmo](https://github.com/BuonOmo) for CodeMirror v6 support
 
 &nbsp;

lib/cm5.less

@@ -0,0 +1,243 @@
+// CM5 Lib
+// N.B. Import this at the top of your #catppuccin macro.
+
+@import "https://userstyles.catppuccin.com/lib/lib.less";
+
+#lib.palette();
+
+.CodeMirror {
+  color: @base;
+}
+
+.CodeMirror-line span {
+  color: @text;
+}
+
+.CodeMirror-gutter-filler,
+.CodeMirror-scrollbar-filler {
+  background-color: fade(@overlay2, 30%);
+}
+
+.CodeMirror-gutters {
+  background-color: @mantle;
+  border-right-color: @overlay0;
+}
+
+.CodeMirror-linenumber {
+  color: @overlay1;
+}
+
+.CodeMirror-activeline .CodeMirror-linenumber {
+  color: @lavender;
+}
+
+.CodeMirror-activeline-background {
+  background-color: @surface0;
+}
+
+.CodeMirror-line .CodeMirror-guttermarker {
+  color: @overlay1;
+}
+
+.CodeMirror-guttermarker-subtle {
+  color: @overlay0;
+}
+
+.CodeMirror-cursor {
+  border-left-color: @accent;
+}
+
+.CodeMirror div.CodeMirror-secondarycursor {
+  border-left-color: @accent;
+}
+
+.cm-fat-cursor .CodeMirror-cursor {
+  background-color: @accent;
+}
+
+.cm-s-default .cm-header {
+  color: @accent;
+}
+
+.cm-s-default .cm-quote {
+  color: @subtext1;
+}
+
+.cm-negative {
+  color: @red;
+}
+
+.cm-positive {
+  color: @green;
+}
+
+.cm-s-default .cm-keyword {
+  color: @mauve;
+}
+
+.cm-s-default .cm-atom {
+  color: @red;
+}
+
+.cm-s-default .cm-number {
+  color: @peach;
+}
+
+.cm-s-default .cm-def {
+  color: @mauve;
+}
+
+.cm-s-default .cm-property {
+  color: @blue;
+}
+
+.cm-s-default .cm-variable {
+  color: @blue;
+}
+
+.cm-s-default .cm-variable-2 {
+  color: @blue;
+}
+
+.cm-s-default .cm-type,
+.cm-s-default .cm-variable-3 {
+  color: @teal;
+}
+
+.cm-s-default .cm-comment {
+  color: @subtext0;
+}
+
+.cm-s-default .cm-string {
+  color: @green;
+}
+
+.cm-s-default .cm-string-2 {
+  color: red;
+}
+
+.cm-s-default .cm-meta,
+.cm-s-default .cm-qualifier {
+  color: @yellow;
+}
+
+.cm-s-default .cm-builtin {
+  color: @red;
+}
+
+.cm-s-default .cm-bracket {
+  color: @subtext1;
+}
+
+.cm-s-default .cm-tag {
+  color: @blue;
+}
+
+.cm-s-default .cm-attribute {
+  color: @yellow;
+}
+
+.cm-s-default .cm-hr {
+  color: @accent;
+}
+
+.cm-s-default .cm-link {
+  color: @blue;
+}
+
+.cm-invalidchar,
+.cm-s-default .cm-error {
+  color: @red;
+}
+
+div.CodeMirror span.CodeMirror-matchingbracket {
+  color: @green;
+}
+
+div.CodeMirror span.CodeMirror-nonmatchingbracket {
+  color: @red;
+}
+
+.CodeMirror-matchingtag {
+  background-color: @sky;
+}
+
+.CodeMirror-selected {
+  background-color: fade(@accent, 20%);
+}
+
+.CodeMirror-focused .CodeMirror-selected {
+  background-color: fade(darken(@accent, 10%), 20%);
+}
+
+body.find-open .cm-searching {
+  color: @accent;
+  background-color: fade(@accent, 20%);
+}
+
+body.find-open .cm-searching.search-target-match {
+  color: @accent;
+  background-color: fade(darken(@accent, 10%), 20%);
+}
+
+.CodeMirror-dialog-top {
+  border-bottom-color: @overlay0;
+}
+
+.CodeMirror-dialog-bottom {
+  border-top-color: @overlay0;
+}
+
+.CodeMirror-foldmarker {
+  color: @subtext1;
+}
+
+.CodeMirror-hints {
+  background-color: @surface0;
+}
+
+.CodeMirror-hint {
+  color: @subtext1;
+}
+
+.CodeMirror-hint:hover {
+  background-color: fade(@surface1, 30%);
+}
+
+li.CodeMirror-hint-active {
+  background-color: fade(@surface2, 30%);
+}
+
+.CodeMirror-lint-tooltip {
+  color: @teal;
+  background-color: fade(@teal, 30%);
+}
+
+.CodeMirror-lint-line-error {
+  color: @red;
+  background-color: fade(@red, 30%);
+}
+
+.CodeMirror-lint-line-warning {
+  color: @peach;
+  background-color: fade(@peach, 30%);
+}
+
+.CodeMirror-search-match {
+  background-color: fade(@accent, 30%);
+  border-color: @accent;
+}
+
+.CodeMirror-activeline .applies-to:before {
+  background-color: transparent;
+}
+
+.CodeMirror-selection-highlight-scrollbar,
+.cm-matchhighlight {
+  background-color: fade(@overlay2, 30%);
+}
+
+.gutter-bookmark {
+  color: darken(@accent, 10%);
+  background-color: fade(darken(@accent, 10%), 30%);
+}