Merge branch 'main' into chore/maintainers

.github/CODEOWNERS

@@ -50,6 +50,7 @@
 /styles/perplexity @isabelroses @tnixc
 /styles/picrew @Nyatalieeee
 /styles/planet-minecraft @night-lake
+/styles/pronouns.page @uncenter
 /styles/proton @soya-daizu
 /styles/pypi @trinkey
 /styles/quizlet @spaghettiosareyummy
@@ -60,12 +61,14 @@
 /styles/stylus @GitMuslim
 /styles/syncthing @BlankParticle
 /styles/tabnews @Guaxinim5573
+/styles/tldraw @GenShibe @uncenter
+/styles/trinket @trinkey
 /styles/tuta @ryanccn
 /styles/twitch @GitMuslim @isabelroses
 /styles/twitter @watatomo
 /styles/vercel @ryanccn
 /styles/whatsapp-web @FrancoRav
 /styles/wikipedia @GitMuslim
 /styles/wikiwand @tnixc
-/styles/youtube @isabelroses
+/styles/youtube @isabelroses @uncenter
 /styles/nextjs @Dandraghas

.github/ISSUE_TEMPLATE/userstyle.yml

@@ -16,7 +16,7 @@ body:
       label: What userstyles are you seeing the problem on?
       description: "Don't worry about the `lbl:` prefix, it allows issues to be automatically labeled!"
       multiple: true
-      options: ["lbl:advent-of-code", "lbl:anilist", "lbl:arch-wiki", "lbl:boringproxy", "lbl:brave-search", "lbl:bsky", "lbl:bstats", "lbl:canvas-lms", "lbl:chatgpt", "lbl:chatreplay", "lbl:chess.com", "lbl:cinny", "lbl:codeberg", "lbl:crowdin", "lbl:deepl", "lbl:duckduckgo", "lbl:ecosia", "lbl:elk", "lbl:formative", "lbl:github", "lbl:gmail", "lbl:google", "lbl:google-photos", "lbl:graphite", "lbl:hackage", "lbl:hacker-news", "lbl:holodex", "lbl:homepage", "lbl:hoppscotch", "lbl:hyperpipe", "lbl:ichi.moe", "lbl:inoreader", "lbl:instagram", "lbl:invidious", "lbl:invokeai", "lbl:lastfm", "lbl:lemmy", "lbl:libreddit", "lbl:lichess", "lbl:lingva", "lbl:linkedin", "lbl:mastodon", "lbl:mdn", "lbl:modrinth", "lbl:microsoft-word", "lbl:migadu-webmail", "lbl:minesweeper", "lbl:nitter", "lbl:nixos-search", "lbl:nixos.wiki", "lbl:npm", "lbl:openmediavault", "lbl:paste.rs", "lbl:perplexity", "lbl:picrew", "lbl:pinterest", "lbl:planet-minecraft", "lbl:proton", "lbl:pypi", "lbl:quizlet", "lbl:reddit", "lbl:searxng", "lbl:snapchat-web", "lbl:spotify-web", "lbl:startpage", "lbl:skiff", "lbl:stylus", "lbl:substack", "lbl:syncthing", "lbl:tabnews", "lbl:tuta", "lbl:twitch", "lbl:twitter", "lbl:vercel", "lbl:whatsapp-web", "lbl:wikipedia", "lbl:wikiwand", "lbl:youtube", "lbl:nextjs"]
+      options: ["lbl:advent-of-code", "lbl:anilist", "lbl:arch-wiki", "lbl:boringproxy", "lbl:brave-search", "lbl:bsky", "lbl:bstats", "lbl:canvas-lms", "lbl:chatgpt", "lbl:chatreplay", "lbl:chess.com", "lbl:cinny", "lbl:codeberg", "lbl:crowdin", "lbl:deepl", "lbl:duckduckgo", "lbl:ecosia", "lbl:elk", "lbl:formative", "lbl:github", "lbl:gmail", "lbl:google", "lbl:google-photos", "lbl:graphite", "lbl:hackage", "lbl:hacker-news", "lbl:holodex", "lbl:homepage", "lbl:hoppscotch", "lbl:hyperpipe", "lbl:ichi.moe", "lbl:inoreader", "lbl:instagram", "lbl:invidious", "lbl:invokeai", "lbl:lastfm", "lbl:lemmy", "lbl:libreddit", "lbl:lichess", "lbl:lingva", "lbl:linkedin", "lbl:mastodon", "lbl:mdn", "lbl:modrinth", "lbl:microsoft-word", "lbl:migadu-webmail", "lbl:minesweeper", "lbl:nitter", "lbl:nixos-search", "lbl:nixos.wiki", "lbl:npm", "lbl:openmediavault", "lbl:paste.rs", "lbl:perplexity", "lbl:picrew", "lbl:pinterest", "lbl:planet-minecraft", "lbl:pronouns.page", "lbl:proton", "lbl:pypi", "lbl:quizlet", "lbl:reddit", "lbl:searxng", "lbl:snapchat-web", "lbl:spotify-web", "lbl:startpage", "lbl:skiff", "lbl:stylus", "lbl:substack", "lbl:syncthing", "lbl:tabnews", "lbl:tldraw", "lbl:trinket", "lbl:tuta", "lbl:twitch", "lbl:twitter", "lbl:vercel", "lbl:whatsapp-web", "lbl:wikipedia", "lbl:wikiwand", "lbl:youtube", "lbl:nextjs"]
     validations:
       required: true
   - type: textarea

