diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 0a9dbe5484..022c0b8da3 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -1,8 +1,10 @@ # THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND. /styles/advent-of-code @rubyowo +/styles/alacritty.org @AlwaysNur /styles/alternativeto @thismoon /styles/amplenote @stellophiliac /styles/anilist @AnubisNekhet +/styles/anonymous-overflow @ImenaOphelia /styles/boringproxy @Gandalf-the-Blue /styles/brave-search @ndsboy /styles/bsky @RoootTheFox @@ -18,6 +20,7 @@ /styles/crates.io @uncenter /styles/crowdin @ryanccn /styles/deepl @watatomo +/styles/deepseek @WalkQuackBack /styles/desmos @gradylink /styles/dev.to @shnjd /styles/devdocs @ashish0kumar @@ -26,7 +29,6 @@ /styles/duckduckgo @GenShibe /styles/elk @ryanccn /styles/freedesktop @NK308 -/styles/formative @r58Playz /styles/ghostty.org @uncenter /styles/github @uncenter /styles/gleam.run @uncenter @@ -45,7 +47,6 @@ /styles/hoogle @jn-sena /styles/hoppscotch @justTOBBI /styles/learn-x-in-y-minutes @nik-rev -/styles/hyperpipe @jn-sena /styles/ichi.moe @watatomo /styles/inoreader @thomas-philippot /styles/indie-wiki-buddy @thismoon @@ -65,8 +66,9 @@ /styles/mdn @soya-daizu /styles/modrinth @thismoon /styles/migadu-webmail @uncenter -/styles/mullvad-leta @jn-sena /styles/namemc @Meowcelinee +/styles/neovim.io @comfysage +/styles/npmx @42willow /styles/nitter @AnubisNekhet /styles/nixos-manual @husjon /styles/nixos-search @sydrinea @@ -80,6 +82,7 @@ /styles/picrew @Meowcelinee /styles/pinterest @nuexq /styles/planet-minecraft @Nyameliaaaa +/styles/poe @TheAnonymousCrusher /styles/porkbun @uncenter /styles/pronouns.cc @comfysage /styles/pronouns.page @uncenter @@ -89,19 +92,23 @@ /styles/quizlet @spaghettiosareyummy /styles/raindrop @thismoon /styles/react.dev @RaiderHCPlay +/styles/regex101 @uncenter /styles/rentry.co @thismoon +/styles/scalar @incognitotgt +/styles/searchix @koibtw /styles/searxng @Sekki21956 @ryanccn /styles/seventv @mxgic1337 /styles/shinigami-eyes @sofiedotcafe /styles/snapchat-web @itzTheMeow /styles/spotify-web @Tnixc /styles/stack-overflow @uncenter +/styles/startpage @WalkQuackBack /styles/status.cafe @bunfluff /styles/stylus @uncenter /styles/substack @uncenter /styles/syncthing @BlankParticle /styles/tabnews @Guaxinim5573 -/styles/tldraw @GenShibe @uncenter +/styles/tldraw @NekoDrone /styles/trinket @trinkey /styles/tuta @ryanccn /styles/twitch @uncenter @mxgic1337 @@ -115,7 +122,7 @@ /styles/youtube @isabelroses @uncenter /styles/zen-browser-docs @ashish0kumar -/.github/ @uncenter -/scripts/ @uncenter -/template/ @uncenter -/lib/ @uncenter \ No newline at end of file +/.github/ @uncenter @walkquackback +/scripts/ @uncenter @walkquackback +/template/ @uncenter @walkquackback +/lib/ @uncenter @walkquackback \ No newline at end of file diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml index 1408126da3..9c0a16c17a 100644 --- a/.github/ISSUE_TEMPLATE/config.yml +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -1,11 +1,11 @@ blank_issues_enabled: false contact_links: - - name: Userstyle Request + - name: Request a Userstyle url: https://github.com/catppuccin/catppuccin/discussions/new?category=port-requests - about: Request a website to be themed here! - - name: Userstyle Review + about: Request for a website to be themed. + - name: Submit a New Userstyle url: https://github.com/catppuccin/userstyles/compare - about: Already made a theme? Submit a Pull Request here! + about: Already made a theme? Submit a pull request to add it to the collection. - name: Community Discord url: https://discord.com/servers/catppuccin-907385605422448742 about: Ask questions and chat to other community members! diff --git a/.github/ISSUE_TEMPLATE/meta.yml b/.github/ISSUE_TEMPLATE/meta.yml index 01bb072136..11031087c2 100644 --- a/.github/ISSUE_TEMPLATE/meta.yml +++ b/.github/ISSUE_TEMPLATE/meta.yml @@ -1,5 +1,5 @@ name: Meta Issue -description: Report your issues with the repository here! +description: Report general userstyles issues. labels: [meta] body: - type: checkboxes diff --git a/.github/ISSUE_TEMPLATE/userstyle.yml b/.github/ISSUE_TEMPLATE/userstyle.yml index 1484654dc0..1655cf5726 100644 --- a/.github/ISSUE_TEMPLATE/userstyle.yml +++ b/.github/ISSUE_TEMPLATE/userstyle.yml @@ -1,43 +1,63 @@ # THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND. name: Userstyle Issue -description: Report your problems with any of the userstyles here! +description: Report a problem with a userstyle. body: - - type: checkboxes + - id: prerequisites + type: checkboxes attributes: label: Is there an existing issue outlining your problem? description: Please search to see if an issue already exists for your problem. options: - - label: I am using the latest version of the provided userstyle. - required: true - label: I have searched the existing issues and they do not solve my problem. required: true - - type: dropdown + - id: userstyle + type: dropdown attributes: - label: What userstyles are you seeing the problem on? + label: What userstyle 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:alternativeto", "lbl:amplenote", "lbl:anichart", "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:claude", "lbl:cobalt", "lbl:codeberg", "lbl:crates.io", "lbl:crowdin", "lbl:deepl", "lbl:desmos", "lbl:dev.to", "lbl:devdocs", "lbl:docs.deno.com", "lbl:docs.rs", "lbl:duckduckgo", "lbl:ecosia", "lbl:elk", "lbl:formative", "lbl:freedesktop", "lbl:ghostty.org", "lbl:github", "lbl:gleam.run", "lbl:gmail", "lbl:go.dev", "lbl:google", "lbl:google-drive", "lbl:google-gemini", "lbl:google-photos", "lbl:grabify", "lbl:graphite", "lbl:hackage", "lbl:hacker-news", "lbl:have-i-been-pwned", "lbl:holodex", "lbl:home-manager-options-search", "lbl:homepage", "lbl:hoogle", "lbl:hoppscotch", "lbl:hyperpipe", "lbl:ichi.moe", "lbl:indie-wiki-buddy", "lbl:inoreader", "lbl:instagram", "lbl:invidious", "lbl:invokeai", "lbl:jisho", "lbl:keybr.com", "lbl:keyoxide", "lbl:lastfm", "lbl:learn-x-in-y-minutes", "lbl:lemmy", "lbl:libreddit", "lbl:lichess", "lbl:lingva", "lbl:linkedin", "lbl:listenbrainz", "lbl:lobste.rs", "lbl:mastodon", "lbl:mdbook", "lbl:mdn", "lbl:microsoft-word", "lbl:migadu-webmail", "lbl:minesweeper", "lbl:modrinth", "lbl:mullvad-leta", "lbl:namemc", "lbl:next.js", "lbl:nitter", "lbl:nixos-manual", "lbl:nixos-search", "lbl:nixpkgs-manual", "lbl:npm", "lbl:ollama", "lbl:openmediavault", "lbl:paste.rs", "lbl:perplexity", "lbl:phanpy", "lbl:picrew", "lbl:pinterest", "lbl:planet-minecraft", "lbl:porkbun", "lbl:pronouns.cc", "lbl:pronouns.page", "lbl:proton", "lbl:pypi", "lbl:pythonanywhere", "lbl:quizlet", "lbl:raindrop", "lbl:react.dev", "lbl:reddit", "lbl:redlib", "lbl:rentry.co", "lbl:searxng", "lbl:seventv", "lbl:shinigami-eyes", "lbl:snapchat-web", "lbl:spotify-web", "lbl:stack-overflow", "lbl:startpage", "lbl:status.cafe", "lbl:stylus", "lbl:substack", "lbl:syncthing", "lbl:tabnews", "lbl:tldraw", "lbl:trinket", "lbl:tuta", "lbl:twitch", "lbl:twitter", "lbl:vercel", "lbl:vikunja", "lbl:web.dev", "lbl:whatsapp-web", "lbl:wiki.nixos.org", "lbl:wikipedia", "lbl:wikiwand", "lbl:youtube", "lbl:zen-browser-docs"] + multiple: false + options: ["lbl:advent-of-code", "lbl:alacritty.org", "lbl:alternativeto", "lbl:amplenote", "lbl:anichart", "lbl:anilist", "lbl:anonymous-overflow", "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:claude", "lbl:cobalt", "lbl:codeberg", "lbl:crates.io", "lbl:crowdin", "lbl:deepl", "lbl:deepseek", "lbl:desmos", "lbl:dev.to", "lbl:devdocs", "lbl:docs.deno.com", "lbl:docs.rs", "lbl:duckduckgo", "lbl:ecosia", "lbl:elk", "lbl:formative", "lbl:freedesktop", "lbl:ghostty.org", "lbl:github", "lbl:gleam.run", "lbl:gmail", "lbl:go.dev", "lbl:google", "lbl:google-drive", "lbl:google-gemini", "lbl:google-photos", "lbl:grabify", "lbl:graphite", "lbl:hackage", "lbl:hacker-news", "lbl:have-i-been-pwned", "lbl:holodex", "lbl:home-manager-options-search", "lbl:homepage", "lbl:hoogle", "lbl:hoppscotch", "lbl:hyperpipe", "lbl:ichi.moe", "lbl:indie-wiki-buddy", "lbl:inoreader", "lbl:instagram", "lbl:invidious", "lbl:invokeai", "lbl:jisho", "lbl:keybr.com", "lbl:keyoxide", "lbl:lastfm", "lbl:learn-x-in-y-minutes", "lbl:lemmy", "lbl:libreddit", "lbl:lichess", "lbl:lingva", "lbl:linkedin", "lbl:listenbrainz", "lbl:lobste.rs", "lbl:mastodon", "lbl:mdbook", "lbl:mdn", "lbl:microsoft-word", "lbl:migadu-webmail", "lbl:minesweeper", "lbl:modrinth", "lbl:namemc", "lbl:neovim.io", "lbl:next.js", "lbl:nitter", "lbl:nixos-manual", "lbl:nixos-search", "lbl:nixpkgs-manual", "lbl:npm", "lbl:npmx", "lbl:ollama", "lbl:openmediavault", "lbl:paste.rs", "lbl:perplexity", "lbl:phanpy", "lbl:picrew", "lbl:pinterest", "lbl:planet-minecraft", "lbl:poe", "lbl:porkbun", "lbl:pronouns.cc", "lbl:pronouns.page", "lbl:proton", "lbl:pypi", "lbl:pythonanywhere", "lbl:quizlet", "lbl:raindrop", "lbl:react.dev", "lbl:reddit", "lbl:redlib", "lbl:regex101", "lbl:rentry.co", "lbl:scalar", "lbl:searchix", "lbl:searxng", "lbl:seventv", "lbl:shinigami-eyes", "lbl:snapchat-web", "lbl:spotify-web", "lbl:stack-overflow", "lbl:startpage", "lbl:status.cafe", "lbl:stylus", "lbl:substack", "lbl:syncthing", "lbl:tabnews", "lbl:tldraw", "lbl:trinket", "lbl:tuta", "lbl:twitch", "lbl:twitter", "lbl:vercel", "lbl:vikunja", "lbl:web.dev", "lbl:whatsapp-web", "lbl:wiki.nixos.org", "lbl:wikipedia", "lbl:wikiwand", "lbl:youtube", "lbl:zen-browser-docs"] validations: required: true - - type: textarea + - id: description + type: textarea attributes: - label: Describe your problem. - description: Also tell us, what do you expect to see? + label: Description + description: Describe the problem and what you expect to see instead. placeholder: The navigation bar on the website is highlighted incorrectly... validations: required: true - - type: textarea + - id: screenshots + type: textarea attributes: - label: Attach screenshots. + label: Relevant screenshots description: If applicable, attach screenshots which clearly highlight the issue. - - type: input + - id: browser_version + type: input attributes: - label: What browser(s) are you seeing the problem on? - description: "Make sure to include the browser version - see https://github.com/catppuccin/userstyles/blob/main/docs/browsers.md for instructions." + label: Browser version(s) this issue occurs on + description: "To get the browser version, see https://userstyles.catppuccin.com/getting-started/faq/#what-version-of-my-browser-am-i-using." placeholder: Firefox v112.0.2 validations: required: true - - type: textarea + - id: stylus_version + type: input + attributes: + label: Stylus extension version + description: If Stylus is pinned, right-click the extension icon and select "Manage Extension". Otherwise, in the extensions popup, click the settings icon or three dots icon if present and select "Manage Extension". The version is displayed on the resulting page. + placeholder: Stylus 2.3.17 + validations: + required: true + - id: userstyle_version + type: input + attributes: + label: Installed version of the userstyle + description: Versions are listed on Stylus' Manage page. To get the version, click the Stylus extension icon, then in the popup, click Manage. The version is found beside the name of the userstyle. + placeholder: v2025.12.05 + validations: + required: true + - id: additional_comments + type: textarea attributes: label: Any additional comments? description: Add any information that hasn't been covered in the previous sections! diff --git a/.github/PULL_REQUEST_TEMPLATE/userstyle-creation.md b/.github/PULL_REQUEST_TEMPLATE/userstyle-creation.md index e0e0110189..05d75f5d99 100644 --- a/.github/PULL_REQUEST_TEMPLATE/userstyle-creation.md +++ b/.github/PULL_REQUEST_TEMPLATE/userstyle-creation.md @@ -1,27 +1,38 @@ - + -## 🎉 Theme for Website 🎉 +**Website**: ___ + +**URL**: ___ + +**Description**: -## 💬 Additional Comments 💬 +## 🗒 Checklist 🗒 + +- [ ] I have read and followed Catppuccin's [userstyle contributing guidelines](https://userstyles.catppuccin.com/contributing/). + + + +- [ ] I used AI (or AI-assistance) for this change. + +--- + +- [ ] I have read and followed Catppuccin's [userstyle submission guidelines](https://userstyles.catppuccin.com/contributing/creating-userstyles/). +- [ ] I have made a new directory underneath `/styles/`. + - [ ] I have ensured that the new directory is in **lower-kebab-case**. + - [ ] I have named the userstyle `catppuccin.user.less` within the new directory. + - [ ] I have followed the [template](https://github.com/catppuccin/userstyles/blob/main/template/catppuccin.user.less) and kept the preprocessor as [LESS](https://lesscss.org/#overview). +- [ ] I have updated the [`userstyles.yml`](https://github.com/catppuccin/userstyles/blob/main/scripts/userstyles.yml) file with information about the new userstyle. + +## 💬 Comments 💬 - -## 🗒 Checklist 🗒 - -- [ ] I have read and followed Catppuccin's [submission guidelines](https://userstyles.catppuccin.com/contributing/creating-userstyles/). -- [ ] I have made a new directory underneath `/styles/` containing the contents of the [`/template`](https://github.com/catppuccin/userstyles/blob/main/template/) directory. - - [ ] I have ensured that the new directory is in **lower-kebab-case**. - - [ ] I have followed the template and kept the preprocessor as [LESS](https://lesscss.org/#overview). -- [ ] I have made sure to update the [`userstyles.yml`](https://github.com/catppuccin/userstyles/blob/main/scripts/userstyles.yml) file with information about the new userstyle. -- [ ] I have included the following files: - - [ ] `catppuccin.user.less` - all the CSS for the userstyle, based on the template. diff --git a/.github/PULL_REQUEST_TEMPLATE/userstyle-update.md b/.github/PULL_REQUEST_TEMPLATE/userstyle-update.md index 2c9f6ee69d..6700b92432 100644 --- a/.github/PULL_REQUEST_TEMPLATE/userstyle-update.md +++ b/.github/PULL_REQUEST_TEMPLATE/userstyle-update.md @@ -1,10 +1,29 @@ +## 🗒 Checklist 🗒 + +- [ ] I have read and followed Catppuccin's [userstyle contributing guidelines](https://userstyles.catppuccin.com/contributing/). + + + +- [ ] I used AI (or AI-assistance) for this change. + ## 🔧 What does this fix? 🔧 -## 🗒 Checklist 🗒 +## 🔍 Reproduction Steps 🔍 -- [ ] I have read and followed Catppuccin's [contributing guidelines](https://userstyles.catppuccin.com/contributing/). + + + + diff --git a/.github/issue-labeler.yml b/.github/issue-labeler.yml index 724fcb4a43..4c40d0a6e4 100644 --- a/.github/issue-labeler.yml +++ b/.github/issue-labeler.yml @@ -1,6 +1,8 @@ # THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND. advent-of-code: - '/lbl:advent-of-code(,.*)?$/gm' +alacritty.org: + - '/lbl:alacritty.org(,.*)?$/gm' alternativeto: - '/lbl:alternativeto(,.*)?$/gm' amplenote: @@ -9,6 +11,8 @@ anilist: - '/lbl:anilist(,.*)?$/gm' anichart: - '/lbl:anichart(,.*)?$/gm' +anonymous-overflow: + - '/lbl:anonymous-overflow(,.*)?$/gm' arch-wiki: - '/lbl:arch-wiki(,.*)?$/gm' boringproxy: @@ -41,6 +45,8 @@ crowdin: - '/lbl:crowdin(,.*)?$/gm' deepl: - '/lbl:deepl(,.*)?$/gm' +deepseek: + - '/lbl:deepseek(,.*)?$/gm' desmos: - '/lbl:desmos(,.*)?$/gm' dev.to: @@ -153,10 +159,12 @@ migadu-webmail: - '/lbl:migadu-webmail(,.*)?$/gm' minesweeper: - '/lbl:minesweeper(,.*)?$/gm' -mullvad-leta: - - '/lbl:mullvad-leta(,.*)?$/gm' namemc: - '/lbl:namemc(,.*)?$/gm' +neovim.io: + - '/lbl:neovim.io(,.*)?$/gm' +npmx: + - '/lbl:npmx(,.*)?$/gm' nitter: - '/lbl:nitter(,.*)?$/gm' nixos-manual: @@ -185,6 +193,8 @@ pinterest: - '/lbl:pinterest(,.*)?$/gm' planet-minecraft: - '/lbl:planet-minecraft(,.*)?$/gm' +poe: + - '/lbl:poe(,.*)?$/gm' porkbun: - '/lbl:porkbun(,.*)?$/gm' pronouns.cc: @@ -205,8 +215,14 @@ react.dev: - '/lbl:react.dev(,.*)?$/gm' reddit: - '/lbl:reddit(,.*)?$/gm' +regex101: + - '/lbl:regex101(,.*)?$/gm' rentry.co: - '/lbl:rentry.co(,.*)?$/gm' +scalar: + - '/lbl:scalar(,.*)?$/gm' +searchix: + - '/lbl:searchix(,.*)?$/gm' searxng: - '/lbl:searxng(,.*)?$/gm' seventv: diff --git a/.github/labels.yml b/.github/labels.yml index 86191e94a5..836b41bace 100644 --- a/.github/labels.yml +++ b/.github/labels.yml @@ -2,6 +2,9 @@ - name: advent-of-code description: Advent Of Code color: '#eed49f' +- name: alacritty.org + description: alacritty.org + color: '#f5a97f' - name: alternativeto description: AlternativeTo color: '#7dc4e4' @@ -14,6 +17,9 @@ - name: anichart description: AniChart color: '#91d7e3' +- name: anonymous-overflow + description: Anonymous Overflow + color: '#a6da95' - name: arch-wiki description: Arch Wiki color: '#8aadf4' @@ -62,6 +68,9 @@ - name: deepl description: DeepL color: '#8aadf4' +- name: deepseek + description: DeepSeek + color: '#8aadf4' - name: desmos description: Desmos color: '#a6da95' @@ -230,12 +239,15 @@ - name: minesweeper description: Minesweeper Online color: '#cad3f5' -- name: mullvad-leta - description: Mullvad Leta - color: '#eed49f' - name: namemc description: NameMC color: '#8aadf4' +- name: neovim.io + description: neovim.io + color: '#a6da95' +- name: npmx + description: npmx + color: '#cad3f5' - name: nitter description: Nitter color: '#8aadf4' @@ -278,6 +290,9 @@ - name: planet-minecraft description: Planet Minecraft color: '#a6da95' +- name: poe + description: Poe + color: '#8aadf4' - name: porkbun description: Porkbun color: '#f5bde6' @@ -308,9 +323,18 @@ - name: reddit description: Reddit color: '#ed8796' +- name: regex101 + description: regex101 + color: '#8aadf4' - name: rentry.co description: Rentry.co color: '#cad3f5' +- name: scalar + description: Scalar + color: '#cad3f5' +- name: searchix + description: Searchix + color: '#8aadf4' - name: searxng description: SearXNG color: '#8aadf4' diff --git a/.github/pr-labeler.yml b/.github/pr-labeler.yml index 642ecbe3c1..65ed7d57fb 100644 --- a/.github/pr-labeler.yml +++ b/.github/pr-labeler.yml @@ -1,9 +1,11 @@ # THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND. advent-of-code: styles/advent-of-code/**/* +alacritty.org: styles/alacritty.org/**/* alternativeto: styles/alternativeto/**/* amplenote: styles/amplenote/**/* anilist: styles/anilist/**/* anichart: styles/anilist/**/* +anonymous-overflow: styles/anonymous-overflow/**/* arch-wiki: styles/arch-wiki/**/* boringproxy: styles/boringproxy/**/* brave-search: styles/brave-search/**/* @@ -20,6 +22,7 @@ cobalt: styles/cobalt/**/* crates.io: styles/crates.io/**/* crowdin: styles/crowdin/**/* deepl: styles/deepl/**/* +deepseek: styles/deepseek/**/* desmos: styles/desmos/**/* dev.to: styles/dev.to/**/* devdocs: styles/devdocs/**/* @@ -76,8 +79,9 @@ modrinth: styles/modrinth/**/* microsoft-word: styles/microsoft-word/**/* migadu-webmail: styles/migadu-webmail/**/* minesweeper: styles/minesweeper/**/* -mullvad-leta: styles/mullvad-leta/**/* namemc: styles/namemc/**/* +neovim.io: styles/neovim.io/**/* +npmx: styles/npmx/**/* nitter: styles/nitter/**/* nixos-manual: styles/nixos-manual/**/* nixpkgs-manual: styles/nixos-manual/**/* @@ -92,6 +96,7 @@ phanpy: styles/phanpy/**/* picrew: styles/picrew/**/* pinterest: styles/pinterest/**/* planet-minecraft: styles/planet-minecraft/**/* +poe: styles/poe/**/* porkbun: styles/porkbun/**/* pronouns.cc: styles/pronouns.cc/**/* pronouns.page: styles/pronouns.page/**/* @@ -102,7 +107,10 @@ quizlet: styles/quizlet/**/* raindrop: styles/raindrop/**/* react.dev: styles/react.dev/**/* reddit: styles/reddit/**/* +regex101: styles/regex101/**/* rentry.co: styles/rentry.co/**/* +scalar: styles/scalar/**/* +searchix: styles/searchix/**/* searxng: styles/searxng/**/* seventv: styles/seventv/**/* shinigami-eyes: styles/shinigami-eyes/**/* diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 1f62a1d4d9..a4ac1ef033 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -16,14 +16,15 @@ jobs: contents: write steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6 with: token: ${{ secrets.USERSTYLES_TOKEN }} - name: Setup Deno - uses: nekowinston/setup-deno@main + uses: denoland/setup-deno@v2 with: deno-version: v2.3.5 + cache: true - name: Generate Stylus import run: deno task ci:stylus-import diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 1ac3221f09..b26d21a5f0 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -15,22 +15,23 @@ jobs: # Prevent infinite loops by checking if the last commit was autogenerated. if: ${{ github.repository == 'catppuccin/userstyles' && github.event.commits[0].author.name != 'github-actions' }} steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6 with: token: ${{ secrets.USERSTYLES_TOKEN }} fetch-depth: 2 - name: Setup Deno - uses: nekowinston/setup-deno@main + uses: denoland/setup-deno@v2 with: deno-version: v2.3.5 + cache: true - name: Bump changed userstyles run: | git diff --name-only HEAD^1 HEAD | grep '^styles/.*catppuccin\.user\.less$' | xargs deno task ci:bump - name: Commit changes - uses: EndBug/add-and-commit@v9 + uses: EndBug/add-and-commit@a94899bca583c204427a224a7af87c02f9b325d5 # v9 with: message: "chore: bump changed userstyles" default_author: github_actions @@ -42,7 +43,7 @@ jobs: GITHUB_TOKEN: ${{ secrets.USERSTYLES_TOKEN }} - name: Commit changes - uses: EndBug/add-and-commit@v9 + uses: EndBug/add-and-commit@a94899bca583c204427a224a7af87c02f9b325d5 # v9 with: message: "chore: update generated files" default_author: github_actions @@ -52,7 +53,7 @@ jobs: run: deno fmt - name: Commit changes - uses: EndBug/add-and-commit@v9 + uses: EndBug/add-and-commit@a94899bca583c204427a224a7af87c02f9b325d5 # v9 with: message: "style: deno fmt" default_author: github_actions diff --git a/.github/workflows/deno-check.yml b/.github/workflows/deno-check.yml index fab09078df..3a37242698 100644 --- a/.github/workflows/deno-check.yml +++ b/.github/workflows/deno-check.yml @@ -14,12 +14,13 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6 - name: Setup Deno - uses: nekowinston/setup-deno@main + uses: denoland/setup-deno@v2 with: deno-version: v2.3.5 + cache: true - name: Check run: | diff --git a/.github/workflows/deno-lock.yml b/.github/workflows/deno-lock.yml index d4772b37a5..9fcefdfa63 100644 --- a/.github/workflows/deno-lock.yml +++ b/.github/workflows/deno-lock.yml @@ -11,20 +11,21 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6 with: ref: ${{ github.event.pull_request.head.ref }} - name: Setup Deno - uses: nekowinston/setup-deno@main + uses: denoland/setup-deno@v2 with: deno-version: v2.3.5 + cache: true - name: Regenerate Deno lock run: deno cache **/*.ts --lock=deno.lock - name: Commit & push changes - uses: EndBug/add-and-commit@v9 + uses: EndBug/add-and-commit@a94899bca583c204427a224a7af87c02f9b325d5 # v9 with: message: "chore: regenerate `deno.lock`" default_author: github_actions diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml index 1c529260de..b9d9b0b90b 100644 --- a/.github/workflows/docs.yml +++ b/.github/workflows/docs.yml @@ -16,9 +16,9 @@ jobs: build: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6 - name: Build & Upload Site - uses: withastro/action@v4 + uses: withastro/action@a4407e937037e68022f04ae1c068d3634f08bc8d # v4 with: path: ./docs package-manager: pnpm@10.14.0 @@ -32,4 +32,4 @@ jobs: steps: - name: Deploy to GitHub Pages id: deployment - uses: actions/deploy-pages@v4 + uses: actions/deploy-pages@d6db90164ac5ed86f2b6aed7e0febac5b3c0c03e # v4 diff --git a/.github/workflows/issues.yml b/.github/workflows/issues.yml index 20cb94ca01..1746b21619 100644 --- a/.github/workflows/issues.yml +++ b/.github/workflows/issues.yml @@ -11,7 +11,7 @@ jobs: steps: - name: Add issue labels - uses: github/issue-labeler@v3.4 + uses: github/issue-labeler@c1b0f9f52a63158c4adc09425e858e87b32e9685 # v3.4 with: repo-token: "${{ secrets.GITHUB_TOKEN }}" configuration-path: .github/issue-labeler.yml diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index c032d9bc0f..ed8dccc5c2 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -14,12 +14,13 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6 - name: Setup Deno - uses: nekowinston/setup-deno@main + uses: denoland/setup-deno@v2 with: deno-version: v2.3.5 + cache: true - name: Lint run: deno task lint diff --git a/.github/workflows/maintainers.yml b/.github/workflows/maintainers.yml index c7f349002f..a8baf49cea 100644 --- a/.github/workflows/maintainers.yml +++ b/.github/workflows/maintainers.yml @@ -12,12 +12,13 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6 - name: Setup Deno - uses: nekowinston/setup-deno@main + uses: denoland/setup-deno@v2 with: deno-version: v2.3.5 + cache: true - name: Sync maintainers run: deno task ci:sync-maintainers diff --git a/.github/workflows/pull-requests.yml b/.github/workflows/pull-requests.yml index c5150b1c45..94f70b653f 100644 --- a/.github/workflows/pull-requests.yml +++ b/.github/workflows/pull-requests.yml @@ -9,10 +9,10 @@ jobs: if: ${{ !contains(github.event.pull_request.title, '(tree-wide)') && !contains(github.event.pull_request.title, '(treewide)') }} steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6 - name: Add pull request labels - uses: actions/labeler@v4.3.0 + uses: actions/labeler@ac9175f8a1f3625fd0d4fb234536d26811351594 # v4.3.0 with: configuration-path: .github/pr-labeler.yml sync-labels: true diff --git a/deno.json b/deno.json index 71acd82a2b..5b117fa20d 100644 --- a/deno.json +++ b/deno.json @@ -6,21 +6,24 @@ "@catppuccin/palette": "npm:@catppuccin/palette@^1.7.1", "@octokit/rest": "npm:@octokit/rest@^21.0.2", "@std/assert": "jsr:@std/assert@^1.0.9", + "@std/async": "jsr:@std/async@^1.2.0", "@std/cli": "jsr:@std/cli@^1.0.8", "@std/fmt": "jsr:@std/fmt@^1.0.2", "@std/fs": "jsr:@std/fs@^1.0.6", + "@std/http": "jsr:@std/http@^1.0.25", "@std/path": "jsr:@std/path@^1.0.8", + "@std/testing": "jsr:@std/testing@^1.0.17", "@std/yaml": "jsr:@std/yaml@^1.0.5", - "ajv": "npm:ajv@8.17.1", + "ajv": "npm:ajv@8.18.0", "handlebars": "npm:handlebars@4.7.8", "json-schema-to-typescript": "npm:json-schema-to-typescript@^15.0.3", - "less": "npm:less@4.2.1", + "less": "npm:less@4.2.2", "postcss-less": "npm:postcss-less@6.0.0", "postcss-value-parser": "npm:postcss-value-parser@4.2.0", "stylelint": "npm:stylelint@^16.12.0", "stylelint-config-recommended": "npm:stylelint-config-recommended@14.0.1", "stylelint-config-standard": "npm:stylelint-config-standard@36.0.1", - "svgo": "npm:svgo@3.3.2", + "svgo": "npm:svgo@4.0.0", "type-fest": "npm:type-fest@^4.30.2", "usercss-meta": "npm:usercss-meta@0.12.0" }, @@ -31,7 +34,10 @@ "ci:update-types": "deno run -A ./scripts/types/update-types.ts", "ci:bump": "deno run -A ./scripts/bump-version/main.ts", "lint": "deno run -A ./scripts/lint/main.ts", - "lint:fix": "deno task lint --fix" + "lint:fix": "deno task lint --fix", + "serve": "deno run -A ./scripts/serve/main.ts", + "test": "deno test -A", + "test:update": "deno test -A -- --update" }, "nodeModulesDir": "auto", "fmt": { diff --git a/deno.lock b/deno.lock index 01af9eaaba..4ba3c226e2 100644 --- a/deno.lock +++ b/deno.lock @@ -1,12 +1,30 @@ { - "version": "4", + "version": "5", "specifiers": { - "jsr:@std/assert@^1.0.9": "1.0.9", - "jsr:@std/cli@^1.0.8": "1.0.8", - "jsr:@std/fmt@^1.0.2": "1.0.3", - "jsr:@std/fs@^1.0.6": "1.0.6", + "jsr:@std/assert@^1.0.17": "1.0.19", + "jsr:@std/assert@^1.0.9": "1.0.19", + "jsr:@std/async@^1.1.0": "1.2.0", + "jsr:@std/async@^1.2.0": "1.2.0", + "jsr:@std/cli@^1.0.28": "1.0.28", + "jsr:@std/cli@^1.0.8": "1.0.28", + "jsr:@std/data-structures@^1.0.10": "1.0.10", + "jsr:@std/encoding@^1.0.10": "1.0.10", + "jsr:@std/fmt@^1.0.2": "1.0.9", + "jsr:@std/fmt@^1.0.9": "1.0.9", + "jsr:@std/fs@^1.0.22": "1.0.23", + "jsr:@std/fs@^1.0.23": "1.0.23", + "jsr:@std/fs@^1.0.6": "1.0.23", + "jsr:@std/html@^1.0.5": "1.0.5", + "jsr:@std/http@^1.0.25": "1.0.25", + "jsr:@std/internal@^1.0.12": "1.0.12", "jsr:@std/internal@^1.0.5": "1.0.5", - "jsr:@std/path@^1.0.8": "1.0.8", + "jsr:@std/media-types@^1.1.0": "1.1.0", + "jsr:@std/net@^1.0.6": "1.0.6", + "jsr:@std/path@^1.0.8": "1.1.4", + "jsr:@std/path@^1.1.4": "1.1.4", + "jsr:@std/streams@^1.0.17": "1.0.17", + "jsr:@std/testing@*": "1.0.17", + "jsr:@std/testing@^1.0.17": "1.0.17", "jsr:@std/yaml@^1.0.5": "1.0.5", "npm:@actions/core@1.11.1": "1.11.1", "npm:@catppuccin/palette@^1.7.1": "1.7.1", @@ -14,16 +32,17 @@ "npm:@types/less@*": "3.0.7", "npm:@types/node@*": "22.5.4", "npm:ajv@8.17.1": "8.17.1", + "npm:ajv@8.18.0": "8.18.0", "npm:handlebars@4.7.8": "4.7.8", "npm:json-schema-to-typescript@^15.0.3": "15.0.3", - "npm:less@4.2.1": "4.2.1", + "npm:less@4.2.2": "4.2.2", "npm:postcss-less@6.0.0": "6.0.0_postcss@8.4.49", "npm:postcss-value-parser@4.2.0": "4.2.0", "npm:stylelint-config-recommended@14.0.1": "14.0.1_stylelint@16.12.0__@csstools+css-tokenizer@3.0.3__@csstools+css-parser-algorithms@3.0.4___@csstools+css-tokenizer@3.0.3__postcss-selector-parser@7.0.0__postcss@8.4.49", "npm:stylelint-config-standard@36.0.1": "36.0.1_stylelint@16.12.0__@csstools+css-tokenizer@3.0.3__@csstools+css-parser-algorithms@3.0.4___@csstools+css-tokenizer@3.0.3__postcss-selector-parser@7.0.0__postcss@8.4.49", "npm:stylelint@*": "16.12.0_@csstools+css-tokenizer@3.0.3_@csstools+css-parser-algorithms@3.0.4__@csstools+css-tokenizer@3.0.3_postcss-selector-parser@7.0.0_postcss@8.4.49", "npm:stylelint@^16.12.0": "16.12.0_@csstools+css-tokenizer@3.0.3_@csstools+css-parser-algorithms@3.0.4__@csstools+css-tokenizer@3.0.3_postcss-selector-parser@7.0.0_postcss@8.4.49", - "npm:svgo@3.3.2": "3.3.2", + "npm:svgo@4.0.0": "4.0.0", "npm:type-fest@^4.30.2": "4.30.2", "npm:usercss-meta@0.12.0": "0.12.0" }, @@ -31,27 +50,105 @@ "@std/assert@1.0.9": { "integrity": "a9f0c611a869cc791b26f523eec54c7e187aab7932c2c8e8bea0622d13680dcd", "dependencies": [ - "jsr:@std/internal" + "jsr:@std/internal@^1.0.5" ] }, + "@std/assert@1.0.19": { + "integrity": "eaada96ee120cb980bc47e040f82814d786fe8162ecc53c91d8df60b8755991e", + "dependencies": [ + "jsr:@std/internal@^1.0.12" + ] + }, + "@std/async@1.2.0": { + "integrity": "c059c6f6d95ca7cc012ae8e8d7164d1697113d54b0b679e4372b354b11c2dee5" + }, "@std/cli@1.0.8": { "integrity": "3762d8dc9a373715c08d871c38d45e637b25266f013a1d0bbe560bca409de94e" }, + "@std/cli@1.0.28": { + "integrity": "74ef9b976db59ca6b23a5283469c9072be6276853807a83ec6c7ce412135c70a", + "dependencies": [ + "jsr:@std/fmt@^1.0.9", + "jsr:@std/internal@^1.0.12" + ] + }, + "@std/data-structures@1.0.10": { + "integrity": "f574f86b0e07c69b9edc555fcc814b57d29258bad39fd5a34ba8a80ecf033cfe" + }, + "@std/encoding@1.0.10": { + "integrity": "8783c6384a2d13abd5e9e87a7ae0520a30e9f56aeeaa3bdf910a3eaaf5c811a1" + }, "@std/fmt@1.0.3": { "integrity": "97765c16aa32245ff4e2204ecf7d8562496a3cb8592340a80e7e554e0bb9149f" }, + "@std/fmt@1.0.9": { + "integrity": "2487343e8899fb2be5d0e3d35013e54477ada198854e52dd05ed0422eddcabe0" + }, "@std/fs@1.0.6": { "integrity": "42b56e1e41b75583a21d5a37f6a6a27de9f510bcd36c0c85791d685ca0b85fa2", "dependencies": [ - "jsr:@std/path" + "jsr:@std/path@^1.0.8" + ] + }, + "@std/fs@1.0.23": { + "integrity": "3ecbae4ce4fee03b180fa710caff36bb5adb66631c46a6460aaad49515565a37", + "dependencies": [ + "jsr:@std/internal@^1.0.12", + "jsr:@std/path@^1.1.4" + ] + }, + "@std/html@1.0.5": { + "integrity": "4e2d693f474cae8c16a920fa5e15a3b72267b94b84667f11a50c6dd1cb18d35e" + }, + "@std/http@1.0.25": { + "integrity": "577b4252290af1097132812b339fffdd55fb0f4aeb98ff11bdbf67998aa17193", + "dependencies": [ + "jsr:@std/cli@^1.0.28", + "jsr:@std/encoding", + "jsr:@std/fmt@^1.0.9", + "jsr:@std/fs@^1.0.23", + "jsr:@std/html", + "jsr:@std/media-types", + "jsr:@std/net", + "jsr:@std/path@^1.1.4", + "jsr:@std/streams" ] }, "@std/internal@1.0.5": { "integrity": "54a546004f769c1ac9e025abd15a76b6671ddc9687e2313b67376125650dc7ba" }, + "@std/internal@1.0.12": { + "integrity": "972a634fd5bc34b242024402972cd5143eac68d8dffaca5eaa4dba30ce17b027" + }, + "@std/media-types@1.1.0": { + "integrity": "c9d093f0c05c3512932b330e3cc1fe1d627b301db33a4c2c2185c02471d6eaa4" + }, + "@std/net@1.0.6": { + "integrity": "110735f93e95bb9feb95790a8b1d1bf69ec0dc74f3f97a00a76ea5efea25500c" + }, "@std/path@1.0.8": { "integrity": "548fa456bb6a04d3c1a1e7477986b6cffbce95102d0bb447c67c4ee70e0364be" }, + "@std/path@1.1.4": { + "integrity": "1d2d43f39efb1b42f0b1882a25486647cb851481862dc7313390b2bb044314b5", + "dependencies": [ + "jsr:@std/internal@^1.0.12" + ] + }, + "@std/streams@1.0.17": { + "integrity": "7859f3d9deed83cf4b41f19223d4a67661b3d3819e9fc117698f493bf5992140" + }, + "@std/testing@1.0.17": { + "integrity": "87bdc2700fa98249d48a17cd72413352d3d3680dcfbdb64947fd0982d6bbf681", + "dependencies": [ + "jsr:@std/assert@^1.0.17", + "jsr:@std/async@^1.1.0", + "jsr:@std/data-structures", + "jsr:@std/fs@^1.0.22", + "jsr:@std/internal@^1.0.12", + "jsr:@std/path@^1.1.4" + ] + }, "@std/yaml@1.0.5": { "integrity": "71ba3d334305ee2149391931508b2c293a8490f94a337eef3a09cade1a2a2742" } @@ -233,9 +330,6 @@ "@octokit/openapi-types" ] }, - "@trysound/sax@0.2.0": { - "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==" - }, "@types/json-schema@7.0.15": { "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==" }, @@ -260,6 +354,15 @@ "require-from-string" ] }, + "ajv@8.18.0": { + "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==", + "dependencies": [ + "fast-deep-equal", + "fast-uri", + "json-schema-traverse", + "require-from-string" + ] + }, "ansi-regex@5.0.1": { "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==" }, @@ -308,8 +411,8 @@ "colord@2.9.3": { "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==" }, - "commander@7.2.0": { - "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==" + "commander@11.1.0": { + "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==" }, "copy-anything@2.0.6": { "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==", @@ -346,13 +449,6 @@ "source-map-js" ] }, - "css-tree@2.3.1": { - "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", - "dependencies": [ - "mdn-data@2.0.30", - "source-map-js" - ] - }, "css-tree@3.1.0": { "integrity": "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==", "dependencies": [ @@ -364,7 +460,8 @@ "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==" }, "cssesc@3.0.0": { - "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==" + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "bin": true }, "csso@5.0.5": { "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==", @@ -401,8 +498,8 @@ "domelementtype" ] }, - "domutils@3.1.0": { - "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==", + "domutils@3.2.2": { + "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==", "dependencies": [ "dom-serializer", "domelementtype", @@ -422,7 +519,8 @@ "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==", "dependencies": [ "prr" - ] + ], + "bin": true }, "error-ex@1.3.2": { "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", @@ -459,6 +557,9 @@ "integrity": "sha512-KnhMXsKSPZlAhp7+IjUkRZKPb4fUyccpDrdFXbi4QL1qkmFh9kVY09Yox+n4MaOb3lHZ1Tv829C3oaaXoMYPDQ==", "dependencies": [ "picomatch@4.0.2" + ], + "optionalPeers": [ + "picomatch@4.0.2" ] }, "file-entry-cache@9.1.0": { @@ -526,9 +627,12 @@ "minimist", "neo-async", "source-map", - "uglify-js", "wordwrap" - ] + ], + "optionalDependencies": [ + "uglify-js" + ], + "bin": true }, "has-flag@4.0.0": { "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==" @@ -549,7 +653,8 @@ "integrity": "sha512-InwqeHHN2XpumIkMvpl/DCJVrAHgCsG5+cn1XlnLWGwtZBm8QJfSusItfrwx81CTp5agNZqpKU2J/ccC5nGT4A==" }, "image-size@0.5.5": { - "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==" + "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==", + "bin": true }, "import-fresh@3.3.0": { "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", @@ -598,7 +703,8 @@ "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", "dependencies": [ "argparse" - ] + ], + "bin": true }, "json-buffer@3.0.1": { "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==" @@ -618,7 +724,8 @@ "minimist", "prettier", "tinyglobby" - ] + ], + "bin": true }, "json-schema-traverse@1.0.0": { "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==" @@ -635,20 +742,23 @@ "known-css-properties@0.35.0": { "integrity": "sha512-a/RAk2BfKk+WFGhhOCAYqSiFLc34k8Mt/6NWRI4joER0EYUzXIcFivjjnoD3+XU1DggLn/tZc3DOAgke7l8a4A==" }, - "less@4.2.1": { - "integrity": "sha512-CasaJidTIhWmjcqv0Uj5vccMI7pJgfD9lMkKtlnTHAdJdYK/7l8pM9tumLyJ0zhbD4KJLo/YvTj+xznQd5NBhg==", + "less@4.2.2": { + "integrity": "sha512-tkuLHQlvWUTeQ3doAqnHbNn8T6WX1KA8yvbKG9x4VtKtIjHsVKQZCH11zRgAfbDAXC2UNIg/K9BYAAcEzUIrNg==", "dependencies": [ "copy-anything", + "parse-node-version", + "tslib" + ], + "optionalDependencies": [ "errno", "graceful-fs", "image-size", "make-dir", "mime", "needle", - "parse-node-version", - "source-map", - "tslib" - ] + "source-map" + ], + "bin": true }, "lines-and-columns@1.2.4": { "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" @@ -672,9 +782,6 @@ "mdn-data@2.0.28": { "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==" }, - "mdn-data@2.0.30": { - "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==" - }, "mdn-data@2.12.2": { "integrity": "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==" }, @@ -692,7 +799,8 @@ ] }, "mime@1.6.0": { - "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==" + "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", + "bin": true }, "minimist@1.2.8": { "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==" @@ -701,14 +809,16 @@ "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" }, "nanoid@3.3.8": { - "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==" + "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==", + "bin": true }, "needle@3.3.1": { "integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==", "dependencies": [ "iconv-lite", "sax" - ] + ], + "bin": true }, "neo-async@2.6.2": { "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==" @@ -789,7 +899,8 @@ ] }, "prettier@3.4.2": { - "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==" + "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==", + "bin": true }, "prr@1.0.1": { "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==" @@ -822,7 +933,8 @@ "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==" }, "semver@5.7.2": { - "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==" + "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", + "bin": true }, "signal-exit@4.1.0": { "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==" @@ -912,7 +1024,8 @@ "svg-tags", "table", "write-file-atomic" - ] + ], + "bin": true }, "supports-color@7.2.0": { "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", @@ -930,22 +1043,23 @@ "svg-tags@1.0.0": { "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==" }, - "svgo@3.3.2": { - "integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==", + "svgo@4.0.0": { + "integrity": "sha512-VvrHQ+9uniE+Mvx3+C9IEe/lWasXCU0nXMY2kZeLrHNICuRiC8uMPyM14UEaMOFA5mhyQqEkB02VoQ16n3DLaw==", "dependencies": [ - "@trysound/sax", "commander", "css-select", - "css-tree@2.3.1", + "css-tree@3.1.0", "css-what", "csso", - "picocolors" - ] + "picocolors", + "sax" + ], + "bin": true }, "table@6.9.0": { "integrity": "sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==", "dependencies": [ - "ajv", + "ajv@8.17.1", "lodash.truncate", "slice-ansi", "string-width", @@ -975,7 +1089,8 @@ "integrity": "sha512-UJShLPYi1aWqCdq9HycOL/gwsuqda1OISdBO3t8RlXQC4QvtuIz4b5FCfe2dQIWEpmlRExKmcTBfP1r9bhY7ig==" }, "uglify-js@3.19.3": { - "integrity": "sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==" + "integrity": "sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==", + "bin": true }, "undici-types@6.19.8": { "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==" @@ -999,7 +1114,8 @@ "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", "dependencies": [ "isexe" - ] + ], + "bin": true }, "wordwrap@1.0.0": { "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==" @@ -1022,24 +1138,27 @@ "workspace": { "dependencies": [ "jsr:@std/assert@^1.0.9", + "jsr:@std/async@^1.2.0", "jsr:@std/cli@^1.0.8", "jsr:@std/fmt@^1.0.2", "jsr:@std/fs@^1.0.6", + "jsr:@std/http@^1.0.25", "jsr:@std/path@^1.0.8", + "jsr:@std/testing@^1.0.17", "jsr:@std/yaml@^1.0.5", "npm:@actions/core@1.11.1", "npm:@catppuccin/palette@^1.7.1", "npm:@octokit/rest@^21.0.2", - "npm:ajv@8.17.1", + "npm:ajv@8.18.0", "npm:handlebars@4.7.8", "npm:json-schema-to-typescript@^15.0.3", - "npm:less@4.2.1", + "npm:less@4.2.2", "npm:postcss-less@6.0.0", "npm:postcss-value-parser@4.2.0", "npm:stylelint-config-recommended@14.0.1", "npm:stylelint-config-standard@36.0.1", "npm:stylelint@^16.12.0", - "npm:svgo@3.3.2", + "npm:svgo@4.0.0", "npm:type-fest@^4.30.2", "npm:usercss-meta@0.12.0" ] diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index 8f5b9b07c3..67a981986d 100644 --- a/docs/astro.config.mjs +++ b/docs/astro.config.mjs @@ -4,6 +4,7 @@ import catppuccin from "@catppuccin/starlight"; import starlightLinksValidator from "starlight-links-validator"; import starlightImageZoom from "starlight-image-zoom"; import starlightGitHubAlerts from "starlight-github-alerts"; +import starlightAutoSidebar from "starlight-auto-sidebar"; import mermaid from "astro-mermaid"; import { remarkHeadingId } from "remark-custom-heading-id"; @@ -57,29 +58,7 @@ export default defineConfig({ { label: "Contributing", collapsed: true, - items: [ - "contributing", - "contributing/creating-userstyles", - "contributing/userstylesyml", - { - label: "How can I theme ...?", - autogenerate: { directory: "contributing/guides" }, - }, - { - label: "Tutorials", - autogenerate: { directory: "contributing/tutorials" }, - }, - { - label: "Tips and Tricks", - autogenerate: { directory: "contributing/tips-and-tricks" }, - }, - "contributing/standard-library", - "contributing/library-modules", - ], - }, - { - label: "Reference", - autogenerate: { directory: "reference" }, + autogenerate: { directory: "contributing" }, }, ], plugins: [ @@ -87,7 +66,14 @@ export default defineConfig({ starlightLinksValidator(), starlightGitHubAlerts(), starlightImageZoom(), + starlightAutoSidebar(), ], }), ], + redirects: { + "/contributing/standard-library/": + "/contributing/reference/libraries/standard/", + "/reference/browsers/": + "/getting-started/faq/#what-version-of-my-browser-am-i-using", + }, }); diff --git a/docs/package.json b/docs/package.json index 631ef865b4..e982e77052 100644 --- a/docs/package.json +++ b/docs/package.json @@ -19,9 +19,10 @@ "mermaid": "^11.10.1", "remark-custom-heading-id": "^2.0.0", "sharp": "^0.34.2", + "starlight-auto-sidebar": "^0.2.0", "starlight-github-alerts": "^0.1.0", "starlight-image-zoom": "^0.13.0", - "starlight-links-validator": "^0.17.2", + "starlight-links-validator": "^0.18.0", "yaml": "^2.8.1" } } diff --git a/docs/pnpm-lock.yaml b/docs/pnpm-lock.yaml index 4e5fab0b06..5491195d2b 100644 --- a/docs/pnpm-lock.yaml +++ b/docs/pnpm-lock.yaml @@ -13,7 +13,7 @@ importers: version: 0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)) '@catppuccin/starlight': specifier: ^1.0.2 - version: 1.0.2(@astrojs/starlight@0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)))(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)) + version: 1.1.1(@astrojs/starlight@0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)))(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)) astro: specifier: ^5.6.1 version: 5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1) @@ -32,6 +32,9 @@ importers: sharp: specifier: ^0.34.2 version: 0.34.3 + starlight-auto-sidebar: + specifier: ^0.2.0 + version: 0.2.0(@astrojs/starlight@0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1))) starlight-github-alerts: specifier: ^0.1.0 version: 0.1.0(@astrojs/starlight@0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1))) @@ -39,8 +42,8 @@ importers: specifier: ^0.13.0 version: 0.13.0(@astrojs/starlight@0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1))) starlight-links-validator: - specifier: ^0.17.2 - version: 0.17.2(@astrojs/starlight@0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1))) + specifier: ^0.18.0 + version: 0.18.0(@astrojs/starlight@0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1))) yaml: specifier: ^2.8.1 version: 2.8.1 @@ -111,10 +114,10 @@ packages: '@capsizecss/unpack@2.4.0': resolution: {integrity: sha512-GrSU71meACqcmIUxPYOJvGKF0yryjN/L1aCuE9DViCTJI7bfkjgYDPD1zbNDcINJwSSP6UaBZY9GAbYDO7re0Q==} - '@catppuccin/starlight@1.0.2': - resolution: {integrity: sha512-Qfy0l5EjGCoyRFlpsyDm9YFaxHCZXrMbLaEFPjzbFHMndKLv457nEyNlFnP7EkN1djnJgfORmmoaQ4ru2wiQEg==} + '@catppuccin/starlight@1.1.1': + resolution: {integrity: sha512-iyI/gdGfqREetGti3O11l7iMLCmt0LRSbIis8ySlZo8hqb749KyMmisO/9kqBvk2oFKw9hGNDbutcNxKSI2spg==} peerDependencies: - '@astrojs/starlight': '>=0.32' + '@astrojs/starlight': '>=0.34' astro: ^5.0.0 '@chevrotain/cst-dts-gen@11.0.3': @@ -361,144 +364,170 @@ packages: resolution: {integrity: sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==} cpu: [arm64] os: [linux] + libc: [glibc] '@img/sharp-libvips-linux-arm64@1.2.0': resolution: {integrity: sha512-RXwd0CgG+uPRX5YYrkzKyalt2OJYRiJQ8ED/fi1tq9WQW2jsQIn0tqrlR5l5dr/rjqq6AHAxURhj2DVjyQWSOA==} cpu: [arm64] os: [linux] + libc: [glibc] '@img/sharp-libvips-linux-arm@1.0.5': resolution: {integrity: sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==} cpu: [arm] os: [linux] + libc: [glibc] '@img/sharp-libvips-linux-arm@1.2.0': resolution: {integrity: sha512-mWd2uWvDtL/nvIzThLq3fr2nnGfyr/XMXlq8ZJ9WMR6PXijHlC3ksp0IpuhK6bougvQrchUAfzRLnbsen0Cqvw==} cpu: [arm] os: [linux] + libc: [glibc] '@img/sharp-libvips-linux-ppc64@1.2.0': resolution: {integrity: sha512-Xod/7KaDDHkYu2phxxfeEPXfVXFKx70EAFZ0qyUdOjCcxbjqyJOEUpDe6RIyaunGxT34Anf9ue/wuWOqBW2WcQ==} cpu: [ppc64] os: [linux] + libc: [glibc] '@img/sharp-libvips-linux-s390x@1.0.4': resolution: {integrity: sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==} cpu: [s390x] os: [linux] + libc: [glibc] '@img/sharp-libvips-linux-s390x@1.2.0': resolution: {integrity: sha512-eMKfzDxLGT8mnmPJTNMcjfO33fLiTDsrMlUVcp6b96ETbnJmd4uvZxVJSKPQfS+odwfVaGifhsB07J1LynFehw==} cpu: [s390x] os: [linux] + libc: [glibc] '@img/sharp-libvips-linux-x64@1.0.4': resolution: {integrity: sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==} cpu: [x64] os: [linux] + libc: [glibc] '@img/sharp-libvips-linux-x64@1.2.0': resolution: {integrity: sha512-ZW3FPWIc7K1sH9E3nxIGB3y3dZkpJlMnkk7z5tu1nSkBoCgw2nSRTFHI5pB/3CQaJM0pdzMF3paf9ckKMSE9Tg==} cpu: [x64] os: [linux] + libc: [glibc] '@img/sharp-libvips-linuxmusl-arm64@1.0.4': resolution: {integrity: sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==} cpu: [arm64] os: [linux] + libc: [musl] '@img/sharp-libvips-linuxmusl-arm64@1.2.0': resolution: {integrity: sha512-UG+LqQJbf5VJ8NWJ5Z3tdIe/HXjuIdo4JeVNADXBFuG7z9zjoegpzzGIyV5zQKi4zaJjnAd2+g2nna8TZvuW9Q==} cpu: [arm64] os: [linux] + libc: [musl] '@img/sharp-libvips-linuxmusl-x64@1.0.4': resolution: {integrity: sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==} cpu: [x64] os: [linux] + libc: [musl] '@img/sharp-libvips-linuxmusl-x64@1.2.0': resolution: {integrity: sha512-SRYOLR7CXPgNze8akZwjoGBoN1ThNZoqpOgfnOxmWsklTGVfJiGJoC/Lod7aNMGA1jSsKWM1+HRX43OP6p9+6Q==} cpu: [x64] os: [linux] + libc: [musl] '@img/sharp-linux-arm64@0.33.5': resolution: {integrity: sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [arm64] os: [linux] + libc: [glibc] '@img/sharp-linux-arm64@0.34.3': resolution: {integrity: sha512-QdrKe3EvQrqwkDrtuTIjI0bu6YEJHTgEeqdzI3uWJOH6G1O8Nl1iEeVYRGdj1h5I21CqxSvQp1Yv7xeU3ZewbA==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [arm64] os: [linux] + libc: [glibc] '@img/sharp-linux-arm@0.33.5': resolution: {integrity: sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [arm] os: [linux] + libc: [glibc] '@img/sharp-linux-arm@0.34.3': resolution: {integrity: sha512-oBK9l+h6KBN0i3dC8rYntLiVfW8D8wH+NPNT3O/WBHeW0OQWCjfWksLUaPidsrDKpJgXp3G3/hkmhptAW0I3+A==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [arm] os: [linux] + libc: [glibc] '@img/sharp-linux-ppc64@0.34.3': resolution: {integrity: sha512-GLtbLQMCNC5nxuImPR2+RgrviwKwVql28FWZIW1zWruy6zLgA5/x2ZXk3mxj58X/tszVF69KK0Is83V8YgWhLA==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [ppc64] os: [linux] + libc: [glibc] '@img/sharp-linux-s390x@0.33.5': resolution: {integrity: sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [s390x] os: [linux] + libc: [glibc] '@img/sharp-linux-s390x@0.34.3': resolution: {integrity: sha512-3gahT+A6c4cdc2edhsLHmIOXMb17ltffJlxR0aC2VPZfwKoTGZec6u5GrFgdR7ciJSsHT27BD3TIuGcuRT0KmQ==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [s390x] os: [linux] + libc: [glibc] '@img/sharp-linux-x64@0.33.5': resolution: {integrity: sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [x64] os: [linux] + libc: [glibc] '@img/sharp-linux-x64@0.34.3': resolution: {integrity: sha512-8kYso8d806ypnSq3/Ly0QEw90V5ZoHh10yH0HnrzOCr6DKAPI6QVHvwleqMkVQ0m+fc7EH8ah0BB0QPuWY6zJQ==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [x64] os: [linux] + libc: [glibc] '@img/sharp-linuxmusl-arm64@0.33.5': resolution: {integrity: sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [arm64] os: [linux] + libc: [musl] '@img/sharp-linuxmusl-arm64@0.34.3': resolution: {integrity: sha512-vAjbHDlr4izEiXM1OTggpCcPg9tn4YriK5vAjowJsHwdBIdx0fYRsURkxLG2RLm9gyBq66gwtWI8Gx0/ov+JKQ==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [arm64] os: [linux] + libc: [musl] '@img/sharp-linuxmusl-x64@0.33.5': resolution: {integrity: sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [x64] os: [linux] + libc: [musl] '@img/sharp-linuxmusl-x64@0.34.3': resolution: {integrity: sha512-gCWUn9547K5bwvOn9l5XGAEjVTTRji4aPTqLzGXHvIr6bIDZKNTA34seMPgM0WmSf+RYBH411VavCejp3PkOeQ==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [x64] os: [linux] + libc: [musl] '@img/sharp-wasm32@0.33.5': resolution: {integrity: sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==} @@ -623,56 +652,67 @@ packages: resolution: {integrity: sha512-54v4okehwl5TaSIkpp97rAHGp7t3ghinRd/vyC1iXqXMfjYUTm7TfYmCzXDoHUPTTf36L8pr0E7YsD3CfB3ZDg==} cpu: [arm] os: [linux] + libc: [glibc] '@rollup/rollup-linux-arm-musleabihf@4.50.1': resolution: {integrity: sha512-p/LaFyajPN/0PUHjv8TNyxLiA7RwmDoVY3flXHPSzqrGcIp/c2FjwPPP5++u87DGHtw+5kSH5bCJz0mvXngYxw==} cpu: [arm] os: [linux] + libc: [musl] '@rollup/rollup-linux-arm64-gnu@4.50.1': resolution: {integrity: sha512-2AbMhFFkTo6Ptna1zO7kAXXDLi7H9fGTbVaIq2AAYO7yzcAsuTNWPHhb2aTA6GPiP+JXh85Y8CiS54iZoj4opw==} cpu: [arm64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-arm64-musl@4.50.1': resolution: {integrity: sha512-Cgef+5aZwuvesQNw9eX7g19FfKX5/pQRIyhoXLCiBOrWopjo7ycfB292TX9MDcDijiuIJlx1IzJz3IoCPfqs9w==} cpu: [arm64] os: [linux] + libc: [musl] '@rollup/rollup-linux-loongarch64-gnu@4.50.1': resolution: {integrity: sha512-RPhTwWMzpYYrHrJAS7CmpdtHNKtt2Ueo+BlLBjfZEhYBhK00OsEqM08/7f+eohiF6poe0YRDDd8nAvwtE/Y62Q==} cpu: [loong64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-ppc64-gnu@4.50.1': resolution: {integrity: sha512-eSGMVQw9iekut62O7eBdbiccRguuDgiPMsw++BVUg+1K7WjZXHOg/YOT9SWMzPZA+w98G+Fa1VqJgHZOHHnY0Q==} cpu: [ppc64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-riscv64-gnu@4.50.1': resolution: {integrity: sha512-S208ojx8a4ciIPrLgazF6AgdcNJzQE4+S9rsmOmDJkusvctii+ZvEuIC4v/xFqzbuP8yDjn73oBlNDgF6YGSXQ==} cpu: [riscv64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-riscv64-musl@4.50.1': resolution: {integrity: sha512-3Ag8Ls1ggqkGUvSZWYcdgFwriy2lWo+0QlYgEFra/5JGtAd6C5Hw59oojx1DeqcA2Wds2ayRgvJ4qxVTzCHgzg==} cpu: [riscv64] os: [linux] + libc: [musl] '@rollup/rollup-linux-s390x-gnu@4.50.1': resolution: {integrity: sha512-t9YrKfaxCYe7l7ldFERE1BRg/4TATxIg+YieHQ966jwvo7ddHJxPj9cNFWLAzhkVsbBvNA4qTbPVNsZKBO4NSg==} cpu: [s390x] os: [linux] + libc: [glibc] '@rollup/rollup-linux-x64-gnu@4.50.1': resolution: {integrity: sha512-MCgtFB2+SVNuQmmjHf+wfI4CMxy3Tk8XjA5Z//A0AKD7QXUYFMQcns91K6dEHBvZPCnhJSyDWLApk40Iq/H3tA==} cpu: [x64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-x64-musl@4.50.1': resolution: {integrity: sha512-nEvqG+0jeRmqaUMuwzlfMKwcIVffy/9KGbAGyoa26iu6eSngAYQ512bMXuqqPrlTyfqdlB9FVINs93j534UJrg==} cpu: [x64] os: [linux] + libc: [musl] '@rollup/rollup-openharmony-arm64@4.50.1': resolution: {integrity: sha512-RDsLm+phmT3MJd9SNxA9MNuEAO/J2fhW8GXk62G/B4G7sLVumNFbRwDL6v5NrESb48k+QMqdGbHgEtfU0LCpbA==} @@ -881,6 +921,10 @@ packages: ansi-align@3.0.1: resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==} + ansi-escapes@7.1.0: + resolution: {integrity: sha512-YdhtCd19sKRKfAAUsrcC1wzm4JuzJoiX4pOJqIoW2qmKj5WzG/dL8uUJ0361zaXtHqK7gEhOwtAtz7t3Yq3X5g==} + engines: {node: '>=18'} + ansi-regex@5.0.1: resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==} engines: {node: '>=8'} @@ -1318,6 +1362,10 @@ packages: resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==} engines: {node: '>=0.12'} + environment@1.1.0: + resolution: {integrity: sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==} + engines: {node: '>=18'} + es-module-lexer@1.7.0: resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==} @@ -1416,6 +1464,10 @@ packages: hachure-fill@0.5.2: resolution: {integrity: sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==} + has-flag@5.0.1: + resolution: {integrity: sha512-CsNUt5x9LUdx6hnk/E2SZLsDyvfqANZSUq4+D3D8RzDJ2M+HDTIkF60ibS1vHaK55vzgiZw1bEPFG9yH7l33wA==} + engines: {node: '>=12'} + hast-util-embedded@3.0.0: resolution: {integrity: sha512-naH8sld4Pe2ep03qqULEtvYr7EjrLK2QHY8KJR6RJkTUjPGObe1vnx585uzem2hGra+s1q08DZZpfgDVYRbaXA==} @@ -2091,6 +2143,7 @@ packages: sitemap@8.0.0: resolution: {integrity: sha512-+AbdxhM9kJsHtruUF39bwS/B0Fytw6Fr1o4ZAIAEqA6cke2xcoO2GleBw9Zw7nRzILVEgz7zBM5GiTJjie1G9A==} engines: {node: '>=14.0.0', npm: '>=6.0.0'} + deprecated: 'SECURITY: Multiple vulnerabilities fixed in 8.0.1 (XML injection, path traversal, command injection, protocol injection). Upgrade immediately: npm install sitemap@8.0.1' hasBin: true smartypants@0.2.2: @@ -2112,6 +2165,12 @@ packages: space-separated-tokens@2.0.2: resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==} + starlight-auto-sidebar@0.2.0: + resolution: {integrity: sha512-iHPAhwnkdkFM84QajJvjKo0twNLg9fU+HrVCxs0QgWAQdYLK9bhM1SxyVPV3O+YBo111mBHryzDA1ChHWUxD1w==} + engines: {node: '>=22.12.0'} + peerDependencies: + '@astrojs/starlight': '>=0.38.0' + starlight-github-alerts@0.1.0: resolution: {integrity: sha512-mz+btaGen5ByF1BRCMHnqkzSGXsHfvXfiPGGB9BgeczKUvbDR1PAciLYam0gN0JbZYwZSzmhJzgvcHG6gt4f/Q==} engines: {node: '>=18.17.1'} @@ -2124,8 +2183,8 @@ packages: peerDependencies: '@astrojs/starlight': '>=0.32.0' - starlight-links-validator@0.17.2: - resolution: {integrity: sha512-d2SRWu04HPiUzrzntuv/uzuXnIu4reJwzX1c+7uvcnqOCuzgpv+tmlUC+dp3VYpmfxQy8RX+xcWtfcEkx905VA==} + starlight-links-validator@0.18.0: + resolution: {integrity: sha512-R0gLdrKWdpAEqux3DL2B3QvNJM8Zpys8CQu1BGLD9hc+66nt/Q6aJDkvvkvoCVky9JKmBEnmL4PhFkyz13lK5g==} engines: {node: '>=18.17.1'} peerDependencies: '@astrojs/starlight': '>=0.32.0' @@ -2161,6 +2220,18 @@ packages: stylis@4.3.6: resolution: {integrity: sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==} + supports-color@10.2.2: + resolution: {integrity: sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==} + engines: {node: '>=18'} + + supports-hyperlinks@4.2.0: + resolution: {integrity: sha512-FWXryrXrsYX2vlTD9WdfgOeN7a2EbuS3MiMaDkFibR0B6IxelCNbFgUJEGLn3eSn+9HX7RuM0ig6Lzr8lccxUA==} + engines: {node: '>=20'} + + terminal-link@5.0.0: + resolution: {integrity: sha512-qFAy10MTMwjzjU8U16YS4YoZD+NQLHzLssFMNqgravjbvIPNiqkGFR4yjhJfmY9R5OFU7+yHxc6y+uGHkKwLRA==} + engines: {node: '>=20'} + tiny-inflate@1.0.3: resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==} @@ -2609,7 +2680,7 @@ snapshots: transitivePeerDependencies: - encoding - '@catppuccin/starlight@1.0.2(@astrojs/starlight@0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)))(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1))': + '@catppuccin/starlight@1.1.1(@astrojs/starlight@0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)))(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1))': dependencies: '@astrojs/starlight': 0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)) astro: 5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1) @@ -3262,6 +3333,10 @@ snapshots: dependencies: string-width: 4.2.3 + ansi-escapes@7.1.0: + dependencies: + environment: 1.1.0 + ansi-regex@5.0.1: {} ansi-regex@6.2.2: {} @@ -3780,6 +3855,8 @@ snapshots: entities@6.0.1: {} + environment@1.1.0: {} + es-module-lexer@1.7.0: {} esast-util-from-estree@2.0.0: @@ -3923,6 +4000,8 @@ snapshots: hachure-fill@0.5.2: {} + has-flag@5.0.1: {} + hast-util-embedded@3.0.0: dependencies: '@types/hast': 3.0.4 @@ -5188,6 +5267,11 @@ snapshots: space-separated-tokens@2.0.2: {} + starlight-auto-sidebar@0.2.0(@astrojs/starlight@0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1))): + dependencies: + '@astrojs/starlight': 0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)) + github-slugger: 2.0.0 + starlight-github-alerts@0.1.0(@astrojs/starlight@0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1))): dependencies: '@astrojs/starlight': 0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)) @@ -5203,7 +5287,7 @@ snapshots: transitivePeerDependencies: - supports-color - starlight-links-validator@0.17.2(@astrojs/starlight@0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1))): + starlight-links-validator@0.18.0(@astrojs/starlight@0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1))): dependencies: '@astrojs/starlight': 0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)) '@types/picomatch': 3.0.2 @@ -5215,6 +5299,7 @@ snapshots: mdast-util-mdx-jsx: 3.2.0 mdast-util-to-string: 4.0.0 picomatch: 4.0.3 + terminal-link: 5.0.0 unist-util-visit: 5.0.0 transitivePeerDependencies: - supports-color @@ -5256,6 +5341,18 @@ snapshots: stylis@4.3.6: {} + supports-color@10.2.2: {} + + supports-hyperlinks@4.2.0: + dependencies: + has-flag: 5.0.1 + supports-color: 10.2.2 + + terminal-link@5.0.0: + dependencies: + ansi-escapes: 7.1.0 + supports-hyperlinks: 4.2.0 + tiny-inflate@1.0.3: {} tinyexec@0.3.2: {} diff --git a/docs/src/content.config.ts b/docs/src/content.config.ts index 7fbcf2c332..6cb5eac864 100644 --- a/docs/src/content.config.ts +++ b/docs/src/content.config.ts @@ -1,7 +1,13 @@ import { defineCollection } from "astro:content"; import { docsLoader } from "@astrojs/starlight/loaders"; import { docsSchema } from "@astrojs/starlight/schema"; +import { autoSidebarLoader } from "starlight-auto-sidebar/loader"; +import { autoSidebarSchema } from "starlight-auto-sidebar/schema"; export const collections = { docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }), + autoSidebar: defineCollection({ + loader: autoSidebarLoader(), + schema: autoSidebarSchema(), + }), }; diff --git a/docs/src/content/docs/contributing/creating-userstyles.mdx b/docs/src/content/docs/contributing/creating-userstyles.mdx index a05883e194..91d7617c5d 100644 --- a/docs/src/content/docs/contributing/creating-userstyles.mdx +++ b/docs/src/content/docs/contributing/creating-userstyles.mdx @@ -1,6 +1,8 @@ --- title: Creating Userstyles description: Overview of the userstyle creation process. +sidebar: + order: 2 --- import { Steps } from '@astrojs/starlight/components'; diff --git a/docs/src/content/docs/contributing/guides/_meta.yml b/docs/src/content/docs/contributing/guides/_meta.yml new file mode 100644 index 0000000000..01a0a67f19 --- /dev/null +++ b/docs/src/content/docs/contributing/guides/_meta.yml @@ -0,0 +1,2 @@ +label: How can I theme ...? +order: 5 diff --git a/docs/src/content/docs/contributing/guides/raw-color-values.md b/docs/src/content/docs/contributing/guides/raw-color-values.md index af1ec6b3a2..2b4e9a616a 100644 --- a/docs/src/content/docs/contributing/guides/raw-color-values.md +++ b/docs/src/content/docs/contributing/guides/raw-color-values.md @@ -7,8 +7,8 @@ sidebar: ## Obtaining RGB values -See [`#lib.rgbify()`](/contributing/standard-library/#librgbify). +See [`#lib.rgbify()`](/contributing/reference/libraries/standard/v/v1#librgbify). ## Obtaining HSL values -See [`#lib.hslify()`](/contributing/standard-library/#libhslify). +See [`#lib.hslify()`](/contributing/reference/libraries/standard/v/v1#libhslify). diff --git a/docs/src/content/docs/contributing/guides/syntax-highlighting.md b/docs/src/content/docs/contributing/guides/syntax-highlighting.md index f45c2e12f7..c33c5ceafe 100644 --- a/docs/src/content/docs/contributing/guides/syntax-highlighting.md +++ b/docs/src/content/docs/contributing/guides/syntax-highlighting.md @@ -32,7 +32,7 @@ After including the CSS variables with the mixin specified above, add the follow After including the CSS variables with the mixin specified above, add the following line at the top of the userstyle, beneath the `@-moz-document` line. ```css -@import url("https://prismjs.catppuccin.com/variables.css"); +@import url("https://prismjs.catppuccin.com/variables.important.css"); ``` ## Chroma diff --git a/docs/src/content/docs/contributing/index.md b/docs/src/content/docs/contributing/index.md index 7c0218f582..bc6ec9715c 100644 --- a/docs/src/content/docs/contributing/index.md +++ b/docs/src/content/docs/contributing/index.md @@ -3,6 +3,7 @@ title: Contributing description: Contribution guidelines for the Catppuccin Userstyles project. sidebar: label: Overview + order: 1 --- If it is your first time contributing to a project on GitHub, please see the popular [first-contributions](https://github.com/firstcontributions/first-contributions) repository. 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 any questions and clarify your understanding, we are more than happy to help! diff --git a/docs/src/content/docs/contributing/library-modules.md b/docs/src/content/docs/contributing/library-modules.md deleted file mode 100644 index b25f314809..0000000000 --- a/docs/src/content/docs/contributing/library-modules.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Library Modules -description: Reference for library modules. ---- - -Coming soon. diff --git a/docs/src/content/docs/contributing/reference/_meta.yml b/docs/src/content/docs/contributing/reference/_meta.yml new file mode 100644 index 0000000000..7d9f637733 --- /dev/null +++ b/docs/src/content/docs/contributing/reference/_meta.yml @@ -0,0 +1,2 @@ +label: Reference +order: 7 diff --git a/docs/src/content/docs/contributing/reference/libraries/_meta.yml b/docs/src/content/docs/contributing/reference/libraries/_meta.yml new file mode 100644 index 0000000000..fc171f4dcc --- /dev/null +++ b/docs/src/content/docs/contributing/reference/libraries/_meta.yml @@ -0,0 +1 @@ +label: Libraries diff --git a/docs/src/content/docs/contributing/reference/libraries/modules/_meta.yml b/docs/src/content/docs/contributing/reference/libraries/modules/_meta.yml new file mode 100644 index 0000000000..13f8cf4d33 --- /dev/null +++ b/docs/src/content/docs/contributing/reference/libraries/modules/_meta.yml @@ -0,0 +1,4 @@ +label: Modules +badge: + text: Beta + variant: caution diff --git a/docs/src/content/docs/contributing/reference/libraries/modules/index.md b/docs/src/content/docs/contributing/reference/libraries/modules/index.md new file mode 100644 index 0000000000..dfb2425132 --- /dev/null +++ b/docs/src/content/docs/contributing/reference/libraries/modules/index.md @@ -0,0 +1,28 @@ +--- +title: Library Modules +description: Reference for library modules. +sidebar: + label: Overview +--- + +Library modules consist of collections of mixins which target design systems or commonly used libraries. + +They follow a standard structure and should be built to be modular and reusable across several userstyles. + +## Structure + +The [standard library](/contributing/reference/libraries/standard/) is a good reference as to how libraries can be structured. + +All libraries are in lib/ with subdirectories per library name, and versioned files (e.g., `v1.less`, `v2.less`, etc). + +They must have a top level mixin in the format `#__libraryname`. All constants and variables should be under a nested `.base` mixin. The nested mixin is used like `#__libraryname.base()` after all other standard library statements. + +Other mixins and constants may be included, but they must be under the top level mixin for scoping purposes. + +## Creation + +Identify what your library module will achieve. Are you targeting a design system, framework, or a library? + +If a design system or framework, is it specific to one userstyle or reusable across multiple? What are the popularity metrics of it? Is the increased maintenance workload worth the benefit it provides in DRY (Don't Repeat Yourself)? + +If the target is a web library, check if there is an [existing port](http://catppuccin.com/ports) for it. The methods outlined in [Syntax Highlighting](/contributing/guides/syntax-highlighting/) may be used to import the theme for the library in question. Some ports may need changes upstreamed to work for userstyles purposes; in these cases, please coordinate with userstyles staff to determine the most suitable approach. diff --git a/docs/src/content/docs/contributing/reference/libraries/standard/_meta.yml b/docs/src/content/docs/contributing/reference/libraries/standard/_meta.yml new file mode 100644 index 0000000000..01f8bc3a01 --- /dev/null +++ b/docs/src/content/docs/contributing/reference/libraries/standard/_meta.yml @@ -0,0 +1,2 @@ +label: Standard Library +order: 1 diff --git a/docs/src/content/docs/contributing/reference/libraries/standard/index.mdx b/docs/src/content/docs/contributing/reference/libraries/standard/index.mdx new file mode 100644 index 0000000000..429a996804 --- /dev/null +++ b/docs/src/content/docs/contributing/reference/libraries/standard/index.mdx @@ -0,0 +1,36 @@ +--- +title: Overview +description: Reference to using the standard library. +sidebar: + order: 1 +--- + +import { Badge } from '@astrojs/starlight/components'; + + +| Version | Documentation | Source Code | +| -------------------------------------------------------------------------------- | -------------------------------------------------- | -------------- | +| v1 | [/v/v1](/contributing/reference/libraries/standard/v/v1/) | [`lib/std/v1.less`](https://github.com/catppuccin/userstyles/blob/main/lib/std/v1.less) | + +--- + +The standard library is a collection of mixins to deduplicate and simplify code in userstyles. It is imported in every userstyle, alongside with other [library modules](/contributing/reference/libraries/modules/) if applicable. + +## Importing + +```less +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; +``` + +## Changelog + +### v1 + +v1 is the first versioned release of the standard library. To migrate from "v0", update your standard library import URLs at the top of the userstyle: + +```diff +-@import "https://userstyles.catppuccin.com/lib/lib.less"; ++@import "https://userstyles.catppuccin.com/lib/std/v1.less"; +``` + +This release contains no API changes and is safe to upgrade to for all userstyles. diff --git a/docs/src/content/docs/contributing/reference/libraries/standard/v/_meta.yml b/docs/src/content/docs/contributing/reference/libraries/standard/v/_meta.yml new file mode 100644 index 0000000000..cf36cd23e6 --- /dev/null +++ b/docs/src/content/docs/contributing/reference/libraries/standard/v/_meta.yml @@ -0,0 +1 @@ +label: Versions diff --git a/docs/src/content/docs/contributing/standard-library.md b/docs/src/content/docs/contributing/reference/libraries/standard/v/v1.mdx similarity index 71% rename from docs/src/content/docs/contributing/standard-library.md rename to docs/src/content/docs/contributing/reference/libraries/standard/v/v1.mdx index 54d5674be2..7ab1f3b430 100644 --- a/docs/src/content/docs/contributing/standard-library.md +++ b/docs/src/content/docs/contributing/reference/libraries/standard/v/v1.mdx @@ -1,14 +1,16 @@ --- -title: Standard Library -description: Reference to using the standard library. +title: v1 +description: Reference to using the v1 version of the standard library. +sidebar: + badge: + text: Latest + variant: success --- -The standard library is a collection of mixins to simplify and prevent redundant code in userstyles. The source code is at [`lib/lib.less`](https://github.com/catppuccin/userstyles/blob/main/lib/lib.less) and the library is hosted at https://userstyles.catppuccin.com/lib/lib.less. - -In userstyles, the standard library is imported at the top like so (along with other [library modules](/contributing/library-modules/)): +## Usage ```less -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; ``` ## API diff --git a/docs/src/content/docs/contributing/tips-and-tricks/_meta.yml b/docs/src/content/docs/contributing/tips-and-tricks/_meta.yml new file mode 100644 index 0000000000..c564d795c6 --- /dev/null +++ b/docs/src/content/docs/contributing/tips-and-tricks/_meta.yml @@ -0,0 +1,2 @@ +label: Tips and Tricks +order: 6 diff --git a/docs/src/content/docs/contributing/tutorials/_meta.yml b/docs/src/content/docs/contributing/tutorials/_meta.yml new file mode 100644 index 0000000000..64aa9ab7d2 --- /dev/null +++ b/docs/src/content/docs/contributing/tutorials/_meta.yml @@ -0,0 +1,2 @@ +label: Tutorials +order: 4 diff --git a/docs/src/content/docs/contributing/userstylesyml.mdx b/docs/src/content/docs/contributing/userstylesyml.mdx index 9044395473..d51a482a16 100644 --- a/docs/src/content/docs/contributing/userstylesyml.mdx +++ b/docs/src/content/docs/contributing/userstylesyml.mdx @@ -1,6 +1,8 @@ --- title: userstyles.yml description: Guide for adding and removing userstyles and maintainers. +sidebar: + order: 3 --- import { Steps } from "@astrojs/starlight/components"; diff --git a/docs/src/content/docs/getting-started/faq.md b/docs/src/content/docs/getting-started/faq.md index d29d64549a..33f7e1f609 100644 --- a/docs/src/content/docs/getting-started/faq.md +++ b/docs/src/content/docs/getting-started/faq.md @@ -12,3 +12,19 @@ Sorry to hear that! Please [open an issue](https://github.com/catppuccin/usersty ## Can I request a userstyle? To request a website to be themed, please create a [Port Request](https://github.com/catppuccin/catppuccin/discussions/new?category=port-requests) discussion on [catppuccin/catppuccin](https://github.com/catppuccin/catppuccin). + +## What version of my browser am I using? + +**To find your browser's version:** + +- Find your browser in the table below and follow the matching link to visit the page with the version. + - _Chrome/Chromium_: the version should be the first entry in the table that appears. There is a copy to clipboard button after the version number which you can use. + - _Firefox_: the version is under the "Application Basics" section in the row labeled "Version". + +| Browser | Version | +| -------------- | ------------------- | +| Chromium | `chrome://version/` | +| Firefox | `about:support` | +| Opera (GX) | `opera://about/` | +| Microsoft Edge | `edge://version/` | +| Arc | `arc://version/` | diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx index 0cb23d3008..732a5c99ef 100644 --- a/docs/src/content/docs/index.mdx +++ b/docs/src/content/docs/index.mdx @@ -11,8 +11,8 @@ hero: - text: Get Started link: /getting-started/introduction icon: right-arrow - - text: Contribute on GitHub - link: https://github.com/catppuccin/userstyles - icon: external - variant: minimal + - text: Contribute + link: /contributing/ + icon: right-arrow + variant: secondary --- diff --git a/docs/src/content/docs/reference/browsers.md b/docs/src/content/docs/reference/browsers.md deleted file mode 100644 index 0ba9a2efeb..0000000000 --- a/docs/src/content/docs/reference/browsers.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Browsers -description: Useful information about browser versions and common issues. ---- - -> [!NOTE] -> If you see a popular browser that hasn't been added, please create a pull request to do so! - -**To find your browser's version:** - -- Find your browser in the table below and follow the matching link to visit the page with the version. - - _Chrome/Chromium_: the version should be the first entry in the table that appears. There is a copy to clipboard button after the version number which you can use. - - _Firefox_: the version is under the "Application Basics" section in the row labeled "Version". - -| Browser | Version | -| -------------- | ------------------- | -| Chromium | `chrome://version/` | -| Firefox | `about:support` | -| Opera (GX) | `opera://about/` | -| Microsoft Edge | `edge://version/` | -| Arc | `arc://version/` | - -## Common issues - -If you are running into any compatibility issues with your browser, please feel free to open an issue! diff --git a/lib/lib.less b/lib/lib.less index 576bde68a9..dab95f6028 100644 --- a/lib/lib.less +++ b/lib/lib.less @@ -1,129 +1,2 @@ -/* deno-fmt-ignore */ -@catppuccin: { - @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; - @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; - @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; - @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; -}; - -/* deno-fmt-ignore */ -@catppuccin-filters: { - @latte: { @rosewater: brightness(0) saturate(100%) invert(65%) sepia(18%) saturate(1048%) hue-rotate(323deg) brightness(92%) contrast(86%); @flamingo: brightness(0) saturate(100%) invert(84%) sepia(44%) saturate(4533%) hue-rotate(310deg) brightness(98%) contrast(75%); @pink: brightness(0) saturate(100%) invert(60%) sepia(32%) saturate(775%) hue-rotate(266deg) brightness(93%) contrast(97%); @mauve: brightness(0) saturate(100%) invert(26%) sepia(59%) saturate(3315%) hue-rotate(255deg) brightness(94%) contrast(100%); @red: brightness(0) saturate(100%) invert(16%) sepia(78%) saturate(7275%) hue-rotate(342deg) brightness(84%) contrast(94%); @maroon: brightness(0) saturate(100%) invert(31%) sepia(56%) saturate(2395%) hue-rotate(331deg) brightness(99%) contrast(82%); @peach: brightness(0) saturate(100%) invert(38%) sepia(81%) saturate(1292%) hue-rotate(356deg) brightness(103%) contrast(99%); @yellow: brightness(0) saturate(100%) invert(74%) sepia(47%) saturate(4570%) hue-rotate(354deg) brightness(95%) contrast(83%); @green: brightness(0) saturate(100%) invert(51%) sepia(25%) saturate(4134%) hue-rotate(76deg) brightness(95%) contrast(66%); @teal: brightness(0) saturate(100%) invert(41%) sepia(45%) saturate(1101%) hue-rotate(139deg) brightness(100%) contrast(82%); @sky: brightness(0) saturate(100%) invert(47%) sepia(76%) saturate(2427%) hue-rotate(166deg) brightness(99%) contrast(97%); @sapphire: brightness(0) saturate(100%) invert(52%) sepia(41%) saturate(6982%) hue-rotate(160deg) brightness(102%) contrast(75%); @blue: brightness(0) saturate(100%) invert(30%) sepia(80%) saturate(1850%) hue-rotate(209deg) brightness(94%) contrast(105%); @lavender: brightness(0) saturate(100%) invert(48%) sepia(61%) saturate(538%) hue-rotate(194deg) brightness(102%) contrast(98%); @text: brightness(0) saturate(100%) invert(30%) sepia(10%) saturate(1259%) hue-rotate(196deg) brightness(97%) contrast(91%); @subtext1: brightness(0) saturate(100%) invert(36%) sepia(10%) saturate(890%) hue-rotate(196deg) brightness(98%) contrast(90%); @subtext0: brightness(0) saturate(100%) invert(47%) sepia(6%) saturate(1263%) hue-rotate(195deg) brightness(90%) contrast(81%); @overlay2: brightness(0) saturate(100%) invert(59%) sepia(7%) saturate(825%) hue-rotate(195deg) brightness(83%) contrast(91%); @overlay1: brightness(0) saturate(100%) invert(59%) sepia(14%) saturate(333%) hue-rotate(194deg) brightness(95%) contrast(89%); @overlay0: brightness(0) saturate(100%) invert(85%) sepia(7%) saturate(595%) hue-rotate(191deg) brightness(77%) contrast(81%); @surface2: brightness(0) saturate(100%) invert(86%) sepia(6%) saturate(482%) hue-rotate(189deg) brightness(82%) contrast(88%); @surface1: brightness(0) saturate(100%) invert(85%) sepia(8%) saturate(281%) hue-rotate(187deg) brightness(92%) contrast(88%); @surface0: brightness(0) saturate(100%) invert(96%) sepia(1%) saturate(5123%) hue-rotate(185deg) brightness(93%) contrast(83%); @base: brightness(0) saturate(100%) invert(89%) sepia(5%) saturate(140%) hue-rotate(182deg) brightness(109%) contrast(94%); @mantle: brightness(0) saturate(100%) invert(93%) sepia(19%) saturate(55%) hue-rotate(182deg) brightness(98%) contrast(92%); @crust: brightness(0) saturate(100%) invert(91%) sepia(1%) saturate(4489%) hue-rotate(196deg) brightness(106%) contrast(82%); }; - @frappe: { @rosewater: brightness(0) saturate(100%) invert(90%) sepia(6%) saturate(734%) hue-rotate(321deg) brightness(95%) contrast(99%); @flamingo: brightness(0) saturate(100%) invert(88%) sepia(52%) saturate(817%) hue-rotate(293deg) brightness(113%) contrast(84%); @pink: brightness(0) saturate(100%) invert(76%) sepia(15%) saturate(844%) hue-rotate(280deg) brightness(107%) contrast(91%); @mauve: brightness(0) saturate(100%) invert(71%) sepia(25%) saturate(725%) hue-rotate(225deg) brightness(94%) contrast(91%); @red: brightness(0) saturate(100%) invert(67%) sepia(3%) saturate(7209%) hue-rotate(305deg) brightness(91%) contrast(99%); @maroon: brightness(0) saturate(100%) invert(61%) sepia(14%) saturate(957%) hue-rotate(307deg) brightness(109%) contrast(90%); @peach: brightness(0) saturate(100%) invert(68%) sepia(28%) saturate(662%) hue-rotate(335deg) brightness(96%) contrast(94%); @yellow: brightness(0) saturate(100%) invert(94%) sepia(88%) saturate(684%) hue-rotate(309deg) brightness(105%) contrast(80%); @green: brightness(0) saturate(100%) invert(89%) sepia(23%) saturate(582%) hue-rotate(42deg) brightness(87%) contrast(89%); @teal: brightness(0) saturate(100%) invert(91%) sepia(13%) saturate(986%) hue-rotate(110deg) brightness(85%) contrast(81%); @sky: brightness(0) saturate(100%) invert(75%) sepia(15%) saturate(623%) hue-rotate(141deg) brightness(109%) contrast(81%); @sapphire: brightness(0) saturate(100%) invert(77%) sepia(20%) saturate(730%) hue-rotate(157deg) brightness(97%) contrast(76%); @blue: brightness(0) saturate(100%) invert(68%) sepia(16%) saturate(1070%) hue-rotate(185deg) brightness(96%) contrast(95%); @lavender: brightness(0) saturate(100%) invert(75%) sepia(20%) saturate(626%) hue-rotate(201deg) brightness(101%) contrast(89%); @text: brightness(0) saturate(100%) invert(83%) sepia(12%) saturate(582%) hue-rotate(191deg) brightness(98%) contrast(96%); @subtext1: brightness(0) saturate(100%) invert(80%) sepia(18%) saturate(411%) hue-rotate(190deg) brightness(96%) contrast(84%); @subtext0: brightness(0) saturate(100%) invert(82%) sepia(6%) saturate(1287%) hue-rotate(192deg) brightness(86%) contrast(85%); @overlay2: brightness(0) saturate(100%) invert(65%) sepia(36%) saturate(230%) hue-rotate(190deg) brightness(92%) contrast(82%); @overlay1: brightness(0) saturate(100%) invert(55%) sepia(12%) saturate(638%) hue-rotate(189deg) brightness(98%) contrast(87%); @overlay0: brightness(0) saturate(100%) invert(49%) sepia(13%) saturate(662%) hue-rotate(192deg) brightness(94%) contrast(84%); @surface2: brightness(0) saturate(100%) invert(41%) sepia(20%) saturate(469%) hue-rotate(191deg) brightness(93%) contrast(86%); @surface1: brightness(0) saturate(100%) invert(34%) sepia(14%) saturate(771%) hue-rotate(190deg) brightness(89%) contrast(85%); @surface0: brightness(0) saturate(100%) invert(28%) sepia(7%) saturate(1468%) hue-rotate(193deg) brightness(92%) contrast(95%); @base: brightness(0) saturate(100%) invert(20%) sepia(17%) saturate(747%) hue-rotate(192deg) brightness(96%) contrast(97%); @mantle: brightness(0) saturate(100%) invert(8%) sepia(7%) saturate(7271%) hue-rotate(198deg) brightness(88%) contrast(75%); @crust: brightness(0) saturate(100%) invert(7%) sepia(7%) saturate(7415%) hue-rotate(197deg) brightness(86%) contrast(79%); }; - @macchiato: { @rosewater: brightness(0) saturate(100%) invert(88%) sepia(13%) saturate(322%) hue-rotate(321deg) brightness(102%) contrast(91%); @flamingo: brightness(0) saturate(100%) invert(82%) sepia(3%) saturate(3070%) hue-rotate(314deg) brightness(107%) contrast(88%); @pink: brightness(0) saturate(100%) invert(80%) sepia(23%) saturate(509%) hue-rotate(280deg) brightness(102%) contrast(92%); @mauve: brightness(0) saturate(100%) invert(65%) sepia(18%) saturate(903%) hue-rotate(222deg) brightness(104%) contrast(93%); @red: brightness(0) saturate(100%) invert(61%) sepia(19%) saturate(1541%) hue-rotate(305deg) brightness(110%) contrast(86%); @maroon: brightness(0) saturate(100%) invert(71%) sepia(10%) saturate(1331%) hue-rotate(306deg) brightness(93%) contrast(101%); @peach: brightness(0) saturate(100%) invert(73%) sepia(13%) saturate(1676%) hue-rotate(330deg) brightness(103%) contrast(92%); @yellow: brightness(0) saturate(100%) invert(87%) sepia(89%) saturate(321%) hue-rotate(314deg) brightness(101%) contrast(87%); @green: brightness(0) saturate(100%) invert(93%) sepia(12%) saturate(1128%) hue-rotate(48deg) brightness(92%) contrast(85%); @teal: brightness(0) saturate(100%) invert(92%) sepia(10%) saturate(1176%) hue-rotate(110deg) brightness(87%) contrast(90%); @sky: brightness(0) saturate(100%) invert(78%) sepia(57%) saturate(230%) hue-rotate(142deg) brightness(96%) contrast(84%); @sapphire: brightness(0) saturate(100%) invert(74%) sepia(35%) saturate(438%) hue-rotate(156deg) brightness(92%) contrast(93%); @blue: brightness(0) saturate(100%) invert(67%) sepia(17%) saturate(1007%) hue-rotate(183deg) brightness(99%) contrast(94%); @lavender: brightness(0) saturate(100%) invert(74%) sepia(6%) saturate(2559%) hue-rotate(198deg) brightness(103%) contrast(94%); @text: brightness(0) saturate(100%) invert(81%) sepia(9%) saturate(726%) hue-rotate(192deg) brightness(104%) contrast(92%); @subtext1: brightness(0) saturate(100%) invert(84%) sepia(5%) saturate(1453%) hue-rotate(193deg) brightness(94%) contrast(86%); @subtext0: brightness(0) saturate(100%) invert(75%) sepia(18%) saturate(361%) hue-rotate(190deg) brightness(91%) contrast(86%); @overlay2: brightness(0) saturate(100%) invert(67%) sepia(9%) saturate(814%) hue-rotate(191deg) brightness(92%) contrast(88%); @overlay1: brightness(0) saturate(100%) invert(49%) sepia(38%) saturate(203%) hue-rotate(190deg) brightness(101%) contrast(93%); @overlay0: brightness(0) saturate(100%) invert(46%) sepia(16%) saturate(552%) hue-rotate(193deg) brightness(93%) contrast(84%); @surface2: brightness(0) saturate(100%) invert(34%) sepia(16%) saturate(611%) hue-rotate(192deg) brightness(101%) contrast(87%); @surface1: brightness(0) saturate(100%) invert(30%) sepia(11%) saturate(1085%) hue-rotate(194deg) brightness(92%) contrast(89%); @surface0: brightness(0) saturate(100%) invert(18%) sepia(21%) saturate(880%) hue-rotate(193deg) brightness(97%) contrast(84%); @base: brightness(0) saturate(100%) invert(12%) sepia(42%) saturate(570%) hue-rotate(194deg) brightness(90%) contrast(90%); @mantle: brightness(0) saturate(100%) invert(6%) sepia(6%) saturate(7499%) hue-rotate(200deg) brightness(93%) contrast(85%); @crust: brightness(0) saturate(100%) invert(5%) sepia(8%) saturate(5346%) hue-rotate(202deg) brightness(98%) contrast(88%); }; - @mocha: { @rosewater: brightness(0) saturate(100%) invert(92%) sepia(5%) saturate(704%) hue-rotate(320deg) brightness(99%) contrast(93%); @flamingo: brightness(0) saturate(100%) invert(81%) sepia(5%) saturate(987%) hue-rotate(315deg) brightness(107%) contrast(90%); @pink: brightness(0) saturate(100%) invert(86%) sepia(11%) saturate(1177%) hue-rotate(283deg) brightness(101%) contrast(92%); @mauve: brightness(0) saturate(100%) invert(65%) sepia(58%) saturate(255%) hue-rotate(224deg) brightness(96%) contrast(102%); @red: brightness(0) saturate(100%) invert(61%) sepia(19%) saturate(997%) hue-rotate(294deg) brightness(104%) contrast(91%); @maroon: brightness(0) saturate(100%) invert(66%) sepia(16%) saturate(1301%) hue-rotate(306deg) brightness(116%) contrast(84%); @peach: brightness(0) saturate(100%) invert(68%) sepia(57%) saturate(278%) hue-rotate(338deg) brightness(98%) contrast(101%); @yellow: brightness(0) saturate(100%) invert(90%) sepia(70%) saturate(380%) hue-rotate(313deg) brightness(102%) contrast(95%); @green: brightness(0) saturate(100%) invert(88%) sepia(6%) saturate(2015%) hue-rotate(63deg) brightness(104%) contrast(78%); @teal: brightness(0) saturate(100%) invert(92%) sepia(12%) saturate(991%) hue-rotate(108deg) brightness(93%) contrast(90%); @sky: brightness(0) saturate(100%) invert(84%) sepia(21%) saturate(1302%) hue-rotate(164deg) brightness(106%) contrast(84%); @sapphire: brightness(0) saturate(100%) invert(74%) sepia(20%) saturate(876%) hue-rotate(156deg) brightness(96%) contrast(93%); @blue: brightness(0) saturate(100%) invert(68%) sepia(18%) saturate(951%) hue-rotate(180deg) brightness(98%) contrast(100%); @lavender: brightness(0) saturate(100%) invert(73%) sepia(7%) saturate(1670%) hue-rotate(195deg) brightness(102%) contrast(99%); @text: brightness(0) saturate(100%) invert(86%) sepia(6%) saturate(879%) hue-rotate(190deg) brightness(100%) contrast(93%); @subtext1: brightness(0) saturate(100%) invert(84%) sepia(19%) saturate(381%) hue-rotate(193deg) brightness(91%) contrast(89%); @subtext0: brightness(0) saturate(100%) invert(84%) sepia(9%) saturate(767%) hue-rotate(192deg) brightness(84%) contrast(84%); @overlay2: brightness(0) saturate(100%) invert(63%) sepia(15%) saturate(428%) hue-rotate(191deg) brightness(96%) contrast(84%); @overlay1: brightness(0) saturate(100%) invert(56%) sepia(15%) saturate(455%) hue-rotate(192deg) brightness(90%) contrast(88%); @overlay0: brightness(0) saturate(100%) invert(44%) sepia(6%) saturate(1275%) hue-rotate(194deg) brightness(97%) contrast(88%); @surface2: brightness(0) saturate(100%) invert(34%) sepia(8%) saturate(1015%) hue-rotate(195deg) brightness(99%) contrast(89%); @surface1: brightness(0) saturate(100%) invert(25%) sepia(6%) saturate(1950%) hue-rotate(197deg) brightness(99%) contrast(86%); @surface0: brightness(0) saturate(100%) invert(19%) sepia(5%) saturate(2844%) hue-rotate(199deg) brightness(91%) contrast(93%); @base: brightness(0) saturate(100%) invert(7%) sepia(4%) saturate(7496%) hue-rotate(202deg) brightness(93%) contrast(87%); @mantle: brightness(0) saturate(100%) invert(6%) sepia(4%) saturate(7465%) hue-rotate(202deg) brightness(95%) contrast(90%); @crust: brightness(0) saturate(100%) invert(3%) sepia(13%) saturate(6863%) hue-rotate(220deg) brightness(95%) contrast(91%); }; -}; - -#lib { - .palette() { - @rosewater: @catppuccin[@@flavor][@rosewater]; - @flamingo: @catppuccin[@@flavor][@flamingo]; - @pink: @catppuccin[@@flavor][@pink]; - @mauve: @catppuccin[@@flavor][@mauve]; - @red: @catppuccin[@@flavor][@red]; - @maroon: @catppuccin[@@flavor][@maroon]; - @peach: @catppuccin[@@flavor][@peach]; - @yellow: @catppuccin[@@flavor][@yellow]; - @green: @catppuccin[@@flavor][@green]; - @teal: @catppuccin[@@flavor][@teal]; - @sky: @catppuccin[@@flavor][@sky]; - @sapphire: @catppuccin[@@flavor][@sapphire]; - @blue: @catppuccin[@@flavor][@blue]; - @lavender: @catppuccin[@@flavor][@lavender]; - @text: @catppuccin[@@flavor][@text]; - @subtext1: @catppuccin[@@flavor][@subtext1]; - @subtext0: @catppuccin[@@flavor][@subtext0]; - @overlay2: @catppuccin[@@flavor][@overlay2]; - @overlay1: @catppuccin[@@flavor][@overlay1]; - @overlay0: @catppuccin[@@flavor][@overlay0]; - @surface2: @catppuccin[@@flavor][@surface2]; - @surface1: @catppuccin[@@flavor][@surface1]; - @surface0: @catppuccin[@@flavor][@surface0]; - @base: @catppuccin[@@flavor][@base]; - @mantle: @catppuccin[@@flavor][@mantle]; - @crust: @catppuccin[@@flavor][@crust]; - @accent: @catppuccin[@@flavor][@@accentColor]; - - @rosewater-filter: @catppuccin-filters[@@flavor][@rosewater]; - @flamingo-filter: @catppuccin-filters[@@flavor][@flamingo]; - @pink-filter: @catppuccin-filters[@@flavor][@pink]; - @mauve-filter: @catppuccin-filters[@@flavor][@mauve]; - @red-filter: @catppuccin-filters[@@flavor][@red]; - @maroon-filter: @catppuccin-filters[@@flavor][@maroon]; - @peach-filter: @catppuccin-filters[@@flavor][@peach]; - @yellow-filter: @catppuccin-filters[@@flavor][@yellow]; - @green-filter: @catppuccin-filters[@@flavor][@green]; - @teal-filter: @catppuccin-filters[@@flavor][@teal]; - @sky-filter: @catppuccin-filters[@@flavor][@sky]; - @sapphire-filter: @catppuccin-filters[@@flavor][@sapphire]; - @blue-filter: @catppuccin-filters[@@flavor][@blue]; - @lavender-filter: @catppuccin-filters[@@flavor][@lavender]; - @text-filter: @catppuccin-filters[@@flavor][@text]; - @subtext1-filter: @catppuccin-filters[@@flavor][@subtext1]; - @subtext0-filter: @catppuccin-filters[@@flavor][@subtext0]; - @overlay2-filter: @catppuccin-filters[@@flavor][@overlay2]; - @overlay1-filter: @catppuccin-filters[@@flavor][@overlay1]; - @overlay0-filter: @catppuccin-filters[@@flavor][@overlay0]; - @surface2-filter: @catppuccin-filters[@@flavor][@surface2]; - @surface1-filter: @catppuccin-filters[@@flavor][@surface1]; - @surface0-filter: @catppuccin-filters[@@flavor][@surface0]; - @base-filter: @catppuccin-filters[@@flavor][@base]; - @mantle-filter: @catppuccin-filters[@@flavor][@mantle]; - @crust-filter: @catppuccin-filters[@@flavor][@crust]; - @accent-filter: @catppuccin-filters[@@flavor][@@accentColor]; - } - - .defaults() { - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - } - - .rgbify(@color) { - @rgb: red(@color), green(@color), blue(@color); - } - - .hslify(@color) { - @raw: e( - %("%s, %s%, %s%", hue(@color), saturation(@color), lightness(@color)) - ); - } - - .css-variables() { - --ctp-rosewater: @rosewater; - --ctp-flamingo: @flamingo; - --ctp-pink: @pink; - --ctp-mauve: @mauve; - --ctp-red: @red; - --ctp-maroon: @maroon; - --ctp-peach: @peach; - --ctp-yellow: @yellow; - --ctp-green: @green; - --ctp-teal: @teal; - --ctp-sky: @sky; - --ctp-sapphire: @sapphire; - --ctp-blue: @blue; - --ctp-lavender: @lavender; - --ctp-text: @text; - --ctp-subtext1: @subtext1; - --ctp-subtext0: @subtext0; - --ctp-overlay2: @overlay2; - --ctp-overlay1: @overlay1; - --ctp-overlay0: @overlay0; - --ctp-surface2: @surface2; - --ctp-surface1: @surface1; - --ctp-surface0: @surface0; - --ctp-base: @base; - --ctp-mantle: @mantle; - --ctp-crust: @crust; - } -} +// Standard library has migrated to a versioned syntax, see https://userstyles.catppuccin.com/contributing/reference/libraries/standard/#v1 for migration details and the latest documentation. +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; diff --git a/lib/std/v1.less b/lib/std/v1.less new file mode 100644 index 0000000000..63a5021d4e --- /dev/null +++ b/lib/std/v1.less @@ -0,0 +1,129 @@ +/* deno-fmt-ignore */ +@catppuccin: { + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; +}; + +/* deno-fmt-ignore */ +@catppuccin-filters: { + @latte: { @rosewater: brightness(0) saturate(100%) invert(62%) sepia(42%) saturate(525%) hue-rotate(322deg) brightness(94%) contrast(82%); @flamingo: brightness(0) saturate(100%) invert(54%) sepia(48%) saturate(532%) hue-rotate(311deg) brightness(95%) contrast(82%); @pink: brightness(0) saturate(100%) invert(55%) sepia(54%) saturate(548%) hue-rotate(266deg) brightness(100%) contrast(83%); @mauve: brightness(0) saturate(100%) invert(26%) sepia(31%) saturate(3766%) hue-rotate(247deg) brightness(114%) contrast(114%); @red: brightness(0) saturate(100%) invert(28%) sepia(41%) saturate(3765%) hue-rotate(329deg) brightness(79%) contrast(110%); @maroon: brightness(0) saturate(100%) invert(51%) sepia(51%) saturate(3760%) hue-rotate(322deg) brightness(86%) contrast(111%); @peach: brightness(0) saturate(100%) invert(33%) sepia(99%) saturate(2022%) hue-rotate(4deg) brightness(118%) contrast(103%); @yellow: brightness(0) saturate(100%) invert(49%) sepia(94%) saturate(2020%) hue-rotate(0deg) brightness(120%) contrast(75%); @green: brightness(0) saturate(100%) invert(60%) sepia(63%) saturate(538%) hue-rotate(63deg) brightness(76%) contrast(90%); @teal: brightness(0) saturate(100%) invert(39%) sepia(67%) saturate(1026%) hue-rotate(144deg) brightness(95%) contrast(93%); @sky: brightness(0) saturate(100%) invert(53%) sepia(44%) saturate(3749%) hue-rotate(164deg) brightness(95%) contrast(97%); @sapphire: brightness(0) saturate(100%) invert(41%) sepia(70%) saturate(1021%) hue-rotate(151deg) brightness(103%) contrast(78%); @blue: brightness(0) saturate(100%) invert(30%) sepia(36%) saturate(3759%) hue-rotate(209deg) brightness(103%) contrast(110%); @lavender: brightness(0) saturate(100%) invert(48%) sepia(34%) saturate(3762%) hue-rotate(213deg) brightness(108%) contrast(110%); @text: brightness(0) saturate(100%) invert(43%) sepia(43%) saturate(515%) hue-rotate(196deg) brightness(49%) contrast(68%); @subtext1: brightness(0) saturate(100%) invert(63%) sepia(28%) saturate(515%) hue-rotate(196deg) brightness(48%) contrast(67%); @subtext0: brightness(0) saturate(100%) invert(65%) sepia(15%) saturate(535%) hue-rotate(195deg) brightness(63%) contrast(82%); @overlay2: brightness(0) saturate(100%) invert(63%) sepia(20%) saturate(521%) hue-rotate(195deg) brightness(76%) contrast(47%); @overlay1: brightness(0) saturate(100%) invert(72%) sepia(10%) saturate(534%) hue-rotate(195deg) brightness(81%) contrast(70%); @overlay0: brightness(0) saturate(100%) invert(82%) sepia(25%) saturate(510%) hue-rotate(196deg) brightness(92%) contrast(45%); @surface2: brightness(0) saturate(100%) invert(84%) sepia(6%) saturate(528%) hue-rotate(189deg) brightness(88%) contrast(76%); @surface1: brightness(0) saturate(100%) invert(93%) sepia(24%) saturate(506%) hue-rotate(182deg) brightness(86%) contrast(83%); @surface0: brightness(0) saturate(100%) invert(94%) sepia(22%) saturate(523%) hue-rotate(179deg) brightness(96%) contrast(76%); @base: brightness(0) saturate(100%) invert(91%) sepia(37%) saturate(521%) hue-rotate(181deg) brightness(106%) contrast(94%); @mantle: brightness(0) saturate(100%) invert(89%) sepia(26%) saturate(508%) hue-rotate(188deg) brightness(107%) contrast(90%); @crust: brightness(0) saturate(100%) invert(84%) sepia(32%) saturate(502%) hue-rotate(192deg) brightness(111%) contrast(84%); }; + @frappe: { @rosewater: brightness(0) saturate(100%) invert(80%) sepia(22%) saturate(510%) hue-rotate(315deg) brightness(113%) contrast(91%); @flamingo: brightness(0) saturate(100%) invert(78%) sepia(26%) saturate(512%) hue-rotate(311deg) brightness(106%) contrast(86%); @pink: brightness(0) saturate(100%) invert(80%) sepia(22%) saturate(532%) hue-rotate(277deg) brightness(100%) contrast(91%); @mauve: brightness(0) saturate(100%) invert(69%) sepia(37%) saturate(513%) hue-rotate(224deg) brightness(95%) contrast(90%); @red: brightness(0) saturate(100%) invert(58%) sepia(41%) saturate(524%) hue-rotate(310deg) brightness(97%) contrast(85%); @maroon: brightness(0) saturate(100%) invert(67%) sepia(34%) saturate(522%) hue-rotate(309deg) brightness(100%) contrast(83%); @peach: brightness(0) saturate(100%) invert(64%) sepia(32%) saturate(511%) hue-rotate(336deg) brightness(100%) contrast(97%); @yellow: brightness(0) saturate(100%) invert(78%) sepia(25%) saturate(512%) hue-rotate(359deg) brightness(107%) contrast(79%); @green: brightness(0) saturate(100%) invert(84%) sepia(25%) saturate(547%) hue-rotate(49deg) brightness(93%) contrast(82%); @teal: brightness(0) saturate(100%) invert(82%) sepia(21%) saturate(545%) hue-rotate(122deg) brightness(90%) contrast(81%); @sky: brightness(0) saturate(100%) invert(87%) sepia(24%) saturate(513%) hue-rotate(149deg) brightness(92%) contrast(85%); @sapphire: brightness(0) saturate(100%) invert(76%) sepia(32%) saturate(529%) hue-rotate(166deg) brightness(93%) contrast(85%); @blue: brightness(0) saturate(100%) invert(65%) sepia(33%) saturate(518%) hue-rotate(185deg) brightness(96%) contrast(94%); @lavender: brightness(0) saturate(100%) invert(75%) sepia(33%) saturate(509%) hue-rotate(201deg) brightness(96%) contrast(97%); @text: brightness(0) saturate(100%) invert(83%) sepia(29%) saturate(508%) hue-rotate(192deg) brightness(97%) contrast(98%); @subtext1: brightness(0) saturate(100%) invert(81%) sepia(13%) saturate(517%) hue-rotate(190deg) brightness(95%) contrast(85%); @subtext0: brightness(0) saturate(100%) invert(78%) sepia(16%) saturate(515%) hue-rotate(191deg) brightness(95%) contrast(68%); @overlay2: brightness(0) saturate(100%) invert(70%) sepia(17%) saturate(520%) hue-rotate(191deg) brightness(91%) contrast(70%); @overlay1: brightness(0) saturate(100%) invert(73%) sepia(19%) saturate(514%) hue-rotate(189deg) brightness(75%) contrast(69%); @overlay0: brightness(0) saturate(100%) invert(57%) sepia(28%) saturate(505%) hue-rotate(192deg) brightness(75%) contrast(57%); @surface2: brightness(0) saturate(100%) invert(55%) sepia(26%) saturate(532%) hue-rotate(191deg) brightness(62%) contrast(64%); @surface1: brightness(0) saturate(100%) invert(39%) sepia(39%) saturate(506%) hue-rotate(190deg) brightness(59%) contrast(63%); @surface0: brightness(0) saturate(100%) invert(11%) sepia(65%) saturate(1032%) hue-rotate(204deg) brightness(86%) contrast(58%); @base: brightness(0) saturate(100%) invert(11%) sepia(75%) saturate(1023%) hue-rotate(204deg) brightness(60%) contrast(70%); @mantle: brightness(0) saturate(100%) invert(47%) sepia(27%) saturate(530%) hue-rotate(194deg) brightness(31%) contrast(94%); @crust: brightness(0) saturate(100%) invert(30%) sepia(27%) saturate(523%) hue-rotate(194deg) brightness(43%) contrast(96%); }; + @macchiato: { @rosewater: brightness(0) saturate(100%) invert(83%) sepia(22%) saturate(509%) hue-rotate(314deg) brightness(113%) contrast(91%); @flamingo: brightness(0) saturate(100%) invert(78%) sepia(22%) saturate(512%) hue-rotate(311deg) brightness(109%) contrast(88%); @pink: brightness(0) saturate(100%) invert(75%) sepia(23%) saturate(509%) hue-rotate(279deg) brightness(109%) contrast(91%); @mauve: brightness(0) saturate(100%) invert(61%) sepia(70%) saturate(1021%) hue-rotate(210deg) brightness(109%) contrast(93%); @red: brightness(0) saturate(100%) invert(54%) sepia(37%) saturate(528%) hue-rotate(301deg) brightness(110%) contrast(87%); @maroon: brightness(0) saturate(100%) invert(66%) sepia(32%) saturate(496%) hue-rotate(306deg) brightness(99%) contrast(89%); @peach: brightness(0) saturate(100%) invert(69%) sepia(34%) saturate(532%) hue-rotate(335deg) brightness(101%) contrast(91%); @yellow: brightness(0) saturate(100%) invert(87%) sepia(19%) saturate(527%) hue-rotate(0deg) brightness(96%) contrast(93%); @green: brightness(0) saturate(100%) invert(86%) sepia(26%) saturate(541%) hue-rotate(53deg) brightness(100%) contrast(75%); @teal: brightness(0) saturate(100%) invert(85%) sepia(22%) saturate(544%) hue-rotate(117deg) brightness(96%) contrast(78%); @sky: brightness(0) saturate(100%) invert(84%) sepia(28%) saturate(526%) hue-rotate(147deg) brightness(98%) contrast(81%); @sapphire: brightness(0) saturate(100%) invert(75%) sepia(42%) saturate(530%) hue-rotate(168deg) brightness(93%) contrast(91%); @blue: brightness(0) saturate(100%) invert(65%) sepia(33%) saturate(519%) hue-rotate(182deg) brightness(98%) contrast(94%); @lavender: brightness(0) saturate(100%) invert(73%) sepia(33%) saturate(510%) hue-rotate(199deg) brightness(98%) contrast(99%); @text: brightness(0) saturate(100%) invert(73%) sepia(80%) saturate(1008%) hue-rotate(190deg) brightness(120%) contrast(92%); @subtext1: brightness(0) saturate(100%) invert(78%) sepia(12%) saturate(515%) hue-rotate(191deg) brightness(101%) contrast(81%); @subtext0: brightness(0) saturate(100%) invert(78%) sepia(15%) saturate(521%) hue-rotate(190deg) brightness(95%) contrast(70%); @overlay2: brightness(0) saturate(100%) invert(69%) sepia(16%) saturate(521%) hue-rotate(192deg) brightness(90%) contrast(72%); @overlay1: brightness(0) saturate(100%) invert(68%) sepia(16%) saturate(523%) hue-rotate(191deg) brightness(77%) contrast(80%); @overlay0: brightness(0) saturate(100%) invert(68%) sepia(18%) saturate(535%) hue-rotate(194deg) brightness(63%) contrast(78%); @surface2: brightness(0) saturate(100%) invert(52%) sepia(34%) saturate(510%) hue-rotate(193deg) brightness(54%) contrast(61%); @surface1: brightness(0) saturate(100%) invert(46%) sepia(36%) saturate(516%) hue-rotate(194deg) brightness(46%) contrast(72%); @surface0: brightness(0) saturate(100%) invert(41%) sepia(39%) saturate(513%) hue-rotate(194deg) brightness(39%) contrast(82%); @base: brightness(0) saturate(100%) invert(34%) sepia(36%) saturate(527%) hue-rotate(195deg) brightness(38%) contrast(95%); @mantle: brightness(0) saturate(100%) invert(29%) sepia(42%) saturate(541%) hue-rotate(198deg) brightness(30%) contrast(92%); @crust: brightness(0) saturate(100%) invert(27%) sepia(45%) saturate(543%) hue-rotate(200deg) brightness(25%) contrast(93%); }; + @mocha: { @rosewater: brightness(0) saturate(100%) invert(84%) sepia(22%) saturate(508%) hue-rotate(312deg) brightness(113%) contrast(91%); @flamingo: brightness(0) saturate(100%) invert(79%) sepia(23%) saturate(510%) hue-rotate(311deg) brightness(110%) contrast(90%); @pink: brightness(0) saturate(100%) invert(76%) sepia(28%) saturate(508%) hue-rotate(290deg) brightness(112%) contrast(92%); @mauve: brightness(0) saturate(100%) invert(63%) sepia(71%) saturate(1021%) hue-rotate(208deg) brightness(110%) contrast(94%); @red: brightness(0) saturate(100%) invert(61%) sepia(33%) saturate(540%) hue-rotate(293deg) brightness(101%) contrast(90%); @maroon: brightness(0) saturate(100%) invert(70%) sepia(25%) saturate(536%) hue-rotate(301deg) brightness(100%) contrast(84%); @peach: brightness(0) saturate(100%) invert(73%) sepia(36%) saturate(519%) hue-rotate(332deg) brightness(100%) contrast(93%); @yellow: brightness(0) saturate(100%) invert(85%) sepia(27%) saturate(512%) hue-rotate(336deg) brightness(108%) contrast(96%); @green: brightness(0) saturate(100%) invert(86%) sepia(22%) saturate(538%) hue-rotate(63deg) brightness(97%) contrast(88%); @teal: brightness(0) saturate(100%) invert(90%) sepia(24%) saturate(532%) hue-rotate(105deg) brightness(95%) contrast(85%); @sky: brightness(0) saturate(100%) invert(81%) sepia(27%) saturate(522%) hue-rotate(141deg) brightness(99%) contrast(86%); @sapphire: brightness(0) saturate(100%) invert(73%) sepia(43%) saturate(529%) hue-rotate(166deg) brightness(95%) contrast(93%); @blue: brightness(0) saturate(100%) invert(57%) sepia(66%) saturate(1020%) hue-rotate(195deg) brightness(115%) contrast(96%); @lavender: brightness(0) saturate(100%) invert(68%) sepia(33%) saturate(517%) hue-rotate(197deg) brightness(105%) contrast(98%); @text: brightness(0) saturate(100%) invert(75%) sepia(82%) saturate(1008%) hue-rotate(189deg) brightness(120%) contrast(90%); @subtext1: brightness(0) saturate(100%) invert(81%) sepia(11%) saturate(522%) hue-rotate(191deg) brightness(100%) contrast(81%); @subtext0: brightness(0) saturate(100%) invert(79%) sepia(13%) saturate(517%) hue-rotate(191deg) brightness(93%) contrast(71%); @overlay2: brightness(0) saturate(100%) invert(70%) sepia(13%) saturate(523%) hue-rotate(191deg) brightness(88%) contrast(75%); @overlay1: brightness(0) saturate(100%) invert(61%) sepia(17%) saturate(527%) hue-rotate(193deg) brightness(85%) contrast(66%); @overlay0: brightness(0) saturate(100%) invert(67%) sepia(15%) saturate(533%) hue-rotate(193deg) brightness(62%) contrast(82%); @surface2: brightness(0) saturate(100%) invert(58%) sepia(30%) saturate(515%) hue-rotate(196deg) brightness(45%) contrast(62%); @surface1: brightness(0) saturate(100%) invert(44%) sepia(36%) saturate(521%) hue-rotate(198deg) brightness(39%) contrast(70%); @surface0: brightness(0) saturate(100%) invert(10%) sepia(79%) saturate(1035%) hue-rotate(212deg) brightness(62%) contrast(70%); @base: brightness(0) saturate(100%) invert(7%) sepia(23%) saturate(3759%) hue-rotate(219deg) brightness(67%) contrast(84%); @mantle: brightness(0) saturate(100%) invert(22%) sepia(29%) saturate(493%) hue-rotate(204deg) brightness(44%) contrast(102%); @crust: brightness(0) saturate(100%) invert(25%) sepia(44%) saturate(549%) hue-rotate(204deg) brightness(18%) contrast(96%); }; +}; + +#lib { + .palette() { + @rosewater: @catppuccin[@@flavor][@rosewater]; + @flamingo: @catppuccin[@@flavor][@flamingo]; + @pink: @catppuccin[@@flavor][@pink]; + @mauve: @catppuccin[@@flavor][@mauve]; + @red: @catppuccin[@@flavor][@red]; + @maroon: @catppuccin[@@flavor][@maroon]; + @peach: @catppuccin[@@flavor][@peach]; + @yellow: @catppuccin[@@flavor][@yellow]; + @green: @catppuccin[@@flavor][@green]; + @teal: @catppuccin[@@flavor][@teal]; + @sky: @catppuccin[@@flavor][@sky]; + @sapphire: @catppuccin[@@flavor][@sapphire]; + @blue: @catppuccin[@@flavor][@blue]; + @lavender: @catppuccin[@@flavor][@lavender]; + @text: @catppuccin[@@flavor][@text]; + @subtext1: @catppuccin[@@flavor][@subtext1]; + @subtext0: @catppuccin[@@flavor][@subtext0]; + @overlay2: @catppuccin[@@flavor][@overlay2]; + @overlay1: @catppuccin[@@flavor][@overlay1]; + @overlay0: @catppuccin[@@flavor][@overlay0]; + @surface2: @catppuccin[@@flavor][@surface2]; + @surface1: @catppuccin[@@flavor][@surface1]; + @surface0: @catppuccin[@@flavor][@surface0]; + @base: @catppuccin[@@flavor][@base]; + @mantle: @catppuccin[@@flavor][@mantle]; + @crust: @catppuccin[@@flavor][@crust]; + @accent: @catppuccin[@@flavor][@@accentColor]; + + @rosewater-filter: @catppuccin-filters[@@flavor][@rosewater]; + @flamingo-filter: @catppuccin-filters[@@flavor][@flamingo]; + @pink-filter: @catppuccin-filters[@@flavor][@pink]; + @mauve-filter: @catppuccin-filters[@@flavor][@mauve]; + @red-filter: @catppuccin-filters[@@flavor][@red]; + @maroon-filter: @catppuccin-filters[@@flavor][@maroon]; + @peach-filter: @catppuccin-filters[@@flavor][@peach]; + @yellow-filter: @catppuccin-filters[@@flavor][@yellow]; + @green-filter: @catppuccin-filters[@@flavor][@green]; + @teal-filter: @catppuccin-filters[@@flavor][@teal]; + @sky-filter: @catppuccin-filters[@@flavor][@sky]; + @sapphire-filter: @catppuccin-filters[@@flavor][@sapphire]; + @blue-filter: @catppuccin-filters[@@flavor][@blue]; + @lavender-filter: @catppuccin-filters[@@flavor][@lavender]; + @text-filter: @catppuccin-filters[@@flavor][@text]; + @subtext1-filter: @catppuccin-filters[@@flavor][@subtext1]; + @subtext0-filter: @catppuccin-filters[@@flavor][@subtext0]; + @overlay2-filter: @catppuccin-filters[@@flavor][@overlay2]; + @overlay1-filter: @catppuccin-filters[@@flavor][@overlay1]; + @overlay0-filter: @catppuccin-filters[@@flavor][@overlay0]; + @surface2-filter: @catppuccin-filters[@@flavor][@surface2]; + @surface1-filter: @catppuccin-filters[@@flavor][@surface1]; + @surface0-filter: @catppuccin-filters[@@flavor][@surface0]; + @base-filter: @catppuccin-filters[@@flavor][@base]; + @mantle-filter: @catppuccin-filters[@@flavor][@mantle]; + @crust-filter: @catppuccin-filters[@@flavor][@crust]; + @accent-filter: @catppuccin-filters[@@flavor][@@accentColor]; + } + + .defaults() { + color-scheme: if(@flavor = latte, light, dark); + + ::selection { + background-color: fade(@accent, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + } + + .rgbify(@color) { + @rgb: red(@color), green(@color), blue(@color); + } + + .hslify(@color) { + @raw: e( + %("%s, %s%, %s%", hue(@color), saturation(@color), lightness(@color)) + ); + } + + .css-variables() { + --ctp-rosewater: @rosewater; + --ctp-flamingo: @flamingo; + --ctp-pink: @pink; + --ctp-mauve: @mauve; + --ctp-red: @red; + --ctp-maroon: @maroon; + --ctp-peach: @peach; + --ctp-yellow: @yellow; + --ctp-green: @green; + --ctp-teal: @teal; + --ctp-sky: @sky; + --ctp-sapphire: @sapphire; + --ctp-blue: @blue; + --ctp-lavender: @lavender; + --ctp-text: @text; + --ctp-subtext1: @subtext1; + --ctp-subtext0: @subtext0; + --ctp-overlay2: @overlay2; + --ctp-overlay1: @overlay1; + --ctp-overlay0: @overlay0; + --ctp-surface2: @surface2; + --ctp-surface1: @surface1; + --ctp-surface0: @surface0; + --ctp-base: @base; + --ctp-mantle: @mantle; + --ctp-crust: @crust; + } +} diff --git a/renovate.json5 b/renovate.json5 index 50adfc61b1..ffddb0785a 100644 --- a/renovate.json5 +++ b/renovate.json5 @@ -1,6 +1,6 @@ { $schema: "https://docs.renovatebot.com/renovate-schema.json", - extends: ["local>catppuccin/renovate-config"], + extends: ["local>catppuccin/renovate-config", "helpers:pinGitHubActionDigests"], packageRules: [ // Deno keep releasing minor/patch releases for doc updates so disabling updates to the standard lib { diff --git a/scripts/generate/templates/userstyle-issue.yml b/scripts/generate/templates/userstyle-issue.yml index 344e924ee4..d394a55fc8 100644 --- a/scripts/generate/templates/userstyle-issue.yml +++ b/scripts/generate/templates/userstyle-issue.yml @@ -1,43 +1,63 @@ # THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND. name: Userstyle Issue -description: Report your problems with any of the userstyles here! +description: Report a problem with a userstyle. body: - - type: checkboxes + - id: prerequisites + type: checkboxes attributes: label: Is there an existing issue outlining your problem? description: Please search to see if an issue already exists for your problem. options: - - label: I am using the latest version of the provided userstyle. - required: true - label: I have searched the existing issues and they do not solve my problem. required: true - - type: dropdown + - id: userstyle + type: dropdown attributes: - label: What userstyles are you seeing the problem on? + label: What userstyle are you seeing the problem on? description: "Don't worry about the `lbl:` prefix, it allows issues to be automatically labeled!" - multiple: true + multiple: false options: ["$LABELS"] validations: required: true - - type: textarea + - id: description + type: textarea attributes: - label: Describe your problem. - description: Also tell us, what do you expect to see? + label: Description + description: Describe the problem and what you expect to see instead. placeholder: The navigation bar on the website is highlighted incorrectly... validations: required: true - - type: textarea + - id: screenshots + type: textarea attributes: - label: Attach screenshots. + label: Relevant screenshots description: If applicable, attach screenshots which clearly highlight the issue. - - type: input + - id: browser_version + type: input attributes: - label: What browser(s) are you seeing the problem on? - description: "Make sure to include the browser version - see https://github.com/catppuccin/userstyles/blob/main/docs/browsers.md for instructions." + label: Browser version(s) this issue occurs on + description: "To get the browser version, see https://userstyles.catppuccin.com/getting-started/faq/#what-version-of-my-browser-am-i-using." placeholder: Firefox v112.0.2 validations: required: true - - type: textarea + - id: stylus_version + type: input + attributes: + label: Stylus extension version + description: If Stylus is pinned, right-click the extension icon and select "Manage Extension". Otherwise, in the extensions popup, click the settings icon or three dots icon if present and select "Manage Extension". The version is displayed on the resulting page. + placeholder: Stylus 2.3.17 + validations: + required: true + - id: userstyle_version + type: input + attributes: + label: Installed version of the userstyle + description: Versions are listed on Stylus' Manage page. To get the version, click the Stylus extension icon, then in the popup, click Manage. The version is found beside the name of the userstyle. + placeholder: v2025.12.05 + validations: + required: true + - id: additional_comments + type: textarea attributes: label: Any additional comments? description: Add any information that hasn't been covered in the previous sections! diff --git a/scripts/lint/library.ts b/scripts/lint/library.ts new file mode 100644 index 0000000000..e632f86ad1 --- /dev/null +++ b/scripts/lint/library.ts @@ -0,0 +1,51 @@ +import * as path from "@std/path"; +// @ts-types="npm:@types/less"; +import less from "less"; + +import { REPO_ROOT } from "@/constants.ts"; + +const LIB_URL_PREFIX = "https://userstyles.catppuccin.com/lib"; +const LIB_DIRECTORY = path.join(REPO_ROOT, "lib"); + +class InterceptingFileManager extends less.FileManager { + #cache = new Map>(); + + override supports(filename: string) { + return filename.startsWith(LIB_URL_PREFIX); + } + override supportsSync() { + return false; + } + + override async loadFile( + filename: string, + _currentDirectory: string, + _options: Less.LoadFileOptions, + _environment: Less.Environment, + ): Promise { + const relativePath = filename.slice(LIB_URL_PREFIX.length); + const localPath = path.join(LIB_DIRECTORY, relativePath); + + let cached = this.#cache.get(localPath); + if (!cached) { + cached = Deno.readTextFile(localPath).catch(() => { + throw { + type: "File", + message: `${filename} failed: not found at ${localPath}`, + }; + }); + this.#cache.set(localPath, cached); + } + + return { contents: await cached, filename: localPath }; + } +} + +interface LessEnvironment { + addFileManager(fileManager: Less.FileManager): void; +} + +(less as unknown as { environment: LessEnvironment }).environment + .addFileManager( + new InterceptingFileManager(), + ); diff --git a/scripts/lint/main.ts b/scripts/lint/main.ts index 67e2a25035..2e6312d4c5 100755 --- a/scripts/lint/main.ts +++ b/scripts/lint/main.ts @@ -12,6 +12,7 @@ import { verifyMetadata } from "@/lint/metadata.ts"; import { runStylelint } from "@/lint/stylelint.ts"; import { getUserstylesData, getUserstylesFiles } from "@/utils.ts"; import stylelintConfig from "../../.stylelintrc.js"; +import "@/lint/library.ts"; const args = parseArgs(Deno.args, { boolean: ["fix"] }); const userstyle = args._[0]?.toString().match( @@ -57,9 +58,9 @@ for (const style of stylesheets) { ); // Lint with Stylelint. - await runStylelint(style, content, args.fix, stylelintConfig).catch(() => - didLintFail = true - ); + const results = await runStylelint(style, content, args.fix, stylelintConfig) + .catch(() => didLintFail = true); + Deno.writeTextFileSync(file, typeof results === "string" ? results : content); } if (await checkForMissingFiles() === false) didLintFail = true; diff --git a/scripts/lint/metadata.ts b/scripts/lint/metadata.ts index 534e56be8e..abb0f03bb3 100644 --- a/scripts/lint/metadata.ts +++ b/scripts/lint/metadata.ts @@ -85,8 +85,6 @@ export async function verifyMetadata( } } - Deno.writeTextFileSync(file, content); - const template = (await Deno.readTextFile( path.join(REPO_ROOT, "template/catppuccin.user.less"), )) diff --git a/scripts/lint/stylelint-custom/optimized-svgs.js b/scripts/lint/stylelint-custom/optimized-svgs.js index 3b1ef50c27..4b2a3cf276 100644 --- a/scripts/lint/stylelint-custom/optimized-svgs.js +++ b/scripts/lint/stylelint-custom/optimized-svgs.js @@ -54,7 +54,7 @@ const ruleFunction = (primary, _secondary, context) => { "mergePaths", "removeComments", "removeUselessDefs", - "removeScriptElement", + "removeScripts", ], }).data; diff --git a/scripts/lint/stylelint.ts b/scripts/lint/stylelint.ts index fbe61867ec..d3a4d29723 100644 --- a/scripts/lint/stylelint.ts +++ b/scripts/lint/stylelint.ts @@ -12,17 +12,13 @@ export async function runStylelint( content: string, fix: boolean, config: stylelint.Config, -) { +): Promise { const { results, code } = await stylelint.lint({ code: content, config, fix, }); - if (code) { - Deno.writeTextFileSync(file, code); - } - for (const result of results) { for (const warning of result.warnings) { // Some cleanup for fancier logging - dims the rule name. @@ -43,4 +39,6 @@ export async function runStylelint( if (result.warnings.length > 0) throw new Error("stylelint error"); } + + return code; } diff --git a/scripts/serve/main.ts b/scripts/serve/main.ts new file mode 100644 index 0000000000..65e47edf78 --- /dev/null +++ b/scripts/serve/main.ts @@ -0,0 +1,111 @@ +import { parseArgs } from "@std/cli"; +import { serveDir } from "@std/http/file-server"; +import { debounce } from "@std/async/debounce"; +import { createHash } from "node:crypto"; + +import * as path from "@std/path"; + +import { REPO_ROOT } from "@/constants.ts"; + +const args = parseArgs(Deno.args, {}); +const userstyle = args._[0] + ?.toString() + .match( + /(?styles\/)?(?[a-z0-9_\-.]+)(?\/)?(?catppuccin\.user\.less)?/, + )?.groups?.userstyle; +if (!userstyle) throw new Error("Invalid userstyle argument"); + +const server = Deno.serve({ + onListen() { + // Disable unnecessary post-startup log. + }, +}, (req: Request) => { + const pathname = new URL(req.url).pathname; + + if (pathname.startsWith("/lib")) { + return serveDir(req, { + fsRoot: "lib", + urlRoot: "lib", + }); + } + + return new Response("404: Not Found", { + status: 404, + }); +}); + +const userstylePath = path.join( + REPO_ROOT, + "styles", + userstyle, + "catppuccin.user.less", +); + +const libPath = path.join( + REPO_ROOT, + "lib", +); + +const tempUserstylePath = await Deno.makeTempFile({ + prefix: "userstyle_", + suffix: ".user.less", +}); + +async function calculateLibChecksum(): Promise { + const files = []; + for await (const entry of Deno.readDir(libPath)) { + if (entry.isFile) { + files.push(path.join(libPath, entry.name)); + } + } + + const hash = createHash("sha256"); + for (const file of files) { + const content = await Deno.readTextFile(file); + hash.update(content); + } + + return hash.digest("hex"); +} + +let lastLibChecksum = await calculateLibChecksum(); + +async function updateTempUserstyle() { + let contents = await Deno.readTextFile(userstylePath); + /* Appends a query parameter suffix to import URLs from userstyles.catppuccin.com, containing the library modules content checksum. */ + const importRegex = + /(@import\s+"https:\/\/userstyles\.catppuccin\.com\/lib\/[^\s]+\.less")/g; + contents = contents.replace(importRegex, (match) => { + return match.replace( + /(\.less)/, + `$1?v=${lastLibChecksum.slice(0, 6)}`, + ); + }); + + /* Then replace the remote userstyles.catppuccin.com host with the local(host) server URL for these imports. */ + contents = contents.replaceAll( + "https://userstyles.catppuccin.com", + `http://localhost:${server.addr.port}`, + ); + + await Deno.writeTextFile(tempUserstylePath, contents); +} + +updateTempUserstyle(); + +console.log(`[serve] ${userstyle} userstyle served at '${tempUserstylePath}'`); + +const reload = debounce(() => { + console.log( + `[serve]: reloaded ${userstyle} userstyle`, + ); + updateTempUserstyle(); +}, 200); + +const watcher = Deno.watchFs([userstylePath, libPath]); +for await (const event of watcher) { + if (event.paths.some((path) => path.startsWith(libPath))) { + lastLibChecksum = await calculateLibChecksum(); + } + reload(); +} diff --git a/scripts/tests/__snapshots__/lib.test.ts.snap b/scripts/tests/__snapshots__/lib.test.ts.snap new file mode 100644 index 0000000000..371e090e4e --- /dev/null +++ b/scripts/tests/__snapshots__/lib.test.ts.snap @@ -0,0 +1,20 @@ +export const snapshot = {}; + +snapshot[`#lib.rgbify 1`] = ` +"/* deno-fmt-ignore */ +/* deno-fmt-ignore */ +.foo { + --bar: 255, 0, 0; +} +" +`; + +snapshot[`#lib.hslify 1`] = ` +"/* deno-fmt-ignore */ +/* deno-fmt-ignore */ +.foo { + --bar: 0, 100%, 50%; +} +" +`; + diff --git a/scripts/tests/lib.test.ts b/scripts/tests/lib.test.ts new file mode 100644 index 0000000000..e0bd17f2bf --- /dev/null +++ b/scripts/tests/lib.test.ts @@ -0,0 +1,40 @@ +import { assertSnapshot } from "@std/testing/snapshot"; + +import { REPO_ROOT } from "../constants.ts"; + +// @ts-types="npm:@types/less"; +import less from "less"; + +async function compile(source: string) { + const result = await less.render( + ` +@import "lib/lib.less"; + +${source} +`, + { paths: [REPO_ROOT] }, + ); + return result.css; +} + +Deno.test("#lib.rgbify", async (ctx) => { + await assertSnapshot( + ctx, + await compile(` +.foo { + --bar: #lib.rgbify(red)[]; +} +`), + ); +}); + +Deno.test("#lib.hslify", async (ctx) => { + await assertSnapshot( + ctx, + await compile(` +.foo { + --bar: #lib.hslify(red)[]; +} +`), + ); +}); diff --git a/scripts/userstyles.yml b/scripts/userstyles.yml index df6962bf1d..57c1872f88 100644 --- a/scripts/userstyles.yml +++ b/scripts/userstyles.yml @@ -1,5 +1,6 @@ collaborators: - &nik-rev nik-rev + - &AlwaysNur AlwaysNur - &AnubisNekhet AnubisNekhet - &ndsboy ndsboy - &jn-sena jn-sena @@ -67,6 +68,13 @@ collaborators: - &ashish0kumar ashish0kumar - &shnjd shnjd - &zenoix zenoix + - &incognitotgt incognitotgt + - &NekoDrone NekoDrone + - &adamperkowski adamperkowski + - &ImenaOphelia ImenaOphelia + - &koibtw koibtw + - &TheAnonymousCrusher TheAnonymousCrusher + - &42willow 42willow userstyles: advent-of-code: @@ -76,6 +84,13 @@ userstyles: icon: adventofcode color: yellow current-maintainers: [*rubyowo] + alacritty.org: + name: alacritty.org + link: https://alacritty.org + categories: [terminal, development] + icon: alacritty + color: peach + current-maintainers: [*AlwaysNur] alternativeto: name: AlternativeTo link: https://alternativeto.net @@ -99,6 +114,12 @@ userstyles: name: AniChart link: https://anichart.net current-maintainers: [*AnubisNekhet] + anonymous-overflow: + name: Anonymous Overflow + categories: [discussion_forum, wiki] + color: green + link: https://github.com/httpjamesm/AnonymousOverflow + current-maintainers: [*ImenaOphelia] arch-wiki: name: Arch Wiki link: https://wiki.archlinux.org @@ -214,6 +235,13 @@ userstyles: icon: deepl color: blue current-maintainers: [*watatomo] + deepseek: + name: DeepSeek + link: https://chat.deepseek.com + categories: [artificial_intelligence] + icon: deepseek + color: blue + current-maintainers: [*WalkQuackBack] desmos: name: Desmos link: https://desmos.com @@ -280,7 +308,8 @@ userstyles: link: https://app.formative.com/home categories: [education] color: blue - current-maintainers: [*r58Playz] + current-maintainers: [] + past-maintainers: [*r58Playz] ghostty.org: name: Ghostty.org link: https://ghostty.org @@ -293,7 +322,7 @@ userstyles: categories: [development, productivity] icon: github color: text - note: "Switch to a default GitHub light/dark theme via **Settings** > **Appearance** for the best experience!" + note: "Use the **Light default** or **Dark default** themes and disable *Increase contrast* under GitHub's [Theme preferences](https://github.com/settings/appearance)." current-maintainers: [*uncenter] past-maintainers: [*unseen-ninja, *Pocco81, *GlowingUmbreon] gleam.run: @@ -348,7 +377,7 @@ userstyles: current-maintainers: [*trinkey] graphite: name: Graphite - link: https://app.graphite.dev + link: https://app.graphite.com categories: [development, productivity] icon: graphite color: text @@ -425,7 +454,8 @@ userstyles: link: https://hyperpipe.surge.sh categories: [music] color: teal - current-maintainers: [*jn-sena] + current-maintainers: [] + past-maintainers: [*jn-sena] ichi.moe: name: ichi.moe link: https://ichi.moe @@ -598,12 +628,6 @@ userstyles: categories: [game] color: text current-maintainers: [] - mullvad-leta: - name: Mullvad Leta - link: https://leta.mullvad.net - categories: [search_engine] - color: yellow - current-maintainers: [*jn-sena] namemc: name: NameMC link: https://namemc.com @@ -611,6 +635,20 @@ userstyles: icon: namemc color: blue current-maintainers: [*Meowcelinee] + neovim.io: + name: neovim.io + link: https://neovim.io + categories: [development] + icon: neovim + color: green + current-maintainers: [*comfysage] + npmx: + name: npmx + link: https://npmx.dev + categories: [package_registry] + color: text + note: npmx-specific accent color appearance options at https://npmx.dev/settings are overriden by this userstyle. + current-maintainers: [*42willow] nitter: name: Nitter link: https://nitter.net @@ -707,6 +745,13 @@ userstyles: categories: [game] color: green current-maintainers: [*Nyameliaaaa] + poe: + name: Poe + link: https://poe.com + categories: [artificial_intelligence] + icon: poe + color: blue + current-maintainers: [*TheAnonymousCrusher] porkbun: name: Porkbun link: https://porkbun.com @@ -777,12 +822,31 @@ userstyles: icon: reddit current-maintainers: [] past-maintainers: [*jayylmao, *rubyowo] + regex101: + name: regex101 + link: https://regex101.com + categories: [development] + color: blue + current-maintainers: [*uncenter] rentry.co: name: Rentry.co link: https://rentry.co categories: [productivity] color: text current-maintainers: [*thismoon] + scalar: + name: Scalar + link: https://scalar.com + categories: [development] + icon: scalar + color: text + current-maintainers: [*incognitotgt] + searchix: + name: Searchix + link: https://searchix.ovh + categories: [development, search_engine] + color: blue + current-maintainers: [*koibtw] searxng: name: SearXNG link: https://github.com/searxng/searxng @@ -828,7 +892,7 @@ userstyles: link: https://startpage.com categories: [search_engine] color: lavender - current-maintainers: [] + current-maintainers: [*WalkQuackBack] past-maintainers: [*bartlibert] status.cafe: name: status.cafe @@ -871,7 +935,8 @@ userstyles: icon: tldraw color: text note: This theme only changes how the colors appear on the tldraw canvas. Exported graphics **will not be Catppuccin-themed**. - current-maintainers: [*GenShibe, *uncenter] + current-maintainers: [*NekoDrone] + past-maintainers: [*GenShibe, *uncenter] trinket: name: Trinket link: https://trinket.io @@ -916,6 +981,7 @@ userstyles: name: Vikunja link: https://vikunja.io categories: [productivity, note_taking] + icon: vikunja color: blue current-maintainers: [*Guaxinim5573] web.dev: diff --git a/styles/advent-of-code/catppuccin.user.less b/styles/advent-of-code/catppuccin.user.less index 664d8ab95e..13cbf0f042 100644 --- a/styles/advent-of-code/catppuccin.user.less +++ b/styles/advent-of-code/catppuccin.user.less @@ -2,7 +2,7 @@ @name Advent Of Code Catppuccin @namespace github.com/catppuccin/userstyles/styles/advent-of-code @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/advent-of-code -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/advent-of-code/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aadvent-of-code @description Soothing pastel theme for Advent Of Code @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("adventofcode.com") { :root { diff --git a/styles/alacritty.org/README.md b/styles/alacritty.org/README.md new file mode 100644 index 0000000000..8dec010cab --- /dev/null +++ b/styles/alacritty.org/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for alacritty.org + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [AlwaysNur](https://github.com/AlwaysNur) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/alacritty.org/catppuccin.user.less b/styles/alacritty.org/catppuccin.user.less new file mode 100644 index 0000000000..bac12dffe1 --- /dev/null +++ b/styles/alacritty.org/catppuccin.user.less @@ -0,0 +1,82 @@ +/* ==UserStyle== +@name alacritty.org Catppuccin +@namespace github.com/catppuccin/userstyles/styles/alacritty.org +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/alacritty.org +@version 2026.08.16 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/alacritty.org/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aalacritty.org +@description Soothing pastel theme for alacritty.org +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; + +@-moz-document domain("alacritty.org") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + body { + color: @text !important; + background-color: @base !important; + } + a { + color: @accent !important; + } + header { + background-color: @mantle !important; + border-bottom-color: @surface0 !important; + nav > a { + color: @text !important; + } + } + em { + color: @green !important; + } + strong, strong > a { + color: @blue !important; + } + #pick-version select { + color: @text !important; + background-color: @surface0; + border-color: @overlay0; + } + h1 { + color: @accent !important; + } + a:not([name]) { + text-shadow: none !important; + } + code { + background-color: @surface0; + } + video { + background-color: @overlay0 !important; + } + img:not(img#logo-img) { + border-color: @overlay0 !important; + } + img#logo-img { + border-color: @mantle !important; + } + kbd { + background-color: @surface1 !important; + border-color: @overlay0 !important; + } + } +} diff --git a/styles/alternativeto/catppuccin.user.less b/styles/alternativeto/catppuccin.user.less index 440a52706b..a17a46bb01 100644 --- a/styles/alternativeto/catppuccin.user.less +++ b/styles/alternativeto/catppuccin.user.less @@ -2,7 +2,7 @@ @name AlternativeTo Catppuccin @namespace github.com/catppuccin/userstyles/styles/alternativeto @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/alternativeto -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/alternativeto/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aalternativeto @description Soothing pastel theme for AlternativeTo @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("alternativeto.net") { :root[data-theme="dark"] { diff --git a/styles/amplenote/catppuccin.user.less b/styles/amplenote/catppuccin.user.less index 898c1605a8..92a0ae6574 100644 --- a/styles/amplenote/catppuccin.user.less +++ b/styles/amplenote/catppuccin.user.less @@ -2,7 +2,7 @@ @name Amplenote Catppuccin @namespace github.com/catppuccin/userstyles/styles/amplenote @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/amplenote -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/amplenote/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aamplenote @description Soothing pastel theme for Amplenote @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("amplenote.com") { body:not(.theme-light) { diff --git a/styles/anilist/catppuccin.user.less b/styles/anilist/catppuccin.user.less index 223f5a263f..d2554eb03e 100644 --- a/styles/anilist/catppuccin.user.less +++ b/styles/anilist/catppuccin.user.less @@ -2,7 +2,7 @@ @name AniList/AniChart Catppuccin @namespace github.com/catppuccin/userstyles/styles/anilist @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/anilist -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/anilist/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aanilist @description Soothing pastel theme for AniList and AniChart @@ -17,7 +17,7 @@ @var select contrastColor "Contrast Color" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red*", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("anilist.co"), domain("anichart.net") { body:not(.site-theme-dark) { diff --git a/styles/anonymous-overflow/README.md b/styles/anonymous-overflow/README.md new file mode 100644 index 0000000000..51c691df32 --- /dev/null +++ b/styles/anonymous-overflow/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Anonymous Overflow + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [ImenaOphelia](https://github.com/ImenaOphelia) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/anonymous-overflow/catppuccin.user.less b/styles/anonymous-overflow/catppuccin.user.less new file mode 100644 index 0000000000..ae84fa2ef2 --- /dev/null +++ b/styles/anonymous-overflow/catppuccin.user.less @@ -0,0 +1,109 @@ +/* ==UserStyle== +@name Anonymous Overflow Catppuccin +@namespace github.com/catppuccin/userstyles/styles/anonymous-overflow +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/anonymous-overflow +@version 2026.08.16 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/anonymous-overflow/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aanonymous-overflow +@description Soothing pastel theme for Anonymous Overflow +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; + +/* Working instances filtered from instance list: https://aohub.httpjames.space/. */ +@-moz-document domain("ao.vern.cc"), + domain("overflow.adminforge.de"), + domain("overflow.floppa.cloud"), + domain("overflow.hostux.net"), + domain("ao.bloat.cat"), + domain("ao.owo.si"), + domain("overflow.r4fo.com"), + domain("overflow.ducks.party"), + domain("anonymousoverflow.privacyredirect.com"), + domain("soflow.nerdvpn.de"), + domain("overflow.einfachzocken.eu"), + domain("anonymousoverflow.catsarch.com"), + domain("overflow.darkness.services"), + domain("anonflow.aketawi.space"), + domain("o.iii.st"), + domain("overflow.canine.tools") { + @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); + + :root[data-theme="auto"] { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + :root[data-theme="dark"] { + #catppuccin(@darkFlavor); + } + + :root[data-theme="light"] { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + --main-bg: @base; + --text-color: @text; + --muted-text-color: @subtext0; + --link-color: @blue; + --meta-bg: @surface1; + --input-bg: @mantle; + --input-bg-hover: @surface1; + --divider-color: @overlay0; + + .view-input:focus { + border-color: @surface2; + } + + .answer-link .icon img { + background: none; + filter: @text-filter; + } + .answer-meta.accepted { + background-color: @green; + color: @base; + + .answer-link .icon img { + filter: @crust-filter; + } + } + + .sorting img[src="/static/icons/sort.svg"] { + filter: @subtext0-filter; + } + + .logo { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + hr { + border-color: @overlay0; + } + + .error { + background-color: @red; + } + .error, .success { + color: @crust; + } + } +} diff --git a/styles/arch-wiki/catppuccin.user.less b/styles/arch-wiki/catppuccin.user.less index a0fbdb5a96..8fa43b5ff6 100644 --- a/styles/arch-wiki/catppuccin.user.less +++ b/styles/arch-wiki/catppuccin.user.less @@ -2,7 +2,7 @@ @name Arch Wiki Catppuccin @namespace github.com/catppuccin/userstyles/styles/arch-wiki @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/arch-wiki -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/arch-wiki/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aarch-wiki @description Soothing pastel theme for Arch Wiki @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("wiki.archlinux.org") { :root.skin-theme-clientpref-os, diff --git a/styles/boringproxy/catppuccin.user.less b/styles/boringproxy/catppuccin.user.less index 6139fe2523..cbb39c7205 100644 --- a/styles/boringproxy/catppuccin.user.less +++ b/styles/boringproxy/catppuccin.user.less @@ -2,7 +2,7 @@ @name boringproxy Catppuccin @namespace github.com/catppuccin/userstyles/styles/boringproxy @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/boringproxy -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/boringproxy/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aboringproxy @description Soothing pastel theme for boringproxy @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("boring.example.com") { :root { diff --git a/styles/brave-search/catppuccin.user.less b/styles/brave-search/catppuccin.user.less index b2f7758269..12151fc855 100644 --- a/styles/brave-search/catppuccin.user.less +++ b/styles/brave-search/catppuccin.user.less @@ -2,7 +2,7 @@ @name Brave Search Catppuccin @namespace github.com/catppuccin/userstyles/styles/brave-search @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/brave-search -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/brave-search/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Abrave-search @description Soothing pastel theme for Brave Search @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("search.brave.com") { :root.light { @@ -37,145 +37,163 @@ #lib.palette(); #lib.defaults(); - &, .is-serp { - --color-page-background: @base; - --color-container-background: @crust; - --color-container-highlight: @mantle; - --color-serp-header-background: @crust; - --color-text-interactive: @accent; - --color-divider-subtle: @surface0; - --color-divider-interactive: @accent; - --color-text-primary: @text; - --color-serp-bar-bg: @mantle; - --color-serp-divider-subtle-container: @surface0; - --color-gray-30: @subtext0; - --color-gray-40: @overlay2; - --color-text-secondary: @subtext1; - --color-text-tertiary: @subtext0; - --color-icon-default: @overlay2; - --color-serp-snippet-background: @base; - --color-link-default: @blue; - --color-link-visited: @mauve; - --color-tabs-search-text-default: @accent; - --color-primary-50: @accent; - --color-primitive-primary-60: @accent; - --color-primitive-primary-70: darken(@accent, 5%); - --color-container-interactive: transparent; - --color-button-background: @accent; - --color-button-disabled: fade(@surface2, 30%); - --color-serp-settings-background: @mantle; - } - dialog { - color: @text; - - &::backdrop { - background-color: fade(@crust, 30%); - } - } - - #searchform::after { - outline-color: @surface0; - } - #searchform-actions::before { - background: none !important; - } - #submit-button, #submit-llm-button { - svg { - fill: @overlay2; - } - - &:hover:not(:disabled) { - background: linear-gradient( - 314deg, - @peach 8.49%, - @pink 43.72%, - @mauve 99.51% - ); - - svg { - fill: @base; + color: @text; // inherited text (e.g. feedback modal) + + --color-text-primary: @text; + --color-text-secondary: @subtext1; + --color-text-tertiary: @subtext0; + --color-text-disabled: @overlay1; + + --color-icon-default: @overlay2; + --color-icon-secondary: @overlay1; + --color-icon-disabled: @surface2; + + --color-divider-subtle: @surface0; + --color-divider-strong: @surface2; + + --color-button-disabled: @surface1; + + --color-search-background-page: @base; + --color-search-background-search-bar: @surface0; + --color-search-background-container: @surface0; + --color-search-links-link: @blue; + --color-search-background-settings: @mantle; + --color-search-background-highlight: @surface1; + --color-search-background-interactive-normal: fade(@accent, 20%); + --color-search-divider-subtle: @surface1; + --color-search-divider-subtle-container: @surface1; + --color-search-divider-interactive: fade(@accent, 30%); + --color-search-background-enrichment-cards: @surface0; + --color-search-background-suggest-highlight: @surface1; + --color-search-background-user-message-bubble: @surface0; + + --color-primary-20: fade(@accent, 30%); // rerank + --color-neutral-20: @surface1; // search elsewhere link hover border + --color-neutral-5: @surface0; // location sharing ip address info + + --color-white: @text; + --color-schemes-primary: @accent; + --color-schemes-on-primary: @base; + + --color-link-visited: @lavender; + + // Tooltips + --color-primitive-neutral-98: @text; + --color-primitive-neutral-0: @surface0; + + /* Search Results */ + --color-serp-header-background: @base; + .related-query .icon { + color: @overlay2; + } + // Pagination "Next" + .button.type--plain, .button.type--plain-outlined-subtle { + --dsbtn-hover-background: @surface1 !important; + } + + /* Settings */ + --color-page-background: @base; + --color-container-background: @surface0; + --color-primary-50: @accent; // icons + + .form-switch { + --switch-off-background-color: @overlay0; + --switch-off-background-color-hover: @overlay1; + --switch-off-dot-color: @text; + --switch-on-background-color: @accent; + --switch-on-background-color-hover: lighten(@accent, 5%); + --switch-on-dot-color: @base; + } + + /* Search Home */ + + .example-searches { + .card { + background: @surface0; + &:hover { + background: @surface1; } } } - #clear-query-button svg { - fill: @overlay2; + .download-cta-background::before { + background-image: linear-gradient( + 90deg, + @surface0 0%, + @surface1 100% + ) !important; + mask: none; } - #searchbox::placeholder { - color: @subtext0; + .suggestions { + border-top-color: @surface1 !important; } - .button.type--filled.theme--default { - color: @base; - &:disabled { - color: fade(@text, 50%); + // LLM + --gradient-icons-active: linear-gradient( + 321.5013deg, + @peach 3%, + @pink 40%, + @mauve 99% + ); + #gradient-icons-active stop { + &:nth-child(1) { + stop-color: @peach !important; + } + &:nth-child(2) { + stop-color: @pink !important; + } + &:nth-child(3) { + stop-color: @mauve !important; } } - .button.type--outlined.theme--default:hover { - background-color: @accent; - border-color: @accent !important; - color: @base !important; - } - .tab-item.active .icon { - fill: @accent !important; - } - .tab-item.active ::after { - background: @accent !important; - } - .conversation-input-field.type--default { - background: @crust; - border-color: @crust; - color: @text; - } + .subutton:hover:not(:disabled, .unavailable), .subutton:focus-visible { + background: linear-gradient( + 314deg, + @peach 8.49%, + @pink 43.72%, + @mauve 99.51% + ); - .logo-img { - @svg: escape( - '' + .icon { + fill: @base !important; + } + } + .suggestion.ask .ask-badge::before { + background-image: linear-gradient( + 352deg, + fade(@peach, 15%) 3%, + fade(@pink, 15%) 40%, + fade(@mauve, 15%) 99% ); - content: url("data:image/svg+xml,@{svg}"); } - .nav-logo .logo-large { + #logo img, #nav-logo img, .logo-large { @svg: escape( - '' + '' ); content: url("data:image/svg+xml,@{svg}"); } - .nav-logo .logo-small { + .nav-logo .logo-small, .logo-wrapper img { @svg: escape( - '' + '' ); content: url("data:image/svg+xml,@{svg}"); } .waves-bottom { @svg: escape( - '' + '' ); - background-image: url("data:image/svg+xml,@{svg}"); + background-image: url("data:image/svg+xml,@{svg}") !important; } .waves-top { @svg: escape( - '' + '' ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - input[type="radio"]:checked::after { - background-color: @accent; - } - - .feedback-footer { - #logo { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - height: 48px; - } + background-image: url("data:image/svg+xml,@{svg}") !important; } } } diff --git a/styles/bsky/catppuccin.user.less b/styles/bsky/catppuccin.user.less index 70927b7a34..8206423159 100644 --- a/styles/bsky/catppuccin.user.less +++ b/styles/bsky/catppuccin.user.less @@ -2,7 +2,7 @@ @name Bluesky Social Catppuccin @namespace github.com/catppuccin/userstyles/styles/bsky @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/bsky -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/bsky/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Absky @description Soothing pastel theme for Bluesky Social @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("bsky.app") { html.colorMode--system { @@ -62,10 +62,9 @@ color: if(@flavor = latte, @text, @crust) !important; } - /* secondary text */ - [style*="rgb(169, 183, 197)"], - [style*="rgb(140, 158, 178)"], /* no longer used? */ - [style*="rgb(147, 165, 183)"], + /* secondary text [contrast_700] */ + [style*="rgb(165, 178, 197)"], // dark + [style*="rgb(171, 184, 201)"], // dim [style*="rgb(84, 110, 138)"], [style*="rgb(66, 87, 108)"] { color: @subtext1 !important; @@ -82,22 +81,22 @@ } } - /* generic blue inline (e.g. link text, etc) */ - [style*="color: rgb(16, 131, 254)"], // dark - [style*="color: rgb(32, 139, 254)"] // dim + /* generic blue inline (e.g. link text, etc) [primary_500] */ + [style*="color: rgb(0, 106, 255)"], // dark + [style*="color: rgb(15, 115, 255)"] // dim { color: @accent !important; } - /* generic blue inline underline (links) */ - [style*="text-decoration-color: rgb(16, 131, 254)"], // dark - [style*="text-decoration-color: rgb(32, 139, 254)"] // dim + /* generic blue inline underline (links) [primary_500] */ + [style*="text-decoration-color: rgb(0, 106, 255)"], // dark + [style*="text-decoration-color: rgb(15, 115, 255)"] // dim { text-decoration-color: @accent !important; } - /* generic blue inline bg color (e.g. notification count) */ - [style*="background-color: rgb(16, 131, 254)"], // dark - [style*="background-color: rgb(32, 139, 254)"] // dim + /* generic blue inline bg color (e.g. notification count) [primary_500] */ + [style*="background-color: rgb(0, 106, 255)"], // dark + [style*="background-color: rgb(15, 115, 255)"] // dim { background-color: @accent !important; @@ -120,18 +119,6 @@ background-color: fade(@accent, 30%) !important; } - /* blue svg inline */ - [stroke="hsl(211, 99%, 53%)"], - [stroke="#0085ff"] { - stroke: @accent; - } - - [fill="hsl(211, 99%, 53%)"], - [fill="hsl(211, 99%, 56%)"], - [fill="#0085ff"] { - fill: @accent; - } - /* a lot of blue things (buttons etc) */ .r-wzwllv, div[style*="background-color: rgb(0, 133, 255)"] { @@ -159,8 +146,10 @@ color: @red !important; } - /* red button text (delete my account) */ - [style*="color: rgb(251, 162, 178)"] { + /* red button text (delete my account) [negative_500] */ + [style*="color: rgb(233, 22, 70)"], // dark + [style*="color: rgb(235, 36, 82)"] // dim + { color: @red !important; } @@ -193,7 +182,8 @@ /* generic background color */ [style*="background-color: rgb(255, 255, 255)"], [style*="background-color: rgb(0, 0, 0)"], - [style*="background-color: rgb(22, 30, 39)"] { + [style*="background-color: rgb(21, 29, 40)"] // dim + { background-color: @base !important; & when (@flavor = latte) { @@ -204,16 +194,16 @@ } } - /* secondary background color */ - [style*="background-color: rgb(20, 25, 31)"], /* dark? */ - [style*="background-color: rgb(20, 27, 35)"], /* dark */ - [style*="background-color: rgb(30, 41, 54)"] /* dim */ { + /* secondary background color + sidebar button hover [contrast_25] */ + [style*="background-color: rgb(17, 24, 34)"], // dark + [style*="background-color: rgb(28, 39, 54)"] // dim + { background-color: @mantle !important; } - /* secondary background color when active (e.g. search bar, hovering some buttons like cancel) */ - [style*="background-color: rgb(28, 39, 50)"], // dark - [style*="background-color: rgb(38, 53, 68)"] // dim + /* secondary background color (when active?) (e.g. search bar, hovering some buttons like cancel) */ + [style*="background-color: rgb(25, 34, 46)"], // dark + [style*="background-color: rgb(34, 46, 63)"] // dim { background-color: @crust !important; } @@ -229,10 +219,10 @@ } /* wide site: new post button (w text) */ - button[style*="background-color: rgb(16, 131, 254)"], // dark - button[style*="background-color: rgb(52, 150, 254)"], // dark (hover) - button[style*="background-color: rgb(32, 139, 254)"], // dim - button[style*="background-color: rgb(76, 162, 254)"] // dim (hover) + button[style*="background-color: rgb(0, 106, 255)"], // dark + button[style*="background-color: rgb(66, 145, 255)"], // dark (hover) + button[style*="background-color: rgb(15, 115, 255)"], // dim + button[style*="background-color: rgb(77, 151, 255)"] // dim (hover) { background-color: @accent !important; &:hover { @@ -253,7 +243,7 @@ } /* fix selected tab bottom border issue caused by selector above */ - .css-175oi2r[style*="border-bottom-color: rgb(16, 131, 254)"] { + .css-175oi2r[style*="border-bottom-color: rgb(0, 106, 255)"] { border-bottom-color: @accent !important; } @@ -348,8 +338,10 @@ background-color: @red !important; } - /* Discard draft modal border */ - [style*="border-color: rgb(54, 75, 97)"] { + /* Discard draft modal border, bunch of other borders around the app [contrast_100] */ + [style*="border-color: rgb(35, 46, 62)"], // dark + [style*="border-color: rgb(44, 58, 78)"] // dim + { border-color: @surface2 !important; } @@ -365,8 +357,10 @@ } /* blue text only button (e.g. cancel post button) */ - div[style*="color: rgb(52, 150, 254)"], - div[style*="color: rgb(76, 162, 254)"] { + div[style*="color: rgb(66, 145, 255)"], // dark + div[style*="color: rgb(77, 151, 255)"], // dim + div[style*="color: rgb(0, 89, 214)"] // latte !! this overlaps with dark. might break? + { color: @accent !important; } @@ -376,9 +370,10 @@ color: @text; } - /* some button background color (when hovering) */ - [style*="background-color: rgb(0, 44, 91)"], - [style*="background-color: rgb(19, 63, 109)"], + /* some button background color (when hovering) [primary_100] */ + [style*="background-color: rgb(0, 40, 97)"], // dark + [style*="background-color: rgb(18, 52, 100)"], // dim + [style*="background-color: rgb(204, 225, 255)"], // latte /* add alt text modal */ [style*="background-color: rgb(14, 73, 137)"] { background-color: fade(@accent, 30%) !important; @@ -393,12 +388,12 @@ /* the white buttons text */ [style*="color: rgb(0, 0, 0)"] { - color: @crust !important; + color: if(@flavor = latte, @text, @crust) !important; } /* replace dark fill icons with crust ones */ path[fill="#000000"] { - fill: @crust; + fill: if(@flavor = latte, @text, @crust); } /* fixes a contrast issue when the suggested follows button is enabled (very ugly selector) */ @@ -419,14 +414,15 @@ --placeholderTextColor: @subtext1 !important; } - /* search bar icon */ - svg[style^="color: rgb(141, 142, 150)"] { + /* search bar icon (this doesn't actually apply because path fill. keeping anyways) [contrast_500] */ + svg[style^="color: rgb(102, 123, 153"], // dark + svg[style^="color: rgb(111, 131, 159)"] // dim + { color: @subtext1 !important; } /* small icons */ - path[fill="#ffffff"], - path[fill="hsl(211, 20%, 95.3%)"] { + path[fill="#FFFFFF"] { fill: @text; & when (@flavor = latte) { @@ -434,14 +430,19 @@ } } - /* more gray small icons (seems to only be the trash can/delete icon) */ - path[fill="#8D8E96"] { - fill: @subtext1; + /* more gray small icons (e.g. search bar icon, icons below posts [contrast_500] */ + path[fill="#667B99"], // dark + path[fill="#6F839F"], // dim + [style*="color: rgb(111, 131, 159)"], // dark + [style*="color: rgb(111, 131, 159)"] // dim + { + color: @subtext1 !important; + fill: @subtext1 !important; } - - /* settings button at the top of the timeline, hashtag button/icon at top of timeline */ - path[fill="hsl(211, 24%, 70%)"], - path[fill="hsl(211, 20%, 64.8%)"] { + /* settings button at the top of the timeline, hashtag button/icon at top of timeline [contrast_600] */ + path[fill="#8798B0"], // dark + path[fill="#8D9DB4"] // dim + { fill: @subtext1; } @@ -454,13 +455,6 @@ } } - /* likes, reposts and comment counts/buttons under posts, maybe more */ - path[fill="hsl(211, 20%, 56%)"], - [style*="color: rgb(120, 142, 165)"] { - color: @subtext1 !important; - fill: @subtext1 !important; - } - /* heart/like */ .r-84gixx, .r-1i89l9k, @@ -483,6 +477,13 @@ } } + /* saved icon on post + trending icon */ + path[fill="#006AFF"], // dark + path[fill="#0F73FF"] // dim + { + fill: @accent; + } + /* tiny people icon on post view ("Everybody can reply") */ path[fill="hsl(211, 24%, 43.6%)"], /* icon above "you have no lists" */ @@ -529,8 +530,10 @@ color: @base !important; } - /* miscellaneous lines around the app */ - [style*="border-color: rgb(46, 64, 82)"] { + /* miscellaneous lines around the app [contrast_200] */ + [style*="border-color: rgb(49, 63, 84)"], // dark + [style*="border-color: rgb(57, 73, 96)"] // dim + { border-color: @surface1 !important; } @@ -559,10 +562,6 @@ background-color: @overlay2 !important; } - path[stroke*="hsl(211, 99%, 56%)"] { - stroke: @accent !important; - } - /* skeletons */ .r-kdyh1x, .r-cpet4d { @@ -572,21 +571,33 @@ } /* thread lines */ - div[style*="background-color: rgb(54, 75, 97)"].r-m5arl1 { + div[style*="background-color: rgb(35, 46, 62)"].r-m5arl1 { background: @surface1 !important; } - /* character limit progress circle */ - line[stroke="hsl(211, 28%, 24.8%)"][stroke-width="2"] { - stroke: @surface1 !important; + /* character limit progress circle [primary_500] */ + path[stroke="#006AFF"], // dark + path[stroke="#0F73FF"], // dim + path[stroke="#006AFF"] // light + { + stroke: @accent !important; } - circle[fill="hsl(211, 28%, 24.8%)"][r="1.5"] { - fill: @surface1 !important; + /* bg circle [contrast_100] */ + path[stroke="#232E3E"], // dark + path[stroke="#2C3A4E"], // dim + path[stroke="#DCE2EA"] // light + { + stroke: @surface1 !important; } - /* load new posts button */ - button[style*="border-color: rgb(46, 64, 82); background-color: rgb(21, 52, 85)"] { + /* load new posts button (border: [contrast_100]; bg: [primary_50]) */ + button[style*="border-color: rgb(35, 46, 62); background-color: rgb(0, 30, 71)"], + // dark + button[style*="border-color: rgb(44, 58, 78); background-color: rgb(18, 41, 73)"], + // dim + button[style*="border-color: rgb(220, 226, 234); background-color: rgb(229, 240, 255)"] // light + { background-color: @surface0 !important; border-color: @overlay0 !important; } @@ -601,7 +612,10 @@ div[style*="border-color: rgb(46, 64, 82)"] { border-color: @surface1 !important; } - div[style*="border-color: rgb(32, 139, 254)"] { + /* search bar [primary_500] */ + div[style*="border-color: rgb(0, 106, 255)"], // dark + div[style*="border-color: rgb(15, 115, 255)"] // dim + { border-color: @accent !important; } @@ -634,7 +648,7 @@ div[style*="border-color: rgb(76, 162, 254);"] { border-color: @accent !important; } - div[style*="background-color: rgb(19, 63, 109)"] { + div[style*="background-color: rgb(18, 52, 100)"] { background-color: fade(@accent, 40%) !important; } /* inactive, circle in pill */ diff --git a/styles/bstats/catppuccin.user.less b/styles/bstats/catppuccin.user.less index 83d3edded8..89c9dd2af9 100644 --- a/styles/bstats/catppuccin.user.less +++ b/styles/bstats/catppuccin.user.less @@ -2,7 +2,7 @@ @name bStats Catppuccin @namespace github.com/catppuccin/userstyles/styles/bstats @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/bstats -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/bstats/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Abstats @description Soothing pastel theme for bStats @@ -17,7 +17,7 @@ @var checkbox graphUseAccentColor "Graphs Use Accent" 0 ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("bstats.org") { :root { diff --git a/styles/canvas-lms/catppuccin.user.less b/styles/canvas-lms/catppuccin.user.less index 8a78c86d90..1d0e2bfb11 100644 --- a/styles/canvas-lms/catppuccin.user.less +++ b/styles/canvas-lms/catppuccin.user.less @@ -2,7 +2,7 @@ @name Canvas LMS Catppuccin @namespace github.com/catppuccin/userstyles/styles/canvas-lms @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/canvas-lms -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/canvas-lms/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Acanvas-lms @description Soothing pastel theme for Canvas LMS @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("instructure.com"), domain("instructuremedia.com") { :root { @@ -2415,81 +2415,26 @@ } /* EXTENSIONS */ - /* ksucpea/bettercanvas */ - .bettercanvas-card-grade, - .bettercanvas-assignment-container:hover { - background: @surface1; - } - .bettercanvas-gpa { - background-color: @surface0; - box-shadow: 0 1px 5px @surface1 !important; - } - .bettercanvas-custom-btn, - .bettercanvas-course-percent, - .bettercanvas-course-credit { - background-color: @surface1; - border-color: @surface2; - } - .bettercanvas-dashboard-notes { - border-color: @surface1; - } - .bettercanvas-todosidebar button { - color: @text; - } - .bettercanvas-todo-container, - .bettercanvas-todo-container:hover, - .bettercanvas-todo-item, - .bettercanvas-todo-item:hover { - color: @subtext0; - } - .bettercanvas-hover-preview { - background: @surface1; - color: @text; - } - .bettercanvas-hover-preview::after { - background: linear-gradient(0deg, @surface1 50%, transparent); - } - .bettercanvas-gpa-card { - background-color: @surface0; - } - .bettercanvas-gpa-edit-btn { - background: @surface1; - border-color: @surface2; - color: @text; - } - .bettercanvas-due-soon { - background: @red; - color: @mantle; - } - .bettercanvas-assignment-overdue { - background: @red !important; - color: @mantle !important; - } - .bettercanvas-todo-label { - background: var(--ic-link-color); - color: @mantle; - } - .bettercanvas-todo-actions { - background: @surface1; - color: @text; - border-color: @surface2; - } - .bettercanvas-todo-action:hover { - background: @surface2; - } - .bettercanvas-todo-svg { - fill: @text !important; - } - .bettercanvas-reminder-wrapper { - background: @surface1 !important; - } - .bettercanvas-reminder-title, - .bettercanvas-reminder-due { - color: @text !important; - } - .bettercanvas-reminder-hide { - color: @text !important; - background: @surface2 !important; - } + /* BetterCampus */ + --bcsidebar-selection: @accent; + --bcbackground-0-ungradient: @base; + --bcbackground-0: @base; + --bcbackground-1-ungradient: @surface0; + --bcbackground-1: @surface0; + --bcbackground-2-ungradient: @surface1; + --bcbackground-2: @surface1; + --bcborders-ungradient: @surface0; + --bcborders: @surface0; + --bclinks-ungradient: @blue; + --bclinks: @blue; + --bctext-0-ungradient: @text; + --bctext-0: @text; + --bctext-1-ungradient: @subtext0; + --bctext-1: @subtext0; + --bctext-2-ungradient: @subtext1; + --bctext-2: @subtext1; + --bccards-ungradient: @surface0; + --bccards: @surface0; + --bcshadow: 0 0 10px 0 transparent; } } diff --git a/styles/chatgpt/catppuccin.user.less b/styles/chatgpt/catppuccin.user.less index ffff9546ff..98dedf0f68 100644 --- a/styles/chatgpt/catppuccin.user.less +++ b/styles/chatgpt/catppuccin.user.less @@ -2,7 +2,7 @@ @name ChatGPT Catppuccin @namespace github.com/catppuccin/userstyles/styles/chatgpt @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/chatgpt -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/chatgpt/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Achatgpt @description Soothing pastel theme for ChatGPT @@ -15,921 +15,171 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("chatgpt.com") { - @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); + // TODO: Codemirror syntax highlighting. - :root.light { + .light { #catppuccin(@lightFlavor); } - :root.dark { + .dark { #catppuccin(@darkFlavor); } #catppuccin(@flavor) { #lib.palette(); #lib.defaults(); - #lib.css-variables(); - code.hljs { - background: none !important; - } - pre { - .bg-token-main-surface-secondary { - background-color: @surface0; - } - .bg-gray-950 { - background-color: @crust; - } - .text-token-text-secondary { - color: @subtext0; - } - } + * { + --text-primary: @text; + --text-secondary: @subtext1; + --text-tertiary: @subtext0; + --text-quaternary: @overlay2; + --bg-primary: @base; + --bg-secondary: @surface0; + --bg-tertiary: @surface1; - code[class*="language-"] { - color: @text; - } + --bg-secondary-surface: @mantle; // sidebar - .dark\:bg-token-main-surface-secondary:is(.dark *) { - background-color: @surface0; - } + --bg-elevated-primary: @base; // settings main panel + --bg-elevated-secondary: @mantle; - .dark\:bg-gray-950:is(.dark *) { - background-color: @mantle; - } + --bg-tooltip: @crust; - color: @text; + --main-surface-primary: @base; + --main-surface-secondary: @surface0; + --main-surface-tertiary: @surface1; + --interactive-bg-secondary-hover: @surface1; + --interactive-bg-secondary-press: @surface0; - @white: if(@flavor = latte, @crust, @text); - @black: if(@flavor = latte, @text, @crust); - --white: @white; - --black: @black; + --interactive-label-accent-default: @accent; // some dropdowns in settings - & when not(@flavor = latte) { - --gray-50: lighten(mix(@text, @subtext0), 5%); - --gray-100: @text; - --gray-200: @subtext1; - --gray-300: @overlay2; - --gray-400: @overlay0; - --gray-500: @surface2; - --gray-600: @surface1; - --gray-700: @surface0; - --gray-750: @surface0; - --gray-800: @base; - --gray-900: @mantle; - --gray-950: @crust; - --brand-purple: @accent; - --bg-primary: var(--gray-800) !important; - --text-primary: var(--gray-100) !important; - --text-secondary: var(--gray-200) !important; - --text-tertiary: var(--gray-300) !important; - --text-quaternary: var(--gray-500) !important; - --main-surface-primary: var(--gray-800) !important; - --main-surface-secondary: var(--gray-700) !important; - --main-surface-tertiary: var(--gray-600) !important; - --message-surface: var(--gray-700) !important; - --sidebar-surface-primary: var(--gray-900); - --sidebar-surface-secondary: var(--gray-800); - --sidebar-surface-tertiary: var(--gray-700); - --bg-elevated-secondary: var(--gray-900); - .popover, - .dark, - .dark .popover, - .dark.popover, - .popover .dark { - --main-surface-primary: var(--gray-700) !important; - --main-surface-secondary: var(--gray-600) !important; - --main-surface-tertiary: var(--gray-500) !important; - --text-primary: var(--white) !important; - --text-secondary: var(--gray-200) !important; - --text-tertiary: var(--gray-300) !important; - } - } - & when (@flavor = latte) { - --gray-50: @crust; - --gray-100: @mantle; - --gray-200: @base; - --gray-300: @surface0; - --gray-400: @surface1; - --gray-500: @surface2; - --gray-600: @overlay0; - --gray-700: @overlay1; - --gray-800: @subtext0; - --gray-900: @subtext1; - --gray-950: @text; - --brand-purple: @accent; - --bg-primary: var(--gray-200) !important; - --text-primary: var(--gray-950); - --text-secondary: var(--gray-600); - --text-tertiary: var(--gray-400); - --text-quaternary: var(--gray-300); - --main-surface-primary: var(--gray-200); - --main-surface-secondary: var(--gray-100); - --main-surface-tertiary: var(--gray-50); - --message-surface: var(--gray-100) !important; - --sidebar-surface-primary: var(--gray-100); - --sidebar-surface-secondary: var(--gray-200); - --sidebar-surface-tertiary: var(--gray-300); - --bg-elevated-secondary: var(--gray-100); - .popover, - .dark .popover, - .dark.popover, - .popover .dark { - --main-surface-primary: var(--gray-200) !important; - --main-surface-secondary: var(--gray-100) !important; - --main-surface-tertiary: var(--gray-50) !important; - --text-primary: var(--gray-950) !important; - --text-secondary: var(--gray-600) !important; - --text-tertiary: var(--gray-500) !important; - --interactive-bg-secondary-hover: var(--gray-600) !important; - } - } + --border-light: @surface0; + --border-default: @surface1; + --border-medium: @surface2; + --interactive-border-focus: @overlay0; - --border-light: fade(@text, 10%); - --border-medium: fade(@text, 15%); - --border-heavy: fade(@text, 20%); - --border-xheavy: fade(@text, 25%); - --link: @accent; - --link-hover: if( - @flavor = latte, - lighten(@accent, 10%), - darken(@accent, 10%) - ); - - *:focus { - --tw-ring-offset-color: @base; - --tw-ring-color: @accent; - } + --theme-user-msg-bg: @surface0; + --theme-user-msg-text: @text; + --theme-submit-btn-bg: @accent; + --theme-submit-btn-text: @base; - /* ChatGPT logo */ - [style*="background-color: rgb(25, 195, 125);"] { - background-color: @green !important; - color: @base !important; - } + --theme-secondary-btn-bg: @surface1; + --theme-secondary-btn-text: @text; - /* Input */ + --sidebar-surface: @mantle; // modal backgrounds + --sidebar-surface-primary: @mantle; // syntax highlighted code block backgrounds - select { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml;@{svg}"); - } + --surface-hover: @surface0; // some button hovers - [multiple], - [type="date"], - [type="datetime-local"], - [type="email"], - [type="month"], - [type="number"], - [type="password"], - [type="search"], - [type="tel"], - [type="text"], - [type="time"], - [type="url"], - [type="week"], - select, - textarea { - background-color: @base; - border-color: @overlay2; - } + --icon-tertiary: @overlay2; - [type="checkbox"], - [type="radio"] { - background-color: @base; - border-color: @overlay2; - color: @accent; - } + --text-status-error: @red; - .form-input, - .form-multiselect, - .form-select, - .form-textarea { - background-color: @base; - border-color: @overlay2; - } + // chat input prompt border + --shadow-color-1: fade(@mantle, 50%); + --shadow-color-2: fade(@text, 80%); - .form-input:focus, - .form-multiselect:focus, - .form-select:focus, - .form-textarea:focus { - border-color: @accent; - } - - .form-input::placeholder, - .form-textarea::placeholder { - color: @overlay2; - } - - /* Buttons */ - - .btn-primary, - .btn-green { - background-color: @accent; - color: @base; - - &:hover { - background-color: darken(@accent, 10%); - } - - &:focus-visible { - --tw-ring-color: darken(@accent, 10%) !important; - } - } - - .btn-danger { - background-color: @red; - color: @base; - - &:hover:not(:disabled) { - background-color: darken(@red, 10%); - } - - &.focus-visible, - &:focus-visible { - --tw-ring-color: darken(@red, 10%) !important; - } - } - - .btn-danger-outline { - border-color: @red; - color: @red; - - &.focus-visible, - &:focus-visible { - --tw-ring-color: lighten(@red, 10%) !important; + .__menu-item[data-sidebar-item] { + --menu-item-highlighted: @surface0; } - } - .btn-neutral { - &.focus-visible, - &:focus-visible { - --tw-ring-color: @overlay0 !important; + .__menu-item[data-color="danger"] { + --menu-item-highlighted: fade(@red, 20%); + --menu-item-active: fade(@red, 30%); + --menu-item-open: fade(@red, 30%); } - } - .btn-dark { - background-color: @surface0; - border-color: @overlay0; - color: @text; + /* Markdown */ - &:hover { - background-color: @surface1; + /* Inline code */ + code:not(pre > code) { + background-color: @surface0; } - } - - .btn-light { - background-color: @overlay1; - color: @black; - &:hover { - background-color: @overlay0; + code[class*="language-"], + pre[class*="language-"], + code.hljs { + color: @text !important; } - } - - .btn-disabled, - .btn-disabled:hover { - background-color: @text; - } - - /* Borders */ - .border-black, - .border-black\/10, - .border-black\/20, - .border-black\/30, - .border-black\/5 { - border-color: var(--border-light); - } - - .border-gray-100 { - border-color: var(--gray-100); - } - - .border-gray-200 { - border-color: var(--gray-200); - } - - .border-gray-300 { - border-color: var(--gray-300); - } - - .border-gray-400 { - border-color: var(--gray-400); - } - - .border-gray-500 { - border-color: var(--gray-500); - } - - .border-gray-700 { - border-color: var(--gray-700); - } - - .border-gray-950 { - border-color: var(--gray-950); - } - - .border-green-500 { - border-color: lighten(@green, 10%); - } - - .border-green-600 { - border-color: @accent; - } - - .border-orange-400 { - border-color: lighten(mix(@red, @yellow), 10%); - } + /* Components */ - .border-orange-500 { - border-color: mix(@red, @yellow); - } - - .border-red-500 { - border-color: darken(@red, 10%); - } - - .border-white { - border-color: @white; - } - - .border-white\/20 { - border-color: fade(@white, 20%); - } - - .border-t-[\#0077FF] { - border-top-color: @blue; - } - - /* Backgrounds */ - .\!bg-brand-purple { - background-color: @accent !important; - } - - .\!bg-gray-200 { - background-color: var(--gray-200) !important; - } - - .btn-blue { - background-color: @blue; - color: @crust; - - &:hover { - background-color: darken(@blue, 5%); - } - } - - /* Main message input box, popup menus, and dropdowns */ - .bg-\[\#303030\], - .dark\:bg-\[\#303030\], - .dark\:bg-\[\#353535\] { - background-color: @surface0; - &.dark when (@flavor = latte) { - background-color: @subtext0; + .btn-primary { + background-color: @text; + color: @base; } - } - - .bg-[\#0077FF], - .bg-\[\#3C46FF\], - .bg-[\#3C46FF], - .bg-[\#4046EC] { - background-color: @blue; - } - - .hover\:bg-\[\#0000FF\]:hover { - background-color: darken(@blue, 5%); - } - - .bg-[\#10A37F] { - background-color: @green; - } - - .bg-[\#B161FD] { - background-color: @accent; - } - - .bg-[\#F8CA27] { - background-color: @yellow; - } - - .bg-[\#FF5588] { - background-color: mix(@red, @pink); - } - - .bg-[\#FF6E3C] { - background-color: saturate(mix(@red, @yellow), 10%); - } - .dark\:radix-highlighted\:bg-\[\#2E2F33\][data-highlighted] { - background-color: @surface0; - } - - .bg-black { - background-color: @black; - } - - .bg-black\/20 { - background-color: fade(@black, 20%); - } - - .bg-black\/5 { - background-color: fade(@black, 5%); - } - - .bg-black\/50 { - background-color: fade(@black, 50%); - } - - .bg-black\/90 { - background-color: fade(@black, 90%); - } - - .bg-black\/\[\.04\] { - background-color: fade(@black, 4%); - } - - .bg-black\/\[\.08\] { - background-color: fade(@black, 8%); - } - - .bg-black\/\[\.12\] { - background-color: fade(@black, 12%); - } - - .bg-blue-100 { - background-color: lighten(@blue, 30%); - } - - .bg-blue-200 { - background-color: lighten(@blue, 20%); - } - - .bg-blue-300 { - background-color: lighten(@blue, 10%); - } - - .bg-blue-400 { - background-color: @blue; - } - - .bg-blue-500 { - background-color: darken(@blue, 5%); - } - - .bg-blue-700 { - background-color: darken(@blue, 10%); - } - - .hover\:bg-blue-700:hover { - background-color: darken(@blue, 15%); - } - - .bg-brand-blue-800 { - background-color: darken(@blue, 10%); - } - - .bg-blue-950 { - background-color: darken(@blue, 30%); - } - - .checked\:bg-blue-600:checked { - background-color: @accent; - } - - .bg-brand-green { - background-color: lighten(@green, 10%); - } - - .bg-brand-green\/20 { - background-color: fade(lighten(@green, 10%), 20%); - } - - .bg-brand-green\/40 { - background-color: fade(lighten(@green, 10%), 40%); - } - - .bg-brand-purple { - background-color: @accent; - } - - .bg-gray-100 { - background-color: var(--gray-100); - } - - .bg-gray-200 { - background-color: var(--gray-200); - } - - .bg-gray-300 { - background-color: var(--gray-300); - } - - .bg-gray-400 { - background-color: var(--gray-400); - } - - .bg-gray-50 { - background-color: var(--gray-50); - } - - .bg-gray-500 { - background-color: var(--gray-500); - } - - .bg-gray-600 { - background-color: var(--gray-600); - } - - .bg-gray-700 { - background-color: var(--gray-700); - } - - .bg-gray-900 { - background-color: var(--gray-900); - } - - .bg-gray-950 { - background-color: var(--gray-950); - } - - .bg-green-100 { - background-color: lighten(@green, 30%); - } - - .bg-green-200 { - background-color: lighten(@green, 20%); - } - - .bg-green-500 { - background-color: lighten(@green, 10%); - } - - .bg-green-500\/10 { - background-color: fade(lighten(@green, 10%), 10%); - } - - .bg-green-600 { - background-color: fade(@accent, 10%); - } - - .bg-orange-500 { - background-color: mix(@yellow, @red); - } - - .bg-orange-500\/10 { - background-color: fade(mix(@yellow, @red), 10%); - } - - .bg-red-100 { - background-color: fade(lighten(@red, 10%), 30%); - } - - .bg-red-200 { - background-color: lighten(@red, 20%); - } - - .bg-red-500 { - background-color: @red; - } - - .bg-red-500\/10 { - background-color: fade(@red, 10%); - } - .bg-red-600 { - background-color: lighten(@red, 10%); - } - - .bg-white { - background-color: @white; - } - - .bg-white\/20 { - background-color: fade(@white, 20%); - } - - .bg-white\/25 { - background-color: fade(@white, 25%); - } - - .bg-yellow-100 { - background-color: lighten(@yellow, 20%); - } - - .bg-yellow-200 { - background-color: lighten(@yellow, 10%); - } - - .bg-yellow-400 { - background-color: @yellow; - } - - .bg-yellow-500 { - background-color: darken(@yellow, 10%); - } - - .radix-state-checked\:\!bg-green-600[data-state="checked"] { - background-color: @accent !important; - } - - .dark\:radix-state-checked\:border-green-600[data-state="checked"]:is( - .dark * - ) { - border-color: @accent; - } - - [class*="bg-transparent"] { - background-color: transparent; - } - - /* Gradients */ - - .from-white { - --tw-gradient-from: @base var(--tw-gradient-from-position); - } - - /* Fill/stroke */ - - .fill-yellow-500 { - fill: @yellow; - } - - .stroke-black { - stroke: @black; - } - - .stroke-brand-purple\/25 { - stroke: fade(@accent, 25%); - } - - .stroke-gray-400 { - stroke: @subtext0; - } - - /* Text */ - - .\!text-black { - color: @black !important; - } - - .text-\[\#FE7600\] { - color: mix(@yellow, @red); - } - - .text-\[\#fff\] { - color: @base; - } - - .text-black { - color: @black; - } - - .text-black\/60 { - color: fade(@black, 60%); - } - - .text-black\/70 { - color: fade(@black, 70%); - } - - .text-blue-500 { - color: lighten(@blue, 10%); - } - - .text-blue-600 { - color: @blue; - } - - .text-brand-blue-800 { - color: @blue; - } - - .text-brand-purple { - color: @accent; - } - - .text-gray-100 { - color: var(--gray-100); - } - - .text-gray-300 { - color: var(--gray-300); - } - - .text-gray-400 { - color: var(--gray-400); - } - - .text-gray-500 { - color: var(--gray-500); - } - - .text-gray-600 { - color: var(--gray-600); - } - - .text-gray-700 { - color: var(--gray-700); - } - - .text-gray-800 { - color: var(--gray-800); - } - - .text-gray-900 { - color: var(--gray-900); - } - - .text-green-500 { - color: lighten(@green, 10%); - } - - .text-green-600 { - color: @accent; - } - - .text-green-700 { - color: darken(@green, 10%); - } - - .text-green-800 { - color: darken(@green, 20%); - } - - .text-green-900 { - color: darken(@green, 30%); - } - - .text-orange-300 { - color: lighten(mix(@yellow, @red), 15%); - } - - .text-orange-400 { - color: lighten(mix(@yellow, @red), 10%); - } - - .text-orange-500 { - color: mix(@yellow, @red); - } - - .text-red-500 { - color: @red; - } - - .text-red-600 { - color: lighten(@red, 10%); - } - - .text-red-700 { - color: @red; - } - - .text-red-800 { - color: darken(@red, 10%); - } - - .text-token-text-error { - --text-error: @red; - } - - .text-white { - color: @white; - } + .btn-purple { + color: @base; + background-color: @accent; - .text-white\/25 { - color: fade(@white, 25%); - } - - .text-white\/50 { - color: fade(@white, 50%); - } - - .text-white\/80 { - color: fade(@white, 80%); - } - - .text-yellow-500 { - color: @yellow; - } - - .text-yellow-700 { - color: darken(@yellow, 10%); - } - - .text-yellow-800 { - color: darken(@yellow, 20%); - } - - .text-yellow-900 { - color: darken(@yellow, 30%); - } - - /* Dark mode overrides */ - /* stylelint-disable-next-line no-duplicate-selectors */ - & when not(@flavor = latte) { - .dark\:bg-black { - background-color: @black; - } + &:hover { + background-color: lighten(@accent, 5%); + } - .dark\:bg-white { - background-color: @white; + &:focus, &:active { + background-color: darken(@accent, 5%); + } } - .dark\:bg-gray-700 { - background-color: var(--gray-700); + .btn-danger-outline { + color: @red; + border-color: @red; } - /* "Was this response better or worse" dialog button hover */ - .dark\:hover\:bg-gray-800:hover { - background-color: transparent; + .btn-ghost { + &:not(:disabled) { + &:hover { + background-color: @surface0; + } + } } - .dark\:text-white { - color: @white; + /* Dark Overrides */ + .bg-token-bg-primary { + background-color: var(--bg-primary); } - - .dark\:text-black { - color: @black; + .bg-token-main-surface-primary { + background-color: var(--main-surface-primary); } - - /* Chat suggestions on new chat page */ - .dark\:text-gray-500 { - color: var(--gray-300); + .bg-token-sidebar-surface { + background-color: var(--sidebar-surface); } - .dark\:text-\[\#D292FF\] { - color: @mauve; + /* Tailwind Utilities */ + .__tailwind-utility(@color, @shade, @value) { + .text-@{color}-@{shade}, + .dark\:text-@{color}-@{shade} { + color: @value; + } + .bg-@{color}-@{shade}, + .dark\:bg-@{color}-@{shade} { + background-color: @value; + } + .border-@{color}-@{shade} { + border-color: @value; + } + .radix-state-checked\:bg-@{color}-@{shade}[data-state="checked"] { + background-color: @value; + } } - .dark\:focus\:border-white:focus { - border-color: @text; - } + .__tailwind-utility(green, 600, @green); // confirmation toasts + .__tailwind-utility(red, 500, @red); // failure toasts + .__tailwind-utility(blue, 400, @accent); // toggled checkmarks + .__tailwind-utility(gray, 600, @overlay0); // untoggled checkmarks + .__tailwind-utility(gray, 500, @overlay2); // faint text in/and dividers - .dark\:border-gray-700 { - border-color: var(--gray-700); + .text-white { + color: @base; } - /* Up arrow send message button */ - .disabled\:dark\:bg-token-text-quaternary:is(.dark *):disabled { - background-color: var(--text-quaternary); + .bg-black { + background-color: @mantle; } - .dark\:disabled\:text-token-main-surface-secondary:disabled:is(.dark *) { - color: var(--main-surface-secondary); - } - } - - /* Other */ - - .ring-black { - --tw-ring-color: @black; - } - - .ring-black\/10 { - --tw-ring-color: fade(@black, 10%); - } - - .ring-white { - --tw-ring-color: @base; - } - - .ring-offset-black { - --tw-ring-offset-color: @base; - } - - /* Invalid LaTeX expressions */ - [style*="color: rgb(204, 0, 0)"] { - color: @red; - } - - /* Circle around OpenAI logo in center of chat */ - .gizmo-shadow-stroke::after { - --tw-shadow: inset 0 0 0 1px @surface0; - } - - .katex-error { - color: @red !important; - } - - [style="background-color: rgb(0, 0, 46);"], - [style="background-color: rgb(255, 255, 219);"] { - background-color: @crust !important; - } - - /* Icon colors for chat suggestion icons on new chat page */ - svg[style="color: rgb(203, 139, 208);"] { - color: @pink !important; - } - svg[style="color: rgb(226, 197, 65);"] { - color: @yellow !important; - } - svg[style="color: rgb(118, 208, 235);"] { - color: @teal !important; - } - svg[style="color: rgb(237, 98, 98);"] { - color: @red !important; } } } @@ -949,178 +199,44 @@ #lib.defaults(); color: @text; - background-color: @base; - caret-color: @text; - a { - color: @accent; - } + background-color: @base; + --main-page-background: @base; - body, - .oai-header, - .oai-footer, - .login-container, - .main-container { - background-color: @base; + // Logo + a[href="https://chatgpt.com"] > svg { + filter: @text-filter; } - .oai-header img { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - background-color: transparent; - } + --text-primary: @text; + --text-secondary: @subtext1; + --text-tertiary: @subtext0; + --text-placeholder: @subtext0; // form field labels above the input (e.g. "Email" and "Password") - .title { - color: @text; - } + --accent-blue: @accent; + --link: @accent; - .email-input { - background-color: @base; - border-color: @surface0; - color: @text; + --border-medium: @surface2; - &:focus, - &:valid { - border-color: @accent; + --button-primary-background: @text; + --button-primary-hover: @subtext1; + --button-text-on-primary: @base; - + .email-label { - color: @accent; - background-color: @base; - } - } - } - .email-label { - background-color: @base; - color: @subtext0; - } + --button-outline-hover: @surface0; - .continue-btn { - background-color: @accent; - color: @base; - } + --gray-100: @surface2; // divider lines - .divider-wrapper { - &::before, - &::after { - border-bottom-color: @surface2; - } - } - - .social-btn { - background-color: @mantle; - border-color: @surface0; + input { color: @text; } - @orange: mix(@red, @yellow); - - img[alt="Google logo"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - img[alt="Microsoft logo"] { - @svg: escape( - '' - ); - - content: url("data:image/svg+xml,@{svg}"); - } - img[alt="Apple logo"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - } -} - -@-moz-document domain("auth0.openai.com") { - @media (prefers-color-scheme: light) { - :root { - #catppuccin(@lightFlavor); - } - } - - @media (prefers-color-scheme: dark) { - :root { - #catppuccin(@darkFlavor); - } - } - - #catppuccin(@flavor) { - #lib.palette(); - - // TODO: Can we replace this with defaults? Why is input/textarea placeholder left out? - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - --primary-color: @accent; - --primary-color-no-override: @accent; - --action-primary-color: @accent; - --link-color: @accent; - --page-background-color: @base; - --info-color: @blue; - --success-color: @green; - --error-color: @red; - --error-text-color: @text; - --warning-color: @yellow; - --button-font-color: @text; - --widget-background-color: @base; - --presentational-content-color: @overlay2; - --gray-lightest: @base; - --gray-light: @crust; - --gray-mid: @surface0; - --gray-mid-dark: @surface1; - --gray-dark: @overlay2; - --gray-darkest: @text; - --gray-social-border: @surface0; - - ._button-login-password, - ._button-login-id { - background-color: @accent; - color: @base; - } - - .password-icon-tooltip { - background-color: @text; - - &::before { - border-top-color: @text; - } - } - - .oai-header svg { - fill: @text; + [class*="_toggleVisibilityButton"]:where(:hover, :focus-visible)::before { + background-color: @surface0; } - @orange: mix(@red, @yellow); - - button > span { - &[data-provider^="google"] { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); - } - &[data-provider^="windowslive"] { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); - } - &[data-provider^="apple"] { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); - } + [data-overlay-container] [class*="_tooltip"] { + --tooltip-background-color: @mantle !important; + --tooltip-color: @text !important; } } } diff --git a/styles/chatreplay/catppuccin.user.less b/styles/chatreplay/catppuccin.user.less index c0823f028c..fad9fbfedd 100644 --- a/styles/chatreplay/catppuccin.user.less +++ b/styles/chatreplay/catppuccin.user.less @@ -2,7 +2,7 @@ @name ChatReplay Catppuccin @namespace github.com/catppuccin/userstyles/styles/chatreplay @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/chatreplay -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/chatreplay/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Achatreplay @description Soothing pastel theme for ChatReplay @@ -18,7 +18,7 @@ @var range bg-blur "Background Blur" [20, 0, 100, 1, 'px'] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("chatreplay.stream") { :root[dark] #chat-container { diff --git a/styles/chess.com/catppuccin.user.less b/styles/chess.com/catppuccin.user.less index 3b9aa53039..e4b47d4a8e 100644 --- a/styles/chess.com/catppuccin.user.less +++ b/styles/chess.com/catppuccin.user.less @@ -2,7 +2,7 @@ @name Chess.com Catppuccin @namespace github.com/catppuccin/userstyles/styles/chess.com @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/chess.com -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/chess.com/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Achess.com @description Soothing pastel theme for Chess.com @@ -21,14 +21,14 @@ @var checkbox styleBoardAndPieces "Style Board & Pieces" 1 ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("chess.com") { - :root { + .light-mode { #catppuccin(@lightFlavor); } - :root.dark-mode { + .dark-mode { #catppuccin(@darkFlavor); } @@ -72,10 +72,12 @@ --color-border-subtle: @overlay2; --color-border-selected: @accent; + --color-green-200: lighten(@accent, 5%); --color-green-300: @accent; + --color-green-400: darken(@accent, 5%); + --color-red-300: @red; /* Danger */ --color-red-400: @red; /* Danger */ - --color-green-400: @green; /* Success */ /* Links */ --color-blue-200: @sapphire; @@ -601,8 +603,8 @@ } /* Board */ - @light-cell: if(@flavor = latte, @surface0, @accent); - @dark-cell: if(@flavor = latte, @accent, @surface0); + @light-cell: @catppuccin[@mocha][@text]; + @dark-cell: @catppuccin[@mocha][@@accentColor]; @board: escape( '' @@ -610,67 +612,60 @@ & when (@styleBoardAndPieces = 1) { #board-play-computer, + .board.theme-selector-preview-board, .fade-in-overlay { - background-image: url("data:image/svg+xml,@{board}"); + background-image: url("data:image/svg+xml,@{board}") !important; } + /* Coordinates - Inside */ .coordinate-light { fill: @dark-cell; } .coordinate-dark { fill: @light-cell; } + /* Coordinates - Outside */ + .coordinate-grey { + fill: @subtext0; + } } - /* - The "Tatiana" piece set. - - Author: sadsnake1 - License: CC BY-NC-SA 4.0 (https://creativecommons.org/licenses/by-nc-sa/4.0/) - Source: https://github.com/sharechess/sharechess/tree/4f2f54c1340df59556f0f1d67e7b788c3322229c/public/pieces/tatiana - */ - - @white-piece-bg: if(@flavor = latte, @surface2, @text); - @black-piece-bg: if(@flavor = latte, @text, @surface2); - - @bishop: ''; - @king: ''; - @knight: ''; - @rook: ''; - @pawn: ''; - @queen: ''; - #piece(@piece, @type) { - @raw: if( - @type = "white", - replace( - replace( - replace( - replace(@piece, "%BORDER%", @mantle), - "%BG%", - @white-piece-bg - ), - "#fff", - @mantle - ), - "#000", - @text - ), - replace( - replace( - replace( - replace(@piece, "%BORDER%", @mantle), - "%BG%", - @black-piece-bg - ), - "#fff", - @text - ), - "#000", - @mantle - ) + @border: @catppuccin[@mocha][@base]; + @darkest: if( + @type = black, + @catppuccin[@mocha][@base], + @catppuccin[@mocha][@text] ); - @svg: escape(@raw); + @darker: if( + @type = black, + @catppuccin[@mocha][@surface0], + @catppuccin[@mocha][@subtext1] + ); + @main: if( + @type = black, + @catppuccin[@mocha][@surface1], + @catppuccin[@mocha][@subtext0] + ); + @lighter: if( + @type = black, + @catppuccin[@mocha][@surface2], + @catppuccin[@mocha][@overlay2] + ); + @lightest: if( + @type = black, + @catppuccin[@mocha][@overlay0], + @catppuccin[@mocha][@overlay1] + ); + + @bishop: ''; + @king: ''; + @knight: ''; + @rook: ''; + @pawn: ''; + @queen: ''; + + @svg: escape(@@piece); @result: url("data:image/svg+xml,@{svg}"); } @@ -682,58 +677,58 @@ --theme-board-style-image: url("data:image/svg+xml,@{board}"); --theme-board-style-highlight-color: @highlight1; - --theme-piece-set-wp: #piece(@pawn, "white")[]; - --theme-piece-set-wn: #piece(@knight, "white")[]; - --theme-piece-set-wr: #piece(@rook, "white")[]; - --theme-piece-set-wb: #piece(@bishop, "white")[]; - --theme-piece-set-wq: #piece(@queen, "white")[]; - --theme-piece-set-wk: #piece(@king, "white")[]; - --theme-piece-set-bp: #piece(@pawn, "black")[]; - --theme-piece-set-bn: #piece(@knight, "black")[]; - --theme-piece-set-bb: #piece(@bishop, "black")[]; - --theme-piece-set-br: #piece(@rook, "black")[]; - --theme-piece-set-bq: #piece(@queen, "black")[]; - --theme-piece-set-bk: #piece(@king, "black")[]; + --theme-piece-set-wp: #piece(pawn, white)[]; + --theme-piece-set-wn: #piece(knight, white)[]; + --theme-piece-set-wr: #piece(rook, white)[]; + --theme-piece-set-wb: #piece(bishop, white)[]; + --theme-piece-set-wq: #piece(queen, white)[]; + --theme-piece-set-wk: #piece(king, white)[]; + --theme-piece-set-bp: #piece(pawn, black)[]; + --theme-piece-set-bn: #piece(knight, black)[]; + --theme-piece-set-bb: #piece(bishop, black)[]; + --theme-piece-set-br: #piece(rook, black)[]; + --theme-piece-set-bq: #piece(queen, black)[]; + --theme-piece-set-bk: #piece(king, black)[]; .piece { /* Black */ &.bp { - background-image: #piece(@pawn, "black")[] !important; + background-image: #piece(pawn, black)[] !important; } &.bn { - background-image: #piece(@knight, "black")[] !important; + background-image: #piece(knight, black)[] !important; } &.bb { - background-image: #piece(@bishop, "black")[] !important; + background-image: #piece(bishop, black)[] !important; } &.br { - background-image: #piece(@rook, "black")[] !important; + background-image: #piece(rook, black)[] !important; } &.bk { - background-image: #piece(@king, "black")[] !important; + background-image: #piece(king, black)[] !important; } &.bq { - background-image: #piece(@queen, "black")[] !important; + background-image: #piece(queen, black)[] !important; } /* White */ &.wp { - background-image: #piece(@pawn, "white")[] !important; + background-image: #piece(pawn, white)[] !important; } &.wn { - background-image: #piece(@knight, "white")[] !important; + background-image: #piece(knight, white)[] !important; } &.wb { - background-image: #piece(@bishop, "white")[] !important; + background-image: #piece(bishop, white)[] !important; } &.wr { - background-image: #piece(@rook, "white")[] !important; + background-image: #piece(rook, white)[] !important; } &.wk { - background-image: #piece(@king, "white")[] !important; + background-image: #piece(king, white)[] !important; } &.wq { - background-image: #piece(@queen, "white")[] !important; + background-image: #piece(queen, white)[] !important; } } } diff --git a/styles/cinny/catppuccin.user.less b/styles/cinny/catppuccin.user.less index 366c61276b..fe025d7165 100644 --- a/styles/cinny/catppuccin.user.less +++ b/styles/cinny/catppuccin.user.less @@ -2,7 +2,7 @@ @name Cinny Catppuccin @namespace github.com/catppuccin/userstyles/styles/cinny @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/cinny -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/cinny/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Acinny @description Soothing pastel theme for Cinny @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("cinny.in") { @import url("https://prismjs.catppuccin.com/variables.important.css"); diff --git a/styles/claude/catppuccin.user.less b/styles/claude/catppuccin.user.less index 74c8358ba7..8c08642295 100644 --- a/styles/claude/catppuccin.user.less +++ b/styles/claude/catppuccin.user.less @@ -2,7 +2,7 @@ @name Claude Catppuccin @namespace github.com/catppuccin/userstyles/styles/claude @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/claude -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/claude/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aclaude @description Soothing pastel theme for Claude @@ -15,16 +15,16 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("claude.ai") { - :root[data-mode="dark"] { - #catppuccin(@darkFlavor); - } - :root[data-mode="light"], - /* Login page */ - [data-theme="claude"][data-mode="light"] { - #catppuccin(@lightFlavor); + :root[data-color-version="v2"] { + &[data-mode="dark"] { + #catppuccin(@darkFlavor); + } + &[data-mode="light"] { + #catppuccin(@lightFlavor); + } } #catppuccin(@flavor) { @@ -32,6 +32,10 @@ #lib.defaults(); --accent-brand: #hslify(@accent)[]; + --accent-000: #hslify(@accent)[]; + --accent-100: #hslify(@accent)[]; + --accent-200: #hslify(lighten(@accent, 5%))[]; + --accent-900: #hslify(darken(@accent, 10%))[]; --accent-main-000: #hslify(@accent)[]; --accent-main-100: #hslify(@accent)[]; --accent-main-200: #hslify(@accent)[]; @@ -44,12 +48,16 @@ --accent-secondary-100: #hslify(@accent)[]; --accent-secondary-200: #hslify(@accent)[]; --accent-secondary-900: #hslify(@accent)[]; - --bg-000: #hslify(@mantle)[]; + --bg-000: #hslify(@surface0)[]; --bg-100: #hslify(@base)[]; - --bg-200: #hslify(@base)[]; + --bg-200: #hslify(@mantle)[]; --bg-300: #hslify(@surface0)[]; --bg-400: #hslify(@surface1)[]; --bg-500: #hslify(@surface2)[]; + --brand-000: #hslify(@accent)[]; + --brand-100: #hslify(lighten(@accent, 5%))[]; + --brand-200: #hslify(lighten(@accent, 5%))[]; + --brand-900: #hslify(@crust)[]; --border-000: #hslify(@base)[]; --border-100: #hslify(@crust)[]; --border-200: #hslify(@crust)[]; @@ -64,12 +72,20 @@ --oncolor-100: #hslify(@mantle)[]; --oncolor-200: #hslify(@mantle)[]; --oncolor-300: #hslify(lighten(@mantle, 5%))[]; + --success-000: #hslify(@green)[]; + --success-100: #hslify(lighten(@green, 5%))[]; + --success-200: #hslify(lighten(@green, 5%))[]; + --success-900: #hslify(lighten(@green, 15%))[]; --text-000: #hslify(darken(@text, 5%))[]; --text-100: #hslify(@text)[]; --text-200: #hslify(@text)[]; --text-300: #hslify(@subtext0)[]; --text-400: #hslify(@subtext1)[]; --text-500: #hslify(@subtext0)[]; + --warning-000: #hslify(@yellow)[]; + --warning-100: #hslify(lighten(@yellow, 5%))[]; + --warning-200: #hslify(lighten(@yellow, 5%))[]; + --warning-900: #hslify(lighten(@yellow, 15%))[]; /* Side bar */ nav.\!bg-bg-200 { @@ -202,6 +218,11 @@ color: @base !important; } } + + /* White background (e.g., toggle switch thumb) */ + .bg-white { + background-color: @text; + } } } diff --git a/styles/cobalt/catppuccin.user.less b/styles/cobalt/catppuccin.user.less index 0e10aa4fb2..6b7c224ce3 100644 --- a/styles/cobalt/catppuccin.user.less +++ b/styles/cobalt/catppuccin.user.less @@ -2,7 +2,7 @@ @name cobalt Catppuccin @namespace github.com/catppuccin/userstyles/styles/cobalt @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/cobalt -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/cobalt/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Acobalt @description Soothing pastel theme for cobalt @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("cobalt.tools") { [data-theme="dark"] { diff --git a/styles/codeberg/catppuccin.user.less b/styles/codeberg/catppuccin.user.less index 1bbb693b3a..61a3b6efdb 100644 --- a/styles/codeberg/catppuccin.user.less +++ b/styles/codeberg/catppuccin.user.less @@ -2,7 +2,7 @@ @name Codeberg Catppuccin @namespace github.com/catppuccin/userstyles/styles/codeberg @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/codeberg -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/codeberg/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Acodeberg @description Soothing pastel theme for Codeberg @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("codeberg.org") { @import (css) @@ -49,13 +49,6 @@ --color-link: @blue; --color-footer-text: @text; - .ui.secondary.menu .dropdown.item:hover, - .ui.secondary.menu a.item:hover, - .ui.secondary.menu a.active.item:hover { - background-color: var(--color-nav-hover-bg); - color: var(--color-black); - } - .ui.basic.red.buttons .button, .ui.basic.red.button { &:hover, @@ -73,11 +66,33 @@ content: url("data:image/svg+xml,@{svg}"); } - #navbar-logo img { - #codeberg-logo(@crust); + .branding { + img[src^="https://design.codeberg.org/logo-kit/"] { + #codeberg-logo(@text); + } } - .branding img { - #codeberg-logo(@text); + + #navbar { + a#navbar-logo { + img { + #codeberg-logo(@base); + } + } + + .menu { + > a, button, details > summary { + color: @base; + } + + .donation-pretty { + --color-secondary-alpha-60: fade(darken(@accent, 10%), 60%) + !important; + + &:hover { + background: darken(@accent, 3%) !important; + } + } + } } footer { diff --git a/styles/crates.io/catppuccin.user.less b/styles/crates.io/catppuccin.user.less index 8b983f5871..3a441a2815 100644 --- a/styles/crates.io/catppuccin.user.less +++ b/styles/crates.io/catppuccin.user.less @@ -2,7 +2,7 @@ @name crates.io Catppuccin @namespace github.com/catppuccin/userstyles/styles/crates.io @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/crates.io -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/crates.io/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Acrates.io @description Soothing pastel theme for crates.io @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("crates.io") { @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); diff --git a/styles/crowdin/catppuccin.user.less b/styles/crowdin/catppuccin.user.less index 406d790080..41fb8ac2ae 100644 --- a/styles/crowdin/catppuccin.user.less +++ b/styles/crowdin/catppuccin.user.less @@ -2,7 +2,7 @@ @name Crowdin Catppuccin @namespace github.com/catppuccin/userstyles/styles/crowdin @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/crowdin -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/crowdin/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Acrowdin @description Soothing pastel theme for Crowdin @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document regexp("https://crowdin.com(?!/translate).*") { :root { diff --git a/styles/deepl/catppuccin.user.less b/styles/deepl/catppuccin.user.less index 0f79250fe7..dbf76bed64 100644 --- a/styles/deepl/catppuccin.user.less +++ b/styles/deepl/catppuccin.user.less @@ -2,7 +2,7 @@ @name DeepL Catppuccin @namespace github.com/catppuccin/userstyles/styles/deepl @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/deepl -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/deepl/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Adeepl @description Soothing pastel theme for DeepL @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document regexp("https:\\/\\/www.deepl.com\\/?(.*\\/)translator.*$") { :root { diff --git a/styles/mullvad-leta/README.md b/styles/deepseek/README.md similarity index 72% rename from styles/mullvad-leta/README.md rename to styles/deepseek/README.md index 26e6cb00d0..0d252a88a6 100644 --- a/styles/mullvad-leta/README.md +++ b/styles/deepseek/README.md @@ -4,13 +4,13 @@

Logo
- Catppuccin for Mullvad Leta + Catppuccin for DeepSeek

- - + +

## Usage @@ -19,7 +19,7 @@ See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting ## 💝 Current Maintainer -- [jn-sena](https://github.com/jn-sena) +- [WalkQuackBack](https://github.com/WalkQuackBack)   diff --git a/styles/deepseek/catppuccin.user.less b/styles/deepseek/catppuccin.user.less new file mode 100644 index 0000000000..181ef9ead7 --- /dev/null +++ b/styles/deepseek/catppuccin.user.less @@ -0,0 +1,264 @@ +/* ==UserStyle== +@name DeepSeek Catppuccin +@namespace github.com/catppuccin/userstyles/styles/deepseek +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/deepseek +@version 2026.08.16 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/deepseek/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Adeepseek +@description Soothing pastel theme for DeepSeek +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; + +@-moz-document url-prefix("https://chat.deepseek.com") { + @import url("https://prismjs.catppuccin.com/variables.important.css"); + + body[data-ds-dark-theme] { + #catppuccin(@darkFlavor); + } + body:not([data-ds-dark-theme]) { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + #ds-rgb() { + --ds-bordered-secondary-button-color: var(--dsr-text-1); + --ds-button-hover-color: initial; + --ds-input-prefix-color: var(--dsr-text-1); + --ds-modal-content-color: @surface0; + --ds-rgb-bg-base: var(--ds-rgb-black); + --ds-rgb-elevated: #lib.rgbify(@surface0)[]; + --ds-rgb-error: #lib.rgbify(@red)[]; + --ds-rgb-header: 40 40 40; + --ds-rgb-info: #lib.rgbify(@blue)[]; + --ds-rgb-input-focus: var(--ds-rgb-neutral-900); + --ds-rgb-input-strong: var(--ds-rgb-neutral-700); + --ds-rgb-input: var(--ds-rgb-neutral-800); + --ds-rgb-label-1: #lib.rgbify(@text)[]; + --ds-rgb-label-2: #lib.rgbify(@subtext0)[]; + --ds-rgb-label-3: #lib.rgbify(@overlay1)[]; + --ds-rgb-link: var(--ds-rgb-primary); + --ds-rgb-primary-foreground: #lib.rgbify(@base)[]; + --ds-rgb-primary: #lib.rgbify(@accent)[]; + --ds-rgb-segmented-button: var(--ds-rgb-neutral-500); + --ds-rgb-segmented-separator: var(--ds-rgb-neutral-500); + --ds-rgb-segmented: var(--ds-rgb-neutral-600); + --ds-rgb-separator-strong: #lib.rgbify(@overlay0)[]; + --ds-rgb-separator: #lib.rgbify(@surface2)[]; + --ds-rgb-success: #lib.rgbify(@green)[]; + --ds-rgb-tag: var(--ds-rgb-neutral-600); + --ds-rgb-thumb: var(--ds-rgb-neutral-200); + --ds-rgb-track: var(--ds-rgb-neutral-500); + --ds-rgb-warning: #lib.rgbify(@yellow)[]; + --ds-rgba-transparent: 255 255 255/0; + --ds-tabs-active-color: @accent; + --ds-text-primary-button-color: @accent; + --ds-rgb-hover: #lib.rgbify(mix(@text, @base, 8%))[]; + + --ds-toast-custom-color: @surface0; + --ds-toast-custom-text-color: @text; + --ds-toast-cutsom-border: 1px solid @surface1; + --ds-md-inline-code-color: @base; + } + + --dsw-alias-bg-base: @base; + --dsw-alias-bg-layer-1: @mantle; + --dsw-alias-bg-layer-2: @base; + --dsw-alias-bg-layer-3: @surface0; + + --dsw-alias-bg-mask-1: rgba(0, 0, 0, 0.5); + --dsw-alias-bg-mask-2: rgba(0, 0, 0, 0.2); + --dsw-alias-bg-multi-select: mix(@accent, @mantle, 8%); + --dsw-alias-bg-skeleton: fade(@text, 8%); + + --dsw-alias-border-inverted2: rgba(255, 255, 255, 0.08); + --dsw-alias-border-inverted: rgba(255, 255, 255, 0.06); + --dsw-alias-border-l1: rgba(255, 255, 255, 0.06); + --dsw-alias-border-l2-darkmode-thin: rgba(255, 255, 255, 0.06); + --dsw-alias-border-l2: @surface1; + --dsw-alias-border-l3: @surface2; + --dsw-alias-border-l4: @overlay0; + + --dsw-alias-brand-primary-invert: @text; + --dsw-alias-brand-primary: @accent; + --dsw-alias-brand-text: @accent; + + --dsw-alias-button-contrast-fill: @text; + --dsw-alias-button-elevated-fill: @surface1; + + --dsw-alias-button-floating-fill: @base; + --dsw-alias-button-floating-hover: mix(@text, @base, 8%); + + --dsw-alias-button-ghost-active-border: @accent; + --dsw-alias-button-ghost-active-fill: fade(@accent, 14%); + --dsw-alias-button-ghost-active-hover: fade(@accent, 18%); + + --dsw-alias-button-primary-dimmed: darken(@accent, 8%); + --dsw-alias-button-primary-fill: var(--dsw-alias-brand-primary); + --dsw-alias-button-primary-hover: lighten(@accent, 8%); + + --dsw-alias-interactive-bg-active: fade(@text, 14%); + --dsw-alias-interactive-bg-hover-accent: fade(@text, 24%); + --dsw-alias-interactive-bg-hover-danger: fade(@red, 15%); + --dsw-alias-interactive-bg-hover: fade(@text, 8%); + + --dsw-alias-label-caption: @overlay0; + --dsw-alias-label-dimmed: @surface1; + --dsw-alias-label-primary-dimmed: var(--dsw-static-neutral-bluish-100); + --dsw-alias-label-primary-inverted: var(--dsw-static-neutral-bluish-800); + + --dsw-alias-label-primary: @text; + --dsw-alias-label-secondary: @subtext0; + --dsw-alias-label-tertiary: @overlay1; + + --dsw-alias-markdown-citation: var(--dsw-static-neutral-bluish-800); + --dsw-alias-markdown-code-block-banner: @surface0; + --dsw-alias-markdown-code-block: @mantle; + --dsw-alias-markdown-code-segment-selected: var( + --dsw-static-neutral-bluish-800 + ); + --dsw-alias-markdown-code-segment-unselected: var( + --dsw-static-neutral-bluish-900 + ); + --dsw-alias-markdown-inline-code: @surface0; + --dsw-alias-markdown-tag: var(--dsw-static-neutral-bluish-850); + + --dsw-alias-scrollbar-bg-l1: @surface2; + --dsw-alias-scrollbar-bg-l2: @overlay0; + --dsw-alias-scrollbar-hover-l1: @overlay0; + --dsw-alias-scrollbar-hover-l2: @overlay1; + + --dsw-alias-state-error-primary: @red; + --dsw-alias-state-error-secondary: @red; + + --dsw-alias-state-success-primary: @green; + --dsw-alias-state-success-secondary: @green; + + --dsw-alias-state-warn-label: var(--dsw-static-amber-600); + --dsw-alias-state-warn-primary: var(--dsw-static-amber-500); + --dsw-alias-state-warn-secondary: var(--dsw-static-amber-400); + --dsw-alias-state-warn-tertiary: var(--dsw-static-amber-900); + + --dsw-alias-toast-bg: var(--dsw-static-neutral-bluish-750); + --dsw-alias-tooltip-bg: var(--dsw-static-neutral-bluish-750); + + --dsw-specific-bubble: @surface0; + --dsw-specific-input-major: @surface0; + --dsw-specific-login-input: var(--dsw-static-neutral-900); + --dsw-specific-menu: var(--dsw-alias-bg-layer-3); + --dsw-specific-selector: fade(@text, 14%); + --dsw-specific-sidebar-fill: @mantle; + --dsw-specific-sidebar-nav-item-active-accent: @surface0; + --dsw-specific-sidebar-nav-item-active: @surface0; + --dsw-specific-sidebar-nav-item-hover: fade(@text, 8%); + --dsw-specific-tip: var(--dsw-static-neutral-bluish-800); + + --dsr-bg: @crust; + --dsr-text-0: @text; + --dsr-text-1: @subtext1; + --dsr-text-2: @subtext0; + --dsr-text-3: @overlay2; + --dsr-text-4: @overlay1; + --dsr-border-1: rgb(var(--ds-rgb-neutral-450)); + --dsr-border-2: rgb(var(--ds-rgb-neutral-600)); + --dsr-input-border: #5a5a69; + --dsr-input-bg: #404045; + --dsr-button-main-bg: #509fff; + --dsr-button-main-bg-hover: #4166d5; + --dsr-button-second-bg: var(--dsr-main-2); + --dsr-button-grey-0: rgb(var(--ds-rgb-neutral-600)); + --dsr-button-grey-1: rgb(var(--ds-rgb-neutral-650)); + --dsr-button-grey-2: rgb(var(--ds-rgb-neutral-700)); + --dsr-delete-button-bg: rgb(var(--ds-rgb-red-500) / 0.85); + --dsr-delete-button-bg-hover: rgb(var(--ds-rgb-red-550) / 0.45); + --dsr-tooltip-fg: rgb(var(--ds-rgb-zinc-650)); + --dsr-tooltip-bg: #000; + --dsr-side-bg: #212327; + --dsr-side-hover-bg-rgb: 51, 51, 51; + --dsr-side-hover-bg: rgb(var(--ds-rgb-neutral-750)); + --dsr-icon-fg-1: rgb(var(--ds-rgb-neutral-350)); + --dsr-icon-hover-0: rgb(var(--ds-rgb-neutral-500)); + --dsr-icon-hover-1: rgb(var(--ds-rgb-neutral-700)); + --dsr-side-icon-hover: rgb(var(--ds-rgb-zinc-750)); + --dsr-error-fg: rgb(var(--ds-rgb-red-450)); + --dsr-risk-text: #e4773d; + --dsr-risk-border: #4c4740; + --dsr-risk-fill: #31302e; + + .ds-elevated, [data-elevated] { + #ds-rgb() !important; + } + &, .ds-theme { + #ds-rgb() !important; + + --wip-ds-color-bg-tooltip: @surface0; + } + + .ds-sign-up-form__main { + background: @base; + } + .ds-switch.ds-switch.ds-switch { + --switch-color: @surface2; + --switch-thumb-color: if(@flavor = latte, @base, @text); + &.ds-switch--checked { + --switch-color: @accent; + --switch-thumb-color: @base; + } + } + .ds-basic-button--primary { + --ds-primary-button-text-color: @base; + } + .ds-checkbox svg { + color: @base; + } + + .ds-tooltip { + --tooltip-text-color: @text; + } + + /* Fade out text on active sidebar nav item */ + ._546d736.b64fb9ae ._254829d { + --mask-base-color: #lib.rgbify(@surface0)[]; + } + /* Fade out text on hovered sidebar nav item */ + ._546d736 ._254829d { + --mask-base-color: #lib.rgbify(@surface0)[]; + } + + /* Fade out on top of conversation */ + .c99b79f8.c99b79f8.c99b79f8 { + background: linear-gradient(to bottom, @crust, transparent); + } + /* Fade out on top of conversation when multiselect active */ + .a51c5344 .c99b79f8.c99b79f8.c99b79f8 { + background: linear-gradient( + to bottom, + var(--dsw-alias-bg-multi-select), + transparent + ); + } + + /* Response feedback rating radio button focus */ + ._74d6322 + .ds-radio-button-group + .ds-radio-button.ds-radio-button--active::after { + box-shadow: var(--radio-button-group-button-outline-box-shadow-focus); + } + + /* Send button icon */ + ._7436101 { + color: @base; + } + } +} diff --git a/styles/desmos/catppuccin.user.less b/styles/desmos/catppuccin.user.less index 21a7becf85..b5aa3a530c 100644 --- a/styles/desmos/catppuccin.user.less +++ b/styles/desmos/catppuccin.user.less @@ -2,7 +2,7 @@ @name Desmos Catppuccin @namespace github.com/catppuccin/userstyles/styles/desmos @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/desmos -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/desmos/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Adesmos @description Soothing pastel theme for Desmos @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document regexp( "^(https?:\/\/)(?!(cl|teacher|student)\.desmos\.com)([a-zA-Z0-9-]+\.)?desmos\.com(\/.*)?$" @@ -176,7 +176,9 @@ background: @overlay1 !important; } - .dcg-keypad-btn.dcg-btn-light-on-gray, .dcg-ctrl-toggle-cover { + .dcg-keypad-btn.dcg-btn-light-on-gray, + .dcg-keypad-btn.dcg-btn-light-gray, + .dcg-ctrl-toggle-cover { background: @mantle !important; border-color: @surface0 !important; } @@ -214,7 +216,10 @@ border-radius: 5px; } - .dcg-header, .dcg-main-header-container, .navbar-inner { + .dcg-header, + .dcg-main-header-container, + .navbar-inner, + .dcg-practice-header-view { background: @crust !important; border-bottom-color: @surface0 !important; *:not( @@ -509,10 +514,11 @@ text-shadow: none !important; } - .dcg-btn-light-gray { + .dcg-btn-light-gray, .dcg-btn-light-on-gray { background: @mantle !important; box-shadow: none !important; border-color: @text !important; + color: @text !important; } .spa-header { @@ -540,6 +546,7 @@ border-bottom-color: @overlay2 !important; } + .dcg-checkbox__box, .dcg-axis-label, .dcg-clickable-menu-row:has(.dcg-input-label) > .dcg-mathquill-wrapper { --dcg-accent-color: @accent !important; @@ -1155,5 +1162,155 @@ box-shadow: 0 0 0 1px @accent !important; } } + + .dcg-frontpage-landing__announcement { + background: @accent; + color: @text; + } + + .dcg-frontpage-landing__announcement-interior { + background-color: fade(@crust, 50%); + } + + /* Exams & Testing Pages (desmos.com/testing/default/{fourfunction,graphing,scientific}) */ + .spa-sample-calculator-view { + .dcg-sample-calculator__header i.dcg-icon-desmos { + color: @base !important; + } + + .dcg-sample-calculator__header { + background-color: @accent !important; + color: @base !important; + } + + .dcg-sample-calculator__calculator-name, + .dcg-sample-calculator__state-name { + border-color: @base; + } + } + + /* Login/sign up modal */ + .dcg-shared-modal-dialog { + color: @text; + --dcg-modal-background-color: @base; + + /* Account signup welcome */ + .dcg-authentication-modal__sublabel { + color: @subtext0; + } + .dcg-authentication-modal__tag { + background-color: fade(@accent, 20%); + + &:hover { + background-color: fade(@accent, 30%); + } + + &.dcg-authentication-modal__tag--selected { + border-color: @accent; + } + } + } + + /* Account button/dropdown (displays username) */ + .dcg-header-bar__account-menu { + &.dcg-hovered, &[aria-expanded="true"] { + background-color: @surface0; + } + } + /* Account settings modal */ + .dcg-shared-account-dialog { + color: @text; + } + + /* Desmos Professional (desmos.com/professional) */ + .dcg-professional-hero { + background-color: @crust; + color: @text; + } + .dcg-section__beta-button { + color: @base; + background-color: @text; + + &.dcg-hovered { + background-color: @subtext1; + } + + &.dcg-depressed { + background-color: @subtext0; + } + } + + /* "powered by" text above logo */ + .dcg-powered-by { + color: @text !important; + } + + /* saved graph titles */ + .dcg-checkbox__content { + color: @accent; + } + /* saved folders */ + .dcg-saved-graphs { + --dcg-folder-background-color: @mantle; + } + + /* slider bounds */ + .dcg-slider { + --dcg-custom-secondary-text-color: @accent; + } + + /* tutorial (internally called tour/trip) */ + .dcg-trip-interior, .dcg-trip-content { + background: @base !important; + color: @text; + } + + /* folders */ + .dcg-folder { + --dcg-folder-background-color: @mantle !important; + } + .dcg-folder-item-count { + color: @subtext1; + } + .dcg-my-graphs-modal__back-btn-text, + .dcg-folder__name, + .dcg-my-graphs-modal__folder-header + > .dcg-my-graphs-modal-saved-graphs-header, + .dcg-example-gallery__heading, + .dcg-saved-graphs-tile__title { + color: @accent; + } + + /* folders search (no items found) */ + .dcg-my-graphs-modal-empty-state__heading { + color: @accent !important; + } + .dcg-my-graphs-modal-empty-state__no-search-results { + color: @subtext1; + } + + /* new graph button */ + .dcg-new-my-graphs-item__button { + color: @text !important; + } + .dropdown-option-container > .dcg-dropdown-choice[role="menuitem"] { + color: @text; + } + + /* update to new behavior button (write f()=random() then enter/exit text mode) */ + .dcg-update-behavior-btn { + border-color: @surface0 !important; + } + + /* desmodder: intellisense current variable highlight */ + .pfc-param-selected { + background: @surface0 !important; + color: @text !important; + } + + /* line numbers */ + .dcg-num { + color: @text; + } } } diff --git a/styles/dev.to/catppuccin.user.less b/styles/dev.to/catppuccin.user.less index 681266870a..e4fb491516 100644 --- a/styles/dev.to/catppuccin.user.less +++ b/styles/dev.to/catppuccin.user.less @@ -2,7 +2,7 @@ @name DEV Community Catppuccin @namespace github.com/catppuccin/userstyles/styles/dev.to @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/dev.to -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/dev.to/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Adev.to @description Soothing pastel theme for DEV Community @@ -15,9 +15,9 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; -@-moz-document domain("dev.to") { +@-moz-document domain("dev.to"), domain("forem.com") { @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); body.dark-theme { @@ -26,6 +26,14 @@ body.light-theme { #catppuccin(@lightFlavor); } + body[data-user-status="logged-out"] { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } #catppuccin(@flavor) { #lib.palette(); @@ -35,6 +43,8 @@ --body-bg: @mantle; --black: if(@flavor = latte, @text, @crust); --body-color: @text; + --color-primary: @subtext1; + --color-secondary: @subtext0; --header-bg: @base; --header-shadow: @crust; diff --git a/styles/devdocs/catppuccin.user.less b/styles/devdocs/catppuccin.user.less index 66f9012c08..5760a0fb4b 100644 --- a/styles/devdocs/catppuccin.user.less +++ b/styles/devdocs/catppuccin.user.less @@ -2,7 +2,7 @@ @name DevDocs Catppuccin @namespace github.com/catppuccin/userstyles/styles/devdocs @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/devdocs -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/devdocs/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Adevdocs @description Soothing pastel theme for DevDocs @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("devdocs.io") { @import url("https://prismjs.catppuccin.com/variables.important.css"); diff --git a/styles/docs.deno.com/catppuccin.user.less b/styles/docs.deno.com/catppuccin.user.less index c09084de2e..843df3c48c 100644 --- a/styles/docs.deno.com/catppuccin.user.less +++ b/styles/docs.deno.com/catppuccin.user.less @@ -2,7 +2,7 @@ @name docs.deno.com Catppuccin @namespace github.com/catppuccin/userstyles/styles/docs.deno.com @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/docs.deno.com -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/docs.deno.com/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Adocs.deno.com @description Soothing pastel theme for docs.deno.com @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("docs.deno.com") { @import url("https://prismjs.catppuccin.com/variables.important.css"); diff --git a/styles/docs.rs/catppuccin.user.less b/styles/docs.rs/catppuccin.user.less index 974c725e4a..dd5ad7fb00 100644 --- a/styles/docs.rs/catppuccin.user.less +++ b/styles/docs.rs/catppuccin.user.less @@ -2,7 +2,7 @@ @name docs.rs Catppuccin @namespace github.com/catppuccin/userstyles/styles/docs.rs @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/docs.rs -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/docs.rs/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Adocs.rs @description Soothing pastel theme for docs.rs @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("docs.rs"), domain("doc.rust-lang.org") { :root:not([data-docs-rs-theme]) { @@ -73,8 +73,13 @@ --settings-input-border-color: @surface0; --settings-button-color: @text; --settings-button-border-focus: @accent; + --settings-menu-filter: @subtext0-filter; + --settings-menu-hover-filter: @subtext1-filter; --sidebar-background-color: @mantle; --sidebar-background-color-hover: @crust; + --sidebar-border-color: @overlay1; + --sidebar-resizer-hover: @sky; + --sidebar-resizer-active: @sapphire; --source-sidebar-background-selected: @surface0; --source-sidebar-background-hover: @base; --code-block-background-color: @mantle; @@ -170,8 +175,6 @@ --scrape-example-help-hover-color: @text; --scrape-example-code-wrapper-background-start: @base; --scrape-example-code-wrapper-background-end: @base; - --sidebar-resizer-hover: @sky; - --sidebar-resizer-active: @sapphire; select { background-color: @mantle; diff --git a/styles/duckduckgo/catppuccin.user.less b/styles/duckduckgo/catppuccin.user.less index 37aea9bb9b..7cd043f716 100644 --- a/styles/duckduckgo/catppuccin.user.less +++ b/styles/duckduckgo/catppuccin.user.less @@ -2,7 +2,7 @@ @name DuckDuckGo Catppuccin @namespace github.com/catppuccin/userstyles/styles/duckduckgo @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/duckduckgo -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/duckduckgo/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aduckduckgo @description Soothing pastel theme for DuckDuckGo @@ -15,9 +15,9 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; -@-moz-document domain("duckduckgo.com") { +@-moz-document domain("duckduckgo.com"), domain("duck.ai") { :root:not(.dark-bg, .no-theme) { #catppuccin(@lightFlavor); } @@ -44,11 +44,11 @@ --theme-col-txt-page-separator: @text !important; --theme-col-page-separator: @text !important; --theme-col-txt-url: @text !important; - --theme-col-txt-title-visited: @mauve !important; + --theme-col-txt-title: @blue !important; + --theme-col-txt-title-visited: @lavender !important; --theme-col-txt-snippet: @text !important; --theme-col-txt-card-title: @text; --theme-col-txt-url-domain: @subtext1 !important; - --theme-col-txt-title: @blue !important; --theme-col-bg-card: @surface0 !important; --theme-col-about-link: @blue; --theme-col-border-ui: @surface1 !important; @@ -152,6 +152,9 @@ --theme-dc-color-llama-main: @pink !important; --theme-dc-color-mixtral-main: @peach !important; --theme-dc-color-anchor-sleep: @subtext0 !important; + --theme-assist-bg-chat-system: @mantle !important; + --theme-assist-gradient-stop: @mantle !important; + --sds-color-palette-gray-40: @text !important; /* maps */ --sds-color-background-01: @base !important; --sds-color-background-02: @mantle !important; diff --git a/styles/ecosia/catppuccin.user.less b/styles/ecosia/catppuccin.user.less index 2ef6c32b66..2ecfea20a6 100644 --- a/styles/ecosia/catppuccin.user.less +++ b/styles/ecosia/catppuccin.user.less @@ -2,7 +2,7 @@ @name Ecosia Catppuccin @namespace github.com/catppuccin/userstyles/styles/ecosia @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/ecosia -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/ecosia/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aecosia @description Soothing pastel theme for Ecosia @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("ecosia.org") { :root.light { diff --git a/styles/elk/catppuccin.user.less b/styles/elk/catppuccin.user.less index 5695b642a4..7eebf6054f 100644 --- a/styles/elk/catppuccin.user.less +++ b/styles/elk/catppuccin.user.less @@ -2,7 +2,7 @@ @name Elk Catppuccin @namespace github.com/catppuccin/userstyles/styles/elk @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/elk -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/elk/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aelk @description Soothing pastel theme for Elk @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("elk.zone") { :root.dark { diff --git a/styles/formative/README.md b/styles/formative/README.md index 2a58fb2d82..158744c56c 100644 --- a/styles/formative/README.md +++ b/styles/formative/README.md @@ -18,9 +18,11 @@ See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). -## 💝 Current Maintainer -- [r58Playz](https://github.com/r58Playz) +## ❤️‍🩹 Unmaintained +This userstyle currently lacks maintainers, and may not work correctly. Please feel free to contribute for any issues you find! +## 💖 Past Maintainer +- [r58Playz](https://github.com/r58Playz)   diff --git a/styles/formative/catppuccin.user.less b/styles/formative/catppuccin.user.less index 144af4113f..b768c79b0c 100644 --- a/styles/formative/catppuccin.user.less +++ b/styles/formative/catppuccin.user.less @@ -2,7 +2,7 @@ @name Formative Catppuccin @namespace github.com/catppuccin/userstyles/styles/formative @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/formative -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/formative/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aformative @description Soothing pastel theme for Formative @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("app.formative.com"), domain("goformative.com") { :root { diff --git a/styles/freedesktop/catppuccin.user.less b/styles/freedesktop/catppuccin.user.less index 15c5990e8f..9728bd7e64 100644 --- a/styles/freedesktop/catppuccin.user.less +++ b/styles/freedesktop/catppuccin.user.less @@ -2,7 +2,7 @@ @name freedesktop.org Catppuccin @namespace github.com/catppuccin/userstyles/styles/freedesktop @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/freedesktop -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/freedesktop/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Afreedesktop @description Soothing pastel theme for freedesktop.org @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("www.freedesktop.org"), domain("specifications.freedesktop.org") { diff --git a/styles/ghostty.org/catppuccin.user.less b/styles/ghostty.org/catppuccin.user.less index 78b2646eaf..e071e5c766 100644 --- a/styles/ghostty.org/catppuccin.user.less +++ b/styles/ghostty.org/catppuccin.user.less @@ -2,7 +2,7 @@ @name Ghostty.org Catppuccin @namespace github.com/catppuccin/userstyles/styles/ghostty.org @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/ghostty.org -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/ghostty.org/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aghostty.org @description Soothing pastel theme for Ghostty.org @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("ghostty.org") { @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); @@ -55,23 +55,15 @@ --callout-warning: @yellow; --callout-caution: @red; - div[class*="Terminal_adwaita"] { + div[class^="Terminal-module"] { --adw-headerbar-color: @mantle !important; - - svg[class*="Terminal_icon"], p[class*="Terminal_title"] { - color: @text !important; - } - - li[class*="Terminal_circularButton"] { - > svg { - color: @base !important; - } - background-color: @accent !important; - } + --color-sunset-orange: @red; + --color-pastel-orange: @peach; + --color-malachite: @green; } - [class*="Link_buttonLink"]:hover, - ul [class*="NavTree_active"] { + [class*="__buttonLink"][class*="__brand"]:hover, + ul[class*="NavTree-module__"] [class*="__active"] { color: @crust !important; } @@ -95,8 +87,7 @@ } } +/* #lib.hslify() with spaces instead of commas. */ #hslify(@color) { - @raw: e( - %("%s, %s%, %s%", hue(@color), saturation(@color), lightness(@color)) - ); + @raw: e(%("%s %s% %s%", hue(@color), saturation(@color), lightness(@color))); } diff --git a/styles/github/README.md b/styles/github/README.md index 4968cf9ae9..70cce4d092 100644 --- a/styles/github/README.md +++ b/styles/github/README.md @@ -18,7 +18,7 @@ See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). > [!NOTE] -> Switch to a default GitHub light/dark theme via **Settings** > **Appearance** for the best experience! +> Use the **Light default** or **Dark default** themes and disable *Increase contrast* under GitHub's [Theme preferences](https://github.com/settings/appearance). ## 💝 Current Maintainer - [uncenter](https://github.com/uncenter) diff --git a/styles/github/catppuccin.user.less b/styles/github/catppuccin.user.less index 5da12ad1fd..3a42256b1f 100644 --- a/styles/github/catppuccin.user.less +++ b/styles/github/catppuccin.user.less @@ -2,7 +2,7 @@ @name GitHub Catppuccin @namespace github.com/catppuccin/userstyles/styles/github @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/github -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/github/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agithub @description Soothing pastel theme for GitHub @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document /* Match every page on GitHub except github.com/home, github.com/features/*, and github.com/organizations/plan. */ regexp( @@ -40,6 +40,9 @@ regexp( } &[data-dark-theme="dark"] { #catppuccin(@darkFlavor); + header[data-color-mode] { + #catppuccin(@darkFlavor); + } } } } @@ -318,7 +321,7 @@ regexp( --fgColor-default: @text; --fgColor-muted: @subtext1; --fgColor-onEmphasis: @base; - --fgColor-white: if(@flavor = latte, @crust, @text); + --fgColor-white: @text; --fgColor-disabled: @surface2; --fgColor-link: @accent; --fgColor-neutral: @subtext1; @@ -459,6 +462,11 @@ regexp( --shadow-floating-legacy: 0px 6px 12px -3px @crust, 0px 6px 18px 0px @crust; --outline-focus: @blue solid 2px; + /* Feed Links */ + .feed-item-content a code, .feed-item-content a tt { + color: @accent; + } + /* Customer Terms & Agreements Page: https://github.com/customer-terms */ .enterprise-customer-agreement { color: @text !important; @@ -517,24 +525,13 @@ regexp( } /* Header when logged out */ - .HeaderMenu-link { - color: @text; - - &:hover { - color: @text; - } - } .header-search-button { - &.placeholder { - color: @subtext0; - } - svg { fill: @text !important; } } .HeaderMenu-toggle-bar { - background-color: @text; + border-color: @text; } .notification-indicator .mail-status { background-image: linear-gradient( diff --git a/styles/gleam.run/catppuccin.user.less b/styles/gleam.run/catppuccin.user.less index 20479d2985..7c7b1cd08e 100644 --- a/styles/gleam.run/catppuccin.user.less +++ b/styles/gleam.run/catppuccin.user.less @@ -2,7 +2,7 @@ @name gleam.run Catppuccin @namespace github.com/catppuccin/userstyles/styles/gleam.run @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/gleam.run -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/gleam.run/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agleam.run @description Soothing pastel theme for gleam.run @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("gleam.run") { @import url("https://prismjs.catppuccin.com/variables.important.css"); diff --git a/styles/gmail/catppuccin.user.less b/styles/gmail/catppuccin.user.less index 8fcc5c816a..ff39030c04 100644 --- a/styles/gmail/catppuccin.user.less +++ b/styles/gmail/catppuccin.user.less @@ -2,7 +2,7 @@ @name Gmail Catppuccin @namespace github.com/catppuccin/userstyles/styles/gmail @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/gmail -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/gmail/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agmail @description Soothing pastel theme for Gmail @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("mail.google.com") { :root { diff --git a/styles/go.dev/catppuccin.user.less b/styles/go.dev/catppuccin.user.less index a8f1e84a9c..8a4022a982 100644 --- a/styles/go.dev/catppuccin.user.less +++ b/styles/go.dev/catppuccin.user.less @@ -2,7 +2,7 @@ @name go.dev Catppuccin @namespace github.com/catppuccin/userstyles/styles/go.dev @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/go.dev -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/go.dev/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ago.dev @description Soothing pastel theme for go.dev @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("go.dev") { :root[data-theme="auto"], @@ -50,6 +50,7 @@ --color-background-card-footer: @crust; --color-background-code: @surface0; // Code Snippets --color-background-info: @surface1; + --color-background-alert: fade(@red, 40%); --color-background-inverted: @crust; --color-background-logo: @text; --color-background-playground-input: @mantle; @@ -93,14 +94,6 @@ .go-Footer { background-color: @mantle; - button[aria-label="Shorcuts Modal"] img.go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - img.Footer-gopher, img.go-Footer-gopher { @svg: escape( @@ -271,24 +264,6 @@ ); content: url("data:image/svg+xml,@{svg}"); } - // Theme Selector Icons - .Footer img[alt="Dark theme"], - .go-Footer img[alt="Dark theme"], - .top-bar img.go-Icon--inverted[data-value="dark"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - // Right Arrow Icons - .go-NavigationDrawer-listItem a[href="#"] img.go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } .SiteBreadcrumb .BreadcrumbNav-li::after { @svg: escape( @@ -297,25 +272,6 @@ background-image: url("data:image/svg+xml,@{svg}"); } - .Footer img[alt="Light theme"], - .go-Footer img[alt="Light theme"], - .top-bar img.go-Icon--inverted[data-value="light"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - - .Footer img[alt="System theme"], - .go-Footer img[alt="System theme"], - .top-bar img.go-Icon--inverted[data-value="auto"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } // Menu Active Selector img.TabSection-underline { @svg: escape( @@ -384,14 +340,6 @@ .go-Chip--alert { color: @crust; } - // Pkg.go Clipboard Icon - .go-Clipboard img.go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } // Pkg.go Header .go-Header { .go-Header-submenu { @@ -399,44 +347,19 @@ } // Triangle Icon Accented - .go-Header-menuItem:hover img.go-Icon[alt="submenu dropdown icon"], - .go-Header-menuItem:focus-within - img.go-Icon[alt="submenu dropdown icon"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; + .go-Header-menuItem:hover a img.go-Icon { + filter: @accent-filter !important; } } - // Triangle Icon - .go-Header, - .go-Main-navMobile { - @svg: escape( - '' - ); - - img.go-Icon[alt="submenu dropdown icon"] { - content: url("data:image/svg+xml,@{svg}"); - filter: none; + // Icons + .go-Icon { + &:not(.go-Icon--accented) { + filter: @text-filter; } - - .go-Select { - background-image: url("data:image/svg+xml,@{svg}"); + &.go-Icon--accented { + filter: @accent-filter; } } - // Info Icon - .go-Main-banner .go-Message .go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - // Pkg.go Subheader - .go-Main-header { - background-color: @mantle; - } // Pkg.go Fixed Header .go-Main-header[data-raised="true"] { background-color: @crust; @@ -497,14 +420,6 @@ .JumpDialog-active { color: @crust; } - - .go-Button[aria-label="Close"] img.go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } } // Pkg.go Package Search Results .SearchResults-header { @@ -512,17 +427,6 @@ display: none; } } - // Search Icon - .SearchResults-header, - .go-SearchForm { - button[aria-label="Submit search"] img.go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - } // Search Icon in pkg.go - Accented form.Homepage-search--symbol::before { @svg: escape( @@ -531,90 +435,12 @@ background-image: url("data:image/svg+xml,@{svg}"); } - .ShortcutsDialog { - .go-Button[aria-label="Close"] img.go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - } - // Pkg.go Package Page - .UnitDetails { - #section-documentation img.go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - - .UnitReadme-title img.go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - } - - .UnitDirectories img.go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - - .UnitFiles img.go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } // Pkg.go Package Details Section .UnitMeta { - .UnitMeta-details { - img.go-Icon { - // Question Tooltip - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - - img.go-Icon[alt="unchecked"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - - img.go-Icon.go-Icon--accented[alt="checked"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - } - .UnitMeta-links { - img.go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - img.depsdev-Icon { @svg: escape( - '' + '' ); content: url("data:image/svg+xml,@{svg}"); } diff --git a/styles/google-drive/catppuccin.user.less b/styles/google-drive/catppuccin.user.less index dedab12ae4..99004f9b74 100644 --- a/styles/google-drive/catppuccin.user.less +++ b/styles/google-drive/catppuccin.user.less @@ -2,7 +2,7 @@ @name Google Drive Catppuccin @namespace github.com/catppuccin/userstyles/styles/google-drive @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/google-drive -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/google-drive/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agoogle-drive @description Soothing pastel theme for Google Drive @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("drive.google.com") { .vhoiae { diff --git a/styles/google-gemini/catppuccin.user.less b/styles/google-gemini/catppuccin.user.less index 6ee28902d9..7b53490bd7 100644 --- a/styles/google-gemini/catppuccin.user.less +++ b/styles/google-gemini/catppuccin.user.less @@ -2,7 +2,7 @@ @name Google Gemini Catppuccin @namespace github.com/catppuccin/userstyles/styles/google-gemini @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/google-gemini -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/google-gemini/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agoogle-gemini @description Soothing pastel theme for Google Gemini @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("gemini.google.com") { @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); @@ -189,6 +189,7 @@ --gem-sys-color--primary-fixed: @text; --gem-sys-color--on-secondary: fade(@accent, 30%); --gem-sys-color--surface-variant: @surface0; + --gem-sys-color--surface-bright: @surface0; --og-theme-color: @text; diff --git a/styles/google-photos/catppuccin.user.less b/styles/google-photos/catppuccin.user.less index 73f5967517..f6245658c9 100644 --- a/styles/google-photos/catppuccin.user.less +++ b/styles/google-photos/catppuccin.user.less @@ -2,7 +2,7 @@ @name Google Photos Catppuccin @namespace github.com/catppuccin/userstyles/styles/google-photos @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/google-photos -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/google-photos/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agoogle-photos @description Soothing pastel theme for Google Photos @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("photos.google.com") { body { diff --git a/styles/google/catppuccin.user.less b/styles/google/catppuccin.user.less index 38fb659875..a4c80bdc5d 100644 --- a/styles/google/catppuccin.user.less +++ b/styles/google/catppuccin.user.less @@ -2,7 +2,7 @@ @name Google Catppuccin @namespace github.com/catppuccin/userstyles/styles/google @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/google -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/google/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agoogle @description Soothing pastel theme for Google @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document regexp("^https?://(www\\.|images\\.)?google\\..*") { :root { diff --git a/styles/grabify/catppuccin.user.less b/styles/grabify/catppuccin.user.less index 552a3d2626..781a71d3be 100644 --- a/styles/grabify/catppuccin.user.less +++ b/styles/grabify/catppuccin.user.less @@ -2,7 +2,7 @@ @name Grabify Catppuccin @namespace github.com/catppuccin/userstyles/styles/grabify @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/grabify -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/grabify/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agrabify @description Soothing pastel theme for Grabify @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("grabify.link") { :root { diff --git a/styles/graphite/README.md b/styles/graphite/README.md index a1a5d586e7..d981268960 100644 --- a/styles/graphite/README.md +++ b/styles/graphite/README.md @@ -4,7 +4,7 @@

Logo
- Catppuccin for Graphite + Catppuccin for Graphite

diff --git a/styles/graphite/catppuccin.user.less b/styles/graphite/catppuccin.user.less index 45a4c22c1c..2c57f2f94a 100644 --- a/styles/graphite/catppuccin.user.less +++ b/styles/graphite/catppuccin.user.less @@ -2,7 +2,7 @@ @name Graphite Catppuccin @namespace github.com/catppuccin/userstyles/styles/graphite @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/graphite -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/graphite/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agraphite @description Soothing pastel theme for Graphite @@ -15,9 +15,9 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; -@-moz-document domain("app.graphite.dev") { +@-moz-document domain("app.graphite.com") { :root[data-theme="light"] { #catppuccin(@lightFlavor); } diff --git a/styles/hackage/catppuccin.user.less b/styles/hackage/catppuccin.user.less index e1e406327c..b6c6e9595d 100644 --- a/styles/hackage/catppuccin.user.less +++ b/styles/hackage/catppuccin.user.less @@ -2,7 +2,7 @@ @name Hackage Catppuccin @namespace github.com/catppuccin/userstyles/styles/hackage @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/hackage -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/hackage/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahackage @description Soothing pastel theme for Hackage @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("hackage.haskell.org"), domain("hackage-content.haskell.org") { @@ -268,7 +268,7 @@ summary, #control\.syn { @svg: escape( - 'SynopsisSynopsis' + 'SynopsisSynopsis' ); background-image: url("data:image/svg+xml,@{svg}") !important; } diff --git a/styles/hacker-news/catppuccin.user.less b/styles/hacker-news/catppuccin.user.less index e578613b82..b5e70980dd 100644 --- a/styles/hacker-news/catppuccin.user.less +++ b/styles/hacker-news/catppuccin.user.less @@ -2,7 +2,7 @@ @name Hacker News Catppuccin @namespace github.com/catppuccin/userstyles/styles/hacker-news @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/hacker-news -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/hacker-news/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahacker-news @description Soothing pastel theme for Hacker News @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("news.ycombinator.com") { :root { diff --git a/styles/have-i-been-pwned/catppuccin.user.less b/styles/have-i-been-pwned/catppuccin.user.less index 2b2215a87d..1b38f32497 100644 --- a/styles/have-i-been-pwned/catppuccin.user.less +++ b/styles/have-i-been-pwned/catppuccin.user.less @@ -2,7 +2,7 @@ @name Have I Been Pwned Catppuccin @namespace github.com/catppuccin/userstyles/styles/have-i-been-pwned @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/have-i-been-pwned -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/have-i-been-pwned/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahave-i-been-pwned @description Soothing pastel theme for Have I Been Pwned @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("haveibeenpwned.com") { :root { diff --git a/styles/holodex/catppuccin.user.less b/styles/holodex/catppuccin.user.less index 7246416da7..8da3759e63 100644 --- a/styles/holodex/catppuccin.user.less +++ b/styles/holodex/catppuccin.user.less @@ -2,7 +2,7 @@ @name Holodex Catppuccin @namespace github.com/catppuccin/userstyles/styles/holodex @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/holodex -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/holodex/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aholodex @description Soothing pastel theme for Holodex @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("holodex.net") { :root:has(.theme--dark) { diff --git a/styles/home-manager-options-search/catppuccin.user.less b/styles/home-manager-options-search/catppuccin.user.less index 24f884e829..5b18cea093 100644 --- a/styles/home-manager-options-search/catppuccin.user.less +++ b/styles/home-manager-options-search/catppuccin.user.less @@ -2,7 +2,7 @@ @name Home Manager Options Search Catppuccin @namespace github.com/catppuccin/userstyles/styles/home-manager-options-search @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/home-manager-options-search -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/home-manager-options-search/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahome-manager-options-search @description Soothing pastel theme for Home Manager Options Search @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("home-manager-options.extranix.com") { :root { diff --git a/styles/homepage/catppuccin.user.less b/styles/homepage/catppuccin.user.less index 22f7a7a3b7..1b69d038a5 100644 --- a/styles/homepage/catppuccin.user.less +++ b/styles/homepage/catppuccin.user.less @@ -2,7 +2,7 @@ @name homepage Catppuccin @namespace github.com/catppuccin/userstyles/styles/homepage @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/homepage -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/homepage/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahomepage @description Soothing pastel theme for homepage @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("homepage.example.com"), regexp("https?://homepage\\..*") { diff --git a/styles/hoogle/catppuccin.user.less b/styles/hoogle/catppuccin.user.less index 64b7584704..0d32d24275 100644 --- a/styles/hoogle/catppuccin.user.less +++ b/styles/hoogle/catppuccin.user.less @@ -2,7 +2,7 @@ @name Hoogle Catppuccin @namespace github.com/catppuccin/userstyles/styles/hoogle @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/hoogle -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/hoogle/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahoogle @description Soothing pastel theme for Hoogle @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("hoogle.haskell.org") { :root { diff --git a/styles/hoppscotch/catppuccin.user.less b/styles/hoppscotch/catppuccin.user.less index de194d052e..aed0de7b3d 100644 --- a/styles/hoppscotch/catppuccin.user.less +++ b/styles/hoppscotch/catppuccin.user.less @@ -2,7 +2,7 @@ @name Hoppscotch Catppuccin @namespace github.com/catppuccin/userstyles/styles/hoppscotch @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/hoppscotch -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/hoppscotch/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahoppscotch @description Soothing pastel theme for Hoppscotch @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("hoppscotch.io") { :root.dark { @@ -29,27 +29,23 @@ #catppuccin(@flavor) { #lib.palette(); #lib.defaults(); - // TODO: Do we need to set the selection color in the defaults? Why is it necessary here but not elsewhere? - ::selection { - color: @text !important; - } @accent-light-alpha: 1.1; - @accent-dark-alpha: 0.9; + @accent-dark-alpha: 80%; @accent-gradient-from-color: 1.05; @accent-gradient-via-color: 1.2; @accent-gradient-to-color: 0.85; --primary-color: @base; - --primary-light-color: @surface1; + --primary-light-color: @mantle; --primary-dark-color: @crust; --primary-contrast-color: @mantle; --secondary-color: @subtext0; --secondary-light-color: @subtext0; --secondary-dark-color: @subtext1; - --divider-color: @overlay0; - --divider-light-color: @overlay1; - --divider-dark-color: @surface2; + --divider-color: @surface0; + --divider-light-color: @surface0; + --divider-dark-color: @surface0; --error-color: @red; --tooltip-color: @text; --popover-color: @crust; @@ -73,17 +69,41 @@ --gradient-to-color: fade(@accent, @accent-gradient-to-color); --editor-process-color: @text; + --banner-info-color: fade(@blue, 20%); + + --method-get-color: @green; + --method-post-color: @yellow; + --method-put-color: @sapphire; + --method-patch-color: @mauve; + --method-delete-color: @red; + --method-head-color: @teal; + --method-options-color: @lavender; + --method-default-color: @overlay1; + --status-info-color: @blue; + --status-success-color: @green; + --status-redirect-color: @peach; + --status-critical-error-color: @red; + --status-server-error-color: @red; + --status-missing-data-color: @overlay0; - .ͼ1 .cm-placeholder { - color: @text; + .cm-editor { + background: @mantle; + + .cm-placeholder { + color: @text; + } } .cm-focused .cm-activeLine { - background-color: @surface0; + background-color: @base; } .cm-focused .cm-activeLineGutter { - background-color: @surface2; + background-color: @surface0; + } + + .cm-selectionBackground { + background: fade(@accent, 30%) !important; } } } diff --git a/styles/hyperpipe/README.md b/styles/hyperpipe/README.md index 64f9db353b..1fe862ee85 100644 --- a/styles/hyperpipe/README.md +++ b/styles/hyperpipe/README.md @@ -18,9 +18,11 @@ See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). -## 💝 Current Maintainer -- [jn-sena](https://github.com/jn-sena) +## ❤️‍🩹 Unmaintained +This userstyle currently lacks maintainers, and may not work correctly. Please feel free to contribute for any issues you find! +## 💖 Past Maintainer +- [jn-sena](https://github.com/jn-sena)   diff --git a/styles/hyperpipe/catppuccin.user.less b/styles/hyperpipe/catppuccin.user.less index 802146030b..b371086662 100644 --- a/styles/hyperpipe/catppuccin.user.less +++ b/styles/hyperpipe/catppuccin.user.less @@ -2,7 +2,7 @@ @name Hyperpipe Catppuccin @namespace github.com/catppuccin/userstyles/styles/hyperpipe @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/hyperpipe -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/hyperpipe/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahyperpipe @description Soothing pastel theme for Hyperpipe @@ -15,22 +15,9 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; -@-moz-document domain("hyperpipe.surge.sh"), - domain("hyperpipe.esmailelbob.xyz"), - domain("listen.whatever.social"), - domain("music.adminforge.de"), - domain("music.pfcd.me"), - domain("listen.whateveritworks.org"), - domain("hyperpipe.frontendfriendly.xyz"), - domain("hyperpipe.drgns.space"), - domain("hyperpipe.projectsegfau.lt"), - domain("hp.ggtyler.dev"), - domain("hyperpipe.lunar.icu"), - domain("hp.iqbalrifai.eu.org"), - domain("hp.ngn.tf"), - domain("hyperpipe.ducks.party") { +@-moz-document domain("hyperpipe.surge.sh") { body { @media (prefers-color-scheme: light) { #catppuccin(@lightFlavor); diff --git a/styles/ichi.moe/catppuccin.user.less b/styles/ichi.moe/catppuccin.user.less index 4e1e9420e0..1db2272c63 100644 --- a/styles/ichi.moe/catppuccin.user.less +++ b/styles/ichi.moe/catppuccin.user.less @@ -2,7 +2,7 @@ @name ichi.moe Catppuccin @namespace github.com/catppuccin/userstyles/styles/ichi.moe @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/ichi.moe -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/ichi.moe/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aichi.moe @description Soothing pastel theme for ichi.moe @@ -17,7 +17,7 @@ @var checkbox zen "Zen Mode" 0 ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("ichi.moe") { :root { diff --git a/styles/indie-wiki-buddy/catppuccin.user.less b/styles/indie-wiki-buddy/catppuccin.user.less index 33099c6794..90172a7c6c 100644 --- a/styles/indie-wiki-buddy/catppuccin.user.less +++ b/styles/indie-wiki-buddy/catppuccin.user.less @@ -2,7 +2,7 @@ @name Indie Wiki Buddy Catppuccin @namespace github.com/catppuccin/userstyles/styles/indie-wiki-buddy @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/indie-wiki-buddy -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/indie-wiki-buddy/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aindie-wiki-buddy @description Soothing pastel theme for Indie Wiki Buddy @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; /* To get a list of supported search engines, run the following command: diff --git a/styles/inoreader/catppuccin.user.less b/styles/inoreader/catppuccin.user.less index d01a456fe4..88ba27c309 100644 --- a/styles/inoreader/catppuccin.user.less +++ b/styles/inoreader/catppuccin.user.less @@ -2,7 +2,7 @@ @name inoreader Catppuccin @namespace github.com/catppuccin/userstyles/styles/inoreader @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/inoreader -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/inoreader/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ainoreader @description Soothing pastel theme for inoreader @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("inoreader.com") { :root { diff --git a/styles/instagram/catppuccin.user.less b/styles/instagram/catppuccin.user.less index 548a249ca4..e7729da6e3 100644 --- a/styles/instagram/catppuccin.user.less +++ b/styles/instagram/catppuccin.user.less @@ -2,7 +2,7 @@ @name Instagram Catppuccin @namespace github.com/catppuccin/userstyles/styles/instagram @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/instagram -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/instagram/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ainstagram @description Soothing pastel theme for Instagram @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("instagram.com") { ._aa4d { diff --git a/styles/invidious/catppuccin.user.less b/styles/invidious/catppuccin.user.less index 249a14001d..e80627e1ea 100644 --- a/styles/invidious/catppuccin.user.less +++ b/styles/invidious/catppuccin.user.less @@ -2,7 +2,7 @@ @name Invidious Catppuccin @namespace github.com/catppuccin/userstyles/styles/invidious @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/invidious -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/invidious/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ainvidious @description Soothing pastel theme for Invidious @@ -17,7 +17,7 @@ @var checkbox styleVideoPlayer "Style Video Player" 1 ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; /** * kept up-to-date with diff --git a/styles/invokeai/catppuccin.user.less b/styles/invokeai/catppuccin.user.less index 2ec7a91c4b..53c001085c 100644 --- a/styles/invokeai/catppuccin.user.less +++ b/styles/invokeai/catppuccin.user.less @@ -2,7 +2,7 @@ @name InvokeAI Catppuccin @namespace github.com/catppuccin/userstyles/styles/invokeai @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/invokeai -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/invokeai/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ainvokeai @description Soothing pastel theme for InvokeAI @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document regexp("http:\\/\\/(127\\.0\\.0\\.1|localhost):9090(.*)") { :root { diff --git a/styles/jisho/catppuccin.user.less b/styles/jisho/catppuccin.user.less index 0613d8a324..a85de81e07 100644 --- a/styles/jisho/catppuccin.user.less +++ b/styles/jisho/catppuccin.user.less @@ -2,7 +2,7 @@ @name Jisho Catppuccin @namespace github.com/catppuccin/userstyles/styles/jisho @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/jisho -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/jisho/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ajisho @description Soothing pastel theme for Jisho @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("jisho.org") { :root[data-color-theme="auto"] { diff --git a/styles/keybr.com/catppuccin.user.less b/styles/keybr.com/catppuccin.user.less index 6b03857f62..757192b575 100644 --- a/styles/keybr.com/catppuccin.user.less +++ b/styles/keybr.com/catppuccin.user.less @@ -2,7 +2,7 @@ @name keybr.com Catppuccin @namespace github.com/catppuccin/userstyles/styles/keybr.com @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/keybr.com -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/keybr.com/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Akeybr.com @description Soothing pastel theme for keybr.com @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("keybr.com") { html[data-color="dark"] { diff --git a/styles/keyoxide/catppuccin.user.less b/styles/keyoxide/catppuccin.user.less index 7820170afd..e5d96531ad 100644 --- a/styles/keyoxide/catppuccin.user.less +++ b/styles/keyoxide/catppuccin.user.less @@ -2,7 +2,7 @@ @name Keyoxide Catppuccin @namespace github.com/catppuccin/userstyles/styles/keyoxide @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/keyoxide -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/keyoxide/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Akeyoxide @description Soothing pastel theme for Keyoxide @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document url-prefix("https://keyoxide.org") { :root { diff --git a/styles/lastfm/catppuccin.user.less b/styles/lastfm/catppuccin.user.less index 3e4c9ddc7e..f7bc4df875 100644 --- a/styles/lastfm/catppuccin.user.less +++ b/styles/lastfm/catppuccin.user.less @@ -2,7 +2,7 @@ @name Last.fm Catppuccin @namespace github.com/catppuccin/userstyles/styles/lastfm @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/lastfm -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/lastfm/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alastfm @description Soothing pastel theme for Last.fm @@ -15,1784 +15,881 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("last.fm") { - :root { - @media (prefers-color-scheme: light) { - #catppuccin(@lightFlavor); - } - @media (prefers-color-scheme: dark) { - #catppuccin(@darkFlavor); - } + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); } #catppuccin(@flavor) { #lib.palette(); #lib.defaults(); - @accent-dim: darken(@accent, 3%); - - & when not(@flavor = latte) { - @accent-dim: fade(@accent, 50%); - .layout-image { - background: @base; - .layout-image-image { - &[src="https://lastfm.freetls.fastly.net/i/u/300x300/4128a6eb29f94943c9d206c08e625904.jpg"], - &[src="https://lastfm.freetls.fastly.net/i/u/237x178/2a96cbd8b46e442fc41c2b86b821562f.jpg"], - &[src="https://lastfm.freetls.fastly.net/i/u/300x300/c6f59c1e5e7240a4c0d427abd71f3dbb.jpg"] { - mix-blend-mode: screen; - filter: invert(1); - } - } - } - [src="https://lastfm.freetls.fastly.net/i/u/avatar70s/2a96cbd8b46e442fc41c2b86b821562f.jpg"], - [src="https://lastfm.freetls.fastly.net/i/u/64s/4128a6eb29f94943c9d206c08e625904.jpg"], - [src="https://lastfm.freetls.fastly.net/i/u/64s/c6f59c1e5e7240a4c0d427abd71f3dbb.jpg"] { - mix-blend-mode: screen; - filter: invert(1); - } - .cover-art { - background: @base; - } - .avatar::after, - .cover-art::after, - .image-list-item::after, - .video-thumbnail::after { - box-shadow: inset 0 0 0 1px rgb(@subtext0, 7%); - } - } - - /* ------UNIVERSAL STYLES INCASE SOME GET MISSED------ */ - body { + html, html body { color: @text; - background: @base; - } - h1 { - color: @accent; - } - .mimic-link { - color: @sapphire; - } - hr { - border-color: @overlay1; + background-color: @base; } - a { + + /* Components */ + + a, .mimic-link { color: @accent; - &:hover { - color: @accent-dim; - } } - // Mixin to dynamically set colors of album, artist and track categories + .btn-primary() { + background-color: @accent; + color: @crust; - .category-colors() { - &artist { - --category-background: @yellow; - } - &album { - --category-background: @green; - } - &track { - --category-background: @blue; + &:hover { + background-color: darken(@accent, 5%) !important; + color: @crust !important; } } + .btn-primary { + .btn-primary(); + } + .btn-secondary { + background-color: @surface0; + color: @text; - // Evil image mask hack - // Use as follows: - // .maskimage(mask-image, background-color, mask-position, mask-size, mask-repeat); - // Setting any value to "skip" skips that attribute - .mask-image( - @mask-image: url(""), - @mask-color: skip, - @mask-position: skip, - @mask-size: skip, - @mask-repeat: skip, - ) { - & when not(@mask-color = skip) { - background-image: none !important; - background-color: @mask-color; - } - & when not(@mask-image = skip) { - mask-image: @mask-image; - -webkit-mask-image: @mask-image; - } - & when not(@mask-position = skip) { - mask-position: @mask-position; - -webkit-mask-position: @mask-position; - } - & when not(@mask-size = skip) { - mask-size: @mask-size; - -webkit-mask-size: @mask-size; - } - & when not(@mask-repeat = skip) { - mask-repeat: @mask-repeat; - -webkit-mask-repeat: @mask-repeat; + &:hover { + background-color: @surface1 !important; + color: @text !important; } } - /* -----------------SETTINGS------------------- */ - .content-form .form-row-help-text, - .footnotes { - color: @overlay0; - } - .content-form legend { + .btn-cancel { color: @subtext1; } - .change-username-upsell { + + .dropdown-menu-clickable { background: @mantle; - } - .change-username-faded h2::after { - .mask-image( - url("/static/images/icons/lock_dark_24@2x.a7652d49d507.png"), - @overlay0, - skip, - 24px 24px, - no-repeat, - ); - } - /* -----------CHECKBOXES, DROPDOWNS AND RADIOS---------- */ - .lfm-form-radio input[type="radio"]:checked + label::before { - border-color: @accent; - box-shadow: inset 0 0 0 4px @accent; - background-color: @base; - } - .lfm-form-radio input[type="radio"] + label::before { - background-color: @crust; - border-color: @surface1; - } - .content-form select { - background-image: none; // Tempfix - } + &::before { + filter: @mantle-filter; + } - /* HOME PAGE */ - .main-content, - .container, - .content-top-has-nav .content-top, - .two-column-layout .content-top { - background-color: @base; - } + .dropdown-menu-clickable-item { + color: @text; - .content-top-has-nav .content-top::after, - .two-column-layout .content-top::after { - border-top-color: @accent-dim; - } + &:hover { + background-color: @base !important; + } - .homefeed .content-top .secondary-nav-item-link--active, - .home-welcome-header { - color: @text; + &.dropdown-menu-clickable-item--selected { + color: @accent; + } + } } - .secondary-nav-item-link { + .dropdown-menu-clickable-button { color: @subtext0; - } - .secondary-nav-item-link:focus, - .secondary-nav-item-link:hover, - .homefeed .content-top .secondary-nav-item-link--active, - .homefeed .content-top .secondary-nav-item-link--active:focus, - .homefeed .content-top .secondary-nav-item-link--active:hover { - color: @text; + &:hover, &.disclose-active { + color: @subtext1; + } + + .section-with-settings &.section-control::before { + border-right-color: @surface2; + } + + &::after { + filter: @subtext1-filter; + } } - .homefeed { - .content-top .secondary-nav-item { - &--artists, - &--albums, - &--tracks, - &--events { - .secondary-nav-item-link:hover::after { - background-color: @accent-dim; - } + .content-form { + textarea, input, select { + background-color: @mantle !important; + color: @text !important; + border-color: @surface1 !important; + + &:focus { + box-shadow: 0 3px 9px 0 @surface0 !important; } } - &--artists, - &--albums, - &--tracks, - &--events { - .content-top .secondary-nav-item-link--active::after { - background-color: @accent-dim; + + .lfm-form-radio input[type="radio"] { + + label::before { + background-color: @base; + border-color: @overlay1; + } + &:checked + label::before { + box-shadow: inset 0 0 0 4px @accent; + border-color: @accent; } } - } - .recs-feed .recs-feed, - .grid-items { - &-cover-image-wrap::after { - background-image: linear-gradient( - 180deg, - transparent 0, - fade(@mantle, 40%) 50%, - fade(@mantle, 70%) 50%, - fade(@mantle, 70%) 100% - ); + + .form-row-help-text, .footnotes { + color: @subtext0; } - } - .recs-feed .context { - background: @mantle; - color: @text; - box-shadow: none; - box-shadow: inset 1px 0 darken(@mantle, 3%), inset -1px -1px @crust; - } - .recs-feed .recs-feed-item { - background: transparent; - box-shadow: none; + legend { + color: @subtext1; + } } - .stationlink-list .stationlink { - color: @subtext0; - &:focus, - &:hover { - color: @text; - &::before { - background-color: @subtext0; - } + .search-form { + .search-submit::before { + filter: @overlay0-filter; } + &::after { - border-bottom-color: @accent-dim; + border-right-color: @surface1; } + } + + // Alerts + .alert-warning { + background-color: fade(@peach, 30%); + color: @peach; + &::before { - background-color: @accent; - -webkit-filter: invert(0%); - filter: invert(0%); + filter: @peach-filter; } } - .subscribe-cta, - .mpu-subscription-upsell, - .mpu-subscription-upsell--mpu { - display: none; - } - .join-cta { - background-color: transparent; - } - .join-cta h3 { - color: @accent; + // Modals + .modal-body { + background: @mantle; } - .lazy-features-footer { - display: none; - } - /* ERROR */ - #error { - color: @text; + // Other + + .section-with-separator::after { + background-color: @surface0; } - /* info banner */ - .nag-bar--info { - background-color: @base !important; + .container { + background: @base; } - /* LIVE */ - /* MUSIC */ - .content-top-header { - color: @accent; + .content-top-back-link { + color: @subtext0; + + a::before { + filter: @overlay2-filter; + } } - .minimal-navigation-item-link { - &, - &:focus, - &:hover { + /* Footer */ + .footer { + background: @mantle; + color: @text; + + .footer-heading { color: @subtext0; } - } - .minimal-navigation-item-link--active, - .music-section-heading, - .music-more-artists-item-name a, - .music-releases-item-name a { - &, - &:focus, - &:hover { - color: @text; + .footer-language { + color: @subtext0; + &.footer-language--active { + color: @text; + } } - } - .music-releases-item-artist, - .column-tracks-item-name, - .column-tracks-item-artist, - .music-gallery-artist { - color: @text; - } + .footer-timezone { + color: @subtext0; + strong { + color: @text; + } + } - .music-section-rediscover-subscribe-banner-cta { - background-color: @base; - } + .footer-legal { + color: @subtext1; + } - /* PROFILE */ - /* BANNER */ - .header--overview .header-background { - opacity: 0.4; + .container { + background: none; + } } - /* SEARCH */ - .artist-result-heading, - .album-result-heading { - color: @text; - } + /* Header */ + .top-bar { + background: @mantle; - /* RECOMMENDATIONS */ - .recs-feed-title a { - color: if(@flavor = "latte", @crust, @text) !important; - } - .recs-feed-item, - .recs-feed .recs-feed-item { - &-- { - .category-colors(); + svg { + filter: @accent-filter; } } - @media (min-width: 768px) { - .recs-feed .context::before { - border-radius: 50%; - content: ""; - height: 32px; - left: auto; - position: absolute; - right: 15px; - top: -16px; - width: 32px; - background: var(--category-background) !important; - z-index: 1; - } - .recs-feed .recs-feed-item .context::after { - .mask-image( - url("/static/images/icons/rec_types_16.93a8040cce71.png"), - @crust, - 0 0, - 32px 160px, - no-repeat, - ); - z-index: 2; - } - .recs-feed .recs-feed-item--album .context::after { - -webkit-mask-position: 0 -64px; + .masthead { + .masthead-search-toggle { + &::before { + filter: @text-filter; + } + &::after { + background-color: @text; + } } - .recs-feed .recs-feed-item--artist .context::after { - -webkit-mask-position: 0 -32px; + .masthead-nav .masthead-nav-control { + color: @text; + + &::after { + background-color: @text; + } } - } - .recs-feed .context-love-icon::before { - .mask-image( - url("/static/images/icons/love_12.be2fe9170476.png"), - @red, - 0 0, - 12px 12px, - no-repeat, - ); - } - .secondary-nav { - box-shadow: inset 0 -1px @accent; - } - .music-recommended-artists-artist-name, - .music-recommended-artists-context, - .pagination-page, - .pagination-next { - color: @text; - } - .music-recommended-albums- { - &item-name, - &album-artist, - &album-context { - color: @text; + .auth-avatar-notification-count-badge { + background: @accent; } - } + .auth-dropdown-menu { + background: @mantle !important; - .recommended-tracks-item-name, - .recommended-tracks-item-artist, - .big-tags-item-context { - color: @text; - } + .auth-dropdown-profile { + background-color: @crust; - p { - color: @subtext0; - } + .auth-dropdown-profile-info { + .username { + color: @text; + } + .scrobble-count { + color: @subtext0; + } + } + } + .auth-dropdown-menu-links { + background: @mantle; - /* RECAP PROMOS */ - .promo-v3 .listening-report-promo { - background: @mantle; - border-color: fade(@mantle, 50%); - &:hover, - &:focus { - background: @crust; - border-color: fade(@crust, 50%); - } - &-date::after { - .mask-image( - url("/static/images/listening-report/v3/report-arrow-up.b6c5a2eb4c3b.svg"), - @text, - skip, - contain, - ); - height: 0; - width: 0; - padding: 7px; - filter: none; + .auth-dropdown-menu-item .auth-dropdown-menu-link img { + filter: @text-filter; + } + } + .auth-dropdown-menu-footer { + background: @mantle; + + .auth-upgrade-cta { + background: @mantle; + box-shadow: inset 0 0 0 1px @overlay0; + color: @yellow; + + &:hover { + box-shadow: inset 0 0 0 1px @yellow !important; + color: @yellow !important; + } + } + .auth-logout-cta { + box-shadow: inset 0 0 0 1px @overlay0; + background: @mantle; + color: @text; + } + } } } - /* CHARTS */ - .adaptive-skin-wrapper, - .row { - background-color: @base; - } + .header { + &.header--overview, &.header--sub-page { + color: @text; + } + &.header--overview .container, &.header--sub-page .container { + background: none; + } - .two-column-layout .container { - background-size: 0; - background-position: 0 0; - background-color: @base; - } + background: @base; - ._buffer-reset, - .sidebar-heading { - color: @accent; - } + .header-info { + .header-featured-track { + .featured-item-heading { + color: @subtext1; + } + } - .sidebar-group-heading { - color: @text; - } + .header-title-secondary { + .header-scrobble-since, .header-title-display-name { + color: @subtext1; + } + } - .resource-list--sidebar-item-name { - color: @text; + .header-info-secondary { + color: @text; + } + } } - .js-link-block.globalchart-item { - background-color: @crust; - box-shadow: 0 1px @base, inset 0 -1px @base; + .header-metadata .header-metadata-title { + color: @subtext1; } - .globalchart a, - .globalchart a:focus, - .globalchart a:hover { - color: @text; + .secondary-nav { + .secondary-nav-item-link:hover::after, + .secondary-nav-item-link--active::after { + background: @accent; + } } - .footer-top-row { - background-color: @mantle; - } + .chartlist { + .chartlist-row { + &:hover { + background-color: @surface0; + } - /* EVENTS */ - .events-filter, - .events-filter-recommended, - .dropdown-menu-clickable-button:focus, - .dropdown-menu-clickable-button:hover { - color: @text; - } + &.chartlist-row--highlight, &.chartlist-row--now-scrobbling { + background-color: fade(@accent, 20%); + } - .events-filters { - border-bottom-color: @accent; - } + .chartlist-play { + .chartlist-play-button { + &::before { + background-color: transparent; + filter: @text-filter; + box-shadow: 0 0 0 1px fade(@mantle, 20%); + } + } + } - .events-list-item-venue--address, - .events-list-item-event--lineup { - color: @subtext0; - } - .events-list-anhv1 a, - .events-list-anhv1 a:focus, - .events-list-anhv1 a:hover, - .events-list-item-event--title, - .events-list-item-venue--title { - color: @text; - } + .chartlist-loved { + button.chartlist-love-button { + &::before { + filter: @overlay2-filter; + } + &:hover::before, &[data-analytics-action="UnloveTrack"]::before { + filter: @accent-filter; + } + } + } - /* FEATURES */ - .features-header .features-teaser-body, - .features-teaser-wrap--promoted .features-teaser-body { - background: @base; - } + .lazy-buylinks-toggle, .chartlist-more-button { + &::before { + filter: @overlay2-filter; + } + &:hover::before { + filter: @subtext0-filter; + } + } + .chartlist-more { + .chartlist-more-menu { + .more-item--track::before, + .more-item--artist::before, + .more-item--obsession::before { + filter: @subtext0-filter; + } + .more-item--delete::before { + filter: @red-filter; + } + } + } - .features-teaser-title a, - .features-teaser-title a:focus, - .features-teaser-title a:hover { - color: @text; - } + .chartlist-timestamp { + color: @subtext0; - /* FEATURES POST */ - .features-post-header-body { - background-color: @base; + .chartlist-now-scrobbling::before { + filter: @subtext0-filter; + } + } + + .chartlist-bar { + .chartlist-count-bar-slug { + background-color: transparent !important; + background-image: linear-gradient( + to right, + fade(@accent, 20%), + fade(@accent, 20%) + ); + color: @crust; + } + .chartlist-count-bar-value { + color: @text; + } + } + } + .chartlist-break::after, .chartlist-row::after { + border-bottom-color: @surface1; + } + + .cover-art { + img[src="https://lastfm.freetls.fastly.net/i/u/64s/c6f59c1e5e7240a4c0d427abd71f3dbb.jpg"] { + mix-blend-mode: screen; + filter: invert(1); + } + + &::after { + box-shadow: inset 0 0 0 1px fade(@subtext0, 7%); + } + } + } + #top-tracks { + .section-settings-toggle::before, + .share-chart .share-button-profile::before { + filter: @subtext0-filter; + } } - .features-post-header-title { + /* Track Page */ + .catalogue-metadata .lyrics-snippet-more-link a::before, + .more-link-fullwidth-right a::before, + .more-items::before, + .more-link a::before { + filter: @accent-filter; + } + .more-items { color: @accent; } + .catalogue-tags { + .tag a, .tags-add, .tags-add-cta { + color: @accent; + box-shadow: inset 0 0 0 1px @accent; - .features-post-artist { - color: @text; + &:hover { + color: darken(@accent, 5%) !important; + box-shadow: inset 0 0 0 1px darken(@accent, 5%) !important; + } + } + .tags-add::before { + filter: @accent-filter; + } } - - .features-post-byline-item.features-post-author { - color: @text; + .source-album .source-album-stats, + .about-artist .about-artist-listeners, + .trending-tracks .trending-tracks-item-listeners, + .catalogue-overview-similar-artists-item-aux-text { + color: @subtext1; } - /* PROFILE */ - .header-avatar-add { - &, - &:not(.cta--inactive):focus, - &:not(.cta--inactive):hover { - background-color: @accent-dim; + .trending-tracks-section { + &, .container { + color: @text; + background: @surface0; } } - .dropdown-menu-clickable, - #share-library-artist, - .dropdown-menu-clickable-item:active, - body:not([data-whatinput="touch"]) .dropdown-menu-clickable-item:focus, - body:not([data-whatinput="touch"]) .dropdown-menu-clickable-item:hover { - background-color: @base; - } - .header--overview { - background-color: @base; - } - .header-metadata .header-metadata-title, - .header-scrobble-since, - .header-title-display-name { - color: @subtext1; - } - .chartlist-play-button::before { - background-color: @accent; - -webkit-filter: invert(0%); - filter: invert(0%); - } - .chartlist-play-button:focus:focus::before, - .chartlist-play-button:focus:hover::before, - .chartlist-play-button:hover:focus::before, - .chartlist-play-button:hover:hover::before { - box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); - background-color: @subtext0; - } - .text-Color-link, - h2, - .dropdown-menu-clickable-button.disclose-active { - color: @accent; - } - .dropdown-menu-clickable-button, - .dropdown-menu-clickable-item--selected { - &, - &:focus, - &:hover { - color: @accent; - } - } - .dropdown-menu-clickable-item, - .dropdown-menu-clickable-item:active, - body:not([data-whatinput="touch"]) .dropdown-menu-clickable-item:focus, - body:not([data-whatinput="touch"]) .dropdown-menu-clickable-item:hover { - color: @text; - } - .btn-secondary { - background-color: @accent-dim; - color: @crust; + .stationlink-list .stationlink::after, + .resource-external-link::after, + .play-this-track-playlink::after { + border-bottom-color: @surface1; } - body:not(.js-focus-visible) - body:not([data-whatinput="touch"]) - .btn-secondary:focus, - body:not([data-whatinput="touch"]) .btn-secondary .focus-visible, - body:not([data-whatinput="touch"]) .btn-secondary:hover { - background-color: @accent; - color: @crust; - } - input[type="password"] { - background-color: @crust !important; - border-color: @crust !important; - } + .video-preview-upload-cta { + background: @surface0; + box-shadow: 0 0 0 2px @surface1; - @keyframes chartlist-anim { - 0% { - background-position: 0% 50%; - } - 50% { - background-position: 100% 51%; - } - 100% { - background-position: 0% 50%; - } - } - @keyframes chartlist-anim { - 0% { - background-position: 0% 50%; - } - 50% { - background-position: 100% 51%; + &:hover { + background: @surface1 !important; } - 100% { - background-position: 0% 50%; + + &::before { + filter: @text-filter; } } - @keyframes chartlist-anim { - 0% { - background-position: 0% 50%; - } - 50% { - background-position: 100% 51%; - } - 100% { - background-position: 0% 50%; + + /* Shoutbox */ + #shoutbox { + .shout, + .shout-form { + border-bottom-color: @surface0; } - } - .chartlist-row--highlight, - .chartlist-row--now-scrobbling { - /* background-color: #5a1717; */ - background: linear-gradient(270deg, @base 60%, fade(@accent, 20%)); - background-size: 200% 200%; - -webkit-animation: chartlist-anim 10s ease infinite; - -moz-animation: chartlist-anim 10s ease infinite; - animation: chartlist-anim 10s ease infinite; - } + .shout-list { + .shout-user a { + color: @text; + } + .shout-timestamp { + color: @subtext0; - .chartlist-name, - .chartlist-artist { - color: @subtext0; - } + &:focus, + &:hover { + color: @text !important; + } + } - .chartlist-break::after, - .chartlist-row::after { - border-bottom-color: @surface0; - } + .shout-action, + .shout-reply, + .vote-button { + color: @subtext1; - .chartlist-row:hover { - background-color: @crust; - } + &::before { + filter: @subtext1-filter; + } - .chartlist-count-bar-slug { - background-color: transparent !important; - background-image: linear-gradient(to right, @accent, @accent); - color: @crust; - } - .chartlist-count-bar-value { - color: @crust; - } - a:focus .chartlist-count-bar-slug, - a:hover .chartlist-count-bar-slug { - background-color: @accent-dim; - } + &:focus, + &:hover { + color: @text !important; - .chartlist-count-bar-link { - &, - &:focus, - &:hover { - color: @text; + &::before { + filter: @text-filter; + } + } + } + + .vote-button--voted::before, + .vote-button--unvoted:focus::before, + .vote-button--unvoted:hover::before { + filter: @green-filter !important; + } + + .shout-action-more { + .shout-more-actions { + &::before { + filter: @subtext1-filter; + } + + &:focus::before, + &:hover::before { + filter: @text-filter !important; + } + } + .shout-more-actions-menu { + .more-item--report::before { + filter: @subtext0-filter; + } + } + } } } - .shout-form textarea { - background-color: @crust; + /* Settings */ + .main-content, + .content-top-has-nav .content-top, + .two-column-layout .content-top { + background: @base; } - - .chartlist-index { - color: @text; + .two-column-layout .container, .two-column-layout .main-content { + background-image: none; } - - .chartlist tr:nth-child(1) td.chartlist-index { - color: @accent; + .content-top-has-nav .content-top::after, + .two-column-layout .content-top::after { + border-top-color: @surface1; } - /* LISTENING REPORT */ - - // Set color for containers - - .report-box-container { - background: @mantle; - color: @text; + .change-username-upsell { + background-color: fade(@yellow, 20%); } - // Topmost report box + /* Inbox/Notifications */ + .inbox-notifications { + .inbox-notifications__item--hover { + box-shadow: inset 0 -1px @surface1; - .report-box-container--overview { - background: @accent; - color: @base; - // Top border design (////) - .report-headline-border { - .mask-image( - url("/static/images/listening-report/v3/bg-lines.73682e46b8be.svg"), - ); - background: @base; - } - .report-headline-top { - color: @base; - border-bottom-color: @base; - } - // Comparison badge colors - .report-headline-meta - .badge-container - .report-badge.report-badge--comparison { - border-color: @base; - .report-arrow { - background: @base; + &:hover { + background-color: @surface0 !important; } } - // Topmost report chart styling - .report-headline__chart { - .highcharts-series-0 .highcharts-point { - fill: @base; - stroke: fade(@base, 50%); - } - .highcharts-series-1 .highcharts-point { - fill: fade(@base, 50%); - stroke: transparent; - } - .highcharts-axis-labels { - stroke: @base; - } + .inbox-notifications__item--highlight-hover { + background-color: @surface1; + } + .inbox-notifications__item-timestamp { + color: @subtext0; } } - // Middle report containers - .user-dashboard-layout--version-3 .main-content, - .user-dashboard-layout--version-3 .user-dashboard > .container { - // Set background - background: @base; - .listening-report-row { - // Header divider colors follow accent - border-bottom-color: @accent; - } - .top-item-overview { - // Style category boxes - &-- { - .category-colors(); + .inbox .inbox-buttons .inbox-compose-button { + .btn-primary(); + } + + /* Home */ + .secondary-nav-item-link { + &--active::after { + .homefeed--artists .content-top & { + background-color: @yellow; } - background: var(--category-background); - color: @base; - // Badge color is base on accent - .badge-container { - .report-badge { - border-color: @base; - } - .report-badge--comparison .report-arrow { - background: @base; - } + .homefeed--albums .content-top & { + background-color: @green; + } + .homefeed--tracks .content-top & { + background-color: @blue; } - // Chart styling - .highcharts-series-group .highcharts-point { - fill: @base; + .homefeed--events .content-top & { + background-color: @mauve; } } - // Set color for badges - .listening-report-top-item { - &-- { - .category-colors(); + &:hover::after { + .homefeed .content-top .secondary-nav-item--artists & { + background-color: @yellow; } - .listening-report-top-item-badge { - background: var(--category-background); + .homefeed .content-top .secondary-nav-item--albums & { + background-color: @green; } - color: @text; - } - .top-new-item-type { - &__ { - .category-colors(); + .homefeed .content-top .secondary-nav-item--tracks & { + background-color: @blue; } - background: var(--category-background); - } - // Triangle visualizer comparison subtext - .triangle-ratio--details .comparison { - color: @subtext0; - } - // Style badges on mantle background - .badge-container .report-badge--comparison { - border-color: @text; - .report-arrow { - background: @text; - vertical-align: initial; + .homefeed .content-top .secondary-nav-item--events & { + background-color: @mauve; } } - // Style subtext - .quick-fact-row { - color: @subtext1; - &:hover { + } + .recs-feed { + .recs-feed-item { + .recs-feed-cover-image-wrap { color: @text; } - } - .listening-report-highlight-comparison, - .quick-fact-comparison-text { - color: @subtext0; - } - // User comparison icons - .tag-label { - background: linear-gradient( - 90deg, - darken(@accent, 5%), - @accent - ); - // Total scrobbles header - &--total-scrobbles::before { - .mask-image( - url("/static/images/icons/icon-scrobble.66a5e6978c62.svg"), - @base, - ); - } - // Highest discovery header - &--discovery::before { - .mask-image( - url("/static/images/icons/icon-compass.ce30ab3b6240.svg"), - @base, - ); - } - } - .header-metadata-title { - color: @text; - } - .listening-report-brick { - &-divider { - border-color: @surface0; + + .recs-feed-playlink::before { + background-color: @text; } - &-head { - border-bottom-color: @crust; + + &.recs-feed-item--artist .context { + &::before { + background-color: @yellow; + } + &::after { + mask-position: 0 -32px; + } } - &-inner:hover { - background: mix(@mantle, @base); + &.recs-feed-item--track .context { + &::before { + background-color: @blue; + } + &::after { + mask-position: 0 -96px; + } } - &-item-scrobbles { - color: @overlay1; + &.recs-feed-item--album .context { + &::before { + background-color: @green; + } + &::after { + mask-position: 0 -64px; + } } - // Highlight self for higher or lower position on chart - &-inner--highlight { - &.listening-report-highlight--down { - background: fade(@red, 10%); - &:hover { - background: fade(@red, 15%); - } + .context { + // Hack using .mask-image() to allow us to mask icons with a background. + &::before { + border-radius: 50%; + content: ""; + height: 32px; + left: auto; + position: absolute; + right: 15px; + top: -16px; + width: 32px; + z-index: 1; } - &.listening-report-highlight--up { - background: fade(@green, 10%); - &:hover { - background: fade(@green, 15%); - } + &::after { + .mask-image( + url("/static/images/icons/rec_types_16@2x.5bf9cfd03a3e.png"), + @crust, + 0 0, + 32px 160px, + no-repeat, + ); + z-index: 2; } + + color: @subtext1; + background-color: @surface0; + box-shadow: inset 1px 0 @surface1, inset -1px -1px @surface1; } } } - // footer - .user-dashboard-layout--version-3 .footer { - background-color: @mantle; + // Events - Browse Popular Music (no event recommendations) + .no-data-message-button { + .btn-primary(); } - // Top tags visualizer: Rainbow colors implemented from Catppuccin Palette - - @gradient-colors: - @rosewater, - @flamingo, - @pink, - @mauve, - @red, - @maroon, - @peach, - @yellow, - @green, - @teal, - @sky, - @sapphire, - @blue, - @lavender; - each( - range(0, 11), - { - .report-box-container--top-tags-over-time - .top-tags-over-time-colour-@{value} { - fill: extract(@gradient-colors, @value + 1); - stroke: extract(@gradient-colors, @value + 1); - } + .stationlinks { + .stationlink-list .stationlink::before { + background-color: @text; } - ); - - .highcharts-radial-axis-grid .highcharts-grid-line { - stroke: @surface0; } - - // universal report arrows - .report-arrow { - .mask-image( - url("/static/images/listening-report/v3/report-arrow-up.b6c5a2eb4c3b.svg"), - @base, - skip, - contain, - ); - background-size: contain; - padding: 4px; - margin: 2px; - height: 0; - width: 0; - filter: invert(0) !important; + .mpu-subscription-upsell { + color: @subtext0; } - - .music-decades-chart-container { - .highcharts-series-1 .highcharts-point { - fill: fade(@accent, 50%); - } + .subscribe-cta { + background-color: fade(@yellow, 10%); } - /* SHOUT BOX */ + .subscribe-cta a, .btn-subscribe { + background-color: @yellow; + color: @crust; - .shout { - &--active { - background-color: fade(@surface1, 70%); + &:hover { + background-color: darken(@yellow, 5%) !important; + color: @crust !important; } + } - &, - &-form { - border-bottom-color: @surface0; - } - &-user a { - color: @text; - } - &-timestamp, - &-reply { - color: @subtext0; - &:hover { - color: @overlay2; - } - } - &-reply::before { - .mask-image( - url("/static/images/icons/reply_sprite_16@2x.a145ef7db2f5.png"), - @subtext0, - skip, - 16px 32px, + /* Profile */ + .profile-cards-items { + .profile-card .profile-card-content { + background: linear-gradient( + 90deg, + @surface0 185px 80%, + fade(@surface0, 75%) 95%, + transparent ); - } - &-form { - border-color: none; - } - &-permalink.shout-permalink { - &:focus, - &:hover { - color: @overlay2; - } - } - .vote-button { - color: @overlay1; - &::before { - .mask-image( - url("/static/images/icons/upvote_sprite_16@2x.5e02a31189da.png"), - @overlay2, - 0 0, - 16px 32px, - ); + .profile-card-content-title { + color: @text; } - &--voted { - color: @green; - &::before { - .mask-image(skip, @green, 0 -16px, skip); - } + p { + color: @subtext1; } } } - /* LIBRARY */ - .col-sidebar._buffer-sidebar - > figure - > div - > div - > svg - > .highcharts-background { - fill: @base; - } + /* Reports */ + .listening-report-promo { + background-color: @surface0 !important; + border-color: @surface1 !important; - .highcharts-point { - fill: @accent-dim; - &-select { - fill: @accent; + .listening-report-promo-date::after { + filter: @overlay2-filter; } - } - - .highcharts-axis-labels > text { - fill: @text !important; - } - #scrobble-chart-content { - .highcharts-background { - fill: @base; - } - .highcharts-point { - fill: fade(@accent, 20%); - } - .highcharts-xaxis .highcharts-axis-line, - .highcharts-yaxis-grid .highcharts-grid-line { - stroke: @surface2; - stroke-width: 1; - } - .highcharts-axis-title { - fill: @subtext0 !important; + .listening-report-promo-title { + color: @subtext0; } } - /* FOLLOWING */ - .user-list-name { - color: @text; - } - .user-follow, - .user-follow::after { - color: @accent; - background-color: @surface0; - } - - /* FOLLOW BUTTON */ - [data-toggle-button-current-state="unfollowed"] - .header-follower-btn::before { - background-color: @red; - color: @text; - } - [data-toggle-button-current-state="followed"] .header-follower-btn::before { - background-color: @green; - color: @text; - } - [data-toggle-button-current-state="followed"] - .header-follower-btn:hover::before { - background-color: @red; - color: @text; - } - - .header-follower-btn { - color: @accent; - } - - /* BOOKMARKS */ - .music-bookmarks-artists-item-name { - color: @text; - } - - /* TASTE-O-METER COLORS */ - .tasteometer-donut-base { - fill: @surface1; - } - .tasteometer-avatar img { - border-color: @surface1; - } - .tasteometer-compat-very_low .tasteometer-compat-colour { - color: @subtext0; - fill: @subtext0; - } - .tasteometer-compat-low .tasteometer-compat-colour { - color: @mauve; - fill: @mauve; - } - .tasteometer-compat-medium .tasteometer-compat-colour { - color: @green; - fill: @green; - } - .tasteometer-compat-very_high .tasteometer-compat-colour { - color: @peach; - fill: @peach; - } - .tasteometer-compat-super .tasteometer-compat-colour { - color: @red; - fill: @red; - } + /* Library */ + .library-controls { + .secondary-nav-item .secondary-nav-item-link { + &::before { + filter: @text-filter; + } + &--active, &:hover { + color: @accent; - /* ARTIST */ - .section-with-separator::after { - background-color: @base; - } - body .header-new-bookmark-button, - body .header-new-download-button, - body .header-new-love-button, - body .header-new-more-button { - color: @base; - background-color: @accent; - } - body:not([data-whatinput="touch"]) { - .header-new-bookmark-button, - .header-new-download-button, - .header-new-love-button, - .header-new-more-button { - .focus-visible, - &:hover { - color: @base; - background-color: @accent; + &::before { + filter: @accent-filter; + } } } } - .wiki-block-inner, - .catalogue-metadata-heading, - .catalogue-metadata-description, - .header-metadata-tnew-title { - color: @subtext0; - } - - .text-18 { - color: @accent; - } + .library-controls-datepicker { + .date-range-picker-button { + color: @accent; - .artist-similar-artists-sidebar-item-name, - .artist-top-albums-item-name, - .listeners-section-item-name, - .catalogue-overview-similar-artists-full-width-item-name, - .similar-albums-item-name, - .discovery-stat-top-item-name, - .source-album-artist, - .source-album-name, - .track-similar-tracks-item-name, - .about-artist-name, - .catalogue-overview-similar-artists-item-name { - a { - &, - &:focus, - &:hover { - color: @text; + &::before, .date-range-picker-button-inner::before { + filter: @accent-filter; } } } + .date-range-picker-content { + background-color: @mantle; - .events-list-item-event-name.link-block-target > span { - color: @text; - } - - .events-list-item-venue > span { - color: @subtext0; - } - - .resource-external-link, - .resource-external-link:hover { - color: @text; - } - .js-playlink-station.desktop-playlink.inline-section-control.stationlink { - color: @text; - } - .section-with-settings .section-control::before { - border-right-color: @subtext0; - } - - .header-metadata .header-metadata-display a { - color: @accent; - } - - .big-artist-list-title a { - color: var(--subtext1); - } - .big-artist-list-title a:hover { - color: @text; - } - - /* SIMILAR ARTISTS */ - .similar-artists-item-name { - color: @text; - } - - .similar-artists-item-wiki-inner-2 { - color: @subtext0; - } - - .section-playlink::before { - background-color: @accent; - -webkit-filter: invert(0%); - filter: invert(0%); - } - - .section-playlink:hover::before { - box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); - background-color: @subtext0; - } - - .section-playlink.js-playlink-station { - color: @text; - } - - .stationlink::before { - background-color: @accent; - -webkit-filter: invert(0%); - filter: invert(0%); - } - - .stationlink:focus::before, - .stationlink:hover::before { - box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); - background-color: @subtext0; - } - - .video-preview-upload-cta { - background-color: @crust; - box-shadow: 0 0 0 2px @accent-dim; - } - - .video-preview-upload-cta:not(.cta--inactive):focus, - .video-preview-upload-cta:not(.cta--inactive):hover { - background-color: @base; - } - - .highcharts-plot-bands-0 > path { - fill: @overlay0; - } - - .listener-trend .highcharts-area { - fill: fade(@red, 90%); - } - - .listener-trend .highcharts-graph { - stroke: @red; - } - - .Colored-cta { - background-color: fade(@surface2, 70%); - } - .Colored-cta:not(.cta--inactive):focus, - .Colored-cta:not(.cta--inactive):hover { - background-color: fade(@surface2, 30%); - } - .similar-items-sidebar-item-name { - color: @text; - } - .resource-list--release-list-item-name { - color: @text; - } - .shout--deleted, - .shout--reported { - background: @base; - } - .play-this-track-playlinks { - color: @text; - } + &::before { + filter: @mantle-filter; + } - /* WIKI */ - .factbox-item, - #factbox-more-members { - color: @subtext0; - } + .date-range-picker-presets a { + color: @text; - .factbox-item > h4 { - color: @accent; - } + &:hover { + background-color: @surface0 !important; + } + } - .alert-warning { - color: @peach; - background-color: @crust; - } + .date-range-picker-form { + border-top-color: @surface1; - .content-form { - .form-control, - input[type="date"], - input[type="email"], - input[type="number"], - input[type="password"], - input[type="text"], - input[type="url"], - select, - textarea { - background-color: @crust !important; - border-color: @crust !important; - color: @subtext0 !important; - &:focus { - box-shadow: none !important; - border-color: @crust !important; - } - &:hover:not([disabled]) { - border-color: @crust !important; - color: @text !important; + .control-label { + color: @subtext1; } } } - .control-label { - color: @accent; - } - .join-form .form-row-help-text { - color: @text; - background-color: @surface1; - } - #stylerules { - background-color: @overlay0; - color: @subtext0; - } - .secondary-nav-item-link--active::after, - a.secondary-nav-item-link:focus::after, - a.secondary-nav-item-link:hover::after { - background-color: @accent; - } - - /* DOCUMENTATION/API SECTION */ - #app { - .sidebar { - background: @mantle; - border-color: @mantle; + #scrobble-chart-content { + .highcharts-background { + fill: @base !important; } - a.sidebar-link { - color: @text; - &:hover { - color: @accent; - } + .highcharts-axis-title { + fill: @subtext1 !important; } - .sidebar-heading { - color: @subtext1; + .highcharts-axis-labels text { + fill: @subtext0 !important; } - a.sidebar-link.active { - color: @accent; - border-left-color: @accent; + + .highcharts-yaxis-grid .highcharts-grid-line { + stroke: @overlay0 !important; } - a { - color: @accent; + .highcharts-xaxis .highcharts-axis-line { + stroke: @overlay1 !important; } - } - - /* OBSESSIONS */ - .obsession-history-play-all::before { - background-color: @accent; - -webkit-filter: invert(0%); - filter: invert(0%); - color: @text; - } - - .obsession-history-play-all.js-playlink-station.inline-section-control { - color: @text; - } - - .obsession-history-play-all:hover::before { - box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); - background-color: @subtext0; - } - - .obsession-search-result-header { - color: @accent; - } - - .obsession-candidate-heading { - color: @text; - } - - .modal-dialog.popup_content, - .modal-content { - background-color: @mantle; - box-shadow: none; - } - - .modal-body { - background-color: @base; - box-shadow: none; - } - - .content-form textarea:focus { - box-shadow: none; - } - - .content-form textarea:hover:not([disabled]) { - border-color: @accent; - } - - /* MESSAGES */ - .inbox-notifications .inbox-notifications__item { - color: @subtext0; - } - - .inbox-notifications .inbox-notifications__item--highlight { - background-color: @overlay0; - } - .inbox-notifications .inbox-notifications__item--hover { - box-shadow: none; - } - .inbox-notifications__item--highlight-hover:hover { - background-color: @crust; - } - - .inbox-message-subject { - color: @accent; - } - - .inbox-message-message { - color: @text; - } - - .inbox-message-view .inbox-message-message blockquote { - background: @crust; - border-color: @accent; - } - - body:not([data-whatinput="touch"]) - .inbox-notifications - .inbox-notifications__item--hover:hover { - background-color: @crust; - } - - .inbox .inbox-message { - background-color: @crust; - } - - .inbox .inbox-message--unviewed { - background-color: @overlay0; - } - .inbox .inbox-message--unviewed .inbox-message-status::after { - background-color: @accent; - } + .highcharts-series-group { + .highcharts-point { + fill: fade(@accent, 30%); + } + } - /* ADS */ - .lastfm-ad { - display: none; - } - .full-bleed-ad-container, - .sidebar-ad-container { - background-color: @base; - } + .highcharts-tooltip { + .highcharts-tooltip-box:not(.highcharts-shadow) { + fill: @mantle !important; + stroke: @surface0 !important; + } - /* RECOMMENDATIONS ON PROFILE */ - .profile-card-content { - background: @surface0 !important; - } - /* UPGRADE TO PRO */ - .btn-subscribe, - .btn-subscribe:hover, - .btn-subscribe:active { - background-color: @accent !important; - } - .listening-report-brick--upsell { - display: none; - } - .your-progress { - color: @text; - } - /* ----Profile Cards Hide------- */ - .profile-cards-container { - display: none !important; - } - /* HEADER */ - .header--overview, - .header--sub-page { - color: @text; - } - /* -----Primary Button------ */ - .btn-primary, - .btn-primary:hover, - .btn-primary:active, - .no-data-message-button, - .no-data-message-button:hover, - .no-data-message-button:active, - .api-session-connect, - .api-session-disconnect:hover, - .api-session-disconnect:active, - .clipboard-button, - body:not(.js-focus-visible) - body:not([data-whatinput="touch"]) - .clipboard-button:focus, - body:not([data-whatinput="touch"]) .clipboard-button .focus-visible, - body:not([data-whatinput="touch"]) .clipboard-button:hover { - background-color: @accent !important; - color: @base !important; - } - .api-session-disconnect { - background-color: @accent-dim !important; - color: @base !important; - } - /* -----Shortcut Button------ */ - .btn-shortcut, - .btn-shortcut:hover, - .btn-shortcut:active { - background-color: @accent-dim !important; - color: @text !important; - } - /* ------HEADER----- */ - header { - background: @mantle; - } - /* ------FOOTER----- */ - .footer .footer-heading { - color: @subtext1; - } - .footer { - background-color: @mantle; - color: @text; - } - .footer .footer-bottom { - border-top-color: none; - } - .footer .footer-bottom .row { - background-color: @mantle; - } - .footer .footer-language--active, - .footer-timezone strong, - .footer .footer-language--active strong { - color: @text; - } - .footer .footer-language, - .footer-timezone, - .footer .footer-legal { - color: @overlay0; - } - .translation { - color: @subtext0; - } - /* --------TOP BAR---------- */ - .top-bar, - .player-bar, - .player-bar .player-bar-progress, - .main-content::before, - .masthead-nav { - background: @mantle; - color: @text !important; - } - .player-bar .player-bar-progress-slug { - background: @accent; - } - .masthead-nav-control, - .site-auth-control, - .site-auth--anon::before, - .masthead-nav .navlist-more { - color: @text !important; - } - .masthead-nav .masthead-nav-control::after { - background: @accent; - } - .auth-dropdown-menu { - background-color: @base !important; - box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3), 0 0 0 1px @surface1 !important; - } - .auth-dropdown-menu-item { - color: @text !important; - } - .auth-dropdown-menu-item:hover, - .auth-dropdown-menu-item:active { - background-color: @surface0 !important; - color: @text !important; - } - .auth-dropdown-menu::before, - .js .auth-dropdown-menu::before, - .site-auth:focus .auth-dropdown-menu::before, - .site-auth:hover .auth-dropdown-menu::before { - .mask-image( - url("/static/images/dropdown_arrow_dark@2x.7b7cfaa4e8ee.png"), - @surface1, - skip, - 36px 18px, - no-repeat, - ); - } - .masthead-nav .masthead-nav-control, - .masthead-nav .navlist-more, - .site-auth-control { - &:focus, - &:hover { - background-color: transparent; - color: @accent !important; + text { + fill: @text !important; + } } } - .site-auth-control.btn-secondary { - color: @base !important; - } - .masthead-search-form { - background-color: @mantle; - } - .masthead-search-submit { - background-color: @accent; - color: @base; - } - body:not(.js-focus-visible) - body:not([data-whatinput="touch"]) - .masthead-search-submit:focus, - body:not([data-whatinput="touch"]) .masthead-search-submit .focus-visible, - body:not([data-whatinput="touch"]) .masthead-search-submit:hover { - background-color: @accent; - color: @base; - } - .masthead-search-field { - color: @text; + .metadata-title { + color: @subtext1; } - /* -------PLAYLISTS--------- */ - .chartlist-timestamp { + .date-heading { color: @subtext0; } - /* -----GENRES TODAY----- */ - .genretodaybar, - .rolling_no { - background: @mantle !important; - } - /* -----NAV ITEMS----- */ - .library-controls .secondary-nav .secondary-nav-item-link--active, - .date-range-picker-button-inner, - .library-controls .secondary-nav .secondary-nav-item-link--active:focus, - .library-controls .secondary-nav .secondary-nav-item-link--active:hover, - body:not([data-whatinput="touch"]) .catalogue-tags .tag a:hover { - color: @accent !important; - } - /* ------ARTIST TAGS----- */ - .catalogue-tags .tag a, - .catalogue-tags .tags-add, - .catalogue-tags .tags-add-cta, - body:not([data-whatinput="touch"]) .catalogue-tags .tag a:hover { - color: @accent; - box-shadow: inset 0 0 0 1px @accent-dim; - } - /* -----HIDE PLAY BUTTON ON TOP TRACK------ */ - .image-overlay-playlink-link::before { - display: none; - } - /* ---------CHARTS FIX--------- */ - .globalchart .globalchart-item:first-child { - background-color: fade(@mantle, 20%); - } - .globalchart-item:first-child .globalchart-rank { - color: @accent !important; - } - .globalchart-item .globalchart-rank { - color: @text; - } - /* -------LOG IN PAGE------- */ - .auth-container > .auth-container-animation { - background-color: transparent; - } - #join-animation-container { - display: none !important; - } - h1.text-24 { - color: @accent; - } - .checkbox { - color: @text; - } - - /* ----ICONS---- */ - .lazy-buylinks-toggle::before { - .mask-image( - url("/static/images/icons/download_sprite_16.2d7999c89e09.png"), - @text, - ); - } - .chartlist-more-button::before { - .mask-image( - url("/static/images/icons/more_sprite_16.bceb4a93c77a.png"), - @text, - ); + // Pagination + .pagination { + .pagination-page { + &[aria-current] { + color: @accent; + box-shadow: inset 0 -2px @accent; + } + &:not(.pagination-page--ellipsis):hover { + box-shadow: inset 0 -2px @accent; + } + } } - .lazy-buylinks-toggle:hover::before, - .lazy-buylinks-toggle:focus::before, - .chartlist-more-button:hover::before, - .chartlist-more-button:focus::before { - background-color: @subtext0; + /* Followers */ + .text-light { + color: @subtext1; } + .user-list-follower-btn { + [data-toggle-button-current-state="followed"] & { + background-color: @green; - .chartlist-love-button, - .header-new-love-button { - &::before { - .mask-image( - url("/static/images/icons/love_animation_tracklist_24.3c884b0287d4.png"), - @text, - -24px 0, - ); - } - &:focus::before, - &:hover::before { - .mask-image(skip, @red, -24px 0); + &:hover { + background-color: @red !important; + } } - } + [data-toggle-button-current-state="unfollowed"] & { + background-color: @accent; - [data-toggle-button-current-state="loved"] .chartlist-love-button, - [data-toggle-button-current-state="loved"] .header-new-love-button { - &::before, - &:focus::before, - &:hover::before { - .mask-image(skip, @red, -552px 0); - transition: mask-position 0.7s steps(22) !important; - -webkit-transition: -webkit-mask-position 0.7s steps(22) !important; + &:hover { + background-color: darken(@accent, 5%) !important; + } } - } - - .section-settings-toggle::before { - .mask-image( - url("/static/images/icons/settings_222_16.f63779d3cbad.png"), - @text, - ); - } - .share-button-profile::before { - .mask-image( - url("/static/images/icons/share_222_16.9aba752fb1e9.png"), - @text, - ); - } - - .section-settings-toggle:hover::before, - .section-settings-toggle:focus::before, - .share-button-profile:hover::before, - .share-button-profile:focus::before { - background-color: @subtext0; - } - - .cta-link::before, - .lyrics-snippet-more-link ::before, - .trending-tracks-more-link ::before, - .more-link-fullwidth-right ::before { - .mask-image( - url("/static/images/icons/arrow_small_right_005399_12.8f025ef116be.png"), - @accent, - ); - } - - .play-this-track-playlink--itunes::before { - .mask-image( - url("/static/images/icons/apple_music_color_24.17c0b1b9e185.png"), - @text, - ); - } - - .resource-external-link--homepage::before { - .mask-image( - url("/static/images/icons/external_links_16.3d45e81fa3fc.png"), - @text, - ); - } - - .alert-warning::before { - .mask-image( - url("/static/images/icons/alert/warning_16.93f2fe437139.png"), - @peach, - ); - } - - .masthead-search-toggle { &::before { - .mask-image( - url("/static/images/icons/search_16.bde37072495a.png"), - @text, - ); - } - &::after { - background: @text; - } - } - - .masthead-search-toggle:hover::before, - .masthead-search-toggle:focus::before { - background-color: @subtext0; - } - - .masthead-search-toggle.disclose-active::before { - .mask-image( - url("/static/images/icons/delete_999_24.78e2a3de3ab8.png"), - @text, - ); - } - - .masthead-search-toggle.disclose-active:hover::before, - .masthead-search-toggle.disclose-active:focus::before { - background-color: @subtext0; - } - - .js .date-range-picker-button::before { - .mask-image( - url("/static/images/icons/date_picker_icon.1d7b21ee3a36.svg"), - @accent, - 0 0, - 14px 24px, - no-repeat, - ); - } - - .page-loading-logo-container { - svg path { - fill: @red; - stroke: @red; + filter: @crust-filter; } } - .catalogue-tags .tags-add::before { - .mask-image( - url("/static/images/icons/add_link_16.637996ed0e2f.png"), - @accent, - ); + /* Obsessions */ + .obsession-candidates-row::before { + border-top-color: @surface1; } - .layout-image { - background: @crust; - .layout-image-image { - mix-blend-mode: screen; - } - } + // TODO: https://www.last.fm/music + // TODO: https://www.last.fm/user/*/listening-report/week (Reports) } } -#rgbify(@color) { - @rgb: red(@color) green(@color) blue(@color); +// Usage: +// .maskimage(mask-image, background-color, mask-position, mask-size, mask-repeat); +// Setting any value to "skip" skips that attribute. +// We cannot apply filters to psuedo elements with background-images when the pseudo element also has a background(-color), which is when this must be used. +.mask-image( + @mask-image: url(""), + @mask-color: skip, + @mask-position: skip, + @mask-size: skip, + @mask-repeat: skip, +) { + & when not(@mask-color = skip) { + background-image: none !important; + background-color: @mask-color; + } + & when not(@mask-image = skip) { + mask-image: @mask-image; + } + & when not(@mask-position = skip) { + mask-position: @mask-position; + } + & when not(@mask-size = skip) { + mask-size: @mask-size; + } + & when not(@mask-repeat = skip) { + mask-repeat: @mask-repeat; + } } diff --git a/styles/learn-x-in-y-minutes/catppuccin.user.less b/styles/learn-x-in-y-minutes/catppuccin.user.less index 04f9333c50..966ed644db 100644 --- a/styles/learn-x-in-y-minutes/catppuccin.user.less +++ b/styles/learn-x-in-y-minutes/catppuccin.user.less @@ -2,7 +2,7 @@ @name Learn X in Y Minutes Catppuccin @namespace github.com/catppuccin/userstyles/styles/learn-x-in-y-minutes @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/learn-x-in-y-minutes -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/learn-x-in-y-minutes/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alearn-x-in-y-minutes @description Soothing pastel theme for Learn X in Y Minutes @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("learnxinyminutes.com") { @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); diff --git a/styles/lemmy/catppuccin.user.less b/styles/lemmy/catppuccin.user.less index f64f24246e..2f4fb1752c 100644 --- a/styles/lemmy/catppuccin.user.less +++ b/styles/lemmy/catppuccin.user.less @@ -2,7 +2,7 @@ @name Lemmy Catppuccin @namespace github.com/catppuccin/userstyles/styles/lemmy @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/lemmy -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/lemmy/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alemmy @description Soothing pastel theme for Lemmy @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("lemmy.ml"), domain("lemmy.world") { :root { diff --git a/styles/libreddit/catppuccin.user.less b/styles/libreddit/catppuccin.user.less index 9be86d8ca4..9400034e0d 100644 --- a/styles/libreddit/catppuccin.user.less +++ b/styles/libreddit/catppuccin.user.less @@ -2,7 +2,7 @@ @name Libreddit/Redlib Catppuccin @namespace github.com/catppuccin/userstyles/styles/libreddit @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/libreddit -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/libreddit/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alibreddit @description Soothing pastel theme for Libreddit and Redlib @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("libredd.it"), domain("libreddit.spike.codes"), diff --git a/styles/lichess/catppuccin.user.less b/styles/lichess/catppuccin.user.less index b8b8e0cadb..581db63cbd 100644 --- a/styles/lichess/catppuccin.user.less +++ b/styles/lichess/catppuccin.user.less @@ -2,7 +2,7 @@ @name Lichess Catppuccin @namespace github.com/catppuccin/userstyles/styles/lichess @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/lichess -@version 2025.09.11 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/lichess/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alichess @description Soothing pastel theme for Lichess @@ -20,7 +20,7 @@ @var checkbox styleBoard "Style Board" 1 ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("lichess.org") { :root:has(body[data-theme="light"]) { @@ -326,6 +326,11 @@ } } & when (@stylePieces = 1) { + @w-piece-fill: if(@flavor = latte, @mantle, @text); + @b-piece-fill: if(@flavor = latte, @text, @mantle); + @w-piece-stroke: if(@flavor = latte, @text, @mantle); + @b-piece-stroke: if(@flavor = latte, @mantle, @text); + .is2d .pawn { #piece(@f, @s) { @svg: escape( @@ -334,10 +339,10 @@ background-image: url("data:image/svg+xml,@{svg}") !important; } &.black { - #piece(@base, @text); + #piece(@b-piece-fill, @b-piece-stroke); } &.white { - #piece(@text, @base); + #piece(@w-piece-fill, @w-piece-stroke); } } .is2d .bishop { @@ -348,24 +353,24 @@ background-image: url("data:image/svg+xml,@{svg}") !important; } &.black { - #piece(@base, @text); + #piece(@b-piece-fill, @b-piece-stroke); } &.white { - #piece(@text, @base); + #piece(@w-piece-fill, @w-piece-stroke); } } .is2d .knight { #piece(@f, @s) { @svg: escape( - '' + '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } &.black { - #piece(@base, @text); + #piece(@b-piece-fill, @b-piece-stroke); } &.white { - #piece(@text, @base); + #piece(@w-piece-fill, @w-piece-stroke); } } .is2d .rook { @@ -376,38 +381,38 @@ background-image: url("data:image/svg+xml,@{svg}") !important; } &.black { - #piece(@base, @text); + #piece(@b-piece-fill, @b-piece-stroke); } &.white { - #piece(@text, @base); + #piece(@w-piece-fill, @w-piece-stroke); } } .is2d .king { #piece(@f, @s) { @svg: escape( - '' + '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } &.black { - #piece(@base, @text); + #piece(@b-piece-fill, @b-piece-stroke); } &.white { - #piece(@text, @base); + #piece(@w-piece-fill, @w-piece-stroke); } } .is2d .queen { - &.black { + #piece(@f, @s) { @svg: escape( - '' + '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } + &.black { + #piece(@b-piece-fill, @b-piece-stroke); + } &.white { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; + #piece(@w-piece-fill, @w-piece-stroke); } } } diff --git a/styles/lingva/catppuccin.user.less b/styles/lingva/catppuccin.user.less index 15041b059d..5b101d12cd 100644 --- a/styles/lingva/catppuccin.user.less +++ b/styles/lingva/catppuccin.user.less @@ -2,7 +2,7 @@ @name Lingva Catppuccin @namespace github.com/catppuccin/userstyles/styles/lingva @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/lingva -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/lingva/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alingva @description Soothing pastel theme for Lingva @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("lingva.ml"), domain("translate.plausibility.cloud"), diff --git a/styles/linkedin/catppuccin.user.less b/styles/linkedin/catppuccin.user.less index 8c4428b84d..d9092f48b1 100644 --- a/styles/linkedin/catppuccin.user.less +++ b/styles/linkedin/catppuccin.user.less @@ -2,7 +2,7 @@ @name LinkedIn Catppuccin @namespace github.com/catppuccin/userstyles/styles/linkedin @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/linkedin -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/linkedin/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alinkedin @description Soothing pastel theme for LinkedIn @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("www.linkedin.com") { :root:not(.theme--dark, .theme--mercado-dark) { diff --git a/styles/listenbrainz/catppuccin.user.less b/styles/listenbrainz/catppuccin.user.less index f1872cf8ca..1e78ed86a6 100644 --- a/styles/listenbrainz/catppuccin.user.less +++ b/styles/listenbrainz/catppuccin.user.less @@ -2,7 +2,7 @@ @name ListenBrainz Catppuccin @namespace github.com/catppuccin/userstyles/styles/listenbrainz @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/listenbrainz -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/listenbrainz/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alistenbrainz @description Soothing pastel theme for ListenBrainz @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("listenbrainz.org") { :root { diff --git a/styles/lobste.rs/catppuccin.user.less b/styles/lobste.rs/catppuccin.user.less index 167563f544..d9dd96875c 100644 --- a/styles/lobste.rs/catppuccin.user.less +++ b/styles/lobste.rs/catppuccin.user.less @@ -2,7 +2,7 @@ @name Lobsters Catppuccin @namespace github.com/catppuccin/userstyles/styles/lobste.rs @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/lobste.rs -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/lobste.rs/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alobste.rs @description Soothing pastel theme for Lobsters @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("lobste.rs") { html:has(head > link[rel="stylesheet"][href^="/assets/system-"]) { diff --git a/styles/mastodon/catppuccin.user.less b/styles/mastodon/catppuccin.user.less index 6c8d21c59f..de44ff13be 100644 --- a/styles/mastodon/catppuccin.user.less +++ b/styles/mastodon/catppuccin.user.less @@ -2,7 +2,7 @@ @name Mastodon Catppuccin @namespace github.com/catppuccin/userstyles/styles/mastodon @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/mastodon -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/mastodon/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amastodon @description Soothing pastel theme for Mastodon @@ -15,738 +15,107 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; -@-moz-document domain("mastodon.social"), - domain("social.catppuccin.com"), - domain("fosstodon.org") { - .theme-mastodon-light, - .skin-modern-light, - .skin-mastodon-light { +@-moz-document domain("mastodon.social"), domain("fosstodon.org") { + [data-color-scheme="light"] { #catppuccin(@lightFlavor); } - - .theme-contrast, - .skin-modern-dark, - .skin-contrast { + [data-color-scheme="dark"] { #catppuccin(@darkFlavor); } - .theme-default, - .theme-system, - .skin-default, - .skin-system { - @media (prefers-color-scheme: light) { - #catppuccin(@lightFlavor); - } - @media (prefers-color-scheme: dark) { - #catppuccin(@darkFlavor); - } - } - #catppuccin(@flavor) { #lib.palette(); #lib.defaults(); - --background-color: @base; - --background-color-alt: @base; - - --dropdown-border-color: @surface1; - --dropdown-background-color: @surface0; - --modal-background-color: @mantle; - --modal-border-color: @crust; - - &, - .column-header__wrapper, - .column > *:not(.loading-indicator), - body.flavour-glitch.skin-default .column-header__wrapper { - --background-border-color: @surface0 !important; - } - - &, - .tabs-bar__wrapper, - .admin-wrapper .sidebar-wrapper__inner, - .ui__header { - background: @crust; - color: @text; - } - - .navigation-panel, - .column-link { - background: transparent; - } - - .account__header__bio .account__header__fields dt { - background: transparent; - } - - .search-popout, - .search-popout em, - .dismissable-banner__message, - .dismissable-banner__message h1, - .account__header__bio .account__header__fields dt, - .account__section-headline a.active, - .account__section-headline button.active, - .notification__filter-bar a.active, - .notification__filter-bar button.active, - .account__header__bio .account__header__content, - .navigation-bar, - .column-link__badge, - .display-name__html, - .column-subheading, - .account__display-name strong, - .status__display-name strong, - .notification__message, - .public-layout .public-account-bio .account__header__content, - .reply-indicator__content, - .status__content, - .status__content__text, - .card__bar .display-name strong, - .about__mail, - .about__domain-blocks__domain h6 { - color: @text; - } - - .search-popout span, - .link-footer p, - .link-footer p a { - color: @subtext1; - } - - .account__header__tabs__name h1 small, - .account__header__bio .account__header__fields dd, - .display-name__account, - .status__relative-time, - .empty-column-indicator, - .follow_requests-unlocked_explanation, - .account .account__display-name, - .label_input .search__input, - .search__input:focus, - .account__header__fields dt, - .rules-list__hint, - .about__domain-blocks__domain { - color: @subtext0; - } - - .compose-panel hr, - .navigation-panel hr { - border-top-color: @surface2; - } - - .mention, - .icon-button.inverted, - .icon-button.inverted:focus, - .icon-button.inverted:hover .account__header__tabs__name h1, - .account__header__content a, - .account__header__bio .account__header__fields a, - .empty-column-indicator a, - .follow_requests-unlocked_explanation a, - .column-back-button, - .text-icon-button, - .icon-button.star-icon.active, - .public-layout .public-account-bio .account__header__fields a, - .column-header__back-button, - .navigation-bar strong, - .reply-indicator__content a.unhandled-link, - .status__content a.unhandled-link, - .announcements__item__content a.unhandled-link, - .reactions-bar__item.active .reactions-bar__item__count, - .column-header.active .column-header__icon, - .about__section__title { - color: @accent; - } - - button.icon-button i.fa-retweet { + --color-bg-primary: @base; + --color-bg-secondary: @surface0; + --color-bg-tertiary: @surface1; + --color-bg-inverted: @text; + + --color-text-primary: @text; + --color-text-secondary: @subtext1; + --color-text-tertiary: @subtext0; + --color-text-inverted: @base; + + /* Brand */ + --color-bg-brand-base: @accent; + --color-bg-brand-base-hover: darken(@accent, 5%); + --color-bg-brand-soft: fade(@accent, 40%); + --color-bg-brand-softest: fade(@accent, 15%); + + --color-text-brand: @accent; + --color-text-on-brand-base: @base; + --color-text-brand-on-inverted: @accent; + + /* States */ + + // Error + --color-bg-error-base: @red; + --color-bg-error-base-hover: darken(@red, 5%); + --color-bg-error-soft: fade(@red, 40%); + --color-bg-error-softest: fade(@red, 15%); + --color-text-error: @red; + --color-text-on-error-base: @base; + + // Warning + --color-bg-warning-base: @yellow; + --color-bg-warning-soft: fade(@yellow, 40%); + --color-bg-warning-softest: fade(@yellow, 15%); + --color-text-warning: @yellow; + --color-text-on-warning-base: @base; + + // Success + --color-bg-success-base: @green; + --color-bg-success-soft: fade(@green, 40%); + --color-bg-success-softest: fade(@green, 15%); + --color-text-success: @green; + --color-text-on-success-base: @base; + + // Disabled + --color-bg-disabled: @overlay1; + --color-text-disabled: @overlay1; + --color-text-on-disabled: @subtext0; + + /* Borders */ + --color-border-primary: @surface2; + --color-border-brand: @accent; + --color-border-brand-soft: fade(@accent, 50%); + --color-border-error: @red; + --color-border-error-soft: fade(@red, 50%); + --color-border-warning-soft: fade(@yellow, 50%); + --color-border-success-soft: fade(@green, 50%); + + /* Other */ + --color-shadow-primary: fade(@mantle, 30%); + --color-bg-overlay-base: fade(@text, 60%); + --color-bg-overlay-highlight: fade(@text, 5%); + + /* Images (alt text, hide/spoilers) */ + --color-bg-media-base: @crust; + --color-text-on-media: @text; + --color-border-media: @surface1; + + /* Actions (bookmarking, favoriting) */ + --color-text-bookmark-highlight: @teal; + --color-text-favourite-highlight: @yellow; + + .logo { @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .prose { - h1, - h2, - h3, - h4, - strong { - color: @text; - } - color: @subtext0; - } - - .rules-list { - color: @text; - li::before { - background-color: @accent; - color: @crust; - } - } - - .about__domain-blocks__domain:nth-child(2n) { - background-color: @surface0; - } - - .icon-button.active.inverted { - color: @mantle; - } - - .display-name strong { - color: @text !important; - } - - .boost-modal__action-bar { - span { - color: @subtext1; - } - background: @mantle; - } - - .emoji-mart-anchor-selected, - .reply-indicator__content a { - color: @accent !important; - } - - .confirmation-modal { - background-color: @base; - color: @text; - } - .confirmation-modal__action-bar { - background-color: @mantle; - } - - .privacy-dropdown__option { - background: @surface0; - - .privacy-dropdown__option__content, - strong, - i { - color: @text; - } - - &:hover, - &.active { - background: @accent !important; - - .privacy-dropdown__option__content, - strong, - i { - color: @crust; - } - } - } - - .privacy-dropdown.active .privacy-dropdown__value { - background: @accent !important; - } - - .privacy-dropdown.active .privacy-dropdown__value > button, - .privacy-dropdown__value-icon.active > i { - color: @crust !important; - } - - .emoji-mart-search > input { - color: @text !important; - } - - .emoji-mart-search, - .language-dropdown__dropdown__results { - background: @surface0; - } - - .language-dropdown__dropdown { - background: @surface1 !important; - } - - .language-dropdown__dropdown__results__item { - > span { - color: @text; - } - - &:hover, - &.active { - background: @accent; - - > span { - color: @crust; - } - } - } - - .conversation__unread, - .emoji-mart-anchor-bar, - .compose-form__actions .icon-button.active, - .react-toggle--checked .react-toggle-track, - .react-toggle--checked:hover .react-toggle-track, - .pillbar-button:not([disabled]).active, - .pillbar-button:not([disabled]).active:focus, - .pillbar-button:not([disabled]).active:hover, - .radio-button__input.checked { - background-color: @accent; - } - - .reactions-bar__item.active { - background-color: fade(@accent, 25%); - } - - .trends__item__sparkline path:last-child { - stroke: @accent !important; - } - .trends__item__sparkline path:first-child { - fill: fade(@accent, 25%) !important; - } - - .icon-button, - .notification__message .fa { - color: @surface2; - } - - .icon-button:active, - .icon-button.active, - .icon-button:focus, - .icon-button:hover, - .text-icon-button:active, - .text-icon-button:focus, - .text-icon-button:hover, - .public-layout .public-account-bio .account__header__fields a:hover { - color: @accent; - } - - .account__domain-pill { - color: @accent; - background: fade(@accent, 20%); - } - - .drawer__header, - .account__section-headline button, - .search__input, - .search__input:focus, - .column-link__badge, - .column-subheading, - .public-layout .header, - .public-layout .public-account-header__bar::before, - .account__header__fields, - .account__header__fields - dd:not(.account__header__bio .account__header__fields dd), - .admin-wrapper .sidebar ul .simple-navigation-active-leaf .selected, - .explore__search-header, - .column-inline-form, - .follow_requests-unlocked_explanation, - .conversation--unread, - .announcements, - .status-card__image { - background: @surface0 !important; - } - - .account__section-headline { - background: @mantle; - } - - .focusable:focus { - background: unset; - } - - .admin-wrapper .sidebar ul a:hover, - .admin-wrapper .sidebar ul .simple-navigation-active-leaf a:hover, - .detailed-status, - .detailed-status__action-bar { - background: @surface0; - } - - .admin-wrapper .sidebar ul .simple-navigation-active-leaf a, - .admin-wrapper .sidebar ul a:hover { - color: @text; - } - - .dismissable-banner { - background: @base; - } - - .column-header__wrapper.active { - box-shadow: 0 1px 0 fade(@accent, 30%); - } - .column-header__wrapper.active::before { - background: radial-gradient( - ellipse, - fade(@accent, 23%) 0, - rgba(99, 100, 255, 0) 60% + '' ); + content: url("data:image/svg+xml,@{svg}"); } - .account__header__bio .account__header__fields dl, - .account__header__bio .account__header__fields, - .boost-modal__container, - .empty-column-indicator, - .column > .scrollable, - .nothing-here, - .public-layout .public-account-bio, - .hero-widget__text, - &.admin, - .admin-wrapper .sidebar ul a.selected, - .admin-wrapper .sidebar ul ul { - background: @base; - } - - .dropdown-button { - border-color: @accent; - color: @accent; - } - - .public-layout .public-account-header__tabs__tabs .counter::after, - .public-layout .public-account-header__tabs__tabs .counter.active::after, - .react-toggle--checked .react-toggle-thumb, - .radio-button__input.checked, - .account__action-bar__tab.active { - border-color: @accent; - } - - .account, - .load-gap { - border-color: @mantle; - } - - .account__section-headline a.active::after { - border-color: transparent transparent @base; - } - - .account__section-headline a.active::before, - .account__section-headline button.active::after, - .account__section-headline button.active::before { - border-color: transparent transparent @mantle; - } - - .poll__chart { - background: @overlay0; - &.leading { - background: @accent; - } - } - - .column-header__button { - background: @base; - color: @overlay2; - - &:hover { - background: @surface0; + /* Verified badge icon (e.g. profile fields) */ + svg.icon-verified { + path[fill="url(#VerifiedGradient)"] { + fill: @green !important; } - } - - .search-popout, - .drawer__header a:hover, - .account__section-headline button:hover, - .account__section-headline a:hover { - background: @surface0; - } - - .prose a, - .column-link .active, - .compose-form__poll__select__value, - .column-link--transparent.active, - .column-link--transparent:focus, - .column-link:focus, - .column-link--transparent:hover, - .column-link:hover { - color: @accent; - } - - .status.collapsed .status__content::after { - background: linear-gradient(fade(@base, 0%), @base); - } - - .button.button-tertiary:focus, - .button.button-tertiary:hover, - .button.button-tertiary:active { - color: @base; - } - - .button.button-tertiary { - border-color: @accent; - } - - .button, - .button.button-tertiary, - .button.logo-button, - .icon-with-badge__badge { - background: @accent; - color: @base; - } - - .button.logo-button svg { - fill: currentcolor; - } - - .public-layout .header .nav-button { - background-color: @surface1; - } - - .public-layout .header .nav-button:hover { - background-color: @surface2; - } - - .button.button-secondary { - background-color: transparent; - color: @text; - border-color: @accent; - } - .button.button-secondary:active, - .button.button-secondary:focus, - .button.button-secondary:hover { - border-color: @accent; - color: @base; - transition: 0.2s; - } - - .button:active, - .button:focus, - .button:hover, - .button.button-tertiary:active, - .button.button-tertiary:focus, - .button.button-tertiary:hover, - .button.logo-button:active, - .button.logo-button:focus, - .button.logo-button:hover, - .announcements__item__unread { - background: @accent; - } - - select { - background-color: @mantle; - color: @text; - } - - .mute-modal__cancel-button { - background-color: @base; - color: @text; - &:hover { - background-color: @surface0; - } - } - - .drawer__inner, - .drawer__inner__mastodon, - .compose-form__highlightable, - .compose-form__highlightable .autosuggest-textarea__textarea, - .column-header, - .column-back-button, - .boost-modal, - .mute-modal, - .privacy-dropdown__dropdown, - .explore__search-header .search__input { - background-color: @base; - } - - .mute-modal__action-bar { - background-color: @mantle; - } - - .mute-modal__container { - background-color: @base; - color: @text; - } - - .compose-form .compose-form__modifiers, - .compose-form .compose-form__autosuggest-wrapper, - .autosuggest-textarea__suggestions, - .compose-form .spoiler-input__input { - background: @surface0 !important; - color: @text !important; - } - - .compose-form .compose-form__buttons-wrapper { - background: @surface0; - } - - .load-more:hover { - background-color: @mantle; - } - - .character-counter { - color: @subtext0; - } - - .public-layout .header, - .hero-widget, - .public-layout .public-account-header, - .public-layout .public-account-bio, - .nothing-here { - box-shadow: none; - } - - .dropdown-menu__item--dangerous a { - color: @red; - } - - .search__popout, - .dropdown-menu__arrow::before, - .dropdown-menu__item button, - .dropdown-menu__container__list, - .dropdown-menu.bottom { - background: @surface0; - color: @text; - } - - .dropdown-menu__item a:hover, - .dropdown-menu__item button:hover { - background: @surface1; - } - - .input-copy, - .simple_form input[type="text"], - .simple_form textarea, - .simple_form .block-button, - .notification__filter-bar button, - .simple_form .button, - .simple_form button { - background: @mantle; - color: @text; - } - - .simple_form .block-button:hover, - .simple_form .button:hover, - .notification__filter-bar button:hover, - .simple_form button:hover { - background: @surface0; - } - - .simple_form .input.with_label .label_input > label, - .simple_form select, - .accounts-table__count, - .simple_form textarea { - color: @text; - } - - .simple_form textarea, - .simple_form input[type="password"], - .simple_form input[type="number"], - .simple_form input[type="text"] { - border-color: @crust; - } - - .simple_form input[type="email"]:required:valid { - border-color: @green; - } - - .simple_form input[type="password"], - .simple_form input[type="number"], - .simple_form input[type="email"]:required:valid, - .simple_form - input[type="password"]:required:invalid:not(:placeholder-shown) { - color: @text; - background: @mantle; - } - - .simple_form - input[type="password"]:required:invalid:not(:placeholder-shown) { - border-color: @red; - } - - .simple_form select { - @svg: escape( - '' - ); - background: @mantle url("data:image/svg+xml,@{svg}") no-repeat right 8px - center/auto 16px; - border-color: @crust; - } - - .poll__option input[type="text"]:focus, - .simple_form input[type="datetime-local"]:active, - .simple_form input[type="datetime-local"]:focus, - .simple_form input[type="email"]:active, - .simple_form input[type="email"]:focus, - .simple_form input[type="number"]:active, - .simple_form input[type="number"]:focus, - .simple_form input[type="password"]:active, - .simple_form input[type="password"]:focus, - .simple_form input[type="text"]:active, - .simple_form input[type="text"]:focus, - .simple_form input[type="url"]:active, - .simple_form input[type="url"]:focus, - .simple_form textarea:active, - .simple_form textarea:focus { - border-color: @accent !important; - background: @mantle !important; - color: @text !important; - } - - .table > thead > tr > th, - .setting-text:active, - .setting-text:focus { - border-color: @accent !important; - } - - .batch-table__toolbar, - .table > thead > tr > th { - background: @surface0 !important; - color: @text !important; - } - - .simple_form input[type="datetime-local"]:hover, - .simple_form input[type="email"]:hover, - .simple_form input[type="number"]:hover, - .simple_form input[type="password"]:hover, - .simple_form input[type="text"]:hover, - .simple_form input[type="url"]:hover, - .simple_form textarea:hover { - background: @mantle !important; - border-color: @accent !important; - transition: 0.4s; - } - - .batch-table__row { - background: @surface1; - } - - .batch-table__row:hover, - .batch-table__row:nth-child(2n):hover { - background: @surface2; - } - - .batch-table__row:nth-child(2n), - .table > tbody > tr > td { - background: @surface0; - } - - .table > thead > tr > th { - border-bottom-color: @surface0; - } - - .positive-hint { - color: @green !important; - } - - .card__bar { - background: @surface0; - } - - .reply-indicator { - background: @surface1; - } - - .getting-started, - .getting-started__wrapper { - background: @surface0; - } - - .column-link { - color: @text; - - &:hover { - color: @accent; + path[stroke="#fff"] { + stroke: @base !important; } } - - .search__popout h4 { - color: @subtext0; - } - .search__popout__menu__item mark { - color: @text; - } - .search__popout__menu__item.selected, - .search__popout__menu__item:active, - .search__popout__menu__item:focus, - .search__popout__menu__item:hover { - background: @surface1; - color: @text; - } } } diff --git a/styles/mdbook/catppuccin.user.less b/styles/mdbook/catppuccin.user.less index 4f6e640e1d..8441192ed1 100644 --- a/styles/mdbook/catppuccin.user.less +++ b/styles/mdbook/catppuccin.user.less @@ -2,7 +2,7 @@ @name mdBook Catppuccin @namespace github.com/catppuccin/userstyles/styles/mdbook @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/mdbook -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/mdbook/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amdbook @description Soothing pastel theme for mdBook @@ -15,11 +15,16 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; -@-moz-document url-prefix("https://rust-lang.github.io/mdBook/"), +@-moz-document domain("rust-lang.github.io"), domain("doc.rust-lang.org"), - domain("rust-book.cs.brown.edu") { + domain("rust-book.cs.brown.edu"), + domain("rustc-dev-guide.rust-lang.org"), + domain("forge.rust-lang.org"), + domain("lang-team.rust-lang.org"), + domain("doc.redox-os.org"), + url-prefix("https://lukaswirth.dev/tlborm/") { @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.css"); :root { @@ -45,26 +50,37 @@ --sidebar-spacer: @overlay0; --scrollbar: @overlay0; --icons: @overlay0; - --icons-hover: @overlay1; + --icons-hover: @overlay2; --links: @blue; - --inline-code-color: @peach; + --inline-code-color: @text; --theme-popup-bg: @mantle; --theme-popup-border: @overlay0; --theme-hover: @overlay0; --quote-bg: @mantle; --quote-border: @crust; - --table-border-color: @crust; - --table-header-bg: @mantle; + --table-border-color: @surface0; + --table-header-bg: mix(@accent, @base, 30%); --table-alternate-bg: @mantle; - --searchbar-border-color: @crust; + --searchbar-border-color: @surface0; --searchbar-bg: @mantle; --searchbar-fg: @text; --searchbar-shadow-color: @crust; --searchresults-header-fg: @text; - --searchresults-border-color: @crust; + --searchresults-border-color: @surface2; --searchresults-li-bg: @base; + --sidebar-header-border-color: @lavender; --search-mark-bg: @peach; --warning-border: @peach; + --copy-button-filter: @subtext0-filter; + --copy-button-filter-hover: @blue-filter; + --blockquote-note-color: @blue; + --blockquote-tip-color: @green; + --blockquote-important-color: @mauve; + --blockquote-warning-color: @yellow; + --blockquote-caution-color: @red; + /* https://github.com/cognitive-engineering-lab/mdbook-quiz */ + --mdbook-incorrect: @red; + --mdbook-correct: @green; code.hljs { color: @text; diff --git a/styles/mdn/catppuccin.user.less b/styles/mdn/catppuccin.user.less index 3b443f4fce..5f305c499d 100644 --- a/styles/mdn/catppuccin.user.less +++ b/styles/mdn/catppuccin.user.less @@ -2,7 +2,7 @@ @name MDN Catppuccin @namespace github.com/catppuccin/userstyles/styles/mdn @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/mdn -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/mdn/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amdn @description Soothing pastel theme for MDN @@ -15,148 +15,98 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; #catppuccin(@flavor) { #lib.palette(); #lib.defaults(); #lib.css-variables(); - --text-primary: @text; - --text-secondary: @subtext0; - --text-active: @overlay1; - --text-inactive: fade(@subtext0, 60%); - --text-link: @accent; - --text-visited: lighten(saturate(@accent, -20%), -20%); - --text-invert: @base; - --background-primary: @base; - --background-secondary: @crust; - --background-tertiary: @mantle; - --background-toc-active: @crust; - --background-mark-yellow: fade(@yellow, 40%); - --background-mark-green: fade(@green, 40%); - --background-information: fade(@blue, 10%); - --background-warning: fade(@maroon, 10%); - --background-critical: fade(@red, 10%); - --background-success: fade(@green, 10%); - --border-primary: @surface2; - --border-secondary: @surface1; - --button-primary-default: @text; - --button-primary-hover: @subtext0; - --button-primary-active: @overlay0; - --button-primary-inactive: @text; - --button-secondary-default: @surface2; - --button-secondary-hover: @surface1; - --button-secondary-active: @overlay0; - --button-secondary-inactive: @surface2; - --button-secondary-border-focus: @blue; - --button-secondary-border-red: @red; - --button-secondary-border-red-focus: @maroon; - --icon-primary: @text; - --icon-secondary: @subtext0; - --icon-information: @blue; - --icon-warning: @peach; - --icon-critical: @maroon; - --icon-success: @green; - --accent-primary: @accent; - --accent-primary-engage: fade(@accent, 10%); - --accent-secondary: @accent; - --accent-tertiary: fade(saturate(@accent, 10%), 10%); - --shadow-01: 0 1px 2px fade(@text, 20%); - --shadow-02: 0 1px 6px fade(@text, 20%); - --focus-01: 0 0 0 3px fade(@text, 50%); - --field-focus-border: @text; - --code-background-inline: @mantle; - --code-background-block: @mantle; - --notecard-link-color: @subtext1; - --scrollbar-bg: transparent; - --scrollbar-color: hsla(0, 0%, 100%, 0.25); - --category-color: @sky; - --category-color-background: fade(@sky, 40%); - --code-color: lighten(@sky, 10%); - --mark-color: darken(@sky, 30%); - --plus-accent-color: @maroon; - --html-accent-color: @red; - --css-accent-color: @sapphire; - --js-accent-color: @yellow; - --http-accent-color: @green; - --apis-accent-color: @mauve; - --learn-accent-color: @pink; - --plus-code-color: saturate(@maroon, 10%); - --html-code-color: saturate(@red, 10%); - --css-code-color: saturate(@sapphire, 10%); - --js-code-color: saturate(@yellow, 10%); - --http-code-color: saturate(@green, 10%); - --apis-code-color: saturate(@mauve, 10%); - --learn-code-color: saturate(@pink, 10%); - --plus-mark-color: darken(@maroon, 30%); - --html-mark-color: darken(@red, 30%); - --css-mark-color: darken(@sapphire, 30%); - --js-mark-color: darken(@yellow, 30%); - --http-mark-color: darken(@green, 30%); - --apis-mark-color: darken(@mauve, 30%); - --learn-mark-color: darken(@pink, 30%); - --plus-accent-background-color: fade(@maroon, 30%); - --html-accent-background-color: fade(@red, 30%); - --css-accent-background-color: fade(@sapphire, 30%); - --js-accent-background-color: fade(@yellow, 30%); - --http-accent-background-color: fade(@green, 30%); - --apis-accent-background-color: fade(@mauve, 30%); - --learn-accent-background-color: fade(@pink, 30%); - --plus-accent-engage: fade(@maroon, 70%); - --html-accent-engage: fade(@red, 70%); - --css-accent-engage: fade(@sapphire, 70%); - --js-accent-engage: fade(@yellow, 70%); - --http-accent-engage: fade(@green, 70%); - --apis-accent-engage: fade(@mauve, 70%); - --learn-accent-engage: fade(@pink, 70%); - --modal-backdrop-color: fade(@mantle, 70%); - --selection-background-color: fade(@surface2, 60%); - --text-primary-red: @red; - --text-primary-green: @green; - --text-primary-blue: @blue; - --text-primary-yellow: @yellow; - --collections-link: @flamingo; - --collections-header: darken(@red, 30%); - --collections-mandala: darken(@red, 20%); - --collections-icon: darken(@red, 10%); - --updates-link: @sky; - --updates-header: @crust; - --updates-mandala: lighten(@sky, 10%); - --updates-icon: @sky; - --ai-help-link: @green; - --ai-help-header: @crust; - --ai-help-mandala: lighten(@green, 10%); - --ai-help-icon: @green; - --form-limit-color: @overlay0; - --form-limit-color-emphasis: @overlay1; - --form-invalid-color: @red; - --form-invalid-focus-color: @flamingo; - --form-invalid-focus-effect-color: fade(@flamingo, 20%); - --baseline-high-bg: hsl( - hue(@green), - saturation(@green), - lightness(@surface0) - ); - --baseline-high-engine-bg: hsl( - hue(@green), - saturation(@green), - lightness(@base) - ); - --baseline-high-check: @green; - --baseline-low-bg: hsl(hue(@blue), saturation(@blue), lightness(@surface0)); - --baseline-low-engine-bg: hsl( - hue(@blue), - saturation(@blue), - lightness(@base) - ); - --baseline-low-check: @blue; - --baseline-low-pill-bg: @sapphire; - --baseline-low-pill-color: @base; - --baseline-limited-bg: @surface0; - --baseline-limited-engine-bg: @base; - --baseline-limited-check: @green; - --baseline-limited-cross: @peach; + --color-text-primary: @text; + --color-text-secondary: @subtext0; + --color-background-page: @base; + --color-background-primary: @mantle; + --color-background-secondary: @surface0; + --color-link-normal: @blue; + --color-link-visited: @mauve; + --color-border-primary: @surface1; + --color-border-secondary: @overlay2; // used for icons + --color-border-active: @accent; + --color-area-background: fade(@accent, 25%); + --color-area-highlight-border: @accent; + --color-area-link: @accent; + --color-background-red: fade(@red, 25%); + --color-background-orange: fade(@peach, 25%); + --color-background-yellow: fade(@yellow, 25%); + --color-background-green: fade(@green, 25%); + --color-background-blue: fade(@blue, 25%); + --color-background-purple: fade(@mauve, 25%); + --color-white: @text; + --color-white-alpha-25: fade(@text, 25%); + --color-white-alpha-75: fade(@text, 75%); + --color-black: @crust; + --color-black-alpha-25: fade(@crust, 25%); + --color-black-alpha-75: fade(@crust, 75%); + + --color-gray-90: hsl(hue(@base), saturation(@base), 90%); + --color-gray-80: hsl(hue(@base), saturation(@base), 80%); + --color-gray-60: hsl(hue(@base), saturation(@base), 60%); + --color-gray-40: hsl(hue(@base), saturation(@base), 40%); + --color-gray-20: hsl(hue(@base), saturation(@base), 20%); + --color-gray-10: hsl(hue(@base), saturation(@base), 10%); + --color-gray-05: hsl(hue(@base), saturation(@base), 5%); + #__color-scale(@id, @color) { + --color-@{id}-90: hsl(hue(@color), saturation(@color), 90%); + --color-@{id}-80: hsl(hue(@color), saturation(@color), 80%); + --color-@{id}-50: hsl(hue(@color), saturation(@color), 50%); + --color-@{id}-20: hsl(hue(@color), saturation(@color), 20%); + --color-@{id}-10: hsl(hue(@color), saturation(@color), 10%); + } + #__color-scale(red, @red); + #__color-scale(orange, @peach); + #__color-scale(yellow, @yellow); + #__color-scale(green, @green); + #__color-scale(blue, @blue); + #__color-scale(purple, @mauve); + + .baseline-indicator { + --baseline-bg: @surface0; + --baseline-engine-bg: @base; + --baseline-check: @green; + --baseline-cross: @peach; + + @darker: fade(@peach, 20%); + @svg: escape( + '' + ); + --baseline-img: url("data:image/svg+xml,@{svg}"); + + &.high { + --baseline-bg: fade(@green, 20%); + --baseline-engine-bg: fade(@green, 20%); + --baseline-check: @green; + + @darker: fade(@green, 20%); + @svg: escape( + '' + ); + --baseline-img: url("data:image/svg+xml,@{svg}"); + } + + &.low { + --baseline-bg: fade(@blue, 20%); + --baseline-engine-bg: fade(@blue, 20%); + --baseline-check: @blue; + --baseline-pill-bg: @blue; + --baseline-pill-color: @base; + + @darker: fade(@blue, 20%); + @svg: escape( + '' + ); + --baseline-img: url("data:image/svg+xml,@{svg}"); + } + } } @-moz-document domain("developer.mozilla.org") { diff --git a/styles/microsoft-word/catppuccin.user.less b/styles/microsoft-word/catppuccin.user.less index 019ee792cd..abc42f7e5b 100644 --- a/styles/microsoft-word/catppuccin.user.less +++ b/styles/microsoft-word/catppuccin.user.less @@ -2,7 +2,7 @@ @name Microsoft Word Catppuccin @namespace github.com/catppuccin/userstyles/styles/microsoft-word @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/microsoft-word -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/microsoft-word/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amicrosoft-word @description Soothing pastel theme for Microsoft Word @@ -17,7 +17,7 @@ @var checkbox applyToDocument "Apply Theme to Document" 0 ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("live.com") { #catppuccin(@lightFlavor); diff --git a/styles/migadu-webmail/catppuccin.user.less b/styles/migadu-webmail/catppuccin.user.less index 516f95231a..56bcb6affc 100644 --- a/styles/migadu-webmail/catppuccin.user.less +++ b/styles/migadu-webmail/catppuccin.user.less @@ -2,7 +2,7 @@ @name Migadu Webmail Catppuccin @namespace github.com/catppuccin/userstyles/styles/migadu-webmail @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/migadu-webmail -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/migadu-webmail/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amigadu-webmail @description Soothing pastel theme for Migadu Webmail @@ -17,7 +17,7 @@ @var checkbox hideProfilePictures "Hide Profile Pictures" 0 ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("webmail.migadu.com") { :root { diff --git a/styles/minesweeper/catppuccin.user.less b/styles/minesweeper/catppuccin.user.less index d530af335c..0b61e89f39 100644 --- a/styles/minesweeper/catppuccin.user.less +++ b/styles/minesweeper/catppuccin.user.less @@ -2,7 +2,7 @@ @name Minesweeper Online Catppuccin @namespace github.com/catppuccin/userstyles/styles/minesweeper @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/minesweeper -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/minesweeper/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aminesweeper @description Soothing pastel theme for Minesweeper Online @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("minesweeper.online") { :root { diff --git a/styles/modrinth/catppuccin.user.less b/styles/modrinth/catppuccin.user.less index 6b61d262ce..acd34a1ff0 100644 --- a/styles/modrinth/catppuccin.user.less +++ b/styles/modrinth/catppuccin.user.less @@ -2,7 +2,7 @@ @name Modrinth Catppuccin @namespace github.com/catppuccin/userstyles/styles/modrinth @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/modrinth -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/modrinth/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amodrinth @description Soothing pastel theme for Modrinth @@ -15,15 +15,20 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("modrinth.com") { - .light-mode { + .light, + .light-mode, + .light-properties, + html { #catppuccin(@lightFlavor); } + .dark, .dark-mode, - .oled-mode { + .oled-mode, + :root[data-theme="dark"] { #catppuccin(@darkFlavor); } @@ -34,7 +39,52 @@ // TODO: Use Catppuccin palette colors? `fade()`-ed? @shadow: if(@flavor = latte, #dbdfef, #010409); - * { + #css-variables() !important; + + // homepage + .blob-demonstration, + .blob-demonstration::after { + background: linear-gradient( + 0deg, + fade(@accent, 20%), + fade(@base, 10%) + ) !important; + } + .logo-banner path { + fill: @accent !important; + } + .logo-banner > svg > g > rect { + display: none; + } + + [tabindex="0"]:focus-visible, + a:focus-visible, + button:focus-visible { + outline-color: @accent; + } + + .BDVE3s9MFQttmbMUeYup-2 a b, + .BDVE3s9MFQttmbMUeYup-2 a strong { + color: @accent; + } + + // dropdown icon + .multiselect__select::before { + border-color: @text transparent transparent; + color: @text; + } + // header button hover + .btn-wrapper:hover { + a, + button { + --tw-brightness: none !important; + } + } + .nuxt-loading-indicator { + background: @accent !important; + } + + #css-variables() { --text-color: @text; --color-base: @text; --color-bg: @crust; @@ -53,11 +103,12 @@ --color-button-text-active: @text; --color-button-text-selected: @accent; --color-divider: @surface0; + --color-divider-dark: @surface2; --color-heading: @text; --color-icon: @text; - --color-link-active: @teal; + --color-link-active: @sapphire; --color-link-hover: @sky; - --color-link: @sapphire; + --color-link: @blue; --color-raised-bg: @base; --color-blue: @sapphire; --color-special-blue: @sapphire; @@ -72,30 +123,45 @@ --color-text: @subtext1; --color-text-dark: @text; --color-text-inactive: @overlay1; - --color-brand-highlight: @surface0; + --color-brand-highlight: fade(@accent, 25%); --color-brand-inverted: @shadow; --color-table-alternate-row: @crust; --color-table-border: @overlay0; --color-contrast: @text; --color-accent-contrast: @mantle; + --color-red-highlight: fade(@red, 25%); + --color-orange-highlight: fade(@peach, 25%); + --color-green-highlight: fade(@accent, 25%); + --color-blue-highlight: fade(@blue, 25%); + --color-purple-highlight: fade(@mauve, 25%); + --color-gray-highlight: fade(@text, 25%); + --color-red-bg: fade(@red, 20%); + --color-orange-bg: fade(@peach, 25%); + --color-green-bg: fade(@accent, 25%); + --color-blue-bg: fade(@blue, 25%); + --color-purple-bg: fade(@mauve, 25%); --color-brand-shadow: @accent; --color-warning-banner-side: @red; - --color-warning-banner-bg: fade(@red, 10%); + --color-warning-banner-bg: fade(@red, 25%); --color-warning-banner-text: @text; - --color-platform-fabric: @pink; + --color-platform-fabric: @rosewater; --color-platform-quilt: @mauve; - --color-platform-forge: @blue; + --color-platform-forge: @lavender; --color-platform-neoforge: @peach; --color-platform-liteloader: @sky; --color-platform-bukkit: @peach; --color-platform-bungeecord: @yellow; --color-platform-folia: @green; --color-platform-paper: @red; - --color-platform-purpur: @lavender; + --color-platform-purpur: @mauve; --color-platform-spigot: @yellow; --color-platform-velocity: @teal; --color-platform-waterfall: @blue; --color-platform-sponge: @yellow; + --color-platform-ornithe: @teal; + --color-platform-bta-babric: @green; + --color-platform-legacy-fabric: @lavender; + --color-platform-nilloader: @pink; --color-button-border: fade(@crust, 20%); --color-tooltip-bg: @surface1; --color-tooltip-text: @subtext1; @@ -114,51 +180,21 @@ --brand-gradient-strong-bg: linear-gradient( 270deg, fade(@accent, 5%) 10%, - fade(@accent, 10%) + fade(@accent, 15%) ); --brand-gradient-border: fade(@accent, 10%); - } - // homepage - .blob-demonstration, - .blob-demonstration::after { - background: linear-gradient( - 0deg, - fade(@accent, 20%), - fade(@base, 10%) - ) !important; - } - .logo-banner path { - fill: @accent !important; - } - .logo-banner > svg > g > rect { - display: none; - } - - [tabindex="0"]:focus-visible, - a:focus-visible, - button:focus-visible { - outline-color: @accent; - } - .BDVE3s9MFQttmbMUeYup-2 a b, - .BDVE3s9MFQttmbMUeYup-2 a strong { - color: @accent; - } + --surface-1: @crust; + --surface-1-5: mix(@crust, @mantle, 50%); + --surface-2: @mantle; + --surface-2-5: mix(@mantle, @base, 50%); + --surface-3: @base; + --surface-4: @surface0; + --surface-5: @surface2; - // dropdown icon - .multiselect__select::before { - border-color: @text transparent transparent; - color: @text; - } - // header button hover - .btn-wrapper:hover { - a, - button { - --tw-brightness: none !important; - } - } - .nuxt-loading-indicator { - background: @accent !important; + --color-text-primary: @text; + --color-text-default: @subtext1; + --color-text-tertiary: @subtext0; } } } diff --git a/styles/mullvad-leta/catppuccin.user.less b/styles/mullvad-leta/catppuccin.user.less deleted file mode 100644 index 0147771185..0000000000 --- a/styles/mullvad-leta/catppuccin.user.less +++ /dev/null @@ -1,125 +0,0 @@ -/* ==UserStyle== -@name Mullvad Leta Catppuccin -@namespace github.com/catppuccin/userstyles/styles/mullvad-leta -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/mullvad-leta -@version 2025.09.06 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/mullvad-leta/catppuccin.user.less -@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amullvad-leta -@description Soothing pastel theme for Mullvad Leta -@author Catppuccin -@license MIT - -@preprocessor less -@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] -@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] -@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] -==/UserStyle== */ - -@import "https://userstyles.catppuccin.com/lib/lib.less"; - -@-moz-document domain("leta.mullvad.net") { - :root { - @media (prefers-color-scheme: light) { - #catppuccin(@lightFlavor); - } - @media (prefers-color-scheme: dark) { - #catppuccin(@darkFlavor); - } - } - - #catppuccin(@flavor) { - #lib.palette(); - #lib.defaults(); - - &, svelte-css-wrapper > * { - --blue: @base; - --blue-dark: @mantle; - --blue-link: @surface1; - --blue-link--hover: @surface2; - --text-link: @blue; - - --border-color: @accent; - --bg-color-checked: @surface0; - --bg-color-hover: @surface1; - --divider-color: @surface1; - --focus-outline-color: @accent; - - --color-text: @text; - --color-icon: @subtext1; - --chevron-color: @subtext1; - --icons-color: @subtext1; - --input-color: @subtext1; - --placeholder-color: @subtext1; - - --border: 1px solid @surface0; - --border-hover: 1px solid @surface2; - --border-focused: 1px solid @surface2; - --clear-select-focus-outline: 1px solid @accent; - - --background: @base; - --list-background: @base; - --disabled-background: @surface0; - --disabled-border-color: @surface0; - --form-control-disabled: @overlay0; - - --item-color: @subtext1; - --item-hover-bg: @surface0; - --item-hover-color: @subtext1; - --item-is-active-bg: @surface1; - --item-is-active-color: @text; - --selected-item-color: @subtext1; - - --grey-dark: @surface1; - --success: @green; - --warning: @yellow; - --danger: @red; - --tag-danger-background: @red; - --tag-danger-color: @base; - } - - .results { - /* favicons */ - .icon-wrapper { - background-color: @mantle; - } - - /* urls */ - cite { - color: @subtext0; - } - } - - /* search query and engines */ - input[name="q"], - .radio-group label { - color: @text !important; - } - - img[src="/mullvad-vpn-logo.svg"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - a { - color: @text; - - /* anchors */ - &[href^="#"]::before { - color: @overlay2; - } - } - - /* tooltips */ - button:not([disabled])[aria-label] { - &:focus::after, &:hover::after { - color: @subtext1; - } - } - - footer a { - color: @subtext1; - } - } -} diff --git a/styles/namemc/catppuccin.user.less b/styles/namemc/catppuccin.user.less index ac2af13445..0d845d672b 100644 --- a/styles/namemc/catppuccin.user.less +++ b/styles/namemc/catppuccin.user.less @@ -2,7 +2,7 @@ @name NameMC Catppuccin @namespace github.com/catppuccin/userstyles/styles/namemc @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/namemc -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/namemc/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Anamemc @description Soothing pastel theme for NameMC @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("namemc.com") { :root[data-bs-theme="dark"] { diff --git a/styles/neovim.io/README.md b/styles/neovim.io/README.md new file mode 100644 index 0000000000..c3352193b9 --- /dev/null +++ b/styles/neovim.io/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for neovim.io + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [comfysage](https://github.com/comfysage) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/neovim.io/catppuccin.user.less b/styles/neovim.io/catppuccin.user.less new file mode 100644 index 0000000000..770b1d278c --- /dev/null +++ b/styles/neovim.io/catppuccin.user.less @@ -0,0 +1,114 @@ +/* ==UserStyle== +@name neovim.io Catppuccin +@namespace github.com/catppuccin/userstyles/styles/neovim.io +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/neovim.io +@version 2026.08.16 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/neovim.io/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aneovim.io +@description Soothing pastel theme for neovim.io +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; + +@-moz-document domain("neovim.io") { + @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); + + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + --fg-color: @text; + --inverse-fg-color: @surface0; + --bg-color: @base; + --accent-bg-color: @mantle; + --link-color: @blue; + --accent-color: @accent; + --border-color: @accent; + --code-color: @accent; + + a:not([class]) { + text-decoration-color: var(--link-color); + + &:hover, + &:focus { + color: var(--link-color); + } + } + + a[aria-label="logo"] svg[aria-label="Neovim"] { + path[fill="url(#a)"] { + fill: @blue; + } + + path[fill="url(#b)"], + path[fill="url(#c)"] { + fill: @green; + } + + g[fill="#444"] path { + fill: @blue; + } + } + + --bs-btn-active-color: @base; + + .btn { + color: @base; + background: linear-gradient( + @accent 0% 95%, + darken(@accent, 10%) 95% 100% + ); + + &:hover, + &:focus { + box-shadow: 0 0 10px @accent; + outline-color: @text; + } + } + + // docs + --tag-color: @accent; + + code, + code.hljs, + pre, + samp { + background-color: @mantle !important; + color: @text; + } + + .generator-stats { + color: @subtext0; + } + + --docsearch-container-background: fade(@base, 30%); + --docsearch-modal-background: @mantle; + --docsearch-highlight-color: @accent; + --docsearch-logo-color: @accent; + + .DocSearch-Logo { + .cls-1, + .cls-2 { + fill: var(--docsearch-logo-color); + } + } + } +} diff --git a/styles/nitter/catppuccin.user.less b/styles/nitter/catppuccin.user.less index 4e20f791c7..3043945e4c 100644 --- a/styles/nitter/catppuccin.user.less +++ b/styles/nitter/catppuccin.user.less @@ -2,7 +2,7 @@ @name Nitter Catppuccin @namespace github.com/catppuccin/userstyles/styles/nitter @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/nitter -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/nitter/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Anitter @description Soothing pastel theme for Nitter @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("nitter.net"), domain("nitter.unixfox.eu"), diff --git a/styles/nixos-manual/catppuccin.user.less b/styles/nixos-manual/catppuccin.user.less index 3faf83c024..9e5ce7d9c6 100644 --- a/styles/nixos-manual/catppuccin.user.less +++ b/styles/nixos-manual/catppuccin.user.less @@ -2,7 +2,7 @@ @name NixOS Manual/Nixpkgs Manual Catppuccin @namespace github.com/catppuccin/userstyles/styles/nixos-manual @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/nixos-manual -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/nixos-manual/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Anixos-manual @description Soothing pastel theme for NixOS Manual and Nixpkgs Manual @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document url-prefix("https://nixos.org/manual/"), url-prefix("https://nix-darwin.github.io/nix-darwin/manual/") { diff --git a/styles/nixos-search/catppuccin.user.less b/styles/nixos-search/catppuccin.user.less index 471eea015a..3b9d56777b 100644 --- a/styles/nixos-search/catppuccin.user.less +++ b/styles/nixos-search/catppuccin.user.less @@ -2,7 +2,7 @@ @name NixOS Search Catppuccin @namespace github.com/catppuccin/userstyles/styles/nixos-search @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/nixos-search -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/nixos-search/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Anixos-search @description Soothing pastel theme for NixOS Search @@ -15,10 +15,10 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("search.nixos.org") { - :root { + :root:not([data-theme]) { @media (prefers-color-scheme: light) { #catppuccin(@lightFlavor); } @@ -27,12 +27,20 @@ } } + :root[data-theme="dark"] { + #catppuccin(@darkFlavor); + } + + :root[data-theme="light"] { + #catppuccin(@lightFlavor); + } + #catppuccin(@flavor) { #lib.palette(); #lib.defaults(); --background-color: @base; - --badge-background: @accent; + --badge-background: @surface2; --button-active-background: @surface1; --button-active-hover-background: @surface2; --button-background: @surface0; @@ -54,21 +62,18 @@ --search-sidebar-selected-link-background: @accent; --search-sidebar-selected-link-color: @crust; --terminal-background: @surface0; - --terminal-color: @red; + --terminal-color: @text; --text-color: @text; --text-color-light: @text; --text-color-warning: @yellow; - // hardcoded to #fff - .label, .badge { - color: @crust; - } - - // hardcoded to #005580 - a:hover, - a:focus { color: @text; } + /* Experimental Flakes label */ + .label { + color: @base; + text-shadow: none; + } } } diff --git a/styles/npm/catppuccin.user.less b/styles/npm/catppuccin.user.less index 5a61b92a1b..8612cf0b5b 100644 --- a/styles/npm/catppuccin.user.less +++ b/styles/npm/catppuccin.user.less @@ -2,7 +2,7 @@ @name npm Catppuccin @namespace github.com/catppuccin/userstyles/styles/npm @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/npm -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/npm/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Anpm @description Soothing pastel theme for npm @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("www.npmjs.com") { :root { diff --git a/styles/npmx/README.md b/styles/npmx/README.md new file mode 100644 index 0000000000..b7018c3831 --- /dev/null +++ b/styles/npmx/README.md @@ -0,0 +1,37 @@ + + + +

+ Logo
+ + Catppuccin for npmx + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + +> [!NOTE] +> npmx-specific accent color appearance options at https://npmx.dev/settings are overriden by this userstyle. + +## 💝 Current Maintainer +- [42willow](https://github.com/42willow) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/npmx/catppuccin.user.less b/styles/npmx/catppuccin.user.less new file mode 100644 index 0000000000..721fa7efa7 --- /dev/null +++ b/styles/npmx/catppuccin.user.less @@ -0,0 +1,73 @@ +/* ==UserStyle== +@name npmx Catppuccin +@namespace github.com/catppuccin/userstyles/styles/npmx +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/npmx +@version 2026.08.16 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/npmx/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Anpmx +@description Soothing pastel theme for npmx +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; + +@-moz-document domain("npmx.dev") { + :root[data-theme="dark"][data-bg-theme] { + #catppuccin(@darkFlavor); + } + :root[data-theme="light"][data-bg-theme] { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --bg: @base; + --bg-subtle: @mantle; + --bg-muted: @crust; + --bg-elevated: @surface0; + + --fg: @text; + --fg-subtle: @overlay1; + --fg-muted: @subtext0; + --fg-elevated: @subtext0; + + --accent: @accent; + --accent-muted: @accent; + + --border: @surface1; + --border-subtle: @surface0; + --border-hover: @overlay0; + + --swatch-sky: @sky; + --swatch-coral: @peach; + --swatch-amber: @yellow; + --swatch-emerald: @green; + --swatch-violet: @mauve; + --swatch-magenta: @pink; + --swatch-neutral: @text; + + --badge-orange: @peach; + --badge-yellow: @yellow; + --badge-green: @green; + --badge-cyan: @teal; + --badge-blue: @blue; + --badge-indigo: @lavender; + --badge-purple: @mauve; + --badge-pink: @pink; + + --colors-red-500: @red; + --colors-emerald-500: @green; + --colors-yellow-600: @yellow; + --colors-amber-500: @peach; + --colors-emerald-400: @green; + --colors-orange-500: @peach; + } +} diff --git a/styles/ollama/catppuccin.user.less b/styles/ollama/catppuccin.user.less index d25172300f..a8aff3d63b 100644 --- a/styles/ollama/catppuccin.user.less +++ b/styles/ollama/catppuccin.user.less @@ -2,7 +2,7 @@ @name Ollama Catppuccin @namespace github.com/catppuccin/userstyles/styles/ollama @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/ollama -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/ollama/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aollama @description Soothing pastel theme for Ollama @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("ollama.com") { @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.css"); diff --git a/styles/openmediavault/catppuccin.user.less b/styles/openmediavault/catppuccin.user.less index 0ce957c96f..bb59a253f2 100644 --- a/styles/openmediavault/catppuccin.user.less +++ b/styles/openmediavault/catppuccin.user.less @@ -2,7 +2,7 @@ @name openmediavault Catppuccin @namespace github.com/catppuccin/userstyles/styles/openmediavault @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/openmediavault -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/openmediavault/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aopenmediavault @description Soothing pastel theme for openmediavault @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("openmediavault.example.com") { :root { diff --git a/styles/paste.rs/catppuccin.user.less b/styles/paste.rs/catppuccin.user.less index 69eda3ca07..0e1ca5323c 100644 --- a/styles/paste.rs/catppuccin.user.less +++ b/styles/paste.rs/catppuccin.user.less @@ -2,7 +2,7 @@ @name paste.rs Catppuccin @namespace github.com/catppuccin/userstyles/styles/paste.rs @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/paste.rs -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/paste.rs/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apaste.rs @description Soothing pastel theme for paste.rs @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("paste.rs") { :root { diff --git a/styles/perplexity/catppuccin.user.less b/styles/perplexity/catppuccin.user.less index c8009c37d8..7ee8add2a8 100644 --- a/styles/perplexity/catppuccin.user.less +++ b/styles/perplexity/catppuccin.user.less @@ -2,7 +2,7 @@ @name Perplexity Catppuccin @namespace github.com/catppuccin/userstyles/styles/perplexity @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/perplexity -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/perplexity/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aperplexity @description Soothing pastel theme for Perplexity @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("perplexity.ai") { :root:not([data-color-scheme="dark"]) { diff --git a/styles/phanpy/catppuccin.user.less b/styles/phanpy/catppuccin.user.less index 667c2fcbc4..fec686467e 100644 --- a/styles/phanpy/catppuccin.user.less +++ b/styles/phanpy/catppuccin.user.less @@ -2,7 +2,7 @@ @name Phanpy Catppuccin @namespace github.com/catppuccin/userstyles/styles/phanpy @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/phanpy -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/phanpy/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aphanpy @description Soothing pastel theme for Phanpy @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("phanpy.social") { :root:not(:has(.is-light)) { diff --git a/styles/picrew/catppuccin.user.less b/styles/picrew/catppuccin.user.less index f595e744f3..9e07443ef4 100644 --- a/styles/picrew/catppuccin.user.less +++ b/styles/picrew/catppuccin.user.less @@ -2,7 +2,7 @@ @name Picrew Catppuccin @namespace github.com/catppuccin/userstyles/styles/picrew @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/picrew -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/picrew/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apicrew @description Soothing pastel theme for Picrew @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("picrew.me") { :root { diff --git a/styles/pinterest/catppuccin.user.less b/styles/pinterest/catppuccin.user.less index bbce01d7b1..895b331087 100644 --- a/styles/pinterest/catppuccin.user.less +++ b/styles/pinterest/catppuccin.user.less @@ -2,7 +2,7 @@ @name Pinterest Catppuccin @namespace github.com/catppuccin/userstyles/styles/pinterest @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/pinterest -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/pinterest/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apinterest @description Soothing pastel theme for Pinterest @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document regexp( "^https?:\\/\\/(www|[a-z]{2}).pinterest.(com(.(au|mx))?|co(.(uk|kr))?|at|ca|ch|cl|de|dk|es|fr|ie|it|jp|nz|ph|pt|ru|se)\\/.*" @@ -24,6 +24,7 @@ @media (prefers-color-scheme: light) { #catppuccin(@lightFlavor); } + @media (prefers-color-scheme: dark) { #catppuccin(@darkFlavor); } @@ -33,1097 +34,241 @@ #lib.palette(); #lib.defaults(); - --color-text-light: @mantle; - --color-text-dark: @text; - --color-text-default: @text; - --color-text-inverse: @mantle; - --color-text-subtle: @subtext0; - --color-text-error: @red; - --color-text-shopping: @accent; - --color-text-link: @accent; - --color-text-formfield-default: @text; - - --color-text-icon-light: @subtext1; - --color-text-icon-dark: @mantle; - --color-text-icon-default: @subtext0; - --color-icon-subtle: @subtext1; - --color-text-icon-inverse: @mantle; - --color-text-icon-subtle: @subtext0; - --color-text-icon-error: @red; - --color-text-icon-brand-primary: @accent; - - --color-background-light: if((@flavor = latte), @mantle, @subtext1); - --color-background-dark: if((@flavor = latte), @text, @mantle); - --color-background-default: @base; - --color-background-inverse-base: @subtext1; - --color-background-primary-base: @accent; - --color-background-secondary-base: @mantle; - --color-background-secondary-active: @mantle; - --color-background-selected-base: @subtext1; - --color-background-box-default: @mantle; - --color-background-box-dark: @text; - --color-background-box-selected: @accent; - --color-background-box-primary: @accent; - --color-background-box-secondary: @surface0; - --color-background-box-info-base: @blue; - --color-background-box-info-weak: fade(@blue, 20%); - --color-background-box-darkwash: @surface1; - --color-background-overlay: @surface0; - --color-background-popover-primary: @base; - --color-background-popover-secondary: @overlay2; - --color-background-tag-primary-hover: @surface2; - --color-background-box-light: @base; - --color-background-button-secondary-default: @surface0; - --color-background-button-secondary-hover: @surface1; - --color-background-button-secondary-active: @surface2; - --color-background-button-selected-default: @subtext1; - --color-background-button-tertiary-hover: fade(@surface2, 10%); - --color-background-button-shopping-default: @blue; - --color-background-button-shopping-hover: darken(@blue, 12%); - --color-background-tag-primary-default: @surface1; - --color-background-button-disabled-default: @surface0; - --color-background-formfield-primary: @base; - --color-background-avatar-placeholder: @mantle; - --color-background-tabs-default-base: @base; - --color-background-tabs-default-hover: @surface0; - --color-background-button-semitransparentwhite-default: fade(@base, 80%); - --color-background-button-semitransparentwhite-hover: @surface0; - --color-background-button-semitransparentdefault-default: fade( - @surface1, - 80% - ); - --color-background-button-semitransparentdefault-hover: @surface2; - --color-background-switch-default-selected: @accent; - --color-background-switch-default-unselected: @base; - --color-background-switch-hover-selected: @accent; - --color-background-switch-hover-unselected: @surface0; - --color-background-switch-pressed-selected: fade(@accent, 50%); - --color-background-switch-pressed-unselected: fade(@accent, 50%); - --color-background-checkbox-disabled: darken(@mantle, 2%); - --color-background-checkbox-checked-default: @accent; - --color-background-checkbox-checked-: @red; - --color-background-checkbox-unchecked-default: @base; - --color-background-checkbox-unchecked-: @red; - --color-border-container: @surface1; - --color-border-default: @mantle; - --color-border-popover-primary: @surface0; - --color-border-popover-secondary: @text; - --color-border-focus: fade(@blue, 50%); - --color-border-switch-default-selected: @surface2; - --color-border-switch-default-unselected: @surface2; - --color-border-switch-focus-inner: @surface2; - --color-border-switch-focus-outer: @surface2; - --color-border-switch-hover-unselected: @surface2; - --color-border-switch-pressed-unselected: @surface2; - --color-border-checkbox-checked-default: @accent; - --color-border-checkbox-checked-: @red; - --color-border-checkbox-disabled: darken(@mantle, 2%); - --color-border-checkbox-unchecked-default: @surface1; - --color-border-checkbox-unchecked-: @red; - --color-border-checkbox-unchecked-hover: @surface2; - --color-border-checkbox-unchecked-pressed: fade(@accent, 50%); - --color-text-success: @green; - --color-text-warning: @yellow; - --color-icon-default: @subtext1; - --color-icon-dark: @subtext1; - --color-icon-success: @green; - --color-icon-warning: @yellow; - --color-icon-: @red; - --color-icon-info: @blue; - --color-icon-recommendation: @mauve; - --color-icon-brand-primary: @accent; - --color-icon-inverse: @crust; - --color-background-brand: @accent; - --color-background-box-brand: @accent; - --color-background-button-primary-default: @accent; - --color-background-button-primary-hover: desaturate( - darken(@accent, 12%), - 20% - ); - --color-background-button-primary-active: desaturate( - darken(@accent, 30%), - 30% - ); - --color-background-button-white-default: @base; - --color-background-button-white-hover: @surface0; - --color-background-badge-warning: @yellow; - --color-background-badge-success: @green; - --color-background-education: @blue; - --color-background-primary-strong: @accent; - --color-background-shopping: @blue; - - --g-colorTransparentWhite: fade(@base, 70%); - --g-colorTransparentDarkGray: fade(@mantle, 80%); - --g-colorGray0: @mantle; - --g-colorGray0Hovered: darken(@mantle, 2.5%); - --g-colorGray0Active: darken(@mantle, 5%); - --g-colorGray50: @mantle; - --g-colorGray100: @mantle; - --g-colorGray100Hovered: darken(@surface0, 2.5%); - --g-colorGray100Active: darken(@surface0, 5%); - --g-colorGray200: @subtext0; - --g-colorGray300: @subtext1; - --g-colorRed100: @accent; - --g-colorRed100Hovered: darken(@accent, 7.5%); - --g-colorRed100Active: darken(@accent, 10%); - --g-color-focus: fade(@accent, 50%); - --color-gray-roboflow-400: @surface2; - --color-gray-roboflow-200: @mantle; - - --g-blue: @accent; - --color-background-info-base: @blue; - --color-background-error-base: @red; - --color-background-warning-base: @peach; - --color-background-success-base: @green; - - // Currently unsupported syntax by the Less parser the Deno formatter uses, see https://github.com/g-plane/raffia/issues/9. - - // @colors: { - // 01: @blue; - // 02: @teal; - // 06: @sapphire; - // 07: @green; - // 08: @yellow; - // 09: @pink; - // 10: @mauve; - // 11: @crust; - // }; - - // each(@colors, { - // --color-background-searchguide-default-@{key}: @value; - // --color-background-searchguide-hover-@{key}: if(@key = 11, @value, lighten(@value, 4%)); - // }); - - --color-background-searchguide-default-01: @blue; - --color-background-searchguide-hover-01: lighten(@blue, 4%); - - --color-background-searchguide-default-02: @teal; - --color-background-searchguide-hover-02: lighten(@teal, 4%); - - --color-background-searchguide-default-06: @sapphire; - --color-background-searchguide-hover-06: lighten(@sapphire, 4%); - - --color-background-searchguide-default-07: @green; - --color-background-searchguide-hover-07: lighten(@green, 4%); - - --color-background-searchguide-default-08: @yellow; - --color-background-searchguide-hover-08: lighten(@yellow, 4%); - - --color-background-searchguide-default-09: @pink; - --color-background-searchguide-hover-09: lighten(@pink, 4%); - - --color-background-searchguide-default-10: @mauve; - --color-background-searchguide-hover-10: lighten(@mauve, 4%); - - --color-background-searchguide-default-11: @crust; - --color-background-searchguide-hover-11: @crust; - + &, body { - background-color: @base; color: @text; - } + background: @base; + } + + --sema-color-background-default: @base; + --sema-color-background-secondary: @surface0; + --sema-color-hover-background-secondary: @surface1; + --sema-color-background-tertiary: @overlay0; // send message to conversation button + --sema-color-hover-background-tertiary: @overlay2; + --sema-color-text-default: @text; + --sema-color-text-subtle: @subtext1; + --sema-color-text-link: @accent; // links / messages username + --sema-color-text-dark: @text; // commenter username / bar pills text + --sema-color-text-light: if( + @flavor = latte, + @base, + @text + ); // Explore suggested articles link + --sema-color-icon-primary: @accent; // logo + --sema-color-icon-inverse: @mantle; + --sema-color-border-decorative: @surface2; + --sema-color-border-interactive: @overlay0; // form inputs + --sema-color-hover-border-interactive: @overlay1; + --sema-color-border-focus-outer-default: @accent; + --sema-color-border-focus-inner-default: @base; + --sema-color-border-disabled: @surface1; + --sema-color-icon-disabled: @subtext0; // board actions in organize mode - /* the void (parts not loaded yet) */ - background: @base !important; + /* Pins */ + --sema-color-background-primary: @accent; + --sema-color-hover-background-primary: darken(@accent, 5%); + --sema-color-background-wash-light: @base; + --sema-color-pressed-background-primary: darken(@accent, 5%); + --comp-button-color-background-primary-selected: @surface1; // select dropdown + --comp-button-color-background-tertiary-semi-transparent-default: fade( + @base, + 50% + ); // pin action + --comp-button-color-hover-background-tertiary-semi-transparent-default: fade( + @base, + 50% + ); - /* Loading screen logo */ - .animatedLogo { - [fill="#E60023"] { - fill: @accent !important; - } - [fill="white"] { - fill: @crust !important; + [data-test-id="more-description-container"] { + background-color: @base !important; + [style*="background: linear-gradient"] { + background: linear-gradient(90deg, transparent 0%, @base 100%) + !important; } } - - .EmojiPickerReact { - --epr-bg-color: @base; - --epr-text-color: @text; - --epr-picker-border-color: @base; - --epr-category-label-bg-color: @base; - --epr-search-input-bg-color: @mantle; - --epr-skin-tone-picker-menu-color: @mantle; - --epr-category-icon-active-color: @accent; - --epr-highlight-color: @accent; - --epr-hover-bg-color: @surface0; - --epr-focus-bg-color: @surface0; + [data-test-id="closeup-metadata-details-divider"] { + border-top-color: var(--sema-color-border-decorative) !important; } - - .C1J, - .LI1.iyn[focus-within], - .iyn:focus, - ._gestalt .react-datepicker__month-select:focus, - ._gestalt .react-datepicker__year-select:focus { - box-shadow: 0 0 0 4px var(--g-color-focus); + [data-test-id="PinBetterSaveDropdown"] { + --sema-color-text-inverse: @text; + --sema-color-icon-inverse: @text; } - .NUb { - color: var(--color-text-inverse); - } - // loading screen - .mainContainer > div[style*="0.5"] { - background-color: @base !important; - } + --sema-color-text-error: @red; + --sema-color-background-error-default: @maroon; + --sema-color-icon-error: @red; + --sema-color-border-error: @red; - // Profile button - // Invite collaborators buttons - div[style="border: 1px solid white;"], - div[data-test-id="gestalt-avatar-svg"] { - outline-color: @base !important; - border-color: @base !important; + /* Boards */ + --sema-color-background-checked: @accent; // "Secret" toggle + --sema-color-hover-background-checked: darken(@accent, 5%); + --sema-color-pressed-background-checked: darken(@accent, 10%); + --comp-switch-color-background-container-enabled-off: @surface2; + --comp-switch-color-hover-background-container-enabled-off: @overlay0; + --comp-button-color-hover-background-secondary-default: @surface1; // "Cancel" button hover - .WhU { - background-color: @surface1; - } + [data-test-id="profile-board-card"] [style*="border-color: white;"] { + // pin preview collage images + border-color: @base !important; } - div#mweb-unauth-container, - div#mainContainer { - background-color: @base !important; - } + --sema-color-border-inverse: @base; // around profile pictures under previews + --sema-color-pressed-background-default: @surface2; // "Edit" icon / edit modal "X" icon buttons + --comp-button-color-pressed-background-secondary-default: @surface2; // active "View profile" button + --sema-color-pressed-background-elevation: @surface2; // plus action - // "Accounts and more options" popup - div#HeaderAccountOptionsFlyout { - background-color: @mantle; - border-color: transparent; - // external link icons - .Hn_.Uvi.gUZ { - color: var(--color-text-icon-light); + // "select and reorder" / organize + [data-test-id="pinRepSelectionBorder"] { + &[style*="border-color: rgb(255, 255, 255);"] { + border-color: @base !important; } - } - - div[role="tooltip"] { - background-color: @surface0; - color: @text; - .B1n { - color: @text; + &[style*="box-shadow: rgb(255, 255, 255) 0px 0px 0px 3px inset;"] { + box-shadow: @accent 0 0 0 3px inset !important; } } - /* Header & Search */ - - div[data-test-id="header-Header"] div.P_h span.xnr { - color: @text !important; + /* Sidebar */ + --sema-color-icon-default: @text; + --sema-color-hover-background-default: @surface0; + --base-color-grayscale-100: @surface0; // border + [aria-label="You have new Updates"] { + --sema-color-text-light: @base; // notification badge } - - // search - div[data-test-id="dynamic-search-placeholder"] > div.Lfz.MIw.zI7.iyn.Hsu { - &.ojN, - &.QLY { - display: none; - } + // Explore + [data-test-id="topic-rep-title"] { + --sema-color-text-inverse: @text; // Explore categories } - - // make top bar match - div[data-test-id="header-background"] { - background-color: @base; + --sema-color-background-elevation: @mantle; + --sema-color-hover-background-elevation: @base; + // Create + --sema-color-icon-dark: @text; + [data-test-id="drag-behavior-container"] { + --sema-color-text-default: if( + @flavor = latte, + @text, + @surface2 + ); // drag container error } + // Tooltips + --sema-color-background-inverse: @text; + --sema-color-text-inverse: @base; - button[data-test-id="one-bar-pill"] { - --color-text-dark: var(--color-text-inverse); - } + /* Search */ + --sema-color-icon-subtle: @overlay2; - div[data-test-id="product-price-filter-one-bar-pill"] - button[data-test-id="one-bar-pill"] - svg { - color: @base !important; - } - div[data-test-id="one-bar-navigation-arrows"] { - background: - linear-gradient(to left, @base, transparent 40px), - linear-gradient(to right, @base, transparent 40px) !important; - } + #searchBoxContainer > div { + background-color: @mantle !important; - div#searchBoxContainer { - // search bar - > div { - background-color: @mantle !important; + > div[style*="box-shadow:"] { + // on focus + box-shadow: fade(@accent, 50%) 0 0 0 4px !important; } - div[style*="box-shadow: rgba(0, 132, 255, 0.5) 0px 0px 0px 4px"] { - box-shadow: 0 0 0 4px var(--g-color-focus) !important; + // divider + [style*="background:#d8d8d8;"], + [style*="background: rgb(216, 216, 216);"] { + background: @surface1 !important; } input { color: @subtext1 !important; } - - div.MMh._Y5.feh.s7I.zI7.iyn.Hsu { - background-color: @surface2 !important; - } } - // make selected search suggestions darker - div[aria-selected="true"][data-test-id="search-suggestion"] { - .C9q.Jea.KS5.Lfz.TMJ.XiG.Zr3.zI7.iyn.Hsu { - background-color: @surface0; - } + [id^="SuggestionGroup-Option"][aria-selected="true"] > a > div { + background-color: @surface1; } /* Home */ - - div.moreIdeasBoardRepCarousel - div[data-carousel-indicator="carousel-card"] - div.Jea.XiG.hA-.ho-.zI7.iyn.Hsu { - background-color: @mantle !important; - } - - div.moreIdeasBoardRepCarousel & ~ div.MIw.QLY.zI7.iyn.Hsu { - background: none !important; - } - - /* Nav */ - nav#VerticalNavContent { - a[data-test-id="home-tab"] div { - &[style*="M11.3217 0.307444C11.7345 0.0407477"] { - @svg: escape( - '' - ); - background-image: url(~"data:image/svg+xml,@{svg}") !important; - } - &[style*="M21.6834 22H2.31659V7.61275"] { - @svg: escape( - '' - ); - background-image: url(~"data:image/svg+xml,@{svg}") !important; - } - } - - a[data-test-id="create-tab"] div { - &[style*="M19 3.5H5C4.17157 3.5"] { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - &[style*="M12 4.75C12.6904 4.75"] { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - } - - div[aria-label*="Updates"] div { - &[style*="M16.5 14.227"] { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - &[style*="clip0_449_32470"] { - @svg: escape( - '' - ); - background-image: url(~"data:image/svg+xml,@{svg}") !important; - } - } - - div[data-test-id="notifications-button"] div[style*="background-image"] { - &[style*="clip0_800_18532"] { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - &[style*="clip0_449_32468"] { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - } - - div[data-test-id="vertical-nav-more-options-button"] div { - &[style*="clip0_449_32461"] { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - &[style*="clip0_449_32472"] { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - } - - a[data-test-id="today-tab"] div { - &[style*="clip0_449_32453"] { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - &[style*="clip0_449_32464"] { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - } - } - - div[data-test-id="homefeed-feed"] { - div[style*="background-color:#ffffff"], - div[style*="background-color: rgb(255, 255, 255)"] { - background-color: @base !important; - } - } - - /* Pins */ - - // image container - [data-test-id="closeup-image-main"] div div { - background-color: @mantle !important; - } - - button[data-test-id="PinBetterSaveDropdown"] { - div[title], svg { - color: if(@flavor = latte, var(--color-text-inverse), @text) !important; - } - .G0a div[title], .G0a svg { - color: var(--color-text-inverse) !important; - } - } - - // pin icons - button[data-test-id="feedback-button"], - div[data-test-id="share-icon-button"] { - div div { - background-color: @base; - &:hover { - background-color: @surface0; - } - } - } - - // board name to save to - // preview / dropdown - [data-test-id="PinBetterSaveDropdown"], - div[data-test-id="boardSelectionDropdown"] { - .B1n { - color: var(--color-text-light); - } - .AR6 { - color: var(--color-text-light); - } - // background when opened - .G0a { - background-color: @subtext0 !important; - } - } - - div[data-test-id="savedInfo"] a { - background-color: transparent !important; - - div { - color: if(@flavor = latte, var(--color-text-inverse), @text) !important; - } - } - - div[data-test-id="PinTypeIdentifier"] { + [data-test-id="homefeed-feed"] + div:has( + > [data-root-margin="more-ideas-tabs"] + )[style*="background-color: rgb(255, 255, 255);"] { background-color: @base !important; - color: @text !important; - } - - div[data-test-id="persistent-one-click-save"] { - div[style="background-color: rgba(255, 255, 255, 0.85);"] { - background-color: @mantle !important; - } - - a { - background-color: transparent !important; - } - } - - div[style="padding-bottom: 100%; box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px;"] { - box-shadow: 0 0 0 1px @crust !important; - } - - // "Saved to" popup - div[role="status"], - div[data-test-id="toast"] { - // needed for Latte - .X8m { - color: @text !important; - } - // "Removed from your board" text after pressing undo - .B1n { - color: @text !important; - } - // popup color - .b0h { - background-color: @surface0; - } - // undo button - .a_A { - background-color: @surface1; - } - } - - // back of send and ... buttons on pins - .NSs { - background-color: @mantle !important; } - // Save button - button[aria-label="Save"] { - // text - .B1n { - color: var(--color-text-inverse); - } - } + --sema-color-background-selected: @accent; // active tab underline + --sema-color-hover-background-selected: darken(@accent, 5%); + --sema-color-pressed-background-selected: darken(@accent, 10%); - // Button when saved - button[aria-label="Pin Saved"] { - // text - .B1n { - color: var(--color-text-light); - } - // background - .kJo { - background-color: @surface0; - } - // border - .gSJ { - border-color: transparent; - } - } - - // pin editing popout - // text - .X8m.zDA.IZT.tBJ.dyH.iFc.j1A.swG { - color: @text !important; - } - // buttons when hovered - .TzN { - background-color: @surface0 !important; - } - // pin notes - textarea[id="PinNoteField"] { - color: @text; - } - - /* Pin page */ - - // pin body shadow - div[data-test-id="closeup-body-style"] { - box-shadow: 0 1px 20px 0 fade(@text, 15%) !important; - background-color: @mantle; - } - - div[data-test-id="closeup-body-sticky-content"] { - background-color: @mantle; - } - - div[data-test-id="closeup-action-items"] { - background-color: @mantle; - .imm { - background-color: @mantle; - } - } - - // pin discover bubble - div[data-test-id="discover-bubble"] div div { - color: if(@flavor = latte, @base, @text) !important; - } - - // comment bar - div[data-test-id="comment-editor-container"] { - color: @text !important; - } - div[data-test-id="inline-comment-composer-container"] { - border-color: @mantle !important; - background: @mantle !important; - } - - div.public-DraftEditorPlaceholder-root { - color: @subtext1 !important; - } - .LJB.Pw5.XgI.fev.ujU.wsz.zI7.iyn.Hsu { - border-color: @surface0 !important; - } - - div[data-test-id="more-description-container"], - div[data-test-id="less-description-container"] { + // share modal + [data-test-id="lego-share-social-bar-auth"] button { background-color: @base !important; - div:first-child { - background: linear-gradient(90deg, transparent 0%, @base 100%) - !important; - } - } - - div[data-test-id="truncated-text"] { - div[data-test-id="more-button"] { - background: linear-gradient( - 90deg, - transparent 0%, - @base 15% - ) !important; - } - - div[style="background: rgb(255, 255, 255);"] { - background-color: @base !important; - } - } - - div[data-test-id="media-viewer-button"], - div[data-test-id="flashlight-button"], - div[data-test-id="flashlight"], - div[data-test-id="shop-button"] { - background-color: fade(@base, 85%) !important; - } - - div[data-test-id="flashlight-dot-style"] { - background-color: var(--color-text-light); - } - - div[data-test-id="visual-search-cropper"] { - path.v2cropperHandle { - fill: var(--color-text-light) !important; - } - - use.v2cropSection { - stroke: var(--color-text-light) !important; - } - } - - textarea#pinNoteText { - background-color: transparent; - color: @subtext1; - caret-color: @text; - } - div[data-test-id="react-button"] { - .Jea.KS5.mQ8.zI7.iyn.Hsu { - //background-color: @accent; - color: @accent; - } - div:hover { - background-color: @surface0 !important; - border-radius: var(--rounding-circle); - } - div div { - div[style*='background-image: url("https://s.pinimg.com/webapp/reactionHeartOutline-24ab75a6.svg")'] { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - div[style*='background-image: url("https://s.pinimg.com/webapp/loveStatic-31fc2a99.svg")'] { - @darkened-red: darken(@red, 50%); - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - } - } - - // remove "More to explore" bar - div[data-test-id="related-modules-header"] { - .Jea.KS5.LCN.X6t.hUC.imm.jzS.mQ8.zI7.iyn.Hsu { - background-color: transparent; - } - } - - /* Video and story pins */ - - div[data-test-id="visual-content-container"] video ~ div { - svg { - color: var(--color-text-icon-light) !important; - } - - div[role="progressbar"] > div { - background-color: var(--color-text-icon-light) !important; - } - } - - div[data-test-id="closeup-data-loaded"] div.Jea.Rym.zI7.iyn.Hsu { - svg, - span { - color: var(--color-text-icon-light) !important; - } - } - - /* Profile */ - - div[data-test-id="profile-board-card"] div, - div#profileBoardsFeed div[data-test-id="board-card"] div, - div[style="border: 1px solid white; border-radius: 16px;"] { - border-color: @crust !important; - } - - div.SaveButton__background--enabled { - background-color: @accent !important; - color: @mantle !important; - } - - div[data-test-id="savedInfo"] a h3 { - color: var(--color-text-light) !important; - } - - a[aria-label="More ideas"] { - .TzN { - background-color: @surface0; - } - } - - a[aria-label="Organize"] { - .TzN { - background-color: @surface0; - } - } - - // remove profile bar - .imm { - background-color: @base; - } - - // Hide ugly block around section previews - .imm[data-test-id^="section"] { - background-color: transparent; } /* Settings */ - - input[type="checkbox"] ~ div { - border-color: var(--color-border-switch-default-unselected) !important; - } - - button[disabled=""] div { - color: @overlay0 !important; - } - - div.tBJ.dyH.iFc.sAJ.xnr.tg7.IZT.swG { - color: var(--color-text-light) !important; - } - - /* Share */ - - div[data-test-id="lego-share-social-bar-auth"] button, - div[data-test-id="copy-link-share-icon-auth"] div.zI7.iyn.Hsu { - background-color: transparent !important; - } - - div[data-test-id="email-share-button-auth"] svg { - rect { - fill: @mantle !important; - } - - path { - fill: @subtext1 !important; - } - } - - div[data-test-id="sharesheet-contact-item-sent-icon"] svg { - color: @text; - } - - div[data-test-id="sharesheet-contact-item-button"] - div[style="background-color: rgb(239, 239, 239); padding-bottom: 100%;"] { - background-color: @mantle !important; - } + --sema-color-text-disabled: @overlay2; // disabled "Reset"/"Save" buttons /* Messages */ - textarea#messageDraft { - background-color: transparent; + background-color: transparent !important; color: @subtext1; caret-color: @text !important; } - textarea[data-gestalt-valid-html="TextArea"] { - background-color: transparent !important; - } - div[data-test-id="add-pin-to-conversation"] { - div[style="border: 1px solid rgb(218, 218, 218); box-shadow: rgba(0, 132, 255, 0) 0px 0px 0px 4px; padding: 4px 15px; min-height: 48px; width: 100%;"] { + div[style="border: 1px solid rgb(218, 218, 218); box-shadow: rgba(0, 132, 255, 0) 0px 0px 0px 4px; min-height: 48px; width: 100%;"] { border-color: @mantle !important; } - div[style="border: 1px solid transparent; box-shadow: rgba(0, 132, 255, 0.5) 0px 0px 0px 4px; padding: 4px 15px; min-height: 48px; width: 100%;"] { - box-shadow: 0 0 0 4px var(--g-color-focus) !important; - } - } - - /* Create */ - - div[style*="background-color: rgba(255, 255, 255, 0.8); margin: 24px 0px 0px; z-index:"] { - background-color: fade(@base, 80%) !important; - } - - input#scrape-view-website-link { - background-color: @base !important; - } - - div[data-test-id="image-from-search-container"] { - --color-text-icon-inverse: @subtext1; - } - - div[data-test-id="storyboard-draft-placeholder-rep"] div.ho-.zI7.iyn.Hsu { - background-color: @mantle !important; - background-image: linear-gradient( - to right, - @mantle 0%, - @crust 20%, - @mantle 40%, - @mantle 100% - ) !important; - } - - div[data-test-id="drafts-container"] { - --color-text-dark: var(--color-text-default); - - div[style="border-color: rgb(17, 17, 17);"] { - border-color: @crust !important; - } - } - - div[data-test-id="drag-behavior-container"] { - background-color: @surface1 !important; - } - - div[data-test-id="drag-behavior-container"] div div { - border-color: @surface2 !important; - } - - div[data-test-id="drag-behavior-container"] svg { - color: @subtext1; - } - - div[data-test-id="storyboard-pin-card-item"] { - border-color: @crust !important; - } - - button[data-test-id="board-dropdown-select-button"] { - background-color: @base !important; - - span { - color: @subtext1 !important; - } - } - - div[data-test-id="storyboard-interest-tags"] - div[style="background-color: rgb(17, 17, 17);"] { - background-color: @subtext1 !important; - } - - div[data-test-id="editor-canvas-container"] div { - border-color: @accent !important; - } - - input[data-test-id="storyboard-editor-details-text-size"] { - background-color: @mantle !important; - color: @text !important; - border-color: @crust !important; - } - - div[data-test-id="storyboard-editor-details-text-color-picker"] { - input { - color: @text !important; - background-color: transparent !important; - } - - .LJB { - border-color: @crust !important; - } - - div[style="height: 40px; box-shadow: rgb(239, 239, 239) 0px 0px 0px 2px inset;"] { - box-shadow: 0 0 0 2px @crust inset !important; - } - } - - div[role="tablist"] button[aria-selected="true"] { - background-color: @crust !important; - } - - input[type="text"], - input[type="search"] { - color: @text; - } - - /* Explore */ - - // articles - div[data-test-id="suggested-articles-link"], - div[data-test-id="shopping-spotlight-article"] { - div[data-test-id="hero-module-subtitle"] div, - div[data-test-id="hero-module-title"] h2, - div[data-test-id="hero-module-title"] h3 { - color: if(@flavor = latte, @base, @text) !important; + div[style="border: 1px solid transparent; box-shadow: rgba(0, 132, 255, 0.5) 0px 0px 0px 4px; min-height: 48px; width: 100%;"] { + box-shadow: fade(@accent, 50%) 0 0 0 4px !important; } } - // today article header - div[data-test-id="today-article-header"] { - div[data-test-id="today-article-subtitle"] div, - div[data-test-id="today-article-title"] h1 { - color: if(@flavor = latte, @base, @text) !important; - } - } - - /* Login */ - - div[data-test-id="signup-default-modal"], - div[data-test-id="login-modal-default"], - div[data-test-id="login-modal-mfa"] { + /* Loading */ + .mainContainer + > div[style*="background-color: rgba(255, 255, 255, 0.5); height: 100%; width: 100%; z-index: 1;"] { background-color: @base !important; - - h1 { - color: @text !important; - } - - p { - color: @subtext0 !important; - } - - button[data-test-id="login-signup-toggle"] { - color: @accent !important; - } - - button.red.active { - background-color: @accent !important; - color: @crust !important; - } - - button.red.active:hover, - button.red.active:focus { - background-color: darken(@accent, 2.5%) !important; - } - - span[data-test-id="terms-of-service"], - div[style="margin-top: 15px; color: rgb(51, 51, 51);"] { - color: @subtext1 !important; - - a { - color: @accent !important; - } - } } - /* Not logged in */ - - div[style="height: 200px; background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 70%);"] { - background: linear-gradient( - fade(@base, 0%) 0%, - @base 70% - ) !important; - } - - div#mweb-unauth-container div.HFo.Jea.KS5._he.zI7.iyn.Hsu, - div[data-test-id="header"] - div[style="background-color: rgba(255, 255, 255, 0.95); height: 100%; width: 100%;"] { - background-color: @base !important; - } - - span[data-test-id="terms-of-service"] a { - color: @accent !important; - } - - div[data-test-id="breadcrumbs-list"] div.MIw.Rym.zI7.iyn.Hsu, - div[data-test-id="vase-carousel"] div[data-test-id="left-scroll-arrow"] { - background-image: linear-gradient( - to left, - fade(@base, 0%), - @base - ) !important; - } - - div[data-test-id="breadcrumbs-list"] div.MIw.p6V.zI7.iyn.Hsu, - div[data-test-id="vase-carousel"] div[data-test-id="right-scroll-arrow"] { - background-image: linear-gradient( - to right, - fade(@base, 0%), - @base - ) !important; - } - - div[data-test-id="standard-save-button"] { - span { - color: @mantle !important; - } - // save button hover - .vfW { - background: darken(@accent, 10%) !important; - } - } - - /* Other */ - - div[data-test-id="public-beta-page"] { - --color-text-light: @text; - --color-background-recommendation-weak: @crust; - } - - div[data-layout-shift-boundary-id="PageContainer"] { - --color-text-inverse: var(--color-text-light); + /* Emoji Picker */ + .EmojiPickerReact { + --epr-bg-color: @base; + --epr-text-color: @text; + --epr-picker-border-color: @base; + --epr-category-label-bg-color: @base; + --epr-search-input-bg-color: @mantle; + --epr-skin-tone-picker-menu-color: @mantle; + --epr-category-icon-active-color: @accent; + --epr-highlight-color: @accent; + --epr-hover-bg-color: @surface0; + --epr-focus-bg-color: @surface0; } - // pin side buttons background - .XiG.hUC.wYR.zI7.iyn.Hsu { - background: @base !important; + /* suggestion bar */ + --sema-color-pressed-background-secondary: @surface2; + [data-test-id="one-bar-pill"] { + --sema-color-text-dark: if(@flavor = latte, @text, @base); } - // pin external link on hover - a[rel="noopener noreferrer nofollow"]:has(svg[aria-label="Link"]) { - div[style^="background-color: rgba(255, 255, 255, 0.9)"] { - background: @surface0 !important; - } - div[style^="background-color: rgb(255, 255, 255)"] { - background: @surface1 !important; + [data-test-id="one-bar-navigation-arrows"] { + &[style*="to left"]:not([style*="to right"]) { + background: linear-gradient(to left, @base, transparent 40px) + !important; } - } - - // pin peek variant - div[data-test-id="peek-variant-shopping-module-container"] { - div[data-test-id="peek-variant-top-gradient"] { - background: linear-gradient(0deg, transparent 0%, @base 100%) + &[style*="to right"]:not([style*="to left"]) { + background: linear-gradient(to right, @base, transparent 40px) !important; } - - div[style*="background: linear-gradient"]:not( - [data-test-id="peek-variant-top-gradient"] - ) { - background: linear-gradient(transparent 0%, @base 100%) !important; + &[style*="to left"][style*="to right"] { + background: + linear-gradient(to left, @base, transparent 40px), + linear-gradient(to right, @base, transparent 40px) !important; } } - - // pin shopping - div[data-testid="product-metadata-details-flex"] { - div[style*="border-top"] { - border-color: @surface0 !important; - } - } - - div[id*="product-sticky-container"] div#imageContainerPerf { - div[style*="background-image"] { - &[style*="linear-gradient(rgb(255, 255, 255)"] { - background: linear-gradient(@base 0%, transparent 90%) !important; - } - &[style*="linear-gradient(rgba(255, 255, 255, 0)"] { - background: linear-gradient(transparent 0%, @base 90%) !important; - } - } - - div[data-test-id="outline-box"] { - box-shadow: @subtext1 0 0 0 2px inset, @base 0 0 0 4px inset !important; - } + [data-test-id="multi-select-filter-fade-bottom-edge"] { + background: linear-gradient(0deg, @base 0%, transparent 100%) !important; } - // "more" buttom - [aria-label="more"] { - .NSs { - background: @surface0; - } - } + /* Toasts */ + --comp-toast-color-background-default: @overlay2; - // mobile mask - [data-test-id="mobile-signup-mask"] { - background-color: @base !important; - border-color: @base !important; - div[style*="border"] { - border-color: var(--color-border-container) !important; + /* SaveButton */ + [data-test-id="SaveButton"] > [class^="SaveButton"] { + // Your saved ideas pins "Save" button + background-color: var(--sema-color-background-primary); + &:hover { + background-color: var(--sema-color-hover-background-primary); } } } diff --git a/styles/planet-minecraft/catppuccin.user.less b/styles/planet-minecraft/catppuccin.user.less index 0183f85c9f..4b251da78f 100644 --- a/styles/planet-minecraft/catppuccin.user.less +++ b/styles/planet-minecraft/catppuccin.user.less @@ -2,7 +2,7 @@ @name Planet Minecraft Catppuccin @namespace github.com/catppuccin/userstyles/styles/planet-minecraft @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/planet-minecraft -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/planet-minecraft/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aplanet-minecraft @description Soothing pastel theme for Planet Minecraft @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("planetminecraft.com") { [data-theme="light"] { diff --git a/styles/poe/README.md b/styles/poe/README.md new file mode 100644 index 0000000000..b50cfb329d --- /dev/null +++ b/styles/poe/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Poe + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [TheAnonymousCrusher](https://github.com/TheAnonymousCrusher) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/poe/catppuccin.user.less b/styles/poe/catppuccin.user.less new file mode 100644 index 0000000000..9264714345 --- /dev/null +++ b/styles/poe/catppuccin.user.less @@ -0,0 +1,122 @@ +/* ==UserStyle== +@name Poe Catppuccin +@namespace github.com/catppuccin/userstyles/styles/poe +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/poe +@version 2026.08.16 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/poe/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apoe +@description Soothing pastel theme for Poe +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; + +// Using `url-prefix `instead of `domain` prevents a broken theme on the Help Center (https://help.poe.com/). +@-moz-document url-prefix("https://poe.com") { + :root:not(.dark, .light) { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + :root { + &.dark { + #catppuccin(@darkFlavor); + } + &.light { + #catppuccin(@lightFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --pdl-bg-base: @mantle; + --pdl-bg-faint: @base; + --pdl-bg-muted: @surface0; + --pdl-bg-subtle: @surface1; + --pdl-bg-emphasis: @surface2; + + --pdl-fg-base: @text; + --pdl-fg-muted: @subtext1; + --pdl-fg-subtle: @subtext0; + + --pdl-bg-reverse: @text; + --pdl-fg-reverse: @base; + + --pdl-border-base: @surface1; + --pdl-border-emphasis: @overlay0; + + --pdl-accent-base: @accent; + --pdl-accent-on-accent: @base; + --pdl-fg-white: @base; + + --code-block-bg: @base; + + --pdl-error-base: @red; + + --pdl-success-base: @green; + --pdl-success-muted: fade(@green, 60%); + --pdl-success-on-success: @base; + + // Settings + --pdl-action-default-bg: @mantle; + --pdl-action-disabled-bg: @surface0; + --pdl-action-default-border: @surface2; + --pdl-action-hover-border: @overlay0; + --pdl-action-hover-border-accent: @accent; + --pdl-action-default-fg: @text; + --pdl-action-disabled-fg: @overlay2; + --violet-9: @accent; + --violet-10: @accent; + --violet-11: @accent; + --ruby-10: @red; // danger button text + --ruby-11: @red; // danger button hover text + + textarea { + color: @text; + } + + [class^="Tooltip_root"] { + --pdl-tooltip-bg: @surface0; + --pdl-tooltip-color: @text; + } + + // API + ul[data-pdl-sidebar-menu] { + li[data-pdl-sidebar-menu-item] { + --item-active-bg-color: @surface0; + --item-hover-bg-color: @surface1; + } + } + + // Login + --fade-bottom-gradual: linear-gradient( + to bottom, + transparent 0%, + fade(@crust, 50%) 60%, + @mantle 90%, + @mantle 100% + ); + --fg-base--ignore-light-mode: @text; + + // Logo (Login, Chat) + img[src^="https://psc2.cf2.poecdn.net/assets/_next/static/media/poeFullMultibot"], + img[src^="https://psc2.cf2.poecdn.net/assets/_next/static/media/poeFullWhiteMultibot"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } +} diff --git a/styles/porkbun/catppuccin.user.less b/styles/porkbun/catppuccin.user.less index 69645943db..65de0823f0 100644 --- a/styles/porkbun/catppuccin.user.less +++ b/styles/porkbun/catppuccin.user.less @@ -2,7 +2,7 @@ @name Porkbun Catppuccin @namespace github.com/catppuccin/userstyles/styles/porkbun @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/porkbun -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/porkbun/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aporkbun @description Soothing pastel theme for Porkbun @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("porkbun.com") { :root { diff --git a/styles/pronouns.cc/catppuccin.user.less b/styles/pronouns.cc/catppuccin.user.less index 08ca6fcc95..12cd181a74 100644 --- a/styles/pronouns.cc/catppuccin.user.less +++ b/styles/pronouns.cc/catppuccin.user.less @@ -2,7 +2,7 @@ @name pronouns.cc Catppuccin @namespace github.com/catppuccin/userstyles/styles/pronouns.cc @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/pronouns.cc -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/pronouns.cc/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apronouns.cc @description Soothing pastel theme for pronouns.cc @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("pronouns.cc") { :root[data-bs-theme="dark"] { diff --git a/styles/pronouns.page/catppuccin.user.less b/styles/pronouns.page/catppuccin.user.less index 2a947bb99d..6e2bcddaa3 100644 --- a/styles/pronouns.page/catppuccin.user.less +++ b/styles/pronouns.page/catppuccin.user.less @@ -2,7 +2,7 @@ @name Pronouns.page Catppuccin @namespace github.com/catppuccin/userstyles/styles/pronouns.page @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/pronouns.page -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/pronouns.page/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apronouns.page @description Soothing pastel theme for Pronouns.page @@ -15,9 +15,16 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; -@-moz-document domain("pronouns.page") { +@-moz-document domain("pronouns.page"), + domain("pronomen.net"), + domain("pronombr.es"), + domain("pronomejo.net"), + domain("fornovn.fo"), + domain("pronoms.fr"), + domain("pronom.it"), + domain("zaimki.pl") { body:not([data-theme="dark"]) { #catppuccin(@lightFlavor); } diff --git a/styles/proton/catppuccin.user.less b/styles/proton/catppuccin.user.less index a22e6f7a29..4a4b419865 100644 --- a/styles/proton/catppuccin.user.less +++ b/styles/proton/catppuccin.user.less @@ -2,7 +2,7 @@ @name Proton Catppuccin @namespace github.com/catppuccin/userstyles/styles/proton @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/proton -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/proton/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aproton @description Soothing pastel theme for Proton @@ -15,9 +15,11 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; -@-moz-document regexp("https://(account|mail|drive|calendar).proton.me/.*$") { +@-moz-document regexp( + "https://(account|mail|drive|calendar|lumo).proton.me/.*$" + ) { :root { @media (prefers-color-scheme: light) { #catppuccin(@lightFlavor); @@ -111,60 +113,61 @@ ); } - --primary-minor-2: #lightenOrDarken(@accent, 60%)[@result]; - --primary-minor-1: #lightenOrDarken(@accent, 50%)[@result]; + --primary-minor-2: #lightenOrDarken(@accent, 60%)[]; + --primary-minor-1: #lightenOrDarken(@accent, 50%)[]; --primary: @accent; - --primary-major-1: #darkenOrLighten(@accent, 4%)[@result]; - --primary-major-2: #darkenOrLighten(@accent, 8%)[@result]; - --primary-major-3: #darkenOrLighten(@accent, 12%)[@result]; + --primary-major-1: #darkenOrLighten(@accent, 4%)[]; + --primary-major-2: #darkenOrLighten(@accent, 8%)[]; + --primary-major-3: #darkenOrLighten(@accent, 12%)[]; --primary-contrast: @mantle; - --signal-danger-minor-2: #lightenOrDarken(@maroon, 40%)[@result]; - --signal-danger-minor-1: #lightenOrDarken(@maroon, 30%)[@result]; + --signal-danger-minor-2: #lightenOrDarken(@maroon, 40%)[]; + --signal-danger-minor-1: #lightenOrDarken(@maroon, 30%)[]; --signal-danger: @maroon; - --signal-danger-major-1: #darkenOrLighten(@maroon, 4%)[@result]; - --signal-danger-major-2: #darkenOrLighten(@maroon, 8%)[@result]; - --signal-danger-major-3: #darkenOrLighten(@maroon, 12%)[@result]; + --signal-danger-major-1: #darkenOrLighten(@maroon, 4%)[]; + --signal-danger-major-2: #darkenOrLighten(@maroon, 8%)[]; + --signal-danger-major-3: #darkenOrLighten(@maroon, 12%)[]; --signal-danger-contrast: @mantle; - --signal-warning-minor-2: #lightenOrDarken(@peach, 40%)[@result]; - --signal-warning-minor-1: #lightenOrDarken(@peach, 30%)[@result]; + --signal-warning-minor-2: #lightenOrDarken(@peach, 40%)[]; + --signal-warning-minor-1: #lightenOrDarken(@peach, 30%)[]; --signal-warning: @peach; - --signal-warning-major-1: #darkenOrLighten(@peach, 4%)[@result]; - --signal-warning-major-2: #darkenOrLighten(@peach, 8%)[@result]; - --signal-warning-major-3: #darkenOrLighten(@peach, 12%)[@result]; + --signal-warning-major-1: #darkenOrLighten(@peach, 4%)[]; + --signal-warning-major-2: #darkenOrLighten(@peach, 8%)[]; + --signal-warning-major-3: #darkenOrLighten(@peach, 12%)[]; --signal-warning-contrast: @mantle; - --signal-success-minor-2: #lightenOrDarken(@green, 40%)[@result]; - --signal-success-minor-1: #lightenOrDarken(@green, 30%)[@result]; + --signal-success-minor-2: #lightenOrDarken(@green, 40%)[]; + --signal-success-minor-1: #lightenOrDarken(@green, 30%)[]; --signal-success: @green; - --signal-success-major-1: #darkenOrLighten(@green, 4%)[@result]; - --signal-success-major-2: #darkenOrLighten(@green, 8%)[@result]; - --signal-success-major-3: #darkenOrLighten(@green, 12%)[@result]; + --signal-success-major-1: #darkenOrLighten(@green, 4%)[]; + --signal-success-major-2: #darkenOrLighten(@green, 8%)[]; + --signal-success-major-3: #darkenOrLighten(@green, 12%)[]; --signal-success-contrast: @mantle; - --signal-info-minor-2: #lightenOrDarken(@blue, 40%)[@result]; - --signal-info-minor-1: #lightenOrDarken(@blue, 30%)[@result]; + --signal-info-minor-2: #lightenOrDarken(@blue, 40%)[]; + --signal-info-minor-1: #lightenOrDarken(@blue, 30%)[]; --signal-info: @blue; - --signal-info-major-1: #darkenOrLighten(@blue, 4%)[@result]; - --signal-info-major-2: #darkenOrLighten(@blue, 8%)[@result]; - --signal-info-major-3: #darkenOrLighten(@blue, 12%)[@result]; + --signal-info-major-1: #darkenOrLighten(@blue, 4%)[]; + --signal-info-major-2: #darkenOrLighten(@blue, 8%)[]; + --signal-info-major-3: #darkenOrLighten(@blue, 12%)[]; --signal-info-contrast: @mantle; - --interaction-norm-minor-2: #lightenOrDarken(@accent, 40%)[@result]; - --interaction-norm-minor-1: #lightenOrDarken(@accent, 30%)[@result]; + --interaction-norm-minor-2: #lightenOrDarken(@accent, 40%)[]; + --interaction-norm-minor-1: #lightenOrDarken(@accent, 30%)[]; --interaction-norm: @accent; - --interaction-norm-major-1: #darkenOrLighten(@accent, 4%)[@result]; - --interaction-norm-major-2: #darkenOrLighten(@accent, 8%)[@result]; - --interaction-norm-major-3: #darkenOrLighten(@accent, 12%)[@result]; + --interaction-norm-major-1: #darkenOrLighten(@accent, 4%)[]; + --interaction-norm-major-2: #darkenOrLighten(@accent, 8%)[]; + --interaction-norm-major-3: #darkenOrLighten(@accent, 12%)[]; --interaction-norm-contrast: @mantle; - --interaction-weak-minor-2: #lightenOrDarken(@surface0, 20%)[@result]; - --interaction-weak-minor-1: #lightenOrDarken(@surface0, 10%)[@result]; + --interaction-weak-minor-2: #lightenOrDarken(@surface0, 20%)[]; + --interaction-weak-minor-1: #lightenOrDarken(@surface0, 10%)[]; --interaction-weak: @surface0; - --interaction-weak-major-1: #darkenOrLighten(@surface0, 4%)[@result]; - --interaction-weak-major-2: #darkenOrLighten(@surface0, 8%)[@result]; - --interaction-weak-major-3: #darkenOrLighten(@surface0, 12%)[@result]; + --interaction-weak-major-1: #darkenOrLighten(@surface0, 4%)[]; + --interaction-weak-major-2: #darkenOrLighten(@surface0, 8%)[]; + --interaction-weak-major-3: #darkenOrLighten(@surface0, 12%)[]; --interaction-weak-contrast: @text; --text-norm: @text; --text-weak: @subtext0; --text-hint: @subtext1; --text-disabled: @overlay1; --text-invert: @crust; + --text-markdown: @text; --field-norm: @overlay2; --field-hover: @overlay1; --field-disabled: @overlay0; @@ -172,8 +175,12 @@ --field-highlight: fade(@accent, 70%); --focus-outline: @accent; --focus-ring: fade(@accent, 40%); + --link-norm: @blue; + --link-hover: @lavender; + --link-active: @sky; + --markdown-pre-background: @mantle; --border-norm: @overlay0; - --border-weak: @overlay1; + --border-weak: @surface1; --background-norm: @base; --background-weak: @mantle; --background-strong: @crust; @@ -233,5 +240,77 @@ ); } } + + /* Proton Lumo */ + + header { + a[aria-label="Go to Lumo homepage"] img { + filter: @accent-filter; + } + } + + .whats-new-section { + background: @accent; + } + + .new-label { + background-color: @accent; + color: @crust; + } + + .lumo-sidebar { + background: @mantle; + a.lumo-plus-button svg path { + fill: @accent; + } + } + + .lumo-input-container.ghost-mode { + background-color: @crust; + --ghost-text: @text; + --ghost-text-weak: @subtext0; + .lumo-input { + background-color: @mantle; + } + } + + div[style*="background: rgb(40, 44, 52);"], + div[style*="background: rgb(250, 250, 250);"] { + background: @mantle !important; + + span { + color: @text !important; + } + + span.token[style*="color: rgb(92, 99, 112);"], + span.token[style*="color: rgb(160, 161, 167);"] { + color: @overlay2 !important; + } + + span.token[style*="color: rgb(97, 175, 239);"], + span.token[style*="color: rgb(64, 120, 242);"] { + color: @blue !important; + } + + span.token[style*="color: rgb(152, 195, 121);"], + span.token[style*="color: rgb(80, 161, 79);"] { + color: @green !important; + } + + span.token[style*="color: rgb(209, 154, 102);"], + span.token[style*="color: rgb(183, 107, 1);"] { + color: @peach !important; + } + + span.token[style*="color: rgb(198, 120, 221);"], + span.token[style*="color: rgb(166, 38, 164);"] { + color: @mauve !important; + } + + span.token[style*="color: rgb(224, 108, 117);"], + span.token[style*="color: rgb(228, 86, 73);"] { + color: @red !important; + } + } } } diff --git a/styles/pypi/catppuccin.user.less b/styles/pypi/catppuccin.user.less index f611808d1d..ced6ff7bcc 100644 --- a/styles/pypi/catppuccin.user.less +++ b/styles/pypi/catppuccin.user.less @@ -2,7 +2,7 @@ @name PyPI Catppuccin @namespace github.com/catppuccin/userstyles/styles/pypi @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/pypi -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/pypi/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apypi @description Soothing pastel theme for PyPI @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("pypi.org") { @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); @@ -897,7 +897,7 @@ .site-header__logo img { @svg: escape( - '' + '' ); content: url("data:image/svg+xml,@{svg}"); } diff --git a/styles/pythonanywhere/catppuccin.user.less b/styles/pythonanywhere/catppuccin.user.less index 73f6ec2d79..9f61e007df 100644 --- a/styles/pythonanywhere/catppuccin.user.less +++ b/styles/pythonanywhere/catppuccin.user.less @@ -2,7 +2,7 @@ @name PythonAnywhere Catppuccin @namespace github.com/catppuccin/userstyles/styles/pythonanywhere @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/pythonanywhere -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/pythonanywhere/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apythonanywhere @description Soothing pastel theme for PythonAnywhere @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("www.pythonanywhere.com"), domain("eu.pythonanywhere.com"), diff --git a/styles/quizlet/catppuccin.user.less b/styles/quizlet/catppuccin.user.less index f2980e8ae4..68fe2e38de 100644 --- a/styles/quizlet/catppuccin.user.less +++ b/styles/quizlet/catppuccin.user.less @@ -2,7 +2,7 @@ @name Quizlet Catppuccin @namespace github.com/catppuccin/userstyles/styles/quizlet @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/quizlet -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/quizlet/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aquizlet @description Soothing pastel theme for Quizlet @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("quizlet.com") { :root { diff --git a/styles/raindrop/catppuccin.user.less b/styles/raindrop/catppuccin.user.less index 353e1cadb4..9e83b1eecf 100644 --- a/styles/raindrop/catppuccin.user.less +++ b/styles/raindrop/catppuccin.user.less @@ -2,7 +2,7 @@ @name Raindrop Catppuccin @namespace github.com/catppuccin/userstyles/styles/raindrop @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/raindrop -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/raindrop/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Araindrop @description Soothing pastel theme for Raindrop @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("app.raindrop.io") { [data-theme="night"] { diff --git a/styles/react.dev/catppuccin.user.less b/styles/react.dev/catppuccin.user.less index 96cf0aa79e..4c016b875f 100644 --- a/styles/react.dev/catppuccin.user.less +++ b/styles/react.dev/catppuccin.user.less @@ -2,7 +2,7 @@ @name React.dev Catppuccin @namespace github.com/catppuccin/userstyles/styles/react.dev @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/react.dev -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/react.dev/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Areact.dev @description Soothing pastel theme for React.dev @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("react.dev") { html.dark { diff --git a/styles/reddit/catppuccin.user.less b/styles/reddit/catppuccin.user.less index 8b79b3c194..ce88940e32 100644 --- a/styles/reddit/catppuccin.user.less +++ b/styles/reddit/catppuccin.user.less @@ -2,7 +2,7 @@ @name Reddit Catppuccin @namespace github.com/catppuccin/userstyles/styles/reddit @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/reddit -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/reddit/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Areddit @description Soothing pastel theme for Reddit @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("reddit.com") { :root:not(.theme-dark) .theme-rpl, @@ -38,9 +38,8 @@ #lib.palette(); #lib.defaults(); - /* BETA */ --color-pizzaRed: @red !important; - --color-global-brand-orangered: @peach !important; + --color-global-brand-orangered: @accent !important; --color-global-focus: @surface1 !important; --color-interactive-content-disabled: @subtext0 !important; --color-interactive-background-disabled: fade(@surface2, 70%) !important; @@ -138,978 +137,32 @@ } } - /* normal stuff */ - - &, - div[class^="subredditvars"] { - --color-online: @green !important; - --newCommunityTheme-actionIcon: @subtext0 !important; - --newCommunityTheme-actionIconAlpha20: fade(@crust, 80%) !important; - --newCommunityTheme-actionIconAlpha50: fade(@crust, 80%) !important; - --newCommunityTheme-actionIconShaded80: @subtext0 !important; - --newCommunityTheme-actionIconTinted80: @subtext1 !important; - --newCommunityTheme-active: @accent !important; - --newCommunityTheme-activeAlpha10: fade(@crust, 80%) !important; - --newCommunityTheme-activeAlpha20: fade(@crust, 80%) !important; - --newCommunityTheme-activeAlpha50: fade(@crust, 80%) !important; - --newCommunityTheme-activeLight60: @accent !important; - --newCommunityTheme-activeShaded80: @accent !important; - --newCommunityTheme-activeShaded90: @accent !important; - --newCommunityTheme-activeTinted05: @text !important; - --newCommunityTheme-banner-backgroundColor: @accent !important; - --newCommunityTheme-banner-iconColor: @accent !important; - --newCommunityTheme-body: @mantle !important; - --newCommunityTheme-bodyAlpha50: @surface0 !important; - --newCommunityTheme-bodyAlpha70: @surface1 !important; - --newCommunityTheme-bodyAlpha80: @surface2 !important; - --newCommunityTheme-bodyFade: @subtext0 !important; - --newCommunityTheme-bodyShaded80: @mantle !important; - --newCommunityTheme-bodyText: @text !important; - --newCommunityTheme-bodyTextAlpha03: @mantle !important; - --newCommunityTheme-bodyTextAlpha20: @surface1 !important; - --newCommunityTheme-bodyTextShaded20: @surface0 !important; - --newCommunityTheme-bodyTextTinted20: @subtext0 !important; - --newCommunityTheme-bodyTinted50: @overlay1 !important; - --newCommunityTheme-bodyTinted80: @overlay0 !important; - --newCommunityTheme-button: @text !important; - --newCommunityTheme-buttonAlpha05: fade(@crust, 80%) !important; - --newCommunityTheme-buttonAlpha10: fade(@crust, 80%) !important; - --newCommunityTheme-buttonAlpha20: fade(@crust, 80%) !important; - --newCommunityTheme-buttonAlpha40: @subtext0 !important; - --newCommunityTheme-buttonAlpha50: @subtext1 !important; - --newCommunityTheme-buttonAlpha80: @subtext1 !important; - --newCommunityTheme-buttonShaded80: @overlay0 !important; - --newCommunityTheme-buttonTinted20: @accent !important; - --newCommunityTheme-buttonTinted50: @accent !important; - --newCommunityTheme-buttonTinted80: @accent !important; - --newCommunityTheme-canvas: @crust !important; - --newCommunityTheme-checkbox: @text !important; - --newCommunityTheme-errorText: @red !important; - --newCommunityTheme-field: @surface0 !important; - --newCommunityTheme-fieldFade: fade(@surface1, 70%) !important; - --newCommunityTheme-flair: @accent !important; - --newCommunityTheme-highlight: @base !important; - --newCommunityTheme-inactive: @subtext0 !important; - --newCommunityTheme-lightText: @text !important; - --newCommunityTheme-lightTextAlpha75: @subtext1 !important; - --newCommunityTheme-line: fade(@surface1, 70%) !important; - --newCommunityTheme-lineShaded80: fade(@surface1, 70%) !important; - --newCommunityTheme-lineShaded90: fade(@surface1, 70%) !important; - --newCommunityTheme-lineShadedNinety: fade(@surface1, 70%) !important; - --newCommunityTheme-linkText: @accent !important; - --newCommunityTheme-linkTextAlpha80: @accent !important; - --newCommunityTheme-linkTextShaded80: @accent !important; - --newCommunityTheme-linkTextTinted80: @accent !important; - --newCommunityTheme-linkTextWithBody: @accent !important; - --newCommunityTheme-menu: @mantle !important; - --newCommunityTheme-menuActiveText: @text !important; - --newCommunityTheme-menuButtonBackground-active: @base !important; - --newCommunityTheme-menuButtonBackground-focus: @base !important; - --newCommunityTheme-menuButtonBackground-hover: @base !important; - --newCommunityTheme-menuInactiveText: @text !important; - --newCommunityTheme-metaText: @subtext0 !important; - --newCommunityTheme-metaTextAlpha50: @subtext0 !important; - --newCommunityTheme-metaTextShaded80: @subtext0 !important; - --newCommunityTheme-monospaceColor: @accent !important; - --newCommunityTheme-navBar-activeLink: @text !important; - --newCommunityTheme-navBar-activeSubmenuCaret: @text !important; - --newCommunityTheme-navBar-activeSubmenuLink: @text !important; - --newCommunityTheme-navBar-backgroundColor: @mantle !important; - --newCommunityTheme-navBar-hoverLink: @text !important; - --newCommunityTheme-navBar-inactiveLink: @text !important; - --newCommunityTheme-navBar-inactiveSubmenuCaret: @text !important; - --newCommunityTheme-navBar-inactiveSubmenuLink: @text !important; - --newCommunityTheme-navBar-submenuBackgroundColor: @mantle !important; - --newCommunityTheme-navIcon: @text !important; - - /* upvote/downvote focus */ - --newCommunityTheme-navIconFaded10: fade(@crust, 80%) !important; - - --newCommunityTheme-nsfw: @red !important; - --newCommunityTheme-nsfwBlocking-bgcolor: @crust !important; - --newCommunityTheme-nsfwBlocking-color: @text !important; - --newCommunityTheme-nsfwBlocking-contentTitleBgColor: @base !important; - --newCommunityTheme-nsfwBlocking-mainCtaBgColor: @mantle !important; - --newCommunityTheme-pageHeader: @surface2 !important; - --newCommunityTheme-placeholder: @surface0 !important; - --newCommunityTheme-post: @mantle !important; - --newCommunityTheme-postError: @red !important; - --newCommunityTheme-postFlairText: @crust !important; - --newCommunityTheme-postIcon: @accent !important; - --newCommunityTheme-postLine: fade(@surface1, 70%) !important; - --newCommunityTheme-postLineShaded80: fade(@surface1, 70%) !important; - --newCommunityTheme-postLineShaded90: fade(@surface1, 70%) !important; - --newCommunityTheme-postTinted20: @base !important; - --newCommunityTheme-postTransparent20: @base !important; - --newCommunityTheme-primaryButtonShadedEighty: @overlay1 !important; - --newCommunityTheme-primaryButtonTintedEighty: @overlay1 !important; - --newCommunityTheme-primaryButtonTintedFifty: @overlay0 !important; - --newCommunityTheme-primaryButtonTintedSixty: @overlay0 !important; - --newCommunityTheme-quarantine: @yellow !important; - --newCommunityTheme-report: @surface1 !important; - --newCommunityTheme-search-syntaxHighlightBackgroundColor: @accent - !important; - --newCommunityTheme-search-syntaxHighlightColor: @base !important; - --newCommunityTheme-titleText: @text !important; - --newCommunityTheme-upsell-appleIcon: @subtext1 !important; - --newCommunityTheme-upsell-ssoButtonBorderColor: fade( - @surface1, - 70% - ) !important; - --newCommunityTheme-upsell-ssoButtonTextColor: @text !important; - --newCommunityTheme-voteText-base: @subtext0 !important; - --newCommunityTheme-voteText-downvote: @blue !important; - --newCommunityTheme-voteText-downvoteShaded80: @blue !important; - --newCommunityTheme-voteText-downvoteTinted80: @blue !important; - --newCommunityTheme-voteText-upvote: @red !important; - --newCommunityTheme-voteText-upvoteShaded80: @red !important; - --newCommunityTheme-voteText-upvoteTinted80: @red !important; - --newCommunityTheme-widgetColors-appleIcon: @overlay0 !important; - --newCommunityTheme-widgetColors-lineColor: fade( - @surface1, - 70% - ) !important; - - /* sidebar widgets */ - --newCommunityTheme-widgetColors-sidebarWidgetBackgroundColor: @mantle - !important; - --newCommunityTheme-widgetColors-sidebarWidgetBorderColor: fade( - @surface1, - 70% - ) !important; - --newCommunityTheme-widgetColors-sidebarWidgetHeaderColor: @crust - !important; - --newCommunityTheme-widgetColors-sidebarWidgetHeaderColorAlpha60: @mantle - !important; - --newCommunityTheme-widgetColors-sidebarWidgetTextColor: @text !important; - --newCommunityTheme-widgetColors-sidebarWidgetTextColorShaded80: @subtext1 - !important; - --newCommunityTheme-widgetColors-sidebarWidgetTitleColor: @text - !important; - - --newRedditTheme-actionIcon: @subtext0 !important; - --newRedditTheme-actionIconAlpha20: fade(@crust, 80%) !important; - --newRedditTheme-actionIconAlpha50: fade(@crust, 80%) !important; - --newRedditTheme-actionIconShaded80: @subtext0 !important; - --newRedditTheme-actionIconTinted80: @subtext1 !important; - --newRedditTheme-active: @accent !important; - --newRedditTheme-activeAlpha10: fade(@crust, 80%) !important; - --newRedditTheme-activeAlpha20: fade(@crust, 80%) !important; - --newRedditTheme-activeAlpha50: fade(@crust, 80%) !important; - --newRedditTheme-activeLight60: @accent !important; - --newRedditTheme-activeShaded80: @accent !important; - --newRedditTheme-activeShaded90: @accent !important; - --newRedditTheme-activeTinted05: @text !important; - --newRedditTheme-banner-backgroundColor: @accent !important; - --newRedditTheme-banner-iconColor: @accent !important; - --newRedditTheme-body: @mantle !important; - --newRedditTheme-bodyAlpha50: @surface0 !important; - --newRedditTheme-bodyAlpha70: @surface1 !important; - --newRedditTheme-bodyAlpha80: @surface2 !important; - --newRedditTheme-bodyFade: fade(@crust, 80%) !important; - --newRedditTheme-bodyShaded80: @mantle !important; - --newRedditTheme-bodyText: @text !important; - --newRedditTheme-bodyTextAlpha03: fade(@crust, 80%) !important; - --newRedditTheme-bodyTextAlpha20: @surface1 !important; - --newRedditTheme-bodyTextShaded20: @surface0 !important; - --newRedditTheme-bodyTextTinted20: @subtext1 !important; - --newRedditTheme-bodyTinted50: @overlay0 !important; - --newRedditTheme-bodyTinted80: @overlay1 !important; - --newRedditTheme-button: @text !important; - --newRedditTheme-buttonAlpha05: fade(@crust, 80%) !important; - --newRedditTheme-buttonAlpha10: fade(@crust, 80%) !important; - --newRedditTheme-buttonAlpha20: fade(@crust, 80%) !important; - --newRedditTheme-buttonAlpha40: @subtext0 !important; - --newRedditTheme-buttonAlpha50: @subtext1 !important; - --newRedditTheme-buttonAlpha80: @subtext1 !important; - --newRedditTheme-buttonShaded80: @overlay0 !important; - --newRedditTheme-buttonTinted20: @accent !important; - --newRedditTheme-buttonTinted50: @accent !important; - --newRedditTheme-buttonTinted80: @accent !important; - --newRedditTheme-canvas: @crust !important; - --newRedditTheme-checkbox: @text !important; - --newRedditTheme-errorText: @red !important; - --newRedditTheme-field: @base !important; - --newRedditTheme-fieldFade: @mantle !important; - --newRedditTheme-flair: @accent !important; - - /* controls menu, link, and other similar highlights. very important */ - --newRedditTheme-highlight: @base !important; - - --newRedditTheme-inactive: @surface0 !important; - --newRedditTheme-lightText: @text !important; - --newRedditTheme-lightTextAlpha75: @subtext1 !important; - --newRedditTheme-line: fade(@surface1, 70%) !important; - --newRedditTheme-lineShaded80: fade(@surface1, 70%) !important; - --newRedditTheme-lineShaded90: fade(@surface1, 70%) !important; - --newRedditTheme-lineShadedNinety: fade(@surface1, 70%) !important; - - /* links */ - --newRedditTheme-linkText: @accent !important; - --newRedditTheme-linkTextAlpha80: @accent !important; - --newRedditTheme-linkTextShaded80: @accent !important; - --newRedditTheme-linkTextTinted80: @accent !important; - --newRedditTheme-linkTextWithBody: @accent !important; - - /* menus */ - --newRedditTheme-menu: @mantle !important; - --newRedditTheme-menuActiveText: @text !important; - --newRedditTheme-menuButtonBackground-active: @accent !important; - --newRedditTheme-menuButtonBackground-focus: @base !important; - --newRedditTheme-menuButtonBackground-hover: @base !important; - --newRedditTheme-menuInactiveText: @text !important; - - --newRedditTheme-metaText: @subtext0 !important; - --newRedditTheme-metaTextAlpha50: fade(@crust, 80%) !important; - --newRedditTheme-metaTextShaded80: @subtext1 !important; - --newRedditTheme-monospaceColor: @accent !important; - --newRedditTheme-navBar-activeLink: @text !important; - --newRedditTheme-navBar-activeSubmenuCaret: @text !important; - --newRedditTheme-navBar-activeSubmenuLink: @text !important; - --newRedditTheme-navBar-backgroundColor: @mantle !important; - --newRedditTheme-navBar-hoverLink: @text !important; - --newRedditTheme-navBar-inactiveLink: @text !important; - --newRedditTheme-navBar-inactiveSubmenuCaret: @text !important; - --newRedditTheme-navBar-inactiveSubmenuLink: @text !important; - --newRedditTheme-navBar-submenuBackgroundColor: @mantle !important; - --newRedditTheme-navIcon: @text !important; - --newRedditTheme-navIconFaded10: fade(@crust, 80%) !important; - --newRedditTheme-nsfw: @red !important; - --newRedditTheme-nsfwBlocking-bgcolor: @crust !important; - --newRedditTheme-nsfwBlocking-color: @text !important; - --newRedditTheme-nsfwBlocking-contentTitleBgColor: @base !important; - --newRedditTheme-nsfwBlocking-mainCtaBgColor: @mantle !important; - --newRedditTheme-pageHeader: @surface0 !important; - --newRedditTheme-placeholder: @surface1 !important; - --newRedditTheme-post: @mantle !important; - --newRedditTheme-postError: @red !important; - --newRedditTheme-postFlairText: @text !important; - --newRedditTheme-postIcon: @accent !important; - --newRedditTheme-postLine: fade(@surface1, 70%) !important; - --newRedditTheme-postLineShaded80: fade(@surface1, 70%) !important; - --newRedditTheme-postLineShaded90: fade(@surface1, 70%) !important; - --newRedditTheme-postTinted20: @base !important; - --newRedditTheme-postTransparent20: fade(@crust, 80%) !important; - --newRedditTheme-primaryButtonShadedEighty: @surface1 !important; - --newRedditTheme-primaryButtonTintedEighty: @surface2 !important; - --newRedditTheme-primaryButtonTintedFifty: @surface1 !important; - --newRedditTheme-primaryButtonTintedSixty: @surface1 !important; - --newRedditTheme-quarantine: @yellow !important; - --newRedditTheme-report: @base !important; - --newRedditTheme-search-syntaxHighlightBackgroundColor: @accent - !important; - --newRedditTheme-search-syntaxHighlightColor: @base !important; - --newRedditTheme-titleText: @text !important; - --newRedditTheme-upsell-appleIcon: @overlay0 !important; - --newRedditTheme-upsell-ssoButtonBorderColor: @text !important; - --newRedditTheme-upsell-ssoButtonTextColor: @text !important; - --newRedditTheme-voteText-base: @subtext1 !important; - --newRedditTheme-voteText-downvote: @blue !important; - --newRedditTheme-voteText-downvoteShaded80: @blue !important; - --newRedditTheme-voteText-downvoteTinted80: @blue !important; - --newRedditTheme-voteText-upvote: @red !important; - --newRedditTheme-voteText-upvoteShaded80: @red !important; - --newRedditTheme-voteText-upvoteTinted80: @red !important; - --newRedditTheme-widgetColors-appleIcon: @overlay0 !important; - --newRedditTheme-widgetColors-lineColor: fade( - @surface1, - 70% - ) !important; - --newRedditTheme-widgetColors-sidebarWidgetBackgroundColor: @mantle - !important; - --newRedditTheme-widgetColors-sidebarWidgetBorderColor: fade( - @surface1, - 70% - ) !important; - --newRedditTheme-widgetColors-sidebarWidgetHeaderColor: @crust !important; - --newRedditTheme-widgetColors-sidebarWidgetHeaderColorAlpha60: fade( - @crust, - 80% - ) !important; - --newRedditTheme-widgetColors-sidebarWidgetTextColor: @text !important; - --newRedditTheme-widgetColors-sidebarWidgetTextColorShaded80: @subtext1 - !important; - --newRedditTheme-widgetColors-sidebarWidgetTitleColor: @text !important; - --tw-bg-opacity: @crust !important; - --vds-video-bg-color: @crust !important; - } - - /* reddit chat variables */ - :root { - --activity-button-chatFilterColor: @surface0 !important; - --activity-button-newChatFilter-activeBg: @accent !important; - --activity-button-newChatFilter-activeText: @base !important; - --activity-button-newChatFilter-defaultBorder: @surface1 !important; - --activity-button-newChatFilter-defaultText: @text !important; - --activity-button-primary: @accent !important; - --activity-button-secondary: @text !important; - --activity-buttonPrimary-color: @accent !important; - --activity-buttonSecondary-active: @accent !important; - --activity-checkbox-checked: @accent !important; - --activity-checkbox-checkmark: @text !important; - --activity-checkbox-unchecked: @base !important; - --activity-checkbox-uncheckedBorder: @surface1 !important; - --activity-icon-active: @accent !important; - --activity-icon-contrast: @surface1 !important; - --activity-icon-default: @subtext0 !important; - --activity-icon-disable: @surface2 !important; - --activity-icon-hover: @surface2 !important; - --activity-icon-nsfw-bg: @base !important; - --activity-icon-nsfw-text: @text !important; - --activity-icon-subIcon-backgroundColor: @text !important; - --activity-icon-toaster: @crust !important; - --activity-input-background: fade(@crust, 80%) !important; - --activity-input-border: @surface1 !important; - --activity-input-channelRename: @subtext0 !important; - --activity-input-color: @subtext1 !important; - --activity-input-error: @red !important; - --activity-input-focusBg: @green !important; - --activity-input-focusColor: @text !important; - --activity-input-ownerBg: @surface0 !important; - --activity-link-hoverText: @red !important; - --activity-link-staticText: @accent !important; - --activity-link-staticUnderline: @accent !important; - --activity-minimizedPortal-backgroundColor-unreadFinal: @mantle - !important; - --activity-minimizedPortal-backgroundColor-unreadInitial: @accent - !important; - --activity-minimizedPortal-color-unreadFinal: @text !important; - --activity-minimizedPortal-color-unreadInitial: @text !important; - --activity-send-disable: @surface0 !important; - --activity-send-hover: @accent !important; - --activity-text-active: @accent !important; - --activity-text-fade: @subtext0 !important; - --activity-text-highlight: @text !important; - --activity-text-light: @subtext0 !important; - --activity-text-meta: @subtext0 !important; - --activity-text-regular: @text !important; - --activity-text-success: @green !important; - --activity-text-tutorial: @rosewater !important; - --activity-text-warning: @red !important; - --addReaction-backgroundColor: @surface0 !important; - --addReaction-iconFill: @surface1 !important; - --boxShadow: fade(@crust, 80%) !important; - --bubble-border: fade(@surface1, 70%) !important; - --bubble-channelsFilter-background: @crust !important; - --bubble-channelsFilter-selected: @overlay0 !important; - --bubble-color: @text !important; - --bubble-link-color: @accent !important; - --bubbleActions-hover: @surface0 !important; - --editName: @surface1 !important; - --layout-body: @mantle !important; - --layout-colsBorder: fade(@surface1, 70%) !important; - --layout-controlsBorder: fade(@surface1, 70%) !important; - --layout-dropdown-border: fade(@surface1, 70%) !important; - --layout-header-counterBg: @red !important; - --layout-header-counterText: @text !important; - --layout-overlayBackground: fade(@crust, 80%) !important; - --layout-overlayReportFlow: fade(@crust, 80%) !important; - --layout-scrollbar: @text !important; - --layout-scrollbarHover: @accent !important; - --layout-timeStamp-tooltip-background: @surface0 !important; - --message-list-item-button: @surface1 !important; - --message-list-item-onlineIndicator: @green !important; - --message-list-item-ownerBg: @surface1 !important; - --message-list-item-richItem: @overlay0 !important; - --message-list-item-richItemBorder: fade(@surface1, 70%) !important; - --message-list-item-white: @text !important; - --modal-buttonsBackground: @text !important; - --modal-primaryButtonWarning: @red !important; - --modal-secondaryButton: @text !important; - --newChat-inviteLink-borderColor: fade(@surface1, 70%) !important; - --overlay-backgroundColor: @mantle !important; - --overlay-headerColor: @text !important; - --overlay-inputBackground: @crust !important; - --overlay-searchBarBackground: @mantle !important; - --prompt-tooltip-background: @accent !important; - --searchBar-backgroundColor: @mantle !important; - --settings-color: @subtext0 !important; - --settings-dropdownItemHoverBackground: @crust !important; - --settings-panelBackground: @crust !important; - --settings-panelItemHoverBackground: @surface0 !important; - --settings-panelItemSelectedBackground: @surface1 !important; - --sidebar-background: fade(@surface1, 70%) !important; - --sidebar-basic-background-active: @accent !important; - --sidebar-basic-background-hover: @mantle !important; - --sidebar-footer-background: @crust !important; - --sidebar-item-active: @surface1 !important; - --sidebar-item-hover: @surface0 !important; - --sidebar-item-selected: @surface2 !important; - --sidebar-item-text-active: @text !important; - --sidebar-subreddit-background-active: @accent !important; - --sidebar-subreddit-background-hover: @surface1 !important; - --sidebar-text-divider: @surface1 !important; - --skeleton-field: @surface2 !important; - --skeleton-inactive: @surface0 !important; - --subreddit-iconBg: @accent !important; - --toast-error: @red !important; - --toast-pending: @crust !important; - --toast-success: @green !important; - --uploads-progress-background: @subtext0 !important; - --uploads-progress-bar: @accent !important; - --videoModal-button-background: @text !important; - --videoModal-button-color: @mantle !important; - } - - /* site background */ - div.ListingLayout-backgroundContainer::before { - background: @base !important; - } - - /* PROFILE MENU */ - - /* karma count */ - span#email-collection-tooltip-id > :nth-child(2) > :nth-child(2) > span { - color: @subtext0 !important; - } - - /* profile button karma icon */ - i.icon-karma_fill { - color: @red !important; - } - - /* menu headers */ - div[role="menu"] > div > div > span > span { - color: @subtext0 !important; - } - - /* switches, should also apply sitewide */ - button[role="switch"][aria-checked="false"] { - background: @surface0 !important; - } - - button[role="switch"] > div { - background: @text !important; - } - - /* online status */ - ._2dn5Ncenn0BSD4tCSmxQhA { - fill: @green !important; - } - - ._3SlBAJb2MbUHwgBZFH8eL7 { - fill: @base !important; - } - - /* PROFILE PAGE */ - - /* create avatar button */ - button._3F1tNW0P4Ff182mO_CefIg { - background: linear-gradient(90deg, @red, @peach) !important; - color: @base !important; - } - - button._3F1tNW0P4Ff182mO_CefIg > i { - color: @base !important; - } - - /* cake day and followers icon */ - i.icon-cake_fill, - i.icon-user_fill { - color: @accent !important; - } - - /* add social links button readability tweak */ - div._3hew1NnzwygOKDNQDKp6R4, - div._3hew1NnzwygOKDNQDKp6R4 > i, - li._3hew1NnzwygOKDNQDKp6R4 { - color: @base !important; - } - - /* profile moderation and user settings page */ - div._1VP69d9lk-Wk9zokOaylL { - --background: @base !important; - --canvas: @base !important; - } - - /* Beta Badge */ - span._2KFJx8Dhh1o1u0Xb8e7NuD { - color: @accent !important; - } - - /* Delete Account */ - button.EBd2MhBQlQeZ13YeP0K8a { - color: @accent !important; - } - - /* Delete Account Icon */ - svg._1Fa4RPHlhrfUZuNaXK2-eP > path { - fill: @accent !important; - } - - /* blocked, muted input */ - input._1Vnaj3fBuYrmHKEPQD_zWW { - background-color: @base !important; - } - - /* fixes profile posts not being themed */ - div.scrollerItem > div, - div[data-testid="post-container"], - div[style="background:#1A1A1B"], - div._2otRz3OtuWajw1RleFDJ5P { - background: @mantle !important; - } - - /* NFT AVATAR VIEWER */ - - /* modal background */ - div._productDetails_7kbcu_53 { - background: @mantle !important; - color: @text !important; - } - - /* Tag Color */ - .RESUserTagImage::after { - color: @accent; - } - - /* mint status */ - div._mintStatus_7kbcu_264 { - color: @accent !important; - } - - /* carousel background */ - div._carousel_7kbcu_45 { - background: linear-gradient(243.37deg, @base 16.42%, @blue 100%); - } - - /* nft card back */ - div._card_1ooes_1 { - background: @blue !important; - } - - ol._container_1t62i_1 { - border-color: @base !important; - } - - ol._container_1t62i_1 > li { - border-color: @base !important; - } - - ol._container_1t62i_1 > li > div { - color: @base !important; - } - - div.MuiMobileStepper-dot { - background: @surface0 !important; - } - - div.MuiMobileStepper-dotActive { - background: @accent !important; - } - - div._scrollContainer_7kbcu_104 > div > h3, - div._cardAuthor_7kbcu_79 { - color: @subtext0 !important; - } - - div._container_oikih_1 { - background: @crust !important; - border-color: @surface1 !important; - } - - /* external links */ - a._pill_7kbcu_280 { - background: @crust !important; - color: @text !important; - } - - /* shop for avatars button */ - button._shopForMoreButton_7kbcu_125 { - background: linear-gradient(90deg, @red, @peach) !important; - color: @base !important; - } - - /* AVATAR CREATOR */ - div._wrapper_1upjl_7 { - background: @base !important; - color: @text !important; - } - - /* SITE HEADER */ - - /* reddit logo */ - a[aria-label="Home"] > svg > g > circle { - fill: @accent !important; - } - - a[aria-label="Home"] > svg:first-child > g > path { - fill: @base !important; - } - - a[aria-label="Home"] > svg:nth-child(2) > g > path { - fill: @text !important; - } - - /* Post title from notification */ - h1._eYtD2XCVieq6emjKBH3m { - color: @text !important; - } - - /* notification icon */ - button[aria-label="Open notifications inbox"] > div > span { - background: @accent !important; - color: @mantle !important; - } - - /* advertise button */ - #change-username-tooltip-id > span._2I12Htze2UzJmmfnrgYJOn > a { - background: @surface0 !important; - color: @text !important; - } - - #change-username-tooltip-id > span._2I12Htze2UzJmmfnrgYJOn > a > i { - color: @text !important; - } - - /* reddit now notification */ - a[href="/now"] > div { - background: @accent !important; - } - - /* search scope pill text */ - div[data-testid="search-scope-pill-text"] { - color: @text !important; - } - - /* search popup title */ - div[class*="_2SdHzo12ISmrC8H86TgSCp"][class*="_1QVrieUoti9cxiQSRw314E"][class*="uWdXen_41bh0iwLrgzFkc"] { - --posttitletextcolor: @text !important; - } - - /* safe search toggle */ - button#safe-search-toggle[aria-checked="true"] { - background: @accent !important; - } - - /* NAVIGATION SIDEBAR */ - - /* close icon */ - i.icon-close { - color: @subtext0 !important; - } - - /* item color */ - a[role="menuitem"] { - color: @text !important; - } - - /* navigation sidebar header color */ - div[role="menu"] > div[role="heading"] { - color: @subtext0 !important; - } - - a[role="menuitem"]:hover { - background: @surface0 !important; - } - - /* favorites */ - i.icon-star_fill { - color: @accent !important; - } - - i.icon-star { - color: @subtext0 !important; - } - - /* RIGHT FRONTPAGE SIDEBAR */ - - /* reddit premium icon */ - i.icon-premium_fill { - color: @accent !important; - } - - /* reddit premium try now button */ - button._10BQ7pjWbeYP63SAPNS8Ts.q_unSaY23rpdd3lDvGZ- { - background: @accent !important; - color: @base !important; - } - - /* recent posts thumbnail borders */ - div._3fWuhJ6bVet7XJT5A0mZM2 > div > div > div { - border-color: @subtext0 !important; - } - - /* POSTS */ - - /* post background for card style */ - div[data-adclicklocation="background"] { - background: @base !important; - } - - /* post options (save, comment, etc.) */ - div._3-miAEojrCvx_4FQ8x3P-s, - i.icon-comment, - i.icon-share, - i.icon-save, - i.icon-expand, - i.icon-collapse, - i.icon-text_post, - i.icon-image_post, - i.icon-media_gallery, - i.icon-video_post, - i.icon-gif_post, - i.icon-embed, - i.icon-external_link, - i.icon-poll_post { - color: @subtext0 !important; - } - - /* post title color */ - div[data-adclicklocation="title"] > div > a > div > h3, - div[data-adclicklocation="title"] - > div:first-child - > div:first-child - > h1:first-child { - color: @text !important; - } - - /* - * post op color and - * post date color - */ - div[data-adclicklocation="top_bar"] > span, - a[data-testid="post_author_link"] { - color: @subtext0 !important; - } - - /* nsfw flair */ - span._1wzhGvvafQFOWAyA157okr { - border-color: @red !important; - color: @red !important; - } - - /* pinned post icon */ - i.icon-pin_fill { - color: @green !important; - } - - /* give award icon */ - i.icon-award { - color: @subtext0 !important; - } - - /* locked post icon */ - i.icon-archived_fill, - i.icon-lock_fill { - color: @yellow !important; - } - - /* post button divider */ - div[data-click-id="body"] > div:nth-child(3) > div:nth-child(3) { - border-color: @surface1 !important; - } - - /* UPVOTES/DOWNVOTES */ - - /* upvote/downvote background */ - div.Post, - div[data-click-id="media"] { - background: @mantle !important; - fill: @mantle !important; - } - - /* inactive vote text color */ - div[id^="vote-arrows"] > div { - color: @subtext0 !important; - } - - /* active upvote color */ - i.icon-upvote_fill { - color: @red !important; - } - - button[aria-label="upvote"][aria-pressed="false"] > span:hover > i { - color: @red !important; - } - - /* active upvote text color */ - button[aria-label="upvote"][aria-pressed="true"] ~ div { - color: @red !important; - } - - /* hover background for both upvotes and downvotes */ - button[aria-label="upvote"][aria-label="downvote"] > span:hover { - background: @surface0 !important; - } - - /* active downvote color */ - .icon-downvote_fill { - color: @blue !important; - } - - /* active downvote text color */ - button[aria-label="downvote"][aria-pressed="true"] ~ div { - color: @blue !important; - } - - button[aria-label="downvote"][aria-pressed="false"] > span:hover > i { - color: @blue !important; - } - - /* REPORT MODAL */ - - a.o1ov2mzLxTFAFP-O4Uv8I { - color: @accent !important; - } - - button._1lDGFVGU9k2mi-4kjU95Rp { - color: @base !important; - } - - /* SUBREDDIT PAGES */ - a[role="button"][target="_blank"] { - background: @text !important; - color: @base !important; - } - - /* radio buttons (flair selector, etc.) */ - div[role="radio"]:hover, - div[role="radio"]:focus { - background: @accent !important; - } - - div[role="radio"] > svg, - div[role="radio"] > svg:active { - fill: @text !important; - } - - /* checkboxes */ - button[role="checkbox"] { - fill: @accent !important; - } - - /* SUBREDDIT RIGHT SIDEBAR (some styles carry over from the homepage right sidebar section) */ - - /* header background */ - ._ZhON3a3vplThB8NFwuJn { - background: @crust !important; - color: @text !important; - } - - /* subreddit image background */ - img[alt="Subreddit Icon"][role="presentation"] { - background: @accent !important; - } - - /* border between uela */ - ._1KrMye71CT332tKKKUWAj6:not(:last-of-type) { - border-bottom-color: @surface0; - } - - /* follower color */ - .bg-neutral-background { - color: @text !important; - } - - /* default subreddit icon */ - i.icon-community_fill { - color: @accent !important; - } - - /* online users */ - div._21RLQh5PvUhC6vOKoFeHUP::before { - color: @green !important; - } - - /* POST VIEWER */ - - /* spoiler tags */ - ._2v4IIjPhKL0PDaWaWtjJ1E { - background: @surface0 !important; - } - - /* mod comment tag */ - span[id^="CommentTopMeta--Mod"] { - color: @green !important; - } - - /* op comment tag */ - span[id^="CommentTopMeta--OP"] { - color: @blue !important; - } - - /* post overlay if you have "open in new tab" disabled */ - div#overlayScrollContainer > div { - background: @crust !important; - } - - /* fixes comment section background not working when "open in new tab is disabled" */ - div._2M2wOqmeoPVvcSsJ6Po9-V._3287nL7j7epK9JmDC3N1VR { - background: @mantle !important; - } - - /* shade applied to background when clicking on a post with "open in new tab" disabled */ - div._2DJXORCrmcNpPTSq0LqL6i, - div._1DK52RbaamLOWw5UPaht_S { - background: fade(@crust, 80%) !important; - } - - /* gold award gradient */ - div.TmlaIdEplCzZ0F1aRGYQh[role="presentation"] { - background: linear-gradient( - 188deg, - #f9e2af1f 1.7%, - #f9e2af00 46%, - rgba(0, 0, 0, 0) - ) !important; - } - - /* image gallery next/previous buttons */ - a[title="Next"] > i, - a[title="Previous"] > i { - background: @surface0 !important; - } - - /* image gallery image count */ - div._61i6grM3um1yuw4GrN97P { - background: fade(@crust, 80%) !important; - color: @text !important; - } - - /* comment search bar */ - input#comment_search-bar { - background: @base !important; - } - - /* tab bar below banner */ - ._1gVVmSnHZpkUgVShsn7-ua { - background: @mantle !important; - } - - /* MULTIREDDITS/CUSTOM FEEDS */ - - /* delete custom feed button */ - .bX6SqXfzfxpv4GQbuIYVZ { - color: @red !important; - } - - /* TOOLTIPS */ - div.HQ2VJViRjokXpRbJzPvvc { - background: @mantle !important; - color: @text !important; - } + /* Trending news carousel on https://www.reddit.com/r/popular/. */ + shreddit-gallery-carousel { + // Headline + .text-primary-onBackground { + color: @text; + } - div.HQ2VJViRjokXpRbJzPvvc::after { - border-top-color: @mantle !important; + // r/... *and more* + .text-coolgray-350 { + color: @subtext1; + } } - /* Recap Reddit Logo */ - .snoo-cls-1, - .snoo-cls-2, - .snoo-cls-3, - .snoo-cls-6, - .snoo-cls-8, - .snoo-cls-9 { - fill: @base; + /* Community themes - post header/metadata background and text. */ + #pdp-credit-bar { + --color-neutral-background: @base; + --color-neutral-content: @text; + --color-neutral-content-weak: @subtext0; + --color-primary-hover: lighten(@accent, 10%); } - .snoo-cls-4, - .snoo-cls-5, - .snoo-cls-7, - .snoo-cls-10, - .snoo-cls-11 { - fill: @accent; + reddit-header-large reddit-search-large::before, + reddit-header-large reddit-search-large::after { + background: + linear-gradient(@base, @base) padding-box, + linear-gradient(90deg, @accent, @accent) border-box; } } } diff --git a/styles/regex101/README.md b/styles/regex101/README.md new file mode 100644 index 0000000000..a49f53e219 --- /dev/null +++ b/styles/regex101/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for regex101 + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [uncenter](https://github.com/uncenter) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/regex101/catppuccin.user.less b/styles/regex101/catppuccin.user.less new file mode 100644 index 0000000000..2588787202 --- /dev/null +++ b/styles/regex101/catppuccin.user.less @@ -0,0 +1,164 @@ +/* ==UserStyle== +@name regex101 Catppuccin +@namespace github.com/catppuccin/userstyles/styles/regex101 +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/regex101 +@version 2026.08.16 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/regex101/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aregex101 +@description Soothing pastel theme for regex101 +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; + +@-moz-document domain("regex101.com") { + @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); + + :root { + &[data-theme="dark"] { + #catppuccin(@darkFlavor); + } + &[data-theme="light"] { + #catppuccin(@lightFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + --primary-color: @crust; + --primary-contrast-color: @accent; + + --app-color: @text; + --app-color-metadata: @subtext0; + --app-contrast-color: @subtext1; + + --link-color: @accent; + + --highlight-bg: @green; + --spinner-bg: @overlay0; + --bg-0: @mantle; + --bg-1: @base; + --content-bg: @surface0; + + --content-border-color: @surface1; + --sub-content-bg: @surface1; + + --info-color: @subtext0; + --success-color: @green; + --warning-color: @yellow; + --danger-color: @red; + + --misc-button-icon-color: @subtext1; + --misc-button-bg: @surface0; + --misc-button-hover-bg: @surface1; + --misc-button-active-bg: @surface2; + --misc-button-active-color: @base; + --misc-button-highlight-bg: fade(@green, 40%); + + --editor-active-bg: @overlay2; + --library-active-bg: @yellow; + --account-active-bg: @green; + --quiz-active-bg: @teal; + --settings-active-bg: @pink; + + #hsl-variables(--button-bg, @surface0); + #hsl-variables(--button-ok-bg, @mantle); + #hsl-variables(--button-danger-bg, fade(@red, 30%)); + + --button-hover-l: lightness(@surface1); + --backdrop-bg: fade(@overlay0, 30%); + + --input-bg: @base; + --input-disabled-bg: @mantle; + --input-border-color: @surface0; + --input-focused-border-color: @surface0; + + --label-color: @subtext1; + --tooltip-color: @crust; + --tooltip-bg: @subtext0; + --version-btn-bg: fade(@green, 30%); + --match-indicator-no-match: fade(@blue, 30%); + --match-indicator-match-bg: fade(@green, 30%); + --match-indicator-error-bg: fade(@red, 30%); + + --debugger-backtrack-bg: fade(@red, 30%); + --debugger-regex-bg: fade(@green, 30%); + --debugger-slider-bg: @surface2; + + --header-discord-color: @lavender; + --header-twitter-color: @text; + --header-donate-color: @yellow; + --header-contact-color: @green; + --header-feedback-color: @maroon; + --header-wiki-color: @teal; + --header-whatsnew-color: @yellow; + --header-sponsor-color: @pink; + --header-paypal-color: @blue; + --header-info-color: @sky; + --header-social-color: @green; + --header-stripe-color: @blue; + + --starred-library-entry-bg: fade(@yellow, 10%); + --cm-whitespace-color: @overlay1; + --cm-selected-bg: fade(@accent, 30%); + --cm-inactive-selected-bg: fade(@accent, 30%); + + @match-group-colors: @blue, @green, @yellow, @mauve, @pink, @red, @green; + each( + @match-group-colors, + { + @i: @index - 1; + --match-group-@{i}: @value; + --match-group-@{i}-alt: darken(@value, 10%); + } + ); + + --match-highlight-color: fade(@yellow, 90%); + + --explanation-keyword-color: @green; + --explanation-token-bg: fade(@yellow, 80%); + --explanation-token-color: @base; + --explanation-plain-text-bg: fade(@surface2, 80%); + --explanation-flag-color: @mauve; + + --token-quote-color: @mauve; + --token-quote-bg: none; + --token-escaped-string-color: var(--app-color); + --token-escaped-string-bg: fade(@overlay1, 30%); + #accent-token(meta, @blue); + #accent-token(char-class, @rosewater); + #accent-token(char-class-meta, @flamingo); + #accent-token(subpattern-reference, @mauve); + #accent-token(group-0, @green); + #accent-token(group-1, @yellow); + #accent-token(group-2, @peach); + #accent-token(group-3, @maroon); + #accent-token(comment, transparent); + #accent-token(error, @red); + + #accent-token(@id, @color) { + --token-@{id}-bg: @color; + --token-@{id}-color: @base; + } + + #hsl-variables(@variable, @color) { + @{variable}-h: hue(@color); + @{variable}-s: saturation(@color); + @{variable}-l: lightness(@color); + } + + // Canvas is pulling Catppuccin colours from CSS variables, just needs fading for contrast + canvas { + filter: opacity(0.3); + } + } +} diff --git a/styles/rentry.co/catppuccin.user.less b/styles/rentry.co/catppuccin.user.less index 30e459d503..4b56d8c391 100644 --- a/styles/rentry.co/catppuccin.user.less +++ b/styles/rentry.co/catppuccin.user.less @@ -2,7 +2,7 @@ @name Rentry.co Catppuccin @namespace github.com/catppuccin/userstyles/styles/rentry.co @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/rentry.co -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/rentry.co/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Arentry.co @description Soothing pastel theme for Rentry.co @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("rentry.org"), domain("rentry.co") { @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); diff --git a/styles/scalar/README.md b/styles/scalar/README.md new file mode 100644 index 0000000000..7af3057250 --- /dev/null +++ b/styles/scalar/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Scalar + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [incognitotgt](https://github.com/incognitotgt) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/scalar/catppuccin.user.less b/styles/scalar/catppuccin.user.less new file mode 100644 index 0000000000..967643af30 --- /dev/null +++ b/styles/scalar/catppuccin.user.less @@ -0,0 +1,85 @@ +/* ==UserStyle== +@name Scalar Catppuccin +@namespace github.com/catppuccin/userstyles/styles/scalar +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/scalar +@version 2026.08.16 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/scalar/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ascalar +@description Soothing pastel theme for Scalar +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; + +@-moz-document domain("scalar.com") { + @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); + code.hljs { + background: none !important; + } + + .light-mode { + #catppuccin(@lightFlavor); + } + + .dark-mode { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + --scalar-color-1: @text; + --scalar-color-2: @subtext1; + --scalar-color-3: @subtext0; + --scalar-color-accent: @accent; + --scalar-background-1: @base; + --scalar-background-2: @surface0; + --scalar-background-3: @surface1; + --scalar-background-accent: fade(@accent, 12%); + --scalar-border-color: @surface1; + --scalar-color-green: @green; + --scalar-color-red: @red; + --scalar-color-yellow: @yellow; + --scalar-color-blue: @blue; + --scalar-color-orange: @peach; + --scalar-color-purple: @mauve; + --scalar-selection-1: fade(@accent, 30%); + --scalar-button-1: @accent; + --scalar-button-1-hover: darken(@accent, 5%); + --scalar-button-1-color: @base; + + background-color: @base; + + .sidebar { + --scalar-sidebar-background-1: @mantle; + --scalar-sidebar-item-hover-background: @surface0; + --scalar-sidebar-item-active-background: fade(@accent, 10%); + --scalar-sidebar-color-active: @accent; + } + + .scalar-code-block, .t-editor__code { + background-color: @mantle; + } + + .brightness-lifted { + filter: none; // remove elevated filter on dropdown modal backgrounds + } + + .text-white { + color: @base; // danger (delete) button text + } + + // https://scalar.com/ + .logo { + filter: @text-filter; + } + } +} diff --git a/styles/searchix/README.md b/styles/searchix/README.md new file mode 100644 index 0000000000..cfbe22219f --- /dev/null +++ b/styles/searchix/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Searchix + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [koibtw](https://github.com/koibtw) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/searchix/catppuccin.user.less b/styles/searchix/catppuccin.user.less new file mode 100644 index 0000000000..10978d9674 --- /dev/null +++ b/styles/searchix/catppuccin.user.less @@ -0,0 +1,50 @@ +/* ==UserStyle== +@name Searchix Catppuccin +@namespace github.com/catppuccin/userstyles/styles/searchix +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/searchix +@version 2026.08.16 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/searchix/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Asearchix +@description Soothing pastel theme for Searchix +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; + +@-moz-document domain("searchix.ovh") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --bg: @base; + --accent-bg: @mantle; + --text: @text; + --text-light: @subtext0; + --accent: @accent; + --accent-hover: @accent; + --accent-error: fade(@red, 20%); + --border: @overlay0; + --code: @lavender; + --preformatted: @text; + --disabled: @crust; + + dialog { + color: var(--text); + } + } +} diff --git a/styles/searxng/catppuccin.user.less b/styles/searxng/catppuccin.user.less index 5bbd53b7ad..be7f01fb17 100644 --- a/styles/searxng/catppuccin.user.less +++ b/styles/searxng/catppuccin.user.less @@ -2,7 +2,7 @@ @name SearXNG Catppuccin @namespace github.com/catppuccin/userstyles/styles/searxng @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/searxng -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/searxng/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Asearxng @description Soothing pastel theme for SearXNG @@ -17,7 +17,7 @@ @var checkbox additions "Additional Tweaks" 0 ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; /* Domains picked from https://searx.space/. */ @-moz-document domain("search.bus-hit.me"), domain("search.inetol.net") { @@ -44,8 +44,8 @@ --color-base-font: @text; --color-base-background: @base; --color-base-background-mobile: @base; - --color-url-font: @accent; - --color-url-visited-font: @accent; + --color-url-font: @blue; + --color-url-visited-font: @lavender; --color-header-background: @mantle; --color-header-border: @mantle; --color-footer-background: @mantle; @@ -86,9 +86,9 @@ --color-result-vim-selected: @surface0; --color-result-vim-arrow: @accent; --color-result-description-highlight-font: @text; - --color-result-link-font: @accent; - --color-result-link-font-highlight: @accent; - --color-result-link-visited-font: @accent; + --color-result-link-font: @blue; + --color-result-link-font-highlight: @blue; + --color-result-link-visited-font: @lavender; --color-result-publishdate-font: @surface2; --color-result-engines-font: @surface2; --color-result-search-url-border: @surface2; @@ -97,7 +97,7 @@ --color-result-detail-label-font: @subtext0; --color-result-detail-background: @base; --color-result-detail-hr: @base; - --color-result-detail-link: @accent; + --color-result-detail-link: @blue; --color-result-detail-loader-border: rgba(255, 255, 255, 0.2); --color-result-detail-loader-borderleft: @crust; --color-result-image-span-font: @text; @@ -141,6 +141,10 @@ stroke: @accent; } + .index .title { + filter: @accent-filter; + } + & when (@additions = 1) { article.result { background-color: var(--color-result-background); diff --git a/styles/seventv/catppuccin.user.less b/styles/seventv/catppuccin.user.less index 83d65b4962..aa3b274061 100644 --- a/styles/seventv/catppuccin.user.less +++ b/styles/seventv/catppuccin.user.less @@ -2,7 +2,7 @@ @name 7TV Catppuccin @namespace github.com/catppuccin/userstyles/styles/seventv @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/seventv -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/seventv/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aseventv @description Soothing pastel theme for 7TV @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("7tv.app") { .light-theme { diff --git a/styles/shinigami-eyes/catppuccin.user.less b/styles/shinigami-eyes/catppuccin.user.less index 6a83bb9092..f4b56d79f4 100644 --- a/styles/shinigami-eyes/catppuccin.user.less +++ b/styles/shinigami-eyes/catppuccin.user.less @@ -2,7 +2,7 @@ @name Shinigami Eyes Catppuccin @namespace github.com/catppuccin/userstyles/styles/shinigami-eyes @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/shinigami-eyes -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/shinigami-eyes/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ashinigami-eyes @description Soothing pastel theme for Shinigami Eyes @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; /* These are the domains for the sites that Shinigami Eyes works with. diff --git a/styles/snapchat-web/catppuccin.user.less b/styles/snapchat-web/catppuccin.user.less index 6d1564086a..51973eb5c5 100644 --- a/styles/snapchat-web/catppuccin.user.less +++ b/styles/snapchat-web/catppuccin.user.less @@ -2,7 +2,7 @@ @name Snapchat Web Catppuccin @namespace github.com/catppuccin/userstyles/styles/snapchat-web @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/snapchat-web -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/snapchat-web/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Asnapchat-web @description Soothing pastel theme for Snapchat Web @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document url-prefix("https://www.snapchat.com/web") { :root[theme="dark"] { diff --git a/styles/spotify-web/catppuccin.user.less b/styles/spotify-web/catppuccin.user.less index 69150b1e53..dc40f0edf3 100644 --- a/styles/spotify-web/catppuccin.user.less +++ b/styles/spotify-web/catppuccin.user.less @@ -2,7 +2,7 @@ @name Spotify Web Catppuccin @namespace github.com/catppuccin/userstyles/styles/spotify-web @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/spotify-web -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/spotify-web/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aspotify-web @description Soothing pastel theme for Spotify Web @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("open.spotify.com") { :root { @media (prefers-color-scheme: light) { diff --git a/styles/stack-overflow/catppuccin.user.less b/styles/stack-overflow/catppuccin.user.less index bd32ecf383..5c2860a54e 100644 --- a/styles/stack-overflow/catppuccin.user.less +++ b/styles/stack-overflow/catppuccin.user.less @@ -2,7 +2,7 @@ @name Stack Overflow Catppuccin @namespace github.com/catppuccin/userstyles/styles/stack-overflow @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/stack-overflow -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/stack-overflow/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Astack-overflow @description Soothing pastel theme for Stack Overflow @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("stackoverflow.com"), domain("stackexchange.com"), diff --git a/styles/startpage/README.md b/styles/startpage/README.md index fcbb20772b..45a7c9ff24 100644 --- a/styles/startpage/README.md +++ b/styles/startpage/README.md @@ -18,8 +18,8 @@ See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). -## ❤️‍🩹 Unmaintained -This userstyle currently lacks maintainers, and may not work correctly. Please feel free to contribute for any issues you find! +## 💝 Current Maintainer +- [WalkQuackBack](https://github.com/WalkQuackBack) ## 💖 Past Maintainer - [bartlibert](https://github.com/bartlibert) diff --git a/styles/startpage/catppuccin.user.less b/styles/startpage/catppuccin.user.less index c8f5b460f6..30f819541c 100644 --- a/styles/startpage/catppuccin.user.less +++ b/styles/startpage/catppuccin.user.less @@ -2,7 +2,7 @@ @name Startpage Catppuccin @namespace github.com/catppuccin/userstyles/styles/startpage @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/startpage -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/startpage/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Astartpage @description Soothing pastel theme for Startpage @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("startpage.com") { :root { diff --git a/styles/status.cafe/catppuccin.user.less b/styles/status.cafe/catppuccin.user.less index af7bd72c23..d4f3d7772e 100644 --- a/styles/status.cafe/catppuccin.user.less +++ b/styles/status.cafe/catppuccin.user.less @@ -2,7 +2,7 @@ @name status.cafe Catppuccin @namespace github.com/catppuccin/userstyles/styles/status.cafe @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/status.cafe -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/status.cafe/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Astatus.cafe @description Soothing pastel theme for status.cafe @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document regexp("https://status\\.cafe/(?!users).*"), domain("forum.status.cafe") { diff --git a/styles/stylus/catppuccin.user.less b/styles/stylus/catppuccin.user.less index 9247ccfffd..7325ece2c5 100644 --- a/styles/stylus/catppuccin.user.less +++ b/styles/stylus/catppuccin.user.less @@ -2,7 +2,7 @@ @name Stylus Catppuccin @namespace github.com/catppuccin/userstyles/styles/stylus @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/stylus -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/stylus/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Astylus @description Soothing pastel theme for Stylus @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document url-prefix("moz-extension://"), url-prefix("chrome-extension://") { diff --git a/styles/substack/catppuccin.user.less b/styles/substack/catppuccin.user.less index 131a9355fc..50578776b7 100644 --- a/styles/substack/catppuccin.user.less +++ b/styles/substack/catppuccin.user.less @@ -2,7 +2,7 @@ @name Substack Catppuccin @namespace github.com/catppuccin/userstyles/styles/substack @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/substack -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/substack/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Asubstack @description Soothing pastel theme for Substack @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("substack.com") { :root { diff --git a/styles/syncthing/catppuccin.user.less b/styles/syncthing/catppuccin.user.less index a1955bf1f5..6b9af92986 100644 --- a/styles/syncthing/catppuccin.user.less +++ b/styles/syncthing/catppuccin.user.less @@ -2,7 +2,7 @@ @name Syncthing Catppuccin @namespace github.com/catppuccin/userstyles/styles/syncthing @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/syncthing -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/syncthing/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Asyncthing @description Soothing pastel theme for Syncthing @@ -17,7 +17,7 @@ @var text urls "URL(s) for Syncthing" "127\.0\.0\.1\:8384,0\.0\.0\.0\:8384,localhost\:8384" ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; /* `replace( ," ", "", "g")` is here to remove extra spaces (if any) diff --git a/styles/tabnews/catppuccin.user.less b/styles/tabnews/catppuccin.user.less index f5ae9112bf..a111407ea7 100644 --- a/styles/tabnews/catppuccin.user.less +++ b/styles/tabnews/catppuccin.user.less @@ -2,7 +2,7 @@ @name TabNews Catppuccin @namespace github.com/catppuccin/userstyles/styles/tabnews @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/tabnews -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/tabnews/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Atabnews @description Soothing pastel theme for TabNews @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("tabnews.com.br") { :root:has(div[data-color-mode="dark"]) { diff --git a/styles/tldraw/README.md b/styles/tldraw/README.md index a90faab825..477381ff86 100644 --- a/styles/tldraw/README.md +++ b/styles/tldraw/README.md @@ -20,11 +20,13 @@ See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting > [!NOTE] > This theme only changes how the colors appear on the tldraw canvas. Exported graphics **will not be Catppuccin-themed**. -## 💝 Current Maintainers +## 💝 Current Maintainer +- [NekoDrone](https://github.com/NekoDrone) + +## 💖 Past Maintainers - [GenShibe](https://github.com/GenShibe) - [uncenter](https://github.com/uncenter) -  

diff --git a/styles/tldraw/catppuccin.user.less b/styles/tldraw/catppuccin.user.less index 51301792e5..1237701c33 100644 --- a/styles/tldraw/catppuccin.user.less +++ b/styles/tldraw/catppuccin.user.less @@ -2,7 +2,7 @@ @name tldraw Catppuccin @namespace github.com/catppuccin/userstyles/styles/tldraw @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/tldraw -@version 2025.09.10 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/tldraw/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Atldraw @description Soothing pastel theme for tldraw @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("tldraw.com") { .tl-theme__dark { diff --git a/styles/trinket/catppuccin.user.less b/styles/trinket/catppuccin.user.less index 9ccf64c4c8..a453a260af 100644 --- a/styles/trinket/catppuccin.user.less +++ b/styles/trinket/catppuccin.user.less @@ -2,7 +2,7 @@ @name Trinket Catppuccin @namespace github.com/catppuccin/userstyles/styles/trinket @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/trinket -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/trinket/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Atrinket @description Soothing pastel theme for Trinket @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("trinket.io") { @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); diff --git a/styles/tuta/catppuccin.user.less b/styles/tuta/catppuccin.user.less index 56e6c6ac98..3f3decb23f 100644 --- a/styles/tuta/catppuccin.user.less +++ b/styles/tuta/catppuccin.user.less @@ -2,7 +2,7 @@ @name Tuta Catppuccin @namespace github.com/catppuccin/userstyles/styles/tuta @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/tuta -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/tuta/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Atuta @description Soothing pastel theme for Tuta @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("app.tuta.com"), domain("mail.tutanota.com") { :root { diff --git a/styles/twitch/catppuccin.user.less b/styles/twitch/catppuccin.user.less index 008a654d50..e0000fc3b1 100644 --- a/styles/twitch/catppuccin.user.less +++ b/styles/twitch/catppuccin.user.less @@ -2,7 +2,7 @@ @name Twitch Catppuccin @namespace github.com/catppuccin/userstyles/styles/twitch @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/twitch -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/twitch/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Atwitch @description Soothing pastel theme for Twitch @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("twitch.tv") { @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); diff --git a/styles/twitter/catppuccin.user.less b/styles/twitter/catppuccin.user.less index b83ba4a3ea..e95c8783cf 100644 --- a/styles/twitter/catppuccin.user.less +++ b/styles/twitter/catppuccin.user.less @@ -2,7 +2,7 @@ @name Twitter Catppuccin @namespace github.com/catppuccin/userstyles/styles/twitter @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/twitter -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/twitter/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Atwitter @description Soothing pastel theme for Twitter @@ -18,7 +18,7 @@ @var checkbox darkenShadows "Darken Shadows on Dark Themes" 1 ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("twitter.com"), domain("x.com") { :root { @@ -39,6 +39,7 @@ --color: @overlay1; --color-emphasis: @text; --hover-bg-color: @surface0; + --cpft-text-primary: @text; // shadows .r-qo02w8, diff --git a/styles/vercel/catppuccin.user.less b/styles/vercel/catppuccin.user.less index c5925529de..3536fdc1f7 100644 --- a/styles/vercel/catppuccin.user.less +++ b/styles/vercel/catppuccin.user.less @@ -2,7 +2,7 @@ @name Vercel/Next.js Catppuccin @namespace github.com/catppuccin/userstyles/styles/vercel @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/vercel -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/vercel/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Avercel @description Soothing pastel theme for Vercel and Next.js @@ -15,9 +15,11 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("vercel.com"), domain("nextjs.org") { + @import url("https://prismjs.catppuccin.com/variables.important.css"); + :root.dark-theme { #catppuccin(@darkFlavor); } @@ -28,6 +30,7 @@ #catppuccin(@flavor) { #lib.palette(); #lib.defaults(); + #lib.css-variables(); --geist-foreground: @text; --geist-background: @mantle; diff --git a/styles/vikunja/catppuccin.user.less b/styles/vikunja/catppuccin.user.less index eee2a771ef..bb3d71e27f 100644 --- a/styles/vikunja/catppuccin.user.less +++ b/styles/vikunja/catppuccin.user.less @@ -2,7 +2,7 @@ @name Vikunja Catppuccin @namespace github.com/catppuccin/userstyles/styles/vikunja @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/vikunja -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/vikunja/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Avikunja @description Soothing pastel theme for Vikunja @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("try.vikunja.io") { :root.dark { diff --git a/styles/web.dev/catppuccin.user.less b/styles/web.dev/catppuccin.user.less index 39bb031e54..75a399112e 100644 --- a/styles/web.dev/catppuccin.user.less +++ b/styles/web.dev/catppuccin.user.less @@ -2,7 +2,7 @@ @name web.dev Catppuccin @namespace github.com/catppuccin/userstyles/styles/web.dev @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/web.dev -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/web.dev/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aweb.dev @description Soothing pastel theme for web.dev @@ -15,9 +15,10 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; -@-moz-document domain("web.dev") { +// Exclude https://pagespeed.web.dev/, which is (currently) poorly themed. +@-moz-document url-prefix("https://web.dev") { :root { @media (prefers-color-scheme: light) { #catppuccin(@lightFlavor); diff --git a/styles/whatsapp-web/catppuccin.user.less b/styles/whatsapp-web/catppuccin.user.less index 5248425cf1..41a4ac5297 100644 --- a/styles/whatsapp-web/catppuccin.user.less +++ b/styles/whatsapp-web/catppuccin.user.less @@ -2,7 +2,7 @@ @name WhatsApp Web Catppuccin @namespace github.com/catppuccin/userstyles/styles/whatsapp-web @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/whatsapp-web -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/whatsapp-web/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Awhatsapp-web @description Soothing pastel theme for WhatsApp Web @@ -17,7 +17,7 @@ @var checkbox lighterMessages "Elevated incoming messages" 0 ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("web.whatsapp.com") { /* Note: Some variables appear to be applied on :root, @@ -77,6 +77,7 @@ @emphasize: 10%; @deemphasize: if(@flavor = latte, 15%, 30%); + @bubble-surface-deemp: 20%; @scrim: 30%; @pressed: 20%; @@ -111,8 +112,11 @@ #WDS(background-elevated-wash-plain, @crust); #WDS(background-elevated-wash-inset, @crust); #WDS(background-dimmer, fade(#000, @scrim)); + #WDS(modal-backdrop-solid, @crust); #WDS(surface-default, @mantle); + --background-default: var(--WDS-surface-default); + --search-container-background: var(--WDS-surface-default); #WDS(surface-emphasized, @base); #WDS(surface-elevated-default, @base); #WDS(surface-elevated-emphasized, mix(@text, @base, @emphasize)); @@ -134,16 +138,25 @@ if(@lighterMessages = 1, @surface1, @base), ); - #WDS(systems-bubble-surface-outgoing, mix(@accent, @base, @deemphasize)); + #WDS( + systems-bubble-surface-outgoing, + mix(@accent, @base, @bubble-surface-deemp), + ); #WDS(systems-bubble-content-deemphasized, fade(@text, 50%)); #WDS(systems-bubble-surface-overlay, @mantle); #WDS(systems-bubble-surface-system, @mantle); - #WDS(systems-bubble-surface-e2e, mix(@yellow, @mantle, 5%)); + #WDS( + systems-bubble-surface-e2e, + mix(@yellow, @mantle, @bubble-surface-deemp), + ); #WDS(systems-bubble-content-e2e, @yellow); - #WDS(systems-bubble-surface-business, mix(@teal, @mantle, 5%)); + #WDS( + systems-bubble-surface-business, + mix(@teal, @mantle, @bubble-surface-deemp), + ); #WDS(systems-chat-surface-composer, @base); #WDS(systems-chat-background-wallpaper, @crust); diff --git a/styles/wiki.nixos.org/catppuccin.user.less b/styles/wiki.nixos.org/catppuccin.user.less index a6c5708bec..067ee70c82 100644 --- a/styles/wiki.nixos.org/catppuccin.user.less +++ b/styles/wiki.nixos.org/catppuccin.user.less @@ -2,7 +2,7 @@ @name NixOS Wiki Catppuccin @namespace github.com/catppuccin/userstyles/styles/wiki.nixos.org @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/wiki.nixos.org -@version 2025.09.06 +@version 2026.08.16 @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Awiki.nixos.org @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/wiki.nixos.org/catppuccin.user.less @description Soothing pastel theme for NixOS Wiki @@ -16,7 +16,7 @@ @var checkbox highlight-redirect "Highlight redirect links" 0 ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("wiki.nixos.org") { @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); diff --git a/styles/wikipedia/catppuccin.user.less b/styles/wikipedia/catppuccin.user.less index 9d57984f6a..6e4aa51004 100644 --- a/styles/wikipedia/catppuccin.user.less +++ b/styles/wikipedia/catppuccin.user.less @@ -2,7 +2,7 @@ @name Wikipedia Catppuccin @namespace github.com/catppuccin/userstyles/styles/wikipedia @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/wikipedia -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/wikipedia/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Awikipedia @description Soothing pastel theme for Wikipedia @@ -16,7 +16,7 @@ @var checkbox highlight-redirect "Highlight redirect links" 0 ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("wikipedia.org"), domain("wiktionary.org"), diff --git a/styles/wikiwand/catppuccin.user.less b/styles/wikiwand/catppuccin.user.less index e911e8fe47..960ecdc86b 100644 --- a/styles/wikiwand/catppuccin.user.less +++ b/styles/wikiwand/catppuccin.user.less @@ -2,7 +2,7 @@ @name Wikiwand Catppuccin @namespace github.com/catppuccin/userstyles/styles/wikiwand @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/wikiwand -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/wikiwand/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Awikiwand @description Soothing pastel theme for Wikiwand @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("wikiwand.com") { @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); diff --git a/styles/youtube/catppuccin.user.less b/styles/youtube/catppuccin.user.less index a042eb565e..799be5f13b 100644 --- a/styles/youtube/catppuccin.user.less +++ b/styles/youtube/catppuccin.user.less @@ -2,7 +2,7 @@ @name YouTube Catppuccin @namespace github.com/catppuccin/userstyles/styles/youtube @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/youtube -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/youtube/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ayoutube @description Soothing pastel theme for YouTube @@ -19,7 +19,7 @@ @var checkbox sponsorBlock "Enable SponsorBlock segments" 1 ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("youtube.com") { :root[dark] { @@ -37,325 +37,355 @@ @black: if(@flavor = latte, @text, @base); color: @text; - background: @base !important; + background: @base; + + #--variables() { + &, + [dark], + [system-icons], + [darker-dark-theme], + &[dark], + &[system-icons], + &[darker-dark-theme] { + --efyt-control-bar-background-color: @mantle; + --dimmer-text: @text; + + /* Newest Variables */ + --yt-sys-color-baseline--base-background: @base; + --yt-sys-color-baseline--menu-background: @mantle; + --yt-sys-color-baseline--raised-background: @surface0; + --yt-sys-color-baseline--additive-background: @surface0; + --yt-sys-color-baseline--wordmark-text: @text; + --yt-sys-color-baseline--text-primary: @text; + --yt-sys-color-baseline--text-secondary: @subtext0; + --yt-sys-color-baseline--call-to-action: @accent; + --yt-sys-color-baseline--suggested-action: mix(@accent, @base, 30%); + --yt-sys-color-baseline--outline: @surface0; + --yt-sys-color-baseline--outline-opaque: @surface1; + --yt-sys-color-baseline--outline-inverse-opaque: @overlay0; + --yt-sys-color-baseline--overlay-background-medium-light: fade( + @black, + 60% + ); + --yt-sys-color-baseline--overlay-background-heavy: fade(@black, 80%); + --yt-sys-color-baseline--overlay-background-solid: @crust; + --yt-sys-color-baseline--overlay-text-primary: @text; + + --yt-spec-white-1: @text; + --yt-spec-white-2: @subtext0; + --yt-spec-white-3: @subtext1; + --yt-spec-white-4: darken(@subtext1, 5%); + --yt-spec-black-1: @overlay1; + --yt-spec-black-2: @overlay0; + --yt-spec-black-3: @surface2; + --yt-spec-black-4: @surface1; + --yt-spec-black-pure: @surface0; + --yt-spec-grey-1: @text; + --yt-spec-grey-2: @subtext0; + --yt-spec-grey-3: @subtext1; + --yt-spec-grey-4: @overlay2; + --yt-spec-grey-5: @overlay1; + --yt-brand-youtube-red: @accent; + --yt-brand-medium-red: @accent; + --yt-brand-light-red: @accent; + --yt-spec-red-30: @peach; + --yt-spec-red-70: @red; + --yt-spec-red-indicator: @accent; + --yt-spec-pale-blue: @sky; + --yt-spec-light-blue: @sky; + --yt-spec-dark-blue: @sapphire; + --yt-spec-navy-blue: @teal; + --yt-spec-light-green: @green; + --yt-spec-dark-green: @green; + --yt-spec-yellow: @peach; + --yt-spec-black-pure-alpha-5: @subtext0; + --yt-spec-black-pure-alpha-10: @overlay2; + --yt-spec-black-pure-alpha-15: fade(@crust, 85%); + --yt-spec-black-pure-alpha-30: fade(@crust, 70%); + --yt-spec-black-pure-alpha-60: fade(@crust, 40%); + --yt-spec-black-pure-alpha-80: fade(@crust, 20%); + --yt-spec-black-1-alpha-98: fade(@crust, 2%); + --yt-spec-black-1-alpha-95: fade(@crust, 5%); + --yt-spec-white-1-alpha-10: fade(@text, 90%); + --yt-spec-white-1-alpha-20: fade(@text, 80%); + --yt-spec-white-1-alpha-25: fade(@text, 75%); + --yt-spec-white-1-alpha-30: fade(@text, 70%); + --yt-spec-white-1-alpha-70: fade(@text, 30%); + --yt-spec-white-1-alpha-95: fade(@text, 5%); + --yt-spec-white-1-alpha-98: fade(@text, 2%); + --yt-brand-medium-red-alpha-90: fade(@accent, 10%); + --yt-brand-medium-red-alpha-30: fade(@accent, 70%); + --yt-brand-light-red-alpha-30: fade(@accent, 70%); + --yt-spec-light-blue-alpha-30: fade(@sapphire, 70%); + --yt-spec-dark-blue-alpha-30: fade(@sapphire, 70%); + + --yt-spec-base-background: @base; + --yt-spec-raised-background: @surface0; + --yt-spec-menu-background: @mantle; + --yt-spec-inverted-background: @text; + --yt-spec-additive-background: @surface0; + --yt-spec-outline: @surface0; + --yt-spec-shadow: fade(@crust, 75%); + --yt-spec-text-primary: @text; + --yt-spec-text-secondary: @subtext0; + --yt-spec-text-disabled: @subtext1; + --yt-spec-text-primary-inverse: @crust; + --yt-spec-call-to-action: @accent; + --yt-spec-call-to-action-inverse: @accent; + --yt-spec-suggested-action: fade(@accent, 20%); + --yt-spec-suggested-action-inverse: @text; + --yt-spec-icon-active-other: @text; + --yt-spec-button-chip-background-hover: @surface1; + --yt-spec-touch-response: @surface0; + + --yt-spec-touch-response-inverse: @accent; + --yt-spec-brand-icon-active: @accent; + --yt-spec-brand-button-background: @accent; + --yt-spec-brand-link-text: @sapphire; + --yt-spec-wordmark-text: @text; + --yt-spec-error-indicator: @red; + --yt-spec-themed-blue: @accent; + --yt-spec-themed-green: @green; + --yt-spec-ad-indicator: @teal; + --yt-spec-themed-overlay-background: fade(@crust, 80%); + --yt-spec-commerce-badge-background: @green; + --yt-spec-static-brand-red: @accent; + --yt-spec-static-brand-white: @text; + --yt-spec-static-brand-black: @base; + --yt-spec-static-clear-color: fade(@crust, 100%); + --yt-spec-static-clear-black: @base; + --yt-spec-static-ad-yellow: @peach; + --yt-spec-static-grey: @subtext0; + --yt-spec-static-overlay-background-solid: @crust; + --yt-spec-static-overlay-background-heavy: @crust; + --yt-spec-static-overlay-background-medium: fade(@crust, 50%); + --yt-spec-static-overlay-background-light: fade( + @crust, + 90% + ); + --yt-spec-static-overlay-text-primary: @text; + --yt-spec-static-overlay-text-secondary: fade( + @subtext0, + 30% + ); + --yt-spec-static-overlay-text-disabled: fade( + @subtext0, + 70% + ); + --yt-spec-static-overlay-call-to-action: @accent; + --yt-spec-static-overlay-icon-active-other: @crust; + --yt-spec-static-overlay-icon-inactive: @surface1; + --yt-spec-static-overlay-icon-disabled: @surface2; + --yt-spec-static-overlay-button-primary: @accent; + --yt-spec-static-overlay-touch-response: @overlay1; + --yt-spec-static-overlay-touch-response-inverse: @surface1; + --yt-spec-static-overlay-background-brand: @accent; + --yt-spec-assistive-feed-themed-gradient-1: @subtext0; + --yt-spec-assistive-feed-themed-gradient-2: @lavender; + --yt-spec-assistive-feed-themed-gradient-3: @red; + --yt-spec-brand-background-solid: @base; + --yt-spec-brand-background-primary: @base; + --yt-spec-brand-background-secondary: @mantle; + --yt-spec-general-background-a: @base; + --yt-spec-general-background-b: @base; + --yt-spec-general-background-c: @crust; + --yt-spec-error-background: @base; + --yt-spec-10-percent-layer: @surface1; + --yt-spec-snackbar-background: @mantle; + --yt-spec-snackbar-background-updated: @mantle; + --yt-spec-badge-chip-background: if( + @flavor = latte, + @crust, + @surface0 + ); + --yt-spec-verified-badge-background: @overlay0; + --yt-spec-call-to-action-fadeoutd: fade(@sapphire, 70%); + --yt-spec-call-to-action-hover: @accent; + --yt-spec-brand-button-background-hover: @accent; + --yt-spec-brand-link-text-fadeoutd: fade( + @accent, + 70% + ); + --yt-spec-filled-button-focus-outline: @surface0; + --yt-spec-static-overlay-button-hover: @surface1; + --yt-spec-mono-filled-hover: @surface1; + --yt-spec-commerce-filled-hover: @accent; + --yt-spec-mono-tonal-hover: @surface1; + --yt-spec-commerce-tonal-hover: @surface2; + --yt-spec-static-overlay-filled-hover: @overlay1; + --yt-spec-static-overlay-tonal-hover: @surface1; + --yt-spec-paper-tab-ink: fade(@text, 70%); + --yt-spec-filled-button-text: @text; + --yt-spec-selected-nav-text: @text; + --iron-icon-fill-color: @text; + + --yt-spec-overlay-text-primary: @text; + --yt-spec-overlay-background-medium-light: fade(@black, 60%); + --yt-spec-overlay-background-heavy: fade(@black, 80%); + --yt-spec-overlay-background-solid: @black; + + /* Search bar */ + --ytd-searchbox-border-color: @surface0; + --ytd-searchbox-legacy-border-color: @surface0; + --ytd-searchbox-legacy-border-shadow-color: fade( + @crust, + 100% + ); + --ytd-searchbox-legacy-button-color: @mantle; + --ytd-searchbox-legacy-button-border-color: @surface0; + --ytd-searchbox-legacy-button-focus-color: @accent; + --ytd-searchbox-legacy-button-hover-color: @mantle; + --ytd-searchbox-legacy-button-hover-border-color: @surface0; + --ytd-searchbox-legacy-button-icon-color: @accent; + --ytd-searchbox-background: @base; + --ytd-searchbox-text-color: @text; + + /* System icons */ + --yt-spec-icon-inactive: @text; + --yt-spec-icon-disabled: @overlay1; + --yt-spec-brand-icon-inactive: @overlay2; + + /* Live chat */ + --yt-live-chat-background-color: @base; + --yt-live-chat-primary-text-color: @text; + --yt-live-chat-action-panel-background-color: @base; + --yt-live-chat-secondary-background-color: @surface1; + --yt-live-chat-toast-background-color: @surface2; + --yt-live-chat-mode-change-background-color: @base; + --yt-live-chat-secondary-text-color: @subtext0; + --yt-live-chat-tertiary-text-color: fade(@text, 46%); + --yt-live-chat-text-input-field-inactive-underline-color: @subtext0; + + --yt-live-chat-text-input-field-placeholder-color: @subtext0; + --yt-live-chat-enabled-send-button-color: @text; + --yt-live-chat-disabled-icon-button-color: @subtext1; + --yt-live-chat-picker-button-hover-color: @accent; + --yt-live-chat-mention-background-color: @accent; + --yt-live-chat-mention-text-color: @text; + --yt-live-chat-deleted-message-color: @subtext0; + --yt-live-chat-deleted-message-bar-color: @subtext1; + --yt-live-chat-reconnect-message-color: @text; + --yt-live-chat-disabled-button-background-color: @overlay0; + --yt-live-chat-sub-panel-background-color: @base; + --yt-live-chat-sub-panel-background-color-transparent: @mantle; + --yt-live-chat-moderator-color: @lavender; + --yt-live-chat-owner-color: @peach; + --yt-live-chat-message-highlight-background-color: @base; + --yt-live-chat-sponsor-color: @green; + --yt-live-chat-overlay-color: fade(@mantle, 50%); + --yt-live-chat-dialog-background-color: @base; + --yt-emoji-picker-variant-selector-bg-color: @base; + --yt-live-chat-moderation-mode-hover-background-color: fade( + @mantle, + 70% + ); + --yt-grey: @subtext0; + --yt-live-chat-text-input-field-suggestion-background-color: @subtext0; + + --yt-live-chat-text-input-field-suggestion-background-color-hover: @subtext1; + + --yt-emoji-picker-search-background-color: @surface0; + --yt-emoji-picker-search-color: @text; + --yt-emoji-picker-search-placeholder-color: @accent; + --yt-live-chat-slider-active-color: @accent; + --yt-live-chat-slider-container-color: @surface0; + --yt-live-chat-slider-markers-color: @text; + --yt-live-chat-banner-gradient-scrim: linear-gradient( + @mantle, + transparent + ); + --yt-live-chat-action-panel-gradient-scrim: linear-gradient( + to top, + @mantle, + transparent + ); + --yt-live-chat-automod-button-background-color-hover: fade( + @crust, + 50% + ); + --yt-live-chat-automod-button-explanation-color: fade( + @accent, + 30% + ); + --yt-live-chat-shimmer-background-color: fade(@crust, 60%); + --yt-live-chat-shimmer-linear-gradient: linear-gradient( + 0deg, + fade(@text, 90%) 40%, + fade(@base, 70%) 50%, + fade(@text, 90%) 60% + ); + --yt-live-chat-vem-background-color: @mantle; + --yt-live-chat-product-picker-icon-color: fade(@text, 50%); + --yt-live-chat-product-picker-hover-color: @overlay0; + --yt-live-chat-product-picker-disabled-icon-color: fade( + @text, + 70% + ); + --yt-live-chat-action-panel-background-color-transparent: (null); - &, - [dark], - [system-icons], - [darker-dark-theme], - &[dark], - &[system-icons], - &[darker-dark-theme] { - --efyt-control-bar-background-color: @mantle !important; - --dimmer-text: @text !important; - --yt-spec-white-1: @text !important; - --yt-spec-white-2: @subtext0 !important; - --yt-spec-white-3: @subtext1 !important; - --yt-spec-white-4: darken(@subtext1, 5%) !important; - --yt-spec-black-1: @overlay1 !important; - --yt-spec-black-2: @overlay0 !important; - --yt-spec-black-3: @surface2 !important; - --yt-spec-black-4: @surface1 !important; - --yt-spec-black-pure: @surface0 !important; - --yt-spec-grey-1: @text !important; - --yt-spec-grey-2: @subtext0 !important; - --yt-spec-grey-3: @subtext1 !important; - --yt-spec-grey-4: @overlay2 !important; - --yt-spec-grey-5: @overlay1 !important; - --yt-brand-youtube-red: @accent !important; - --yt-brand-medium-red: @accent !important; - --yt-brand-light-red: @accent !important; - --yt-spec-red-30: @peach !important; - --yt-spec-red-70: @red !important; - --yt-spec-red-indicator: @accent !important; - --yt-spec-pale-blue: @sky !important; - --yt-spec-light-blue: @sky !important; - --yt-spec-dark-blue: @sapphire !important; - --yt-spec-navy-blue: @teal !important; - --yt-spec-light-green: @green !important; - --yt-spec-dark-green: @green !important; - --yt-spec-yellow: @peach !important; - --yt-spec-black-pure-alpha-5: @subtext0 !important; - --yt-spec-black-pure-alpha-10: @overlay2 !important; - --yt-spec-black-pure-alpha-15: fade(@crust, 85%) !important; - --yt-spec-black-pure-alpha-30: fade(@crust, 70%) !important; - --yt-spec-black-pure-alpha-60: fade(@crust, 40%) !important; - --yt-spec-black-pure-alpha-80: fade(@crust, 20%) !important; - --yt-spec-black-1-alpha-98: fade(@crust, 2%) !important; - --yt-spec-black-1-alpha-95: fade(@crust, 5%) !important; - --yt-spec-white-1-alpha-10: fade(@text, 90%) !important; - --yt-spec-white-1-alpha-20: fade(@text, 80%) !important; - --yt-spec-white-1-alpha-25: fade(@text, 75%) !important; - --yt-spec-white-1-alpha-30: fade(@text, 70%) !important; - --yt-spec-white-1-alpha-70: fade(@text, 30%) !important; - --yt-spec-white-1-alpha-95: fade(@text, 5%) !important; - --yt-spec-white-1-alpha-98: fade(@text, 2%) !important; - --yt-brand-medium-red-alpha-90: fade(@accent, 10%) !important; - --yt-brand-medium-red-alpha-30: fade(@accent, 70%) !important; - --yt-brand-light-red-alpha-30: fade(@accent, 70%) !important; - --yt-spec-light-blue-alpha-30: fade(@sapphire, 70%) !important; - --yt-spec-dark-blue-alpha-30: fade(@sapphire, 70%) !important; - - --yt-spec-base-background: @base !important; - --yt-spec-raised-background: @base !important; - --yt-spec-menu-background: @mantle !important; - --yt-spec-inverted-background: @text !important; - --yt-spec-additive-background: fade(@surface1, 90%) !important; - --yt-spec-outline: @surface0 !important; - --yt-spec-shadow: fade(@crust, 75%) !important; - --yt-spec-text-primary: @text !important; - --yt-spec-text-secondary: @subtext0 !important; - --yt-spec-text-disabled: @subtext1 !important; - --yt-spec-text-primary-inverse: @crust !important; - --yt-spec-call-to-action: @accent !important; - --yt-spec-call-to-action-inverse: @accent !important; - --yt-spec-suggested-action: fade(@accent, 20%) !important; - --yt-spec-suggested-action-inverse: @text !important; - --yt-spec-icon-active-other: @text !important; - --yt-spec-button-chip-background-hover: @surface1 !important; - --yt-spec-touch-response: @surface0 !important; - - --yt-spec-touch-response-inverse: @accent !important; - --yt-spec-brand-icon-active: @accent !important; - --yt-spec-brand-button-background: @accent !important; - --yt-spec-brand-link-text: @sapphire !important; - --yt-spec-wordmark-text: @text !important; - --yt-spec-error-indicator: @red !important; - --yt-spec-themed-blue: @accent !important; - --yt-spec-themed-green: @green !important; - --yt-spec-ad-indicator: @teal !important; - --yt-spec-themed-overlay-background: fade(@crust, 80%) !important; - --yt-spec-commerce-badge-background: @green !important; - --yt-spec-static-brand-red: @accent !important; - --yt-spec-static-brand-white: @text !important; - --yt-spec-static-brand-black: @base !important; - --yt-spec-static-clear-color: fade(@crust, 100%) !important; - --yt-spec-static-clear-black: fade(@crust, 100%) !important; - --yt-spec-static-ad-yellow: @peach !important; - --yt-spec-static-grey: @subtext0 !important; - --yt-spec-static-overlay-background-solid: @crust !important; - --yt-spec-static-overlay-background-heavy: @crust; - --yt-spec-static-overlay-background-medium: fade(@crust, 50%) !important; - --yt-spec-static-overlay-background-medium-light: fade( - @crust, - 70% - ) !important; - --yt-spec-static-overlay-background-light: fade( - @crust, - 90% - ) !important; - --yt-spec-static-overlay-text-primary: @text !important; - --yt-spec-static-overlay-text-secondary: fade( - @subtext0, - 30% - ) !important; - --yt-spec-static-overlay-text-disabled: fade( - @subtext0, - 70% - ) !important; - --yt-spec-static-overlay-call-to-action: @accent !important; - --yt-spec-static-overlay-icon-active-other: @crust !important; - --yt-spec-static-overlay-icon-inactive: @surface1 !important; - --yt-spec-static-overlay-icon-disabled: @surface2 !important; - --yt-spec-static-overlay-button-primary: @accent !important; - --yt-spec-static-overlay-button-secondary: @surface0 !important; - --yt-spec-static-overlay-touch-response: @overlay1 !important; - --yt-spec-static-overlay-touch-response-inverse: @surface1 !important; - --yt-spec-static-overlay-background-brand: @accent !important; - --yt-spec-assistive-feed-themed-gradient-1: @subtext0 !important; - --yt-spec-assistive-feed-themed-gradient-2: @lavender !important; - --yt-spec-assistive-feed-themed-gradient-3: @red !important; - --yt-spec-brand-background-solid: @base !important; - --yt-spec-brand-background-primary: @base !important; - --yt-spec-brand-background-secondary: @mantle !important; - --yt-spec-general-background-a: @base !important; - --yt-spec-general-background-b: @base !important; - --yt-spec-general-background-c: @crust !important; - --yt-spec-error-background: @base !important; - --yt-spec-10-percent-layer: @surface1 !important; - --yt-spec-snackbar-background: @mantle !important; - --yt-spec-snackbar-background-updated: @mantle !important; - --yt-spec-badge-chip-background: if( - @flavor = latte, - @crust, - @surface0 - ) !important; - --yt-spec-verified-badge-background: @overlay0 !important; - --yt-spec-call-to-action-fadeoutd: fade(@sapphire, 70%) !important; - --yt-spec-call-to-action-hover: @accent !important; - --yt-spec-brand-button-background-hover: @accent !important; - --yt-spec-brand-link-text-fadeoutd: fade( - @accent, - 70% - ) !important; - --yt-spec-filled-button-focus-outline: @surface0 !important; - --yt-spec-static-overlay-button-hover: @surface1 !important; - --yt-spec-mono-filled-hover: @surface1 !important; - --yt-spec-commerce-filled-hover: @accent !important; - --yt-spec-mono-tonal-hover: @surface1 !important; - --yt-spec-commerce-tonal-hover: @surface2 !important; - --yt-spec-static-overlay-filled-hover: @overlay1 !important; - --yt-spec-static-overlay-tonal-hover: @surface1 !important; - --yt-spec-paper-tab-ink: fade(@text, 70%); - --yt-spec-filled-button-text: @text !important; - --yt-spec-selected-nav-text: @text !important; - --iron-icon-fill-color: @text !important; - - /* Search bar */ - --ytd-searchbox-border-color: @surface0 !important; - --ytd-searchbox-legacy-border-color: @surface0 !important; - --ytd-searchbox-legacy-border-shadow-color: fade( - @crust, - 100% - ) !important; - --ytd-searchbox-legacy-button-color: @mantle !important; - --ytd-searchbox-legacy-button-border-color: @surface0 !important; - --ytd-searchbox-legacy-button-focus-color: @accent !important; - --ytd-searchbox-legacy-button-hover-color: @mantle !important; - --ytd-searchbox-legacy-button-hover-border-color: @surface0 !important; - --ytd-searchbox-legacy-button-icon-color: @accent !important; - --ytd-searchbox-background: @base !important; - --ytd-searchbox-text-color: @text !important; - - /* System icons */ - --yt-spec-icon-inactive: @text !important; - --yt-spec-icon-disabled: @overlay1 !important; - --yt-spec-brand-icon-inactive: @overlay2 !important; - - /* Yt video Page */ - --yt-live-chat-background-color: @base !important; - --yt-live-chat-action-panel-background-color: @base !important; - --yt-live-chat-secondary-background-color: @surface1; - --yt-live-chat-toast-background-color: @surface2 !important; - --yt-live-chat-mode-change-background-color: @base !important; - --yt-live-chat-secondary-text-color: @subtext0 !important; - --yt-live-chat-tertiary-text-color: fade(@text, 46%) !important; - --yt-live-chat-text-input-field-inactive-underline-color: @subtext0 - !important; - --yt-live-chat-text-input-field-placeholder-color: @subtext0 !important; - --yt-live-chat-enabled-send-button-color: @text !important; - --yt-live-chat-disabled-icon-button-color: @subtext1 !important; - --yt-live-chat-picker-button-hover-color: @accent !important; - --yt-live-chat-mention-background-color: @accent !important; - --yt-live-chat-mention-text-color: @text !important; - --yt-live-chat-deleted-message-color: @subtext0; - --yt-live-chat-deleted-message-bar-color: @subtext1 !important; - --yt-live-chat-reconnect-message-color: @text !important; - --yt-live-chat-disabled-button-background-color: @overlay0 !important; - --yt-live-chat-sub-panel-background-color: @base !important; - --yt-live-chat-sub-panel-background-color-transparent: @mantle !important; - --yt-live-chat-moderator-color: @lavender !important; - --yt-live-chat-owner-color: @peach !important; - --yt-live-chat-message-highlight-background-color: @base !important; - --yt-live-chat-sponsor-color: @green !important; - --yt-live-chat-overlay-color: fade(@mantle, 50%); - --yt-live-chat-dialog-background-color: @base !important; - --yt-emoji-picker-variant-selector-bg-color: @base !important; - --yt-live-chat-moderation-mode-hover-background-color: fade( - @mantle, - 70% - ) !important; - --yt-grey: @subtext0 !important; - --yt-live-chat-text-input-field-suggestion-background-color: @subtext0 - !important; - --yt-live-chat-text-input-field-suggestion-background-color-hover: @subtext1 - !important; - --yt-emoji-picker-search-background-color: @surface0 !important; - --yt-emoji-picker-search-color: @text !important; - --yt-emoji-picker-search-placeholder-color: @accent !important; - --yt-live-chat-slider-active-color: @accent !important; - --yt-live-chat-slider-container-color: @surface0 !important; - --yt-live-chat-slider-markers-color: @text !important; - --yt-live-chat-banner-gradient-scrim: linear-gradient( - @mantle, - transparent - ) !important; - --yt-live-chat-action-panel-gradient-scrim: linear-gradient( - to top, - @mantle, - transparent - ) !important; - --yt-live-chat-automod-button-background-color-hover: fade( - @crust, - 50% - ) !important; - --yt-live-chat-automod-button-explanation-color: fade( - @accent, - 30% - ) !important; - --yt-live-chat-shimmer-background-color: fade(@crust, 60%) !important; - --yt-live-chat-shimmer-linear-gradient: linear-gradient( - 0deg, - fade(@text, 90%) 40%, - fade(@base, 70%) 50%, - fade(@text, 90%) 60% - ) !important; - --yt-live-chat-vem-background-color: @mantle !important; - --yt-live-chat-product-picker-icon-color: fade(@text, 50%) !important; - --yt-live-chat-product-picker-hover-color: @overlay0 !important; - --yt-live-chat-product-picker-disabled-icon-color: fade( - @text, - 70% - ) !important; - --yt-live-chat-action-panel-background-color-transparent: (null) - !important; - - --paper-tooltip-background: @overlay0 !important; - --paper-tooltip-text-color: @text !important; - - /* Links */ - --yt-endpoint-color: @accent !important; - --yt-endpoint-visited-color: @accent !important; - --yt-endpoint-hover-color: @accent !important; - - --sb-dark-red-outline: @accent !important; - --sb-main-bg-color: @base !important; - --sb-main-fg-color: @text !important; - --sb-grey-bg-color: @base !important; - --sb-grey-fg-color: @subtext0 !important; - --sb-red-bg-color: @accent !important; - - & when (@sponsorBlock = 1) { - --sb-category-sponsor: @green; - --sb-category-selfpromo: @yellow; - --sb-category-exclusive_access: @teal; - --sb-category-interaction: @mauve; - --sb-category-poi_highlight: @pink; - --sb-category-intro: @sky; - --sb-category-outro: @blue; - --sb-category-preview: @sapphire; - --sb-category-filler: @lavender; - --sb-category-music_offtopic: @peach; + --paper-tooltip-background: @surface2; + --paper-tooltip-text-color: @text; + .ytTooltipContainerDefaultTooltipContent { + background: var(--paper-tooltip-background); + color: var(--paper-tooltip-text-color); + } + + /* Links */ + --yt-endpoint-color: @text; + --yt-endpoint-visited-color: @text; + --yt-endpoint-hover-color: @accent; + + --sb-dark-red-outline: @accent; + --sb-main-bg-color: @base; + --sb-main-fg-color: @text; + --sb-grey-bg-color: @base; + --sb-grey-fg-color: @subtext0; + --sb-red-bg-color: @accent; + + & when (@sponsorBlock = 1) { + --sb-category-sponsor: @green; + --sb-category-selfpromo: @yellow; + --sb-category-exclusive_access: @teal; + --sb-category-interaction: @mauve; + --sb-category-poi_highlight: @pink; + --sb-category-intro: @sky; + --sb-category-outro: @blue; + --sb-category-preview: @sapphire; + --sb-category-filler: @lavender; + --sb-category-music_offtopic: @peach; + } } - } - &:not(.style-scope) { - --primary-text-color: @text !important; - --primary-background-color: @base !important; - --secondary-text-color: @subtext0 !important; - --disabled-text-color: @subtext1 !important; - --divider-color: @overlay0 !important; - --error-color: @red !important; - --primary-color: @accent !important; - --light-primary-color: @accent !important; - --dark-primary-color: @blue !important; - --accent-color: @accent !important; - --light-accent-color: @accent !important; - --dark-accent-color: @accent !important; - --light-theme-background-color: @base !important; - --light-theme-base-color: @text !important; - --light-theme-text-color: @text !important; - --light-theme-secondary-color: @subtext0 !important; - --light-theme-disabled-color: @subtext1 !important; - --light-theme-divider-color: @overlay0 !important; - --dark-theme-background-color: @base !important; - --dark-theme-base-color: @text !important; - --dark-theme-text-color: @text !important; - --dark-theme-secondary-color: @subtext0 !important; - --dark-theme-disabled-color: @subtext1 !important; - --dark-theme-divider-color: @overlay0 !important; + &:not(.style-scope) { + --primary-text-color: @text; + --primary-background-color: @base; + --secondary-text-color: @subtext0; + --disabled-text-color: @subtext1; + --divider-color: @overlay0; + --error-color: @red; + --primary-color: @accent; + --light-primary-color: @accent; + --dark-primary-color: @blue; + --accent-color: @accent; + --light-accent-color: @accent; + --dark-accent-color: @accent; + --light-theme-background-color: @base; + --light-theme-base-color: @text; + --light-theme-text-color: @text; + --light-theme-secondary-color: @subtext0; + --light-theme-disabled-color: @subtext1; + --light-theme-divider-color: @overlay0; + --dark-theme-background-color: @base; + --dark-theme-base-color: @text; + --dark-theme-text-color: @text; + --dark-theme-secondary-color: @subtext0; + --dark-theme-disabled-color: @subtext1; + --dark-theme-divider-color: @overlay0; + } } + #--variables() !important; + /* Misc */ & when (@logo = 0) { @@ -365,56 +395,46 @@ } } - #channel-name.ytd-video-meta-block { - --yt-endpoint-color: @accent !important; - --yt-endpoint-visited-color: @accent !important; - color: @accent !important; - } - - .yt-page-navigation-progress { - background: @accent !important; + #progress.yt-page-navigation-progress { + background: @accent; } /* Selected chapter */ ytd-macro-markers-list-item-renderer { - --ytd-macro-markers-list-item-background-color: @surface0 !important; - --ytd-macro-markers-list-item-title-color: @text !important; - --ytd-macro-markers-list-item-secondary-color: @subtext1 !important; - --ytd-macro-markers-list-item-timestamp-background-color: @surface1 - !important; + --ytd-macro-markers-list-item-background-color: @surface0; + --ytd-macro-markers-list-item-title-color: @text; + --ytd-macro-markers-list-item-secondary-color: @subtext1; + --ytd-macro-markers-list-item-timestamp-background-color: @surface1; } ytd-playlist-panel-video-renderer { - --yt-lightsource-section2-color: @surface1 !important; - --yt-lightsource-section4-color: @surface2 !important; - --yt-lightsource-primary-title-color: @text !important; - --yt-lightsource-secondary-title-color: @text !important; - --yt-active-playlist-panel-background-color: @surface0 !important; + --yt-lightsource-section2-color: @surface1; + --yt-lightsource-section4-color: @surface2; + --yt-lightsource-primary-title-color: @text; + --yt-lightsource-secondary-title-color: @text; + --yt-active-playlist-panel-background-color: @surface0; } ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette] .header.ytd-playlist-panel-renderer { - --iron-icon-fill-color: @text !important; - background-color: @base !important; + --iron-icon-fill-color: @text; + background-color: @base; } #container.ytd-masthead { - --iron-icon-fill-color: @text !important; + --iron-icon-fill-color: @text; } #background.ytd-masthead, #frosted-glass { - --yt-frosted-glass-desktop: @base !important; + --yt-frosted-glass-desktop: @base; + --yt-spec-frosted-glass-desktop: @base; } ytd-feed-filter-chip-bar-renderer[expand-instead-of-scroll] #chips-wrapper.ytd-feed-filter-chip-bar-renderer { - --iron-icon-fill-color: @text !important; - background-color: @base !important; - } - - #ytd-player #container when (@oled = 0) { - background: @crust !important; + --iron-icon-fill-color: @text; + background-color: @base; } .ytp-progress-list when not(@flavor = latte) { @@ -425,41 +445,31 @@ } ytd-expandable-metadata-renderer { - --yt-lightsource-section1-color: @base !important; - --yt-lightsource-section2-color: @surface0 !important; - --yt-lightsource-section3-color: @surface1 !important; - --yt-lightsource-section4-color: @surface2 !important; - --yt-lightsource-primary-title-color: @text !important; - --yt-lightsource-secondary-title-color: @subtext0 !important; + --yt-lightsource-section1-color: @base; + --yt-lightsource-section2-color: @surface0; + --yt-lightsource-section3-color: @surface1; + --yt-lightsource-section4-color: @surface2; + --yt-lightsource-primary-title-color: @text; + --yt-lightsource-secondary-title-color: @subtext0; } yt-live-chat-renderer { - --yt-button-default-text-color: @text !important; - --yt-button-default-background-color: @base !important; - --yt-button-dark-text-color: @base !important; - --yt-button-dark-background-color: @accent !important; - --yt-button-payment-background-color: @accent !important; + --yt-button-default-text-color: @text; + --yt-button-default-background-color: @base; + --yt-button-dark-text-color: @base; + --yt-button-dark-background-color: @accent; + --yt-button-payment-background-color: @accent; } yt-icon-button.yt-live-chat-item-list-renderer { background-color: @accent; - color: @crust; + color: @base; &:hover { background-color: darken(@accent, 5%); } } - ytd-author-comment-badge-renderer:not( - [style*="--ytd-author-comment-badge-icon-background-color: transparent;"] - ) { - --yt-basic-background-color: @surface0 !important; - --yt-basic-foreground-title-color: @surface0 !important; - --ytd-author-comment-badge-background-color: @surface0 !important; - --ytd-author-comment-badge-name-color: @text !important; - --ytd-author-comment-badge-icon-color: @text !important; - } - /* Skeleton */ #guide-skeleton, #home-container-skeleton, @@ -468,6 +478,12 @@ z-index: -1; } + ytd-app[is-shorts-page] { + background: var( + --yt-spec-base-background + ); // fix unset background on shorts page + } + #guide-skeleton .guide-ghost-icon, #guide-skeleton .guide-ghost-text, .masthead-skeleton-icon, @@ -479,7 +495,7 @@ /* Ambient mode */ #cinematics, #cinematic-container { - mix-blend-mode: lighten; + display: none; } .ytp-settings-button.ytp-hd-quality-badge::after, @@ -499,20 +515,15 @@ [fill="#FF0000"], [fill="#f03"], [fill="#FF0033"] { - fill: @accent !important; + fill: @accent; } [fill="white"] { - fill: if(@flavor = latte, @base, @text) !important; - } - - /* verification badge */ - [src*="https://www.gstatic.com/images/icons/material/system/1x/check_circle_grey600_36dp.png"] { - filter: @text-filter; + fill: if(@flavor = latte, @base, @text); } yt-icon.ytd-logo [fill="white"] { - fill: @crust !important; + fill: @crust; } .yt-spec-icon-shape { @@ -521,19 +532,18 @@ [fill="#fff"], [fill="#FFF"], [fill="#FFFFFF"] { - fill: @crust !important; + fill: @crust; } } - .yt-spec-icon-badge-shape--style-overlay .yt-spec-icon-badge-shape__icon, - .yt-spec-icon-badge-shape { + /* Notifications Bell and Indicator */ + .ytSpecIconBadgeShapeStyleOverlay .ytSpecIconBadgeShapeIcon, + .ytSpecIconBadgeShapeBadge { color: @text; } - - .yt-spec-icon-badge-shape--type-notification - .yt-spec-icon-badge-shape__badge { - background-color: @accent !important; - color: @surface0 !important; + .ytSpecIconBadgeShapeTypeNotification .ytSpecIconBadgeShapeBadge { + background-color: @accent; + color: @base; } /* Buttons */ @@ -546,21 +556,21 @@ [fill="rgb(3,3,3)"], [fill="rgb(0,0,0)"], [fill="rgb(255,255,255)"] { - fill: @text !important; + fill: @text; } [stroke="rgb(0,0,0)"], [stroke="rgb(255,255,255)"] { - stroke: @text !important; + stroke: @text; } /* Accent for filled-in thumbs up (like button) */ [animated-icon-type="LIKE"] { g path[fill] { - fill: @accent !important; + fill: @accent; + [stroke] { - stroke: @accent !important; + stroke: @accent; } } } @@ -593,7 +603,7 @@ } &.yt-spec-button-shape-next--filled { - color: @crust; + color: @base; background-color: @accent; &:hover { @@ -603,8 +613,7 @@ } .yt-spec-button-shape-next--disabled { - background-color: fade(@overlay0, 50%); - color: @subtext0; + color: @overlay1; } .yt-spec-button-shape-next--overlay { @@ -617,10 +626,13 @@ } &.yt-spec-button-shape-next--text { color: @text; + &:hover { + background-color: @surface0; + } } &.yt-spec-button-shape-next--filled { - color: @crust; + color: @base; background-color: @accent; } @@ -653,7 +665,7 @@ } &.yt-spec-button-shape-next--filled { - color: @crust; + color: @base; background-color: @accent; &:hover { @@ -668,115 +680,87 @@ } /* Search box */ - ytd-searchbox[has-focus] #container.ytd-searchbox { - border-color: @accent; - } .ytSearchboxComponentInputBox, .ytSearchboxComponentInputBoxDark { - background: var(--ytd-searchbox-background) !important; - color: var(--ytd-searchbox-text-color) !important; - border-color: var(--ytd-searchbox-border-color) !important; + background: var(--ytd-searchbox-background); + color: var(--ytd-searchbox-text-color); + border-color: var(--ytd-searchbox-border-color); box-shadow: none; } .ytSearchboxComponentInputBoxHasFocus, .ytSearchboxComponentInputBoxHasFocusDark { - border-color: @accent !important; + border-color: @accent; } - .ytSuggestionComponentSuggestionHover:hover, - .ytSuggestionComponentSuggestionHoverDark:hover { - background: @surface1 !important; + .ytSuggestionComponentPersonalizedSuggestion { + color: @text; + } + .ytSuggestionComponentHighlighted { + background: @surface1; + } + .ytSuggestionComponentLargerRemovedText { + color: @overlay1; } .ytSearchboxComponentSuggestionsContainer, .ytSearchboxComponentSuggestionsContainerDark { - background: var(--yt-spec-raised-background) !important; - border-color: var(--yt-spec-raised-background) !important; + background: var(--yt-spec-raised-background); + border-color: var(--yt-spec-raised-background); } .ytSuggestionComponentSuggestion, .ytSuggestionComponentSuggestionDark { - color: var(--ytd-searchbox-text-color) !important; + color: var(--ytd-searchbox-text-color); } .ytSearchboxComponentSearchButton, .ytSearchboxComponentSearchButtonDark { - color: var(--ytd-searchbox-text-color) !important; - background: @surface0 !important; - border-color: var(--ytd-searchbox-border-color) !important; + color: var(--ytd-searchbox-text-color); + background: var(--yt-spec-raised-background); + border-color: var(--ytd-searchbox-border-color); } .ytSearchboxComponentClearButtonIcon, .ytSearchboxComponentClearButtonIconDark { - color: var(--ytd-searchbox-text-color) !important; - } - - .ytSearchboxComponentReportButton, - .ytSearchboxComponentReportButtonDark, - .ytSuggestionComponentRemoveLink, - .ytSuggestionComponentRemoveLinkDark { - color: @subtext0 !important; - } - - .sbsb_a { - background: @surface0; - } - .sbdd_b { - border-color: var(--yt-spec-raised-background); - background-color: var(--yt-spec-raised-background); - } - .sbpqs_a, - .gsfs { - color: var(--yt-spec-text-primary); - } - .sbsb_i { - color: var(--yt-spec-call-to-action); - } - .sbsb_d { - background-color: var(--yt-spec-additive-background); - } - .sbdd_c { - visibility: hidden; - } - - /* "Suggestion removed" */ - .sbpqs_c { - color: @overlay1; - } - - .sbpqs_a::before, - .sbqs_c::before { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - background: none; + color: var(--ytd-searchbox-text-color); } /* Video description */ - #description { - [style*="color: rgb(255, 255, 255);"], - [style*="color: rgb(19, 19, 19);"] { - color: @text !important; - } + // Video description background (collapsed on hover) + ytd-watch-metadata { + --yt-saturated-raised-background: @surface1 !important; + --yt-saturated-text-primary: @text !important; + --yt-saturated-text-secondary: @subtext1 !important; + } + // Video description text (expanded) + ytd-text-inline-expander + .ytAttributedStringLinkInheritColor:not( + .ytAttributedStringLink + ) { + color: @text !important; + } + // Video description YouTube links + .ytAttributedStringHighlightTextDecorator { + background-color: @surface2 !important; } - .yt-core-attributed-string__link--call-to-action-color { + /* Links */ + .ytAttributedStringLinkCallToActionColor { color: @accent; } - .YtwCourseProgressViewModelHostProgressTitle, - .YtwCourseProgressViewModelHostProgressSubtitle { + /* Course Playlist (e.g. https://www.youtube.com/playlist?list=PLZHQObOWTQDNPOjrT6KVlfJuKtYTftqH6) */ + .ytwCourseProgressViewModelHostProgressTitle, + .ytwCourseProgressViewModelHostProgressSubtitle { color: @text; } - - .YtwCourseProgressViewModelHostProgressBar { + .ytwCourseProgressViewModelHostProgressBar { background-color: fade(@white, 20%); - .YtwCourseProgressViewModelHostProgressBarFill { + .ytwCourseProgressViewModelHostProgressBarFill { background-color: @text; } } @@ -790,49 +774,92 @@ color: @subtext0; } - /* Thumbnails */ + // "Ask" - AI chat + .ytVideoDescriptionYouchatSectionViewModelSectionTitle { + color: @text; + } + .ytVideoDescriptionYouchatSectionViewModelSubHeaderText { + color: @subtext0; + } + .ytwYouChatItemViewModelHost { + color: @text; + } + .ytwYouChatChipsDataChip { + color: @text; + border-color: @surface2; - #time-status:has([aria-label="LIVE"]), - .badge[aria-label="LIVE"], - .badge[aria-label="PREMIERE"], - .badge-shape-wiz--live.badge-shape-wiz--overlay, - .badge-shape-wiz--thumbnail-live { - background: @accent; - color: @crust; + &:hover { + background-color: @surface1; + } } - #thumbnail [style="background-color: rgba(51, 51, 51, 0.8);"], - .YtInlinePlayerControlsTopRightControlsCircleButton, - .badge-shape-wiz--default.badge-shape-wiz--overlay, - .branding-context-container-inner { - background-color: @surface0 !important; + .chatInputViewModelChatDisclaimer { + color: @subtext0; + } + + // Timeline/Transcript + .ytwTimelineChapterViewModelTitle, + .ytShelfHeaderLayoutTitle { color: @text; } + .ytwTranscriptSegmentViewModelHost { + color: @subtext0; + } + .ytwTranscriptSegmentViewModelTimestamp { + background-color: @surface2; + color: @subtext1; + } + .ytwTranscriptSegmentViewModelTimestampActive { + background-color: @overlay0; + color: @text; + } + + // Video Attributes (Music, Games) + .videoAttributesSectionViewModelTitle, + .ytVideoAttributeViewModelTitle { + color: @text; + } + .ytVideoAttributeViewModelSubtitle, + .ytVideoAttributeViewModelSecondarySubtitle { + color: @subtext1; + } + + /* Thumbnails */ + .ytp-sb-unsubscribe { background-color: @surface2; color: @text; } .ytp-sb-subscribe { background-color: @accent; - color: @crust; + color: @base; } - ytd-thumbnail-overlay-resume-playback-renderer { - background-color: @surface1; + + // Watch progress bar + .ytThumbnailOverlayProgressBarHostWatchedProgressBar { + background-color: @surface2; } - .badge-shape-wiz--thumbnail-default { - color: @text; - background: fade(@crust, 80%); + .ytThumbnailOverlayProgressBarHostWatchedProgressBarSegment { + background: @accent; + } + // Watch progress bar (legacy component) + ytd-thumbnail-overlay-resume-playback-renderer { + background-color: @surface2; + + #progress.ytd-thumbnail-overlay-resume-playback-renderer { + background: @accent; + } } /* Panels, popups, tooltips */ .ytp-tooltip-bottom-text { - background: fade(@surface0, 90%) !important; + background: fade(@surface0, 90%); color: @text; - text-shadow: none !important; + text-shadow: none; } .ytp-popup { - background: fade(@surface0, 90%) !important; + background: fade(@surface0, 90%); text-shadow: none; } @@ -848,10 +875,6 @@ color: @text; } - .ytp-panel-header { - border-bottom-color: @surface2; - } - .ytp-panel-footer-content-link { color: @accent; } @@ -863,39 +886,40 @@ background-image: url("data:image/svg+xml,@{svg}"); } + .ytp-menuitem[aria-checked="false"] .ytp-menuitem-toggle-checkbox { + &::after { + background-color: @overlay1; + } + } .ytp-menuitem[aria-checked="true"] .ytp-menuitem-toggle-checkbox { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - background-color: @accent; + background-color: @surface2; + + &::after { + background-color: @text; + } } .ytp-menuitem { &:not([aria-disabled="true"]):hover { background-color: @surface1; } + } - svg > path:not([fill="none"]) { - fill: @text !important; - } + /* Video player */ - &[aria-haspopup="true"] .ytp-menuitem-content { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); + // Shorts and video hover preview progress bars + yt-progress-bar { + .ytProgressBarLineProgressBarPlayed, + .ytProgressBarPlayheadProgressBarPlayheadDot { + background: @accent; } - &[role="menuitemradio"][aria-checked="true"] .ytp-menuitem-label { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); + + .ytProgressBarLineProgressBarHovered, + .ytProgressBarLineProgressBarBackground { + background: @text; // (background) opacity is already adequately set } } - /* Video player */ - .ytp-cards-button { .ytp-cards-button-icon { use { @@ -918,15 +942,18 @@ .html5-video-player { color: @white; + & when (@oled = 0) { + background-color: @crust; + } .ytp-swatch-background-color, .ytp-play-progress { - background: @accent !important; + background: @accent; } .ytp-svg-fill, [fill="#fff"] { - fill: @white !important; + fill: @white; } .ytp-volume-slider-handle { @@ -954,17 +981,6 @@ } } - /* youtube live ring */ - .yt-spec-avatar-shape__badge-text { - color: @crust; - } - .yt-spec-avatar-shape--live-ring { - border-color: @accent; - } - .yt-spec-avatar-shape__live-badge { - background-color: @accent; - } - .ytp-button, .ytp-subtitles-button { &[aria-pressed]::after { @@ -979,29 +995,23 @@ } .ytp-autonav-toggle-button { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); + background-color: @surface2; &::after { @svg: escape( - '' + '' ); - background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); + background-image: url("data:image/svg+xml,@{svg}"); + background-color: @overlay1; } &[aria-checked="true"] { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); - &::after { @svg: escape( - '' + '' ); - background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); + background-image: url("data:image/svg+xml,@{svg}"); + background-color: @white; } } } @@ -1009,15 +1019,12 @@ /* Video highlight */ ytd-rich-item-renderer.ytd-rich-item-renderer-highlight { - background-color: fade(@accent, 10%) !important; - box-shadow: fade(@accent, 10%) 0 0 0 10px !important; + background-color: fade(@accent, 10%); + box-shadow: fade(@accent, 10%) 0 0 0 10px; } #shorts-container { --yt-spec-static-overlay-text-primary: @white; - .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--tonal { - color: @white; - } .YtwFactoidRendererLabel { color: @subtext0; @@ -1027,35 +1034,19 @@ } ytd-reel-video-renderer:not([is-watch-while-mode]) { - .yt-spec-button-shape-with-label__label { + .ytSpecButtonShapeWithLabelLabel { color: @subtext1; } } ytd-reel-video-renderer[is-watch-while-mode] - .yt-spec-button-shape-with-label__label { + .ytSpecButtonShapeWithLabelLabel { color: @white; } - .yt-spec-button-shape-next--overlay-dark.yt-spec-button-shape-next--tonal, - .YtdDesktopShortsVolumeControlsBackgroundScrim { - background-color: fade(@black, 60%); + .ytdVolumeControlsMuteIcon { color: @white; } - .YtProgressBarLineProgressBarPlayed, - .YtProgressBarPlayheadProgressBarPlayheadDot { - background-color: @accent !important; - } - - .yt-spec-button-shape-next--overlay-dark.yt-spec-button-shape-next--filled { - background-color: @accent; - color: @crust; - } - - .YtdDesktopShortsVolumeControlsMuteIcon { - color: @white !important; - } - /* Buy super thanks button */ .YtdShortsSuggestedActionStaticHostContainer { background-color: fade(@black, 60%); @@ -1066,6 +1057,54 @@ } } } + // Video/thumbnail renderer overlayed buttons + .ytBadgeShapeThumbnailDefaultRedesign, // Timestamp + // Play Next + .yt-spec-button-shape-next--overlay-dark.yt-spec-button-shape-next--tonal[style="background-color: rgba(0, 0, 0, 0.3);"], + .ytdVolumeControlsBackgroundScrim, // Shorts Volume Slider + .ytInlinePlayerControlsTopRightControlsCircleButton // Homepage + { + background: fade(@black, 60%) !important; + color: @white; + } + + .yt-spec-button-shape-next--overlay-dark.yt-spec-button-shape-next--filled { + background: @accent; + color: @base; + } + + /* Video previews */ + + // Background (on hover) + .ytSpecTouchFeedbackShapeHoverEffect { + background-color: @surface0 !important; + } + // Title + .ytLockupMetadataViewModelTitle { + color: @text !important; + } + // Details + .ytLockupMetadataViewModelMetadata { + color: @subtext0 !important; + } + // Badges (e.g. "CC", "New") + .ytBadgeShapeDefault { + color: @subtext0; + background: @surface1; + + &.ytBadgeShapeModern { + background: none; + } + } + // "Fundraiser" + .ytBadgeShapeCommerce { + color: @green; + } + // "Live" + .ytBadgeShapeThumbnailLive { + background: @accent; + color: @base; + } /* Shorts titles and views on homepage */ .shortsLockupViewModelHostOutsideMetadataEndpoint { @@ -1077,12 +1116,12 @@ /* Buy super thanks bar */ #progressContainer.tp-yt-paper-progress { - background-color: @mantle !important; + background-color: @mantle; } #comment-chip-container.yt-pdg-comment-chip-renderer, .slider-knob-inner.tp-yt-paper-slider { - background: @accent !important; + background: @accent; } #primaryProgress.tp-yt-paper-progress { @@ -1090,7 +1129,7 @@ } #container.ytd-pdg-comment-preview-renderer { - background-color: @mantle !important; + background-color: @mantle; } #comment-chip-price.yt-pdg-comment-chip-renderer, @@ -1098,80 +1137,178 @@ color: @crust; } + /* Avatar */ + .ytSpecAvatarShapeLiveRing::after { + background: @accent !important; + } + .ytSpecAvatarShapeLiveBadge { + background-color: @accent; + } + .ytSpecAvatarShapeLiveBadgeText { + color: @base; + } + /* Channel pages */ - .yt-tab-shape-wiz__tab { + + // Channel name + .ytPageHeaderViewModelHost { + .ytPageHeaderViewModelTitle { + color: @text; + } + + // Subscribers and video statistics + .ytPageHeaderViewModelContentMetadata { + color: @subtext0; + } + + // Handle and verified checkmark + [style$="color: rgb(255, 255, 255);"] { + color: @text !important; + } + } + // Channel bio + .ytTruncatedTextHost { + color: @subtext0; + } + // "...More", "and X more links" + .ytAttributionViewModelSuffix .ytAttributedStringLinkCallToActionColor, + .ytTruncatedTextAbsoluteButton { + color: @text; + } + + // Channel tabs + .ytTabShapeTab { color: @subtext1; } - .yt-tab-shape-wiz__tab--tab-selected { + .ytTabShapeTabSelected { color: @text; } - .yt-tab-group-shape-wiz__slider { + .tabGroupShapeSlider { background-color: @text; } - .yt-tab-shape-wiz:hover .yt-tab-shape-wiz__tab-bar { + .ytTabShapeHost:hover .ytTabShapeTabBar { background-color: @subtext1; } - .truncated-text-wiz, - .page-header-view-model-wiz__page-header-content-metadata { - color: @subtext1; + + /* Components */ + + /* Menus and context sheets */ + .ytContextualSheetLayoutHost, ytd-menu-popup-renderer { + background-color: @mantle; } - .page-header-view-model-wiz__page-header-title, - [style="color: rgb(255, 255, 255);"]:has(svg), - .truncated-text-wiz__absolute-button { - color: @text !important; + .ytListItemViewModelTappable:hover { + background-color: @surface0; + } + .ytPanelHeaderViewModelTitle, + .ytListItemViewModelTitle, + .ytListItemViewModelAccessory { + color: @text; + } + .ytListItemViewModelSubtitle { + color: @subtext1; } - .yt-contextual-sheet-layout-wiz { + /* Dialogs */ + .ytSpecDialogLayoutHost { background-color: @mantle; - .yt-list-item-view-model-wiz__container--tappable:hover { - background-color: @surface0; - } - - .yt-list-item-view-model-wiz__title, - .yt-list-item-view-model-wiz__accessory, - .radio-shape-wiz__label-container { + .ytDialogHeaderViewModelText { color: @text; } } - /* channel details */ - .profile-badge-view-model-wiz__badge-description { - color: @text !important; + /* Dropdowns */ + .ytDropdownViewModelTitle { + color: @text; } - - .profile-badge-view-model-wiz__badge-subtitle { - color: @subtext0 !important; + .ytDropdownViewModelLabel { + color: @subtext0; } - - .yt-profile-identity-info-view-model-wiz__divider { - border-color: @surface0 !important; + .ytDropdownViewModelSupportError { + color: @red; } + .ytDropdownViewModelDropdownContainerErrorBorder { + border-color: @red; + } + .ytStandardsTextareaShapeTextareaContainerOutline:focus-within { + border-color: @text; + } + + /* Toggles/Switches */ - /* Profiles */ - .yt-profile-card-view-model-wiz { + .ytSwitchShapeTrack { + background-color: @surface2; + } + .ytSwitchShapeKnob { background-color: @mantle; } - .yt-profile-identity-info-view-model-wiz__channel-name, - .yt-profile-identity-info-view-model-wiz__metadata-handle-with-bold-font, - .yt-profile-info-view-model-wiz__section-title, - .yt-comment-interaction-view-model-wiz__video-title, - .yt-shared-subscription-view-model-wiz__channel-name { + .ytSwitchShapeTrackActive { + background-color: @accent; + } + + /* Textareas */ + .ytStandardsTextareaShapeTextarea { color: @text; } - .yt-profile-identity-info-view-model-wiz__badge, - .yt-profile-identity-info-view-model-wiz__metadata-handle, - .yt-profile-identity-info-view-model-wiz__metadata-content, - .yt-profile-identity-info-view-model-wiz__metadata-delimiter, - .yt-profile-identity-info-view-model-wiz__metadata-pronouns, - .yt-profile-info-view-model-wiz__section-divider, - .yt-profile-info-view-model-wiz__section-subtitle, - .yt-comment-interaction-view-model-wiz__comment-content { + .ytStandardsTextareaShapePlaceholder { color: @subtext0; } + .ytStandardsTextareaShapeTextarea::placeholder { + color: transparent !important; // defaults important overrides this + } - /* Horizontal list arrows */ - .arrow.yt-horizontal-list-renderer { - background: @surface0; + /* Comments */ + .ytSubThreadConnection, + .ytSubThreadContinuation { + border-left-color: @surface1; + } + .ytSubThreadConnection { + border-bottom-color: @surface1; + } + .ytSubThreadHovered > .ytSubThreadThreadline .ytSubThreadConnection, + .ytSubThreadHovered > .ytSubThreadThreadline .ytSubThreadContinuation { + border-left-color: @overlay0; + } + .ytSubThreadHovered > .ytSubThreadThreadline .ytSubThreadConnection { + border-bottom-color: @overlay0; + } + + /* Profile Card */ + // (Click a user's profile picture in the comments to view.) + .ytProfileCardViewModelHost { + background-color: @mantle; + + // Name and handle + .ytProfileIdentityInfoViewModelChannelName, + .ytProfileIdentityInfoViewModelMetadataHandleWithBoldFont { + color: @text; + } + // Verification badge + .ytProfileIdentityInfoViewModelBadge { + filter: @text-filter; + } + // Statistics + .ytProfileIdentityInfoViewModelMetadataContent { + color: @subtext0; + } + + // Subsection (e.g. "On this channel") + .ytProfileInfoViewModelSectionTitle { + color: @text; + } + .ytProfileInfoViewModelSectionSubtitle { + color: @subtext1; + } + .ytProfileInfoViewModelSectionHeartIcon { + filter: @subtext1-filter; + } + + // Subsection - "Recent comments on this channel" + .ytCommentInteractionViewModelVideoTitle { + color: @text; + } + .ytCommentInteractionViewModelCommentContent { + color: @subtext1; + } } /* Live chat replay */ @@ -1185,44 +1322,19 @@ .yt-icon-shape { color: @text; } - } - - /* AI-generated video summary */ - .video-summary-content-view-model-wiz__paragraph { - color: @text; - } - - /* Playlist collapsed sidebar */ - #next-video-title { - color: @text !important; - } - #publisher-container { - .yt-simple-endpoint.style-scope.yt-formatted-string, - .index-message-wrapper.style-scope.ytd-playlist-panel-renderer, - .index-message-wrapper.style-scope.ytd-playlist-panel-renderer::before { - color: @subtext0 !important; + .ytTextCarouselItemViewModelHost { + color: @subtext1; } } - /* Playlist metadata */ - .metadata-stats.style-scope.ytd-playlist-byline-renderer, - .yt-lockup-metadata-view-model-wiz__metadata { - color: @subtext0 !important; - } - - /* Playlist titles in search results */ - .yt-core-attributed-string.yt-core-attributed-string--white-space-pre-wrap { - color: @text !important; - } - /* Category tag pills */ .ytChipShapeInactive { - background-color: @surface0 !important; - color: @text !important; + background-color: @surface0; + color: @text; } .ytChipShapeActive { - background-color: @accent !important; - color: @crust !important; + background-color: @accent; + color: @base; } } } @@ -1254,115 +1366,114 @@ [light], html[light], html[light][light] { - --yt-spec-black-pure-alpha-80: (null) !important; - --yt-spec-black-pure-alpha-60: (null) !important; - --yt-spec-black-1-alpha-98: (null) !important; - --yt-spec-black-1-alpha-95: (null) !important; - --iron-icon-fill-color: unset !important; - - --yt-spec-text-primary: @text !important; - --ytcp-text-primary: @text !important; - --ytcp-text-primary-inverse: @base !important; - --ytcp-static-overlay-text-primary-inverse: @base !important; - --ytcp-wordmark-text: @text !important; - --ytcp-text-secondary: @subtext0 !important; - --ytcp-text-disabled: @subtext1 !important; - --ytcp-overlay-text-primary: @overlay2 !important; - - --ytcp-general-background-a: @base !important; - --yt-spec-base-background: @base !important; - --yt-spec-black-3: @base !important; - - --yt-spec-brand-background-solid: @mantle !important; - --ytcp-brand-background-solid: @mantle !important; - --yt-spec-raised-background: @mantle !important; - --ytcp-general-background-b: @mantle !important; - --ytcp-analytics-reach-background: @mantle !important; - --yt-spec-black-2: @mantle !important; - - --ytcp-general-background-c: @crust !important; - --ytcp-menu-background: @surface0 !important; - - --ytcp-container-border-color: @surface0 !important; - --ytcp-container-hovered-border-color: @surface0 !important; - --ytcp-line-divider-solid: @surface0 !important; - --ytcp-container-border-color-inverse: @subtext0 !important; - --ytcp-line-divider-solid-inverse: @subtext0 !important; - - --ytcp-call-to-action: @accent !important; - --ytcp-call-to-action-inverse: @mantle !important; - --ytcp-call-to-action-raised-background: @accent !important; - --yt-spec-brand-button-background: @accent !important; - --ytcp-call-to-action-raised-disabled: @surface2 !important; - --ytcp-call-to-action-raised-disabled-background: @overlay2 !important; - --ytcp-call-to-action-raised-background-inverse: @base !important; - --ytcp-call-to-action-raised-disabled-inverse: @surface2 !important; - --ytcp-call-to-action-raised-disabled-background-inverse: @overlay2 - !important; - - --yt-spec-brand-background-primary: @surface0 !important; - - --yt-compact-link-icon-color: @overlay2 !important; - --ytcp-icon-active: @accent !important; - --ytcp-icon-inactive: @overlay2 !important; - --ytcp-icon-disabled: @overlay0 !important; - --ytcp-icon-active-inverse: @overlay1 !important; - --ytcp-icon-disabled-inverse: @subtext1 !important; - - --ytcp-error-red: @red !important; - --ytcp-badge-red: @red !important; - --ytcp-error-red-inverse: @red !important; - --ytcp-themed-red-inverse: @red !important; - --ytcp-themed-red: @accent !important; - --ytcp-themed-blue: @accent !important; + --yt-spec-black-pure-alpha-80: (null); + --yt-spec-black-pure-alpha-60: (null); + --yt-spec-black-1-alpha-98: (null); + --yt-spec-black-1-alpha-95: (null); + --iron-icon-fill-color: unset; + + --yt-spec-text-primary: @text; + --ytcp-text-primary: @text; + --ytcp-text-primary-inverse: @base; + --ytcp-static-overlay-text-primary-inverse: @base; + --ytcp-wordmark-text: @text; + --ytcp-text-secondary: @subtext0; + --ytcp-text-disabled: @subtext1; + --ytcp-overlay-text-primary: @overlay2; + + --ytcp-general-background-a: @base; + --yt-spec-base-background: @base; + --yt-spec-black-3: @base; + + --yt-spec-brand-background-solid: @mantle; + --ytcp-brand-background-solid: @mantle; + --yt-spec-raised-background: @mantle; + --ytcp-general-background-b: @mantle; + --ytcp-analytics-reach-background: @mantle; + --yt-spec-black-2: @mantle; + + --ytcp-general-background-c: @crust; + --ytcp-menu-background: @surface0; + + --ytcp-container-border-color: @surface0; + --ytcp-container-hovered-border-color: @surface0; + --ytcp-line-divider-solid: @surface0; + --ytcp-container-border-color-inverse: @subtext0; + --ytcp-line-divider-solid-inverse: @subtext0; + + --ytcp-call-to-action: @accent; + --ytcp-call-to-action-inverse: @mantle; + --ytcp-call-to-action-raised-background: @accent; + --yt-spec-brand-button-background: @accent; + --ytcp-call-to-action-raised-disabled: @surface2; + --ytcp-call-to-action-raised-disabled-background: @overlay2; + --ytcp-call-to-action-raised-background-inverse: @base; + --ytcp-call-to-action-raised-disabled-inverse: @surface2; + --ytcp-call-to-action-raised-disabled-background-inverse: @overlay2; + + --yt-spec-brand-background-primary: @surface0; + + --yt-compact-link-icon-color: @overlay2; + --ytcp-icon-active: @accent; + --ytcp-icon-inactive: @overlay2; + --ytcp-icon-disabled: @overlay0; + --ytcp-icon-active-inverse: @overlay1; + --ytcp-icon-disabled-inverse: @subtext1; + + --ytcp-error-red: @red; + --ytcp-badge-red: @red; + --ytcp-error-red-inverse: @red; + --ytcp-themed-red-inverse: @red; + --ytcp-themed-red: @accent; + --ytcp-themed-blue: @accent; --ytcp-badge-blue: fade(@accent, 30%); - --ytcp-badge-blue-solid: @blue !important; - --ytcp-themed-blue-inverse: @blue !important; - --ytcp-themed-green: @green !important; - --ytmus-genre-primary-melon: @green !important; - --ytcp-themed-green-inverse: @green !important; - --ytcp-analytics-pine: @green !important; - --ytcp-analytics-pine-inverse: @green !important; - --ytcp-analytics-parrot: @green !important; - --ytcp-themed-yellow: @peach !important; - --ytmus-genre-primary-gold: @peach !important; - --ytcp-yellow-inverse: @peach !important; - --ytcp-badge-yellow: @peach !important; - --ytcp-analytics-yellow: @peach !important; - --ytcp-analytics-apricot: @peach !important; - --ytcp-suggested-action: @teal !important; - --ytcp-analytics-overview: @teal !important; - --ytcp-analytics-revenue: @teal !important; - --ytcp-analytics-default-secondary: @teal !important; - --ytcp-analytics-royal-blue: @lavender !important; - --ytcp-analytics-reach: @lavender !important; - --ytcp-analytics-audience: @lavender !important; - --ytcp-analytics-engagement: @pink !important; - --ytcp-analytics-revenue-secondary: @pink !important; - --ytcp-analytics-bubblegum: @flamingo !important; - --ytmus-genre-primary-ruby: @flamingo !important; - --ytmus-genre-primary-salmon: @mauve !important; - --ytmus-genre-primary-orange: @maroon !important; - --ytmus-genre-primary-sky: @sky !important; - --ytmus-genre-primary-sky-inverse: @sky !important; - - --yt-spec-badge-chip-background: @surface1 !important; - --ytcp-focus-inverse: @accent !important; - --ytcp-focus: @accent !important; - --ytcp-selected-item: @accent !important; - --ytcp-hover-item: @overlay2 !important; - --ytcp-chip-active-focus: @accent !important; - --ytcp-playhead: @overlay2 !important; - --ytcp-playhead-inverse: @overlay2 !important; + --ytcp-badge-blue-solid: @blue; + --ytcp-themed-blue-inverse: @blue; + --ytcp-themed-green: @green; + --ytmus-genre-primary-melon: @green; + --ytcp-themed-green-inverse: @green; + --ytcp-analytics-pine: @green; + --ytcp-analytics-pine-inverse: @green; + --ytcp-analytics-parrot: @green; + --ytcp-themed-yellow: @peach; + --ytmus-genre-primary-gold: @peach; + --ytcp-yellow-inverse: @peach; + --ytcp-badge-yellow: @peach; + --ytcp-analytics-yellow: @peach; + --ytcp-analytics-apricot: @peach; + --ytcp-suggested-action: @teal; + --ytcp-analytics-overview: @teal; + --ytcp-analytics-revenue: @teal; + --ytcp-analytics-default-secondary: @teal; + --ytcp-analytics-royal-blue: @lavender; + --ytcp-analytics-reach: @lavender; + --ytcp-analytics-audience: @lavender; + --ytcp-analytics-engagement: @pink; + --ytcp-analytics-revenue-secondary: @pink; + --ytcp-analytics-bubblegum: @flamingo; + --ytmus-genre-primary-ruby: @flamingo; + --ytmus-genre-primary-salmon: @mauve; + --ytmus-genre-primary-orange: @maroon; + --ytmus-genre-primary-sky: @sky; + --ytmus-genre-primary-sky-inverse: @sky; + + --yt-spec-badge-chip-background: @surface1; + --ytcp-focus-inverse: @accent; + --ytcp-focus: @accent; + --ytcp-selected-item: @accent; + --ytcp-hover-item: @overlay2; + --ytcp-chip-active-focus: @accent; + --ytcp-playhead: @overlay2; + --ytcp-playhead-inverse: @overlay2; } ytcp-button.destructive.ytls-error-dialog { - color: @base !important; + color: @base; } yt-formatted-string.ytls-error-dialog, tp-yt-iron-icon.ytls-error-dialog { - color: @text !important; + color: @text; } } } @@ -1434,7 +1545,7 @@ } &.selected .chip-container { - color: @crust; + color: @base; background-color: @accent; } } diff --git a/styles/zen-browser-docs/catppuccin.user.less b/styles/zen-browser-docs/catppuccin.user.less index 43362af190..b8f5d4906f 100644 --- a/styles/zen-browser-docs/catppuccin.user.less +++ b/styles/zen-browser-docs/catppuccin.user.less @@ -2,7 +2,7 @@ @name Zen Browser Docs Catppuccin @namespace github.com/catppuccin/userstyles/styles/zen-browser-docs @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/zen-browser-docs -@version 2025.09.06 +@version 2026.08.16 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/zen-browser-docs/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Azen-browser-docs @description Soothing pastel theme for Zen Browser Docs @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("zen-browser.app") { :root[data-theme="light"], diff --git a/template/catppuccin.user.less b/template/catppuccin.user.less index 8963dd6a92..d90daf4b01 100644 --- a/template/catppuccin.user.less +++ b/template/catppuccin.user.less @@ -15,7 +15,7 @@ @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; @-moz-document domain("") { /* This section applies the light/dark themes automatically based on the user's system theme.