.github/issue-labeler.yml

@@ -113,6 +113,8 @@ pinterest:
   - '(lbl:pinterest)'
 planet-minecraft:
   - '(lbl:planet-minecraft)'
+pronouns.page:
+  - '(lbl:pronouns.page)'
 proton:
   - '(lbl:proton)'
 pypi:
@@ -139,6 +141,10 @@ syncthing:
   - '(lbl:syncthing)'
 tabnews:
   - '(lbl:tabnews)'
+tldraw:
+  - '(lbl:tldraw)'
+trinket:
+  - '(lbl:trinket)'
 tuta:
   - '(lbl:tuta)'
 twitch:

.github/labels.yml

@@ -153,7 +153,7 @@
   description: npm
   color: '#ed8796'
 - name: openmediavault
-  description: OpenMediaVault
+  description: openmediavault
   color: '#91d7e3'
 - name: paste.rs
   description: paste.rs
@@ -170,6 +170,9 @@
 - name: planet-minecraft
   description: Planet Minecraft
   color: '#a6da95'
+- name: pronouns.page
+  description: Pronouns.page
+  color: '#f5bde6'
 - name: proton
   description: Proton
   color: '#c6a0f6'
@@ -209,6 +212,12 @@
 - name: tabnews
   description: TabNews
   color: '#cad3f5'
+- name: tldraw
+  description: tldraw
+  color: '#cad3f5'
+- name: trinket
+  description: Trinket
+  color: '#8aadf4'
 - name: tuta
   description: Tuta
   color: '#ee99a0'

.github/pr-labeler.yml

@@ -56,6 +56,7 @@ perplexity: styles/perplexity/**/*
 picrew: styles/picrew/**/*
 pinterest: styles/pinterest/**/*
 planet-minecraft: styles/planet-minecraft/**/*
+pronouns.page: styles/pronouns.page/**/*
 proton: styles/proton/**/*
 pypi: styles/pypi/**/*
 quizlet: styles/quizlet/**/*
@@ -69,6 +70,8 @@ stylus: styles/stylus/**/*
 substack: styles/substack/**/*
 syncthing: styles/syncthing/**/*
 tabnews: styles/tabnews/**/*
+tldraw: styles/tldraw/**/*
+trinket: styles/trinket/**/*
 tuta: styles/tuta/**/*
 twitch: styles/twitch/**/*
 twitter: styles/twitter/**/*

.github/workflows/website.yml

@@ -0,0 +1,20 @@
+name: Deploy Website
+
+on:
+  workflow_dispatch:
+  push:
+    branches: ["main"]
+    paths: ["scripts/userstyles.yml"]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    environment: website
+    name: Vercel Deploy
+    steps:
+      - name: Deploy via cURL
+        shell: bash
+        env:
+          DEPLOY_HOOK: ${{ secrets.VERCEL_DEPLOY_HOOK }}
+        run: curl -X POST "$DEPLOY_HOOK"
+# yaml-language-server: $schema=https://json.schemastore.org/github-workflow.json

.stylelintrc.js

@@ -24,6 +24,7 @@ export default {
     "alpha-value-notation": null,
     "color-function-notation": null,
     "hue-degree-notation": null,
+    "keyframes-name-pattern": null,
 
     // Needed for Stylus v1.5.35 workaround, see #341
     "media-feature-range-notation": "prefix",

README.md

@@ -57,6 +57,14 @@ See instructions on the [GitHub release page](https://github.com/catppuccin/user
    - Replacing `<name>` with the name of the userstyle.
 3. Enjoy!
 
+> [!TIP]
+> For decentralized or self-hosted applications, you can apply a theme to one or multiple instances across updates by following the instructions below.
+>
+> 1. Open the Stylus "Manage" page.
+> 2. Click on the userstyle's name in the list.
+> 3. Click on **Style settings** in the left panel.
+> 4. Enter the URL patterns for your instance(s) in the text box labeled **Custom included sites**.
+
 &nbsp;
 
 ## 👐 Contributing
@@ -71,7 +79,10 @@ See [CONTRIBUTING.md](docs/CONTRIBUTING.md).
 ## 🖌 Userstyles
 
 > [!IMPORTANT]
-> Userstyles labeled with the "🚧" emoji are looking for maintainers, and may not work as intended. Contributions are still welcome and encouraged. If you would like to become a maintainer, add your username to the `current-maintainers` array in the [userstyles.yml](./scripts/userstyles.yml) file.
+> Userstyles labeled with the "🚧" emoji are looking for maintainers, and may
+> not work as intended. Contributions are still welcome and encouraged. If you
+> would like to become a maintainer, follow the instructions outlined in
+> "[Adding yourself as a maintainer](https://github.com/catppuccin/userstyles/blob/main/docs/userstylesyml.md#adding-yourself-as-a-maintainer)."
 
 <!-- AUTOGEN:USERSTYLES START -->
 <!-- the following section is auto-generated, do not edit -->
@@ -89,6 +100,7 @@ See [CONTRIBUTING.md](docs/CONTRIBUTING.md).
 - [npm](styles/npm)
 - [paste.rs](styles/paste.rs)
 - [PyPI](styles/pypi)
+- [Trinket](styles/trinket)
 - [Vercel](styles/vercel)
 
 </details>
@@ -143,10 +155,11 @@ See [CONTRIBUTING.md](docs/CONTRIBUTING.md).
 - [homepage](styles/homepage)
 - [inoreader](styles/inoreader)
 - [Microsoft Word](styles/microsoft-word)
-- [OpenMediaVault](styles/openmediavault)
+- [openmediavault](styles/openmediavault)
 - [Proton](styles/proton)
 - [Stylus](styles/stylus)
 - [Syncthing](styles/syncthing)
+- [tldraw](styles/tldraw)
 
 </details>
 <details open>
@@ -176,6 +189,7 @@ See [CONTRIBUTING.md](docs/CONTRIBUTING.md).
 - [LinkedIn](styles/linkedin)
 - [Mastodon](styles/mastodon)
 - [Nitter](styles/nitter)
+- [Pronouns.page](styles/pronouns.page)
 - [Snapchat Web](styles/snapchat-web)
 - [Twitter](styles/twitter)
 - [WhatsApp Web](styles/whatsapp-web)

docs/CONTRIBUTING.md

@@ -12,22 +12,50 @@ request.
 
 It is important to note that there are **two types of PRs** for this repository:
 
-1. **New Userstyles:** Please see [userstyle-creation.md](userstyle-creation.md).
-2. **Other improvements:** These should follow the recommendations below, to help
-   improve the chances of a merged PR.
-
-## General Recommendations
-
-- Create a
-  [topic branch](https://git-scm.com/book/en/v2/Git-Branching-Branching-Workflows#_topic_branch)
-  on your fork for your specific PR.
-- Catppuccin uses the [Conventional Commits
-  ](https://www.conventionalcommits.org/en/v1.0.0/) standard for creating explicit and meaningful commit messages. This repository requires pull request _titles_ to be in the conventional commit format, however we do not require it for individual commits within a pull request.
-- Update the version in the `==UserStyle==` header of the `catppuccin.user.css` file. This is to enable version control of the style.
+1. **New Userstyles:** Please see [userstyle-creation.md](./userstyle-creation.md).
+2. **Other improvements:** These should follow the recommendations below, to help improve the chances of a merged PR.
+
+## Recommendations
+
+### Root Variables
+
+While writing a userstyle, you may have come across [custom properties / CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/--*), typically wrapped in a `:root` selector. We refer to these variables as "root variables", and they can be thought of as global variables used all across a website. For Catppuccin userstyles, we prefer that these variables are themed (if they exist) rather than individual elements. As the website hopefully uses these variables themselves, it saves yourself a lot of work in theming and maintaining the userstyle.
+
+### Opinionated Changes
+
+When writing or updating a userstyle, it is important to keep in mind that different users have different preferences. To avoid lengthy discussion over user interface aesthetics, we have a set of rules for what a userstyle may include; importantly, **changes to font or layout (padding, margin, hiding/moving elements) are prohibited.**
+
+### General Recommendations
+
+- Create a [topic branch](https://git-scm.com/book/en/v2/Git-Branching-Branching-Workflows#_topic_branch) on your fork for your specific PR.
+- Catppuccin uses the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/)
+  standard for creating explicit and meaningful commit messages. This repository
+  requires pull request _titles_ to be in the conventional commit format,
+  however we do not require it for individual commits within a pull request.
+- Update the version in the `==UserStyle==` header of the `catppuccin.user.css`
+  file. This is to enable version control of the style.
 - If it's your first time contributing to a project then you should look to the
-  popular
-  [first-contributions](https://github.com/firstcontributions/first-contributions)
+  popular [first-contributions](https://github.com/firstcontributions/first-contributions)
   repository on GitHub. This will give you hands-on experience with the features
-  of GitHub required to make a contribution. As always, feel free to join our
-  [Discord](https://discord.com/servers/catppuccin-907385605422448742) to ask
+  of GitHub required to make a contribution. As always, feel free to join our [Discord](https://discord.com/servers/catppuccin-907385605422448742) to ask
   any questions and clarify your understanding, we are more than happy to help!
+- Changes to docs may need to use [marksman](https://github.com/artempyanykh/marksman) to generate the table of contents.
+
+## Pull Request Review Process
+
+```mermaid
+graph TD;
+    A[New userstyle];
+    B[Other improvements];
+    A --> C[Review by userstyles staff];
+    B --> D[Review by maintainer];
+    C --> E{Feedback};
+    D --> F{Feedback};
+    E -->|Changes made| E;
+    F -->|Changes made| F;
+    E -->|Approved by userstyles staff| K;
+    F -->|Approved by maintainer or userstyles staff| L[Merged by maintainer];
+    K[Waiting period*] --> M[Merged by userstyles staff];
+```
+
+\*A waiting period is usually started if a website is particularly complex or for any other reason could not be thoroughly/completely tested. Waiting periods typically last between 1 and 2 days.

docs/how-to-write-a-userstyle.md

@@ -8,6 +8,20 @@
 
  
 
+### Table of Contents
+
+<!--toc:start-->
+
+- [Prerequisites](#prerequisites)
+- [Setup](#setup)
+  - [Usercss Metadata](#usercss-metadata)
+  - [`@-moz-document`](#moz-document)
+  - [The lookup table](#the-lookup-table)
+- [The `#catppuccin` mixin](#the-catppuccin-mixin)
+  - [Applying the theme](#applying-the-theme)
+  - [Putting it all together](#putting-it-all-together)
+  <!--toc:end-->
+
 ### Prerequisites
 
 - [Stylus](https://github.com/openstyles/stylus) ([Firefox](https://addons.mozilla.org/en-GB/firefox/addon/styl-us/) / [Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne)

docs/tips-and-tricks.md

@@ -4,6 +4,21 @@
 
  
 
+### Table of Contents
+
+<!--toc:start-->
+
+- [How can I see my changes in real time?](#how-can-i-see-my-changes-in-real-time)
+- [How can I hide sensitive information in preview screenshots?](#how-can-i-hide-sensitive-information-in-preview-screenshots)
+- [How do I convert preview images to WebP?](#how-do-i-convert-preview-images-to-webp)
+  - [Installation](#installation)
+  - [Usage](#usage)
+- [How do I theme images and SVGs?](#how-do-i-theme-images-and-svgs)
+  - [SVG background images](#svg-background-images)
+  - [`<img>` elements](#img-elements)
+- [How do I set a variable to RGB values?](#how-do-i-set-a-variable-to-rgb-values)
+<!--toc:end-->
+
 ### How can I see my changes in real time?
 
 See [Stylus Wiki - Initial installation and live reload](https://github.com/openstyles/stylus/wiki/Writing-UserCSS#initial-installation-and-live-reload).
@@ -120,3 +135,17 @@ img.twitter-icon {
   background: url("data:image/svg+xml,@{svg}") no-repeat !important;
 }
 ```
+
+&nbsp;
+
+### How do I set a variable to RGB values?
+
+You can use the following snippet to get the raw RGB values from a color.
+
+```less
+#rgbify(@color) {
+  @rgb-raw: red(@color), green(@color), blue(@color);
+}
+
+--ctp-base: #rgbify(@base) []; // -> 30, 30, 46
+```